@lucasbernardosn/react-ui 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Lucas Bernardo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/_virtual/_rolldown/runtime.js

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll };

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

@@ -0,0 +1,36 @@
+import { ColorSchemePalette } from "../../../types/color-scheme.js";
+//#region src/components/buttons/button/button-variants.d.ts
+export type ButtonVariants = {
+  /**
+   * Cor do botão. Cada `variant` usa a escala da cor de um jeito (fundo sólido, fundo suave,
+   * borda).
+   *
+   * @default 'gray'
+   */
+  colorScheme?: ColorSchemePalette;
+  /**
+   * Altura, padding, tamanho do texto e do ícone. `sm` = `h-9`, `md` = `h-10`, alinhado aos
+   * outros controles de formulário.
+   *
+   * @default 'sm'
+   */
+  size?: '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /**
+   * Desenho do botão.
+   *
+   * @default 'solid'
+   */
+  variant?: 'solid' | 'subtle' | 'surface' | 'outline' | 'ghost' | 'plain';
+};
+export declare const buttonDefaultVariants: Required<ButtonVariants>;
+/**
+ * A cor só declara as variáveis `--button-*`, e a `variant` decide onde cada uma entra. Assim não
+ * 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;
+  variant?: "outline" | "subtle" | "solid" | "surface" | "ghost" | "plain" | null | undefined;
+  size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=button-variants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-variants.d.ts","names":[],"sources":["../../../../src/components/buttons/button/button-variants.ts"],"mappings":";;YAGY;;;;;;;EAOV,cAAc;;;;;;;EAOd;;;;;;EAMA;;qBAGW,uBAAuB,SAAS;;;;;qBAUhC,iBAAc;;;;6CAwc1B"}

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

@@ -0,0 +1,355 @@
+import { cva } from "class-variance-authority";
+//#region src/components/buttons/button/button-variants.ts
+const buttonDefaultVariants = {
+	colorScheme: "gray",
+	size: "sm",
+	variant: "solid"
+};
+/**
+* A cor só declara as variáveis `--button-*`, e a `variant` decide onde cada uma entra. Assim não
+* há um bloco por combinação de cor e `variant`.
+*/
+const buttonVariants = cva([
+	"relative",
+	"inline-flex",
+	"items-center",
+	"justify-center",
+	"align-middle",
+	"shrink-0",
+	"whitespace-nowrap",
+	"font-medium",
+	"leading-[1.2]",
+	"border",
+	"border-transparent",
+	"rounded-md",
+	"corner-squircle",
+	"select-none",
+	"cursor-pointer",
+	"appearance-none",
+	"isolate",
+	"hover:transition-[background-color]",
+	"hover:ease-in",
+	"hover:duration-150",
+	"focus-ring-outside",
+	"data-disabled:opacity-50",
+	"data-disabled:cursor-not-allowed",
+	"data-loading:data-disabled:cursor-default",
+	"[&_svg]:shrink-0"
+], {
+	variants: {
+		colorScheme: {
+			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-3)]",
+				"[--button-outline-border:var(--color-gray-alpha-7)]",
+				"[--button-ghost-hover-bg:var(--color-gray-3)]",
+				"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-3)]",
+				"text-brand-11",
+				"ring-brand-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-3)]",
+				"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-3)]",
+				"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-3)]",
+				"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-3)]",
+				"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-3)]",
+				"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-3)]",
+				"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-3)]",
+				"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-3)]",
+				"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-3)]",
+				"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-3)]",
+				"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-3)]",
+				"text-amber-11",
+				"ring-amber-9"
+			]
+		},
+		variant: {
+			solid: [
+				"bg-(--button-solid-bg)",
+				"hover:bg-(--button-solid-bg)/90",
+				"expanded:bg-(--button-solid-bg)/90",
+				"data-disabled:hover:bg-(--button-solid-bg)",
+				"data-disabled:expanded:bg-(--button-solid-bg)",
+				"border-transparent",
+				"text-white"
+			],
+			subtle: [
+				"bg-(--button-subtle-bg)",
+				"hover:bg-(--button-subtle-hover-bg)",
+				"expanded:bg-(--button-subtle-hover-bg)",
+				"border-transparent",
+				"data-disabled:hover:bg-(--button-subtle-bg)",
+				"data-disabled:expanded:bg-(--button-subtle-bg)"
+			],
+			surface: [
+				"bg-(--button-surface-bg)",
+				"hover:bg-(--button-surface-hover-bg)",
+				"expanded:bg-(--button-surface-hover-bg)",
+				"border",
+				"border-(--button-surface-border)",
+				"data-disabled:hover:bg-(--button-surface-bg)",
+				"data-disabled:expanded:bg-(--button-surface-bg)"
+			],
+			outline: [
+				"bg-transparent",
+				"hover:bg-(--button-outline-hover-bg)",
+				"expanded:bg-(--button-outline-hover-bg)",
+				"border",
+				"border-(--button-outline-border)",
+				"data-disabled:hover:bg-transparent",
+				"data-disabled:expanded:bg-transparent"
+			],
+			ghost: [
+				"hover:bg-(--button-ghost-hover-bg)",
+				"expanded:bg-(--button-ghost-hover-bg)",
+				"data-disabled:hover:bg-transparent",
+				"data-disabled:expanded:bg-transparent"
+			],
+			plain: []
+		},
+		size: {
+			"3xs": [
+				"h-5",
+				"min-w-5",
+				"text-2xs",
+				"rounded-sm",
+				"px-1.5",
+				"gap-1",
+				"[&_svg]:size-2.5"
+			],
+			"2xs": [
+				"h-6",
+				"min-w-6",
+				"text-xs",
+				"px-2",
+				"gap-1",
+				"[&_svg]:size-3.5"
+			],
+			xs: [
+				"h-8",
+				"min-w-8",
+				"text-xs",
+				"px-2.5",
+				"gap-1",
+				"[&_svg]:size-4"
+			],
+			sm: [
+				"h-9",
+				"min-w-9",
+				"text-sm",
+				"px-3.5",
+				"gap-2",
+				"[&_svg]:size-4"
+			],
+			md: [
+				"h-10",
+				"min-w-10",
+				"text-sm",
+				"px-4",
+				"gap-2",
+				"[&_svg]:size-5"
+			],
+			lg: [
+				"h-11",
+				"min-w-11",
+				"text-base",
+				"px-5",
+				"gap-3",
+				"[&_svg]:size-5"
+			],
+			xl: [
+				"h-12",
+				"min-w-12",
+				"text-base",
+				"px-6",
+				"gap-3",
+				"[&_svg]:size-5"
+			],
+			"2xl": [
+				"h-16",
+				"min-w-16",
+				"text-lg",
+				"px-7",
+				"gap-3",
+				"[&_svg]:size-6"
+			]
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "solid",
+			colorScheme: "gray",
+			className: ["text-white", "dark:text-black"]
+		},
+		{
+			variant: "outline",
+			colorScheme: "gray",
+			className: ["bg-white", "dark:bg-black"]
+		},
+		{
+			variant: "solid",
+			colorScheme: "yellow",
+			className: ["text-black"]
+		},
+		{
+			variant: "solid",
+			colorScheme: "amber",
+			className: ["text-black"]
+		}
+	],
+	defaultVariants: {
+		colorScheme: buttonDefaultVariants.colorScheme,
+		size: buttonDefaultVariants.size,
+		variant: buttonDefaultVariants.variant
+	}
+});
+//#endregion
+export { buttonDefaultVariants, buttonVariants };
+
+//# sourceMappingURL=button-variants.js.map

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

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

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

@@ -0,0 +1,50 @@
+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";
+//#region src/components/buttons/button/button.d.ts
+export type ButtonProps = MergeOverride<Button$1.Props, ButtonVariants & {
+  /**
+   * Ícone ao lado do texto, no tamanho definido pelo `size`.
+   */
+  icon?: IconProps['render'];
+  /**
+   * Lado do texto em que o `icon` aparece.
+   *
+   * @default 'left'
+   */
+  iconPosition?: 'left' | 'right';
+  /**
+   * Mostra um spinner no lugar do conteúdo e desabilita o botão. O conteúdo continua no
+   * layout, invisível, para a largura do botão não mudar.
+   *
+   * @default false
+   */
+  loading?: boolean;
+}>;
+export type ButtonState = Button$1.State;
+/**
+ * Botão da lib. Desabilitado (ou em `loading`), continua focável, para o leitor de tela e a
+ * navegação por teclado não perderem o botão de vista.
+ *
+ * O `type` padrão é `button`: para enviar um formulário, passe `type="submit"`. Para navegação,
+ * use um link, não o `render` com `<a>`: o Button impõe a semântica de botão e o link perderia
+ * o "abrir em nova aba" e a navegação do router.
+ *
+ * @example
+ * ```tsx
+ * <Button
+ *   colorScheme="brand"
+ *   icon={<PlusIcon />}
+ * >
+ *   Adicionar
+ * </Button>
+ * ```
+ */
+export declare const Button: {
+  (props: ButtonProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","names":["BaseButton"],"sources":["../../../../src/components/buttons/button/button.tsx"],"mappings":";;;;;;YAeY,cAAc,cACxBA,SAAW,OACX;;;;EAIE,OAAO;;;;;;EAMP;;;;;;;EAOA;;YAIQ,cAAcA,SAAW;;;;;;;;;;;;;;;;;;;qBAsBxB;GAAiB,OAAA,8BAAW,IAAA"}

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

@@ -0,0 +1,84 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { normalizeDataAttr } from "../../../utils/normalize-data-attr.js";
+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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/buttons/button/button.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Botão da lib. Desabilitado (ou em `loading`), continua focável, para o leitor de tela e a
+* navegação por teclado não perderem o botão de vista.
+*
+* O `type` padrão é `button`: para enviar um formulário, passe `type="submit"`. Para navegação,
+* use um link, não o `render` com `<a>`: o Button impõe a semântica de botão e o link perderia
+* o "abrir em nova aba" e a navegação do router.
+*
+* @example
+* ```tsx
+* <Button
+*   colorScheme="brand"
+*   icon={<PlusIcon />}
+* >
+*   Adicionar
+* </Button>
+* ```
+*/
+const Button = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, [
+		"colorScheme",
+		"size",
+		"variant"
+	]);
+	const { className, loading, children, disabled, icon, iconPosition = "left", ...rest } = elementProps;
+	return /* @__PURE__ */ jsx(Button$1, {
+		"data-component": "Button",
+		type: "button",
+		disabled: normalizeDataAttr(mergeBooleansOr(disabled, loading)),
+		"data-loading": normalizeDataAttr(loading),
+		"aria-busy": normalizeDataAttr(loading),
+		focusableWhenDisabled: true,
+		className: mergeStateClassNames(buttonVariants(variantProps), className),
+		...rest,
+		children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spinner, {
+			"aria-hidden": true,
+			className: mergeTwClassNames([
+				"absolute",
+				"border-r-current",
+				"border-b-current"
+			])
+		}), /* @__PURE__ */ jsx("span", {
+			className: mergeTwClassNames([
+				"inline-flex",
+				"items-center",
+				"gap-[inherit]",
+				"opacity-0"
+			]),
+			children: /* @__PURE__ */ jsx(ButtonContent, {
+				icon,
+				iconPosition,
+				children
+			})
+		})] }) : /* @__PURE__ */ jsx(ButtonContent, {
+			icon,
+			iconPosition,
+			children
+		})
+	});
+};
+Button.displayName = "Button";
+const ButtonContent = (props) => {
+	const { children, icon, iconPosition = "left" } = props;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		icon && iconPosition === "left" && /* @__PURE__ */ jsx(Icon, { render: icon }),
+		children,
+		icon && iconPosition === "right" && /* @__PURE__ */ jsx(Icon, { render: icon })
+	] });
+};
+//#endregion
+export { Button };
+
+//# sourceMappingURL=button.js.map

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

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

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

@@ -0,0 +1,3 @@
+import { ButtonVariants, buttonVariants } from "./button-variants.js";
+import { Button, ButtonProps, ButtonState } from "./button.js";
+export { Button, type ButtonProps, type ButtonState, type ButtonVariants, buttonVariants };

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

@@ -0,0 +1,3 @@
+import { buttonVariants } from "./button-variants.js";
+import { Button } from "./button.js";
+export { Button, buttonVariants };

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

@@ -0,0 +1,30 @@
+import { IconButtonProps } from "../icon-button/icon-button.js";
+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";
+//#region src/components/buttons/clipboard-button/clipboard-button.d.ts
+export type ClipboardButtonProps = MergeOverride<Omit<IconButtonProps, 'icon'>, UseClipboardProps>;
+/**
+ * Botão de ícone que copia `value` para a área de transferência e troca o ícone enquanto o
+ * destaque de cópia dura. Aceita as opções do `Clipboard.Root` e as props do `IconButton`.
+ *
+ * No layout, se comporta como o próprio botão: `className` e posição em flex valem para ele. A
+ * cópia é anunciada ao leitor de tela pelo `Clipboard.Root`, com o `triggerLabel` das
+ * `translations`.
+ *
+ * @example
+ * ```tsx
+ * <ClipboardButton
+ *   aria-label="Copiar link"
+ *   value="https://exemplo.com.br"
+ * />
+ * ```
+ */
+export declare const ClipboardButton: {
+  (props: ClipboardButtonProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=clipboard-button.d.ts.map