@ngrok/mantle 0.57.4 → 0.57.5
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 +16 -2
- package/dist/command.js +1 -1
- package/dist/command.js.map +1 -1
- package/package.json +1 -1
package/dist/command.d.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as react from 'react';
|
|
3
3
|
import { ComponentPropsWithoutRef } from 'react';
|
|
4
|
-
import {
|
|
4
|
+
import { Command as Command$1 } from 'cmdk';
|
|
5
5
|
export { useCommandState } from 'cmdk';
|
|
6
|
+
import { Dialog } from './dialog.js';
|
|
6
7
|
import '@radix-ui/react-dialog';
|
|
7
8
|
import './icon-button-D4BTvC7F.js';
|
|
8
9
|
import 'class-variance-authority/types';
|
|
@@ -12,6 +13,7 @@ import 'class-variance-authority';
|
|
|
12
13
|
import './deep-non-nullable-SmpSvoSd.js';
|
|
13
14
|
import './primitive-CBR_XmVa.js';
|
|
14
15
|
|
|
16
|
+
type CommandRootProps = ComponentPropsWithoutRef<typeof Command$1>;
|
|
15
17
|
/**
|
|
16
18
|
* The props for the CommandDialog component.
|
|
17
19
|
*
|
|
@@ -34,6 +36,18 @@ type CommandDialogProps = ComponentPropsWithoutRef<typeof Dialog.Root> & {
|
|
|
34
36
|
* Whether to show the close button.
|
|
35
37
|
*/
|
|
36
38
|
showCloseButton?: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* Custom filter function for the command list.
|
|
41
|
+
*
|
|
42
|
+
* @see https://github.com/pacocoursey/cmdk?tab=readme-ov-file#filtering
|
|
43
|
+
*/
|
|
44
|
+
filter?: CommandRootProps["filter"];
|
|
45
|
+
/**
|
|
46
|
+
* Whether to enable filtering of command items. When false, disables built-in filtering.
|
|
47
|
+
*
|
|
48
|
+
* @see https://github.com/pacocoursey/cmdk?tab=readme-ov-file#filtering
|
|
49
|
+
*/
|
|
50
|
+
shouldFilter?: CommandRootProps["shouldFilter"];
|
|
37
51
|
};
|
|
38
52
|
/**
|
|
39
53
|
* The command component for the Command. It provides the command for the command palette.
|
|
@@ -109,7 +123,7 @@ declare const Command: {
|
|
|
109
123
|
* ```
|
|
110
124
|
*/
|
|
111
125
|
readonly Dialog: {
|
|
112
|
-
({
|
|
126
|
+
({ children, className, description, filter, shouldFilter, showCloseButton, title, ...props }: CommandDialogProps): react_jsx_runtime.JSX.Element;
|
|
113
127
|
displayName: string;
|
|
114
128
|
};
|
|
115
129
|
/**
|
package/dist/command.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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
|
|
1
|
+
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 k}from"@phosphor-icons/react/MagnifyingGlass";import{Command as i,useCommandState as P}from"cmdk";import{forwardRef as n}from"react";import{jsx as a,jsxs as p}from"react/jsx-runtime";var s=n(({className:o,...t},e)=>a(i,{ref:e,"data-slot":"command",className:m("bg-popover flex h-full w-full flex-col overflow-hidden rounded-md",o),...t}));s.displayName="Command";var d=({children:o,className:t,description:e="Search for a command to run...",filter:v,shouldFilter:y,showCloseButton:x=!0,title:R="Command Palette",...N})=>p(r.Root,{...N,children:[p(r.Header,{className:"sr-only absolute",children:[a(r.Title,{children:R}),a(r.Description,{children:e})]}),p(r.Content,{className:m("overflow-hidden p-0 relative",t),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",filter:v,shouldFilter:y,children:o}),x&&a("div",{className:"absolute top-1.5 right-1.5",children:a(r.CloseIconButton,{})})]})]});d.displayName="CommandDialog";var l=n(({className:o,...t},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(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),...t})]}));l.displayName="CommandInput";var c=n(({className:o,...t},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",o),...t}));c.displayName="CommandList";var u=n(({className:o,...t},e)=>a(i.Empty,{ref:e,"data-slot":"command-empty",className:"py-6 text-center text-sm",...t}));u.displayName="CommandEmpty";var f=n(({className:o,...t},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",o),...t}));f.displayName="CommandGroup";var g=n(({className:o,...t},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",o),...t}));g.displayName="CommandSeparator";var C=n(({className:o,...t},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",o),...t}));C.displayName="CommandItem";var h=n(({className:o,...t},e)=>a("span",{ref:e,"data-slot":"command-shortcut",className:m("text-muted ml-auto text-xs tracking-widest",o),...t}));h.displayName="CommandShortcut";var b={Root:s,Dialog:d,Input:l,List:c,Empty:u,Group:f,Item:C,Shortcut:h,Separator:g};import{useEffect as D,useState as w}from"react";import{jsx as W}from"react/jsx-runtime";function _(){let[o,t]=w("Ctrl");return D(()=>{t(S())},[]),W("span",{suppressHydrationWarning:!0,children:o})}function I(o){return"userAgentData"in o}function S(){if(typeof navigator>"u")return"Ctrl";let o="";return I(navigator)&&(o=navigator.userAgentData.platform??""),o||(o=navigator.platform||navigator.userAgent||""),/mac|iphone|ipad|ipod/i.test(o)?"\u2318":"Ctrl"}export{b as Command,_ as MetaKey,P 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","../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"]}
|
|
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\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 { 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","children","description","filter","shouldFilter","showCloseButton","title","Dialog","CommandInput","MagnifyingGlassIcon","CommandList","CommandEmpty","CommandGroup","CommandSeparator","CommandItem","CommandShortcut","Command","useEffect","useState","jsx","MetaKey","label","setLabel","detectMetaKey","hasUAData","navigator","detectMetaKey","platform"]}
|