@lucasbernardosn/react-ui 0.1.0 → 0.3.0

package/README.md

@@ -0,0 +1,141 @@
+# @lucasbernardosn/react-ui
+
+Biblioteca de componentes React sobre [Base UI](https://base-ui.com) e [Zag.js](https://zagjs.com),
+estilizada com Tailwind CSS v4. O tema tem escala de cores própria, claro e escuro, e os textos
+padrão são em pt-BR. Cada componente é importado pelo próprio caminho, e um componente de várias
+partes sai num namespace (`Dialog.Root`, `Dialog.Popup`…).
+
+## Instalação
+
+```bash
+pnpm add @lucasbernardosn/react-ui @lucasbernardosn/react-utils react react-dom tailwindcss
+```
+
+O React (19), o Tailwind CSS (4) e o [`@lucasbernardosn/react-utils`](https://www.npmjs.com/package/@lucasbernardosn/react-utils)
+são peers: o app e a lib precisam usar a mesma cópia de cada um.
+
+## Configuração
+
+No CSS de entrada do app, o tema da lib vem depois do Tailwind, e o Tailwind precisa ler as
+classes da lib:
+
+```css
+@import 'tailwindcss';
+@import '@lucasbernardosn/react-ui/theme.css';
+
+@source '../node_modules/@lucasbernardosn/react-ui';
+
+/*
+ * A raiz do app num contexto de empilhamento próprio. Os popups da lib não têm `z-index`: vão por
+ * portal para o fim do `body` e ficam por cima da raiz, e o `z-index` do app (um cabeçalho fixo,
+ * por exemplo) só vale dentro dela.
+ */
+#root {
+  isolation: isolate;
+}
+```
+
+O caminho do `@source` é relativo ao arquivo CSS. O tema é claro por padrão; o escuro vale para o
+elemento com `data-theme="dark"` e os descendentes dele, então trocar o tema do app é trocar o
+atributo no `<html>`:
+
+```ts
+document.documentElement.dataset.theme = 'dark';
+```
+
+## Uso
+
+```tsx
+import { Button } from '@lucasbernardosn/react-ui/buttons/button';
+import { Dialog } from '@lucasbernardosn/react-ui/overlays/dialog';
+import { Field } from '@lucasbernardosn/react-ui/fields/field';
+import { Input } from '@lucasbernardosn/react-ui/fields/input';
+
+export const EditCustomerDialog = () => (
+  <Dialog.Root>
+    <Dialog.Trigger render={<Button />}>Editar cliente</Dialog.Trigger>
+    <Dialog.Portal>
+      <Dialog.Backdrop />
+      <Dialog.Viewport>
+        <Dialog.Popup>
+          <Dialog.Header>
+            <Dialog.Title>Editar cliente</Dialog.Title>
+          </Dialog.Header>
+          <Dialog.Body>
+            <Field.Root>
+              <Field.Label>Razão social</Field.Label>
+              <Input />
+            </Field.Root>
+          </Dialog.Body>
+          <Dialog.Footer>
+            <Dialog.Close render={<Button />}>Salvar</Dialog.Close>
+          </Dialog.Footer>
+        </Dialog.Popup>
+      </Dialog.Viewport>
+    </Dialog.Portal>
+  </Dialog.Root>
+);
+```
+
+As partes repassam as props e a `ref` ao elemento que renderizam, e o `render` troca esse
+elemento (`render={<Button />}`, `render={<a href="/" />}`), como no Base UI. O JSDoc de cada
+componente, no editor, diz as partes, as variantes e o que cada uma faz.
+
+## Componentes
+
+O caminho de import é `@lucasbernardosn/react-ui/<categoria>/<componente>`, com o componente em
+kebab-case (`fields/number-input` para o `NumberInput`).
+
+| Categoria | Componentes |
+| --------- | ----------- |
+| `buttons` | `Button`, `ClipboardButton`, `CloseButton`, `IconButton`, `ResponsiveButton` |
+| `collections` | `AsyncSelect`, `Autocomplete`, `Select`, `TreeView` |
+| `disclosure` | `Breadcrumb`, `Collapsible`, `Tabs` |
+| `display` | `Avatar`, `Badge`, `Card`, `Clipboard`, `DataList`, `Icon`, `Status`, `Tag` |
+| `feedback` | `Alert`, `EmptyState`, `Skeleton`, `Spinner`, `Toast` |
+| `fields` | `Checkbox`, `CurrencyBrlInput`, `Field`, `Fieldset`, `Form`, `Input`, `NumberInput`, `PasswordInput`, `PatternInput`, `Switch`, `Textarea` |
+| `layout` | `Box`, `Center`, `CenterAbsolute`, `Circle`, `Flex`, `Float`, `Grid`, `ScrollArea`, `Separator`, `Splitter`, `Stack` (com `HStack` e `VStack`), `Wrap` |
+| `overlays` | `ActionBar`, `AlertDialog`, `Dialog`, `Drawer`, `Menu`, `Popover`, `Tooltip` (com `SimpleTooltip`) |
+| `typography` | `Heading`, `Kbd`, `List`, `Mark`, `Paragraph`, `Pre`, `Text`, `Truncate` |
+| `utilities` | `For`, `InteractionShield`, `Show` |
+
+## Toasts e alertas imperativos
+
+O `Toast` e o `AlertDialog` abrem de qualquer lugar, inclusive de fora do React, desde que o
+`Outlet` de cada um esteja montado uma vez perto da raiz, abaixo dos providers globais (tema,
+tradução):
+
+```tsx
+import { AlertDialog } from '@lucasbernardosn/react-ui/overlays/alert-dialog';
+import { Toast } from '@lucasbernardosn/react-ui/feedback/toast';
+
+<ThemeProvider>
+  <App />
+  <Toast.Outlet position="top-center" />
+  <AlertDialog.Outlet />
+</ThemeProvider>;
+
+Toast.add({ type: 'success', title: 'Nota 4821 emitida' });
+
+const confirmed = await AlertDialog.confirm({
+  title: 'Excluir a nota 4821?',
+  description: 'A exclusão não pode ser desfeita.',
+  confirmButton: { children: 'Excluir', colorScheme: 'red' },
+});
+```
+
+## Hooks, utilitários e tipos
+
+- `@lucasbernardosn/react-ui/hooks`: `useIsBreakpoint` e `useResponsiveBreakpoint`, sobre os
+  breakpoints da lib (`BREAKPOINTS`, os do Tailwind e alguns menores) ou sobre uma config própria
+  passada em `breakpoints`; `usePointerType`, `useIsPointerPrimaryDevice` e
+  `useIsTouchPrimaryDevice`, pelo ponteiro principal do dispositivo.
+- `@lucasbernardosn/react-ui/utils`: `mergeTwClassNames` e `mergeStateClassNames`, que juntam as
+  classes do app às da lib resolvendo os conflitos do Tailwind (o segundo aceita o `className`
+  como função do estado, como no Base UI), e `normalizeDataAttr`.
+- `@lucasbernardosn/react-ui/types`: as camadas de cor aceitas pelo `colorScheme` dos componentes
+  (`ColorSchemeCore`, `ColorSchemeSemantic`, `ColorSchemePalette` e `ColorSchemeFull`).
+
+## Licença
+
+MIT.

package/dist/components/buttons/button/button-variants.d.ts

@@ -29,7 +29,7 @@ export declare const buttonDefaultVariants: Required<ButtonVariants>;
  */
 export declare const buttonVariants: (props?: ({
   colorScheme?: "gray" | "brand" | "red" | "green" | "blue" | "teal" | "pink" | "purple" | "cyan" | "orange" | "brown" | "yellow" | "amber" | null | undefined;
-  variant?: "outline" | "subtle" | "solid" | "surface" | "ghost" | "plain" | null | undefined;
+  variant?: "solid" | "subtle" | "surface" | "outline" | "ghost" | "plain" | null | undefined;
   size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

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

@@ -46,9 +46,9 @@ const buttonVariants = cva([
 				"[--button-surface-bg:var(--color-gray-4)]",
 				"[--button-surface-hover-bg:var(--color-gray-5)]",
 				"[--button-surface-border:var(--color-gray-5)]",
-				"[--button-outline-hover-bg:var(--color-gray-3)]",
-				"[--button-outline-border:var(--color-gray-alpha-7)]",
-				"[--button-ghost-hover-bg:var(--color-gray-3)]",
+				"[--button-outline-hover-bg:var(--color-gray-4)]",
+				"[--button-outline-border:var(--color-gray-6)]",
+				"[--button-ghost-hover-bg:var(--color-gray-4)]",
 				"text-gray-12",
 				"ring-gray-9"
 			],
@@ -61,7 +61,7 @@ const buttonVariants = cva([
 				"[--button-surface-border:var(--color-brand-5)]",
 				"[--button-outline-hover-bg:var(--color-brand-3)]",
 				"[--button-outline-border:var(--color-brand-8)]",
-				"[--button-ghost-hover-bg:var(--color-brand-3)]",
+				"[--button-ghost-hover-bg:var(--color-brand-4)]",
 				"text-brand-11",
 				"ring-brand-9"
 			],
@@ -74,7 +74,7 @@ const buttonVariants = cva([
 				"[--button-surface-border:var(--color-red-5)]",
 				"[--button-outline-hover-bg:var(--color-red-3)]",
 				"[--button-outline-border:var(--color-red-8)]",
-				"[--button-ghost-hover-bg:var(--color-red-3)]",
+				"[--button-ghost-hover-bg:var(--color-red-4)]",
 				"text-red-11",
 				"ring-red-9"
 			],
@@ -87,7 +87,7 @@ const buttonVariants = cva([
 				"[--button-surface-border:var(--color-green-5)]",
 				"[--button-outline-hover-bg:var(--color-green-3)]",
 				"[--button-outline-border:var(--color-green-8)]",
-				"[--button-ghost-hover-bg:var(--color-green-3)]",
+				"[--button-ghost-hover-bg:var(--color-green-4)]",
 				"text-green-11",
 				"ring-green-9"
 			],
@@ -100,7 +100,7 @@ const buttonVariants = cva([
 				"[--button-surface-border:var(--color-blue-5)]",
 				"[--button-outline-hover-bg:var(--color-blue-3)]",
 				"[--button-outline-border:var(--color-blue-8)]",
-				"[--button-ghost-hover-bg:var(--color-blue-3)]",
+				"[--button-ghost-hover-bg:var(--color-blue-4)]",
 				"text-blue-11",
 				"ring-blue-9"
 			],
@@ -113,7 +113,7 @@ const buttonVariants = cva([
 				"[--button-surface-border:var(--color-teal-5)]",
 				"[--button-outline-hover-bg:var(--color-teal-3)]",
 				"[--button-outline-border:var(--color-teal-8)]",
-				"[--button-ghost-hover-bg:var(--color-teal-3)]",
+				"[--button-ghost-hover-bg:var(--color-teal-4)]",
 				"text-teal-11",
 				"ring-teal-9"
 			],
@@ -126,7 +126,7 @@ const buttonVariants = cva([
 				"[--button-surface-border:var(--color-pink-5)]",
 				"[--button-outline-hover-bg:var(--color-pink-3)]",
 				"[--button-outline-border:var(--color-pink-8)]",
-				"[--button-ghost-hover-bg:var(--color-pink-3)]",
+				"[--button-ghost-hover-bg:var(--color-pink-4)]",
 				"text-pink-11",
 				"ring-pink-9"
 			],
@@ -139,7 +139,7 @@ const buttonVariants = cva([
 				"[--button-surface-border:var(--color-purple-5)]",
 				"[--button-outline-hover-bg:var(--color-purple-3)]",
 				"[--button-outline-border:var(--color-purple-8)]",
-				"[--button-ghost-hover-bg:var(--color-purple-3)]",
+				"[--button-ghost-hover-bg:var(--color-purple-4)]",
 				"text-purple-11",
 				"ring-purple-9"
 			],
@@ -152,7 +152,7 @@ const buttonVariants = cva([
 				"[--button-surface-border:var(--color-cyan-5)]",
 				"[--button-outline-hover-bg:var(--color-cyan-3)]",
 				"[--button-outline-border:var(--color-cyan-8)]",
-				"[--button-ghost-hover-bg:var(--color-cyan-3)]",
+				"[--button-ghost-hover-bg:var(--color-cyan-4)]",
 				"text-cyan-11",
 				"ring-cyan-9"
 			],
@@ -165,7 +165,7 @@ const buttonVariants = cva([
 				"[--button-surface-border:var(--color-orange-5)]",
 				"[--button-outline-hover-bg:var(--color-orange-3)]",
 				"[--button-outline-border:var(--color-orange-8)]",
-				"[--button-ghost-hover-bg:var(--color-orange-3)]",
+				"[--button-ghost-hover-bg:var(--color-orange-4)]",
 				"text-orange-11",
 				"ring-orange-9"
 			],
@@ -178,7 +178,7 @@ const buttonVariants = cva([
 				"[--button-surface-border:var(--color-brown-5)]",
 				"[--button-outline-hover-bg:var(--color-brown-3)]",
 				"[--button-outline-border:var(--color-brown-8)]",
-				"[--button-ghost-hover-bg:var(--color-brown-3)]",
+				"[--button-ghost-hover-bg:var(--color-brown-4)]",
 				"text-brown-11",
 				"ring-brown-9"
 			],
@@ -191,7 +191,7 @@ const buttonVariants = cva([
 				"[--button-surface-border:var(--color-yellow-5)]",
 				"[--button-outline-hover-bg:var(--color-yellow-3)]",
 				"[--button-outline-border:var(--color-yellow-8)]",
-				"[--button-ghost-hover-bg:var(--color-yellow-3)]",
+				"[--button-ghost-hover-bg:var(--color-yellow-4)]",
 				"text-yellow-11",
 				"ring-yellow-9"
 			],
@@ -204,7 +204,7 @@ const buttonVariants = cva([
 				"[--button-surface-border:var(--color-amber-5)]",
 				"[--button-outline-hover-bg:var(--color-amber-3)]",
 				"[--button-outline-border:var(--color-amber-8)]",
-				"[--button-ghost-hover-bg:var(--color-amber-3)]",
+				"[--button-ghost-hover-bg:var(--color-amber-4)]",
 				"text-amber-11",
 				"ring-amber-9"
 			]
@@ -258,7 +258,6 @@ const buttonVariants = cva([
 				"h-5",
 				"min-w-5",
 				"text-2xs",
-				"rounded-sm",
 				"px-1.5",
 				"gap-1",
 				"[&_svg]:size-2.5"
@@ -327,11 +326,6 @@ const buttonVariants = cva([
 			colorScheme: "gray",
 			className: ["text-white", "dark:text-black"]
 		},
-		{
-			variant: "outline",
-			colorScheme: "gray",
-			className: ["bg-white", "dark:bg-black"]
-		},
 		{
 			variant: "solid",
 			colorScheme: "yellow",

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

@@ -1 +1 @@
-{"version":3,"file":"button-variants.js","names":[],"sources":["../../../../src/components/buttons/button/button-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemePalette } from '#types';\n\nexport type ButtonVariants = {\n  /**\n   * Cor do botão. Cada `variant` usa a escala da cor de um jeito (fundo sólido, fundo suave,\n   * borda).\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemePalette;\n  /**\n   * Altura, padding, tamanho do texto e do ícone. `sm` = `h-9`, `md` = `h-10`, alinhado aos\n   * outros controles de formulário.\n   *\n   * @default 'sm'\n   */\n  size?: '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /**\n   * Desenho do botão.\n   *\n   * @default 'solid'\n   */\n  variant?: 'solid' | 'subtle' | 'surface' | 'outline' | 'ghost' | 'plain';\n};\n\nexport const buttonDefaultVariants: Required<ButtonVariants> = {\n  colorScheme: 'gray',\n  size: 'sm',\n  variant: 'solid',\n};\n\n/**\n * A cor só declara as variáveis `--button-*`, e a `variant` decide onde cada uma entra. Assim não\n * há um bloco por combinação de cor e `variant`.\n */\nexport const buttonVariants = cva(\n  [\n    'relative',\n\n    'inline-flex',\n    'items-center',\n    'justify-center',\n    'align-middle',\n    'shrink-0',\n\n    'whitespace-nowrap',\n    'font-medium',\n    'leading-[1.2]',\n\n    'border',\n    'border-transparent',\n    'rounded-md',\n    'corner-squircle',\n\n    'select-none',\n    'cursor-pointer',\n    'appearance-none',\n    'isolate',\n\n    // A transição só existe durante o hover: fora dele, a troca de tema muda as cores na hora,\n    // em vez de animar todos os botões da tela. Só o fundo, que é o que o hover muda: com a\n    // `opacity` junto, o esmaecido do disabled demoraria para chegar e o spinner do `loading`\n    // apareceria antes dele; com o `transition-colors`, o anel de foco que surge durante o hover\n    // sairia da cor do texto.\n    'hover:transition-[background-color]',\n    'hover:ease-in',\n    'hover:duration-150',\n\n    'focus-ring-outside',\n\n    'data-disabled:opacity-50',\n    'data-disabled:cursor-not-allowed',\n\n    'data-loading:data-disabled:cursor-default',\n\n    '[&_svg]:shrink-0',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: [\n          '[--button-solid-bg:var(--color-black)]',\n          'dark:[--button-solid-bg:var(--color-white)]',\n\n          '[--button-subtle-bg:var(--color-gray-4)]',\n          '[--button-subtle-hover-bg:var(--color-gray-5)]',\n\n          '[--button-surface-bg:var(--color-gray-4)]',\n          '[--button-surface-hover-bg:var(--color-gray-5)]',\n          '[--button-surface-border:var(--color-gray-5)]',\n\n          '[--button-outline-hover-bg:var(--color-gray-3)]',\n          '[--button-outline-border:var(--color-gray-alpha-7)]',\n\n          '[--button-ghost-hover-bg:var(--color-gray-3)]',\n\n          'text-gray-12',\n          'ring-gray-9',\n        ],\n        brand: [\n          '[--button-solid-bg:var(--color-brand-9)]',\n\n          '[--button-subtle-bg:var(--color-brand-4)]',\n          '[--button-subtle-hover-bg:var(--color-brand-5)]',\n\n          '[--button-surface-bg:var(--color-brand-4)]',\n          '[--button-surface-hover-bg:var(--color-brand-5)]',\n          '[--button-surface-border:var(--color-brand-5)]',\n\n          '[--button-outline-hover-bg:var(--color-brand-3)]',\n          '[--button-outline-border:var(--color-brand-8)]',\n\n          '[--button-ghost-hover-bg:var(--color-brand-3)]',\n\n          'text-brand-11',\n          'ring-brand-9',\n        ],\n        red: [\n          '[--button-solid-bg:var(--color-red-9)]',\n\n          '[--button-subtle-bg:var(--color-red-4)]',\n          '[--button-subtle-hover-bg:var(--color-red-5)]',\n\n          '[--button-surface-bg:var(--color-red-4)]',\n          '[--button-surface-hover-bg:var(--color-red-5)]',\n          '[--button-surface-border:var(--color-red-5)]',\n\n          '[--button-outline-hover-bg:var(--color-red-3)]',\n          '[--button-outline-border:var(--color-red-8)]',\n\n          '[--button-ghost-hover-bg:var(--color-red-3)]',\n\n          'text-red-11',\n          'ring-red-9',\n        ],\n        green: [\n          '[--button-solid-bg:var(--color-green-9)]',\n\n          '[--button-subtle-bg:var(--color-green-4)]',\n          '[--button-subtle-hover-bg:var(--color-green-5)]',\n\n          '[--button-surface-bg:var(--color-green-4)]',\n          '[--button-surface-hover-bg:var(--color-green-5)]',\n          '[--button-surface-border:var(--color-green-5)]',\n\n          '[--button-outline-hover-bg:var(--color-green-3)]',\n          '[--button-outline-border:var(--color-green-8)]',\n\n          '[--button-ghost-hover-bg:var(--color-green-3)]',\n\n          'text-green-11',\n          'ring-green-9',\n        ],\n        blue: [\n          '[--button-solid-bg:var(--color-blue-9)]',\n\n          '[--button-subtle-bg:var(--color-blue-4)]',\n          '[--button-subtle-hover-bg:var(--color-blue-5)]',\n\n          '[--button-surface-bg:var(--color-blue-4)]',\n          '[--button-surface-hover-bg:var(--color-blue-5)]',\n          '[--button-surface-border:var(--color-blue-5)]',\n\n          '[--button-outline-hover-bg:var(--color-blue-3)]',\n          '[--button-outline-border:var(--color-blue-8)]',\n\n          '[--button-ghost-hover-bg:var(--color-blue-3)]',\n\n          'text-blue-11',\n          'ring-blue-9',\n        ],\n        teal: [\n          '[--button-solid-bg:var(--color-teal-9)]',\n\n          '[--button-subtle-bg:var(--color-teal-4)]',\n          '[--button-subtle-hover-bg:var(--color-teal-5)]',\n\n          '[--button-surface-bg:var(--color-teal-4)]',\n          '[--button-surface-hover-bg:var(--color-teal-5)]',\n          '[--button-surface-border:var(--color-teal-5)]',\n\n          '[--button-outline-hover-bg:var(--color-teal-3)]',\n          '[--button-outline-border:var(--color-teal-8)]',\n\n          '[--button-ghost-hover-bg:var(--color-teal-3)]',\n\n          'text-teal-11',\n          'ring-teal-9',\n        ],\n        pink: [\n          '[--button-solid-bg:var(--color-pink-9)]',\n\n          '[--button-subtle-bg:var(--color-pink-4)]',\n          '[--button-subtle-hover-bg:var(--color-pink-5)]',\n\n          '[--button-surface-bg:var(--color-pink-4)]',\n          '[--button-surface-hover-bg:var(--color-pink-5)]',\n          '[--button-surface-border:var(--color-pink-5)]',\n\n          '[--button-outline-hover-bg:var(--color-pink-3)]',\n          '[--button-outline-border:var(--color-pink-8)]',\n\n          '[--button-ghost-hover-bg:var(--color-pink-3)]',\n\n          'text-pink-11',\n          'ring-pink-9',\n        ],\n        purple: [\n          '[--button-solid-bg:var(--color-purple-9)]',\n\n          '[--button-subtle-bg:var(--color-purple-4)]',\n          '[--button-subtle-hover-bg:var(--color-purple-5)]',\n\n          '[--button-surface-bg:var(--color-purple-4)]',\n          '[--button-surface-hover-bg:var(--color-purple-5)]',\n          '[--button-surface-border:var(--color-purple-5)]',\n\n          '[--button-outline-hover-bg:var(--color-purple-3)]',\n          '[--button-outline-border:var(--color-purple-8)]',\n\n          '[--button-ghost-hover-bg:var(--color-purple-3)]',\n\n          'text-purple-11',\n          'ring-purple-9',\n        ],\n        cyan: [\n          '[--button-solid-bg:var(--color-cyan-9)]',\n\n          '[--button-subtle-bg:var(--color-cyan-4)]',\n          '[--button-subtle-hover-bg:var(--color-cyan-5)]',\n\n          '[--button-surface-bg:var(--color-cyan-4)]',\n          '[--button-surface-hover-bg:var(--color-cyan-5)]',\n          '[--button-surface-border:var(--color-cyan-5)]',\n\n          '[--button-outline-hover-bg:var(--color-cyan-3)]',\n          '[--button-outline-border:var(--color-cyan-8)]',\n\n          '[--button-ghost-hover-bg:var(--color-cyan-3)]',\n\n          'text-cyan-11',\n          'ring-cyan-9',\n        ],\n        orange: [\n          '[--button-solid-bg:var(--color-orange-9)]',\n\n          '[--button-subtle-bg:var(--color-orange-4)]',\n          '[--button-subtle-hover-bg:var(--color-orange-5)]',\n\n          '[--button-surface-bg:var(--color-orange-4)]',\n          '[--button-surface-hover-bg:var(--color-orange-5)]',\n          '[--button-surface-border:var(--color-orange-5)]',\n\n          '[--button-outline-hover-bg:var(--color-orange-3)]',\n          '[--button-outline-border:var(--color-orange-8)]',\n\n          '[--button-ghost-hover-bg:var(--color-orange-3)]',\n\n          'text-orange-11',\n          'ring-orange-9',\n        ],\n        brown: [\n          '[--button-solid-bg:var(--color-brown-9)]',\n\n          '[--button-subtle-bg:var(--color-brown-4)]',\n          '[--button-subtle-hover-bg:var(--color-brown-5)]',\n\n          '[--button-surface-bg:var(--color-brown-4)]',\n          '[--button-surface-hover-bg:var(--color-brown-5)]',\n          '[--button-surface-border:var(--color-brown-5)]',\n\n          '[--button-outline-hover-bg:var(--color-brown-3)]',\n          '[--button-outline-border:var(--color-brown-8)]',\n\n          '[--button-ghost-hover-bg:var(--color-brown-3)]',\n\n          'text-brown-11',\n          'ring-brown-9',\n        ],\n        yellow: [\n          '[--button-solid-bg:var(--color-yellow-9)]',\n\n          '[--button-subtle-bg:var(--color-yellow-4)]',\n          '[--button-subtle-hover-bg:var(--color-yellow-5)]',\n\n          '[--button-surface-bg:var(--color-yellow-4)]',\n          '[--button-surface-hover-bg:var(--color-yellow-5)]',\n          '[--button-surface-border:var(--color-yellow-5)]',\n\n          '[--button-outline-hover-bg:var(--color-yellow-3)]',\n          '[--button-outline-border:var(--color-yellow-8)]',\n\n          '[--button-ghost-hover-bg:var(--color-yellow-3)]',\n\n          'text-yellow-11',\n          'ring-yellow-9',\n        ],\n        amber: [\n          '[--button-solid-bg:var(--color-amber-9)]',\n\n          '[--button-subtle-bg:var(--color-amber-4)]',\n          '[--button-subtle-hover-bg:var(--color-amber-5)]',\n\n          '[--button-surface-bg:var(--color-amber-4)]',\n          '[--button-surface-hover-bg:var(--color-amber-5)]',\n          '[--button-surface-border:var(--color-amber-5)]',\n\n          '[--button-outline-hover-bg:var(--color-amber-3)]',\n          '[--button-outline-border:var(--color-amber-8)]',\n\n          '[--button-ghost-hover-bg:var(--color-amber-3)]',\n\n          'text-amber-11',\n          'ring-amber-9',\n        ],\n      },\n      variant: {\n        solid: [\n          'bg-(--button-solid-bg)',\n          'hover:bg-(--button-solid-bg)/90',\n          'expanded:bg-(--button-solid-bg)/90',\n\n          'data-disabled:hover:bg-(--button-solid-bg)',\n          'data-disabled:expanded:bg-(--button-solid-bg)',\n\n          'border-transparent',\n\n          'text-white',\n        ],\n        subtle: [\n          'bg-(--button-subtle-bg)',\n          'hover:bg-(--button-subtle-hover-bg)',\n          'expanded:bg-(--button-subtle-hover-bg)',\n\n          'border-transparent',\n\n          'data-disabled:hover:bg-(--button-subtle-bg)',\n          'data-disabled:expanded:bg-(--button-subtle-bg)',\n        ],\n        surface: [\n          'bg-(--button-surface-bg)',\n          'hover:bg-(--button-surface-hover-bg)',\n          'expanded:bg-(--button-surface-hover-bg)',\n\n          'border',\n          'border-(--button-surface-border)',\n\n          'data-disabled:hover:bg-(--button-surface-bg)',\n          'data-disabled:expanded:bg-(--button-surface-bg)',\n        ],\n        outline: [\n          'bg-transparent',\n          'hover:bg-(--button-outline-hover-bg)',\n          'expanded:bg-(--button-outline-hover-bg)',\n\n          'border',\n          'border-(--button-outline-border)',\n\n          'data-disabled:hover:bg-transparent',\n          'data-disabled:expanded:bg-transparent',\n        ],\n        ghost: [\n          'hover:bg-(--button-ghost-hover-bg)',\n          'expanded:bg-(--button-ghost-hover-bg)',\n\n          'data-disabled:hover:bg-transparent',\n          'data-disabled:expanded:bg-transparent',\n        ],\n        plain: [],\n      },\n      size: {\n        '3xs': [\n          'h-5',\n          'min-w-5',\n\n          'text-2xs',\n\n          'rounded-sm',\n\n          'px-1.5',\n          'gap-1',\n\n          '[&_svg]:size-2.5',\n        ],\n        '2xs': [\n          'h-6',\n          'min-w-6',\n\n          'text-xs',\n\n          'px-2',\n          'gap-1',\n\n          '[&_svg]:size-3.5',\n        ],\n        xs: [\n          'h-8',\n          'min-w-8',\n\n          'text-xs',\n\n          'px-2.5',\n          'gap-1',\n\n          '[&_svg]:size-4',\n        ],\n        sm: [\n          'h-9',\n          'min-w-9',\n\n          'text-sm',\n\n          'px-3.5',\n          'gap-2',\n\n          '[&_svg]:size-4',\n        ],\n        md: [\n          'h-10',\n          'min-w-10',\n\n          'text-sm',\n\n          'px-4',\n          'gap-2',\n\n          '[&_svg]:size-5',\n        ],\n        lg: [\n          'h-11',\n          'min-w-11',\n\n          'text-base',\n\n          'px-5',\n          'gap-3',\n\n          '[&_svg]:size-5',\n        ],\n        xl: [\n          'h-12',\n          'min-w-12',\n\n          'text-base',\n\n          'px-6',\n          'gap-3',\n\n          '[&_svg]:size-5',\n        ],\n        '2xl': [\n          'h-16',\n          'min-w-16',\n\n          'text-lg',\n\n          'px-7',\n          'gap-3',\n\n          '[&_svg]:size-6',\n        ],\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'solid',\n        colorScheme: 'gray',\n        className: ['text-white', 'dark:text-black'],\n      },\n      {\n        variant: 'outline',\n        colorScheme: 'gray',\n        className: ['bg-white', 'dark:bg-black'],\n      },\n      {\n        variant: 'solid',\n        colorScheme: 'yellow',\n        className: ['text-black'],\n      },\n      {\n        variant: 'solid',\n        colorScheme: 'amber',\n        className: ['text-black'],\n      },\n    ],\n    defaultVariants: {\n      colorScheme: buttonDefaultVariants.colorScheme,\n      size: buttonDefaultVariants.size,\n      variant: buttonDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AA0BA,MAAa,wBAAkD;CAC7D,aAAa;CACb,MAAM;CACN,SAAS;AACX;;;;;AAMA,MAAa,iBAAiB,IAC5B;CACE;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CAOA;CACA;CACA;CAEA;CAEA;CACA;CAEA;CAEA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IAEA;IACA;IAEA;IACA;IACA;IAEA;IACA;IAEA;IAEA;IACA;GACF;GACA,OAAO;IACL;IAEA;IACA;IAEA;IACA;IACA;IAEA;IACA;IAEA;IAEA;IACA;GACF;GACA,KAAK;IACH;IAEA;IACA;IAEA;IACA;IACA;IAEA;IACA;IAEA;IAEA;IACA;GACF;GACA,OAAO;IACL;IAEA;IACA;IAEA;IACA;IACA;IAEA;IACA;IAEA;IAEA;IACA;GACF;GACA,MAAM;IACJ;IAEA;IACA;IAEA;IACA;IACA;IAEA;IACA;IAEA;IAEA;IACA;GACF;GACA,MAAM;IACJ;IAEA;IACA;IAEA;IACA;IACA;IAEA;IACA;IAEA;IAEA;IACA;GACF;GACA,MAAM;IACJ;IAEA;IACA;IAEA;IACA;IACA;IAEA;IACA;IAEA;IAEA;IACA;GACF;GACA,QAAQ;IACN;IAEA;IACA;IAEA;IACA;IACA;IAEA;IACA;IAEA;IAEA;IACA;GACF;GACA,MAAM;IACJ;IAEA;IACA;IAEA;IACA;IACA;IAEA;IACA;IAEA;IAEA;IACA;GACF;GACA,QAAQ;IACN;IAEA;IACA;IAEA;IACA;IACA;IAEA;IACA;IAEA;IAEA;IACA;GACF;GACA,OAAO;IACL;IAEA;IACA;IAEA;IACA;IACA;IAEA;IACA;IAEA;IAEA;IACA;GACF;GACA,QAAQ;IACN;IAEA;IACA;IAEA;IACA;IACA;IAEA;IACA;IAEA;IAEA;IACA;GACF;GACA,OAAO;IACL;IAEA;IACA;IAEA;IACA;IACA;IAEA;IACA;IAEA;IAEA;IACA;GACF;EACF;EACA,SAAS;GACP,OAAO;IACL;IACA;IACA;IAEA;IACA;IAEA;IAEA;GACF;GACA,QAAQ;IACN;IACA;IACA;IAEA;IAEA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IAEA;IACA;IAEA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IAEA;IACA;IAEA;IACA;GACF;GACA,OAAO;IACL;IACA;IAEA;IACA;GACF;GACA,OAAO,CAAC;EACV;EACA,MAAM;GACJ,OAAO;IACL;IACA;IAEA;IAEA;IAEA;IACA;IAEA;GACF;GACA,OAAO;IACL;IACA;IAEA;IAEA;IACA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;IAEA;GACF;GACA,OAAO;IACL;IACA;IAEA;IAEA;IACA;IAEA;GACF;EACF;CACF;CACA,kBAAkB;EAChB;GACE,SAAS;GACT,aAAa;GACb,WAAW,CAAC,cAAc,iBAAiB;EAC7C;EACA;GACE,SAAS;GACT,aAAa;GACb,WAAW,CAAC,YAAY,eAAe;EACzC;EACA;GACE,SAAS;GACT,aAAa;GACb,WAAW,CAAC,YAAY;EAC1B;EACA;GACE,SAAS;GACT,aAAa;GACb,WAAW,CAAC,YAAY;EAC1B;CACF;CACA,iBAAiB;EACf,aAAa,sBAAsB;EACnC,MAAM,sBAAsB;EAC5B,SAAS,sBAAsB;CACjC;AACF,CACF"}
+{"version":3,"file":"button-variants.js","names":[],"sources":["../../../../src/components/buttons/button/button-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemePalette } from '#types';\n\nexport type ButtonVariants = {\n  /**\n   * Cor do botão. Cada `variant` usa a escala da cor de um jeito (fundo sólido, fundo suave,\n   * borda).\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemePalette;\n  /**\n   * Altura, padding, tamanho do texto e do ícone. `sm` = `h-9`, `md` = `h-10`, alinhado aos\n   * outros controles de formulário.\n   *\n   * @default 'sm'\n   */\n  size?: '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /**\n   * Desenho do botão.\n   *\n   * @default 'solid'\n   */\n  variant?: 'solid' | 'subtle' | 'surface' | 'outline' | 'ghost' | 'plain';\n};\n\nexport const buttonDefaultVariants: Required<ButtonVariants> = {\n  colorScheme: 'gray',\n  size: 'sm',\n  variant: 'solid',\n};\n\n/**\n * A cor só declara as variáveis `--button-*`, e a `variant` decide onde cada uma entra. Assim não\n * há um bloco por combinação de cor e `variant`.\n */\nexport const buttonVariants = cva(\n  [\n    'relative',\n\n    'inline-flex',\n    'items-center',\n    'justify-center',\n    'align-middle',\n    'shrink-0',\n\n    'whitespace-nowrap',\n    'font-medium',\n    'leading-[1.2]',\n\n    'border',\n    'border-transparent',\n    'rounded-md',\n    'corner-squircle',\n\n    'select-none',\n    'cursor-pointer',\n    'appearance-none',\n    'isolate',\n\n    // A transição só existe durante o hover: fora dele, a troca de tema muda as cores na hora,\n    // em vez de animar todos os botões da tela. Só o fundo, que é o que o hover muda: com a\n    // `opacity` junto, o esmaecido do disabled demoraria para chegar e o spinner do `loading`\n    // apareceria antes dele; com o `transition-colors`, o anel de foco que surge durante o hover\n    // sairia da cor do texto.\n    'hover:transition-[background-color]',\n    'hover:ease-in',\n    'hover:duration-150',\n\n    'focus-ring-outside',\n\n    'data-disabled:opacity-50',\n    'data-disabled:cursor-not-allowed',\n\n    'data-loading:data-disabled:cursor-default',\n\n    '[&_svg]:shrink-0',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: [\n          '[--button-solid-bg:var(--color-black)]',\n          'dark:[--button-solid-bg:var(--color-white)]',\n\n          '[--button-subtle-bg:var(--color-gray-4)]',\n          '[--button-subtle-hover-bg:var(--color-gray-5)]',\n\n          '[--button-surface-bg:var(--color-gray-4)]',\n          '[--button-surface-hover-bg:var(--color-gray-5)]',\n          '[--button-surface-border:var(--color-gray-5)]',\n\n          '[--button-outline-hover-bg:var(--color-gray-4)]',\n          '[--button-outline-border:var(--color-gray-6)]',\n\n          '[--button-ghost-hover-bg:var(--color-gray-4)]',\n\n          'text-gray-12',\n          'ring-gray-9',\n        ],\n        brand: [\n          '[--button-solid-bg:var(--color-brand-9)]',\n\n          '[--button-subtle-bg:var(--color-brand-4)]',\n          '[--button-subtle-hover-bg:var(--color-brand-5)]',\n\n          '[--button-surface-bg:var(--color-brand-4)]',\n          '[--button-surface-hover-bg:var(--color-brand-5)]',\n          '[--button-surface-border:var(--color-brand-5)]',\n\n          '[--button-outline-hover-bg:var(--color-brand-3)]',\n          '[--button-outline-border:var(--color-brand-8)]',\n\n          '[--button-ghost-hover-bg:var(--color-brand-4)]',\n\n          'text-brand-11',\n          'ring-brand-9',\n        ],\n        red: [\n          '[--button-solid-bg:var(--color-red-9)]',\n\n          '[--button-subtle-bg:var(--color-red-4)]',\n          '[--button-subtle-hover-bg:var(--color-red-5)]',\n\n          '[--button-surface-bg:var(--color-red-4)]',\n          '[--button-surface-hover-bg:var(--color-red-5)]',\n          '[--button-surface-border:var(--color-red-5)]',\n\n          '[--button-outline-hover-bg:var(--color-red-3)]',\n          '[--button-outline-border:var(--color-red-8)]',\n\n          '[--button-ghost-hover-bg:var(--color-red-4)]',\n\n          'text-red-11',\n          'ring-red-9',\n        ],\n        green: [\n          '[--button-solid-bg:var(--color-green-9)]',\n\n          '[--button-subtle-bg:var(--color-green-4)]',\n          '[--button-subtle-hover-bg:var(--color-green-5)]',\n\n          '[--button-surface-bg:var(--color-green-4)]',\n          '[--button-surface-hover-bg:var(--color-green-5)]',\n          '[--button-surface-border:var(--color-green-5)]',\n\n          '[--button-outline-hover-bg:var(--color-green-3)]',\n          '[--button-outline-border:var(--color-green-8)]',\n\n          '[--button-ghost-hover-bg:var(--color-green-4)]',\n\n          'text-green-11',\n          'ring-green-9',\n        ],\n        blue: [\n          '[--button-solid-bg:var(--color-blue-9)]',\n\n          '[--button-subtle-bg:var(--color-blue-4)]',\n          '[--button-subtle-hover-bg:var(--color-blue-5)]',\n\n          '[--button-surface-bg:var(--color-blue-4)]',\n          '[--button-surface-hover-bg:var(--color-blue-5)]',\n          '[--button-surface-border:var(--color-blue-5)]',\n\n          '[--button-outline-hover-bg:var(--color-blue-3)]',\n          '[--button-outline-border:var(--color-blue-8)]',\n\n          '[--button-ghost-hover-bg:var(--color-blue-4)]',\n\n          'text-blue-11',\n          'ring-blue-9',\n        ],\n        teal: [\n          '[--button-solid-bg:var(--color-teal-9)]',\n\n          '[--button-subtle-bg:var(--color-teal-4)]',\n          '[--button-subtle-hover-bg:var(--color-teal-5)]',\n\n          '[--button-surface-bg:var(--color-teal-4)]',\n          '[--button-surface-hover-bg:var(--color-teal-5)]',\n          '[--button-surface-border:var(--color-teal-5)]',\n\n          '[--button-outline-hover-bg:var(--color-teal-3)]',\n          '[--button-outline-border:var(--color-teal-8)]',\n\n          '[--button-ghost-hover-bg:var(--color-teal-4)]',\n\n          'text-teal-11',\n          'ring-teal-9',\n        ],\n        pink: [\n          '[--button-solid-bg:var(--color-pink-9)]',\n\n          '[--button-subtle-bg:var(--color-pink-4)]',\n          '[--button-subtle-hover-bg:var(--color-pink-5)]',\n\n          '[--button-surface-bg:var(--color-pink-4)]',\n          '[--button-surface-hover-bg:var(--color-pink-5)]',\n          '[--button-surface-border:var(--color-pink-5)]',\n\n          '[--button-outline-hover-bg:var(--color-pink-3)]',\n          '[--button-outline-border:var(--color-pink-8)]',\n\n          '[--button-ghost-hover-bg:var(--color-pink-4)]',\n\n          'text-pink-11',\n          'ring-pink-9',\n        ],\n        purple: [\n          '[--button-solid-bg:var(--color-purple-9)]',\n\n          '[--button-subtle-bg:var(--color-purple-4)]',\n          '[--button-subtle-hover-bg:var(--color-purple-5)]',\n\n          '[--button-surface-bg:var(--color-purple-4)]',\n          '[--button-surface-hover-bg:var(--color-purple-5)]',\n          '[--button-surface-border:var(--color-purple-5)]',\n\n          '[--button-outline-hover-bg:var(--color-purple-3)]',\n          '[--button-outline-border:var(--color-purple-8)]',\n\n          '[--button-ghost-hover-bg:var(--color-purple-4)]',\n\n          'text-purple-11',\n          'ring-purple-9',\n        ],\n        cyan: [\n          '[--button-solid-bg:var(--color-cyan-9)]',\n\n          '[--button-subtle-bg:var(--color-cyan-4)]',\n          '[--button-subtle-hover-bg:var(--color-cyan-5)]',\n\n          '[--button-surface-bg:var(--color-cyan-4)]',\n          '[--button-surface-hover-bg:var(--color-cyan-5)]',\n          '[--button-surface-border:var(--color-cyan-5)]',\n\n          '[--button-outline-hover-bg:var(--color-cyan-3)]',\n          '[--button-outline-border:var(--color-cyan-8)]',\n\n          '[--button-ghost-hover-bg:var(--color-cyan-4)]',\n\n          'text-cyan-11',\n          'ring-cyan-9',\n        ],\n        orange: [\n          '[--button-solid-bg:var(--color-orange-9)]',\n\n          '[--button-subtle-bg:var(--color-orange-4)]',\n          '[--button-subtle-hover-bg:var(--color-orange-5)]',\n\n          '[--button-surface-bg:var(--color-orange-4)]',\n          '[--button-surface-hover-bg:var(--color-orange-5)]',\n          '[--button-surface-border:var(--color-orange-5)]',\n\n          '[--button-outline-hover-bg:var(--color-orange-3)]',\n          '[--button-outline-border:var(--color-orange-8)]',\n\n          '[--button-ghost-hover-bg:var(--color-orange-4)]',\n\n          'text-orange-11',\n          'ring-orange-9',\n        ],\n        brown: [\n          '[--button-solid-bg:var(--color-brown-9)]',\n\n          '[--button-subtle-bg:var(--color-brown-4)]',\n          '[--button-subtle-hover-bg:var(--color-brown-5)]',\n\n          '[--button-surface-bg:var(--color-brown-4)]',\n          '[--button-surface-hover-bg:var(--color-brown-5)]',\n          '[--button-surface-border:var(--color-brown-5)]',\n\n          '[--button-outline-hover-bg:var(--color-brown-3)]',\n          '[--button-outline-border:var(--color-brown-8)]',\n\n          '[--button-ghost-hover-bg:var(--color-brown-4)]',\n\n          'text-brown-11',\n          'ring-brown-9',\n        ],\n        yellow: [\n          '[--button-solid-bg:var(--color-yellow-9)]',\n\n          '[--button-subtle-bg:var(--color-yellow-4)]',\n          '[--button-subtle-hover-bg:var(--color-yellow-5)]',\n\n          '[--button-surface-bg:var(--color-yellow-4)]',\n          '[--button-surface-hover-bg:var(--color-yellow-5)]',\n          '[--button-surface-border:var(--color-yellow-5)]',\n\n          '[--button-outline-hover-bg:var(--color-yellow-3)]',\n          '[--button-outline-border:var(--color-yellow-8)]',\n\n          '[--button-ghost-hover-bg:var(--color-yellow-4)]',\n\n          'text-yellow-11',\n          'ring-yellow-9',\n        ],\n        amber: [\n          '[--button-solid-bg:var(--color-amber-9)]',\n\n          '[--button-subtle-bg:var(--color-amber-4)]',\n          '[--button-subtle-hover-bg:var(--color-amber-5)]',\n\n          '[--button-surface-bg:var(--color-amber-4)]',\n          '[--button-surface-hover-bg:var(--color-amber-5)]',\n          '[--button-surface-border:var(--color-amber-5)]',\n\n          '[--button-outline-hover-bg:var(--color-amber-3)]',\n          '[--button-outline-border:var(--color-amber-8)]',\n\n          '[--button-ghost-hover-bg:var(--color-amber-4)]',\n\n          'text-amber-11',\n          'ring-amber-9',\n        ],\n      },\n      variant: {\n        solid: [\n          'bg-(--button-solid-bg)',\n          'hover:bg-(--button-solid-bg)/90',\n          'expanded:bg-(--button-solid-bg)/90',\n\n          'data-disabled:hover:bg-(--button-solid-bg)',\n          'data-disabled:expanded:bg-(--button-solid-bg)',\n\n          'border-transparent',\n\n          'text-white',\n        ],\n        subtle: [\n          'bg-(--button-subtle-bg)',\n          'hover:bg-(--button-subtle-hover-bg)',\n          'expanded:bg-(--button-subtle-hover-bg)',\n\n          'border-transparent',\n\n          'data-disabled:hover:bg-(--button-subtle-bg)',\n          'data-disabled:expanded:bg-(--button-subtle-bg)',\n        ],\n        surface: [\n          'bg-(--button-surface-bg)',\n          'hover:bg-(--button-surface-hover-bg)',\n          'expanded:bg-(--button-surface-hover-bg)',\n\n          'border',\n          'border-(--button-surface-border)',\n\n          'data-disabled:hover:bg-(--button-surface-bg)',\n          'data-disabled:expanded:bg-(--button-surface-bg)',\n        ],\n        outline: [\n          'bg-transparent',\n          'hover:bg-(--button-outline-hover-bg)',\n          'expanded:bg-(--button-outline-hover-bg)',\n\n          'border',\n          'border-(--button-outline-border)',\n\n          'data-disabled:hover:bg-transparent',\n          'data-disabled:expanded:bg-transparent',\n        ],\n        ghost: [\n          'hover:bg-(--button-ghost-hover-bg)',\n          'expanded:bg-(--button-ghost-hover-bg)',\n\n          'data-disabled:hover:bg-transparent',\n          'data-disabled:expanded:bg-transparent',\n        ],\n        plain: [],\n      },\n      size: {\n        '3xs': [\n          'h-5',\n          'min-w-5',\n\n          'text-2xs',\n\n          'px-1.5',\n          'gap-1',\n\n          '[&_svg]:size-2.5',\n        ],\n        '2xs': [\n          'h-6',\n          'min-w-6',\n\n          'text-xs',\n\n          'px-2',\n          'gap-1',\n\n          '[&_svg]:size-3.5',\n        ],\n        xs: [\n          'h-8',\n          'min-w-8',\n\n          'text-xs',\n\n          'px-2.5',\n          'gap-1',\n\n          '[&_svg]:size-4',\n        ],\n        sm: [\n          'h-9',\n          'min-w-9',\n\n          'text-sm',\n\n          'px-3.5',\n          'gap-2',\n\n          '[&_svg]:size-4',\n        ],\n        md: [\n          'h-10',\n          'min-w-10',\n\n          'text-sm',\n\n          'px-4',\n          'gap-2',\n\n          '[&_svg]:size-5',\n        ],\n        lg: [\n          'h-11',\n          'min-w-11',\n\n          'text-base',\n\n          'px-5',\n          'gap-3',\n\n          '[&_svg]:size-5',\n        ],\n        xl: [\n          'h-12',\n          'min-w-12',\n\n          'text-base',\n\n          'px-6',\n          'gap-3',\n\n          '[&_svg]:size-5',\n        ],\n        '2xl': [\n          'h-16',\n          'min-w-16',\n\n          'text-lg',\n\n          'px-7',\n          'gap-3',\n\n          '[&_svg]:size-6',\n        ],\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'solid',\n        colorScheme: 'gray',\n        className: ['text-white', 'dark:text-black'],\n      },\n      // {\n      //   variant: 'outline',\n      //   colorScheme: 'gray',\n      //   className: ['bg-white', 'dark:bg-black'],\n      // },\n      {\n        variant: 'solid',\n        colorScheme: 'yellow',\n        className: ['text-black'],\n      },\n      {\n        variant: 'solid',\n        colorScheme: 'amber',\n        className: ['text-black'],\n      },\n    ],\n    defaultVariants: {\n      colorScheme: buttonDefaultVariants.colorScheme,\n      size: buttonDefaultVariants.size,\n      variant: buttonDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AA0BA,MAAa,wBAAkD;CAC7D,aAAa;CACb,MAAM;CACN,SAAS;AACX;;;;;AAMA,MAAa,iBAAiB,IAC5B;CACE;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CAOA;CACA;CACA;CAEA;CAEA;CACA;CAEA;CAEA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IAEA;IACA;IAEA;IACA;IACA;IAEA;IACA;IAEA;IAEA;IACA;GACF;GACA,OAAO;IACL;IAEA;IACA;IAEA;IACA;IACA;IAEA;IACA;IAEA;IAEA;IACA;GACF;GACA,KAAK;IACH;IAEA;IACA;IAEA;IACA;IACA;IAEA;IACA;IAEA;IAEA;IACA;GACF;GACA,OAAO;IACL;IAEA;IACA;IAEA;IACA;IACA;IAEA;IACA;IAEA;IAEA;IACA;GACF;GACA,MAAM;IACJ;IAEA;IACA;IAEA;IACA;IACA;IAEA;IACA;IAEA;IAEA;IACA;GACF;GACA,MAAM;IACJ;IAEA;IACA;IAEA;IACA;IACA;IAEA;IACA;IAEA;IAEA;IACA;GACF;GACA,MAAM;IACJ;IAEA;IACA;IAEA;IACA;IACA;IAEA;IACA;IAEA;IAEA;IACA;GACF;GACA,QAAQ;IACN;IAEA;IACA;IAEA;IACA;IACA;IAEA;IACA;IAEA;IAEA;IACA;GACF;GACA,MAAM;IACJ;IAEA;IACA;IAEA;IACA;IACA;IAEA;IACA;IAEA;IAEA;IACA;GACF;GACA,QAAQ;IACN;IAEA;IACA;IAEA;IACA;IACA;IAEA;IACA;IAEA;IAEA;IACA;GACF;GACA,OAAO;IACL;IAEA;IACA;IAEA;IACA;IACA;IAEA;IACA;IAEA;IAEA;IACA;GACF;GACA,QAAQ;IACN;IAEA;IACA;IAEA;IACA;IACA;IAEA;IACA;IAEA;IAEA;IACA;GACF;GACA,OAAO;IACL;IAEA;IACA;IAEA;IACA;IACA;IAEA;IACA;IAEA;IAEA;IACA;GACF;EACF;EACA,SAAS;GACP,OAAO;IACL;IACA;IACA;IAEA;IACA;IAEA;IAEA;GACF;GACA,QAAQ;IACN;IACA;IACA;IAEA;IAEA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IAEA;IACA;IAEA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IAEA;IACA;IAEA;IACA;GACF;GACA,OAAO;IACL;IACA;IAEA;IACA;GACF;GACA,OAAO,CAAC;EACV;EACA,MAAM;GACJ,OAAO;IACL;IACA;IAEA;IAEA;IACA;IAEA;GACF;GACA,OAAO;IACL;IACA;IAEA;IAEA;IACA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;IAEA;GACF;GACA,OAAO;IACL;IACA;IAEA;IAEA;IACA;IAEA;GACF;EACF;CACF;CACA,kBAAkB;EAChB;GACE,SAAS;GACT,aAAa;GACb,WAAW,CAAC,cAAc,iBAAiB;EAC7C;EAMA;GACE,SAAS;GACT,aAAa;GACb,WAAW,CAAC,YAAY;EAC1B;EACA;GACE,SAAS;GACT,aAAa;GACb,WAAW,CAAC,YAAY;EAC1B;CACF;CACA,iBAAiB;EACf,aAAa,sBAAsB;EACnC,MAAM,sBAAsB;EAC5B,SAAS,sBAAsB;CACjC;AACF,CACF"}

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

@@ -2,7 +2,7 @@ import { ButtonVariants } from "./button-variants.js";
 import { IconProps } from "../../display/icon/icon.js";
 import "../../display/icon/index.js";
 import { Button as Button$1 } from "@base-ui/react/button";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 //#region src/components/buttons/button/button.d.ts
 export type ButtonProps = MergeOverride<Button$1.Props, ButtonVariants & {
   /**

package/dist/components/buttons/button/button.js

@@ -5,7 +5,7 @@ import { buttonVariants } from "./button-variants.js";
 import { Icon } from "../../display/icon/icon.js";
 import { Spinner } from "../../feedback/spinner/spinner.js";
 import { Button as Button$1 } from "@base-ui/react/button";
-import { createSplitProps, mergeBooleansOr } from "@lucasbernardosn/utils";
+import { createSplitProps, mergeBooleansOr } from "@lucasbernardosn/ts-utils";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/buttons/button/button.tsx
 const splitVariantProps = createSplitProps();

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":["BaseButton"],"sources":["../../../../src/components/buttons/button/button.tsx"],"sourcesContent":["import { Button as BaseButton } from '@base-ui/react/button';\nimport {\n  createSplitProps,\n  type MergeOverride,\n  mergeBooleansOr,\n} from '@lucasbernardosn/utils';\nimport { Icon, type IconProps } from '#components/display/icon';\nimport { Spinner } from '#components/feedback/spinner';\nimport {\n  mergeStateClassNames,\n  mergeTwClassNames,\n  normalizeDataAttr,\n} from '#utils';\nimport { type ButtonVariants, buttonVariants } from './button-variants';\n\nexport type ButtonProps = MergeOverride<\n  BaseButton.Props,\n  ButtonVariants & {\n    /**\n     * Ícone ao lado do texto, no tamanho definido pelo `size`.\n     */\n    icon?: IconProps['render'];\n    /**\n     * Lado do texto em que o `icon` aparece.\n     *\n     * @default 'left'\n     */\n    iconPosition?: 'left' | 'right';\n    /**\n     * Mostra um spinner no lugar do conteúdo e desabilita o botão. O conteúdo continua no\n     * layout, invisível, para a largura do botão não mudar.\n     *\n     * @default false\n     */\n    loading?: boolean;\n  }\n>;\n\nexport type ButtonState = BaseButton.State;\n\nconst splitVariantProps = createSplitProps<ButtonVariants>();\n\n/**\n * Botão da lib. Desabilitado (ou em `loading`), continua focável, para o leitor de tela e a\n * navegação por teclado não perderem o botão de vista.\n *\n * O `type` padrão é `button`: para enviar um formulário, passe `type=\"submit\"`. Para navegação,\n * use um link, não o `render` com `<a>`: o Button impõe a semântica de botão e o link perderia\n * o \"abrir em nova aba\" e a navegação do router.\n *\n * @example\n * ```tsx\n * <Button\n *   colorScheme=\"brand\"\n *   icon={<PlusIcon />}\n * >\n *   Adicionar\n * </Button>\n * ```\n */\nexport const Button = (props: ButtonProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n    'size',\n    'variant',\n  ]);\n\n  const {\n    className,\n    loading,\n    children,\n    disabled,\n    icon,\n    iconPosition = 'left',\n    ...rest\n  } = elementProps;\n\n  return (\n    <BaseButton\n      data-component=\"Button\"\n      type=\"button\"\n      disabled={normalizeDataAttr(mergeBooleansOr(disabled, loading))}\n      data-loading={normalizeDataAttr(loading)}\n      aria-busy={normalizeDataAttr(loading)}\n      focusableWhenDisabled={true}\n      className={mergeStateClassNames(buttonVariants(variantProps), className)}\n      {...rest}\n    >\n      {loading ? (\n        <>\n          <Spinner\n            aria-hidden={true}\n            className={mergeTwClassNames([\n              'absolute',\n\n              'border-r-current',\n              'border-b-current',\n            ])}\n          />\n\n          <span\n            className={mergeTwClassNames([\n              'inline-flex',\n              'items-center',\n              // Herda o `gap` do botão, que precisa ser o pai direto no DOM: um\n              // wrapper no meio (mesmo com `display: contents`) zeraria o espaço\n              // entre ícone e texto, e o botão encolheria no loading.\n              'gap-[inherit]',\n\n              // Some da tela, mas continua no layout (a largura não muda) e na árvore de\n              // acessibilidade: o texto segue sendo o nome do botão. Com `invisible`, o\n              // leitor de tela ouviria um botão sem nome.\n              'opacity-0',\n            ])}\n          >\n            <ButtonContent\n              icon={icon}\n              iconPosition={iconPosition}\n            >\n              {children}\n            </ButtonContent>\n          </span>\n        </>\n      ) : (\n        <ButtonContent\n          icon={icon}\n          iconPosition={iconPosition}\n        >\n          {children}\n        </ButtonContent>\n      )}\n    </BaseButton>\n  );\n};\n\nButton.displayName = 'Button';\n\nconst ButtonContent = (\n  props: Pick<ButtonProps, 'children' | 'icon' | 'iconPosition'>,\n) => {\n  const { children, icon, iconPosition = 'left' } = props;\n\n  return (\n    <>\n      {icon && iconPosition === 'left' && <Icon render={icon} />}\n\n      {children}\n\n      {icon && iconPosition === 'right' && <Icon render={icon} />}\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;AAwCA,MAAM,oBAAoB,iBAAiC;;;;;;;;;;;;;;;;;;;AAoB3D,MAAa,UAAU,UAAuB;CAC5C,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO;EAC5D;EACA;EACA;CACF,CAAC;CAED,MAAM,EACJ,WACA,SACA,UACA,UACA,MACA,eAAe,QACf,GAAG,SACD;CAEJ,OACE,oBAACA,UAAD;EACE,kBAAe;EACf,MAAK;EACL,UAAU,kBAAkB,gBAAgB,UAAU,OAAO,CAAC;EAC9D,gBAAc,kBAAkB,OAAO;EACvC,aAAW,kBAAkB,OAAO;EACpC,uBAAuB;EACvB,WAAW,qBAAqB,eAAe,YAAY,GAAG,SAAS;EACvE,GAAI;EAEH,UAAA,UACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;GACE,eAAa;GACb,WAAW,kBAAkB;IAC3B;IAEA;IACA;GACF,CAAC;EACF,CAAA,GAED,oBAAC,QAAD;GACE,WAAW,kBAAkB;IAC3B;IACA;IAIA;IAKA;GACF,CAAC;GAED,UAAA,oBAAC,eAAD;IACQ;IACQ;IAEb;GACY,CAAA;EACX,CAAA,CACN,EAAA,CAAA,IAEF,oBAAC,eAAD;GACQ;GACQ;GAEb;EACY,CAAA;CAEP,CAAA;AAEhB;AAEA,OAAO,cAAc;AAErB,MAAM,iBACJ,UACG;CACH,MAAM,EAAE,UAAU,MAAM,eAAe,WAAW;CAElD,OACE,qBAAA,UAAA,EAAA,UAAA;EACG,QAAQ,iBAAiB,UAAU,oBAAC,MAAD,EAAM,QAAQ,KAAO,CAAA;EAExD;EAEA,QAAQ,iBAAiB,WAAW,oBAAC,MAAD,EAAM,QAAQ,KAAO,CAAA;CAC1D,EAAA,CAAA;AAEN"}
+{"version":3,"file":"button.js","names":["BaseButton"],"sources":["../../../../src/components/buttons/button/button.tsx"],"sourcesContent":["import { Button as BaseButton } from '@base-ui/react/button';\nimport {\n  createSplitProps,\n  type MergeOverride,\n  mergeBooleansOr,\n} from '@lucasbernardosn/ts-utils';\nimport { Icon, type IconProps } from '#components/display/icon';\nimport { Spinner } from '#components/feedback/spinner';\nimport {\n  mergeStateClassNames,\n  mergeTwClassNames,\n  normalizeDataAttr,\n} from '#utils';\nimport { type ButtonVariants, buttonVariants } from './button-variants';\n\nexport type ButtonProps = MergeOverride<\n  BaseButton.Props,\n  ButtonVariants & {\n    /**\n     * Ícone ao lado do texto, no tamanho definido pelo `size`.\n     */\n    icon?: IconProps['render'];\n    /**\n     * Lado do texto em que o `icon` aparece.\n     *\n     * @default 'left'\n     */\n    iconPosition?: 'left' | 'right';\n    /**\n     * Mostra um spinner no lugar do conteúdo e desabilita o botão. O conteúdo continua no\n     * layout, invisível, para a largura do botão não mudar.\n     *\n     * @default false\n     */\n    loading?: boolean;\n  }\n>;\n\nexport type ButtonState = BaseButton.State;\n\nconst splitVariantProps = createSplitProps<ButtonVariants>();\n\n/**\n * Botão da lib. Desabilitado (ou em `loading`), continua focável, para o leitor de tela e a\n * navegação por teclado não perderem o botão de vista.\n *\n * O `type` padrão é `button`: para enviar um formulário, passe `type=\"submit\"`. Para navegação,\n * use um link, não o `render` com `<a>`: o Button impõe a semântica de botão e o link perderia\n * o \"abrir em nova aba\" e a navegação do router.\n *\n * @example\n * ```tsx\n * <Button\n *   colorScheme=\"brand\"\n *   icon={<PlusIcon />}\n * >\n *   Adicionar\n * </Button>\n * ```\n */\nexport const Button = (props: ButtonProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n    'size',\n    'variant',\n  ]);\n\n  const {\n    className,\n    loading,\n    children,\n    disabled,\n    icon,\n    iconPosition = 'left',\n    ...rest\n  } = elementProps;\n\n  return (\n    <BaseButton\n      data-component=\"Button\"\n      type=\"button\"\n      disabled={normalizeDataAttr(mergeBooleansOr(disabled, loading))}\n      data-loading={normalizeDataAttr(loading)}\n      aria-busy={normalizeDataAttr(loading)}\n      focusableWhenDisabled={true}\n      className={mergeStateClassNames(buttonVariants(variantProps), className)}\n      {...rest}\n    >\n      {loading ? (\n        <>\n          <Spinner\n            aria-hidden={true}\n            className={mergeTwClassNames([\n              'absolute',\n\n              'border-r-current',\n              'border-b-current',\n            ])}\n          />\n\n          <span\n            className={mergeTwClassNames([\n              'inline-flex',\n              'items-center',\n              // Herda o `gap` do botão, que precisa ser o pai direto no DOM: um\n              // wrapper no meio (mesmo com `display: contents`) zeraria o espaço\n              // entre ícone e texto, e o botão encolheria no loading.\n              'gap-[inherit]',\n\n              // Some da tela, mas continua no layout (a largura não muda) e na árvore de\n              // acessibilidade: o texto segue sendo o nome do botão. Com `invisible`, o\n              // leitor de tela ouviria um botão sem nome.\n              'opacity-0',\n            ])}\n          >\n            <ButtonContent\n              icon={icon}\n              iconPosition={iconPosition}\n            >\n              {children}\n            </ButtonContent>\n          </span>\n        </>\n      ) : (\n        <ButtonContent\n          icon={icon}\n          iconPosition={iconPosition}\n        >\n          {children}\n        </ButtonContent>\n      )}\n    </BaseButton>\n  );\n};\n\nButton.displayName = 'Button';\n\nconst ButtonContent = (\n  props: Pick<ButtonProps, 'children' | 'icon' | 'iconPosition'>,\n) => {\n  const { children, icon, iconPosition = 'left' } = props;\n\n  return (\n    <>\n      {icon && iconPosition === 'left' && <Icon render={icon} />}\n\n      {children}\n\n      {icon && iconPosition === 'right' && <Icon render={icon} />}\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;AAwCA,MAAM,oBAAoB,iBAAiC;;;;;;;;;;;;;;;;;;;AAoB3D,MAAa,UAAU,UAAuB;CAC5C,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO;EAC5D;EACA;EACA;CACF,CAAC;CAED,MAAM,EACJ,WACA,SACA,UACA,UACA,MACA,eAAe,QACf,GAAG,SACD;CAEJ,OACE,oBAACA,UAAD;EACE,kBAAe;EACf,MAAK;EACL,UAAU,kBAAkB,gBAAgB,UAAU,OAAO,CAAC;EAC9D,gBAAc,kBAAkB,OAAO;EACvC,aAAW,kBAAkB,OAAO;EACpC,uBAAuB;EACvB,WAAW,qBAAqB,eAAe,YAAY,GAAG,SAAS;EACvE,GAAI;EAEH,UAAA,UACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;GACE,eAAa;GACb,WAAW,kBAAkB;IAC3B;IAEA;IACA;GACF,CAAC;EACF,CAAA,GAED,oBAAC,QAAD;GACE,WAAW,kBAAkB;IAC3B;IACA;IAIA;IAKA;GACF,CAAC;GAED,UAAA,oBAAC,eAAD;IACQ;IACQ;IAEb;GACY,CAAA;EACX,CAAA,CACN,EAAA,CAAA,IAEF,oBAAC,eAAD;GACQ;GACQ;GAEb;EACY,CAAA;CAEP,CAAA;AAEhB;AAEA,OAAO,cAAc;AAErB,MAAM,iBACJ,UACG;CACH,MAAM,EAAE,UAAU,MAAM,eAAe,WAAW;CAElD,OACE,qBAAA,UAAA,EAAA,UAAA;EACG,QAAQ,iBAAiB,UAAU,oBAAC,MAAD,EAAM,QAAQ,KAAO,CAAA;EAExD;EAEA,QAAQ,iBAAiB,WAAW,oBAAC,MAAD,EAAM,QAAQ,KAAO,CAAA;CAC1D,EAAA,CAAA;AAEN"}

package/dist/components/buttons/clipboard-button/clipboard-button.d.ts

@@ -3,7 +3,7 @@ import "../icon-button/index.js";
 import { UseClipboardProps } from "../../display/clipboard/use-clipboard.js";
 import { index_parts_d_exports } from "../../display/clipboard/index.parts.js";
 import "../../display/clipboard/index.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 //#region src/components/buttons/clipboard-button/clipboard-button.d.ts
 export type ClipboardButtonProps = MergeOverride<Omit<IconButtonProps, 'icon'>, UseClipboardProps>;
 /**

package/dist/components/buttons/clipboard-button/clipboard-button.js

@@ -3,7 +3,7 @@ import { IconButton } from "../icon-button/icon-button.js";
 import { ClipboardIndicator } from "../../display/clipboard/clipboard-indicator.js";
 import { ClipboardRoot } from "../../display/clipboard/clipboard-root.js";
 import { ClipboardTrigger } from "../../display/clipboard/clipboard-trigger.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { jsx } from "react/jsx-runtime";
 import * as ZagClipboard from "@zag-js/clipboard";
 //#region src/components/buttons/clipboard-button/clipboard-button.tsx

package/dist/components/buttons/clipboard-button/clipboard-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"clipboard-button.js","names":["Clipboard.Root","Clipboard.Trigger","Clipboard.Indicator"],"sources":["../../../../src/components/buttons/clipboard-button/clipboard-button.tsx"],"sourcesContent":["import { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport * as ZagClipboard from '@zag-js/clipboard';\nimport {\n  IconButton,\n  type IconButtonProps,\n} from '#components/buttons/icon-button';\nimport { Clipboard } from '#components/display/clipboard';\nimport { mergeTwClassNames } from '#utils';\n\nexport type ClipboardButtonProps = MergeOverride<\n  Omit<IconButtonProps, 'icon'>,\n  Clipboard.UseClipboardProps\n>;\n\nconst splitClipboardProps = createSplitProps<Clipboard.UseClipboardProps>();\n\n/**\n * Botão de ícone que copia `value` para a área de transferência e troca o ícone enquanto o\n * destaque de cópia dura. Aceita as opções do `Clipboard.Root` e as props do `IconButton`.\n *\n * No layout, se comporta como o próprio botão: `className` e posição em flex valem para ele. A\n * cópia é anunciada ao leitor de tela pelo `Clipboard.Root`, com o `triggerLabel` das\n * `translations`.\n *\n * @example\n * ```tsx\n * <ClipboardButton\n *   aria-label=\"Copiar link\"\n *   value=\"https://exemplo.com.br\"\n * />\n * ```\n */\nexport const ClipboardButton = (props: ClipboardButtonProps) => {\n  const [clipboardProps, iconButtonProps] = splitClipboardProps(\n    props,\n    ZagClipboard.props,\n  );\n\n  return (\n    <Clipboard.Root\n      // Sem caixa própria: o botão é que ocupa o lugar no layout, e o `className` de quem usa\n      // (que vai para o botão) vale no flex do contêiner.\n      className={mergeTwClassNames(['contents'])}\n      {...clipboardProps}\n    >\n      <Clipboard.Trigger\n        render={\n          <IconButton\n            variant=\"subtle\"\n            colorScheme=\"gray\"\n            icon={<Clipboard.Indicator />}\n            {...iconButtonProps}\n          />\n        }\n      />\n    </Clipboard.Root>\n  );\n};\n\nClipboardButton.displayName = 'ClipboardButton';\n"],"mappings":";;;;;;;;;AAcA,MAAM,sBAAsB,iBAA8C;;;;;;;;;;;;;;;;;AAkB1E,MAAa,mBAAmB,UAAgC;CAC9D,MAAM,CAAC,gBAAgB,mBAAmB,oBACxC,OACA,aAAa,KACf;CAEA,OACE,oBAACA,eAAD;EAGE,WAAW,kBAAkB,CAAC,UAAU,CAAC;EACzC,GAAI;EAEJ,UAAA,oBAACC,kBAAD,EACE,QACE,oBAAC,YAAD;GACE,SAAQ;GACR,aAAY;GACZ,MAAM,oBAACC,oBAAD,CAAsB,CAAA;GAC5B,GAAI;EACL,CAAA,EAEJ,CAAA;CACa,CAAA;AAEpB;AAEA,gBAAgB,cAAc"}
+{"version":3,"file":"clipboard-button.js","names":["Clipboard.Root","Clipboard.Trigger","Clipboard.Indicator"],"sources":["../../../../src/components/buttons/clipboard-button/clipboard-button.tsx"],"sourcesContent":["import {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport * as ZagClipboard from '@zag-js/clipboard';\nimport {\n  IconButton,\n  type IconButtonProps,\n} from '#components/buttons/icon-button';\nimport { Clipboard } from '#components/display/clipboard';\nimport { mergeTwClassNames } from '#utils';\n\nexport type ClipboardButtonProps = MergeOverride<\n  Omit<IconButtonProps, 'icon'>,\n  Clipboard.UseClipboardProps\n>;\n\nconst splitClipboardProps = createSplitProps<Clipboard.UseClipboardProps>();\n\n/**\n * Botão de ícone que copia `value` para a área de transferência e troca o ícone enquanto o\n * destaque de cópia dura. Aceita as opções do `Clipboard.Root` e as props do `IconButton`.\n *\n * No layout, se comporta como o próprio botão: `className` e posição em flex valem para ele. A\n * cópia é anunciada ao leitor de tela pelo `Clipboard.Root`, com o `triggerLabel` das\n * `translations`.\n *\n * @example\n * ```tsx\n * <ClipboardButton\n *   aria-label=\"Copiar link\"\n *   value=\"https://exemplo.com.br\"\n * />\n * ```\n */\nexport const ClipboardButton = (props: ClipboardButtonProps) => {\n  const [clipboardProps, iconButtonProps] = splitClipboardProps(\n    props,\n    ZagClipboard.props,\n  );\n\n  return (\n    <Clipboard.Root\n      // Sem caixa própria: o botão é que ocupa o lugar no layout, e o `className` de quem usa\n      // (que vai para o botão) vale no flex do contêiner.\n      className={mergeTwClassNames(['contents'])}\n      {...clipboardProps}\n    >\n      <Clipboard.Trigger\n        render={\n          <IconButton\n            variant=\"subtle\"\n            colorScheme=\"gray\"\n            icon={<Clipboard.Indicator />}\n            {...iconButtonProps}\n          />\n        }\n      />\n    </Clipboard.Root>\n  );\n};\n\nClipboardButton.displayName = 'ClipboardButton';\n"],"mappings":";;;;;;;;;AAiBA,MAAM,sBAAsB,iBAA8C;;;;;;;;;;;;;;;;;AAkB1E,MAAa,mBAAmB,UAAgC;CAC9D,MAAM,CAAC,gBAAgB,mBAAmB,oBACxC,OACA,aAAa,KACf;CAEA,OACE,oBAACA,eAAD;EAGE,WAAW,kBAAkB,CAAC,UAAU,CAAC;EACzC,GAAI;EAEJ,UAAA,oBAACC,kBAAD,EACE,QACE,oBAAC,YAAD;GACE,SAAQ;GACR,aAAY;GACZ,MAAM,oBAACC,oBAAD,CAAsB,CAAA;GAC5B,GAAI;EACL,CAAA,EAEJ,CAAA;CACa,CAAA;AAEpB;AAEA,gBAAgB,cAAc"}

package/dist/components/buttons/close-button/close-button.d.ts

@@ -1,6 +1,6 @@
 import { IconButtonProps } from "../icon-button/icon-button.js";
 import "../icon-button/index.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 //#region src/components/buttons/close-button/close-button.d.ts
 export type CloseButtonProps = MergeOverride<Omit<IconButtonProps, 'icon'>, {
   /**

package/dist/components/buttons/close-button/close-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"close-button.js","names":[],"sources":["../../../../src/components/buttons/close-button/close-button.tsx"],"sourcesContent":["import type { MergeOverride } from '@lucasbernardosn/utils';\nimport { XIcon } from '@phosphor-icons/react';\nimport {\n  IconButton,\n  type IconButtonProps,\n} from '#components/buttons/icon-button';\n\nexport type CloseButtonProps = MergeOverride<\n  Omit<IconButtonProps, 'icon'>,\n  {\n    /**\n     * Nome do botão para o leitor de tela.\n     *\n     * @default 'Fechar'\n     */\n    'aria-label'?: string;\n  }\n>;\n\n/**\n * `IconButton` com X, para fechar um dialog, um drawer ou um aviso. Sai `ghost` e com o nome\n * \"Fechar\"; as outras props do `IconButton` valem igual.\n *\n * Não fecha nada sozinho: entra no `render` da parte que fecha.\n *\n * @example\n * ```tsx\n * <Dialog.Close render={<CloseButton />} />\n * ```\n */\nexport const CloseButton = (props: CloseButtonProps) => {\n  const { 'aria-label': ariaLabel = 'Fechar', ...rest } = props;\n\n  return (\n    <IconButton\n      data-component=\"CloseButton\"\n      variant=\"ghost\"\n      aria-label={ariaLabel}\n      icon={<XIcon />}\n      {...rest}\n    />\n  );\n};\n\nCloseButton.displayName = 'CloseButton';\n"],"mappings":";;;;;;;;;;;;;;;AA8BA,MAAa,eAAe,UAA4B;CACtD,MAAM,EAAE,cAAc,YAAY,UAAU,GAAG,SAAS;CAExD,OACE,oBAAC,YAAD;EACE,kBAAe;EACf,SAAQ;EACR,cAAY;EACZ,MAAM,oBAAC,OAAD,CAAQ,CAAA;EACd,GAAI;CACL,CAAA;AAEL;AAEA,YAAY,cAAc"}
+{"version":3,"file":"close-button.js","names":[],"sources":["../../../../src/components/buttons/close-button/close-button.tsx"],"sourcesContent":["import type { MergeOverride } from '@lucasbernardosn/ts-utils';\nimport { XIcon } from '@phosphor-icons/react';\nimport {\n  IconButton,\n  type IconButtonProps,\n} from '#components/buttons/icon-button';\n\nexport type CloseButtonProps = MergeOverride<\n  Omit<IconButtonProps, 'icon'>,\n  {\n    /**\n     * Nome do botão para o leitor de tela.\n     *\n     * @default 'Fechar'\n     */\n    'aria-label'?: string;\n  }\n>;\n\n/**\n * `IconButton` com X, para fechar um dialog, um drawer ou um aviso. Sai `ghost` e com o nome\n * \"Fechar\"; as outras props do `IconButton` valem igual.\n *\n * Não fecha nada sozinho: entra no `render` da parte que fecha.\n *\n * @example\n * ```tsx\n * <Dialog.Close render={<CloseButton />} />\n * ```\n */\nexport const CloseButton = (props: CloseButtonProps) => {\n  const { 'aria-label': ariaLabel = 'Fechar', ...rest } = props;\n\n  return (\n    <IconButton\n      data-component=\"CloseButton\"\n      variant=\"ghost\"\n      aria-label={ariaLabel}\n      icon={<XIcon />}\n      {...rest}\n    />\n  );\n};\n\nCloseButton.displayName = 'CloseButton';\n"],"mappings":";;;;;;;;;;;;;;;AA8BA,MAAa,eAAe,UAA4B;CACtD,MAAM,EAAE,cAAc,YAAY,UAAU,GAAG,SAAS;CAExD,OACE,oBAAC,YAAD;EACE,kBAAe;EACf,SAAQ;EACR,cAAY;EACZ,MAAM,oBAAC,OAAD,CAAQ,CAAA;EACd,GAAI;CACL,CAAA;AAEL;AAEA,YAAY,cAAc"}

package/dist/components/buttons/icon-button/icon-button.d.ts

@@ -3,7 +3,7 @@ import "../../display/icon/index.js";
 import { ButtonProps } from "../button/button.js";
 import "../button/index.js";
 import { IconButtonVariants } from "./icon-button-variants.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 //#region src/components/buttons/icon-button/icon-button.d.ts
 export type IconButtonProps = MergeOverride<Omit<ButtonProps, 'children' | 'icon' | 'iconPosition'>, IconButtonVariants & {
   /**

package/dist/components/buttons/icon-button/icon-button.js

@@ -2,7 +2,7 @@ import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js"
 import { Icon } from "../../display/icon/icon.js";
 import { Button } from "../button/button.js";
 import { iconButtonVariants } from "./icon-button-variants.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/buttons/icon-button/icon-button.tsx
 const splitVariantProps = createSplitProps();

package/dist/components/buttons/icon-button/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","names":[],"sources":["../../../../src/components/buttons/icon-button/icon-button.tsx"],"sourcesContent":["import { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { Button, type ButtonProps } from '#components/buttons/button';\nimport { Icon, type IconProps } from '#components/display/icon';\nimport { mergeStateClassNames } from '#utils';\nimport {\n  type IconButtonVariants,\n  iconButtonVariants,\n} from './icon-button-variants';\n\nexport type IconButtonProps = MergeOverride<\n  Omit<ButtonProps, 'children' | 'icon' | 'iconPosition'>,\n  IconButtonVariants & {\n    /**\n     * O que o botão faz (\"Fechar\", \"Editar pedido\"), não o nome do ícone. É o único nome do\n     * botão: o ícone sai do leitor de tela.\n     */\n    'aria-label': string;\n    /**\n     * Ícone do botão, no tamanho definido pelo `size`.\n     */\n    icon: NonNullable<IconProps['render']>;\n  }\n>;\n\nconst splitVariantProps = createSplitProps<IconButtonVariants>();\n\n/**\n * Botão quadrado só com ícone.\n *\n * O ícone sai do leitor de tela (o `Icon` é decorativo por padrão), então o tipo exige um\n * `aria-label` que diga o que o botão faz. Quem enxerga vê só o ícone: em barras com\n * vários botões, envolva cada um num tooltip com o mesmo texto.\n *\n * @example\n * ```tsx\n * <IconButton\n *   aria-label=\"Fechar\"\n *   icon={<XIcon />}\n * />\n * ```\n */\nexport const IconButton = (props: IconButtonProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'round',\n    'size',\n  ]);\n\n  const { className, icon, ...rest } = elementProps;\n\n  return (\n    <Button\n      data-component=\"IconButton\"\n      className={mergeStateClassNames(\n        iconButtonVariants(variantProps),\n        className,\n      )}\n      size={variantProps.size}\n      {...rest}\n    >\n      <Icon render={icon} />\n    </Button>\n  );\n};\n\nIconButton.displayName = 'IconButton';\n"],"mappings":";;;;;;;AAwBA,MAAM,oBAAoB,iBAAqC;;;;;;;;;;;;;;;;AAiB/D,MAAa,cAAc,UAA2B;CACpD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,SACA,MACF,CAAC;CAED,MAAM,EAAE,WAAW,MAAM,GAAG,SAAS;CAErC,OACE,oBAAC,QAAD;EACE,kBAAe;EACf,WAAW,qBACT,mBAAmB,YAAY,GAC/B,SACF;EACA,MAAM,aAAa;EACnB,GAAI;EAEJ,UAAA,oBAAC,MAAD,EAAM,QAAQ,KAAO,CAAA;CACf,CAAA;AAEZ;AAEA,WAAW,cAAc"}
+{"version":3,"file":"icon-button.js","names":[],"sources":["../../../../src/components/buttons/icon-button/icon-button.tsx"],"sourcesContent":["import {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { Button, type ButtonProps } from '#components/buttons/button';\nimport { Icon, type IconProps } from '#components/display/icon';\nimport { mergeStateClassNames } from '#utils';\nimport {\n  type IconButtonVariants,\n  iconButtonVariants,\n} from './icon-button-variants';\n\nexport type IconButtonProps = MergeOverride<\n  Omit<ButtonProps, 'children' | 'icon' | 'iconPosition'>,\n  IconButtonVariants & {\n    /**\n     * O que o botão faz (\"Fechar\", \"Editar pedido\"), não o nome do ícone. É o único nome do\n     * botão: o ícone sai do leitor de tela.\n     */\n    'aria-label': string;\n    /**\n     * Ícone do botão, no tamanho definido pelo `size`.\n     */\n    icon: NonNullable<IconProps['render']>;\n  }\n>;\n\nconst splitVariantProps = createSplitProps<IconButtonVariants>();\n\n/**\n * Botão quadrado só com ícone.\n *\n * O ícone sai do leitor de tela (o `Icon` é decorativo por padrão), então o tipo exige um\n * `aria-label` que diga o que o botão faz. Quem enxerga vê só o ícone: em barras com\n * vários botões, envolva cada um num tooltip com o mesmo texto.\n *\n * @example\n * ```tsx\n * <IconButton\n *   aria-label=\"Fechar\"\n *   icon={<XIcon />}\n * />\n * ```\n */\nexport const IconButton = (props: IconButtonProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'round',\n    'size',\n  ]);\n\n  const { className, icon, ...rest } = elementProps;\n\n  return (\n    <Button\n      data-component=\"IconButton\"\n      className={mergeStateClassNames(\n        iconButtonVariants(variantProps),\n        className,\n      )}\n      size={variantProps.size}\n      {...rest}\n    >\n      <Icon render={icon} />\n    </Button>\n  );\n};\n\nIconButton.displayName = 'IconButton';\n"],"mappings":";;;;;;;AA2BA,MAAM,oBAAoB,iBAAqC;;;;;;;;;;;;;;;;AAiB/D,MAAa,cAAc,UAA2B;CACpD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,SACA,MACF,CAAC;CAED,MAAM,EAAE,WAAW,MAAM,GAAG,SAAS;CAErC,OACE,oBAAC,QAAD;EACE,kBAAe;EACf,WAAW,qBACT,mBAAmB,YAAY,GAC/B,SACF;EACA,MAAM,aAAa;EACnB,GAAI;EAEJ,UAAA,oBAAC,MAAD,EAAM,QAAQ,KAAO,CAAA;CACf,CAAA;AAEZ;AAEA,WAAW,cAAc"}

package/dist/components/buttons/responsive-button/responsive-button.d.ts

@@ -1,7 +1,7 @@
 import { ButtonProps } from "../button/button.js";
 import "../button/index.js";
 import { Breakpoint } from "../../../hooks/use-breakpoint.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 //#region src/components/buttons/responsive-button/responsive-button.d.ts
 export type ResponsiveButtonProps = MergeOverride<ButtonProps, {
   /**

package/dist/components/buttons/responsive-button/responsive-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"responsive-button.js","names":[],"sources":["../../../../src/components/buttons/responsive-button/responsive-button.tsx"],"sourcesContent":["import type { MergeOverride } from '@lucasbernardosn/utils';\nimport { Button, type ButtonProps } from '#components/buttons/button';\nimport { IconButton } from '#components/buttons/icon-button';\nimport { type Breakpoint, useIsBreakpoint } from '#hooks';\n\nexport type ResponsiveButtonProps = MergeOverride<\n  ButtonProps,\n  {\n    /**\n     * Nome do botão abaixo do `breakpoint`, quando só o ícone fica. Sem ele, o nome é o\n     * `children`, se for texto; com um `children` que não é texto, passe o `aria-label`, ou o\n     * botão de ícone fica sem nome.\n     */\n    'aria-label'?: string;\n    /**\n     * A partir desta largura mostra o `Button` com texto; abaixo dela, só o `IconButton`.\n     *\n     * @default 'md'\n     */\n    breakpoint?: Breakpoint;\n    /**\n     * Ícone, mostrado nos dois formatos.\n     */\n    icon: NonNullable<ButtonProps['icon']>;\n  }\n>;\n\n/**\n * Botão com texto em telas largas e só com ícone nas estreitas.\n *\n * Na tela larga, o nome do botão é o texto visível; na estreita, o `aria-label` ou, sem ele, o\n * próprio texto. A troca remonta o botão: se ele estiver focado quando a largura cruza o\n * `breakpoint` (ao girar o celular, por exemplo), o foco se perde.\n *\n * @example\n * ```tsx\n * <ResponsiveButton icon={<PlusIcon />}>Novo pedido</ResponsiveButton>\n * ```\n */\nexport const ResponsiveButton = (props: ResponsiveButtonProps) => {\n  const { breakpoint = 'md', 'aria-label': ariaLabel, ...rest } = props;\n\n  const isBreakpoint = useIsBreakpoint(breakpoint);\n\n  /**\n   * O `aria-label` só vai para o `IconButton`: no `Button`, ele substituiria o texto visível\n   * como nome, e quem usa controle por voz fala o que vê.\n   */\n  const iconButtonLabel =\n    ariaLabel ?? (typeof rest.children === 'string' ? rest.children : '');\n\n  return isBreakpoint ? (\n    <Button {...rest} />\n  ) : (\n    <IconButton\n      aria-label={iconButtonLabel}\n      {...rest}\n    />\n  );\n};\n\nResponsiveButton.displayName = 'ResponsiveButton';\n"],"mappings":";;;;;;;;;;;;;;;;;AAuCA,MAAa,oBAAoB,UAAiC;CAChE,MAAM,EAAE,aAAa,MAAM,cAAc,WAAW,GAAG,SAAS;CAEhE,MAAM,eAAe,gBAAgB,UAAU;;;;;CAM/C,MAAM,kBACJ,cAAc,OAAO,KAAK,aAAa,WAAW,KAAK,WAAW;CAEpE,OAAO,eACL,oBAAC,QAAD,EAAQ,GAAI,KAAO,CAAA,IAEnB,oBAAC,YAAD;EACE,cAAY;EACZ,GAAI;CACL,CAAA;AAEL;AAEA,iBAAiB,cAAc"}
+{"version":3,"file":"responsive-button.js","names":[],"sources":["../../../../src/components/buttons/responsive-button/responsive-button.tsx"],"sourcesContent":["import type { MergeOverride } from '@lucasbernardosn/ts-utils';\nimport { Button, type ButtonProps } from '#components/buttons/button';\nimport { IconButton } from '#components/buttons/icon-button';\nimport { type Breakpoint, useIsBreakpoint } from '#hooks';\n\nexport type ResponsiveButtonProps = MergeOverride<\n  ButtonProps,\n  {\n    /**\n     * Nome do botão abaixo do `breakpoint`, quando só o ícone fica. Sem ele, o nome é o\n     * `children`, se for texto; com um `children` que não é texto, passe o `aria-label`, ou o\n     * botão de ícone fica sem nome.\n     */\n    'aria-label'?: string;\n    /**\n     * A partir desta largura mostra o `Button` com texto; abaixo dela, só o `IconButton`.\n     *\n     * @default 'md'\n     */\n    breakpoint?: Breakpoint;\n    /**\n     * Ícone, mostrado nos dois formatos.\n     */\n    icon: NonNullable<ButtonProps['icon']>;\n  }\n>;\n\n/**\n * Botão com texto em telas largas e só com ícone nas estreitas.\n *\n * Na tela larga, o nome do botão é o texto visível; na estreita, o `aria-label` ou, sem ele, o\n * próprio texto. A troca remonta o botão: se ele estiver focado quando a largura cruza o\n * `breakpoint` (ao girar o celular, por exemplo), o foco se perde.\n *\n * @example\n * ```tsx\n * <ResponsiveButton icon={<PlusIcon />}>Novo pedido</ResponsiveButton>\n * ```\n */\nexport const ResponsiveButton = (props: ResponsiveButtonProps) => {\n  const { breakpoint = 'md', 'aria-label': ariaLabel, ...rest } = props;\n\n  const isBreakpoint = useIsBreakpoint(breakpoint);\n\n  /**\n   * O `aria-label` só vai para o `IconButton`: no `Button`, ele substituiria o texto visível\n   * como nome, e quem usa controle por voz fala o que vê.\n   */\n  const iconButtonLabel =\n    ariaLabel ?? (typeof rest.children === 'string' ? rest.children : '');\n\n  return isBreakpoint ? (\n    <Button {...rest} />\n  ) : (\n    <IconButton\n      aria-label={iconButtonLabel}\n      {...rest}\n    />\n  );\n};\n\nResponsiveButton.displayName = 'ResponsiveButton';\n"],"mappings":";;;;;;;;;;;;;;;;;AAuCA,MAAa,oBAAoB,UAAiC;CAChE,MAAM,EAAE,aAAa,MAAM,cAAc,WAAW,GAAG,SAAS;CAEhE,MAAM,eAAe,gBAAgB,UAAU;;;;;CAM/C,MAAM,kBACJ,cAAc,OAAO,KAAK,aAAa,WAAW,KAAK,WAAW;CAEpE,OAAO,eACL,oBAAC,QAAD,EAAQ,GAAI,KAAO,CAAA,IAEnB,oBAAC,YAAD;EACE,cAAY;EACZ,GAAI;CACL,CAAA;AAEL;AAEA,iBAAiB,cAAc"}

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

@@ -0,0 +1,15 @@
+import { AriaLiveMessages, GroupBase } from "react-select";
+//#region src/components/collections/async-select/async-select-aria-messages.d.ts
+/**
+ * Anúncios do leitor de tela em pt-BR, no lugar dos em inglês do react-select. Sem isto, o
+ * campo falaria em dois idiomas com o resto da interface.
+ */
+export declare const getAsyncSelectAriaLiveMessages: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>() => AriaLiveMessages<Option, IsMulti, Group>;
+/**
+ * Resumo dos resultados anunciado quando a lista muda.
+ */
+export declare const getAsyncSelectScreenReaderStatus: (props: {
+  count: number;
+}) => string;
+//#endregion
+//# sourceMappingURL=async-select-aria-messages.d.ts.map

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

@@ -0,0 +1,51 @@
+//#region src/components/collections/async-select/async-select-aria-messages.ts
+/**
+* Anúncios do leitor de tela em pt-BR, no lugar dos em inglês do react-select. Sem isto, o
+* campo falaria em dois idiomas com o resto da interface.
+*/
+const getAsyncSelectAriaLiveMessages = () => ({
+	guidance: (props) => {
+		const { context, isSearchable, isMulti, tabSelectsValue, isInitialFocus } = props;
+		switch (context) {
+			case "menu": 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" : ""}.`;
+			case "input": return isInitialFocus ? `${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" : ""}.` : "";
+			case "value": return "Use as setas para a esquerda e para a direita para alternar entre os valores, Backspace remove o valor em foco.";
+			default: return "";
+		}
+	},
+	onChange: (props) => {
+		const { action, label = "", labels, isDisabled } = props;
+		switch (action) {
+			case "deselect-option":
+			case "pop-value":
+			case "remove-value": return `Opção ${label} removida.`;
+			case "clear": return "Todas as opções selecionadas foram removidas.";
+			case "initial-input-focus": return `${labels.length > 1 ? "Opções" : "Opção"} ${labels.join(", ")} selecionada.`;
+			case "select-option": return isDisabled ? `A opção ${label} está desabilitada. Escolha outra.` : `Opção ${label} selecionada.`;
+			default: return "";
+		}
+	},
+	onFocus: (props) => {
+		const { context, focused, options, label = "", selectValue, isDisabled } = props;
+		const { isSelected, isAppleDevice } = props;
+		const getArrayIndex = (items) => items.length > 0 ? `${items.indexOf(focused) + 1} de ${items.length}` : "";
+		if (context === "value" && selectValue) return `Valor ${label} em foco, ${getArrayIndex(selectValue)}.`;
+		if (context === "menu" && isAppleDevice) return `${label}${`${isSelected ? " selecionada" : ""}${isDisabled ? " desabilitada" : ""}`}, ${getArrayIndex(options)}.`;
+		return "";
+	},
+	onFilter: (props) => {
+		const { inputValue, resultsMessage } = props;
+		return `${resultsMessage}${inputValue ? ` para a busca ${inputValue}` : ""}.`;
+	}
+});
+/**
+* Resumo dos resultados anunciado quando a lista muda.
+*/
+const getAsyncSelectScreenReaderStatus = (props) => {
+	const { count } = props;
+	return `${count} ${count === 1 ? "resultado disponível" : "resultados disponíveis"}`;
+};
+//#endregion
+export { getAsyncSelectAriaLiveMessages, getAsyncSelectScreenReaderStatus };
+
+//# sourceMappingURL=async-select-aria-messages.js.map