@ngrok/mantle 0.67.0 → 0.68.0

package/dist/code.d.ts

@@ -1,4 +1,4 @@
-import * as react from "react";
+import * as _$react from "react";
 import { HTMLAttributes } from "react";
 
 //#region src/components/code/code.d.ts
@@ -14,7 +14,7 @@ import { HTMLAttributes } from "react";
  * </p>
  * ```
  */
-declare const Code: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+declare const Code: _$react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & _$react.RefAttributes<HTMLSpanElement>>;
 //#endregion
 export { Code };
 //# sourceMappingURL=code.d.ts.map

package/dist/code.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{forwardRef as t}from"react";import{jsx as n}from"react/jsx-runtime";const r=t(({className:t,...r},i)=>n(`code`,{ref:i,className:e(`border-card rounded-md border bg-gray-500/5 px-1 py-0.5 font-mono text-[0.8em]`,t),...r}));r.displayName=`Code`;export{r as Code};
+import{t as e}from"./cx-D1HYnpvA.js";import{forwardRef as t}from"react";import{jsx as n}from"react/jsx-runtime";const r=t(({className:t,...r},i)=>n(`code`,{ref:i,className:e(`border-gray-500/15 rounded-md border bg-gray-500/5 px-1 font-mono text-[0.8em]`,t),...r}));r.displayName=`Code`;export{r as Code};
 //# sourceMappingURL=code.js.map

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 { HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx/cx.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<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(\n\t({ className, ...props }, ref) => (\n\t\t<code\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"border-card rounded-md border bg-gray-500/5 px-1 py-0.5 font-mono text-[0.8em]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nCode.displayName = \"Code\";\n\nexport {\n\t//,\n\tCode,\n};\n"],"mappings":"gHAgBA,MAAM,EAAO,GACX,CAAE,YAAW,GAAG,GAAS,IACzB,EAAC,OAAD,CACM,MACL,UAAW,EACV,iFACA,EACA,CACD,GAAI,EACH,CAAA,CAEH,CACD,EAAK,YAAc"}
+{"version":3,"file":"code.js","names":[],"sources":["../src/components/code/code.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx/cx.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<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(\n\t({ className, ...props }, ref) => (\n\t\t<code\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\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\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nCode.displayName = \"Code\";\n\nexport {\n\t//,\n\tCode,\n};\n"],"mappings":"gHAgBA,MAAM,EAAO,GACX,CAAE,YAAW,GAAG,GAAS,IACzB,EAAC,OAAD,CACM,MACL,UAAW,EACV,iFACA,EACA,CACD,GAAI,EACH,CAAA,CAEH,CACD,EAAK,YAAc"}

package/dist/color.d.ts

@@ -1,2 +1,2 @@
-import { a as functionalColors, c as isNamedColor, i as colors, l as namedColors, n as FunctionalColor, o as isColor, r as NamedColor, s as isFunctionalColor, t as Color } from "./index-C0yxjFyf.js";
+import { a as functionalColors, c as isNamedColor, i as colors, l as namedColors, n as FunctionalColor, o as isColor, r as NamedColor, s as isFunctionalColor, t as Color } from "./index-C3IiAC5H.js";
 export { Color, FunctionalColor, NamedColor, colors, functionalColors, isColor, isFunctionalColor, isNamedColor, namedColors };

package/dist/color.js

@@ -1,2 +1,2 @@
-const e=[`amber`,`blue`,`cyan`,`emerald`,`fuchsia`,`gray`,`green`,`indigo`,`lime`,`orange`,`pink`,`purple`,`red`,`rose`,`sky`,`teal`,`violet`,`yellow`],t=t=>typeof t==`string`&&e.includes(t),n=[`info`,`accent`,`danger`,`neutral`,`success`,`warning`],r=e=>typeof e==`string`&&n.includes(e),i=[...e,...n],a=e=>typeof e==`string`&&i.includes(e);export{i as colors,n as functionalColors,a as isColor,r as isFunctionalColor,t as isNamedColor,e as namedColors};
+const e=[`amber`,`blue`,`cyan`,`emerald`,`fuchsia`,`gray`,`green`,`indigo`,`lime`,`orange`,`pink`,`purple`,`red`,`rose`,`sky`,`teal`,`violet`,`yellow`],t=t=>typeof t==`string`&&e.includes(t),n=[`important`,`info`,`accent`,`danger`,`neutral`,`success`,`warning`],r=e=>typeof e==`string`&&n.includes(e),i=[...e,...n],a=e=>typeof e==`string`&&i.includes(e);export{i as colors,n as functionalColors,a as isColor,r as isFunctionalColor,t as isNamedColor,e as namedColors};
 //# sourceMappingURL=color.js.map

package/dist/color.js.map

@@ -1 +1 @@
-{"version":3,"file":"color.js","names":[],"sources":["../src/utils/color/colors.ts"],"sourcesContent":["/**\n * Color palette named colors\n */\nconst namedColors = [\n\t\"amber\",\n\t\"blue\",\n\t\"cyan\",\n\t\"emerald\",\n\t\"fuchsia\",\n\t\"gray\",\n\t\"green\",\n\t\"indigo\",\n\t\"lime\",\n\t\"orange\",\n\t\"pink\",\n\t\"purple\",\n\t\"red\",\n\t\"rose\",\n\t\"sky\",\n\t\"teal\",\n\t\"violet\",\n\t\"yellow\",\n] as const;\n\n/**\n * A named color from the color palette\n */\ntype NamedColor = (typeof namedColors)[number];\n\n/**\n * Check if a value is a color from the color palette\n */\nconst isNamedColor = (value: unknown): value is NamedColor =>\n\ttypeof value === \"string\" && namedColors.includes(value as NamedColor);\n\n/**\n * Functional named colors\n */\nconst functionalColors = [\"info\", \"accent\", \"danger\", \"neutral\", \"success\", \"warning\"] as const;\n\n/**\n * A functional color\n */\ntype FunctionalColor = (typeof functionalColors)[number];\n\n/**\n * Check if a value is a color from the functional colors\n */\nconst isFunctionalColor = (value: unknown): value is FunctionalColor =>\n\ttypeof value === \"string\" && functionalColors.includes(value as FunctionalColor);\n\n/**\n * All named mantle colors\n */\nconst colors = [...namedColors, ...functionalColors] as const;\n\n/**\n * A named mantle color\n */\ntype Color = (typeof colors)[number];\n\n/**\n * Check if a value is a named mantle color\n */\nconst isColor = (value: unknown): value is Color =>\n\ttypeof value === \"string\" && colors.includes(value as Color);\n\n// MARK: - Exports\n\nexport { colors, functionalColors, isColor, isFunctionalColor, isNamedColor, namedColors };\n\nexport type { Color, FunctionalColor, NamedColor };\n"],"mappings":"AAGA,MAAM,EAAc,CACnB,QACA,OACA,OACA,UACA,UACA,OACA,QACA,SACA,OACA,SACA,OACA,SACA,MACA,OACA,MACA,OACA,SACA,SACA,CAUK,EAAgB,GACrB,OAAO,GAAU,UAAY,EAAY,SAAS,EAAoB,CAKjE,EAAmB,CAAC,OAAQ,SAAU,SAAU,UAAW,UAAW,UAAU,CAUhF,EAAqB,GAC1B,OAAO,GAAU,UAAY,EAAiB,SAAS,EAAyB,CAK3E,EAAS,CAAC,GAAG,EAAa,GAAG,EAAiB,CAU9C,EAAW,GAChB,OAAO,GAAU,UAAY,EAAO,SAAS,EAAe"}
+{"version":3,"file":"color.js","names":[],"sources":["../src/utils/color/colors.ts"],"sourcesContent":["/**\n * Color palette named colors\n */\nconst namedColors = [\n\t\"amber\",\n\t\"blue\",\n\t\"cyan\",\n\t\"emerald\",\n\t\"fuchsia\",\n\t\"gray\",\n\t\"green\",\n\t\"indigo\",\n\t\"lime\",\n\t\"orange\",\n\t\"pink\",\n\t\"purple\",\n\t\"red\",\n\t\"rose\",\n\t\"sky\",\n\t\"teal\",\n\t\"violet\",\n\t\"yellow\",\n] as const;\n\n/**\n * A named color from the color palette\n */\ntype NamedColor = (typeof namedColors)[number];\n\n/**\n * Check if a value is a color from the color palette\n */\nconst isNamedColor = (value: unknown): value is NamedColor =>\n\ttypeof value === \"string\" && namedColors.includes(value as NamedColor);\n\n/**\n * Functional named colors\n */\nconst functionalColors = [\n\t\"important\",\n\t\"info\",\n\t\"accent\",\n\t\"danger\",\n\t\"neutral\",\n\t\"success\",\n\t\"warning\",\n] as const;\n\n/**\n * A functional color\n */\ntype FunctionalColor = (typeof functionalColors)[number];\n\n/**\n * Check if a value is a color from the functional colors\n */\nconst isFunctionalColor = (value: unknown): value is FunctionalColor =>\n\ttypeof value === \"string\" && functionalColors.includes(value as FunctionalColor);\n\n/**\n * All named mantle colors\n */\nconst colors = [...namedColors, ...functionalColors] as const;\n\n/**\n * A named mantle color\n */\ntype Color = (typeof colors)[number];\n\n/**\n * Check if a value is a named mantle color\n */\nconst isColor = (value: unknown): value is Color =>\n\ttypeof value === \"string\" && colors.includes(value as Color);\n\n// MARK: - Exports\n\nexport { colors, functionalColors, isColor, isFunctionalColor, isNamedColor, namedColors };\n\nexport type { Color, FunctionalColor, NamedColor };\n"],"mappings":"AAGA,MAAM,EAAc,CACnB,QACA,OACA,OACA,UACA,UACA,OACA,QACA,SACA,OACA,SACA,OACA,SACA,MACA,OACA,MACA,OACA,SACA,SACA,CAUK,EAAgB,GACrB,OAAO,GAAU,UAAY,EAAY,SAAS,EAAoB,CAKjE,EAAmB,CACxB,YACA,OACA,SACA,SACA,UACA,UACA,UACA,CAUK,EAAqB,GAC1B,OAAO,GAAU,UAAY,EAAiB,SAAS,EAAyB,CAK3E,EAAS,CAAC,GAAG,EAAa,GAAG,EAAiB,CAU9C,EAAW,GAChB,OAAO,GAAU,UAAY,EAAO,SAAS,EAAe"}

package/dist/combobox.d.ts

@@ -1,7 +1,7 @@
 import { t as WithAsChild } from "./as-child-CRRsxi3Y.js";
 import { o as WithValidation } from "./types-Cq6RWU7Q.js";
-import * as react from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as Primitive from "@ariakit/react";
 
 //#region src/components/combobox/combobox.d.ts
@@ -53,7 +53,7 @@ declare const Combobox: {
     ({
       children,
       ...props
-    }: ComboboxProps): react_jsx_runtime0.JSX.Element;
+    }: ComboboxProps): _$react_jsx_runtime0.JSX.Element;
     displayName: string;
   };
   /**
@@ -72,7 +72,7 @@ declare const Combobox: {
    * </Combobox.Root>
    * ```
    */
-  readonly Content: react.ForwardRefExoticComponent<Omit<ComboboxContentProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  readonly Content: _$react.ForwardRefExoticComponent<Omit<ComboboxContentProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * Renders a group for Combobox.Item elements.
    *
@@ -92,7 +92,7 @@ declare const Combobox: {
    * </Combobox.Root>
    * ```
    */
-  readonly Group: react.ForwardRefExoticComponent<Omit<ComboboxGroupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  readonly Group: _$react.ForwardRefExoticComponent<Omit<ComboboxGroupProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * Renders a label in a combobox group.
    *
@@ -112,7 +112,7 @@ declare const Combobox: {
    * </Combobox.Root>
    * ```
    */
-  readonly GroupLabel: react.ForwardRefExoticComponent<Omit<ComboboxGroupLabelProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  readonly GroupLabel: _$react.ForwardRefExoticComponent<Omit<ComboboxGroupLabelProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * Renders a combobox input element that can be used to filter a list of items.
    *
@@ -129,7 +129,7 @@ declare const Combobox: {
    * </Combobox.Root>
    * ```
    */
-  readonly Input: react.ForwardRefExoticComponent<Omit<ComboboxInputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
+  readonly Input: _$react.ForwardRefExoticComponent<Omit<ComboboxInputProps, "ref"> & _$react.RefAttributes<HTMLInputElement>>;
   /**
    * Renders a combobox item inside a Combobox.Content component.
    *
@@ -147,7 +147,7 @@ declare const Combobox: {
    * </Combobox.Root>
    * ```
    */
-  readonly Item: react.ForwardRefExoticComponent<Omit<ComboboxItemProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  readonly Item: _$react.ForwardRefExoticComponent<Omit<ComboboxItemProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * Highlights the match between the current Combobox.Input value and parent Combobox.Item value.
    *
@@ -170,7 +170,7 @@ declare const Combobox: {
    * </Combobox.Root>
    * ```
    */
-  readonly ItemValue: react.ForwardRefExoticComponent<Omit<ComboboxItemValueProps, "ref"> & react.RefAttributes<HTMLSpanElement>>;
+  readonly ItemValue: _$react.ForwardRefExoticComponent<Omit<ComboboxItemValueProps, "ref"> & _$react.RefAttributes<HTMLSpanElement>>;
   /**
    * Renders a separator between Combobox.Items or Combobox.Groups.
    *
@@ -193,10 +193,10 @@ declare const Combobox: {
    * </Combobox.Root>
    * ```
    */
-  readonly Separator: react.ForwardRefExoticComponent<Omit<Omit<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & WithAsChild & {
+  readonly Separator: _$react.ForwardRefExoticComponent<Omit<Omit<_$react.ClassAttributes<HTMLDivElement> & _$react.HTMLAttributes<HTMLDivElement> & WithAsChild & {
     orientation?: "horizontal" | "vertical";
     semantic?: boolean;
-  }, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  }, "ref"> & _$react.RefAttributes<HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
 };
 //#endregion
 export { Combobox };

package/dist/combobox.js

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

package/dist/combobox.js.map

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

package/dist/command.d.ts

@@ -1,8 +1,8 @@
-import { t as Root } from "./primitive-BmWrmUz1.js";
-import * as react from "react";
+import { t as Root } from "./primitive-BqLYh79k.js";
+import * as _$react from "react";
 import { ComponentProps, ComponentPropsWithoutRef, ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-import * as _radix_ui_react_dialog0 from "@radix-ui/react-dialog";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$_radix_ui_react_dialog0 from "@radix-ui/react-dialog";
 import { Command as Command$1, useCommandState } from "cmdk";
 
 //#region src/components/command/command.d.ts
@@ -95,13 +95,13 @@ declare const Command: {
    * </Command.Root>
    * ```
    */
-  readonly Root: react.ForwardRefExoticComponent<Omit<{
+  readonly Root: _$react.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-  } & Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
+  } & Pick<Pick<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof _$react.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+  }, "key" | "asChild" | keyof _$react.HTMLAttributes<HTMLDivElement>> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -111,7 +111,7 @@ declare const Command: {
     loop?: boolean;
     disablePointerSelection?: boolean;
     vimBindings?: boolean;
-  } & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  } & _$react.RefAttributes<HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * A compound namespace for building a command palette dialog.
    * Use `Command.Dialog.Root`, `Command.Dialog.Trigger`, and `Command.Dialog.Content`.
@@ -145,7 +145,7 @@ declare const Command: {
      *
      * @see https://mantle.ngrok.com/components/command#commanddialogtrigger
      */
-    readonly Trigger: react.ForwardRefExoticComponent<_radix_ui_react_dialog0.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+    readonly Trigger: _$react.ForwardRefExoticComponent<_$_radix_ui_react_dialog0.DialogTriggerProps & _$react.RefAttributes<HTMLButtonElement>>;
     /**
      * The visible content of the CommandDialog. Renders inside the dialog portal.
      *
@@ -160,7 +160,7 @@ declare const Command: {
         shouldFilter,
         showCloseButton,
         title
-      }: CommandDialogContentProps): react_jsx_runtime0.JSX.Element;
+      }: CommandDialogContentProps): _$react_jsx_runtime0.JSX.Element;
       displayName: string;
     };
   };
@@ -174,14 +174,14 @@ declare const Command: {
    * <Command.Input placeholder="Type a command or search..." />
    * ```
    */
-  readonly Input: react.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof react.InputHTMLAttributes<HTMLInputElement>> & {
+  readonly Input: _$react.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<_$react.DetailedHTMLProps<_$react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof _$react.InputHTMLAttributes<HTMLInputElement>> & {
     ref?: React.Ref<HTMLInputElement>;
   } & {
     asChild?: boolean;
-  }, "key" | "asChild" | keyof react.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+  }, "key" | "asChild" | keyof _$react.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
     value?: string;
     onValueChange?: (search: string) => void;
-  } & react.RefAttributes<HTMLInputElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  } & _$react.RefAttributes<HTMLInputElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * The list component for the Command component.
    *
@@ -193,15 +193,15 @@ declare const Command: {
    *   <Command.Empty>No results found.</Command.Empty>
    * </Command.List>
    */
-  readonly List: react.ForwardRefExoticComponent<Omit<{
+  readonly List: _$react.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-  } & Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
+  } & Pick<Pick<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof _$react.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+  }, "key" | "asChild" | keyof _$react.HTMLAttributes<HTMLDivElement>> & {
     label?: string;
-  } & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  } & _$react.RefAttributes<HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * The empty component for the Command component.
    *
@@ -212,13 +212,13 @@ declare const Command: {
    * <Command.Empty>No results found.</Command.Empty>
    * ```
    */
-  readonly Empty: react.ForwardRefExoticComponent<Omit<{
+  readonly Empty: _$react.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-  } & Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
+  } & Pick<Pick<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof _$react.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  }, "key" | "asChild" | keyof _$react.HTMLAttributes<HTMLDivElement>> & _$react.RefAttributes<HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * The group component for the Command component.
    *
@@ -233,17 +233,17 @@ declare const Command: {
    * </Command.Group>
    * ```
    */
-  readonly Group: react.ForwardRefExoticComponent<Omit<{
+  readonly Group: _$react.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-  } & Omit<Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
+  } & Omit<Pick<Pick<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof _$react.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
+  }, "key" | "asChild" | keyof _$react.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
-  } & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  } & _$react.RefAttributes<HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * The item component for the Command component.
    *
@@ -256,19 +256,19 @@ declare const Command: {
    * </Command.Item>
    * ```
    */
-  readonly Item: react.ForwardRefExoticComponent<Omit<{
+  readonly Item: _$react.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-  } & Omit<Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
+  } & Omit<Pick<Pick<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof _$react.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "value" | "disabled"> & {
+  }, "key" | "asChild" | keyof _$react.HTMLAttributes<HTMLDivElement>>, "disabled" | "onSelect" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;
     keywords?: string[];
     forceMount?: boolean;
-  } & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  } & _$react.RefAttributes<HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * The shortcut component for the Command component.
    *
@@ -279,7 +279,7 @@ declare const Command: {
    * <Command.Shortcut>⌘,</Command.Shortcut>
    * ```
    */
-  readonly Shortcut: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & react.RefAttributes<HTMLSpanElement>>;
+  readonly Shortcut: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & _$react.RefAttributes<HTMLSpanElement>>;
   /**
    * The separator component for the Command component.
    *
@@ -290,13 +290,13 @@ declare const Command: {
    * <Command.Separator />
    * ```
    */
-  readonly Separator: react.ForwardRefExoticComponent<Omit<Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
+  readonly Separator: _$react.ForwardRefExoticComponent<Omit<Pick<Pick<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof _$react.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+  }, "key" | "asChild" | keyof _$react.HTMLAttributes<HTMLDivElement>> & {
     alwaysRender?: boolean;
-  } & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  } & _$react.RefAttributes<HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
 };
 //#endregion
 //#region src/components/command/meta-key.d.ts
@@ -310,7 +310,7 @@ type Props = Omit<ComponentProps<"kbd">, "children">;
 declare function MetaKey({
   className,
   ...props
-}: Props): react_jsx_runtime0.JSX.Element;
+}: Props): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Command, MetaKey, useCommandState };
 //# sourceMappingURL=command.d.ts.map

package/dist/command.js

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