fix: written more similar to pagniation component and fix some type

issues

packages/core/src/stepper/index.tsx

@@ -1,104 +1,125 @@
-// src/stepper/index.tsx
-import {
-	StepperIndicator as Indicator,
-  type StepperIndicatorOptions as IndicatorOptions,
-  type StepperIndicatorProps as IndicatorProps,
-} from "./stepper-indicator";
-
 import {
   StepperContent as Content,
-  type StepperContentOptions,
   type StepperContentProps,
+  type StepperContentOptions,
+  type StepperContentCommonProps,
+  type StepperContentRenderProps,
 } from "./stepper-content";
-
 import {
   StepperItem as Item,
-  type StepperItemOptions,
   type StepperItemProps,
+  type StepperItemOptions,
+  type StepperItemCommonProps,
+  type StepperItemRenderProps,
 } from "./stepper-item";
-
 import {
-  type StepperListOptions,
-  type StepperListProps,
   StepperList as List,
+  type StepperListProps,
+  type StepperListOptions,
+  type StepperListCommonProps,
+  type StepperListRenderProps,
 } from "./stepper-list";
-
 import {
-  type StepperPortalProps,
-  StepperPortal as Portal,
-} from "./stepper-portal";
-
+  StepperNextTrigger as NextTrigger,
+  type StepperNextTriggerProps,
+  type StepperNextTriggerOptions,
+  type StepperNextTriggerCommonProps,
+  type StepperNextTriggerRenderProps,
+} from "./stepper-next-trigger";
+import {
+  StepperPrevTrigger as PrevTrigger,
+  type StepperPrevTriggerProps,
+  type StepperPrevTriggerOptions,
+  type StepperPrevTriggerCommonProps,
+  type StepperPrevTriggerRenderProps,
+} from "./stepper-prev-trigger";
 import {
-  type StepperRootProps,
   StepperRoot as Root,
+  type StepperRootProps,
+  type StepperRootOptions,
+  type StepperRootCommonProps,
+  type StepperRootRenderProps,
 } from "./stepper-root";
-
 import {
-  type StepperSeparatorOptions,
-  type StepperSeparatorProps,
   StepperSeparator as Separator,
+  type StepperSeparatorProps,
+  type StepperSeparatorOptions,
+  type StepperSeparatorCommonProps,
+  type StepperSeparatorRenderProps,
 } from "./stepper-separator";
-
 import {
-  type StepperTriggerOptions,
-  type StepperTriggerProps,
   StepperTrigger as Trigger,
+  type StepperTriggerProps,
+  type StepperTriggerOptions,
+  type StepperTriggerCommonProps,
+  type StepperTriggerRenderProps,
 } from "./stepper-trigger";
-
 import {
-  type StepperCompletedContentOptions,
-  type StepperCompletedContentProps,
   StepperCompletedContent as CompletedContent,
+  type StepperCompletedContentProps,
+  type StepperCompletedContentOptions,
+  type StepperCompletedContentCommonProps,
+  type StepperCompletedContentRenderProps,
 } from "./stepper-completed-content";
 
-import {
-  type StepperNavigationOptions,
-  type StepperNavigationProps,
-  StepperNavigation as Navigation,
-} from "./stepper-navigation";
-
 export type {
-  IndicatorOptions,
-  IndicatorProps,
   StepperContentOptions,
+  StepperContentCommonProps,
+  StepperContentRenderProps,
   StepperContentProps,
   StepperItemOptions,
+  StepperItemCommonProps,
+  StepperItemRenderProps,
   StepperItemProps,
   StepperListOptions,
+  StepperListCommonProps,
+  StepperListRenderProps,
   StepperListProps,
-  StepperPortalProps,
+  StepperNextTriggerOptions,
+  StepperNextTriggerCommonProps,
+  StepperNextTriggerRenderProps,
+  StepperNextTriggerProps,
+  StepperPrevTriggerOptions,
+  StepperPrevTriggerCommonProps,
+  StepperPrevTriggerRenderProps,
+  StepperPrevTriggerProps,
+  StepperRootOptions,
+  StepperRootCommonProps,
+  StepperRootRenderProps,
   StepperRootProps,
   StepperSeparatorOptions,
+  StepperSeparatorCommonProps,
+  StepperSeparatorRenderProps,
   StepperSeparatorProps,
   StepperTriggerOptions,
+  StepperTriggerCommonProps,
+  StepperTriggerRenderProps,
   StepperTriggerProps,
   StepperCompletedContentOptions,
+  StepperCompletedContentCommonProps,
+  StepperCompletedContentRenderProps,
   StepperCompletedContentProps,
-  StepperNavigationOptions,
-  StepperNavigationProps,
 };
 
 export {
-	Indicator,
   Content,
   Item,
   List,
-  Portal,
+  NextTrigger,
+  PrevTrigger,
   Root,
   Separator,
   Trigger,
   CompletedContent,
-  Navigation,
 };
 
 export const Stepper = Object.assign(Root, {
-	Indicator,
   Content,
   Item,
   List,
-  Portal,
+  NextTrigger,
+  PrevTrigger,
   Separator,
   Trigger,
   CompletedContent,
-  Navigation,
 });

packages/core/src/stepper/stepper-completed-content.tsx

@@ -1,29 +1,37 @@
-// src/stepper/stepper-completed-content.tsx
-import { type Component, type JSX, Show } from "solid-js";
+import { type ValidComponent, Show, splitProps, JSX } from "solid-js";
+import { type ElementOf, Polymorphic, type PolymorphicProps } from "../polymorphic";
 import { useStepperContext } from "./stepper-context";
 
-export interface StepperCompletedContentOptions {}
+export interface StepperCompletedContentOptions { }
 
-export interface StepperCompletedContentProps extends StepperCompletedContentOptions {
-  /** The completed content. */
-  children?: JSX.Element;
+export interface StepperCompletedContentCommonProps<T extends HTMLElement = HTMLElement> {
+	children?: JSX.Element;
 }
 
-export const StepperCompletedContent: Component<StepperCompletedContentProps> = (props) => {
-  const context = useStepperContext();
-  const options = context.options();
+export interface StepperCompletedContentRenderProps extends StepperCompletedContentCommonProps {
+	role: string;
+	"data-completed"?: string;
+}
+
+export type StepperCompletedContentProps<T extends ValidComponent | HTMLElement = HTMLElement> =
+	StepperCompletedContentOptions & Partial<StepperCompletedContentCommonProps<ElementOf<T>>>;
 
-  const isCompleted = () => context.state.activeStep >= options.count;
+export function StepperCompletedContent<T extends ValidComponent = "div">(
+	props: PolymorphicProps<T, StepperCompletedContentProps<T>>
+) {
+	const context = useStepperContext();
+	const [local, others] = splitProps(props as StepperCompletedContentProps, ["children"]);
 
-  return (
-    <Show when={isCompleted()}>
-      <div
-        class="kb-stepper__completed"
-        role="tabpanel"
-        aria-label="All steps completed"
-      >
-        {props.children}
-      </div>
-    </Show>
-  );
-};
+	return (
+		<Show when={context.isCompleted()}>
+			<Polymorphic<StepperCompletedContentRenderProps>
+				as="div"
+				role="alert"
+				data-completed=""
+				{...others}
+			>
+				{local.children}
+			</Polymorphic>
+		</Show>
+	);
+}

packages/core/src/stepper/stepper-content.tsx

@@ -1,31 +1,43 @@
-// src/stepper/stepper-content.tsx
-import { type Component, type JSX, Show } from "solid-js";
+import { type ValidComponent, Show, splitProps, JSX } from "solid-js";
+import { type ElementOf, Polymorphic, type PolymorphicProps } from "../polymorphic";
 import { useStepperContext } from "./stepper-context";
 
 export interface StepperContentOptions {
-	/** The index of the step content. */
-	index: number;
+  /** The index of this content panel */
+  index: number;
 }
 
-export interface StepperContentProps extends StepperContentOptions {
-	/** The content. */
-	children?: JSX.Element;
+export interface StepperContentCommonProps<T extends HTMLElement = HTMLElement> {
+  children?: JSX.Element;
 }
 
-export const StepperContent: Component<StepperContentProps> = (props) => {
-	const context = useStepperContext();
+export interface StepperContentRenderProps extends StepperContentCommonProps {
+  role: string;
+  "aria-labelledby"?: string;
+  "data-active"?: string;
+}
+
+export type StepperContentProps<T extends ValidComponent | HTMLElement = HTMLElement> =
+  StepperContentOptions & Partial<StepperContentCommonProps<ElementOf<T>>>;
 
-	return (
-		<Show when={context.state.activeStep === props.index}>
-			<div
-				class="kb-stepper__content"
-				role="tabpanel"
-				id={`step-content-${props.index}`}
-				aria-labelledby={`step-trigger-${props.index}`}
-			>
-				{props.children}
-			</div>
-		</Show>
-	);
-};
+export function StepperContent<T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, StepperContentProps<T>>
+) {
+  const context = useStepperContext();
+  const [local, others] = splitProps(props as StepperContentProps, ["index", "children"]);
 
+  const isActive = () => context.step() === local.index;
+
+  return (
+    <Show when={isActive()}>
+      <Polymorphic<StepperContentRenderProps>
+        as="div"
+        role="tabpanel"
+        data-active={isActive() ? "" : undefined}
+        {...others}
+      >
+        {local.children}
+      </Polymorphic>
+    </Show>
+  );
+}

packages/core/src/stepper/stepper-context.tsx

@@ -1,15 +1,24 @@
-// src/stepper/stepper-context.ts
-import { createContext, useContext } from "solid-js";
-import type { StepperContextType } from "./stepper.types";
+import { type Accessor, type JSX, type Setter, createContext, useContext } from "solid-js";
 
-export const StepperContext = createContext<StepperContextType>();
+export interface StepperContextValue {
+  step: Accessor<number>;
+  setStep: Setter<number>;
+  isDisabled: Accessor<boolean>;
+  isCompleted: Accessor<boolean>;
+  maxSteps: Accessor<number>;
+  isLastStep: Accessor<boolean>;
+}
+
+export const StepperContext = createContext<StepperContextValue>();
 
 export function useStepperContext() {
   const context = useContext(StepperContext);
-  if (!context) {
+
+  if (context === undefined) {
     throw new Error(
-      "[kobalte] `useStepperContext` must be used within a `Stepper` component"
+      "[kobalte]: `useStepperContext` must be used within a `Stepper` component"
     );
   }
+
   return context;
 }