@lucasbernardosn/react-ui 0.2.0 → 0.3.0

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

@@ -0,0 +1,23 @@
+import { ClassNamesConfig, GroupBase } from "react-select";
+//#region src/components/collections/async-select/async-select-variants.d.ts
+export type AsyncSelectVariants = {
+  /**
+   * Altura do campo, tamanho do texto e espaçamento do campo, dos chips e dos itens. `sm` = `h-9`,
+   * `md` = `h-10`, alinhado aos outros controles de formulário. Dentro de um `Field.Root`, use o
+   * mesmo `size` nos dois.
+   *
+   * @default 'sm'
+   */
+  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+};
+export declare const asyncSelectDefaultVariants: Required<AsyncSelectVariants>;
+type GetAsyncSelectClassNamesOptions = {
+  size: Required<AsyncSelectVariants>['size'];
+  invalid: boolean;
+};
+/**
+ * Classes de cada parte do react-select (`classNames`), que roda em modo `unstyled`.
+ */
+export declare const getAsyncSelectClassNames: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(options: GetAsyncSelectClassNamesOptions) => ClassNamesConfig<Option, IsMulti, Group>;
+//#endregion
+//# sourceMappingURL=async-select-variants.d.ts.map

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

@@ -0,0 +1,378 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+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:
+* - 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-*`;
+* - só a variante `outline`, sem mudança de fundo no hover nem com o menu aberto.
+*/
+const controlVariants = cva([
+	"w-full",
+	"min-w-0",
+	"border",
+	"rounded-md",
+	"corner-squircle",
+	"bg-white/90",
+	"dark:bg-black/90",
+	"border-gray-alpha-7",
+	"text-gray-12",
+	"font-normal",
+	"[--async-select-focus-color:var(--color-black)]",
+	"dark:[--async-select-focus-color:var(--color-white)]"
+], {
+	variants: {
+		size: {
+			"2xs": [
+				"min-h-7",
+				"text-xs",
+				"any-pointer-coarse:text-base"
+			],
+			xs: [
+				"min-h-8",
+				"text-xs",
+				"any-pointer-coarse:text-base"
+			],
+			sm: [
+				"min-h-9",
+				"text-sm",
+				"any-pointer-coarse:text-base"
+			],
+			md: [
+				"min-h-10",
+				"text-sm",
+				"any-pointer-coarse:text-base"
+			],
+			lg: ["min-h-11", "text-base"],
+			xl: ["min-h-12", "text-base"],
+			"2xl": ["min-h-16", "text-lg"]
+		},
+		invalid: {
+			true: ["border-red-9", "[--async-select-focus-color:var(--color-red-9)]"],
+			false: []
+		},
+		focused: {
+			true: [
+				"ring-1",
+				"ring-inset",
+				"ring-(--async-select-focus-color)",
+				"border-(--async-select-focus-color)"
+			],
+			false: []
+		}
+	},
+	defaultVariants: { size: asyncSelectDefaultVariants.size }
+});
+const valueContainerVariants = cva(["gap-1", "py-0.5"], {
+	variants: { size: {
+		"2xs": ["ps-2"],
+		xs: ["ps-2"],
+		sm: ["ps-2.5"],
+		md: ["ps-3"],
+		lg: ["ps-4"],
+		xl: ["ps-4.5"],
+		"2xl": ["ps-5"]
+	} },
+	defaultVariants: { size: asyncSelectDefaultVariants.size }
+});
+const indicatorsContainerVariants = cva(["ps-1", "text-gray-11"], {
+	variants: { size: {
+		"2xs": ["pe-2", "gap-2"],
+		xs: ["pe-2", "gap-2"],
+		sm: ["pe-2.5", "gap-2.5"],
+		md: ["pe-3", "gap-3"],
+		lg: ["pe-4", "gap-4"],
+		xl: ["pe-4.5", "gap-4.5"],
+		"2xl": ["pe-5", "gap-5"]
+	} },
+	defaultVariants: { size: asyncSelectDefaultVariants.size }
+});
+const multiValueVariants = cva([
+	"flex",
+	"items-center",
+	"rounded-md",
+	"corner-squircle",
+	"bg-gray-alpha-4"
+], {
+	variants: { size: {
+		"2xs": [
+			"py-0",
+			"ps-1.5",
+			"pe-1",
+			"gap-1",
+			"leading-4"
+		],
+		xs: [
+			"py-0",
+			"ps-1.5",
+			"pe-1",
+			"gap-1",
+			"leading-4"
+		],
+		sm: [
+			"py-0.5",
+			"ps-2",
+			"pe-1",
+			"gap-1.5",
+			"leading-5"
+		],
+		md: [
+			"py-0.5",
+			"ps-2",
+			"pe-1",
+			"gap-1.5",
+			"leading-5"
+		],
+		lg: [
+			"py-1",
+			"ps-2.5",
+			"pe-1",
+			"gap-2",
+			"leading-6"
+		],
+		xl: [
+			"py-1",
+			"ps-2.5",
+			"pe-1",
+			"gap-2",
+			"leading-6"
+		],
+		"2xl": [
+			"py-1",
+			"ps-2.5",
+			"pe-1",
+			"gap-2",
+			"leading-6"
+		]
+	} },
+	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.
+*/
+const menuClassNames = [
+	"my-2.5",
+	"py-1",
+	"overflow-hidden",
+	"rounded-md",
+	"corner-squircle",
+	"outline-1",
+	"outline-gray-6",
+	"bg-white",
+	"dark:bg-gray-2",
+	"shadow-md",
+	"shadow-black/12",
+	"dark:shadow-none",
+	"text-gray-12"
+];
+/**
+* Cópia de `selectItemVariants`, a origem do item das listas em popup: o realce é um `::before`
+* recuado das laterais. As diferenças:
+* - o estado vem do react-select (`isFocused`, `isDisabled`), e não de `data-*`;
+* - o realce vale também no toque: o react-select só marca o item focado por hover ou teclado.
+*/
+const optionVariants = cva([
+	"grid",
+	"items-start",
+	"relative",
+	"rounded",
+	"cursor-default",
+	"select-none"
+], {
+	variants: {
+		size: {
+			"2xs": [
+				"grid-cols-[0.75rem_1fr]",
+				"px-2",
+				"gap-1",
+				"py-1",
+				"pointer-coarse:py-2.5",
+				"text-xs"
+			],
+			xs: [
+				"grid-cols-[0.75rem_1fr]",
+				"px-2",
+				"gap-1",
+				"py-1.25",
+				"pointer-coarse:py-2.5",
+				"text-xs"
+			],
+			sm: [
+				"grid-cols-[0.875rem_1fr]",
+				"px-2.5",
+				"gap-2",
+				"py-1.25",
+				"pointer-coarse:py-2.5",
+				"text-sm"
+			],
+			md: [
+				"grid-cols-[0.875rem_1fr]",
+				"px-3",
+				"gap-2",
+				"py-1.75",
+				"pointer-coarse:py-3",
+				"text-sm"
+			],
+			lg: [
+				"grid-cols-[1rem_1fr]",
+				"px-4",
+				"gap-3",
+				"py-1.75",
+				"pointer-coarse:py-3",
+				"text-base"
+			],
+			xl: [
+				"grid-cols-[1rem_1fr]",
+				"px-4.5",
+				"gap-3",
+				"py-2.25",
+				"pointer-coarse:py-4",
+				"text-base"
+			],
+			"2xl": [
+				"grid-cols-[1.125rem_1fr]",
+				"px-5",
+				"gap-3",
+				"py-3",
+				"pointer-coarse:py-5",
+				"text-lg"
+			]
+		},
+		focused: {
+			true: [
+				"z-0",
+				"before:absolute",
+				"before:inset-x-1",
+				"before:inset-y-0",
+				"before:z-[-1]",
+				"before:rounded",
+				"before:content-[\"\"]",
+				"before:bg-gray-4"
+			],
+			false: []
+		},
+		disabled: {
+			true: ["pointer-events-none", "opacity-50"],
+			false: []
+		}
+	},
+	defaultVariants: { size: asyncSelectDefaultVariants.size }
+});
+/**
+* Cópia de `selectGroupLabelVariants`, a origem do rótulo de grupo das listas em popup. O recuo
+* inicial de cada `size` é o recuo do texto do item (padding + coluna do check + gap): mudar o
+* espaçamento de `optionVariants` pede recalcular estes valores.
+*/
+const groupHeadingVariants = cva([
+	"sticky",
+	"top-0",
+	"z-1",
+	"bg-white",
+	"dark:bg-gray-2",
+	"pt-2",
+	"pb-1",
+	"text-gray-11",
+	"font-bold",
+	"uppercase",
+	"tracking-wider"
+], {
+	variants: { size: {
+		"2xs": [
+			"ps-6",
+			"pe-2",
+			"text-[0.6875rem]"
+		],
+		xs: [
+			"ps-6",
+			"pe-2",
+			"text-[0.6875rem]"
+		],
+		sm: [
+			"ps-8",
+			"pe-2.5",
+			"text-[0.6875rem]"
+		],
+		md: [
+			"ps-8.5",
+			"pe-3",
+			"text-[0.6875rem]"
+		],
+		lg: [
+			"ps-11",
+			"pe-4",
+			"text-[0.8125rem]"
+		],
+		xl: [
+			"ps-11.5",
+			"pe-4.5",
+			"text-[0.8125rem]"
+		],
+		"2xl": [
+			"ps-12.5",
+			"pe-5",
+			"text-sm"
+		]
+	} },
+	defaultVariants: { size: asyncSelectDefaultVariants.size }
+});
+const messageVariants = cva([
+	"py-2",
+	"text-start",
+	"text-gray-11"
+], {
+	variants: { size: {
+		"2xs": ["px-2", "text-xs"],
+		xs: ["px-2", "text-xs"],
+		sm: ["px-2.5", "text-sm"],
+		md: ["px-3", "text-sm"],
+		lg: ["px-4", "text-base"],
+		xl: ["px-4.5", "text-base"],
+		"2xl": ["px-5", "text-lg"]
+	} },
+	defaultVariants: { size: asyncSelectDefaultVariants.size }
+});
+/**
+* Classes de cada parte do react-select (`classNames`), que roda em modo `unstyled`.
+*/
+const getAsyncSelectClassNames = (options) => {
+	const { size, invalid } = options;
+	return {
+		container: ({ isDisabled }) => mergeTwClassNames([], isDisabled && "opacity-50"),
+		control: ({ isFocused }) => mergeTwClassNames(controlVariants({
+			size,
+			invalid,
+			focused: isFocused
+		})),
+		valueContainer: () => mergeTwClassNames(valueContainerVariants({ size })),
+		placeholder: () => mergeTwClassNames(["py-0.5", "text-gray-11/80"]),
+		input: () => mergeTwClassNames(["py-0.5"]),
+		singleValue: () => mergeTwClassNames(["text-gray-12"]),
+		multiValue: () => mergeTwClassNames(multiValueVariants({ size })),
+		multiValueLabel: () => mergeTwClassNames(["text-gray-12"]),
+		multiValueRemove: () => mergeTwClassNames([
+			"rounded",
+			"text-gray-11",
+			"hover:text-red-11"
+		]),
+		indicatorsContainer: () => mergeTwClassNames(indicatorsContainerVariants({ size })),
+		clearIndicator: () => mergeTwClassNames(["hover:text-red-11"]),
+		menu: () => mergeTwClassNames(menuClassNames),
+		groupHeading: () => mergeTwClassNames(groupHeadingVariants({ size })),
+		option: ({ isFocused, isDisabled }) => mergeTwClassNames(optionVariants({
+			size,
+			focused: isFocused,
+			disabled: isDisabled
+		})),
+		noOptionsMessage: () => mergeTwClassNames(messageVariants({ size })),
+		loadingMessage: () => mergeTwClassNames(messageVariants({ size }))
+	};
+};
+//#endregion
+export { asyncSelectDefaultVariants, getAsyncSelectClassNames };
+
+//# sourceMappingURL=async-select-variants.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,62 @@
+import { AsyncSelectVariants } from "./async-select-variants.js";
+import { Ref } from "react";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
+import { ActionMeta, GroupBase, OnChangeValue, SelectInstance } from "react-select";
+import { AsyncProps } from "react-select/async";
+//#region src/components/collections/async-select/async-select.d.ts
+export type AsyncSelectChangeValue<Option, IsMulti extends boolean = false> = OnChangeValue<Option, IsMulti>;
+export type AsyncSelectActionMeta<Option> = ActionMeta<Option>;
+export type AsyncSelectInstance<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = SelectInstance<Option, IsMulti, Group>;
+export type AsyncSelectProps<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = MergeOverride<AsyncProps<Option, IsMulti, Group>, AsyncSelectVariants & {
+  ref?: Ref<AsyncSelectInstance<Option, IsMulti, Group>>;
+  /**
+   * Marca o campo como inválido: borda e anel de foco vermelhos e `aria-invalid` no input. O
+   * react-select não lê o contexto do `Field`, então o estado vem por esta prop.
+   *
+   * @default false
+   */
+  invalid?: boolean;
+  /**
+   * Espera, em milissegundos, depois da última tecla antes de chamar `loadOptions`.
+   *
+   * @default 300
+   */
+  debounceMs?: number;
+  /**
+   * Com `true`, `loadOptions('')` busca a lista inicial a cada abertura do menu. Com uma lista,
+   * ela é mostrada antes de a pessoa digitar; com `false`, o menu só busca depois da digitação.
+   *
+   * @default true
+   */
+  defaultOptions?: AsyncProps<Option, IsMulti, Group>['defaultOptions'];
+}>;
+/**
+ * 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)}
+ * />
+ * ```
+ */
+export declare const AsyncSelect: {
+  <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: AsyncSelectProps<Option, IsMulti, Group>): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=async-select.d.ts.map

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