@ngrok/mantle 0.57.0 → 0.57.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/command.d.ts +20 -12
- package/dist/command.js +1 -1
- package/dist/command.js.map +1 -1
- package/package.json +1 -1
package/dist/command.d.ts
CHANGED
|
@@ -15,7 +15,7 @@ import './primitive-CBR_XmVa.js';
|
|
|
15
15
|
/**
|
|
16
16
|
* The props for the CommandDialog component.
|
|
17
17
|
*
|
|
18
|
-
* @see https://mantle.ngrok.com/components/command#api-command-dialog
|
|
18
|
+
* @see https://mantle.ngrok.com/components/preview/command#api-command-dialog
|
|
19
19
|
*/
|
|
20
20
|
type CommandDialogProps = ComponentPropsWithoutRef<typeof Dialog.Root> & {
|
|
21
21
|
/**
|
|
@@ -38,7 +38,7 @@ type CommandDialogProps = ComponentPropsWithoutRef<typeof Dialog.Root> & {
|
|
|
38
38
|
/**
|
|
39
39
|
* The command component for the Command. It provides the command for the command palette.
|
|
40
40
|
*
|
|
41
|
-
* @see https://mantle.ngrok.com/components/command#api-command
|
|
41
|
+
* @see https://mantle.ngrok.com/components/preview/command#api-command
|
|
42
42
|
*
|
|
43
43
|
* @example
|
|
44
44
|
* ```tsx
|
|
@@ -64,7 +64,7 @@ declare const Command: {
|
|
|
64
64
|
/**
|
|
65
65
|
* The root component for the Command component.
|
|
66
66
|
*
|
|
67
|
-
* @see https://mantle.ngrok.com/components/command#api-command-root
|
|
67
|
+
* @see https://mantle.ngrok.com/components/preview/command#api-command-root
|
|
68
68
|
*
|
|
69
69
|
* @example
|
|
70
70
|
* ```tsx
|
|
@@ -96,7 +96,7 @@ declare const Command: {
|
|
|
96
96
|
/**
|
|
97
97
|
* The dialog component for the Command component.
|
|
98
98
|
*
|
|
99
|
-
* @see https://mantle.ngrok.com/components/command#api-command-dialog
|
|
99
|
+
* @see https://mantle.ngrok.com/components/preview/command#api-command-dialog
|
|
100
100
|
*
|
|
101
101
|
* @example
|
|
102
102
|
* ```tsx
|
|
@@ -115,7 +115,7 @@ declare const Command: {
|
|
|
115
115
|
/**
|
|
116
116
|
* The input component for the Command component.
|
|
117
117
|
*
|
|
118
|
-
* @see https://mantle.ngrok.com/components/command#api-command-input
|
|
118
|
+
* @see https://mantle.ngrok.com/components/preview/command#api-command-input
|
|
119
119
|
*
|
|
120
120
|
* @example
|
|
121
121
|
* ```tsx
|
|
@@ -133,7 +133,7 @@ declare const Command: {
|
|
|
133
133
|
/**
|
|
134
134
|
* The list component for the Command component.
|
|
135
135
|
*
|
|
136
|
-
* @see https://mantle.ngrok.com/components/command#api-command-list
|
|
136
|
+
* @see https://mantle.ngrok.com/components/preview/command#api-command-list
|
|
137
137
|
*
|
|
138
138
|
* @example
|
|
139
139
|
* ```tsx
|
|
@@ -153,7 +153,7 @@ declare const Command: {
|
|
|
153
153
|
/**
|
|
154
154
|
* The empty component for the Command component.
|
|
155
155
|
*
|
|
156
|
-
* @see https://mantle.ngrok.com/components/command#api-command-empty
|
|
156
|
+
* @see https://mantle.ngrok.com/components/preview/command#api-command-empty
|
|
157
157
|
*
|
|
158
158
|
* @example
|
|
159
159
|
* ```tsx
|
|
@@ -170,7 +170,7 @@ declare const Command: {
|
|
|
170
170
|
/**
|
|
171
171
|
* The group component for the Command component.
|
|
172
172
|
*
|
|
173
|
-
* @see https://mantle.ngrok.com/components/command#api-command-group
|
|
173
|
+
* @see https://mantle.ngrok.com/components/preview/command#api-command-group
|
|
174
174
|
*
|
|
175
175
|
* @example
|
|
176
176
|
* ```tsx
|
|
@@ -195,7 +195,7 @@ declare const Command: {
|
|
|
195
195
|
/**
|
|
196
196
|
* The item component for the Command component.
|
|
197
197
|
*
|
|
198
|
-
* @see https://mantle.ngrok.com/components/command#api-command-item
|
|
198
|
+
* @see https://mantle.ngrok.com/components/preview/command#api-command-item
|
|
199
199
|
*
|
|
200
200
|
* @example
|
|
201
201
|
* ```tsx
|
|
@@ -220,7 +220,7 @@ declare const Command: {
|
|
|
220
220
|
/**
|
|
221
221
|
* The shortcut component for the Command component.
|
|
222
222
|
*
|
|
223
|
-
* @see https://mantle.ngrok.com/components/command#api-command-shortcut
|
|
223
|
+
* @see https://mantle.ngrok.com/components/preview/command#api-command-shortcut
|
|
224
224
|
*
|
|
225
225
|
* @example
|
|
226
226
|
* ```tsx
|
|
@@ -231,7 +231,7 @@ declare const Command: {
|
|
|
231
231
|
/**
|
|
232
232
|
* The seprator component for the Command component.
|
|
233
233
|
*
|
|
234
|
-
* @see https://mantle.ngrok.com/components/command#api-command-separator
|
|
234
|
+
* @see https://mantle.ngrok.com/components/preview/command#api-command-separator
|
|
235
235
|
*
|
|
236
236
|
* @example
|
|
237
237
|
* ```tsx
|
|
@@ -247,4 +247,12 @@ declare const Command: {
|
|
|
247
247
|
} & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
248
248
|
};
|
|
249
249
|
|
|
250
|
-
|
|
250
|
+
/**
|
|
251
|
+
* Renders the platform-appropriate meta key label (⌘ or Ctrl).
|
|
252
|
+
*
|
|
253
|
+
* - Initializes to `"Ctrl"` to avoid SSR mismatch.
|
|
254
|
+
* - Updates on mount using `detectMetaKey()`.
|
|
255
|
+
*/
|
|
256
|
+
declare function MetaKey(): react_jsx_runtime.JSX.Element;
|
|
257
|
+
|
|
258
|
+
export { Command, MetaKey };
|
package/dist/command.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as
|
|
1
|
+
import{a as r}from"./chunk-HEDEMKFP.js";import"./chunk-VIKPHWPP.js";import"./chunk-M32D7HYM.js";import"./chunk-F4JGJRR5.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import"./chunk-5TI54DZZ.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a as m}from"./chunk-AZ56JGNY.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};
|
|
2
2
|
//# sourceMappingURL=command.js.map
|
package/dist/command.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/command/command.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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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"],"mappings":"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","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"]}
|
|
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":"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","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"]}
|