@ngrok/mantle 0.70.0 → 0.70.1

package/dist/combobox.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./slot-D_ZUrdEW.js";import{n}from"./separator-Yk9hMn8E.js";import{createContext as r,forwardRef as i}from"react";import{jsx as a}from"react/jsx-runtime";import*as o from"@ariakit/react";const s=({children:e,...t})=>a(o.ComboboxProvider,{...t,children:e});s.displayName=`Combobox`;const c=i(({"aria-invalid":t,autoComplete:n=`list`,autoSelect:r=`always`,className:i,validation:s,...c},l)=>{let u=t!=null&&t!==`false`?`error`:typeof s==`function`?s():s,d=t??u===`error`;return a(o.Combobox,{"aria-invalid":d,autoComplete:n,autoSelect:r,className:e(`pointer-coarse:text-base h-9 text-sm`,`bg-form relative block w-full rounded-md border px-3 py-2 border-form text-strong font-sans`,`placeholder:text-placeholder`,`aria-disabled:opacity-50`,`hover:border-neutral-400`,`focus:outline-hidden focus:ring-4 aria-expanded:ring-4`,`focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent`,`data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger`,`autofill:shadow-(--color-blue-50) autofill:bg-blue-50 autofill:[-webkit-text-fill-color:var(--text-color-strong)]`,i),"data-validation":u||void 0,ref:l,...c})});c.displayName=`ComboboxInput`;const l=i(({asChild:n=!1,children:r,className:i,sameWidth:s=!0,unmountOnHide:c=!0,...l},u)=>a(o.ComboboxPopover,{className:e(`border-popover bg-popover relative z-50 max-h-96 min-w-32 scrollbar overflow-y-scroll overflow-x-hidden rounded-md border shadow-md p-1 my-2 space-y-px font-sans focus:outline-hidden`,i),ref:u,render:n?({ref:e,...n})=>a(t,{ref:e,...n}):void 0,sameWidth:s,unmountOnHide:c,...l,children:r}));l.displayName=`ComboboxContent`;const u=r(void 0),d=i(({asChild:n=!1,children:r,className:i,focusOnHover:s=!0,value:c,...l},d)=>a(u.Provider,{value:c,children:a(o.ComboboxItem,{className:e(`cursor-pointer rounded-md px-2 py-1.5 text-strong text-sm flex min-w-0 gap-2 items-center [&>svg]:size-5 [&_svg]:shrink-0`,`data-active-item:bg-active-menu-item`,`aria-disabled:opacity-50`,i),focusOnHover:s,ref:d,render:n?({ref:e,...n})=>a(t,{ref:e,...n}):void 0,value:c,...l,children:r})}));d.displayName=`ComboboxItem`;const f=i(({asChild:n=!1,children:r,className:i,...s},c)=>a(o.ComboboxGroup,{className:e(`space-y-px`,i),ref:c,render:n?({ref:e,...n})=>a(t,{ref:e,...n}):void 0,...s,children:r}));f.displayName=`ComboboxGroup`;const p=i(({asChild:n=!1,children:r,className:i,...s},c)=>a(o.ComboboxGroupLabel,{className:e(`text-muted px-2 py-1 text-xs font-medium`,i),ref:c,render:n?({ref:e,...n})=>a(t,{ref:e,...n}):void 0,...s,children:r}));p.displayName=`ComboboxGroupLabel`;const m=i(({asChild:n=!1,className:r,...i},s)=>a(o.ComboboxItemValue,{className:e(`*:data-user-value:font-medium flex-1 shrink-0 text-strong font-normal`,r),ref:s,render:n?({ref:e,...n})=>a(t,{ref:e,...n}):void 0,...i}));m.displayName=`ComboboxItemValue`;const h=i(({className:t,...r},i)=>a(n,{ref:i,className:e(`-mx-1.25 my-1 w-auto`,t),...r}));h.displayName=`ComboboxSeparator`;const g={Root:s,Content:l,Group:f,GroupLabel:p,Input:c,Item:d,ItemValue:m,Separator:h};export{g as Combobox};
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./slot-D_ZUrdEW.js";import{n}from"./separator-DyOGgFCs.js";import{createContext as r,forwardRef as i}from"react";import{jsx as a}from"react/jsx-runtime";import*as o from"@ariakit/react";const s=({children:e,...t})=>a(o.ComboboxProvider,{...t,children:e});s.displayName=`Combobox`;const c=i(({"aria-invalid":t,autoComplete:n=`list`,autoSelect:r=`always`,className:i,validation:s,...c},l)=>{let u=t!=null&&t!==`false`?`error`:typeof s==`function`?s():s,d=t??u===`error`;return a(o.Combobox,{"aria-invalid":d,autoComplete:n,autoSelect:r,"data-slot":`combobox-input`,className:e(`pointer-coarse:text-base h-9 text-sm`,`bg-form relative block w-full rounded-md border px-3 py-2 border-form text-strong font-sans`,`placeholder:text-placeholder`,`aria-disabled:opacity-50`,`hover:border-neutral-400`,`focus:outline-hidden focus:ring-4 aria-expanded:ring-4`,`focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent`,`data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger`,`autofill:shadow-(--color-blue-50) autofill:bg-blue-50 autofill:[-webkit-text-fill-color:var(--text-color-strong)]`,i),"data-validation":u||void 0,ref:l,...c})});c.displayName=`ComboboxInput`;const l=i(({asChild:n=!1,children:r,className:i,sameWidth:s=!0,unmountOnHide:c=!0,...l},u)=>a(o.ComboboxPopover,{"data-slot":`combobox-content`,className:e(`border-popover bg-popover relative z-50 max-h-96 min-w-32 scrollbar overflow-y-scroll overflow-x-hidden rounded-md border shadow-md p-1 my-2 space-y-px font-sans focus:outline-hidden`,i),ref:u,render:n?({ref:e,...n})=>a(t,{ref:e,...n}):void 0,sameWidth:s,unmountOnHide:c,...l,children:r}));l.displayName=`ComboboxContent`;const u=r(void 0),d=i(({asChild:n=!1,children:r,className:i,focusOnHover:s=!0,value:c,...l},d)=>a(u.Provider,{value:c,children:a(o.ComboboxItem,{"data-slot":`combobox-item`,className:e(`cursor-pointer rounded-md px-2 py-1.5 text-strong text-sm flex min-w-0 gap-2 items-center [&>svg]:size-5 [&_svg]:shrink-0`,`data-active-item:bg-active-menu-item`,`aria-disabled:opacity-50`,i),focusOnHover:s,ref:d,render:n?({ref:e,...n})=>a(t,{ref:e,...n}):void 0,value:c,...l,children:r})}));d.displayName=`ComboboxItem`;const f=i(({asChild:n=!1,children:r,className:i,...s},c)=>a(o.ComboboxGroup,{"data-slot":`combobox-group`,className:e(`space-y-px`,i),ref:c,render:n?({ref:e,...n})=>a(t,{ref:e,...n}):void 0,...s,children:r}));f.displayName=`ComboboxGroup`;const p=i(({asChild:n=!1,children:r,className:i,...s},c)=>a(o.ComboboxGroupLabel,{"data-slot":`combobox-group-label`,className:e(`text-muted px-2 py-1 text-xs font-medium`,i),ref:c,render:n?({ref:e,...n})=>a(t,{ref:e,...n}):void 0,...s,children:r}));p.displayName=`ComboboxGroupLabel`;const m=i(({asChild:n=!1,className:r,...i},s)=>a(o.ComboboxItemValue,{"data-slot":`combobox-item-value`,className:e(`*:data-user-value:font-medium flex-1 shrink-0 text-strong font-normal`,r),ref:s,render:n?({ref:e,...n})=>a(t,{ref:e,...n}):void 0,...i}));m.displayName=`ComboboxItemValue`;const h=i(({className:t,...r},i)=>a(n,{ref:i,"data-slot":`combobox-separator`,className:e(`-mx-1.25 my-1 w-auto`,t),...r}));h.displayName=`ComboboxSeparator`;const g={Root:s,Content:l,Group:f,GroupLabel:p,Input:c,Item:d,ItemValue:m,Separator:h};export{g as Combobox};
 //# sourceMappingURL=combobox.js.map

package/dist/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","names":[],"sources":["../src/components/combobox/combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport * as Primitive from \"@ariakit/react\";\nimport { type ComponentPropsWithoutRef, type ComponentRef, createContext, forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport type { WithValidation } from \"../input/types.js\";\nimport { Separator } from \"../separator/separator.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype ComboboxProps = Primitive.ComboboxProviderProps;\n\n/**\n * Root component for a combobox. Provides a combobox store that controls the state of Combobox components.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Item value=\"Apple\" />\n *     <Combobox.Item value=\"Banana\" />\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst Root = ({ children, ...props }: ComboboxProps) => {\n\treturn <Primitive.ComboboxProvider {...props}>{children}</Primitive.ComboboxProvider>;\n};\nRoot.displayName = \"Combobox\";\n\ntype ComboboxInputProps = Omit<\n\tPrimitive.ComboboxProps,\n\t\"render\" // we don't support a render prop for the combobox input\n> &\n\tWithValidation;\n\n/**\n * Renders a combobox input element that can be used to filter a list of items.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Item value=\"Apple\" />\n *     <Combobox.Item value=\"Banana\" />\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst Input = forwardRef<ComponentRef<\"input\">, ComboboxInputProps>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tautoComplete = \"list\",\n\t\t\tautoSelect = \"always\",\n\t\t\tclassName,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof _validation === \"function\"\n\t\t\t\t? _validation()\n\t\t\t\t: _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\n\t\treturn (\n\t\t\t<Primitive.Combobox\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tautoComplete={autoComplete}\n\t\t\t\tautoSelect={autoSelect}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"pointer-coarse:text-base h-9 text-sm\",\n\t\t\t\t\t\"bg-form relative block w-full rounded-md border px-3 py-2 border-form text-strong font-sans\",\n\t\t\t\t\t\"placeholder:text-placeholder\",\n\t\t\t\t\t\"aria-disabled:opacity-50\",\n\t\t\t\t\t\"hover:border-neutral-400\",\n\t\t\t\t\t\"focus:outline-hidden focus:ring-4 aria-expanded:ring-4\",\n\t\t\t\t\t\"focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger\",\n\t\t\t\t\t\"autofill:shadow-(--color-blue-50) autofill:bg-blue-50 autofill:[-webkit-text-fill-color:var(--text-color-strong)]\", // Autofill styling on the input itself and any children with autofill styling\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nInput.displayName = \"ComboboxInput\";\n\ntype ComboboxContentProps = Omit<Primitive.ComboboxPopoverProps, \"render\"> & WithAsChild;\n\n/**\n * Renders a popover that contains combobox content, e.g. Combobox.Items, Combobox.Groups, and Combobox.Separators.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Item value=\"Apple\" />\n *     <Combobox.Item value=\"Banana\" />\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst Content = forwardRef<ComponentRef<typeof Primitive.ComboboxPopover>, ComboboxContentProps>(\n\t(\n\t\t{ asChild = false, children, className, sameWidth = true, unmountOnHide = true, ...props },\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<Primitive.ComboboxPopover\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"border-popover bg-popover relative z-50 max-h-96 min-w-32 scrollbar overflow-y-scroll overflow-x-hidden rounded-md border shadow-md p-1 my-2 space-y-px font-sans focus:outline-hidden\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\trender={\n\t\t\t\t\tasChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined\n\t\t\t\t}\n\t\t\t\tsameWidth={sameWidth}\n\t\t\t\tunmountOnHide={unmountOnHide}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Primitive.ComboboxPopover>\n\t\t);\n\t},\n);\nContent.displayName = \"ComboboxContent\";\n\ntype ComboboxItemProps = Omit<Primitive.ComboboxItemProps, \"render\"> & WithAsChild;\n\nconst ComboboxItemValueContext = createContext<string | undefined>(undefined);\n\n/**\n * Renders a combobox item inside a Combobox.Content component.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Item value=\"Apple\" />\n *     <Combobox.Item value=\"Banana\" />\n *     <Combobox.Item value=\"Orange\" />\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst Item = forwardRef<ComponentRef<typeof Primitive.ComboboxItem>, ComboboxItemProps>(\n\t({ asChild = false, children, className, focusOnHover = true, value, ...props }, ref) => {\n\t\treturn (\n\t\t\t<ComboboxItemValueContext.Provider value={value}>\n\t\t\t\t<Primitive.ComboboxItem\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"cursor-pointer rounded-md px-2 py-1.5 text-strong text-sm flex min-w-0 gap-2 items-center [&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\t\t\t\t\"data-active-item:bg-active-menu-item\",\n\t\t\t\t\t\t\"aria-disabled:opacity-50\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tfocusOnHover={focusOnHover}\n\t\t\t\t\tref={ref}\n\t\t\t\t\trender={\n\t\t\t\t\t\tasChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined\n\t\t\t\t\t}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</Primitive.ComboboxItem>\n\t\t\t</ComboboxItemValueContext.Provider>\n\t\t);\n\t},\n);\nItem.displayName = \"ComboboxItem\";\n\ntype ComboboxGroupProps = Omit<Primitive.ComboboxGroupProps, \"render\"> & WithAsChild;\n\n/**\n * Renders a group for Combobox.Item elements.\n *\n * Optionally, a Combobox.GroupLabel can be rendered as a child to provide a label for the group.\n *\n * You should only reach for this component when it semantically makes sense to group items together, such as when a label is needed.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Group>\n *       <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>\n *       <Combobox.Item value=\"Apple\" />\n *       <Combobox.Item value=\"Banana\" />\n *     </Combobox.Group>\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst Group = forwardRef<ComponentRef<typeof Primitive.ComboboxGroup>, ComboboxGroupProps>(\n\t({ asChild = false, children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<Primitive.ComboboxGroup\n\t\t\t\tclassName={cx(\"space-y-px\", className)}\n\t\t\t\tref={ref}\n\t\t\t\trender={\n\t\t\t\t\tasChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined\n\t\t\t\t}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Primitive.ComboboxGroup>\n\t\t);\n\t},\n);\nGroup.displayName = \"ComboboxGroup\";\n\ntype ComboboxGroupLabelProps = Omit<Primitive.ComboboxGroupLabelProps, \"render\"> & WithAsChild;\n\n/**\n * Renders a label in a combobox group.\n *\n * This component should be wrapped with Combobox.Group so the aria-labelledby is correctly set on the group element.\n *\n * You should only reach for this component when it semantically makes sense to group items together, such as when a label is needed.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Group>\n *       <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>\n *       <Combobox.Item value=\"Apple\" />\n *       <Combobox.Item value=\"Banana\" />\n *     </Combobox.Group>\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst GroupLabel = forwardRef<\n\tComponentRef<typeof Primitive.ComboboxGroupLabel>,\n\tComboboxGroupLabelProps\n>(({ asChild = false, children, className, ...props }, ref) => {\n\treturn (\n\t\t<Primitive.ComboboxGroupLabel\n\t\t\tclassName={cx(\"text-muted px-2 py-1 text-xs font-medium\", className)}\n\t\t\tref={ref}\n\t\t\trender={asChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Primitive.ComboboxGroupLabel>\n\t);\n});\nGroupLabel.displayName = \"ComboboxGroupLabel\";\n\ntype ComboboxItemValueProps = Omit<Primitive.ComboboxItemValueProps<\"span\">, \"render\"> &\n\tWithAsChild;\n\n/**\n * Highlights the match between the current Combobox.Input value (userValue) and parent Combobox.Item value.\n *\n * Renders a span element with the combobox item value as children.\n * The value is split into span elements.\n * Portions of the value matching the user input will have a data-user-value attribute, while the rest will have a data-autocomplete-value attribute.\n *\n * Should only be used as a child of Combobox.Item.\n * The item value is automatically set to the value of the closest Combobox.Item component's value prop.\n * The user input value is automatically set to the combobox store's value state.\n * Both values can be overridden by providing the value and userValue props, respectively.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Item value=\"Apple\">\n *       🍎\n *       <Combobox.ItemValue />\n *     </Combobox.Item>\n *     <Combobox.Item value=\"Banana\">\n *       🍌\n *       <Combobox.ItemValue />\n *     </Combobox.Item>\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst ItemValue = forwardRef<\n\tComponentRef<typeof Primitive.ComboboxItemValue>,\n\tComboboxItemValueProps\n>(({ asChild = false, className, ...props }, ref) => {\n\treturn (\n\t\t<Primitive.ComboboxItemValue\n\t\t\tclassName={cx(\n\t\t\t\t\"*:data-user-value:font-medium flex-1 shrink-0 text-strong font-normal\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\trender={asChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nItemValue.displayName = \"ComboboxItemValue\";\n\n/**\n * Renders a separator between Combobox.Items or Combobox.Groups.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Group>\n *       <Combobox.Item value=\"Apple\" />\n *       <Combobox.Item value=\"Banana\" />\n *     </Combobox.Group>\n *     <Combobox.Separator />\n *     <Combobox.Item>\n *       Click me!\n *     </Combobox.Item>\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst ComboboxSeparatorComponent = forwardRef<\n\tComponentRef<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator ref={ref} className={cx(\"-mx-1.25 my-1 w-auto\", className)} {...props} />\n));\nComboboxSeparatorComponent.displayName = \"ComboboxSeparator\";\n\n/**\n * Fill in a React input field with autocomplete & autosuggest functionalities.\n * Choose from a list of suggested values with full keyboard support.\n * This component is based on the WAI-ARIA Combobox Pattern and is powered by the\n * ariakit Combobox.\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/\n * @see https://ariakit.org/components/combobox\n *\n * @see https://mantle.ngrok.com/components/combobox\n *\n * @example\n * Composition:\n * ```\n * Combobox.Root\n * ├── Combobox.Input\n * └── Combobox.Content\n *     ├── Combobox.Group\n *     │   ├── Combobox.GroupLabel\n *     │   └── Combobox.Item\n *     │       └── Combobox.ItemValue\n *     └── Combobox.Separator\n * ```\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Item value=\"Apple\" />\n *     <Combobox.Item value=\"Banana\" />\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst Combobox = {\n\t/**\n\t * Root component for a combobox. Provides a combobox store that controls the state of Combobox components.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Item value=\"Apple\" />\n\t *     <Combobox.Item value=\"Banana\" />\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Renders a popover that contains combobox content, e.g. Combobox.Items, Combobox.Groups, and Combobox.Separators.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Item value=\"Apple\" />\n\t *     <Combobox.Item value=\"Banana\" />\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * Renders a group for Combobox.Item elements.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxgroup\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Group>\n\t *       <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>\n\t *       <Combobox.Item value=\"Apple\" />\n\t *       <Combobox.Item value=\"Banana\" />\n\t *     </Combobox.Group>\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tGroup,\n\t/**\n\t * Renders a label in a combobox group.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxgrouplabel\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Group>\n\t *       <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>\n\t *       <Combobox.Item value=\"Apple\" />\n\t *       <Combobox.Item value=\"Banana\" />\n\t *     </Combobox.Group>\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tGroupLabel,\n\t/**\n\t * Renders a combobox input element that can be used to filter a list of items.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxinput\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Item value=\"Apple\" />\n\t *     <Combobox.Item value=\"Banana\" />\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tInput,\n\t/**\n\t * Renders a combobox item inside a Combobox.Content component.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Item value=\"Apple\" />\n\t *     <Combobox.Item value=\"Banana\" />\n\t *     <Combobox.Item value=\"Orange\" />\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * Highlights the match between the current Combobox.Input value and parent Combobox.Item value.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxitemvalue\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Item value=\"Apple\">\n\t *       🍎\n\t *       <Combobox.ItemValue />\n\t *     </Combobox.Item>\n\t *     <Combobox.Item value=\"Banana\">\n\t *       🍌\n\t *       <Combobox.ItemValue />\n\t *     </Combobox.Item>\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tItemValue,\n\t/**\n\t * Renders a separator between Combobox.Items or Combobox.Groups.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxseparator\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Group>\n\t *       <Combobox.Item value=\"Apple\" />\n\t *       <Combobox.Item value=\"Banana\" />\n\t *     </Combobox.Group>\n\t *     <Combobox.Separator />\n\t *     <Combobox.Item>\n\t *       Click me!\n\t *     </Combobox.Item>\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tSeparator: ComboboxSeparatorComponent,\n} as const;\n\nexport {\n\t//,\n\tCombobox,\n};\n"],"mappings":"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"}
+{"version":3,"file":"combobox.js","names":[],"sources":["../src/components/combobox/combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport * as Primitive from \"@ariakit/react\";\nimport { type ComponentPropsWithoutRef, type ComponentRef, createContext, forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport type { WithValidation } from \"../input/types.js\";\nimport { Separator } from \"../separator/separator.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype ComboboxProps = Primitive.ComboboxProviderProps;\n\n/**\n * Root component for a combobox. Provides a combobox store that controls the state of Combobox components.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Item value=\"Apple\" />\n *     <Combobox.Item value=\"Banana\" />\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst Root = ({ children, ...props }: ComboboxProps) => {\n\treturn <Primitive.ComboboxProvider {...props}>{children}</Primitive.ComboboxProvider>;\n};\nRoot.displayName = \"Combobox\";\n\ntype ComboboxInputProps = Omit<\n\tPrimitive.ComboboxProps,\n\t\"render\" // we don't support a render prop for the combobox input\n> &\n\tWithValidation;\n\n/**\n * Renders a combobox input element that can be used to filter a list of items.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Item value=\"Apple\" />\n *     <Combobox.Item value=\"Banana\" />\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst Input = forwardRef<ComponentRef<\"input\">, ComboboxInputProps>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tautoComplete = \"list\",\n\t\t\tautoSelect = \"always\",\n\t\t\tclassName,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof _validation === \"function\"\n\t\t\t\t? _validation()\n\t\t\t\t: _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\n\t\treturn (\n\t\t\t<Primitive.Combobox\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tautoComplete={autoComplete}\n\t\t\t\tautoSelect={autoSelect}\n\t\t\t\tdata-slot=\"combobox-input\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"pointer-coarse:text-base h-9 text-sm\",\n\t\t\t\t\t\"bg-form relative block w-full rounded-md border px-3 py-2 border-form text-strong font-sans\",\n\t\t\t\t\t\"placeholder:text-placeholder\",\n\t\t\t\t\t\"aria-disabled:opacity-50\",\n\t\t\t\t\t\"hover:border-neutral-400\",\n\t\t\t\t\t\"focus:outline-hidden focus:ring-4 aria-expanded:ring-4\",\n\t\t\t\t\t\"focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger\",\n\t\t\t\t\t\"autofill:shadow-(--color-blue-50) autofill:bg-blue-50 autofill:[-webkit-text-fill-color:var(--text-color-strong)]\", // Autofill styling on the input itself and any children with autofill styling\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nInput.displayName = \"ComboboxInput\";\n\ntype ComboboxContentProps = Omit<Primitive.ComboboxPopoverProps, \"render\"> & WithAsChild;\n\n/**\n * Renders a popover that contains combobox content, e.g. Combobox.Items, Combobox.Groups, and Combobox.Separators.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Item value=\"Apple\" />\n *     <Combobox.Item value=\"Banana\" />\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst Content = forwardRef<ComponentRef<typeof Primitive.ComboboxPopover>, ComboboxContentProps>(\n\t(\n\t\t{ asChild = false, children, className, sameWidth = true, unmountOnHide = true, ...props },\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<Primitive.ComboboxPopover\n\t\t\t\tdata-slot=\"combobox-content\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"border-popover bg-popover relative z-50 max-h-96 min-w-32 scrollbar overflow-y-scroll overflow-x-hidden rounded-md border shadow-md p-1 my-2 space-y-px font-sans focus:outline-hidden\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\trender={\n\t\t\t\t\tasChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined\n\t\t\t\t}\n\t\t\t\tsameWidth={sameWidth}\n\t\t\t\tunmountOnHide={unmountOnHide}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Primitive.ComboboxPopover>\n\t\t);\n\t},\n);\nContent.displayName = \"ComboboxContent\";\n\ntype ComboboxItemProps = Omit<Primitive.ComboboxItemProps, \"render\"> & WithAsChild;\n\nconst ComboboxItemValueContext = createContext<string | undefined>(undefined);\n\n/**\n * Renders a combobox item inside a Combobox.Content component.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Item value=\"Apple\" />\n *     <Combobox.Item value=\"Banana\" />\n *     <Combobox.Item value=\"Orange\" />\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst Item = forwardRef<ComponentRef<typeof Primitive.ComboboxItem>, ComboboxItemProps>(\n\t({ asChild = false, children, className, focusOnHover = true, value, ...props }, ref) => {\n\t\treturn (\n\t\t\t<ComboboxItemValueContext.Provider value={value}>\n\t\t\t\t<Primitive.ComboboxItem\n\t\t\t\t\tdata-slot=\"combobox-item\"\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"cursor-pointer rounded-md px-2 py-1.5 text-strong text-sm flex min-w-0 gap-2 items-center [&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\t\t\t\t\"data-active-item:bg-active-menu-item\",\n\t\t\t\t\t\t\"aria-disabled:opacity-50\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tfocusOnHover={focusOnHover}\n\t\t\t\t\tref={ref}\n\t\t\t\t\trender={\n\t\t\t\t\t\tasChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined\n\t\t\t\t\t}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</Primitive.ComboboxItem>\n\t\t\t</ComboboxItemValueContext.Provider>\n\t\t);\n\t},\n);\nItem.displayName = \"ComboboxItem\";\n\ntype ComboboxGroupProps = Omit<Primitive.ComboboxGroupProps, \"render\"> & WithAsChild;\n\n/**\n * Renders a group for Combobox.Item elements.\n *\n * Optionally, a Combobox.GroupLabel can be rendered as a child to provide a label for the group.\n *\n * You should only reach for this component when it semantically makes sense to group items together, such as when a label is needed.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Group>\n *       <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>\n *       <Combobox.Item value=\"Apple\" />\n *       <Combobox.Item value=\"Banana\" />\n *     </Combobox.Group>\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst Group = forwardRef<ComponentRef<typeof Primitive.ComboboxGroup>, ComboboxGroupProps>(\n\t({ asChild = false, children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<Primitive.ComboboxGroup\n\t\t\t\tdata-slot=\"combobox-group\"\n\t\t\t\tclassName={cx(\"space-y-px\", className)}\n\t\t\t\tref={ref}\n\t\t\t\trender={\n\t\t\t\t\tasChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined\n\t\t\t\t}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Primitive.ComboboxGroup>\n\t\t);\n\t},\n);\nGroup.displayName = \"ComboboxGroup\";\n\ntype ComboboxGroupLabelProps = Omit<Primitive.ComboboxGroupLabelProps, \"render\"> & WithAsChild;\n\n/**\n * Renders a label in a combobox group.\n *\n * This component should be wrapped with Combobox.Group so the aria-labelledby is correctly set on the group element.\n *\n * You should only reach for this component when it semantically makes sense to group items together, such as when a label is needed.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Group>\n *       <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>\n *       <Combobox.Item value=\"Apple\" />\n *       <Combobox.Item value=\"Banana\" />\n *     </Combobox.Group>\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst GroupLabel = forwardRef<\n\tComponentRef<typeof Primitive.ComboboxGroupLabel>,\n\tComboboxGroupLabelProps\n>(({ asChild = false, children, className, ...props }, ref) => {\n\treturn (\n\t\t<Primitive.ComboboxGroupLabel\n\t\t\tdata-slot=\"combobox-group-label\"\n\t\t\tclassName={cx(\"text-muted px-2 py-1 text-xs font-medium\", className)}\n\t\t\tref={ref}\n\t\t\trender={asChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Primitive.ComboboxGroupLabel>\n\t);\n});\nGroupLabel.displayName = \"ComboboxGroupLabel\";\n\ntype ComboboxItemValueProps = Omit<Primitive.ComboboxItemValueProps<\"span\">, \"render\"> &\n\tWithAsChild;\n\n/**\n * Highlights the match between the current Combobox.Input value (userValue) and parent Combobox.Item value.\n *\n * Renders a span element with the combobox item value as children.\n * The value is split into span elements.\n * Portions of the value matching the user input will have a data-user-value attribute, while the rest will have a data-autocomplete-value attribute.\n *\n * Should only be used as a child of Combobox.Item.\n * The item value is automatically set to the value of the closest Combobox.Item component's value prop.\n * The user input value is automatically set to the combobox store's value state.\n * Both values can be overridden by providing the value and userValue props, respectively.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Item value=\"Apple\">\n *       🍎\n *       <Combobox.ItemValue />\n *     </Combobox.Item>\n *     <Combobox.Item value=\"Banana\">\n *       🍌\n *       <Combobox.ItemValue />\n *     </Combobox.Item>\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst ItemValue = forwardRef<\n\tComponentRef<typeof Primitive.ComboboxItemValue>,\n\tComboboxItemValueProps\n>(({ asChild = false, className, ...props }, ref) => {\n\treturn (\n\t\t<Primitive.ComboboxItemValue\n\t\t\tdata-slot=\"combobox-item-value\"\n\t\t\tclassName={cx(\n\t\t\t\t\"*:data-user-value:font-medium flex-1 shrink-0 text-strong font-normal\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\trender={asChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nItemValue.displayName = \"ComboboxItemValue\";\n\n/**\n * Renders a separator between Combobox.Items or Combobox.Groups.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Group>\n *       <Combobox.Item value=\"Apple\" />\n *       <Combobox.Item value=\"Banana\" />\n *     </Combobox.Group>\n *     <Combobox.Separator />\n *     <Combobox.Item>\n *       Click me!\n *     </Combobox.Item>\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst ComboboxSeparatorComponent = forwardRef<\n\tComponentRef<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator\n\t\tref={ref}\n\t\tdata-slot=\"combobox-separator\"\n\t\tclassName={cx(\"-mx-1.25 my-1 w-auto\", className)}\n\t\t{...props}\n\t/>\n));\nComboboxSeparatorComponent.displayName = \"ComboboxSeparator\";\n\n/**\n * Fill in a React input field with autocomplete & autosuggest functionalities.\n * Choose from a list of suggested values with full keyboard support.\n * This component is based on the WAI-ARIA Combobox Pattern and is powered by the\n * ariakit Combobox.\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/\n * @see https://ariakit.org/components/combobox\n *\n * @see https://mantle.ngrok.com/components/combobox\n *\n * @example\n * Composition:\n * ```\n * Combobox.Root\n * ├── Combobox.Input\n * └── Combobox.Content\n *     ├── Combobox.Group\n *     │   ├── Combobox.GroupLabel\n *     │   └── Combobox.Item\n *     │       └── Combobox.ItemValue\n *     └── Combobox.Separator\n * ```\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Item value=\"Apple\" />\n *     <Combobox.Item value=\"Banana\" />\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst Combobox = {\n\t/**\n\t * Root component for a combobox. Provides a combobox store that controls the state of Combobox components.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Item value=\"Apple\" />\n\t *     <Combobox.Item value=\"Banana\" />\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Renders a popover that contains combobox content, e.g. Combobox.Items, Combobox.Groups, and Combobox.Separators.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Item value=\"Apple\" />\n\t *     <Combobox.Item value=\"Banana\" />\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * Renders a group for Combobox.Item elements.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxgroup\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Group>\n\t *       <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>\n\t *       <Combobox.Item value=\"Apple\" />\n\t *       <Combobox.Item value=\"Banana\" />\n\t *     </Combobox.Group>\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tGroup,\n\t/**\n\t * Renders a label in a combobox group.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxgrouplabel\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Group>\n\t *       <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>\n\t *       <Combobox.Item value=\"Apple\" />\n\t *       <Combobox.Item value=\"Banana\" />\n\t *     </Combobox.Group>\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tGroupLabel,\n\t/**\n\t * Renders a combobox input element that can be used to filter a list of items.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxinput\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Item value=\"Apple\" />\n\t *     <Combobox.Item value=\"Banana\" />\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tInput,\n\t/**\n\t * Renders a combobox item inside a Combobox.Content component.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Item value=\"Apple\" />\n\t *     <Combobox.Item value=\"Banana\" />\n\t *     <Combobox.Item value=\"Orange\" />\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * Highlights the match between the current Combobox.Input value and parent Combobox.Item value.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxitemvalue\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Item value=\"Apple\">\n\t *       🍎\n\t *       <Combobox.ItemValue />\n\t *     </Combobox.Item>\n\t *     <Combobox.Item value=\"Banana\">\n\t *       🍌\n\t *       <Combobox.ItemValue />\n\t *     </Combobox.Item>\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tItemValue,\n\t/**\n\t * Renders a separator between Combobox.Items or Combobox.Groups.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxseparator\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Group>\n\t *       <Combobox.Item value=\"Apple\" />\n\t *       <Combobox.Item value=\"Banana\" />\n\t *     </Combobox.Group>\n\t *     <Combobox.Separator />\n\t *     <Combobox.Item>\n\t *       Click me!\n\t *     </Combobox.Item>\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tSeparator: ComboboxSeparatorComponent,\n} as const;\n\nexport {\n\t//,\n\tCombobox,\n};\n"],"mappings":"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"}

package/dist/command.d.ts

@@ -248,7 +248,7 @@ declare const Command: {
      * </Command.Dialog.Root>
      * ```
      */
-    readonly Trigger: _$react.ForwardRefExoticComponent<_$_radix_ui_react_dialog0.DialogTriggerProps & _$react.RefAttributes<HTMLButtonElement>>;
+    readonly Trigger: _$react.ForwardRefExoticComponent<Omit<_$_radix_ui_react_dialog0.DialogTriggerProps & _$react.RefAttributes<HTMLButtonElement>, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
     /**
      * The visible content of the CommandDialog. Renders inside the dialog portal.
      *
@@ -330,7 +330,7 @@ declare const Command: {
     ref?: React.Ref<HTMLInputElement>;
   } & {
     asChild?: boolean;
-  }, "key" | "asChild" | keyof _$react.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+  }, "key" | "asChild" | keyof _$react.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
     value?: string;
     onValueChange?: (search: string) => void;
   } & _$react.RefAttributes<HTMLInputElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;

package/dist/command.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{n as t}from"./separator-Yk9hMn8E.js";import{t as n}from"./dialog-Cw3E0Wr9.js";import{t as r}from"./kbd-GS-e4ICt.js";import{forwardRef as i,useEffect as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{MagnifyingGlassIcon as l}from"@phosphor-icons/react/MagnifyingGlass";import{Command as u,useCommandState as d}from"cmdk";const f=i(({className:t,...n},r)=>s(u,{ref:r,"data-slot":`command`,className:e(`bg-popover flex h-full w-full flex-col overflow-hidden rounded-md`,t),...n}));f.displayName=`Command`;const p=({children:t,className:r,description:i=`Search for a command to run...`,filter:a,shouldFilter:o,showCloseButton:l=!0,title:u=`Command Palette`})=>c(n.Content,{className:e(`overflow-hidden p-0 relative`,r),children:[c(n.Header,{className:`sr-only absolute`,children:[s(n.Title,{children:u}),s(n.Description,{children:i})]}),s(f,{className:`**:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-input]]:h-12 **:data-[slot=command-group]:px-2 **:data-[slot=command-list]:pb-1`,filter:a,shouldFilter:o,children:t}),l&&s(`div`,{className:`absolute top-1.5 right-1.5`,children:s(n.CloseIconButton,{})})]});p.displayName=`CommandDialogContent`;const m={Root:n.Root,Trigger:n.Trigger,Content:p},h=i(({className:t,...n},r)=>c(`div`,{ref:r,"data-slot":`command-input-wrapper`,className:`flex h-9 items-center gap-2 border-b border-popover px-3`,children:[s(l,{className:`size-5 shrink-0 opacity-50`}),s(u.Input,{"data-slot":`command-input`,className:e(`placeholder:text-muted flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50`,t),...n})]}));h.displayName=`CommandInput`;const g=i(({className:t,...n},r)=>s(u.List,{ref:r,"data-slot":`command-list`,className:e(`max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto scrollbar`,t),...n}));g.displayName=`CommandList`;const _=i(({className:t,...n},r)=>s(u.Empty,{ref:r,"data-slot":`command-empty`,className:e(`py-6 text-center text-sm`,t),...n}));_.displayName=`CommandEmpty`;const v=i(({className:t,...n},r)=>s(u.Group,{ref:r,"data-slot":`command-group`,className:e(`**:[[cmdk-group-heading]]:text-muted overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium`,t),...n}));v.displayName=`CommandGroup`;const y=i(({className:n,...r},i)=>s(u.Separator,{ref:i,"data-slot":`command-separator`,asChild:!0,...r,children:s(t,{className:e(`-mx-1 my-1 w-auto`,n)})}));y.displayName=`CommandSeparator`;const b=i(({className:t,...n},r)=>s(u.Item,{ref:r,"data-slot":`command-item`,className:e(`data-[selected=true]:bg-active-menu-item [&_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-5`,t),...n}));b.displayName=`CommandItem`;const x=i(({className:t,...n},r)=>s(`span`,{ref:r,"data-slot":`command-shortcut`,className:e(`text-muted ml-auto text-xs tracking-widest`,t),...n}));x.displayName=`CommandShortcut`;const S={Root:f,Dialog:m,Input:h,List:g,Empty:_,Group:v,Item:b,Shortcut:x,Separator:y};function C({className:t,...n}){let[i,l]=o(`⌃`);a(()=>{l(T())},[]);let u=i===`⌘`?`Command`:`Control`;return c(r,{...n,suppressHydrationWarning:!0,className:e(i===`⌃`&&`font-medium`,t),children:[s(`span`,{className:`sr-only`,children:u}),i]})}function w(e){return`userAgentData`in e}function T(){if(typeof navigator>`u`)return`⌃`;let e=``;return w(navigator)&&(e=navigator.userAgentData.platform??``),e||=navigator.platform||navigator.userAgent||``,/mac|iphone|ipad|ipod/i.test(e)?`⌘`:`⌃`}export{S as Command,C as MetaKey,d as useCommandState};
+import{t as e}from"./cx-D1HYnpvA.js";import{n as t}from"./separator-DyOGgFCs.js";import{t as n}from"./dialog-MiS_Q-ge.js";import{t as r}from"./kbd-B0wWeV_0.js";import{forwardRef as i,useEffect as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{MagnifyingGlassIcon as l}from"@phosphor-icons/react/MagnifyingGlass";import{Command as u,useCommandState as d}from"cmdk";const f=i(({className:t,...n},r)=>s(u,{ref:r,"data-slot":`command`,className:e(`bg-popover flex h-full w-full flex-col overflow-hidden rounded-md`,t),...n}));f.displayName=`Command`;const p=({children:t,className:r,description:i=`Search for a command to run...`,filter:a,shouldFilter:o,showCloseButton:l=!0,title:u=`Command Palette`})=>c(n.Content,{className:e(`overflow-hidden p-0 relative`,r),children:[c(n.Header,{className:`sr-only absolute`,children:[s(n.Title,{children:u}),s(n.Description,{children:i})]}),s(f,{className:`**:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-input]]:h-12 **:data-[slot=command-group]:px-2 **:data-[slot=command-list]:pb-1`,filter:a,shouldFilter:o,children:t}),l&&s(`div`,{className:`absolute top-1.5 right-1.5`,children:s(n.CloseIconButton,{})})]});p.displayName=`CommandDialogContent`;const m={Root:n.Root,Trigger:n.Trigger,Content:p},h=i(({className:t,...n},r)=>c(`div`,{ref:r,"data-slot":`command-input-wrapper`,className:`flex h-9 items-center gap-2 border-b border-popover px-3`,children:[s(l,{className:`size-5 shrink-0 opacity-50`}),s(u.Input,{"data-slot":`command-input`,className:e(`placeholder:text-muted flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50`,t),...n})]}));h.displayName=`CommandInput`;const g=i(({className:t,...n},r)=>s(u.List,{ref:r,"data-slot":`command-list`,className:e(`max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto scrollbar`,t),...n}));g.displayName=`CommandList`;const _=i(({className:t,...n},r)=>s(u.Empty,{ref:r,"data-slot":`command-empty`,className:e(`py-6 text-center text-sm`,t),...n}));_.displayName=`CommandEmpty`;const v=i(({className:t,...n},r)=>s(u.Group,{ref:r,"data-slot":`command-group`,className:e(`**:[[cmdk-group-heading]]:text-muted overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium`,t),...n}));v.displayName=`CommandGroup`;const y=i(({className:n,...r},i)=>s(u.Separator,{ref:i,"data-slot":`command-separator`,asChild:!0,...r,children:s(t,{className:e(`-mx-1 my-1 w-auto`,n)})}));y.displayName=`CommandSeparator`;const b=i(({className:t,...n},r)=>s(u.Item,{ref:r,"data-slot":`command-item`,className:e(`data-[selected=true]:bg-active-menu-item [&_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-5`,t),...n}));b.displayName=`CommandItem`;const x=i(({className:t,...n},r)=>s(`span`,{ref:r,"data-slot":`command-shortcut`,className:e(`text-muted ml-auto text-xs tracking-widest`,t),...n}));x.displayName=`CommandShortcut`;const S={Root:f,Dialog:m,Input:h,List:g,Empty:_,Group:v,Item:b,Shortcut:x,Separator:y};function C({className:t,...n}){let[i,l]=o(`⌃`);a(()=>{l(T())},[]);let u=i===`⌘`?`Command`:`Control`;return c(r,{...n,suppressHydrationWarning:!0,"data-slot":`meta-key`,className:e(i===`⌃`&&`font-medium`,t),children:[s(`span`,{className:`sr-only`,children:u}),i]})}function w(e){return`userAgentData`in e}function T(){if(typeof navigator>`u`)return`⌃`;let e=``;return w(navigator)&&(e=navigator.userAgentData.platform??``),e||=navigator.platform||navigator.userAgent||``,/mac|iphone|ipad|ipod/i.test(e)?`⌘`:`⌃`}export{S as Command,C as MetaKey,d as useCommandState};
 //# sourceMappingURL=command.js.map

package/dist/command.js.map

@@ -1 +1 @@
-{"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 {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\ttype ReactNode,\n\tforwardRef,\n} 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.Dialog.Root open={open} onOpenChange={setOpen}>\n *   <Command.Dialog.Trigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.Dialog.Trigger>\n *   <Command.Dialog.Content>\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.Content>\n * </Command.Dialog.Root>\n * ```\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.Content component.\n *\n * @see https://mantle.ngrok.com/components/command#commanddialogcontent\n */\ntype CommandDialogContentProps = {\n\t/**\n\t * The content of the command dialog (inputs, lists, etc.).\n\t */\n\tchildren?: ReactNode;\n\t/**\n\t * Class name(s) to apply to the command dialog content.\n\t */\n\tclassName?: string;\n\t/**\n\t * The accessible title of the command dialog. Visually hidden.\n\t *\n\t * @default \"Command Palette\"\n\t */\n\ttitle?: string;\n\t/**\n\t * The accessible description of the command dialog. Visually hidden.\n\t *\n\t * @default \"Search for a command to run...\"\n\t */\n\tdescription?: string;\n\t/**\n\t * Whether to show the close button.\n\t *\n\t * @default true\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 * The content of the CommandDialog. Renders the accessible title/description,\n * the command palette UI, and an optional close button.\n *\n * @see https://mantle.ngrok.com/components/command#commanddialogcontent\n *\n * @example\n * ```tsx\n * <Command.Dialog.Root open={open} onOpenChange={setOpen}>\n *   <Command.Dialog.Trigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.Dialog.Trigger>\n *   <Command.Dialog.Content>\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.Content>\n * </Command.Dialog.Root>\n * ```\n */\nconst CommandDialogContent = ({\n\tchildren,\n\tclassName,\n\tdescription = \"Search for a command to run...\",\n\tfilter,\n\tshouldFilter,\n\tshowCloseButton = true,\n\ttitle = \"Command Palette\",\n}: CommandDialogContentProps) => (\n\t<Dialog.Content className={cx(\"overflow-hidden p-0 relative\", className)}>\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<CommandRoot\n\t\t\tclassName=\"**:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-input]]:h-12 **:data-[slot=command-group]:px-2 **:data-[slot=command-list]:pb-1\"\n\t\t\tfilter={filter}\n\t\t\tshouldFilter={shouldFilter}\n\t\t>\n\t\t\t{children}\n\t\t</CommandRoot>\n\t\t{showCloseButton && (\n\t\t\t<div className=\"absolute top-1.5 right-1.5\">\n\t\t\t\t<Dialog.CloseIconButton />\n\t\t\t</div>\n\t\t)}\n\t</Dialog.Content>\n);\nCommandDialogContent.displayName = \"CommandDialogContent\";\n\n/**\n * A compound namespace for building a command palette dialog with trigger support.\n *\n * @see https://mantle.ngrok.com/components/command#commanddialog\n *\n * @example\n * ```tsx\n * <Command.Dialog.Root open={open} onOpenChange={setOpen}>\n *   <Command.Dialog.Trigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.Dialog.Trigger>\n *   <Command.Dialog.Content>\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.Content>\n * </Command.Dialog.Root>\n * ```\n */\nconst CommandDialog = {\n\t/**\n\t * The root stateful component for the CommandDialog. Manages open/closed state.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commanddialogroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Dialog.Root open={open} onOpenChange={setOpen}>\n\t *   <Command.Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.Dialog.Trigger>\n\t *   <Command.Dialog.Content>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.Dialog.Content>\n\t * </Command.Dialog.Root>\n\t * ```\n\t */\n\tRoot: Dialog.Root,\n\t/**\n\t * A button that opens the CommandDialog when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commanddialogtrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Dialog.Root open={open} onOpenChange={setOpen}>\n\t *   <Command.Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.Dialog.Trigger>\n\t *   <Command.Dialog.Content>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.Dialog.Content>\n\t * </Command.Dialog.Root>\n\t * ```\n\t */\n\tTrigger: Dialog.Trigger,\n\t/**\n\t * The visible content of the CommandDialog. Renders inside the dialog portal.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commanddialogcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Dialog.Root open={open} onOpenChange={setOpen}>\n\t *   <Command.Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.Dialog.Trigger>\n\t *   <Command.Dialog.Content>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.Dialog.Content>\n\t * </Command.Dialog.Root>\n\t * ```\n\t */\n\tContent: CommandDialogContent,\n} as const;\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.Root open={open} onOpenChange={setOpen}>\n *   <Command.Dialog.Trigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.Dialog.Trigger>\n *   <Command.Dialog.Content>\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.Content>\n * </Command.Dialog.Root>\n * ```\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-5 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.Root open={open} onOpenChange={setOpen}>\n *   <Command.Dialog.Trigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.Dialog.Trigger>\n *   <Command.Dialog.Content>\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.Content>\n * </Command.Dialog.Root>\n * ```\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.Root open={open} onOpenChange={setOpen}>\n *   <Command.Dialog.Trigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.Dialog.Trigger>\n *   <Command.Dialog.Content>\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.Content>\n * </Command.Dialog.Root>\n * ```\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.Root open={open} onOpenChange={setOpen}>\n *   <Command.Dialog.Trigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.Dialog.Trigger>\n *   <Command.Dialog.Content>\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.Content>\n * </Command.Dialog.Root>\n * ```\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.Root open={open} onOpenChange={setOpen}>\n *   <Command.Dialog.Trigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.Dialog.Trigger>\n *   <Command.Dialog.Content>\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.Content>\n * </Command.Dialog.Root>\n * ```\n */\nconst CommandSeparator = forwardRef<\n\tComponentRef<typeof CommandPrimitive.Separator>,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Separator ref={ref} data-slot=\"command-separator\" asChild {...props}>\n\t\t<Separator className={cx(\"-mx-1 my-1 w-auto\", className)} />\n\t</CommandPrimitive.Separator>\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.Root open={open} onOpenChange={setOpen}>\n *   <Command.Dialog.Trigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.Dialog.Trigger>\n *   <Command.Dialog.Content>\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.Content>\n * </Command.Dialog.Root>\n * ```\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-active-menu-item [&_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-5\",\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.Root open={open} onOpenChange={setOpen}>\n *   <Command.Dialog.Trigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.Dialog.Trigger>\n *   <Command.Dialog.Content>\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.Content>\n * </Command.Dialog.Root>\n * ```\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 * Composition:\n * ```\n * Command.Dialog.Root\n * ├── Command.Dialog.Trigger\n * └── Command.Dialog.Content\n *     ├── Command.Input\n *     └── Command.List\n *         ├── Command.Empty\n *         ├── Command.Group\n *         │   └── Command.Item\n *         │       └── Command.Shortcut\n *         └── Command.Separator\n * ```\n *\n * @example\n * ```tsx\n * <Command.Dialog.Root open={open} onOpenChange={setOpen}>\n *   <Command.Dialog.Trigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.Dialog.Trigger>\n *   <Command.Dialog.Content>\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.Content>\n * </Command.Dialog.Root>\n * ```\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.Dialog.Root open={open} onOpenChange={setOpen}>\n\t *   <Command.Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.Dialog.Trigger>\n\t *   <Command.Dialog.Content>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.Dialog.Content>\n\t * </Command.Dialog.Root>\n\t * ```\n\t */\n\tRoot: CommandRoot,\n\t/**\n\t * A compound namespace for building a command palette dialog.\n\t * Use `Command.Dialog.Root`, `Command.Dialog.Trigger`, and `Command.Dialog.Content`.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commanddialog\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Dialog.Root open={open} onOpenChange={setOpen}>\n\t *   <Command.Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.Dialog.Trigger>\n\t *   <Command.Dialog.Content>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.Dialog.Content>\n\t * </Command.Dialog.Root>\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.Dialog.Root open={open} onOpenChange={setOpen}>\n\t *   <Command.Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.Dialog.Trigger>\n\t *   <Command.Dialog.Content>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.Dialog.Content>\n\t * </Command.Dialog.Root>\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.Dialog.Root open={open} onOpenChange={setOpen}>\n\t *   <Command.Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.Dialog.Trigger>\n\t *   <Command.Dialog.Content>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.Dialog.Content>\n\t * </Command.Dialog.Root>\n\t * ```\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.Dialog.Root open={open} onOpenChange={setOpen}>\n\t *   <Command.Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.Dialog.Trigger>\n\t *   <Command.Dialog.Content>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.Dialog.Content>\n\t * </Command.Dialog.Root>\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.Dialog.Root open={open} onOpenChange={setOpen}>\n\t *   <Command.Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.Dialog.Trigger>\n\t *   <Command.Dialog.Content>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.Dialog.Content>\n\t * </Command.Dialog.Root>\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.Dialog.Root open={open} onOpenChange={setOpen}>\n\t *   <Command.Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.Dialog.Trigger>\n\t *   <Command.Dialog.Content>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.Dialog.Content>\n\t * </Command.Dialog.Root>\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.Dialog.Root open={open} onOpenChange={setOpen}>\n\t *   <Command.Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.Dialog.Trigger>\n\t *   <Command.Dialog.Content>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.Dialog.Content>\n\t * </Command.Dialog.Root>\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.Dialog.Root open={open} onOpenChange={setOpen}>\n\t *   <Command.Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.Dialog.Trigger>\n\t *   <Command.Dialog.Content>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.Dialog.Content>\n\t * </Command.Dialog.Root>\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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"}
+{"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 {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\ttype ReactNode,\n\tforwardRef,\n} 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.Dialog.Root open={open} onOpenChange={setOpen}>\n *   <Command.Dialog.Trigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.Dialog.Trigger>\n *   <Command.Dialog.Content>\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.Content>\n * </Command.Dialog.Root>\n * ```\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.Content component.\n *\n * @see https://mantle.ngrok.com/components/command#commanddialogcontent\n */\ntype CommandDialogContentProps = {\n\t/**\n\t * The content of the command dialog (inputs, lists, etc.).\n\t */\n\tchildren?: ReactNode;\n\t/**\n\t * Class name(s) to apply to the command dialog content.\n\t */\n\tclassName?: string;\n\t/**\n\t * The accessible title of the command dialog. Visually hidden.\n\t *\n\t * @default \"Command Palette\"\n\t */\n\ttitle?: string;\n\t/**\n\t * The accessible description of the command dialog. Visually hidden.\n\t *\n\t * @default \"Search for a command to run...\"\n\t */\n\tdescription?: string;\n\t/**\n\t * Whether to show the close button.\n\t *\n\t * @default true\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 * The content of the CommandDialog. Renders the accessible title/description,\n * the command palette UI, and an optional close button.\n *\n * @see https://mantle.ngrok.com/components/command#commanddialogcontent\n *\n * @example\n * ```tsx\n * <Command.Dialog.Root open={open} onOpenChange={setOpen}>\n *   <Command.Dialog.Trigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.Dialog.Trigger>\n *   <Command.Dialog.Content>\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.Content>\n * </Command.Dialog.Root>\n * ```\n */\nconst CommandDialogContent = ({\n\tchildren,\n\tclassName,\n\tdescription = \"Search for a command to run...\",\n\tfilter,\n\tshouldFilter,\n\tshowCloseButton = true,\n\ttitle = \"Command Palette\",\n}: CommandDialogContentProps) => (\n\t<Dialog.Content className={cx(\"overflow-hidden p-0 relative\", className)}>\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<CommandRoot\n\t\t\tclassName=\"**:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-input]]:h-12 **:data-[slot=command-group]:px-2 **:data-[slot=command-list]:pb-1\"\n\t\t\tfilter={filter}\n\t\t\tshouldFilter={shouldFilter}\n\t\t>\n\t\t\t{children}\n\t\t</CommandRoot>\n\t\t{showCloseButton && (\n\t\t\t<div className=\"absolute top-1.5 right-1.5\">\n\t\t\t\t<Dialog.CloseIconButton />\n\t\t\t</div>\n\t\t)}\n\t</Dialog.Content>\n);\nCommandDialogContent.displayName = \"CommandDialogContent\";\n\n/**\n * A compound namespace for building a command palette dialog with trigger support.\n *\n * @see https://mantle.ngrok.com/components/command#commanddialog\n *\n * @example\n * ```tsx\n * <Command.Dialog.Root open={open} onOpenChange={setOpen}>\n *   <Command.Dialog.Trigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.Dialog.Trigger>\n *   <Command.Dialog.Content>\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.Content>\n * </Command.Dialog.Root>\n * ```\n */\nconst CommandDialog = {\n\t/**\n\t * The root stateful component for the CommandDialog. Manages open/closed state.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commanddialogroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Dialog.Root open={open} onOpenChange={setOpen}>\n\t *   <Command.Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.Dialog.Trigger>\n\t *   <Command.Dialog.Content>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.Dialog.Content>\n\t * </Command.Dialog.Root>\n\t * ```\n\t */\n\tRoot: Dialog.Root,\n\t/**\n\t * A button that opens the CommandDialog when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commanddialogtrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Dialog.Root open={open} onOpenChange={setOpen}>\n\t *   <Command.Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.Dialog.Trigger>\n\t *   <Command.Dialog.Content>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.Dialog.Content>\n\t * </Command.Dialog.Root>\n\t * ```\n\t */\n\tTrigger: Dialog.Trigger,\n\t/**\n\t * The visible content of the CommandDialog. Renders inside the dialog portal.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commanddialogcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Dialog.Root open={open} onOpenChange={setOpen}>\n\t *   <Command.Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.Dialog.Trigger>\n\t *   <Command.Dialog.Content>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.Dialog.Content>\n\t * </Command.Dialog.Root>\n\t * ```\n\t */\n\tContent: CommandDialogContent,\n} as const;\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.Root open={open} onOpenChange={setOpen}>\n *   <Command.Dialog.Trigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.Dialog.Trigger>\n *   <Command.Dialog.Content>\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.Content>\n * </Command.Dialog.Root>\n * ```\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-5 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.Root open={open} onOpenChange={setOpen}>\n *   <Command.Dialog.Trigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.Dialog.Trigger>\n *   <Command.Dialog.Content>\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.Content>\n * </Command.Dialog.Root>\n * ```\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.Root open={open} onOpenChange={setOpen}>\n *   <Command.Dialog.Trigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.Dialog.Trigger>\n *   <Command.Dialog.Content>\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.Content>\n * </Command.Dialog.Root>\n * ```\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.Root open={open} onOpenChange={setOpen}>\n *   <Command.Dialog.Trigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.Dialog.Trigger>\n *   <Command.Dialog.Content>\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.Content>\n * </Command.Dialog.Root>\n * ```\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.Root open={open} onOpenChange={setOpen}>\n *   <Command.Dialog.Trigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.Dialog.Trigger>\n *   <Command.Dialog.Content>\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.Content>\n * </Command.Dialog.Root>\n * ```\n */\nconst CommandSeparator = forwardRef<\n\tComponentRef<typeof CommandPrimitive.Separator>,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Separator ref={ref} data-slot=\"command-separator\" asChild {...props}>\n\t\t<Separator className={cx(\"-mx-1 my-1 w-auto\", className)} />\n\t</CommandPrimitive.Separator>\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.Root open={open} onOpenChange={setOpen}>\n *   <Command.Dialog.Trigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.Dialog.Trigger>\n *   <Command.Dialog.Content>\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.Content>\n * </Command.Dialog.Root>\n * ```\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-active-menu-item [&_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-5\",\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.Root open={open} onOpenChange={setOpen}>\n *   <Command.Dialog.Trigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.Dialog.Trigger>\n *   <Command.Dialog.Content>\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.Content>\n * </Command.Dialog.Root>\n * ```\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 * Composition:\n * ```\n * Command.Dialog.Root\n * ├── Command.Dialog.Trigger\n * └── Command.Dialog.Content\n *     ├── Command.Input\n *     └── Command.List\n *         ├── Command.Empty\n *         ├── Command.Group\n *         │   └── Command.Item\n *         │       └── Command.Shortcut\n *         └── Command.Separator\n * ```\n *\n * @example\n * ```tsx\n * <Command.Dialog.Root open={open} onOpenChange={setOpen}>\n *   <Command.Dialog.Trigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.Dialog.Trigger>\n *   <Command.Dialog.Content>\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.Content>\n * </Command.Dialog.Root>\n * ```\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.Dialog.Root open={open} onOpenChange={setOpen}>\n\t *   <Command.Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.Dialog.Trigger>\n\t *   <Command.Dialog.Content>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.Dialog.Content>\n\t * </Command.Dialog.Root>\n\t * ```\n\t */\n\tRoot: CommandRoot,\n\t/**\n\t * A compound namespace for building a command palette dialog.\n\t * Use `Command.Dialog.Root`, `Command.Dialog.Trigger`, and `Command.Dialog.Content`.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commanddialog\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Dialog.Root open={open} onOpenChange={setOpen}>\n\t *   <Command.Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.Dialog.Trigger>\n\t *   <Command.Dialog.Content>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.Dialog.Content>\n\t * </Command.Dialog.Root>\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.Dialog.Root open={open} onOpenChange={setOpen}>\n\t *   <Command.Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.Dialog.Trigger>\n\t *   <Command.Dialog.Content>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.Dialog.Content>\n\t * </Command.Dialog.Root>\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.Dialog.Root open={open} onOpenChange={setOpen}>\n\t *   <Command.Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.Dialog.Trigger>\n\t *   <Command.Dialog.Content>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.Dialog.Content>\n\t * </Command.Dialog.Root>\n\t * ```\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.Dialog.Root open={open} onOpenChange={setOpen}>\n\t *   <Command.Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.Dialog.Trigger>\n\t *   <Command.Dialog.Content>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.Dialog.Content>\n\t * </Command.Dialog.Root>\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.Dialog.Root open={open} onOpenChange={setOpen}>\n\t *   <Command.Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.Dialog.Trigger>\n\t *   <Command.Dialog.Content>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.Dialog.Content>\n\t * </Command.Dialog.Root>\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.Dialog.Root open={open} onOpenChange={setOpen}>\n\t *   <Command.Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.Dialog.Trigger>\n\t *   <Command.Dialog.Content>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.Dialog.Content>\n\t * </Command.Dialog.Root>\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.Dialog.Root open={open} onOpenChange={setOpen}>\n\t *   <Command.Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.Dialog.Trigger>\n\t *   <Command.Dialog.Content>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.Dialog.Content>\n\t * </Command.Dialog.Root>\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.Dialog.Root open={open} onOpenChange={setOpen}>\n\t *   <Command.Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.Dialog.Trigger>\n\t *   <Command.Dialog.Content>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.Dialog.Content>\n\t * </Command.Dialog.Root>\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\tdata-slot=\"meta-key\"\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/data-table.d.ts

@@ -287,7 +287,7 @@ declare const DataTable: {
    * </DataTable.Body>
    * ```
    */
-  readonly Body: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & _$react.RefAttributes<HTMLTableSectionElement>>;
+  readonly Body: _$react.ForwardRefExoticComponent<Omit<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & _$react.RefAttributes<HTMLTableSectionElement>, "ref"> & _$react.RefAttributes<HTMLTableSectionElement>>;
   /**
    * An empty state row that spans all columns when there's no data to display.
    *

package/dist/data-table.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./button-BKykcpgJ.js";import{i as n}from"./direction-ClCocWIf.js";import{t as r}from"./sort-C_Jbs1dH.js";import{t as i}from"./table-BMGcRJlk.js";import{Fragment as a,createContext as o,useContext as s,useMemo as c}from"react";import l from"tiny-invariant";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{flexRender as f}from"@tanstack/react-table";export*from"@tanstack/react-table";const p=[`unsorted`,`asc`,`desc`],m=[`unsorted`,`desc`,`asc`];function h(e,t){return g(t===`alphanumeric`?p:m,e)??`unsorted`}function g(e,t,n){if(e.length===0)return n;let r=e.findIndex(e=>e===t);if(r===-1)return n;let i=(r+1)%e.length;return e.at(i)??n}const _=o(null);function v(){let e=s(_);return l(e,`useDataTableContext should only be used within a DataTable child component`),e}function y({children:e,table:t,...n}){let r=c(()=>({table:t}),[t]);return u(_.Provider,{value:r,children:u(i.Root,{...n,children:u(i.Element,{children:e})})})}function b({children:r,className:i,column:a,disableSorting:o=!1,iconPlacement:s=`end`,sortingMode:c,sortIcon:l,onClick:f,...p}){let m=a.getIsSorted(),h=!o&&a.getCanSort(),g=h&&typeof m==`string`?m:`unsorted`,_=l?.(g)??u(A,{mode:c,direction:g});return d(t,{appearance:`ghost`,className:e(`flex justify-start w-full h-full rounded-none not-disabled:active:scale-none text-muted`,i),"data-sort-direction":g,"data-table-header-action":!0,icon:_,iconPlacement:s,onClick:e=>{f?.(e),!e.defaultPrevented&&(!h||o||c===void 0||j(a,c))},priority:`neutral`,type:`button`,...p,children:[h&&g!==`unsorted`&&d(`span`,{className:`sr-only`,children:[`Column sorted in`,` `,c===`alphanumeric`?g===`asc`?`ascending`:`descending`:n(g),` `,`order`]}),r]})}function x({children:t,className:n,...r}){return u(i.Header,{className:e(`has-data-table-header-action:px-0`,n),...r,children:t})}const S=i.Body;function C(e){let{table:t}=v();return u(i.Head,{...e,children:t.getHeaderGroups().map(e=>u(i.Row,{children:e.headers.map(e=>u(a,{children:e.isPlaceholder?u(i.Header,{},e.id):f(e.column.columnDef.header,e.getContext())},e.id))},e.id))})}function w({row:e,...t}){return u(i.Row,{...t,children:e.getVisibleCells().map(e=>u(a,{children:f(e.column.columnDef.cell,e.getContext())},e.id))})}function T({children:e,...t}){let{table:n}=v(),r=n.getAllColumns().length;return u(i.Row,{...t,children:u(i.Cell,{colSpan:r,children:e})})}function E(){return u(`span`,{"aria-hidden":!0,className:e(`pointer-events-none absolute -inset-y-px -left-1.5 w-1.5`,`opacity-0 transition-opacity group-data-sticky-active/table:opacity-100`,`shadow-[1px_0_0_0_var(--border-color-card-muted)]`,`bg-linear-to-l to-transparent`,`from-[color-mix(in_oklab,var(--shadow-color)_var(--shadow-second-opacity),transparent)]`)})}function D({children:t,className:n,...r}){return d(i.Cell,{"data-mantle-table-sticky-right":!0,className:e(`sticky z-10 right-0 text-end align-middle bg-inherit p-2`,n),...r,children:[u(E,{}),t]})}function O({children:t,className:n,...r}){let{table:a}=v(),o=a.getRowModel().rows.length>0;return d(i.Header,{...o?{"data-mantle-table-sticky-right":!0}:{},className:e(o&&`sticky z-10 right-0 bg-inherit`,n),...r,children:[o&&u(E,{}),t]})}y.displayName=`DataTable`,D.displayName=`DataTableActionCell`,O.displayName=`DataTableActionHeader`,S.displayName=`DataTableBody`,T.displayName=`DataTableEmptyRow`,C.displayName=`DataTableHead`,x.displayName=`DataTableHeader`,b.displayName=`DataTableHeaderSortButton`,w.displayName=`DataTableRow`;const k={Root:y,ActionCell:D,ActionHeader:O,Cell:i.Cell,Body:S,EmptyRow:T,Head:C,Header:x,HeaderSortButton:b,Row:w};function A({direction:e,mode:t,...n}){return e===`unsorted`||!t||!e?u(`svg`,{"aria-hidden":!0,...n}):u(r,{mode:t,direction:e,...n})}function j(e,t){if(!e.getCanSort())return;let n=e.getIsSorted();switch(h(typeof n==`string`?n:`unsorted`,t)){case`unsorted`:e.clearSorting();return;case`asc`:e.toggleSorting(!1);return;case`desc`:e.toggleSorting(!0);return;default:return}}export{k as DataTable};
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./button-GokecthL.js";import{i as n}from"./direction-ClCocWIf.js";import{t as r}from"./sort-C_Jbs1dH.js";import{t as i}from"./table-12T25gGa.js";import{Fragment as a,createContext as o,forwardRef as s,useContext as c,useMemo as l}from"react";import u from"tiny-invariant";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{flexRender as p}from"@tanstack/react-table";export*from"@tanstack/react-table";const m=[`unsorted`,`asc`,`desc`],h=[`unsorted`,`desc`,`asc`];function g(e,t){return _(t===`alphanumeric`?m:h,e)??`unsorted`}function _(e,t,n){if(e.length===0)return n;let r=e.findIndex(e=>e===t);if(r===-1)return n;let i=(r+1)%e.length;return e.at(i)??n}const v=o(null);function y(){let e=c(v);return u(e,`useDataTableContext should only be used within a DataTable child component`),e}function b({children:e,table:t,...n}){let r=l(()=>({table:t}),[t]);return d(v.Provider,{value:r,children:d(i.Root,{"data-slot":`data-table`,...n,children:d(i.Element,{children:e})})})}function x({children:r,className:i,column:a,disableSorting:o=!1,iconPlacement:s=`end`,sortingMode:c,sortIcon:l,onClick:u,...p}){let m=a.getIsSorted(),h=!o&&a.getCanSort(),g=h&&typeof m==`string`?m:`unsorted`,_=l?.(g)??d(j,{mode:c,direction:g});return f(t,{appearance:`ghost`,"data-slot":`data-table-header-sort-button`,className:e(`flex justify-start w-full h-full rounded-none not-disabled:active:scale-none text-muted`,i),"data-sort-direction":g,"data-table-header-action":!0,icon:_,iconPlacement:s,onClick:e=>{u?.(e),!e.defaultPrevented&&(!h||o||c===void 0||M(a,c))},priority:`neutral`,type:`button`,...p,children:[h&&g!==`unsorted`&&f(`span`,{className:`sr-only`,children:[`Column sorted in`,` `,c===`alphanumeric`?g===`asc`?`ascending`:`descending`:n(g),` `,`order`]}),r]})}function S({children:t,className:n,...r}){return d(i.Header,{"data-slot":`data-table-header`,className:e(`has-data-table-header-action:px-0`,n),...r,children:t})}const C=s((e,t)=>d(i.Body,{ref:t,"data-slot":`data-table-body`,...e}));C.displayName=`DataTableBody`;function w(e){let{table:t}=y();return d(i.Head,{"data-slot":`data-table-head`,...e,children:t.getHeaderGroups().map(e=>d(i.Row,{children:e.headers.map(e=>d(a,{children:e.isPlaceholder?d(i.Header,{},e.id):p(e.column.columnDef.header,e.getContext())},e.id))},e.id))})}function T({row:e,...t}){return d(i.Row,{"data-slot":`data-table-row`,...t,children:e.getVisibleCells().map(e=>d(a,{children:p(e.column.columnDef.cell,e.getContext())},e.id))})}function E({children:e,...t}){let{table:n}=y(),r=n.getAllColumns().length;return d(i.Row,{"data-slot":`data-table-empty-row`,...t,children:d(i.Cell,{colSpan:r,children:e})})}function D(){return d(`span`,{"aria-hidden":!0,className:e(`pointer-events-none absolute -inset-y-px -left-1.5 w-1.5`,`opacity-0 transition-opacity group-data-sticky-active/table:opacity-100`,`shadow-[1px_0_0_0_var(--border-color-card-muted)]`,`bg-linear-to-l to-transparent`,`from-[color-mix(in_oklab,var(--shadow-color)_var(--shadow-second-opacity),transparent)]`)})}function O({children:t,className:n,...r}){return f(i.Cell,{"data-mantle-table-sticky-right":!0,"data-slot":`data-table-action-cell`,className:e(`sticky z-10 right-0 text-end align-middle bg-inherit p-2`,n),...r,children:[d(D,{}),t]})}function k({children:t,className:n,...r}){let{table:a}=y(),o=a.getRowModel().rows.length>0;return f(i.Header,{...o?{"data-mantle-table-sticky-right":!0}:{},"data-slot":`data-table-action-header`,className:e(o&&`sticky z-10 right-0 bg-inherit`,n),...r,children:[o&&d(D,{}),t]})}b.displayName=`DataTable`,O.displayName=`DataTableActionCell`,k.displayName=`DataTableActionHeader`,C.displayName=`DataTableBody`,E.displayName=`DataTableEmptyRow`,w.displayName=`DataTableHead`,S.displayName=`DataTableHeader`,x.displayName=`DataTableHeaderSortButton`,T.displayName=`DataTableRow`;const A={Root:b,ActionCell:O,ActionHeader:k,Cell:i.Cell,Body:C,EmptyRow:E,Head:w,Header:S,HeaderSortButton:x,Row:T};function j({direction:e,mode:t,...n}){return e===`unsorted`||!t||!e?d(`svg`,{"aria-hidden":!0,...n}):d(r,{mode:t,direction:e,...n})}function M(e,t){if(!e.getCanSort())return;let n=e.getIsSorted();switch(g(typeof n==`string`?n:`unsorted`,t)){case`unsorted`:e.clearSorting();return;case`asc`:e.toggleSorting(!1);return;case`desc`:e.toggleSorting(!0);return;default:return}}export{A as DataTable};
 //# sourceMappingURL=data-table.js.map

package/dist/data-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.js","names":["Table","Row"],"sources":["../src/components/data-table/helpers.ts","../src/components/data-table/data-table.tsx"],"sourcesContent":["import type { SortingMode } from \"../../utils/sorting/direction.js\";\nimport type { SortDirection } from \"./types.js\";\n\nconst alphanumericSortingOrder = [\"unsorted\", \"asc\", \"desc\"] as const satisfies SortDirection[];\n\nconst timeSortingOrder = [\"unsorted\", \"desc\", \"asc\"] as const satisfies SortDirection[];\n\n/**\n * Get the next sort direction based on the current sort direction and sorting mode.\n */\nfunction getNextSortDirection(currentSortDirection: SortDirection, sortingMode: SortingMode) {\n\tconst sortOrder = sortingMode === \"alphanumeric\" ? alphanumericSortingOrder : timeSortingOrder;\n\n\treturn getNextInCircularList(sortOrder, currentSortDirection) ?? \"unsorted\";\n}\n\n/**\n * Get the next item in a circular list.\n * If the current item is not found in the list (or it's empty), return the fallback value.\n */\nfunction getNextInCircularList<T>(list: T[], currentItem: T, fallback?: T | undefined) {\n\tif (list.length === 0) {\n\t\treturn fallback;\n\t}\n\n\tconst currentItemIndex = list.findIndex((item) => item === currentItem);\n\tif (currentItemIndex === -1) {\n\t\treturn fallback;\n\t}\n\n\tconst nextIndex = (currentItemIndex + 1) % list.length;\n\treturn list.at(nextIndex) ?? fallback;\n}\n\nexport {\n\t//,\n\tgetNextSortDirection,\n\tgetNextInCircularList,\n};\n","import {\n\ttype Column,\n\ttype HeaderContext,\n\ttype Table as TableInstance,\n\ttype Row as TableRow,\n\tflexRender,\n} from \"@tanstack/react-table\";\nimport {\n\ttype ComponentProps,\n\tFragment,\n\ttype ReactNode,\n\tcreateContext,\n\tuseContext,\n\tuseMemo,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { $timeSortingDirection, type SortingMode } from \"../../utils/sorting/direction.js\";\nimport { Button } from \"../button/button.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { SortIcon } from \"../icons/sort.js\";\nimport { Table } from \"../table/table.js\";\nimport { getNextSortDirection } from \"./helpers.js\";\nimport type { SortDirection } from \"./types.js\";\n\ntype DataTableContextShape<TData = unknown> = {\n\ttable: TableInstance<TData>;\n};\n\n// oxlint-disable-next-line typescript/no-explicit-any - known limitation of react context when using generics 😭\nconst DataTableContext = createContext<DataTableContextShape<any> | null>(null);\n\n/**\n * @private\n */\nfunction useDataTableContext<TData>() {\n\tconst context = useContext(DataTableContext);\n\n\tinvariant(context, \"useDataTableContext should only be used within a DataTable child component\");\n\n\treturn context as DataTableContextShape<TData>;\n}\n\ntype DataTableProps<TData> = ComponentProps<typeof Table.Root> & {\n\ttable: TableInstance<TData>;\n};\n\n/**\n * A data table component that provides sorting and other data table functionality.\n * Built on top of TanStack Table for advanced table features.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableroot\n *\n * @example\n * ```tsx\n * <DataTable table={table}>\n *   <DataTable.Head />\n *   <DataTable.Body>\n *     <DataTable.Rows />\n *   </DataTable.Body>\n * </DataTable>\n * ```\n */\nfunction Root<TData>({ children, table, ...props }: DataTableProps<TData>) {\n\tconst context: DataTableContextShape<TData> = useMemo(() => ({ table }), [table]);\n\n\treturn (\n\t\t<DataTableContext.Provider value={context}>\n\t\t\t<Table.Root {...props}>\n\t\t\t\t<Table.Element>{children}</Table.Element>\n\t\t\t</Table.Root>\n\t\t</DataTableContext.Provider>\n\t);\n}\n\ntype DataTableHeaderSortButtonProps<TData, TValue> = Omit<ComponentProps<typeof Button>, \"icon\"> &\n\tPick<HeaderContext<TData, TValue>, \"column\"> &\n\t(\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Disable sorting for this column.\n\t\t\t\t * It will prevent the sorting direction from being toggled and any icon\n\t\t\t\t * from being shown.\n\t\t\t\t */\n\t\t\t\tdisableSorting: true;\n\t\t\t\t/**\n\t\t\t\t * Use this to render a custom sort icon for the column if it is sortable\n\t\t\t\t * and you want to override the default sort icon\n\t\t\t\t */\n\t\t\t\tsortIcon?: undefined;\n\t\t\t\t/**\n\t\t\t\t * The sorting mode of the column, whether it is alphanumeric or time based.\n\t\t\t\t */\n\t\t\t\tsortingMode?: undefined;\n\t\t  }\n\t\t| {\n\t\t\t\tdisableSorting?: false;\n\t\t\t\t/**\n\t\t\t\t * Use this to render a custom sort icon for the column if it is sortable\n\t\t\t\t * and you want to override the default sort icon\n\t\t\t\t */\n\t\t\t\tsortIcon?: (sortDirection: SortDirection) => ReactNode;\n\t\t\t\t/**\n\t\t\t\t * The sorting mode of the column, whether it is alphanumeric or time based.\n\t\t\t\t */\n\t\t\t\tsortingMode: SortingMode;\n\t\t  }\n\t);\n\n/**\n * A sortable button toggle for a column header in a data table.\n * If the column is sortable, clicking the button will toggle the sorting\n * direction.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableheadersortbutton\n *\n * @example\n * ```tsx\n * <DataTable.HeaderSortButton\n *   column={column}\n *   sortingMode=\"alphanumeric\"\n * >\n *   Column Title\n * </DataTable.HeaderSortButton>\n * ```\n *\n * Each click cycles through:\n * - For alphanumeric sorting: unsorted ➡️ ascending ➡️ descending ➡️ unsorted\n * - For time sorting: unsorted ➡️ newest-to-oldest ➡️ oldest-to-newest ➡️ unsorted\n */\nfunction HeaderSortButton<TData, TValue>({\n\tchildren,\n\tclassName,\n\tcolumn,\n\tdisableSorting = false,\n\ticonPlacement = \"end\",\n\tsortingMode,\n\tsortIcon: propSortIcon,\n\tonClick,\n\t...props\n}: DataTableHeaderSortButtonProps<TData, TValue>) {\n\tconst _sortDirection = column.getIsSorted();\n\tconst canSort = !disableSorting && column.getCanSort();\n\n\tconst sortDirection: SortDirection =\n\t\tcanSort && typeof _sortDirection === \"string\" ? _sortDirection : \"unsorted\";\n\n\tconst sortIcon = propSortIcon?.(sortDirection) ?? (\n\t\t<DefaultSortIcon mode={sortingMode} direction={sortDirection} />\n\t);\n\n\treturn (\n\t\t<Button\n\t\t\tappearance=\"ghost\"\n\t\t\tclassName={cx(\n\t\t\t\t\"flex justify-start w-full h-full rounded-none not-disabled:active:scale-none text-muted\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tdata-sort-direction={sortDirection}\n\t\t\tdata-table-header-action\n\t\t\ticon={sortIcon}\n\t\t\ticonPlacement={iconPlacement}\n\t\t\tonClick={(event) => {\n\t\t\t\tonClick?.(event);\n\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (!canSort || disableSorting || typeof sortingMode === \"undefined\") {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\ttoggleNextSortingDirection(column, sortingMode);\n\t\t\t}}\n\t\t\tpriority=\"neutral\"\n\t\t\ttype=\"button\"\n\t\t\t{...props}\n\t\t>\n\t\t\t{canSort && sortDirection !== \"unsorted\" && (\n\t\t\t\t<span className=\"sr-only\">\n\t\t\t\t\tColumn sorted in{\" \"}\n\t\t\t\t\t{sortingMode === \"alphanumeric\"\n\t\t\t\t\t\t? sortDirection === \"asc\"\n\t\t\t\t\t\t\t? \"ascending\"\n\t\t\t\t\t\t\t: \"descending\"\n\t\t\t\t\t\t: $timeSortingDirection(sortDirection)}{\" \"}\n\t\t\t\t\torder\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t{children}\n\t\t</Button>\n\t);\n}\n\ntype DataTableHeaderProps = ComponentProps<typeof Table.Header>;\n\n/**\n * A header for a data table.\n * This is typically used to wrap the `DataTable.HeaderSortButton` component.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableheader\n *\n * @example\n * ```tsx\n * <DataTable.Header>\n *   <DataTable.HeaderSortButton column={column} sortingMode=\"alphanumeric\">\n *     Column Title\n *   </DataTable.HeaderSortButton>\n * </DataTable.Header>\n * ```\n */\nfunction Header({ children, className, ...props }: DataTableHeaderProps) {\n\treturn (\n\t\t<Table.Header className={cx(\"has-data-table-header-action:px-0\", className)} {...props}>\n\t\t\t{children}\n\t\t</Table.Header>\n\t);\n}\n\nconst Body = Table.Body;\n\ntype DataTableHeadProps = Omit<ComponentProps<typeof Table.Head>, \"children\">;\n\nfunction Head<TData>(props: DataTableHeadProps) {\n\tconst { table } = useDataTableContext<TData>();\n\n\treturn (\n\t\t<Table.Head {...props}>\n\t\t\t{table.getHeaderGroups().map((headerGroup) => (\n\t\t\t\t<Table.Row key={headerGroup.id}>\n\t\t\t\t\t{headerGroup.headers.map((header) => (\n\t\t\t\t\t\t<Fragment key={header.id}>\n\t\t\t\t\t\t\t{header.isPlaceholder ? (\n\t\t\t\t\t\t\t\t<Table.Header key={header.id} />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\tflexRender(header.column.columnDef.header, header.getContext())\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t))}\n\t\t\t\t</Table.Row>\n\t\t\t))}\n\t\t</Table.Head>\n\t);\n}\n\ntype DataTableRowProps<TData> = Omit<ComponentProps<typeof Table.Row>, \"children\"> & {\n\trow: TableRow<TData>;\n};\n\nfunction Row<TData>({ row, ...props }: DataTableRowProps<TData>) {\n\treturn (\n\t\t<Table.Row {...props}>\n\t\t\t{row.getVisibleCells().map((cell) => (\n\t\t\t\t<Fragment key={cell.id}>\n\t\t\t\t\t{flexRender(cell.column.columnDef.cell, cell.getContext())}\n\t\t\t\t</Fragment>\n\t\t\t))}\n\t\t</Table.Row>\n\t);\n}\n\ntype DataTableEmptyRowProps = ComponentProps<typeof Table.Row>;\n\nfunction EmptyRow<TData>({ children, ...props }: DataTableEmptyRowProps) {\n\tconst { table } = useDataTableContext<TData>();\n\tconst numberOfColumns = table.getAllColumns().length;\n\n\treturn (\n\t\t<Table.Row {...props}>\n\t\t\t<Table.Cell colSpan={numberOfColumns}>{children}</Table.Cell>\n\t\t</Table.Row>\n\t);\n}\n\n/**\n * Internal: renders the visual indicator on the left edge of the sticky action\n * column — a 1px divider plus a soft shadow gradient that reads as content\n * sliding under the pinned column. Positioned as a 6px strip sitting\n * immediately to the left of its sticky parent cell; `-inset-y-px` lets\n * adjacent rows' strips overlap at row dividers so the effect reads as one\n * continuous column instead of per-row blobs.\n *\n * Rendered as a child `<span>` because box-shadow on `<td>`/`<th>` is\n * unreliable across table layout modes.\n */\nfunction StickyColIndicator() {\n\treturn (\n\t\t<span\n\t\t\taria-hidden\n\t\t\tclassName={cx(\n\t\t\t\t\"pointer-events-none absolute -inset-y-px -left-1.5 w-1.5\",\n\t\t\t\t\"opacity-0 transition-opacity group-data-sticky-active/table:opacity-100\",\n\t\t\t\t// 1px divider painted at the strip's right edge (= the pinned\n\t\t\t\t// cell's left edge).\n\t\t\t\t\"shadow-[1px_0_0_0_var(--border-color-card-muted)]\",\n\t\t\t\t// Soft shadow gradient fading leftward. Uses mantle's shadow\n\t\t\t\t// tokens so the alpha adapts to light/dark themes.\n\t\t\t\t\"bg-linear-to-l to-transparent\",\n\t\t\t\t\"from-[color-mix(in_oklab,var(--shadow-color)_var(--shadow-second-opacity),transparent)]\",\n\t\t\t)}\n\t\t/>\n\t);\n}\n\ntype DataTableActionCellProps = ComponentProps<typeof Table.Cell>;\n\nfunction ActionCell({ children, className, ...props }: DataTableActionCellProps) {\n\treturn (\n\t\t<Table.Cell\n\t\t\t// Marks this cell as a sticky right-edge column so Table.Root can suppress\n\t\t\t// its container-level right-side scroll fade (keeping this cell opaque).\n\t\t\tdata-mantle-table-sticky-right\n\t\t\tclassName={cx(\n\t\t\t\t// `bg-inherit` keeps the sticky cell opaque with the row's current bg\n\t\t\t\t// (including hover state) so scrolling cells don't show through.\n\t\t\t\t// Avoid `display: flex` here — it overrides `display: table-cell`,\n\t\t\t\t// preventing the cell from stretching to the full row height in\n\t\t\t\t// `border-separate` mode.\n\t\t\t\t\"sticky z-10 right-0 text-end align-middle bg-inherit p-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<StickyColIndicator />\n\t\t\t{children}\n\t\t</Table.Cell>\n\t);\n}\n\ntype DataTableActionHeaderProps = ComponentProps<typeof Table.Header>;\n\n/**\n * A sticky header cell that pairs with `DataTable.ActionCell`. Use this as the\n * header for the action column so the pinned column visually aligns across the\n * header and every body row when the table scrolls horizontally.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableactionheader\n *\n * @example\n * ```tsx\n * columnHelper.display({\n *   id: \"actions\",\n *   header: () => <DataTable.ActionHeader />,\n *   cell: () => <DataTable.ActionCell>{...}</DataTable.ActionCell>,\n * })\n * ```\n */\nfunction ActionHeader({ children, className, ...props }: DataTableActionHeaderProps) {\n\tconst { table } = useDataTableContext();\n\tconst hasRows = table.getRowModel().rows.length > 0;\n\n\treturn (\n\t\t<Table.Header\n\t\t\t// Only mark as sticky-right when body rows exist so the empty state\n\t\t\t// doesn't suppress the container's right-side scroll fade.\n\t\t\t{...(hasRows ? { \"data-mantle-table-sticky-right\": true } : {})}\n\t\t\tclassName={cx(\n\t\t\t\t// `bg-inherit` keeps the sticky header opaque with the thead's current bg.\n\t\t\t\thasRows && \"sticky z-10 right-0 bg-inherit\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{hasRows && <StickyColIndicator />}\n\t\t\t{children}\n\t\t</Table.Header>\n\t);\n}\n\n// Set display names to preserve original component names for debugging\nRoot.displayName = \"DataTable\";\nActionCell.displayName = \"DataTableActionCell\";\nActionHeader.displayName = \"DataTableActionHeader\";\nBody.displayName = \"DataTableBody\";\nEmptyRow.displayName = \"DataTableEmptyRow\";\nHead.displayName = \"DataTableHead\";\nHeader.displayName = \"DataTableHeader\";\nHeaderSortButton.displayName = \"DataTableHeaderSortButton\";\nRow.displayName = \"DataTableRow\";\n\n/**\n * A data table component that provides sorting and other data table functionality.\n * Built on top of TanStack Table for advanced table features.\n *\n * @see https://mantle.ngrok.com/components/data-table\n *\n * @example\n * Composition:\n * ```\n * DataTable.Root\n * ├── DataTable.Head\n * │   └── DataTable.Row\n * │       ├── DataTable.Header\n * │       │   └── DataTable.HeaderSortButton\n * │       └── DataTable.ActionHeader\n * └── DataTable.Body\n *     ├── DataTable.Row\n *     │   ├── DataTable.Cell\n *     │   └── DataTable.ActionCell\n *     └── DataTable.EmptyRow\n * ```\n *\n * @example\n * ```tsx\n * <DataTable table={table}>\n *   <DataTable.Head />\n *   <DataTable.Body>\n *     <DataTable.Rows />\n *   </DataTable.Body>\n * </DataTable>\n * ```\n */\nconst DataTable = {\n\t/**\n\t * The root container of the data table component.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Root table={table}>\n\t *   <DataTable.Head />\n\t *   <DataTable.Body>\n\t *     <DataTable.Rows />\n\t *   </DataTable.Body>\n\t * </DataTable.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A sticky action cell positioned at the end of each row for action buttons.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableactioncell\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.ActionCell>\n\t *   <Button size=\"sm\">Edit</Button>\n\t *   <Button size=\"sm\">Delete</Button>\n\t * </DataTable.ActionCell>\n\t * ```\n\t */\n\tActionCell,\n\t/**\n\t * A sticky header cell that pairs with `DataTable.ActionCell`, keeping the\n\t * action column aligned across the header and body when scrolling horizontally.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableactionheader\n\t *\n\t * @example\n\t * ```tsx\n\t * columnHelper.display({\n\t *   id: \"actions\",\n\t *   header: () => <DataTable.ActionHeader />,\n\t *   cell: () => <DataTable.ActionCell>{...}</DataTable.ActionCell>,\n\t * })\n\t * ```\n\t */\n\tActionHeader,\n\t/**\n\t * A table cell component for rendering individual data cells.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatablecell\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Cell>\n\t *   Cell content\n\t * </DataTable.Cell>\n\t * ```\n\t */\n\tCell: Table.Cell,\n\t/**\n\t * The table body container for rows of data.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatablebody\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Body>\n\t *   <DataTable.Rows />\n\t * </DataTable.Body>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * An empty state row that spans all columns when there's no data to display.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableemptyrow\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.EmptyRow>\n\t *   No data available\n\t * </DataTable.EmptyRow>\n\t * ```\n\t */\n\tEmptyRow,\n\t/**\n\t * The table header container that renders column headers automatically.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatablehead\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Head />\n\t * ```\n\t */\n\tHead,\n\t/**\n\t * A header cell component optimized for data table header actions.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Header>\n\t *   <DataTable.HeaderSortButton column={column} sortingMode=\"alphanumeric\">\n\t *     Column Title\n\t *   </DataTable.HeaderSortButton>\n\t * </DataTable.Header>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * A sortable button toggle for column headers with sorting functionality.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableheadersortbutton\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.HeaderSortButton\n\t *   column={column}\n\t *   sortingMode=\"alphanumeric\"\n\t * >\n\t *   Column Title\n\t * </DataTable.HeaderSortButton>\n\t * ```\n\t */\n\tHeaderSortButton,\n\t/**\n\t * A single data table row component for rendering custom row layouts.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatablerow\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Row row={row} />\n\t * ```\n\t */\n\tRow,\n} as const;\n\nexport {\n\t//,\n\tDataTable,\n};\n\ntype DefaultSortIconProps = SvgAttributes & {\n\tdirection: SortDirection | undefined;\n\tmode: SortingMode | undefined;\n};\n\nfunction DefaultSortIcon({ direction, mode, ...props }: DefaultSortIconProps) {\n\tif (direction === \"unsorted\" || !mode || !direction) {\n\t\treturn <svg aria-hidden {...props} />;\n\t}\n\n\treturn <SortIcon mode={mode} direction={direction} {...props} />;\n}\n\n/**\n * Toggle the sorting direction of a column.\n * This ordering is typically toggled by clicking the column header.\n *\n * @example\n * ```md\n * Each click cycles through...\n *\n * For alphanumeric sorting:\n *   unsorted ➡️ ascending ➡️ descending ➡️ unsorted ➡️ ...\n *\n * For time sorting:\n *   unsorted ➡️ newest-to-oldest ➡️ oldest-to-newest ➡️ unsorted ➡️ ...\n *\n *   this is equivalent to the inverse of alphanumeric sorting, or\n *   unsorted ➡️ descending ➡️ ascending ➡️ unsorted ➡️ ...\n * ```\n */\nfunction toggleNextSortingDirection<TData, TValue>(\n\tcolumn: Column<TData, TValue>,\n\tsortingMode: SortingMode,\n) {\n\tif (!column.getCanSort()) {\n\t\treturn;\n\t}\n\n\tconst sortDirection = column.getIsSorted();\n\tconst currentSortDirection: SortDirection =\n\t\ttypeof sortDirection === \"string\" ? sortDirection : \"unsorted\";\n\n\tconst nextSortDirection = getNextSortDirection(currentSortDirection, sortingMode);\n\n\tswitch (nextSortDirection) {\n\t\tcase \"unsorted\":\n\t\t\tcolumn.clearSorting();\n\t\t\treturn;\n\t\tcase \"asc\":\n\t\t\tcolumn.toggleSorting(false);\n\t\t\treturn;\n\t\tcase \"desc\":\n\t\t\tcolumn.toggleSorting(true);\n\t\t\treturn;\n\t\tdefault:\n\t\t\treturn;\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"file":"data-table.js","names":["Table","Row"],"sources":["../src/components/data-table/helpers.ts","../src/components/data-table/data-table.tsx"],"sourcesContent":["import type { SortingMode } from \"../../utils/sorting/direction.js\";\nimport type { SortDirection } from \"./types.js\";\n\nconst alphanumericSortingOrder = [\"unsorted\", \"asc\", \"desc\"] as const satisfies SortDirection[];\n\nconst timeSortingOrder = [\"unsorted\", \"desc\", \"asc\"] as const satisfies SortDirection[];\n\n/**\n * Get the next sort direction based on the current sort direction and sorting mode.\n */\nfunction getNextSortDirection(currentSortDirection: SortDirection, sortingMode: SortingMode) {\n\tconst sortOrder = sortingMode === \"alphanumeric\" ? alphanumericSortingOrder : timeSortingOrder;\n\n\treturn getNextInCircularList(sortOrder, currentSortDirection) ?? \"unsorted\";\n}\n\n/**\n * Get the next item in a circular list.\n * If the current item is not found in the list (or it's empty), return the fallback value.\n */\nfunction getNextInCircularList<T>(list: T[], currentItem: T, fallback?: T | undefined) {\n\tif (list.length === 0) {\n\t\treturn fallback;\n\t}\n\n\tconst currentItemIndex = list.findIndex((item) => item === currentItem);\n\tif (currentItemIndex === -1) {\n\t\treturn fallback;\n\t}\n\n\tconst nextIndex = (currentItemIndex + 1) % list.length;\n\treturn list.at(nextIndex) ?? fallback;\n}\n\nexport {\n\t//,\n\tgetNextSortDirection,\n\tgetNextInCircularList,\n};\n","import {\n\ttype Column,\n\ttype HeaderContext,\n\ttype Table as TableInstance,\n\ttype Row as TableRow,\n\tflexRender,\n} from \"@tanstack/react-table\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tFragment,\n\ttype ReactNode,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseMemo,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { $timeSortingDirection, type SortingMode } from \"../../utils/sorting/direction.js\";\nimport { Button } from \"../button/button.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { SortIcon } from \"../icons/sort.js\";\nimport { Table } from \"../table/table.js\";\nimport { getNextSortDirection } from \"./helpers.js\";\nimport type { SortDirection } from \"./types.js\";\n\ntype DataTableContextShape<TData = unknown> = {\n\ttable: TableInstance<TData>;\n};\n\n// oxlint-disable-next-line typescript/no-explicit-any - known limitation of react context when using generics 😭\nconst DataTableContext = createContext<DataTableContextShape<any> | null>(null);\n\n/**\n * @private\n */\nfunction useDataTableContext<TData>() {\n\tconst context = useContext(DataTableContext);\n\n\tinvariant(context, \"useDataTableContext should only be used within a DataTable child component\");\n\n\treturn context as DataTableContextShape<TData>;\n}\n\ntype DataTableProps<TData> = ComponentProps<typeof Table.Root> & {\n\ttable: TableInstance<TData>;\n};\n\n/**\n * A data table component that provides sorting and other data table functionality.\n * Built on top of TanStack Table for advanced table features.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableroot\n *\n * @example\n * ```tsx\n * <DataTable table={table}>\n *   <DataTable.Head />\n *   <DataTable.Body>\n *     <DataTable.Rows />\n *   </DataTable.Body>\n * </DataTable>\n * ```\n */\nfunction Root<TData>({ children, table, ...props }: DataTableProps<TData>) {\n\tconst context: DataTableContextShape<TData> = useMemo(() => ({ table }), [table]);\n\n\treturn (\n\t\t<DataTableContext.Provider value={context}>\n\t\t\t<Table.Root data-slot=\"data-table\" {...props}>\n\t\t\t\t<Table.Element>{children}</Table.Element>\n\t\t\t</Table.Root>\n\t\t</DataTableContext.Provider>\n\t);\n}\n\ntype DataTableHeaderSortButtonProps<TData, TValue> = Omit<ComponentProps<typeof Button>, \"icon\"> &\n\tPick<HeaderContext<TData, TValue>, \"column\"> &\n\t(\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Disable sorting for this column.\n\t\t\t\t * It will prevent the sorting direction from being toggled and any icon\n\t\t\t\t * from being shown.\n\t\t\t\t */\n\t\t\t\tdisableSorting: true;\n\t\t\t\t/**\n\t\t\t\t * Use this to render a custom sort icon for the column if it is sortable\n\t\t\t\t * and you want to override the default sort icon\n\t\t\t\t */\n\t\t\t\tsortIcon?: undefined;\n\t\t\t\t/**\n\t\t\t\t * The sorting mode of the column, whether it is alphanumeric or time based.\n\t\t\t\t */\n\t\t\t\tsortingMode?: undefined;\n\t\t  }\n\t\t| {\n\t\t\t\tdisableSorting?: false;\n\t\t\t\t/**\n\t\t\t\t * Use this to render a custom sort icon for the column if it is sortable\n\t\t\t\t * and you want to override the default sort icon\n\t\t\t\t */\n\t\t\t\tsortIcon?: (sortDirection: SortDirection) => ReactNode;\n\t\t\t\t/**\n\t\t\t\t * The sorting mode of the column, whether it is alphanumeric or time based.\n\t\t\t\t */\n\t\t\t\tsortingMode: SortingMode;\n\t\t  }\n\t);\n\n/**\n * A sortable button toggle for a column header in a data table.\n * If the column is sortable, clicking the button will toggle the sorting\n * direction.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableheadersortbutton\n *\n * @example\n * ```tsx\n * <DataTable.HeaderSortButton\n *   column={column}\n *   sortingMode=\"alphanumeric\"\n * >\n *   Column Title\n * </DataTable.HeaderSortButton>\n * ```\n *\n * Each click cycles through:\n * - For alphanumeric sorting: unsorted ➡️ ascending ➡️ descending ➡️ unsorted\n * - For time sorting: unsorted ➡️ newest-to-oldest ➡️ oldest-to-newest ➡️ unsorted\n */\nfunction HeaderSortButton<TData, TValue>({\n\tchildren,\n\tclassName,\n\tcolumn,\n\tdisableSorting = false,\n\ticonPlacement = \"end\",\n\tsortingMode,\n\tsortIcon: propSortIcon,\n\tonClick,\n\t...props\n}: DataTableHeaderSortButtonProps<TData, TValue>) {\n\tconst _sortDirection = column.getIsSorted();\n\tconst canSort = !disableSorting && column.getCanSort();\n\n\tconst sortDirection: SortDirection =\n\t\tcanSort && typeof _sortDirection === \"string\" ? _sortDirection : \"unsorted\";\n\n\tconst sortIcon = propSortIcon?.(sortDirection) ?? (\n\t\t<DefaultSortIcon mode={sortingMode} direction={sortDirection} />\n\t);\n\n\treturn (\n\t\t<Button\n\t\t\tappearance=\"ghost\"\n\t\t\tdata-slot=\"data-table-header-sort-button\"\n\t\t\tclassName={cx(\n\t\t\t\t\"flex justify-start w-full h-full rounded-none not-disabled:active:scale-none text-muted\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tdata-sort-direction={sortDirection}\n\t\t\tdata-table-header-action\n\t\t\ticon={sortIcon}\n\t\t\ticonPlacement={iconPlacement}\n\t\t\tonClick={(event) => {\n\t\t\t\tonClick?.(event);\n\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (!canSort || disableSorting || typeof sortingMode === \"undefined\") {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\ttoggleNextSortingDirection(column, sortingMode);\n\t\t\t}}\n\t\t\tpriority=\"neutral\"\n\t\t\ttype=\"button\"\n\t\t\t{...props}\n\t\t>\n\t\t\t{canSort && sortDirection !== \"unsorted\" && (\n\t\t\t\t<span className=\"sr-only\">\n\t\t\t\t\tColumn sorted in{\" \"}\n\t\t\t\t\t{sortingMode === \"alphanumeric\"\n\t\t\t\t\t\t? sortDirection === \"asc\"\n\t\t\t\t\t\t\t? \"ascending\"\n\t\t\t\t\t\t\t: \"descending\"\n\t\t\t\t\t\t: $timeSortingDirection(sortDirection)}{\" \"}\n\t\t\t\t\torder\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t{children}\n\t\t</Button>\n\t);\n}\n\ntype DataTableHeaderProps = ComponentProps<typeof Table.Header>;\n\n/**\n * A header for a data table.\n * This is typically used to wrap the `DataTable.HeaderSortButton` component.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableheader\n *\n * @example\n * ```tsx\n * <DataTable.Header>\n *   <DataTable.HeaderSortButton column={column} sortingMode=\"alphanumeric\">\n *     Column Title\n *   </DataTable.HeaderSortButton>\n * </DataTable.Header>\n * ```\n */\nfunction Header({ children, className, ...props }: DataTableHeaderProps) {\n\treturn (\n\t\t<Table.Header\n\t\t\tdata-slot=\"data-table-header\"\n\t\t\tclassName={cx(\"has-data-table-header-action:px-0\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Table.Header>\n\t);\n}\n\nconst Body = forwardRef<\n\tComponentRef<typeof Table.Body>,\n\tComponentPropsWithoutRef<typeof Table.Body>\n>((props, ref) => <Table.Body ref={ref} data-slot=\"data-table-body\" {...props} />);\nBody.displayName = \"DataTableBody\";\n\ntype DataTableHeadProps = Omit<ComponentProps<typeof Table.Head>, \"children\">;\n\nfunction Head<TData>(props: DataTableHeadProps) {\n\tconst { table } = useDataTableContext<TData>();\n\n\treturn (\n\t\t<Table.Head data-slot=\"data-table-head\" {...props}>\n\t\t\t{table.getHeaderGroups().map((headerGroup) => (\n\t\t\t\t<Table.Row key={headerGroup.id}>\n\t\t\t\t\t{headerGroup.headers.map((header) => (\n\t\t\t\t\t\t<Fragment key={header.id}>\n\t\t\t\t\t\t\t{header.isPlaceholder ? (\n\t\t\t\t\t\t\t\t<Table.Header key={header.id} />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\tflexRender(header.column.columnDef.header, header.getContext())\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t))}\n\t\t\t\t</Table.Row>\n\t\t\t))}\n\t\t</Table.Head>\n\t);\n}\n\ntype DataTableRowProps<TData> = Omit<ComponentProps<typeof Table.Row>, \"children\"> & {\n\trow: TableRow<TData>;\n};\n\nfunction Row<TData>({ row, ...props }: DataTableRowProps<TData>) {\n\treturn (\n\t\t<Table.Row data-slot=\"data-table-row\" {...props}>\n\t\t\t{row.getVisibleCells().map((cell) => (\n\t\t\t\t<Fragment key={cell.id}>\n\t\t\t\t\t{flexRender(cell.column.columnDef.cell, cell.getContext())}\n\t\t\t\t</Fragment>\n\t\t\t))}\n\t\t</Table.Row>\n\t);\n}\n\ntype DataTableEmptyRowProps = ComponentProps<typeof Table.Row>;\n\nfunction EmptyRow<TData>({ children, ...props }: DataTableEmptyRowProps) {\n\tconst { table } = useDataTableContext<TData>();\n\tconst numberOfColumns = table.getAllColumns().length;\n\n\treturn (\n\t\t<Table.Row data-slot=\"data-table-empty-row\" {...props}>\n\t\t\t<Table.Cell colSpan={numberOfColumns}>{children}</Table.Cell>\n\t\t</Table.Row>\n\t);\n}\n\n/**\n * Internal: renders the visual indicator on the left edge of the sticky action\n * column — a 1px divider plus a soft shadow gradient that reads as content\n * sliding under the pinned column. Positioned as a 6px strip sitting\n * immediately to the left of its sticky parent cell; `-inset-y-px` lets\n * adjacent rows' strips overlap at row dividers so the effect reads as one\n * continuous column instead of per-row blobs.\n *\n * Rendered as a child `<span>` because box-shadow on `<td>`/`<th>` is\n * unreliable across table layout modes.\n */\nfunction StickyColIndicator() {\n\treturn (\n\t\t<span\n\t\t\taria-hidden\n\t\t\tclassName={cx(\n\t\t\t\t\"pointer-events-none absolute -inset-y-px -left-1.5 w-1.5\",\n\t\t\t\t\"opacity-0 transition-opacity group-data-sticky-active/table:opacity-100\",\n\t\t\t\t// 1px divider painted at the strip's right edge (= the pinned\n\t\t\t\t// cell's left edge).\n\t\t\t\t\"shadow-[1px_0_0_0_var(--border-color-card-muted)]\",\n\t\t\t\t// Soft shadow gradient fading leftward. Uses mantle's shadow\n\t\t\t\t// tokens so the alpha adapts to light/dark themes.\n\t\t\t\t\"bg-linear-to-l to-transparent\",\n\t\t\t\t\"from-[color-mix(in_oklab,var(--shadow-color)_var(--shadow-second-opacity),transparent)]\",\n\t\t\t)}\n\t\t/>\n\t);\n}\n\ntype DataTableActionCellProps = ComponentProps<typeof Table.Cell>;\n\nfunction ActionCell({ children, className, ...props }: DataTableActionCellProps) {\n\treturn (\n\t\t<Table.Cell\n\t\t\t// Marks this cell as a sticky right-edge column so Table.Root can suppress\n\t\t\t// its container-level right-side scroll fade (keeping this cell opaque).\n\t\t\tdata-mantle-table-sticky-right\n\t\t\tdata-slot=\"data-table-action-cell\"\n\t\t\tclassName={cx(\n\t\t\t\t// `bg-inherit` keeps the sticky cell opaque with the row's current bg\n\t\t\t\t// (including hover state) so scrolling cells don't show through.\n\t\t\t\t// Avoid `display: flex` here — it overrides `display: table-cell`,\n\t\t\t\t// preventing the cell from stretching to the full row height in\n\t\t\t\t// `border-separate` mode.\n\t\t\t\t\"sticky z-10 right-0 text-end align-middle bg-inherit p-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<StickyColIndicator />\n\t\t\t{children}\n\t\t</Table.Cell>\n\t);\n}\n\ntype DataTableActionHeaderProps = ComponentProps<typeof Table.Header>;\n\n/**\n * A sticky header cell that pairs with `DataTable.ActionCell`. Use this as the\n * header for the action column so the pinned column visually aligns across the\n * header and every body row when the table scrolls horizontally.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableactionheader\n *\n * @example\n * ```tsx\n * columnHelper.display({\n *   id: \"actions\",\n *   header: () => <DataTable.ActionHeader />,\n *   cell: () => <DataTable.ActionCell>{...}</DataTable.ActionCell>,\n * })\n * ```\n */\nfunction ActionHeader({ children, className, ...props }: DataTableActionHeaderProps) {\n\tconst { table } = useDataTableContext();\n\tconst hasRows = table.getRowModel().rows.length > 0;\n\n\treturn (\n\t\t<Table.Header\n\t\t\t// Only mark as sticky-right when body rows exist so the empty state\n\t\t\t// doesn't suppress the container's right-side scroll fade.\n\t\t\t{...(hasRows ? { \"data-mantle-table-sticky-right\": true } : {})}\n\t\t\tdata-slot=\"data-table-action-header\"\n\t\t\tclassName={cx(\n\t\t\t\t// `bg-inherit` keeps the sticky header opaque with the thead's current bg.\n\t\t\t\thasRows && \"sticky z-10 right-0 bg-inherit\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{hasRows && <StickyColIndicator />}\n\t\t\t{children}\n\t\t</Table.Header>\n\t);\n}\n\n// Set display names to preserve original component names for debugging\nRoot.displayName = \"DataTable\";\nActionCell.displayName = \"DataTableActionCell\";\nActionHeader.displayName = \"DataTableActionHeader\";\nBody.displayName = \"DataTableBody\";\nEmptyRow.displayName = \"DataTableEmptyRow\";\nHead.displayName = \"DataTableHead\";\nHeader.displayName = \"DataTableHeader\";\nHeaderSortButton.displayName = \"DataTableHeaderSortButton\";\nRow.displayName = \"DataTableRow\";\n\n/**\n * A data table component that provides sorting and other data table functionality.\n * Built on top of TanStack Table for advanced table features.\n *\n * @see https://mantle.ngrok.com/components/data-table\n *\n * @example\n * Composition:\n * ```\n * DataTable.Root\n * ├── DataTable.Head\n * │   └── DataTable.Row\n * │       ├── DataTable.Header\n * │       │   └── DataTable.HeaderSortButton\n * │       └── DataTable.ActionHeader\n * └── DataTable.Body\n *     ├── DataTable.Row\n *     │   ├── DataTable.Cell\n *     │   └── DataTable.ActionCell\n *     └── DataTable.EmptyRow\n * ```\n *\n * @example\n * ```tsx\n * <DataTable table={table}>\n *   <DataTable.Head />\n *   <DataTable.Body>\n *     <DataTable.Rows />\n *   </DataTable.Body>\n * </DataTable>\n * ```\n */\nconst DataTable = {\n\t/**\n\t * The root container of the data table component.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Root table={table}>\n\t *   <DataTable.Head />\n\t *   <DataTable.Body>\n\t *     <DataTable.Rows />\n\t *   </DataTable.Body>\n\t * </DataTable.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A sticky action cell positioned at the end of each row for action buttons.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableactioncell\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.ActionCell>\n\t *   <Button size=\"sm\">Edit</Button>\n\t *   <Button size=\"sm\">Delete</Button>\n\t * </DataTable.ActionCell>\n\t * ```\n\t */\n\tActionCell,\n\t/**\n\t * A sticky header cell that pairs with `DataTable.ActionCell`, keeping the\n\t * action column aligned across the header and body when scrolling horizontally.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableactionheader\n\t *\n\t * @example\n\t * ```tsx\n\t * columnHelper.display({\n\t *   id: \"actions\",\n\t *   header: () => <DataTable.ActionHeader />,\n\t *   cell: () => <DataTable.ActionCell>{...}</DataTable.ActionCell>,\n\t * })\n\t * ```\n\t */\n\tActionHeader,\n\t/**\n\t * A table cell component for rendering individual data cells.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatablecell\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Cell>\n\t *   Cell content\n\t * </DataTable.Cell>\n\t * ```\n\t */\n\tCell: Table.Cell,\n\t/**\n\t * The table body container for rows of data.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatablebody\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Body>\n\t *   <DataTable.Rows />\n\t * </DataTable.Body>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * An empty state row that spans all columns when there's no data to display.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableemptyrow\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.EmptyRow>\n\t *   No data available\n\t * </DataTable.EmptyRow>\n\t * ```\n\t */\n\tEmptyRow,\n\t/**\n\t * The table header container that renders column headers automatically.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatablehead\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Head />\n\t * ```\n\t */\n\tHead,\n\t/**\n\t * A header cell component optimized for data table header actions.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Header>\n\t *   <DataTable.HeaderSortButton column={column} sortingMode=\"alphanumeric\">\n\t *     Column Title\n\t *   </DataTable.HeaderSortButton>\n\t * </DataTable.Header>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * A sortable button toggle for column headers with sorting functionality.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableheadersortbutton\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.HeaderSortButton\n\t *   column={column}\n\t *   sortingMode=\"alphanumeric\"\n\t * >\n\t *   Column Title\n\t * </DataTable.HeaderSortButton>\n\t * ```\n\t */\n\tHeaderSortButton,\n\t/**\n\t * A single data table row component for rendering custom row layouts.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatablerow\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Row row={row} />\n\t * ```\n\t */\n\tRow,\n} as const;\n\nexport {\n\t//,\n\tDataTable,\n};\n\ntype DefaultSortIconProps = SvgAttributes & {\n\tdirection: SortDirection | undefined;\n\tmode: SortingMode | undefined;\n};\n\nfunction DefaultSortIcon({ direction, mode, ...props }: DefaultSortIconProps) {\n\tif (direction === \"unsorted\" || !mode || !direction) {\n\t\treturn <svg aria-hidden {...props} />;\n\t}\n\n\treturn <SortIcon mode={mode} direction={direction} {...props} />;\n}\n\n/**\n * Toggle the sorting direction of a column.\n * This ordering is typically toggled by clicking the column header.\n *\n * @example\n * ```md\n * Each click cycles through...\n *\n * For alphanumeric sorting:\n *   unsorted ➡️ ascending ➡️ descending ➡️ unsorted ➡️ ...\n *\n * For time sorting:\n *   unsorted ➡️ newest-to-oldest ➡️ oldest-to-newest ➡️ unsorted ➡️ ...\n *\n *   this is equivalent to the inverse of alphanumeric sorting, or\n *   unsorted ➡️ descending ➡️ ascending ➡️ unsorted ➡️ ...\n * ```\n */\nfunction toggleNextSortingDirection<TData, TValue>(\n\tcolumn: Column<TData, TValue>,\n\tsortingMode: SortingMode,\n) {\n\tif (!column.getCanSort()) {\n\t\treturn;\n\t}\n\n\tconst sortDirection = column.getIsSorted();\n\tconst currentSortDirection: SortDirection =\n\t\ttypeof sortDirection === \"string\" ? sortDirection : \"unsorted\";\n\n\tconst nextSortDirection = getNextSortDirection(currentSortDirection, sortingMode);\n\n\tswitch (nextSortDirection) {\n\t\tcase \"unsorted\":\n\t\t\tcolumn.clearSorting();\n\t\t\treturn;\n\t\tcase \"asc\":\n\t\t\tcolumn.toggleSorting(false);\n\t\t\treturn;\n\t\tcase \"desc\":\n\t\t\tcolumn.toggleSorting(true);\n\t\t\treturn;\n\t\tdefault:\n\t\t\treturn;\n\t}\n}\n"],"mappings":"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"}

package/dist/description-list.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./slot-D_ZUrdEW.js";import{forwardRef as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`dl`,{ref:s,className:e(`relative scrollbar overflow-x-auto overscroll-x-none rounded-lg border border-card grid grid-cols-[auto_1fr] gap-x-4 [&>*:nth-child(odd)]:bg-neutral-500/5 p-1`,i),...o,children:a}));i.displayName=`DescriptionList`;const a=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`div`,{ref:s,className:e(`rounded-sm col-span-full grid grid-cols-subgrid items-center`,i),...o,children:a}));a.displayName=`DescriptionListItem`;const o=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`dt`,{ref:s,className:e(`text-muted text-sm font-sans font-medium min-w-36 p-2`,i),...o,children:a}));o.displayName=`DescriptionListLabel`;const s=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`dd`,{ref:s,className:e(`text-body font-mono text-mono py-2 px-3`,i),...o,children:a}));s.displayName=`DescriptionListValue`;const c={Root:i,Item:a,Label:o,Value:s};export{c as DescriptionList};
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./slot-D_ZUrdEW.js";import{forwardRef as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`dl`,{ref:s,"data-slot":`description-list`,className:e(`relative scrollbar overflow-x-auto overscroll-x-none rounded-lg border border-card grid grid-cols-[auto_1fr] gap-x-4 [&>*:nth-child(odd)]:bg-neutral-500/5 p-1`,i),...o,children:a}));i.displayName=`DescriptionList`;const a=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`div`,{ref:s,"data-slot":`description-list-item`,className:e(`rounded-sm col-span-full grid grid-cols-subgrid items-center`,i),...o,children:a}));a.displayName=`DescriptionListItem`;const o=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`dt`,{ref:s,"data-slot":`description-list-label`,className:e(`text-muted text-sm font-sans font-medium min-w-36 p-2`,i),...o,children:a}));o.displayName=`DescriptionListLabel`;const s=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`dd`,{ref:s,"data-slot":`description-list-value`,className:e(`text-body font-mono text-mono py-2 px-3`,i),...o,children:a}));s.displayName=`DescriptionListValue`;const c={Root:i,Item:a,Label:o,Value:s};export{c as DescriptionList};
 //# sourceMappingURL=description-list.js.map