@datum-cloud/datum-ui 0.2.0-alpha.3 → 0.2.0-alpha.5

package/dist/skeleton/index.mjs

@@ -0,0 +1,4 @@
+import "../utils-Bfgoe-Gm.mjs";
+import { t as Skeleton } from "../skeleton-vzbxA-DQ.mjs";
+
+export { Skeleton };

package/dist/skeleton-vzbxA-DQ.mjs

@@ -0,0 +1,13 @@
+import { t as cn } from "./utils-Bfgoe-Gm.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region ../shadcn/ui/skeleton.tsx
+function Skeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("bg-muted animate-pulse rounded-md", className),
+		...props
+	});
+}
+
+//#endregion
+export { Skeleton as t };

package/dist/spinner/index.mjs

@@ -0,0 +1,4 @@
+import "../utils-Bfgoe-Gm.mjs";
+import { t as Spinner } from "../spinner-BE7k2bAD.mjs";
+
+export { Spinner };

package/dist/spinner-BE7k2bAD.mjs

@@ -0,0 +1,16 @@
+import { t as cn } from "./utils-Bfgoe-Gm.mjs";
+import { Loader2Icon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+
+//#region ../shadcn/ui/spinner.tsx
+function Spinner({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Loader2Icon, {
+		role: "status",
+		"aria-label": "Loading",
+		className: cn("size-4 animate-spin", className),
+		...props
+	});
+}
+
+//#endregion
+export { Spinner as t };

package/dist/{icon-wrapper-BgPkifId.mjs → spinner.icon-Bg8zgGh0.mjs}

@@ -47,15 +47,4 @@ function SpinnerIcon({ size, className, trackClassName = "text-border", indicato
 }
 
 //#endregion
-//#region src/components/icons/icon-wrapper.tsx
-function Icon({ icon: IconComponent, strokeWidth = 1, absoluteStrokeWidth = true, size = 16, ...props }) {
-	return /* @__PURE__ */ jsx(IconComponent, {
-		...props,
-		strokeWidth,
-		absoluteStrokeWidth,
-		size
-	});
-}
-
-//#endregion
-export { SpinnerIcon as n, Icon as t };
+export { SpinnerIcon as t };

package/dist/stepper/index.mjs

@@ -0,0 +1,5 @@
+import "../utils-Bfgoe-Gm.mjs";
+import "../button-AzpnV-WB.mjs";
+import { t as defineStepper } from "../stepper-SWB-u_nM.mjs";
+
+export { defineStepper };

package/dist/stepper-SWB-u_nM.mjs

@@ -0,0 +1,323 @@
+import { t as cn } from "./cn-DWCc1QRE.mjs";
+import { t as Button } from "./button-AzpnV-WB.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 };