@open-mercato/ui 0.6.4-develop.4178.1.aad9ddaa95 → 0.6.4-develop.4210.1.d412061cfe

package/dist/primitives/command-menu.js

@@ -0,0 +1,355 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { ChevronRight, Search, X } from "lucide-react";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Kbd } from "./kbd.js";
+const CommandMenu = (props) => /* @__PURE__ */ jsx(DialogPrimitive.Root, { ...props });
+CommandMenu.displayName = "CommandMenu";
+const CommandMenuTrigger = DialogPrimitive.Trigger;
+const CommandMenuPortal = DialogPrimitive.Portal;
+const CommandMenuClose = DialogPrimitive.Close;
+const CommandMenuOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    "data-slot": "command-menu-overlay",
+    className: cn(
+      "fixed inset-0 z-overlay bg-foreground/40 backdrop-blur-sm",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
+      className
+    ),
+    ...props
+  }
+));
+CommandMenuOverlay.displayName = "CommandMenuOverlay";
+const CommandMenuContent = React.forwardRef(({ className, contentClassName, title, commandProps, children, ...props }, ref) => {
+  const t = useT();
+  const resolvedTitle = title ?? t("ui.commandMenu.title.srOnly", "Command menu");
+  return /* @__PURE__ */ jsxs(CommandMenuPortal, { children: [
+    /* @__PURE__ */ jsx(CommandMenuOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        ref,
+        "data-slot": "command-menu-content",
+        className: cn(
+          // top-1/4 places content roughly 25% from viewport top (Tailwind fraction scale);
+          // w-[calc(100%-2rem)] kept — no DS token expresses "viewport minus 2rem gutters".
+          "fixed left-1/2 top-1/4 z-popover w-[calc(100%-2rem)] -translate-x-1/2 outline-none",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
+          "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
+          "data-[state=open]:duration-150 data-[state=closed]:duration-100",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(DialogPrimitive.Title, { className: "sr-only", children: resolvedTitle }),
+          /* @__PURE__ */ jsx(
+            CommandPrimitive,
+            {
+              "data-slot": "command-menu-root",
+              className: cn(
+                "mx-auto flex w-full max-w-xl flex-col overflow-hidden rounded-lg border border-input bg-background shadow-lg",
+                contentClassName
+              ),
+              ...commandProps,
+              children
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+CommandMenuContent.displayName = "CommandMenuContent";
+const CommandMenuInput = React.forwardRef(
+  ({
+    className,
+    wrapperClassName,
+    showShortcut = true,
+    shortcutLabel = "\u2318K",
+    showClear = true,
+    clearAriaLabel = "Clear search",
+    value,
+    defaultValue,
+    onValueChange,
+    ...props
+  }, ref) => {
+    const isControlled = value !== void 0;
+    const [internal, setInternal] = React.useState(
+      typeof defaultValue === "string" ? defaultValue : ""
+    );
+    const currentValue = isControlled ? value : internal;
+    const handleChange = React.useCallback(
+      (next) => {
+        if (!isControlled) setInternal(next);
+        onValueChange?.(next);
+      },
+      [isControlled, onValueChange]
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "command-menu-input-wrapper",
+        className: cn(
+          "flex h-12 items-center gap-2 border-b border-input px-4",
+          wrapperClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            Search,
+            {
+              "aria-hidden": "true",
+              className: "size-4 shrink-0 text-muted-foreground",
+              "data-slot": "command-menu-input-icon"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            CommandPrimitive.Input,
+            {
+              ref,
+              "data-slot": "command-menu-input",
+              value: currentValue,
+              onValueChange: handleChange,
+              className: cn(
+                "flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none",
+                className
+              ),
+              ...props
+            }
+          ),
+          showClear && currentValue.length > 0 ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-slot": "command-menu-input-clear",
+              "aria-label": clearAriaLabel,
+              onClick: () => handleChange(""),
+              className: cn(
+                "inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none transition-colors",
+                "hover:bg-muted/40 hover:text-foreground",
+                "focus-visible:shadow-focus"
+              ),
+              children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-3.5" })
+            }
+          ) : showShortcut ? /* @__PURE__ */ jsx(
+            Kbd,
+            {
+              "data-slot": "command-menu-input-shortcut",
+              className: "shrink-0",
+              children: shortcutLabel
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+CommandMenuInput.displayName = "CommandMenuInput";
+const CommandMenuList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  CommandPrimitive.List,
+  {
+    ref,
+    "data-slot": "command-menu-list",
+    className: cn(
+      "max-h-[420px] overflow-y-auto overflow-x-hidden p-2",
+      className
+    ),
+    ...props
+  }
+));
+CommandMenuList.displayName = "CommandMenuList";
+const CommandMenuEmpty = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  CommandPrimitive.Empty,
+  {
+    ref,
+    "data-slot": "command-menu-empty",
+    className: cn(
+      "py-8 text-center text-sm text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+CommandMenuEmpty.displayName = "CommandMenuEmpty";
+const CommandMenuGroup = React.forwardRef(
+  ({ className, heading, actionLabel, onAction, actionAriaLabel, children, ...props }, ref) => {
+    const hasAction = onAction !== void 0;
+    return /* @__PURE__ */ jsxs(
+      CommandPrimitive.Group,
+      {
+        ref,
+        "data-slot": "command-menu-group",
+        heading,
+        className: cn(
+          "overflow-hidden text-foreground",
+          "[&_[cmdk-group-heading]]:flex [&_[cmdk-group-heading]]:items-center [&_[cmdk-group-heading]]:justify-between",
+          "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5",
+          "[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+          className
+        ),
+        ...props,
+        children: [
+          hasAction ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "command-menu-group-action",
+              className: "-mt-7 mb-1 flex justify-end px-2",
+              children: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: onAction,
+                  "aria-label": actionAriaLabel ?? actionLabel ?? "See all",
+                  className: cn(
+                    "inline-flex items-center gap-1 rounded-md text-xs font-medium text-muted-foreground outline-none transition-colors",
+                    "hover:text-foreground focus-visible:shadow-focus"
+                  ),
+                  children: [
+                    actionLabel,
+                    /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: "size-3" })
+                  ]
+                }
+              )
+            }
+          ) : null,
+          children
+        ]
+      }
+    );
+  }
+);
+CommandMenuGroup.displayName = "CommandMenuGroup";
+const CommandMenuItem = React.forwardRef(
+  ({
+    className,
+    children,
+    leading,
+    description,
+    shortcut,
+    hideChevron = false,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs(
+    CommandPrimitive.Item,
+    {
+      ref,
+      "data-slot": "command-menu-item",
+      className: cn(
+        "group relative flex w-full cursor-pointer select-none items-center gap-3 rounded-md px-2 py-2 text-sm text-foreground outline-none",
+        "data-[selected=true]:bg-muted/40",
+        "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        leading ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "command-menu-item-leading",
+            "aria-hidden": "true",
+            className: "flex size-6 shrink-0 items-center justify-center",
+            children: leading
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "command-menu-item-text",
+            className: "min-w-0 flex-1",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium text-foreground", children }),
+              description ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-slot": "command-menu-item-description",
+                  className: "truncate text-xs text-muted-foreground",
+                  children: description
+                }
+              ) : null
+            ]
+          }
+        ),
+        shortcut ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "command-menu-item-shortcut",
+            className: "ml-auto shrink-0",
+            children: shortcut
+          }
+        ) : !hideChevron ? /* @__PURE__ */ jsx(
+          ChevronRight,
+          {
+            "aria-hidden": "true",
+            "data-slot": "command-menu-item-chevron",
+            className: "ml-auto size-4 shrink-0 text-muted-foreground opacity-0 transition-opacity group-data-[selected=true]:opacity-100"
+          }
+        ) : null
+      ]
+    }
+  )
+);
+CommandMenuItem.displayName = "CommandMenuItem";
+const CommandMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  CommandPrimitive.Separator,
+  {
+    ref,
+    "data-slot": "command-menu-separator",
+    className: cn("-mx-2 my-2 h-px bg-input", className),
+    ...props
+  }
+));
+CommandMenuSeparator.displayName = "CommandMenuSeparator";
+const CommandMenuFooter = React.forwardRef(
+  ({ className, hints, helpSlot, ...props }, ref) => {
+    const t = useT();
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "command-menu-footer",
+        className: cn(
+          "flex items-center justify-between gap-3 border-t border-input px-3 py-2 text-xs text-muted-foreground",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { "data-slot": "command-menu-footer-hints", className: "flex items-center gap-3", children: hints ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(Kbd, { children: "\u2191" }),
+              /* @__PURE__ */ jsx(Kbd, { children: "\u2193" }),
+              /* @__PURE__ */ jsx("span", { children: t("ui.commandMenu.footer.navigate", "Navigate") })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(Kbd, { children: "\u21B5" }),
+              /* @__PURE__ */ jsx("span", { children: t("ui.commandMenu.footer.select", "Select") })
+            ] })
+          ] }) }),
+          helpSlot ? /* @__PURE__ */ jsx("div", { "data-slot": "command-menu-footer-help", children: helpSlot }) : null
+        ]
+      }
+    );
+  }
+);
+CommandMenuFooter.displayName = "CommandMenuFooter";
+export {
+  CommandMenu,
+  CommandMenuClose,
+  CommandMenuContent,
+  CommandMenuEmpty,
+  CommandMenuFooter,
+  CommandMenuGroup,
+  CommandMenuInput,
+  CommandMenuItem,
+  CommandMenuList,
+  CommandMenuOverlay,
+  CommandMenuPortal,
+  CommandMenuSeparator,
+  CommandMenuTrigger
+};
+//# sourceMappingURL=command-menu.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives/command-menu.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { Command as CommandPrimitive } from 'cmdk'\nimport { ChevronRight, Search, X } from 'lucide-react'\n\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Kbd } from './kbd'\n\n/**\n * Command palette primitive \u2014 Cmd+K spotlight-style launcher backed by\n * the `cmdk` library (auto-filters items as the user types) and hosted\n * inside a Radix Dialog overlay so it inherits the modal focus contract\n * (ESC closes, outside-click closes, focus trap, ARIA role=\"dialog\").\n *\n * Compound API:\n *   <CommandMenu> \u2014 root dialog (controlled via `open` / `onOpenChange`,\n *                   or hands off via `defaultOpen`). Wraps `cmdk` + Radix\n *                   Dialog.\n *   <CommandMenuTrigger> \u2014 anchor / trigger button (Radix Dialog.Trigger).\n *   <CommandMenuContent> \u2014 the floating panel rendered through Portal:\n *                          centered overlay with rounded card, max-width,\n *                          shadow, animations.\n *   <CommandMenuInput> \u2014 leading magnifier + input + trailing `\u2318K` kbd\n *                        + auto X to clear when there's a value.\n *   <CommandMenuList> \u2014 scrollable container for groups/items.\n *   <CommandMenuEmpty> \u2014 fallback when no items match the search query.\n *   <CommandMenuGroup> \u2014 labelled section with optional `actionLabel`\n *                        / `onAction` \"see all\"-style affordance.\n *   <CommandMenuItem> \u2014 selectable row. Supports `leading` (avatar /\n *                       icon / flag), label, optional `description`,\n *                       optional `shortcut` (Kbd), and the auto\n *                       chevron on hover/selection.\n *   <CommandMenuSeparator> \u2014 visual divider between groups.\n *   <CommandMenuFooter> \u2014 bottom bar with shortcut hints + help link.\n *\n * Figma source: DS Open Mercato `Command Menu` page (4152:24764) \u2014\n * Search Input [1.1] (4187:559), Items [1.1] (4171:15653), Footer [1.1]\n * (4172:16590).\n *\n * ```tsx\n * const [open, setOpen] = React.useState(false)\n *\n * React.useEffect(() => {\n *   const onKey = (e: KeyboardEvent) => {\n *     if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {\n *       e.preventDefault()\n *       setOpen((o) => !o)\n *     }\n *   }\n *   window.addEventListener('keydown', onKey)\n *   return () => window.removeEventListener('keydown', onKey)\n * }, [])\n *\n * <CommandMenu open={open} onOpenChange={setOpen}>\n *   <CommandMenuContent>\n *     <CommandMenuInput placeholder=\"Search HR tools or press...\" />\n *     <CommandMenuList>\n *       <CommandMenuEmpty>No results.</CommandMenuEmpty>\n *       <CommandMenuGroup heading=\"Tools & Apps\">\n *         <CommandMenuItem leading={<Logo />} onSelect={...}>Monday.com</CommandMenuItem>\n *         <CommandMenuItem leading={<Logo />} onSelect={...}>Loom</CommandMenuItem>\n *       </CommandMenuGroup>\n *       <CommandMenuSeparator />\n *       <CommandMenuGroup heading=\"Employees\">\n *         <CommandMenuItem leading={<Avatar />} description=\"Engineer\">James Brown</CommandMenuItem>\n *       </CommandMenuGroup>\n *     </CommandMenuList>\n *     <CommandMenuFooter />\n *   </CommandMenuContent>\n * </CommandMenu>\n * ```\n */\n\ntype CommandMenuRootProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>\n\nconst CommandMenu = (props: CommandMenuRootProps) => <DialogPrimitive.Root {...props} />\nCommandMenu.displayName = 'CommandMenu'\n\nconst CommandMenuTrigger = DialogPrimitive.Trigger\nconst CommandMenuPortal = DialogPrimitive.Portal\nconst CommandMenuClose = DialogPrimitive.Close\n\nconst CommandMenuOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    data-slot=\"command-menu-overlay\"\n    className={cn(\n      'fixed inset-0 z-overlay bg-foreground/40 backdrop-blur-sm',\n      'data-[state=open]:animate-in data-[state=closed]:animate-out',\n      'data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0',\n      className,\n    )}\n    {...props}\n  />\n))\nCommandMenuOverlay.displayName = 'CommandMenuOverlay'\n\nexport type CommandMenuContentProps = React.ComponentPropsWithoutRef<\n  typeof DialogPrimitive.Content\n> & {\n  /** Accessible dialog title \u2014 required by Radix; auto visually hidden. */\n  title?: string\n  /** Optional max-width override (default `max-w-xl`, ~640px). */\n  contentClassName?: string\n  /** Pass to underlying `cmdk` root (`loop`, `shouldFilter`, etc.). */\n  commandProps?: Omit<React.ComponentPropsWithoutRef<typeof CommandPrimitive>, 'children' | 'className'>\n}\n\nconst CommandMenuContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  CommandMenuContentProps\n>(({ className, contentClassName, title, commandProps, children, ...props }, ref) => {\n  const t = useT()\n  const resolvedTitle = title ?? t('ui.commandMenu.title.srOnly', 'Command menu')\n  return (\n    <CommandMenuPortal>\n      <CommandMenuOverlay />\n      <DialogPrimitive.Content\n        ref={ref}\n        data-slot=\"command-menu-content\"\n        className={cn(\n          // top-1/4 places content roughly 25% from viewport top (Tailwind fraction scale);\n          // w-[calc(100%-2rem)] kept \u2014 no DS token expresses \"viewport minus 2rem gutters\".\n          'fixed left-1/2 top-1/4 z-popover w-[calc(100%-2rem)] -translate-x-1/2 outline-none',\n          'data-[state=open]:animate-in data-[state=closed]:animate-out',\n          'data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0',\n          'data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95',\n          'data-[state=open]:duration-150 data-[state=closed]:duration-100',\n          className,\n        )}\n        {...props}\n      >\n        <DialogPrimitive.Title className=\"sr-only\">{resolvedTitle}</DialogPrimitive.Title>\n      <CommandPrimitive\n        data-slot=\"command-menu-root\"\n        className={cn(\n          'mx-auto flex w-full max-w-xl flex-col overflow-hidden rounded-lg border border-input bg-background shadow-lg',\n          contentClassName,\n        )}\n        {...commandProps}\n      >\n        {children}\n      </CommandPrimitive>\n    </DialogPrimitive.Content>\n  </CommandMenuPortal>\n  )\n})\nCommandMenuContent.displayName = 'CommandMenuContent'\n\nexport type CommandMenuInputProps = React.ComponentPropsWithoutRef<\n  typeof CommandPrimitive.Input\n> & {\n  /** Show the trailing `\u2318K` hint. Default `true`. */\n  showShortcut?: boolean\n  /** Custom shortcut label. Default `\u2318K`. */\n  shortcutLabel?: string\n  /** Show the trailing \u00D7 clear button when the input has a value. Default `true`. */\n  showClear?: boolean\n  /** Accessible label for the clear button. Default `'Clear search'`. */\n  clearAriaLabel?: string\n  /** Container className override (border / padding / row). */\n  wrapperClassName?: string\n}\n\nconst CommandMenuInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  CommandMenuInputProps\n>(\n  (\n    {\n      className,\n      wrapperClassName,\n      showShortcut = true,\n      shortcutLabel = '\u2318K',\n      showClear = true,\n      clearAriaLabel = 'Clear search',\n      value,\n      defaultValue,\n      onValueChange,\n      ...props\n    },\n    ref,\n  ) => {\n    const isControlled = value !== undefined\n    const [internal, setInternal] = React.useState<string>(\n      typeof defaultValue === 'string' ? defaultValue : '',\n    )\n    const currentValue = isControlled ? (value as string) : internal\n\n    const handleChange = React.useCallback(\n      (next: string) => {\n        if (!isControlled) setInternal(next)\n        onValueChange?.(next)\n      },\n      [isControlled, onValueChange],\n    )\n\n    return (\n      <div\n        data-slot=\"command-menu-input-wrapper\"\n        className={cn(\n          'flex h-12 items-center gap-2 border-b border-input px-4',\n          wrapperClassName,\n        )}\n      >\n        <Search\n          aria-hidden=\"true\"\n          className=\"size-4 shrink-0 text-muted-foreground\"\n          data-slot=\"command-menu-input-icon\"\n        />\n        <CommandPrimitive.Input\n          ref={ref}\n          data-slot=\"command-menu-input\"\n          value={currentValue}\n          onValueChange={handleChange}\n          className={cn(\n            'flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none',\n            className,\n          )}\n          {...props}\n        />\n        {showClear && currentValue.length > 0 ? (\n          <button\n            type=\"button\"\n            data-slot=\"command-menu-input-clear\"\n            aria-label={clearAriaLabel}\n            onClick={() => handleChange('')}\n            className={cn(\n              'inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none transition-colors',\n              'hover:bg-muted/40 hover:text-foreground',\n              'focus-visible:shadow-focus',\n            )}\n          >\n            <X aria-hidden=\"true\" className=\"size-3.5\" />\n          </button>\n        ) : showShortcut ? (\n          <Kbd\n            data-slot=\"command-menu-input-shortcut\"\n            className=\"shrink-0\"\n          >\n            {shortcutLabel}\n          </Kbd>\n        ) : null}\n      </div>\n    )\n  },\n)\nCommandMenuInput.displayName = 'CommandMenuInput'\n\nconst CommandMenuList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List\n    ref={ref}\n    data-slot=\"command-menu-list\"\n    className={cn(\n      'max-h-[420px] overflow-y-auto overflow-x-hidden p-2',\n      className,\n    )}\n    {...props}\n  />\n))\nCommandMenuList.displayName = 'CommandMenuList'\n\nconst CommandMenuEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Empty\n    ref={ref}\n    data-slot=\"command-menu-empty\"\n    className={cn(\n      'py-8 text-center text-sm text-muted-foreground',\n      className,\n    )}\n    {...props}\n  />\n))\nCommandMenuEmpty.displayName = 'CommandMenuEmpty'\n\nexport type CommandMenuGroupProps = React.ComponentPropsWithoutRef<\n  typeof CommandPrimitive.Group\n> & {\n  /** Optional trailing \"see all\"-style affordance shown next to the heading. */\n  actionLabel?: string\n  /** Click handler for the trailing action. Renders an arrow icon when set. */\n  onAction?: () => void\n  /** Accessible label for the trailing action button. Default uses `actionLabel`. */\n  actionAriaLabel?: string\n}\n\nconst CommandMenuGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  CommandMenuGroupProps\n>(\n  (\n    { className, heading, actionLabel, onAction, actionAriaLabel, children, ...props },\n    ref,\n  ) => {\n    const hasAction = onAction !== undefined\n    return (\n      <CommandPrimitive.Group\n        ref={ref}\n        data-slot=\"command-menu-group\"\n        heading={heading}\n        className={cn(\n          'overflow-hidden text-foreground',\n          '[&_[cmdk-group-heading]]:flex [&_[cmdk-group-heading]]:items-center [&_[cmdk-group-heading]]:justify-between',\n          '[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5',\n          '[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',\n          className,\n        )}\n        {...props}\n      >\n        {hasAction ? (\n          <div\n            data-slot=\"command-menu-group-action\"\n            className=\"-mt-7 mb-1 flex justify-end px-2\"\n          >\n            <button\n              type=\"button\"\n              onClick={onAction}\n              aria-label={actionAriaLabel ?? actionLabel ?? 'See all'}\n              className={cn(\n                'inline-flex items-center gap-1 rounded-md text-xs font-medium text-muted-foreground outline-none transition-colors',\n                'hover:text-foreground focus-visible:shadow-focus',\n              )}\n            >\n              {actionLabel}\n              <ChevronRight aria-hidden=\"true\" className=\"size-3\" />\n            </button>\n          </div>\n        ) : null}\n        {children}\n      </CommandPrimitive.Group>\n    )\n  },\n)\nCommandMenuGroup.displayName = 'CommandMenuGroup'\n\nexport type CommandMenuItemProps = React.ComponentPropsWithoutRef<\n  typeof CommandPrimitive.Item\n> & {\n  /** Optional leading slot \u2014 avatar, icon, flag, brand mark, etc. */\n  leading?: React.ReactNode\n  /** Optional secondary line beneath the label. */\n  description?: React.ReactNode\n  /** Optional trailing keyboard hint. */\n  shortcut?: React.ReactNode\n  /** Hide the auto chevron-right trailing affordance. Default `false`. */\n  hideChevron?: boolean\n}\n\nconst CommandMenuItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  CommandMenuItemProps\n>(\n  (\n    {\n      className,\n      children,\n      leading,\n      description,\n      shortcut,\n      hideChevron = false,\n      ...props\n    },\n    ref,\n  ) => (\n    <CommandPrimitive.Item\n      ref={ref}\n      data-slot=\"command-menu-item\"\n      className={cn(\n        'group relative flex w-full cursor-pointer select-none items-center gap-3 rounded-md px-2 py-2 text-sm text-foreground outline-none',\n        'data-[selected=true]:bg-muted/40',\n        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {leading ? (\n        <span\n          data-slot=\"command-menu-item-leading\"\n          aria-hidden=\"true\"\n          className=\"flex size-6 shrink-0 items-center justify-center\"\n        >\n          {leading}\n        </span>\n      ) : null}\n      <div\n        data-slot=\"command-menu-item-text\"\n        className=\"min-w-0 flex-1\"\n      >\n        <div className=\"truncate text-sm font-medium text-foreground\">\n          {children}\n        </div>\n        {description ? (\n          <div\n            data-slot=\"command-menu-item-description\"\n            className=\"truncate text-xs text-muted-foreground\"\n          >\n            {description}\n          </div>\n        ) : null}\n      </div>\n      {shortcut ? (\n        <span\n          data-slot=\"command-menu-item-shortcut\"\n          className=\"ml-auto shrink-0\"\n        >\n          {shortcut}\n        </span>\n      ) : !hideChevron ? (\n        <ChevronRight\n          aria-hidden=\"true\"\n          data-slot=\"command-menu-item-chevron\"\n          className=\"ml-auto size-4 shrink-0 text-muted-foreground opacity-0 transition-opacity group-data-[selected=true]:opacity-100\"\n        />\n      ) : null}\n    </CommandPrimitive.Item>\n  ),\n)\nCommandMenuItem.displayName = 'CommandMenuItem'\n\nconst CommandMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator\n    ref={ref}\n    data-slot=\"command-menu-separator\"\n    className={cn('-mx-2 my-2 h-px bg-input', className)}\n    {...props}\n  />\n))\nCommandMenuSeparator.displayName = 'CommandMenuSeparator'\n\nexport type CommandMenuFooterProps = React.HTMLAttributes<HTMLDivElement> & {\n  /** Override the left-side shortcut hints (defaults to \u2191/\u2193 Navigate, \u21B5 Select). */\n  hints?: React.ReactNode\n  /** Optional right-side help affordance (\"Any problem? Contact\"). */\n  helpSlot?: React.ReactNode\n}\n\nconst CommandMenuFooter = React.forwardRef<HTMLDivElement, CommandMenuFooterProps>(\n  ({ className, hints, helpSlot, ...props }, ref) => {\n    const t = useT()\n    return (\n    <div\n      ref={ref}\n      data-slot=\"command-menu-footer\"\n      className={cn(\n        'flex items-center justify-between gap-3 border-t border-input px-3 py-2 text-xs text-muted-foreground',\n        className,\n      )}\n      {...props}\n    >\n      <div data-slot=\"command-menu-footer-hints\" className=\"flex items-center gap-3\">\n        {hints ?? (\n          <>\n            <span className=\"inline-flex items-center gap-1\">\n              <Kbd>{'\u2191'}</Kbd>\n              <Kbd>{'\u2193'}</Kbd>\n              <span>{t('ui.commandMenu.footer.navigate', 'Navigate')}</span>\n            </span>\n            <span className=\"inline-flex items-center gap-1\">\n              <Kbd>{'\u21B5'}</Kbd>\n              <span>{t('ui.commandMenu.footer.select', 'Select')}</span>\n            </span>\n          </>\n        )}\n      </div>\n      {helpSlot ? (\n        <div data-slot=\"command-menu-footer-help\">{helpSlot}</div>\n      ) : null}\n    </div>\n    )\n  },\n)\nCommandMenuFooter.displayName = 'CommandMenuFooter'\n\nexport {\n  CommandMenu,\n  CommandMenuTrigger,\n  CommandMenuPortal,\n  CommandMenuClose,\n  CommandMenuOverlay,\n  CommandMenuContent,\n  CommandMenuInput,\n  CommandMenuList,\n  CommandMenuEmpty,\n  CommandMenuGroup,\n  CommandMenuItem,\n  CommandMenuSeparator,\n  CommandMenuFooter,\n}\n"],
+  "mappings": "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",
+  "names": []
+}