@lucasbernardosn/react-ui 0.4.0 → 0.5.0

package/dist/components/buttons/toggle/toggle-variants.js

@@ -0,0 +1,97 @@
+import { cva } from "class-variance-authority";
+//#region src/components/buttons/toggle/toggle-variants.ts
+const toggleDefaultVariants = {
+	colorScheme: "gray",
+	size: "sm",
+	variant: "ghost"
+};
+/**
+* No `ghost` e no `outline`, o Toggle troca a `variant` do `Button` para `solid` ao ligar (feito
+* no componente), então o hover, o disabled e a cor do texto do ligado vêm do próprio `Button`. A
+* `plain` mantém a `variant` nos dois estados: desligada, usa `text-gray-11`; ligada, pinta o
+* texto com a variável `--button-solid-bg`, que o `colorScheme` do `Button` declara no mesmo
+* elemento. Essas classes chegam ao `Button` como `className` e são mescladas por último, por isso
+* vencem o `text-*` do `colorScheme`.
+*
+* O `iconOnly` (só `icon`, sem texto) copia do `IconButton` o `p-0` e o ajuste do ícone no toque
+* por `size`; a origem é o `icon-button-variants.ts`.
+*/
+const toggleVariants = cva([], {
+	variants: {
+		variant: {
+			ghost: [],
+			outline: [],
+			plain: [
+				"text-gray-11",
+				"hover:text-gray-12",
+				"data-pressed:text-(--button-solid-bg)",
+				"data-pressed:hover:text-(--button-solid-bg)"
+			]
+		},
+		iconOnly: {
+			true: ["p-0"],
+			false: []
+		},
+		size: {
+			"3xs": [],
+			"2xs": [],
+			xs: [],
+			sm: [],
+			md: [],
+			lg: [],
+			xl: [],
+			"2xl": []
+		}
+	},
+	compoundVariants: [
+		{
+			iconOnly: true,
+			size: "3xs",
+			className: ["pointer-coarse:[&_svg]:size-3"]
+		},
+		{
+			iconOnly: true,
+			size: "2xs",
+			className: ["pointer-coarse:[&_svg]:size-4"]
+		},
+		{
+			iconOnly: true,
+			size: "xs",
+			className: ["pointer-coarse:[&_svg]:size-4.5"]
+		},
+		{
+			iconOnly: true,
+			size: "sm",
+			className: ["pointer-coarse:[&_svg]:size-4.5"]
+		},
+		{
+			iconOnly: true,
+			size: "md",
+			className: ["pointer-coarse:[&_svg]:size-5.5"]
+		},
+		{
+			iconOnly: true,
+			size: "lg",
+			className: ["pointer-coarse:[&_svg]:size-5.5"]
+		},
+		{
+			iconOnly: true,
+			size: "xl",
+			className: ["pointer-coarse:[&_svg]:size-5.5"]
+		},
+		{
+			iconOnly: true,
+			size: "2xl",
+			className: ["pointer-coarse:[&_svg]:size-6.5"]
+		}
+	],
+	defaultVariants: {
+		variant: toggleDefaultVariants.variant,
+		size: toggleDefaultVariants.size,
+		iconOnly: false
+	}
+});
+//#endregion
+export { toggleDefaultVariants, toggleVariants };
+
+//# sourceMappingURL=toggle-variants.js.map

package/dist/components/buttons/toggle/toggle-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-variants.js","names":[],"sources":["../../../../src/components/buttons/toggle/toggle-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ButtonVariants } from '#components/buttons/button';\n\nexport type ToggleVariants = {\n  /**\n   * Cor do botão, a mesma do `Button`.\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ButtonVariants['colorScheme'];\n  /**\n   * Altura, padding, tamanho do texto e do ícone, a mesma escala do `Button`. Só com `icon`, o\n   * botão fica quadrado e, no toque, o ícone cresce um pouco para compensar a falta do texto.\n   *\n   * @default 'sm'\n   */\n  size?: ButtonVariants['size'];\n  /**\n   * Desenho do botão.\n   * - `ghost`: sem fundo e sem borda; ligado, vira o `solid` do `Button`.\n   * - `outline`: com borda; ligado, vira o `solid` do `Button`.\n   * - `plain`: sem fundo nos dois estados; ligado, só o texto e o ícone ganham a cor de passo 9\n   *   do `colorScheme`. Pensado para o botão só com ícone (favorito, estrela).\n   *\n   * @default 'ghost'\n   */\n  variant?: 'ghost' | 'outline' | 'plain';\n};\n\nexport const toggleDefaultVariants: Required<ToggleVariants> = {\n  colorScheme: 'gray',\n  size: 'sm',\n  variant: 'ghost',\n};\n\n/**\n * No `ghost` e no `outline`, o Toggle troca a `variant` do `Button` para `solid` ao ligar (feito\n * no componente), então o hover, o disabled e a cor do texto do ligado vêm do próprio `Button`. A\n * `plain` mantém a `variant` nos dois estados: desligada, usa `text-gray-11`; ligada, pinta o\n * texto com a variável `--button-solid-bg`, que o `colorScheme` do `Button` declara no mesmo\n * elemento. Essas classes chegam ao `Button` como `className` e são mescladas por último, por isso\n * vencem o `text-*` do `colorScheme`.\n *\n * O `iconOnly` (só `icon`, sem texto) copia do `IconButton` o `p-0` e o ajuste do ícone no toque\n * por `size`; a origem é o `icon-button-variants.ts`.\n */\nexport const toggleVariants = cva([], {\n  variants: {\n    variant: {\n      ghost: [],\n      outline: [],\n      plain: [\n        'text-gray-11',\n        'hover:text-gray-12',\n        'data-pressed:text-(--button-solid-bg)',\n        'data-pressed:hover:text-(--button-solid-bg)',\n      ],\n    },\n    iconOnly: {\n      true: ['p-0'],\n      false: [],\n    },\n    size: {\n      '3xs': [],\n      '2xs': [],\n      xs: [],\n      sm: [],\n      md: [],\n      lg: [],\n      xl: [],\n      '2xl': [],\n    },\n  },\n  compoundVariants: [\n    {\n      iconOnly: true,\n      size: '3xs',\n      className: ['pointer-coarse:[&_svg]:size-3'],\n    },\n    {\n      iconOnly: true,\n      size: '2xs',\n      className: ['pointer-coarse:[&_svg]:size-4'],\n    },\n    {\n      iconOnly: true,\n      size: 'xs',\n      className: ['pointer-coarse:[&_svg]:size-4.5'],\n    },\n    {\n      iconOnly: true,\n      size: 'sm',\n      className: ['pointer-coarse:[&_svg]:size-4.5'],\n    },\n    {\n      iconOnly: true,\n      size: 'md',\n      className: ['pointer-coarse:[&_svg]:size-5.5'],\n    },\n    {\n      iconOnly: true,\n      size: 'lg',\n      className: ['pointer-coarse:[&_svg]:size-5.5'],\n    },\n    {\n      iconOnly: true,\n      size: 'xl',\n      className: ['pointer-coarse:[&_svg]:size-5.5'],\n    },\n    {\n      iconOnly: true,\n      size: '2xl',\n      className: ['pointer-coarse:[&_svg]:size-6.5'],\n    },\n  ],\n  defaultVariants: {\n    variant: toggleDefaultVariants.variant,\n    size: toggleDefaultVariants.size,\n    iconOnly: false,\n  },\n});\n"],"mappings":";;AA6BA,MAAa,wBAAkD;CAC7D,aAAa;CACb,MAAM;CACN,SAAS;AACX;;;;;;;;;;;;AAaA,MAAa,iBAAiB,IAAI,CAAC,GAAG;CACpC,UAAU;EACR,SAAS;GACP,OAAO,CAAC;GACR,SAAS,CAAC;GACV,OAAO;IACL;IACA;IACA;IACA;GACF;EACF;EACA,UAAU;GACR,MAAM,CAAC,KAAK;GACZ,OAAO,CAAC;EACV;EACA,MAAM;GACJ,OAAO,CAAC;GACR,OAAO,CAAC;GACR,IAAI,CAAC;GACL,IAAI,CAAC;GACL,IAAI,CAAC;GACL,IAAI,CAAC;GACL,IAAI,CAAC;GACL,OAAO,CAAC;EACV;CACF;CACA,kBAAkB;EAChB;GACE,UAAU;GACV,MAAM;GACN,WAAW,CAAC,+BAA+B;EAC7C;EACA;GACE,UAAU;GACV,MAAM;GACN,WAAW,CAAC,+BAA+B;EAC7C;EACA;GACE,UAAU;GACV,MAAM;GACN,WAAW,CAAC,iCAAiC;EAC/C;EACA;GACE,UAAU;GACV,MAAM;GACN,WAAW,CAAC,iCAAiC;EAC/C;EACA;GACE,UAAU;GACV,MAAM;GACN,WAAW,CAAC,iCAAiC;EAC/C;EACA;GACE,UAAU;GACV,MAAM;GACN,WAAW,CAAC,iCAAiC;EAC/C;EACA;GACE,UAAU;GACV,MAAM;GACN,WAAW,CAAC,iCAAiC;EAC/C;EACA;GACE,UAAU;GACV,MAAM;GACN,WAAW,CAAC,iCAAiC;EAC/C;CACF;CACA,iBAAiB;EACf,SAAS,sBAAsB;EAC/B,MAAM,sBAAsB;EAC5B,UAAU;CACZ;AACF,CAAC"}

package/dist/components/buttons/toggle/toggle.d.ts

@@ -0,0 +1,61 @@
+import { ButtonProps } from "../button/button.js";
+import "../button/index.js";
+import { ToggleVariants } from "./toggle-variants.js";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
+import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
+//#region src/components/buttons/toggle/toggle.d.ts
+export type ToggleProps = MergeOverride<Toggle$1.Props, ToggleVariants & {
+  /**
+   * Ícone do botão, antes do texto, no tamanho definido pelo `size`. Só `icon`, sem `children`,
+   * deixa o botão quadrado.
+   */
+  icon?: ButtonProps['icon'];
+  /**
+   * Ícone do botão ligado, no lugar do `icon`. Sem ele, o ícone é o mesmo nos dois estados.
+   *
+   * @example
+   * ```tsx
+   * <Toggle icon={<HeartIcon />} pressedIcon={<HeartIcon weight="fill" />} />
+   * ```
+   */
+  pressedIcon?: ButtonProps['icon'];
+}>;
+export type ToggleState = Toggle$1.State;
+export type ToggleChangeEventDetails = Toggle$1.ChangeEventDetails;
+export type ToggleChangeEventReason = Toggle$1.ChangeEventReason;
+/**
+ * Botão de dois estados (ligado e desligado), com `aria-pressed`. Renderiza o `Button` da lib, com
+ * a mesma `colorScheme` e `size`.
+ *
+ * Na `variant` `ghost` ou `outline`, o desligado é o `Button` com o mesmo nome e o ligado é o
+ * `solid`. Na `plain`, o botão não tem fundo: o ligado só pinta o texto e o ícone com a cor de
+ * passo 9 do `colorScheme`, o que serve ao caso só com ícone (favorito, estrela). Com texto, essa
+ * cor pode ficar sem contraste em cores claras (`yellow`, `amber`).
+ *
+ * O ícone só muda ao ligar se houver `pressedIcon`: ele entra no lugar do `icon`.
+ *
+ * Só com `icon`, sem `children`, o botão não tem texto: passe um `aria-label` que diga o que ele
+ * faz ("Negrito"), porque o ícone sai do leitor de tela.
+ *
+ * @example
+ * ```tsx
+ * <Toggle
+ *   aria-label="Negrito"
+ *   icon={<TextBIcon />}
+ * />
+ *
+ * <Toggle
+ *   aria-label="Favorito"
+ *   variant="plain"
+ *   colorScheme="red"
+ *   icon={<HeartIcon />}
+ *   pressedIcon={<HeartIcon weight="fill" />}
+ * />
+ * ```
+ */
+export declare const Toggle: {
+  (props: ToggleProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=toggle.d.ts.map

package/dist/components/buttons/toggle/toggle.js

@@ -0,0 +1,69 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { Button } from "../button/button.js";
+import { toggleDefaultVariants, toggleVariants } from "./toggle-variants.js";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
+import { jsx } from "react/jsx-runtime";
+import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
+//#region src/components/buttons/toggle/toggle.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Botão de dois estados (ligado e desligado), com `aria-pressed`. Renderiza o `Button` da lib, com
+* a mesma `colorScheme` e `size`.
+*
+* Na `variant` `ghost` ou `outline`, o desligado é o `Button` com o mesmo nome e o ligado é o
+* `solid`. Na `plain`, o botão não tem fundo: o ligado só pinta o texto e o ícone com a cor de
+* passo 9 do `colorScheme`, o que serve ao caso só com ícone (favorito, estrela). Com texto, essa
+* cor pode ficar sem contraste em cores claras (`yellow`, `amber`).
+*
+* O ícone só muda ao ligar se houver `pressedIcon`: ele entra no lugar do `icon`.
+*
+* Só com `icon`, sem `children`, o botão não tem texto: passe um `aria-label` que diga o que ele
+* faz ("Negrito"), porque o ícone sai do leitor de tela.
+*
+* @example
+* ```tsx
+* <Toggle
+*   aria-label="Negrito"
+*   icon={<TextBIcon />}
+* />
+*
+* <Toggle
+*   aria-label="Favorito"
+*   variant="plain"
+*   colorScheme="red"
+*   icon={<HeartIcon />}
+*   pressedIcon={<HeartIcon weight="fill" />}
+* />
+* ```
+*/
+const Toggle = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, [
+		"colorScheme",
+		"size",
+		"variant"
+	]);
+	const { className, children, icon, pressedIcon, ...rest } = elementProps;
+	const { colorScheme = toggleDefaultVariants.colorScheme, size = toggleDefaultVariants.size, variant = toggleDefaultVariants.variant } = variantProps;
+	return /* @__PURE__ */ jsx(Toggle$1, {
+		"data-component": "Toggle",
+		className: mergeStateClassNames(toggleVariants({
+			iconOnly: icon !== void 0 && !children,
+			size,
+			variant
+		}), className),
+		render: (renderProps, state) => /* @__PURE__ */ jsx(Button, {
+			...renderProps,
+			colorScheme,
+			size,
+			variant: state.pressed && variant !== "plain" ? "solid" : variant,
+			icon: state.pressed && pressedIcon ? pressedIcon : icon,
+			children
+		}),
+		...rest
+	});
+};
+Toggle.displayName = "Toggle";
+//#endregion
+export { Toggle };
+
+//# sourceMappingURL=toggle.js.map

package/dist/components/buttons/toggle/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","names":["BaseToggle"],"sources":["../../../../src/components/buttons/toggle/toggle.tsx"],"sourcesContent":["import { Toggle as BaseToggle } from '@base-ui/react/toggle';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { Button, type ButtonProps } from '#components/buttons/button';\nimport { mergeStateClassNames } from '#utils';\nimport {\n  type ToggleVariants,\n  toggleDefaultVariants,\n  toggleVariants,\n} from './toggle-variants';\n\nexport type ToggleProps = MergeOverride<\n  BaseToggle.Props,\n  ToggleVariants & {\n    /**\n     * Ícone do botão, antes do texto, no tamanho definido pelo `size`. Só `icon`, sem `children`,\n     * deixa o botão quadrado.\n     */\n    icon?: ButtonProps['icon'];\n    /**\n     * Ícone do botão ligado, no lugar do `icon`. Sem ele, o ícone é o mesmo nos dois estados.\n     *\n     * @example\n     * ```tsx\n     * <Toggle icon={<HeartIcon />} pressedIcon={<HeartIcon weight=\"fill\" />} />\n     * ```\n     */\n    pressedIcon?: ButtonProps['icon'];\n  }\n>;\n\nexport type ToggleState = BaseToggle.State;\n\nexport type ToggleChangeEventDetails = BaseToggle.ChangeEventDetails;\n\nexport type ToggleChangeEventReason = BaseToggle.ChangeEventReason;\n\nconst splitVariantProps = createSplitProps<ToggleVariants>();\n\n/**\n * Botão de dois estados (ligado e desligado), com `aria-pressed`. Renderiza o `Button` da lib, com\n * a mesma `colorScheme` e `size`.\n *\n * Na `variant` `ghost` ou `outline`, o desligado é o `Button` com o mesmo nome e o ligado é o\n * `solid`. Na `plain`, o botão não tem fundo: o ligado só pinta o texto e o ícone com a cor de\n * passo 9 do `colorScheme`, o que serve ao caso só com ícone (favorito, estrela). Com texto, essa\n * cor pode ficar sem contraste em cores claras (`yellow`, `amber`).\n *\n * O ícone só muda ao ligar se houver `pressedIcon`: ele entra no lugar do `icon`.\n *\n * Só com `icon`, sem `children`, o botão não tem texto: passe um `aria-label` que diga o que ele\n * faz (\"Negrito\"), porque o ícone sai do leitor de tela.\n *\n * @example\n * ```tsx\n * <Toggle\n *   aria-label=\"Negrito\"\n *   icon={<TextBIcon />}\n * />\n *\n * <Toggle\n *   aria-label=\"Favorito\"\n *   variant=\"plain\"\n *   colorScheme=\"red\"\n *   icon={<HeartIcon />}\n *   pressedIcon={<HeartIcon weight=\"fill\" />}\n * />\n * ```\n */\nexport const Toggle = (props: ToggleProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n    'size',\n    'variant',\n  ]);\n\n  const { className, children, icon, pressedIcon, ...rest } = elementProps;\n\n  const {\n    colorScheme = toggleDefaultVariants.colorScheme,\n    size = toggleDefaultVariants.size,\n    variant = toggleDefaultVariants.variant,\n  } = variantProps;\n\n  const iconOnly = icon !== undefined && !children;\n\n  return (\n    <BaseToggle\n      data-component=\"Toggle\"\n      className={mergeStateClassNames(\n        toggleVariants({ iconOnly, size, variant }),\n        className,\n      )}\n      // Função, para a variant e o ícone seguirem o estado: sem estado duplicado, o `pressed` vale\n      // para o modo controlado e para o não controlado.\n      render={(renderProps, state) => (\n        <Button\n          {...renderProps}\n          colorScheme={colorScheme}\n          size={size}\n          variant={state.pressed && variant !== 'plain' ? 'solid' : variant}\n          icon={state.pressed && pressedIcon ? pressedIcon : icon}\n        >\n          {children}\n        </Button>\n      )}\n      {...rest}\n    />\n  );\n};\n\nToggle.displayName = 'Toggle';\n"],"mappings":";;;;;;;AAuCA,MAAM,oBAAoB,iBAAiC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgC3D,MAAa,UAAU,UAAuB;CAC5C,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO;EAC5D;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,WAAW,UAAU,MAAM,aAAa,GAAG,SAAS;CAE5D,MAAM,EACJ,cAAc,sBAAsB,aACpC,OAAO,sBAAsB,MAC7B,UAAU,sBAAsB,YAC9B;CAIJ,OACE,oBAACA,UAAD;EACE,kBAAe;EACf,WAAW,qBACT,eAAe;GAAE,UANN,SAAS,KAAA,KAAa,CAAC;GAMP;GAAM;EAAQ,CAAC,GAC1C,SACF;EAGA,SAAS,aAAa,UACpB,oBAAC,QAAD;GACE,GAAI;GACS;GACP;GACN,SAAS,MAAM,WAAW,YAAY,UAAU,UAAU;GAC1D,MAAM,MAAM,WAAW,cAAc,cAAc;GAElD;EACK,CAAA;EAEV,GAAI;CACL,CAAA;AAEL;AAEA,OAAO,cAAc"}

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

@@ -3,8 +3,8 @@ import { cva } from "class-variance-authority";
 //#region src/components/collections/async-select/async-select-variants.ts
 const asyncSelectDefaultVariants = { size: "sm" };
 /**
-* Cópia de `selectTriggerVariants` (a origem do visual dos campos é o `Input`, tabela no README de
-* `fields`): o anel de foco e o inválido funcionam do mesmo jeito, explicados lá. As diferenças:
+* Cópia de `selectTriggerVariants` (a origem do visual dos campos é o `inputVariants`): o anel de
+* foco e o inválido funcionam do mesmo jeito, explicados lá. As diferenças:
 * - o react-select zera o `outline` do controle com `!important`, então o anel é um `ring-inset`
 *   de 1px com a borda na mesma cor, no lugar do `outline`;
 * - foco, inválido e menu aberto vêm do estado do react-select, e não de `data-*`;
@@ -18,7 +18,7 @@ const controlVariants = cva([
 	"corner-squircle",
 	"bg-white/90",
 	"dark:bg-black/90",
-	"border-gray-alpha-7",
+	"border-gray-7",
 	"text-gray-12",
 	"font-normal",
 	"[--async-select-focus-color:var(--color-black)]",
@@ -51,7 +51,7 @@ const controlVariants = cva([
 			"2xl": ["min-h-16", "text-lg"]
 		},
 		invalid: {
-			true: ["border-red-9", "[--async-select-focus-color:var(--color-red-9)]"],
+			true: ["border-red-9", "[--async-select-focus-color:var(--red-9)]"],
 			false: []
 		},
 		focused: {
@@ -95,7 +95,7 @@ const multiValueVariants = cva([
 	"items-center",
 	"rounded-md",
 	"corner-squircle",
-	"bg-gray-alpha-4"
+	"bg-gray-a4"
 ], {
 	variants: { size: {
 		"2xs": [
@@ -151,9 +151,8 @@ const multiValueVariants = cva([
 	defaultVariants: { size: asyncSelectDefaultVariants.size }
 });
 /**
-* Cópia de `popoverPopupVariants`, a origem da superfície dos popups (tabela no README de
-* `overlays`), sem animação: o react-select monta e desmonta o menu sem estados de entrada e
-* saída. O menu vai para o `body` pelo portal, então a cor do texto é declarada aqui.
+* Cópia de `popoverPopupVariants`, a origem da superfície dos popups, sem animação: o react-select
+* monta e desmonta o menu sem estados de entrada e saída. O menu vai para o `body` pelo portal, então a cor do texto é declarada aqui.
 */
 const menuClassNames = [
 	"my-2.5",

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

@@ -1 +1 @@
-{"version":3,"file":"async-select-variants.js","names":[],"sources":["../../../../src/components/collections/async-select/async-select-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ClassNamesConfig, GroupBase } from 'react-select';\nimport { mergeTwClassNames } from '#utils';\n\nexport type AsyncSelectVariants = {\n  /**\n   * Altura do campo, tamanho do texto e espaçamento do campo, dos chips e dos itens. `sm` = `h-9`,\n   * `md` = `h-10`, alinhado aos outros controles de formulário. Dentro de um `Field.Root`, use o\n   * mesmo `size` nos dois.\n   *\n   * @default 'sm'\n   */\n  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n};\n\nexport const asyncSelectDefaultVariants: Required<AsyncSelectVariants> = {\n  size: 'sm',\n};\n\n/**\n * Cópia de `selectTriggerVariants` (a origem do visual dos campos é o `Input`, tabela no README de\n * `fields`): o anel de foco e o inválido funcionam do mesmo jeito, explicados lá. As diferenças:\n * - o react-select zera o `outline` do controle com `!important`, então o anel é um `ring-inset`\n *   de 1px com a borda na mesma cor, no lugar do `outline`;\n * - foco, inválido e menu aberto vêm do estado do react-select, e não de `data-*`;\n * - só a variante `outline`, sem mudança de fundo no hover nem com o menu aberto.\n */\nconst controlVariants = cva(\n  [\n    'w-full',\n    'min-w-0',\n\n    'border',\n    'rounded-md',\n    'corner-squircle',\n\n    'bg-white/90',\n    'dark:bg-black/90',\n    'border-gray-alpha-7',\n    'text-gray-12',\n    'font-normal',\n\n    '[--async-select-focus-color:var(--color-black)]',\n    'dark:[--async-select-focus-color:var(--color-white)]',\n  ],\n  {\n    variants: {\n      size: {\n        '2xs': ['min-h-7', 'text-xs', 'any-pointer-coarse:text-base'],\n        xs: ['min-h-8', 'text-xs', 'any-pointer-coarse:text-base'],\n        sm: ['min-h-9', 'text-sm', 'any-pointer-coarse:text-base'],\n        md: ['min-h-10', 'text-sm', 'any-pointer-coarse:text-base'],\n        lg: ['min-h-11', 'text-base'],\n        xl: ['min-h-12', 'text-base'],\n        '2xl': ['min-h-16', 'text-lg'],\n      },\n      invalid: {\n        true: [\n          'border-red-9',\n          '[--async-select-focus-color:var(--color-red-9)]',\n        ],\n        false: [],\n      },\n      focused: {\n        true: [\n          'ring-1',\n          'ring-inset',\n          'ring-(--async-select-focus-color)',\n          'border-(--async-select-focus-color)',\n        ],\n        false: [],\n      },\n    },\n    defaultVariants: {\n      size: asyncSelectDefaultVariants.size,\n    },\n  },\n);\n\nconst valueContainerVariants = cva(['gap-1', 'py-0.5'], {\n  variants: {\n    size: {\n      '2xs': ['ps-2'],\n      xs: ['ps-2'],\n      sm: ['ps-2.5'],\n      md: ['ps-3'],\n      lg: ['ps-4'],\n      xl: ['ps-4.5'],\n      '2xl': ['ps-5'],\n    },\n  },\n  defaultVariants: {\n    size: asyncSelectDefaultVariants.size,\n  },\n});\n\nconst indicatorsContainerVariants = cva(['ps-1', 'text-gray-11'], {\n  variants: {\n    size: {\n      '2xs': ['pe-2', 'gap-2'],\n      xs: ['pe-2', 'gap-2'],\n      sm: ['pe-2.5', 'gap-2.5'],\n      md: ['pe-3', 'gap-3'],\n      lg: ['pe-4', 'gap-4'],\n      xl: ['pe-4.5', 'gap-4.5'],\n      '2xl': ['pe-5', 'gap-5'],\n    },\n  },\n  defaultVariants: {\n    size: asyncSelectDefaultVariants.size,\n  },\n});\n\nconst multiValueVariants = cva(\n  ['flex', 'items-center', 'rounded-md', 'corner-squircle', 'bg-gray-alpha-4'],\n  {\n    variants: {\n      size: {\n        '2xs': ['py-0', 'ps-1.5', 'pe-1', 'gap-1', 'leading-4'],\n        xs: ['py-0', 'ps-1.5', 'pe-1', 'gap-1', 'leading-4'],\n        sm: ['py-0.5', 'ps-2', 'pe-1', 'gap-1.5', 'leading-5'],\n        md: ['py-0.5', 'ps-2', 'pe-1', 'gap-1.5', 'leading-5'],\n        lg: ['py-1', 'ps-2.5', 'pe-1', 'gap-2', 'leading-6'],\n        xl: ['py-1', 'ps-2.5', 'pe-1', 'gap-2', 'leading-6'],\n        '2xl': ['py-1', 'ps-2.5', 'pe-1', 'gap-2', 'leading-6'],\n      },\n    },\n    defaultVariants: {\n      size: asyncSelectDefaultVariants.size,\n    },\n  },\n);\n\n/**\n * Cópia de `popoverPopupVariants`, a origem da superfície dos popups (tabela no README de\n * `overlays`), sem animação: o react-select monta e desmonta o menu sem estados de entrada e\n * saída. O menu vai para o `body` pelo portal, então a cor do texto é declarada aqui.\n */\nconst menuClassNames = [\n  'my-2.5',\n  // O respiro vertical fica no menu, e não na lista: o padding da lista rola junto e o conteúdo\n  // seria cortado rente à borda. O horizontal já vem do realce do item (`before:inset-x-1`).\n  'py-1',\n\n  'overflow-hidden',\n\n  'rounded-md',\n  'corner-squircle',\n  'outline-1',\n  'outline-gray-6',\n\n  'bg-white',\n  'dark:bg-gray-2',\n\n  'shadow-md',\n  'shadow-black/12',\n  'dark:shadow-none',\n\n  'text-gray-12',\n];\n\n/**\n * Cópia de `selectItemVariants`, a origem do item das listas em popup: o realce é um `::before`\n * recuado das laterais. As diferenças:\n * - o estado vem do react-select (`isFocused`, `isDisabled`), e não de `data-*`;\n * - o realce vale também no toque: o react-select só marca o item focado por hover ou teclado.\n */\nconst optionVariants = cva(\n  [\n    'grid',\n    'items-start', // Texto que quebra a linha mantém o check na primeira\n\n    'relative',\n\n    'rounded',\n\n    'cursor-default',\n    'select-none',\n  ],\n  {\n    variants: {\n      size: {\n        '2xs': [\n          'grid-cols-[0.75rem_1fr]',\n\n          'px-2',\n          'gap-1',\n          'py-1',\n          'pointer-coarse:py-2.5',\n\n          'text-xs',\n        ],\n        xs: [\n          'grid-cols-[0.75rem_1fr]',\n\n          'px-2',\n          'gap-1',\n          'py-1.25',\n          'pointer-coarse:py-2.5',\n\n          'text-xs',\n        ],\n        sm: [\n          'grid-cols-[0.875rem_1fr]',\n\n          'px-2.5',\n          'gap-2',\n          'py-1.25',\n          'pointer-coarse:py-2.5',\n\n          'text-sm',\n        ],\n        md: [\n          'grid-cols-[0.875rem_1fr]',\n\n          'px-3',\n          'gap-2',\n          'py-1.75',\n          'pointer-coarse:py-3',\n\n          'text-sm',\n        ],\n        lg: [\n          'grid-cols-[1rem_1fr]',\n\n          'px-4',\n          'gap-3',\n          'py-1.75',\n          'pointer-coarse:py-3',\n\n          'text-base',\n        ],\n        xl: [\n          'grid-cols-[1rem_1fr]',\n\n          'px-4.5',\n          'gap-3',\n          'py-2.25',\n          'pointer-coarse:py-4',\n\n          'text-base',\n        ],\n        '2xl': [\n          'grid-cols-[1.125rem_1fr]',\n\n          'px-5',\n          'gap-3',\n          'py-3',\n          'pointer-coarse:py-5',\n\n          'text-lg',\n        ],\n      },\n      focused: {\n        true: [\n          'z-0',\n          'before:absolute',\n          'before:inset-x-1',\n          'before:inset-y-0',\n          'before:z-[-1]',\n          'before:rounded',\n          'before:content-[\"\"]',\n          'before:bg-gray-4',\n        ],\n        false: [],\n      },\n      disabled: {\n        true: ['pointer-events-none', 'opacity-50'],\n        false: [],\n      },\n    },\n    defaultVariants: {\n      size: asyncSelectDefaultVariants.size,\n    },\n  },\n);\n\n/**\n * Cópia de `selectGroupLabelVariants`, a origem do rótulo de grupo das listas em popup. O recuo\n * inicial de cada `size` é o recuo do texto do item (padding + coluna do check + gap): mudar o\n * espaçamento de `optionVariants` pede recalcular estes valores.\n */\nconst groupHeadingVariants = cva(\n  [\n    'sticky',\n    'top-0',\n    'z-1',\n    // Mesmo fundo do menu: fixo no topo, o rótulo cobre os itens que rolam por baixo.\n    'bg-white',\n    'dark:bg-gray-2',\n    'pt-2',\n    'pb-1',\n    'text-gray-11',\n    'font-bold',\n    'uppercase',\n    'tracking-wider',\n  ],\n  {\n    variants: {\n      size: {\n        '2xs': ['ps-6', 'pe-2', 'text-[0.6875rem]'],\n        xs: ['ps-6', 'pe-2', 'text-[0.6875rem]'],\n        sm: ['ps-8', 'pe-2.5', 'text-[0.6875rem]'],\n        md: ['ps-8.5', 'pe-3', 'text-[0.6875rem]'],\n        lg: ['ps-11', 'pe-4', 'text-[0.8125rem]'],\n        xl: ['ps-11.5', 'pe-4.5', 'text-[0.8125rem]'],\n        '2xl': ['ps-12.5', 'pe-5', 'text-sm'],\n      },\n    },\n    defaultVariants: {\n      size: asyncSelectDefaultVariants.size,\n    },\n  },\n);\n\nconst messageVariants = cva(['py-2', 'text-start', 'text-gray-11'], {\n  variants: {\n    size: {\n      '2xs': ['px-2', 'text-xs'],\n      xs: ['px-2', 'text-xs'],\n      sm: ['px-2.5', 'text-sm'],\n      md: ['px-3', 'text-sm'],\n      lg: ['px-4', 'text-base'],\n      xl: ['px-4.5', 'text-base'],\n      '2xl': ['px-5', 'text-lg'],\n    },\n  },\n  defaultVariants: {\n    size: asyncSelectDefaultVariants.size,\n  },\n});\n\ntype GetAsyncSelectClassNamesOptions = {\n  size: Required<AsyncSelectVariants>['size'];\n  invalid: boolean;\n};\n\n/**\n * Classes de cada parte do react-select (`classNames`), que roda em modo `unstyled`.\n */\nexport const getAsyncSelectClassNames = <\n  Option,\n  IsMulti extends boolean,\n  Group extends GroupBase<Option>,\n>(\n  options: GetAsyncSelectClassNamesOptions,\n): ClassNamesConfig<Option, IsMulti, Group> => {\n  const { size, invalid } = options;\n\n  return {\n    container: ({ isDisabled }) =>\n      mergeTwClassNames([], isDisabled && 'opacity-50'),\n    control: ({ isFocused }) =>\n      mergeTwClassNames(\n        controlVariants({\n          size,\n          invalid,\n          focused: isFocused,\n        }),\n      ),\n    valueContainer: () => mergeTwClassNames(valueContainerVariants({ size })),\n    placeholder: () => mergeTwClassNames(['py-0.5', 'text-gray-11/80']),\n    input: () => mergeTwClassNames(['py-0.5']),\n    singleValue: () => mergeTwClassNames(['text-gray-12']),\n    multiValue: () => mergeTwClassNames(multiValueVariants({ size })),\n    multiValueLabel: () => mergeTwClassNames(['text-gray-12']),\n    multiValueRemove: () =>\n      mergeTwClassNames(['rounded', 'text-gray-11', 'hover:text-red-11']),\n    indicatorsContainer: () =>\n      mergeTwClassNames(indicatorsContainerVariants({ size })),\n    clearIndicator: () => mergeTwClassNames(['hover:text-red-11']),\n    menu: () => mergeTwClassNames(menuClassNames),\n    groupHeading: () => mergeTwClassNames(groupHeadingVariants({ size })),\n    option: ({ isFocused, isDisabled }) =>\n      mergeTwClassNames(\n        optionVariants({ size, focused: isFocused, disabled: isDisabled }),\n      ),\n    noOptionsMessage: () => mergeTwClassNames(messageVariants({ size })),\n    loadingMessage: () => mergeTwClassNames(messageVariants({ size })),\n  };\n};\n"],"mappings":"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"}
+{"version":3,"file":"async-select-variants.js","names":[],"sources":["../../../../src/components/collections/async-select/async-select-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ClassNamesConfig, GroupBase } from 'react-select';\nimport { mergeTwClassNames } from '#utils';\n\nexport type AsyncSelectVariants = {\n  /**\n   * Altura do campo, tamanho do texto e espaçamento do campo, dos chips e dos itens. `sm` = `h-9`,\n   * `md` = `h-10`, alinhado aos outros controles de formulário. Dentro de um `Field.Root`, use o\n   * mesmo `size` nos dois.\n   *\n   * @default 'sm'\n   */\n  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n};\n\nexport const asyncSelectDefaultVariants: Required<AsyncSelectVariants> = {\n  size: 'sm',\n};\n\n/**\n * Cópia de `selectTriggerVariants` (a origem do visual dos campos é o `inputVariants`): o anel de\n * foco e o inválido funcionam do mesmo jeito, explicados lá. As diferenças:\n * - o react-select zera o `outline` do controle com `!important`, então o anel é um `ring-inset`\n *   de 1px com a borda na mesma cor, no lugar do `outline`;\n * - foco, inválido e menu aberto vêm do estado do react-select, e não de `data-*`;\n * - só a variante `outline`, sem mudança de fundo no hover nem com o menu aberto.\n */\nconst controlVariants = cva(\n  [\n    'w-full',\n    'min-w-0',\n\n    'border',\n    'rounded-md',\n    'corner-squircle',\n\n    'bg-white/90',\n    'dark:bg-black/90',\n    'border-gray-7',\n    'text-gray-12',\n    'font-normal',\n\n    '[--async-select-focus-color:var(--color-black)]',\n    'dark:[--async-select-focus-color:var(--color-white)]',\n  ],\n  {\n    variants: {\n      size: {\n        '2xs': ['min-h-7', 'text-xs', 'any-pointer-coarse:text-base'],\n        xs: ['min-h-8', 'text-xs', 'any-pointer-coarse:text-base'],\n        sm: ['min-h-9', 'text-sm', 'any-pointer-coarse:text-base'],\n        md: ['min-h-10', 'text-sm', 'any-pointer-coarse:text-base'],\n        lg: ['min-h-11', 'text-base'],\n        xl: ['min-h-12', 'text-base'],\n        '2xl': ['min-h-16', 'text-lg'],\n      },\n      invalid: {\n        true: ['border-red-9', '[--async-select-focus-color:var(--red-9)]'],\n        false: [],\n      },\n      focused: {\n        true: [\n          'ring-1',\n          'ring-inset',\n          'ring-(--async-select-focus-color)',\n          'border-(--async-select-focus-color)',\n        ],\n        false: [],\n      },\n    },\n    defaultVariants: {\n      size: asyncSelectDefaultVariants.size,\n    },\n  },\n);\n\nconst valueContainerVariants = cva(['gap-1', 'py-0.5'], {\n  variants: {\n    size: {\n      '2xs': ['ps-2'],\n      xs: ['ps-2'],\n      sm: ['ps-2.5'],\n      md: ['ps-3'],\n      lg: ['ps-4'],\n      xl: ['ps-4.5'],\n      '2xl': ['ps-5'],\n    },\n  },\n  defaultVariants: {\n    size: asyncSelectDefaultVariants.size,\n  },\n});\n\nconst indicatorsContainerVariants = cva(['ps-1', 'text-gray-11'], {\n  variants: {\n    size: {\n      '2xs': ['pe-2', 'gap-2'],\n      xs: ['pe-2', 'gap-2'],\n      sm: ['pe-2.5', 'gap-2.5'],\n      md: ['pe-3', 'gap-3'],\n      lg: ['pe-4', 'gap-4'],\n      xl: ['pe-4.5', 'gap-4.5'],\n      '2xl': ['pe-5', 'gap-5'],\n    },\n  },\n  defaultVariants: {\n    size: asyncSelectDefaultVariants.size,\n  },\n});\n\nconst multiValueVariants = cva(\n  ['flex', 'items-center', 'rounded-md', 'corner-squircle', 'bg-gray-a4'],\n  {\n    variants: {\n      size: {\n        '2xs': ['py-0', 'ps-1.5', 'pe-1', 'gap-1', 'leading-4'],\n        xs: ['py-0', 'ps-1.5', 'pe-1', 'gap-1', 'leading-4'],\n        sm: ['py-0.5', 'ps-2', 'pe-1', 'gap-1.5', 'leading-5'],\n        md: ['py-0.5', 'ps-2', 'pe-1', 'gap-1.5', 'leading-5'],\n        lg: ['py-1', 'ps-2.5', 'pe-1', 'gap-2', 'leading-6'],\n        xl: ['py-1', 'ps-2.5', 'pe-1', 'gap-2', 'leading-6'],\n        '2xl': ['py-1', 'ps-2.5', 'pe-1', 'gap-2', 'leading-6'],\n      },\n    },\n    defaultVariants: {\n      size: asyncSelectDefaultVariants.size,\n    },\n  },\n);\n\n/**\n * Cópia de `popoverPopupVariants`, a origem da superfície dos popups, sem animação: o react-select\n * monta e desmonta o menu sem estados de entrada e saída. O menu vai para o `body` pelo portal, então a cor do texto é declarada aqui.\n */\nconst menuClassNames = [\n  'my-2.5',\n  // O respiro vertical fica no menu, e não na lista: o padding da lista rola junto e o conteúdo\n  // seria cortado rente à borda. O horizontal já vem do realce do item (`before:inset-x-1`).\n  'py-1',\n\n  'overflow-hidden',\n\n  'rounded-md',\n  'corner-squircle',\n  'outline-1',\n  'outline-gray-6',\n\n  'bg-white',\n  'dark:bg-gray-2',\n\n  'shadow-md',\n  'shadow-black/12',\n  'dark:shadow-none',\n\n  'text-gray-12',\n];\n\n/**\n * Cópia de `selectItemVariants`, a origem do item das listas em popup: o realce é um `::before`\n * recuado das laterais. As diferenças:\n * - o estado vem do react-select (`isFocused`, `isDisabled`), e não de `data-*`;\n * - o realce vale também no toque: o react-select só marca o item focado por hover ou teclado.\n */\nconst optionVariants = cva(\n  [\n    'grid',\n    'items-start', // Texto que quebra a linha mantém o check na primeira\n\n    'relative',\n\n    'rounded',\n\n    'cursor-default',\n    'select-none',\n  ],\n  {\n    variants: {\n      size: {\n        '2xs': [\n          'grid-cols-[0.75rem_1fr]',\n\n          'px-2',\n          'gap-1',\n          'py-1',\n          'pointer-coarse:py-2.5',\n\n          'text-xs',\n        ],\n        xs: [\n          'grid-cols-[0.75rem_1fr]',\n\n          'px-2',\n          'gap-1',\n          'py-1.25',\n          'pointer-coarse:py-2.5',\n\n          'text-xs',\n        ],\n        sm: [\n          'grid-cols-[0.875rem_1fr]',\n\n          'px-2.5',\n          'gap-2',\n          'py-1.25',\n          'pointer-coarse:py-2.5',\n\n          'text-sm',\n        ],\n        md: [\n          'grid-cols-[0.875rem_1fr]',\n\n          'px-3',\n          'gap-2',\n          'py-1.75',\n          'pointer-coarse:py-3',\n\n          'text-sm',\n        ],\n        lg: [\n          'grid-cols-[1rem_1fr]',\n\n          'px-4',\n          'gap-3',\n          'py-1.75',\n          'pointer-coarse:py-3',\n\n          'text-base',\n        ],\n        xl: [\n          'grid-cols-[1rem_1fr]',\n\n          'px-4.5',\n          'gap-3',\n          'py-2.25',\n          'pointer-coarse:py-4',\n\n          'text-base',\n        ],\n        '2xl': [\n          'grid-cols-[1.125rem_1fr]',\n\n          'px-5',\n          'gap-3',\n          'py-3',\n          'pointer-coarse:py-5',\n\n          'text-lg',\n        ],\n      },\n      focused: {\n        true: [\n          'z-0',\n          'before:absolute',\n          'before:inset-x-1',\n          'before:inset-y-0',\n          'before:z-[-1]',\n          'before:rounded',\n          'before:content-[\"\"]',\n          'before:bg-gray-4',\n        ],\n        false: [],\n      },\n      disabled: {\n        true: ['pointer-events-none', 'opacity-50'],\n        false: [],\n      },\n    },\n    defaultVariants: {\n      size: asyncSelectDefaultVariants.size,\n    },\n  },\n);\n\n/**\n * Cópia de `selectGroupLabelVariants`, a origem do rótulo de grupo das listas em popup. O recuo\n * inicial de cada `size` é o recuo do texto do item (padding + coluna do check + gap): mudar o\n * espaçamento de `optionVariants` pede recalcular estes valores.\n */\nconst groupHeadingVariants = cva(\n  [\n    'sticky',\n    'top-0',\n    'z-1',\n    // Mesmo fundo do menu: fixo no topo, o rótulo cobre os itens que rolam por baixo.\n    'bg-white',\n    'dark:bg-gray-2',\n    'pt-2',\n    'pb-1',\n    'text-gray-11',\n    'font-bold',\n    'uppercase',\n    'tracking-wider',\n  ],\n  {\n    variants: {\n      size: {\n        '2xs': ['ps-6', 'pe-2', 'text-[0.6875rem]'],\n        xs: ['ps-6', 'pe-2', 'text-[0.6875rem]'],\n        sm: ['ps-8', 'pe-2.5', 'text-[0.6875rem]'],\n        md: ['ps-8.5', 'pe-3', 'text-[0.6875rem]'],\n        lg: ['ps-11', 'pe-4', 'text-[0.8125rem]'],\n        xl: ['ps-11.5', 'pe-4.5', 'text-[0.8125rem]'],\n        '2xl': ['ps-12.5', 'pe-5', 'text-sm'],\n      },\n    },\n    defaultVariants: {\n      size: asyncSelectDefaultVariants.size,\n    },\n  },\n);\n\nconst messageVariants = cva(['py-2', 'text-start', 'text-gray-11'], {\n  variants: {\n    size: {\n      '2xs': ['px-2', 'text-xs'],\n      xs: ['px-2', 'text-xs'],\n      sm: ['px-2.5', 'text-sm'],\n      md: ['px-3', 'text-sm'],\n      lg: ['px-4', 'text-base'],\n      xl: ['px-4.5', 'text-base'],\n      '2xl': ['px-5', 'text-lg'],\n    },\n  },\n  defaultVariants: {\n    size: asyncSelectDefaultVariants.size,\n  },\n});\n\ntype GetAsyncSelectClassNamesOptions = {\n  size: Required<AsyncSelectVariants>['size'];\n  invalid: boolean;\n};\n\n/**\n * Classes de cada parte do react-select (`classNames`), que roda em modo `unstyled`.\n */\nexport const getAsyncSelectClassNames = <\n  Option,\n  IsMulti extends boolean,\n  Group extends GroupBase<Option>,\n>(\n  options: GetAsyncSelectClassNamesOptions,\n): ClassNamesConfig<Option, IsMulti, Group> => {\n  const { size, invalid } = options;\n\n  return {\n    container: ({ isDisabled }) =>\n      mergeTwClassNames([], isDisabled && 'opacity-50'),\n    control: ({ isFocused }) =>\n      mergeTwClassNames(\n        controlVariants({\n          size,\n          invalid,\n          focused: isFocused,\n        }),\n      ),\n    valueContainer: () => mergeTwClassNames(valueContainerVariants({ size })),\n    placeholder: () => mergeTwClassNames(['py-0.5', 'text-gray-11/80']),\n    input: () => mergeTwClassNames(['py-0.5']),\n    singleValue: () => mergeTwClassNames(['text-gray-12']),\n    multiValue: () => mergeTwClassNames(multiValueVariants({ size })),\n    multiValueLabel: () => mergeTwClassNames(['text-gray-12']),\n    multiValueRemove: () =>\n      mergeTwClassNames(['rounded', 'text-gray-11', 'hover:text-red-11']),\n    indicatorsContainer: () =>\n      mergeTwClassNames(indicatorsContainerVariants({ size })),\n    clearIndicator: () => mergeTwClassNames(['hover:text-red-11']),\n    menu: () => mergeTwClassNames(menuClassNames),\n    groupHeading: () => mergeTwClassNames(groupHeadingVariants({ size })),\n    option: ({ isFocused, isDisabled }) =>\n      mergeTwClassNames(\n        optionVariants({ size, focused: isFocused, disabled: isDisabled }),\n      ),\n    noOptionsMessage: () => mergeTwClassNames(messageVariants({ size })),\n    loadingMessage: () => mergeTwClassNames(messageVariants({ size })),\n  };\n};\n"],"mappings":"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"}

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

@@ -5,8 +5,7 @@ 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`).
+ * Cópia de `PopoverBackdrop`, a origem do backdrop dos popups, sem diferenças.
  */
 export declare const AutocompleteBackdrop: {
   (props: AutocompleteBackdropProps): import("react").JSX.Element;

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

@@ -5,8 +5,7 @@ import { Autocomplete } from "@base-ui/react/autocomplete";
 /**
 * 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`).
+* Cópia de `PopoverBackdrop`, a origem do backdrop dos popups, sem diferenças.
 */
 const AutocompleteBackdrop = (props) => {
 	const { className, ...rest } = props;

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

@@ -1 +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"}
+{"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.\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":";;;;;;;;;AAYA,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-group-label-variants.d.ts

@@ -1,9 +1,9 @@
 //#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.
+ * Cópia de `selectGroupLabelVariants`, a origem do rótulo de grupo das listas em popup. 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;

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

@@ -2,10 +2,10 @@ 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.
+* Cópia de `selectGroupLabelVariants`, a origem do rótulo de grupo das listas em popup. 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",

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

@@ -1 +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"}
+{"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. A\n * diferença é o recuo: sem a coluna do check, ele é o padding do `Autocomplete.Item` em cada\n * `size`, e o texto do rótulo alinha com o dos itens. Mudar o espaçamento do item pede mudar\n * 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-input-variants.d.ts

@@ -1,10 +1,10 @@
 //#region src/components/collections/autocomplete/autocomplete-input-variants.d.ts
 /**
- * Cópia de `inputVariants`, a origem do visual dos campos (tabela no README de `fields`): o anel de
- * foco e o inválido funcionam do mesmo jeito, explicados lá. A diferença é o padding do fim: o
- * `Autocomplete.Clear` e o `Autocomplete.Trigger` ficam sobre o campo, e o texto reserva a largura
- * de cada um que existe (`--autocomplete-clear-width` e `--autocomplete-trigger-width`, declaradas
- * por `autocompleteInputGroupVariants`), sem passar por baixo deles.
+ * Cópia de `inputVariants`, a origem do visual dos campos: o anel de foco e o inválido funcionam
+ * do mesmo jeito, explicados lá. A diferença é o padding do fim: o `Autocomplete.Clear` e o
+ * `Autocomplete.Trigger` ficam sobre o campo, e o texto reserva a largura de cada um que existe
+ * (`--autocomplete-clear-width` e `--autocomplete-trigger-width`, declaradas por
+ * `autocompleteInputGroupVariants`), sem passar por baixo deles.
  */
 export declare const autocompleteInputVariants: (props?: ({
   variant?: "subtle" | "outline" | null | undefined;

package/dist/components/collections/autocomplete/autocomplete-input-variants.js

@@ -7,11 +7,11 @@ import { cva } from "class-variance-authority";
 */
 const trailingPadding = "pe-[max(var(--autocomplete-px),calc(var(--autocomplete-clear-width)+var(--autocomplete-trigger-width)))]";
 /**
-* Cópia de `inputVariants`, a origem do visual dos campos (tabela no README de `fields`): o anel de
-* foco e o inválido funcionam do mesmo jeito, explicados lá. A diferença é o padding do fim: o
-* `Autocomplete.Clear` e o `Autocomplete.Trigger` ficam sobre o campo, e o texto reserva a largura
-* de cada um que existe (`--autocomplete-clear-width` e `--autocomplete-trigger-width`, declaradas
-* por `autocompleteInputGroupVariants`), sem passar por baixo deles.
+* Cópia de `inputVariants`, a origem do visual dos campos: o anel de foco e o inválido funcionam
+* do mesmo jeito, explicados lá. A diferença é o padding do fim: o `Autocomplete.Clear` e o
+* `Autocomplete.Trigger` ficam sobre o campo, e o texto reserva a largura de cada um que existe
+* (`--autocomplete-clear-width` e `--autocomplete-trigger-width`, declaradas por
+* `autocompleteInputGroupVariants`), sem passar por baixo deles.
 */
 const autocompleteInputVariants = cva([
 	"relative",
@@ -43,16 +43,16 @@ const autocompleteInputVariants = cva([
 	"data-disabled:opacity-50",
 	"data-disabled:cursor-not-allowed",
 	"data-invalid:border-red-9",
-	"data-invalid:[--autocomplete-focus-color:var(--color-red-9)]",
+	"data-invalid:[--autocomplete-focus-color:var(--red-9)]",
 	"aria-invalid:border-red-9",
-	"aria-invalid:[--autocomplete-focus-color:var(--color-red-9)]"
+	"aria-invalid:[--autocomplete-focus-color:var(--red-9)]"
 ], {
 	variants: {
 		variant: {
 			outline: [
 				"bg-white/90",
 				"dark:bg-black/90",
-				"border-gray-alpha-7"
+				"border-gray-7"
 			],
 			subtle: ["bg-gray-4", "border-transparent"]
 		},

package/dist/components/collections/autocomplete/autocomplete-input-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete-input-variants.js","names":[],"sources":["../../../../src/components/collections/autocomplete/autocomplete-input-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { autocompleteDefaultVariants } from './use-autocomplete-context';\n\n/**\n * O texto não passa por baixo do `Clear` nem do `Trigger`, quando existem. Entra em cada `size`,\n * depois do `px-*`: o `tailwind-merge` descarta um `pe-*` que vem antes do `px-*`.\n */\nconst trailingPadding =\n  'pe-[max(var(--autocomplete-px),calc(var(--autocomplete-clear-width)+var(--autocomplete-trigger-width)))]';\n\n/**\n * Cópia de `inputVariants`, a origem do visual dos campos (tabela no README de `fields`): o anel de\n * foco e o inválido funcionam do mesmo jeito, explicados lá. A diferença é o padding do fim: o\n * `Autocomplete.Clear` e o `Autocomplete.Trigger` ficam sobre o campo, e o texto reserva a largura\n * de cada um que existe (`--autocomplete-clear-width` e `--autocomplete-trigger-width`, declaradas\n * por `autocompleteInputGroupVariants`), sem passar por baixo deles.\n */\nexport const autocompleteInputVariants = cva(\n  [\n    'relative',\n    'w-full',\n\n    'appearance-none',\n    'outline-none',\n\n    'text-start',\n    'font-normal', // Sem isto, herda o peso do `<label>` em volta\n    'text-gray-12',\n\n    'placeholder:text-gray-11/80',\n    'data-placeholder:text-gray-11/80',\n\n    'border',\n    'rounded-md',\n    'corner-squircle',\n\n    '[--autocomplete-focus-color:var(--color-black)]',\n    'dark:[--autocomplete-focus-color:var(--color-white)]',\n\n    'focus-visible:outline-1',\n    'focus-visible:outline-solid',\n    'focus-visible:-outline-offset-2', // Offset = borda + anel: o campo não cresce no foco\n    'focus-visible:outline-(--autocomplete-focus-color)',\n    'focus-visible:border-(--autocomplete-focus-color)',\n\n    'data-focused:outline-1',\n    'data-focused:outline-solid',\n    'data-focused:-outline-offset-2',\n    'data-focused:outline-(--autocomplete-focus-color)',\n    'data-focused:border-(--autocomplete-focus-color)',\n\n    'disabled:opacity-50',\n    'disabled:cursor-not-allowed',\n\n    'data-disabled:opacity-50',\n    'data-disabled:cursor-not-allowed',\n\n    'data-invalid:border-red-9',\n    'data-invalid:[--autocomplete-focus-color:var(--color-red-9)]',\n    'aria-invalid:border-red-9',\n    'aria-invalid:[--autocomplete-focus-color:var(--color-red-9)]',\n  ],\n  {\n    variants: {\n      variant: {\n        outline: [\n          'bg-white/90',\n          'dark:bg-black/90',\n\n          'border-gray-alpha-7',\n        ],\n        subtle: [\n          'bg-gray-4',\n\n          'border-transparent',\n        ],\n      },\n      size: {\n        '2xs': [\n          'h-7',\n          'min-w-7',\n\n          'px-2',\n          trailingPadding,\n\n          'text-xs',\n          // Em tela de toque, 16px: abaixo disso o Safari do iPhone dá zoom ao focar o campo.\n          'any-pointer-coarse:text-base',\n        ],\n        xs: [\n          'h-8',\n          'min-w-8',\n\n          'px-2',\n          trailingPadding,\n\n          'text-xs',\n          'any-pointer-coarse:text-base',\n        ],\n        sm: [\n          'h-9',\n          'min-w-9',\n\n          'px-2.5',\n          trailingPadding,\n\n          'text-sm',\n          'any-pointer-coarse:text-base',\n        ],\n        md: [\n          'h-10',\n          'min-w-10',\n\n          'px-3',\n          trailingPadding,\n\n          'text-sm',\n          'any-pointer-coarse:text-base',\n        ],\n        lg: [\n          'h-11',\n          'min-w-11',\n\n          'px-4',\n          trailingPadding,\n\n          'text-base',\n        ],\n        xl: [\n          'h-12',\n          'min-w-12',\n\n          'px-4.5',\n          trailingPadding,\n\n          'text-base',\n        ],\n        '2xl': [\n          'h-16',\n          'min-w-16',\n\n          'px-5',\n          trailingPadding,\n\n          'text-lg',\n        ],\n      },\n    },\n    defaultVariants: {\n      size: autocompleteDefaultVariants.size,\n      variant: autocompleteDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;;;;;;AAOA,MAAM,kBACJ;;;;;;;;AASF,MAAa,4BAA4B,IACvC;CACE;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;IACP;IACA;IAEA;GACF;GACA,QAAQ,CACN,aAEA,oBACF;EACF;EACA,MAAM;GACJ,OAAO;IACL;IACA;IAEA;IACA;IAEA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IACA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IACA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IACA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IACA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IACA;IAEA;GACF;GACA,OAAO;IACL;IACA;IAEA;IACA;IAEA;GACF;EACF;CACF;CACA,iBAAiB;EACf,MAAM,4BAA4B;EAClC,SAAS,4BAA4B;CACvC;AACF,CACF"}
+{"version":3,"file":"autocomplete-input-variants.js","names":[],"sources":["../../../../src/components/collections/autocomplete/autocomplete-input-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { autocompleteDefaultVariants } from './use-autocomplete-context';\n\n/**\n * O texto não passa por baixo do `Clear` nem do `Trigger`, quando existem. Entra em cada `size`,\n * depois do `px-*`: o `tailwind-merge` descarta um `pe-*` que vem antes do `px-*`.\n */\nconst trailingPadding =\n  'pe-[max(var(--autocomplete-px),calc(var(--autocomplete-clear-width)+var(--autocomplete-trigger-width)))]';\n\n/**\n * Cópia de `inputVariants`, a origem do visual dos campos: o anel de foco e o inválido funcionam\n * do mesmo jeito, explicados lá. A diferença é o padding do fim: o `Autocomplete.Clear` e o\n * `Autocomplete.Trigger` ficam sobre o campo, e o texto reserva a largura de cada um que existe\n * (`--autocomplete-clear-width` e `--autocomplete-trigger-width`, declaradas por\n * `autocompleteInputGroupVariants`), sem passar por baixo deles.\n */\nexport const autocompleteInputVariants = cva(\n  [\n    'relative',\n    'w-full',\n\n    'appearance-none',\n    'outline-none',\n\n    'text-start',\n    'font-normal', // Sem isto, herda o peso do `<label>` em volta\n    'text-gray-12',\n\n    'placeholder:text-gray-11/80',\n    'data-placeholder:text-gray-11/80',\n\n    'border',\n    'rounded-md',\n    'corner-squircle',\n\n    '[--autocomplete-focus-color:var(--color-black)]',\n    'dark:[--autocomplete-focus-color:var(--color-white)]',\n\n    'focus-visible:outline-1',\n    'focus-visible:outline-solid',\n    'focus-visible:-outline-offset-2', // Offset = borda + anel: o campo não cresce no foco\n    'focus-visible:outline-(--autocomplete-focus-color)',\n    'focus-visible:border-(--autocomplete-focus-color)',\n\n    'data-focused:outline-1',\n    'data-focused:outline-solid',\n    'data-focused:-outline-offset-2',\n    'data-focused:outline-(--autocomplete-focus-color)',\n    'data-focused:border-(--autocomplete-focus-color)',\n\n    'disabled:opacity-50',\n    'disabled:cursor-not-allowed',\n\n    'data-disabled:opacity-50',\n    'data-disabled:cursor-not-allowed',\n\n    'data-invalid:border-red-9',\n    'data-invalid:[--autocomplete-focus-color:var(--red-9)]',\n    'aria-invalid:border-red-9',\n    'aria-invalid:[--autocomplete-focus-color:var(--red-9)]',\n  ],\n  {\n    variants: {\n      variant: {\n        outline: [\n          'bg-white/90',\n          'dark:bg-black/90',\n\n          'border-gray-7',\n        ],\n        subtle: [\n          'bg-gray-4',\n\n          'border-transparent',\n        ],\n      },\n      size: {\n        '2xs': [\n          'h-7',\n          'min-w-7',\n\n          'px-2',\n          trailingPadding,\n\n          'text-xs',\n          // Em tela de toque, 16px: abaixo disso o Safari do iPhone dá zoom ao focar o campo.\n          'any-pointer-coarse:text-base',\n        ],\n        xs: [\n          'h-8',\n          'min-w-8',\n\n          'px-2',\n          trailingPadding,\n\n          'text-xs',\n          'any-pointer-coarse:text-base',\n        ],\n        sm: [\n          'h-9',\n          'min-w-9',\n\n          'px-2.5',\n          trailingPadding,\n\n          'text-sm',\n          'any-pointer-coarse:text-base',\n        ],\n        md: [\n          'h-10',\n          'min-w-10',\n\n          'px-3',\n          trailingPadding,\n\n          'text-sm',\n          'any-pointer-coarse:text-base',\n        ],\n        lg: [\n          'h-11',\n          'min-w-11',\n\n          'px-4',\n          trailingPadding,\n\n          'text-base',\n        ],\n        xl: [\n          'h-12',\n          'min-w-12',\n\n          'px-4.5',\n          trailingPadding,\n\n          'text-base',\n        ],\n        '2xl': [\n          'h-16',\n          'min-w-16',\n\n          'px-5',\n          trailingPadding,\n\n          'text-lg',\n        ],\n      },\n    },\n    defaultVariants: {\n      size: autocompleteDefaultVariants.size,\n      variant: autocompleteDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;;;;;;AAOA,MAAM,kBACJ;;;;;;;;AASF,MAAa,4BAA4B,IACvC;CACE;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;IACP;IACA;IAEA;GACF;GACA,QAAQ,CACN,aAEA,oBACF;EACF;EACA,MAAM;GACJ,OAAO;IACL;IACA;IAEA;IACA;IAEA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IACA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IACA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IACA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IACA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IACA;IAEA;GACF;GACA,OAAO;IACL;IACA;IAEA;IACA;IAEA;GACF;EACF;CACF;CACA,iBAAiB;EACf,MAAM,4BAA4B;EAClC,SAAS,4BAA4B;CACvC;AACF,CACF"}

package/dist/components/collections/autocomplete/autocomplete-item-variants.d.ts

@@ -1,7 +1,7 @@
 //#region src/components/collections/autocomplete/autocomplete-item-variants.d.ts
 /**
  * Cópia de `selectItemVariants`, a origem do item das listas em popup, onde o realce está
- * explicado (tabela no README de `collections`). As diferenças:
+ * explicado. As diferenças:
  * - `flex` em linha, sem a coluna do check: o Autocomplete não marca item escolhido;
  * - o realce aparece também no toque: o clique no item fecha o popup, e não sobra realce preso.
  */

package/dist/components/collections/autocomplete/autocomplete-item-variants.js

@@ -3,7 +3,7 @@ import { cva } from "class-variance-authority";
 //#region src/components/collections/autocomplete/autocomplete-item-variants.ts
 /**
 * Cópia de `selectItemVariants`, a origem do item das listas em popup, onde o realce está
-* explicado (tabela no README de `collections`). As diferenças:
+* explicado. As diferenças:
 * - `flex` em linha, sem a coluna do check: o Autocomplete não marca item escolhido;
 * - o realce aparece também no toque: o clique no item fecha o popup, e não sobra realce preso.
 */

package/dist/components/collections/autocomplete/autocomplete-item-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete-item-variants.js","names":[],"sources":["../../../../src/components/collections/autocomplete/autocomplete-item-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { autocompleteDefaultVariants } from './use-autocomplete-context';\n\n/**\n * Cópia de `selectItemVariants`, a origem do item das listas em popup, onde o realce está\n * explicado (tabela no README de `collections`). As diferenças:\n * - `flex` em linha, sem a coluna do check: o Autocomplete não marca item escolhido;\n * - o realce aparece também no toque: o clique no item fecha o popup, e não sobra realce preso.\n */\nexport const autocompleteItemVariants = cva(\n  [\n    'flex',\n    'items-start', // Texto que quebra a linha mantém o ícone na primeira\n\n    'relative',\n\n    'rounded',\n\n    'cursor-default',\n    'select-none',\n    'outline-none',\n\n    'data-disabled:pointer-events-none',\n    'data-disabled:opacity-50',\n\n    'data-highlighted:z-0',\n    'data-highlighted:before:absolute',\n    'data-highlighted:before:inset-x-1',\n    'data-highlighted:before:inset-y-0',\n    'data-highlighted:before:z-[-1]',\n    'data-highlighted:before:rounded',\n    'data-highlighted:before:content-[\"\"]',\n    'data-highlighted:before:bg-gray-4',\n  ],\n  {\n    variants: {\n      size: {\n        '2xs': ['px-2', 'gap-1', 'py-1', 'pointer-coarse:py-2', 'text-xs'],\n        xs: ['px-2', 'gap-1', 'py-1.25', 'pointer-coarse:py-2', 'text-xs'],\n        sm: ['px-2.5', 'gap-2', 'py-1.25', 'pointer-coarse:py-2', 'text-sm'],\n        md: ['px-3', 'gap-2', 'py-1.75', 'pointer-coarse:py-3', 'text-sm'],\n        lg: ['px-4', 'gap-3', 'py-1.75', 'pointer-coarse:py-3', 'text-base'],\n        xl: ['px-4.5', 'gap-3', 'py-2.25', 'pointer-coarse:py-4', 'text-base'],\n        '2xl': ['px-5', 'gap-3', 'py-4', 'pointer-coarse:py-4', 'text-lg'],\n      },\n    },\n    defaultVariants: {\n      size: autocompleteDefaultVariants.size,\n    },\n  },\n);\n"],"mappings":";;;;;;;;;AASA,MAAa,2BAA2B,IACtC;CACE;CACA;CAEA;CAEA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,OAAO;GAAC;GAAQ;GAAS;GAAQ;GAAuB;EAAS;EACjE,IAAI;GAAC;GAAQ;GAAS;GAAW;GAAuB;EAAS;EACjE,IAAI;GAAC;GAAU;GAAS;GAAW;GAAuB;EAAS;EACnE,IAAI;GAAC;GAAQ;GAAS;GAAW;GAAuB;EAAS;EACjE,IAAI;GAAC;GAAQ;GAAS;GAAW;GAAuB;EAAW;EACnE,IAAI;GAAC;GAAU;GAAS;GAAW;GAAuB;EAAW;EACrE,OAAO;GAAC;GAAQ;GAAS;GAAQ;GAAuB;EAAS;CACnE,EACF;CACA,iBAAiB,EACf,MAAM,4BAA4B,KACpC;AACF,CACF"}
+{"version":3,"file":"autocomplete-item-variants.js","names":[],"sources":["../../../../src/components/collections/autocomplete/autocomplete-item-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { autocompleteDefaultVariants } from './use-autocomplete-context';\n\n/**\n * Cópia de `selectItemVariants`, a origem do item das listas em popup, onde o realce está\n * explicado. As diferenças:\n * - `flex` em linha, sem a coluna do check: o Autocomplete não marca item escolhido;\n * - o realce aparece também no toque: o clique no item fecha o popup, e não sobra realce preso.\n */\nexport const autocompleteItemVariants = cva(\n  [\n    'flex',\n    'items-start', // Texto que quebra a linha mantém o ícone na primeira\n\n    'relative',\n\n    'rounded',\n\n    'cursor-default',\n    'select-none',\n    'outline-none',\n\n    'data-disabled:pointer-events-none',\n    'data-disabled:opacity-50',\n\n    'data-highlighted:z-0',\n    'data-highlighted:before:absolute',\n    'data-highlighted:before:inset-x-1',\n    'data-highlighted:before:inset-y-0',\n    'data-highlighted:before:z-[-1]',\n    'data-highlighted:before:rounded',\n    'data-highlighted:before:content-[\"\"]',\n    'data-highlighted:before:bg-gray-4',\n  ],\n  {\n    variants: {\n      size: {\n        '2xs': ['px-2', 'gap-1', 'py-1', 'pointer-coarse:py-2', 'text-xs'],\n        xs: ['px-2', 'gap-1', 'py-1.25', 'pointer-coarse:py-2', 'text-xs'],\n        sm: ['px-2.5', 'gap-2', 'py-1.25', 'pointer-coarse:py-2', 'text-sm'],\n        md: ['px-3', 'gap-2', 'py-1.75', 'pointer-coarse:py-3', 'text-sm'],\n        lg: ['px-4', 'gap-3', 'py-1.75', 'pointer-coarse:py-3', 'text-base'],\n        xl: ['px-4.5', 'gap-3', 'py-2.25', 'pointer-coarse:py-4', 'text-base'],\n        '2xl': ['px-5', 'gap-3', 'py-4', 'pointer-coarse:py-4', 'text-lg'],\n      },\n    },\n    defaultVariants: {\n      size: autocompleteDefaultVariants.size,\n    },\n  },\n);\n"],"mappings":";;;;;;;;;AASA,MAAa,2BAA2B,IACtC;CACE;CACA;CAEA;CAEA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,OAAO;GAAC;GAAQ;GAAS;GAAQ;GAAuB;EAAS;EACjE,IAAI;GAAC;GAAQ;GAAS;GAAW;GAAuB;EAAS;EACjE,IAAI;GAAC;GAAU;GAAS;GAAW;GAAuB;EAAS;EACnE,IAAI;GAAC;GAAQ;GAAS;GAAW;GAAuB;EAAS;EACjE,IAAI;GAAC;GAAQ;GAAS;GAAW;GAAuB;EAAW;EACnE,IAAI;GAAC;GAAU;GAAS;GAAW;GAAuB;EAAW;EACrE,OAAO;GAAC;GAAQ;GAAS;GAAQ;GAAuB;EAAS;CACnE,EACF;CACA,iBAAiB,EACf,MAAM,4BAA4B,KACpC;AACF,CACF"}

package/dist/components/collections/autocomplete/autocomplete-popup-variants.d.ts

@@ -1,10 +1,12 @@
 //#region src/components/collections/autocomplete/autocomplete-popup-variants.d.ts
 /**
  * Cópia de `popoverPopupVariants`, a origem da superfície dos popups, onde fundo, contorno, sombra,
- * cor do texto e animação estão explicados (tabela no README de `overlays`). As diferenças:
+ * cor do texto e animação estão explicados. As diferenças:
  * - largura a partir da do campo (`--anchor-width`) e altura até `max-h-80`, sem animação de
  *   tamanho;
- * - o tamanho do texto vem dos itens, e não do popup.
+ * - o tamanho do texto vem dos itens, e não do popup;
+ * - sem modo sobreposto, o do `Select` que alinha o item ao trigger: o popup sempre abre junto ao
+ *   campo.
  *
  * A altura máxima fica no popup, e a lista (`min-h-0`) encolhe até caber, como no `Select`.
  */

package/dist/components/collections/autocomplete/autocomplete-popup-variants.js

@@ -2,10 +2,12 @@ import { cva } from "class-variance-authority";
 //#region src/components/collections/autocomplete/autocomplete-popup-variants.ts
 /**
 * Cópia de `popoverPopupVariants`, a origem da superfície dos popups, onde fundo, contorno, sombra,
-* cor do texto e animação estão explicados (tabela no README de `overlays`). As diferenças:
+* cor do texto e animação estão explicados. As diferenças:
 * - largura a partir da do campo (`--anchor-width`) e altura até `max-h-80`, sem animação de
 *   tamanho;
-* - o tamanho do texto vem dos itens, e não do popup.
+* - o tamanho do texto vem dos itens, e não do popup;
+* - sem modo sobreposto, o do `Select` que alinha o item ao trigger: o popup sempre abre junto ao
+*   campo.
 *
 * A altura máxima fica no popup, e a lista (`min-h-0`) encolhe até caber, como no `Select`.
 */