@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.1.0

package/dist/components/ui/number-roll.js

@@ -0,0 +1,269 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ui/number-roll.tsx
+const DEFAULT_DURATION = 500;
+const DIGIT_CELLS = Array.from({ length: 10 }, (_, i) => i);
+let supportsRoll;
+const subscribeToNothing = () => () => {};
+const notEnhanced = () => false;
+let rollPropertyRegistered = false;
+const readSupportsRoll = () => supportsRoll ??= typeof CSS !== "undefined" && typeof CSS.registerProperty === "function" && CSS.supports("transform", "translateY(clamp(-1lh, calc((mod(7.5, 10) - 5) * 1lh), 1lh))");
+const registerRollProperty = () => {
+	if (rollPropertyRegistered) return;
+	rollPropertyRegistered = true;
+	try {
+		CSS.registerProperty({
+			name: "--aui-number-roll-pos",
+			syntax: "<number>",
+			inherits: true,
+			initialValue: "0"
+		});
+	} catch {}
+};
+const formatterCache = /* @__PURE__ */ new Map();
+const getFormatter = (locales, format) => {
+	const key = `${String(locales)}\u0000${JSON.stringify(format)}`;
+	let formatter = formatterCache.get(key);
+	if (!formatter) {
+		formatter = new Intl.NumberFormat(locales, format);
+		formatterCache.set(key, formatter);
+	}
+	return formatter;
+};
+const toParts = (value, formatter, prefix, suffix) => {
+	const atoms = [];
+	if (prefix) atoms.push({
+		kind: "symbol",
+		type: "prefix",
+		value: prefix
+	});
+	for (const part of formatter.formatToParts(value)) if (part.type === "integer" || part.type === "fraction") for (const char of part.value) {
+		const digit = char.charCodeAt(0) - 48;
+		if (digit >= 0 && digit <= 9) atoms.push({
+			kind: part.type,
+			digit
+		});
+		else atoms.push({
+			kind: "symbol",
+			type: part.type,
+			value: char
+		});
+	}
+	else if (part.type === "group") atoms.push({
+		kind: "group",
+		value: part.value
+	});
+	else {
+		const type = part.type === "minusSign" || part.type === "plusSign" ? "sign" : part.type;
+		atoms.push({
+			kind: "symbol",
+			type,
+			value: part.value
+		});
+	}
+	if (suffix) atoms.push({
+		kind: "symbol",
+		type: "suffix",
+		value: suffix
+	});
+	const counts = /* @__PURE__ */ new Map();
+	const nextKey = (type) => {
+		const count = counts.get(type) ?? 0;
+		counts.set(type, count + 1);
+		return `${type}:${count}`;
+	};
+	const parts = new Array(atoms.length);
+	for (let i = atoms.length - 1; i >= 0; i--) {
+		const atom = atoms[i];
+		if (atom.kind === "integer") parts[i] = {
+			type: "digit",
+			key: nextKey("int"),
+			digit: atom.digit
+		};
+		else if (atom.kind === "group") parts[i] = {
+			type: "symbol",
+			key: nextKey("group"),
+			value: atom.value
+		};
+	}
+	for (let i = 0; i < atoms.length; i++) {
+		const atom = atoms[i];
+		if (atom.kind === "fraction") parts[i] = {
+			type: "digit",
+			key: nextKey("fraction"),
+			digit: atom.digit
+		};
+		else if (atom.kind === "symbol") parts[i] = {
+			type: "symbol",
+			key: `${nextKey(atom.type)}:${atom.value}`,
+			value: atom.value
+		};
+	}
+	return parts;
+};
+const merge = (prev, next) => {
+	const nextKeys = new Set(next.map((part) => part.key));
+	const prevKeys = new Set(prev.map((part) => part.key));
+	const out = [];
+	let i = 0;
+	const emitExited = (until) => {
+		while (i < prev.length && prev[i].key !== until) {
+			const old = prev[i++];
+			if (!nextKeys.has(old.key)) out.push(old.exiting ? old : {
+				...old,
+				exiting: true
+			});
+		}
+	};
+	for (const part of next) if (prevKeys.has(part.key)) {
+		emitExited(part.key);
+		i++;
+		out.push(part);
+	} else out.push({
+		...part,
+		entered: true
+	});
+	emitExited(void 0);
+	return out;
+};
+const rollDelta = (from, to, dir) => {
+	const up = ((to - from) % 10 + 10) % 10;
+	if (dir > 0) return up;
+	if (dir < 0) return up - 10;
+	return up > 5 ? up - 10 : up;
+};
+function NumberRollDigit({ digit, dir }) {
+	const [state, setState] = useState({
+		digit,
+		roll: digit
+	});
+	if (state.digit !== digit) setState({
+		digit,
+		roll: state.roll + rollDelta(state.digit, digit, dir)
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "number-roll-digit",
+		className: "relative inline-block overflow-clip [transition-property:--aui-number-roll-pos] duration-(--aui-number-roll-duration) ease-(--aui-number-roll-ease) motion-reduce:transition-none",
+		style: { "--aui-number-roll-pos": state.roll },
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-d": digit,
+			className: "invisible before:content-[attr(data-d)]"
+		}), DIGIT_CELLS.map((cell) => /* @__PURE__ */ jsx("span", {
+			"data-d": cell,
+			className: "absolute inset-0 text-center before:content-[attr(data-d)]",
+			style: { transform: `translateY(clamp(-1lh, calc((mod(mod(${cell} - var(--aui-number-roll-pos), 10) + 5, 10) - 5) * 1lh), 1lh))` }
+		}, cell))]
+	});
+}
+function NumberRollPart({ part, dir }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "number-roll-part",
+		className: cn("inline-grid grid-cols-[1fr] transition-[grid-template-columns,opacity,translate] duration-(--aui-number-roll-fade) ease-out motion-reduce:transition-none", part.entered && "starting:translate-y-(--aui-number-roll-shift) starting:grid-cols-[0fr] starting:opacity-0", part.exiting && "pointer-events-none translate-y-[calc(var(--aui-number-roll-shift)*-1)] grid-cols-[0fr] opacity-0"),
+		style: { "--aui-number-roll-shift": dir === 0 ? "0%" : dir > 0 ? "35%" : "-35%" },
+		children: /* @__PURE__ */ jsx("span", {
+			className: "min-w-0 overflow-hidden",
+			children: part.type === "digit" ? /* @__PURE__ */ jsx(NumberRollDigit, {
+				digit: part.digit,
+				dir
+			}) : /* @__PURE__ */ jsx("span", {
+				"data-slot": "number-roll-symbol",
+				className: "whitespace-pre",
+				children: part.value
+			})
+		})
+	});
+}
+/**
+* Animated number that rolls digits odometer-style when the value changes. Formatting is driven by `Intl.NumberFormat`, so compact notation ("1.1K"), currencies, percentages, and locale-specific output animate gracefully: digits spin in place while entering and exiting characters slide and fade. Renders the plain formatted value on the server and in browsers without CSS `mod()` support; when server rendering, pass an explicit `locales` so the server and client format identically.
+*
+* ```tsx
+* <NumberRoll value={count} format={{ notation: "compact" }} />
+* ```
+*/
+function NumberRoll({ value, format, locales, prefix, suffix, trend = "auto", duration = DEFAULT_DURATION, className, style, ...props }) {
+	const enhanced = useSyncExternalStore(subscribeToNothing, readSupportsRoll, notEnhanced);
+	useEffect(() => {
+		if (enhanced) registerRollProperty();
+	}, [enhanced]);
+	const formatter = getFormatter(locales, format);
+	const parts = useMemo(() => toParts(value, formatter, prefix, suffix), [
+		value,
+		formatter,
+		prefix,
+		suffix
+	]);
+	const formatted = `${prefix ?? ""}${formatter.format(value)}${suffix ?? ""}`;
+	const [display, setDisplay] = useState(() => ({
+		value,
+		formatted,
+		rendered: parts,
+		dir: 0
+	}));
+	if (display.formatted !== formatted) setDisplay({
+		value,
+		formatted,
+		rendered: merge(display.rendered, parts),
+		dir: trend === "up" ? 1 : trend === "down" ? -1 : Math.sign(value - display.value)
+	});
+	const exitTimers = useRef(/* @__PURE__ */ new Map());
+	const lastDuration = useRef(duration);
+	useEffect(() => {
+		const timers = exitTimers.current;
+		if (lastDuration.current !== duration) {
+			lastDuration.current = duration;
+			for (const timer of timers.values()) clearTimeout(timer);
+			timers.clear();
+		}
+		const exiting = new Set(display.rendered.filter((part) => part.exiting).map((part) => part.key));
+		for (const [key, timer] of timers) if (!exiting.has(key)) {
+			clearTimeout(timer);
+			timers.delete(key);
+		}
+		for (const key of exiting) {
+			if (timers.has(key)) continue;
+			timers.set(key, setTimeout(() => {
+				timers.delete(key);
+				setDisplay((current) => ({
+					...current,
+					rendered: current.rendered.filter((part) => !(part.exiting && part.key === key))
+				}));
+			}, duration));
+		}
+	}, [display.rendered, duration]);
+	useEffect(() => {
+		const timers = exitTimers.current;
+		return () => {
+			for (const timer of timers.values()) clearTimeout(timer);
+			timers.clear();
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "number-roll",
+		className: cn("inline-block whitespace-nowrap tabular-nums", className),
+		style: {
+			"--aui-number-roll-duration": `${duration}ms`,
+			"--aui-number-roll-fade": "calc(var(--aui-number-roll-duration) * 0.6)",
+			"--aui-number-roll-ease": "cubic-bezier(0.23, 1, 0.32, 1)",
+			...style
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: formatted
+		}), enhanced ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "inline-block select-none",
+			children: display.rendered.map((part) => /* @__PURE__ */ jsx(NumberRollPart, {
+				part,
+				dir: display.dir
+			}, part.key))
+		}) : /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			children: formatted
+		})]
+	});
+}
+//#endregion
+export { NumberRoll };

package/dist/components/ui/pagination.d.ts

@@ -0,0 +1,19 @@
+import { Button } from "./button.js";
+import * as React from "react";
+//#region src/components/ui/pagination.d.ts
+declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
+declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
+declare function PaginationItem({ ...props }: React.ComponentProps<"li">): React.JSX.Element;
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<React.ComponentProps<typeof Button>, "size"> & React.ComponentProps<"a">;
+declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): React.JSX.Element;
+declare function PaginationPrevious({ className, text, ...props }: React.ComponentProps<typeof PaginationLink> & {
+  text?: string;
+}): React.JSX.Element;
+declare function PaginationNext({ className, text, ...props }: React.ComponentProps<typeof PaginationLink> & {
+  text?: string;
+}): React.JSX.Element;
+declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+//#endregion
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/components/ui/pagination.js

@@ -0,0 +1,79 @@
+import { Button } from "./button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+//#region src/components/ui/pagination.tsx
+function Pagination({ className, ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		role: "navigation",
+		"aria-label": "pagination",
+		"data-slot": "pagination",
+		className: cn("mx-auto flex w-full justify-center", className),
+		...props
+	});
+}
+function PaginationContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "pagination-content",
+		className: cn("flex items-center gap-0.5", className),
+		...props
+	});
+}
+function PaginationItem({ ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "pagination-item",
+		...props
+	});
+}
+function PaginationLink({ className, isActive, size = "icon", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		variant: isActive ? "outline" : "ghost",
+		size,
+		className: cn(className),
+		nativeButton: false,
+		render: /* @__PURE__ */ jsx("a", {
+			"aria-current": isActive ? "page" : void 0,
+			"data-slot": "pagination-link",
+			"data-active": isActive,
+			...props
+		})
+	});
+}
+function PaginationPrevious({ className, text = "Previous", ...props }) {
+	return /* @__PURE__ */ jsxs(PaginationLink, {
+		"aria-label": "Go to previous page",
+		size: "default",
+		className: cn("pl-2!", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(ChevronLeftIcon, { "data-icon": "inline-start" }), /* @__PURE__ */ jsx("span", {
+			className: "hidden sm:block",
+			children: text
+		})]
+	});
+}
+function PaginationNext({ className, text = "Next", ...props }) {
+	return /* @__PURE__ */ jsxs(PaginationLink, {
+		"aria-label": "Go to next page",
+		size: "default",
+		className: cn("pr-2!", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "hidden sm:block",
+			children: text
+		}), /* @__PURE__ */ jsx(ChevronRightIcon, { "data-icon": "inline-end" })]
+	});
+}
+function PaginationEllipsis({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"aria-hidden": true,
+		"data-slot": "pagination-ellipsis",
+		className: cn("flex size-7 items-center justify-center [&_svg:not([class*='size-'])]:size-3.5", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(MoreHorizontalIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "More pages"
+		})]
+	});
+}
+//#endregion
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/components/ui/popover.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { Popover } from "@base-ui/react/popover";
+//#region src/components/ui/popover.d.ts
+declare function Popover$1({ ...props }: Popover.Root.Props): React.JSX.Element;
+declare function PopoverTrigger({ ...props }: Popover.Trigger.Props): React.JSX.Element;
+declare function PopoverContent({ className, collisionAvoidance, align, alignOffset, side, sideOffset, ...props }: Popover.Popup.Props & Pick<Popover.Positioner.Props, "align" | "alignOffset" | "collisionAvoidance" | "side" | "sideOffset">): React.JSX.Element;
+declare function PopoverHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function PopoverTitle({ className, ...props }: Popover.Title.Props): React.JSX.Element;
+declare function PopoverDescription({ className, ...props }: Popover.Description.Props): React.JSX.Element;
+//#endregion
+export { Popover$1 as Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };

package/dist/components/ui/popover.js

@@ -0,0 +1,54 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "cn";
+import { Popover } from "@base-ui/react/popover";
+//#region src/components/ui/popover.tsx
+function Popover$1({ ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Root, {
+		"data-slot": "popover",
+		...props
+	});
+}
+function PopoverTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
+		"data-slot": "popover-trigger",
+		...props
+	});
+}
+function PopoverContent({ className, collisionAvoidance, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		align,
+		alignOffset,
+		collisionAvoidance,
+		side,
+		sideOffset,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ jsx(Popover.Popup, {
+			"data-slot": "popover-content",
+			className: cn("z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-lg bg-popover p-2.5 text-xs text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+			...props
+		})
+	}) });
+}
+function PopoverHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "popover-header",
+		className: cn("flex flex-col gap-1 text-xs", className),
+		...props
+	});
+}
+function PopoverTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Title, {
+		"data-slot": "popover-title",
+		className: cn("text-sm font-medium", className),
+		...props
+	});
+}
+function PopoverDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Description, {
+		"data-slot": "popover-description",
+		className: cn("text-muted-foreground", className),
+		...props
+	});
+}
+//#endregion
+export { Popover$1 as Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };

package/dist/components/ui/progress.d.ts

@@ -0,0 +1,9 @@
+import { Progress } from "@base-ui/react/progress";
+//#region src/components/ui/progress.d.ts
+declare function Progress$1({ className, children, value, ...props }: Progress.Root.Props): import("react").JSX.Element;
+declare function ProgressTrack({ className, ...props }: Progress.Track.Props): import("react").JSX.Element;
+declare function ProgressIndicator({ className, ...props }: Progress.Indicator.Props): import("react").JSX.Element;
+declare function ProgressLabel({ className, ...props }: Progress.Label.Props): import("react").JSX.Element;
+declare function ProgressValue({ className, ...props }: Progress.Value.Props): import("react").JSX.Element;
+//#endregion
+export { Progress$1 as Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue };

package/dist/components/ui/progress.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { Progress } from "@base-ui/react/progress";
+//#region src/components/ui/progress.tsx
+function Progress$1({ className, children, value, ...props }) {
+	return /* @__PURE__ */ jsxs(Progress.Root, {
+		value,
+		"data-slot": "progress",
+		className: cn("flex flex-wrap gap-3", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ProgressTrack, { children: /* @__PURE__ */ jsx(ProgressIndicator, {}) })]
+	});
+}
+function ProgressTrack({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Progress.Track, {
+		className: cn("relative flex h-1.5 w-full items-center overflow-x-hidden rounded-full bg-(--soft-neutral-bg)", className),
+		"data-slot": "progress-track",
+		...props
+	});
+}
+function ProgressIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Progress.Indicator, {
+		"data-slot": "progress-indicator",
+		className: cn("h-full bg-primary transition-all", className),
+		...props
+	});
+}
+function ProgressLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Progress.Label, {
+		className: cn("text-xs/relaxed font-medium", className),
+		"data-slot": "progress-label",
+		...props
+	});
+}
+function ProgressValue({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Progress.Value, {
+		className: cn("ml-auto text-xs/relaxed text-muted-foreground tabular-nums", className),
+		"data-slot": "progress-value",
+		...props
+	});
+}
+//#endregion
+export { Progress$1 as Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue };

package/dist/components/ui/questionnaire.d.ts

@@ -0,0 +1,21 @@
+import { Button } from "./button.js";
+import * as React from "react";
+import { Questionnaire } from "@shadcn/react/questionnaire";
+//#region src/components/ui/questionnaire.d.ts
+declare function Questionnaire$1({ className, ...props }: React.ComponentProps<typeof Questionnaire.Root>): React.JSX.Element;
+declare function QuestionnaireProgress({ className, ...props }: React.ComponentProps<typeof Questionnaire.Progress>): React.JSX.Element;
+declare function QuestionnaireItem({ className, ...props }: React.ComponentProps<typeof Questionnaire.Item>): React.JSX.Element;
+declare function QuestionnaireTitle({ className, ...props }: React.ComponentProps<typeof Questionnaire.Title>): React.JSX.Element;
+declare function QuestionnaireDescription({ className, ...props }: React.ComponentProps<typeof Questionnaire.Description>): React.JSX.Element;
+declare function QuestionnaireChoices({ className, ...props }: React.ComponentProps<typeof Questionnaire.Choices>): React.JSX.Element;
+declare function QuestionnaireChoice({ children, className, ...props }: React.ComponentProps<typeof Questionnaire.Choice>): React.JSX.Element;
+declare function QuestionnaireChoiceDescription({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function QuestionnaireInput({ className, ...props }: React.ComponentProps<typeof Questionnaire.Input>): React.JSX.Element;
+declare function QuestionnaireError({ className, ...props }: React.ComponentProps<typeof Questionnaire.Error>): React.JSX.Element;
+declare function QuestionnaireActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function QuestionnairePrevious({ children, className, size, variant, ...props }: React.ComponentProps<typeof Questionnaire.Previous> & Pick<React.ComponentProps<typeof Button>, "size" | "variant">): React.JSX.Element;
+declare function QuestionnaireSkip({ children, className, size, variant, ...props }: React.ComponentProps<typeof Questionnaire.Skip> & Pick<React.ComponentProps<typeof Button>, "size" | "variant">): React.JSX.Element;
+declare function QuestionnaireNext({ children, className, size, variant, ...props }: React.ComponentProps<typeof Questionnaire.Next> & Pick<React.ComponentProps<typeof Button>, "size" | "variant">): React.JSX.Element;
+declare function QuestionnaireSubmit({ children, className, size, variant, ...props }: React.ComponentProps<typeof Questionnaire.Submit> & Pick<React.ComponentProps<typeof Button>, "size" | "variant">): React.JSX.Element;
+//#endregion
+export { Questionnaire$1 as Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle };