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

package/dist/motion/branch-menu/branch-menu.js

@@ -0,0 +1,287 @@
+import * as React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { ChevronRightIcon } from "lucide-react";
+import { useControllableValue, useLatest } from "ahooks";
+import { motion, useReducedMotionConfig } from "motion/react";
+//#region src/motion/branch-menu/branch-menu.tsx
+const ROW = 32;
+const BRANCH_WIDTH = 14;
+const ITEM_ATTRIBUTE = "data-branch-item";
+const FOLD = {
+	type: "spring",
+	stiffness: 420,
+	damping: 40
+};
+const DRAW = {
+	duration: .35,
+	ease: [
+		.22,
+		1,
+		.36,
+		1
+	]
+};
+/** The path of ids from the root to `id`, or an empty list. */
+function pathTo(items, id) {
+	if (!id) return [];
+	for (const item of items) {
+		if (item.id === id) return [item.id];
+		if (item.children) {
+			const rest = pathTo(item.children, id);
+			if (rest.length > 0) return [item.id, ...rest];
+		}
+	}
+	return [];
+}
+/**
+* Expandable navigation sections joined by drawn branch lines. The branch to
+* the current item is drawn in the foreground colour, and a marker slides to
+* the section that holds it.
+*
+* Pattern: a `nav` landmark with disclosure buttons (the APG "Disclosure
+* Navigation Menu"), not a `tree`. Its items navigate rather than select, so
+* they stay native links and buttons that every screen reader announces in
+* browse mode, and Tab reaches each one. The arrow keys add tree-style
+* movement on top: Up and Down move between visible items, Right expands a
+* section or enters it, Left collapses it or returns to its parent, and Home
+* and End jump to the ends. A collapsed section's items are `inert`.
+*
+* Behavior reference: reactbits branched-menu.
+*/
+function BranchMenu(props) {
+	const { items, label, className } = props;
+	const [activeId, setActiveId] = useControllableValue(props, {
+		defaultValue: null,
+		valuePropName: "active",
+		defaultValuePropName: "defaultActive",
+		trigger: "onActiveChange"
+	});
+	const activePath = React.useMemo(() => pathTo(items, activeId), [items, activeId]);
+	const [initialExpanded] = React.useState(() => pathTo(items, props.active ?? props.defaultActive).slice(0, -1));
+	const [expanded, setExpanded] = useControllableValue(props, {
+		defaultValue: initialExpanded,
+		valuePropName: "expanded",
+		defaultValuePropName: "defaultExpanded",
+		trigger: "onExpandedChange"
+	});
+	const reduced = useReducedMotionConfig() ?? false;
+	const baseId = React.useId();
+	const navRef = React.useRef(null);
+	const expandedRef = useLatest(expanded);
+	const toggle = React.useCallback((id) => {
+		const current = expandedRef.current;
+		setExpanded(current.includes(id) ? current.filter((x) => x !== id) : [...current, id]);
+	}, [expandedRef, setExpanded]);
+	const choose = React.useCallback((item) => setActiveId(item.id, item), [setActiveId]);
+	const handleKeyDown = (event) => {
+		const nav = navRef.current;
+		const current = event.target;
+		if (!nav || !(current instanceof HTMLElement) || !current.hasAttribute(ITEM_ATTRIBUTE)) return;
+		const visible = [...nav.querySelectorAll(`[${ITEM_ATTRIBUTE}]`)].filter((el) => el.closest("[inert]") === null);
+		const index = visible.indexOf(current);
+		const isSection = current.hasAttribute("aria-expanded");
+		const isOpen = current.getAttribute("aria-expanded") === "true";
+		const focus = (el) => {
+			if (!el) return;
+			event.preventDefault();
+			el.focus();
+		};
+		switch (event.key) {
+			case "ArrowDown":
+				focus(visible[index + 1]);
+				break;
+			case "ArrowUp":
+				focus(visible[index - 1]);
+				break;
+			case "Home":
+				focus(visible[0]);
+				break;
+			case "End":
+				focus(visible[visible.length - 1]);
+				break;
+			case "ArrowRight":
+				if (isSection && !isOpen) {
+					event.preventDefault();
+					current.click();
+				} else if (isSection) focus(visible[index + 1]);
+				break;
+			case "ArrowLeft": {
+				if (isSection && isOpen) {
+					event.preventDefault();
+					current.click();
+					break;
+				}
+				const parentId = current.getAttribute("data-parent");
+				if (parentId) focus(visible.find((el) => el.getAttribute("data-item-id") === parentId));
+				break;
+			}
+		}
+	};
+	const shared = {
+		activeId,
+		activePath,
+		expanded,
+		toggle,
+		choose,
+		reduced,
+		baseId
+	};
+	return /* @__PURE__ */ jsx("nav", {
+		ref: navRef,
+		"aria-label": label,
+		"data-slot": "branch-menu",
+		"data-reduced-motion": reduced ? "" : void 0,
+		onKeyDown: handleKeyDown,
+		className: cn("w-full text-sm", className),
+		children: /* @__PURE__ */ jsx("ul", {
+			className: "flex flex-col gap-0.5",
+			children: items.map((item) => /* @__PURE__ */ jsxs("li", {
+				className: "relative pl-3",
+				children: [activePath[0] === item.id ? /* @__PURE__ */ jsx(motion.span, {
+					layoutId: `${baseId}-marker`,
+					"aria-hidden": "true",
+					"data-slot": "branch-menu-marker",
+					transition: reduced ? { duration: 0 } : FOLD,
+					className: "absolute top-2 left-0 h-4 w-0.5 rounded-full bg-foreground"
+				}) : null, /* @__PURE__ */ jsx(BranchNode, {
+					item,
+					parentId: null,
+					depth: 0,
+					shared
+				})]
+			}, item.id))
+		})
+	});
+}
+function BranchNode({ item, parentId, depth, shared }) {
+	const { activeId, activePath, expanded, toggle, choose, reduced, baseId } = shared;
+	const children = item.children ?? [];
+	const isSection = children.length > 0;
+	const open = isSection && expanded.includes(item.id);
+	const onPath = activePath.includes(item.id);
+	const current = activeId === item.id;
+	const panelId = `${baseId}-panel-${encodeURIComponent(item.id)}`;
+	const rowClass = cn("relative flex h-8 w-full min-w-0 items-center gap-2 rounded-md px-2 text-left outline-none", "focus-visible:bg-muted/60 focus-visible:ring-1 focus-visible:ring-ring/40 focus-visible:ring-inset", "disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", !reduced && "transition-colors", isSection || depth === 0 ? "font-medium text-foreground hover:bg-muted/60" : current ? "font-medium text-foreground" : "text-muted-foreground hover:bg-muted/60 hover:text-foreground focus-visible:text-foreground");
+	const rowData = {
+		[ITEM_ATTRIBUTE]: "",
+		"data-item-id": item.id,
+		"data-parent": parentId ?? void 0
+	};
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [item.icon ? /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: cn("flex", !current && depth > 0 && "opacity-80"),
+		children: item.icon
+	}) : null, /* @__PURE__ */ jsx("span", {
+		className: "truncate",
+		title: item.label,
+		children: item.label
+	})] });
+	if (!isSection) return item.href && !item.disabled ? /* @__PURE__ */ jsx("a", {
+		href: item.href,
+		"aria-current": current ? "page" : void 0,
+		onClick: () => choose(item),
+		className: rowClass,
+		...rowData,
+		children: content
+	}) : /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-current": current ? "page" : void 0,
+		disabled: item.disabled,
+		onClick: () => choose(item),
+		className: rowClass,
+		...rowData,
+		children: content
+	});
+	const pathIndex = children.findIndex((child) => activePath.includes(child.id));
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"aria-expanded": open,
+		"aria-controls": panelId,
+		disabled: item.disabled,
+		onClick: () => toggle(item.id),
+		className: rowClass,
+		"data-on-path": onPath ? "" : void 0,
+		...rowData,
+		children: [content, /* @__PURE__ */ jsx(ChevronRightIcon, {
+			"aria-hidden": "true",
+			className: cn("ml-auto size-3.5 text-muted-foreground", open && "rotate-90", !reduced && "transition-transform duration-200")
+		})]
+	}), /* @__PURE__ */ jsx(motion.div, {
+		id: panelId,
+		inert: !open,
+		"data-slot": "branch-menu-panel",
+		"data-state": open ? "open" : "closed",
+		initial: false,
+		animate: open ? {
+			height: "auto",
+			opacity: 1
+		} : {
+			height: 0,
+			opacity: 0
+		},
+		transition: reduced ? { duration: 0 } : FOLD,
+		className: "overflow-hidden",
+		children: /* @__PURE__ */ jsx("ul", {
+			className: "relative ml-4 flex flex-col pt-0.5",
+			children: children.map((child, index) => /* @__PURE__ */ jsxs("li", {
+				className: "relative",
+				style: { paddingLeft: 20 },
+				children: [/* @__PURE__ */ jsx(Branch, {
+					last: index === children.length - 1,
+					trunkLit: pathIndex > index,
+					branchLit: pathIndex === index,
+					reduced
+				}), /* @__PURE__ */ jsx(BranchNode, {
+					item: child,
+					parentId: item.id,
+					depth: depth + 1,
+					shared
+				})]
+			}, child.id))
+		})
+	})] });
+}
+/** One child's piece of the tree: the trunk past it and the curve into it. */
+function Branch({ last, trunkLit, branchLit, reduced }) {
+	const cy = ROW / 2;
+	const curve = `M 0.5 0 V 10 Q 0.5 ${cy} 6.5 ${cy} H ${BRANCH_WIDTH}`;
+	const elbow = `M 0.5 10 Q 0.5 ${cy} 6.5 ${cy} H ${BRANCH_WIDTH}`;
+	const svgProps = {
+		width: BRANCH_WIDTH,
+		height: 17,
+		viewBox: `0 0 ${BRANCH_WIDTH} 17`,
+		fill: "none",
+		strokeWidth: 1
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx("svg", {
+			"aria-hidden": "true",
+			...svgProps,
+			className: "absolute top-0 left-0 overflow-visible",
+			children: /* @__PURE__ */ jsx("path", {
+				d: last ? curve : elbow,
+				className: "stroke-muted-foreground/35"
+			})
+		}),
+		last ? null : /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: cn("absolute top-0 bottom-0 left-0 w-px", trunkLit ? "z-[1] bg-foreground" : "bg-muted-foreground/35", !reduced && "transition-colors duration-300")
+		}),
+		branchLit ? /* @__PURE__ */ jsx("svg", {
+			"aria-hidden": "true",
+			...svgProps,
+			className: "absolute top-0 left-0 z-[1] overflow-visible",
+			children: /* @__PURE__ */ jsx(motion.path, {
+				d: curve,
+				"data-slot": "branch-menu-lit-branch",
+				className: "stroke-foreground",
+				initial: reduced ? false : { pathLength: 0 },
+				animate: { pathLength: 1 },
+				transition: reduced ? { duration: 0 } : DRAW
+			})
+		}) : null
+	] });
+}
+//#endregion
+export { BranchMenu };

package/dist/motion/check-item/check-item.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+//#region src/motion/check-item/check-item.d.ts
+export interface CheckItemProps extends Omit<React.ComponentProps<"button">, "children" | "onChange" | "type" | "role"> {
+  /** The step or todo text. */
+  label: React.ReactNode;
+  /** Secondary text under the label. */
+  description?: React.ReactNode;
+  /** Checked state (controlled). */
+  checked?: boolean;
+  /** Initial checked state when uncontrolled. */
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  /** Strike the label through when checked. */
+  strike?: boolean;
+}
+/**
+ * A checkbox row for plan and todo steps. The box fill, the tick and the
+ * label's strike-through follow one spring, so they move together. Controlled
+ * (`checked`) or uncontrolled (`defaultChecked`).
+ *
+ * Behavior reference: reactbits spring-check.
+ */
+export declare function CheckItem({ label, description, checked: _checked, defaultChecked: _defaultChecked, onCheckedChange: _onCheckedChange, strike, disabled, className, onClick, ...props }: CheckItemProps): React.JSX.Element;
+//#endregion

package/dist/motion/check-item/check-item.js

@@ -0,0 +1,110 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { useControllableValue } from "ahooks";
+import { animate, motion, useMotionValue, useReducedMotionConfig, useTransform } from "motion/react";
+//#region src/motion/check-item/check-item.tsx
+const clamp01 = (value) => Math.min(1, Math.max(0, value));
+/**
+* A checkbox row for plan and todo steps. The box fill, the tick and the
+* label's strike-through follow one spring, so they move together. Controlled
+* (`checked`) or uncontrolled (`defaultChecked`).
+*
+* Behavior reference: reactbits spring-check.
+*/
+function CheckItem({ label, description, checked: _checked, defaultChecked: _defaultChecked, onCheckedChange: _onCheckedChange, strike = true, disabled, className, onClick, ...props }) {
+	const reduced = useReducedMotionConfig() ?? false;
+	const controllable = {};
+	if (_checked !== void 0) controllable.checked = _checked;
+	if (_defaultChecked !== void 0) controllable.defaultChecked = _defaultChecked;
+	if (_onCheckedChange) controllable.onCheckedChange = _onCheckedChange;
+	const [checked, setChecked] = useControllableValue(controllable, {
+		valuePropName: "checked",
+		defaultValuePropName: "defaultChecked",
+		trigger: "onCheckedChange",
+		defaultValue: false
+	});
+	const progress = useMotionValue(checked ? 1 : 0);
+	const fillScale = useTransform(progress, (p) => .4 + .6 * p);
+	const fillOpacity = useTransform(progress, (p) => clamp01(p * 2));
+	const tick = useTransform(progress, (p) => clamp01((p - .25) / .75));
+	const tickOpacity = useTransform(tick, (t) => t > .01 ? 1 : 0);
+	const strikeScale = useTransform(progress, (p) => clamp01((p - .15) / .85));
+	React.useEffect(() => {
+		const target = checked ? 1 : 0;
+		if (reduced) {
+			progress.set(target);
+			return;
+		}
+		const controls = animate(progress, target, {
+			type: "spring",
+			stiffness: 420,
+			damping: 22
+		});
+		return () => controls.stop();
+	}, [
+		checked,
+		reduced,
+		progress
+	]);
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		role: "checkbox",
+		"aria-checked": checked,
+		"data-slot": "check-item",
+		"data-state": checked ? "checked" : "unchecked",
+		"data-motion": reduced ? "reduced" : "full",
+		disabled,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) setChecked(!checked);
+		},
+		className: cn("group/check -mx-1 flex items-start gap-2 rounded-md px-1 py-0.5 text-left text-xs/relaxed outline-none disabled:opacity-50", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("span", {
+			"aria-hidden": "true",
+			"data-slot": "check-item-box",
+			className: cn("relative mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-[border-color,scale] duration-150 group-focus-visible/check:border-ring group-focus-visible/check:ring-[3px] group-focus-visible/check:ring-ring/50", checked ? "border-primary" : "border-muted-foreground/40 group-hover/check:border-muted-foreground/70 dark:border-input dark:bg-input/30", !reduced && "group-active/check:scale-90"),
+			children: [/* @__PURE__ */ jsx(motion.span, {
+				className: "absolute -inset-px rounded-[4px] bg-primary",
+				style: {
+					scale: fillScale,
+					opacity: fillOpacity
+				}
+			}), /* @__PURE__ */ jsx("svg", {
+				"aria-hidden": "true",
+				viewBox: "0 0 16 16",
+				className: "relative size-3.5 text-primary-foreground",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 2,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				children: /* @__PURE__ */ jsx(motion.path, {
+					d: "M3.5 8.25 6.5 11.25 12.5 5",
+					style: {
+						pathLength: tick,
+						opacity: tickOpacity
+					}
+				})
+			})]
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 flex-col",
+			children: [/* @__PURE__ */ jsxs("span", {
+				"data-slot": "check-item-label",
+				className: cn("relative w-fit transition-colors duration-200", checked ? "text-muted-foreground" : "text-foreground"),
+				children: [label, strike ? /* @__PURE__ */ jsx(motion.span, {
+					"aria-hidden": "true",
+					"data-slot": "check-item-strike",
+					className: "pointer-events-none absolute inset-x-0 top-1/2 h-px origin-left bg-current",
+					style: { scaleX: strikeScale }
+				}) : null]
+			}), description ? /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: description
+			}) : null]
+		})]
+	});
+}
+//#endregion
+export { CheckItem };

package/dist/motion/dial/dial.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+//#region src/motion/dial/dial.d.ts
+export interface DialProps extends Omit<React.ComponentProps<"div">, "children" | "defaultValue" | "onChange" | "ref" | "role" | "tabIndex"> {
+  /** The value (controlled). */
+  value?: number;
+  /** Initial value when uncontrolled. */
+  defaultValue?: number;
+  /** Called on every stepped change: tap, drag, flick or key. */
+  onValueChange?: (value: number) => void;
+  /** Called once a gesture or key press settles on a value. */
+  onValueCommit?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  /** The jump for Shift+arrow and PageUp/PageDown. Defaults to a tenth of the range. */
+  largeStep?: number;
+  /** The setting's name, shown under the value and used as the slider's name. */
+  label: string;
+  /** Unit shown after the value, for example "%". */
+  unit?: string;
+  /** Formats the number for the readout and for screen readers. */
+  formatValue?: (value: number) => string;
+  /** Diameter in px. */
+  size?: number;
+  /** The arc the dial covers, in degrees. */
+  sweep?: number;
+  disabled?: boolean;
+}
+/**
+ * A circular value control for bounded settings (reasoning effort, a
+ * confidence floor). Tap a point, drag around the ring or flick it: the knob
+ * settles on a spring and leaves a short trail when it moves fast. A
+ * `role="slider"`: arrows step, Shift+arrows and PageUp/PageDown take large
+ * steps, Home and End go to the bounds.
+ *
+ * Behavior reference: reactbits comet-dial.
+ */
+export declare function Dial({ value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, onValueCommit, min, max, step, largeStep, label, unit, formatValue, size, sweep, disabled, className, ...props }: DialProps): React.JSX.Element;
+//#endregion