@choco-vanille/ui 1.1.1 → 1.2.0

package/dist/components/forms/autocomplete/components/autocomplete-field/AutocompleteField.js

@@ -0,0 +1,158 @@
+import { jsxs as o, jsx as l } from "react/jsx-runtime";
+import { memo as D, useMemo as g, useCallback as H, Fragment as M } from "react";
+import F from "../../../../layout/flex/Flex.js";
+import "../../../../layout/flex/styles/Flex.css.js";
+import R from "../../../_shared/components/helper-text/HelperText.js";
+import q from "../../../text-field/components/text-field-label/TextFieldLabel.js";
+/* empty css                                               */
+/* empty css                                                   */
+/* empty css                                                                                       */
+import B from "../../../text-field/components/text-field-start-icon/TextFieldStartIcon.js";
+/* empty css                                                                                                */
+import "../../../text-field/components/text-field-end-action/TextFieldEndAction.js";
+/* empty css                                                                                                */
+import e from "../../Autocomplete.js";
+import J from "./hooks/useAutocompleteField.hook.js";
+import { toRootItems as K } from "./utils/toRootItems.utils.js";
+const O = D(({
+  label: p,
+  helperText: a,
+  error: t,
+  startIcon: m,
+  placeholder: x,
+  size: c = "md",
+  width: u,
+  disabled: s,
+  required: y,
+  listboxAriaLabel: C,
+  emptyText: I = "No results found.",
+  options: r,
+  className: A,
+  value: L,
+  defaultValue: V,
+  onValueChange: G,
+  open: j,
+  defaultOpen: w,
+  onOpenChange: E,
+  name: N
+}) => {
+  const { inputId: h, helperId: v, hasError: n, inputValue: S, handleValueChange: f } = J({
+    error: t,
+    value: L,
+    defaultValue: V,
+    onValueChange: G
+  }), T = g(() => K(r), [r]), $ = g(() => r.some((i) => i.type === "group"), [r]), k = H(
+    (i) => {
+      f(i);
+    },
+    [f]
+  );
+  return /* @__PURE__ */ o(
+    F,
+    {
+      flexDirection: "column",
+      gap: "xs",
+      width: "100%",
+      alignItems: "start",
+      style: u !== void 0 ? { width: u } : void 0,
+      className: A,
+      children: [
+        p && /* @__PURE__ */ l(
+          q,
+          {
+            htmlFor: h,
+            disabled: s,
+            children: p
+          }
+        ),
+        /* @__PURE__ */ o(
+          F,
+          {
+            position: "relative",
+            width: "100%",
+            gap: "none",
+            children: [
+              m && /* @__PURE__ */ l(
+                B,
+                {
+                  icon: m,
+                  size: c
+                }
+              ),
+              /* @__PURE__ */ o(
+                e,
+                {
+                  value: S,
+                  onValueChange: k,
+                  disabled: s,
+                  required: y,
+                  open: j,
+                  defaultOpen: w,
+                  onOpenChange: E,
+                  name: N,
+                  items: T,
+                  children: [
+                    /* @__PURE__ */ o(e.InputGroup, { style: { width: "100%" }, children: [
+                      /* @__PURE__ */ l(
+                        e.Input,
+                        {
+                          id: h,
+                          placeholder: x,
+                          startIcon: m,
+                          size: c,
+                          hasError: n,
+                          "aria-describedby": t || a ? v : void 0,
+                          "aria-invalid": n || void 0
+                        }
+                      ),
+                      /* @__PURE__ */ l(e.Trigger, {})
+                    ] }),
+                    /* @__PURE__ */ o(e.Content, { listboxAriaLabel: C, children: [
+                      $ ? /* @__PURE__ */ l(e.List, { children: (i, b) => /* @__PURE__ */ o(M, { children: [
+                        b > 0 && /* @__PURE__ */ l(e.Separator, {}),
+                        /* @__PURE__ */ o(e.Group, { items: i.items, children: [
+                          /* @__PURE__ */ l(e.Label, { children: i.label }),
+                          /* @__PURE__ */ l(e.Collection, { children: (d) => /* @__PURE__ */ l(
+                            e.Item,
+                            {
+                              value: d.value,
+                              disabled: d.disabled,
+                              children: d.label
+                            },
+                            d.value
+                          ) })
+                        ] })
+                      ] }, `group-${i.label}-${b}`) }) : /* @__PURE__ */ l(e.List, { children: (i) => /* @__PURE__ */ l(
+                        e.Item,
+                        {
+                          value: i.value,
+                          disabled: i.disabled,
+                          children: i.label
+                        },
+                        i.value
+                      ) }),
+                      /* @__PURE__ */ l(e.Empty, { children: I })
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        (t || a) && /* @__PURE__ */ l(
+          R,
+          {
+            id: v,
+            hasError: n,
+            children: t ?? a
+          }
+        )
+      ]
+    }
+  );
+});
+O.displayName = "AutocompleteField";
+export {
+  O as default
+};
+//# sourceMappingURL=AutocompleteField.js.map

package/dist/components/forms/autocomplete/components/autocomplete-field/AutocompleteField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteField.js","sources":["../../../../../../src/components/forms/autocomplete/components/autocomplete-field/AutocompleteField.tsx"],"sourcesContent":["import { Fragment, type FC, memo, useCallback, useMemo } from 'react'\r\n\r\nimport { Flex } from '@components/layout/flex'\r\nimport HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport { TextFieldLabel, TextFieldStartIcon } from '@components/forms/text-field/components'\r\nimport Autocomplete from '@components/forms/autocomplete/Autocomplete.tsx'\r\nimport type { AutocompleteFieldProps } from '@components/forms/autocomplete/types/Autocomplete.props.ts'\r\nimport useAutocompleteField from '@components/forms/autocomplete/components/autocomplete-field/hooks/useAutocompleteField.hook.ts'\r\nimport { toRootItems } from '@components/forms/autocomplete/components/autocomplete-field/utils/toRootItems.utils.ts'\r\n\r\n/**\r\n * Convenience wrapper around `Autocomplete` that provides a TextField-like API:\r\n * label, helperText, error, size, width, startIcon, placeholder and an\r\n * `options` array.\r\n *\r\n * @example\r\n * ```tsx\r\n * <AutocompleteField\r\n *   label=\"Fruit\"\r\n *   placeholder=\"Search a fruit\"\r\n *   options={[\r\n *     { value: 'apple', label: 'Apple' },\r\n *     { value: 'banana', label: 'Banana' },\r\n *   ]}\r\n *   value={value}\r\n *   onValueChange={setValue}\r\n * />\r\n * ```\r\n */\r\nconst AutocompleteField: FC<AutocompleteFieldProps> = memo(({\r\n    label,\r\n    helperText,\r\n    error,\r\n    startIcon,\r\n    placeholder,\r\n    size = 'md',\r\n    width,\r\n    disabled,\r\n    required,\r\n    listboxAriaLabel,\r\n    emptyText = 'No results found.',\r\n    options,\r\n    className,\r\n    value,\r\n    defaultValue,\r\n    onValueChange,\r\n    open,\r\n    defaultOpen,\r\n    onOpenChange,\r\n    name,\r\n}) => {\r\n    const { inputId, helperId, hasError, inputValue, handleValueChange } = useAutocompleteField({\r\n        error,\r\n        value,\r\n        defaultValue,\r\n        onValueChange,\r\n    })\r\n\r\n    const items = useMemo(() => toRootItems(options), [options])\r\n    const hasGroups = useMemo(() => options.some((option) => option.type === 'group'), [options])\r\n\r\n    const handleAutocompleteValueChange = useCallback(\r\n        (nextValue: string) => { handleValueChange(nextValue) },\r\n        [handleValueChange],\r\n    )\r\n\r\n    return (\r\n        <Flex\r\n            flexDirection={'column'}\r\n            gap={'xs'}\r\n            width={'100%'}\r\n            alignItems={'start'}\r\n            style={width !== undefined ? { width } : undefined}\r\n            className={className}\r\n        >\r\n            {label && (\r\n                <TextFieldLabel\r\n                    htmlFor={inputId}\r\n                    disabled={disabled}\r\n                >\r\n                    {label}\r\n                </TextFieldLabel>\r\n            )}\r\n\r\n            <Flex\r\n                position={'relative'}\r\n                width={'100%'}\r\n                gap={'none'}\r\n            >\r\n                {startIcon && (\r\n                    <TextFieldStartIcon\r\n                        icon={startIcon}\r\n                        size={size}\r\n                    />\r\n                )}\r\n\r\n                <Autocomplete\r\n                    value={inputValue}\r\n                    onValueChange={handleAutocompleteValueChange}\r\n                    disabled={disabled}\r\n                    required={required}\r\n                    open={open}\r\n                    defaultOpen={defaultOpen}\r\n                    onOpenChange={onOpenChange}\r\n                    name={name}\r\n                    items={items}\r\n                >\r\n                    <Autocomplete.InputGroup style={{ width: '100%' }}>\r\n                        <Autocomplete.Input\r\n                            id={inputId}\r\n                            placeholder={placeholder}\r\n                            startIcon={startIcon}\r\n                            size={size}\r\n                            hasError={hasError}\r\n                            aria-describedby={error || helperText ? helperId : undefined}\r\n                            aria-invalid={hasError || undefined}\r\n                        />\r\n                        <Autocomplete.Trigger />\r\n                    </Autocomplete.InputGroup>\r\n                    <Autocomplete.Content listboxAriaLabel={listboxAriaLabel}>\r\n                        {/*\r\n                         * Pass a function as children so Base UI's `Autocomplete.List` only\r\n                         * renders items that survived its own filtering (driven by the `items`\r\n                         * prop on the root). Mapping over the raw `options` array here would\r\n                         * always render every option, bypassing filtering entirely.\r\n                         */}\r\n                        {hasGroups ? (\r\n                            <Autocomplete.List>\r\n                                {(group: { label: string; items: { value: string; label: string; disabled?: boolean }[] }, groupIndex: number) => (\r\n                                    <Fragment key={`group-${group.label}-${groupIndex}`}>\r\n                                        {groupIndex > 0 && <Autocomplete.Separator />}\r\n                                        <Autocomplete.Group items={group.items}>\r\n                                            <Autocomplete.Label>{group.label}</Autocomplete.Label>\r\n                                            <Autocomplete.Collection>\r\n                                                {(item: { value: string; label: string; disabled?: boolean }) => (\r\n                                                    <Autocomplete.Item\r\n                                                        key={item.value}\r\n                                                        value={item.value}\r\n                                                        disabled={item.disabled}\r\n                                                    >\r\n                                                        {item.label}\r\n                                                    </Autocomplete.Item>\r\n                                                )}\r\n                                            </Autocomplete.Collection>\r\n                                        </Autocomplete.Group>\r\n                                    </Fragment>\r\n                                )}\r\n                            </Autocomplete.List>\r\n                        ) : (\r\n                            <Autocomplete.List>\r\n                                {(item: { value: string; label: string; disabled?: boolean }) => (\r\n                                    <Autocomplete.Item\r\n                                        key={item.value}\r\n                                        value={item.value}\r\n                                        disabled={item.disabled}\r\n                                    >\r\n                                        {item.label}\r\n                                    </Autocomplete.Item>\r\n                                )}\r\n                            </Autocomplete.List>\r\n                        )}\r\n                        <Autocomplete.Empty>{emptyText}</Autocomplete.Empty>\r\n                    </Autocomplete.Content>\r\n                </Autocomplete>\r\n            </Flex>\r\n\r\n            {(error || helperText) && (\r\n                <HelperText\r\n                    id={helperId}\r\n                    hasError={hasError}\r\n                >\r\n                    {error ?? helperText}\r\n                </HelperText>\r\n            )}\r\n        </Flex>\r\n    )\r\n})\r\n\r\nAutocompleteField.displayName = 'AutocompleteField'\r\n\r\nexport default AutocompleteField\r\n"],"names":["AutocompleteField","memo","label","helperText","error","startIcon","placeholder","size","width","disabled","required","listboxAriaLabel","emptyText","options","className","value","defaultValue","onValueChange","open","defaultOpen","onOpenChange","name","inputId","helperId","hasError","inputValue","handleValueChange","useAutocompleteField","items","useMemo","toRootItems","hasGroups","option","handleAutocompleteValueChange","useCallback","nextValue","jsxs","Flex","jsx","TextFieldLabel","TextFieldStartIcon","Autocomplete","group","groupIndex","Fragment","item","HelperText"],"mappings":"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"}

package/dist/components/forms/autocomplete/components/autocomplete-field/hooks/useAutocompleteField.hook.cjs

@@ -0,0 +1,2 @@
+"use strict";const n=require("react"),g=({error:c,value:t,defaultValue:i,onValueChange:o})=>{const s=n.useId(),d=`${s}-input`,l=`${s}-helper`,u=!!c,[a,p]=n.useState(i??(t!==void 0?String(t):void 0)),e=t!==void 0,I=e?String(t):a,h=n.useCallback(r=>{e||p(r),o?.(r)},[e,o]);return{inputId:d,helperId:l,hasError:u,inputValue:I,handleValueChange:h}};module.exports=g;
+//# sourceMappingURL=useAutocompleteField.hook.cjs.map

package/dist/components/forms/autocomplete/components/autocomplete-field/hooks/useAutocompleteField.hook.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutocompleteField.hook.cjs","sources":["../../../../../../../src/components/forms/autocomplete/components/autocomplete-field/hooks/useAutocompleteField.hook.ts"],"sourcesContent":["import { useCallback, useId, useState } from 'react'\r\n\r\nimport type {\r\n    UseAutocompleteFieldParams,\r\n    UseAutocompleteFieldReturn,\r\n} from '@components/forms/autocomplete/components/autocomplete-field/types'\r\n\r\nconst useAutocompleteField = ({\r\n    error,\r\n    value,\r\n    defaultValue,\r\n    onValueChange,\r\n}: UseAutocompleteFieldParams): UseAutocompleteFieldReturn => {\r\n    const generatedId = useId()\r\n    const inputId = `${generatedId}-input`\r\n    const helperId = `${generatedId}-helper`\r\n    const hasError = Boolean(error)\r\n\r\n    const [internalValue, setInternalValue] = useState<string | undefined>(\r\n        defaultValue ?? (value !== undefined ? String(value) : undefined),\r\n    )\r\n\r\n    const isControlled = value !== undefined\r\n    const inputValue = isControlled ? String(value) : internalValue\r\n\r\n    const handleValueChange = useCallback(\r\n        (nextValue: string) => {\r\n            if (!isControlled) {\r\n                setInternalValue(nextValue)\r\n            }\r\n            onValueChange?.(nextValue)\r\n        },\r\n        [isControlled, onValueChange],\r\n    )\r\n\r\n    return {\r\n        inputId,\r\n        helperId,\r\n        hasError,\r\n        inputValue,\r\n        handleValueChange,\r\n    }\r\n}\r\n\r\nexport default useAutocompleteField\r\n"],"names":["useAutocompleteField","error","value","defaultValue","onValueChange","generatedId","useId","inputId","helperId","hasError","internalValue","setInternalValue","useState","isControlled","inputValue","handleValueChange","useCallback","nextValue"],"mappings":"sCAOMA,EAAuB,CAAC,CAC1B,MAAAC,EACA,MAAAC,EACA,aAAAC,EACA,cAAAC,CACJ,IAA8D,CAC1D,MAAMC,EAAcC,EAAAA,MAAA,EACdC,EAAU,GAAGF,CAAW,SACxBG,EAAW,GAAGH,CAAW,UACzBI,EAAW,EAAQR,EAEnB,CAACS,EAAeC,CAAgB,EAAIC,EAAAA,SACtCT,IAAiBD,IAAU,OAAY,OAAOA,CAAK,EAAI,OAAA,EAGrDW,EAAeX,IAAU,OACzBY,EAAaD,EAAe,OAAOX,CAAK,EAAIQ,EAE5CK,EAAoBC,EAAAA,YACrBC,GAAsB,CACdJ,GACDF,EAAiBM,CAAS,EAE9Bb,IAAgBa,CAAS,CAC7B,EACA,CAACJ,EAAcT,CAAa,CAAA,EAGhC,MAAO,CACH,QAAAG,EACA,SAAAC,EACA,SAAAC,EACA,WAAAK,EACA,kBAAAC,CAAA,CAER"}

package/dist/components/forms/autocomplete/components/autocomplete-field/hooks/useAutocompleteField.hook.d.ts

@@ -0,0 +1,3 @@
+import { UseAutocompleteFieldParams, UseAutocompleteFieldReturn } from '../types';
+declare const useAutocompleteField: ({ error, value, defaultValue, onValueChange, }: UseAutocompleteFieldParams) => UseAutocompleteFieldReturn;
+export default useAutocompleteField;

package/dist/components/forms/autocomplete/components/autocomplete-field/hooks/useAutocompleteField.hook.js

@@ -0,0 +1,27 @@
+import { useId as h, useState as f, useCallback as g } from "react";
+const S = ({
+  error: r,
+  value: t,
+  defaultValue: i,
+  onValueChange: n
+}) => {
+  const o = h(), d = `${o}-input`, l = `${o}-helper`, c = !!r, [a, u] = f(
+    i ?? (t !== void 0 ? String(t) : void 0)
+  ), e = t !== void 0, p = e ? String(t) : a, I = g(
+    (s) => {
+      e || u(s), n?.(s);
+    },
+    [e, n]
+  );
+  return {
+    inputId: d,
+    helperId: l,
+    hasError: c,
+    inputValue: p,
+    handleValueChange: I
+  };
+};
+export {
+  S as default
+};
+//# sourceMappingURL=useAutocompleteField.hook.js.map

package/dist/components/forms/autocomplete/components/autocomplete-field/hooks/useAutocompleteField.hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutocompleteField.hook.js","sources":["../../../../../../../src/components/forms/autocomplete/components/autocomplete-field/hooks/useAutocompleteField.hook.ts"],"sourcesContent":["import { useCallback, useId, useState } from 'react'\r\n\r\nimport type {\r\n    UseAutocompleteFieldParams,\r\n    UseAutocompleteFieldReturn,\r\n} from '@components/forms/autocomplete/components/autocomplete-field/types'\r\n\r\nconst useAutocompleteField = ({\r\n    error,\r\n    value,\r\n    defaultValue,\r\n    onValueChange,\r\n}: UseAutocompleteFieldParams): UseAutocompleteFieldReturn => {\r\n    const generatedId = useId()\r\n    const inputId = `${generatedId}-input`\r\n    const helperId = `${generatedId}-helper`\r\n    const hasError = Boolean(error)\r\n\r\n    const [internalValue, setInternalValue] = useState<string | undefined>(\r\n        defaultValue ?? (value !== undefined ? String(value) : undefined),\r\n    )\r\n\r\n    const isControlled = value !== undefined\r\n    const inputValue = isControlled ? String(value) : internalValue\r\n\r\n    const handleValueChange = useCallback(\r\n        (nextValue: string) => {\r\n            if (!isControlled) {\r\n                setInternalValue(nextValue)\r\n            }\r\n            onValueChange?.(nextValue)\r\n        },\r\n        [isControlled, onValueChange],\r\n    )\r\n\r\n    return {\r\n        inputId,\r\n        helperId,\r\n        hasError,\r\n        inputValue,\r\n        handleValueChange,\r\n    }\r\n}\r\n\r\nexport default useAutocompleteField\r\n"],"names":["useAutocompleteField","error","value","defaultValue","onValueChange","generatedId","useId","inputId","helperId","hasError","internalValue","setInternalValue","useState","isControlled","inputValue","handleValueChange","useCallback","nextValue"],"mappings":";AAOA,MAAMA,IAAuB,CAAC;AAAA,EAC1B,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC;AACJ,MAA8D;AAC1D,QAAMC,IAAcC,EAAA,GACdC,IAAU,GAAGF,CAAW,UACxBG,IAAW,GAAGH,CAAW,WACzBI,IAAW,EAAQR,GAEnB,CAACS,GAAeC,CAAgB,IAAIC;AAAA,IACtCT,MAAiBD,MAAU,SAAY,OAAOA,CAAK,IAAI;AAAA,EAAA,GAGrDW,IAAeX,MAAU,QACzBY,IAAaD,IAAe,OAAOX,CAAK,IAAIQ,GAE5CK,IAAoBC;AAAA,IACtB,CAACC,MAAsB;AACnB,MAAKJ,KACDF,EAAiBM,CAAS,GAE9Bb,IAAgBa,CAAS;AAAA,IAC7B;AAAA,IACA,CAACJ,GAAcT,CAAa;AAAA,EAAA;AAGhC,SAAO;AAAA,IACH,SAAAG;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAK;AAAA,IACA,mBAAAC;AAAA,EAAA;AAER;"}

package/dist/components/forms/autocomplete/components/autocomplete-field/types/index.d.ts

@@ -0,0 +1,13 @@
+export type UseAutocompleteFieldParams = {
+    error?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+};
+export type UseAutocompleteFieldReturn = {
+    inputId: string;
+    helperId: string;
+    hasError: boolean;
+    inputValue: string | undefined;
+    handleValueChange: (nextValue: string) => void;
+};

package/dist/components/forms/autocomplete/components/autocomplete-field/utils/toRootItems.utils.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=e=>e.some(t=>t.type==="group")?e.filter(t=>t.type==="group").map(t=>({label:t.label,items:t.options.map(({value:o,label:r,disabled:s})=>({value:o,label:r,disabled:s}))})):e.filter(t=>t.type===void 0).map(({value:t,label:o,disabled:r})=>({value:t,label:o,disabled:r}));exports.toRootItems=a;
+//# sourceMappingURL=toRootItems.utils.cjs.map

package/dist/components/forms/autocomplete/components/autocomplete-field/utils/toRootItems.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toRootItems.utils.cjs","sources":["../../../../../../../src/components/forms/autocomplete/components/autocomplete-field/utils/toRootItems.utils.ts"],"sourcesContent":["import type { AutocompleteOption } from '@components'\r\n\r\ntype FlatRootItem = { value: string; label: string; disabled?: boolean }\r\ntype GroupedRootItem = { label: string; items: FlatRootItem[] }\r\n\r\n/**\r\n * Converts `AutocompleteField`'s `options` into the `items` shape expected by\r\n * Base UI's `Autocomplete.Root`, which drives its built-in filtering.\r\n *\r\n * - Flat options become a flat array of `{ value, label, disabled }`.\r\n * - Grouped options become an array of `{ label, items }` groups, matching\r\n *   Base UI's grouped `items` format. Separators are UI-only and are not part\r\n *   of the filtered data set.\r\n */\r\nexport const toRootItems = (\r\n    options: AutocompleteOption[],\r\n): (FlatRootItem | GroupedRootItem)[] => {\r\n    const hasGroups = options.some((option) => option.type === 'group')\r\n\r\n    if (!hasGroups) {\r\n        return options\r\n            .filter((option): option is Extract<AutocompleteOption, { type?: undefined }> => option.type === undefined)\r\n            .map(({ value, label, disabled }) => ({ value, label, disabled }))\r\n    }\r\n\r\n    return options\r\n        .filter((option): option is Extract<AutocompleteOption, { type: 'group' }> => option.type === 'group')\r\n        .map((group) => ({\r\n            label: group.label,\r\n            items: group.options.map(({ value, label, disabled }) => ({ value, label, disabled })),\r\n        }))\r\n}\r\n"],"names":["toRootItems","options","option","group","value","label","disabled"],"mappings":"gFAcO,MAAMA,EACTC,GAEkBA,EAAQ,KAAMC,GAAWA,EAAO,OAAS,OAAO,EAQ3DD,EACF,OAAQC,GAAqEA,EAAO,OAAS,OAAO,EACpG,IAAKC,IAAW,CACb,MAAOA,EAAM,MACb,MAAOA,EAAM,QAAQ,IAAI,CAAC,CAAE,MAAAC,EAAO,MAAAC,EAAO,SAAAC,CAAA,KAAgB,CAAE,MAAAF,EAAO,MAAAC,EAAO,SAAAC,GAAW,CAAA,EACvF,EAVKL,EACF,OAAQC,GAAwEA,EAAO,OAAS,MAAS,EACzG,IAAI,CAAC,CAAE,MAAAE,EAAO,MAAAC,EAAO,SAAAC,CAAA,KAAgB,CAAE,MAAAF,EAAO,MAAAC,EAAO,SAAAC,GAAW"}

package/dist/components/forms/autocomplete/components/autocomplete-field/utils/toRootItems.utils.d.ts

@@ -0,0 +1,21 @@
+import { AutocompleteOption } from '../../../../..';
+type FlatRootItem = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+type GroupedRootItem = {
+    label: string;
+    items: FlatRootItem[];
+};
+/**
+ * Converts `AutocompleteField`'s `options` into the `items` shape expected by
+ * Base UI's `Autocomplete.Root`, which drives its built-in filtering.
+ *
+ * - Flat options become a flat array of `{ value, label, disabled }`.
+ * - Grouped options become an array of `{ label, items }` groups, matching
+ *   Base UI's grouped `items` format. Separators are UI-only and are not part
+ *   of the filtered data set.
+ */
+export declare const toRootItems: (options: AutocompleteOption[]) => (FlatRootItem | GroupedRootItem)[];
+export {};

package/dist/components/forms/autocomplete/components/autocomplete-field/utils/toRootItems.utils.js

@@ -0,0 +1,8 @@
+const a = (t) => t.some((e) => e.type === "group") ? t.filter((e) => e.type === "group").map((e) => ({
+  label: e.label,
+  items: e.options.map(({ value: r, label: o, disabled: p }) => ({ value: r, label: o, disabled: p }))
+})) : t.filter((e) => e.type === void 0).map(({ value: e, label: r, disabled: o }) => ({ value: e, label: r, disabled: o }));
+export {
+  a as toRootItems
+};
+//# sourceMappingURL=toRootItems.utils.js.map

package/dist/components/forms/autocomplete/components/autocomplete-field/utils/toRootItems.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toRootItems.utils.js","sources":["../../../../../../../src/components/forms/autocomplete/components/autocomplete-field/utils/toRootItems.utils.ts"],"sourcesContent":["import type { AutocompleteOption } from '@components'\r\n\r\ntype FlatRootItem = { value: string; label: string; disabled?: boolean }\r\ntype GroupedRootItem = { label: string; items: FlatRootItem[] }\r\n\r\n/**\r\n * Converts `AutocompleteField`'s `options` into the `items` shape expected by\r\n * Base UI's `Autocomplete.Root`, which drives its built-in filtering.\r\n *\r\n * - Flat options become a flat array of `{ value, label, disabled }`.\r\n * - Grouped options become an array of `{ label, items }` groups, matching\r\n *   Base UI's grouped `items` format. Separators are UI-only and are not part\r\n *   of the filtered data set.\r\n */\r\nexport const toRootItems = (\r\n    options: AutocompleteOption[],\r\n): (FlatRootItem | GroupedRootItem)[] => {\r\n    const hasGroups = options.some((option) => option.type === 'group')\r\n\r\n    if (!hasGroups) {\r\n        return options\r\n            .filter((option): option is Extract<AutocompleteOption, { type?: undefined }> => option.type === undefined)\r\n            .map(({ value, label, disabled }) => ({ value, label, disabled }))\r\n    }\r\n\r\n    return options\r\n        .filter((option): option is Extract<AutocompleteOption, { type: 'group' }> => option.type === 'group')\r\n        .map((group) => ({\r\n            label: group.label,\r\n            items: group.options.map(({ value, label, disabled }) => ({ value, label, disabled })),\r\n        }))\r\n}\r\n"],"names":["toRootItems","options","option","group","value","label","disabled"],"mappings":"AAcO,MAAMA,IAAc,CACvBC,MAEkBA,EAAQ,KAAK,CAACC,MAAWA,EAAO,SAAS,OAAO,IAQ3DD,EACF,OAAO,CAACC,MAAqEA,EAAO,SAAS,OAAO,EACpG,IAAI,CAACC,OAAW;AAAA,EACb,OAAOA,EAAM;AAAA,EACb,OAAOA,EAAM,QAAQ,IAAI,CAAC,EAAE,OAAAC,GAAO,OAAAC,GAAO,UAAAC,EAAA,OAAgB,EAAE,OAAAF,GAAO,OAAAC,GAAO,UAAAC,IAAW;AAAA,EACvF,IAVKL,EACF,OAAO,CAACC,MAAwEA,EAAO,SAAS,MAAS,EACzG,IAAI,CAAC,EAAE,OAAAE,GAAO,OAAAC,GAAO,UAAAC,EAAA,OAAgB,EAAE,OAAAF,GAAO,OAAAC,GAAO,UAAAC,IAAW;"}

package/dist/components/forms/autocomplete/components/autocomplete-group/AutocompleteGroup.cjs

@@ -0,0 +1,2 @@
+"use strict";const t=require("react/jsx-runtime"),r=require("@base-ui/react/autocomplete"),u=require("react"),e=u.memo(o=>t.jsx(r.Autocomplete.Group,{...o}));e.displayName="Autocomplete.Group";module.exports=e;
+//# sourceMappingURL=AutocompleteGroup.cjs.map

package/dist/components/forms/autocomplete/components/autocomplete-group/AutocompleteGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteGroup.cjs","sources":["../../../../../../src/components/forms/autocomplete/components/autocomplete-group/AutocompleteGroup.tsx"],"sourcesContent":["import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete'\r\nimport { memo, type FC } from 'react'\r\n\r\n/**\r\n * Groups related autocomplete items with a corresponding label.\r\n */\r\nconst AutocompleteGroup: FC<BaseAutocomplete.Group.Props> = memo((props) => (\r\n    <BaseAutocomplete.Group {...props} />\r\n))\r\n\r\nAutocompleteGroup.displayName = 'Autocomplete.Group'\r\n\r\nexport default AutocompleteGroup\r\n"],"names":["AutocompleteGroup","memo","props","jsx","BaseAutocomplete"],"mappings":"8GAMMA,EAAsDC,EAAAA,KAAMC,GAC9DC,EAAAA,IAACC,EAAAA,aAAiB,MAAjB,CAAwB,GAAGF,EAAO,CACtC,EAEDF,EAAkB,YAAc"}

package/dist/components/forms/autocomplete/components/autocomplete-group/AutocompleteGroup.d.ts

@@ -0,0 +1,7 @@
+import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
+import { FC } from 'react';
+/**
+ * Groups related autocomplete items with a corresponding label.
+ */
+declare const AutocompleteGroup: FC<BaseAutocomplete.Group.Props>;
+export default AutocompleteGroup;

package/dist/components/forms/autocomplete/components/autocomplete-group/AutocompleteGroup.js

@@ -0,0 +1,9 @@
+import { jsx as m } from "react/jsx-runtime";
+import { Autocomplete as t } from "@base-ui/react/autocomplete";
+import { memo as p } from "react";
+const e = p((o) => /* @__PURE__ */ m(t.Group, { ...o }));
+e.displayName = "Autocomplete.Group";
+export {
+  e as default
+};
+//# sourceMappingURL=AutocompleteGroup.js.map

package/dist/components/forms/autocomplete/components/autocomplete-group/AutocompleteGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteGroup.js","sources":["../../../../../../src/components/forms/autocomplete/components/autocomplete-group/AutocompleteGroup.tsx"],"sourcesContent":["import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete'\r\nimport { memo, type FC } from 'react'\r\n\r\n/**\r\n * Groups related autocomplete items with a corresponding label.\r\n */\r\nconst AutocompleteGroup: FC<BaseAutocomplete.Group.Props> = memo((props) => (\r\n    <BaseAutocomplete.Group {...props} />\r\n))\r\n\r\nAutocompleteGroup.displayName = 'Autocomplete.Group'\r\n\r\nexport default AutocompleteGroup\r\n"],"names":["AutocompleteGroup","memo","props","jsx","BaseAutocomplete"],"mappings":";;;AAMA,MAAMA,IAAsDC,EAAK,CAACC,MAC9D,gBAAAC,EAACC,EAAiB,OAAjB,EAAwB,GAAGF,GAAO,CACtC;AAEDF,EAAkB,cAAc;"}

package/dist/components/forms/autocomplete/components/autocomplete-icon/AutocompleteIcon.cjs

@@ -0,0 +1,2 @@
+"use strict";const t=require("react/jsx-runtime"),c=require("@base-ui/react/autocomplete"),s=require("react"),e=s.memo(o=>t.jsx(c.Autocomplete.Icon,{...o}));e.displayName="Autocomplete.Icon";module.exports=e;
+//# sourceMappingURL=AutocompleteIcon.cjs.map

package/dist/components/forms/autocomplete/components/autocomplete-icon/AutocompleteIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteIcon.cjs","sources":["../../../../../../src/components/forms/autocomplete/components/autocomplete-icon/AutocompleteIcon.tsx"],"sourcesContent":["import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete'\r\nimport { memo, type FC } from 'react'\r\n\r\n/**\r\n * Icon slot rendered inside the autocomplete input group.\r\n */\r\nconst AutocompleteIcon: FC<BaseAutocomplete.Icon.Props> = memo((props) => (\r\n    <BaseAutocomplete.Icon {...props} />\r\n))\r\n\r\nAutocompleteIcon.displayName = 'Autocomplete.Icon'\r\n\r\nexport default AutocompleteIcon\r\n"],"names":["AutocompleteIcon","memo","props","jsx","BaseAutocomplete"],"mappings":"8GAMMA,EAAoDC,EAAAA,KAAMC,GAC5DC,EAAAA,IAACC,EAAAA,aAAiB,KAAjB,CAAuB,GAAGF,EAAO,CACrC,EAEDF,EAAiB,YAAc"}

package/dist/components/forms/autocomplete/components/autocomplete-icon/AutocompleteIcon.d.ts

@@ -0,0 +1,7 @@
+import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
+import { FC } from 'react';
+/**
+ * Icon slot rendered inside the autocomplete input group.
+ */
+declare const AutocompleteIcon: FC<BaseAutocomplete.Icon.Props>;
+export default AutocompleteIcon;

package/dist/components/forms/autocomplete/components/autocomplete-icon/AutocompleteIcon.js

@@ -0,0 +1,9 @@
+import { jsx as m } from "react/jsx-runtime";
+import { Autocomplete as t } from "@base-ui/react/autocomplete";
+import { memo as e } from "react";
+const p = e((o) => /* @__PURE__ */ m(t.Icon, { ...o }));
+p.displayName = "Autocomplete.Icon";
+export {
+  p as default
+};
+//# sourceMappingURL=AutocompleteIcon.js.map

package/dist/components/forms/autocomplete/components/autocomplete-icon/AutocompleteIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteIcon.js","sources":["../../../../../../src/components/forms/autocomplete/components/autocomplete-icon/AutocompleteIcon.tsx"],"sourcesContent":["import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete'\r\nimport { memo, type FC } from 'react'\r\n\r\n/**\r\n * Icon slot rendered inside the autocomplete input group.\r\n */\r\nconst AutocompleteIcon: FC<BaseAutocomplete.Icon.Props> = memo((props) => (\r\n    <BaseAutocomplete.Icon {...props} />\r\n))\r\n\r\nAutocompleteIcon.displayName = 'Autocomplete.Icon'\r\n\r\nexport default AutocompleteIcon\r\n"],"names":["AutocompleteIcon","memo","props","jsx","BaseAutocomplete"],"mappings":";;;AAMA,MAAMA,IAAoDC,EAAK,CAACC,MAC5D,gBAAAC,EAACC,EAAiB,MAAjB,EAAuB,GAAGF,GAAO,CACrC;AAEDF,EAAiB,cAAc;"}

package/dist/components/forms/autocomplete/components/autocomplete-input/AutocompleteInput.cjs

@@ -0,0 +1,2 @@
+"use strict";const u=require("react/jsx-runtime"),x=require("@base-ui/react/autocomplete"),r=require("react");require("../../../text-field/components/text-field-label/TextFieldLabel.cjs");;/* empty css                                                 */;/* empty css                                                     */;/* empty css                                                                                         */const b=require("../../../text-field/components/text-field-start-icon/TextFieldStartIcon.cjs");;/* empty css                                                                                                  */require("../../../text-field/components/text-field-end-action/TextFieldEndAction.cjs");;/* empty css                                                                                                  */const h=require("./styles/AutocompleteInput.css.cjs"),I=require("../../../../../utils/cn.cjs"),l=r.memo(({className:i,placeholder:m,startIcon:o,size:s="md",hasError:p=!1,width:c,onMouseDown:n,style:a,...q})=>{const t=r.useRef(!1),d=r.useCallback(e=>{t.current=!0,n?.(e)},[n]),f=r.useCallback(e=>{t.current&&(e.currentTarget.setAttribute("data-mouse-focus",""),t.current=!1)},[]),A=r.useCallback(e=>{t.current=!1,e.currentTarget.removeAttribute("data-mouse-focus")},[]),T=c!==void 0?{...a,width:c}:a;return u.jsxs(u.Fragment,{children:[o&&u.jsx(b,{icon:o,size:s}),u.jsx(x.Autocomplete.Input,{className:I.cn(h.AUTOCOMPLETE_INPUT_STYLES.recipe({size:s,hasError:p,hasStartIcon:!!o,hasEndAction:!1}),i),style:T,placeholder:m,onMouseDown:d,onFocus:f,onBlur:A,...q})]})});l.displayName="Autocomplete.Input";module.exports=l;
+//# sourceMappingURL=AutocompleteInput.cjs.map

package/dist/components/forms/autocomplete/components/autocomplete-input/AutocompleteInput.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteInput.cjs","sources":["../../../../../../src/components/forms/autocomplete/components/autocomplete-input/AutocompleteInput.tsx"],"sourcesContent":["import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete'\r\nimport { type FC, memo, useCallback, useRef } from 'react'\r\n\r\nimport { TextFieldStartIcon } from '@components/forms/text-field/components'\r\nimport { AUTOCOMPLETE_INPUT_STYLES } from '@components/forms/autocomplete/components/autocomplete-input/styles/AutocompleteInput.css.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport type { AutocompleteInputProps } from '@components/forms/autocomplete/components/autocomplete-input/types/AutocompleteInput.props.ts'\r\n\r\n/**\r\n * The text input that filters the autocomplete list.\r\n *\r\n * Looks exactly like a TextField input: same height, padding, border, focus\r\n * ring and disabled state. Supports `size`, `startIcon`, `placeholder`,\r\n * `hasError` and `width`.\r\n */\r\nconst AutocompleteInput: FC<AutocompleteInputProps> = memo(({\r\n    className,\r\n    placeholder,\r\n    startIcon,\r\n    size = 'md',\r\n    hasError = false,\r\n    width,\r\n    onMouseDown,\r\n    style,\r\n    ...props\r\n}) => {\r\n    const pointerDownRef = useRef(false)\r\n\r\n    const handleMouseDown: NonNullable<BaseAutocomplete.Input.Props['onMouseDown']> = useCallback(\r\n        (event) => {\r\n            pointerDownRef.current = true\r\n            onMouseDown?.(event)\r\n        },\r\n        [onMouseDown],\r\n    )\r\n\r\n    const handleFocus = useCallback((event: React.FocusEvent<HTMLInputElement>) => {\r\n        if (pointerDownRef.current) {\r\n            event.currentTarget.setAttribute('data-mouse-focus', '')\r\n            pointerDownRef.current = false\r\n        }\r\n    }, [])\r\n\r\n    const handleBlur = useCallback((event: React.FocusEvent<HTMLInputElement>) => {\r\n        pointerDownRef.current = false\r\n        event.currentTarget.removeAttribute('data-mouse-focus')\r\n    }, [])\r\n\r\n    const mergedStyle = width !== undefined ? { ...style, width } : style\r\n\r\n    return (\r\n        <>\r\n            {startIcon && (\r\n                <TextFieldStartIcon\r\n                    icon={startIcon}\r\n                    size={size}\r\n                />\r\n            )}\r\n            <BaseAutocomplete.Input\r\n                className={cn(\r\n                    AUTOCOMPLETE_INPUT_STYLES.recipe({\r\n                        size,\r\n                        hasError,\r\n                        hasStartIcon: Boolean(startIcon),\r\n                        hasEndAction: false,\r\n                    }),\r\n                    className,\r\n                )}\r\n                style={mergedStyle}\r\n                placeholder={placeholder}\r\n                onMouseDown={handleMouseDown}\r\n                onFocus={handleFocus}\r\n                onBlur={handleBlur}\r\n                {...props}\r\n            />\r\n        </>\r\n    )\r\n})\r\n\r\nAutocompleteInput.displayName = 'Autocomplete.Input'\r\n\r\nexport default AutocompleteInput\r\n"],"names":["AutocompleteInput","memo","className","placeholder","startIcon","size","hasError","width","onMouseDown","style","props","pointerDownRef","useRef","handleMouseDown","useCallback","event","handleFocus","handleBlur","mergedStyle","jsxs","Fragment","jsx","TextFieldStartIcon","BaseAutocomplete","cn","AUTOCOMPLETE_INPUT_STYLES"],"mappings":"+5BAeMA,EAAgDC,EAAAA,KAAK,CAAC,CACxD,UAAAC,EACA,YAAAC,EACA,UAAAC,EACA,KAAAC,EAAO,KACP,SAAAC,EAAW,GACX,MAAAC,EACA,YAAAC,EACA,MAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAiBC,EAAAA,OAAO,EAAK,EAE7BC,EAA4EC,EAAAA,YAC7EC,GAAU,CACPJ,EAAe,QAAU,GACzBH,IAAcO,CAAK,CACvB,EACA,CAACP,CAAW,CAAA,EAGVQ,EAAcF,cAAaC,GAA8C,CACvEJ,EAAe,UACfI,EAAM,cAAc,aAAa,mBAAoB,EAAE,EACvDJ,EAAe,QAAU,GAEjC,EAAG,CAAA,CAAE,EAECM,EAAaH,cAAaC,GAA8C,CAC1EJ,EAAe,QAAU,GACzBI,EAAM,cAAc,gBAAgB,kBAAkB,CAC1D,EAAG,CAAA,CAAE,EAECG,EAAcX,IAAU,OAAY,CAAE,GAAGE,EAAO,MAAAF,GAAUE,EAEhE,OACIU,EAAAA,KAAAC,WAAA,CACK,SAAA,CAAAhB,GACGiB,EAAAA,IAACC,EAAA,CACG,KAAMlB,EACN,KAAAC,CAAA,CAAA,EAGRgB,EAAAA,IAACE,EAAAA,aAAiB,MAAjB,CACG,UAAWC,EAAAA,GACPC,EAAAA,0BAA0B,OAAO,CAC7B,KAAApB,EACA,SAAAC,EACA,aAAc,EAAQF,EACtB,aAAc,EAAA,CACjB,EACDF,CAAA,EAEJ,MAAOgB,EACP,YAAAf,EACA,YAAaU,EACb,QAASG,EACT,OAAQC,EACP,GAAGP,CAAA,CAAA,CACR,EACJ,CAER,CAAC,EAEDV,EAAkB,YAAc"}

package/dist/components/forms/autocomplete/components/autocomplete-input/AutocompleteInput.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { AutocompleteInputProps } from './types/AutocompleteInput.props.ts';
+/**
+ * The text input that filters the autocomplete list.
+ *
+ * Looks exactly like a TextField input: same height, padding, border, focus
+ * ring and disabled state. Supports `size`, `startIcon`, `placeholder`,
+ * `hasError` and `width`.
+ */
+declare const AutocompleteInput: FC<AutocompleteInputProps>;
+export default AutocompleteInput;

package/dist/components/forms/autocomplete/components/autocomplete-input/AutocompleteInput.js

@@ -0,0 +1,69 @@
+import { jsxs as h, Fragment as S, jsx as a } from "react/jsx-runtime";
+import { Autocomplete as g } from "@base-ui/react/autocomplete";
+import { memo as x, useRef as E, useCallback as r } from "react";
+import "../../../text-field/components/text-field-label/TextFieldLabel.js";
+/* empty css                                               */
+/* empty css                                                   */
+/* empty css                                                                                       */
+import F from "../../../text-field/components/text-field-start-icon/TextFieldStartIcon.js";
+/* empty css                                                                                                */
+import "../../../text-field/components/text-field-end-action/TextFieldEndAction.js";
+/* empty css                                                                                                */
+import { AUTOCOMPLETE_INPUT_STYLES as I } from "./styles/AutocompleteInput.css.js";
+import { cn as b } from "../../../../../utils/cn.js";
+const B = x(({
+  className: c,
+  placeholder: p,
+  startIcon: o,
+  size: m = "md",
+  hasError: i = !1,
+  width: n,
+  onMouseDown: u,
+  style: s,
+  ...l
+}) => {
+  const e = E(!1), f = r(
+    (t) => {
+      e.current = !0, u?.(t);
+    },
+    [u]
+  ), d = r((t) => {
+    e.current && (t.currentTarget.setAttribute("data-mouse-focus", ""), e.current = !1);
+  }, []), A = r((t) => {
+    e.current = !1, t.currentTarget.removeAttribute("data-mouse-focus");
+  }, []), T = n !== void 0 ? { ...s, width: n } : s;
+  return /* @__PURE__ */ h(S, { children: [
+    o && /* @__PURE__ */ a(
+      F,
+      {
+        icon: o,
+        size: m
+      }
+    ),
+    /* @__PURE__ */ a(
+      g.Input,
+      {
+        className: b(
+          I.recipe({
+            size: m,
+            hasError: i,
+            hasStartIcon: !!o,
+            hasEndAction: !1
+          }),
+          c
+        ),
+        style: T,
+        placeholder: p,
+        onMouseDown: f,
+        onFocus: d,
+        onBlur: A,
+        ...l
+      }
+    )
+  ] });
+});
+B.displayName = "Autocomplete.Input";
+export {
+  B as default
+};
+//# sourceMappingURL=AutocompleteInput.js.map

package/dist/components/forms/autocomplete/components/autocomplete-input/AutocompleteInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteInput.js","sources":["../../../../../../src/components/forms/autocomplete/components/autocomplete-input/AutocompleteInput.tsx"],"sourcesContent":["import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete'\r\nimport { type FC, memo, useCallback, useRef } from 'react'\r\n\r\nimport { TextFieldStartIcon } from '@components/forms/text-field/components'\r\nimport { AUTOCOMPLETE_INPUT_STYLES } from '@components/forms/autocomplete/components/autocomplete-input/styles/AutocompleteInput.css.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport type { AutocompleteInputProps } from '@components/forms/autocomplete/components/autocomplete-input/types/AutocompleteInput.props.ts'\r\n\r\n/**\r\n * The text input that filters the autocomplete list.\r\n *\r\n * Looks exactly like a TextField input: same height, padding, border, focus\r\n * ring and disabled state. Supports `size`, `startIcon`, `placeholder`,\r\n * `hasError` and `width`.\r\n */\r\nconst AutocompleteInput: FC<AutocompleteInputProps> = memo(({\r\n    className,\r\n    placeholder,\r\n    startIcon,\r\n    size = 'md',\r\n    hasError = false,\r\n    width,\r\n    onMouseDown,\r\n    style,\r\n    ...props\r\n}) => {\r\n    const pointerDownRef = useRef(false)\r\n\r\n    const handleMouseDown: NonNullable<BaseAutocomplete.Input.Props['onMouseDown']> = useCallback(\r\n        (event) => {\r\n            pointerDownRef.current = true\r\n            onMouseDown?.(event)\r\n        },\r\n        [onMouseDown],\r\n    )\r\n\r\n    const handleFocus = useCallback((event: React.FocusEvent<HTMLInputElement>) => {\r\n        if (pointerDownRef.current) {\r\n            event.currentTarget.setAttribute('data-mouse-focus', '')\r\n            pointerDownRef.current = false\r\n        }\r\n    }, [])\r\n\r\n    const handleBlur = useCallback((event: React.FocusEvent<HTMLInputElement>) => {\r\n        pointerDownRef.current = false\r\n        event.currentTarget.removeAttribute('data-mouse-focus')\r\n    }, [])\r\n\r\n    const mergedStyle = width !== undefined ? { ...style, width } : style\r\n\r\n    return (\r\n        <>\r\n            {startIcon && (\r\n                <TextFieldStartIcon\r\n                    icon={startIcon}\r\n                    size={size}\r\n                />\r\n            )}\r\n            <BaseAutocomplete.Input\r\n                className={cn(\r\n                    AUTOCOMPLETE_INPUT_STYLES.recipe({\r\n                        size,\r\n                        hasError,\r\n                        hasStartIcon: Boolean(startIcon),\r\n                        hasEndAction: false,\r\n                    }),\r\n                    className,\r\n                )}\r\n                style={mergedStyle}\r\n                placeholder={placeholder}\r\n                onMouseDown={handleMouseDown}\r\n                onFocus={handleFocus}\r\n                onBlur={handleBlur}\r\n                {...props}\r\n            />\r\n        </>\r\n    )\r\n})\r\n\r\nAutocompleteInput.displayName = 'Autocomplete.Input'\r\n\r\nexport default AutocompleteInput\r\n"],"names":["AutocompleteInput","memo","className","placeholder","startIcon","size","hasError","width","onMouseDown","style","props","pointerDownRef","useRef","handleMouseDown","useCallback","event","handleFocus","handleBlur","mergedStyle","jsxs","Fragment","jsx","TextFieldStartIcon","BaseAutocomplete","cn","AUTOCOMPLETE_INPUT_STYLES"],"mappings":";;;;;;;;;;;;;AAeA,MAAMA,IAAgDC,EAAK,CAAC;AAAA,EACxD,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAMC,IAAiBC,EAAO,EAAK,GAE7BC,IAA4EC;AAAA,IAC9E,CAACC,MAAU;AACP,MAAAJ,EAAe,UAAU,IACzBH,IAAcO,CAAK;AAAA,IACvB;AAAA,IACA,CAACP,CAAW;AAAA,EAAA,GAGVQ,IAAcF,EAAY,CAACC,MAA8C;AAC3E,IAAIJ,EAAe,YACfI,EAAM,cAAc,aAAa,oBAAoB,EAAE,GACvDJ,EAAe,UAAU;AAAA,EAEjC,GAAG,CAAA,CAAE,GAECM,IAAaH,EAAY,CAACC,MAA8C;AAC1E,IAAAJ,EAAe,UAAU,IACzBI,EAAM,cAAc,gBAAgB,kBAAkB;AAAA,EAC1D,GAAG,CAAA,CAAE,GAECG,IAAcX,MAAU,SAAY,EAAE,GAAGE,GAAO,OAAAF,MAAUE;AAEhE,SACI,gBAAAU,EAAAC,GAAA,EACK,UAAA;AAAA,IAAAhB,KACG,gBAAAiB;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,MAAMlB;AAAA,QACN,MAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAGR,gBAAAgB;AAAA,MAACE,EAAiB;AAAA,MAAjB;AAAA,QACG,WAAWC;AAAA,UACPC,EAA0B,OAAO;AAAA,YAC7B,MAAApB;AAAA,YACA,UAAAC;AAAA,YACA,cAAc,EAAQF;AAAA,YACtB,cAAc;AAAA,UAAA,CACjB;AAAA,UACDF;AAAA,QAAA;AAAA,QAEJ,OAAOgB;AAAA,QACP,aAAAf;AAAA,QACA,aAAaU;AAAA,QACb,SAASG;AAAA,QACT,QAAQC;AAAA,QACP,GAAGP;AAAA,MAAA;AAAA,IAAA;AAAA,EACR,GACJ;AAER,CAAC;AAEDV,EAAkB,cAAc;"}

package/dist/components/forms/autocomplete/components/autocomplete-input/styles/AutocompleteInput.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                                    */;/* empty css                                       */const s=require("@vanilla-extract/recipes/createRuntimeFn");var e={recipe:s.createRuntimeFn({defaultClassName:"_1dwks4q0",variantClassNames:{size:{sm:"_1dwks4q1",md:"_1dwks4q2",lg:"_1dwks4q3"},hasError:{true:"_1dwks4q4",false:"_1dwks4q5"},hasStartIcon:{true:"_1dwks4q6",false:"_1dwks4q7"},hasEndAction:{true:"_1dwks4q8",false:"_1dwks4q9"}},defaultVariants:{size:"md",hasError:!1,hasStartIcon:!1,hasEndAction:!1},compoundVariants:[[{size:"sm",hasStartIcon:!0},"_1dwks4qa"],[{size:"md",hasStartIcon:!0},"_1dwks4qb"],[{size:"lg",hasStartIcon:!0},"_1dwks4qc"],[{size:"sm",hasEndAction:!0},"_1dwks4qd"],[{size:"md",hasEndAction:!0},"_1dwks4qe"],[{size:"lg",hasEndAction:!0},"_1dwks4qf"]]})};exports.AUTOCOMPLETE_INPUT_STYLES=e;
+//# sourceMappingURL=AutocompleteInput.css.cjs.map

package/dist/components/forms/autocomplete/components/autocomplete-input/styles/AutocompleteInput.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteInput.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/forms/autocomplete/components/autocomplete-input/styles/AutocompleteInput.css.d.ts

@@ -0,0 +1,59 @@
+import { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
+/**
+ * Input styled to look like a TextField input.
+ *
+ * Base UI renders it as an `<input>`; we apply the same sizing, border, focus
+ * ring and disabled treatment as TextField.
+ */
+export declare const AUTOCOMPLETE_INPUT_STYLES: {
+    recipe: RuntimeFn<{
+        size: {
+            sm: {
+                height: "2.25rem";
+                paddingInline: `var(--${string})`;
+                fontSize: `var(--${string})`;
+            };
+            md: {
+                height: "2.5rem";
+                paddingInline: `var(--${string})`;
+                fontSize: `var(--${string})`;
+            };
+            lg: {
+                height: "2.75rem";
+                paddingInline: `var(--${string})`;
+                fontSize: `var(--${string})`;
+            };
+        };
+        hasError: {
+            true: {
+                borderColor: `var(--${string})`;
+                selectors: {
+                    '&:hover:not(:disabled)': {
+                        borderColor: `var(--${string})`;
+                    };
+                    '&[data-popup-open]': {
+                        borderColor: `var(--${string})`;
+                    };
+                    '&:focus-visible': {
+                        borderColor: `var(--${string})`;
+                        boxShadow: `0 0 0 2px var(--${string}), 0 0 0 4px var(--${string})`;
+                    };
+                    '&[data-mouse-focus]:focus-visible': {
+                        boxShadow: "none";
+                        borderColor: `var(--${string})`;
+                    };
+                };
+            };
+            false: {};
+        };
+        hasStartIcon: {
+            true: {};
+            false: {};
+        };
+        hasEndAction: {
+            true: {};
+            false: {};
+        };
+    }>;
+};
+export type AutocompleteInputRecipeVariants = NonNullable<RecipeVariants<typeof AUTOCOMPLETE_INPUT_STYLES.recipe>>;

package/dist/components/forms/autocomplete/components/autocomplete-input/styles/AutocompleteInput.css.js

@@ -0,0 +1,8 @@
+/* empty css                                                  */
+/* empty css                                     */
+import { createRuntimeFn as s } from "@vanilla-extract/recipes/createRuntimeFn";
+var r = { recipe: s({ defaultClassName: "_1dwks4q0", variantClassNames: { size: { sm: "_1dwks4q1", md: "_1dwks4q2", lg: "_1dwks4q3" }, hasError: { true: "_1dwks4q4", false: "_1dwks4q5" }, hasStartIcon: { true: "_1dwks4q6", false: "_1dwks4q7" }, hasEndAction: { true: "_1dwks4q8", false: "_1dwks4q9" } }, defaultVariants: { size: "md", hasError: !1, hasStartIcon: !1, hasEndAction: !1 }, compoundVariants: [[{ size: "sm", hasStartIcon: !0 }, "_1dwks4qa"], [{ size: "md", hasStartIcon: !0 }, "_1dwks4qb"], [{ size: "lg", hasStartIcon: !0 }, "_1dwks4qc"], [{ size: "sm", hasEndAction: !0 }, "_1dwks4qd"], [{ size: "md", hasEndAction: !0 }, "_1dwks4qe"], [{ size: "lg", hasEndAction: !0 }, "_1dwks4qf"]] }) };
+export {
+  r as AUTOCOMPLETE_INPUT_STYLES
+};
+//# sourceMappingURL=AutocompleteInput.css.js.map

package/dist/components/forms/autocomplete/components/autocomplete-input/styles/AutocompleteInput.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteInput.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/forms/autocomplete/components/autocomplete-input/types/AutocompleteInput.props.d.ts

@@ -0,0 +1,16 @@
+import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
+import { TextFieldSize } from '../../../../text-field/types/TextField.types.ts';
+import type * as React from 'react';
+/** Props for the styled autocomplete input. */
+export type AutocompleteInputProps = Omit<BaseAutocomplete.Input.Props, 'size'> & {
+    /** Placeholder shown when the input is empty. */
+    placeholder?: string;
+    /** Iconify icon name rendered on the left side of the input. */
+    startIcon?: string;
+    /** Visual size of the input. */
+    size?: TextFieldSize;
+    /** Whether the input should be styled in its error state. */
+    hasError?: boolean;
+    /** CSS width of the input. */
+    width?: React.CSSProperties['width'];
+};

package/dist/components/forms/autocomplete/components/autocomplete-input-group/AutocompleteInputGroup.cjs

@@ -0,0 +1,2 @@
+"use strict";const o=require("react/jsx-runtime"),u=require("@base-ui/react/autocomplete"),p=require("react"),e=p.memo(t=>o.jsx(u.Autocomplete.InputGroup,{...t}));e.displayName="Autocomplete.InputGroup";module.exports=e;
+//# sourceMappingURL=AutocompleteInputGroup.cjs.map

package/dist/components/forms/autocomplete/components/autocomplete-input-group/AutocompleteInputGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteInputGroup.cjs","sources":["../../../../../../src/components/forms/autocomplete/components/autocomplete-input-group/AutocompleteInputGroup.tsx"],"sourcesContent":["import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete'\r\nimport { memo, type FC } from 'react'\r\n\r\n/**\r\n * Wrapper for the autocomplete input and its associated controls (trigger, clear).\r\n */\r\nconst AutocompleteInputGroup: FC<BaseAutocomplete.InputGroup.Props> = memo((props) => (\r\n    <BaseAutocomplete.InputGroup {...props} />\r\n))\r\n\r\nAutocompleteInputGroup.displayName = 'Autocomplete.InputGroup'\r\n\r\nexport default AutocompleteInputGroup\r\n"],"names":["AutocompleteInputGroup","memo","props","jsx","BaseAutocomplete"],"mappings":"8GAMMA,EAAgEC,EAAAA,KAAMC,GACxEC,EAAAA,IAACC,EAAAA,aAAiB,WAAjB,CAA6B,GAAGF,EAAO,CAC3C,EAEDF,EAAuB,YAAc"}

package/dist/components/forms/autocomplete/components/autocomplete-input-group/AutocompleteInputGroup.d.ts

@@ -0,0 +1,7 @@
+import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
+import { FC } from 'react';
+/**
+ * Wrapper for the autocomplete input and its associated controls (trigger, clear).
+ */
+declare const AutocompleteInputGroup: FC<BaseAutocomplete.InputGroup.Props>;
+export default AutocompleteInputGroup;