@datum-cloud/datum-ui 1.3.2 → 1.5.0

package/dist/{stepper-DV9FH5Cy.mjs → stepper-DJkYcilu.mjs}

@@ -1,10 +1,151 @@
-import { t as cn } from "./cn-dlASUkDY.mjs";
+import { t as cn } from "./utils-Bu32wN-x.mjs";
 import { t as Button } from "./button-CsdF61EI.mjs";
 import { cva } from "class-variance-authority";
 import * as React from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import * as Stepperize from "@stepperize/react";
+//#region src/components/features/stepper/parts.tsx
+const classForSeparator = cva([
+	"bg-muted",
+	"data-[state=completed]:bg-primary data-[disabled]:opacity-50",
+	"transition-all duration-300 ease-in-out"
+], { variants: {
+	orientation: {
+		horizontal: "h-0.5 flex-1",
+		vertical: "h-full w-0.5"
+	},
+	labelOrientation: { vertical: "absolute left-[calc(50%+30px)] right-[calc(-50%+20px)] top-5 block shrink-0" }
+} });
+function Title({ children, className, asChild, ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "h4", {
+		"data-component": "stepper-step-title",
+		className: cn("text-base font-medium", className),
+		...props,
+		children
+	});
+}
+function Description({ children, className, asChild, ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "p", {
+		"data-component": "stepper-step-description",
+		className: cn("text-muted-foreground text-sm", className),
+		...props,
+		children
+	});
+}
+function StepperSeparator({ orientation, isLast, labelOrientation, state, disabled }) {
+	if (isLast) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-component": "stepper-separator",
+		"data-orientation": orientation,
+		"data-state": state,
+		"data-disabled": disabled,
+		role: "separator",
+		tabIndex: -1,
+		className: classForSeparator({
+			orientation,
+			labelOrientation
+		})
+	});
+}
+function CircleStepIndicator({ currentStep, totalSteps, size = 80, strokeWidth = 6 }) {
+	const radius = (size - strokeWidth) / 2;
+	const circumference = radius * 2 * Math.PI;
+	const dashOffset = circumference - circumference * (currentStep / totalSteps * 100) / 100;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-component": "stepper-step-indicator",
+		role: "progressbar",
+		"aria-valuenow": currentStep,
+		"aria-valuemin": 1,
+		"aria-valuemax": totalSteps,
+		tabIndex: -1,
+		className: "relative inline-flex items-center justify-center",
+		children: [/* @__PURE__ */ jsxs("svg", {
+			width: size,
+			height: size,
+			children: [
+				/* @__PURE__ */ jsx("title", { children: "Step Indicator" }),
+				/* @__PURE__ */ jsx("circle", {
+					cx: size / 2,
+					cy: size / 2,
+					r: radius,
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth,
+					className: "text-muted-foreground"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: size / 2,
+					cy: size / 2,
+					r: radius,
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth,
+					strokeDasharray: circumference,
+					strokeDashoffset: dashOffset,
+					className: "text-primary transition-all duration-300 ease-in-out",
+					transform: `rotate(-90 ${size / 2} ${size / 2})`
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "absolute inset-0 flex items-center justify-center",
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "text-sm font-medium",
+				"aria-live": "polite",
+				children: [
+					currentStep,
+					" ",
+					"of",
+					" ",
+					totalSteps
+				]
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/components/features/stepper/utils.ts
+function scrollIntoStepperPanel(node, tracking) {
+	if (tracking) node?.scrollIntoView({
+		behavior: "smooth",
+		block: "center"
+	});
+}
+function useStepChildren(children) {
+	return React.useMemo(() => extractChildren(children), [children]);
+}
+function extractChildren(children) {
+	const childrenArray = React.Children.toArray(children);
+	const map = /* @__PURE__ */ new Map();
+	for (const child of childrenArray) if (React.isValidElement(child)) if (child.type === Title) map.set("title", child);
+	else if (child.type === Description) map.set("description", child);
+	else map.set("panel", child);
+	return map;
+}
+function onStepKeyDown(e, nextStep, prevStep, instanceId) {
+	const { key } = e;
+	const directions = {
+		next: ["ArrowRight", "ArrowDown"],
+		prev: ["ArrowLeft", "ArrowUp"]
+	};
+	if (directions.next.includes(key) || directions.prev.includes(key)) {
+		const direction = directions.next.includes(key) ? "next" : "prev";
+		const step = direction === "next" ? nextStep : prevStep;
+		if (!step) return;
+		const stepElement = document.getElementById(stepDomId(instanceId, step.id));
+		if (!stepElement) return;
+		if (stepElement.parentElement?.getAttribute("data-state") !== "inactive" || direction === "prev") stepElement.focus();
+	}
+}
+function stepDomId(instanceId, stepId) {
+	return `${instanceId}step-${stepId}`;
+}
+function getStepState(currentIndex, stepIndex) {
+	if (currentIndex === stepIndex) return "active";
+	if (currentIndex > stepIndex) return "completed";
+	return "inactive";
+}
+//#endregion
 //#region src/components/features/stepper/stepper.tsx
 const StepperContext = React.createContext(null);
 function useStepperProvider() {
@@ -17,23 +158,12 @@ const classForNavigationList = cva("flex gap-2", { variants: { variant: {
 	vertical: "flex-col",
 	circle: "flex-row items-center justify-between"
 } } });
-const classForSeparator = cva([
-	"bg-muted",
-	"data-[state=completed]:bg-primary data-[disabled]:opacity-50",
-	"transition-all duration-300 ease-in-out"
-], { variants: {
-	orientation: {
-		horizontal: "h-0.5 flex-1",
-		vertical: "h-full w-0.5"
-	},
-	labelOrientation: { vertical: "absolute left-[calc(50%+30px)] right-[calc(-50%+20px)] top-5 block shrink-0" }
-} });
 function defineStepper(...steps) {
 	const { Provider: StepperizeProvider, useStepper, steps: stepList, Stepper: StepperizePrimitives } = Stepperize.defineStepper(steps);
 	const StepperContainer = ({ children, className, ...props }) => {
 		const methods = useStepper();
 		return /* @__PURE__ */ jsx("div", {
-			"date-component": "stepper",
+			"data-component": "stepper",
 			className: cn("w-full", className),
 			...props,
 			children: typeof children === "function" ? children({ methods }) : children
@@ -49,7 +179,8 @@ function defineStepper(...steps) {
 					value: {
 						variant,
 						labelOrientation,
-						tracking
+						tracking,
+						instanceId: React.useId()
 					},
 					children: /* @__PURE__ */ jsx(StepperizeProvider, {
 						defaultStep,
@@ -65,46 +196,56 @@ function defineStepper(...steps) {
 			Navigation: ({ children, "aria-label": ariaLabel = "Stepper Navigation", ...props }) => {
 				const { variant } = useStepperProvider();
 				return /* @__PURE__ */ jsx("nav", {
-					"date-component": "stepper-navigation",
+					"data-component": "stepper-navigation",
 					"aria-label": ariaLabel,
 					role: "tablist",
 					...props,
 					children: /* @__PURE__ */ jsx("ol", {
-						"date-component": "stepper-navigation-list",
+						"data-component": "stepper-navigation-list",
 						className: classForNavigationList({ variant }),
 						children
 					})
 				});
 			},
-			Step: ({ children, className, icon, ...props }) => {
-				const { variant, labelOrientation } = useStepperProvider();
+			Step: ({ children, className, icon, of, variant: stepVariant, ...props }) => {
+				const { variant, labelOrientation, instanceId } = useStepperProvider();
 				const stepper = useStepper();
 				const steps = stepList;
-				const stepIndex = steps.findIndex((s) => s.id === props.of);
+				const stepIndex = steps.findIndex((s) => s.id === of);
 				const step = steps[stepIndex];
 				const currentIndex = stepper.index;
 				const isLast = stepIndex === steps.length - 1;
-				const isActive = stepper.current.id === props.of;
+				const isActive = stepper.current.id === of;
 				const dataState = getStepState(currentIndex, stepIndex);
 				const childMap = useStepChildren(children);
 				const title = childMap.get("title");
 				const description = childMap.get("description");
 				const panel = childMap.get("panel");
 				if (variant === "circle") return /* @__PURE__ */ jsxs("li", {
-					"date-component": "stepper-step",
+					"data-component": "stepper-step",
+					"data-state": dataState,
+					"data-disabled": props.disabled,
 					className: cn("flex shrink-0 items-center gap-4 rounded-md transition-colors", className),
-					children: [/* @__PURE__ */ jsx(CircleStepIndicator, {
-						currentStep: stepIndex + 1,
-						totalSteps: steps.length
+					children: [/* @__PURE__ */ jsx("button", {
+						id: stepDomId(instanceId, step.id),
+						type: "button",
+						"aria-current": isActive ? "step" : void 0,
+						"aria-selected": isActive,
+						className: cn("rounded-full", "disabled:cursor-not-allowed disabled:opacity-50", props.onClick ? "cursor-pointer" : void 0),
+						...props,
+						children: /* @__PURE__ */ jsx(CircleStepIndicator, {
+							currentStep: stepIndex + 1,
+							totalSteps: steps.length
+						})
 					}), /* @__PURE__ */ jsxs("div", {
-						"date-component": "stepper-step-content",
+						"data-component": "stepper-step-content",
 						className: "flex flex-col items-start gap-1",
 						children: [title, description]
 					})]
 				});
 				return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					/* @__PURE__ */ jsxs("li", {
-						"date-component": "stepper-step",
+						"data-component": "stepper-step",
 						className: cn([
 							"group peer relative flex items-center gap-2",
 							"data-[variant=vertical]:flex-row",
@@ -118,20 +259,20 @@ function defineStepper(...steps) {
 						"data-disabled": props.disabled,
 						children: [
 							/* @__PURE__ */ jsx(Button, {
-								id: `step-${step.id}`,
-								"date-component": "stepper-step-indicator",
+								id: stepDomId(instanceId, step.id),
+								"data-component": "stepper-step-indicator",
 								type: "button",
 								role: "tab",
 								tabIndex: dataState !== "inactive" ? 0 : -1,
 								className: cn("rounded-full", className),
-								variant: dataState !== "inactive" ? "default" : "secondary",
+								variant: stepVariant ?? (dataState !== "inactive" ? "default" : "secondary"),
 								size: "icon",
-								"aria-controls": `step-panel-${props.of}`,
+								"aria-controls": `step-panel-${of}`,
 								"aria-current": isActive ? "step" : void 0,
 								"aria-posinset": stepIndex + 1,
 								"aria-setsize": steps.length,
 								"aria-selected": isActive,
-								onKeyDown: (e) => onStepKeyDown(e, steps[stepIndex + 1], steps[stepIndex - 1]),
+								onKeyDown: (e) => onStepKeyDown(e, steps[stepIndex + 1], steps[stepIndex - 1], instanceId),
 								...props,
 								children: icon ?? stepIndex + 1
 							}),
@@ -143,7 +284,7 @@ function defineStepper(...steps) {
 								disabled: props.disabled
 							}),
 							/* @__PURE__ */ jsxs("div", {
-								"date-component": "stepper-step-content",
+								"data-component": "stepper-step-content",
 								className: "flex flex-col items-start",
 								children: [title, description]
 							})
@@ -178,7 +319,7 @@ function defineStepper(...steps) {
 				const Comp = asChild ? Slot : "div";
 				const { tracking } = useStepperProvider();
 				return /* @__PURE__ */ jsx(Comp, {
-					"date-component": "stepper-step-panel",
+					"data-component": "stepper-step-panel",
 					ref: (node) => scrollIntoStepperPanel(node, tracking),
 					...props,
 					children
@@ -186,7 +327,7 @@ function defineStepper(...steps) {
 			},
 			Controls: ({ children, className, asChild, ...props }) => {
 				return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
-					"date-component": "stepper-controls",
+					"data-component": "stepper-controls",
 					className: cn("flex justify-end gap-4", className),
 					...props,
 					children
@@ -195,127 +336,5 @@ function defineStepper(...steps) {
 		}
 	};
 }
-function Title({ children, className, asChild, ...props }) {
-	return /* @__PURE__ */ jsx(asChild ? Slot : "h4", {
-		"date-component": "stepper-step-title",
-		className: cn("text-base font-medium", className),
-		...props,
-		children
-	});
-}
-function Description({ children, className, asChild, ...props }) {
-	return /* @__PURE__ */ jsx(asChild ? Slot : "p", {
-		"date-component": "stepper-step-description",
-		className: cn("text-muted-foreground text-sm", className),
-		...props,
-		children
-	});
-}
-function StepperSeparator({ orientation, isLast, labelOrientation, state, disabled }) {
-	if (isLast) return null;
-	return /* @__PURE__ */ jsx("div", {
-		"date-component": "stepper-separator",
-		"data-orientation": orientation,
-		"data-state": state,
-		"data-disabled": disabled,
-		role: "separator",
-		tabIndex: -1,
-		className: classForSeparator({
-			orientation,
-			labelOrientation
-		})
-	});
-}
-function CircleStepIndicator({ currentStep, totalSteps, size = 80, strokeWidth = 6 }) {
-	const radius = (size - strokeWidth) / 2;
-	const circumference = radius * 2 * Math.PI;
-	const dashOffset = circumference - circumference * (currentStep / totalSteps * 100) / 100;
-	return /* @__PURE__ */ jsxs("div", {
-		"date-component": "stepper-step-indicator",
-		role: "progressbar",
-		"aria-valuenow": currentStep,
-		"aria-valuemin": 1,
-		"aria-valuemax": totalSteps,
-		tabIndex: -1,
-		className: "relative inline-flex items-center justify-center",
-		children: [/* @__PURE__ */ jsxs("svg", {
-			width: size,
-			height: size,
-			children: [
-				/* @__PURE__ */ jsx("title", { children: "Step Indicator" }),
-				/* @__PURE__ */ jsx("circle", {
-					cx: size / 2,
-					cy: size / 2,
-					r: radius,
-					fill: "none",
-					stroke: "currentColor",
-					strokeWidth,
-					className: "text-muted-foreground"
-				}),
-				/* @__PURE__ */ jsx("circle", {
-					cx: size / 2,
-					cy: size / 2,
-					r: radius,
-					fill: "none",
-					stroke: "currentColor",
-					strokeWidth,
-					strokeDasharray: circumference,
-					strokeDashoffset: dashOffset,
-					className: "text-primary transition-all duration-300 ease-in-out",
-					transform: `rotate(-90 ${size / 2} ${size / 2})`
-				})
-			]
-		}), /* @__PURE__ */ jsx("div", {
-			className: "absolute inset-0 flex items-center justify-center",
-			children: /* @__PURE__ */ jsxs("span", {
-				className: "text-sm font-medium",
-				"aria-live": "polite",
-				children: [
-					currentStep,
-					" ",
-					"of",
-					totalSteps
-				]
-			})
-		})]
-	});
-}
-function scrollIntoStepperPanel(node, tracking) {
-	if (tracking) node?.scrollIntoView({
-		behavior: "smooth",
-		block: "center"
-	});
-}
-function useStepChildren(children) {
-	return React.useMemo(() => extractChildren(children), [children]);
-}
-function extractChildren(children) {
-	const childrenArray = React.Children.toArray(children);
-	const map = /* @__PURE__ */ new Map();
-	for (const child of childrenArray) if (React.isValidElement(child)) if (child.type === Title) map.set("title", child);
-	else if (child.type === Description) map.set("description", child);
-	else map.set("panel", child);
-	return map;
-}
-function onStepKeyDown(e, nextStep, prevStep) {
-	const { key } = e;
-	const directions = {
-		next: ["ArrowRight", "ArrowDown"],
-		prev: ["ArrowLeft", "ArrowUp"]
-	};
-	if (directions.next.includes(key) || directions.prev.includes(key)) {
-		const direction = directions.next.includes(key) ? "next" : "prev";
-		const step = direction === "next" ? nextStep : prevStep;
-		if (!step) return;
-		const stepElement = document.getElementById(`step-${step.id}`);
-		if (!stepElement) return;
-		if (stepElement.parentElement?.getAttribute("data-state") !== "inactive" || direction === "prev") stepElement.focus();
-	}
-}
-function getStepState(currentIndex, stepIndex) {
-	if (currentIndex === stepIndex) return "active";
-	if (currentIndex > stepIndex) return "completed";
-	return "inactive";
-}
 //#endregion
 export { defineStepper as t };

package/dist/styles/root.css

@@ -30,5 +30,9 @@
 /* Shadcn/ui base variables and component styles */
 @import './shadcn/shadcn.css';
 
+/* Custom keyframes/utilities used by shadcn components
+ * (.animate-collapsible-*, .tooltip-content, .popover-content-width-full). */
+@import './shadcn/animations.css';
+
 /* Theme overrides — always loaded after shadcn */
 @import './themes/alpha.css';