@dowel-ui/react 0.7.0 → 0.8.0

package/dist/components/copy-button/copy-button.d.ts

@@ -0,0 +1,81 @@
+import { ButtonProps } from "../button/button.js";
+import "../button/index.js";
+import { VariantProps } from "class-variance-authority";
+import { ReactNode } from "react";
+//#region src/components/copy-button/copy-button.d.ts
+declare const copyButtonVariants: (props?: ({
+  tone?: "current" | "primary" | "success" | "warning" | "destructive" | "info" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type CopyButtonState = "idle" | "copied" | "error";
+interface CopyButtonBaseProps extends Omit<ButtonProps, "value" | "asChild">, VariantProps<typeof copyButtonVariants> {
+  /**
+   * What goes on the clipboard. Pass a function to read it at the moment of
+   * the click — the current contents of an editor, say — rather than at render.
+   * Required unless the deprecated `getText` is given.
+   */
+  value?: string | (() => string);
+  /**
+   * Replaces the label while the confirmation shows. On an icon-only button a
+   * string `copiedLabel` is announced instead, as Code Block's original did.
+   */
+  copiedLabel?: ReactNode;
+  /**
+   * Announced to assistive technology on success. Defaults to "Copied", or to
+   * a string `copiedLabel` on an icon-only button, where it is never shown.
+   */
+  copiedAnnouncement?: string;
+  /** Announced to assistive technology when the clipboard refuses the write. */
+  errorAnnouncement?: string;
+  /**
+   * How long the confirmation stays, in milliseconds (default 2000). A
+   * behaviour timer, not a duration.
+   */
+  timeout?: number;
+  /** The resting icon. Defaults to a copy glyph. */
+  icon?: ReactNode;
+  /** The confirmation icon. Defaults to a check. */
+  copiedIcon?: ReactNode;
+  /** Called with the copied text once the clipboard write has resolved. */
+  onCopied?: (text: string) => void;
+  /** Called when the clipboard is unavailable or refuses the write. */
+  onCopyError?: (error: unknown) => void;
+  /**
+   * Reads the text to copy at the moment of the click.
+   *
+   * @deprecated Use `value`, which also takes a function: `value={() => text}`.
+   */
+  getText?: () => string;
+  /**
+   * The accessible name of an icon-only button.
+   *
+   * @deprecated Use `aria-label`, or pass a visible label as children.
+   */
+  label?: string;
+  /**
+   * How long the confirmation stays, in milliseconds.
+   *
+   * @deprecated Use `timeout`.
+   */
+  resetAfter?: number;
+}
+/**
+ * Props for {@link CopyButton}. One source of text is required: `value`, or
+ * the deprecated `getText` kept from Code Block's original copy button.
+ */
+type CopyButtonProps = CopyButtonBaseProps & ({
+  value: string | (() => string);
+} | {
+  getText: () => string;
+});
+/**
+ * Copies a value to the clipboard and confirms it.
+ *
+ * The confirmation is state, not decoration: the icon morphs to a check, the
+ * label (if any) becomes `copiedLabel`, and a polite live region announces it,
+ * then everything reverts after `timeout`. A refused write reports through
+ * `onCopyError` and the error announcement — never the check.
+ */
+declare function CopyButton({ className, value, getText, label, resetAfter, children, copiedLabel, copiedAnnouncement, errorAnnouncement, timeout, icon, copiedIcon, tone, variant, size, onClick, onCopied, onCopyError, "aria-label": ariaLabel, ...props }: CopyButtonProps): import("react").JSX.Element;
+//#endregion
+export { CopyButton, CopyButtonProps, CopyButtonState, copyButtonVariants };
+//# sourceMappingURL=copy-button.d.ts.map

package/dist/components/copy-button/copy-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-button.d.ts","names":[],"sources":["../../../src/components/copy-button/copy-button.tsx"],"mappings":";;;;;cAoBM,qBAAkB;;6CAetB;KA0CU;UAEF,4BACA,KAAK,mCAAmC,oBAAoB;;;;;;EAMpE;;;;;EAKA,cAAc;;;;;EAKd;;EAEA;;;;;EAKA;;EAEA,OAAO;;EAEP,aAAa;;EAEb,YAAY;;EAEZ,eAAe;;;;;;EAMf;;;;;;EAMA;;;;;;EAMA;;;;;;KAOU,kBAAkB;EACzB;;EAAqC;;;;;;;;;;iBAU1B,aACd,WACA,OACA,SACA,OACA,YACA,UACA,aACA,oBACA,mBACA,SACA,MACA,YACA,MACA,SACA,MACA,SACA,UACA,2BACc,cACX,SACF,kCAAe,IAAA"}

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

@@ -0,0 +1,146 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../button/button.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useEffect, useRef, useState } from "react";
+//#region src/components/copy-button/copy-button.tsx
+const copyButtonVariants = cva("", {
+	variants: { 
+	/** Colour of the confirmation icon. The label keeps the button's colour. */
+tone: {
+		current: "",
+		primary: "text-primary",
+		success: "text-success",
+		warning: "text-warning",
+		destructive: "text-destructive",
+		info: "text-info"
+	} },
+	defaultVariants: { tone: "current" }
+});
+const layer = cn("col-start-1 row-start-1 inline-flex items-center justify-center", "transition-[opacity,scale] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)]");
+const shown = "scale-100 opacity-100";
+const hidden = "scale-50 opacity-0";
+function CopyIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("rect", {
+			x: "8",
+			y: "8",
+			width: "14",
+			height: "14",
+			rx: "2"
+		}), /* @__PURE__ */ jsx("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })]
+	});
+}
+function CheckIcon() {
+	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: "M20 6 9 17l-5-5" })
+	});
+}
+/**
+* Copies a value to the clipboard and confirms it.
+*
+* The confirmation is state, not decoration: the icon morphs to a check, the
+* label (if any) becomes `copiedLabel`, and a polite live region announces it,
+* then everything reverts after `timeout`. A refused write reports through
+* `onCopyError` and the error announcement — never the check.
+*/
+function CopyButton({ className, value, getText, label, resetAfter, children, copiedLabel = "Copied", copiedAnnouncement, errorAnnouncement = "Copy failed", timeout, icon, copiedIcon, tone, variant = "outline", size, onClick, onCopied, onCopyError, "aria-label": ariaLabel, ...props }) {
+	const [state, setState] = useState("idle");
+	const duration = timeout ?? resetAfter ?? 2e3;
+	const source = value ?? getText;
+	const missingSource = source === void 0;
+	useEffect(() => {
+		if (process.env.NODE_ENV === "production" || !missingSource) return;
+		console.warn("CopyButton: pass `value` so there is something to copy.");
+	}, [missingSource]);
+	const timer = useRef(null);
+	useEffect(() => () => {
+		if (timer.current) clearTimeout(timer.current);
+	}, []);
+	const settle = (next) => {
+		setState(next);
+		if (timer.current) clearTimeout(timer.current);
+		timer.current = setTimeout(() => {
+			setState("idle");
+		}, duration);
+	};
+	async function copy() {
+		try {
+			if (source === void 0) throw new Error("CopyButton has no `value` to copy.");
+			const text = typeof source === "function" ? source() : source;
+			await navigator.clipboard.writeText(text);
+			settle("copied");
+			onCopied?.(text);
+		} catch (error) {
+			settle("error");
+			onCopyError?.(error);
+		}
+	}
+	function handleClick(event) {
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		copy();
+	}
+	const copied = state === "copied";
+	const hasLabel = children !== void 0 && children !== null && children !== false;
+	const announcement = copiedAnnouncement ?? (!hasLabel && typeof copiedLabel === "string" ? copiedLabel : "Copied");
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Button, {
+		"data-slot": "copy-button",
+		"data-state": state,
+		variant,
+		size: size ?? (hasLabel ? "md" : "icon"),
+		"aria-label": ariaLabel ?? (hasLabel ? void 0 : label ?? "Copy"),
+		className,
+		onClick: handleClick,
+		...props,
+		children: [/* @__PURE__ */ jsxs("span", {
+			"data-slot": "copy-button-icon",
+			className: "grid",
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn(layer, copied ? hidden : shown),
+				children: icon ?? /* @__PURE__ */ jsx(CopyIcon, {})
+			}), /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn(layer, copyButtonVariants({ tone }), copied ? shown : hidden),
+				children: copiedIcon ?? /* @__PURE__ */ jsx(CheckIcon, {})
+			})]
+		}), hasLabel ? /* @__PURE__ */ jsxs("span", {
+			"data-slot": "copy-button-label",
+			className: "grid",
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": copied || void 0,
+				className: cn(layer, copied ? hidden : shown),
+				children
+			}), /* @__PURE__ */ jsx("span", {
+				"aria-hidden": !copied || void 0,
+				className: cn(layer, copied ? shown : hidden),
+				children: copiedLabel
+			})]
+		}) : null]
+	}), /* @__PURE__ */ jsx("span", {
+		role: "status",
+		"aria-live": "polite",
+		className: "sr-only",
+		children: copied ? announcement : state === "error" ? errorAnnouncement : ""
+	})] });
+}
+//#endregion
+export { CopyButton, copyButtonVariants };
+
+//# sourceMappingURL=copy-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"copy-button.js","names":[],"sources":["../../../src/components/copy-button/copy-button.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Button Copy (MIT, © 2024 Eduardo Calvo) and amicro \"Copy Hash\" (MIT, © 2026 Syed Subhan Uddin). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { useEffect, useRef, useState, type MouseEvent, type ReactNode } from \"react\";\n\nimport { Button, type ButtonProps } from \"@/components/button\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * The sources swap the icon on hover (amicro) or after a fake one-second\n * \"loading\" delay (SmoothUI). Here the swap reports what actually happened: it\n * morphs only once the clipboard write has resolved, and a refused write never\n * shows the check.\n *\n * Both icons, and both labels, share one grid cell. The button is always as\n * wide as its longer label, so \"Copy\" becoming \"Copied\" does not shove its\n * neighbours sideways, and the morph is a pure opacity/scale transition.\n */\n\nconst copyButtonVariants = cva(\"\", {\n  variants: {\n    /** Colour of the confirmation icon. The label keeps the button's colour. */\n    tone: {\n      current: \"\",\n      primary: \"text-primary\",\n      success: \"text-success\",\n      warning: \"text-warning\",\n      destructive: \"text-destructive\",\n      info: \"text-info\",\n    },\n  },\n  defaultVariants: {\n    tone: \"current\",\n  },\n});\n\nconst layer = cn(\n  \"col-start-1 row-start-1 inline-flex items-center justify-center\",\n  \"transition-[opacity,scale] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)]\",\n);\nconst shown = \"scale-100 opacity-100\";\nconst hidden = \"scale-50 opacity-0\";\n\nfunction CopyIcon() {\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      <rect x=\"8\" y=\"8\" width=\"14\" height=\"14\" rx=\"2\" />\n      <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\" />\n    </svg>\n  );\n}\n\nfunction CheckIcon() {\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=\"M20 6 9 17l-5-5\" />\n    </svg>\n  );\n}\n\nexport type CopyButtonState = \"idle\" | \"copied\" | \"error\";\n\ninterface CopyButtonBaseProps\n  extends Omit<ButtonProps, \"value\" | \"asChild\">, VariantProps<typeof copyButtonVariants> {\n  /**\n   * What goes on the clipboard. Pass a function to read it at the moment of\n   * the click — the current contents of an editor, say — rather than at render.\n   * Required unless the deprecated `getText` is given.\n   */\n  value?: string | (() => string);\n  /**\n   * Replaces the label while the confirmation shows. On an icon-only button a\n   * string `copiedLabel` is announced instead, as Code Block's original did.\n   */\n  copiedLabel?: ReactNode;\n  /**\n   * Announced to assistive technology on success. Defaults to \"Copied\", or to\n   * a string `copiedLabel` on an icon-only button, where it is never shown.\n   */\n  copiedAnnouncement?: string;\n  /** Announced to assistive technology when the clipboard refuses the write. */\n  errorAnnouncement?: string;\n  /**\n   * How long the confirmation stays, in milliseconds (default 2000). A\n   * behaviour timer, not a duration.\n   */\n  timeout?: number;\n  /** The resting icon. Defaults to a copy glyph. */\n  icon?: ReactNode;\n  /** The confirmation icon. Defaults to a check. */\n  copiedIcon?: ReactNode;\n  /** Called with the copied text once the clipboard write has resolved. */\n  onCopied?: (text: string) => void;\n  /** Called when the clipboard is unavailable or refuses the write. */\n  onCopyError?: (error: unknown) => void;\n  /**\n   * Reads the text to copy at the moment of the click.\n   *\n   * @deprecated Use `value`, which also takes a function: `value={() => text}`.\n   */\n  getText?: () => string;\n  /**\n   * The accessible name of an icon-only button.\n   *\n   * @deprecated Use `aria-label`, or pass a visible label as children.\n   */\n  label?: string;\n  /**\n   * How long the confirmation stays, in milliseconds.\n   *\n   * @deprecated Use `timeout`.\n   */\n  resetAfter?: number;\n}\n\n/**\n * Props for {@link CopyButton}. One source of text is required: `value`, or\n * the deprecated `getText` kept from Code Block's original copy button.\n */\nexport type CopyButtonProps = CopyButtonBaseProps &\n  ({ value: string | (() => string) } | { getText: () => string });\n\n/**\n * Copies a value to the clipboard and confirms it.\n *\n * The confirmation is state, not decoration: the icon morphs to a check, the\n * label (if any) becomes `copiedLabel`, and a polite live region announces it,\n * then everything reverts after `timeout`. A refused write reports through\n * `onCopyError` and the error announcement — never the check.\n */\nexport function CopyButton({\n  className,\n  value,\n  getText,\n  label,\n  resetAfter,\n  children,\n  copiedLabel = \"Copied\",\n  copiedAnnouncement,\n  errorAnnouncement = \"Copy failed\",\n  timeout,\n  icon,\n  copiedIcon,\n  tone,\n  variant = \"outline\",\n  size,\n  onClick,\n  onCopied,\n  onCopyError,\n  \"aria-label\": ariaLabel,\n  ...props\n}: CopyButtonProps) {\n  const [state, setState] = useState<CopyButtonState>(\"idle\");\n  const duration = timeout ?? resetAfter ?? 2000;\n  const source = value ?? getText;\n\n  const missingSource = source === undefined;\n  useEffect(() => {\n    if (process.env.NODE_ENV === \"production\" || !missingSource) return;\n    // The type requires one; this catches untyped callers before a click\n    // reports a failure with no obvious cause.\n    console.warn(\"CopyButton: pass `value` so there is something to copy.\");\n  }, [missingSource]);\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(\n    () => () => {\n      if (timer.current) clearTimeout(timer.current);\n    },\n    [],\n  );\n\n  const settle = (next: CopyButtonState) => {\n    setState(next);\n    if (timer.current) clearTimeout(timer.current);\n    timer.current = setTimeout(() => {\n      setState(\"idle\");\n    }, duration);\n  };\n\n  async function copy() {\n    try {\n      if (source === undefined) throw new Error(\"CopyButton has no `value` to copy.\");\n      const text = typeof source === \"function\" ? source() : source;\n      // Called synchronously within the click, so the user activation that\n      // Safari requires for clipboard access is still live.\n      await navigator.clipboard.writeText(text);\n      settle(\"copied\");\n      onCopied?.(text);\n    } catch (error) {\n      // Refused, or no clipboard API outside a secure context. Saying so\n      // beats pretending it worked.\n      settle(\"error\");\n      onCopyError?.(error);\n    }\n  }\n\n  function handleClick(event: MouseEvent<HTMLButtonElement>) {\n    onClick?.(event);\n    if (event.defaultPrevented) return;\n    void copy();\n  }\n\n  const copied = state === \"copied\";\n  const hasLabel = children !== undefined && children !== null && children !== false;\n  // An icon-only button never shows copiedLabel, and Code Block's original\n  // copy button announced it, so a string one is what gets announced there.\n  const announcement =\n    copiedAnnouncement ??\n    (!hasLabel && typeof copiedLabel === \"string\" ? copiedLabel : \"Copied\");\n\n  return (\n    <>\n      <Button\n        data-slot=\"copy-button\"\n        data-state={state}\n        variant={variant}\n        size={size ?? (hasLabel ? \"md\" : \"icon\")}\n        aria-label={ariaLabel ?? (hasLabel ? undefined : (label ?? \"Copy\"))}\n        className={className}\n        onClick={handleClick}\n        {...props}\n      >\n        <span data-slot=\"copy-button-icon\" className=\"grid\">\n          <span aria-hidden=\"true\" className={cn(layer, copied ? hidden : shown)}>\n            {icon ?? <CopyIcon />}\n          </span>\n          <span\n            aria-hidden=\"true\"\n            className={cn(layer, copyButtonVariants({ tone }), copied ? shown : hidden)}\n          >\n            {copiedIcon ?? <CheckIcon />}\n          </span>\n        </span>\n        {hasLabel ? (\n          <span data-slot=\"copy-button-label\" className=\"grid\">\n            <span\n              aria-hidden={copied || undefined}\n              className={cn(layer, copied ? hidden : shown)}\n            >\n              {children}\n            </span>\n            <span\n              aria-hidden={!copied || undefined}\n              className={cn(layer, copied ? shown : hidden)}\n            >\n              {copiedLabel}\n            </span>\n          </span>\n        ) : null}\n      </Button>\n      {/* A sibling rather than a child, so the announcement never becomes part\n          of the button's accessible name. */}\n      <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {copied ? announcement : state === \"error\" ? errorAnnouncement : \"\"}\n      </span>\n    </>\n  );\n}\n\nexport { copyButtonVariants };\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { CopyButton, CopyButtonProps, CopyButtonState, copyButtonVariants } from "./copy-button.js";
+export { CopyButton, type CopyButtonProps, type CopyButtonState, copyButtonVariants };

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

@@ -0,0 +1,2 @@
+import { CopyButton, copyButtonVariants } from "./copy-button.js";
+export { CopyButton, copyButtonVariants };

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"}