@ngrok/mantle 0.70.2 → 0.71.1

package/dist/code.d.ts

@@ -3,15 +3,36 @@ import * as _$react from "react";
 
 //#region src/components/code/code.d.ts
 /**
- * Marks text to signify a short fragment of inline computer code.
+ * Marks a short fragment of inline computer code — a function name, a
+ * variable, a CLI flag, a key. Renders a native `<code>` element with
+ * mantle's monospace styling.
+ *
+ * **When to use**
+ * - Inline within prose to identify code, file paths, env vars, or keys.
+ * - Wrap technical terms that should visually stand apart from running text.
+ *
+ * **When not to use**
+ * - For multi-line or syntax-highlighted blocks. Use {@link https://mantle.ngrok.com/components/code-block CodeBlock} instead.
+ * - For keyboard shortcuts. Use {@link https://mantle.ngrok.com/components/kbd Kbd}.
+ * - For arbitrary monospace text that isn't code (use a plain monospace utility class).
+ *
+ * **Polymorphism.** Pass `asChild` to render `Code` styling on a different
+ * element (e.g. a link wrapping a code-styled label).
  *
  * @see https://mantle.ngrok.com/components/code
  *
  * @example
  * ```tsx
+ * import { Code } from "@ngrok/mantle/code";
+ *
  * <p>
  *   Use the <Code>console.log()</Code> function to debug your code.
  * </p>
+ *
+ * // As a link, preserving Code styling.
+ * <Code asChild>
+ *   <a href="/api">/api/components.json</a>
+ * </Code>
  * ```
  */
 declare const Code: _$react.ForwardRefExoticComponent<Omit<_$react.ClassAttributes<HTMLElement> & _$react.HTMLAttributes<HTMLElement> & WithAsChild, "ref"> & _$react.RefAttributes<HTMLElement>>;

package/dist/code.js.map

@@ -1 +1 @@
-{"version":3,"file":"code.js","names":[],"sources":["../src/components/code/code.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentProps, ComponentRef } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot } from \"../slot/index.js\";\n\n/**\n * Marks text to signify a short fragment of inline computer code.\n *\n * @see https://mantle.ngrok.com/components/code\n *\n * @example\n * ```tsx\n * <p>\n *   Use the <Code>console.log()</Code> function to debug your code.\n * </p>\n * ```\n */\nconst Code = forwardRef<ComponentRef<\"code\">, ComponentProps<\"code\"> & WithAsChild>(\n\t({ asChild, className, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"code\";\n\t\treturn (\n\t\t\t<Comp\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"code\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"border-gray-500/15 rounded-md border bg-gray-500/5 px-1 font-mono text-[0.8em]\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCode.displayName = \"Code\";\n\nexport {\n\t//,\n\tCode,\n};\n"],"mappings":"kJAkBA,MAAM,EAAO,GACX,CAAE,UAAS,YAAW,GAAG,GAAS,IAGjC,EAFY,EAAU,EAAO,OAE7B,CACM,MACL,YAAU,OACV,UAAW,EACV,iFACA,EACA,CACD,GAAI,EACH,CAAA,CAGJ,CACD,EAAK,YAAc"}
+{"version":3,"file":"code.js","names":[],"sources":["../src/components/code/code.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentProps, ComponentRef } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot } from \"../slot/index.js\";\n\n/**\n * Marks a short fragment of inline computer code — a function name, a\n * variable, a CLI flag, a key. Renders a native `<code>` element with\n * mantle's monospace styling.\n *\n * **When to use**\n * - Inline within prose to identify code, file paths, env vars, or keys.\n * - Wrap technical terms that should visually stand apart from running text.\n *\n * **When not to use**\n * - For multi-line or syntax-highlighted blocks. Use {@link https://mantle.ngrok.com/components/code-block CodeBlock} instead.\n * - For keyboard shortcuts. Use {@link https://mantle.ngrok.com/components/kbd Kbd}.\n * - For arbitrary monospace text that isn't code (use a plain monospace utility class).\n *\n * **Polymorphism.** Pass `asChild` to render `Code` styling on a different\n * element (e.g. a link wrapping a code-styled label).\n *\n * @see https://mantle.ngrok.com/components/code\n *\n * @example\n * ```tsx\n * import { Code } from \"@ngrok/mantle/code\";\n *\n * <p>\n *   Use the <Code>console.log()</Code> function to debug your code.\n * </p>\n *\n * // As a link, preserving Code styling.\n * <Code asChild>\n *   <a href=\"/api\">/api/components.json</a>\n * </Code>\n * ```\n */\nconst Code = forwardRef<ComponentRef<\"code\">, ComponentProps<\"code\"> & WithAsChild>(\n\t({ asChild, className, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"code\";\n\t\treturn (\n\t\t\t<Comp\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"code\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"border-gray-500/15 rounded-md border bg-gray-500/5 px-1 font-mono text-[0.8em]\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCode.displayName = \"Code\";\n\nexport {\n\t//,\n\tCode,\n};\n"],"mappings":"kJAuCA,MAAM,EAAO,GACX,CAAE,UAAS,YAAW,GAAG,GAAS,IAGjC,EAFY,EAAU,EAAO,OAE7B,CACM,MACL,YAAU,OACV,UAAW,EACV,iFACA,EACA,CACD,GAAI,EACH,CAAA,CAGJ,CACD,EAAK,YAAc"}

package/dist/combobox.d.ts

@@ -18,6 +18,10 @@ type ComboboxItemValueProps = Omit<Primitive.ComboboxItemValueProps<"span">, "re
  * This component is based on the WAI-ARIA Combobox Pattern and is powered by the
  * ariakit Combobox.
  *
+ * Use Combobox for a list of options where the user types to filter — large static lists,
+ * async/server-side data, or any single-select where search is helpful. For very small
+ * finite lists with no filtering, prefer Select. For multi-selection, prefer MultiSelect.
+ *
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
  * @see https://ariakit.org/components/combobox
  *
@@ -37,6 +41,7 @@ type ComboboxItemValueProps = Omit<Primitive.ComboboxItemValueProps<"span">, "re
  * ```
  *
  * @example
+ * ```tsx
  * <Combobox.Root>
  *   <Combobox.Input />
  *   <Combobox.Content>
@@ -44,11 +49,16 @@ type ComboboxItemValueProps = Omit<Primitive.ComboboxItemValueProps<"span">, "re
  *     <Combobox.Item value="Banana" />
  *   </Combobox.Content>
  * </Combobox.Root>
+ * ```
  */
 declare const Combobox: {
   /**
    * Root component for a combobox. Provides a combobox store that controls the state of Combobox components.
    *
+   * Use Combobox for a list of options where the user types to filter — large static lists,
+   * async/server-side data, or any single-select where search is helpful. For very small
+   * finite lists with no filtering, prefer Select. For multi-selection, prefer MultiSelect.
+   *
    * @see https://mantle.ngrok.com/components/combobox#comboboxroot
    *
    * @example

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\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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"}
+{"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 * Use Combobox for a list of options where the user types to filter — large static lists,\n * async/server-side data, or any single-select where search is helpful. For very small\n * finite lists with no filtering, prefer Select. For multi-selection, prefer MultiSelect.\n *\n * @see https://mantle.ngrok.com/components/combobox#comboboxroot\n *\n * @example\n * ```tsx\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 * ```\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 * @see https://mantle.ngrok.com/components/combobox#comboboxinput\n *\n * @example\n * ```tsx\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 * ```\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 * @see https://mantle.ngrok.com/components/combobox#comboboxcontent\n *\n * @example\n * ```tsx\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 * ```\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 * @see https://mantle.ngrok.com/components/combobox#comboboxitem\n *\n * @example\n * ```tsx\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 * ```\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 * @see https://mantle.ngrok.com/components/combobox#comboboxgroup\n *\n * @example\n * ```tsx\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 * ```\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 * @see https://mantle.ngrok.com/components/combobox#comboboxgrouplabel\n *\n * @example\n * ```tsx\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 * ```\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 * @see https://mantle.ngrok.com/components/combobox#comboboxitemvalue\n *\n * @example\n * ```tsx\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 * ```\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 * @see https://mantle.ngrok.com/components/combobox#comboboxseparator\n *\n * @example\n * ```tsx\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 * ```\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 * Use Combobox for a list of options where the user types to filter — large static lists,\n * async/server-side data, or any single-select where search is helpful. For very small\n * finite lists with no filtering, prefer Select. For multi-selection, prefer MultiSelect.\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 * ```tsx\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 * ```\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 * Use Combobox for a list of options where the user types to filter — large static lists,\n\t * async/server-side data, or any single-select where search is helpful. For very small\n\t * finite lists with no filtering, prefer Select. For multi-selection, prefer MultiSelect.\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

@@ -138,7 +138,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof _$react.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+  }, "asChild" | "key" | keyof _$react.HTMLAttributes<HTMLDivElement>> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -330,7 +330,7 @@ declare const Command: {
     ref?: React.Ref<HTMLInputElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof _$react.InputHTMLAttributes<HTMLInputElement> | "asChild">, "value" | "onChange" | "type"> & {
+  }, "asChild" | "key" | keyof _$react.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
   } & _$react.RefAttributes<HTMLInputElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
@@ -372,7 +372,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof _$react.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+  }, "asChild" | "key" | keyof _$react.HTMLAttributes<HTMLDivElement>> & {
     label?: string;
   } & _$react.RefAttributes<HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
@@ -413,7 +413,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof _$react.HTMLAttributes<HTMLDivElement> | "asChild"> & _$react.RefAttributes<HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+  }, "asChild" | "key" | keyof _$react.HTMLAttributes<HTMLDivElement>> & _$react.RefAttributes<HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * The group component for the Command component.
    *
@@ -452,7 +452,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof _$react.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
+  }, "asChild" | "key" | keyof _$react.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -495,7 +495,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof _$react.HTMLAttributes<HTMLDivElement> | "asChild">, "disabled" | "value" | "onSelect"> & {
+  }, "asChild" | "key" | keyof _$react.HTMLAttributes<HTMLDivElement>>, "disabled" | "onSelect" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;
@@ -571,7 +571,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof _$react.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+  }, "asChild" | "key" | keyof _$react.HTMLAttributes<HTMLDivElement>> & {
     alwaysRender?: boolean;
   } & _$react.RefAttributes<HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
 };

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\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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"}
+{"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":"kZAiDA,MAAM,EAAc,GAClB,CAAE,YAAW,GAAG,GAAS,IACzB,EAACA,EAAD,CACM,MACL,YAAU,UACV,UAAW,EAAG,oEAAqE,EAAU,CAC7F,GAAI,EACH,CAAA,CAEH,CACD,EAAY,YAAc,UAiF1B,MAAM,GAAwB,CAC7B,WACA,YACA,cAAc,iCACd,SACA,eACA,kBAAkB,GAClB,QAAQ,qBAER,EAAC,EAAO,QAAR,CAAgB,UAAW,EAAG,+BAAgC,EAAU,UAAxE,CACC,EAAC,EAAO,OAAR,CAAe,UAAU,4BAAzB,CACC,EAAC,EAAO,MAAR,CAAA,SAAe,EAAqB,CAAA,CACpC,EAAC,EAAO,YAAR,CAAA,SAAqB,EAAiC,CAAA,CACvC,GAChB,EAAC,EAAD,CACC,UAAU,sIACF,SACM,eAEb,WACY,CAAA,CACb,GACA,EAAC,MAAD,CAAK,UAAU,sCACd,EAAC,EAAO,gBAAR,EAA0B,CAAA,CACrB,CAAA,CAES,GAElB,EAAqB,YAAc,uBAkCnC,MAAM,EAAgB,CAiCrB,KAAM,EAAO,KAiCb,QAAS,EAAO,QAiChB,QAAS,EACT,CAkCK,EAAe,GAGlB,CAAE,YAAW,GAAG,GAAS,IAC3B,EAAC,MAAD,CACM,MACL,YAAU,wBACV,UAAU,oEAHX,CAKC,EAAC,EAAD,CAAqB,UAAU,6BAA+B,CAAA,CAC9D,EAACA,EAAiB,MAAlB,CACC,YAAU,gBACV,UAAW,EACV,gJACA,EACA,CACD,GAAI,EACH,CAAA,CACG,GACL,CACF,EAAa,YAAc,eAkC3B,MAAM,EAAc,GAGjB,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACA,EAAiB,KAAlB,CACM,MACL,YAAU,eACV,UAAW,EAAG,mEAAoE,EAAU,CAC5F,GAAI,EACH,CAAA,CACD,CACF,EAAY,YAAc,cAkC1B,MAAM,EAAe,GAGlB,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACA,EAAiB,MAAlB,CACM,MACL,YAAU,gBACV,UAAW,EAAG,2BAA4B,EAAU,CACpD,GAAI,EACH,CAAA,CACD,CACF,EAAa,YAAc,eAkC3B,MAAM,EAAe,GAGlB,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACA,EAAiB,MAAlB,CACM,MACL,YAAU,gBACV,UAAW,EACV,mMACA,EACA,CACD,GAAI,EACH,CAAA,CACD,CACF,EAAa,YAAc,eAkC3B,MAAM,EAAmB,GAGtB,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACA,EAAiB,UAAlB,CAAiC,MAAK,YAAU,oBAAoB,QAAA,GAAQ,GAAI,WAC/E,EAAC,EAAD,CAAW,UAAW,EAAG,oBAAqB,EAAU,CAAI,CAAA,CAChC,CAAA,CAC5B,CACF,EAAiB,YAAc,mBAkC/B,MAAM,EAAc,GAGjB,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACA,EAAiB,KAAlB,CACM,MACL,YAAU,eACV,UAAW,EACV,yVACA,EACA,CACD,GAAI,EACH,CAAA,CACD,CACF,EAAY,YAAc,cAkC1B,MAAM,EAAkB,GACtB,CAAE,YAAW,GAAG,GAAS,IACzB,EAAC,OAAD,CACM,MACL,YAAU,mBACV,UAAW,EAAG,6CAA8C,EAAU,CACtE,GAAI,EACH,CAAA,CAEH,CACD,EAAgB,YAAc,kBAiD9B,MAAM,EAAU,CAiCf,KAAM,EAkCN,OAAQ,EAiCR,MAAO,EAiCP,KAAM,EAiCN,MAAO,EAiCP,MAAO,EAiCP,KAAM,EAiCN,SAAU,EAiCV,UAAW,EACX,CCl8BD,SAAS,EAAQ,CAAE,YAAW,GAAG,GAAgB,CAChD,GAAM,CAAC,EAAO,GAAY,EAAc,IAAI,CAE5C,MAAgB,CACf,EAAS,GAAe,CAAC,EACvB,EAAE,CAAC,CAEN,IAAM,EAAQ,IAAU,IAAM,UAAY,UAE1C,OACC,EAAC,EAAD,CACC,GAAI,EACJ,yBAAA,GACA,YAAU,WACV,UAAW,EAAG,IAAU,KAAO,cAAe,EAAU,UAJzD,CAMC,EAAC,OAAD,CAAM,UAAU,mBAAW,EAAa,CAAA,CACvC,EACI,GAgBR,SAAS,EACR,EACoE,CACpE,MAAO,kBAAmB,EAU3B,SAAS,GAAqB,CAC7B,GAAI,OAAO,UAAc,IACxB,MAAO,IAGR,IAAI,EAAW,GAgBf,OAdI,EAAU,UAAU,GACvB,EAAW,UAAU,cAAc,UAAY,IAGhD,AACC,IAAW,UAAU,UAAY,UAAU,WAAa,GAGzC,wBAAwB,KAAK,EAElC,CACH,IAGD"}

package/dist/copy-to-clipboard-DjOD_Mwb.js.map

@@ -1 +1 @@
-{"version":3,"file":"copy-to-clipboard-DjOD_Mwb.js","names":[],"sources":["../src/utils/copy-to-clipboard.ts"],"sourcesContent":["import { canUseDOM } from \"../components/browser-only/browser-only.js\";\n\n/**\n * Copy the given string to the clipboard. Uses the Clipboard API when\n * available and falls back to an `execCommand(\"copy\")` polyfill for older\n * browsers.\n *\n * Throws when called outside a DOM environment, or when both the Clipboard\n * API and the polyfill fail — `await` the call to observe success.\n */\nasync function copyToClipboard(value: string) {\n\tif (!canUseDOM()) {\n\t\tthrow new Error(\"copyToClipboard requires a DOM environment\");\n\t}\n\ttry {\n\t\tif (typeof navigator.clipboard?.writeText === \"function\") {\n\t\t\tawait navigator.clipboard.writeText(value);\n\t\t} else {\n\t\t\tthrow new Error(\"writeText not supported\");\n\t\t}\n\t} catch (clipboardError) {\n\t\ttry {\n\t\t\tcopyToClipboardPolyfill(value);\n\t\t} catch {\n\t\t\tthrow clipboardError; // both approaches failed; propagate\n\t\t}\n\t}\n}\n\n/**\n * A fallback copy to clipboard function for older browsers that lack the\n * Clipboard API. Creates a temporary `<textarea>`, selects it, and invokes\n * the deprecated `document.execCommand(\"copy\")` API.\n *\n * Throws when `execCommand(\"copy\")` returns `false` (the call failed but\n * did not throw) so the caller can fall through to another strategy.\n */\nfunction copyToClipboardPolyfill(text: string) {\n\tconst tempTextArea = document.createElement(\"textarea\");\n\ttempTextArea.value = text;\n\tdocument.body.appendChild(tempTextArea);\n\ttry {\n\t\ttempTextArea.select();\n\t\tconst copied = document.execCommand(\"copy\");\n\t\tif (!copied) {\n\t\t\tthrow new Error('document.execCommand(\"copy\") failed');\n\t\t}\n\t} finally {\n\t\tdocument.body.removeChild(tempTextArea);\n\t}\n}\n\nexport { copyToClipboard };\n"],"mappings":"+CAUA,eAAe,EAAgB,EAAe,CAC7C,GAAI,CAAC,GAAW,CACf,MAAU,MAAM,6CAA6C,CAE9D,GAAI,CACH,GAAI,OAAO,UAAU,WAAW,WAAc,WAC7C,MAAM,UAAU,UAAU,UAAU,EAAM,MAE1C,MAAU,MAAM,0BAA0B,OAEnC,EAAgB,CACxB,GAAI,CACH,EAAwB,EAAM,MACvB,CACP,MAAM,IAaT,SAAS,EAAwB,EAAc,CAC9C,IAAM,EAAe,SAAS,cAAc,WAAW,CACvD,EAAa,MAAQ,EACrB,SAAS,KAAK,YAAY,EAAa,CACvC,GAAI,CAGH,GAFA,EAAa,QAAQ,CAEjB,CADW,SAAS,YAAY,OAAO,CAE1C,MAAU,MAAM,sCAAsC,QAE9C,CACT,SAAS,KAAK,YAAY,EAAa"}
+{"version":3,"file":"copy-to-clipboard-DjOD_Mwb.js","names":[],"sources":["../src/utils/copy-to-clipboard.ts"],"sourcesContent":["import { canUseDOM } from \"../components/browser-only/browser-only.js\";\n\n/**\n * Copy the given string to the clipboard. Uses the Clipboard API when\n * available and falls back to an `execCommand(\"copy\")` polyfill for older\n * browsers.\n *\n * Throws when called outside a DOM environment, or when both the Clipboard\n * API and the polyfill fail — `await` the call to observe success.\n */\nasync function copyToClipboard(value: string) {\n\tif (!canUseDOM()) {\n\t\tthrow new Error(\"copyToClipboard requires a DOM environment\");\n\t}\n\ttry {\n\t\tif (typeof navigator.clipboard?.writeText === \"function\") {\n\t\t\tawait navigator.clipboard.writeText(value);\n\t\t} else {\n\t\t\tthrow new Error(\"writeText not supported\");\n\t\t}\n\t} catch (clipboardError) {\n\t\ttry {\n\t\t\tcopyToClipboardPolyfill(value);\n\t\t} catch {\n\t\t\tthrow clipboardError; // both approaches failed; propagate\n\t\t}\n\t}\n}\n\n/**\n * A fallback copy to clipboard function for older browsers that lack the\n * Clipboard API. Creates a temporary `<textarea>`, selects it, and invokes\n * the deprecated `document.execCommand(\"copy\")` API.\n *\n * Throws when `execCommand(\"copy\")` returns `false` (the call failed but\n * did not throw) so the caller can fall through to another strategy.\n */\nfunction copyToClipboardPolyfill(text: string) {\n\tconst tempTextArea = document.createElement(\"textarea\");\n\ttempTextArea.value = text;\n\tdocument.body.appendChild(tempTextArea);\n\ttry {\n\t\ttempTextArea.select();\n\t\tconst copied = document.execCommand(\"copy\");\n\t\tif (!copied) {\n\t\t\tthrow new Error('document.execCommand(\"copy\") failed');\n\t\t}\n\t} finally {\n\t\tdocument.body.removeChild(tempTextArea);\n\t}\n}\n\nexport { copyToClipboard };\n"],"mappings":"+CAUA,eAAe,EAAgB,EAAe,CAC7C,GAAI,CAAC,GAAW,CACf,MAAU,MAAM,6CAA6C,CAE9D,GAAI,CACH,GAAI,OAAO,UAAU,WAAW,WAAc,WAC7C,MAAM,UAAU,UAAU,UAAU,EAAM,MAE1C,MAAU,MAAM,0BAA0B,OAEnC,EAAgB,CACxB,GAAI,CACH,EAAwB,EAAM,MACvB,CACP,MAAM,IAaT,SAAS,EAAwB,EAAc,CAC9C,IAAM,EAAe,SAAS,cAAc,WAAW,CACvD,EAAa,MAAQ,EACrB,SAAS,KAAK,YAAY,EAAa,CACvC,GAAI,CAGH,GAFA,EAAa,QAAQ,CAEjB,CADW,SAAS,YAAY,OACzB,CACV,MAAU,MAAM,sCAAsC,QAE9C,CACT,SAAS,KAAK,YAAY,EAAa"}