@lucasbernardosn/react-ui 0.4.0 → 0.5.0

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

@@ -28,7 +28,7 @@ export declare const buttonDefaultVariants: Required<ButtonVariants>;
  * há um bloco por combinação de cor e `variant`.
  */
 export declare const buttonVariants: (props?: ({
-  colorScheme?: "gray" | "brand" | "red" | "green" | "blue" | "teal" | "pink" | "purple" | "cyan" | "orange" | "brown" | "yellow" | "amber" | null | undefined;
+  colorScheme?: "gray" | "accent" | "red" | "green" | "blue" | "teal" | "pink" | "purple" | "cyan" | "orange" | "brown" | "yellow" | "amber" | 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;

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

@@ -41,170 +41,170 @@ const buttonVariants = cva([
 			gray: [
 				"[--button-solid-bg:var(--color-black)]",
 				"dark:[--button-solid-bg:var(--color-white)]",
-				"[--button-subtle-bg:var(--color-gray-4)]",
-				"[--button-subtle-hover-bg:var(--color-gray-5)]",
-				"[--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-4)]",
-				"[--button-outline-border:var(--color-gray-6)]",
-				"[--button-ghost-hover-bg:var(--color-gray-4)]",
+				"[--button-subtle-bg:var(--gray-4)]",
+				"[--button-subtle-hover-bg:var(--gray-5)]",
+				"[--button-surface-bg:var(--gray-4)]",
+				"[--button-surface-hover-bg:var(--gray-5)]",
+				"[--button-surface-border:var(--gray-5)]",
+				"[--button-outline-hover-bg:var(--gray-4)]",
+				"[--button-outline-border:var(--gray-6)]",
+				"[--button-ghost-hover-bg:var(--gray-4)]",
 				"text-gray-12",
 				"ring-gray-9"
 			],
-			brand: [
-				"[--button-solid-bg:var(--color-brand-9)]",
-				"[--button-subtle-bg:var(--color-brand-4)]",
-				"[--button-subtle-hover-bg:var(--color-brand-5)]",
-				"[--button-surface-bg:var(--color-brand-4)]",
-				"[--button-surface-hover-bg:var(--color-brand-5)]",
-				"[--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-4)]",
-				"text-brand-11",
-				"ring-brand-9"
+			accent: [
+				"[--button-solid-bg:var(--accent-9)]",
+				"[--button-subtle-bg:var(--accent-4)]",
+				"[--button-subtle-hover-bg:var(--accent-5)]",
+				"[--button-surface-bg:var(--accent-4)]",
+				"[--button-surface-hover-bg:var(--accent-5)]",
+				"[--button-surface-border:var(--accent-5)]",
+				"[--button-outline-hover-bg:var(--accent-3)]",
+				"[--button-outline-border:var(--accent-8)]",
+				"[--button-ghost-hover-bg:var(--accent-4)]",
+				"text-accent-11",
+				"ring-accent-9"
 			],
 			red: [
-				"[--button-solid-bg:var(--color-red-9)]",
-				"[--button-subtle-bg:var(--color-red-4)]",
-				"[--button-subtle-hover-bg:var(--color-red-5)]",
-				"[--button-surface-bg:var(--color-red-4)]",
-				"[--button-surface-hover-bg:var(--color-red-5)]",
-				"[--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-4)]",
+				"[--button-solid-bg:var(--red-9)]",
+				"[--button-subtle-bg:var(--red-4)]",
+				"[--button-subtle-hover-bg:var(--red-5)]",
+				"[--button-surface-bg:var(--red-4)]",
+				"[--button-surface-hover-bg:var(--red-5)]",
+				"[--button-surface-border:var(--red-5)]",
+				"[--button-outline-hover-bg:var(--red-3)]",
+				"[--button-outline-border:var(--red-8)]",
+				"[--button-ghost-hover-bg:var(--red-4)]",
 				"text-red-11",
 				"ring-red-9"
 			],
 			green: [
-				"[--button-solid-bg:var(--color-green-9)]",
-				"[--button-subtle-bg:var(--color-green-4)]",
-				"[--button-subtle-hover-bg:var(--color-green-5)]",
-				"[--button-surface-bg:var(--color-green-4)]",
-				"[--button-surface-hover-bg:var(--color-green-5)]",
-				"[--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-4)]",
+				"[--button-solid-bg:var(--green-9)]",
+				"[--button-subtle-bg:var(--green-4)]",
+				"[--button-subtle-hover-bg:var(--green-5)]",
+				"[--button-surface-bg:var(--green-4)]",
+				"[--button-surface-hover-bg:var(--green-5)]",
+				"[--button-surface-border:var(--green-5)]",
+				"[--button-outline-hover-bg:var(--green-3)]",
+				"[--button-outline-border:var(--green-8)]",
+				"[--button-ghost-hover-bg:var(--green-4)]",
 				"text-green-11",
 				"ring-green-9"
 			],
 			blue: [
-				"[--button-solid-bg:var(--color-blue-9)]",
-				"[--button-subtle-bg:var(--color-blue-4)]",
-				"[--button-subtle-hover-bg:var(--color-blue-5)]",
-				"[--button-surface-bg:var(--color-blue-4)]",
-				"[--button-surface-hover-bg:var(--color-blue-5)]",
-				"[--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-4)]",
+				"[--button-solid-bg:var(--blue-9)]",
+				"[--button-subtle-bg:var(--blue-4)]",
+				"[--button-subtle-hover-bg:var(--blue-5)]",
+				"[--button-surface-bg:var(--blue-4)]",
+				"[--button-surface-hover-bg:var(--blue-5)]",
+				"[--button-surface-border:var(--blue-5)]",
+				"[--button-outline-hover-bg:var(--blue-3)]",
+				"[--button-outline-border:var(--blue-8)]",
+				"[--button-ghost-hover-bg:var(--blue-4)]",
 				"text-blue-11",
 				"ring-blue-9"
 			],
 			teal: [
-				"[--button-solid-bg:var(--color-teal-9)]",
-				"[--button-subtle-bg:var(--color-teal-4)]",
-				"[--button-subtle-hover-bg:var(--color-teal-5)]",
-				"[--button-surface-bg:var(--color-teal-4)]",
-				"[--button-surface-hover-bg:var(--color-teal-5)]",
-				"[--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-4)]",
+				"[--button-solid-bg:var(--teal-9)]",
+				"[--button-subtle-bg:var(--teal-4)]",
+				"[--button-subtle-hover-bg:var(--teal-5)]",
+				"[--button-surface-bg:var(--teal-4)]",
+				"[--button-surface-hover-bg:var(--teal-5)]",
+				"[--button-surface-border:var(--teal-5)]",
+				"[--button-outline-hover-bg:var(--teal-3)]",
+				"[--button-outline-border:var(--teal-8)]",
+				"[--button-ghost-hover-bg:var(--teal-4)]",
 				"text-teal-11",
 				"ring-teal-9"
 			],
 			pink: [
-				"[--button-solid-bg:var(--color-pink-9)]",
-				"[--button-subtle-bg:var(--color-pink-4)]",
-				"[--button-subtle-hover-bg:var(--color-pink-5)]",
-				"[--button-surface-bg:var(--color-pink-4)]",
-				"[--button-surface-hover-bg:var(--color-pink-5)]",
-				"[--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-4)]",
+				"[--button-solid-bg:var(--pink-9)]",
+				"[--button-subtle-bg:var(--pink-4)]",
+				"[--button-subtle-hover-bg:var(--pink-5)]",
+				"[--button-surface-bg:var(--pink-4)]",
+				"[--button-surface-hover-bg:var(--pink-5)]",
+				"[--button-surface-border:var(--pink-5)]",
+				"[--button-outline-hover-bg:var(--pink-3)]",
+				"[--button-outline-border:var(--pink-8)]",
+				"[--button-ghost-hover-bg:var(--pink-4)]",
 				"text-pink-11",
 				"ring-pink-9"
 			],
 			purple: [
-				"[--button-solid-bg:var(--color-purple-9)]",
-				"[--button-subtle-bg:var(--color-purple-4)]",
-				"[--button-subtle-hover-bg:var(--color-purple-5)]",
-				"[--button-surface-bg:var(--color-purple-4)]",
-				"[--button-surface-hover-bg:var(--color-purple-5)]",
-				"[--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-4)]",
+				"[--button-solid-bg:var(--purple-9)]",
+				"[--button-subtle-bg:var(--purple-4)]",
+				"[--button-subtle-hover-bg:var(--purple-5)]",
+				"[--button-surface-bg:var(--purple-4)]",
+				"[--button-surface-hover-bg:var(--purple-5)]",
+				"[--button-surface-border:var(--purple-5)]",
+				"[--button-outline-hover-bg:var(--purple-3)]",
+				"[--button-outline-border:var(--purple-8)]",
+				"[--button-ghost-hover-bg:var(--purple-4)]",
 				"text-purple-11",
 				"ring-purple-9"
 			],
 			cyan: [
-				"[--button-solid-bg:var(--color-cyan-9)]",
-				"[--button-subtle-bg:var(--color-cyan-4)]",
-				"[--button-subtle-hover-bg:var(--color-cyan-5)]",
-				"[--button-surface-bg:var(--color-cyan-4)]",
-				"[--button-surface-hover-bg:var(--color-cyan-5)]",
-				"[--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-4)]",
+				"[--button-solid-bg:var(--cyan-9)]",
+				"[--button-subtle-bg:var(--cyan-4)]",
+				"[--button-subtle-hover-bg:var(--cyan-5)]",
+				"[--button-surface-bg:var(--cyan-4)]",
+				"[--button-surface-hover-bg:var(--cyan-5)]",
+				"[--button-surface-border:var(--cyan-5)]",
+				"[--button-outline-hover-bg:var(--cyan-3)]",
+				"[--button-outline-border:var(--cyan-8)]",
+				"[--button-ghost-hover-bg:var(--cyan-4)]",
 				"text-cyan-11",
 				"ring-cyan-9"
 			],
 			orange: [
-				"[--button-solid-bg:var(--color-orange-9)]",
-				"[--button-subtle-bg:var(--color-orange-4)]",
-				"[--button-subtle-hover-bg:var(--color-orange-5)]",
-				"[--button-surface-bg:var(--color-orange-4)]",
-				"[--button-surface-hover-bg:var(--color-orange-5)]",
-				"[--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-4)]",
+				"[--button-solid-bg:var(--orange-9)]",
+				"[--button-subtle-bg:var(--orange-4)]",
+				"[--button-subtle-hover-bg:var(--orange-5)]",
+				"[--button-surface-bg:var(--orange-4)]",
+				"[--button-surface-hover-bg:var(--orange-5)]",
+				"[--button-surface-border:var(--orange-5)]",
+				"[--button-outline-hover-bg:var(--orange-3)]",
+				"[--button-outline-border:var(--orange-8)]",
+				"[--button-ghost-hover-bg:var(--orange-4)]",
 				"text-orange-11",
 				"ring-orange-9"
 			],
 			brown: [
-				"[--button-solid-bg:var(--color-brown-9)]",
-				"[--button-subtle-bg:var(--color-brown-4)]",
-				"[--button-subtle-hover-bg:var(--color-brown-5)]",
-				"[--button-surface-bg:var(--color-brown-4)]",
-				"[--button-surface-hover-bg:var(--color-brown-5)]",
-				"[--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-4)]",
+				"[--button-solid-bg:var(--brown-9)]",
+				"[--button-subtle-bg:var(--brown-4)]",
+				"[--button-subtle-hover-bg:var(--brown-5)]",
+				"[--button-surface-bg:var(--brown-4)]",
+				"[--button-surface-hover-bg:var(--brown-5)]",
+				"[--button-surface-border:var(--brown-5)]",
+				"[--button-outline-hover-bg:var(--brown-3)]",
+				"[--button-outline-border:var(--brown-8)]",
+				"[--button-ghost-hover-bg:var(--brown-4)]",
 				"text-brown-11",
 				"ring-brown-9"
 			],
 			yellow: [
-				"[--button-solid-bg:var(--color-yellow-9)]",
-				"[--button-subtle-bg:var(--color-yellow-4)]",
-				"[--button-subtle-hover-bg:var(--color-yellow-5)]",
-				"[--button-surface-bg:var(--color-yellow-4)]",
-				"[--button-surface-hover-bg:var(--color-yellow-5)]",
-				"[--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-4)]",
+				"[--button-solid-bg:var(--yellow-9)]",
+				"[--button-subtle-bg:var(--yellow-4)]",
+				"[--button-subtle-hover-bg:var(--yellow-5)]",
+				"[--button-surface-bg:var(--yellow-4)]",
+				"[--button-surface-hover-bg:var(--yellow-5)]",
+				"[--button-surface-border:var(--yellow-5)]",
+				"[--button-outline-hover-bg:var(--yellow-3)]",
+				"[--button-outline-border:var(--yellow-8)]",
+				"[--button-ghost-hover-bg:var(--yellow-4)]",
 				"text-yellow-11",
 				"ring-yellow-9"
 			],
 			amber: [
-				"[--button-solid-bg:var(--color-amber-9)]",
-				"[--button-subtle-bg:var(--color-amber-4)]",
-				"[--button-subtle-hover-bg:var(--color-amber-5)]",
-				"[--button-surface-bg:var(--color-amber-4)]",
-				"[--button-surface-hover-bg:var(--color-amber-5)]",
-				"[--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-4)]",
+				"[--button-solid-bg:var(--amber-9)]",
+				"[--button-subtle-bg:var(--amber-4)]",
+				"[--button-subtle-hover-bg:var(--amber-5)]",
+				"[--button-surface-bg:var(--amber-4)]",
+				"[--button-surface-hover-bg:var(--amber-5)]",
+				"[--button-surface-border:var(--amber-5)]",
+				"[--button-outline-hover-bg:var(--amber-3)]",
+				"[--button-outline-border:var(--amber-8)]",
+				"[--button-ghost-hover-bg:var(--amber-4)]",
 				"text-amber-11",
 				"ring-amber-9"
 			]

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-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"}
+{"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(--gray-4)]',\n          '[--button-subtle-hover-bg:var(--gray-5)]',\n\n          '[--button-surface-bg:var(--gray-4)]',\n          '[--button-surface-hover-bg:var(--gray-5)]',\n          '[--button-surface-border:var(--gray-5)]',\n\n          '[--button-outline-hover-bg:var(--gray-4)]',\n          '[--button-outline-border:var(--gray-6)]',\n\n          '[--button-ghost-hover-bg:var(--gray-4)]',\n\n          'text-gray-12',\n          'ring-gray-9',\n        ],\n        accent: [\n          '[--button-solid-bg:var(--accent-9)]',\n\n          '[--button-subtle-bg:var(--accent-4)]',\n          '[--button-subtle-hover-bg:var(--accent-5)]',\n\n          '[--button-surface-bg:var(--accent-4)]',\n          '[--button-surface-hover-bg:var(--accent-5)]',\n          '[--button-surface-border:var(--accent-5)]',\n\n          '[--button-outline-hover-bg:var(--accent-3)]',\n          '[--button-outline-border:var(--accent-8)]',\n\n          '[--button-ghost-hover-bg:var(--accent-4)]',\n\n          'text-accent-11',\n          'ring-accent-9',\n        ],\n        red: [\n          '[--button-solid-bg:var(--red-9)]',\n\n          '[--button-subtle-bg:var(--red-4)]',\n          '[--button-subtle-hover-bg:var(--red-5)]',\n\n          '[--button-surface-bg:var(--red-4)]',\n          '[--button-surface-hover-bg:var(--red-5)]',\n          '[--button-surface-border:var(--red-5)]',\n\n          '[--button-outline-hover-bg:var(--red-3)]',\n          '[--button-outline-border:var(--red-8)]',\n\n          '[--button-ghost-hover-bg:var(--red-4)]',\n\n          'text-red-11',\n          'ring-red-9',\n        ],\n        green: [\n          '[--button-solid-bg:var(--green-9)]',\n\n          '[--button-subtle-bg:var(--green-4)]',\n          '[--button-subtle-hover-bg:var(--green-5)]',\n\n          '[--button-surface-bg:var(--green-4)]',\n          '[--button-surface-hover-bg:var(--green-5)]',\n          '[--button-surface-border:var(--green-5)]',\n\n          '[--button-outline-hover-bg:var(--green-3)]',\n          '[--button-outline-border:var(--green-8)]',\n\n          '[--button-ghost-hover-bg:var(--green-4)]',\n\n          'text-green-11',\n          'ring-green-9',\n        ],\n        blue: [\n          '[--button-solid-bg:var(--blue-9)]',\n\n          '[--button-subtle-bg:var(--blue-4)]',\n          '[--button-subtle-hover-bg:var(--blue-5)]',\n\n          '[--button-surface-bg:var(--blue-4)]',\n          '[--button-surface-hover-bg:var(--blue-5)]',\n          '[--button-surface-border:var(--blue-5)]',\n\n          '[--button-outline-hover-bg:var(--blue-3)]',\n          '[--button-outline-border:var(--blue-8)]',\n\n          '[--button-ghost-hover-bg:var(--blue-4)]',\n\n          'text-blue-11',\n          'ring-blue-9',\n        ],\n        teal: [\n          '[--button-solid-bg:var(--teal-9)]',\n\n          '[--button-subtle-bg:var(--teal-4)]',\n          '[--button-subtle-hover-bg:var(--teal-5)]',\n\n          '[--button-surface-bg:var(--teal-4)]',\n          '[--button-surface-hover-bg:var(--teal-5)]',\n          '[--button-surface-border:var(--teal-5)]',\n\n          '[--button-outline-hover-bg:var(--teal-3)]',\n          '[--button-outline-border:var(--teal-8)]',\n\n          '[--button-ghost-hover-bg:var(--teal-4)]',\n\n          'text-teal-11',\n          'ring-teal-9',\n        ],\n        pink: [\n          '[--button-solid-bg:var(--pink-9)]',\n\n          '[--button-subtle-bg:var(--pink-4)]',\n          '[--button-subtle-hover-bg:var(--pink-5)]',\n\n          '[--button-surface-bg:var(--pink-4)]',\n          '[--button-surface-hover-bg:var(--pink-5)]',\n          '[--button-surface-border:var(--pink-5)]',\n\n          '[--button-outline-hover-bg:var(--pink-3)]',\n          '[--button-outline-border:var(--pink-8)]',\n\n          '[--button-ghost-hover-bg:var(--pink-4)]',\n\n          'text-pink-11',\n          'ring-pink-9',\n        ],\n        purple: [\n          '[--button-solid-bg:var(--purple-9)]',\n\n          '[--button-subtle-bg:var(--purple-4)]',\n          '[--button-subtle-hover-bg:var(--purple-5)]',\n\n          '[--button-surface-bg:var(--purple-4)]',\n          '[--button-surface-hover-bg:var(--purple-5)]',\n          '[--button-surface-border:var(--purple-5)]',\n\n          '[--button-outline-hover-bg:var(--purple-3)]',\n          '[--button-outline-border:var(--purple-8)]',\n\n          '[--button-ghost-hover-bg:var(--purple-4)]',\n\n          'text-purple-11',\n          'ring-purple-9',\n        ],\n        cyan: [\n          '[--button-solid-bg:var(--cyan-9)]',\n\n          '[--button-subtle-bg:var(--cyan-4)]',\n          '[--button-subtle-hover-bg:var(--cyan-5)]',\n\n          '[--button-surface-bg:var(--cyan-4)]',\n          '[--button-surface-hover-bg:var(--cyan-5)]',\n          '[--button-surface-border:var(--cyan-5)]',\n\n          '[--button-outline-hover-bg:var(--cyan-3)]',\n          '[--button-outline-border:var(--cyan-8)]',\n\n          '[--button-ghost-hover-bg:var(--cyan-4)]',\n\n          'text-cyan-11',\n          'ring-cyan-9',\n        ],\n        orange: [\n          '[--button-solid-bg:var(--orange-9)]',\n\n          '[--button-subtle-bg:var(--orange-4)]',\n          '[--button-subtle-hover-bg:var(--orange-5)]',\n\n          '[--button-surface-bg:var(--orange-4)]',\n          '[--button-surface-hover-bg:var(--orange-5)]',\n          '[--button-surface-border:var(--orange-5)]',\n\n          '[--button-outline-hover-bg:var(--orange-3)]',\n          '[--button-outline-border:var(--orange-8)]',\n\n          '[--button-ghost-hover-bg:var(--orange-4)]',\n\n          'text-orange-11',\n          'ring-orange-9',\n        ],\n        brown: [\n          '[--button-solid-bg:var(--brown-9)]',\n\n          '[--button-subtle-bg:var(--brown-4)]',\n          '[--button-subtle-hover-bg:var(--brown-5)]',\n\n          '[--button-surface-bg:var(--brown-4)]',\n          '[--button-surface-hover-bg:var(--brown-5)]',\n          '[--button-surface-border:var(--brown-5)]',\n\n          '[--button-outline-hover-bg:var(--brown-3)]',\n          '[--button-outline-border:var(--brown-8)]',\n\n          '[--button-ghost-hover-bg:var(--brown-4)]',\n\n          'text-brown-11',\n          'ring-brown-9',\n        ],\n        yellow: [\n          '[--button-solid-bg:var(--yellow-9)]',\n\n          '[--button-subtle-bg:var(--yellow-4)]',\n          '[--button-subtle-hover-bg:var(--yellow-5)]',\n\n          '[--button-surface-bg:var(--yellow-4)]',\n          '[--button-surface-hover-bg:var(--yellow-5)]',\n          '[--button-surface-border:var(--yellow-5)]',\n\n          '[--button-outline-hover-bg:var(--yellow-3)]',\n          '[--button-outline-border:var(--yellow-8)]',\n\n          '[--button-ghost-hover-bg:var(--yellow-4)]',\n\n          'text-yellow-11',\n          'ring-yellow-9',\n        ],\n        amber: [\n          '[--button-solid-bg:var(--amber-9)]',\n\n          '[--button-subtle-bg:var(--amber-4)]',\n          '[--button-subtle-hover-bg:var(--amber-5)]',\n\n          '[--button-surface-bg:var(--amber-4)]',\n          '[--button-surface-hover-bg:var(--amber-5)]',\n          '[--button-surface-border:var(--amber-5)]',\n\n          '[--button-outline-hover-bg:var(--amber-3)]',\n          '[--button-outline-border:var(--amber-8)]',\n\n          '[--button-ghost-hover-bg:var(--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,QAAQ;IACN;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

@@ -35,7 +35,7 @@ export type ButtonState = Button$1.State;
  * @example
  * ```tsx
  * <Button
- *   colorScheme="brand"
+ *   colorScheme="accent"
  *   icon={<PlusIcon />}
  * >
  *   Adicionar

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

@@ -20,7 +20,7 @@ const splitVariantProps = createSplitProps();
 * @example
 * ```tsx
 * <Button
-*   colorScheme="brand"
+*   colorScheme="accent"
 *   icon={<PlusIcon />}
 * >
 *   Adicionar

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/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"}
+{"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=\"accent\"\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/icon-button/icon-button-variants.d.ts

@@ -16,6 +16,9 @@ export type IconButtonVariants = {
   size?: ButtonVariants['size'];
 };
 export declare const iconButtonDefaultVariants: Required<IconButtonVariants>;
+/**
+ * O `Toggle` só com ícone copia o `p-0` e o ajuste do ícone no toque por `size`.
+ */
 export declare const iconButtonVariants: (props?: ({
   round?: boolean | null | undefined;
   size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;

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

@@ -4,6 +4,9 @@ const iconButtonDefaultVariants = {
 	round: false,
 	size: "sm"
 };
+/**
+* O `Toggle` só com ícone copia o `p-0` e o ajuste do ícone no toque por `size`.
+*/
 const iconButtonVariants = cva(["p-0"], {
 	variants: {
 		round: {

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

@@ -1 +1 @@
-{"version":3,"file":"icon-button-variants.js","names":[],"sources":["../../../../src/components/buttons/icon-button/icon-button-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ButtonVariants } from '#components/buttons/button';\n\nexport type IconButtonVariants = {\n  /**\n   * Deixa o botão redondo.\n   *\n   * @default false\n   */\n  round?: boolean;\n  /**\n   * Mesma escala do `Button`. No toque, o ícone cresce um pouco para compensar a falta do texto.\n   *\n   * @default 'sm'\n   */\n  size?: ButtonVariants['size'];\n};\n\nexport const iconButtonDefaultVariants: Required<IconButtonVariants> = {\n  round: false,\n  size: 'sm',\n};\n\nexport const iconButtonVariants = cva(['p-0'], {\n  variants: {\n    round: {\n      // O `Button` aplica `corner-squircle`, que deforma o `rounded-full`: o `corner-round`\n      // o substitui no merge e garante o círculo.\n      true: ['rounded-full', 'corner-round'],\n      false: [],\n    },\n    size: {\n      '3xs': ['pointer-coarse:[&_svg]:size-3'],\n      '2xs': ['pointer-coarse:[&_svg]:size-4'],\n      xs: ['pointer-coarse:[&_svg]:size-4.5'],\n      sm: ['pointer-coarse:[&_svg]:size-4.5'],\n      md: ['pointer-coarse:[&_svg]:size-5.5'],\n      lg: ['pointer-coarse:[&_svg]:size-5.5'],\n      xl: ['pointer-coarse:[&_svg]:size-5.5'],\n      '2xl': ['pointer-coarse:[&_svg]:size-6.5'],\n    },\n  },\n  defaultVariants: {\n    round: iconButtonDefaultVariants.round,\n    size: iconButtonDefaultVariants.size,\n  },\n});\n"],"mappings":";;AAkBA,MAAa,4BAA0D;CACrE,OAAO;CACP,MAAM;AACR;AAEA,MAAa,qBAAqB,IAAI,CAAC,KAAK,GAAG;CAC7C,UAAU;EACR,OAAO;GAGL,MAAM,CAAC,gBAAgB,cAAc;GACrC,OAAO,CAAC;EACV;EACA,MAAM;GACJ,OAAO,CAAC,+BAA+B;GACvC,OAAO,CAAC,+BAA+B;GACvC,IAAI,CAAC,iCAAiC;GACtC,IAAI,CAAC,iCAAiC;GACtC,IAAI,CAAC,iCAAiC;GACtC,IAAI,CAAC,iCAAiC;GACtC,IAAI,CAAC,iCAAiC;GACtC,OAAO,CAAC,iCAAiC;EAC3C;CACF;CACA,iBAAiB;EACf,OAAO,0BAA0B;EACjC,MAAM,0BAA0B;CAClC;AACF,CAAC"}
+{"version":3,"file":"icon-button-variants.js","names":[],"sources":["../../../../src/components/buttons/icon-button/icon-button-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ButtonVariants } from '#components/buttons/button';\n\nexport type IconButtonVariants = {\n  /**\n   * Deixa o botão redondo.\n   *\n   * @default false\n   */\n  round?: boolean;\n  /**\n   * Mesma escala do `Button`. No toque, o ícone cresce um pouco para compensar a falta do texto.\n   *\n   * @default 'sm'\n   */\n  size?: ButtonVariants['size'];\n};\n\nexport const iconButtonDefaultVariants: Required<IconButtonVariants> = {\n  round: false,\n  size: 'sm',\n};\n\n/**\n * O `Toggle` só com ícone copia o `p-0` e o ajuste do ícone no toque por `size`.\n */\nexport const iconButtonVariants = cva(['p-0'], {\n  variants: {\n    round: {\n      // O `Button` aplica `corner-squircle`, que deforma o `rounded-full`: o `corner-round`\n      // o substitui no merge e garante o círculo.\n      true: ['rounded-full', 'corner-round'],\n      false: [],\n    },\n    size: {\n      '3xs': ['pointer-coarse:[&_svg]:size-3'],\n      '2xs': ['pointer-coarse:[&_svg]:size-4'],\n      xs: ['pointer-coarse:[&_svg]:size-4.5'],\n      sm: ['pointer-coarse:[&_svg]:size-4.5'],\n      md: ['pointer-coarse:[&_svg]:size-5.5'],\n      lg: ['pointer-coarse:[&_svg]:size-5.5'],\n      xl: ['pointer-coarse:[&_svg]:size-5.5'],\n      '2xl': ['pointer-coarse:[&_svg]:size-6.5'],\n    },\n  },\n  defaultVariants: {\n    round: iconButtonDefaultVariants.round,\n    size: iconButtonDefaultVariants.size,\n  },\n});\n"],"mappings":";;AAkBA,MAAa,4BAA0D;CACrE,OAAO;CACP,MAAM;AACR;;;;AAKA,MAAa,qBAAqB,IAAI,CAAC,KAAK,GAAG;CAC7C,UAAU;EACR,OAAO;GAGL,MAAM,CAAC,gBAAgB,cAAc;GACrC,OAAO,CAAC;EACV;EACA,MAAM;GACJ,OAAO,CAAC,+BAA+B;GACvC,OAAO,CAAC,+BAA+B;GACvC,IAAI,CAAC,iCAAiC;GACtC,IAAI,CAAC,iCAAiC;GACtC,IAAI,CAAC,iCAAiC;GACtC,IAAI,CAAC,iCAAiC;GACtC,IAAI,CAAC,iCAAiC;GACtC,OAAO,CAAC,iCAAiC;EAC3C;CACF;CACA,iBAAiB;EACf,OAAO,0BAA0B;EACjC,MAAM,0BAA0B;CAClC;AACF,CAAC"}

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

@@ -22,7 +22,8 @@ export type ResponsiveButtonProps = MergeOverride<ButtonProps, {
   icon: NonNullable<ButtonProps['icon']>;
 }>;
 /**
- * Botão com texto em telas largas e só com ícone nas estreitas.
+ * Botão com texto em telas largas e só com ícone nas estreitas. A troca segue a largura da
+ * janela, não a do contêiner em que o botão está.
  *
  * Na tela larga, o nome do botão é o texto visível; na estreita, o `aria-label` ou, sem ele, o
  * próprio texto. A troca remonta o botão: se ele estiver focado quando a largura cruza o

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

@@ -4,7 +4,8 @@ import { IconButton } from "../icon-button/icon-button.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/buttons/responsive-button/responsive-button.tsx
 /**
-* Botão com texto em telas largas e só com ícone nas estreitas.
+* Botão com texto em telas largas e só com ícone nas estreitas. A troca segue a largura da
+* janela, não a do contêiner em que o botão está.
 *
 * Na tela larga, o nome do botão é o texto visível; na estreita, o `aria-label` ou, sem ele, o
 * próprio texto. A troca remonta o botão: se ele estiver focado quando a largura cruza o

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/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"}
+{"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. A troca segue a largura da\n * janela, não a do contêiner em que o botão está.\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":";;;;;;;;;;;;;;;;;;AAwCA,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/buttons/toggle/index.d.ts

@@ -0,0 +1,3 @@
+import { ToggleVariants } from "./toggle-variants.js";
+import { Toggle, ToggleChangeEventDetails, ToggleChangeEventReason, ToggleProps, ToggleState } from "./toggle.js";
+export { Toggle, type ToggleChangeEventDetails, type ToggleChangeEventReason, type ToggleProps, type ToggleState, type ToggleVariants };

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

@@ -0,0 +1,2 @@
+import { Toggle } from "./toggle.js";
+export { Toggle };

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

@@ -0,0 +1,47 @@
+import { ButtonVariants } from "../button/button-variants.js";
+import "../button/index.js";
+//#region src/components/buttons/toggle/toggle-variants.d.ts
+export type ToggleVariants = {
+  /**
+   * Cor do botão, a mesma do `Button`.
+   *
+   * @default 'gray'
+   */
+  colorScheme?: ButtonVariants['colorScheme'];
+  /**
+   * Altura, padding, tamanho do texto e do ícone, a mesma escala do `Button`. Só com `icon`, o
+   * botão fica quadrado e, no toque, o ícone cresce um pouco para compensar a falta do texto.
+   *
+   * @default 'sm'
+   */
+  size?: ButtonVariants['size'];
+  /**
+   * Desenho do botão.
+   * - `ghost`: sem fundo e sem borda; ligado, vira o `solid` do `Button`.
+   * - `outline`: com borda; ligado, vira o `solid` do `Button`.
+   * - `plain`: sem fundo nos dois estados; ligado, só o texto e o ícone ganham a cor de passo 9
+   *   do `colorScheme`. Pensado para o botão só com ícone (favorito, estrela).
+   *
+   * @default 'ghost'
+   */
+  variant?: 'ghost' | 'outline' | 'plain';
+};
+export declare const toggleDefaultVariants: Required<ToggleVariants>;
+/**
+ * No `ghost` e no `outline`, o Toggle troca a `variant` do `Button` para `solid` ao ligar (feito
+ * no componente), então o hover, o disabled e a cor do texto do ligado vêm do próprio `Button`. A
+ * `plain` mantém a `variant` nos dois estados: desligada, usa `text-gray-11`; ligada, pinta o
+ * texto com a variável `--button-solid-bg`, que o `colorScheme` do `Button` declara no mesmo
+ * elemento. Essas classes chegam ao `Button` como `className` e são mescladas por último, por isso
+ * vencem o `text-*` do `colorScheme`.
+ *
+ * O `iconOnly` (só `icon`, sem texto) copia do `IconButton` o `p-0` e o ajuste do ícone no toque
+ * por `size`; a origem é o `icon-button-variants.ts`.
+ */
+export declare const toggleVariants: (props?: ({
+  variant?: "outline" | "ghost" | "plain" | null | undefined;
+  iconOnly?: boolean | null | undefined;
+  size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=toggle-variants.d.ts.map