@giddaa-housing/ui 0.1.0 → 1.1.0

package/dist/multi-step-form.d.ts

@@ -0,0 +1,56 @@
+import * as React from "react";
+//#region src/multi-step-form.d.ts
+type MultiStepFormDirection = "next" | "prev" | "jump";
+type MultiStepFormStep<TValue extends string = string, TFields extends readonly string[] = readonly string[]> = {
+  value: TValue;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  fields?: TFields;
+};
+type MultiStepFormValue<TStep extends MultiStepFormStep> = TStep["value"];
+type MultiStepFormValidate<TStep extends MultiStepFormStep> = (value: MultiStepFormValue<TStep>, direction: MultiStepFormDirection, targetValue: MultiStepFormValue<TStep>) => boolean | Promise<boolean>;
+type MultiStepFormContextValue<TStep extends MultiStepFormStep> = {
+  steps: readonly TStep[];
+  value: MultiStepFormValue<TStep>;
+  currentStep: TStep;
+  currentIndex: number;
+  nextStep?: TStep;
+  previousStep?: TStep;
+  isFirstStep: boolean;
+  isLastStep: boolean;
+  isValidating: boolean;
+  goTo: (value: MultiStepFormValue<TStep>) => Promise<boolean>;
+  next: () => Promise<boolean>;
+  previous: () => Promise<boolean>;
+};
+type MultiStepFormProps<TStep extends MultiStepFormStep> = Omit<React.ComponentProps<"div">, "defaultValue" | "onChange"> & {
+  steps: readonly TStep[];
+  value?: MultiStepFormValue<TStep>;
+  defaultValue?: MultiStepFormValue<TStep>;
+  onValueChange?: (value: MultiStepFormValue<TStep>, step: TStep, meta: {
+    direction: MultiStepFormDirection;
+    previousValue: MultiStepFormValue<TStep>;
+  }) => void;
+  onValidate?: MultiStepFormValidate<TStep>;
+};
+type MultiStepFormIndicatorProps = React.ComponentProps<"div"> & {
+  type?: "stepper" | "progress";
+  progressValue?: number;
+  showNextLabel?: boolean;
+  currentStepAction?: React.ReactNode;
+};
+type MultiStepFormContentProps<TStep extends MultiStepFormStep> = React.ComponentProps<"div"> & {
+  value: MultiStepFormValue<TStep>;
+  forceMount?: boolean;
+};
+type MultiStepFormNavigationButtonProps = Omit<React.ComponentProps<"button">, "type"> & {
+  type?: "button" | "submit" | "reset";
+};
+declare function useMultiStepForm<TStep extends MultiStepFormStep = MultiStepFormStep>(): MultiStepFormContextValue<TStep>;
+declare function MultiStepForm<TStep extends MultiStepFormStep>({ steps, value, defaultValue, onValueChange, onValidate, className, children, ...props }: MultiStepFormProps<TStep>): React.JSX.Element;
+declare function MultiStepFormIndicator({ type, progressValue, showNextLabel, currentStepAction, className, ...props }: MultiStepFormIndicatorProps): React.JSX.Element;
+declare function MultiStepFormContent<TStep extends MultiStepFormStep>({ value, forceMount, className, ...props }: MultiStepFormContentProps<TStep>): React.JSX.Element | null;
+declare function MultiStepFormPrevious({ type, disabled, onClick, className, ...props }: MultiStepFormNavigationButtonProps): React.JSX.Element;
+declare function MultiStepFormNext({ type, disabled, onClick, className, ...props }: MultiStepFormNavigationButtonProps): React.JSX.Element;
+//#endregion
+export { MultiStepForm, MultiStepFormContent, type MultiStepFormDirection, MultiStepFormIndicator, MultiStepFormNext, MultiStepFormPrevious, type MultiStepFormProps, type MultiStepFormStep, type MultiStepFormValidate, useMultiStepForm };

package/dist/multi-step-form.js

@@ -0,0 +1,342 @@
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { t as useUncontrolled } from "./use-uncontrolled-CLfM1XbB.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
+import { Progress, ProgressIndicator, ProgressTrack } from "./progress.js";
+import { CheckIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+//#region src/multi-step-form.tsx
+const MultiStepFormContext = React.createContext(null);
+function useMultiStepForm() {
+	const context = React.useContext(MultiStepFormContext);
+	if (!context) throw new Error("MultiStepForm parts must be used within a <MultiStepForm />");
+	return context;
+}
+function getStepIndex(steps, value) {
+	return steps.findIndex((step) => step.value === value);
+}
+function getDirection(currentIndex, targetIndex) {
+	if (targetIndex > currentIndex) return "next";
+	if (targetIndex < currentIndex) return "prev";
+	return "jump";
+}
+function getProgressValue(currentIndex, totalSteps) {
+	if (totalSteps <= 0) return 0;
+	return Math.round((currentIndex + 1) / totalSteps * 100);
+}
+function getStepsToValidate(steps, currentIndex, targetIndex) {
+	if (targetIndex <= currentIndex) return [];
+	if (targetIndex === currentIndex + 1) return steps.slice(currentIndex, currentIndex + 1);
+	return steps.slice(0, targetIndex);
+}
+function MultiStepForm({ steps, value, defaultValue, onValueChange, onValidate, className, children, ...props }) {
+	const fallbackValue = steps[0]?.value;
+	const [currentValue, setCurrentValue] = useUncontrolled({
+		value,
+		defaultValue,
+		finalValue: fallbackValue,
+		onChange: (nextValue, ...payload) => {
+			const [step, meta] = payload;
+			onValueChange?.(nextValue, step, meta);
+		}
+	});
+	const [isValidating, setIsValidating] = React.useState(false);
+	const resolvedIndex = getStepIndex(steps, currentValue);
+	const currentIndex = resolvedIndex >= 0 ? resolvedIndex : 0;
+	const currentStep = steps[currentIndex];
+	const previousStep = steps[currentIndex - 1];
+	const nextStep = steps[currentIndex + 1];
+	const isFirstStep = currentIndex <= 0;
+	const isLastStep = currentIndex >= steps.length - 1;
+	const goTo = async (targetValue) => {
+		if (!currentStep) return false;
+		const targetIndex = getStepIndex(steps, targetValue);
+		if (targetIndex < 0) return false;
+		const direction = getDirection(currentIndex, targetIndex);
+		if (direction === "jump") return true;
+		setIsValidating(true);
+		try {
+			const stepsToValidate = getStepsToValidate(steps, currentIndex, targetIndex);
+			for (const step of stepsToValidate) if (!(await onValidate?.(step.value, direction, targetValue) ?? true)) return false;
+			const targetStep = steps[targetIndex];
+			if (!targetStep) return false;
+			setCurrentValue(targetValue, targetStep, {
+				direction,
+				previousValue: currentStep.value
+			});
+			return true;
+		} finally {
+			setIsValidating(false);
+		}
+	};
+	const next = () => {
+		if (!nextStep) return Promise.resolve(false);
+		return goTo(nextStep.value);
+	};
+	const previous = () => {
+		if (!previousStep) return Promise.resolve(false);
+		return goTo(previousStep.value);
+	};
+	const contextValue = {
+		steps,
+		value: currentStep?.value ?? currentValue,
+		currentStep,
+		currentIndex,
+		nextStep,
+		previousStep,
+		isFirstStep,
+		isLastStep,
+		isValidating,
+		goTo,
+		next,
+		previous
+	};
+	return /* @__PURE__ */ jsx(MultiStepFormContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "multi-step-form",
+			className: cn("flex flex-col gap-6", className),
+			...props,
+			children
+		})
+	});
+}
+function MultiStepFormIndicator({ type = "stepper", progressValue, showNextLabel = true, currentStepAction, className, ...props }) {
+	const { steps, currentIndex, nextStep, goTo, isValidating } = useMultiStepForm();
+	const stepNumber = currentIndex + 1;
+	const totalSteps = steps.length;
+	const resolvedProgress = progressValue ?? getProgressValue(currentIndex, totalSteps);
+	if (type === "progress") return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "multi-step-form-indicator",
+		"data-type": "progress",
+		className: cn("flex w-full flex-col gap-2.5", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start justify-between gap-4",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-col gap-1.5",
+					children: [/* @__PURE__ */ jsxs("p", {
+						className: "text-gdt-sm text-fg-caption-placeholder",
+						children: [
+							"Step ",
+							stepNumber,
+							" of ",
+							totalSteps
+						]
+					}), /* @__PURE__ */ jsx(MultiStepFormStepSelect, {
+						trigger: "title",
+						currentStepAction
+					})]
+				}), /* @__PURE__ */ jsxs("p", {
+					className: "shrink-0 text-gdt-md font-extrabold text-status-info md:text-gdt-lg",
+					children: [resolvedProgress, "%"]
+				})]
+			}),
+			/* @__PURE__ */ jsx(Progress, {
+				value: resolvedProgress,
+				"aria-label": "Step progress",
+				children: /* @__PURE__ */ jsx(ProgressTrack, {
+					className: "h-2 bg-line",
+					children: /* @__PURE__ */ jsx(ProgressIndicator, { className: "bg-action-primary" })
+				})
+			}),
+			showNextLabel && nextStep ? /* @__PURE__ */ jsxs("p", {
+				className: "text-gdt-xs text-fg-caption-placeholder",
+				children: ["Next: ", nextStep.title]
+			}) : null
+		]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "multi-step-form-indicator",
+		"data-type": "stepper",
+		className: cn("w-full", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "hidden w-full md:grid",
+			style: { gridTemplateColumns: `repeat(${totalSteps}, minmax(0, 1fr))` },
+			children: steps.map((step, index) => {
+				const state = index < currentIndex ? "complete" : index === currentIndex ? "active" : "upcoming";
+				const leftComplete = index > 0 && index <= currentIndex;
+				const rightComplete = index < currentIndex;
+				return /* @__PURE__ */ jsxs("div", {
+					"data-state": state,
+					className: "group/multi-step-form-step min-w-0",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: cn("h-0.5 flex-1 rounded-full bg-line", index === 0 && "bg-transparent", leftComplete && "bg-status-success")
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-current": state === "active" ? "step" : void 0,
+								disabled: isValidating,
+								className: cn("flex size-10 shrink-0 items-center justify-center rounded-full border text-gdt-sm font-bold transition-[background-color,border-color,color,box-shadow] focus-visible:border-line-focus focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)] focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50", state === "complete" && "border-status-success bg-status-success text-fg-on-brand", state === "active" && "border-status-info bg-status-info text-fg-on-brand", state === "upcoming" && "border-line bg-canvas text-fg-caption-placeholder hover:border-line-strong hover:text-fg-primary"),
+								onClick: () => {
+									goTo(step.value);
+								},
+								children: state === "complete" ? /* @__PURE__ */ jsx(CheckIcon, {
+									className: "size-4.5",
+									strokeWidth: 2.5
+								}) : index + 1
+							}),
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: cn("h-0.5 flex-1 rounded-full bg-line", index === totalSteps - 1 && "bg-transparent", rightComplete && "bg-status-success")
+							})
+						]
+					}), /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						disabled: isValidating,
+						className: cn("mx-auto mt-3 flex max-w-full flex-col items-center gap-1 px-2 text-center transition-colors hover:text-fg-primary disabled:pointer-events-none disabled:opacity-50", state === "complete" && "text-fg-primary", state === "active" && "text-status-info"),
+						onClick: () => {
+							goTo(step.value);
+						},
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "max-w-full truncate text-gdt-sm font-semibold",
+							children: step.title
+						}), step.description ? /* @__PURE__ */ jsx("span", {
+							className: "max-w-full truncate text-gdt-xs font-normal text-fg-caption-placeholder",
+							children: step.description
+						}) : null]
+					})]
+				}, step.value);
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4 md:hidden",
+			children: [/* @__PURE__ */ jsx(MultiStepFormStepSelect, {
+				trigger: "card",
+				currentStepAction
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex gap-1.5",
+				"aria-hidden": "true",
+				children: steps.map((step, index) => /* @__PURE__ */ jsx("span", { className: cn("h-1 flex-1 rounded-full bg-line transition-colors", index < currentIndex && "bg-status-success", index === currentIndex && "bg-status-info") }, step.value))
+			})]
+		})]
+	});
+}
+function MultiStepFormStepSelect({ trigger, currentStepAction }) {
+	const { steps, value, currentIndex, currentStep, goTo, isValidating } = useMultiStepForm();
+	const stepNumber = currentIndex + 1;
+	const totalSteps = steps.length;
+	return /* @__PURE__ */ jsxs(Select, {
+		value,
+		onValueChange: (nextValue) => {
+			if (typeof nextValue === "string") goTo(nextValue);
+		},
+		size: "md",
+		children: [/* @__PURE__ */ jsxs(SelectTrigger, {
+			unstyled: true,
+			disabled: isValidating,
+			className: cn("group/multi-step-form-select-trigger flex min-w-0 items-center justify-between gap-3 text-left outline-none transition-[border-color,box-shadow,color] focus-visible:border-line-focus focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)] disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:text-line-strong", trigger === "card" && "w-full rounded-xl border border-line bg-canvas px-4 py-3 shadow-sm", trigger === "title" && "w-fit max-w-full rounded-md text-fg-primary hover:text-fg-brand"),
+			children: [trigger === "card" ? /* @__PURE__ */ jsxs("div", {
+				className: "min-w-0",
+				children: [
+					/* @__PURE__ */ jsxs("p", {
+						className: "text-gdt-xs text-fg-caption-placeholder",
+						children: [
+							"Step ",
+							stepNumber,
+							" of ",
+							totalSteps
+						]
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "mt-1 truncate text-gdt-sm font-bold text-fg-primary",
+						children: currentStep.title
+					}),
+					currentStep.description ? /* @__PURE__ */ jsx("p", {
+						className: "mt-0.5 truncate text-gdt-xs text-fg-secondary",
+						children: currentStep.description
+					}) : null
+				]
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-col gap-0.5",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 items-center gap-2",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "truncate text-gdt-md font-bold md:text-gdt-lg",
+						children: currentStep.title
+					}), currentStepAction]
+				}), currentStep.description ? /* @__PURE__ */ jsx("p", {
+					className: "truncate text-gdt-xs text-fg-secondary",
+					children: currentStep.description
+				}) : null]
+			}), /* @__PURE__ */ jsx(SelectValue, { className: "sr-only" })]
+		}), /* @__PURE__ */ jsx(SelectContent, {
+			align: "start",
+			alignItemWithTrigger: true,
+			className: "min-w-56",
+			children: steps.map((step, index) => /* @__PURE__ */ jsx(SelectItem, {
+				value: step.value,
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "flex min-w-0 flex-col",
+					children: [
+						/* @__PURE__ */ jsxs("span", {
+							className: "text-gdt-xs text-fg-caption-placeholder",
+							children: [
+								"Step ",
+								index + 1,
+								" of ",
+								totalSteps
+							]
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: step.title
+						}),
+						step.description ? /* @__PURE__ */ jsx("span", {
+							className: "truncate text-gdt-xs text-fg-secondary",
+							children: step.description
+						}) : null
+					]
+				})
+			}, step.value))
+		})]
+	});
+}
+function MultiStepFormContent({ value, forceMount = false, className, ...props }) {
+	const { value: currentValue } = useMultiStepForm();
+	const isActive = currentValue === value;
+	if (!forceMount && !isActive) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "multi-step-form-content",
+		"data-state": isActive ? "active" : "inactive",
+		hidden: !isActive,
+		className: cn("min-w-0", className),
+		...props
+	});
+}
+function MultiStepFormPrevious({ type = "button", disabled, onClick, className, ...props }) {
+	const { previous, isFirstStep, isValidating } = useMultiStepForm();
+	return /* @__PURE__ */ jsx("button", {
+		"data-slot": "multi-step-form-previous",
+		type,
+		disabled: disabled || isFirstStep || isValidating,
+		className: cn("inline-flex h-10 items-center justify-center rounded-full border border-line-strong px-4.5 text-gdt-sm font-bold text-fg-primary transition-colors hover:bg-surface disabled:pointer-events-none disabled:opacity-50", className),
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) previous();
+		},
+		...props
+	});
+}
+function MultiStepFormNext({ type = "button", disabled, onClick, className, ...props }) {
+	const { next, isLastStep, isValidating } = useMultiStepForm();
+	return /* @__PURE__ */ jsx("button", {
+		"data-slot": "multi-step-form-next",
+		type,
+		disabled: disabled || isLastStep || isValidating,
+		className: cn("inline-flex h-10 items-center justify-center rounded-full bg-action-primary px-4.5 text-gdt-sm font-bold text-fg-on-brand transition-colors hover:bg-action-primary-hover disabled:pointer-events-none disabled:opacity-50", className),
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) next();
+		},
+		...props
+	});
+}
+//#endregion
+export { MultiStepForm, MultiStepFormContent, MultiStepFormIndicator, MultiStepFormNext, MultiStepFormPrevious, useMultiStepForm };

package/dist/number-input.d.ts

@@ -1,41 +1,41 @@
-import { NumberFieldRootProps } from '@base-ui/react/number-field';
-import * as React from 'react';
-import { ComponentSize } from './size-context.js';
-
+import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import * as React from "react";
+import { NumberFieldRootProps } from "@base-ui/react/number-field";
+//#region src/number-input.d.ts
 declare const numberInputFormatPresets: {
-    compact: {
-        compactDisplay: "short";
-        notation: "compact";
-    };
-    currencyNgn: {
-        currency: string;
-        currencyDisplay: "narrowSymbol";
-        style: "currency";
-    };
-    decimal: {
-        useGrouping: true;
-    };
-    integer: {
-        maximumFractionDigits: number;
-        useGrouping: true;
-    };
-    percent: {
-        style: "percent";
-    };
-    plain: {
-        useGrouping: false;
-    };
+  compact: {
+    compactDisplay: "short";
+    notation: "compact";
+  };
+  currencyNgn: {
+    currency: string;
+    currencyDisplay: "narrowSymbol";
+    style: "currency";
+  };
+  decimal: {
+    useGrouping: true;
+  };
+  integer: {
+    maximumFractionDigits: number;
+    useGrouping: true;
+  };
+  percent: {
+    style: "percent";
+  };
+  plain: {
+    useGrouping: false;
+  };
 };
 type NumberInputFormatPreset = keyof typeof numberInputFormatPresets;
 type NumberInputProps = Omit<NumberFieldRootProps, "format"> & {
-    children?: React.ReactNode;
-    format?: Intl.NumberFormatOptions;
-    formatPreset?: NumberInputFormatPreset;
-    placeholder?: string;
-    size?: ComponentSize;
-    thousandSeparator?: boolean;
+  children?: React.ReactNode;
+  format?: Intl.NumberFormatOptions;
+  formatPreset?: NumberInputFormatPreset;
+  placeholder?: string;
+  size?: ComponentSize;
+  thousandSeparator?: boolean;
 };
 declare function NumberInput({ children, format, formatPreset, placeholder, size, thousandSeparator, ...props }: NumberInputProps): React.JSX.Element;
 declare function NumberInputControl(): React.JSX.Element;
-
-export { NumberInput, NumberInputControl, type NumberInputFormatPreset, numberInputFormatPresets };
+//#endregion
+export { NumberInput, NumberInputControl, type NumberInputFormatPreset, numberInputFormatPresets };