@dowel-ui/react 0.5.0 → 0.8.0

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

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/copy-button/meta.ts
+const meta = defineMeta({
+	name: "copy-button",
+	title: "Copy Button",
+	description: "Copies a value to the clipboard and morphs its icon and label into a confirmation that reverts on its own.",
+	category: "form",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["button"],
+	files: ["copy-button.tsx"],
+	a11y: "The confirmation is announced through a polite role=\"status\" region rendered beside the button, so it never becomes part of the button's name. Only the visible label is exposed; the hidden one is aria-hidden. Icon-only buttons are named \"Copy\" unless given an aria-label. A refused clipboard write is announced as a failure and never shows the check. The button is never disabled while confirming, so keyboard focus stays put."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/copy-button/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/copy-button/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"copy-button\",\n  title: \"Copy Button\",\n  description:\n    \"Copies a value to the clipboard and morphs its icon and label into a confirmation that reverts on its own.\",\n  category: \"form\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"button\"],\n  files: [\"copy-button.tsx\"],\n  a11y:\n    'The confirmation is announced through a polite role=\"status\" region rendered beside the ' +\n    \"button, so it never becomes part of the button's name. Only the visible label is exposed; \" +\n    'the hidden one is aria-hidden. Icon-only buttons are named \"Copy\" unless given an aria-label. ' +\n    \"A refused clipboard write is announced as a failure and never shows the check. The button \" +\n    \"is never disabled while confirming, so keyboard focus stays put.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC,QAAQ;CAC/B,OAAO,CAAC,iBAAiB;CACzB,MACE;AAKJ,CAAC"}

package/dist/components/create-menu/create-menu.d.ts

@@ -0,0 +1,42 @@
+import { DropdownMenu } from "radix-ui";
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/create-menu/create-menu.d.ts
+/** The pill and the panel share one surface; `tone` inverts it. */
+declare const createMenuVariants: (props?: ({
+  tone?: "default" | "inverted" | null | undefined;
+  stroke?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface CreateMenuProps extends Omit<ComponentPropsWithRef<"div">, "dir">, VariantProps<typeof createMenuVariants> {
+  /** The trigger's visible label, and the menu's name. */
+  label?: ReactNode;
+  /** The trigger's icon. Decorative; defaults to a plus. Pass `null` for none. */
+  icon?: ReactNode;
+  /** Radius of the open panel in px. The row radius derives from it. */
+  corner?: number;
+  /** Width of the open panel in px. Its height follows the items. */
+  panelWidth?: number;
+  /** Where the panel grows from, relative to the pill. */
+  align?: "start" | "center" | "end";
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Radix `modal`. Off by default: the menu sits inline, over its own pill. */
+  modal?: boolean;
+  dir?: "ltr" | "rtl";
+  triggerClassName?: string;
+  contentClassName?: string;
+  /** `CreateMenuItem`s. */
+  children?: ReactNode;
+}
+/** A "+ Create" pill that grows in place into a menu of actions. */
+declare function CreateMenu({ label, icon, corner, panelWidth, align, tone, stroke, open, defaultOpen, onOpenChange, modal, dir, className, triggerClassName, contentClassName, style, children, ...props }: CreateMenuProps): import("react").JSX.Element;
+interface CreateMenuItemProps extends ComponentPropsWithRef<typeof DropdownMenu.Item> {
+  /** Leading icon. Decorative. */
+  icon?: ReactNode;
+}
+/** One action in a CreateMenu. `onSelect` runs it; the menu then closes. */
+declare function CreateMenuItem({ icon, className, style, children, ...props }: CreateMenuItemProps): import("react").JSX.Element;
+//#endregion
+export { CreateMenu, CreateMenuItem, CreateMenuItemProps, CreateMenuProps, createMenuVariants };
+//# sourceMappingURL=create-menu.d.ts.map

package/dist/components/create-menu/create-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-menu.d.ts","names":[],"sources":["../../../src/components/create-menu/create-menu.tsx"],"mappings":";;;;;cAwEM,qBAAkB;;;6CAYtB;UAkBe,wBACP,KAAK,sCAAsC,oBAAoB;;EAEvE,QAAQ;;EAER,OAAO;;EAEP;;EAEA;;EAEA;EACA;EACA;EACA,gBAAgB;;EAEhB;EACA;EACA;EACA;;EAEA,WAAW;;;iBAIG,aACd,OACA,MACA,QACA,YACA,OACA,MACA,QACA,MACA,aACA,cACA,OACA,KACA,WACA,kBACA,kBACA,OACA,aACG,SACF,kCAAe,IAAA;UAkID,4BAA4B,6BACpC,aAAsB;;EAG7B,OAAO;;;iBAIO,iBACd,MACA,WACA,OACA,aACG,SACF,sCAAmB,IAAA"}

package/dist/components/create-menu/create-menu.js

@@ -0,0 +1,197 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { DropdownMenu } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+//#region src/components/create-menu/create-menu.tsx
+const PREFIX = "dowel-create-menu";
+const OVERSHOOT = "cubic-bezier(.32,1.26,.4,1)";
+function ms(value) {
+	return `calc(${String(value)}ms * var(--motion-scale))`;
+}
+const PILL = `width:var(--radix-dropdown-menu-trigger-width);height:var(--radix-dropdown-menu-trigger-height);border-radius:calc(var(--radix-dropdown-menu-trigger-height) / 2)`;
+const PANEL = `width:100%;height:100%;border-radius:var(--create-menu-corner)`;
+const STAGGER = Array.from({ length: 12 }, (_, i) => `[data-slot=create-menu-content][data-state=open] [data-slot=create-menu-list]>[data-slot=create-menu-item]:nth-child(${String(i + 2)}){animation-delay:${ms(30 + 22 * i)}}`).join("\n");
+const STYLES = `
+@keyframes ${PREFIX}-grow{from{${PILL}}to{${PANEL}}}
+@keyframes ${PREFIX}-shrink{from{${PANEL}}to{${PILL}}}
+@keyframes ${PREFIX}-hold{from{opacity:1}to{opacity:1}}
+@keyframes ${PREFIX}-item-in{from{opacity:0;transform:translateY(6px)}}
+[data-slot=create-menu-content][data-state=closed]{animation:${PREFIX}-hold ${ms(300)} linear both}
+[data-slot=create-menu-content][data-state=open]>[data-slot=create-menu-surface]{animation:${PREFIX}-grow ${ms(370)} var(--ease-out-quint) both}
+[data-slot=create-menu-content][data-state=closed]>[data-slot=create-menu-surface]{animation:${PREFIX}-shrink ${ms(300)} var(--ease-out-quint) both}
+[data-slot=create-menu-content][data-state=open] [data-slot=create-menu-item]{animation:${PREFIX}-item-in ${ms(240)} var(--ease-out-quint) both}
+[data-slot=create-menu-content][data-state=closed] [data-slot=create-menu-item],[data-slot=create-menu-content][data-state=closed] [data-slot=create-menu-highlight]{opacity:0}
+${STAGGER}
+`;
+/** The pill and the panel share one surface; `tone` inverts it. */
+const createMenuVariants = cva("", {
+	variants: {
+		tone: {
+			default: "bg-card text-foreground",
+			inverted: "bg-foreground text-background"
+		},
+		stroke: {
+			true: "inset-ring inset-ring-border",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		tone: "default",
+		stroke: false
+	}
+});
+function PlusIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14" })
+	});
+}
+/** A "+ Create" pill that grows in place into a menu of actions. */
+function CreateMenu({ label = "Create", icon, corner = 28, panelWidth = 212, align = "center", tone, stroke, open, defaultOpen, onOpenChange, modal = false, dir, className, triggerClassName, contentClassName, style, children, ...props }) {
+	const triggerRef = useRef(null);
+	const [triggerHeight, setTriggerHeight] = useState(38);
+	const [highlight, setHighlight] = useState({
+		top: 0,
+		height: 0,
+		visible: false
+	});
+	const [moving, setMoving] = useState(false);
+	const movingTimer = useRef(void 0);
+	useLayoutEffect(() => {
+		const trigger = triggerRef.current;
+		if (!trigger) return;
+		const measure = () => {
+			if (trigger.offsetHeight > 0) setTriggerHeight(trigger.offsetHeight);
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(trigger);
+		return () => {
+			observer.disconnect();
+		};
+	}, []);
+	useEffect(() => () => clearTimeout(movingTimer.current), []);
+	const onContentFocus = useCallback((event) => {
+		const target = event.target;
+		if (target.getAttribute("role") !== "menuitem") {
+			setHighlight((previous) => ({
+				...previous,
+				visible: false
+			}));
+			return;
+		}
+		if (highlight.visible && highlight.top !== target.offsetTop) {
+			setMoving(true);
+			clearTimeout(movingTimer.current);
+			movingTimer.current = setTimeout(() => {
+				setMoving(false);
+			}, 110);
+		}
+		setHighlight({
+			top: target.offsetTop,
+			height: target.offsetHeight,
+			visible: true
+		});
+	}, [highlight]);
+	const surface = createMenuVariants({
+		tone,
+		stroke
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "create-menu",
+		className: cn("relative inline-grid place-items-center", className),
+		style: {
+			["--create-menu-corner"]: `${String(corner)}px`,
+			...style
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx("style", {
+			href: PREFIX,
+			precedence: "dowel",
+			children: STYLES
+		}), /* @__PURE__ */ jsxs(DropdownMenu.Root, {
+			open,
+			defaultOpen,
+			onOpenChange: (next) => {
+				if (!next) setHighlight((previous) => ({
+					...previous,
+					visible: false
+				}));
+				onOpenChange?.(next);
+			},
+			modal,
+			dir,
+			children: [/* @__PURE__ */ jsxs(DropdownMenu.Trigger, {
+				ref: triggerRef,
+				"data-slot": "create-menu-trigger",
+				className: cn(surface, focusRing, "inline-flex h-9.5 items-center gap-2 rounded-full px-5 text-[0.84375rem] font-medium select-none", "transition-[scale,opacity] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]", "active:scale-94 data-[state=open]:pointer-events-none data-[state=open]:opacity-0", "[&_svg]:size-4 [&_svg]:shrink-0", triggerClassName),
+				children: [icon === void 0 ? /* @__PURE__ */ jsx(PlusIcon, {}) : icon, label]
+			}), /* @__PURE__ */ jsxs(DropdownMenu.Content, {
+				"data-slot": "create-menu-content",
+				side: "bottom",
+				align,
+				sideOffset: -triggerHeight,
+				avoidCollisions: false,
+				onFocus: onContentFocus,
+				className: cn("relative z-[var(--z-popover)] px-2.5 py-2.75 outline-none", tone === "inverted" ? "text-background" : "text-foreground", contentClassName),
+				style: {
+					width: `${String(panelWidth)}px`,
+					["--create-menu-row-r"]: `max(0px, calc(var(--create-menu-corner) - 11px))`
+				},
+				children: [/* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					"data-slot": "create-menu-surface",
+					className: cn(surface, "absolute inset-x-0 top-0 mx-auto size-full shadow-lg"),
+					style: { borderRadius: "var(--create-menu-corner)" }
+				}), /* @__PURE__ */ jsxs("div", {
+					"data-slot": "create-menu-list",
+					className: "relative grid gap-0.5",
+					children: [/* @__PURE__ */ jsx("div", {
+						"aria-hidden": "true",
+						"data-slot": "create-menu-highlight",
+						"data-moving": moving ? "" : void 0,
+						className: "pointer-events-none absolute inset-x-0 top-0 bg-current/10 data-[moving]:[scale:0.96_1.16]",
+						style: {
+							height: `${String(highlight.height)}px`,
+							opacity: highlight.visible ? 1 : 0,
+							transform: `translateY(${String(highlight.top)}px)`,
+							borderRadius: "var(--create-menu-row-r)",
+							transition: `transform ${ms(380)} ${OVERSHOOT}, scale ${ms(110)} var(--ease-out-quint), opacity ${ms(180)} ease`
+						}
+					}), children]
+				})]
+			})]
+		})]
+	});
+}
+/** One action in a CreateMenu. `onSelect` runs it; the menu then closes. */
+function CreateMenuItem({ icon, className, style, children, ...props }) {
+	return /* @__PURE__ */ jsxs(DropdownMenu.Item, {
+		"data-slot": "create-menu-item",
+		className: cn("relative flex h-8.5 cursor-default items-center gap-2.5 px-3.5 text-[0.8125rem] outline-none select-none", "text-[color-mix(in_oklab,currentColor_78%,transparent)] data-[highlighted]:text-current", "transition-colors duration-[var(--duration-fast)]", "data-[disabled]:pointer-events-none data-[disabled]:opacity-55", className),
+		style: {
+			borderRadius: "var(--create-menu-row-r)",
+			...style
+		},
+		...props,
+		children: [icon ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "create-menu-item-icon",
+			className: "flex shrink-0 [&_svg]:size-3.75",
+			children: icon
+		}) : null, children]
+	});
+}
+//#endregion
+export { CreateMenu, CreateMenuItem, createMenuVariants };
+
+//# sourceMappingURL=create-menu.js.map

package/dist/components/create-menu/create-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-menu.js","names":["DropdownMenuPrimitive"],"sources":["../../../src/components/create-menu/create-menu.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from bencho Create menu (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\";\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type FocusEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A DropdownMenu with a morph flourish: the \"+ Create\" pill grows in place\n * into the menu panel, and shrinks back into the pill when it closes.\n *\n * The menu is the Radix DropdownMenu primitive, so the whole menu-button\n * pattern comes from it: aria-haspopup/aria-expanded on the trigger,\n * role=\"menu\"/\"menuitem\", focus into the menu, Up/Down roving, Home/End,\n * typeahead, Escape and outside-click dismissal with focus returned to the\n * trigger. Dowel's own DropdownMenuContent always portals, and the morph needs\n * the panel to sit exactly over the trigger, so this composes the primitive\n * directly: the content is not portalled and is placed over the trigger\n * (side=\"bottom\", sideOffset = -triggerHeight).\n *\n * Motion is CSS only. The surface is a separate aria-hidden layer whose\n * width/height/radius run from the trigger's size (Radix publishes it as\n * --radix-dropdown-menu-trigger-*) to the panel's; the content itself holds a\n * no-op animation as long as the shrink so Presence waits for it. Items\n * stagger in; one shared highlight pill follows the highlighted item, whether\n * the pointer or the keyboard moved it. Reduced motion collapses every\n * duration through --motion-scale, leaving the settled panel.\n */\n\nconst PREFIX = \"dowel-create-menu\";\nconst OVERSHOOT = \"cubic-bezier(.32,1.26,.4,1)\";\n\nfunction ms(value: number): string {\n  return `calc(${String(value)}ms * var(--motion-scale))`;\n}\n\nconst PILL = `width:var(--radix-dropdown-menu-trigger-width);height:var(--radix-dropdown-menu-trigger-height);border-radius:calc(var(--radix-dropdown-menu-trigger-height) / 2)`;\nconst PANEL = `width:100%;height:100%;border-radius:var(--create-menu-corner)`;\n\nconst STAGGER = Array.from(\n  { length: 12 },\n  (_, i) =>\n    `[data-slot=create-menu-content][data-state=open] [data-slot=create-menu-list]>[data-slot=create-menu-item]:nth-child(${String(i + 2)}){animation-delay:${ms(30 + 22 * i)}}`,\n).join(\"\\n\");\n\nconst STYLES = `\n@keyframes ${PREFIX}-grow{from{${PILL}}to{${PANEL}}}\n@keyframes ${PREFIX}-shrink{from{${PANEL}}to{${PILL}}}\n@keyframes ${PREFIX}-hold{from{opacity:1}to{opacity:1}}\n@keyframes ${PREFIX}-item-in{from{opacity:0;transform:translateY(6px)}}\n[data-slot=create-menu-content][data-state=closed]{animation:${PREFIX}-hold ${ms(300)} linear both}\n[data-slot=create-menu-content][data-state=open]>[data-slot=create-menu-surface]{animation:${PREFIX}-grow ${ms(370)} var(--ease-out-quint) both}\n[data-slot=create-menu-content][data-state=closed]>[data-slot=create-menu-surface]{animation:${PREFIX}-shrink ${ms(300)} var(--ease-out-quint) both}\n[data-slot=create-menu-content][data-state=open] [data-slot=create-menu-item]{animation:${PREFIX}-item-in ${ms(240)} var(--ease-out-quint) both}\n[data-slot=create-menu-content][data-state=closed] [data-slot=create-menu-item],[data-slot=create-menu-content][data-state=closed] [data-slot=create-menu-highlight]{opacity:0}\n${STAGGER}\n`;\n\n/** The pill and the panel share one surface; `tone` inverts it. */\nconst createMenuVariants = cva(\"\", {\n  variants: {\n    tone: {\n      default: \"bg-card text-foreground\",\n      inverted: \"bg-foreground text-background\",\n    },\n    stroke: {\n      true: \"inset-ring inset-ring-border\",\n      false: \"\",\n    },\n  },\n  defaultVariants: { tone: \"default\", stroke: false },\n});\n\nfunction PlusIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M12 5v14M5 12h14\" />\n    </svg>\n  );\n}\n\nexport interface CreateMenuProps\n  extends Omit<ComponentPropsWithRef<\"div\">, \"dir\">, VariantProps<typeof createMenuVariants> {\n  /** The trigger's visible label, and the menu's name. */\n  label?: ReactNode;\n  /** The trigger's icon. Decorative; defaults to a plus. Pass `null` for none. */\n  icon?: ReactNode;\n  /** Radius of the open panel in px. The row radius derives from it. */\n  corner?: number;\n  /** Width of the open panel in px. Its height follows the items. */\n  panelWidth?: number;\n  /** Where the panel grows from, relative to the pill. */\n  align?: \"start\" | \"center\" | \"end\";\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Radix `modal`. Off by default: the menu sits inline, over its own pill. */\n  modal?: boolean;\n  dir?: \"ltr\" | \"rtl\";\n  triggerClassName?: string;\n  contentClassName?: string;\n  /** `CreateMenuItem`s. */\n  children?: ReactNode;\n}\n\n/** A \"+ Create\" pill that grows in place into a menu of actions. */\nexport function CreateMenu({\n  label = \"Create\",\n  icon,\n  corner = 28,\n  panelWidth = 212,\n  align = \"center\",\n  tone,\n  stroke,\n  open,\n  defaultOpen,\n  onOpenChange,\n  modal = false,\n  dir,\n  className,\n  triggerClassName,\n  contentClassName,\n  style,\n  children,\n  ...props\n}: CreateMenuProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const [triggerHeight, setTriggerHeight] = useState(38);\n  const [highlight, setHighlight] = useState({ top: 0, height: 0, visible: false });\n  const [moving, setMoving] = useState(false);\n  const movingTimer = useRef<ReturnType<typeof setTimeout>>(undefined);\n\n  // Measure the pill so the panel's top edge lands on the pill's.\n  useLayoutEffect(() => {\n    const trigger = triggerRef.current;\n    if (!trigger) return;\n    const measure = () => {\n      if (trigger.offsetHeight > 0) setTriggerHeight(trigger.offsetHeight);\n    };\n    measure();\n    const observer = new ResizeObserver(measure);\n    observer.observe(trigger);\n    return () => {\n      observer.disconnect();\n    };\n  }, []);\n\n  useEffect(() => () => clearTimeout(movingTimer.current), []);\n\n  // Radix focuses the highlighted item for pointer and keyboard alike, and\n  // focuses the content itself when the pointer leaves: one listener tracks both.\n  const onContentFocus = useCallback(\n    (event: FocusEvent<HTMLDivElement>) => {\n      const target = event.target;\n      if (target.getAttribute(\"role\") !== \"menuitem\") {\n        setHighlight((previous) => ({ ...previous, visible: false }));\n        return;\n      }\n      if (highlight.visible && highlight.top !== target.offsetTop) {\n        setMoving(true);\n        clearTimeout(movingTimer.current);\n        movingTimer.current = setTimeout(() => {\n          setMoving(false);\n        }, 110);\n      }\n      setHighlight({ top: target.offsetTop, height: target.offsetHeight, visible: true });\n    },\n    [highlight],\n  );\n\n  const surface = createMenuVariants({ tone, stroke });\n\n  return (\n    <div\n      data-slot=\"create-menu\"\n      className={cn(\"relative inline-grid place-items-center\", className)}\n      style={{ [\"--create-menu-corner\" as string]: `${String(corner)}px`, ...style }}\n      {...props}\n    >\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <DropdownMenuPrimitive.Root\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpenChange={(next) => {\n          if (!next) setHighlight((previous) => ({ ...previous, visible: false }));\n          onOpenChange?.(next);\n        }}\n        modal={modal}\n        dir={dir}\n      >\n        <DropdownMenuPrimitive.Trigger\n          ref={triggerRef}\n          data-slot=\"create-menu-trigger\"\n          className={cn(\n            surface,\n            focusRing,\n            \"inline-flex h-9.5 items-center gap-2 rounded-full px-5 text-[0.84375rem] font-medium select-none\",\n            \"transition-[scale,opacity] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\",\n            \"active:scale-94 data-[state=open]:pointer-events-none data-[state=open]:opacity-0\",\n            \"[&_svg]:size-4 [&_svg]:shrink-0\",\n            triggerClassName,\n          )}\n        >\n          {icon === undefined ? <PlusIcon /> : icon}\n          {label}\n        </DropdownMenuPrimitive.Trigger>\n        <DropdownMenuPrimitive.Content\n          data-slot=\"create-menu-content\"\n          side=\"bottom\"\n          align={align}\n          sideOffset={-triggerHeight}\n          avoidCollisions={false}\n          onFocus={onContentFocus}\n          className={cn(\n            \"relative z-[var(--z-popover)] px-2.5 py-2.75 outline-none\",\n            tone === \"inverted\" ? \"text-background\" : \"text-foreground\",\n            contentClassName,\n          )}\n          style={\n            {\n              width: `${String(panelWidth)}px`,\n              [\"--create-menu-row-r\"]: `max(0px, calc(var(--create-menu-corner) - 11px))`,\n            } as CSSProperties\n          }\n        >\n          <div\n            aria-hidden=\"true\"\n            data-slot=\"create-menu-surface\"\n            className={cn(surface, \"absolute inset-x-0 top-0 mx-auto size-full shadow-lg\")}\n            style={{ borderRadius: \"var(--create-menu-corner)\" }}\n          />\n          <div data-slot=\"create-menu-list\" className=\"relative grid gap-0.5\">\n            <div\n              aria-hidden=\"true\"\n              data-slot=\"create-menu-highlight\"\n              data-moving={moving ? \"\" : undefined}\n              className=\"pointer-events-none absolute inset-x-0 top-0 bg-current/10 data-[moving]:[scale:0.96_1.16]\"\n              style={{\n                height: `${String(highlight.height)}px`,\n                opacity: highlight.visible ? 1 : 0,\n                transform: `translateY(${String(highlight.top)}px)`,\n                borderRadius: \"var(--create-menu-row-r)\",\n                transition: `transform ${ms(380)} ${OVERSHOOT}, scale ${ms(110)} var(--ease-out-quint), opacity ${ms(180)} ease`,\n              }}\n            />\n            {children}\n          </div>\n        </DropdownMenuPrimitive.Content>\n      </DropdownMenuPrimitive.Root>\n    </div>\n  );\n}\n\nexport interface CreateMenuItemProps extends ComponentPropsWithRef<\n  typeof DropdownMenuPrimitive.Item\n> {\n  /** Leading icon. Decorative. */\n  icon?: ReactNode;\n}\n\n/** One action in a CreateMenu. `onSelect` runs it; the menu then closes. */\nexport function CreateMenuItem({\n  icon,\n  className,\n  style,\n  children,\n  ...props\n}: CreateMenuItemProps) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"create-menu-item\"\n      className={cn(\n        \"relative flex h-8.5 cursor-default items-center gap-2.5 px-3.5 text-[0.8125rem] outline-none select-none\",\n        \"text-[color-mix(in_oklab,currentColor_78%,transparent)] data-[highlighted]:text-current\",\n        \"transition-colors duration-[var(--duration-fast)]\",\n        \"data-[disabled]:pointer-events-none data-[disabled]:opacity-55\",\n        className,\n      )}\n      style={{ borderRadius: \"var(--create-menu-row-r)\", ...style }}\n      {...props}\n    >\n      {icon ? (\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"create-menu-item-icon\"\n          className=\"flex shrink-0 [&_svg]:size-3.75\"\n        >\n          {icon}\n        </span>\n      ) : null}\n      {children}\n    </DropdownMenuPrimitive.Item>\n  );\n}\n\nexport { createMenuVariants };\n"],"mappings":"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"}

package/dist/components/create-menu/index.d.ts

@@ -0,0 +1,2 @@
+import { CreateMenu, CreateMenuItem, CreateMenuItemProps, CreateMenuProps, createMenuVariants } from "./create-menu.js";
+export { CreateMenu, CreateMenuItem, type CreateMenuItemProps, type CreateMenuProps, createMenuVariants };

package/dist/components/create-menu/index.js

@@ -0,0 +1,2 @@
+import { CreateMenu, CreateMenuItem, createMenuVariants } from "./create-menu.js";
+export { CreateMenu, CreateMenuItem, createMenuVariants };

package/dist/components/create-menu/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/create-menu/meta.ts
+const meta = defineMeta({
+	name: "create-menu",
+	title: "Create Menu",
+	description: "A DropdownMenu with a morph flourish: a \"+ Create\" pill that grows in place into its menu panel.",
+	category: "navigation",
+	status: "beta",
+	dependencies: ["class-variance-authority", "radix-ui"],
+	registryDependencies: [],
+	files: ["create-menu.tsx"],
+	a11y: "Built directly on the Radix DropdownMenu primitive (not portalled, so the panel can grow over the pill): the trigger exposes aria-haspopup=\"menu\" and aria-expanded, the panel is a role=\"menu\" named by the trigger, and items are role=\"menuitem\". Opening from the keyboard moves focus to the first item; Up/Down move, Home/End jump, typeahead searches, Enter/Space select, Escape and an outside press close and return focus to the trigger. The morphing surface and the highlight pill are aria-hidden; the pill follows data-highlighted, so pointer and keyboard never disagree. The grow, stagger and pill slide are decoration and settle instantly under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/create-menu/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/create-menu/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"create-menu\",\n  title: \"Create Menu\",\n  description:\n    'A DropdownMenu with a morph flourish: a \"+ Create\" pill that grows in place into its menu panel.',\n  category: \"navigation\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"create-menu.tsx\"],\n  a11y:\n    \"Built directly on the Radix DropdownMenu primitive (not portalled, so the panel can grow over the \" +\n    'pill): the trigger exposes aria-haspopup=\"menu\" and aria-expanded, the panel is a role=\"menu\" named ' +\n    'by the trigger, and items are role=\"menuitem\". Opening from the keyboard moves focus to the first ' +\n    \"item; Up/Down move, Home/End jump, typeahead searches, Enter/Space select, Escape and an outside \" +\n    \"press close and return focus to the trigger. The morphing surface and the highlight pill are \" +\n    \"aria-hidden; the pill follows data-highlighted, so pointer and keyboard never disagree. The grow, \" +\n    \"stagger and pill slide are decoration and settle instantly under reduced motion.\",\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,iBAAiB;CACzB,MACE;AAOJ,CAAC"}

package/dist/components/cursor-follow/cursor-follow.d.ts

@@ -0,0 +1,17 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/cursor-follow/cursor-follow.d.ts
+declare const cursorFollowVariants: (props?: ({
+  appearance?: "solid" | "invert" | "blur" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface CursorFollowProps extends ComponentPropsWithRef<"div">, VariantProps<typeof cursorFollowVariants> {
+  /** Hides the system cursor inside the container. Off by default. */
+  hideCursor?: boolean;
+  /** Classes for the follower. */
+  followerClassName?: string;
+}
+/** A container whose pointer is trailed by a springy dot that can show a label. */
+declare function CursorFollow({ className, followerClassName, appearance, hideCursor, children, onPointerEnter, onPointerMove, onPointerLeave, onPointerOver, ...props }: CursorFollowProps): import("react").JSX.Element;
+//#endregion
+export { CursorFollow, CursorFollowProps, cursorFollowVariants };
+//# sourceMappingURL=cursor-follow.d.ts.map

package/dist/components/cursor-follow/cursor-follow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cursor-follow.d.ts","names":[],"sources":["../../../src/components/cursor-follow/cursor-follow.tsx"],"mappings":";;;cA+BM,uBAAoB;;6CAoBzB;UAqBgB,0BACP,8BAA8B,oBAAoB;;EAE1D;;EAEA;;;iBAIc,eACd,WACA,mBACA,YACA,YACA,UACA,gBACA,eACA,gBACA,kBACG,SACF,oCAAiB,IAAA"}

package/dist/components/cursor-follow/cursor-follow.js

@@ -0,0 +1,116 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useState, useSyncExternalStore } from "react";
+import { MotionConfig, motion, useMotionValue, useSpring } from "motion/react";
+//#region src/components/cursor-follow/cursor-follow.tsx
+const cursorFollowVariants = cva(cn("flex h-4 max-w-4 min-w-4 -translate-x-1/2 -translate-y-1/2 items-center justify-center overflow-hidden rounded-full text-xs font-medium whitespace-nowrap shadow-lg", "transition-[height,max-width,padding,opacity,scale] duration-[var(--duration-normal)] ease-[var(--ease-in-out-quint)]", "data-[labelled]:h-10 data-[labelled]:max-w-80 data-[labelled]:scale-110 data-[labelled]:px-4", "data-[state=hidden]:scale-75 data-[state=hidden]:opacity-0"), {
+	variants: { 
+	/** `solid` is the source's filled dot; `invert` and `blur` treat what is behind it. */
+appearance: {
+		solid: "bg-primary text-primary-foreground",
+		invert: "border border-border text-foreground backdrop-invert",
+		blur: "border border-border bg-background/40 text-foreground backdrop-blur-sm"
+	} },
+	defaultVariants: { appearance: "solid" }
+});
+const SPRING = {
+	damping: 40,
+	stiffness: 350
+};
+const REDUCE = "(prefers-reduced-motion: reduce)";
+/** Live reduced-motion preference; false on the server, where nothing moves anyway. */
+function usePrefersReducedMotion() {
+	return useSyncExternalStore((notify) => {
+		const query = window.matchMedia(REDUCE);
+		query.addEventListener("change", notify);
+		return () => {
+			query.removeEventListener("change", notify);
+		};
+	}, () => window.matchMedia(REDUCE).matches, () => false);
+}
+/** A container whose pointer is trailed by a springy dot that can show a label. */
+function CursorFollow({ className, followerClassName, appearance, hideCursor = false, children, onPointerEnter, onPointerMove, onPointerLeave, onPointerOver, ...props }) {
+	const reduced = usePrefersReducedMotion();
+	const [visible, setVisible] = useState(false);
+	const [label, setLabel] = useState(null);
+	const x = useMotionValue(0);
+	const y = useMotionValue(0);
+	const springX = useSpring(x, SPRING);
+	const springY = useSpring(y, SPRING);
+	const tracks = (event) => !reduced && event.pointerType !== "touch";
+	function place(event, jump) {
+		const box = event.currentTarget.getBoundingClientRect();
+		const nextX = event.clientX - box.left;
+		const nextY = event.clientY - box.top;
+		x.set(nextX);
+		y.set(nextY);
+		if (jump) {
+			springX.jump(nextX);
+			springY.jump(nextY);
+		}
+	}
+	return /* @__PURE__ */ jsx(MotionConfig, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "cursor-follow",
+			className: cn("relative isolate", hideCursor && !reduced && "cursor-none [&_*]:cursor-none", className),
+			onPointerEnter: (event) => {
+				onPointerEnter?.(event);
+				if (!tracks(event)) return;
+				place(event, true);
+				setVisible(true);
+			},
+			onPointerMove: (event) => {
+				onPointerMove?.(event);
+				if (!tracks(event)) return;
+				place(event, !visible);
+				if (!visible) setVisible(true);
+			},
+			onPointerLeave: (event) => {
+				onPointerLeave?.(event);
+				setVisible(false);
+				setLabel(null);
+			},
+			onPointerOver: (event) => {
+				onPointerOver?.(event);
+				const target = event.target.closest("[data-cursor-text]");
+				setLabel(target?.getAttribute("data-cursor-text") || null);
+			},
+			...props,
+			children: [children, reduced ? null : /* @__PURE__ */ jsxs("div", {
+				"aria-hidden": "true",
+				"data-slot": "cursor-follow-layer",
+				className: "pointer-events-none absolute inset-0 z-10 overflow-hidden",
+				children: [/* @__PURE__ */ jsx(motion.div, {
+					className: "absolute",
+					style: {
+						left: 0,
+						top: 0,
+						x: springX,
+						y: springY
+					},
+					children: /* @__PURE__ */ jsx("div", {
+						"data-slot": "cursor-follow-follower",
+						"data-state": visible ? "visible" : "hidden",
+						"data-labelled": label ? "" : void 0,
+						className: cn(cursorFollowVariants({ appearance }), followerClassName),
+						children: label ? /* @__PURE__ */ jsx("span", {
+							className: "animate-[dowel-cursor-follow-in_var(--duration-normal)_var(--ease-out-quint)]",
+							children: label
+						}) : null
+					})
+				}), /* @__PURE__ */ jsx("style", {
+					href: "dowel-cursor-follow",
+					precedence: "dowel",
+					children: "@keyframes dowel-cursor-follow-in{from{opacity:0;filter:blur(8px)}}"
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { CursorFollow, cursorFollowVariants };
+
+//# sourceMappingURL=cursor-follow.js.map

package/dist/components/cursor-follow/cursor-follow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cursor-follow.js","names":[],"sources":["../../../src/components/cursor-follow/cursor-follow.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Cursor Follow (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { MotionConfig, motion, useMotionValue, useSpring } from \"motion/react\";\nimport {\n  useState,\n  useSyncExternalStore,\n  type ComponentPropsWithRef,\n  type PointerEvent,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A dot that trails the pointer inside a container, and swells into a label\n * over anything carrying `data-cursor-text`.\n *\n * Following the pointer with physics is one of the three things ADR 0014\n * allows `motion` for: the position is a spring chasing the pointer every\n * frame, which a CSS transition restarted on each move cannot do smoothly.\n * The dot's shape change is plain CSS.\n *\n * It is decoration and nothing else: aria-hidden, pointer-events none, never\n * the only place a label appears (put the same words in alt text or a visible\n * caption). It does not exist for touch — there is no pointer to follow — and\n * it does not render at all under reduced motion. The source hid the system\n * cursor; here that is opt-in, because a custom cursor that lags is harder to\n * aim with, and some people rely on a large system cursor.\n */\n\nconst cursorFollowVariants = cva(\n  cn(\n    \"flex h-4 max-w-4 min-w-4 -translate-x-1/2 -translate-y-1/2 items-center justify-center overflow-hidden rounded-full text-xs font-medium whitespace-nowrap shadow-lg\",\n    \"transition-[height,max-width,padding,opacity,scale] duration-[var(--duration-normal)] ease-[var(--ease-in-out-quint)]\",\n    \"data-[labelled]:h-10 data-[labelled]:max-w-80 data-[labelled]:scale-110 data-[labelled]:px-4\",\n    \"data-[state=hidden]:scale-75 data-[state=hidden]:opacity-0\",\n  ),\n  {\n    variants: {\n      /** `solid` is the source's filled dot; `invert` and `blur` treat what is behind it. */\n      appearance: {\n        solid: \"bg-primary text-primary-foreground\",\n        invert: \"border border-border text-foreground backdrop-invert\",\n        blur: \"border border-border bg-background/40 text-foreground backdrop-blur-sm\",\n      },\n    },\n    defaultVariants: {\n      appearance: \"solid\",\n    },\n  },\n);\n\nconst SPRING = { damping: 40, stiffness: 350 };\n\nconst REDUCE = \"(prefers-reduced-motion: reduce)\";\n\n/** Live reduced-motion preference; false on the server, where nothing moves anyway. */\nfunction usePrefersReducedMotion(): boolean {\n  return useSyncExternalStore(\n    (notify) => {\n      const query = window.matchMedia(REDUCE);\n      query.addEventListener(\"change\", notify);\n      return () => {\n        query.removeEventListener(\"change\", notify);\n      };\n    },\n    () => window.matchMedia(REDUCE).matches,\n    () => false,\n  );\n}\n\nexport interface CursorFollowProps\n  extends ComponentPropsWithRef<\"div\">, VariantProps<typeof cursorFollowVariants> {\n  /** Hides the system cursor inside the container. Off by default. */\n  hideCursor?: boolean;\n  /** Classes for the follower. */\n  followerClassName?: string;\n}\n\n/** A container whose pointer is trailed by a springy dot that can show a label. */\nexport function CursorFollow({\n  className,\n  followerClassName,\n  appearance,\n  hideCursor = false,\n  children,\n  onPointerEnter,\n  onPointerMove,\n  onPointerLeave,\n  onPointerOver,\n  ...props\n}: CursorFollowProps) {\n  const reduced = usePrefersReducedMotion();\n  const [visible, setVisible] = useState(false);\n  const [label, setLabel] = useState<string | null>(null);\n  const x = useMotionValue(0);\n  const y = useMotionValue(0);\n  const springX = useSpring(x, SPRING);\n  const springY = useSpring(y, SPRING);\n\n  const tracks = (event: PointerEvent<HTMLDivElement>) =>\n    !reduced && event.pointerType !== \"touch\";\n\n  function place(event: PointerEvent<HTMLDivElement>, jump: boolean) {\n    const box = event.currentTarget.getBoundingClientRect();\n    const nextX = event.clientX - box.left;\n    const nextY = event.clientY - box.top;\n    x.set(nextX);\n    y.set(nextY);\n    // Arriving, the dot appears under the pointer instead of flying in from\n    // wherever it last was.\n    if (jump) {\n      springX.jump(nextX);\n      springY.jump(nextY);\n    }\n  }\n\n  return (\n    <MotionConfig reducedMotion=\"user\">\n      <div\n        data-slot=\"cursor-follow\"\n        className={cn(\n          \"relative isolate\",\n          hideCursor && !reduced && \"cursor-none [&_*]:cursor-none\",\n          className,\n        )}\n        onPointerEnter={(event) => {\n          onPointerEnter?.(event);\n          if (!tracks(event)) return;\n          place(event, true);\n          setVisible(true);\n        }}\n        onPointerMove={(event) => {\n          onPointerMove?.(event);\n          if (!tracks(event)) return;\n          place(event, !visible);\n          if (!visible) setVisible(true);\n        }}\n        onPointerLeave={(event) => {\n          onPointerLeave?.(event);\n          setVisible(false);\n          setLabel(null);\n        }}\n        onPointerOver={(event) => {\n          onPointerOver?.(event);\n          const target = (event.target as Element).closest(\"[data-cursor-text]\");\n          setLabel(target?.getAttribute(\"data-cursor-text\") || null);\n        }}\n        {...props}\n      >\n        {children}\n        {reduced ? null : (\n          <div\n            aria-hidden=\"true\"\n            data-slot=\"cursor-follow-layer\"\n            className=\"pointer-events-none absolute inset-0 z-10 overflow-hidden\"\n          >\n            <motion.div\n              className=\"absolute\"\n              style={{ left: 0, top: 0, x: springX, y: springY }}\n            >\n              <div\n                data-slot=\"cursor-follow-follower\"\n                data-state={visible ? \"visible\" : \"hidden\"}\n                data-labelled={label ? \"\" : undefined}\n                className={cn(cursorFollowVariants({ appearance }), followerClassName)}\n              >\n                {label ? (\n                  <span className=\"animate-[dowel-cursor-follow-in_var(--duration-normal)_var(--ease-out-quint)]\">\n                    {label}\n                  </span>\n                ) : null}\n              </div>\n            </motion.div>\n            <style href=\"dowel-cursor-follow\" precedence=\"dowel\">\n              {\"@keyframes dowel-cursor-follow-in{from{opacity:0;filter:blur(8px)}}\"}\n            </style>\n          </div>\n        )}\n      </div>\n    </MotionConfig>\n  );\n}\n\nexport { cursorFollowVariants };\n"],"mappings":"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"}

package/dist/components/cursor-follow/index.d.ts

@@ -0,0 +1,2 @@
+import { CursorFollow, CursorFollowProps, cursorFollowVariants } from "./cursor-follow.js";
+export { CursorFollow, type CursorFollowProps, cursorFollowVariants };

package/dist/components/cursor-follow/index.js

@@ -0,0 +1,2 @@
+import { CursorFollow, cursorFollowVariants } from "./cursor-follow.js";
+export { CursorFollow, cursorFollowVariants };

package/dist/components/cursor-follow/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/cursor-follow/meta.ts
+const meta = defineMeta({
+	name: "cursor-follow",
+	title: "Cursor Follow",
+	description: "A dot that trails the pointer on a spring inside a container and swells into a label over marked elements.",
+	category: "effects",
+	status: "beta",
+	dependencies: ["class-variance-authority", "motion"],
+	registryDependencies: [],
+	files: ["cursor-follow.tsx"],
+	a11y: "Purely decorative: the follower is aria-hidden and ignores the pointer, and the container adds no role or tab stop (the source's role=\"application\" and tabIndex are dropped). A `data-cursor-text` label is shown only by the follower, so the same words must also be in the element's alt text or visible text. Nothing renders for touch input or under reduced motion. Hiding the system cursor is opt-in (`hideCursor`). The spring is `motion`, wrapped in MotionConfig reducedMotion=\"user\"."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/cursor-follow/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/cursor-follow/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"cursor-follow\",\n  title: \"Cursor Follow\",\n  description:\n    \"A dot that trails the pointer on a spring inside a container and swells into a label over marked elements.\",\n  category: \"effects\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\", \"motion\"],\n  registryDependencies: [],\n  files: [\"cursor-follow.tsx\"],\n  a11y:\n    \"Purely decorative: the follower is aria-hidden and ignores the pointer, and the container adds no role \" +\n    'or tab stop (the source\\'s role=\"application\" and tabIndex are dropped). A `data-cursor-text` label is ' +\n    \"shown only by the follower, so the same words must also be in the element's alt text or visible text. \" +\n    \"Nothing renders for touch input or under reduced motion. Hiding the system cursor is opt-in \" +\n    '(`hideCursor`). The spring is `motion`, wrapped in MotionConfig reducedMotion=\"user\".',\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,QAAQ;CACnD,sBAAsB,CAAC;CACvB,OAAO,CAAC,mBAAmB;CAC3B,MACE;AAKJ,CAAC"}

package/dist/components/data-table/data-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.d.ts","names":[],"sources":["../../../src/components/data-table/data-table.tsx"],"mappings":";;;UAqIiB,eACf,kBAAkB,eAClB,cAAc,iBACN,KAAK;EACb,OAAO,MAAc,WAAW;;EAEhC,QAAQ;;iBAGM,UAAU,kBAAkB,eAAe,cAAc,WACvE,OACA,OACA,cACG,SACF,eAAe,WAAW,yBAAM,IAAA;;;;;;;UAmElB;EACf;EACA;EACA,gBAAgB;;UAGD,mCAAmC;EAClD,QAAQ;EACR;;;;;;;;;iBAUc,wBACd,QACA,OACA,cACG,SACF,6CAA0B,IAAA;;UA6EZ;EACf;IACE;IACA;IACA;IACA,mBAAmB;;;UAIN;EACf,OAAO;EACP;;;iBAIc,uBAAuB,OAAO,SAAqB,4CAAyB,IAAA;;;;;;;;UAwC3E;EACf;IAAS;MAAc;MAAmB;;;EAC1C;EACA,cAAc;EACd;EACA;EACA;EACA;;UAGe;EACf,OAAO;EACP;;;;;;;;EAQA,SAAS;;;;;;;;;iBAUK,sBACd,OACA,WACA,UACC,2CAAwB,IAAA"}
+{"version":3,"file":"data-table.d.ts","names":[],"sources":["../../../src/components/data-table/data-table.tsx"],"mappings":";;;UAsIiB,eACf,kBAAkB,eAClB,cAAc,iBACN,KAAK;EACb,OAAO,MAAc,WAAW;;EAEhC,QAAQ;;iBAGM,UAAU,kBAAkB,eAAe,cAAc,WACvE,OACA,OACA,cACG,SACF,eAAe,WAAW,yBAAM,IAAA;;;;;;;UAmElB;EACf;EACA;EACA,gBAAgB;;UAGD,mCAAmC;EAClD,QAAQ;EACR;;;;;;;;;iBAUc,wBACd,QACA,OACA,cACG,SACF,6CAA0B,IAAA;;UA6EZ;EACf;IACE;IACA;IACA;IACA,mBAAmB;;;UAIN;EACf,OAAO;EACP;;;iBAIc,uBAAuB,OAAO,SAAqB,4CAAyB,IAAA;;;;;;;;UAwC3E;EACf;IAAS;MAAc;MAAmB;;;EAC1C;EACA,cAAc;EACd;EACA;EACA;EACA;;UAGe;EACf,OAAO;EACP;;;;;;;;EAQA,SAAS;;;;;;;;;iBAUK,sBACd,OACA,WACA,UACC,2CAAwB,IAAA"}

package/dist/components/data-table/data-table.js

@@ -1,4 +1,5 @@
 "use client";
+import { mirrorForDirection } from "../../lib/styles.js";
 import { cn } from "../../lib/utils.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select/select.js";
 import { Button } from "../button/button.js";
@@ -94,7 +95,7 @@ function DataTableColumnHeader({ column, title, className, ...props }) {
 			children: /* @__PURE__ */ jsxs(Button, {
 				variant: "ghost",
 				size: "sm",
-				className: "-ml-2 h-7 gap-1 px-2 font-medium text-muted-foreground data-[state=open]:bg-accent",
+				className: "-ms-2 h-7 gap-1 px-2 font-medium text-muted-foreground data-[state=open]:bg-accent",
 				children: [
 					title,
 					/* @__PURE__ */ jsx(SortIcon, { direction: sorted === false ? void 0 : sorted }),
@@ -224,6 +225,7 @@ function DataTablePagination({ table, pageSizes = [
 						viewBox: "0 0 24 24",
 						fill: "none",
 						"aria-hidden": "true",
+						className: mirrorForDirection,
 						children: /* @__PURE__ */ jsx("path", {
 							d: "m15 18-6-6 6-6",
 							stroke: "currentColor",
@@ -244,6 +246,7 @@ function DataTablePagination({ table, pageSizes = [
 						viewBox: "0 0 24 24",
 						fill: "none",
 						"aria-hidden": "true",
+						className: mirrorForDirection,
 						children: /* @__PURE__ */ jsx("path", {
 							d: "m9 18 6-6-6-6",
 							stroke: "currentColor",