@ngrok/mantle 0.57.4 → 0.58.0

package/dist/chunk-73NJNP7Y.js

@@ -0,0 +1,2 @@
+import{a as n}from"./chunk-PFXFESEN.js";import{jsx as r}from"react/jsx-runtime";function m({children:o,className:e,...t}){return r("kbd",{className:n("[font-kerning:normal] [font-variant-ligatures:common-ligatures_contextual]","appearance-none tabular-nums inline-grid place-items-center size-5 bg-neutral-200 px-1 rounded text-mono leading-none font-mono",e),...t,children:o})}export{m as a};
+//# sourceMappingURL=chunk-73NJNP7Y.js.map

package/dist/chunk-73NJNP7Y.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/kbd/kbd.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * A square, centered keyboard “key” chip for rendering shortcut hints\n * (e.g., \"K\", \"⌘\", \"⌃\"). Designed so every key—letters and modifiers—shares\n * the same visual height/width and baseline. Renders a native `<kbd>` element.\n *\n * Accessibility:\n * - When showing a symbol (⌘/⌃), provide an accessible name via `aria-label`\n *   or include an sr-only label inside. The visible glyph may be marked\n *   `aria-hidden`.\n *\n * @example Basic letter key\n * <Kbd>K</Kbd>\n */\nfunction Kbd({ children, className, ...props }: ComponentProps<\"kbd\">) {\n\treturn (\n\t\t<kbd\n\t\t\tclassName={cx(\n\t\t\t\t\"[font-kerning:normal] [font-variant-ligatures:common-ligatures_contextual]\",\n\t\t\t\t\"appearance-none tabular-nums inline-grid place-items-center size-5 bg-neutral-200 px-1 rounded text-mono leading-none font-mono\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</kbd>\n\t);\n}\n\nexport {\n\t//,\n\tKbd,\n};\n"],"mappings":"wCAkBE,cAAAA,MAAA,oBAFF,SAASC,EAAI,CAAE,SAAAC,EAAU,UAAAC,EAAW,GAAGC,CAAM,EAA0B,CACtE,OACCJ,EAAC,OACA,UAAWK,EACV,6EACA,kIACAF,CACD,EACC,GAAGC,EAEH,SAAAF,EACF,CAEF","names":["jsx","Kbd","children","className","props","cx"]}

package/dist/command.d.ts

@@ -1,8 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ComponentPropsWithoutRef } from 'react';
-import { Dialog } from './dialog.js';
+import { ComponentPropsWithoutRef, ComponentProps } from 'react';
+import { Command as Command$1 } from 'cmdk';
 export { useCommandState } from 'cmdk';
+import { Dialog } from './dialog.js';
 import '@radix-ui/react-dialog';
 import './icon-button-D4BTvC7F.js';
 import 'class-variance-authority/types';
@@ -12,6 +13,7 @@ import 'class-variance-authority';
 import './deep-non-nullable-SmpSvoSd.js';
 import './primitive-CBR_XmVa.js';
 
+type CommandRootProps = ComponentPropsWithoutRef<typeof Command$1>;
 /**
  * The props for the CommandDialog component.
  *
@@ -34,6 +36,18 @@ type CommandDialogProps = ComponentPropsWithoutRef<typeof Dialog.Root> & {
      * Whether to show the close button.
      */
     showCloseButton?: boolean;
+    /**
+     * Custom filter function for the command list.
+     *
+     * @see https://github.com/pacocoursey/cmdk?tab=readme-ov-file#filtering
+     */
+    filter?: CommandRootProps["filter"];
+    /**
+     * Whether to enable filtering of command items. When false, disables built-in filtering.
+     *
+     * @see https://github.com/pacocoursey/cmdk?tab=readme-ov-file#filtering
+     */
+    shouldFilter?: CommandRootProps["shouldFilter"];
 };
 /**
  * The command component for the Command. It provides the command for the command palette.
@@ -109,7 +123,7 @@ declare const Command: {
      * ```
      */
     readonly Dialog: {
-        ({ title, description, children, className, showCloseButton, ...props }: CommandDialogProps): react_jsx_runtime.JSX.Element;
+        ({ children, className, description, filter, shouldFilter, showCloseButton, title, ...props }: CommandDialogProps): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
     /**
@@ -247,12 +261,13 @@ declare const Command: {
     } & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 };
 
+type Props = Omit<ComponentProps<"kbd">, "children">;
 /**
- * Renders the platform-appropriate meta key label (⌘ or Ctrl).
+ * Renders the platform-appropriate meta key kbd (⌘ or ⌃).
  *
- * - Initializes to `"Ctrl"` to avoid SSR mismatch.
+ * - Initializes to `"⌃"` to avoid SSR mismatch.
  * - Updates on mount using `detectMetaKey()`.
  */
-declare function MetaKey(): react_jsx_runtime.JSX.Element;
+declare function MetaKey({ className, ...props }: Props): react_jsx_runtime.JSX.Element;
 
 export { Command, MetaKey };

package/dist/command.js

@@ -1,2 +1,2 @@
-import{a as r}from"./chunk-GPMVEDRP.js";import"./chunk-VIKPHWPP.js";import"./chunk-WY3TZBNK.js";import"./chunk-VBNDWNIJ.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import"./chunk-QXNUFNG4.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-2NIR7PCL.js";import"./chunk-NZ6DRFAL.js";import{a as m}from"./chunk-PFXFESEN.js";import{MagnifyingGlassIcon as N}from"@phosphor-icons/react/MagnifyingGlass";import{Command as i,useCommandState as R}from"cmdk";import{forwardRef as n}from"react";import{jsx as a,jsxs as p}from"react/jsx-runtime";var s=n(({className:t,...o},e)=>a(i,{ref:e,"data-slot":"command",className:m("bg-popover flex h-full w-full flex-col overflow-hidden rounded-md",t),...o}));s.displayName="Command";var d=({title:t="Command Palette",description:o="Search for a command to run...",children:e,className:v,showCloseButton:y=!0,...x})=>p(r.Root,{...x,children:[p(r.Header,{className:"sr-only absolute",children:[a(r.Title,{children:t}),a(r.Description,{children:o})]}),p(r.Content,{className:m("overflow-hidden p-0 relative",v),children:[a(s,{className:"**:[[cmdk-group-heading]]:text-muted **:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",children:e}),y&&a("div",{className:"absolute top-1.5 right-1.5",children:a(r.CloseIconButton,{})})]})]});d.displayName="CommandDialog";var l=n(({className:t,...o},e)=>p("div",{ref:e,"data-slot":"command-input-wrapper",className:"flex h-9 items-center gap-2 border-b border-popover px-3",children:[a(N,{className:"size-4 shrink-0 opacity-50"}),a(i.Input,{"data-slot":"command-input",className:m("placeholder:text-muted flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",t),...o})]}));l.displayName="CommandInput";var c=n(({className:t,...o},e)=>a(i.List,{ref:e,"data-slot":"command-list",className:m("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto scrollbar",t),...o}));c.displayName="CommandList";var u=n(({className:t,...o},e)=>a(i.Empty,{ref:e,"data-slot":"command-empty",className:"py-6 text-center text-sm",...o}));u.displayName="CommandEmpty";var f=n(({className:t,...o},e)=>a(i.Group,{ref:e,"data-slot":"command-group",className:m("**:[[cmdk-group-heading]]:text-muted overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium",t),...o}));f.displayName="CommandGroup";var g=n(({className:t,...o},e)=>a(i.Separator,{ref:e,"data-slot":"command-separator",className:m("dark-high-contrast:bg-black high-contrast:bg-black bg-gray-500/20 dark:bg-gray-600/20 -mx-1 h-px",t),...o}));g.displayName="CommandSeparator";var C=n(({className:t,...o},e)=>a(i.Item,{ref:e,"data-slot":"command-item",className:m("data-[selected=true]:bg-popover-hover [&_svg:not([class*='text-'])]:text-muted relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",t),...o}));C.displayName="CommandItem";var h=n(({className:t,...o},e)=>a("span",{ref:e,"data-slot":"command-shortcut",className:m("text-muted ml-auto text-xs tracking-widest",t),...o}));h.displayName="CommandShortcut";var k={Root:s,Dialog:d,Input:l,List:c,Empty:u,Group:f,Item:C,Shortcut:h,Separator:g};import{useEffect as b,useState as P}from"react";import{jsx as I}from"react/jsx-runtime";function D(){let[t,o]=P("Ctrl");return b(()=>{o(_())},[]),I("span",{suppressHydrationWarning:!0,children:t})}function w(t){return"userAgentData"in t}function _(){if(typeof navigator>"u")return"Ctrl";let t="";return w(navigator)&&(t=navigator.userAgentData.platform??""),t||(t=navigator.platform||navigator.userAgent||""),/mac|iphone|ipad|ipod/i.test(t)?"\u2318":"Ctrl"}export{k as Command,D as MetaKey,R as useCommandState};
+import{a as r}from"./chunk-GPMVEDRP.js";import{a as c}from"./chunk-73NJNP7Y.js";import"./chunk-VIKPHWPP.js";import"./chunk-WY3TZBNK.js";import"./chunk-VBNDWNIJ.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import"./chunk-QXNUFNG4.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-2NIR7PCL.js";import"./chunk-NZ6DRFAL.js";import{a as m}from"./chunk-PFXFESEN.js";import{MagnifyingGlassIcon as k}from"@phosphor-icons/react/MagnifyingGlass";import{Command as i,useCommandState as b}from"cmdk";import{forwardRef as n}from"react";import{jsx as a,jsxs as p}from"react/jsx-runtime";var l=n(({className:o,...e},t)=>a(i,{ref:t,"data-slot":"command",className:m("bg-popover flex h-full w-full flex-col overflow-hidden rounded-md",o),...e}));l.displayName="Command";var u=({children:o,className:e,description:t="Search for a command to run...",filter:s,shouldFilter:d,showCloseButton:R=!0,title:N="Command Palette",...P})=>p(r.Root,{...P,children:[p(r.Header,{className:"sr-only absolute",children:[a(r.Title,{children:N}),a(r.Description,{children:t})]}),p(r.Content,{className:m("overflow-hidden p-0 relative",e),children:[a(l,{className:"**:[[cmdk-group-heading]]:text-muted **:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",filter:s,shouldFilter:d,children:o}),R&&a("div",{className:"absolute top-1.5 right-1.5",children:a(r.CloseIconButton,{})})]})]});u.displayName="CommandDialog";var f=n(({className:o,...e},t)=>p("div",{ref:t,"data-slot":"command-input-wrapper",className:"flex h-9 items-center gap-2 border-b border-popover px-3",children:[a(k,{className:"size-4 shrink-0 opacity-50"}),a(i.Input,{"data-slot":"command-input",className:m("placeholder:text-muted flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",o),...e})]}));f.displayName="CommandInput";var g=n(({className:o,...e},t)=>a(i.List,{ref:t,"data-slot":"command-list",className:m("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto scrollbar",o),...e}));g.displayName="CommandList";var C=n(({className:o,...e},t)=>a(i.Empty,{ref:t,"data-slot":"command-empty",className:"py-6 text-center text-sm",...e}));C.displayName="CommandEmpty";var h=n(({className:o,...e},t)=>a(i.Group,{ref:t,"data-slot":"command-group",className:m("**:[[cmdk-group-heading]]:text-muted overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium",o),...e}));h.displayName="CommandGroup";var y=n(({className:o,...e},t)=>a(i.Separator,{ref:t,"data-slot":"command-separator",className:m("dark-high-contrast:bg-black high-contrast:bg-black bg-gray-500/20 dark:bg-gray-600/20 -mx-1 h-px",o),...e}));y.displayName="CommandSeparator";var v=n(({className:o,...e},t)=>a(i.Item,{ref:t,"data-slot":"command-item",className:m("data-[selected=true]:bg-popover-hover [&_svg:not([class*='text-'])]:text-muted relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",o),...e}));v.displayName="CommandItem";var x=n(({className:o,...e},t)=>a("span",{ref:t,"data-slot":"command-shortcut",className:m("text-muted ml-auto text-xs tracking-widest",o),...e}));x.displayName="CommandShortcut";var D={Root:l,Dialog:u,Input:f,List:g,Empty:C,Group:h,Item:v,Shortcut:x,Separator:y};import{useEffect as w,useState as _}from"react";import{jsx as A,jsxs as G}from"react/jsx-runtime";function I({className:o,...e}){let[t,s]=_("\u2303");w(()=>{s(W())},[]);let d=t==="\u2318"?"Command":"Control";return G(c,{...e,suppressHydrationWarning:!0,className:m(t==="\u2303"&&"font-medium",o),children:[A("span",{className:"sr-only",children:d}),t]})}function S(o){return"userAgentData"in o}function W(){if(typeof navigator>"u")return"\u2303";let o="";return S(navigator)&&(o=navigator.userAgentData.platform??""),o||(o=navigator.platform||navigator.userAgent||""),/mac|iphone|ipad|ipod/i.test(o)?"\u2318":"\u2303"}export{D as Command,I as MetaKey,b as useCommandState};
 //# sourceMappingURL=command.js.map

package/dist/command.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/command/command.tsx","../src/components/command/meta-key.tsx"],"sourcesContent":["\"use client\";\n\nimport { MagnifyingGlassIcon } from \"@phosphor-icons/react/MagnifyingGlass\";\nimport { Command as CommandPrimitive, useCommandState } from \"cmdk\";\n\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tforwardRef,\n} from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Dialog } from \"../dialog/dialog.js\";\n\n/**\n * The root component for the Command. It provides the context for all other command sub-components.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-root\n *\n * @example\n * ```tsx\n * <Command.Root>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Root>\n */\nconst CommandRoot = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive\n\t\tref={ref}\n\t\tdata-slot=\"command\"\n\t\tclassName={cx(\n\t\t\t\"bg-popover flex h-full w-full flex-col overflow-hidden rounded-md\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandRoot.displayName = \"Command\";\n\n/**\n * The props for the CommandDialog component.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-dialog\n */\ntype CommandDialogProps = ComponentPropsWithoutRef<typeof Dialog.Root> & {\n\t/**\n\t * The title of the command dialog.\n\t */\n\ttitle?: string;\n\t/**\n\t * The description of the command dialog.\n\t */\n\tdescription?: string;\n\t/**\n\t * Class name(s) to apply to the command dialog content.\n\t */\n\tclassName?: string;\n\t/**\n\t * Whether to show the close button.\n\t */\n\tshowCloseButton?: boolean;\n};\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n * The root stateful component for the CommandDialog.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-dialog\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandDialog = ({\n\ttitle = \"Command Palette\",\n\tdescription = \"Search for a command to run...\",\n\tchildren,\n\tclassName,\n\tshowCloseButton = true,\n\t...props\n}: CommandDialogProps) => (\n\t<Dialog.Root {...props}>\n\t\t<Dialog.Header className=\"sr-only absolute\">\n\t\t\t<Dialog.Title>{title}</Dialog.Title>\n\t\t\t<Dialog.Description>{description}</Dialog.Description>\n\t\t</Dialog.Header>\n\t\t<Dialog.Content className={cx(\"overflow-hidden p-0 relative\", className)}>\n\t\t\t<CommandRoot className=\"**:[[cmdk-group-heading]]:text-muted **:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n\t\t\t\t{children}\n\t\t\t</CommandRoot>\n\t\t\t{showCloseButton && (\n\t\t\t\t<div className=\"absolute top-1.5 right-1.5\">\n\t\t\t\t\t<Dialog.CloseIconButton />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</Dialog.Content>\n\t</Dialog.Root>\n);\nCommandDialog.displayName = \"CommandDialog\";\n\n/**\n * The input component for the Command. It provides the input for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-input\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandInput = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n\t<div\n\t\tref={ref}\n\t\tdata-slot=\"command-input-wrapper\"\n\t\tclassName=\"flex h-9 items-center gap-2 border-b border-popover px-3\"\n\t>\n\t\t<MagnifyingGlassIcon className=\"size-4 shrink-0 opacity-50\" />\n\t\t<CommandPrimitive.Input\n\t\t\tdata-slot=\"command-input\"\n\t\t\tclassName={cx(\n\t\t\t\t\"placeholder:text-muted flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</div>\n));\nCommandInput.displayName = \"CommandInput\";\n\n/**\n * The list component for the Command. It provides the list for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-list\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandList = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.List\n\t\tref={ref}\n\t\tdata-slot=\"command-list\"\n\t\tclassName={cx(\n\t\t\t\"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto scrollbar\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandList.displayName = \"CommandList\";\n\n/**\n * The empty component for the Command. It provides the empty state for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-empty\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandEmpty = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Empty\n\t\tref={ref}\n\t\tdata-slot=\"command-empty\"\n\t\tclassName=\"py-6 text-center text-sm\"\n\t\t{...props}\n\t/>\n));\nCommandEmpty.displayName = \"CommandEmpty\";\n\n/**\n * The group component for the Command. It provides the group for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-group\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandGroup = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Group\n\t\tref={ref}\n\t\tdata-slot=\"command-group\"\n\t\tclassName={cx(\n\t\t\t\"**:[[cmdk-group-heading]]:text-muted overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandGroup.displayName = \"CommandGroup\";\n\n/**\n * The separator component for the Command. It provides the separator for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-separator\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandSeparator = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Separator\n\t\tref={ref}\n\t\tdata-slot=\"command-separator\"\n\t\tclassName={cx(\n\t\t\t\"dark-high-contrast:bg-black high-contrast:bg-black bg-gray-500/20 dark:bg-gray-600/20 -mx-1 h-px\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandSeparator.displayName = \"CommandSeparator\";\n\n/**\n * The item component for the Command. It provides the item for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-item\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandItem = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Item\n\t\tref={ref}\n\t\tdata-slot=\"command-item\"\n\t\tclassName={cx(\n\t\t\t\"data-[selected=true]:bg-popover-hover [&_svg:not([class*='text-'])]:text-muted relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandItem.displayName = \"CommandItem\";\n\n/**\n * The shortcut component for the Command. It provides the shortcut for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-shortcut\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *         <Command.Shortcut>⌘,</Command.Shortcut>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandShortcut = forwardRef<\n\tComponentRef<\"span\">,\n\tComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n\t<span\n\t\tref={ref}\n\t\tdata-slot=\"command-shortcut\"\n\t\tclassName={cx(\"text-muted ml-auto text-xs tracking-widest\", className)}\n\t\t{...props}\n\t/>\n));\nCommandShortcut.displayName = \"CommandShortcut\";\n\n/**\n * The command component for the Command. It provides the command for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst Command = {\n\t/**\n\t * The root component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Root>\n\t *   <Command.Input placeholder=\"Type a command or search...\" />\n\t *   <Command.List>\n\t *     <Command.Empty>No results found.</Command.Empty>\n\t *   </Command.List>\n\t * </Command.Root>\n\t * ```\n\t */\n\tRoot: CommandRoot,\n\t/**\n\t * The dialog component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-dialog\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Dialog>\n\t *   <Command.Input placeholder=\"Type a command or search...\" />\n\t *   <Command.List>\n\t *     <Command.Empty>No results found.</Command.Empty>\n\t *   </Command.List>\n\t * </Command.Dialog>\n\t * ```\n\t */\n\tDialog: CommandDialog,\n\t/**\n\t * The input component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-input\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Input placeholder=\"Type a command or search...\" />\n\t * ```\n\t */\n\tInput: CommandInput,\n\t/**\n\t * The list component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-list\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.List>\n\t *   <Command.Empty>No results found.</Command.Empty>\n\t * </Command.List>\n\t */\n\tList: CommandList,\n\t/**\n\t * The empty component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-empty\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Empty>No results found.</Command.Empty>\n\t * ```\n\t */\n\tEmpty: CommandEmpty,\n\t/**\n\t * The group component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-group\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Group heading=\"Suggestions\">\n\t *   <Command.Item>\n\t *     Calendar\n\t *   </Command.Item>\n\t * </Command.Group>\n\t * ```\n\t */\n\tGroup: CommandGroup,\n\t/**\n\t * The item component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-item\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Item>\n\t *   Calendar\n\t * </Command.Item>\n\t * ```\n\t */\n\tItem: CommandItem,\n\t/**\n\t * The shortcut component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-shortcut\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Shortcut>⌘,</Command.Shortcut>\n\t * ```\n\t */\n\tShortcut: CommandShortcut,\n\t/**\n\t * The seprator component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-separator\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Separator />\n\t * ```\n\t */\n\tSeparator: CommandSeparator,\n} as const;\n\nexport {\n\t//,\n\tCommand,\n\tuseCommandState,\n};\n","import { useEffect, useState } from \"react\";\n\n/**\n * Renders the platform-appropriate meta key label (⌘ or Ctrl).\n *\n * - Initializes to `\"Ctrl\"` to avoid SSR mismatch.\n * - Updates on mount using `detectMetaKey()`.\n */\nfunction MetaKey() {\n\tconst [label, setLabel] = useState<\"⌘\" | \"Ctrl\">(\"Ctrl\");\n\n\tuseEffect(() => {\n\t\tsetLabel(detectMetaKey());\n\t}, []);\n\n\treturn <span suppressHydrationWarning>{label}</span>;\n}\n\nexport {\n\t//,\n\tMetaKey,\n};\n\n/**\n * Type guard for `navigator.userAgentData` existence.\n * Useful for newer UA hints where `platform` may be available.\n *\n * @param navigator The global `navigator`\n * @returns `true` if UA Data hints exist; narrows `navigator` accordingly.\n */\nfunction hasUAData(\n\tnavigator: Navigator,\n): navigator is Navigator & { userAgentData: { platform?: string } } {\n\treturn \"userAgentData\" in navigator;\n}\n\n/**\n * Detects the appropriate meta key label for the current platform.\n *\n * SSR-safe: returns `\"Ctrl\"` when `navigator` is not available.\n *\n * @returns `\"⌘\"` for Apple platforms; otherwise `\"Ctrl\"`.\n */\nfunction detectMetaKey(): \"⌘\" | \"Ctrl\" {\n\tif (typeof navigator === \"undefined\") {\n\t\treturn \"Ctrl\"; // SSR default\n\t}\n\n\tlet platform = \"\";\n\n\tif (hasUAData(navigator)) {\n\t\tplatform = navigator.userAgentData.platform ?? \"\";\n\t}\n\n\tif (!platform) {\n\t\tplatform = navigator.platform || navigator.userAgent || \"\";\n\t}\n\n\tconst isApple = /mac|iphone|ipad|ipod/i.test(platform);\n\n\tif (isApple) {\n\t\treturn \"⌘\";\n\t}\n\n\treturn \"Ctrl\";\n}\n"],"mappings":"gaAEA,OAAS,uBAAAA,MAA2B,wCACpC,OAAS,WAAWC,EAAkB,mBAAAC,MAAuB,OAE7D,OAGC,cAAAC,MACM,QAiCN,cAAAC,EAuEC,QAAAC,MAvED,oBAJD,IAAMC,EAAcC,EAGlB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BN,EAACO,EAAA,CACA,IAAKD,EACL,YAAU,UACV,UAAWE,EACV,oEACAJ,CACD,EACC,GAAGC,EACL,CACA,EACDH,EAAY,YAAc,UAoD1B,IAAMO,EAAgB,CAAC,CACtB,MAAAC,EAAQ,kBACR,YAAAC,EAAc,iCACd,SAAAC,EACA,UAAAR,EACA,gBAAAS,EAAkB,GAClB,GAAGR,CACJ,IACCJ,EAACa,EAAO,KAAP,CAAa,GAAGT,EAChB,UAAAJ,EAACa,EAAO,OAAP,CAAc,UAAU,mBACxB,UAAAd,EAACc,EAAO,MAAP,CAAc,SAAAJ,EAAM,EACrBV,EAACc,EAAO,YAAP,CAAoB,SAAAH,EAAY,GAClC,EACAV,EAACa,EAAO,QAAP,CAAe,UAAWN,EAAG,+BAAgCJ,CAAS,EACtE,UAAAJ,EAACE,EAAA,CAAY,UAAU,oZACrB,SAAAU,EACF,EACCC,GACAb,EAAC,OAAI,UAAU,6BACd,SAAAA,EAACc,EAAO,gBAAP,EAAuB,EACzB,GAEF,GACD,EAEDL,EAAc,YAAc,gBA2B5B,IAAMM,EAAeZ,EAGnB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BL,EAAC,OACA,IAAKK,EACL,YAAU,wBACV,UAAU,2DAEV,UAAAN,EAACgB,EAAA,CAAoB,UAAU,6BAA6B,EAC5DhB,EAACO,EAAiB,MAAjB,CACA,YAAU,gBACV,UAAWC,EACV,gJACAJ,CACD,EACC,GAAGC,EACL,GACD,CACA,EACDU,EAAa,YAAc,eA2B3B,IAAME,EAAcd,EAGlB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BN,EAACO,EAAiB,KAAjB,CACA,IAAKD,EACL,YAAU,eACV,UAAWE,EACV,wEACAJ,CACD,EACC,GAAGC,EACL,CACA,EACDY,EAAY,YAAc,cA2B1B,IAAMC,EAAef,EAGnB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BN,EAACO,EAAiB,MAAjB,CACA,IAAKD,EACL,YAAU,gBACV,UAAU,2BACT,GAAGD,EACL,CACA,EACDa,EAAa,YAAc,eA2B3B,IAAMC,EAAehB,EAGnB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BN,EAACO,EAAiB,MAAjB,CACA,IAAKD,EACL,YAAU,gBACV,UAAWE,EACV,mMACAJ,CACD,EACC,GAAGC,EACL,CACA,EACDc,EAAa,YAAc,eA2B3B,IAAMC,EAAmBjB,EAGvB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BN,EAACO,EAAiB,UAAjB,CACA,IAAKD,EACL,YAAU,oBACV,UAAWE,EACV,mGACAJ,CACD,EACC,GAAGC,EACL,CACA,EACDe,EAAiB,YAAc,mBA2B/B,IAAMC,EAAclB,EAGlB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BN,EAACO,EAAiB,KAAjB,CACA,IAAKD,EACL,YAAU,eACV,UAAWE,EACV,sVACAJ,CACD,EACC,GAAGC,EACL,CACA,EACDgB,EAAY,YAAc,cA4B1B,IAAMC,EAAkBnB,EAGtB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BN,EAAC,QACA,IAAKM,EACL,YAAU,mBACV,UAAWE,EAAG,6CAA8CJ,CAAS,EACpE,GAAGC,EACL,CACA,EACDiB,EAAgB,YAAc,kBA2B9B,IAAMC,EAAU,CAgBf,KAAMrB,EAgBN,OAAQO,EAWR,MAAOM,EAYP,KAAME,EAWN,MAAOC,EAeP,MAAOC,EAaP,KAAME,EAWN,SAAUC,EAWV,UAAWF,CACZ,ECjjBA,OAAS,aAAAI,EAAW,YAAAC,MAAgB,QAe5B,cAAAC,MAAA,oBAPR,SAASC,GAAU,CAClB,GAAM,CAACC,EAAOC,CAAQ,EAAIJ,EAAuB,MAAM,EAEvD,OAAAD,EAAU,IAAM,CACfK,EAASC,EAAc,CAAC,CACzB,EAAG,CAAC,CAAC,EAEEJ,EAAC,QAAK,yBAAwB,GAAE,SAAAE,EAAM,CAC9C,CAcA,SAASG,EACRC,EACoE,CACpE,MAAO,kBAAmBA,CAC3B,CASA,SAASC,GAA8B,CACtC,GAAI,OAAO,UAAc,IACxB,MAAO,OAGR,IAAIC,EAAW,GAYf,OAVIH,EAAU,SAAS,IACtBG,EAAW,UAAU,cAAc,UAAY,IAG3CA,IACJA,EAAW,UAAU,UAAY,UAAU,WAAa,IAGzC,wBAAwB,KAAKA,CAAQ,EAG7C,SAGD,MACR","names":["MagnifyingGlassIcon","CommandPrimitive","useCommandState","forwardRef","jsx","jsxs","CommandRoot","forwardRef","className","props","ref","CommandPrimitive","cx","CommandDialog","title","description","children","showCloseButton","Dialog","CommandInput","MagnifyingGlassIcon","CommandList","CommandEmpty","CommandGroup","CommandSeparator","CommandItem","CommandShortcut","Command","useEffect","useState","jsx","MetaKey","label","setLabel","detectMetaKey","hasUAData","navigator","detectMetaKey","platform"]}
+{"version":3,"sources":["../src/components/command/command.tsx","../src/components/command/meta-key.tsx"],"sourcesContent":["\"use client\";\n\nimport { MagnifyingGlassIcon } from \"@phosphor-icons/react/MagnifyingGlass\";\nimport { Command as CommandPrimitive, useCommandState } from \"cmdk\";\n\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tforwardRef,\n} from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Dialog } from \"../dialog/dialog.js\";\n\ntype CommandRootProps = ComponentPropsWithoutRef<typeof CommandPrimitive>;\n\n/**\n * The root component for the Command. It provides the context for all other command sub-components.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-root\n *\n * @example\n * ```tsx\n * <Command.Root>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Root>\n */\nconst CommandRoot = forwardRef<ComponentRef<\"div\">, CommandRootProps>(\n\t({ className, ...props }, ref) => (\n\t\t<CommandPrimitive\n\t\t\tref={ref}\n\t\t\tdata-slot=\"command\"\n\t\t\tclassName={cx(\n\t\t\t\t\"bg-popover flex h-full w-full flex-col overflow-hidden rounded-md\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nCommandRoot.displayName = \"Command\";\n\n/**\n * The props for the CommandDialog component.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-dialog\n */\ntype CommandDialogProps = ComponentPropsWithoutRef<typeof Dialog.Root> & {\n\t/**\n\t * The title of the command dialog.\n\t */\n\ttitle?: string;\n\t/**\n\t * The description of the command dialog.\n\t */\n\tdescription?: string;\n\t/**\n\t * Class name(s) to apply to the command dialog content.\n\t */\n\tclassName?: string;\n\t/**\n\t * Whether to show the close button.\n\t */\n\tshowCloseButton?: boolean;\n\t/**\n\t * Custom filter function for the command list.\n\t *\n\t * @see https://github.com/pacocoursey/cmdk?tab=readme-ov-file#filtering\n\t */\n\tfilter?: CommandRootProps[\"filter\"];\n\t/**\n\t * Whether to enable filtering of command items. When false, disables built-in filtering.\n\t *\n\t * @see https://github.com/pacocoursey/cmdk?tab=readme-ov-file#filtering\n\t */\n\tshouldFilter?: CommandRootProps[\"shouldFilter\"];\n};\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n * The root stateful component for the CommandDialog.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-dialog\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandDialog = ({\n\tchildren,\n\tclassName,\n\tdescription = \"Search for a command to run...\",\n\tfilter,\n\tshouldFilter,\n\tshowCloseButton = true,\n\ttitle = \"Command Palette\",\n\t...props\n}: CommandDialogProps) => (\n\t<Dialog.Root {...props}>\n\t\t<Dialog.Header className=\"sr-only absolute\">\n\t\t\t<Dialog.Title>{title}</Dialog.Title>\n\t\t\t<Dialog.Description>{description}</Dialog.Description>\n\t\t</Dialog.Header>\n\t\t<Dialog.Content className={cx(\"overflow-hidden p-0 relative\", className)}>\n\t\t\t<CommandRoot\n\t\t\t\tclassName=\"**:[[cmdk-group-heading]]:text-muted **:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\"\n\t\t\t\tfilter={filter}\n\t\t\t\tshouldFilter={shouldFilter}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</CommandRoot>\n\t\t\t{showCloseButton && (\n\t\t\t\t<div className=\"absolute top-1.5 right-1.5\">\n\t\t\t\t\t<Dialog.CloseIconButton />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</Dialog.Content>\n\t</Dialog.Root>\n);\nCommandDialog.displayName = \"CommandDialog\";\n\n/**\n * The input component for the Command. It provides the input for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-input\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandInput = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n\t<div\n\t\tref={ref}\n\t\tdata-slot=\"command-input-wrapper\"\n\t\tclassName=\"flex h-9 items-center gap-2 border-b border-popover px-3\"\n\t>\n\t\t<MagnifyingGlassIcon className=\"size-4 shrink-0 opacity-50\" />\n\t\t<CommandPrimitive.Input\n\t\t\tdata-slot=\"command-input\"\n\t\t\tclassName={cx(\n\t\t\t\t\"placeholder:text-muted flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</div>\n));\nCommandInput.displayName = \"CommandInput\";\n\n/**\n * The list component for the Command. It provides the list for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-list\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandList = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.List\n\t\tref={ref}\n\t\tdata-slot=\"command-list\"\n\t\tclassName={cx(\n\t\t\t\"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto scrollbar\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandList.displayName = \"CommandList\";\n\n/**\n * The empty component for the Command. It provides the empty state for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-empty\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandEmpty = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Empty\n\t\tref={ref}\n\t\tdata-slot=\"command-empty\"\n\t\tclassName=\"py-6 text-center text-sm\"\n\t\t{...props}\n\t/>\n));\nCommandEmpty.displayName = \"CommandEmpty\";\n\n/**\n * The group component for the Command. It provides the group for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-group\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandGroup = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Group\n\t\tref={ref}\n\t\tdata-slot=\"command-group\"\n\t\tclassName={cx(\n\t\t\t\"**:[[cmdk-group-heading]]:text-muted overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandGroup.displayName = \"CommandGroup\";\n\n/**\n * The separator component for the Command. It provides the separator for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-separator\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandSeparator = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Separator\n\t\tref={ref}\n\t\tdata-slot=\"command-separator\"\n\t\tclassName={cx(\n\t\t\t\"dark-high-contrast:bg-black high-contrast:bg-black bg-gray-500/20 dark:bg-gray-600/20 -mx-1 h-px\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandSeparator.displayName = \"CommandSeparator\";\n\n/**\n * The item component for the Command. It provides the item for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-item\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandItem = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Item\n\t\tref={ref}\n\t\tdata-slot=\"command-item\"\n\t\tclassName={cx(\n\t\t\t\"data-[selected=true]:bg-popover-hover [&_svg:not([class*='text-'])]:text-muted relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandItem.displayName = \"CommandItem\";\n\n/**\n * The shortcut component for the Command. It provides the shortcut for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-shortcut\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *         <Command.Shortcut>⌘,</Command.Shortcut>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandShortcut = forwardRef<\n\tComponentRef<\"span\">,\n\tComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n\t<span\n\t\tref={ref}\n\t\tdata-slot=\"command-shortcut\"\n\t\tclassName={cx(\"text-muted ml-auto text-xs tracking-widest\", className)}\n\t\t{...props}\n\t/>\n));\nCommandShortcut.displayName = \"CommandShortcut\";\n\n/**\n * The command component for the Command. It provides the command for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst Command = {\n\t/**\n\t * The root component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Root>\n\t *   <Command.Input placeholder=\"Type a command or search...\" />\n\t *   <Command.List>\n\t *     <Command.Empty>No results found.</Command.Empty>\n\t *   </Command.List>\n\t * </Command.Root>\n\t * ```\n\t */\n\tRoot: CommandRoot,\n\t/**\n\t * The dialog component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-dialog\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Dialog>\n\t *   <Command.Input placeholder=\"Type a command or search...\" />\n\t *   <Command.List>\n\t *     <Command.Empty>No results found.</Command.Empty>\n\t *   </Command.List>\n\t * </Command.Dialog>\n\t * ```\n\t */\n\tDialog: CommandDialog,\n\t/**\n\t * The input component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-input\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Input placeholder=\"Type a command or search...\" />\n\t * ```\n\t */\n\tInput: CommandInput,\n\t/**\n\t * The list component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-list\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.List>\n\t *   <Command.Empty>No results found.</Command.Empty>\n\t * </Command.List>\n\t */\n\tList: CommandList,\n\t/**\n\t * The empty component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-empty\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Empty>No results found.</Command.Empty>\n\t * ```\n\t */\n\tEmpty: CommandEmpty,\n\t/**\n\t * The group component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-group\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Group heading=\"Suggestions\">\n\t *   <Command.Item>\n\t *     Calendar\n\t *   </Command.Item>\n\t * </Command.Group>\n\t * ```\n\t */\n\tGroup: CommandGroup,\n\t/**\n\t * The item component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-item\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Item>\n\t *   Calendar\n\t * </Command.Item>\n\t * ```\n\t */\n\tItem: CommandItem,\n\t/**\n\t * The shortcut component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-shortcut\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Shortcut>⌘,</Command.Shortcut>\n\t * ```\n\t */\n\tShortcut: CommandShortcut,\n\t/**\n\t * The seprator component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-separator\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Separator />\n\t * ```\n\t */\n\tSeparator: CommandSeparator,\n} as const;\n\nexport {\n\t//,\n\tCommand,\n\tuseCommandState,\n};\n","import { type ComponentProps, useEffect, useState } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Kbd } from \"../kbd/kbd.js\";\n\ntype Props = Omit<ComponentProps<\"kbd\">, \"children\">;\n\ntype Mod = \"⌘\" | \"⌃\";\n\n/**\n * Renders the platform-appropriate meta key kbd (⌘ or ⌃).\n *\n * - Initializes to `\"⌃\"` to avoid SSR mismatch.\n * - Updates on mount using `detectMetaKey()`.\n */\nfunction MetaKey({ className, ...props }: Props) {\n\tconst [glyph, setGlyph] = useState<Mod>(\"⌃\");\n\n\tuseEffect(() => {\n\t\tsetGlyph(detectMetaKey());\n\t}, []);\n\n\tconst label = glyph === \"⌘\" ? \"Command\" : \"Control\";\n\n\treturn (\n\t\t<Kbd\n\t\t\t{...props}\n\t\t\tsuppressHydrationWarning\n\t\t\tclassName={cx(glyph === \"⌃\" && \"font-medium\", className)}\n\t\t>\n\t\t\t<span className=\"sr-only\">{label}</span>\n\t\t\t{glyph}\n\t\t</Kbd>\n\t);\n}\n\nexport {\n\t//,\n\tMetaKey,\n};\n\n/**\n * Type guard for `navigator.userAgentData` existence.\n * Useful for newer UA hints where `platform` may be available.\n *\n * @param navigator The global `navigator`\n * @returns `true` if UA Data hints exist; narrows `navigator` accordingly.\n */\nfunction hasUAData(\n\tnavigator: Navigator,\n): navigator is Navigator & { userAgentData: { platform?: string } } {\n\treturn \"userAgentData\" in navigator;\n}\n\n/**\n * Detects the appropriate meta key label for the current platform.\n *\n * SSR-safe: returns `\"⌃\"` when `navigator` is not available.\n *\n * @returns `\"⌘\"` for Apple platforms; otherwise `\"⌃\"`.\n */\nfunction detectMetaKey(): Mod {\n\tif (typeof navigator === \"undefined\") {\n\t\treturn \"⌃\"; // SSR default\n\t}\n\n\tlet platform = \"\";\n\n\tif (hasUAData(navigator)) {\n\t\tplatform = navigator.userAgentData.platform ?? \"\";\n\t}\n\n\tif (!platform) {\n\t\tplatform = navigator.platform || navigator.userAgent || \"\";\n\t}\n\n\tconst isApple = /mac|iphone|ipad|ipod/i.test(platform);\n\n\tif (isApple) {\n\t\treturn \"⌘\";\n\t}\n\n\treturn \"⌃\";\n}\n"],"mappings":"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","names":["MagnifyingGlassIcon","CommandPrimitive","useCommandState","forwardRef","jsx","jsxs","CommandRoot","forwardRef","className","props","ref","CommandPrimitive","cx","CommandDialog","children","description","filter","shouldFilter","showCloseButton","title","Dialog","CommandInput","MagnifyingGlassIcon","CommandList","CommandEmpty","CommandGroup","CommandSeparator","CommandItem","CommandShortcut","Command","useEffect","useState","jsx","jsxs","MetaKey","className","props","glyph","setGlyph","useState","useEffect","detectMetaKey","label","Kbd","cx","hasUAData","navigator","detectMetaKey","platform"]}

package/dist/kbd.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+/**
+ * A square, centered keyboard “key” chip for rendering shortcut hints
+ * (e.g., "K", "⌘", "⌃"). Designed so every key—letters and modifiers—shares
+ * the same visual height/width and baseline. Renders a native `<kbd>` element.
+ *
+ * Accessibility:
+ * - When showing a symbol (⌘/⌃), provide an accessible name via `aria-label`
+ *   or include an sr-only label inside. The visible glyph may be marked
+ *   `aria-hidden`.
+ *
+ * @example Basic letter key
+ * <Kbd>K</Kbd>
+ */
+declare function Kbd({ children, className, ...props }: ComponentProps<"kbd">): react_jsx_runtime.JSX.Element;
+
+export { Kbd };

package/dist/kbd.js

@@ -0,0 +1,2 @@
+import{a as o}from"./chunk-73NJNP7Y.js";import"./chunk-PFXFESEN.js";export{o as Kbd};
+//# sourceMappingURL=kbd.js.map

package/dist/kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "mantle is ngrok's UI library and design system.",
   "author": "ngrok",
   "license": "MIT",
-  "version": "0.57.4",
+  "version": "0.58.0",
   "homepage": "https://mantle.ngrok.com",
   "repository": {
     "type": "git",
@@ -217,6 +217,11 @@
       "import": "./dist/input.js",
       "types": "./dist/input.d.ts"
     },
+    "./kbd": {
+      "@ngrok/mantle/source": "./src/components/kbd/index.ts",
+      "import": "./dist/kbd.js",
+      "types": "./dist/kbd.d.ts"
+    },
     "./label": {
       "@ngrok/mantle/source": "./src/components/label/index.ts",
       "import": "./dist/label.js",