@lucasbernardosn/react-ui 0.1.0 → 0.3.0

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

@@ -0,0 +1,121 @@
+import { normalizeDataAttr } from "../../../utils/normalize-data-attr.js";
+import { getAsyncSelectAriaLiveMessages, getAsyncSelectScreenReaderStatus } from "./async-select-aria-messages.js";
+import { getAsyncSelectComponents } from "./async-select-components.js";
+import { asyncSelectDefaultVariants, getAsyncSelectClassNames } from "./async-select-variants.js";
+import { useAsyncSelectLoad } from "./use-async-select-load.js";
+import { useMemo } from "react";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
+import { jsx } from "react/jsx-runtime";
+import ReactSelectAsync from "react-select/async";
+//#region src/components/collections/async-select/async-select.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Seleção com busca assíncrona, sobre o `react-select/async`: a pessoa digita e as opções vêm de
+* `loadOptions`. Aceita as props do react-select, mais `size`, `invalid` e `debounceMs`.
+*
+* O menu vai para o `body` por um portal. Dentro de um popup modal do Base UI (`Dialog`,
+* `Drawer`), ele fica fora da área ativa e não recebe cliques: passe o `menuPortalTarget` com um
+* elemento de dentro do popup.
+*
+* @example
+* ```tsx
+* <AsyncSelect
+*   aria-label="Cliente"
+*   loadOptions={async (search) => {
+*     const customers = await searchCustomers(search);
+*
+*     return customers.map((customer) => ({
+*       value: customer.id,
+*       label: customer.name,
+*     }));
+*   }}
+*   onChange={(option) => setCustomerId(option?.value)}
+* />
+* ```
+*/
+const AsyncSelect = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["size"]);
+	const { size = asyncSelectDefaultVariants.size } = variantProps;
+	const { invalid = false, debounceMs = 300, isMulti, closeMenuOnSelect = !isMulti, loadOptions, defaultOptions = true, onMenuOpen, isLoading, ...rest } = elementProps;
+	const load = useAsyncSelectLoad({
+		loadOptions,
+		defaultOptions,
+		debounceMs,
+		onMenuOpen
+	});
+	const classNames = useMemo(() => getAsyncSelectClassNames({
+		size,
+		invalid
+	}), [size, invalid]);
+	const styles = useMemo(() => getAsyncSelectStyles(), []);
+	const components = useMemo(() => getAsyncSelectComponents(), []);
+	const ariaLiveMessages = useMemo(() => getAsyncSelectAriaLiveMessages(), []);
+	return /* @__PURE__ */ jsx(ReactSelectAsync, {
+		unstyled: true,
+		isClearable: true,
+		hideSelectedOptions: false,
+		menuPlacement: "auto",
+		maxMenuHeight: 320,
+		menuPortalTarget: typeof document === "undefined" ? void 0 : document.body,
+		placeholder: "",
+		loadingMessage: () => "Buscando...",
+		noOptionsMessage: ({ inputValue }) => inputValue ? "Nenhuma opção encontrada" : "Digite para buscar",
+		screenReaderStatus: getAsyncSelectScreenReaderStatus,
+		ariaLiveMessages,
+		"aria-invalid": normalizeDataAttr(invalid),
+		classNames,
+		styles,
+		components,
+		isMulti,
+		closeMenuOnSelect,
+		loadOptions: load.loadOptions,
+		defaultOptions: load.defaultOptions,
+		onMenuOpen: load.onMenuOpen,
+		isLoading: load.isLoading || isLoading,
+		...rest
+	});
+};
+AsyncSelect.displayName = "AsyncSelect";
+/**
+* O react-select injeta alguns estilos mesmo em modo `unstyled`, por classes do emotion que
+* empatam em especificidade com as do Tailwind. Cada override aqui desfaz um deles.
+*/
+const getAsyncSelectStyles = () => ({
+	control: (base) => ({
+		...base,
+		transition: void 0,
+		minHeight: void 0
+	}),
+	input: (base) => ({
+		...base,
+		"input:focus": { boxShadow: "none" }
+	}),
+	multiValueLabel: (base) => ({
+		...base,
+		whiteSpace: "normal",
+		overflow: "visible"
+	}),
+	option: (base) => ({
+		...base,
+		display: "grid",
+		fontSize: void 0
+	}),
+	menu: (base) => ({
+		...base,
+		marginTop: void 0,
+		marginBottom: void 0
+	}),
+	menuList: (base) => ({
+		...base,
+		paddingTop: void 0,
+		paddingBottom: void 0
+	}),
+	menuPortal: (base) => ({
+		...base,
+		zIndex: void 0
+	})
+});
+//#endregion
+export { AsyncSelect };
+
+//# sourceMappingURL=async-select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"async-select.js","names":[],"sources":["../../../../src/components/collections/async-select/async-select.tsx"],"sourcesContent":["import {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { type Ref, useMemo } from 'react';\nimport type {\n  ActionMeta,\n  GroupBase,\n  OnChangeValue,\n  SelectInstance,\n  StylesConfig,\n} from 'react-select';\nimport ReactSelectAsync, { type AsyncProps } from 'react-select/async';\nimport { normalizeDataAttr } from '#utils';\nimport {\n  getAsyncSelectAriaLiveMessages,\n  getAsyncSelectScreenReaderStatus,\n} from './async-select-aria-messages';\nimport { getAsyncSelectComponents } from './async-select-components';\nimport {\n  type AsyncSelectVariants,\n  asyncSelectDefaultVariants,\n  getAsyncSelectClassNames,\n} from './async-select-variants';\nimport { useAsyncSelectLoad } from './use-async-select-load';\n\nexport type AsyncSelectChangeValue<\n  Option,\n  IsMulti extends boolean = false,\n> = OnChangeValue<Option, IsMulti>;\n\nexport type AsyncSelectActionMeta<Option> = ActionMeta<Option>;\n\nexport type AsyncSelectInstance<\n  Option,\n  IsMulti extends boolean = false,\n  Group extends GroupBase<Option> = GroupBase<Option>,\n> = SelectInstance<Option, IsMulti, Group>;\n\nexport type AsyncSelectProps<\n  Option,\n  IsMulti extends boolean = false,\n  Group extends GroupBase<Option> = GroupBase<Option>,\n> = MergeOverride<\n  AsyncProps<Option, IsMulti, Group>,\n  AsyncSelectVariants & {\n    ref?: Ref<AsyncSelectInstance<Option, IsMulti, Group>>;\n    /**\n     * Marca o campo como inválido: borda e anel de foco vermelhos e `aria-invalid` no input. O\n     * react-select não lê o contexto do `Field`, então o estado vem por esta prop.\n     *\n     * @default false\n     */\n    invalid?: boolean;\n    /**\n     * Espera, em milissegundos, depois da última tecla antes de chamar `loadOptions`.\n     *\n     * @default 300\n     */\n    debounceMs?: number;\n    /**\n     * Com `true`, `loadOptions('')` busca a lista inicial a cada abertura do menu. Com uma lista,\n     * ela é mostrada antes de a pessoa digitar; com `false`, o menu só busca depois da digitação.\n     *\n     * @default true\n     */\n    defaultOptions?: AsyncProps<Option, IsMulti, Group>['defaultOptions'];\n  }\n>;\n\nconst splitVariantProps = createSplitProps<AsyncSelectVariants>();\n\n/**\n * Seleção com busca assíncrona, sobre o `react-select/async`: a pessoa digita e as opções vêm de\n * `loadOptions`. Aceita as props do react-select, mais `size`, `invalid` e `debounceMs`.\n *\n * O menu vai para o `body` por um portal. Dentro de um popup modal do Base UI (`Dialog`,\n * `Drawer`), ele fica fora da área ativa e não recebe cliques: passe o `menuPortalTarget` com um\n * elemento de dentro do popup.\n *\n * @example\n * ```tsx\n * <AsyncSelect\n *   aria-label=\"Cliente\"\n *   loadOptions={async (search) => {\n *     const customers = await searchCustomers(search);\n *\n *     return customers.map((customer) => ({\n *       value: customer.id,\n *       label: customer.name,\n *     }));\n *   }}\n *   onChange={(option) => setCustomerId(option?.value)}\n * />\n * ```\n */\nexport const AsyncSelect = <\n  Option,\n  IsMulti extends boolean = false,\n  Group extends GroupBase<Option> = GroupBase<Option>,\n>(\n  props: AsyncSelectProps<Option, IsMulti, Group>,\n) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['size']);\n\n  const { size = asyncSelectDefaultVariants.size } = variantProps;\n\n  const {\n    invalid = false,\n    debounceMs = 300,\n    isMulti,\n    closeMenuOnSelect = !isMulti,\n    loadOptions,\n    defaultOptions = true,\n    onMenuOpen,\n    isLoading,\n    ...rest\n  } = elementProps;\n\n  const load = useAsyncSelectLoad({\n    loadOptions,\n    defaultOptions,\n    debounceMs,\n    onMenuOpen,\n  });\n\n  const classNames = useMemo(\n    () => getAsyncSelectClassNames<Option, IsMulti, Group>({ size, invalid }),\n    [size, invalid],\n  );\n\n  const styles = useMemo(\n    () => getAsyncSelectStyles<Option, IsMulti, Group>(),\n    [],\n  );\n\n  const components = useMemo(\n    () => getAsyncSelectComponents<Option, IsMulti, Group>(),\n    [],\n  );\n\n  const ariaLiveMessages = useMemo(\n    () => getAsyncSelectAriaLiveMessages<Option, IsMulti, Group>(),\n    [],\n  );\n\n  return (\n    <ReactSelectAsync\n      unstyled={true}\n      isClearable={true}\n      hideSelectedOptions={false}\n      menuPlacement=\"auto\"\n      maxMenuHeight={320}\n      menuPortalTarget={\n        typeof document === 'undefined' ? undefined : document.body\n      }\n      placeholder=\"\"\n      loadingMessage={() => 'Buscando...'}\n      noOptionsMessage={({ inputValue }) =>\n        inputValue ? 'Nenhuma opção encontrada' : 'Digite para buscar'\n      }\n      screenReaderStatus={getAsyncSelectScreenReaderStatus}\n      ariaLiveMessages={ariaLiveMessages}\n      aria-invalid={normalizeDataAttr(invalid)}\n      classNames={classNames}\n      styles={styles}\n      components={components}\n      isMulti={isMulti}\n      closeMenuOnSelect={closeMenuOnSelect}\n      loadOptions={load.loadOptions}\n      defaultOptions={load.defaultOptions}\n      onMenuOpen={load.onMenuOpen}\n      isLoading={load.isLoading || isLoading}\n      {...rest}\n    />\n  );\n};\n\nAsyncSelect.displayName = 'AsyncSelect';\n\n/**\n * O react-select injeta alguns estilos mesmo em modo `unstyled`, por classes do emotion que\n * empatam em especificidade com as do Tailwind. Cada override aqui desfaz um deles.\n */\nconst getAsyncSelectStyles = <\n  Option,\n  IsMulti extends boolean,\n  Group extends GroupBase<Option>,\n>(): StylesConfig<Option, IsMulti, Group> => ({\n  // `transition` e `min-height` fixos do controle: a altura vem do `size`.\n  control: (base) => ({ ...base, transition: undefined, minHeight: undefined }),\n  // `classNames.input` vai no wrapper, não no `<input>`; o `:focus` do input só entra por aqui.\n  input: (base) => ({ ...base, 'input:focus': { boxShadow: 'none' } }),\n  // O label do chip não quebra linha por padrão: texto longo precisa quebrar no `isMulti`.\n  multiValueLabel: (base) => ({\n    ...base,\n    whiteSpace: 'normal',\n    overflow: 'visible',\n  }),\n  // O react-select injeta `display: block` e `font-size: inherit` no item: o primeiro perderia\n  // para o `grid` do check + texto, e o segundo faria o texto ignorar o `text-*` do tamanho.\n  option: (base) => ({ ...base, display: 'grid', fontSize: undefined }),\n  // O react-select injeta `margin` de 8px no menu e ele venceria o `my-*` do tamanho do respiro.\n  menu: (base) => ({ ...base, marginTop: undefined, marginBottom: undefined }),\n  // O react-select põe `padding` de 4px na lista: o respiro vem do menu (ver `menuClassNames`).\n  menuList: (base) => ({\n    ...base,\n    paddingTop: undefined,\n    paddingBottom: undefined,\n  }),\n  // Popup sem `z-index`: a ordem vem do portal (ver o `AGENTS.md` do `ui`).\n  menuPortal: (base) => ({ ...base, zIndex: undefined }),\n});\n"],"mappings":";;;;;;;;;;AAsEA,MAAM,oBAAoB,iBAAsC;;;;;;;;;;;;;;;;;;;;;;;;;AA0BhE,MAAa,eAKX,UACG;CACH,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,MAAM,CAAC;CAEtE,MAAM,EAAE,OAAO,2BAA2B,SAAS;CAEnD,MAAM,EACJ,UAAU,OACV,aAAa,KACb,SACA,oBAAoB,CAAC,SACrB,aACA,iBAAiB,MACjB,YACA,WACA,GAAG,SACD;CAEJ,MAAM,OAAO,mBAAmB;EAC9B;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,aAAa,cACX,yBAAiD;EAAE;EAAM;CAAQ,CAAC,GACxE,CAAC,MAAM,OAAO,CAChB;CAEA,MAAM,SAAS,cACP,qBAA6C,GACnD,CAAC,CACH;CAEA,MAAM,aAAa,cACX,yBAAiD,GACvD,CAAC,CACH;CAEA,MAAM,mBAAmB,cACjB,+BAAuD,GAC7D,CAAC,CACH;CAEA,OACE,oBAAC,kBAAD;EACE,UAAU;EACV,aAAa;EACb,qBAAqB;EACrB,eAAc;EACd,eAAe;EACf,kBACE,OAAO,aAAa,cAAc,KAAA,IAAY,SAAS;EAEzD,aAAY;EACZ,sBAAsB;EACtB,mBAAmB,EAAE,iBACnB,aAAa,6BAA6B;EAE5C,oBAAoB;EACF;EAClB,gBAAc,kBAAkB,OAAO;EAC3B;EACJ;EACI;EACH;EACU;EACnB,aAAa,KAAK;EAClB,gBAAgB,KAAK;EACrB,YAAY,KAAK;EACjB,WAAW,KAAK,aAAa;EAC7B,GAAI;CACL,CAAA;AAEL;AAEA,YAAY,cAAc;;;;;AAM1B,MAAM,8BAIwC;CAE5C,UAAU,UAAU;EAAE,GAAG;EAAM,YAAY,KAAA;EAAW,WAAW,KAAA;CAAU;CAE3E,QAAQ,UAAU;EAAE,GAAG;EAAM,eAAe,EAAE,WAAW,OAAO;CAAE;CAElE,kBAAkB,UAAU;EAC1B,GAAG;EACH,YAAY;EACZ,UAAU;CACZ;CAGA,SAAS,UAAU;EAAE,GAAG;EAAM,SAAS;EAAQ,UAAU,KAAA;CAAU;CAEnE,OAAO,UAAU;EAAE,GAAG;EAAM,WAAW,KAAA;EAAW,cAAc,KAAA;CAAU;CAE1E,WAAW,UAAU;EACnB,GAAG;EACH,YAAY,KAAA;EACZ,eAAe,KAAA;CACjB;CAEA,aAAa,UAAU;EAAE,GAAG;EAAM,QAAQ,KAAA;CAAU;AACtD"}

package/dist/components/collections/async-select/index.d.ts

@@ -0,0 +1,3 @@
+import { AsyncSelectVariants } from "./async-select-variants.js";
+import { AsyncSelect, AsyncSelectActionMeta, AsyncSelectChangeValue, AsyncSelectInstance, AsyncSelectProps } from "./async-select.js";
+export { AsyncSelect, type AsyncSelectActionMeta, type AsyncSelectChangeValue, type AsyncSelectInstance, type AsyncSelectProps, type AsyncSelectVariants };

package/dist/components/collections/async-select/index.js

@@ -0,0 +1,2 @@
+import { AsyncSelect } from "./async-select.js";
+export { AsyncSelect };

package/dist/components/collections/async-select/use-async-select-load.d.ts

@@ -0,0 +1,26 @@
+import { GroupBase, OptionsOrGroups } from "react-select";
+import { AsyncProps } from "react-select/async";
+//#region src/components/collections/async-select/use-async-select-load.d.ts
+type LoadOptions<Option, Group extends GroupBase<Option>> = NonNullable<AsyncProps<Option, boolean, Group>['loadOptions']>;
+type UseAsyncSelectLoadProps<Option, Group extends GroupBase<Option>> = {
+  loadOptions?: LoadOptions<Option, Group>;
+  defaultOptions: OptionsOrGroups<Option, Group> | boolean;
+  debounceMs: number;
+  onMenuOpen?: () => void;
+};
+/**
+ * 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.
+ */
+export declare const useAsyncSelectLoad: <Option, Group extends GroupBase<Option>>(props: UseAsyncSelectLoadProps<Option, Group>) => {
+  loadOptions: ((inputValue: string, callback: (options: OptionsOrGroups<Option, Group>) => void) => void | Promise<OptionsOrGroups<Option, Group>>) | undefined;
+  defaultOptions: boolean | OptionsOrGroups<Option, Group>;
+  isLoading: boolean;
+  onMenuOpen: () => Promise<void>;
+};
+//#endregion
+//# sourceMappingURL=use-async-select-load.d.ts.map

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"}