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

package/dist/stepper-C92Ib8Iy.mjs

@@ -0,0 +1,321 @@
+import { t as cn } from "./cn-D2KYQ917.mjs";
+import { t as Button } from "./button-D3RrsMfQ.mjs";
+import { cva } from "class-variance-authority";
+import * as React$1 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/stepper.tsx
+const StepperContext = React$1.createContext(null);
+function useStepperProvider() {
+	const context = React$1.use(StepperContext);
+	if (!context) throw new Error("useStepper must be used within a StepperProvider.");
+	return context;
+}
+const classForNavigationList = cva("flex gap-2", { variants: { variant: {
+	horizontal: "flex-row items-center justify-between",
+	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 { Scoped, useStepper, steps: stepList, Stepper: StepperizePrimitives } = Stepperize.defineStepper(...steps);
+	const StepperContainer = ({ children, className, ...props }) => {
+		const methods = useStepper();
+		return /* @__PURE__ */ jsx("div", {
+			"date-component": "stepper",
+			className: cn("w-full", className),
+			...props,
+			children: typeof children === "function" ? children({ methods }) : children
+		});
+	};
+	return {
+		steps: stepList,
+		useStepper,
+		Stepper: {
+			...StepperizePrimitives,
+			Provider: ({ variant = "horizontal", labelOrientation = "horizontal", tracking = false, children, className, ...props }) => {
+				return /* @__PURE__ */ jsx(StepperContext, {
+					value: {
+						variant,
+						labelOrientation,
+						tracking
+					},
+					children: /* @__PURE__ */ jsx(Scoped, {
+						initialStep: props.initialStep,
+						initialMetadata: props.initialMetadata,
+						children: /* @__PURE__ */ jsx(StepperContainer, {
+							className,
+							...props,
+							children
+						})
+					})
+				});
+			},
+			Navigation: ({ children, "aria-label": ariaLabel = "Stepper Navigation", ...props }) => {
+				const { variant } = useStepperProvider();
+				return /* @__PURE__ */ jsx("nav", {
+					"date-component": "stepper-navigation",
+					"aria-label": ariaLabel,
+					role: "tablist",
+					...props,
+					children: /* @__PURE__ */ jsx("ol", {
+						"date-component": "stepper-navigation-list",
+						className: classForNavigationList({ variant }),
+						children
+					})
+				});
+			},
+			Step: ({ children, className, icon, ...props }) => {
+				const { variant, labelOrientation } = useStepperProvider();
+				const stepper = useStepper();
+				const steps = stepList;
+				const stepIndex = stepper.lookup.getIndex(props.of);
+				const step = steps[stepIndex];
+				const currentIndex = stepper.lookup.getIndex(stepper.state.current.data.id);
+				const isLast = stepper.lookup.getLast().id === props.of;
+				const isActive = stepper.state.current.data.id === props.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",
+					className: cn("flex shrink-0 items-center gap-4 rounded-md transition-colors", className),
+					children: [/* @__PURE__ */ jsx(CircleStepIndicator, {
+						currentStep: stepIndex + 1,
+						totalSteps: steps.length
+					}), /* @__PURE__ */ jsxs("div", {
+						"date-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",
+						className: cn([
+							"group peer relative flex items-center gap-2",
+							"data-[variant=vertical]:flex-row",
+							"data-[label-orientation=vertical]:w-full",
+							"data-[label-orientation=vertical]:flex-col",
+							"data-[label-orientation=vertical]:justify-center"
+						]),
+						"data-variant": variant,
+						"data-label-orientation": labelOrientation,
+						"data-state": dataState,
+						"data-disabled": props.disabled,
+						children: [
+							/* @__PURE__ */ jsx(Button, {
+								id: `step-${step.id}`,
+								"date-component": "stepper-step-indicator",
+								type: "button",
+								role: "tab",
+								tabIndex: dataState !== "inactive" ? 0 : -1,
+								className: cn("rounded-full", className),
+								variant: dataState !== "inactive" ? "default" : "secondary",
+								size: "icon",
+								"aria-controls": `step-panel-${props.of}`,
+								"aria-current": isActive ? "step" : void 0,
+								"aria-posinset": stepIndex + 1,
+								"aria-setsize": steps.length,
+								"aria-selected": isActive,
+								onKeyDown: (e) => onStepKeyDown(e, stepper.lookup.getNext(props.of), stepper.lookup.getPrev(props.of)),
+								...props,
+								children: icon ?? stepIndex + 1
+							}),
+							variant === "horizontal" && labelOrientation === "vertical" && /* @__PURE__ */ jsx(StepperSeparator, {
+								orientation: "horizontal",
+								labelOrientation,
+								isLast,
+								state: dataState,
+								disabled: props.disabled
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								"date-component": "stepper-step-content",
+								className: "flex flex-col items-start",
+								children: [title, description]
+							})
+						]
+					}),
+					variant === "horizontal" && labelOrientation === "horizontal" && /* @__PURE__ */ jsx(StepperSeparator, {
+						orientation: "horizontal",
+						isLast,
+						state: dataState,
+						disabled: props.disabled
+					}),
+					variant === "vertical" && /* @__PURE__ */ jsxs("div", {
+						className: "flex gap-4",
+						children: [!isLast && /* @__PURE__ */ jsx("div", {
+							className: "flex justify-center ps-[calc(var(--spacing)_*_4.5_-_1px)]",
+							children: /* @__PURE__ */ jsx(StepperSeparator, {
+								orientation: "vertical",
+								isLast,
+								state: dataState,
+								disabled: props.disabled
+							})
+						}), /* @__PURE__ */ jsx("div", {
+							className: "my-3 flex-1 ps-4",
+							children: panel
+						})]
+					})
+				] });
+			},
+			Title,
+			Description,
+			Panel: ({ children, asChild, ...props }) => {
+				const Comp = asChild ? Slot : "div";
+				const { tracking } = useStepperProvider();
+				return /* @__PURE__ */ jsx(Comp, {
+					"date-component": "stepper-step-panel",
+					ref: (node) => scrollIntoStepperPanel(node, tracking),
+					...props,
+					children
+				});
+			},
+			Controls: ({ children, className, asChild, ...props }) => {
+				return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+					"date-component": "stepper-controls",
+					className: cn("flex justify-end gap-4", className),
+					...props,
+					children
+				});
+			}
+		}
+	};
+}
+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$1.useMemo(() => extractChildren(children), [children]);
+}
+function extractChildren(children) {
+	const childrenArray = React$1.Children.toArray(children);
+	const map = /* @__PURE__ */ new Map();
+	for (const child of childrenArray) if (React$1.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/tag-input/index.mjs

@@ -1,2 +1,2 @@
-import { t as TagsInput } from "../tag-input-BVSwNcRd.mjs";
+import { t as TagsInput } from "../tag-input-B91C2wdr.mjs";
 export { TagsInput };

package/dist/task-queue/index.mjs

@@ -1,2 +1,2 @@
-import { _ as RedisTaskStorage, a as TaskPanelItem, b as createProjectMetadata, c as TaskPanelHeader, d as useCurrentScope, f as useTasksWithLabels, g as detectStorage, h as TaskQueue, i as TaskPanel, l as getContextLabel, m as TaskQueueProvider, n as TaskSummaryDialog, o as TaskPanelCounter, p as useTaskQueue, r as TaskQueueTrigger, s as TaskPanelActions, t as TaskQueueDropdown, u as matchesCurrentScope, v as LocalTaskStorage, x as createUserMetadata, y as createOrgMetadata } from "../task-queue-dropdown-DyM5R8KF.mjs";
+import { _ as RedisTaskStorage, a as TaskPanelItem, b as createProjectMetadata, c as TaskPanelHeader, d as useCurrentScope, f as useTasksWithLabels, g as detectStorage, h as TaskQueue, i as TaskPanel, l as getContextLabel, m as TaskQueueProvider, n as TaskSummaryDialog, o as TaskPanelCounter, p as useTaskQueue, r as TaskQueueTrigger, s as TaskPanelActions, t as TaskQueueDropdown, u as matchesCurrentScope, v as LocalTaskStorage, x as createUserMetadata, y as createOrgMetadata } from "../task-queue-dropdown-OOFuJcHb.mjs";
 export { LocalTaskStorage, RedisTaskStorage, TaskPanel, TaskPanelActions, TaskPanelCounter, TaskPanelHeader, TaskPanelItem, TaskQueue, TaskQueueDropdown, TaskQueueProvider, TaskQueueTrigger, TaskSummaryDialog, createOrgMetadata, createProjectMetadata, createUserMetadata, detectStorage, getContextLabel, matchesCurrentScope, useCurrentScope, useTaskQueue, useTasksWithLabels };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datum-cloud/datum-ui",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.6.0-alpha.a49f238",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/datum-cloud/datum-ui"
@@ -234,6 +234,21 @@
       "types": "./dist/components/features/form/index.d.ts",
       "default": "./dist/form/index.mjs"
     },
+    "./form/adapters/conform": {
+      "source": "./src/components/features/form/adapters/conform/index.ts",
+      "types": "./dist/components/features/form/adapters/conform/index.d.ts",
+      "default": "./dist/form/adapters/conform/index.mjs"
+    },
+    "./form/adapters/rhf": {
+      "source": "./src/components/features/form/adapters/rhf/index.ts",
+      "types": "./dist/components/features/form/adapters/rhf/index.d.ts",
+      "default": "./dist/form/adapters/rhf/index.mjs"
+    },
+    "./form/stepper": {
+      "source": "./src/components/features/form/stepper/index.ts",
+      "types": "./dist/components/features/form/stepper/index.d.ts",
+      "default": "./dist/form/stepper/index.mjs"
+    },
     "./grid": {
       "types": "./dist/components/features/grid/index.d.ts",
       "style": "./dist/grid/style.css",
@@ -321,6 +336,7 @@
   "peerDependencies": {
     "@conform-to/react": ">=1",
     "@conform-to/zod": ">=1",
+    "@hookform/resolvers": ">=5",
     "@monaco-editor/react": "^4.7.0",
     "@stepperize/react": ">=4",
     "@tanstack/react-table": ">=8",
@@ -341,12 +357,13 @@
     "react-day-picker": ">=9",
     "react-dom": ">=19",
     "react-dropzone": ">=14",
+    "react-hook-form": ">=7.55",
     "react-leaflet": ">=5",
     "react-leaflet-markercluster": ">=5.0.0-rc.0",
     "react-number-format": ">=5",
     "recharts": ">=2",
     "sonner": ">=2",
-    "zod": ">=3"
+    "zod": ">=4"
   },
   "peerDependenciesMeta": {
     "@conform-to/react": {
@@ -355,6 +372,9 @@
     "@conform-to/zod": {
       "optional": true
     },
+    "@hookform/resolvers": {
+      "optional": true
+    },
     "@monaco-editor/react": {
       "optional": true
     },
@@ -407,6 +427,9 @@
     "react-dropzone": {
       "optional": true
     },
+    "react-hook-form": {
+      "optional": true
+    },
     "react-leaflet": {
       "optional": true
     },
@@ -452,6 +475,7 @@
   "devDependencies": {
     "@conform-to/react": "^1.17.1",
     "@conform-to/zod": "^1.17.1",
+    "@hookform/resolvers": "^5.2.2",
     "@monaco-editor/react": "^4.7.0",
     "@stepperize/react": "^6.1.0",
     "@tanstack/react-table": "^8.21.3",
@@ -485,6 +509,7 @@
     "react-day-picker": "^9.14.0",
     "react-dom": "^19",
     "react-dropzone": "^15.0.0",
+    "react-hook-form": "^7.71.2",
     "react-leaflet": "^5.0.0",
     "react-leaflet-markercluster": "5.0.0-rc.0",
     "react-number-format": "^5.4.4",