npm - @lucasbernardosn/react-ui - Versions diffs - 0.2.0 → 0.3.0 - Mend

@lucasbernardosn/react-ui 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (868) hide show

package/README.md ADDED Viewed

@@ -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.js CHANGED Viewed

@@ -46,8 +46,8 @@ 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-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"
@@ -326,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 CHANGED Viewed

	@@ -1 +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-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;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"}
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-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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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/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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 {\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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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