@@ -68,25 +66,40 @@ export default function StepperVerticalFollow() {
{({ methods }) => (
<>
- {steps.map((step) => (
+ {methods.all.map((step) => (
methods.goTo(step.id)}
>
{step.title}
-
-
-
- Content for {step.id}
-
-
+
+ Content for {step.id}
+
+
diff --git a/apps/www/registry/default/examples/stepper-variants.tsx b/apps/www/registry/default/examples/stepper-variants.tsx
index f8aaef2a02d..06c12a65141 100644
--- a/apps/www/registry/default/examples/stepper-variants.tsx
+++ b/apps/www/registry/default/examples/stepper-variants.tsx
@@ -1,10 +1,10 @@
import * as React from "react"
+import { Button } from "@/registry/default/ui/button"
import { Label } from "@/registry/default/ui/label"
import { RadioGroup, RadioGroupItem } from "@/registry/default/ui/radio-group"
import {
Stepper,
- StepperAction,
StepperControls,
StepperNavigation,
StepperPanel,
@@ -31,8 +31,6 @@ const stepperInstance = defineStepper(
)
export default function StepperVariants() {
- const steps = stepperInstance.steps
-
const [variant, setVariant] = React.useState
("horizontal")
return (
@@ -69,7 +67,7 @@ const HorizontalStepper = () => {
variant="horizontal"
>
{({ methods }) => (
- <>
+
{steps.map((step) => (
{
))}
- {steps.map((step) => (
-
- {({ step }) => (
- Content for {step.id}
- )}
-
- ))}
+ {methods.switch({
+ "step-1": (step) => ,
+ "step-2": (step) => ,
+ "step-3": (step) => ,
+ })}
- Previous
- Next
- Reset
+ {!methods.isLast && (
+
+ )}
+
-
+
)}
)
}
+const Content = ({ id }: { id: string }) => {
+ return (
+
+ Content for {id}
+
+ )
+}
+
const VerticalStepper = () => {
- const steps = stepperInstance.steps
return (
{
{({ methods }) => (
<>
- {steps.map((step) => (
+ {methods.all.map((step) => (
methods.goTo(step.id)}
>
{step.title}
-
- {({ step }) => (
+ {methods.when(step.id, () => (
+
Content for {step.id}
- )}
-
+
+ ))}
))}
- Previous
- Next
- Reset
+ {!methods.isLast && (
+
+ )}
+
)}
@@ -145,7 +158,6 @@ const VerticalStepper = () => {
}
const CircleStepper = () => {
- const steps = stepperInstance.steps
return (
{({ methods }) => (
@@ -155,21 +167,26 @@ const CircleStepper = () => {
{methods.current.title}
- {steps.map((step) => (
-
- {({ step }) => (
- Content for {step.id}
- )}
+ {methods.when(methods.current.id, () => (
+
+
+ Content for {methods.current.id}
+
))}
- Previous
- Next
- Reset
+ {!methods.isLast && (
+
+ )}
+
)}
diff --git a/apps/www/registry/default/examples/stepper-with-description.tsx b/apps/www/registry/default/examples/stepper-with-description.tsx
deleted file mode 100644
index 5b50b9d014a..00000000000
--- a/apps/www/registry/default/examples/stepper-with-description.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import {
- Stepper,
- StepperAction,
- StepperControls,
- StepperDescription,
- StepperNavigation,
- StepperPanel,
- StepperStep,
- StepperTitle,
- defineStepper,
-} from "@/registry/default/ui/stepper"
-
-const stepperInstance = defineStepper(
- {
- id: "step-1",
- title: "Step 1",
- description: "This is the first step",
- },
- {
- id: "step-2",
- title: "Step 2",
- description: "This is the second step",
- },
- {
- id: "step-3",
- title: "Step 3",
- description: "This is the third step",
- }
-)
-
-export default function StepperWithDescription() {
- const steps = stepperInstance.steps
- return (
-
- {({ methods }) => (
- <>
-
- {steps.map((step) => (
- methods.goTo(step.id)}
- >
- {step.title}
- {step.description}
-
- ))}
-
- {steps.map((step) => (
-
- {({ step }) => (
- Content for {step.id}
- )}
-
- ))}
-
- Previous
- Next
- Reset
-
-
- )}
-
- )
-}
diff --git a/apps/www/registry/default/ui/stepper.tsx b/apps/www/registry/default/ui/stepper.tsx
index 77ebbc599d7..053155850ac 100644
--- a/apps/www/registry/default/ui/stepper.tsx
+++ b/apps/www/registry/default/ui/stepper.tsx
@@ -3,15 +3,11 @@
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import * as Stepperize from "@stepperize/react"
-import { VariantProps, cva } from "class-variance-authority"
+import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
import { Button } from "@/registry/default/ui/button"
-type StepperProviderProps = StepperConfig & {
- children: React.ReactNode
-}
-
type StepperVariant = "horizontal" | "vertical" | "circle"
type StepperLabelOrientation = "horizontal" | "vertical"
@@ -22,59 +18,74 @@ type StepperConfig = {
tracking?: boolean
}
-const StepContext = React.createContext>({
- instance: {} as ReturnType>,
- variant: "horizontal",
-})
+type StepperProviderProps = StepperConfig & {
+ children: React.ReactNode
+}
+
+const StepContext = React.createContext | null>(null)
const StepperProvider = ({
children,
...props
}: StepperProviderProps) => {
- const Scope = props.instance.Scoped
+ const { instance } = props
+ const Scoped = instance.Scoped
return (
-
+
{children}
-
+
)
}
const useStepper = (): StepperConfig => {
const context = React.useContext(StepContext)
if (!context) {
- throw new Error("useStepper must be used within a Stepper")
+ throw new Error("useStepper must be used within a StepperProvider.")
}
return context
}
-function Stepper({
+type StepperProps = StepperConfig &
+ Omit, "children"> & {
+ children:
+ | React.ReactNode
+ | ((props: { methods: Stepperize.Stepper }) => React.ReactNode)
+ }
+
+const Stepper = ({
children,
variant = "horizontal",
- className,
labelOrientation = "horizontal",
tracking = false,
+ instance,
...props
-}: StepperConfig &
- Omit, "children"> & {
- children:
- | React.ReactNode
- | ((props: { methods: Stepperize.Stepper }) => React.ReactNode)
- }) {
- const { instance } = props
+}: StepperProps) => (
+
+ {children}
+
+)
- const methods = instance.useStepper() as Stepperize.Stepper
+const StepperContainer = ({
+ children,
+ className,
+ ...props
+}: Omit, "children"> & {
+ children:
+ | React.ReactNode
+ | ((props: { methods: Stepperize.Stepper }) => React.ReactNode)
+}) => {
+ const { instance } = useStepper()
+ const methods = instance.useStepper()
return (
-
-
- {typeof children === "function" ? children({ methods }) : children}
-
-
+
+ {typeof children === "function" ? children({ methods }) : children}
+
)
}
@@ -86,9 +97,7 @@ const StepperNavigation = ({
}: Omit, "children"> & {
children: React.ReactNode
}) => {
- const { variant, instance } = useStepper()
-
- const methods = instance.useStepper() as Stepperize.Stepper
+ const { variant } = useStepper()
return (