@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/magnetic-select/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/magnetic-select/meta.ts
+const meta = defineMeta({
+	name: "magnetic-select",
+	title: "Magnetic Select",
+	description: "A honeycomb of round chips: choosing one grows it and magnetically shoves the rest apart, tilted, with a springy settle.",
+	category: "form",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["magnetic-select.tsx", "magnetic-select-spring.ts"],
+	a11y: "A role=\"radiogroup\" of native buttons with role=\"radio\" and aria-checked, named by each option's `label`; the group needs aria-label or aria-labelledby and warns in development without one. Roving tabindex: Tab reaches the selected chip (or the first), arrow keys move focus and select with wrap-around (Left/Right follow the reading direction in RTL), Home/End jump to the ends. Images and skins are decorative. The spring is a CSS transition, so under reduced motion every chip settles at its final pose immediately; cursor parallax is mouse-only."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/magnetic-select/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/magnetic-select/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"magnetic-select\",\n  title: \"Magnetic Select\",\n  description:\n    \"A honeycomb of round chips: choosing one grows it and magnetically shoves the rest apart, tilted, with a springy settle.\",\n  category: \"form\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"magnetic-select.tsx\", \"magnetic-select-spring.ts\"],\n  a11y:\n    'A role=\"radiogroup\" of native buttons with role=\"radio\" and aria-checked, named by each option\\'s `label`; the group ' +\n    \"needs aria-label or aria-labelledby and warns in development without one. Roving tabindex: Tab reaches the \" +\n    \"selected chip (or the first), arrow keys move focus and select with wrap-around (Left/Right follow the reading \" +\n    \"direction in RTL), Home/End jump to the ends. Images and skins are decorative. The spring is a CSS transition, \" +\n    \"so under reduced motion every chip settles at its final pose immediately; cursor parallax is mouse-only.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC;CACvB,OAAO,CAAC,uBAAuB,2BAA2B;CAC1D,MACE;AAKJ,CAAC"}

package/dist/components/magnify-dock/index.d.ts

@@ -0,0 +1,2 @@
+import { MagnifyDock, MagnifyDockItem, MagnifyDockProps, magnifyDockVariants, magnifyFalloff } from "./magnify-dock.js";
+export { MagnifyDock, type MagnifyDockItem, type MagnifyDockProps, magnifyDockVariants, magnifyFalloff };

package/dist/components/magnify-dock/index.js

@@ -0,0 +1,2 @@
+import { MagnifyDock, magnifyDockVariants, magnifyFalloff } from "./magnify-dock.js";
+export { MagnifyDock, magnifyDockVariants, magnifyFalloff };

package/dist/components/magnify-dock/magnify-dock.d.ts

@@ -0,0 +1,40 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/magnify-dock/magnify-dock.d.ts
+/** Share of the effect at distance `d` from the lens: cos²(π·d / 2(reach+1)). */
+declare function magnifyFalloff(distance: number, reach: number): number;
+interface MagnifyDockItem {
+  value: string;
+  /** Names the item and fills its tooltip. */
+  label: string;
+  /** Decorative glyph, hidden from assistive technology. */
+  icon: ReactNode;
+  /** Renders a link instead of a button. */
+  href?: string;
+  disabled?: boolean;
+}
+declare const magnifyDockVariants: (props?: ({
+  fill?: "light" | "dark" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface MagnifyDockProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "children">, VariantProps<typeof magnifyDockVariants> {
+  items: MagnifyDockItem[];
+  /** The active item (controlled). */
+  value?: string;
+  /** The active item at first (uncontrolled). */
+  defaultValue?: string;
+  /** Called when an item is activated. */
+  onValueChange?: (value: string) => void;
+  /** Scale of the lens item, 1–2. */
+  magnify?: number;
+  /** How far the lens item rises, 0–22 px. */
+  lift?: number;
+  /** How many neighbours on each side are affected, 0–4. */
+  reach?: number;
+  /** 1px inset hairline around the dock. */
+  stroke?: boolean;
+}
+/** A dock of icon buttons or links that magnify on hover and keyboard focus. */
+declare function MagnifyDock({ className, items, value, defaultValue, onValueChange, magnify, lift, reach, fill, stroke, onKeyDown, onPointerLeave, onBlur, onPointerDown, ...props }: MagnifyDockProps): import("react").JSX.Element;
+//#endregion
+export { MagnifyDock, MagnifyDockItem, MagnifyDockProps, magnifyDockVariants, magnifyFalloff };
+//# sourceMappingURL=magnify-dock.d.ts.map

package/dist/components/magnify-dock/magnify-dock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"magnify-dock.d.ts","names":[],"sources":["../../../src/components/magnify-dock/magnify-dock.tsx"],"mappings":";;;;iBAuCgB,eAAe,kBAAkB;UAMhC;EACf;;EAEA;;EAEA,MAAM;;EAEN;EACA;;cAGI,sBAAmB;;6CAYxB;UAEgB,yBAEb,KAAK,4DACL,oBAAoB;EACtB,OAAO;;EAEP;;EAEA;;EAEA,iBAAiB;;EAEjB;;EAEA;;EAEA;;EAEA;;;iBAIc,cACd,WACA,OACA,OACA,cACA,eACA,SACA,MACA,OACA,MACA,QACA,WACA,gBACA,QACA,kBACG,SACF,mCAAgB,IAAA"}

package/dist/components/magnify-dock/magnify-dock.js

@@ -0,0 +1,183 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Direction } from "radix-ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useRef, useState } from "react";
+//#region src/components/magnify-dock/magnify-dock.tsx
+const SPRING = "cubic-bezier(.24,1.2,.32,1)";
+const TIP_SPRING = "cubic-bezier(.28,1.3,.36,1)";
+function clamp(value, min, max) {
+	return Math.min(max, Math.max(min, value));
+}
+/** Share of the effect at distance `d` from the lens: cos²(π·d / 2(reach+1)). */
+function magnifyFalloff(distance, reach) {
+	const r = Math.round(clamp(reach, 0, 4));
+	if (distance > r) return 0;
+	return Math.cos(Math.PI * distance / (2 * (r + 1))) ** 2;
+}
+const magnifyDockVariants = cva("relative inline-flex items-end gap-2.5 rounded-[1.625rem] px-4 py-3 shadow-sm", {
+	variants: { 
+	/** Dock tone. `light` is the card surface; `dark` inverts it. */
+fill: {
+		light: "bg-card text-card-foreground",
+		dark: "bg-foreground text-background"
+	} },
+	defaultVariants: { fill: "light" }
+});
+/** A dock of icon buttons or links that magnify on hover and keyboard focus. */
+function MagnifyDock({ className, items, value, defaultValue, onValueChange, magnify = 1.32, lift = 8, reach = 2, fill, stroke = false, onKeyDown, onPointerLeave, onBlur, onPointerDown, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultValue);
+	const active = value ?? uncontrolled;
+	const [hovered, setHovered] = useState(null);
+	const [focused, setFocused] = useState(null);
+	const [stop, setStop] = useState(null);
+	const pressing = useRef(false);
+	const direction = Direction.useDirection();
+	const scale = clamp(magnify, 1, 2);
+	const rise = clamp(lift, 0, 22);
+	const dark = fill === "dark";
+	const enabled = items.flatMap((item, index) => item.disabled ? [] : [index]);
+	const activeIndex = items.findIndex((item) => item.value === active && !item.disabled);
+	const tabStop = stop !== null && enabled.includes(stop) ? stop : activeIndex >= 0 ? activeIndex : enabled[0];
+	const lens = hovered ?? focused;
+	function select(item) {
+		if (item.disabled) return;
+		if (value === void 0) setUncontrolled(item.value);
+		onValueChange?.(item.value);
+	}
+	function focusItem(root, index) {
+		root.querySelector(`[data-index="${String(index)}"]`)?.focus();
+	}
+	function handleKeyDown(event) {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || enabled.length === 0) return;
+		const from = Number(event.target.dataset.index);
+		if (Number.isNaN(from)) return;
+		const rtl = direction === "rtl" || event.currentTarget.closest("[dir]")?.getAttribute("dir") === "rtl";
+		const position = enabled.indexOf(from);
+		const last = enabled.length - 1;
+		const forward = rtl ? "ArrowLeft" : "ArrowRight";
+		const back = rtl ? "ArrowRight" : "ArrowLeft";
+		let to;
+		if (event.key === forward) to = enabled[position >= last ? 0 : position + 1];
+		else if (event.key === back) to = enabled[position <= 0 ? last : position - 1];
+		else if (event.key === "Home") to = enabled[0];
+		else if (event.key === "End") to = enabled[last];
+		if (to === void 0) return;
+		event.preventDefault();
+		focusItem(event.currentTarget, to);
+	}
+	function handleFocus(index) {
+		setStop(index);
+		setFocused(pressing.current ? null : index);
+	}
+	return /* @__PURE__ */ jsx("div", {
+		role: "toolbar",
+		"aria-label": props["aria-labelledby"] ? void 0 : "Dock",
+		"aria-orientation": "horizontal",
+		"data-slot": "magnify-dock",
+		className: cn(magnifyDockVariants({ fill }), stroke && "ring-1 ring-border ring-inset", className),
+		onKeyDown: handleKeyDown,
+		onPointerDown: (event) => {
+			onPointerDown?.(event);
+			pressing.current = true;
+			setTimeout(() => {
+				pressing.current = false;
+			}, 0);
+		},
+		onPointerLeave: (event) => {
+			onPointerLeave?.(event);
+			setHovered(null);
+		},
+		onBlur: (event) => {
+			onBlur?.(event);
+			if (!event.currentTarget.contains(event.relatedTarget)) setFocused(null);
+		},
+		...props,
+		children: items.map((item, index) => {
+			const distance = lens === null ? Infinity : Math.abs(index - lens);
+			const f = magnifyFalloff(distance, reach);
+			const y = Math.round(rise * f * 100) / 100;
+			const s = Math.round((1 + (scale - 1) * f) * 1e3) / 1e3;
+			const isActive = index === activeIndex;
+			const opacity = distance === 0 || isActive ? 1 : distance === 1 && f > 0 ? .66 : .42;
+			const shared = {
+				"data-index": index,
+				"data-slot": "magnify-dock-item",
+				"data-lens": distance === 0 ? "" : void 0,
+				"data-near": distance === 1 && f > 0 ? "" : void 0,
+				"aria-label": item.label,
+				"aria-current": isActive ? "page" : void 0,
+				tabIndex: item.disabled ? -1 : index === tabStop ? 0 : -1,
+				className: cn("relative flex size-11 shrink-0 items-center justify-center rounded-[0.625rem]", focusRing, "disabled:pointer-events-none aria-disabled:pointer-events-none", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6"),
+				style: {
+					opacity: item.disabled ? .2 : opacity,
+					transition: `opacity calc(180ms * var(--motion-scale)) ease`
+				},
+				onPointerEnter: () => setHovered(index),
+				onFocus: () => handleFocus(index)
+			};
+			const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					"data-slot": "magnify-dock-glyph",
+					className: "flex origin-bottom",
+					style: {
+						transform: `translateY(${String(-y)}px) scale(${String(s)})`,
+						transition: `transform calc(320ms * var(--motion-scale)) ${SPRING}`
+					},
+					children: item.icon
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					"data-slot": "magnify-dock-dot",
+					className: "absolute inset-x-0 bottom-[3px] mx-auto size-[3px] rounded-full bg-current",
+					style: {
+						opacity: isActive ? .55 : 0,
+						scale: isActive ? 1 : .4,
+						transition: `opacity calc(360ms * var(--motion-scale)) ${SPRING}, scale calc(360ms * var(--motion-scale)) ${SPRING}`
+					}
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					"data-slot": "magnify-dock-tip",
+					"data-on": distance === 0 ? "" : void 0,
+					className: cn("pointer-events-none absolute inset-x-0 bottom-full mx-auto mb-2 w-max rounded-full px-[9px] py-[5px]", "font-mono text-[0.5rem] leading-none tracking-[0.06em] whitespace-nowrap uppercase", dark ? "bg-background text-foreground" : "bg-foreground text-background"),
+					style: {
+						opacity: distance === 0 ? 1 : 0,
+						translate: `0 ${distance === 0 ? "0" : "4px"}`,
+						transition: `opacity calc(180ms * var(--motion-scale)) ease, translate calc(260ms * var(--motion-scale)) ${TIP_SPRING}`
+					},
+					children: item.label
+				})
+			] });
+			if (item.href) return /* @__PURE__ */ jsx("a", {
+				...shared,
+				href: item.disabled ? void 0 : item.href,
+				role: item.disabled ? "link" : void 0,
+				"aria-disabled": item.disabled || void 0,
+				onClick: (event) => {
+					if (item.disabled) {
+						event.preventDefault();
+						return;
+					}
+					select(item);
+				},
+				children: content
+			}, item.value);
+			return /* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled: item.disabled,
+				...shared,
+				onClick: () => select(item),
+				children: content
+			}, item.value);
+		})
+	});
+}
+//#endregion
+export { MagnifyDock, magnifyDockVariants, magnifyFalloff };
+
+//# sourceMappingURL=magnify-dock.js.map

package/dist/components/magnify-dock/magnify-dock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"magnify-dock.js","names":[],"sources":["../../../src/components/magnify-dock/magnify-dock.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from bencho Magnifying dock (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Direction } from \"radix-ui\";\nimport {\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A macOS-style dock: the item under the pointer grows and lifts, its\n * neighbours rise less, and a small label pill appears above it.\n *\n * Magnification is discrete per item, not continuous in x: the lens item is\n * distance 0, its neighbours 1, 2, … and each takes a share of the effect from\n * a cos² falloff. Nothing carries velocity, so this is plain CSS: each glyph\n * transitions its transform on a springy cubic-bezier, and the global\n * reduced-motion rule (via --motion-scale) turns every move into a jump.\n *\n * The lens follows the hovered item *or* the keyboard-focused one, so arrow\n * keys give the same feedback a pointer does. The dock is a toolbar with a\n * roving tab stop; the active item is the current page (aria-current).\n */\n\nconst SPRING = \"cubic-bezier(.24,1.2,.32,1)\";\nconst TIP_SPRING = \"cubic-bezier(.28,1.3,.36,1)\";\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value));\n}\n\n/** Share of the effect at distance `d` from the lens: cos²(π·d / 2(reach+1)). */\nexport function magnifyFalloff(distance: number, reach: number) {\n  const r = Math.round(clamp(reach, 0, 4));\n  if (distance > r) return 0;\n  return Math.cos((Math.PI * distance) / (2 * (r + 1))) ** 2;\n}\n\nexport interface MagnifyDockItem {\n  value: string;\n  /** Names the item and fills its tooltip. */\n  label: string;\n  /** Decorative glyph, hidden from assistive technology. */\n  icon: ReactNode;\n  /** Renders a link instead of a button. */\n  href?: string;\n  disabled?: boolean;\n}\n\nconst magnifyDockVariants = cva(\n  \"relative inline-flex items-end gap-2.5 rounded-[1.625rem] px-4 py-3 shadow-sm\",\n  {\n    variants: {\n      /** Dock tone. `light` is the card surface; `dark` inverts it. */\n      fill: {\n        light: \"bg-card text-card-foreground\",\n        dark: \"bg-foreground text-background\",\n      },\n    },\n    defaultVariants: { fill: \"light\" },\n  },\n);\n\nexport interface MagnifyDockProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"defaultValue\" | \"children\">,\n    VariantProps<typeof magnifyDockVariants> {\n  items: MagnifyDockItem[];\n  /** The active item (controlled). */\n  value?: string;\n  /** The active item at first (uncontrolled). */\n  defaultValue?: string;\n  /** Called when an item is activated. */\n  onValueChange?: (value: string) => void;\n  /** Scale of the lens item, 1–2. */\n  magnify?: number;\n  /** How far the lens item rises, 0–22 px. */\n  lift?: number;\n  /** How many neighbours on each side are affected, 0–4. */\n  reach?: number;\n  /** 1px inset hairline around the dock. */\n  stroke?: boolean;\n}\n\n/** A dock of icon buttons or links that magnify on hover and keyboard focus. */\nexport function MagnifyDock({\n  className,\n  items,\n  value,\n  defaultValue,\n  onValueChange,\n  magnify = 1.32,\n  lift = 8,\n  reach = 2,\n  fill,\n  stroke = false,\n  onKeyDown,\n  onPointerLeave,\n  onBlur,\n  onPointerDown,\n  ...props\n}: MagnifyDockProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultValue);\n  const active = value ?? uncontrolled;\n  const [hovered, setHovered] = useState<number | null>(null);\n  const [focused, setFocused] = useState<number | null>(null);\n  const [stop, setStop] = useState<number | null>(null);\n  const pressing = useRef(false);\n  const direction = Direction.useDirection();\n  const scale = clamp(magnify, 1, 2);\n  const rise = clamp(lift, 0, 22);\n  const dark = fill === \"dark\";\n\n  const enabled = items.flatMap((item, index) => (item.disabled ? [] : [index]));\n  const activeIndex = items.findIndex((item) => item.value === active && !item.disabled);\n  // The roving tab stop: last focused, else the active item, else the first enabled.\n  const tabStop =\n    stop !== null && enabled.includes(stop)\n      ? stop\n      : activeIndex >= 0\n        ? activeIndex\n        : enabled[0];\n  const lens = hovered ?? focused;\n\n  function select(item: MagnifyDockItem) {\n    if (item.disabled) return;\n    if (value === undefined) setUncontrolled(item.value);\n    onValueChange?.(item.value);\n  }\n\n  function focusItem(root: HTMLElement, index: number) {\n    root.querySelector<HTMLElement>(`[data-index=\"${String(index)}\"]`)?.focus();\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    onKeyDown?.(event);\n    if (event.defaultPrevented || enabled.length === 0) return;\n    const from = Number((event.target as HTMLElement).dataset.index);\n    if (Number.isNaN(from)) return;\n    const rtl =\n      direction === \"rtl\" ||\n      event.currentTarget.closest(\"[dir]\")?.getAttribute(\"dir\") === \"rtl\";\n    const position = enabled.indexOf(from);\n    const last = enabled.length - 1;\n    const forward = rtl ? \"ArrowLeft\" : \"ArrowRight\";\n    const back = rtl ? \"ArrowRight\" : \"ArrowLeft\";\n    let to: number | undefined;\n    if (event.key === forward) to = enabled[position >= last ? 0 : position + 1];\n    else if (event.key === back) to = enabled[position <= 0 ? last : position - 1];\n    else if (event.key === \"Home\") to = enabled[0];\n    else if (event.key === \"End\") to = enabled[last];\n    if (to === undefined) return;\n    event.preventDefault();\n    focusItem(event.currentTarget, to);\n  }\n\n  function handleFocus(index: number) {\n    setStop(index);\n    // Pointer focus is already under the lens (or leaving it); only keyboard\n    // and programmatic focus move the lens, like :focus-visible.\n    setFocused(pressing.current ? null : index);\n  }\n\n  return (\n    <div\n      role=\"toolbar\"\n      aria-label={props[\"aria-labelledby\"] ? undefined : \"Dock\"}\n      aria-orientation=\"horizontal\"\n      data-slot=\"magnify-dock\"\n      className={cn(\n        magnifyDockVariants({ fill }),\n        stroke && \"ring-1 ring-border ring-inset\",\n        className,\n      )}\n      onKeyDown={handleKeyDown}\n      onPointerDown={(event) => {\n        onPointerDown?.(event);\n        pressing.current = true;\n        // Focus lands between pointerdown and the next task.\n        setTimeout(() => {\n          pressing.current = false;\n        }, 0);\n      }}\n      onPointerLeave={(event) => {\n        onPointerLeave?.(event);\n        setHovered(null);\n      }}\n      onBlur={(event) => {\n        onBlur?.(event);\n        if (!event.currentTarget.contains(event.relatedTarget)) setFocused(null);\n      }}\n      {...props}\n    >\n      {items.map((item, index) => {\n        const distance = lens === null ? Infinity : Math.abs(index - lens);\n        const f = magnifyFalloff(distance, reach);\n        const y = Math.round(rise * f * 100) / 100;\n        const s = Math.round((1 + (scale - 1) * f) * 1000) / 1000;\n        const isActive = index === activeIndex;\n        const opacity = distance === 0 || isActive ? 1 : distance === 1 && f > 0 ? 0.66 : 0.42;\n        const shared = {\n          \"data-index\": index,\n          \"data-slot\": \"magnify-dock-item\",\n          \"data-lens\": distance === 0 ? \"\" : undefined,\n          \"data-near\": distance === 1 && f > 0 ? \"\" : undefined,\n          \"aria-label\": item.label,\n          \"aria-current\": isActive ? (\"page\" as const) : undefined,\n          tabIndex: item.disabled ? -1 : index === tabStop ? 0 : -1,\n          className: cn(\n            \"relative flex size-11 shrink-0 items-center justify-center rounded-[0.625rem]\",\n            focusRing,\n            \"disabled:pointer-events-none aria-disabled:pointer-events-none\",\n            \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6\",\n          ),\n          style: {\n            opacity: item.disabled ? 0.2 : opacity,\n            transition: `opacity calc(180ms * var(--motion-scale)) ease`,\n          },\n          onPointerEnter: () => setHovered(index),\n          onFocus: () => handleFocus(index),\n        };\n        const content = (\n          <>\n            <span\n              aria-hidden=\"true\"\n              data-slot=\"magnify-dock-glyph\"\n              className=\"flex origin-bottom\"\n              style={{\n                transform: `translateY(${String(-y)}px) scale(${String(s)})`,\n                transition: `transform calc(320ms * var(--motion-scale)) ${SPRING}`,\n              }}\n            >\n              {item.icon}\n            </span>\n            <span\n              aria-hidden=\"true\"\n              data-slot=\"magnify-dock-dot\"\n              className=\"absolute inset-x-0 bottom-[3px] mx-auto size-[3px] rounded-full bg-current\"\n              style={{\n                opacity: isActive ? 0.55 : 0,\n                scale: isActive ? 1 : 0.4,\n                transition: `opacity calc(360ms * var(--motion-scale)) ${SPRING}, scale calc(360ms * var(--motion-scale)) ${SPRING}`,\n              }}\n            />\n            <span\n              aria-hidden=\"true\"\n              data-slot=\"magnify-dock-tip\"\n              data-on={distance === 0 ? \"\" : undefined}\n              className={cn(\n                \"pointer-events-none absolute inset-x-0 bottom-full mx-auto mb-2 w-max rounded-full px-[9px] py-[5px]\",\n                \"font-mono text-[0.5rem] leading-none tracking-[0.06em] whitespace-nowrap uppercase\",\n                dark ? \"bg-background text-foreground\" : \"bg-foreground text-background\",\n              )}\n              style={{\n                opacity: distance === 0 ? 1 : 0,\n                translate: `0 ${distance === 0 ? \"0\" : \"4px\"}`,\n                transition: `opacity calc(180ms * var(--motion-scale)) ease, translate calc(260ms * var(--motion-scale)) ${TIP_SPRING}`,\n              }}\n            >\n              {item.label}\n            </span>\n          </>\n        );\n\n        if (item.href) {\n          return (\n            <a\n              key={item.value}\n              {...shared}\n              href={item.disabled ? undefined : item.href}\n              role={item.disabled ? \"link\" : undefined}\n              aria-disabled={item.disabled || undefined}\n              onClick={(event) => {\n                if (item.disabled) {\n                  event.preventDefault();\n                  return;\n                }\n                select(item);\n              }}\n            >\n              {content}\n            </a>\n          );\n        }\n        return (\n          <button\n            key={item.value}\n            type=\"button\"\n            disabled={item.disabled}\n            {...shared}\n            onClick={() => select(item)}\n          >\n            {content}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\nexport { magnifyDockVariants };\n"],"mappings":"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"}

package/dist/components/magnify-dock/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/magnify-dock/meta.ts
+const meta = defineMeta({
+	name: "magnify-dock",
+	title: "Magnify Dock",
+	description: "A macOS-style dock whose icons grow, lift and show a label as the pointer or keyboard focus passes over them.",
+	category: "navigation",
+	status: "beta",
+	dependencies: ["class-variance-authority", "radix-ui"],
+	registryDependencies: [],
+	files: ["magnify-dock.tsx"],
+	a11y: "A toolbar (role=\"toolbar\", named \"Dock\" by default, aria-orientation horizontal) with one roving tab stop: ArrowLeft/ArrowRight move between items (mirrored in right-to-left layouts, wrapping), Home/End jump to the ends, and disabled items are skipped. Items are real buttons, or links when given an href, named by their label; icons and the tooltip pill are aria-hidden. The active item carries aria-current=\"page\" rather than aria-pressed: the dock marks where you are, like a nav bar, and only one item is ever current, so it is not a set of toggles. Magnification and the tooltip follow keyboard focus as well as hover, so keyboard users get the same feedback. Under reduced motion items still magnify, without animating."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/magnify-dock/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/magnify-dock/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"magnify-dock\",\n  title: \"Magnify Dock\",\n  description:\n    \"A macOS-style dock whose icons grow, lift and show a label as the pointer or keyboard focus passes over them.\",\n  category: \"navigation\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"magnify-dock.tsx\"],\n  a11y:\n    'A toolbar (role=\"toolbar\", named \"Dock\" by default, aria-orientation horizontal) with one roving tab stop: ' +\n    \"ArrowLeft/ArrowRight move between items (mirrored in right-to-left layouts, wrapping), Home/End jump to the \" +\n    \"ends, and disabled items are skipped. Items are real buttons, or links when given an href, named by their \" +\n    'label; icons and the tooltip pill are aria-hidden. The active item carries aria-current=\"page\" rather than ' +\n    \"aria-pressed: the dock marks where you are, like a nav bar, and only one item is ever current, so it is not a \" +\n    \"set of toggles. Magnification and the tooltip follow keyboard focus as well as hover, so keyboard users get \" +\n    \"the same feedback. Under reduced motion items still magnify, without animating.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,UAAU;CACrD,sBAAsB,CAAC;CACvB,OAAO,CAAC,kBAAkB;CAC1B,MACE;AAOJ,CAAC"}

package/dist/components/marquee/index.d.ts

@@ -0,0 +1,2 @@
+import { Marquee, MarqueeProps, marqueeVariants } from "./marquee.js";
+export { Marquee, type MarqueeProps, marqueeVariants };

package/dist/components/marquee/index.js

@@ -0,0 +1,2 @@
+import { Marquee, marqueeVariants } from "./marquee.js";
+export { Marquee, marqueeVariants };

package/dist/components/marquee/marquee.d.ts

@@ -0,0 +1,30 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/marquee/marquee.d.ts
+/** The root. The track and its halves follow the same orientation. */
+declare const marqueeVariants: (props?: ({
+  orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface MarqueeProps extends ComponentPropsWithRef<"div">, VariantProps<typeof marqueeVariants> {
+  children?: ReactNode;
+  /** Space between items, and between the last item and the first again. Numbers are px. */
+  gap?: number | string;
+  /** Pixels per second. Converted to a duration from the measured length of the content. */
+  speed?: number;
+  /** Runs toward the inline end (or downward) instead of toward the start (or upward). */
+  reverse?: boolean;
+  /** Pauses while the pointer is over the marquee or focus is inside it. */
+  pauseOnHover?: boolean;
+  /** Pauses it outright — wire this to a visible pause control. */
+  paused?: boolean;
+  /**
+   * How many times to repeat the content inside each half, for content shorter
+   * than the viewport. Repeats are hidden from assistive technology.
+   */
+  repeat?: number;
+}
+/** Scrolls its children in a seamless, endless loop. */
+declare function Marquee({ className, children, orientation, gap, speed, reverse, pauseOnHover, paused, repeat, style, ...props }: MarqueeProps): import("react").JSX.Element;
+//#endregion
+export { Marquee, MarqueeProps, marqueeVariants };
+//# sourceMappingURL=marquee.d.ts.map

package/dist/components/marquee/marquee.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"marquee.d.ts","names":[],"sources":["../../../src/components/marquee/marquee.tsx"],"mappings":";;;;cAqEM,kBAAe;;6CAUnB;UAKe,qBACP,8BAA8B,oBAAoB;EAC1D,WAAW;;EAEX;;EAEA;;EAEA;;EAEA;;EAEA;;;;;EAKA;;;iBAIc,UACd,WACA,UACA,aACA,KACA,OACA,SACA,cACA,QACA,QACA,UACG,SACF,+BAAY,IAAA"}

package/dist/components/marquee/marquee.js

@@ -0,0 +1,117 @@
+"use client";
+import "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+//#region src/components/marquee/marquee.tsx
+const PREFIX = "dowel-marquee";
+const STYLES = `
+@keyframes ${PREFIX}-x{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% * var(--${PREFIX}-sign,1)),0,0)}}
+@keyframes ${PREFIX}-y{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
+[data-slot=marquee]:dir(rtl){--${PREFIX}-sign:-1}
+[data-slot=marquee]>[data-slot=marquee-track]{animation:var(--${PREFIX}-name) var(--${PREFIX}-duration) linear infinite}
+[data-slot=marquee][data-reverse]>[data-slot=marquee-track]{animation-direction:reverse}
+[data-slot=marquee][data-paused]>[data-slot=marquee-track],[data-slot=marquee][data-pause-on-hover]:hover>[data-slot=marquee-track],[data-slot=marquee][data-pause-on-hover]:focus-within>[data-slot=marquee-track]{animation-play-state:paused}
+@media (prefers-reduced-motion: reduce){[data-slot=marquee]>[data-slot=marquee-track]{animation:none}}
+`;
+const REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+function prefersReducedMotion() {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(REDUCED_MOTION).matches;
+}
+function subscribeReducedMotion(onChange) {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {};
+	const query = window.matchMedia(REDUCED_MOTION);
+	query.addEventListener("change", onChange);
+	return () => {
+		query.removeEventListener("change", onChange);
+	};
+}
+/** The root. The track and its halves follow the same orientation. */
+const marqueeVariants = cva("relative flex", {
+	variants: { orientation: {
+		horizontal: "flex-row overflow-x-hidden",
+		vertical: "flex-col overflow-y-hidden"
+	} },
+	defaultVariants: { orientation: "horizontal" }
+});
+/** Seconds a loop takes when nothing has been measured yet (server, first paint). */
+const FALLBACK_SECONDS = 20;
+/** Scrolls its children in a seamless, endless loop. */
+function Marquee({ className, children, orientation = "horizontal", gap = 16, speed = 50, reverse = false, pauseOnHover = true, paused = false, repeat = 1, style, ...props }) {
+	const vertical = orientation === "vertical";
+	const reduced = useSyncExternalStore(subscribeReducedMotion, prefersReducedMotion, () => false);
+	const firstHalf = useRef(null);
+	const [length, setLength] = useState(0);
+	useEffect(() => {
+		const element = firstHalf.current;
+		if (!element || reduced) return;
+		const measure = () => {
+			setLength(vertical ? element.offsetHeight : element.offsetWidth);
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(element);
+		return () => {
+			observer.disconnect();
+		};
+	}, [vertical, reduced]);
+	const seconds = length > 0 && speed > 0 ? length / speed : FALLBACK_SECONDS;
+	const gapValue = typeof gap === "number" ? `${String(gap)}px` : gap;
+	const copies = Math.max(1, Math.floor(repeat));
+	const rootStyle = {
+		[`--${PREFIX}-name`]: `${PREFIX}-${vertical ? "y" : "x"}`,
+		[`--${PREFIX}-duration`]: `calc(${String(Math.round(seconds * 1e3))}ms * var(--motion-scale, 1))`,
+		...style
+	};
+	const half = (index) => /* @__PURE__ */ jsx("div", {
+		ref: index === 0 ? firstHalf : void 0,
+		"data-slot": "marquee-group",
+		"aria-hidden": index > 0 ? true : void 0,
+		inert: index > 0 ? true : void 0,
+		className: cn("flex shrink-0", vertical ? "flex-col" : "flex-row"),
+		style: vertical ? {
+			gap: gapValue,
+			paddingBlockEnd: gapValue
+		} : {
+			gap: gapValue,
+			paddingInlineEnd: gapValue
+		},
+		children: Array.from({ length: copies }, (_, copy) => index === 0 && copy === 0 ? /* @__PURE__ */ jsx("div", {
+			className: "contents",
+			children
+		}, copy) : /* @__PURE__ */ jsx("div", {
+			className: "contents",
+			"aria-hidden": "true",
+			inert: true,
+			children
+		}, copy))
+	}, index);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "marquee",
+		"data-orientation": orientation,
+		"data-reverse": reverse || void 0,
+		"data-paused": paused || void 0,
+		"data-pause-on-hover": pauseOnHover || void 0,
+		"data-reduced-motion": reduced || void 0,
+		role: reduced ? "region" : void 0,
+		"aria-label": reduced && !props["aria-labelledby"] ? "Scrolling content" : void 0,
+		tabIndex: reduced ? 0 : void 0,
+		className: cn(marqueeVariants({ orientation }), reduced && ["outline-none focus-visible:ring-2 focus-visible:ring-ring/55 focus-visible:ring-offset-2 focus-visible:ring-offset-background", vertical ? "overflow-y-auto" : "overflow-x-auto"], className),
+		style: rootStyle,
+		...props,
+		children: [/* @__PURE__ */ jsx("style", {
+			href: PREFIX,
+			precedence: "dowel",
+			children: STYLES
+		}), /* @__PURE__ */ jsx("div", {
+			"data-slot": "marquee-track",
+			className: cn("flex shrink-0", vertical ? "h-max flex-col" : "w-max flex-row"),
+			children: reduced ? half(0) : [half(0), half(1)]
+		})]
+	});
+}
+//#endregion
+export { Marquee, marqueeVariants };
+
+//# sourceMappingURL=marquee.js.map

package/dist/components/marquee/marquee.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"marquee.js","names":[],"sources":["../../../src/components/marquee/marquee.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Infinite Slider (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useEffect,\n  useRef,\n  useState,\n  useSyncExternalStore,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * The source drives a motion value from JavaScript and re-measures on every\n * resize. A marquee is a constant-velocity loop, which is exactly what a CSS\n * keyframe is: the track holds two identical halves and slides by -50%, so\n * the second half lands where the first started and the loop has no seam.\n *\n * JavaScript only measures one half, to turn `speed` (px/s) into a duration.\n * Everything else — pausing on hover and focus, reversing, mirroring for\n * right-to-left text, stopping under reduced motion — is CSS, so it holds even\n * before hydration.\n */\n\nconst PREFIX = \"dowel-marquee\";\n\n/*\n * Unlayered, so it outranks utilities: it is limited to the keyframes and to\n * data-slot selectors a consumer has no reason to override. The animation is\n * never set inline, because an inline animation would beat the reduced-motion\n * rule below.\n */\nconst STYLES = `\n@keyframes ${PREFIX}-x{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% * var(--${PREFIX}-sign,1)),0,0)}}\n@keyframes ${PREFIX}-y{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}\n[data-slot=marquee]:dir(rtl){--${PREFIX}-sign:-1}\n[data-slot=marquee]>[data-slot=marquee-track]{animation:var(--${PREFIX}-name) var(--${PREFIX}-duration) linear infinite}\n[data-slot=marquee][data-reverse]>[data-slot=marquee-track]{animation-direction:reverse}\n[data-slot=marquee][data-paused]>[data-slot=marquee-track],[data-slot=marquee][data-pause-on-hover]:hover>[data-slot=marquee-track],[data-slot=marquee][data-pause-on-hover]:focus-within>[data-slot=marquee-track]{animation-play-state:paused}\n@media (prefers-reduced-motion: reduce){[data-slot=marquee]>[data-slot=marquee-track]{animation:none}}\n`;\n\nconst REDUCED_MOTION = \"(prefers-reduced-motion: reduce)\";\n\nfunction prefersReducedMotion(): boolean {\n  return (\n    typeof window !== \"undefined\" &&\n    typeof window.matchMedia === \"function\" &&\n    window.matchMedia(REDUCED_MOTION).matches\n  );\n}\n\nfunction subscribeReducedMotion(onChange: () => void): () => void {\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") {\n    return () => {};\n  }\n  const query = window.matchMedia(REDUCED_MOTION);\n  query.addEventListener(\"change\", onChange);\n  return () => {\n    query.removeEventListener(\"change\", onChange);\n  };\n}\n\n/** The root. The track and its halves follow the same orientation. */\nconst marqueeVariants = cva(\"relative flex\", {\n  variants: {\n    orientation: {\n      horizontal: \"flex-row overflow-x-hidden\",\n      vertical: \"flex-col overflow-y-hidden\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"horizontal\",\n  },\n});\n\n/** Seconds a loop takes when nothing has been measured yet (server, first paint). */\nconst FALLBACK_SECONDS = 20;\n\nexport interface MarqueeProps\n  extends ComponentPropsWithRef<\"div\">, VariantProps<typeof marqueeVariants> {\n  children?: ReactNode;\n  /** Space between items, and between the last item and the first again. Numbers are px. */\n  gap?: number | string;\n  /** Pixels per second. Converted to a duration from the measured length of the content. */\n  speed?: number;\n  /** Runs toward the inline end (or downward) instead of toward the start (or upward). */\n  reverse?: boolean;\n  /** Pauses while the pointer is over the marquee or focus is inside it. */\n  pauseOnHover?: boolean;\n  /** Pauses it outright — wire this to a visible pause control. */\n  paused?: boolean;\n  /**\n   * How many times to repeat the content inside each half, for content shorter\n   * than the viewport. Repeats are hidden from assistive technology.\n   */\n  repeat?: number;\n}\n\n/** Scrolls its children in a seamless, endless loop. */\nexport function Marquee({\n  className,\n  children,\n  orientation = \"horizontal\",\n  gap = 16,\n  speed = 50,\n  reverse = false,\n  pauseOnHover = true,\n  paused = false,\n  repeat = 1,\n  style,\n  ...props\n}: MarqueeProps) {\n  const vertical = orientation === \"vertical\";\n  const reduced = useSyncExternalStore(\n    subscribeReducedMotion,\n    prefersReducedMotion,\n    () => false,\n  );\n  const firstHalf = useRef<HTMLDivElement>(null);\n  const [length, setLength] = useState(0);\n\n  useEffect(() => {\n    const element = firstHalf.current;\n    if (!element || reduced) return;\n    const measure = () => {\n      setLength(vertical ? element.offsetHeight : element.offsetWidth);\n    };\n    measure();\n    const observer = new ResizeObserver(measure);\n    observer.observe(element);\n    return () => {\n      observer.disconnect();\n    };\n  }, [vertical, reduced]);\n\n  const seconds = length > 0 && speed > 0 ? length / speed : FALLBACK_SECONDS;\n  const gapValue = typeof gap === \"number\" ? `${String(gap)}px` : gap;\n  const copies = Math.max(1, Math.floor(repeat));\n\n  const rootStyle: CSSProperties & Record<`--${string}`, string> = {\n    [`--${PREFIX}-name`]: `${PREFIX}-${vertical ? \"y\" : \"x\"}`,\n    // Through the motion scale like every other duration in the system.\n    [`--${PREFIX}-duration`]: `calc(${String(Math.round(seconds * 1000))}ms * var(--motion-scale, 1))`,\n    ...style,\n  };\n\n  const half = (index: number) => (\n    <div\n      key={index}\n      ref={index === 0 ? firstHalf : undefined}\n      data-slot=\"marquee-group\"\n      aria-hidden={index > 0 ? true : undefined}\n      inert={index > 0 ? true : undefined}\n      className={cn(\"flex shrink-0\", vertical ? \"flex-col\" : \"flex-row\")}\n      style={\n        vertical\n          ? { gap: gapValue, paddingBlockEnd: gapValue }\n          : { gap: gapValue, paddingInlineEnd: gapValue }\n      }\n    >\n      {Array.from({ length: copies }, (_, copy) =>\n        index === 0 && copy === 0 ? (\n          <div key={copy} className=\"contents\">\n            {children}\n          </div>\n        ) : (\n          <div key={copy} className=\"contents\" aria-hidden=\"true\" inert>\n            {children}\n          </div>\n        ),\n      )}\n    </div>\n  );\n\n  return (\n    <div\n      data-slot=\"marquee\"\n      data-orientation={orientation}\n      data-reverse={reverse || undefined}\n      data-paused={paused || undefined}\n      data-pause-on-hover={pauseOnHover || undefined}\n      data-reduced-motion={reduced || undefined}\n      // Under reduced motion it stops and becomes an ordinary scroller: a named,\n      // focusable region, so a keyboard user can reach it to scroll.\n      role={reduced ? \"region\" : undefined}\n      aria-label={reduced && !props[\"aria-labelledby\"] ? \"Scrolling content\" : undefined}\n      tabIndex={reduced ? 0 : undefined}\n      className={cn(\n        marqueeVariants({ orientation }),\n        reduced && [focusRing, vertical ? \"overflow-y-auto\" : \"overflow-x-auto\"],\n        className,\n      )}\n      style={rootStyle}\n      {...props}\n    >\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <div\n        data-slot=\"marquee-track\"\n        className={cn(\"flex shrink-0\", vertical ? \"h-max flex-col\" : \"w-max flex-row\")}\n      >\n        {reduced ? half(0) : [half(0), half(1)]}\n      </div>\n    </div>\n  );\n}\n\nexport { marqueeVariants };\n"],"mappings":"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"}

package/dist/components/marquee/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/marquee/meta.ts
+const meta = defineMeta({
+	name: "marquee",
+	title: "Marquee",
+	description: "Scrolls its children in a seamless, endless loop — horizontal or vertical, at a set speed, pausing on hover and focus.",
+	category: "display",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["marquee.tsx"],
+	a11y: "The content is rendered once for assistive technology: the copy that closes the loop, and any `repeat` copies, are aria-hidden and inert, so nothing is announced or focused twice. It pauses while hovered or while focus is inside it, and `paused` stops it outright for a visible pause control (WCAG 2.2.2). Under prefers-reduced-motion it stops and becomes an ordinary, keyboard-focusable scroller. The loop runs toward the inline start, so it mirrors under dir=\"rtl\"."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/marquee/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/marquee/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"marquee\",\n  title: \"Marquee\",\n  description:\n    \"Scrolls its children in a seamless, endless loop — horizontal or vertical, at a set speed, pausing on hover and focus.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"marquee.tsx\"],\n  a11y:\n    \"The content is rendered once for assistive technology: the copy that closes the loop, and any \" +\n    \"`repeat` copies, are aria-hidden and inert, so nothing is announced or focused twice. It pauses \" +\n    \"while hovered or while focus is inside it, and `paused` stops it outright for a visible pause \" +\n    \"control (WCAG 2.2.2). Under prefers-reduced-motion it stops and becomes an ordinary, \" +\n    'keyboard-focusable scroller. The loop runs toward the inline start, so it mirrors under dir=\"rtl\".',\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC;CACvB,OAAO,CAAC,aAAa;CACrB,MACE;AAKJ,CAAC"}

package/dist/components/meter/meter.js

@@ -78,7 +78,7 @@ function Meter({ className, segments, max, label, warnAt = .9, threshold, format
 						return /* @__PURE__ */ jsx("div", {
 							"data-slot": "meter-segment",
 							"data-tone": segment.tone ?? "primary",
-							className: cn("h-full first:rounded-l-full last:rounded-r-full", "transition-[width] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]", TONES[segment.tone ?? "primary"]),
+							className: cn("h-full first:rounded-s-full last:rounded-e-full", "transition-[width] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]", TONES[segment.tone ?? "primary"]),
 							style: { width: `${String(value / denominator * 100)}%` }
 						}, segment.id);
 					})

package/dist/components/meter/meter.js.map

@@ -1 +1 @@
-{"version":3,"file":"meter.js","names":[],"sources":["../../../src/components/meter/meter.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext, useMemo, type ComponentPropsWithRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A measurement against a known capacity: storage against a quota, seats\n * against a plan, spend against a budget.\n *\n * Not a Progress. Progress reports how far along a task is and is expected to\n * reach the end; a meter reports a level that has no reason to move at all, and\n * where being near the top is the thing worth noticing. They carry different\n * ARIA roles for exactly that reason, and screen readers phrase them\n * differently.\n *\n * The bar is a single `role=\"meter\"` and the segments inside it are decoration.\n * Making each segment its own widget would put five unlabelled meters in the\n * tab order to describe one quantity; the legend carries the per-segment detail\n * as text instead, where it can actually be read.\n */\n\nconst TONES = {\n  primary: \"bg-primary\",\n  info: \"bg-info\",\n  success: \"bg-success\",\n  warning: \"bg-warning\",\n  destructive: \"bg-destructive\",\n  neutral: \"bg-border-strong\",\n} as const;\n\nexport type MeterTone = keyof typeof TONES;\n\nexport interface MeterSegment {\n  /** Stable identity, so a re-order does not re-animate every segment. */\n  id: string;\n  /** Named in the legend and in the accessible summary. */\n  label: string;\n  value: number;\n  tone?: MeterTone;\n}\n\ninterface MeterContextValue {\n  segments: MeterSegment[];\n  total: number;\n  max: number;\n  format: (value: number) => string;\n  over: boolean;\n}\n\nconst MeterContext = createContext<MeterContextValue | null>(null);\n\nfunction useMeterContext(component: string): MeterContextValue {\n  const context = useContext(MeterContext);\n  if (!context) {\n    throw new Error(`${component} must be rendered inside <Meter>.`);\n  }\n  return context;\n}\n\nfunction defaultFormat(value: number): string {\n  return new Intl.NumberFormat().format(value);\n}\n\nexport interface MeterProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  /** Parts making up the measurement. One segment is the ordinary case. */\n  segments: MeterSegment[];\n  /** The capacity being measured against. */\n  max: number;\n  /** Names the meter. Required — an unnamed measurement is unreadable. */\n  label: string;\n  /**\n   * Fraction of `max` past which the meter reports strain, between 0 and 1.\n   * Presentation only: it never changes the reported value.\n   */\n  warnAt?: number;\n  /** Optional marker on the track, for a soft limit or an alert threshold. */\n  threshold?: { value: number; label: string };\n  /** Formats every number that reaches the reader. */\n  format?: (value: number) => string;\n  /** Shown after the bar. Compose `MeterLegend` here, or your own summary. */\n  children?: React.ReactNode;\n}\n\nexport function Meter({\n  className,\n  segments,\n  max,\n  label,\n  warnAt = 0.9,\n  threshold,\n  format = defaultFormat,\n  children,\n  ...props\n}: MeterProps) {\n  const total = segments.reduce((sum, segment) => sum + Math.max(0, segment.value), 0);\n  const over = total > max;\n  const strained = max > 0 && total / max >= warnAt;\n\n  // Widths are a share of capacity, not of the total, so a half-full meter\n  // renders half full. Dividing by the total instead would make every meter\n  // look completely full, which is the usual bug in hand-rolled versions.\n  const denominator = over ? total : max;\n\n  const context = useMemo<MeterContextValue>(\n    () => ({ segments, total, max, format, over }),\n    [segments, total, max, format, over],\n  );\n\n  return (\n    <MeterContext.Provider value={context}>\n      <div\n        data-slot=\"meter\"\n        data-over={over || undefined}\n        data-strained={strained || undefined}\n        className={cn(\"flex w-full flex-col gap-1.5\", className)}\n        {...props}\n      >\n        <div\n          role=\"meter\"\n          aria-label={label}\n          aria-valuenow={total}\n          aria-valuemin={0}\n          aria-valuemax={max}\n          // Without this a screen reader announces a bare number with no unit\n          // and no capacity — \"4\" tells the reader nothing about 4 of what.\n          aria-valuetext={`${format(total)} of ${format(max)}${over ? \", over capacity\" : \"\"}`}\n          data-slot=\"meter-track\"\n          className=\"relative h-2 w-full overflow-hidden rounded-full bg-muted\"\n        >\n          <div className=\"flex h-full w-full\">\n            {segments.map((segment) => {\n              const value = Math.max(0, segment.value);\n              // A zero segment renders nothing at all. A one-pixel sliver reads\n              // as a small amount rather than as none.\n              if (value === 0 || denominator === 0) return null;\n\n              return (\n                <div\n                  key={segment.id}\n                  data-slot=\"meter-segment\"\n                  data-tone={segment.tone ?? \"primary\"}\n                  className={cn(\n                    \"h-full first:rounded-l-full last:rounded-r-full\",\n                    \"transition-[width] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]\",\n                    TONES[segment.tone ?? \"primary\"],\n                  )}\n                  style={{ width: `${String((value / denominator) * 100)}%` }}\n                />\n              );\n            })}\n          </div>\n\n          {threshold && max > 0 && threshold.value > 0 && threshold.value < max ? (\n            <div\n              data-slot=\"meter-threshold\"\n              // The marker repeats what the legend states in words, so it is\n              // decoration. Announcing it would interrupt the value.\n              aria-hidden=\"true\"\n              className=\"absolute inset-y-0 w-px bg-foreground/45\"\n              style={{ left: `${String((threshold.value / denominator) * 100)}%` }}\n            />\n          ) : null}\n        </div>\n\n        {children}\n      </div>\n    </MeterContext.Provider>\n  );\n}\n\n/**\n * The per-segment breakdown, as text.\n *\n * This is where the detail lives. The bar communicates one number; anyone who\n * needs to know that images account for most of it reads it here.\n */\nexport function MeterLegend({ className, ...props }: ComponentPropsWithRef<\"ul\">) {\n  const { segments, format } = useMeterContext(\"MeterLegend\");\n\n  return (\n    <ul\n      data-slot=\"meter-legend\"\n      className={cn(\"flex flex-wrap gap-x-4 gap-y-1 text-xs\", className)}\n      {...props}\n    >\n      {segments.map((segment) => (\n        <li key={segment.id} className=\"flex items-center gap-1.5\">\n          <span\n            aria-hidden=\"true\"\n            className={cn(\"size-2 shrink-0 rounded-full\", TONES[segment.tone ?? \"primary\"])}\n          />\n          <span className=\"text-muted-foreground\">{segment.label}</span>\n          <span className=\"tabular-nums\">{format(segment.value)}</span>\n        </li>\n      ))}\n    </ul>\n  );\n}\n\n/** The headline \"4.2 GB of 10 GB\" line, with an over-capacity state. */\nexport function MeterValue({ className, ...props }: ComponentPropsWithRef<\"p\">) {\n  const { total, max, format, over } = useMeterContext(\"MeterValue\");\n\n  return (\n    <p\n      data-slot=\"meter-value\"\n      className={cn(\n        \"text-xs tabular-nums\",\n        over ? \"text-destructive\" : \"text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      {format(total)} of {format(max)}\n      {over ? \" — over capacity\" : null}\n    </p>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"meter.js","names":[],"sources":["../../../src/components/meter/meter.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext, useMemo, type ComponentPropsWithRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A measurement against a known capacity: storage against a quota, seats\n * against a plan, spend against a budget.\n *\n * Not a Progress. Progress reports how far along a task is and is expected to\n * reach the end; a meter reports a level that has no reason to move at all, and\n * where being near the top is the thing worth noticing. They carry different\n * ARIA roles for exactly that reason, and screen readers phrase them\n * differently.\n *\n * The bar is a single `role=\"meter\"` and the segments inside it are decoration.\n * Making each segment its own widget would put five unlabelled meters in the\n * tab order to describe one quantity; the legend carries the per-segment detail\n * as text instead, where it can actually be read.\n */\n\nconst TONES = {\n  primary: \"bg-primary\",\n  info: \"bg-info\",\n  success: \"bg-success\",\n  warning: \"bg-warning\",\n  destructive: \"bg-destructive\",\n  neutral: \"bg-border-strong\",\n} as const;\n\nexport type MeterTone = keyof typeof TONES;\n\nexport interface MeterSegment {\n  /** Stable identity, so a re-order does not re-animate every segment. */\n  id: string;\n  /** Named in the legend and in the accessible summary. */\n  label: string;\n  value: number;\n  tone?: MeterTone;\n}\n\ninterface MeterContextValue {\n  segments: MeterSegment[];\n  total: number;\n  max: number;\n  format: (value: number) => string;\n  over: boolean;\n}\n\nconst MeterContext = createContext<MeterContextValue | null>(null);\n\nfunction useMeterContext(component: string): MeterContextValue {\n  const context = useContext(MeterContext);\n  if (!context) {\n    throw new Error(`${component} must be rendered inside <Meter>.`);\n  }\n  return context;\n}\n\nfunction defaultFormat(value: number): string {\n  return new Intl.NumberFormat().format(value);\n}\n\nexport interface MeterProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  /** Parts making up the measurement. One segment is the ordinary case. */\n  segments: MeterSegment[];\n  /** The capacity being measured against. */\n  max: number;\n  /** Names the meter. Required — an unnamed measurement is unreadable. */\n  label: string;\n  /**\n   * Fraction of `max` past which the meter reports strain, between 0 and 1.\n   * Presentation only: it never changes the reported value.\n   */\n  warnAt?: number;\n  /** Optional marker on the track, for a soft limit or an alert threshold. */\n  threshold?: { value: number; label: string };\n  /** Formats every number that reaches the reader. */\n  format?: (value: number) => string;\n  /** Shown after the bar. Compose `MeterLegend` here, or your own summary. */\n  children?: React.ReactNode;\n}\n\nexport function Meter({\n  className,\n  segments,\n  max,\n  label,\n  warnAt = 0.9,\n  threshold,\n  format = defaultFormat,\n  children,\n  ...props\n}: MeterProps) {\n  const total = segments.reduce((sum, segment) => sum + Math.max(0, segment.value), 0);\n  const over = total > max;\n  const strained = max > 0 && total / max >= warnAt;\n\n  // Widths are a share of capacity, not of the total, so a half-full meter\n  // renders half full. Dividing by the total instead would make every meter\n  // look completely full, which is the usual bug in hand-rolled versions.\n  const denominator = over ? total : max;\n\n  const context = useMemo<MeterContextValue>(\n    () => ({ segments, total, max, format, over }),\n    [segments, total, max, format, over],\n  );\n\n  return (\n    <MeterContext.Provider value={context}>\n      <div\n        data-slot=\"meter\"\n        data-over={over || undefined}\n        data-strained={strained || undefined}\n        className={cn(\"flex w-full flex-col gap-1.5\", className)}\n        {...props}\n      >\n        <div\n          role=\"meter\"\n          aria-label={label}\n          aria-valuenow={total}\n          aria-valuemin={0}\n          aria-valuemax={max}\n          // Without this a screen reader announces a bare number with no unit\n          // and no capacity — \"4\" tells the reader nothing about 4 of what.\n          aria-valuetext={`${format(total)} of ${format(max)}${over ? \", over capacity\" : \"\"}`}\n          data-slot=\"meter-track\"\n          className=\"relative h-2 w-full overflow-hidden rounded-full bg-muted\"\n        >\n          <div className=\"flex h-full w-full\">\n            {segments.map((segment) => {\n              const value = Math.max(0, segment.value);\n              // A zero segment renders nothing at all. A one-pixel sliver reads\n              // as a small amount rather than as none.\n              if (value === 0 || denominator === 0) return null;\n\n              return (\n                <div\n                  key={segment.id}\n                  data-slot=\"meter-segment\"\n                  data-tone={segment.tone ?? \"primary\"}\n                  className={cn(\n                    \"h-full first:rounded-s-full last:rounded-e-full\",\n                    \"transition-[width] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]\",\n                    TONES[segment.tone ?? \"primary\"],\n                  )}\n                  style={{ width: `${String((value / denominator) * 100)}%` }}\n                />\n              );\n            })}\n          </div>\n\n          {threshold && max > 0 && threshold.value > 0 && threshold.value < max ? (\n            <div\n              data-slot=\"meter-threshold\"\n              // The marker repeats what the legend states in words, so it is\n              // decoration. Announcing it would interrupt the value.\n              aria-hidden=\"true\"\n              className=\"absolute inset-y-0 w-px bg-foreground/45\"\n              style={{ left: `${String((threshold.value / denominator) * 100)}%` }}\n            />\n          ) : null}\n        </div>\n\n        {children}\n      </div>\n    </MeterContext.Provider>\n  );\n}\n\n/**\n * The per-segment breakdown, as text.\n *\n * This is where the detail lives. The bar communicates one number; anyone who\n * needs to know that images account for most of it reads it here.\n */\nexport function MeterLegend({ className, ...props }: ComponentPropsWithRef<\"ul\">) {\n  const { segments, format } = useMeterContext(\"MeterLegend\");\n\n  return (\n    <ul\n      data-slot=\"meter-legend\"\n      className={cn(\"flex flex-wrap gap-x-4 gap-y-1 text-xs\", className)}\n      {...props}\n    >\n      {segments.map((segment) => (\n        <li key={segment.id} className=\"flex items-center gap-1.5\">\n          <span\n            aria-hidden=\"true\"\n            className={cn(\"size-2 shrink-0 rounded-full\", TONES[segment.tone ?? \"primary\"])}\n          />\n          <span className=\"text-muted-foreground\">{segment.label}</span>\n          <span className=\"tabular-nums\">{format(segment.value)}</span>\n        </li>\n      ))}\n    </ul>\n  );\n}\n\n/** The headline \"4.2 GB of 10 GB\" line, with an over-capacity state. */\nexport function MeterValue({ className, ...props }: ComponentPropsWithRef<\"p\">) {\n  const { total, max, format, over } = useMeterContext(\"MeterValue\");\n\n  return (\n    <p\n      data-slot=\"meter-value\"\n      className={cn(\n        \"text-xs tabular-nums\",\n        over ? \"text-destructive\" : \"text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      {format(total)} of {format(max)}\n      {over ? \" — over capacity\" : null}\n    </p>\n  );\n}\n"],"mappings":"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"}

package/dist/components/morph-button/index.d.ts

@@ -0,0 +1,2 @@
+import { MorphButton, MorphButtonProps, MorphButtonTrigger, morphButtonToneVariants, morphButtonVariants } from "./morph-button.js";
+export { MorphButton, type MorphButtonProps, type MorphButtonTrigger, morphButtonToneVariants, morphButtonVariants };

package/dist/components/morph-button/index.js

@@ -0,0 +1,2 @@
+import { MorphButton, morphButtonToneVariants, morphButtonVariants } from "./morph-button.js";
+export { MorphButton, morphButtonToneVariants, morphButtonVariants };

package/dist/components/morph-button/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/morph-button/meta.ts
+const meta = defineMeta({
+	name: "morph-button",
+	title: "Morph Button",
+	description: "A button whose icon and label morph to an active state — toggles, transient confirmations and hover affordances.",
+	category: "form",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["button"],
+	files: ["morph-button.tsx"],
+	a11y: "In `toggle` mode the state is exposed with aria-pressed and the accessible name stays the resting label, so \"Mute\" never becomes \"Unmute, pressed\". `transient` confirmations (Copied, Submitted) are announced through a polite live region and revert on a timer. `trigger=\"hover\"` activates on keyboard focus as well as hover. Icons are aria-hidden: an icon-only button must be named with aria-label or aria-labelledby, and warns in development when it is not. Motion stops under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map