@evinvest/uikit 0.19.0 → 0.20.0

package/dist/components/command.js

@@ -0,0 +1,274 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { useControllableState } from "../primitives/use-controllable-state.js";
+import { useFocusScope } from "../primitives/focus-scope.js";
+import { Portal } from "../primitives/portal.js";
+import {
+  COMMAND_DIALOG_COMMAND,
+  COMMAND_DIALOG_CONTENT,
+  COMMAND_DIALOG_OVERLAY,
+  COMMAND_EMPTY,
+  COMMAND_GROUP,
+  COMMAND_INPUT,
+  COMMAND_INPUT_WRAPPER,
+  COMMAND_ITEM,
+  COMMAND_LIST,
+  COMMAND_ROOT,
+  COMMAND_SEPARATOR,
+  COMMAND_SHORTCUT
+} from "../generated/command.js";
+const CommandContext = React.createContext(null);
+function useCommand() {
+  const ctx = React.useContext(CommandContext);
+  if (!ctx) throw new Error("Command parts must be used within <Command>");
+  return ctx;
+}
+function Command({
+  className,
+  search,
+  defaultSearch = "",
+  onSearchChange,
+  children,
+  ...props
+}) {
+  const [currentSearch, setSearch] = useControllableState({
+    ...search !== void 0 ? { value: search } : {},
+    defaultValue: defaultSearch,
+    ...onSearchChange ? { onChange: onSearchChange } : {}
+  });
+  const [items, setItems] = React.useState(
+    () => /* @__PURE__ */ new Map()
+  );
+  const registerItem = React.useCallback((id, value) => {
+    setItems((prev) => {
+      if (prev.get(id) === value) return prev;
+      const next = new Map(prev);
+      next.set(id, value);
+      return next;
+    });
+  }, []);
+  const unregisterItem = React.useCallback((id) => {
+    setItems((prev) => {
+      if (!prev.has(id)) return prev;
+      const next = new Map(prev);
+      next.delete(id);
+      return next;
+    });
+  }, []);
+  const query = currentSearch.trim().toLowerCase();
+  const matches = React.useCallback(
+    (value) => query === "" || value.toLowerCase().includes(query),
+    [query]
+  );
+  const hasMatches = React.useMemo(
+    () => [...items.values()].some(matches),
+    [items, matches]
+  );
+  return /* @__PURE__ */ jsx(
+    CommandContext.Provider,
+    {
+      value: {
+        search: currentSearch,
+        setSearch,
+        registerItem,
+        unregisterItem,
+        query,
+        matches,
+        hasMatches
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-slot": "command",
+          className: cn(COMMAND_ROOT, className),
+          ...props,
+          children
+        }
+      )
+    }
+  );
+}
+function CommandDialog({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  className,
+  children
+}) {
+  const [isOpen, setOpen] = useControllableState({
+    ...open !== void 0 ? { value: open } : {},
+    defaultValue: defaultOpen,
+    ...onOpenChange ? { onChange: onOpenChange } : {}
+  });
+  const scopeRef = useFocusScope(isOpen);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxs(Portal, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "command-overlay",
+        className: COMMAND_DIALOG_OVERLAY,
+        onClick: () => setOpen(false)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "data-slot": "command-dialog",
+        ref: scopeRef,
+        onKeyDown: (e) => {
+          if (e.key === "Escape") setOpen(false);
+        },
+        className: cn(COMMAND_DIALOG_CONTENT, className),
+        children: /* @__PURE__ */ jsx(Command, { className: COMMAND_DIALOG_COMMAND, children })
+      }
+    )
+  ] });
+}
+function CommandInput({
+  className,
+  ...props
+}) {
+  const { search, setSearch } = useCommand();
+  return /* @__PURE__ */ jsxs("div", { className: COMMAND_INPUT_WRAPPER, "data-slot": "command-input-wrapper", children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: "size-4 shrink-0 opacity-50",
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+          /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        role: "combobox",
+        "data-slot": "command-input",
+        value: search,
+        onChange: (e) => setSearch(e.target.value),
+        className: cn(COMMAND_INPUT, className),
+        ...props
+      }
+    )
+  ] });
+}
+function CommandList({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "listbox",
+      "data-slot": "command-list",
+      className: cn(COMMAND_LIST, className),
+      ...props
+    }
+  );
+}
+function CommandEmpty({ className, children, ...props }) {
+  const { query, hasMatches } = useCommand();
+  if (query === "" || hasMatches) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "command-empty",
+      className: cn(COMMAND_EMPTY, className),
+      ...props,
+      children
+    }
+  );
+}
+function CommandGroup({ className, heading, children, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "data-slot": "command-group",
+      className: cn(COMMAND_GROUP, className),
+      ...props,
+      children: [
+        heading ? /* @__PURE__ */ jsx("div", { "data-slot": "command-group-heading", children: heading }) : null,
+        children
+      ]
+    }
+  );
+}
+function CommandItem({
+  className,
+  value,
+  disabled = false,
+  onSelect,
+  children,
+  ...props
+}) {
+  const { registerItem, unregisterItem, matches } = useCommand();
+  const id = React.useId();
+  React.useEffect(() => {
+    registerItem(id, value);
+    return () => unregisterItem(id);
+  }, [id, value, registerItem, unregisterItem]);
+  if (!matches(value)) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "option",
+      "data-slot": "command-item",
+      "data-disabled": disabled,
+      "aria-disabled": disabled || void 0,
+      tabIndex: -1,
+      onClick: () => {
+        if (!disabled) onSelect?.(value);
+      },
+      className: cn(COMMAND_ITEM, className),
+      ...props,
+      children
+    }
+  );
+}
+function CommandSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "command-separator",
+      className: cn(COMMAND_SEPARATOR, className),
+      ...props
+    }
+  );
+}
+function CommandShortcut({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "command-shortcut",
+      className: cn(COMMAND_SHORTCUT, className),
+      ...props
+    }
+  );
+}
+export {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut
+};
+//# sourceMappingURL=command.js.map

package/dist/components/command.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/command.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { useFocusScope } from \"../primitives/focus-scope\";\nimport { Portal } from \"../primitives/portal\";\nimport {\n  COMMAND_DIALOG_COMMAND,\n  COMMAND_DIALOG_CONTENT,\n  COMMAND_DIALOG_OVERLAY,\n  COMMAND_EMPTY,\n  COMMAND_GROUP,\n  COMMAND_INPUT,\n  COMMAND_INPUT_WRAPPER,\n  COMMAND_ITEM,\n  COMMAND_LIST,\n  COMMAND_ROOT,\n  COMMAND_SEPARATOR,\n  COMMAND_SHORTCUT,\n} from \"../generated/command\";\n\ninterface CommandContextValue {\n  search: string;\n  setSearch: (next: string) => void;\n  /// Registers a `CommandItem`'s value so `CommandEmpty` can tell \"nothing\n  /// matched\" from \"nothing is here\". Items register even while filtered out.\n  registerItem: (id: string, value: string) => void;\n  unregisterItem: (id: string) => void;\n  /// The active query: trimmed, so blank input is not a search, and lowercased.\n  /// Shared by the item filter and the empty-state gate so the two can never\n  /// disagree.\n  query: string;\n  matches: (value: string) => boolean;\n  hasMatches: boolean;\n}\n\nconst CommandContext = React.createContext<CommandContextValue | null>(null);\n\nfunction useCommand(): CommandContextValue {\n  const ctx = React.useContext(CommandContext);\n  if (!ctx) throw new Error(\"Command parts must be used within <Command>\");\n  return ctx;\n}\n\nexport interface CommandProps extends React.ComponentProps<\"div\"> {\n  search?: string;\n  defaultSearch?: string;\n  onSearchChange?: (search: string) => void;\n}\n\nexport function Command({\n  className,\n  search,\n  defaultSearch = \"\",\n  onSearchChange,\n  children,\n  ...props\n}: CommandProps) {\n  const [currentSearch, setSearch] = useControllableState<string>({\n    ...(search !== undefined ? { value: search } : {}),\n    defaultValue: defaultSearch,\n    ...(onSearchChange ? { onChange: onSearchChange } : {}),\n  });\n\n  const [items, setItems] = React.useState<ReadonlyMap<string, string>>(\n    () => new Map(),\n  );\n  const registerItem = React.useCallback((id: string, value: string) => {\n    setItems((prev) => {\n      if (prev.get(id) === value) return prev;\n      const next = new Map(prev);\n      next.set(id, value);\n      return next;\n    });\n  }, []);\n  const unregisterItem = React.useCallback((id: string) => {\n    setItems((prev) => {\n      if (!prev.has(id)) return prev;\n      const next = new Map(prev);\n      next.delete(id);\n      return next;\n    });\n  }, []);\n\n  const query = currentSearch.trim().toLowerCase();\n  const matches = React.useCallback(\n    (value: string) => query === \"\" || value.toLowerCase().includes(query),\n    [query],\n  );\n  const hasMatches = React.useMemo(\n    () => [...items.values()].some(matches),\n    [items, matches],\n  );\n\n  return (\n    <CommandContext.Provider\n      value={{\n        search: currentSearch,\n        setSearch,\n        registerItem,\n        unregisterItem,\n        query,\n        matches,\n        hasMatches,\n      }}\n    >\n      <div\n        data-slot=\"command\"\n        className={cn(COMMAND_ROOT, className)}\n        {...props}\n      >\n        {children}\n      </div>\n    </CommandContext.Provider>\n  );\n}\n\nexport interface CommandDialogProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  className?: string;\n  children?: React.ReactNode;\n}\n\nexport function CommandDialog({\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  className,\n  children,\n}: CommandDialogProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const scopeRef = useFocusScope(isOpen);\n  if (!isOpen) return null;\n  return (\n    <Portal>\n      <div\n        data-slot=\"command-overlay\"\n        className={COMMAND_DIALOG_OVERLAY}\n        onClick={() => setOpen(false)}\n      />\n      <div\n        role=\"dialog\"\n        aria-modal=\"true\"\n        data-slot=\"command-dialog\"\n        ref={scopeRef}\n        onKeyDown={(e) => {\n          if (e.key === \"Escape\") setOpen(false);\n        }}\n        className={cn(COMMAND_DIALOG_CONTENT, className)}\n      >\n        <Command className={COMMAND_DIALOG_COMMAND}>\n          {children}\n        </Command>\n      </div>\n    </Portal>\n  );\n}\n\nexport function CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<\"input\">) {\n  const { search, setSearch } = useCommand();\n  return (\n    <div className={COMMAND_INPUT_WRAPPER} data-slot=\"command-input-wrapper\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"size-4 shrink-0 opacity-50\"\n        aria-hidden=\"true\"\n      >\n        <circle cx=\"11\" cy=\"11\" r=\"8\" />\n        <path d=\"m21 21-4.3-4.3\" />\n      </svg>\n      <input\n        type=\"text\"\n        role=\"combobox\"\n        data-slot=\"command-input\"\n        value={search}\n        onChange={(e) => setSearch(e.target.value)}\n        className={cn(COMMAND_INPUT, className)}\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport function CommandList({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"listbox\"\n      data-slot=\"command-list\"\n      className={cn(COMMAND_LIST, className)}\n      {...props}\n    />\n  );\n}\n\n/// Renders only when a search is under way and no item matched it — never next\n/// to results, and never before the user has typed.\nexport function CommandEmpty({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  const { query, hasMatches } = useCommand();\n  if (query === \"\" || hasMatches) return null;\n  return (\n    <div\n      data-slot=\"command-empty\"\n      className={cn(COMMAND_EMPTY, className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport interface CommandGroupProps extends React.ComponentProps<\"div\"> {\n  heading?: string;\n}\n\nexport function CommandGroup({ className, heading, children, ...props }: CommandGroupProps) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"command-group\"\n      className={cn(COMMAND_GROUP, className)}\n      {...props}\n    >\n      {heading ? <div data-slot=\"command-group-heading\">{heading}</div> : null}\n      {children}\n    </div>\n  );\n}\n\nexport interface CommandItemProps\n  extends Omit<React.ComponentProps<\"div\">, \"onSelect\"> {\n  value: string;\n  disabled?: boolean;\n  onSelect?: (value: string) => void;\n}\n\nexport function CommandItem({\n  className,\n  value,\n  disabled = false,\n  onSelect,\n  children,\n  ...props\n}: CommandItemProps) {\n  const { registerItem, unregisterItem, matches } = useCommand();\n  const id = React.useId();\n  // Registered whether or not this item survives the filter below, so\n  // `CommandEmpty` gates on the search, not on who happens to be mounted.\n  React.useEffect(() => {\n    registerItem(id, value);\n    return () => unregisterItem(id);\n  }, [id, value, registerItem, unregisterItem]);\n\n  if (!matches(value)) return null;\n  return (\n    <div\n      role=\"option\"\n      data-slot=\"command-item\"\n      data-disabled={disabled}\n      aria-disabled={disabled || undefined}\n      tabIndex={-1}\n      onClick={() => {\n        if (!disabled) onSelect?.(value);\n      }}\n      className={cn(COMMAND_ITEM, className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function CommandSeparator({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"command-separator\"\n      className={cn(COMMAND_SEPARATOR, className)}\n      {...props}\n    />\n  );\n}\n\nexport function CommandShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(COMMAND_SHORTCUT, className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/container.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { CONTAINER_BASE } from "../generated/container.js";
+function Container({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "container",
+      className: cn(CONTAINER_BASE, className),
+      ...props
+    }
+  );
+}
+export {
+  Container
+};
+//# sourceMappingURL=container.js.map

package/dist/components/container.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/container.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { CONTAINER_BASE } from \"../generated/container\";\n\nexport type ContainerProps = React.ComponentProps<\"div\">;\n\n/**\n * Page-width wrapper: centres content, caps it at `--page-max` and applies the\n * responsive `--page-px` gutter (tighter on mobile, roomier ≥ sm). Standardises\n * the `<div className=\"container\">` consumers were repeating, so the page gutter\n * and max width live in one token-driven place.\n */\nexport function Container({ className, ...props }: ContainerProps) {\n  return (\n    <div\n      data-slot=\"container\"\n      className={cn(CONTAINER_BASE, className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":"AAcI;AAdJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAUxB,SAAS,UAAU,EAAE,WAAW,GAAG,MAAM,GAAmB;AACjE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,gBAAgB,SAAS;AAAA,MACtC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/context-menu.js

@@ -0,0 +1,337 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { useControllableState } from "../primitives/use-controllable-state.js";
+import { useDismissableLayer } from "../primitives/dismissable-layer.js";
+import { usePresence } from "../primitives/presence.js";
+import { useRovingFocus } from "../primitives/use-roving-focus.js";
+import { mergeRefs } from "../primitives/merge-refs.js";
+import { Portal } from "../primitives/portal.js";
+import { Slot } from "../primitives/slot.js";
+import {
+  CONTEXT_MENU_CHECK_ITEM,
+  CONTEXT_MENU_CONTENT,
+  CONTEXT_MENU_ITEM,
+  CONTEXT_MENU_LABEL,
+  CONTEXT_MENU_SEPARATOR,
+  CONTEXT_MENU_SHORTCUT,
+  CONTEXT_MENU_SUB_CONTENT,
+  CONTEXT_MENU_SUB_TRIGGER
+} from "../generated/context-menu.js";
+const ContextMenuContext = React.createContext(null);
+function useContextMenu() {
+  const ctx = React.useContext(ContextMenuContext);
+  if (!ctx) throw new Error("ContextMenu parts must be used within <ContextMenu>");
+  return ctx;
+}
+function ContextMenu({ open, defaultOpen = false, onOpenChange, children }) {
+  const [isOpen, setOpen] = useControllableState({
+    ...open !== void 0 ? { value: open } : {},
+    defaultValue: defaultOpen,
+    ...onOpenChange ? { onChange: onOpenChange } : {}
+  });
+  const [point, setPoint] = React.useState({ x: 0, y: 0 });
+  return /* @__PURE__ */ jsx(ContextMenuContext.Provider, { value: { open: isOpen, setOpen, point, setPoint }, children: /* @__PURE__ */ jsx("div", { "data-slot": "context-menu", children }) });
+}
+function ContextMenuPortal({ children }) {
+  return /* @__PURE__ */ jsx(Portal, { children });
+}
+function ContextMenuTrigger({ asChild = false, onContextMenu, ...props }) {
+  const { setOpen, setPoint } = useContextMenu();
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "context-menu-trigger",
+      onContextMenu: (e) => {
+        onContextMenu?.(e);
+        e.preventDefault();
+        setPoint({ x: e.clientX, y: e.clientY });
+        setOpen(true);
+      },
+      ...props
+    }
+  );
+}
+function ContextMenuGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "context-menu-group", role: "group", className, ...props });
+}
+const ContextMenuCloseContext = React.createContext(() => {
+});
+function ContextMenuContent({ className, children, ...props }) {
+  const { open, setOpen, point } = useContextMenu();
+  const { isPresent, ref: presRef } = usePresence(open);
+  const dismissRef = useDismissableLayer({
+    enabled: open,
+    onDismiss: () => setOpen(false)
+  });
+  const contentRef = React.useRef(null);
+  const items = () => Array.from(
+    contentRef.current?.querySelectorAll("[role^='menuitem']") ?? []
+  ).filter((el) => el.getAttribute("data-disabled") === null);
+  const { activeIndex, onKeyDown: rovingKeyDown } = useRovingFocus({
+    count: 64,
+    orientation: "vertical",
+    loop: true
+  });
+  React.useEffect(() => {
+    if (!open) return;
+    items()[activeIndex]?.focus();
+  }, [open, activeIndex]);
+  const close = React.useCallback(() => setOpen(false), [setOpen]);
+  if (!isPresent) return null;
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(ContextMenuCloseContext.Provider, { value: close, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "context-menu-content",
+      "data-state": open ? "open" : "closed",
+      "data-side": "bottom",
+      role: "menu",
+      tabIndex: -1,
+      onKeyDown: (e) => {
+        rovingKeyDown(e);
+        if (e.key === "Escape") setOpen(false);
+      },
+      ref: mergeRefs(dismissRef, presRef, contentRef),
+      style: { position: "fixed", top: point.y, left: point.x },
+      className: cn(
+        CONTEXT_MENU_CONTENT,
+        className
+      ),
+      ...props,
+      children
+    }
+  ) }) });
+}
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "neutral",
+  disabled,
+  onClick,
+  onKeyDown,
+  ...props
+}) {
+  const close = React.useContext(ContextMenuCloseContext);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "context-menu-item",
+      "data-inset": inset ? "" : void 0,
+      "data-variant": variant,
+      "data-disabled": disabled ? "" : void 0,
+      role: "menuitem",
+      tabIndex: disabled ? void 0 : -1,
+      className: cn(
+        CONTEXT_MENU_ITEM,
+        className
+      ),
+      onClick: (e) => {
+        if (disabled) return;
+        onClick?.(e);
+        close();
+      },
+      onKeyDown: (e) => {
+        onKeyDown?.(e);
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.currentTarget.click();
+        }
+      },
+      ...props
+    }
+  );
+}
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  disabled,
+  onClick,
+  ...props
+}) {
+  const close = React.useContext(ContextMenuCloseContext);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "context-menu-checkbox-item",
+      role: "menuitemcheckbox",
+      "aria-checked": checked,
+      "data-state": checked ? "checked" : "unchecked",
+      "data-disabled": disabled ? "" : void 0,
+      tabIndex: disabled ? void 0 : -1,
+      className: cn(
+        CONTEXT_MENU_CHECK_ITEM,
+        className
+      ),
+      onClick: (e) => {
+        if (disabled) return;
+        onClick?.(e);
+        close();
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: checked ? /* @__PURE__ */ jsx("svg", { className: "size-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) }) : null }),
+        children
+      ]
+    }
+  );
+}
+const ContextMenuRadioGroupContext = React.createContext(null);
+function ContextMenuRadioGroup({
+  className,
+  value,
+  onValueChange,
+  children,
+  ...props
+}) {
+  const ctx = React.useMemo(
+    () => ({ value, setValue: (next) => onValueChange?.(next) }),
+    [value, onValueChange]
+  );
+  return /* @__PURE__ */ jsx(ContextMenuRadioGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx("div", { "data-slot": "context-menu-radio-group", role: "group", className, ...props, children }) });
+}
+function ContextMenuRadioItem({
+  className,
+  children,
+  value,
+  disabled,
+  onClick,
+  ...props
+}) {
+  const close = React.useContext(ContextMenuCloseContext);
+  const group = React.useContext(ContextMenuRadioGroupContext);
+  const checked = group?.value === value;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "context-menu-radio-item",
+      role: "menuitemradio",
+      "aria-checked": checked,
+      "data-state": checked ? "checked" : "unchecked",
+      "data-disabled": disabled ? "" : void 0,
+      tabIndex: disabled ? void 0 : -1,
+      className: cn(
+        CONTEXT_MENU_CHECK_ITEM,
+        className
+      ),
+      onClick: (e) => {
+        if (disabled) return;
+        onClick?.(e);
+        group?.setValue(value);
+        close();
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: checked ? /* @__PURE__ */ jsx("svg", { className: "size-2 fill-current", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }) }) : null }),
+        children
+      ]
+    }
+  );
+}
+function ContextMenuLabel({ className, inset, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "context-menu-label",
+      "data-inset": inset ? "" : void 0,
+      className: cn(CONTEXT_MENU_LABEL, className),
+      ...props
+    }
+  );
+}
+function ContextMenuSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "context-menu-separator",
+      role: "separator",
+      className: cn(CONTEXT_MENU_SEPARATOR, className),
+      ...props
+    }
+  );
+}
+function ContextMenuShortcut({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "context-menu-shortcut",
+      className: cn(CONTEXT_MENU_SHORTCUT, className),
+      ...props
+    }
+  );
+}
+const ContextMenuSubContext = React.createContext(null);
+function ContextMenuSub({ open, defaultOpen = false, onOpenChange, children }) {
+  const [isOpen, setOpen] = useControllableState({
+    ...open !== void 0 ? { value: open } : {},
+    defaultValue: defaultOpen,
+    ...onOpenChange ? { onChange: onOpenChange } : {}
+  });
+  return /* @__PURE__ */ jsx(ContextMenuSubContext.Provider, { value: { open: isOpen, setOpen }, children: /* @__PURE__ */ jsx("div", { "data-slot": "context-menu-sub", children }) });
+}
+function ContextMenuSubTrigger({ className, inset, children, onClick, ...props }) {
+  const ctx = React.useContext(ContextMenuSubContext);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "context-menu-sub-trigger",
+      "data-inset": inset ? "" : void 0,
+      "data-state": ctx?.open ? "open" : "closed",
+      role: "menuitem",
+      "aria-haspopup": "menu",
+      "aria-expanded": ctx?.open,
+      tabIndex: -1,
+      className: cn(
+        CONTEXT_MENU_SUB_TRIGGER,
+        className
+      ),
+      onClick: (e) => {
+        onClick?.(e);
+        ctx?.setOpen(!ctx.open);
+      },
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx("svg", { className: "ml-auto", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) })
+      ]
+    }
+  );
+}
+function ContextMenuSubContent({ className, children, ...props }) {
+  const ctx = React.useContext(ContextMenuSubContext);
+  if (!ctx?.open) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "context-menu-sub-content",
+      "data-state": "open",
+      role: "menu",
+      className: cn(
+        CONTEXT_MENU_SUB_CONTENT,
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+export {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger
+};
+//# sourceMappingURL=context-menu.js.map