@datum-cloud/datum-ui 0.4.0 → 0.5.0

package/dist/stepper-BMsn7I78.mjs

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

@@ -1,52 +0,0 @@
-import { t as cn } from "./cn-DWCc1QRE.mjs";
-import "react";
-import { jsx } from "react/jsx-runtime";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-
-//#region src/components/base/tabs/tabs.tsx
-/**
-* Datum Tabs Component
-* Extends shadcn Tabs with:
-* - TabsLinkTrigger for router-agnostic link integration
-* - Dark mode customizations
-*/
-function Tabs({ className, ...props }) {
-	return /* @__PURE__ */ jsx(TabsPrimitive.Root, {
-		className: cn("flex flex-col gap-2", className),
-		...props
-	});
-}
-function TabsList({ className, ...props }) {
-	return /* @__PURE__ */ jsx(TabsPrimitive.List, {
-		className: cn("bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-1", className),
-		...props
-	});
-}
-function TabsTrigger({ className, ...props }) {
-	return /* @__PURE__ */ jsx(TabsPrimitive.Trigger, {
-		className: cn("data-[state=active]:bg-background dark:data-[state=active]:text-foreground data-[state=active]:text-foreground dark:hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring inline-flex flex-1 items-center justify-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
-		...props
-	});
-}
-function TabsContent({ className, ...props }) {
-	return /* @__PURE__ */ jsx(TabsPrimitive.Content, {
-		className: cn("flex-1 outline-none", className),
-		...props
-	});
-}
-function TabsLinkTrigger({ value, href, linkComponent: LinkComp = "a", children, className, ...props }) {
-	const linkProps = LinkComp === "a" ? { href } : { to: href };
-	return /* @__PURE__ */ jsx(TabsTrigger, {
-		value,
-		asChild: true,
-		className,
-		...props,
-		children: /* @__PURE__ */ jsx(LinkComp, {
-			...linkProps,
-			children
-		})
-	});
-}
-
-//#endregion
-export { TabsTrigger as a, TabsList as i, TabsContent as n, TabsLinkTrigger as r, Tabs as t };