@datum-cloud/datum-ui 0.5.0 → 0.6.0-alpha.a37bf9a

package/dist/form/stepper/index.mjs

@@ -0,0 +1,545 @@
+import { t as cn } from "../../cn-D2KYQ917.mjs";
+import { t as Button } from "../../button-BllvE9Lm.mjs";
+import { n as useFormContext, t as FormProvider } from "../../form-context-Ccxm-wqL.mjs";
+import { n as useAdapter } from "../../adapter-context-rWveHhDd.mjs";
+import { t as defineStepper } from "../../stepper-DvIOp0hh.mjs";
+import { CheckIcon } from "lucide-react";
+import * as React$1 from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { z } from "zod";
+//#region src/components/features/form/components/stepper/form-stepper.tsx
+const FormStepperContext = React$1.createContext(null);
+function useFormStepperContext() {
+	const context = React$1.use(FormStepperContext);
+	if (!context) throw new Error("useFormStepperContext must be used within a Form.Stepper component");
+	return context;
+}
+/**
+* Recursively unwrap ZodIntersection (from .and()) to extract the base ZodObject.
+*
+* Zod v4 schema types use `def.type` as a string discriminant:
+* - "intersection" (from .and()): merge left + right base objects
+* - "object": return directly
+*
+* Note: In Zod v4, .superRefine() and .refine() return `this` (no wrapper),
+* so only ZodIntersection needs unwrapping.
+*/
+function getBaseObject(schema) {
+	if (schema.def.type === "intersection") {
+		const intersectionDef = schema.def;
+		const left = getBaseObject(intersectionDef.left);
+		const right = getBaseObject(intersectionDef.right);
+		return left.merge(right);
+	}
+	if (schema.def.type !== "object") return z.object({});
+	return schema;
+}
+/**
+* Merge multiple zod schemas into one ZodObject for HTML constraint generation.
+* Handles ZodIntersection (.and()) by unwrapping to base ZodObject shapes.
+* Per-step validation still uses the original schemas with all refinements intact.
+*/
+function mergeSchemas(steps) {
+	if (steps.length === 0) throw new Error("Form.Stepper requires at least one step");
+	return steps.reduce((acc, step, index) => {
+		const base = getBaseObject(step.schema);
+		if (index === 0) return base;
+		return acc.merge(base);
+	}, {});
+}
+/**
+* Convert StepConfig[] to Stepperize step format
+*/
+function toStepperizeSteps(steps) {
+	return steps.map((step) => ({
+		id: step.id,
+		label: step.label,
+		description: step.description
+	}));
+}
+/**
+* Form.Stepper - Multi-step form container
+*
+* Uses Stepperize internally for step navigation and a single Conform form
+* instance for all steps. Schemas are auto-merged for unified validation.
+*
+* @example
+* ```tsx
+* const steps = [
+*   { id: 'account', label: 'Account', schema: accountSchema },
+*   { id: 'profile', label: 'Profile', schema: profileSchema },
+* ];
+*
+* <Form.Stepper steps={steps} onComplete={handleComplete}>
+*   <Form.StepperNavigation />
+*
+*   <Form.Step id="account">
+*     <Form.Field name="email" label="Email" required>
+*       <Form.Input type="email" />
+*     </Form.Field>
+*   </Form.Step>
+*
+*   <Form.Step id="profile">
+*     <Form.Field name="name" label="Full Name" required>
+*       <Form.Input />
+*     </Form.Field>
+*   </Form.Step>
+*
+*   <Form.StepperControls />
+* </Form.Stepper>
+* ```
+*/
+function FormStepper({ steps, children, onComplete, onStepChange, initialStep, className, defaultValues, id, formComponent }) {
+	const stepperDef = React$1.useMemo(() => {
+		return defineStepper(...toStepperizeSteps(steps));
+	}, [steps]);
+	const initialStepIndex = React$1.useMemo(() => {
+		if (!initialStep) return void 0;
+		const index = steps.findIndex((s) => s.id === initialStep);
+		return index >= 0 ? steps[index].id : void 0;
+	}, [initialStep, steps]);
+	const { Stepper } = stepperDef;
+	const providerProps = initialStepIndex ? { initialStep: initialStepIndex } : {};
+	return /* @__PURE__ */ jsx(Stepper.Provider, {
+		...providerProps,
+		children: /* @__PURE__ */ jsx(FormStepperContent, {
+			steps,
+			stepperDef,
+			onComplete,
+			onStepChange,
+			className,
+			defaultValues,
+			id,
+			formComponent,
+			children
+		})
+	});
+}
+FormStepper.displayName = "Form.Stepper";
+function FormStepperContent({ steps, stepperDef, children, onComplete, onStepChange, className, defaultValues, id, formComponent }) {
+	const { useStepper } = stepperDef;
+	const stepper = useStepper();
+	return /* @__PURE__ */ jsx(StepForm, {
+		steps,
+		stepper,
+		currentStepConfig: React$1.useMemo(() => steps.find((s) => s.id === stepper.state.current.data.id) ?? steps[0], [steps, stepper.state.current.data.id]),
+		combinedSchema: React$1.useMemo(() => mergeSchemas(steps), [steps]),
+		storedValues: React$1.useMemo(() => {
+			const allMetadata = steps.reduce((acc, step) => ({
+				...acc,
+				...stepper.metadata.get(step.id) || {}
+			}), {});
+			return {
+				...defaultValues,
+				...allMetadata
+			};
+		}, [
+			steps,
+			stepper,
+			defaultValues,
+			stepper.state.current.data.id
+		]),
+		onComplete,
+		onStepChange,
+		className,
+		id,
+		formComponent,
+		children
+	}, stepper.state.current.data.id);
+}
+function StepForm({ steps, stepper, currentStepConfig, combinedSchema: _combinedSchema, storedValues, children, onComplete, onStepChange, className, id, formComponent: FormComp = "form" }) {
+	const adapter = useAdapter();
+	const [isSubmitting, setIsSubmitting] = React$1.useState(false);
+	const formRef = React$1.useRef(null);
+	const currentIndex = stepper.lookup.getIndex(stepper.state.current.data.id);
+	const handleStepSubmit = React$1.useCallback(async (data) => {
+		stepper.metadata.set(stepper.state.current.data.id, data);
+		if (stepper.state.isLast) {
+			setIsSubmitting(true);
+			try {
+				await onComplete({
+					...steps.reduce((acc, step) => ({
+						...acc,
+						...stepper.metadata.get(step.id) || {}
+					}), {}),
+					...data
+				});
+			} catch {} finally {
+				setIsSubmitting(false);
+			}
+		} else {
+			const nextStepId = stepper.lookup.getNext(stepper.state.current.data.id)?.id;
+			if (nextStepId) {
+				stepper.navigation.goTo(nextStepId);
+				onStepChange?.(nextStepId, "next");
+			}
+		}
+	}, [
+		stepper,
+		steps,
+		onComplete,
+		onStepChange
+	]);
+	const instance = adapter.useCreateForm({
+		schema: currentStepConfig.schema,
+		defaultValues: storedValues,
+		mode: "onSubmit",
+		id: `${id ?? "stepper"}-${currentStepConfig.id}`,
+		onSubmit: handleStepSubmit,
+		formRef
+	});
+	const next = React$1.useCallback(() => {
+		formRef.current?.requestSubmit();
+	}, []);
+	const prev = React$1.useCallback(() => {
+		const currentValues = instance.getValues();
+		if (Object.keys(currentValues).length > 0) stepper.metadata.set(stepper.state.current.data.id, currentValues);
+		const prevStepId = stepper.lookup.getPrev(stepper.state.current.data.id)?.id;
+		if (prevStepId) {
+			stepper.navigation.goTo(prevStepId);
+			onStepChange?.(prevStepId, "prev");
+		}
+	}, [
+		instance,
+		stepper,
+		onStepChange
+	]);
+	const goTo = React$1.useCallback((stepId) => {
+		if (stepper.lookup.getIndex(stepId) < currentIndex) {
+			const currentValues = instance.getValues();
+			if (Object.keys(currentValues).length > 0) stepper.metadata.set(stepper.state.current.data.id, currentValues);
+			stepper.navigation.goTo(stepId);
+			onStepChange?.(stepId, "prev");
+		}
+	}, [
+		instance,
+		stepper,
+		currentIndex,
+		onStepChange
+	]);
+	const getStepData = React$1.useCallback((stepId) => stepper.metadata.get(stepId), [stepper]);
+	const getAllStepData = React$1.useCallback(() => {
+		return steps.reduce((acc, step) => ({
+			...acc,
+			...stepper.metadata.get(step.id) || {}
+		}), {});
+	}, [steps, stepper]);
+	const stepperContextValue = React$1.useMemo(() => ({
+		steps,
+		current: currentStepConfig,
+		currentIndex,
+		next,
+		prev,
+		goTo,
+		isFirst: stepper.state.isFirst,
+		isLast: stepper.state.isLast,
+		getStepData,
+		getAllStepData,
+		utils: { getIndex: (stepId) => stepper.lookup.getIndex(stepId) }
+	}), [
+		steps,
+		currentStepConfig,
+		currentIndex,
+		stepper,
+		next,
+		prev,
+		goTo,
+		getStepData,
+		getAllStepData
+	]);
+	const contextValue = React$1.useMemo(() => ({
+		form: instance,
+		fields: instance.fields,
+		isSubmitting,
+		isDirty: instance.formState.isDirty,
+		isValid: instance.formState.isValid,
+		isSubmitted: instance.formState.isSubmitted,
+		submitCount: instance.formState.submitCount,
+		dirtyFields: instance.formState.dirtyFields,
+		touchedFields: instance.formState.touchedFields,
+		mode: "onChange",
+		displayTouchedFields: instance.touchedFields,
+		markFieldTouched: instance.markFieldTouched,
+		markAllFieldsTouched: instance.markAllFieldsTouched,
+		submit: () => formRef.current?.requestSubmit(),
+		reset: () => instance.reset(),
+		formId: instance.id
+	}), [
+		instance,
+		isSubmitting,
+		instance.formState
+	]);
+	const renderProps = {
+		steps,
+		current: currentStepConfig,
+		currentIndex,
+		next,
+		prev,
+		goTo,
+		isFirst: stepper.state.isFirst,
+		isLast: stepper.state.isLast,
+		getStepData,
+		getAllStepData
+	};
+	const resolvedChildren = typeof children === "function" ? children(renderProps) : children;
+	return /* @__PURE__ */ jsx(FormStepperContext, {
+		value: stepperContextValue,
+		children: /* @__PURE__ */ jsx(FormProvider, {
+			value: contextValue,
+			children: /* @__PURE__ */ jsx(adapter.FormProvider, {
+				instance,
+				children: /* @__PURE__ */ jsx(FormComp, {
+					ref: formRef,
+					...instance.formProps,
+					className: cn("space-y-6", className),
+					autoComplete: "off",
+					noValidate: true,
+					onSubmit: (e) => {
+						e.stopPropagation();
+						const adapterSubmit = instance.formProps.onSubmit;
+						adapterSubmit?.(e);
+					},
+					children: resolvedChildren
+				})
+			})
+		})
+	});
+}
+//#endregion
+//#region src/components/features/form/components/stepper/form-step.tsx
+/**
+* Form.Step - Individual step content container
+*
+* Only renders its children when the step is active.
+* Works with the single-form architecture - fields remain registered
+* even when unmounted, preserving their values.
+*
+* @example
+* ```tsx
+* <Form.Step id="account">
+*   <Form.Field name="email" label="Email" required>
+*     <Form.Input type="email" />
+*   </Form.Field>
+* </Form.Step>
+* ```
+*/
+function FormStep({ id, children }) {
+	const { current } = useFormStepperContext();
+	if (current.id !== id) return null;
+	return /* @__PURE__ */ jsx(Fragment$1, { children });
+}
+FormStep.displayName = "Form.Step";
+//#endregion
+//#region src/components/features/form/components/stepper/stepper-controls.tsx
+/**
+* Form.StepperControls - Navigation buttons (Previous/Next/Submit)
+*
+* Provides Previous and Next/Submit buttons for navigating between steps.
+* The Next button triggers form validation before advancing.
+* The Previous button navigates back without validation.
+*
+* @example
+* ```tsx
+* <Form.StepperControls
+*   prevLabel={(isFirst) => isFirst ? 'Cancel' : 'Previous'}
+*   nextLabel={(isLast) => isLast ? 'Submit' : 'Next'}
+*   loadingText="Creating..."
+*   onCancel={() => setOpen(false)}
+* />
+* ```
+*
+* @example With external loading state
+* ```tsx
+* <Form.StepperControls
+*   loading={fetcher.state === 'submitting'}
+*   disabled={!isValid}
+*   loadingText="Saving..."
+* />
+* ```
+*/
+function StepperControls({ prevLabel = "Previous", nextLabel = (isLast) => isLast ? "Submit" : "Next", loadingText = "Submitting...", showPrev = true, loading, disabled, onPrev, onCancel, className }) {
+	const { prev, isFirst, isLast } = useFormStepperContext();
+	const { isSubmitting: formIsSubmitting } = useFormContext();
+	const isLoading = loading ?? formIsSubmitting;
+	const isDisabled = disabled ?? false;
+	const getPrevLabel = () => {
+		if (typeof prevLabel === "function") return prevLabel(isFirst);
+		return prevLabel;
+	};
+	const getNextLabel = () => {
+		if (typeof nextLabel === "function") return nextLabel(isLast);
+		return nextLabel;
+	};
+	const handlePrev = () => {
+		if (isFirst && onCancel) onCancel();
+		else {
+			onPrev?.();
+			prev();
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center justify-between gap-3", className),
+		children: [/* @__PURE__ */ jsx("div", { children: showPrev && /* @__PURE__ */ jsx(Button, {
+			htmlType: "button",
+			type: "quaternary",
+			theme: "outline",
+			size: "small",
+			onClick: handlePrev,
+			disabled: isLoading || isDisabled,
+			children: getPrevLabel()
+		}) }), /* @__PURE__ */ jsx(Button, {
+			htmlType: "submit",
+			type: "primary",
+			size: "small",
+			loading: isLoading,
+			disabled: isLoading || isDisabled,
+			children: isLoading && isLast ? loadingText : getNextLabel()
+		})]
+	});
+}
+StepperControls.displayName = "Form.StepperControls";
+//#endregion
+//#region src/components/features/form/components/stepper/stepper-navigation.tsx
+/**
+* Form.StepperNavigation - Step indicators/progress
+*
+* Displays visual step indicators showing current progress through the form.
+* Supports horizontal and vertical variants with optional label orientation.
+*
+* @example
+* ```tsx
+* <Form.StepperNavigation variant="horizontal" labelOrientation="vertical" />
+* ```
+*/
+function StepperNavigation({ variant = "horizontal", labelOrientation = "vertical", className }) {
+	const { steps, currentIndex } = useFormStepperContext();
+	if (variant === "horizontal" && labelOrientation === "vertical") return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Form steps",
+		className: cn("flex flex-row items-start justify-between", className),
+		children: steps.map((step, index) => {
+			const isActive = index === currentIndex;
+			const isCompleted = index < currentIndex;
+			return /* @__PURE__ */ jsxs("div", {
+				className: "relative flex flex-1 flex-col items-center",
+				children: [
+					!(index === steps.length - 1) && /* @__PURE__ */ jsx("div", { className: "bg-stepper-line absolute top-4 right-[calc(-50%+20px)] left-[calc(50%+20px)] h-0.5" }),
+					/* @__PURE__ */ jsx("div", {
+						className: cn("relative z-10 flex h-8 w-8 items-center justify-center rounded-full border bg-transparent text-sm font-medium transition-colors", isActive && "border-primary bg-primary text-primary-foreground", isCompleted && "border-tertiary-foreground bg-tertiary-foreground text-tertiary", !isActive && !isCompleted && "border-stepper-label text-stepper-label"),
+						"aria-current": isActive ? "step" : void 0,
+						children: isCompleted ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-tertiary h-4 w-4" }) : index + 1
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "mt-1",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: cn("text-xs font-medium", isActive && "text-foreground", isCompleted && "text-stepper-label", !isActive && !isCompleted && "text-stepper-label"),
+							children: step.label
+						}), step.description && /* @__PURE__ */ jsx("p", {
+							className: "text-muted-foreground mt-0.5 text-xs",
+							children: step.description
+						})]
+					})
+				]
+			}, step.id);
+		})
+	});
+	if (variant === "horizontal") return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Form steps",
+		className: cn("flex flex-row items-center", className),
+		children: steps.map((step, index) => {
+			const isActive = index === currentIndex;
+			const isCompleted = index < currentIndex;
+			const isLast = index === steps.length - 1;
+			return /* @__PURE__ */ jsxs(React$1.Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: cn("flex h-8 w-8 items-center justify-center rounded-full border text-sm font-medium transition-colors", isActive && "border-primary bg-primary text-primary-foreground", isCompleted && "border-tertiary-foreground bg-tertiary-foreground text-tertiary", !isActive && !isCompleted && "border-stepper-label text-stepper-label"),
+					"aria-current": isActive ? "step" : void 0,
+					children: isCompleted ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-tertiary size-4" }) : index + 1
+				}), /* @__PURE__ */ jsx("div", {
+					className: "ml-2",
+					children: /* @__PURE__ */ jsx("span", {
+						className: cn("text-sm font-medium", isActive && "text-foreground", isCompleted && "text-stepper-label", !isActive && !isCompleted && "text-stepper-label"),
+						children: step.label
+					})
+				})]
+			}), !isLast && /* @__PURE__ */ jsx("div", { className: "bg-stepper-line mx-4 h-0.5 min-w-8 flex-1" })] }, step.id);
+		})
+	});
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Form steps",
+		className: cn("flex flex-col", className),
+		children: steps.map((step, index) => {
+			const isActive = index === currentIndex;
+			const isCompleted = index < currentIndex;
+			const isLast = index === steps.length - 1;
+			return /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-row",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col items-center",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: cn("flex h-8 w-8 items-center justify-center rounded-full border text-sm font-medium transition-colors", isActive && "border-primary bg-primary text-primary-foreground", isCompleted && "border-tertiary-foreground bg-tertiary-foreground text-tertiary", !isActive && !isCompleted && "border-stepper-label text-stepper-label"),
+						"aria-current": isActive ? "step" : void 0,
+						children: isCompleted ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-tertiary size-4" }) : index + 1
+					}), !isLast && /* @__PURE__ */ jsx("div", { className: "bg-stepper-line my-1 min-h-8 w-0.5 flex-1" })]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "ml-3 pb-8",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cn("text-sm font-medium", isActive && "text-foreground", isCompleted && "text-stepper-label", !isActive && !isCompleted && "text-stepper-label"),
+						children: step.label
+					}), step.description && /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground mt-0.5 text-xs",
+						children: step.description
+					})]
+				})]
+			}, step.id);
+		})
+	});
+}
+StepperNavigation.displayName = "Form.StepperNavigation";
+//#endregion
+//#region src/components/features/form/hooks/use-stepper.ts
+/**
+* Hook to access the stepper context
+* Must be used within a Form.Stepper component
+*
+* @example
+* ```tsx
+* function StepContent() {
+*   const {
+*     current,
+*     currentIndex,
+*     steps,
+*     next,
+*     prev,
+*     goTo,
+*     isFirst,
+*     isLast,
+*   } = useStepper();
+*
+*   return (
+*     <div>
+*       <h2>Step {currentIndex + 1}: {current.label}</h2>
+*       <button onClick={prev} disabled={isFirst}>Previous</button>
+*       <button onClick={next} disabled={isLast}>Next</button>
+*     </div>
+*   );
+* }
+* ```
+*/
+function useStepper() {
+	const context = useFormStepperContext();
+	return {
+		steps: context.steps,
+		current: context.current,
+		currentIndex: context.currentIndex,
+		next: context.next,
+		prev: context.prev,
+		goTo: context.goTo,
+		isFirst: context.isFirst,
+		isLast: context.isLast,
+		getStepData: context.getStepData,
+		getAllStepData: context.getAllStepData
+	};
+}
+//#endregion
+export { FormStep, FormStepper, StepperControls, StepperNavigation, useStepper };