@ngrok/mantle 0.66.0 → 0.66.2

package/dist/command.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/command/command.tsx","../src/components/command/meta-key.tsx"],"sourcesContent":["\"use client\";\n\nimport { MagnifyingGlassIcon } from \"@phosphor-icons/react/MagnifyingGlass\";\nimport { Command as CommandPrimitive, useCommandState } from \"cmdk\";\n\nimport { type ComponentPropsWithoutRef, type ComponentRef, forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Dialog } from \"../dialog/dialog.js\";\nimport { Separator } from \"../separator/separator.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/command#commandroot\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(\"bg-popover flex h-full w-full flex-col overflow-hidden rounded-md\", className)}\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/command#commanddialog\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/command#commanddialog\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/command#commandinput\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#commandlist\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(\"max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto scrollbar\", className)}\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#commandempty\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={cx(\"py-6 text-center text-sm\", className)}\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#commandgroup\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#commandseparator\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<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator\n\t\tref={ref}\n\t\tdata-slot=\"command-separator\"\n\t\tclassName={cx(\"-mx-1 my-1 w-auto\", className)}\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#commanditem\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#commandshortcut\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<ComponentRef<\"span\">, ComponentPropsWithoutRef<\"span\">>(\n\t({ className, ...props }, ref) => (\n\t\t<span\n\t\t\tref={ref}\n\t\t\tdata-slot=\"command-shortcut\"\n\t\t\tclassName={cx(\"text-muted ml-auto text-xs tracking-widest\", className)}\n\t\t\t{...props}\n\t\t/>\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\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#commandroot\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#commanddialog\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#commandinput\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#commandlist\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#commandempty\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#commandgroup\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#commanditem\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#commandshortcut\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 separator component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commandseparator\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Separator />\n\t * ```\n\t */\n\tSeparator: CommandSeparator,\n} as const;\n\nexport {\n\t//,\n\tCommand,\n\tuseCommandState,\n};\n","import { type ComponentProps, useEffect, useState } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Kbd } from \"../kbd/kbd.js\";\n\ntype Props = Omit<ComponentProps<\"kbd\">, \"children\">;\n\ntype Mod = \"⌘\" | \"⌃\";\n\n/**\n * Renders the platform-appropriate meta key kbd (⌘ or ⌃).\n *\n * - Initializes to `\"⌃\"` to avoid SSR mismatch.\n * - Updates on mount using `detectMetaKey()`.\n */\nfunction MetaKey({ className, ...props }: Props) {\n\tconst [glyph, setGlyph] = useState<Mod>(\"⌃\");\n\n\tuseEffect(() => {\n\t\tsetGlyph(detectMetaKey());\n\t}, []);\n\n\tconst label = glyph === \"⌘\" ? \"Command\" : \"Control\";\n\n\treturn (\n\t\t<Kbd\n\t\t\t{...props}\n\t\t\tsuppressHydrationWarning\n\t\t\tclassName={cx(glyph === \"⌃\" && \"font-medium\", className)}\n\t\t>\n\t\t\t<span className=\"sr-only\">{label}</span>\n\t\t\t{glyph}\n\t\t</Kbd>\n\t);\n}\n\nexport {\n\t//,\n\tMetaKey,\n};\n\n/**\n * Type guard for `navigator.userAgentData` existence.\n * Useful for newer UA hints where `platform` may be available.\n *\n * @param navigator The global `navigator`\n * @returns `true` if UA Data hints exist; narrows `navigator` accordingly.\n */\nfunction hasUAData(\n\tnavigator: Navigator,\n): navigator is Navigator & { userAgentData: { platform?: string } } {\n\treturn \"userAgentData\" in navigator;\n}\n\n/**\n * Detects the appropriate meta key label for the current platform.\n *\n * SSR-safe: returns `\"⌃\"` when `navigator` is not available.\n *\n * @returns `\"⌘\"` for Apple platforms; otherwise `\"⌃\"`.\n */\nfunction detectMetaKey(): Mod {\n\tif (typeof navigator === \"undefined\") {\n\t\treturn \"⌃\"; // SSR default\n\t}\n\n\tlet platform = \"\";\n\n\tif (hasUAData(navigator)) {\n\t\tplatform = navigator.userAgentData.platform ?? \"\";\n\t}\n\n\tif (!platform) {\n\t\tplatform = navigator.platform || navigator.userAgent || \"\";\n\t}\n\n\tconst isApple = /mac|iphone|ipad|ipod/i.test(platform);\n\n\tif (isApple) {\n\t\treturn \"⌘\";\n\t}\n\n\treturn \"⌃\";\n}\n"],"mappings":"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","names":["MagnifyingGlassIcon","CommandPrimitive","useCommandState","forwardRef","jsx","jsxs","CommandRoot","forwardRef","className","props","ref","CommandPrimitive","cx","CommandDialog","children","description","filter","shouldFilter","showCloseButton","title","Dialog","CommandInput","MagnifyingGlassIcon","CommandList","CommandEmpty","CommandGroup","CommandSeparator","Separator","CommandItem","CommandShortcut","Command","useEffect","useState","jsx","jsxs","MetaKey","className","props","glyph","setGlyph","useState","useEffect","detectMetaKey","label","Kbd","cx","hasUAData","navigator","detectMetaKey","platform"]}
+{"version":3,"file":"command.js","names":["CommandPrimitive"],"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 { type ComponentPropsWithoutRef, type ComponentRef, forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Dialog } from \"../dialog/dialog.js\";\nimport { Separator } from \"../separator/separator.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/command#commandroot\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(\"bg-popover flex h-full w-full flex-col overflow-hidden rounded-md\", className)}\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/command#commanddialog\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/command#commanddialog\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/command#commandinput\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#commandlist\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(\"max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto scrollbar\", className)}\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#commandempty\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={cx(\"py-6 text-center text-sm\", className)}\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#commandgroup\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#commandseparator\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<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator\n\t\tref={ref}\n\t\tdata-slot=\"command-separator\"\n\t\tclassName={cx(\"-mx-1 my-1 w-auto\", className)}\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#commanditem\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#commandshortcut\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<ComponentRef<\"span\">, ComponentPropsWithoutRef<\"span\">>(\n\t({ className, ...props }, ref) => (\n\t\t<span\n\t\t\tref={ref}\n\t\t\tdata-slot=\"command-shortcut\"\n\t\t\tclassName={cx(\"text-muted ml-auto text-xs tracking-widest\", className)}\n\t\t\t{...props}\n\t\t/>\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\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#commandroot\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#commanddialog\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#commandinput\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#commandlist\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#commandempty\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#commandgroup\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#commanditem\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#commandshortcut\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 separator component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commandseparator\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Separator />\n\t * ```\n\t */\n\tSeparator: CommandSeparator,\n} as const;\n\nexport {\n\t//,\n\tCommand,\n\tuseCommandState,\n};\n","import { type ComponentProps, useEffect, useState } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Kbd } from \"../kbd/kbd.js\";\n\ntype Props = Omit<ComponentProps<\"kbd\">, \"children\">;\n\ntype Mod = \"⌘\" | \"⌃\";\n\n/**\n * Renders the platform-appropriate meta key kbd (⌘ or ⌃).\n *\n * - Initializes to `\"⌃\"` to avoid SSR mismatch.\n * - Updates on mount using `detectMetaKey()`.\n */\nfunction MetaKey({ className, ...props }: Props) {\n\tconst [glyph, setGlyph] = useState<Mod>(\"⌃\");\n\n\tuseEffect(() => {\n\t\tsetGlyph(detectMetaKey());\n\t}, []);\n\n\tconst label = glyph === \"⌘\" ? \"Command\" : \"Control\";\n\n\treturn (\n\t\t<Kbd\n\t\t\t{...props}\n\t\t\tsuppressHydrationWarning\n\t\t\tclassName={cx(glyph === \"⌃\" && \"font-medium\", className)}\n\t\t>\n\t\t\t<span className=\"sr-only\">{label}</span>\n\t\t\t{glyph}\n\t\t</Kbd>\n\t);\n}\n\nexport {\n\t//,\n\tMetaKey,\n};\n\n/**\n * Type guard for `navigator.userAgentData` existence.\n * Useful for newer UA hints where `platform` may be available.\n *\n * @param navigator The global `navigator`\n * @returns `true` if UA Data hints exist; narrows `navigator` accordingly.\n */\nfunction hasUAData(\n\tnavigator: Navigator,\n): navigator is Navigator & { userAgentData: { platform?: string } } {\n\treturn \"userAgentData\" in navigator;\n}\n\n/**\n * Detects the appropriate meta key label for the current platform.\n *\n * SSR-safe: returns `\"⌃\"` when `navigator` is not available.\n *\n * @returns `\"⌘\"` for Apple platforms; otherwise `\"⌃\"`.\n */\nfunction detectMetaKey(): Mod {\n\tif (typeof navigator === \"undefined\") {\n\t\treturn \"⌃\"; // SSR default\n\t}\n\n\tlet platform = \"\";\n\n\tif (hasUAData(navigator)) {\n\t\tplatform = navigator.userAgentData.platform ?? \"\";\n\t}\n\n\tif (!platform) {\n\t\tplatform = navigator.platform || navigator.userAgent || \"\";\n\t}\n\n\tconst isApple = /mac|iphone|ipad|ipod/i.test(platform);\n\n\tif (isApple) {\n\t\treturn \"⌘\";\n\t}\n\n\treturn \"⌃\";\n}\n"],"mappings":"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"}

package/dist/compose-refs-DeIsFv68.js

@@ -0,0 +1,2 @@
+import{useCallback as e}from"react";function t(...e){return t=>{for(let n of e)typeof n==`function`?n(t):n!=null&&(n.current=t)}}function n(...n){return e(()=>t(...n),[n])}export{n,t};
+//# sourceMappingURL=compose-refs-DeIsFv68.js.map

package/dist/compose-refs-DeIsFv68.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compose-refs-DeIsFv68.js","names":[],"sources":["../src/utils/compose-refs/compose-refs.tsx"],"sourcesContent":["import type { MutableRefObject, Ref } from \"react\";\nimport { useCallback } from \"react\";\n\ntype PossibleRef<T> = Ref<T> | undefined;\n\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n */\nfunction composeRefs<T>(...refs: PossibleRef<T>[]) {\n\treturn (node: T) => {\n\t\tfor (const ref of refs) {\n\t\t\tif (typeof ref === \"function\") {\n\t\t\t\tref(node);\n\t\t\t} else if (ref != null) {\n\t\t\t\t(ref as MutableRefObject<T>).current = node;\n\t\t\t}\n\t\t}\n\t};\n}\n\n/**\n * A custom hook that composes multiple refs\n * Accepts callback refs and RefObject(s)\n */\nfunction useComposedRefs<T>(...refs: PossibleRef<T>[]) {\n\treturn useCallback(() => composeRefs(...refs), [refs]);\n}\n\nexport { composeRefs, useComposedRefs };\n"],"mappings":"oCASA,SAAS,EAAe,GAAG,EAAwB,CAClD,MAAQ,IAAY,CACnB,IAAK,IAAM,KAAO,EACb,OAAO,GAAQ,WAClB,EAAI,EAAK,CACC,GAAO,OAChB,EAA4B,QAAU,IAU3C,SAAS,EAAmB,GAAG,EAAwB,CACtD,OAAO,MAAkB,EAAY,GAAG,EAAK,CAAE,CAAC,EAAK,CAAC"}

package/dist/cx-bKromGBh.js

@@ -0,0 +1,2 @@
+import{clsx as e}from"clsx";import{extendTailwindMerge as t}from"tailwind-merge";const n=t({extend:{classGroups:{"font-size":[`text-mono`,`text-size-inherit`]}}});function r(...t){return n(e(t))}export{r as t};
+//# sourceMappingURL=cx-bKromGBh.js.map

package/dist/cx-bKromGBh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cx-bKromGBh.js","names":[],"sources":["../src/utils/cx/cx.ts"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n\textend: {\n\t\tclassGroups: {\n\t\t\t\"font-size\": [\"text-mono\", \"text-size-inherit\"],\n\t\t},\n\t},\n});\n\n/**\n * Conditionally add Tailwind (and other) CSS classes.\n *\n * Allows for tailwind overrides in LTR-specificity-like order of applied classes.\n */\nexport function cx(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n"],"mappings":"iFAGA,MAAM,EAAU,EAAoB,CACnC,OAAQ,CACP,YAAa,CACZ,YAAa,CAAC,YAAa,oBAAoB,CAC/C,CACD,CACD,CAAC,CAOF,SAAgB,EAAG,GAAG,EAAsB,CAC3C,OAAO,EAAQ,EAAK,EAAO,CAAC"}

package/dist/cx.d.ts

@@ -1,10 +1,12 @@
-import { ClassValue } from 'clsx';
+import { ClassValue } from "clsx";
 
+//#region src/utils/cx/cx.d.ts
 /**
  * Conditionally add Tailwind (and other) CSS classes.
  *
  * Allows for tailwind overrides in LTR-specificity-like order of applied classes.
  */
 declare function cx(...inputs: ClassValue[]): string;
-
+//#endregion
 export { cx };
+//# sourceMappingURL=cx.d.ts.map

package/dist/cx.js

@@ -1,2 +1 @@
-import{a as o}from"./chunk-PFXFESEN.js";export{o as cx};
-//# sourceMappingURL=cx.js.map
+import{t as e}from"./cx-bKromGBh.js";export{e as cx};

package/dist/data-table.d.ts

@@ -1,21 +1,19 @@
-import { Table as Table$1, HeaderContext, Row as Row$1 } from '@tanstack/react-table';
-export * from '@tanstack/react-table';
-import * as react from 'react';
-import { ComponentProps, ReactNode } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { d as SortingMode } from './direction-DHheuUag.js';
-import { B as Button } from './button-DLUUf_c-.js';
-import { Table } from './table.js';
-import './deep-non-nullable-SmpSvoSd.js';
-import 'class-variance-authority';
-import 'class-variance-authority/types';
-import './variant-props-oDo2u-We.js';
+import { t as Button } from "./button-B6StZJsz.js";
+import { s as SortingMode } from "./direction-deXpJFDZ.js";
+import { t as Table$1 } from "./table-Dpt192qt.js";
+import * as react from "react";
+import { ComponentProps, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { HeaderContext, Row, Table } from "@tanstack/react-table";
+export * from "@tanstack/react-table";
 
+//#region src/components/data-table/types.d.ts
 declare const sortDirections: readonly ["asc", "desc", "unsorted"];
 type SortDirection = (typeof sortDirections)[number];
-
-type DataTableProps<TData> = ComponentProps<typeof Table.Root> & {
-    table: Table$1<TData>;
+//#endregion
+//#region src/components/data-table/data-table.d.ts
+type DataTableProps<TData> = ComponentProps<typeof Table$1.Root> & {
+  table: Table<TData>;
 };
 /**
  * A data table component that provides sorting and other data table functionality.
@@ -33,37 +31,41 @@ type DataTableProps<TData> = ComponentProps<typeof Table.Root> & {
  * </DataTable>
  * ```
  */
-declare function Root<TData>({ children, table, ...props }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
+declare function Root<TData>({
+  children,
+  table,
+  ...props
+}: DataTableProps<TData>): react_jsx_runtime0.JSX.Element;
 declare namespace Root {
-    var displayName: string;
+  var displayName: string;
 }
 type DataTableHeaderSortButtonProps<TData, TValue> = Omit<ComponentProps<typeof Button>, "icon"> & Pick<HeaderContext<TData, TValue>, "column"> & ({
-    /**
-     * Disable sorting for this column.
-     * It will prevent the sorting direction from being toggled and any icon
-     * from being shown.
-     */
-    disableSorting: true;
-    /**
-     * Use this to render a custom sort icon for the column if it is sortable
-     * and you want to override the default sort icon
-     */
-    sortIcon?: undefined;
-    /**
-     * The sorting mode of the column, whether it is alphanumeric or time based.
-     */
-    sortingMode?: undefined;
+  /**
+   * Disable sorting for this column.
+   * It will prevent the sorting direction from being toggled and any icon
+   * from being shown.
+   */
+  disableSorting: true;
+  /**
+   * Use this to render a custom sort icon for the column if it is sortable
+   * and you want to override the default sort icon
+   */
+  sortIcon?: undefined;
+  /**
+   * The sorting mode of the column, whether it is alphanumeric or time based.
+   */
+  sortingMode?: undefined;
 } | {
-    disableSorting?: false;
-    /**
-     * Use this to render a custom sort icon for the column if it is sortable
-     * and you want to override the default sort icon
-     */
-    sortIcon?: (sortDirection: SortDirection) => ReactNode;
-    /**
-     * The sorting mode of the column, whether it is alphanumeric or time based.
-     */
-    sortingMode: SortingMode;
+  disableSorting?: false;
+  /**
+   * Use this to render a custom sort icon for the column if it is sortable
+   * and you want to override the default sort icon
+   */
+  sortIcon?: (sortDirection: SortDirection) => ReactNode;
+  /**
+   * The sorting mode of the column, whether it is alphanumeric or time based.
+   */
+  sortingMode: SortingMode;
 });
 /**
  * A sortable button toggle for a column header in a data table.
@@ -86,11 +88,21 @@ type DataTableHeaderSortButtonProps<TData, TValue> = Omit<ComponentProps<typeof
  * - For alphanumeric sorting: unsorted ➡️ ascending ➡️ descending ➡️ unsorted
  * - For time sorting: unsorted ➡️ newest-to-oldest ➡️ oldest-to-newest ➡️ unsorted
  */
-declare function HeaderSortButton<TData, TValue>({ children, className, column, disableSorting, iconPlacement, sortingMode, sortIcon: propSortIcon, onClick, ...props }: DataTableHeaderSortButtonProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+declare function HeaderSortButton<TData, TValue>({
+  children,
+  className,
+  column,
+  disableSorting,
+  iconPlacement,
+  sortingMode,
+  sortIcon: propSortIcon,
+  onClick,
+  ...props
+}: DataTableHeaderSortButtonProps<TData, TValue>): react_jsx_runtime0.JSX.Element;
 declare namespace HeaderSortButton {
-    var displayName: string;
+  var displayName: string;
 }
-type DataTableHeaderProps = ComponentProps<typeof Table.Header>;
+type DataTableHeaderProps = ComponentProps<typeof Table$1.Header>;
 /**
  * A header for a data table.
  * This is typically used to wrap the `DataTable.HeaderSortButton` component.
@@ -106,31 +118,45 @@ type DataTableHeaderProps = ComponentProps<typeof Table.Header>;
  * </DataTable.Header>
  * ```
  */
-declare function Header({ children, className, ...props }: DataTableHeaderProps): react_jsx_runtime.JSX.Element;
+declare function Header({
+  children,
+  className,
+  ...props
+}: DataTableHeaderProps): react_jsx_runtime0.JSX.Element;
 declare namespace Header {
-    var displayName: string;
+  var displayName: string;
 }
-type DataTableHeadProps = Omit<ComponentProps<typeof Table.Head>, "children">;
-declare function Head<TData>(props: DataTableHeadProps): react_jsx_runtime.JSX.Element;
+type DataTableHeadProps = Omit<ComponentProps<typeof Table$1.Head>, "children">;
+declare function Head<TData>(props: DataTableHeadProps): react_jsx_runtime0.JSX.Element;
 declare namespace Head {
-    var displayName: string;
+  var displayName: string;
 }
-type DataTableRowProps<TData> = Omit<ComponentProps<typeof Table.Row>, "children"> & {
-    row: Row$1<TData>;
+type DataTableRowProps<TData> = Omit<ComponentProps<typeof Table$1.Row>, "children"> & {
+  row: Row<TData>;
 };
-declare function Row<TData>({ row, ...props }: DataTableRowProps<TData>): react_jsx_runtime.JSX.Element;
-declare namespace Row {
-    var displayName: string;
+declare function Row$1<TData>({
+  row,
+  ...props
+}: DataTableRowProps<TData>): react_jsx_runtime0.JSX.Element;
+declare namespace Row$1 {
+  var displayName: string;
 }
-type DataTableEmptyRowProps = ComponentProps<typeof Table.Row>;
-declare function EmptyRow<TData>({ children, ...props }: DataTableEmptyRowProps): react_jsx_runtime.JSX.Element;
+type DataTableEmptyRowProps = ComponentProps<typeof Table$1.Row>;
+declare function EmptyRow<TData>({
+  children,
+  ...props
+}: DataTableEmptyRowProps): react_jsx_runtime0.JSX.Element;
 declare namespace EmptyRow {
-    var displayName: string;
+  var displayName: string;
 }
-type DataTableActionCellProps = ComponentProps<typeof Table.Cell>;
-declare function ActionCell({ children, className, ...props }: DataTableActionCellProps): react_jsx_runtime.JSX.Element;
+type DataTableActionCellProps = ComponentProps<typeof Table$1.Cell>;
+declare function ActionCell({
+  children,
+  className,
+  ...props
+}: DataTableActionCellProps): react_jsx_runtime0.JSX.Element;
 declare namespace ActionCell {
-    var displayName: string;
+  var displayName: string;
 }
 /**
  * A data table component that provides sorting and other data table functionality.
@@ -149,128 +175,129 @@ declare namespace ActionCell {
  * ```
  */
 declare const DataTable: {
-    /**
-     * The root container of the data table component.
-     *
-     * @see https://mantle.ngrok.com/components/data-table#datatableroot
-     *
-     * @example
-     * ```tsx
-     * <DataTable.Root table={table}>
-     *   <DataTable.Head />
-     *   <DataTable.Body>
-     *     <DataTable.Rows />
-     *   </DataTable.Body>
-     * </DataTable.Root>
-     * ```
-     */
-    readonly Root: typeof Root;
-    /**
-     * A sticky action cell positioned at the end of each row for action buttons.
-     *
-     * @see https://mantle.ngrok.com/components/data-table#datatableactioncell
-     *
-     * @example
-     * ```tsx
-     * <DataTable.ActionCell>
-     *   <Button size="sm">Edit</Button>
-     *   <Button size="sm">Delete</Button>
-     * </DataTable.ActionCell>
-     * ```
-     */
-    readonly ActionCell: typeof ActionCell;
-    /**
-     * A table cell component for rendering individual data cells.
-     *
-     * @see https://mantle.ngrok.com/components/data-table#datatablecell
-     *
-     * @example
-     * ```tsx
-     * <DataTable.Cell>
-     *   Cell content
-     * </DataTable.Cell>
-     * ```
-     */
-    readonly Cell: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & react.RefAttributes<HTMLTableDataCellElement>>;
-    /**
-     * The table body container for rows of data.
-     *
-     * @see https://mantle.ngrok.com/components/data-table#datatablebody
-     *
-     * @example
-     * ```tsx
-     * <DataTable.Body>
-     *   <DataTable.Rows />
-     * </DataTable.Body>
-     * ```
-     */
-    readonly Body: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & react.RefAttributes<HTMLTableSectionElement>>;
-    /**
-     * An empty state row that spans all columns when there's no data to display.
-     *
-     * @see https://mantle.ngrok.com/components/data-table#datatableemptyrow
-     *
-     * @example
-     * ```tsx
-     * <DataTable.EmptyRow>
-     *   No data available
-     * </DataTable.EmptyRow>
-     * ```
-     */
-    readonly EmptyRow: typeof EmptyRow;
-    /**
-     * The table header container that renders column headers automatically.
-     *
-     * @see https://mantle.ngrok.com/components/data-table#datatablehead
-     *
-     * @example
-     * ```tsx
-     * <DataTable.Head />
-     * ```
-     */
-    readonly Head: typeof Head;
-    /**
-     * A header cell component optimized for data table header actions.
-     *
-     * @see https://mantle.ngrok.com/components/data-table#datatableheader
-     *
-     * @example
-     * ```tsx
-     * <DataTable.Header>
-     *   <DataTable.HeaderSortButton column={column} sortingMode="alphanumeric">
-     *     Column Title
-     *   </DataTable.HeaderSortButton>
-     * </DataTable.Header>
-     * ```
-     */
-    readonly Header: typeof Header;
-    /**
-     * A sortable button toggle for column headers with sorting functionality.
-     *
-     * @see https://mantle.ngrok.com/components/data-table#datatableheadersortbutton
-     *
-     * @example
-     * ```tsx
-     * <DataTable.HeaderSortButton
-     *   column={column}
-     *   sortingMode="alphanumeric"
-     * >
-     *   Column Title
-     * </DataTable.HeaderSortButton>
-     * ```
-     */
-    readonly HeaderSortButton: typeof HeaderSortButton;
-    /**
-     * A single data table row component for rendering custom row layouts.
-     *
-     * @see https://mantle.ngrok.com/components/data-table#datatablerow
-     *
-     * @example
-     * ```tsx
-     * <DataTable.Row row={row} />
-     * ```
-     */
-    readonly Row: typeof Row;
+  /**
+   * The root container of the data table component.
+   *
+   * @see https://mantle.ngrok.com/components/data-table#datatableroot
+   *
+   * @example
+   * ```tsx
+   * <DataTable.Root table={table}>
+   *   <DataTable.Head />
+   *   <DataTable.Body>
+   *     <DataTable.Rows />
+   *   </DataTable.Body>
+   * </DataTable.Root>
+   * ```
+   */
+  readonly Root: typeof Root;
+  /**
+   * A sticky action cell positioned at the end of each row for action buttons.
+   *
+   * @see https://mantle.ngrok.com/components/data-table#datatableactioncell
+   *
+   * @example
+   * ```tsx
+   * <DataTable.ActionCell>
+   *   <Button size="sm">Edit</Button>
+   *   <Button size="sm">Delete</Button>
+   * </DataTable.ActionCell>
+   * ```
+   */
+  readonly ActionCell: typeof ActionCell;
+  /**
+   * A table cell component for rendering individual data cells.
+   *
+   * @see https://mantle.ngrok.com/components/data-table#datatablecell
+   *
+   * @example
+   * ```tsx
+   * <DataTable.Cell>
+   *   Cell content
+   * </DataTable.Cell>
+   * ```
+   */
+  readonly Cell: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & react.RefAttributes<HTMLTableDataCellElement>>;
+  /**
+   * The table body container for rows of data.
+   *
+   * @see https://mantle.ngrok.com/components/data-table#datatablebody
+   *
+   * @example
+   * ```tsx
+   * <DataTable.Body>
+   *   <DataTable.Rows />
+   * </DataTable.Body>
+   * ```
+   */
+  readonly Body: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & react.RefAttributes<HTMLTableSectionElement>>;
+  /**
+   * An empty state row that spans all columns when there's no data to display.
+   *
+   * @see https://mantle.ngrok.com/components/data-table#datatableemptyrow
+   *
+   * @example
+   * ```tsx
+   * <DataTable.EmptyRow>
+   *   No data available
+   * </DataTable.EmptyRow>
+   * ```
+   */
+  readonly EmptyRow: typeof EmptyRow;
+  /**
+   * The table header container that renders column headers automatically.
+   *
+   * @see https://mantle.ngrok.com/components/data-table#datatablehead
+   *
+   * @example
+   * ```tsx
+   * <DataTable.Head />
+   * ```
+   */
+  readonly Head: typeof Head;
+  /**
+   * A header cell component optimized for data table header actions.
+   *
+   * @see https://mantle.ngrok.com/components/data-table#datatableheader
+   *
+   * @example
+   * ```tsx
+   * <DataTable.Header>
+   *   <DataTable.HeaderSortButton column={column} sortingMode="alphanumeric">
+   *     Column Title
+   *   </DataTable.HeaderSortButton>
+   * </DataTable.Header>
+   * ```
+   */
+  readonly Header: typeof Header;
+  /**
+   * A sortable button toggle for column headers with sorting functionality.
+   *
+   * @see https://mantle.ngrok.com/components/data-table#datatableheadersortbutton
+   *
+   * @example
+   * ```tsx
+   * <DataTable.HeaderSortButton
+   *   column={column}
+   *   sortingMode="alphanumeric"
+   * >
+   *   Column Title
+   * </DataTable.HeaderSortButton>
+   * ```
+   */
+  readonly HeaderSortButton: typeof HeaderSortButton;
+  /**
+   * A single data table row component for rendering custom row layouts.
+   *
+   * @see https://mantle.ngrok.com/components/data-table#datatablerow
+   *
+   * @example
+   * ```tsx
+   * <DataTable.Row row={row} />
+   * ```
+   */
+  readonly Row: typeof Row$1;
 };
-
+//#endregion
 export { DataTable };
+//# sourceMappingURL=data-table.d.ts.map