@lucasbernardosn/react-ui 0.1.0 → 0.3.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"async-select-aria-messages.js","names":[],"sources":["../../../../src/components/collections/async-select/async-select-aria-messages.ts"],"sourcesContent":["import type { AriaLiveMessages, GroupBase } from 'react-select';\n\n/**\n * Anúncios do leitor de tela em pt-BR, no lugar dos em inglês do react-select. Sem isto, o\n * campo falaria em dois idiomas com o resto da interface.\n */\nexport const getAsyncSelectAriaLiveMessages = <\n  Option,\n  IsMulti extends boolean,\n  Group extends GroupBase<Option>,\n>(): AriaLiveMessages<Option, IsMulti, Group> => ({\n  guidance: (props) => {\n    const { context, isSearchable, isMulti, tabSelectsValue, isInitialFocus } =\n      props;\n\n    switch (context) {\n      case 'menu':\n        return `Use as setas para cima e para baixo para escolher, Enter para selecionar a opção em foco, Esc para fechar o menu${tabSelectsValue ? ', Tab para selecionar a opção e fechar o menu' : ''}.`;\n      case 'input':\n        return isInitialFocus\n          ? `${props['aria-label'] || 'Seleção'} em foco${isSearchable ? ', digite para filtrar a lista' : ''}, seta para baixo abre o menu${isMulti ? ', seta para a esquerda foca os valores selecionados' : ''}.`\n          : '';\n      case 'value':\n        return 'Use as setas para a esquerda e para a direita para alternar entre os valores, Backspace remove o valor em foco.';\n      default:\n        return '';\n    }\n  },\n  onChange: (props) => {\n    const { action, label = '', labels, isDisabled } = props;\n\n    switch (action) {\n      case 'deselect-option':\n      case 'pop-value':\n      case 'remove-value':\n        return `Opção ${label} removida.`;\n      case 'clear':\n        return 'Todas as opções selecionadas foram removidas.';\n      case 'initial-input-focus':\n        return `${labels.length > 1 ? 'Opções' : 'Opção'} ${labels.join(', ')} selecionada.`;\n      case 'select-option':\n        return isDisabled\n          ? `A opção ${label} está desabilitada. Escolha outra.`\n          : `Opção ${label} selecionada.`;\n      default:\n        return '';\n    }\n  },\n  onFocus: (props) => {\n    const {\n      context,\n      focused,\n      options,\n      label = '',\n      selectValue,\n      isDisabled,\n    } = props;\n    const { isSelected, isAppleDevice } = props;\n\n    const getArrayIndex = (items: readonly unknown[]) =>\n      items.length > 0\n        ? `${items.indexOf(focused) + 1} de ${items.length}`\n        : '';\n\n    if (context === 'value' && selectValue) {\n      return `Valor ${label} em foco, ${getArrayIndex(selectValue)}.`;\n    }\n\n    if (context === 'menu' && isAppleDevice) {\n      const status = `${isSelected ? ' selecionada' : ''}${isDisabled ? ' desabilitada' : ''}`;\n\n      return `${label}${status}, ${getArrayIndex(options)}.`;\n    }\n\n    return '';\n  },\n  onFilter: (props) => {\n    const { inputValue, resultsMessage } = props;\n\n    return `${resultsMessage}${inputValue ? ` para a busca ${inputValue}` : ''}.`;\n  },\n});\n\n/**\n * Resumo dos resultados anunciado quando a lista muda.\n */\nexport const getAsyncSelectScreenReaderStatus = (props: {\n  count: number;\n}): string => {\n  const { count } = props;\n\n  return `${count} ${count === 1 ? 'resultado disponível' : 'resultados disponíveis'}`;\n};\n"],"mappings":";;;;;AAMA,MAAa,wCAIqC;CAChD,WAAW,UAAU;EACnB,MAAM,EAAE,SAAS,cAAc,SAAS,iBAAiB,mBACvD;EAEF,QAAQ,SAAR;GACE,KAAK,QACH,OAAO,mHAAmH,kBAAkB,kDAAkD,GAAG;GACnM,KAAK,SACH,OAAO,iBACH,GAAG,MAAM,iBAAiB,UAAU,UAAU,eAAe,kCAAkC,GAAG,+BAA+B,UAAU,wDAAwD,GAAG,KACtM;GACN,KAAK,SACH,OAAO;GACT,SACE,OAAO;EACX;CACF;CACA,WAAW,UAAU;EACnB,MAAM,EAAE,QAAQ,QAAQ,IAAI,QAAQ,eAAe;EAEnD,QAAQ,QAAR;GACE,KAAK;GACL,KAAK;GACL,KAAK,gBACH,OAAO,SAAS,MAAM;GACxB,KAAK,SACH,OAAO;GACT,KAAK,uBACH,OAAO,GAAG,OAAO,SAAS,IAAI,WAAW,QAAQ,GAAG,OAAO,KAAK,IAAI,EAAE;GACxE,KAAK,iBACH,OAAO,aACH,WAAW,MAAM,sCACjB,SAAS,MAAM;GACrB,SACE,OAAO;EACX;CACF;CACA,UAAU,UAAU;EAClB,MAAM,EACJ,SACA,SACA,SACA,QAAQ,IACR,aACA,eACE;EACJ,MAAM,EAAE,YAAY,kBAAkB;EAEtC,MAAM,iBAAiB,UACrB,MAAM,SAAS,IACX,GAAG,MAAM,QAAQ,OAAO,IAAI,EAAE,MAAM,MAAM,WAC1C;EAEN,IAAI,YAAY,WAAW,aACzB,OAAO,SAAS,MAAM,YAAY,cAAc,WAAW,EAAE;EAG/D,IAAI,YAAY,UAAU,eAGxB,OAAO,GAAG,QAAQ,GAFA,aAAa,iBAAiB,KAAK,aAAa,kBAAkB,KAE3D,IAAI,cAAc,OAAO,EAAE;EAGtD,OAAO;CACT;CACA,WAAW,UAAU;EACnB,MAAM,EAAE,YAAY,mBAAmB;EAEvC,OAAO,GAAG,iBAAiB,aAAa,iBAAiB,eAAe,GAAG;CAC7E;AACF;;;;AAKA,MAAa,oCAAoC,UAEnC;CACZ,MAAM,EAAE,UAAU;CAElB,OAAO,GAAG,MAAM,GAAG,UAAU,IAAI,yBAAyB;AAC5D"}

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

@@ -0,0 +1,5 @@
+import { GroupBase, SelectComponentsConfig } from "react-select";
+//#region src/components/collections/async-select/async-select-components.d.ts
+export declare const getAsyncSelectComponents: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>() => Partial<SelectComponentsConfig<Option, IsMulti, Group>>;
+//#endregion
+//# sourceMappingURL=async-select-components.d.ts.map

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

@@ -0,0 +1,67 @@
+import { Icon } from "../../display/icon/icon.js";
+import { Spinner } from "../../feedback/spinner/spinner.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CaretUpDownIcon, CheckIcon, XIcon } from "@phosphor-icons/react";
+import { components } from "react-select";
+//#region src/components/collections/async-select/async-select-components.tsx
+const SelectContainer = (props) => {
+	const { innerProps, ...rest } = props;
+	const containerProps = {
+		...innerProps,
+		"data-component": "AsyncSelect"
+	};
+	return /* @__PURE__ */ jsx(components.SelectContainer, {
+		innerProps: containerProps,
+		...rest
+	});
+};
+const DropdownIndicator = (props) => /* @__PURE__ */ jsx(components.DropdownIndicator, {
+	...props,
+	children: /* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(CaretUpDownIcon, {}) })
+});
+const ClearIndicator = (props) => /* @__PURE__ */ jsx(components.ClearIndicator, {
+	...props,
+	children: /* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(XIcon, {}) })
+});
+const MultiValueRemove = (props) => {
+	const { innerProps, data, selectProps } = props;
+	return /* @__PURE__ */ jsx(components.MultiValueRemove, {
+		...props,
+		innerProps: {
+			...innerProps,
+			"aria-label": `Remover ${selectProps.getOptionLabel(data)}`
+		},
+		children: /* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(XIcon, {}) })
+	});
+};
+const OptionItem = (props) => {
+	const { isSelected, children } = props;
+	return /* @__PURE__ */ jsxs(components.Option, {
+		...props,
+		children: [isSelected && /* @__PURE__ */ jsx(Icon, {
+			className: "col-start-1 mt-[calc((1lh-1em)/2)]",
+			render: /* @__PURE__ */ jsx(CheckIcon, {})
+		}), /* @__PURE__ */ jsx("span", {
+			className: "col-start-2",
+			children
+		})]
+	});
+};
+const LoadingIndicator = () => /* @__PURE__ */ jsx(Spinner, {
+	"aria-hidden": true,
+	className: "shrink-0"
+});
+const NoIndicatorSeparator = () => null;
+const getAsyncSelectComponents = () => ({
+	SelectContainer,
+	DropdownIndicator,
+	ClearIndicator,
+	MultiValueRemove,
+	Option: OptionItem,
+	LoadingIndicator,
+	IndicatorSeparator: NoIndicatorSeparator
+});
+//#endregion
+export { getAsyncSelectComponents };
+
+//# sourceMappingURL=async-select-components.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"async-select-components.js","names":[],"sources":["../../../../src/components/collections/async-select/async-select-components.tsx"],"sourcesContent":["import { CaretUpDownIcon, CheckIcon, XIcon } from '@phosphor-icons/react';\nimport {\n  type ClearIndicatorProps,\n  type ContainerProps,\n  components,\n  type DropdownIndicatorProps,\n  type GroupBase,\n  type MultiValueRemoveProps,\n  type OptionProps,\n  type SelectComponentsConfig,\n} from 'react-select';\nimport { Icon } from '#components/display/icon';\nimport { Spinner } from '#components/feedback/spinner';\n\nconst SelectContainer = <\n  Option,\n  IsMulti extends boolean,\n  Group extends GroupBase<Option>,\n>(\n  props: ContainerProps<Option, IsMulti, Group>,\n) => {\n  const { innerProps, ...rest } = props;\n\n  // Em variável, o `data-*` passa pela checagem de propriedades extras do tipo do react-select.\n  const containerProps = { ...innerProps, 'data-component': 'AsyncSelect' };\n\n  return (\n    <components.SelectContainer\n      innerProps={containerProps}\n      {...rest}\n    />\n  );\n};\n\nconst DropdownIndicator = <\n  Option,\n  IsMulti extends boolean,\n  Group extends GroupBase<Option>,\n>(\n  props: DropdownIndicatorProps<Option, IsMulti, Group>,\n) => (\n  <components.DropdownIndicator {...props}>\n    <Icon render={<CaretUpDownIcon />} />\n  </components.DropdownIndicator>\n);\n\nconst ClearIndicator = <\n  Option,\n  IsMulti extends boolean,\n  Group extends GroupBase<Option>,\n>(\n  props: ClearIndicatorProps<Option, IsMulti, Group>,\n) => (\n  <components.ClearIndicator {...props}>\n    <Icon render={<XIcon />} />\n  </components.ClearIndicator>\n);\n\nconst MultiValueRemove = <\n  Option,\n  IsMulti extends boolean,\n  Group extends GroupBase<Option>,\n>(\n  props: MultiValueRemoveProps<Option, IsMulti, Group>,\n) => {\n  const { innerProps, data, selectProps } = props;\n\n  return (\n    <components.MultiValueRemove\n      {...props}\n      innerProps={{\n        ...innerProps,\n        'aria-label': `Remover ${selectProps.getOptionLabel(data)}`,\n      }}\n    >\n      <Icon render={<XIcon />} />\n    </components.MultiValueRemove>\n  );\n};\n\nconst OptionItem = <\n  Option,\n  IsMulti extends boolean,\n  Group extends GroupBase<Option>,\n>(\n  props: OptionProps<Option, IsMulti, Group>,\n) => {\n  const { isSelected, children } = props;\n\n  return (\n    <components.Option {...props}>\n      {isSelected && (\n        <Icon\n          className=\"col-start-1 mt-[calc((1lh-1em)/2)]\"\n          render={<CheckIcon />}\n        />\n      )}\n      <span className=\"col-start-2\">{children}</span>\n    </components.Option>\n  );\n};\n\nconst LoadingIndicator = () => (\n  <Spinner\n    aria-hidden={true}\n    className=\"shrink-0\"\n  />\n);\n\nconst NoIndicatorSeparator = () => null;\n\nexport const getAsyncSelectComponents = <\n  Option,\n  IsMulti extends boolean,\n  Group extends GroupBase<Option>,\n>(): Partial<SelectComponentsConfig<Option, IsMulti, Group>> => ({\n  SelectContainer,\n  DropdownIndicator,\n  ClearIndicator,\n  MultiValueRemove,\n  Option: OptionItem,\n  LoadingIndicator,\n  IndicatorSeparator: NoIndicatorSeparator,\n});\n"],"mappings":";;;;;;AAcA,MAAM,mBAKJ,UACG;CACH,MAAM,EAAE,YAAY,GAAG,SAAS;CAGhC,MAAM,iBAAiB;EAAE,GAAG;EAAY,kBAAkB;CAAc;CAExE,OACE,oBAAC,WAAW,iBAAZ;EACE,YAAY;EACZ,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,qBAKJ,UAEA,oBAAC,WAAW,mBAAZ;CAA8B,GAAI;CAChC,UAAA,oBAAC,MAAD,EAAM,QAAQ,oBAAC,iBAAD,CAAkB,CAAA,EAAI,CAAA;AACR,CAAA;AAGhC,MAAM,kBAKJ,UAEA,oBAAC,WAAW,gBAAZ;CAA2B,GAAI;CAC7B,UAAA,oBAAC,MAAD,EAAM,QAAQ,oBAAC,OAAD,CAAQ,CAAA,EAAI,CAAA;AACD,CAAA;AAG7B,MAAM,oBAKJ,UACG;CACH,MAAM,EAAE,YAAY,MAAM,gBAAgB;CAE1C,OACE,oBAAC,WAAW,kBAAZ;EACE,GAAI;EACJ,YAAY;GACV,GAAG;GACH,cAAc,WAAW,YAAY,eAAe,IAAI;EAC1D;EAEA,UAAA,oBAAC,MAAD,EAAM,QAAQ,oBAAC,OAAD,CAAQ,CAAA,EAAI,CAAA;CACC,CAAA;AAEjC;AAEA,MAAM,cAKJ,UACG;CACH,MAAM,EAAE,YAAY,aAAa;CAEjC,OACE,qBAAC,WAAW,QAAZ;EAAmB,GAAI;EAAvB,UAAA,CACG,cACC,oBAAC,MAAD;GACE,WAAU;GACV,QAAQ,oBAAC,WAAD,CAAY,CAAA;EACrB,CAAA,GAEH,oBAAC,QAAD;GAAM,WAAU;GAAe;EAAe,CAAA,CAC7B;;AAEvB;AAEA,MAAM,yBACJ,oBAAC,SAAD;CACE,eAAa;CACb,WAAU;AACX,CAAA;AAGH,MAAM,6BAA6B;AAEnC,MAAa,kCAIoD;CAC/D;CACA;CACA;CACA;CACA,QAAQ;CACR;CACA,oBAAoB;AACtB"}

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