@lucasbernardosn/react-ui 0.2.0 → 0.3.0

package/dist/components/collections/async-select/use-async-select-load.js

@@ -0,0 +1,76 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/components/collections/async-select/use-async-select-load.ts
+/**
+* Carga das opções do `AsyncSelect`: o debounce da digitação e a busca da lista inicial a cada
+* abertura do menu.
+*
+* Não há cache aqui de propósito: quem decide se uma busca vira requisição ou devolve dado em
+* cache é a camada de query usada dentro de `loadOptions` (o `staleTime` do TanStack Query, por
+* exemplo). Uma falha em `loadOptions` vira lista vazia.
+*/
+const useAsyncSelectLoad = (props) => {
+	const { loadOptions, defaultOptions, debounceMs, onMenuOpen } = props;
+	const loadOptionsRef = useRef(loadOptions);
+	useEffect(() => {
+		loadOptionsRef.current = loadOptions;
+	}, [loadOptions]);
+	const debounceTimerRef = useRef(void 0);
+	/**
+	* Conta as buscas da lista inicial: cada abertura do menu abre uma nova, e a resposta de uma
+	* anterior (o filtro mudou e o menu reabriu antes da requisição lenta responder) é descartada.
+	*/
+	const requestIdRef = useRef(0);
+	const [initialOptions, setInitialOptions] = useState(false);
+	const [isLoadingInitialOptions, setIsLoadingInitialOptions] = useState(false);
+	useEffect(() => {
+		return () => {
+			clearTimeout(debounceTimerRef.current);
+			requestIdRef.current++;
+		};
+	}, []);
+	const handleMenuOpen = useCallback(async () => {
+		onMenuOpen?.();
+		const load = loadOptionsRef.current;
+		if (defaultOptions !== true || !load) return;
+		const requestId = ++requestIdRef.current;
+		setInitialOptions([]);
+		setIsLoadingInitialOptions(true);
+		const finish = (options) => {
+			if (requestIdRef.current !== requestId) return;
+			setInitialOptions(options);
+			setIsLoadingInitialOptions(false);
+		};
+		try {
+			const result = load("", finish);
+			if (result) finish(await result);
+		} catch {
+			finish([]);
+		}
+	}, [defaultOptions, onMenuOpen]);
+	const debouncedLoadOptions = useCallback((inputValue, callback) => {
+		clearTimeout(debounceTimerRef.current);
+		debounceTimerRef.current = setTimeout(() => {
+			const load = loadOptionsRef.current;
+			if (!load) {
+				callback([]);
+				return;
+			}
+			try {
+				const result = load(inputValue, callback);
+				if (result) result.then(callback, () => callback([]));
+			} catch {
+				callback([]);
+			}
+		}, debounceMs);
+	}, [debounceMs]);
+	return {
+		loadOptions: loadOptions ? debouncedLoadOptions : void 0,
+		defaultOptions: defaultOptions === true ? initialOptions : defaultOptions,
+		isLoading: isLoadingInitialOptions,
+		onMenuOpen: handleMenuOpen
+	};
+};
+//#endregion
+export { useAsyncSelectLoad };
+
+//# sourceMappingURL=use-async-select-load.js.map

package/dist/components/collections/async-select/use-async-select-load.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-async-select-load.js","names":[],"sources":["../../../../src/components/collections/async-select/use-async-select-load.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport type { GroupBase, OptionsOrGroups } from 'react-select';\nimport type { AsyncProps } from 'react-select/async';\n\ntype LoadOptions<Option, Group extends GroupBase<Option>> = NonNullable<\n  AsyncProps<Option, boolean, Group>['loadOptions']\n>;\n\ntype UseAsyncSelectLoadProps<Option, Group extends GroupBase<Option>> = {\n  loadOptions?: LoadOptions<Option, Group>;\n  defaultOptions: OptionsOrGroups<Option, Group> | boolean;\n  debounceMs: number;\n  onMenuOpen?: () => void;\n};\n\n/**\n * Carga das opções do `AsyncSelect`: o debounce da digitação e a busca da lista inicial a cada\n * abertura do menu.\n *\n * Não há cache aqui de propósito: quem decide se uma busca vira requisição ou devolve dado em\n * cache é a camada de query usada dentro de `loadOptions` (o `staleTime` do TanStack Query, por\n * exemplo). Uma falha em `loadOptions` vira lista vazia.\n */\nexport const useAsyncSelectLoad = <Option, Group extends GroupBase<Option>>(\n  props: UseAsyncSelectLoadProps<Option, Group>,\n) => {\n  const { loadOptions, defaultOptions, debounceMs, onMenuOpen } = props;\n\n  const loadOptionsRef = useRef(loadOptions);\n\n  useEffect(() => {\n    loadOptionsRef.current = loadOptions;\n  }, [loadOptions]);\n\n  const debounceTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n\n  /**\n   * Conta as buscas da lista inicial: cada abertura do menu abre uma nova, e a resposta de uma\n   * anterior (o filtro mudou e o menu reabriu antes da requisição lenta responder) é descartada.\n   */\n  const requestIdRef = useRef(0);\n\n  const [initialOptions, setInitialOptions] = useState<\n    OptionsOrGroups<Option, Group> | boolean\n  >(false);\n  const [isLoadingInitialOptions, setIsLoadingInitialOptions] = useState(false);\n\n  useEffect(() => {\n    return () => {\n      clearTimeout(debounceTimerRef.current);\n      requestIdRef.current++;\n    };\n  }, []);\n\n  const handleMenuOpen = useCallback(async () => {\n    onMenuOpen?.();\n\n    const load = loadOptionsRef.current;\n\n    if (defaultOptions !== true || !load) {\n      return;\n    }\n\n    const requestId = ++requestIdRef.current;\n\n    // Esvazia a lista antiga já: o resultado do filtro anterior não fica à mostra durante a busca.\n    setInitialOptions([]);\n    setIsLoadingInitialOptions(true);\n\n    const finish = (options: OptionsOrGroups<Option, Group>) => {\n      if (requestIdRef.current !== requestId) {\n        return;\n      }\n\n      setInitialOptions(options);\n      setIsLoadingInitialOptions(false);\n    };\n\n    try {\n      const result = load('', finish);\n\n      if (result) {\n        finish(await result);\n      }\n    } catch {\n      finish([]);\n    }\n  }, [defaultOptions, onMenuOpen]);\n\n  const debouncedLoadOptions: LoadOptions<Option, Group> = useCallback(\n    (inputValue, callback) => {\n      clearTimeout(debounceTimerRef.current);\n\n      debounceTimerRef.current = setTimeout(() => {\n        const load = loadOptionsRef.current;\n\n        if (!load) {\n          callback([]);\n          return;\n        }\n\n        try {\n          const result = load(inputValue, callback);\n\n          if (result) {\n            result.then(callback, () => callback([]));\n          }\n        } catch {\n          callback([]);\n        }\n      }, debounceMs);\n    },\n    [debounceMs],\n  );\n\n  return {\n    loadOptions: loadOptions ? debouncedLoadOptions : undefined,\n    defaultOptions: defaultOptions === true ? initialOptions : defaultOptions,\n    isLoading: isLoadingInitialOptions,\n    onMenuOpen: handleMenuOpen,\n  };\n};\n"],"mappings":";;;;;;;;;;AAuBA,MAAa,sBACX,UACG;CACH,MAAM,EAAE,aAAa,gBAAgB,YAAY,eAAe;CAEhE,MAAM,iBAAiB,OAAO,WAAW;CAEzC,gBAAgB;EACd,eAAe,UAAU;CAC3B,GAAG,CAAC,WAAW,CAAC;CAEhB,MAAM,mBAAmB,OAAsC,KAAA,CAAS;;;;;CAMxE,MAAM,eAAe,OAAO,CAAC;CAE7B,MAAM,CAAC,gBAAgB,qBAAqB,SAE1C,KAAK;CACP,MAAM,CAAC,yBAAyB,8BAA8B,SAAS,KAAK;CAE5E,gBAAgB;EACd,aAAa;GACX,aAAa,iBAAiB,OAAO;GACrC,aAAa;EACf;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,iBAAiB,YAAY,YAAY;EAC7C,aAAa;EAEb,MAAM,OAAO,eAAe;EAE5B,IAAI,mBAAmB,QAAQ,CAAC,MAC9B;EAGF,MAAM,YAAY,EAAE,aAAa;EAGjC,kBAAkB,CAAC,CAAC;EACpB,2BAA2B,IAAI;EAE/B,MAAM,UAAU,YAA4C;GAC1D,IAAI,aAAa,YAAY,WAC3B;GAGF,kBAAkB,OAAO;GACzB,2BAA2B,KAAK;EAClC;EAEA,IAAI;GACF,MAAM,SAAS,KAAK,IAAI,MAAM;GAE9B,IAAI,QACF,OAAO,MAAM,MAAM;EAEvB,QAAQ;GACN,OAAO,CAAC,CAAC;EACX;CACF,GAAG,CAAC,gBAAgB,UAAU,CAAC;CAE/B,MAAM,uBAAmD,aACtD,YAAY,aAAa;EACxB,aAAa,iBAAiB,OAAO;EAErC,iBAAiB,UAAU,iBAAiB;GAC1C,MAAM,OAAO,eAAe;GAE5B,IAAI,CAAC,MAAM;IACT,SAAS,CAAC,CAAC;IACX;GACF;GAEA,IAAI;IACF,MAAM,SAAS,KAAK,YAAY,QAAQ;IAExC,IAAI,QACF,OAAO,KAAK,gBAAgB,SAAS,CAAC,CAAC,CAAC;GAE5C,QAAQ;IACN,SAAS,CAAC,CAAC;GACb;EACF,GAAG,UAAU;CACf,GACA,CAAC,UAAU,CACb;CAEA,OAAO;EACL,aAAa,cAAc,uBAAuB,KAAA;EAClD,gBAAgB,mBAAmB,OAAO,iBAAiB;EAC3D,WAAW;EACX,YAAY;CACd;AACF"}

package/dist/components/collections/autocomplete/autocomplete-arrow.d.ts

@@ -0,0 +1,14 @@
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/collections/autocomplete/autocomplete-arrow.d.ts
+export type AutocompleteArrowProps = Autocomplete.Arrow.Props;
+export type AutocompleteArrowState = Autocomplete.Arrow.State;
+/**
+ * Seta que aponta do popup para o campo. Opcional: o popup abre colado ao campo, e a seta só entra
+ * para quem quer o contorno apontando.
+ */
+export declare const AutocompleteArrow: {
+  (props: AutocompleteArrowProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=autocomplete-arrow.d.ts.map

package/dist/components/collections/autocomplete/autocomplete-arrow.js

@@ -0,0 +1,43 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/collections/autocomplete/autocomplete-arrow.tsx
+/**
+* Seta que aponta do popup para o campo. Opcional: o popup abre colado ao campo, e a seta só entra
+* para quem quer o contorno apontando.
+*/
+const AutocompleteArrow = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Autocomplete.Arrow, {
+		"data-component": "Autocomplete.Arrow",
+		className: mergeStateClassNames([
+			"data-[side=right]:-left-3",
+			"data-[side=bottom]:-top-2",
+			"data-[side=left]:-right-3",
+			"data-[side=top]:-bottom-2",
+			"data-[side=right]:-rotate-90",
+			"data-[side=left]:rotate-90",
+			"data-[side=top]:rotate-180"
+		], className),
+		...rest,
+		children: /* @__PURE__ */ jsxs("svg", {
+			width: "20",
+			height: "10",
+			viewBox: "0 0 20 10",
+			fill: "none",
+			"aria-hidden": true,
+			children: [/* @__PURE__ */ jsx("path", {
+				d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
+				className: "fill-white dark:fill-gray-2"
+			}), /* @__PURE__ */ jsx("path", {
+				d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",
+				className: "fill-gray-6"
+			})]
+		})
+	});
+};
+AutocompleteArrow.displayName = "Autocomplete.Arrow";
+//#endregion
+export { AutocompleteArrow };
+
+//# sourceMappingURL=autocomplete-arrow.js.map

package/dist/components/collections/autocomplete/autocomplete-arrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-arrow.js","names":["BaseAutocomplete"],"sources":["../../../../src/components/collections/autocomplete/autocomplete-arrow.tsx"],"sourcesContent":["import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';\nimport { mergeStateClassNames } from '#utils';\n\nexport type AutocompleteArrowProps = BaseAutocomplete.Arrow.Props;\n\nexport type AutocompleteArrowState = BaseAutocomplete.Arrow.State;\n\n/**\n * Seta que aponta do popup para o campo. Opcional: o popup abre colado ao campo, e a seta só entra\n * para quem quer o contorno apontando.\n */\nexport const AutocompleteArrow = (props: AutocompleteArrowProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseAutocomplete.Arrow\n      data-component=\"Autocomplete.Arrow\"\n      className={mergeStateClassNames(\n        [\n          'data-[side=right]:-left-3',\n          'data-[side=bottom]:-top-2',\n          'data-[side=left]:-right-3',\n          'data-[side=top]:-bottom-2',\n\n          'data-[side=right]:-rotate-90',\n          'data-[side=left]:rotate-90',\n          'data-[side=top]:rotate-180',\n        ],\n        className,\n      )}\n      {...rest}\n    >\n      <svg\n        width=\"20\"\n        height=\"10\"\n        viewBox=\"0 0 20 10\"\n        fill=\"none\"\n        aria-hidden={true}\n      >\n        <path\n          d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n          className=\"fill-white dark:fill-gray-2\"\n        />\n\n        <path\n          d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n          className=\"fill-gray-6\"\n        />\n      </svg>\n    </BaseAutocomplete.Arrow>\n  );\n};\n\nAutocompleteArrow.displayName = 'Autocomplete.Arrow';\n"],"mappings":";;;;;;;;AAWA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,aAAiB,OAAlB;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GACA;GAEA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;EAEJ,UAAA,qBAAC,OAAD;GACE,OAAM;GACN,QAAO;GACP,SAAQ;GACR,MAAK;GACL,eAAa;GALf,UAAA,CAOE,oBAAC,QAAD;IACE,GAAE;IACF,WAAU;GACX,CAAA,GAED,oBAAC,QAAD;IACE,GAAE;IACF,WAAU;GACX,CAAA,CACE;;CACiB,CAAA;AAE5B;AAEA,kBAAkB,cAAc"}

package/dist/components/collections/autocomplete/autocomplete-backdrop.d.ts

@@ -0,0 +1,16 @@
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/collections/autocomplete/autocomplete-backdrop.d.ts
+export type AutocompleteBackdropProps = Autocomplete.Backdrop.Props;
+export type AutocompleteBackdropState = Autocomplete.Backdrop.State;
+/**
+ * Camada atrás do popup que cobre e escurece a página.
+ *
+ * Cópia de `PopoverBackdrop`, a origem do backdrop dos popups, sem diferenças (tabela no README
+ * de `overlays`).
+ */
+export declare const AutocompleteBackdrop: {
+  (props: AutocompleteBackdropProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=autocomplete-backdrop.d.ts.map

package/dist/components/collections/autocomplete/autocomplete-backdrop.js

@@ -0,0 +1,36 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/collections/autocomplete/autocomplete-backdrop.tsx
+/**
+* Camada atrás do popup que cobre e escurece a página.
+*
+* Cópia de `PopoverBackdrop`, a origem do backdrop dos popups, sem diferenças (tabela no README
+* de `overlays`).
+*/
+const AutocompleteBackdrop = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Autocomplete.Backdrop, {
+		"data-component": "Autocomplete.Backdrop",
+		className: mergeStateClassNames([
+			"fixed",
+			"inset-0",
+			"min-h-dvh",
+			"supports-[-webkit-touch-callout:none]:absolute",
+			"bg-black/40",
+			"not-motion-reduced:transition-opacity",
+			"not-motion-reduced:ease-enter",
+			"not-motion-reduced:duration-150",
+			"not-motion-reduced:data-ending-style:duration-100",
+			"not-motion-reduced:data-ending-style:ease-exit",
+			"data-ending-style:opacity-0",
+			"data-starting-style:opacity-0"
+		], className),
+		...rest
+	});
+};
+AutocompleteBackdrop.displayName = "Autocomplete.Backdrop";
+//#endregion
+export { AutocompleteBackdrop };
+
+//# sourceMappingURL=autocomplete-backdrop.js.map

package/dist/components/collections/autocomplete/autocomplete-backdrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-backdrop.js","names":["BaseAutocomplete"],"sources":["../../../../src/components/collections/autocomplete/autocomplete-backdrop.tsx"],"sourcesContent":["import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';\nimport { mergeStateClassNames } from '#utils';\n\nexport type AutocompleteBackdropProps = BaseAutocomplete.Backdrop.Props;\n\nexport type AutocompleteBackdropState = BaseAutocomplete.Backdrop.State;\n\n/**\n * Camada atrás do popup que cobre e escurece a página.\n *\n * Cópia de `PopoverBackdrop`, a origem do backdrop dos popups, sem diferenças (tabela no README\n * de `overlays`).\n */\nexport const AutocompleteBackdrop = (props: AutocompleteBackdropProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseAutocomplete.Backdrop\n      data-component=\"Autocomplete.Backdrop\"\n      className={mergeStateClassNames(\n        [\n          'fixed',\n          'inset-0',\n          'min-h-dvh',\n          'supports-[-webkit-touch-callout:none]:absolute',\n\n          'bg-black/40',\n\n          'not-motion-reduced:transition-opacity',\n          'not-motion-reduced:ease-enter',\n          // Mesma duração e curva do `Popup` em cada sentido, para os dois sumirem juntos.\n          'not-motion-reduced:duration-150',\n          'not-motion-reduced:data-ending-style:duration-100',\n          'not-motion-reduced:data-ending-style:ease-exit',\n\n          'data-ending-style:opacity-0',\n          'data-starting-style:opacity-0',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nAutocompleteBackdrop.displayName = 'Autocomplete.Backdrop';\n"],"mappings":";;;;;;;;;;AAaA,MAAa,wBAAwB,UAAqC;CACxE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,aAAiB,UAAlB;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GACA;GAEA;GAEA;GACA;GAEA;GACA;GACA;GAEA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,qBAAqB,cAAc"}

package/dist/components/collections/autocomplete/autocomplete-clear.d.ts

@@ -0,0 +1,17 @@
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/collections/autocomplete/autocomplete-clear.d.ts
+export type AutocompleteClearProps = Autocomplete.Clear.Props;
+export type AutocompleteClearState = Autocomplete.Clear.State;
+/**
+ * Botão que limpa o campo, sobre o fim dele, antes do `Autocomplete.Trigger` quando há um. Sem
+ * filhos, mostra um X. O nome acessível sai como "Limpar"; troque com `aria-label`.
+ *
+ * Fica sempre montado (`keepMounted`) e invisível com o campo vazio: o campo reserva o espaço do
+ * botão pelo que está no DOM, e o texto não andaria quando ele aparecesse.
+ */
+export declare const AutocompleteClear: {
+  (props: AutocompleteClearProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=autocomplete-clear.d.ts.map

package/dist/components/collections/autocomplete/autocomplete-clear.js

@@ -0,0 +1,47 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { Icon } from "../../display/icon/icon.js";
+import { jsx } from "react/jsx-runtime";
+import { XIcon } from "@phosphor-icons/react";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/collections/autocomplete/autocomplete-clear.tsx
+/**
+* Botão que limpa o campo, sobre o fim dele, antes do `Autocomplete.Trigger` quando há um. Sem
+* filhos, mostra um X. O nome acessível sai como "Limpar"; troque com `aria-label`.
+*
+* Fica sempre montado (`keepMounted`) e invisível com o campo vazio: o campo reserva o espaço do
+* botão pelo que está no DOM, e o texto não andaria quando ele aparecesse.
+*/
+const AutocompleteClear = (props) => {
+	const { className, children, ...rest } = props;
+	return /* @__PURE__ */ jsx(Autocomplete.Clear, {
+		"data-component": "Autocomplete.Clear",
+		"aria-label": "Limpar",
+		keepMounted: true,
+		className: mergeStateClassNames([
+			"absolute",
+			"inset-y-0",
+			"inset-e-(--autocomplete-trigger-width)",
+			"flex",
+			"items-center",
+			"px-(--autocomplete-px)",
+			"[&_svg]:size-(--autocomplete-icon-size)",
+			"text-gray-11",
+			"hover:text-gray-12",
+			"cursor-pointer",
+			"not-data-visible:invisible",
+			"not-motion-reduced:transition-opacity",
+			"not-motion-reduced:duration-100",
+			"data-starting-style:opacity-0",
+			"data-ending-style:opacity-0",
+			"data-disabled:opacity-50",
+			"data-disabled:cursor-not-allowed"
+		], className),
+		...rest,
+		children: children ?? /* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(XIcon, {}) })
+	});
+};
+AutocompleteClear.displayName = "Autocomplete.Clear";
+//#endregion
+export { AutocompleteClear };
+
+//# sourceMappingURL=autocomplete-clear.js.map

package/dist/components/collections/autocomplete/autocomplete-clear.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-clear.js","names":["BaseAutocomplete"],"sources":["../../../../src/components/collections/autocomplete/autocomplete-clear.tsx"],"sourcesContent":["import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';\nimport { XIcon } from '@phosphor-icons/react';\nimport { Icon } from '#components/display/icon';\nimport { mergeStateClassNames } from '#utils';\n\nexport type AutocompleteClearProps = BaseAutocomplete.Clear.Props;\n\nexport type AutocompleteClearState = BaseAutocomplete.Clear.State;\n\n/**\n * Botão que limpa o campo, sobre o fim dele, antes do `Autocomplete.Trigger` quando há um. Sem\n * filhos, mostra um X. O nome acessível sai como \"Limpar\"; troque com `aria-label`.\n *\n * Fica sempre montado (`keepMounted`) e invisível com o campo vazio: o campo reserva o espaço do\n * botão pelo que está no DOM, e o texto não andaria quando ele aparecesse.\n */\nexport const AutocompleteClear = (props: AutocompleteClearProps) => {\n  const { className, children, ...rest } = props;\n\n  return (\n    <BaseAutocomplete.Clear\n      data-component=\"Autocomplete.Clear\"\n      aria-label=\"Limpar\"\n      keepMounted={true}\n      className={mergeStateClassNames(\n        [\n          'absolute',\n          'inset-y-0',\n          'inset-e-(--autocomplete-trigger-width)',\n\n          'flex',\n          'items-center',\n\n          'px-(--autocomplete-px)',\n          '[&_svg]:size-(--autocomplete-icon-size)',\n\n          'text-gray-11',\n          'hover:text-gray-12',\n\n          'cursor-pointer',\n\n          'not-data-visible:invisible',\n          'not-motion-reduced:transition-opacity',\n          'not-motion-reduced:duration-100',\n          'data-starting-style:opacity-0',\n          'data-ending-style:opacity-0',\n\n          'data-disabled:opacity-50',\n          'data-disabled:cursor-not-allowed',\n        ],\n        className,\n      )}\n      {...rest}\n    >\n      {children ?? <Icon render={<XIcon />} />}\n    </BaseAutocomplete.Clear>\n  );\n};\n\nAutocompleteClear.displayName = 'Autocomplete.Clear';\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,WAAW,UAAU,GAAG,SAAS;CAEzC,OACE,oBAACA,aAAiB,OAAlB;EACE,kBAAe;EACf,cAAW;EACX,aAAa;EACb,WAAW,qBACT;GACE;GACA;GACA;GAEA;GACA;GAEA;GACA;GAEA;GACA;GAEA;GAEA;GACA;GACA;GACA;GACA;GAEA;GACA;EACF,GACA,SACF;EACA,GAAI;EAEH,UAAA,YAAY,oBAAC,MAAD,EAAM,QAAQ,oBAAC,OAAD,CAAQ,CAAA,EAAI,CAAA;CACjB,CAAA;AAE5B;AAEA,kBAAkB,cAAc"}

package/dist/components/collections/autocomplete/autocomplete-collection.d.ts

@@ -0,0 +1,14 @@
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/collections/autocomplete/autocomplete-collection.d.ts
+export type AutocompleteCollectionProps = Autocomplete.Collection.Props;
+export type AutocompleteCollectionState = Autocomplete.Collection.State;
+/**
+ * Renderiza os itens filtrados de um grupo, quando a lista é montada à mão. Não renderiza
+ * elemento.
+ */
+export declare const AutocompleteCollection: {
+  (props: AutocompleteCollectionProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=autocomplete-collection.d.ts.map

package/dist/components/collections/autocomplete/autocomplete-collection.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/collections/autocomplete/autocomplete-collection.tsx
+/**
+* Renderiza os itens filtrados de um grupo, quando a lista é montada à mão. Não renderiza
+* elemento.
+*/
+const AutocompleteCollection = (props) => {
+	return /* @__PURE__ */ jsx(Autocomplete.Collection, { ...props });
+};
+AutocompleteCollection.displayName = "Autocomplete.Collection";
+//#endregion
+export { AutocompleteCollection };
+
+//# sourceMappingURL=autocomplete-collection.js.map

package/dist/components/collections/autocomplete/autocomplete-collection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-collection.js","names":["BaseAutocomplete"],"sources":["../../../../src/components/collections/autocomplete/autocomplete-collection.tsx"],"sourcesContent":["import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';\n\nexport type AutocompleteCollectionProps = BaseAutocomplete.Collection.Props;\n\nexport type AutocompleteCollectionState = BaseAutocomplete.Collection.State;\n\n/**\n * Renderiza os itens filtrados de um grupo, quando a lista é montada à mão. Não renderiza\n * elemento.\n */\nexport const AutocompleteCollection = (props: AutocompleteCollectionProps) => {\n  return <BaseAutocomplete.Collection {...props} />;\n};\n\nAutocompleteCollection.displayName = 'Autocomplete.Collection';\n"],"mappings":";;;;;;;AAUA,MAAa,0BAA0B,UAAuC;CAC5E,OAAO,oBAACA,aAAiB,YAAlB,EAA6B,GAAI,MAAQ,CAAA;AAClD;AAEA,uBAAuB,cAAc"}

package/dist/components/collections/autocomplete/autocomplete-empty.d.ts

@@ -0,0 +1,14 @@
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/collections/autocomplete/autocomplete-empty.d.ts
+export type AutocompleteEmptyProps = Autocomplete.Empty.Props;
+export type AutocompleteEmptyState = Autocomplete.Empty.State;
+/**
+ * Mensagem de "nenhum resultado": mostra os filhos só com a lista vazia, e a anuncia ao leitor de
+ * tela. Exige `items` no `Autocomplete.Root`. O texto vem do app.
+ */
+export declare const AutocompleteEmpty: {
+  (props: AutocompleteEmptyProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=autocomplete-empty.d.ts.map

package/dist/components/collections/autocomplete/autocomplete-empty.js

@@ -0,0 +1,24 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { useAutocompleteContext } from "./use-autocomplete-context.js";
+import { autocompleteMessageVariants } from "./autocomplete-message-variants.js";
+import { jsx } from "react/jsx-runtime";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/collections/autocomplete/autocomplete-empty.tsx
+/**
+* Mensagem de "nenhum resultado": mostra os filhos só com a lista vazia, e a anuncia ao leitor de
+* tela. Exige `items` no `Autocomplete.Root`. O texto vem do app.
+*/
+const AutocompleteEmpty = (props) => {
+	const { className, ...rest } = props;
+	const { size } = useAutocompleteContext();
+	return /* @__PURE__ */ jsx(Autocomplete.Empty, {
+		"data-component": "Autocomplete.Empty",
+		className: mergeStateClassNames(autocompleteMessageVariants({ size }), className),
+		...rest
+	});
+};
+AutocompleteEmpty.displayName = "Autocomplete.Empty";
+//#endregion
+export { AutocompleteEmpty };
+
+//# sourceMappingURL=autocomplete-empty.js.map

package/dist/components/collections/autocomplete/autocomplete-empty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-empty.js","names":["BaseAutocomplete"],"sources":["../../../../src/components/collections/autocomplete/autocomplete-empty.tsx"],"sourcesContent":["import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';\nimport { mergeStateClassNames } from '#utils';\nimport { autocompleteMessageVariants } from './autocomplete-message-variants';\nimport { useAutocompleteContext } from './use-autocomplete-context';\n\nexport type AutocompleteEmptyProps = BaseAutocomplete.Empty.Props;\n\nexport type AutocompleteEmptyState = BaseAutocomplete.Empty.State;\n\n/**\n * Mensagem de \"nenhum resultado\": mostra os filhos só com a lista vazia, e a anuncia ao leitor de\n * tela. Exige `items` no `Autocomplete.Root`. O texto vem do app.\n */\nexport const AutocompleteEmpty = (props: AutocompleteEmptyProps) => {\n  const { className, ...rest } = props;\n\n  const { size } = useAutocompleteContext();\n\n  return (\n    <BaseAutocomplete.Empty\n      data-component=\"Autocomplete.Empty\"\n      className={mergeStateClassNames(\n        autocompleteMessageVariants({ size }),\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nAutocompleteEmpty.displayName = 'Autocomplete.Empty';\n"],"mappings":";;;;;;;;;;AAaA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,MAAM,EAAE,SAAS,uBAAuB;CAExC,OACE,oBAACA,aAAiB,OAAlB;EACE,kBAAe;EACf,WAAW,qBACT,4BAA4B,EAAE,KAAK,CAAC,GACpC,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,kBAAkB,cAAc"}

package/dist/components/collections/autocomplete/autocomplete-group-label-variants.d.ts

@@ -0,0 +1,12 @@
+//#region src/components/collections/autocomplete/autocomplete-group-label-variants.d.ts
+/**
+ * Cópia de `selectGroupLabelVariants`, a origem do rótulo de grupo das listas em popup (tabela no
+ * README de `collections`). A diferença é o recuo: sem a coluna do check, ele é o padding do
+ * `Autocomplete.Item` em cada `size`, e o texto do rótulo alinha com o dos itens. Mudar o
+ * espaçamento do item pede mudar estes valores.
+ */
+export declare const autocompleteGroupLabelVariants: (props?: ({
+  size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=autocomplete-group-label-variants.d.ts.map

package/dist/components/collections/autocomplete/autocomplete-group-label-variants.js

@@ -0,0 +1,65 @@
+import { autocompleteDefaultVariants } from "./use-autocomplete-context.js";
+import { cva } from "class-variance-authority";
+//#region src/components/collections/autocomplete/autocomplete-group-label-variants.ts
+/**
+* Cópia de `selectGroupLabelVariants`, a origem do rótulo de grupo das listas em popup (tabela no
+* README de `collections`). A diferença é o recuo: sem a coluna do check, ele é o padding do
+* `Autocomplete.Item` em cada `size`, e o texto do rótulo alinha com o dos itens. Mudar o
+* espaçamento do item pede mudar estes valores.
+*/
+const autocompleteGroupLabelVariants = cva([
+	"sticky",
+	"top-0",
+	"z-1",
+	"bg-white",
+	"dark:bg-gray-2",
+	"pt-2",
+	"pb-1",
+	"text-gray-11",
+	"font-medium",
+	"uppercase",
+	"tracking-wider"
+], {
+	variants: { size: {
+		"2xs": [
+			"ps-2",
+			"pe-2",
+			"text-[0.6875rem]"
+		],
+		xs: [
+			"ps-2",
+			"pe-2",
+			"text-[0.6875rem]"
+		],
+		sm: [
+			"ps-2.5",
+			"pe-2.5",
+			"text-[0.6875rem]"
+		],
+		md: [
+			"ps-3",
+			"pe-3",
+			"text-[0.6875rem]"
+		],
+		lg: [
+			"ps-4",
+			"pe-4",
+			"text-[0.8125rem]"
+		],
+		xl: [
+			"ps-4.5",
+			"pe-4.5",
+			"text-[0.8125rem]"
+		],
+		"2xl": [
+			"ps-5",
+			"pe-5",
+			"text-sm"
+		]
+	} },
+	defaultVariants: { size: autocompleteDefaultVariants.size }
+});
+//#endregion
+export { autocompleteGroupLabelVariants };
+
+//# sourceMappingURL=autocomplete-group-label-variants.js.map

package/dist/components/collections/autocomplete/autocomplete-group-label-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-group-label-variants.js","names":[],"sources":["../../../../src/components/collections/autocomplete/autocomplete-group-label-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { autocompleteDefaultVariants } from './use-autocomplete-context';\n\n/**\n * Cópia de `selectGroupLabelVariants`, a origem do rótulo de grupo das listas em popup (tabela no\n * README de `collections`). A diferença é o recuo: sem a coluna do check, ele é o padding do\n * `Autocomplete.Item` em cada `size`, e o texto do rótulo alinha com o dos itens. Mudar o\n * espaçamento do item pede mudar estes valores.\n */\nexport const autocompleteGroupLabelVariants = cva(\n  [\n    'sticky',\n    'top-0',\n    'z-1',\n\n    // Mesmo fundo do popup: fixo no topo, o rótulo cobre os itens que rolam por baixo.\n    'bg-white',\n    'dark:bg-gray-2',\n\n    'pt-2',\n    'pb-1',\n\n    'text-gray-11',\n    'font-medium',\n    'uppercase',\n    'tracking-wider',\n  ],\n  {\n    variants: {\n      size: {\n        '2xs': [\n          'ps-2',\n          'pe-2',\n\n          'text-[0.6875rem]', // 11px\n        ],\n        xs: [\n          'ps-2',\n          'pe-2',\n\n          'text-[0.6875rem]', // 11px\n        ],\n        sm: [\n          'ps-2.5',\n          'pe-2.5',\n\n          'text-[0.6875rem]', // 11px\n        ],\n        md: [\n          'ps-3',\n          'pe-3',\n\n          'text-[0.6875rem]', // 11px\n        ],\n        lg: [\n          'ps-4',\n          'pe-4',\n\n          'text-[0.8125rem]', // 13px\n        ],\n        xl: [\n          'ps-4.5',\n          'pe-4.5',\n\n          'text-[0.8125rem]', // 13px\n        ],\n        '2xl': [\n          'ps-5',\n          'pe-5',\n\n          'text-sm',\n        ],\n      },\n    },\n    defaultVariants: {\n      size: autocompleteDefaultVariants.size,\n    },\n  },\n);\n"],"mappings":";;;;;;;;;AASA,MAAa,iCAAiC,IAC5C;CACE;CACA;CACA;CAGA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,OAAO;GACL;GACA;GAEA;EACF;EACA,IAAI;GACF;GACA;GAEA;EACF;EACA,IAAI;GACF;GACA;GAEA;EACF;EACA,IAAI;GACF;GACA;GAEA;EACF;EACA,IAAI;GACF;GACA;GAEA;EACF;EACA,IAAI;GACF;GACA;GAEA;EACF;EACA,OAAO;GACL;GACA;GAEA;EACF;CACF,EACF;CACA,iBAAiB,EACf,MAAM,4BAA4B,KACpC;AACF,CACF"}

package/dist/components/collections/autocomplete/autocomplete-group-label.d.ts

@@ -0,0 +1,13 @@
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/collections/autocomplete/autocomplete-group-label.d.ts
+export type AutocompleteGroupLabelProps = Autocomplete.GroupLabel.Props;
+export type AutocompleteGroupLabelState = Autocomplete.GroupLabel.State;
+/**
+ * Rótulo do grupo, grudado no topo da lista enquanto o grupo rola.
+ */
+export declare const AutocompleteGroupLabel: {
+  (props: AutocompleteGroupLabelProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=autocomplete-group-label.d.ts.map

package/dist/components/collections/autocomplete/autocomplete-group-label.js

@@ -0,0 +1,23 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { useAutocompleteContext } from "./use-autocomplete-context.js";
+import { autocompleteGroupLabelVariants } from "./autocomplete-group-label-variants.js";
+import { jsx } from "react/jsx-runtime";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/collections/autocomplete/autocomplete-group-label.tsx
+/**
+* Rótulo do grupo, grudado no topo da lista enquanto o grupo rola.
+*/
+const AutocompleteGroupLabel = (props) => {
+	const { className, ...rest } = props;
+	const { size } = useAutocompleteContext();
+	return /* @__PURE__ */ jsx(Autocomplete.GroupLabel, {
+		"data-component": "Autocomplete.GroupLabel",
+		className: mergeStateClassNames(autocompleteGroupLabelVariants({ size }), className),
+		...rest
+	});
+};
+AutocompleteGroupLabel.displayName = "Autocomplete.GroupLabel";
+//#endregion
+export { AutocompleteGroupLabel };
+
+//# sourceMappingURL=autocomplete-group-label.js.map

package/dist/components/collections/autocomplete/autocomplete-group-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-group-label.js","names":["BaseAutocomplete"],"sources":["../../../../src/components/collections/autocomplete/autocomplete-group-label.tsx"],"sourcesContent":["import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';\nimport { mergeStateClassNames } from '#utils';\nimport { autocompleteGroupLabelVariants } from './autocomplete-group-label-variants';\nimport { useAutocompleteContext } from './use-autocomplete-context';\n\nexport type AutocompleteGroupLabelProps = BaseAutocomplete.GroupLabel.Props;\n\nexport type AutocompleteGroupLabelState = BaseAutocomplete.GroupLabel.State;\n\n/**\n * Rótulo do grupo, grudado no topo da lista enquanto o grupo rola.\n */\nexport const AutocompleteGroupLabel = (props: AutocompleteGroupLabelProps) => {\n  const { className, ...rest } = props;\n\n  const { size } = useAutocompleteContext();\n\n  return (\n    <BaseAutocomplete.GroupLabel\n      data-component=\"Autocomplete.GroupLabel\"\n      className={mergeStateClassNames(\n        autocompleteGroupLabelVariants({ size }),\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nAutocompleteGroupLabel.displayName = 'Autocomplete.GroupLabel';\n"],"mappings":";;;;;;;;;AAYA,MAAa,0BAA0B,UAAuC;CAC5E,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,MAAM,EAAE,SAAS,uBAAuB;CAExC,OACE,oBAACA,aAAiB,YAAlB;EACE,kBAAe;EACf,WAAW,qBACT,+BAA+B,EAAE,KAAK,CAAC,GACvC,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,uBAAuB,cAAc"}

package/dist/components/collections/autocomplete/autocomplete-group.d.ts

@@ -0,0 +1,14 @@
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/collections/autocomplete/autocomplete-group.d.ts
+export type AutocompleteGroupProps = Autocomplete.Group.Props;
+export type AutocompleteGroupState = Autocomplete.Group.State;
+/**
+ * Agrupa itens sob um `Autocomplete.GroupLabel`. Com `items` agrupados no `Autocomplete.Root`, os
+ * filhos são uma função que recebe cada grupo.
+ */
+export declare const AutocompleteGroup: {
+  (props: AutocompleteGroupProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=autocomplete-group.d.ts.map

package/dist/components/collections/autocomplete/autocomplete-group.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/collections/autocomplete/autocomplete-group.tsx
+/**
+* Agrupa itens sob um `Autocomplete.GroupLabel`. Com `items` agrupados no `Autocomplete.Root`, os
+* filhos são uma função que recebe cada grupo.
+*/
+const AutocompleteGroup = (props) => {
+	return /* @__PURE__ */ jsx(Autocomplete.Group, {
+		"data-component": "Autocomplete.Group",
+		...props
+	});
+};
+AutocompleteGroup.displayName = "Autocomplete.Group";
+//#endregion
+export { AutocompleteGroup };
+
+//# sourceMappingURL=autocomplete-group.js.map

package/dist/components/collections/autocomplete/autocomplete-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-group.js","names":["BaseAutocomplete"],"sources":["../../../../src/components/collections/autocomplete/autocomplete-group.tsx"],"sourcesContent":["import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';\n\nexport type AutocompleteGroupProps = BaseAutocomplete.Group.Props;\n\nexport type AutocompleteGroupState = BaseAutocomplete.Group.State;\n\n/**\n * Agrupa itens sob um `Autocomplete.GroupLabel`. Com `items` agrupados no `Autocomplete.Root`, os\n * filhos são uma função que recebe cada grupo.\n */\nexport const AutocompleteGroup = (props: AutocompleteGroupProps) => {\n  return (\n    <BaseAutocomplete.Group\n      data-component=\"Autocomplete.Group\"\n      {...props}\n    />\n  );\n};\n\nAutocompleteGroup.displayName = 'Autocomplete.Group';\n"],"mappings":";;;;;;;AAUA,MAAa,qBAAqB,UAAkC;CAClE,OACE,oBAACA,aAAiB,OAAlB;EACE,kBAAe;EACf,GAAI;CACL,CAAA;AAEL;AAEA,kBAAkB,cAAc"}

package/dist/components/collections/autocomplete/autocomplete-icon.d.ts

@@ -0,0 +1,13 @@
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/collections/autocomplete/autocomplete-icon.d.ts
+export type AutocompleteIconProps = Autocomplete.Icon.Props;
+export type AutocompleteIconState = Autocomplete.Icon.State;
+/**
+ * Ícone de abrir, dentro do `Autocomplete.Trigger`. Troque o ícone com `render`.
+ */
+export declare const AutocompleteIcon: {
+  (props: AutocompleteIconProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=autocomplete-icon.d.ts.map

package/dist/components/collections/autocomplete/autocomplete-icon.js

@@ -0,0 +1,23 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { Icon } from "../../display/icon/icon.js";
+import { jsx } from "react/jsx-runtime";
+import { CaretDownIcon } from "@phosphor-icons/react";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/collections/autocomplete/autocomplete-icon.tsx
+/**
+* Ícone de abrir, dentro do `Autocomplete.Trigger`. Troque o ícone com `render`.
+*/
+const AutocompleteIcon = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Autocomplete.Icon, {
+		"data-component": "Autocomplete.Icon",
+		className: mergeStateClassNames(["flex"], className),
+		render: /* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(CaretDownIcon, {}) }),
+		...rest
+	});
+};
+AutocompleteIcon.displayName = "Autocomplete.Icon";
+//#endregion
+export { AutocompleteIcon };
+
+//# sourceMappingURL=autocomplete-icon.js.map

package/dist/components/collections/autocomplete/autocomplete-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-icon.js","names":["BaseAutocomplete"],"sources":["../../../../src/components/collections/autocomplete/autocomplete-icon.tsx"],"sourcesContent":["import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';\nimport { CaretDownIcon } from '@phosphor-icons/react';\nimport { Icon } from '#components/display/icon';\nimport { mergeStateClassNames } from '#utils';\n\nexport type AutocompleteIconProps = BaseAutocomplete.Icon.Props;\n\nexport type AutocompleteIconState = BaseAutocomplete.Icon.State;\n\n/**\n * Ícone de abrir, dentro do `Autocomplete.Trigger`. Troque o ícone com `render`.\n */\nexport const AutocompleteIcon = (props: AutocompleteIconProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseAutocomplete.Icon\n      data-component=\"Autocomplete.Icon\"\n      className={mergeStateClassNames(['flex'], className)}\n      render={<Icon render={<CaretDownIcon />} />}\n      {...rest}\n    />\n  );\n};\n\nAutocompleteIcon.displayName = 'Autocomplete.Icon';\n"],"mappings":";;;;;;;;;AAYA,MAAa,oBAAoB,UAAiC;CAChE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,aAAiB,MAAlB;EACE,kBAAe;EACf,WAAW,qBAAqB,CAAC,MAAM,GAAG,SAAS;EACnD,QAAQ,oBAAC,MAAD,EAAM,QAAQ,oBAAC,eAAD,CAAgB,CAAA,EAAI,CAAA;EAC1C,GAAI;CACL,CAAA;AAEL;AAEA,iBAAiB,cAAc"}

package/dist/components/collections/autocomplete/autocomplete-input-group-variants.d.ts

@@ -0,0 +1,18 @@
+//#region src/components/collections/autocomplete/autocomplete-input-group-variants.d.ts
+/**
+ * Declara no contêiner as medidas que o campo e os botões leem:
+ * - `--autocomplete-px` repete o padding horizontal do `Input` em cada `size`, para o botão ter a
+ *   mesma folga do texto até a borda. Se o padding do `Input` mudar, muda aqui também;
+ * - `--autocomplete-icon-size` é o lado do ícone;
+ * - `--autocomplete-button-width` é a largura de um botão: o ícone com a folga dos dois lados.
+ *
+ * `--autocomplete-trigger-width` e `--autocomplete-clear-width` valem a largura do botão quando a
+ * parte está no contêiner, e 0 quando não está: o campo reserva só o espaço dos que existem, e o
+ * `Clear` se afasta do fim quando há um `Trigger`. O `Clear` fica sempre montado, só invisível
+ * com o campo vazio, para o texto não andar quando ele aparece.
+ */
+export declare const autocompleteInputGroupVariants: (props?: ({
+  size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=autocomplete-input-group-variants.d.ts.map