@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/comment-bubble/comment-bubble.js

@@ -0,0 +1,174 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../avatar/avatar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+//#region src/components/comment-bubble/comment-bubble.tsx
+const COLLAPSED = 32;
+function initials(name) {
+	return name.split(/\s+/).map((part) => part.charAt(0)).join("").slice(0, 2).toUpperCase();
+}
+function Face({ author }) {
+	return /* @__PURE__ */ jsxs(Avatar, {
+		size: "xs",
+		className: "size-6",
+		children: [author.avatarUrl ? /* @__PURE__ */ jsx(AvatarImage, {
+			src: author.avatarUrl,
+			alt: ""
+		}) : null, /* @__PURE__ */ jsx(AvatarFallback, {
+			className: "text-[0.625rem]",
+			children: initials(author.name)
+		})]
+	});
+}
+/** An avatar pin that expands into a comment thread. */
+function CommentBubble({ className, comments, open: openProp, defaultOpen = false, onOpenChange, width = "11.25rem", onReply, replyLabel = "Reply", ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+	const open = openProp ?? uncontrolled;
+	const [height, setHeight] = useState(null);
+	const bubbleRef = useRef(null);
+	const threadRef = useRef(null);
+	const triggerRef = useRef(null);
+	const replyRef = useRef(null);
+	const restoreFocus = useRef(false);
+	const threadId = useId();
+	const first = comments[0];
+	function setOpen(next, restore = false) {
+		restoreFocus.current = restore;
+		if (openProp === void 0) setUncontrolled(next);
+		onOpenChange?.(next);
+	}
+	useLayoutEffect(() => {
+		const element = threadRef.current;
+		if (!element) return;
+		const measure = () => setHeight(element.offsetHeight || null);
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, []);
+	useEffect(() => {
+		if (open) replyRef.current?.focus();
+		else if (restoreFocus.current) {
+			restoreFocus.current = false;
+			triggerRef.current?.focus();
+		}
+	}, [open]);
+	useEffect(() => {
+		if (!open) return;
+		const onPointerDown = (event) => {
+			if (!bubbleRef.current?.contains(event.target)) setOpen(false);
+		};
+		document.addEventListener("pointerdown", onPointerDown);
+		return () => document.removeEventListener("pointerdown", onPointerDown);
+	});
+	function handleKeyDown(event) {
+		if (event.key === "Escape" && open) {
+			event.preventDefault();
+			setOpen(false, true);
+		}
+	}
+	function handleReply(event) {
+		event.preventDefault();
+		const field = replyRef.current;
+		const message = field.value.trim();
+		if (!message) return;
+		onReply?.(message);
+		field.value = "";
+	}
+	if (!first) return null;
+	const state = open ? "open" : "closed";
+	const extra = comments.length - 1;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "comment-bubble",
+		"data-state": state,
+		className: cn("relative size-8", className),
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: bubbleRef,
+			"data-slot": "comment-bubble-surface",
+			"data-state": state,
+			onKeyDown: handleKeyDown,
+			className: cn("absolute start-0 bottom-0 overflow-hidden rounded-2xl rounded-es-none bg-popover text-popover-foreground shadow-lg ring-1 ring-border", "transition-[width,height] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]", "data-[state=closed]:delay-[var(--duration-instant)]"),
+			style: {
+				width: open ? width : COLLAPSED,
+				height: open ? height ?? "auto" : COLLAPSED
+			},
+			children: [/* @__PURE__ */ jsx("button", {
+				ref: triggerRef,
+				type: "button",
+				"data-slot": "comment-bubble-trigger",
+				"data-state": state,
+				"aria-expanded": open,
+				"aria-controls": threadId,
+				"aria-label": `Comment by ${first.author.name}${extra > 0 ? `, ${String(extra)} ${extra === 1 ? "reply" : "replies"}` : ""}`,
+				onClick: () => setOpen(!open),
+				className: cn("absolute start-1 top-1 z-10 rounded-full", "transition-[top,inset-inline-start] duration-[var(--duration-slow)] ease-[var(--ease-overshoot)]", "data-[state=open]:start-3 data-[state=open]:top-3", focusRing),
+				children: /* @__PURE__ */ jsx(Face, { author: first.author })
+			}), /* @__PURE__ */ jsxs("div", {
+				ref: threadRef,
+				id: threadId,
+				role: "group",
+				"aria-label": `Comment thread by ${first.author.name}`,
+				"data-slot": "comment-bubble-thread",
+				"data-state": state,
+				inert: !open,
+				className: cn("absolute start-0 top-0 flex flex-col gap-2 py-3 ps-11 pe-4 text-[0.6875rem] leading-4 font-medium", "transition-[opacity,filter,visibility] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", "data-[state=open]:delay-[var(--duration-fast)]", "data-[state=closed]:invisible data-[state=closed]:opacity-0 data-[state=closed]:blur-[3px]"),
+				style: { width },
+				children: [/* @__PURE__ */ jsx("ol", {
+					className: "flex max-h-60 flex-col gap-2 overflow-y-auto",
+					children: comments.map((comment, index) => /* @__PURE__ */ jsxs("li", {
+						className: "flex gap-2",
+						children: [index > 0 ? /* @__PURE__ */ jsx("span", {
+							className: "-ms-8 shrink-0",
+							children: /* @__PURE__ */ jsx(Face, { author: comment.author })
+						}) : null, /* @__PURE__ */ jsxs("div", {
+							className: "flex min-w-0 flex-col gap-0.5",
+							children: [/* @__PURE__ */ jsxs("p", {
+								className: "flex flex-wrap gap-x-1",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "font-semibold text-foreground",
+									children: comment.author.name
+								}), comment.timestamp ? /* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground",
+									children: comment.timestamp
+								}) : null]
+							}), /* @__PURE__ */ jsx("p", {
+								className: "text-foreground",
+								children: comment.message
+							})]
+						})]
+					}, comment.id))
+				}), onReply ? /* @__PURE__ */ jsxs("form", {
+					onSubmit: handleReply,
+					className: "flex items-center gap-1",
+					children: [/* @__PURE__ */ jsx("input", {
+						ref: replyRef,
+						type: "text",
+						"aria-label": replyLabel,
+						placeholder: `${replyLabel}…`,
+						className: cn("min-w-0 flex-1 rounded-md bg-muted px-2 py-1 text-foreground placeholder:text-muted-foreground", focusRing)
+					}), /* @__PURE__ */ jsx("button", {
+						type: "submit",
+						"aria-label": "Send reply",
+						className: cn("flex size-6 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground", focusRing),
+						children: /* @__PURE__ */ jsx("svg", {
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: 2.5,
+							"aria-hidden": "true",
+							className: "size-3",
+							children: /* @__PURE__ */ jsx("path", { d: "M12 19V5M5 12l7-7 7 7" })
+						})
+					})]
+				}) : null]
+			})]
+		})
+	});
+}
+//#endregion
+export { CommentBubble };
+
+//# sourceMappingURL=comment-bubble.js.map

package/dist/components/comment-bubble/comment-bubble.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"comment-bubble.js","names":[],"sources":["../../../src/components/comment-bubble/comment-bubble.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Figma Comment (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport {\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type FormEvent,\n  type KeyboardEvent,\n} from \"react\";\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/avatar\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A canvas comment pin: an avatar in a speech-bubble corner that grows into\n * the thread (and, with `onReply`, a composer). The source sprang width and\n * height with motion; here the thread is measured and the bubble's size is a\n * CSS transition, with the text blurring in just after the bubble opens.\n *\n * The avatar is a disclosure button. Escape collapses the thread and returns\n * focus to it; a press outside collapses it too.\n */\n\nexport interface CommentBubbleAuthor {\n  name: string;\n  /** Avatar image URL. Initials are shown without one, or while it loads. */\n  avatarUrl?: string;\n}\n\nexport interface CommentBubbleComment {\n  id: string;\n  author: CommentBubbleAuthor;\n  message: string;\n  /** Pre-formatted, e.g. \"Just now\" or \"2h\". */\n  timestamp?: string;\n}\n\nexport interface CommentBubbleProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  /** The thread. The first comment's author is the pin's avatar. */\n  comments: CommentBubbleComment[];\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** The expanded bubble's width. Numbers are pixels. */\n  width?: number | string;\n  /** Shows a reply composer; called with the trimmed reply. */\n  onReply?: (message: string) => void;\n  /** The reply field's accessible name and placeholder. */\n  replyLabel?: string;\n}\n\nconst COLLAPSED = 32;\n\nfunction initials(name: string) {\n  return name\n    .split(/\\s+/)\n    .map((part) => part.charAt(0))\n    .join(\"\")\n    .slice(0, 2)\n    .toUpperCase();\n}\n\nfunction Face({ author }: { author: CommentBubbleAuthor }) {\n  return (\n    <Avatar size=\"xs\" className=\"size-6\">\n      {author.avatarUrl ? <AvatarImage src={author.avatarUrl} alt=\"\" /> : null}\n      <AvatarFallback className=\"text-[0.625rem]\">{initials(author.name)}</AvatarFallback>\n    </Avatar>\n  );\n}\n\n/** An avatar pin that expands into a comment thread. */\nexport function CommentBubble({\n  className,\n  comments,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  width = \"11.25rem\",\n  onReply,\n  replyLabel = \"Reply\",\n  ...props\n}: CommentBubbleProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultOpen);\n  const open = openProp ?? uncontrolled;\n  const [height, setHeight] = useState<number | null>(null);\n  const bubbleRef = useRef<HTMLDivElement>(null);\n  const threadRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const replyRef = useRef<HTMLInputElement>(null);\n  const restoreFocus = useRef(false);\n  const threadId = useId();\n  const first = comments[0];\n\n  function setOpen(next: boolean, restore = false) {\n    restoreFocus.current = restore;\n    if (openProp === undefined) setUncontrolled(next);\n    onOpenChange?.(next);\n  }\n\n  useLayoutEffect(() => {\n    const element = threadRef.current;\n    if (!element) return;\n    const measure = () => setHeight(element.offsetHeight || null);\n    measure();\n    const observer = new ResizeObserver(measure);\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, []);\n\n  useEffect(() => {\n    if (open) {\n      replyRef.current?.focus();\n    } else if (restoreFocus.current) {\n      restoreFocus.current = false;\n      triggerRef.current?.focus();\n    }\n  }, [open]);\n\n  useEffect(() => {\n    if (!open) return;\n    const onPointerDown = (event: PointerEvent) => {\n      if (!bubbleRef.current?.contains(event.target as Node)) setOpen(false);\n    };\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    return () => document.removeEventListener(\"pointerdown\", onPointerDown);\n  });\n\n  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    if (event.key === \"Escape\" && open) {\n      event.preventDefault();\n      setOpen(false, true);\n    }\n  }\n\n  function handleReply(event: FormEvent<HTMLFormElement>) {\n    event.preventDefault();\n    const field = replyRef.current!;\n    const message = field.value.trim();\n    if (!message) return;\n    onReply?.(message);\n    field.value = \"\";\n  }\n\n  if (!first) return null;\n  const state = open ? \"open\" : \"closed\";\n  const extra = comments.length - 1;\n\n  return (\n    <div\n      data-slot=\"comment-bubble\"\n      data-state={state}\n      className={cn(\"relative size-8\", className)}\n      {...props}\n    >\n      {/* Escape bubbles up from the thread's controls; the surface itself is not a control. */}\n      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n      <div\n        ref={bubbleRef}\n        data-slot=\"comment-bubble-surface\"\n        data-state={state}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          \"absolute start-0 bottom-0 overflow-hidden rounded-2xl rounded-es-none bg-popover text-popover-foreground shadow-lg ring-1 ring-border\",\n          \"transition-[width,height] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]\",\n          \"data-[state=closed]:delay-[var(--duration-instant)]\",\n        )}\n        style={{\n          width: open ? width : COLLAPSED,\n          height: open ? (height ?? \"auto\") : COLLAPSED,\n        }}\n      >\n        <button\n          ref={triggerRef}\n          type=\"button\"\n          data-slot=\"comment-bubble-trigger\"\n          data-state={state}\n          aria-expanded={open}\n          aria-controls={threadId}\n          aria-label={`Comment by ${first.author.name}${extra > 0 ? `, ${String(extra)} ${extra === 1 ? \"reply\" : \"replies\"}` : \"\"}`}\n          onClick={() => setOpen(!open)}\n          className={cn(\n            \"absolute start-1 top-1 z-10 rounded-full\",\n            \"transition-[top,inset-inline-start] duration-[var(--duration-slow)] ease-[var(--ease-overshoot)]\",\n            \"data-[state=open]:start-3 data-[state=open]:top-3\",\n            focusRing,\n          )}\n        >\n          <Face author={first.author} />\n        </button>\n        <div\n          ref={threadRef}\n          id={threadId}\n          role=\"group\"\n          aria-label={`Comment thread by ${first.author.name}`}\n          data-slot=\"comment-bubble-thread\"\n          data-state={state}\n          inert={!open}\n          className={cn(\n            \"absolute start-0 top-0 flex flex-col gap-2 py-3 ps-11 pe-4 text-[0.6875rem] leading-4 font-medium\",\n            \"transition-[opacity,filter,visibility] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n            \"data-[state=open]:delay-[var(--duration-fast)]\",\n            \"data-[state=closed]:invisible data-[state=closed]:opacity-0 data-[state=closed]:blur-[3px]\",\n          )}\n          style={{ width }}\n        >\n          <ol className=\"flex max-h-60 flex-col gap-2 overflow-y-auto\">\n            {comments.map((comment, index) => (\n              <li key={comment.id} className=\"flex gap-2\">\n                {index > 0 ? (\n                  <span className=\"-ms-8 shrink-0\">\n                    <Face author={comment.author} />\n                  </span>\n                ) : null}\n                <div className=\"flex min-w-0 flex-col gap-0.5\">\n                  <p className=\"flex flex-wrap gap-x-1\">\n                    <span className=\"font-semibold text-foreground\">{comment.author.name}</span>\n                    {comment.timestamp ? (\n                      <span className=\"text-muted-foreground\">{comment.timestamp}</span>\n                    ) : null}\n                  </p>\n                  <p className=\"text-foreground\">{comment.message}</p>\n                </div>\n              </li>\n            ))}\n          </ol>\n          {onReply ? (\n            <form onSubmit={handleReply} className=\"flex items-center gap-1\">\n              <input\n                ref={replyRef}\n                type=\"text\"\n                aria-label={replyLabel}\n                placeholder={`${replyLabel}…`}\n                className={cn(\n                  \"min-w-0 flex-1 rounded-md bg-muted px-2 py-1 text-foreground placeholder:text-muted-foreground\",\n                  focusRing,\n                )}\n              />\n              <button\n                type=\"submit\"\n                aria-label=\"Send reply\"\n                className={cn(\n                  \"flex size-6 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground\",\n                  focusRing,\n                )}\n              >\n                <svg\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth={2.5}\n                  aria-hidden=\"true\"\n                  className=\"size-3\"\n                >\n                  <path d=\"M12 19V5M5 12l7-7 7 7\" />\n                </svg>\n              </button>\n            </form>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/comment-bubble/index.d.ts

@@ -0,0 +1,2 @@
+import { CommentBubble, CommentBubbleAuthor, CommentBubbleComment, CommentBubbleProps } from "./comment-bubble.js";
+export { CommentBubble, type CommentBubbleAuthor, type CommentBubbleComment, type CommentBubbleProps };

package/dist/components/comment-bubble/index.js

@@ -0,0 +1,2 @@
+import { CommentBubble } from "./comment-bubble.js";
+export { CommentBubble };

package/dist/components/comment-bubble/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/comment-bubble/meta.ts
+const meta = defineMeta({
+	name: "comment-bubble",
+	title: "Comment Bubble",
+	description: "A canvas comment pin — an avatar in a speech-bubble corner that grows into the thread and a reply composer.",
+	category: "display",
+	status: "beta",
+	dependencies: [],
+	registryDependencies: ["avatar"],
+	files: ["comment-bubble.tsx"],
+	a11y: "The avatar is a disclosure button (\"Comment by <name>, N replies\") with aria-expanded and aria-controls. The thread is a labelled group and an ordered list; while collapsed it is invisible and inert. Opening moves focus to the reply field when there is one; Escape collapses the thread and returns focus to the avatar; a press outside collapses it. The reply field and send button are named. The grow and blur stop under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/comment-bubble/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/comment-bubble/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"comment-bubble\",\n  title: \"Comment Bubble\",\n  description:\n    \"A canvas comment pin — an avatar in a speech-bubble corner that grows into the thread and a reply composer.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [],\n  registryDependencies: [\"avatar\"],\n  files: [\"comment-bubble.tsx\"],\n  a11y:\n    'The avatar is a disclosure button (\"Comment by <name>, N replies\") with aria-expanded and aria-controls. ' +\n    \"The thread is a labelled group and an ordered list; while collapsed it is invisible and inert. Opening moves \" +\n    \"focus to the reply field when there is one; Escape collapses the thread and returns focus to the avatar; a \" +\n    \"press outside collapses it. The reply field and send button are named. The grow and blur stop under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC,QAAQ;CAC/B,OAAO,CAAC,oBAAoB;CAC5B,MACE;AAIJ,CAAC"}

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

@@ -0,0 +1,49 @@
+import { ContextMenu } from "radix-ui";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/context-menu/context-menu.d.ts
+/**
+ * A menu of actions opened at the pointer by a secondary click or a long press.
+ *
+ * The parts and their props mirror DropdownMenu exactly, so a menu can move
+ * between the two by renaming its imports. It is never the only way to reach
+ * an action: a context menu is invisible until summoned, so what it offers
+ * should also live somewhere visible. Keyboard users open it with Shift+F10
+ * or the Menu key, which needs the trigger to be focusable.
+ *
+ * The source's spring is CSS: the surface pops from the pointer with a slight
+ * overshoot, and its items drop in with a 20ms stagger. Both are decoration
+ * and stop under reduced motion; closing uses the shared quick float-out.
+ */
+declare const ContextMenu$1: import("react").FC<ContextMenu.ContextMenuProps>;
+declare const ContextMenuTrigger: import("react").ForwardRefExoticComponent<ContextMenu.ContextMenuTriggerProps & import("react").RefAttributes<HTMLSpanElement>>;
+declare const ContextMenuGroup: import("react").ForwardRefExoticComponent<ContextMenu.ContextMenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const ContextMenuPortal: import("react").FC<ContextMenu.ContextMenuPortalProps>;
+declare const ContextMenuSub: import("react").FC<ContextMenu.ContextMenuSubProps>;
+declare const ContextMenuRadioGroup: import("react").ForwardRefExoticComponent<ContextMenu.ContextMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+type ContextMenuContentProps = ComponentPropsWithRef<typeof ContextMenu.Content>;
+declare function ContextMenuContent({ className, ...props }: ContextMenuContentProps): import("react").JSX.Element;
+interface ContextMenuItemProps extends ComponentPropsWithRef<typeof ContextMenu.Item> {
+  /** Styles the item as destructive. Pair with a label that says what is destroyed. */
+  variant?: "default" | "destructive";
+  /** Indents the item to align with items that have a leading indicator. */
+  inset?: boolean;
+}
+declare function ContextMenuItem({ className, variant, inset, ...props }: ContextMenuItemProps): import("react").JSX.Element;
+declare function ContextMenuCheckboxItem({ className, children, ...props }: ComponentPropsWithRef<typeof ContextMenu.CheckboxItem>): import("react").JSX.Element;
+declare function ContextMenuRadioItem({ className, children, ...props }: ComponentPropsWithRef<typeof ContextMenu.RadioItem>): import("react").JSX.Element;
+interface ContextMenuLabelProps extends ComponentPropsWithRef<typeof ContextMenu.Label> {
+  inset?: boolean;
+}
+declare function ContextMenuLabel({ className, inset, ...props }: ContextMenuLabelProps): import("react").JSX.Element;
+declare function ContextMenuSeparator({ className, ...props }: ComponentPropsWithRef<typeof ContextMenu.Separator>): import("react").JSX.Element;
+/** Keyboard hint. aria-hidden because the shortcut is decoration here — bind it
+ * for real at the application level. */
+declare function ContextMenuShortcut({ className, ...props }: ComponentPropsWithRef<"span">): import("react").JSX.Element;
+interface ContextMenuSubTriggerProps extends ComponentPropsWithRef<typeof ContextMenu.SubTrigger> {
+  inset?: boolean;
+}
+declare function ContextMenuSubTrigger({ className, inset, children, ...props }: ContextMenuSubTriggerProps): import("react").JSX.Element;
+declare function ContextMenuSubContent({ className, ...props }: ComponentPropsWithRef<typeof ContextMenu.SubContent>): import("react").JSX.Element;
+//#endregion
+export { ContextMenu$1 as ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuContentProps, ContextMenuGroup, ContextMenuItem, ContextMenuItemProps, ContextMenuLabel, ContextMenuLabelProps, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuSubTriggerProps, ContextMenuTrigger };
+//# sourceMappingURL=context-menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.d.ts","names":[],"sources":["../../../src/components/context-menu/context-menu.tsx"],"mappings":";;;;;;;;;;;;;;;;cAsBa,+BAAW,GAAA,YAAA;cACX,oCAAkB,0BAAA,YAAA,0CAAA,cAAA;cAClB,kCAAgB,0BAAA,YAAA,wCAAA,cAAA;cAChB,mCAAiB,GAAA,YAAA;cACjB,gCAAc,GAAA,YAAA;cACd,uCAAqB,0BAAA,YAAA,6CAAA,cAAA;KAgDtB,0BAA0B,6BAC7B,YAAqB;iBAGd,qBAAqB,cAAc,SAAS,0CAAuB,IAAA;UAelE,6BAA6B,6BACrC,YAAqB;;EAG5B;;EAEA;;iBAGc,kBACd,WACA,SACA,UACG,SACF,uCAAoB,IAAA;iBAyCP,0BACd,WACA,aACG,SACF,6BAA6B,YAAqB,gCAAa,IAAA;iBAalD,uBACd,WACA,aACG,SACF,6BAA6B,YAAqB,6BAAU,IAAA;UAa9C,8BAA8B,6BACtC,YAAqB;EAE5B;;iBAGc,mBAAmB,WAAW,UAAU,SAAS,wCAAqB,IAAA;iBActE,uBACd,cACG,SACF,6BAA6B,YAAqB,6BAAU,IAAA;;;iBAY/C,sBAAsB,cAAc,SAAS,gDAA6B,IAAA;UAWzE,mCAAmC,6BAC3C,YAAqB;EAE5B;;iBAGc,wBACd,WACA,OACA,aACG,SACF,6CAA0B,IAAA;iBA0Bb,wBACd,cACG,SACF,6BAA6B,YAAqB,8BAAW,IAAA"}

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

@@ -0,0 +1,151 @@
+"use client";
+import { mirrorForDirection } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { ContextMenu } from "radix-ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/context-menu/context-menu.tsx
+/**
+* A menu of actions opened at the pointer by a secondary click or a long press.
+*
+* The parts and their props mirror DropdownMenu exactly, so a menu can move
+* between the two by renaming its imports. It is never the only way to reach
+* an action: a context menu is invisible until summoned, so what it offers
+* should also live somewhere visible. Keyboard users open it with Shift+F10
+* or the Menu key, which needs the trigger to be focusable.
+*
+* The source's spring is CSS: the surface pops from the pointer with a slight
+* overshoot, and its items drop in with a 20ms stagger. Both are decoration
+* and stop under reduced motion; closing uses the shared quick float-out.
+*/
+const ContextMenu$1 = ContextMenu.Root;
+const ContextMenuTrigger = ContextMenu.Trigger;
+const ContextMenuGroup = ContextMenu.Group;
+const ContextMenuPortal = ContextMenu.Portal;
+const ContextMenuSub = ContextMenu.Sub;
+const ContextMenuRadioGroup = ContextMenu.RadioGroup;
+const PREFIX = "dowel-context-menu";
+const STYLES = `
+@keyframes ${PREFIX}-in{from{opacity:0;transform:translateY(-4px) scale(.95)}}
+@keyframes ${PREFIX}-item-in{from{opacity:0;transform:translateY(-4px)}}
+${Array.from({ length: 11 }, (_, i) => `[data-slot$=context-menu-content]>:nth-child(${String(i + 2)}){animation-delay:calc(${String((i + 1) * 20)}ms * var(--motion-scale))}`).join("\n")}
+[data-slot$=context-menu-content]>:nth-child(n+13){animation-delay:calc(240ms * var(--motion-scale))}
+`;
+/** Shared surface styling for the root menu and every submenu. The keyframe
+* names are spelled out because Tailwind reads class names from the source. */
+const menuSurface = cn("z-[var(--z-popover)] min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-lg border border-border", "bg-popover p-1 text-popover-foreground shadow-lg outline-none", "max-h-[var(--radix-context-menu-content-available-height)]", "origin-[var(--radix-context-menu-content-transform-origin)]", "data-[state=closed]:animate-float-out", "data-[state=open]:animate-[dowel-context-menu-in_calc(250ms*var(--motion-scale))_var(--ease-overshoot)]", "data-[state=open]:[&>*]:animate-[dowel-context-menu-item-in_calc(250ms*var(--motion-scale))_var(--ease-overshoot)_both]");
+/** Shared item styling. Highlight follows data-highlighted, which the primitive
+* drives from both pointer and keyboard, so the two never disagree. */
+const menuItem = cn("relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none select-none", "transition-colors duration-[var(--duration-instant)]", "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground", "data-[disabled]:pointer-events-none data-[disabled]:opacity-55", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4");
+function Styles() {
+	return /* @__PURE__ */ jsx("style", {
+		href: PREFIX,
+		precedence: "dowel",
+		children: STYLES
+	});
+}
+function ContextMenuContent({ className, ...props }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Styles, {}), /* @__PURE__ */ jsx(ContextMenu.Portal, { children: /* @__PURE__ */ jsx(ContextMenu.Content, {
+		"data-slot": "context-menu-content",
+		className: cn(menuSurface, className),
+		...props
+	}) })] });
+}
+function ContextMenuItem({ className, variant = "default", inset, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.Item, {
+		"data-slot": "context-menu-item",
+		"data-variant": variant,
+		className: cn(menuItem, inset && "ps-8", variant === "destructive" && "text-destructive data-[highlighted]:bg-destructive/10 data-[highlighted]:text-destructive", className),
+		...props
+	});
+}
+/** Tick shown by checkbox and radio items. Decorative: the state is already in
+* aria-checked, so announcing it twice would be noise. */
+function ItemIndicator({ radio = false }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "pointer-events-none absolute start-2 grid size-4 place-items-center",
+		children: /* @__PURE__ */ jsx(ContextMenu.ItemIndicator, { children: radio ? /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-current" }) : /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 24 24",
+			fill: "none",
+			"aria-hidden": "true",
+			className: "size-3.5",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "m5 13 4 4L19 7",
+				stroke: "currentColor",
+				strokeWidth: "2.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		}) })
+	});
+}
+function ContextMenuCheckboxItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(ContextMenu.CheckboxItem, {
+		"data-slot": "context-menu-checkbox-item",
+		className: cn(menuItem, "ps-8", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(ItemIndicator, {}), children]
+	});
+}
+function ContextMenuRadioItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(ContextMenu.RadioItem, {
+		"data-slot": "context-menu-radio-item",
+		className: cn(menuItem, "ps-8", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(ItemIndicator, { radio: true }), children]
+	});
+}
+function ContextMenuLabel({ className, inset, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.Label, {
+		"data-slot": "context-menu-label",
+		className: cn("px-2 py-1.5 text-xs font-medium text-muted-foreground", inset && "ps-8", className),
+		...props
+	});
+}
+function ContextMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.Separator, {
+		"data-slot": "context-menu-separator",
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+}
+/** Keyboard hint. aria-hidden because the shortcut is decoration here — bind it
+* for real at the application level. */
+function ContextMenuShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "context-menu-shortcut",
+		"aria-hidden": "true",
+		className: cn("ms-auto text-2xs tracking-wide text-muted-foreground", className),
+		...props
+	});
+}
+function ContextMenuSubTrigger({ className, inset, children, ...props }) {
+	return /* @__PURE__ */ jsxs(ContextMenu.SubTrigger, {
+		"data-slot": "context-menu-sub-trigger",
+		className: cn(menuItem, "data-[state=open]:bg-accent", inset && "ps-8", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 24 24",
+			fill: "none",
+			"aria-hidden": "true",
+			className: cn("ms-auto size-3.5", mirrorForDirection),
+			children: /* @__PURE__ */ jsx("path", {
+				d: "m9 18 6-6-6-6",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		})]
+	});
+}
+function ContextMenuSubContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.Portal, { children: /* @__PURE__ */ jsx(ContextMenu.SubContent, {
+		"data-slot": "context-menu-sub-content",
+		className: cn(menuSurface, className),
+		...props
+	}) });
+}
+//#endregion
+export { ContextMenu$1 as ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };
+
+//# sourceMappingURL=context-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.js","names":["ContextMenu","ContextMenuPrimitive"],"sources":["../../../src/components/context-menu/context-menu.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Context Menu (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { mirrorForDirection } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A menu of actions opened at the pointer by a secondary click or a long press.\n *\n * The parts and their props mirror DropdownMenu exactly, so a menu can move\n * between the two by renaming its imports. It is never the only way to reach\n * an action: a context menu is invisible until summoned, so what it offers\n * should also live somewhere visible. Keyboard users open it with Shift+F10\n * or the Menu key, which needs the trigger to be focusable.\n *\n * The source's spring is CSS: the surface pops from the pointer with a slight\n * overshoot, and its items drop in with a 20ms stagger. Both are decoration\n * and stop under reduced motion; closing uses the shared quick float-out.\n */\nexport const ContextMenu = ContextMenuPrimitive.Root;\nexport const ContextMenuTrigger = ContextMenuPrimitive.Trigger;\nexport const ContextMenuGroup = ContextMenuPrimitive.Group;\nexport const ContextMenuPortal = ContextMenuPrimitive.Portal;\nexport const ContextMenuSub = ContextMenuPrimitive.Sub;\nexport const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;\n\nconst PREFIX = \"dowel-context-menu\";\n\n/** Stagger delays for the first dozen entries; later ones arrive with the twelfth. */\nconst STAGGER = Array.from(\n  { length: 11 },\n  (_, i) =>\n    `[data-slot$=context-menu-content]>:nth-child(${String(i + 2)}){animation-delay:calc(${String((i + 1) * 20)}ms * var(--motion-scale))}`,\n).join(\"\\n\");\n\nconst STYLES = `\n@keyframes ${PREFIX}-in{from{opacity:0;transform:translateY(-4px) scale(.95)}}\n@keyframes ${PREFIX}-item-in{from{opacity:0;transform:translateY(-4px)}}\n${STAGGER}\n[data-slot$=context-menu-content]>:nth-child(n+13){animation-delay:calc(240ms * var(--motion-scale))}\n`;\n\n/** Shared surface styling for the root menu and every submenu. The keyframe\n * names are spelled out because Tailwind reads class names from the source. */\nconst menuSurface = cn(\n  \"z-[var(--z-popover)] min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-lg border border-border\",\n  \"bg-popover p-1 text-popover-foreground shadow-lg outline-none\",\n  \"max-h-[var(--radix-context-menu-content-available-height)]\",\n  \"origin-[var(--radix-context-menu-content-transform-origin)]\",\n  \"data-[state=closed]:animate-float-out\",\n  \"data-[state=open]:animate-[dowel-context-menu-in_calc(250ms*var(--motion-scale))_var(--ease-overshoot)]\",\n  \"data-[state=open]:[&>*]:animate-[dowel-context-menu-item-in_calc(250ms*var(--motion-scale))_var(--ease-overshoot)_both]\",\n);\n\n/** Shared item styling. Highlight follows data-highlighted, which the primitive\n * drives from both pointer and keyboard, so the two never disagree. */\nconst menuItem = cn(\n  \"relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none select-none\",\n  \"transition-colors duration-[var(--duration-instant)]\",\n  \"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground\",\n  \"data-[disabled]:pointer-events-none data-[disabled]:opacity-55\",\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n);\n\nfunction Styles() {\n  return (\n    <style href={PREFIX} precedence=\"dowel\">\n      {STYLES}\n    </style>\n  );\n}\n\nexport type ContextMenuContentProps = ComponentPropsWithRef<\n  typeof ContextMenuPrimitive.Content\n>;\n\nexport function ContextMenuContent({ className, ...props }: ContextMenuContentProps) {\n  return (\n    <>\n      <Styles />\n      <ContextMenuPrimitive.Portal>\n        <ContextMenuPrimitive.Content\n          data-slot=\"context-menu-content\"\n          className={cn(menuSurface, className)}\n          {...props}\n        />\n      </ContextMenuPrimitive.Portal>\n    </>\n  );\n}\n\nexport interface ContextMenuItemProps extends ComponentPropsWithRef<\n  typeof ContextMenuPrimitive.Item\n> {\n  /** Styles the item as destructive. Pair with a label that says what is destroyed. */\n  variant?: \"default\" | \"destructive\";\n  /** Indents the item to align with items that have a leading indicator. */\n  inset?: boolean;\n}\n\nexport function ContextMenuItem({\n  className,\n  variant = \"default\",\n  inset,\n  ...props\n}: ContextMenuItemProps) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-variant={variant}\n      className={cn(\n        menuItem,\n        inset && \"ps-8\",\n        variant === \"destructive\" &&\n          \"text-destructive data-[highlighted]:bg-destructive/10 data-[highlighted]:text-destructive\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Tick shown by checkbox and radio items. Decorative: the state is already in\n * aria-checked, so announcing it twice would be noise. */\nfunction ItemIndicator({ radio = false }: { radio?: boolean }) {\n  return (\n    <span className=\"pointer-events-none absolute start-2 grid size-4 place-items-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        {radio ? (\n          <span className=\"size-2 rounded-full bg-current\" />\n        ) : (\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-3.5\">\n            <path\n              d=\"m5 13 4 4L19 7\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        )}\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n  );\n}\n\nexport function ContextMenuCheckboxItem({\n  className,\n  children,\n  ...props\n}: ComponentPropsWithRef<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(menuItem, \"ps-8\", className)}\n      {...props}\n    >\n      <ItemIndicator />\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  );\n}\n\nexport function ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: ComponentPropsWithRef<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(menuItem, \"ps-8\", className)}\n      {...props}\n    >\n      <ItemIndicator radio />\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  );\n}\n\nexport interface ContextMenuLabelProps extends ComponentPropsWithRef<\n  typeof ContextMenuPrimitive.Label\n> {\n  inset?: boolean;\n}\n\nexport function ContextMenuLabel({ className, inset, ...props }: ContextMenuLabelProps) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      className={cn(\n        \"px-2 py-1.5 text-xs font-medium text-muted-foreground\",\n        inset && \"ps-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function ContextMenuSeparator({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Keyboard hint. aria-hidden because the shortcut is decoration here — bind it\n * for real at the application level. */\nexport function ContextMenuShortcut({ className, ...props }: ComponentPropsWithRef<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      aria-hidden=\"true\"\n      className={cn(\"ms-auto text-2xs tracking-wide text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface ContextMenuSubTriggerProps extends ComponentPropsWithRef<\n  typeof ContextMenuPrimitive.SubTrigger\n> {\n  inset?: boolean;\n}\n\nexport function ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: ContextMenuSubTriggerProps) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      className={cn(menuItem, \"data-[state=open]:bg-accent\", inset && \"ps-8\", className)}\n      {...props}\n    >\n      {children}\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className={cn(\"ms-auto size-3.5\", mirrorForDirection)}\n      >\n        <path\n          d=\"m9 18 6-6-6-6\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    </ContextMenuPrimitive.SubTrigger>\n  );\n}\n\nexport function ContextMenuSubContent({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.SubContent\n        data-slot=\"context-menu-sub-content\"\n        className={cn(menuSurface, className)}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuContentProps, ContextMenuGroup, ContextMenuItem, ContextMenuItemProps, ContextMenuLabel, ContextMenuLabelProps, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuSubTriggerProps, ContextMenuTrigger } from "./context-menu.js";
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, type ContextMenuContentProps, ContextMenuGroup, ContextMenuItem, type ContextMenuItemProps, ContextMenuLabel, type ContextMenuLabelProps, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, type ContextMenuSubTriggerProps, ContextMenuTrigger };

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

@@ -0,0 +1,2 @@
+import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./context-menu.js";
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };

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

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/context-menu/meta.ts
+const meta = defineMeta({
+	name: "context-menu",
+	title: "Context Menu",
+	description: "A right-click menu that pops from the pointer with a spring and staggers its items in — same parts as Dropdown Menu.",
+	category: "overlay",
+	status: "beta",
+	dependencies: ["radix-ui"],
+	registryDependencies: [],
+	files: ["context-menu.tsx"],
+	a11y: "Opens on right-click, long press, Shift+F10 or the Menu key — the keyboard paths need a focusable trigger. Full menu keyboard model: arrows move, Home/End jump, typeahead searches, Escape closes and returns focus, Right/Left open and close submenus (mirrored in RTL). Checkbox and radio items expose aria-checked; shortcuts are aria-hidden hints. A context menu is invisible until summoned, so its actions should also be reachable elsewhere. The pop and stagger stop under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/context-menu/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"context-menu\",\n  title: \"Context Menu\",\n  description:\n    \"A right-click menu that pops from the pointer with a spring and staggers its items in — same parts as Dropdown Menu.\",\n  category: \"overlay\",\n  status: \"beta\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"context-menu.tsx\"],\n  a11y:\n    \"Opens on right-click, long press, Shift+F10 or the Menu key — the keyboard paths need a focusable \" +\n    \"trigger. Full menu keyboard model: arrows move, Home/End jump, typeahead searches, Escape closes and \" +\n    \"returns focus, Right/Left open and close submenus (mirrored in RTL). Checkbox and radio items expose \" +\n    \"aria-checked; shortcuts are aria-hidden hints. A context menu is invisible until summoned, so its \" +\n    \"actions should also be reachable elsewhere. The pop and stagger stop under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC;CACvB,OAAO,CAAC,kBAAkB;CAC1B,MACE;AAKJ,CAAC"}

package/dist/components/contribution-graph/contribution-graph.d.ts

@@ -0,0 +1,37 @@
+import { ComponentPropsWithRef } from "react";
+//#region src/components/contribution-graph/contribution-graph.d.ts
+interface ContributionDay {
+  /** Calendar date, `YYYY-MM-DD`. */
+  date: string;
+  count: number;
+  /** 0–4. Derived from `count` when omitted. */
+  level?: number;
+}
+declare const contributionGraphCellVariants: (props?: ({
+  level?: 0 | 1 | 2 | 3 | 4 | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface ContributionGraphProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+  /** One entry per day with activity. Missing days count as zero. */
+  data?: ContributionDay[];
+  /** The calendar year shown. Defaults to the current year. */
+  year?: number;
+  /** Locale for month, weekday and date names. */
+  locales?: Intl.LocalesArgument;
+  /** Show the Less → More legend. */
+  showLegend?: boolean;
+  /** Show a tooltip for the hovered or focused day. */
+  showTooltips?: boolean;
+  /** The grid's accessible name. Defaults to "N contributions in YEAR". */
+  label?: string;
+  /** Maps a count to a level 0–4. Defaults to quarters of the year's busiest day. */
+  getLevel?: (count: number, max: number) => number;
+  /** The text for one day, used as its accessible name and in the tooltip. */
+  formatCount?: (count: number) => string;
+  lessLabel?: string;
+  moreLabel?: string;
+}
+/** A year of activity as a keyboard-navigable heatmap grid. */
+declare function ContributionGraph({ className, data, year, locales, showLegend, showTooltips, label, getLevel, formatCount, lessLabel, moreLabel, ...props }: ContributionGraphProps): import("react").JSX.Element;
+//#endregion
+export { ContributionDay, ContributionGraph, ContributionGraphProps, contributionGraphCellVariants };
+//# sourceMappingURL=contribution-graph.d.ts.map

package/dist/components/contribution-graph/contribution-graph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contribution-graph.d.ts","names":[],"sources":["../../../src/components/contribution-graph/contribution-graph.tsx"],"mappings":";;UAoCiB;;EAEf;EACA;;EAEA;;cAGI,gCAA6B;;6CAWjC;UAKe,+BAA+B,KAAK;;EAEnD,OAAO;;EAEP;;EAEA,UAAU,KAAK;;EAEf;;EAEA;;EAEA;;EAEA,YAAY,eAAe;;EAE3B,eAAe;EACf;EACA;;;iBAqBc,oBACd,WACA,MACA,MACA,SACA,YACA,cACA,OACA,UACA,aACA,WACA,cACG,SACF,yCAAsB,IAAA"}