@refine-studio/ui 0.0.0 → 0.2.0

package/dist/components/combobox/combobox.js

@@ -0,0 +1,244 @@
+import { cn } from "../../lib/cn.js";
+import { RefineIconAddPlus, RefineIconCheck, RefineIconCloseSM, RefineIconSearchMagnifyingGlass } from "../../icons/refine-icons.js";
+import { Command as Command$1, CommandEmpty, CommandGroup, CommandItem, CommandList } from "../command-menu/command-menu.js";
+import { Popover, PopoverAnchor, PopoverContent } from "../popover/popover.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Command } from "cmdk";
+// src/components/combobox/combobox.tsx
+var SHELL_CLASS_NAME_BY_SIZE = {
+	lg: "h-control-lg text-body",
+	md: "h-control-md text-body-sm",
+	sm: "h-control-sm text-body-sm"
+};
+var CREATE_VALUE = "__combobox-create__";
+/**
+* Returns true when the query appears in the option's label, value, keywords or text hint, ignoring case.
+*/
+var matchesQuery = (option, query) => {
+	const needle = query.trim().toLowerCase();
+	if (!needle) return true;
+	return [
+		option.label,
+		option.value,
+		...option.keywords ?? [],
+		typeof option.hint === "string" ? option.hint : ""
+	].some((text) => {
+		return text.toLowerCase().includes(needle);
+	});
+};
+/**
+* Splits options into groups in the order each group first appears; options without a group share one unnamed group.
+*/
+var groupOptions = (options) => {
+	const groups = /* @__PURE__ */ new Map();
+	for (const option of options) {
+		const key = option.group ?? "";
+		groups.set(key, [...groups.get(key) ?? [], option]);
+	}
+	return [...groups.entries()];
+};
+/**
+* Picks one value from a long list by typing; arrows move, Enter picks, Escape closes, and `onCreate` adds a "Create" row for an unmatched query.
+*/
+var Combobox = ({ "aria-label": ariaLabel, className, createLabel = (query) => {
+	return `Create “${query}”`;
+}, disabled = false, emptyMessage = "Nothing matches.", leading = /* @__PURE__ */ jsx(RefineIconSearchMagnifyingGlass, {
+	"aria-hidden": true,
+	className: "size-4 shrink-0 text-muted-foreground"
+}), onCreate, onQueryChange, onValueChange, options, placeholder = "Search…", query: controlledQuery, renderOption, renderValue, size = "md", value }) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const [uncontrolledQuery, setUncontrolledQuery] = useState("");
+	const anchorRef = useRef(null);
+	const inputRef = useRef(null);
+	const isQueryControlled = controlledQuery !== void 0;
+	const query = isQueryControlled ? controlledQuery : uncontrolledQuery;
+	const selected = options.find((option) => {
+		return option.value === value;
+	});
+	const isShowingChip = !!selected && !isOpen && !query;
+	const visible = isQueryControlled ? options : options.filter((option) => {
+		return matchesQuery(option, query);
+	});
+	const trimmed = query.trim();
+	const canCreate = !!onCreate && !!trimmed && !options.some((option) => {
+		return option.label.toLowerCase() === trimmed.toLowerCase();
+	});
+	/**
+	* Writes the query to the caller when controlled, to local state otherwise.
+	*/
+	const setQuery = (next) => {
+		if (!isQueryControlled) setUncontrolledQuery(next);
+		onQueryChange?.(next);
+	};
+	/**
+	* Updates the query from typing and opens the list.
+	*/
+	const handleQueryChange = (next) => {
+		setQuery(next);
+		setIsOpen(true);
+	};
+	/**
+	* Picks an option, clears the query and closes the list.
+	*/
+	const handleSelect = (option) => {
+		onValueChange(option.value);
+		setQuery("");
+		setIsOpen(false);
+	};
+	/**
+	* Hands the trimmed query to `onCreate`, clears the query and closes the list.
+	*/
+	const handleCreate = () => {
+		onCreate?.(trimmed);
+		setQuery("");
+		setIsOpen(false);
+	};
+	/**
+	* Clears the picked value and puts the cursor back in the field.
+	*/
+	const handleClear = () => {
+		onValueChange(null);
+		setIsOpen(true);
+		requestAnimationFrame(() => {
+			inputRef.current?.focus();
+		});
+	};
+	/**
+	* Swaps the chip for the field so the user can search again.
+	*/
+	const handleEdit = () => {
+		setIsOpen(true);
+		requestAnimationFrame(() => {
+			inputRef.current?.focus();
+		});
+	};
+	/**
+	* Escape closes an open list, and on a closed list clears the query; cmdk handles arrows and Enter.
+	*/
+	const handleKeyDown = (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			if (isOpen) setIsOpen(false);
+			else setQuery("");
+			return;
+		}
+		if (event.key === "ArrowDown" && !isOpen) setIsOpen(true);
+	};
+	return /* @__PURE__ */ jsx(Command$1, {
+		className: cn("size-auto overflow-visible bg-transparent", className),
+		"data-slot": "combobox",
+		label: ariaLabel,
+		loop: true,
+		shouldFilter: false,
+		children: /* @__PURE__ */ jsxs(Popover, {
+			onOpenChange: setIsOpen,
+			open: isOpen && !disabled,
+			children: [/* @__PURE__ */ jsx(PopoverAnchor, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: cn("gap-2 px-3 flex w-full items-center rounded-control border border-input bg-card transition-colors", "focus-within:border-gem focus-within:ring-3 focus-within:ring-gem/20", disabled && "pointer-events-none opacity-45", SHELL_CLASS_NAME_BY_SIZE[size]),
+					"data-slot": "combobox-field",
+					ref: anchorRef,
+					children: [leading, isShowingChip ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+						className: "min-w-0 gap-2 flex flex-1 items-center rounded-inner text-left focus-ring",
+						"data-slot": "combobox-value",
+						disabled,
+						onClick: handleEdit,
+						type: "button",
+						children: renderValue ? renderValue(selected) : /* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: selected.label
+						})
+					}), /* @__PURE__ */ jsxs("button", {
+						className: "-mr-1 size-6 grid shrink-0 place-items-center rounded-inner text-muted-foreground focus-ring hover:bg-hover hover:text-foreground",
+						"data-slot": "combobox-clear",
+						disabled,
+						onClick: handleClear,
+						title: "Clear",
+						type: "button",
+						children: [/* @__PURE__ */ jsx(RefineIconCloseSM, {
+							"aria-hidden": true,
+							className: "size-4"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: "Clear"
+						})]
+					})] }) : /* @__PURE__ */ jsx(Command.Input, {
+						className: "min-w-0 h-full flex-1 bg-transparent outline-none placeholder:text-subtle",
+						"data-slot": "combobox-input",
+						disabled,
+						onFocus: () => {
+							setIsOpen(true);
+						},
+						onKeyDown: handleKeyDown,
+						onValueChange: handleQueryChange,
+						placeholder: selected ? selected.label : placeholder,
+						ref: inputRef,
+						value: query
+					})]
+				})
+			}), /* @__PURE__ */ jsx(PopoverContent, {
+				align: "start",
+				className: "min-w-64 p-0 w-(--radix-popover-trigger-width)",
+				"data-slot": "combobox-content",
+				onEscapeKeyDown: (event) => {
+					event.preventDefault();
+				},
+				onInteractOutside: (event) => {
+					if (anchorRef.current?.contains(event.target)) event.preventDefault();
+				},
+				onOpenAutoFocus: (event) => {
+					event.preventDefault();
+				},
+				sideOffset: 4,
+				children: /* @__PURE__ */ jsxs(CommandList, {
+					onMouseDown: (event) => {
+						event.preventDefault();
+					},
+					children: [
+						/* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage }),
+						groupOptions(visible).map(([heading, groupItems]) => {
+							return /* @__PURE__ */ jsx(CommandGroup, {
+								heading: heading || void 0,
+								children: groupItems.map((option) => {
+									const isSelected = option.value === value;
+									return /* @__PURE__ */ jsxs(CommandItem, {
+										"data-checked": isSelected || void 0,
+										disabled: option.disabled,
+										onSelect: () => {
+											handleSelect(option);
+										},
+										value: option.value,
+										children: [renderOption ? renderOption(option) : /* @__PURE__ */ jsxs(Fragment, { children: [option.hint ? /* @__PURE__ */ jsx("span", {
+											className: "shrink-0 font-mono text-caption text-muted-foreground",
+											children: option.hint
+										}) : null, /* @__PURE__ */ jsx("span", {
+											className: "min-w-0 flex-1 truncate",
+											children: option.label
+										})] }), isSelected ? /* @__PURE__ */ jsx(RefineIconCheck, {
+											"aria-hidden": true,
+											className: "ml-auto text-gem-ink"
+										}) : null]
+									}, option.value);
+								})
+							}, heading || "ungrouped");
+						}),
+						canCreate ? /* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsxs(CommandItem, {
+							"data-slot": "combobox-create",
+							onSelect: handleCreate,
+							value: CREATE_VALUE,
+							children: [/* @__PURE__ */ jsx(RefineIconAddPlus, { "aria-hidden": true }), /* @__PURE__ */ jsx("span", {
+								className: "min-w-0 flex-1 truncate",
+								children: createLabel(trimmed)
+							})]
+						}) }) : null
+					]
+				})
+			})]
+		})
+	});
+};
+export { Combobox };
+
+//# sourceMappingURL=combobox.js.map

package/dist/components/combobox/combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.js","names":["Command","_Fragment","CommandPrimitive"],"sources":["../../../src/components/combobox/combobox.tsx"],"sourcesContent":["import { Command as CommandPrimitive } from 'cmdk';\nimport { type KeyboardEvent, type ReactNode, useRef, useState } from 'react';\n\nimport {\n  RefineIconAddPlus,\n  RefineIconCheck,\n  RefineIconCloseSM,\n  RefineIconSearchMagnifyingGlass,\n} from '../../icons/refine-icons';\nimport { cn } from '../../lib/cn';\nimport { Command, CommandEmpty, CommandGroup, CommandItem, CommandList } from '../command-menu/command-menu';\nimport { Popover, PopoverAnchor, PopoverContent } from '../popover/popover';\n\nexport interface ComboboxOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n  group?: string;\n  hint?: ReactNode;\n  keywords?: string[];\n}\n\ntype ComboboxSize = 'lg' | 'md' | 'sm';\n\nconst SHELL_CLASS_NAME_BY_SIZE: Record<ComboboxSize, string> = {\n  lg: 'h-control-lg text-body',\n  md: 'h-control-md text-body-sm',\n  sm: 'h-control-sm text-body-sm',\n};\n\nconst CREATE_VALUE = '__combobox-create__';\n\ninterface ComboboxProps {\n  options: ComboboxOption[];\n  value: string | null;\n  onValueChange: (value: string | null) => void;\n  'aria-label'?: string;\n  className?: string;\n  createLabel?: (query: string) => ReactNode;\n  disabled?: boolean;\n  emptyMessage?: ReactNode;\n  leading?: ReactNode;\n  onCreate?: (query: string) => void;\n  onQueryChange?: (query: string) => void;\n  placeholder?: string;\n  query?: string;\n  renderOption?: (option: ComboboxOption) => ReactNode;\n  renderValue?: (option: ComboboxOption) => ReactNode;\n  size?: ComboboxSize;\n}\n\n/**\n * Returns true when the query appears in the option's label, value, keywords or text hint, ignoring case.\n */\nconst matchesQuery = (option: ComboboxOption, query: string) => {\n  const needle = query.trim().toLowerCase();\n  if (!needle) return true;\n  const haystack = [\n    option.label,\n    option.value,\n    ...(option.keywords ?? []),\n    typeof option.hint === 'string' ? option.hint : '',\n  ];\n  return haystack.some((text) => {\n    return text.toLowerCase().includes(needle);\n  });\n};\n\n/**\n * Splits options into groups in the order each group first appears; options without a group share one unnamed group.\n */\nconst groupOptions = (options: ComboboxOption[]) => {\n  const groups = new Map<string, ComboboxOption[]>();\n  for (const option of options) {\n    const key = option.group ?? '';\n    groups.set(key, [...(groups.get(key) ?? []), option]);\n  }\n  return [...groups.entries()];\n};\n\n/**\n * Picks one value from a long list by typing; arrows move, Enter picks, Escape closes, and `onCreate` adds a \"Create\" row for an unmatched query.\n */\nexport const Combobox = ({\n  'aria-label': ariaLabel,\n  className,\n  createLabel = (query) => {\n    return `Create “${query}”`;\n  },\n  disabled = false,\n  emptyMessage = 'Nothing matches.',\n  leading = <RefineIconSearchMagnifyingGlass aria-hidden className=\"size-4 shrink-0 text-muted-foreground\" />,\n  onCreate,\n  onQueryChange,\n  onValueChange,\n  options,\n  placeholder = 'Search…',\n  query: controlledQuery,\n  renderOption,\n  renderValue,\n  size = 'md',\n  value,\n}: ComboboxProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [uncontrolledQuery, setUncontrolledQuery] = useState('');\n  const anchorRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const isQueryControlled = controlledQuery !== undefined;\n  const query = isQueryControlled ? controlledQuery : uncontrolledQuery;\n  const selected = options.find((option) => {\n    return option.value === value;\n  });\n  const isShowingChip = !!selected && !isOpen && !query;\n  // A controlled query means the caller filters, often on the server, so the list shows options as given.\n  const visible = isQueryControlled\n    ? options\n    : options.filter((option) => {\n        return matchesQuery(option, query);\n      });\n  const trimmed = query.trim();\n  const canCreate =\n    !!onCreate &&\n    !!trimmed &&\n    !options.some((option) => {\n      return option.label.toLowerCase() === trimmed.toLowerCase();\n    });\n\n  /**\n   * Writes the query to the caller when controlled, to local state otherwise.\n   */\n  const setQuery = (next: string) => {\n    if (!isQueryControlled) setUncontrolledQuery(next);\n    onQueryChange?.(next);\n  };\n\n  /**\n   * Updates the query from typing and opens the list.\n   */\n  const handleQueryChange = (next: string) => {\n    setQuery(next);\n    setIsOpen(true);\n  };\n\n  /**\n   * Picks an option, clears the query and closes the list.\n   */\n  const handleSelect = (option: ComboboxOption) => {\n    onValueChange(option.value);\n    setQuery('');\n    setIsOpen(false);\n  };\n\n  /**\n   * Hands the trimmed query to `onCreate`, clears the query and closes the list.\n   */\n  const handleCreate = () => {\n    onCreate?.(trimmed);\n    setQuery('');\n    setIsOpen(false);\n  };\n\n  /**\n   * Clears the picked value and puts the cursor back in the field.\n   */\n  const handleClear = () => {\n    onValueChange(null);\n    setIsOpen(true);\n    requestAnimationFrame(() => {\n      inputRef.current?.focus();\n    });\n  };\n\n  /**\n   * Swaps the chip for the field so the user can search again.\n   */\n  const handleEdit = () => {\n    setIsOpen(true);\n    requestAnimationFrame(() => {\n      inputRef.current?.focus();\n    });\n  };\n\n  /**\n   * Escape closes an open list, and on a closed list clears the query; cmdk handles arrows and Enter.\n   */\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      if (isOpen) setIsOpen(false);\n      else setQuery('');\n      return;\n    }\n    if (event.key === 'ArrowDown' && !isOpen) setIsOpen(true);\n  };\n\n  return (\n    // cmdk names the field through its own label element, which outranks an aria-label on the input.\n    <Command\n      className={cn('size-auto overflow-visible bg-transparent', className)}\n      data-slot=\"combobox\"\n      label={ariaLabel}\n      loop\n      shouldFilter={false}\n    >\n      <Popover onOpenChange={setIsOpen} open={isOpen && !disabled}>\n        <PopoverAnchor asChild>\n          <div\n            className={cn(\n              'gap-2 px-3 flex w-full items-center rounded-control border border-input bg-card transition-colors',\n              'focus-within:border-gem focus-within:ring-3 focus-within:ring-gem/20',\n              disabled && 'pointer-events-none opacity-45',\n              SHELL_CLASS_NAME_BY_SIZE[size],\n            )}\n            data-slot=\"combobox-field\"\n            ref={anchorRef}\n          >\n            {leading}\n            {isShowingChip ? (\n              <>\n                <button\n                  className=\"min-w-0 gap-2 flex flex-1 items-center rounded-inner text-left focus-ring\"\n                  data-slot=\"combobox-value\"\n                  disabled={disabled}\n                  onClick={handleEdit}\n                  type=\"button\"\n                >\n                  {renderValue ? renderValue(selected) : <span className=\"truncate\">{selected.label}</span>}\n                </button>\n                <button\n                  className=\"-mr-1 size-6 grid shrink-0 place-items-center rounded-inner text-muted-foreground focus-ring hover:bg-hover hover:text-foreground\"\n                  data-slot=\"combobox-clear\"\n                  disabled={disabled}\n                  onClick={handleClear}\n                  title=\"Clear\"\n                  type=\"button\"\n                >\n                  <RefineIconCloseSM aria-hidden className=\"size-4\" />\n                  <span className=\"sr-only\">Clear</span>\n                </button>\n              </>\n            ) : (\n              <CommandPrimitive.Input\n                className=\"min-w-0 h-full flex-1 bg-transparent outline-none placeholder:text-subtle\"\n                data-slot=\"combobox-input\"\n                disabled={disabled}\n                onFocus={() => {\n                  setIsOpen(true);\n                }}\n                onKeyDown={handleKeyDown}\n                onValueChange={handleQueryChange}\n                placeholder={selected ? selected.label : placeholder}\n                ref={inputRef}\n                value={query}\n              />\n            )}\n          </div>\n        </PopoverAnchor>\n        <PopoverContent\n          align=\"start\"\n          className=\"min-w-64 p-0 w-(--radix-popover-trigger-width)\"\n          data-slot=\"combobox-content\"\n          // The field keeps focus while the list is open, so typing keeps filtering.\n          onEscapeKeyDown={(event) => {\n            event.preventDefault();\n          }}\n          onInteractOutside={(event) => {\n            if (anchorRef.current?.contains(event.target as Node)) event.preventDefault();\n          }}\n          onOpenAutoFocus={(event) => {\n            event.preventDefault();\n          }}\n          sideOffset={4}\n        >\n          <CommandList\n            // A mousedown on the list would blur the field and close the popover before the click lands.\n            onMouseDown={(event) => {\n              event.preventDefault();\n            }}\n          >\n            <CommandEmpty>{emptyMessage}</CommandEmpty>\n            {groupOptions(visible).map(([heading, groupItems]) => {\n              return (\n                <CommandGroup heading={heading || undefined} key={heading || 'ungrouped'}>\n                  {groupItems.map((option) => {\n                    const isSelected = option.value === value;\n                    return (\n                      <CommandItem\n                        data-checked={isSelected || undefined}\n                        disabled={option.disabled}\n                        key={option.value}\n                        onSelect={() => {\n                          handleSelect(option);\n                        }}\n                        value={option.value}\n                      >\n                        {renderOption ? (\n                          renderOption(option)\n                        ) : (\n                          <>\n                            {option.hint ? (\n                              <span className=\"shrink-0 font-mono text-caption text-muted-foreground\">\n                                {option.hint}\n                              </span>\n                            ) : null}\n                            <span className=\"min-w-0 flex-1 truncate\">{option.label}</span>\n                          </>\n                        )}\n                        {isSelected ? <RefineIconCheck aria-hidden className=\"ml-auto text-gem-ink\" /> : null}\n                      </CommandItem>\n                    );\n                  })}\n                </CommandGroup>\n              );\n            })}\n            {canCreate ? (\n              <CommandGroup>\n                <CommandItem data-slot=\"combobox-create\" onSelect={handleCreate} value={CREATE_VALUE}>\n                  <RefineIconAddPlus aria-hidden />\n                  <span className=\"min-w-0 flex-1 truncate\">{createLabel(trimmed)}</span>\n                </CommandItem>\n              </CommandGroup>\n            ) : null}\n          </CommandList>\n        </PopoverContent>\n      </Popover>\n    </Command>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,35 @@
+import { Command as CommandPrimitive } from 'cmdk';
+import type { ComponentProps } from 'react';
+import { Dialog } from '../dialog/dialog';
+/**
+ * Filters and navigates a list of commands with the keyboard; use it inline or inside `CommandMenu`.
+ */
+export declare const Command: ({ className, ...props }: ComponentProps<typeof CommandPrimitive>) => import("react").JSX.Element;
+interface CommandMenuProps extends ComponentProps<typeof Dialog> {
+    description?: string;
+    title?: string;
+}
+/**
+ * Wraps a `Command` palette in a dialog, the ⌘K pattern; the title and description are announced but not shown.
+ */
+export declare const CommandMenu: ({ children, description, title, ...props }: CommandMenuProps) => import("react").JSX.Element;
+/**
+ * Renders the search field with a leading magnifier.
+ */
+export declare const CommandInput: ({ className, ...props }: ComponentProps<typeof CommandPrimitive.Input>) => import("react").JSX.Element;
+export declare const CommandList: ({ className, ...props }: ComponentProps<typeof CommandPrimitive.List>) => import("react").JSX.Element;
+/**
+ * Shows when nothing matches the query.
+ */
+export declare const CommandEmpty: ({ className, ...props }: ComponentProps<typeof CommandPrimitive.Empty>) => import("react").JSX.Element;
+export declare const CommandGroup: ({ className, ...props }: ComponentProps<typeof CommandPrimitive.Group>) => import("react").JSX.Element;
+export declare const CommandSeparator: ({ className, ...props }: ComponentProps<typeof CommandPrimitive.Separator>) => import("react").JSX.Element;
+/**
+ * Runs a command; the highlighted item takes a gem tint.
+ */
+export declare const CommandItem: ({ className, ...props }: ComponentProps<typeof CommandPrimitive.Item>) => import("react").JSX.Element;
+/**
+ * Right-aligns a keyboard shortcut hint inside an item.
+ */
+export declare const CommandShortcut: ({ className, ...props }: ComponentProps<"span">) => import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,116 @@
+"use client";
+import { cn } from "../../lib/cn.js";
+import { RefineIconSearchMagnifyingGlass } from "../../icons/refine-icons.js";
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "../dialog/dialog.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Command } from "cmdk";
+// src/components/command-menu/command-menu.tsx
+/**
+* Filters and navigates a list of commands with the keyboard; use it inline or inside `CommandMenu`.
+*/
+var Command$1 = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Command, {
+		className: cn("flex size-full flex-col overflow-hidden bg-popover text-popover-foreground", className),
+		"data-slot": "command",
+		...props
+	});
+};
+/**
+* Wraps a `Command` palette in a dialog, the ⌘K pattern; the title and description are announced but not shown.
+*/
+var CommandMenu = ({ children, description = "Search for a command to run.", title = "Command palette", ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog, {
+		...props,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: "top-[20dvh] translate-y-0 p-0",
+			showClose: false,
+			size: "lg",
+			children: [
+				/* @__PURE__ */ jsx(DialogTitle, {
+					className: "sr-only",
+					children: title
+				}),
+				/* @__PURE__ */ jsx(DialogDescription, {
+					className: "sr-only",
+					children: description
+				}),
+				/* @__PURE__ */ jsx(Command$1, {
+					className: "max-h-[min(32rem,70dvh)]",
+					children
+				})
+			]
+		})
+	});
+};
+/**
+* Renders the search field with a leading magnifier.
+*/
+var CommandInput = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-3 border-b px-4",
+		"data-slot": "command-input-wrapper",
+		children: [/* @__PURE__ */ jsx(RefineIconSearchMagnifyingGlass, {
+			"aria-hidden": true,
+			className: "size-4 shrink-0 text-muted-foreground",
+			role: "presentation"
+		}), /* @__PURE__ */ jsx(Command.Input, {
+			className: cn("flex h-control-xl w-full bg-transparent text-body outline-none placeholder:text-subtle disabled:cursor-not-allowed disabled:opacity-45", className),
+			"data-slot": "command-input",
+			...props
+		})]
+	});
+};
+var CommandList = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Command.List, {
+		className: cn("max-h-96 scroll-py-2 overflow-x-hidden overflow-y-auto p-2", className),
+		"data-slot": "command-list",
+		...props
+	});
+};
+/**
+* Shows when nothing matches the query.
+*/
+var CommandEmpty = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Command.Empty, {
+		className: cn("py-10 text-center text-body-sm text-muted-foreground", className),
+		"data-slot": "command-empty",
+		...props
+	});
+};
+var CommandGroup = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Command.Group, {
+		className: cn("overflow-hidden py-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pt-2 [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:eyebrow [&_[cmdk-group-heading]]:text-subtle", className),
+		"data-slot": "command-group",
+		...props
+	});
+};
+var CommandSeparator = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Command.Separator, {
+		className: cn("-mx-2 my-1 h-px bg-border", className),
+		"data-slot": "command-separator",
+		...props
+	});
+};
+/**
+* Runs a command; the highlighted item takes a gem tint.
+*/
+var CommandItem = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Command.Item, {
+		className: cn("relative flex cursor-default items-center gap-3 rounded-control px-2.5 py-2 text-body-sm outline-none select-none", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", "data-[selected=true]:bg-gem-soft data-[selected=true]:text-foreground data-[selected=true]:[&_svg:not([class*=\"text-\"])]:text-gem-ink", "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-45", className),
+		"data-slot": "command-item",
+		...props
+	});
+};
+/**
+* Right-aligns a keyboard shortcut hint inside an item.
+*/
+var CommandShortcut = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("ml-auto font-mono text-caption tracking-wide text-subtle", className),
+		"data-slot": "command-shortcut",
+		...props
+	});
+};
+export { Command$1 as Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandMenu, CommandSeparator, CommandShortcut };
+
+//# sourceMappingURL=command-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"command-menu.js","names":["Command","CommandPrimitive"],"sources":["../../../src/components/command-menu/command-menu.tsx"],"sourcesContent":["'use client';\n\nimport { Command as CommandPrimitive } from 'cmdk';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { Dialog, DialogContent, DialogDescription, DialogTitle } from '../dialog/dialog';\nimport { RefineIconSearchMagnifyingGlass } from '../../icons/refine-icons';\n\n/**\n * Filters and navigates a list of commands with the keyboard; use it inline or inside `CommandMenu`.\n */\nexport const Command = ({ className, ...props }: ComponentProps<typeof CommandPrimitive>) => {\n  return (\n    <CommandPrimitive\n      className={cn('flex size-full flex-col overflow-hidden bg-popover text-popover-foreground', className)}\n      data-slot=\"command\"\n      {...props}\n    />\n  );\n};\n\ninterface CommandMenuProps extends ComponentProps<typeof Dialog> {\n  description?: string;\n  title?: string;\n}\n\n/**\n * Wraps a `Command` palette in a dialog, the ⌘K pattern; the title and description are announced but not shown.\n */\nexport const CommandMenu = ({\n  children,\n  description = 'Search for a command to run.',\n  title = 'Command palette',\n  ...props\n}: CommandMenuProps) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"top-[20dvh] translate-y-0 p-0\" showClose={false} size=\"lg\">\n        <DialogTitle className=\"sr-only\">{title}</DialogTitle>\n        <DialogDescription className=\"sr-only\">{description}</DialogDescription>\n        <Command className=\"max-h-[min(32rem,70dvh)]\">{children}</Command>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\n/**\n * Renders the search field with a leading magnifier.\n */\nexport const CommandInput = ({ className, ...props }: ComponentProps<typeof CommandPrimitive.Input>) => {\n  return (\n    <div className=\"flex items-center gap-3 border-b px-4\" data-slot=\"command-input-wrapper\">\n      <RefineIconSearchMagnifyingGlass\n        aria-hidden\n        className=\"size-4 shrink-0 text-muted-foreground\"\n        role=\"presentation\"\n      />\n      <CommandPrimitive.Input\n        className={cn(\n          'flex h-control-xl w-full bg-transparent text-body outline-none placeholder:text-subtle disabled:cursor-not-allowed disabled:opacity-45',\n          className,\n        )}\n        data-slot=\"command-input\"\n        {...props}\n      />\n    </div>\n  );\n};\n\nexport const CommandList = ({ className, ...props }: ComponentProps<typeof CommandPrimitive.List>) => {\n  return (\n    <CommandPrimitive.List\n      className={cn('max-h-96 scroll-py-2 overflow-x-hidden overflow-y-auto p-2', className)}\n      data-slot=\"command-list\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Shows when nothing matches the query.\n */\nexport const CommandEmpty = ({ className, ...props }: ComponentProps<typeof CommandPrimitive.Empty>) => {\n  return (\n    <CommandPrimitive.Empty\n      className={cn('py-10 text-center text-body-sm text-muted-foreground', className)}\n      data-slot=\"command-empty\"\n      {...props}\n    />\n  );\n};\n\nexport const CommandGroup = ({ className, ...props }: ComponentProps<typeof CommandPrimitive.Group>) => {\n  return (\n    <CommandPrimitive.Group\n      className={cn(\n        'overflow-hidden py-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pt-2 [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:eyebrow [&_[cmdk-group-heading]]:text-subtle',\n        className,\n      )}\n      data-slot=\"command-group\"\n      {...props}\n    />\n  );\n};\n\nexport const CommandSeparator = ({ className, ...props }: ComponentProps<typeof CommandPrimitive.Separator>) => {\n  return (\n    <CommandPrimitive.Separator\n      className={cn('-mx-2 my-1 h-px bg-border', className)}\n      data-slot=\"command-separator\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Runs a command; the highlighted item takes a gem tint.\n */\nexport const CommandItem = ({ className, ...props }: ComponentProps<typeof CommandPrimitive.Item>) => {\n  return (\n    <CommandPrimitive.Item\n      className={cn(\n        // base\n        'relative flex cursor-default items-center gap-3 rounded-control px-2.5 py-2 text-body-sm outline-none select-none',\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        // hover\n        'data-[selected=true]:bg-gem-soft data-[selected=true]:text-foreground data-[selected=true]:[&_svg:not([class*=\"text-\"])]:text-gem-ink',\n        // disabled\n        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-45',\n        className,\n      )}\n      data-slot=\"command-item\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Right-aligns a keyboard shortcut hint inside an item.\n */\nexport const CommandShortcut = ({ className, ...props }: ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn('ml-auto font-mono text-caption tracking-wide text-subtle', className)}\n      data-slot=\"command-shortcut\"\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AAYA,IAAaA,aAAW,EAAE,WAAW,GAAG,YAAqD;CAC3F,OACE,oBAACC,SAAD;EACE,WAAW,GAAG,8EAA8E,SAAS;EACrG,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAUA,IAAa,eAAe,EAC1B,UACA,cAAc,gCACd,QAAQ,mBACR,GAAG,YACmB;CACtB,OACE,oBAAC,QAAD;EAAQ,GAAI;EACV,UAAA,qBAAC,eAAD;GAAe,WAAU;GAAgC,WAAW;GAAO,MAAK;GAAhF,UAAA;IACE,oBAAC,aAAD;KAAa,WAAU;KAAW,UAAA;IAAmB,CAAA;IACrD,oBAAC,mBAAD;KAAmB,WAAU;KAAW,UAAA;IAA+B,CAAA;IACvE,oBAACD,WAAD;KAAS,WAAU;KAA4B;IAAkB,CAAA;GACpD;;CACT,CAAA;AAEZ;;;;AAKA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAA2D;CACtG,OACE,qBAAC,OAAD;EAAK,WAAU;EAAwC,aAAU;EAAjE,UAAA,CACE,oBAAC,iCAAD;GACE,eAAA;GACA,WAAU;GACV,MAAK;EACN,CAAA,GACD,oBAACC,QAAiB,OAAlB;GACE,WAAW,GACT,0IACA,SACF;GACA,aAAU;GACV,GAAI;EACL,CAAA,CACE;;AAET;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAA0D;CACpG,OACE,oBAACA,QAAiB,MAAlB;EACE,WAAW,GAAG,8DAA8D,SAAS;EACrF,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAKA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAA2D;CACtG,OACE,oBAACA,QAAiB,OAAlB;EACE,WAAW,GAAG,wDAAwD,SAAS;EAC/E,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAA2D;CACtG,OACE,oBAACA,QAAiB,OAAlB;EACE,WAAW,GACT,0MACA,SACF;EACA,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,oBAAoB,EAAE,WAAW,GAAG,YAA+D;CAC9G,OACE,oBAACA,QAAiB,WAAlB;EACE,WAAW,GAAG,6BAA6B,SAAS;EACpD,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAKA,IAAa,eAAe,EAAE,WAAW,GAAG,YAA0D;CACpG,OACE,oBAACA,QAAiB,MAAlB;EACE,WAAW,GAET,qHACA,yIAEA,2IAEA,4EACA,SACF;EACA,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAKA,IAAa,mBAAmB,EAAE,WAAW,GAAG,YAAoC;CAClF,OACE,oBAAC,QAAD;EACE,WAAW,GAAG,4DAA4D,SAAS;EACnF,aAAU;EACV,GAAI;CACL,CAAA;AAEL"}

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

@@ -0,0 +1,45 @@
+import type { VariantProps } from 'class-variance-authority';
+import { ContextMenu as ContextMenuPrimitive } from 'radix-ui';
+import type { ComponentProps } from 'react';
+import { menuItemVariants } from '../dropdown-menu/menu-styles';
+/**
+ * Holds the open state of a menu of actions opened by right-clicking or long-pressing its trigger area.
+ */
+export declare const ContextMenu: (props: ComponentProps<typeof ContextMenuPrimitive.Root>) => import("react").JSX.Element;
+export declare const ContextMenuTrigger: (props: ComponentProps<typeof ContextMenuPrimitive.Trigger>) => import("react").JSX.Element;
+export declare const ContextMenuGroup: (props: ComponentProps<typeof ContextMenuPrimitive.Group>) => import("react").JSX.Element;
+export declare const ContextMenuRadioGroup: (props: ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) => import("react").JSX.Element;
+export declare const ContextMenuSub: (props: ComponentProps<typeof ContextMenuPrimitive.Sub>) => import("react").JSX.Element;
+/**
+ * Portals the menu panel at the pointer.
+ */
+export declare const ContextMenuContent: ({ className, ...props }: ComponentProps<typeof ContextMenuPrimitive.Content>) => import("react").JSX.Element;
+type ContextMenuItemProps = ComponentProps<typeof ContextMenuPrimitive.Item> & VariantProps<typeof menuItemVariants>;
+/**
+ * Runs an action; the `danger` variant marks destructive ones.
+ */
+export declare const ContextMenuItem: ({ className, inset, variant, ...props }: ContextMenuItemProps) => import("react").JSX.Element;
+/**
+ * Toggles a setting and shows a check while it is on.
+ */
+export declare const ContextMenuCheckboxItem: ({ children, className, ...props }: ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) => import("react").JSX.Element;
+/**
+ * Picks one option of its radio group and marks it with a dot.
+ */
+export declare const ContextMenuRadioItem: ({ children, className, ...props }: ComponentProps<typeof ContextMenuPrimitive.RadioItem>) => import("react").JSX.Element;
+export declare const ContextMenuLabel: ({ className, inset, ...props }: ComponentProps<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean;
+}) => import("react").JSX.Element;
+export declare const ContextMenuSeparator: ({ className, ...props }: ComponentProps<typeof ContextMenuPrimitive.Separator>) => import("react").JSX.Element;
+/**
+ * Right-aligns a keyboard shortcut hint inside an item.
+ */
+export declare const ContextMenuShortcut: ({ className, ...props }: ComponentProps<"span">) => import("react").JSX.Element;
+/**
+ * Opens a nested menu and points at it with a chevron.
+ */
+export declare const ContextMenuSubTrigger: ({ children, className, inset, ...props }: ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}) => import("react").JSX.Element;
+export declare const ContextMenuSubContent: ({ className, ...props }: ComponentProps<typeof ContextMenuPrimitive.SubContent>) => import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,136 @@
+"use client";
+import { cn } from "../../lib/cn.js";
+import { RefineIconCheck, RefineIconChevronRight, RefineIconCircleFilled } from "../../icons/refine-icons.js";
+import { MENU_CONTENT_CLASS_NAME, MENU_INDICATOR_CLASS_NAME, MENU_INDICATOR_ITEM_CLASS_NAME, MENU_LABEL_CLASS_NAME, MENU_SEPARATOR_CLASS_NAME, MENU_SHORTCUT_CLASS_NAME, menuItemVariants } from "../dropdown-menu/menu-styles.js";
+import { ContextMenu } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/context-menu/context-menu.tsx
+/**
+* Holds the open state of a menu of actions opened by right-clicking or long-pressing its trigger area.
+*/
+var ContextMenu$1 = (props) => {
+	return /* @__PURE__ */ jsx(ContextMenu.Root, {
+		"data-slot": "context-menu",
+		...props
+	});
+};
+var ContextMenuTrigger = (props) => {
+	return /* @__PURE__ */ jsx(ContextMenu.Trigger, {
+		"data-slot": "context-menu-trigger",
+		...props
+	});
+};
+var ContextMenuGroup = (props) => {
+	return /* @__PURE__ */ jsx(ContextMenu.Group, {
+		"data-slot": "context-menu-group",
+		...props
+	});
+};
+var ContextMenuRadioGroup = (props) => {
+	return /* @__PURE__ */ jsx(ContextMenu.RadioGroup, {
+		"data-slot": "context-menu-radio-group",
+		...props
+	});
+};
+var ContextMenuSub = (props) => {
+	return /* @__PURE__ */ jsx(ContextMenu.Sub, {
+		"data-slot": "context-menu-sub",
+		...props
+	});
+};
+/**
+* Portals the menu panel at the pointer.
+*/
+var ContextMenuContent = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(ContextMenu.Portal, { children: /* @__PURE__ */ jsx(ContextMenu.Content, {
+		className: cn(MENU_CONTENT_CLASS_NAME, "origin-(--radix-context-menu-content-transform-origin)", className),
+		"data-slot": "context-menu-content",
+		...props
+	}) });
+};
+/**
+* Runs an action; the `danger` variant marks destructive ones.
+*/
+var ContextMenuItem = ({ className, inset, variant, ...props }) => {
+	return /* @__PURE__ */ jsx(ContextMenu.Item, {
+		className: cn(menuItemVariants({
+			inset,
+			variant
+		}), className),
+		"data-slot": "context-menu-item",
+		...props
+	});
+};
+/**
+* Toggles a setting and shows a check while it is on.
+*/
+var ContextMenuCheckboxItem = ({ children, className, ...props }) => {
+	return /* @__PURE__ */ jsxs(ContextMenu.CheckboxItem, {
+		className: cn(MENU_INDICATOR_ITEM_CLASS_NAME, className),
+		"data-slot": "context-menu-checkbox-item",
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: MENU_INDICATOR_CLASS_NAME,
+			children: /* @__PURE__ */ jsx(ContextMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(RefineIconCheck, { className: "size-4 text-gem-ink" }) })
+		}), children]
+	});
+};
+/**
+* Picks one option of its radio group and marks it with a dot.
+*/
+var ContextMenuRadioItem = ({ children, className, ...props }) => {
+	return /* @__PURE__ */ jsxs(ContextMenu.RadioItem, {
+		className: cn(MENU_INDICATOR_ITEM_CLASS_NAME, className),
+		"data-slot": "context-menu-radio-item",
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: MENU_INDICATOR_CLASS_NAME,
+			children: /* @__PURE__ */ jsx(ContextMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(RefineIconCircleFilled, { className: "size-2 text-gem-ink" }) })
+		}), children]
+	});
+};
+var ContextMenuLabel = ({ className, inset, ...props }) => {
+	return /* @__PURE__ */ jsx(ContextMenu.Label, {
+		className: cn(MENU_LABEL_CLASS_NAME, { "pl-8": inset }, className),
+		"data-slot": "context-menu-label",
+		...props
+	});
+};
+var ContextMenuSeparator = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(ContextMenu.Separator, {
+		className: cn(MENU_SEPARATOR_CLASS_NAME, className),
+		"data-slot": "context-menu-separator",
+		...props
+	});
+};
+/**
+* Right-aligns a keyboard shortcut hint inside an item.
+*/
+var ContextMenuShortcut = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn(MENU_SHORTCUT_CLASS_NAME, className),
+		"data-slot": "context-menu-shortcut",
+		...props
+	});
+};
+/**
+* Opens a nested menu and points at it with a chevron.
+*/
+var ContextMenuSubTrigger = ({ children, className, inset, ...props }) => {
+	return /* @__PURE__ */ jsxs(ContextMenu.SubTrigger, {
+		className: cn(menuItemVariants({ inset }), className),
+		"data-slot": "context-menu-sub-trigger",
+		...props,
+		children: [children, /* @__PURE__ */ jsx(RefineIconChevronRight, { className: "ml-auto size-4" })]
+	});
+};
+var ContextMenuSubContent = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(ContextMenu.Portal, { children: /* @__PURE__ */ jsx(ContextMenu.SubContent, {
+		className: cn(MENU_CONTENT_CLASS_NAME, "origin-(--radix-context-menu-content-transform-origin)", className),
+		"data-slot": "context-menu-sub-content",
+		...props
+	}) });
+};
+export { ContextMenu$1 as ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, 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\nimport type { VariantProps } from 'class-variance-authority';\nimport { ContextMenu as ContextMenuPrimitive } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport {\n  MENU_CONTENT_CLASS_NAME,\n  MENU_INDICATOR_CLASS_NAME,\n  MENU_INDICATOR_ITEM_CLASS_NAME,\n  MENU_LABEL_CLASS_NAME,\n  MENU_SEPARATOR_CLASS_NAME,\n  MENU_SHORTCUT_CLASS_NAME,\n  menuItemVariants,\n} from '../dropdown-menu/menu-styles';\nimport { RefineIconCheck, RefineIconChevronRight, RefineIconCircleFilled } from '../../icons/refine-icons';\n\n/**\n * Holds the open state of a menu of actions opened by right-clicking or long-pressing its trigger area.\n */\nexport const ContextMenu = (props: ComponentProps<typeof ContextMenuPrimitive.Root>) => {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />;\n};\n\nexport const ContextMenuTrigger = (props: ComponentProps<typeof ContextMenuPrimitive.Trigger>) => {\n  return <ContextMenuPrimitive.Trigger data-slot=\"context-menu-trigger\" {...props} />;\n};\n\nexport const ContextMenuGroup = (props: ComponentProps<typeof ContextMenuPrimitive.Group>) => {\n  return <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />;\n};\n\nexport const ContextMenuRadioGroup = (props: ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) => {\n  return <ContextMenuPrimitive.RadioGroup data-slot=\"context-menu-radio-group\" {...props} />;\n};\n\nexport const ContextMenuSub = (props: ComponentProps<typeof ContextMenuPrimitive.Sub>) => {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />;\n};\n\n/**\n * Portals the menu panel at the pointer.\n */\nexport const ContextMenuContent = ({ className, ...props }: ComponentProps<typeof ContextMenuPrimitive.Content>) => {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        className={cn(MENU_CONTENT_CLASS_NAME, 'origin-(--radix-context-menu-content-transform-origin)', className)}\n        data-slot=\"context-menu-content\"\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  );\n};\n\ntype ContextMenuItemProps = ComponentProps<typeof ContextMenuPrimitive.Item> & VariantProps<typeof menuItemVariants>;\n\n/**\n * Runs an action; the `danger` variant marks destructive ones.\n */\nexport const ContextMenuItem = ({ className, inset, variant, ...props }: ContextMenuItemProps) => {\n  return (\n    <ContextMenuPrimitive.Item\n      className={cn(menuItemVariants({ inset, variant }), className)}\n      data-slot=\"context-menu-item\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Toggles a setting and shows a check while it is on.\n */\nexport const ContextMenuCheckboxItem = ({\n  children,\n  className,\n  ...props\n}: ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) => {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      className={cn(MENU_INDICATOR_ITEM_CLASS_NAME, className)}\n      data-slot=\"context-menu-checkbox-item\"\n      {...props}\n    >\n      <span className={MENU_INDICATOR_CLASS_NAME}>\n        <ContextMenuPrimitive.ItemIndicator>\n          <RefineIconCheck className=\"size-4 text-gem-ink\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  );\n};\n\n/**\n * Picks one option of its radio group and marks it with a dot.\n */\nexport const ContextMenuRadioItem = ({\n  children,\n  className,\n  ...props\n}: ComponentProps<typeof ContextMenuPrimitive.RadioItem>) => {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      className={cn(MENU_INDICATOR_ITEM_CLASS_NAME, className)}\n      data-slot=\"context-menu-radio-item\"\n      {...props}\n    >\n      <span className={MENU_INDICATOR_CLASS_NAME}>\n        <ContextMenuPrimitive.ItemIndicator>\n          <RefineIconCircleFilled className=\"size-2 text-gem-ink\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  );\n};\n\nexport const ContextMenuLabel = ({\n  className,\n  inset,\n  ...props\n}: ComponentProps<typeof ContextMenuPrimitive.Label> & {\n  inset?: boolean;\n}) => {\n  return (\n    <ContextMenuPrimitive.Label\n      className={cn(MENU_LABEL_CLASS_NAME, { 'pl-8': inset }, className)}\n      data-slot=\"context-menu-label\"\n      {...props}\n    />\n  );\n};\n\nexport const ContextMenuSeparator = ({\n  className,\n  ...props\n}: ComponentProps<typeof ContextMenuPrimitive.Separator>) => {\n  return (\n    <ContextMenuPrimitive.Separator\n      className={cn(MENU_SEPARATOR_CLASS_NAME, className)}\n      data-slot=\"context-menu-separator\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Right-aligns a keyboard shortcut hint inside an item.\n */\nexport const ContextMenuShortcut = ({ className, ...props }: ComponentProps<'span'>) => {\n  return <span className={cn(MENU_SHORTCUT_CLASS_NAME, className)} data-slot=\"context-menu-shortcut\" {...props} />;\n};\n\n/**\n * Opens a nested menu and points at it with a chevron.\n */\nexport const ContextMenuSubTrigger = ({\n  children,\n  className,\n  inset,\n  ...props\n}: ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  inset?: boolean;\n}) => {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      className={cn(menuItemVariants({ inset }), className)}\n      data-slot=\"context-menu-sub-trigger\"\n      {...props}\n    >\n      {children}\n      <RefineIconChevronRight className=\"ml-auto size-4\" />\n    </ContextMenuPrimitive.SubTrigger>\n  );\n};\n\nexport const ContextMenuSubContent = ({\n  className,\n  ...props\n}: ComponentProps<typeof ContextMenuPrimitive.SubContent>) => {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.SubContent\n        className={cn(MENU_CONTENT_CLASS_NAME, 'origin-(--radix-context-menu-content-transform-origin)', className)}\n        data-slot=\"context-menu-sub-content\"\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  );\n};\n"],"mappings":"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"}