@lucasbernardosn/react-ui 0.2.0 → 0.4.0

package/dist/components/display/badge/badge-variants.d.ts

@@ -0,0 +1,44 @@
+import { ColorSchemeFull } from "../../../types/color-scheme.js";
+//#region src/components/display/badge/badge-variants.d.ts
+export type BadgeVariants = {
+  /**
+   * Cor do texto, do fundo e da borda, entre todas as escalas do tema: para categorias, há
+   * variedade; para estado, `red`, `green`, `amber` e `blue`.
+   *
+   * @default 'gray'
+   */
+  colorScheme?: ColorSchemeFull;
+  /**
+   * Altura, padding, tamanho do texto e do ícone: `sm` = `h-5`, `md` = `h-6`, `lg` = `h-7`.
+   *
+   * @default 'sm'
+   */
+  size?: 'sm' | 'md' | 'lg';
+  /**
+   * Fundo e borda: `subtle` só com fundo, `surface` com fundo e borda, `outline` só com borda e
+   * `solid` com o fundo cheio (passo 9) e o texto em contraste.
+   *
+   * @default 'subtle'
+   */
+  variant?: 'subtle' | 'surface' | 'outline' | 'solid';
+};
+export declare const badgeDefaultVariants: Required<BadgeVariants>;
+/**
+ * Origem do visual do rótulo curto, copiado pela `Tag` (tabela no README de `display`).
+ *
+ * O `colorScheme` só declara as variáveis `--badge-*`, e a `variant` decide onde cada uma entra.
+ * Assim uma cor nova é um bloco de variáveis, sem um bloco por combinação de cor e `variant`. O
+ * fundo e a borda usam a escala alpha, para o badge funcionar sobre qualquer fundo. No `solid`, o
+ * texto é branco, menos em amber, yellow, sky, mint e lime, claros demais para ele, que levam
+ * preto; o gray sólido é preto no tema claro e branco no escuro, como o do `Button`.
+ *
+ * O `max-w-full` e o `min-w-0` limitam o badge à largura do pai, para o `Badge` cortar um texto
+ * longo com reticências. O `shrink-0` fica: numa linha flex, quem encolhe é o vizinho.
+ */
+export declare const badgeVariants: (props?: ({
+  colorScheme?: "gray" | "brand" | "red" | "green" | "blue" | "teal" | "pink" | "purple" | "cyan" | "orange" | "brown" | "yellow" | "amber" | "ruby" | "bronze" | "gold" | "tomato" | "crimson" | "plum" | "violet" | "iris" | "indigo" | "jade" | "grass" | "lime" | "mint" | "sky" | null | undefined;
+  size?: "sm" | "md" | "lg" | null | undefined;
+  variant?: "solid" | "subtle" | "surface" | "outline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=badge-variants.d.ts.map

package/dist/components/display/badge/badge-variants.js

@@ -0,0 +1,335 @@
+import { cva } from "class-variance-authority";
+//#region src/components/display/badge/badge-variants.ts
+const badgeDefaultVariants = {
+	colorScheme: "gray",
+	size: "sm",
+	variant: "subtle"
+};
+/**
+* Origem do visual do rótulo curto, copiado pela `Tag` (tabela no README de `display`).
+*
+* O `colorScheme` só declara as variáveis `--badge-*`, e a `variant` decide onde cada uma entra.
+* Assim uma cor nova é um bloco de variáveis, sem um bloco por combinação de cor e `variant`. O
+* fundo e a borda usam a escala alpha, para o badge funcionar sobre qualquer fundo. No `solid`, o
+* texto é branco, menos em amber, yellow, sky, mint e lime, claros demais para ele, que levam
+* preto; o gray sólido é preto no tema claro e branco no escuro, como o do `Button`.
+*
+* O `max-w-full` e o `min-w-0` limitam o badge à largura do pai, para o `Badge` cortar um texto
+* longo com reticências. O `shrink-0` fica: numa linha flex, quem encolhe é o vizinho.
+*/
+const badgeVariants = cva([
+	"inline-flex",
+	"items-center",
+	"shrink-0",
+	"align-middle",
+	"max-w-full",
+	"min-w-0",
+	"border",
+	"rounded-sm",
+	"corner-squircle",
+	"font-medium",
+	"leading-none",
+	"whitespace-nowrap",
+	"tabular-nums",
+	"[&_svg]:shrink-0"
+], {
+	variants: {
+		colorScheme: {
+			gray: [
+				"[--badge-fg:var(--color-gray-11)]",
+				"[--badge-subtle-bg:var(--color-gray-alpha-3)]",
+				"[--badge-surface-bg:var(--color-gray-alpha-2)]",
+				"[--badge-surface-border:var(--color-gray-alpha-6)]",
+				"[--badge-outline-border:var(--color-gray-alpha-8)]",
+				"[--badge-solid-bg:var(--color-black)]",
+				"dark:[--badge-solid-bg:var(--color-white)]",
+				"[--badge-solid-fg:var(--color-white)]",
+				"dark:[--badge-solid-fg:var(--color-black)]"
+			],
+			brand: [
+				"[--badge-fg:var(--color-brand-11)]",
+				"[--badge-subtle-bg:var(--color-brand-alpha-3)]",
+				"[--badge-surface-bg:var(--color-brand-alpha-2)]",
+				"[--badge-surface-border:var(--color-brand-alpha-6)]",
+				"[--badge-outline-border:var(--color-brand-alpha-8)]",
+				"[--badge-solid-bg:var(--color-brand-9)]",
+				"[--badge-solid-fg:var(--color-white)]"
+			],
+			red: [
+				"[--badge-fg:var(--color-red-11)]",
+				"[--badge-subtle-bg:var(--color-red-alpha-3)]",
+				"[--badge-surface-bg:var(--color-red-alpha-2)]",
+				"[--badge-surface-border:var(--color-red-alpha-6)]",
+				"[--badge-outline-border:var(--color-red-alpha-8)]",
+				"[--badge-solid-bg:var(--color-red-9)]",
+				"[--badge-solid-fg:var(--color-white)]"
+			],
+			green: [
+				"[--badge-fg:var(--color-green-11)]",
+				"[--badge-subtle-bg:var(--color-green-alpha-3)]",
+				"[--badge-surface-bg:var(--color-green-alpha-2)]",
+				"[--badge-surface-border:var(--color-green-alpha-6)]",
+				"[--badge-outline-border:var(--color-green-alpha-8)]",
+				"[--badge-solid-bg:var(--color-green-9)]",
+				"[--badge-solid-fg:var(--color-white)]"
+			],
+			blue: [
+				"[--badge-fg:var(--color-blue-11)]",
+				"[--badge-subtle-bg:var(--color-blue-alpha-3)]",
+				"[--badge-surface-bg:var(--color-blue-alpha-2)]",
+				"[--badge-surface-border:var(--color-blue-alpha-6)]",
+				"[--badge-outline-border:var(--color-blue-alpha-8)]",
+				"[--badge-solid-bg:var(--color-blue-9)]",
+				"[--badge-solid-fg:var(--color-white)]"
+			],
+			amber: [
+				"[--badge-fg:var(--color-amber-11)]",
+				"[--badge-subtle-bg:var(--color-amber-alpha-3)]",
+				"[--badge-surface-bg:var(--color-amber-alpha-2)]",
+				"[--badge-surface-border:var(--color-amber-alpha-6)]",
+				"[--badge-outline-border:var(--color-amber-alpha-8)]",
+				"[--badge-solid-bg:var(--color-amber-9)]",
+				"[--badge-solid-fg:var(--color-black)]"
+			],
+			purple: [
+				"[--badge-fg:var(--color-purple-11)]",
+				"[--badge-subtle-bg:var(--color-purple-alpha-3)]",
+				"[--badge-surface-bg:var(--color-purple-alpha-2)]",
+				"[--badge-surface-border:var(--color-purple-alpha-6)]",
+				"[--badge-outline-border:var(--color-purple-alpha-8)]",
+				"[--badge-solid-bg:var(--color-purple-9)]",
+				"[--badge-solid-fg:var(--color-white)]"
+			],
+			pink: [
+				"[--badge-fg:var(--color-pink-11)]",
+				"[--badge-subtle-bg:var(--color-pink-alpha-3)]",
+				"[--badge-surface-bg:var(--color-pink-alpha-2)]",
+				"[--badge-surface-border:var(--color-pink-alpha-6)]",
+				"[--badge-outline-border:var(--color-pink-alpha-8)]",
+				"[--badge-solid-bg:var(--color-pink-9)]",
+				"[--badge-solid-fg:var(--color-white)]"
+			],
+			cyan: [
+				"[--badge-fg:var(--color-cyan-11)]",
+				"[--badge-subtle-bg:var(--color-cyan-alpha-3)]",
+				"[--badge-surface-bg:var(--color-cyan-alpha-2)]",
+				"[--badge-surface-border:var(--color-cyan-alpha-6)]",
+				"[--badge-outline-border:var(--color-cyan-alpha-8)]",
+				"[--badge-solid-bg:var(--color-cyan-9)]",
+				"[--badge-solid-fg:var(--color-white)]"
+			],
+			teal: [
+				"[--badge-fg:var(--color-teal-11)]",
+				"[--badge-subtle-bg:var(--color-teal-alpha-3)]",
+				"[--badge-surface-bg:var(--color-teal-alpha-2)]",
+				"[--badge-surface-border:var(--color-teal-alpha-6)]",
+				"[--badge-outline-border:var(--color-teal-alpha-8)]",
+				"[--badge-solid-bg:var(--color-teal-9)]",
+				"[--badge-solid-fg:var(--color-white)]"
+			],
+			orange: [
+				"[--badge-fg:var(--color-orange-11)]",
+				"[--badge-subtle-bg:var(--color-orange-alpha-3)]",
+				"[--badge-surface-bg:var(--color-orange-alpha-2)]",
+				"[--badge-surface-border:var(--color-orange-alpha-6)]",
+				"[--badge-outline-border:var(--color-orange-alpha-8)]",
+				"[--badge-solid-bg:var(--color-orange-9)]",
+				"[--badge-solid-fg:var(--color-white)]"
+			],
+			brown: [
+				"[--badge-fg:var(--color-brown-11)]",
+				"[--badge-subtle-bg:var(--color-brown-alpha-3)]",
+				"[--badge-surface-bg:var(--color-brown-alpha-2)]",
+				"[--badge-surface-border:var(--color-brown-alpha-6)]",
+				"[--badge-outline-border:var(--color-brown-alpha-8)]",
+				"[--badge-solid-bg:var(--color-brown-9)]",
+				"[--badge-solid-fg:var(--color-white)]"
+			],
+			yellow: [
+				"[--badge-fg:var(--color-yellow-11)]",
+				"[--badge-subtle-bg:var(--color-yellow-alpha-3)]",
+				"[--badge-surface-bg:var(--color-yellow-alpha-2)]",
+				"[--badge-surface-border:var(--color-yellow-alpha-6)]",
+				"[--badge-outline-border:var(--color-yellow-alpha-8)]",
+				"[--badge-solid-bg:var(--color-yellow-9)]",
+				"[--badge-solid-fg:var(--color-black)]"
+			],
+			bronze: [
+				"[--badge-fg:var(--color-bronze-11)]",
+				"[--badge-subtle-bg:var(--color-bronze-alpha-3)]",
+				"[--badge-surface-bg:var(--color-bronze-alpha-2)]",
+				"[--badge-surface-border:var(--color-bronze-alpha-6)]",
+				"[--badge-outline-border:var(--color-bronze-alpha-8)]",
+				"[--badge-solid-bg:var(--color-bronze-9)]",
+				"[--badge-solid-fg:var(--color-white)]"
+			],
+			gold: [
+				"[--badge-fg:var(--color-gold-11)]",
+				"[--badge-subtle-bg:var(--color-gold-alpha-3)]",
+				"[--badge-surface-bg:var(--color-gold-alpha-2)]",
+				"[--badge-surface-border:var(--color-gold-alpha-6)]",
+				"[--badge-outline-border:var(--color-gold-alpha-8)]",
+				"[--badge-solid-bg:var(--color-gold-9)]",
+				"[--badge-solid-fg:var(--color-white)]"
+			],
+			tomato: [
+				"[--badge-fg:var(--color-tomato-11)]",
+				"[--badge-subtle-bg:var(--color-tomato-alpha-3)]",
+				"[--badge-surface-bg:var(--color-tomato-alpha-2)]",
+				"[--badge-surface-border:var(--color-tomato-alpha-6)]",
+				"[--badge-outline-border:var(--color-tomato-alpha-8)]",
+				"[--badge-solid-bg:var(--color-tomato-9)]",
+				"[--badge-solid-fg:var(--color-white)]"
+			],
+			ruby: [
+				"[--badge-fg:var(--color-ruby-11)]",
+				"[--badge-subtle-bg:var(--color-ruby-alpha-3)]",
+				"[--badge-surface-bg:var(--color-ruby-alpha-2)]",
+				"[--badge-surface-border:var(--color-ruby-alpha-6)]",
+				"[--badge-outline-border:var(--color-ruby-alpha-8)]",
+				"[--badge-solid-bg:var(--color-ruby-9)]",
+				"[--badge-solid-fg:var(--color-white)]"
+			],
+			crimson: [
+				"[--badge-fg:var(--color-crimson-11)]",
+				"[--badge-subtle-bg:var(--color-crimson-alpha-3)]",
+				"[--badge-surface-bg:var(--color-crimson-alpha-2)]",
+				"[--badge-surface-border:var(--color-crimson-alpha-6)]",
+				"[--badge-outline-border:var(--color-crimson-alpha-8)]",
+				"[--badge-solid-bg:var(--color-crimson-9)]",
+				"[--badge-solid-fg:var(--color-white)]"
+			],
+			plum: [
+				"[--badge-fg:var(--color-plum-11)]",
+				"[--badge-subtle-bg:var(--color-plum-alpha-3)]",
+				"[--badge-surface-bg:var(--color-plum-alpha-2)]",
+				"[--badge-surface-border:var(--color-plum-alpha-6)]",
+				"[--badge-outline-border:var(--color-plum-alpha-8)]",
+				"[--badge-solid-bg:var(--color-plum-9)]",
+				"[--badge-solid-fg:var(--color-white)]"
+			],
+			violet: [
+				"[--badge-fg:var(--color-violet-11)]",
+				"[--badge-subtle-bg:var(--color-violet-alpha-3)]",
+				"[--badge-surface-bg:var(--color-violet-alpha-2)]",
+				"[--badge-surface-border:var(--color-violet-alpha-6)]",
+				"[--badge-outline-border:var(--color-violet-alpha-8)]",
+				"[--badge-solid-bg:var(--color-violet-9)]",
+				"[--badge-solid-fg:var(--color-white)]"
+			],
+			iris: [
+				"[--badge-fg:var(--color-iris-11)]",
+				"[--badge-subtle-bg:var(--color-iris-alpha-3)]",
+				"[--badge-surface-bg:var(--color-iris-alpha-2)]",
+				"[--badge-surface-border:var(--color-iris-alpha-6)]",
+				"[--badge-outline-border:var(--color-iris-alpha-8)]",
+				"[--badge-solid-bg:var(--color-iris-9)]",
+				"[--badge-solid-fg:var(--color-white)]"
+			],
+			indigo: [
+				"[--badge-fg:var(--color-indigo-11)]",
+				"[--badge-subtle-bg:var(--color-indigo-alpha-3)]",
+				"[--badge-surface-bg:var(--color-indigo-alpha-2)]",
+				"[--badge-surface-border:var(--color-indigo-alpha-6)]",
+				"[--badge-outline-border:var(--color-indigo-alpha-8)]",
+				"[--badge-solid-bg:var(--color-indigo-9)]",
+				"[--badge-solid-fg:var(--color-white)]"
+			],
+			sky: [
+				"[--badge-fg:var(--color-sky-11)]",
+				"[--badge-subtle-bg:var(--color-sky-alpha-3)]",
+				"[--badge-surface-bg:var(--color-sky-alpha-2)]",
+				"[--badge-surface-border:var(--color-sky-alpha-6)]",
+				"[--badge-outline-border:var(--color-sky-alpha-8)]",
+				"[--badge-solid-bg:var(--color-sky-9)]",
+				"[--badge-solid-fg:var(--color-black)]"
+			],
+			mint: [
+				"[--badge-fg:var(--color-mint-11)]",
+				"[--badge-subtle-bg:var(--color-mint-alpha-3)]",
+				"[--badge-surface-bg:var(--color-mint-alpha-2)]",
+				"[--badge-surface-border:var(--color-mint-alpha-6)]",
+				"[--badge-outline-border:var(--color-mint-alpha-8)]",
+				"[--badge-solid-bg:var(--color-mint-9)]",
+				"[--badge-solid-fg:var(--color-black)]"
+			],
+			lime: [
+				"[--badge-fg:var(--color-lime-11)]",
+				"[--badge-subtle-bg:var(--color-lime-alpha-3)]",
+				"[--badge-surface-bg:var(--color-lime-alpha-2)]",
+				"[--badge-surface-border:var(--color-lime-alpha-6)]",
+				"[--badge-outline-border:var(--color-lime-alpha-8)]",
+				"[--badge-solid-bg:var(--color-lime-9)]",
+				"[--badge-solid-fg:var(--color-black)]"
+			],
+			jade: [
+				"[--badge-fg:var(--color-jade-11)]",
+				"[--badge-subtle-bg:var(--color-jade-alpha-3)]",
+				"[--badge-surface-bg:var(--color-jade-alpha-2)]",
+				"[--badge-surface-border:var(--color-jade-alpha-6)]",
+				"[--badge-outline-border:var(--color-jade-alpha-8)]",
+				"[--badge-solid-bg:var(--color-jade-9)]",
+				"[--badge-solid-fg:var(--color-white)]"
+			],
+			grass: [
+				"[--badge-fg:var(--color-grass-11)]",
+				"[--badge-subtle-bg:var(--color-grass-alpha-3)]",
+				"[--badge-surface-bg:var(--color-grass-alpha-2)]",
+				"[--badge-surface-border:var(--color-grass-alpha-6)]",
+				"[--badge-outline-border:var(--color-grass-alpha-8)]",
+				"[--badge-solid-bg:var(--color-grass-9)]",
+				"[--badge-solid-fg:var(--color-white)]"
+			]
+		},
+		size: {
+			sm: [
+				"h-5",
+				"px-1.5",
+				"gap-1",
+				"text-xs",
+				"[&_svg]:size-3"
+			],
+			md: [
+				"h-6",
+				"px-2",
+				"gap-1",
+				"text-xs",
+				"[&_svg]:size-3.5"
+			],
+			lg: [
+				"h-7",
+				"px-2.5",
+				"gap-1.5",
+				"text-sm",
+				"[&_svg]:size-4"
+			]
+		},
+		variant: {
+			subtle: [
+				"border-transparent",
+				"bg-(--badge-subtle-bg)",
+				"text-(--badge-fg)"
+			],
+			surface: [
+				"border-(--badge-surface-border)",
+				"bg-(--badge-surface-bg)",
+				"text-(--badge-fg)"
+			],
+			outline: ["border-(--badge-outline-border)", "text-(--badge-fg)"],
+			solid: [
+				"border-transparent",
+				"bg-(--badge-solid-bg)",
+				"text-(--badge-solid-fg)"
+			]
+		}
+	},
+	defaultVariants: {
+		colorScheme: badgeDefaultVariants.colorScheme,
+		size: badgeDefaultVariants.size,
+		variant: badgeDefaultVariants.variant
+	}
+});
+//#endregion
+export { badgeDefaultVariants, badgeVariants };
+
+//# sourceMappingURL=badge-variants.js.map

package/dist/components/display/badge/badge-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge-variants.js","names":[],"sources":["../../../../src/components/display/badge/badge-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeFull } from '#types';\n\nexport type BadgeVariants = {\n  /**\n   * Cor do texto, do fundo e da borda, entre todas as escalas do tema: para categorias, há\n   * variedade; para estado, `red`, `green`, `amber` e `blue`.\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeFull;\n  /**\n   * Altura, padding, tamanho do texto e do ícone: `sm` = `h-5`, `md` = `h-6`, `lg` = `h-7`.\n   *\n   * @default 'sm'\n   */\n  size?: 'sm' | 'md' | 'lg';\n  /**\n   * Fundo e borda: `subtle` só com fundo, `surface` com fundo e borda, `outline` só com borda e\n   * `solid` com o fundo cheio (passo 9) e o texto em contraste.\n   *\n   * @default 'subtle'\n   */\n  variant?: 'subtle' | 'surface' | 'outline' | 'solid';\n};\n\nexport const badgeDefaultVariants: Required<BadgeVariants> = {\n  colorScheme: 'gray',\n  size: 'sm',\n  variant: 'subtle',\n};\n\n/**\n * Origem do visual do rótulo curto, copiado pela `Tag` (tabela no README de `display`).\n *\n * O `colorScheme` só declara as variáveis `--badge-*`, e a `variant` decide onde cada uma entra.\n * Assim uma cor nova é um bloco de variáveis, sem um bloco por combinação de cor e `variant`. O\n * fundo e a borda usam a escala alpha, para o badge funcionar sobre qualquer fundo. No `solid`, o\n * texto é branco, menos em amber, yellow, sky, mint e lime, claros demais para ele, que levam\n * preto; o gray sólido é preto no tema claro e branco no escuro, como o do `Button`.\n *\n * O `max-w-full` e o `min-w-0` limitam o badge à largura do pai, para o `Badge` cortar um texto\n * longo com reticências. O `shrink-0` fica: numa linha flex, quem encolhe é o vizinho.\n */\nexport const badgeVariants = cva(\n  [\n    'inline-flex',\n    'items-center',\n    'shrink-0',\n    'align-middle',\n\n    'max-w-full',\n    'min-w-0',\n\n    'border',\n    'rounded-sm',\n    'corner-squircle',\n\n    'font-medium',\n    'leading-none',\n    'whitespace-nowrap',\n    'tabular-nums',\n\n    '[&_svg]:shrink-0',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: [\n          '[--badge-fg:var(--color-gray-11)]',\n          '[--badge-subtle-bg:var(--color-gray-alpha-3)]',\n          '[--badge-surface-bg:var(--color-gray-alpha-2)]',\n          '[--badge-surface-border:var(--color-gray-alpha-6)]',\n          '[--badge-outline-border:var(--color-gray-alpha-8)]',\n          '[--badge-solid-bg:var(--color-black)]',\n          'dark:[--badge-solid-bg:var(--color-white)]',\n          '[--badge-solid-fg:var(--color-white)]',\n          'dark:[--badge-solid-fg:var(--color-black)]',\n        ],\n        brand: [\n          '[--badge-fg:var(--color-brand-11)]',\n          '[--badge-subtle-bg:var(--color-brand-alpha-3)]',\n          '[--badge-surface-bg:var(--color-brand-alpha-2)]',\n          '[--badge-surface-border:var(--color-brand-alpha-6)]',\n          '[--badge-outline-border:var(--color-brand-alpha-8)]',\n          '[--badge-solid-bg:var(--color-brand-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        red: [\n          '[--badge-fg:var(--color-red-11)]',\n          '[--badge-subtle-bg:var(--color-red-alpha-3)]',\n          '[--badge-surface-bg:var(--color-red-alpha-2)]',\n          '[--badge-surface-border:var(--color-red-alpha-6)]',\n          '[--badge-outline-border:var(--color-red-alpha-8)]',\n          '[--badge-solid-bg:var(--color-red-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        green: [\n          '[--badge-fg:var(--color-green-11)]',\n          '[--badge-subtle-bg:var(--color-green-alpha-3)]',\n          '[--badge-surface-bg:var(--color-green-alpha-2)]',\n          '[--badge-surface-border:var(--color-green-alpha-6)]',\n          '[--badge-outline-border:var(--color-green-alpha-8)]',\n          '[--badge-solid-bg:var(--color-green-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        blue: [\n          '[--badge-fg:var(--color-blue-11)]',\n          '[--badge-subtle-bg:var(--color-blue-alpha-3)]',\n          '[--badge-surface-bg:var(--color-blue-alpha-2)]',\n          '[--badge-surface-border:var(--color-blue-alpha-6)]',\n          '[--badge-outline-border:var(--color-blue-alpha-8)]',\n          '[--badge-solid-bg:var(--color-blue-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        amber: [\n          '[--badge-fg:var(--color-amber-11)]',\n          '[--badge-subtle-bg:var(--color-amber-alpha-3)]',\n          '[--badge-surface-bg:var(--color-amber-alpha-2)]',\n          '[--badge-surface-border:var(--color-amber-alpha-6)]',\n          '[--badge-outline-border:var(--color-amber-alpha-8)]',\n          '[--badge-solid-bg:var(--color-amber-9)]',\n          '[--badge-solid-fg:var(--color-black)]',\n        ],\n        purple: [\n          '[--badge-fg:var(--color-purple-11)]',\n          '[--badge-subtle-bg:var(--color-purple-alpha-3)]',\n          '[--badge-surface-bg:var(--color-purple-alpha-2)]',\n          '[--badge-surface-border:var(--color-purple-alpha-6)]',\n          '[--badge-outline-border:var(--color-purple-alpha-8)]',\n          '[--badge-solid-bg:var(--color-purple-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        pink: [\n          '[--badge-fg:var(--color-pink-11)]',\n          '[--badge-subtle-bg:var(--color-pink-alpha-3)]',\n          '[--badge-surface-bg:var(--color-pink-alpha-2)]',\n          '[--badge-surface-border:var(--color-pink-alpha-6)]',\n          '[--badge-outline-border:var(--color-pink-alpha-8)]',\n          '[--badge-solid-bg:var(--color-pink-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        cyan: [\n          '[--badge-fg:var(--color-cyan-11)]',\n          '[--badge-subtle-bg:var(--color-cyan-alpha-3)]',\n          '[--badge-surface-bg:var(--color-cyan-alpha-2)]',\n          '[--badge-surface-border:var(--color-cyan-alpha-6)]',\n          '[--badge-outline-border:var(--color-cyan-alpha-8)]',\n          '[--badge-solid-bg:var(--color-cyan-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        teal: [\n          '[--badge-fg:var(--color-teal-11)]',\n          '[--badge-subtle-bg:var(--color-teal-alpha-3)]',\n          '[--badge-surface-bg:var(--color-teal-alpha-2)]',\n          '[--badge-surface-border:var(--color-teal-alpha-6)]',\n          '[--badge-outline-border:var(--color-teal-alpha-8)]',\n          '[--badge-solid-bg:var(--color-teal-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        orange: [\n          '[--badge-fg:var(--color-orange-11)]',\n          '[--badge-subtle-bg:var(--color-orange-alpha-3)]',\n          '[--badge-surface-bg:var(--color-orange-alpha-2)]',\n          '[--badge-surface-border:var(--color-orange-alpha-6)]',\n          '[--badge-outline-border:var(--color-orange-alpha-8)]',\n          '[--badge-solid-bg:var(--color-orange-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        brown: [\n          '[--badge-fg:var(--color-brown-11)]',\n          '[--badge-subtle-bg:var(--color-brown-alpha-3)]',\n          '[--badge-surface-bg:var(--color-brown-alpha-2)]',\n          '[--badge-surface-border:var(--color-brown-alpha-6)]',\n          '[--badge-outline-border:var(--color-brown-alpha-8)]',\n          '[--badge-solid-bg:var(--color-brown-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        yellow: [\n          '[--badge-fg:var(--color-yellow-11)]',\n          '[--badge-subtle-bg:var(--color-yellow-alpha-3)]',\n          '[--badge-surface-bg:var(--color-yellow-alpha-2)]',\n          '[--badge-surface-border:var(--color-yellow-alpha-6)]',\n          '[--badge-outline-border:var(--color-yellow-alpha-8)]',\n          '[--badge-solid-bg:var(--color-yellow-9)]',\n          '[--badge-solid-fg:var(--color-black)]',\n        ],\n        bronze: [\n          '[--badge-fg:var(--color-bronze-11)]',\n          '[--badge-subtle-bg:var(--color-bronze-alpha-3)]',\n          '[--badge-surface-bg:var(--color-bronze-alpha-2)]',\n          '[--badge-surface-border:var(--color-bronze-alpha-6)]',\n          '[--badge-outline-border:var(--color-bronze-alpha-8)]',\n          '[--badge-solid-bg:var(--color-bronze-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        gold: [\n          '[--badge-fg:var(--color-gold-11)]',\n          '[--badge-subtle-bg:var(--color-gold-alpha-3)]',\n          '[--badge-surface-bg:var(--color-gold-alpha-2)]',\n          '[--badge-surface-border:var(--color-gold-alpha-6)]',\n          '[--badge-outline-border:var(--color-gold-alpha-8)]',\n          '[--badge-solid-bg:var(--color-gold-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        tomato: [\n          '[--badge-fg:var(--color-tomato-11)]',\n          '[--badge-subtle-bg:var(--color-tomato-alpha-3)]',\n          '[--badge-surface-bg:var(--color-tomato-alpha-2)]',\n          '[--badge-surface-border:var(--color-tomato-alpha-6)]',\n          '[--badge-outline-border:var(--color-tomato-alpha-8)]',\n          '[--badge-solid-bg:var(--color-tomato-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        ruby: [\n          '[--badge-fg:var(--color-ruby-11)]',\n          '[--badge-subtle-bg:var(--color-ruby-alpha-3)]',\n          '[--badge-surface-bg:var(--color-ruby-alpha-2)]',\n          '[--badge-surface-border:var(--color-ruby-alpha-6)]',\n          '[--badge-outline-border:var(--color-ruby-alpha-8)]',\n          '[--badge-solid-bg:var(--color-ruby-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        crimson: [\n          '[--badge-fg:var(--color-crimson-11)]',\n          '[--badge-subtle-bg:var(--color-crimson-alpha-3)]',\n          '[--badge-surface-bg:var(--color-crimson-alpha-2)]',\n          '[--badge-surface-border:var(--color-crimson-alpha-6)]',\n          '[--badge-outline-border:var(--color-crimson-alpha-8)]',\n          '[--badge-solid-bg:var(--color-crimson-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        plum: [\n          '[--badge-fg:var(--color-plum-11)]',\n          '[--badge-subtle-bg:var(--color-plum-alpha-3)]',\n          '[--badge-surface-bg:var(--color-plum-alpha-2)]',\n          '[--badge-surface-border:var(--color-plum-alpha-6)]',\n          '[--badge-outline-border:var(--color-plum-alpha-8)]',\n          '[--badge-solid-bg:var(--color-plum-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        violet: [\n          '[--badge-fg:var(--color-violet-11)]',\n          '[--badge-subtle-bg:var(--color-violet-alpha-3)]',\n          '[--badge-surface-bg:var(--color-violet-alpha-2)]',\n          '[--badge-surface-border:var(--color-violet-alpha-6)]',\n          '[--badge-outline-border:var(--color-violet-alpha-8)]',\n          '[--badge-solid-bg:var(--color-violet-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        iris: [\n          '[--badge-fg:var(--color-iris-11)]',\n          '[--badge-subtle-bg:var(--color-iris-alpha-3)]',\n          '[--badge-surface-bg:var(--color-iris-alpha-2)]',\n          '[--badge-surface-border:var(--color-iris-alpha-6)]',\n          '[--badge-outline-border:var(--color-iris-alpha-8)]',\n          '[--badge-solid-bg:var(--color-iris-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        indigo: [\n          '[--badge-fg:var(--color-indigo-11)]',\n          '[--badge-subtle-bg:var(--color-indigo-alpha-3)]',\n          '[--badge-surface-bg:var(--color-indigo-alpha-2)]',\n          '[--badge-surface-border:var(--color-indigo-alpha-6)]',\n          '[--badge-outline-border:var(--color-indigo-alpha-8)]',\n          '[--badge-solid-bg:var(--color-indigo-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        sky: [\n          '[--badge-fg:var(--color-sky-11)]',\n          '[--badge-subtle-bg:var(--color-sky-alpha-3)]',\n          '[--badge-surface-bg:var(--color-sky-alpha-2)]',\n          '[--badge-surface-border:var(--color-sky-alpha-6)]',\n          '[--badge-outline-border:var(--color-sky-alpha-8)]',\n          '[--badge-solid-bg:var(--color-sky-9)]',\n          '[--badge-solid-fg:var(--color-black)]',\n        ],\n        mint: [\n          '[--badge-fg:var(--color-mint-11)]',\n          '[--badge-subtle-bg:var(--color-mint-alpha-3)]',\n          '[--badge-surface-bg:var(--color-mint-alpha-2)]',\n          '[--badge-surface-border:var(--color-mint-alpha-6)]',\n          '[--badge-outline-border:var(--color-mint-alpha-8)]',\n          '[--badge-solid-bg:var(--color-mint-9)]',\n          '[--badge-solid-fg:var(--color-black)]',\n        ],\n        lime: [\n          '[--badge-fg:var(--color-lime-11)]',\n          '[--badge-subtle-bg:var(--color-lime-alpha-3)]',\n          '[--badge-surface-bg:var(--color-lime-alpha-2)]',\n          '[--badge-surface-border:var(--color-lime-alpha-6)]',\n          '[--badge-outline-border:var(--color-lime-alpha-8)]',\n          '[--badge-solid-bg:var(--color-lime-9)]',\n          '[--badge-solid-fg:var(--color-black)]',\n        ],\n        jade: [\n          '[--badge-fg:var(--color-jade-11)]',\n          '[--badge-subtle-bg:var(--color-jade-alpha-3)]',\n          '[--badge-surface-bg:var(--color-jade-alpha-2)]',\n          '[--badge-surface-border:var(--color-jade-alpha-6)]',\n          '[--badge-outline-border:var(--color-jade-alpha-8)]',\n          '[--badge-solid-bg:var(--color-jade-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        grass: [\n          '[--badge-fg:var(--color-grass-11)]',\n          '[--badge-subtle-bg:var(--color-grass-alpha-3)]',\n          '[--badge-surface-bg:var(--color-grass-alpha-2)]',\n          '[--badge-surface-border:var(--color-grass-alpha-6)]',\n          '[--badge-outline-border:var(--color-grass-alpha-8)]',\n          '[--badge-solid-bg:var(--color-grass-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n      },\n      size: {\n        sm: ['h-5', 'px-1.5', 'gap-1', 'text-xs', '[&_svg]:size-3'],\n        md: ['h-6', 'px-2', 'gap-1', 'text-xs', '[&_svg]:size-3.5'],\n        lg: ['h-7', 'px-2.5', 'gap-1.5', 'text-sm', '[&_svg]:size-4'],\n      },\n      variant: {\n        // A borda transparente fica para as variantes terem a mesma medida.\n        subtle: [\n          'border-transparent',\n          'bg-(--badge-subtle-bg)',\n          'text-(--badge-fg)',\n        ],\n        surface: [\n          'border-(--badge-surface-border)',\n          'bg-(--badge-surface-bg)',\n          'text-(--badge-fg)',\n        ],\n        outline: ['border-(--badge-outline-border)', 'text-(--badge-fg)'],\n        solid: [\n          'border-transparent',\n          'bg-(--badge-solid-bg)',\n          'text-(--badge-solid-fg)',\n        ],\n      },\n    },\n    defaultVariants: {\n      colorScheme: badgeDefaultVariants.colorScheme,\n      size: badgeDefaultVariants.size,\n      variant: badgeDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AA0BA,MAAa,uBAAgD;CAC3D,aAAa;CACb,MAAM;CACN,SAAS;AACX;;;;;;;;;;;;;AAcA,MAAa,gBAAgB,IAC3B;CACE;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CAEA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,KAAK;IACH;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,KAAK;IACH;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI;IAAC;IAAO;IAAU;IAAS;IAAW;GAAgB;GAC1D,IAAI;IAAC;IAAO;IAAQ;IAAS;IAAW;GAAkB;GAC1D,IAAI;IAAC;IAAO;IAAU;IAAW;IAAW;GAAgB;EAC9D;EACA,SAAS;GAEP,QAAQ;IACN;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;GACA,SAAS,CAAC,mCAAmC,mBAAmB;GAChE,OAAO;IACL;IACA;IACA;GACF;EACF;CACF;CACA,iBAAiB;EACf,aAAa,qBAAqB;EAClC,MAAM,qBAAqB;EAC3B,SAAS,qBAAqB;CAChC;AACF,CACF"}

package/dist/components/display/badge/badge.d.ts

@@ -0,0 +1,32 @@
+import { BadgeVariants } from "./badge-variants.js";
+import React from "react";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
+import { useRender } from "@base-ui/react";
+//#region src/components/display/badge/badge.d.ts
+export type BadgeProps = MergeOverride<useRender.ComponentProps<'span'>, BadgeVariants>;
+/**
+ * Rótulo curto de exibição, para uma categoria, um estado ou uma contagem ("Pago", "NF-e", "3").
+ * Não tem interação: para um item que se remove, a `Tag`.
+ *
+ * Um ícone entra nos filhos, antes ou depois do texto, pelo `Icon` da lib. A cor sozinha não
+ * comunica para quem não a distingue: o texto diz o que o badge significa.
+ *
+ * O badge não passa da largura do pai: um texto que não cabe termina em reticências. O leitor de
+ * tela lê o texto inteiro, e quem vê precisa dele no `title`, como no `Truncate`.
+ *
+ * @example
+ * ```tsx
+ * <Badge colorScheme="green">Pago</Badge>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Badge title={status}>{status}</Badge>
+ * ```
+ */
+export declare const Badge: {
+  (props: BadgeProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=badge.d.ts.map

package/dist/components/display/badge/badge.js

@@ -0,0 +1,78 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { badgeVariants } from "./badge-variants.js";
+import { Children } from "react";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
+import { mergeProps, useRender } from "@base-ui/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/display/badge/badge.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Rótulo curto de exibição, para uma categoria, um estado ou uma contagem ("Pago", "NF-e", "3").
+* Não tem interação: para um item que se remove, a `Tag`.
+*
+* Um ícone entra nos filhos, antes ou depois do texto, pelo `Icon` da lib. A cor sozinha não
+* comunica para quem não a distingue: o texto diz o que o badge significa.
+*
+* O badge não passa da largura do pai: um texto que não cabe termina em reticências. O leitor de
+* tela lê o texto inteiro, e quem vê precisa dele no `title`, como no `Truncate`.
+*
+* @example
+* ```tsx
+* <Badge colorScheme="green">Pago</Badge>
+* ```
+*
+* @example
+* ```tsx
+* <Badge title={status}>{status}</Badge>
+* ```
+*/
+const Badge = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, [
+		"colorScheme",
+		"size",
+		"variant"
+	]);
+	const { render, className, children, ...rest } = elementProps;
+	const baseProps = {
+		"data-component": "Badge",
+		className: mergeTwClassNames(badgeVariants(variantProps), className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "span",
+		props: mergeProps(baseProps, rest, children === void 0 ? {} : { children: wrapTextChildren(children) })
+	});
+};
+Badge.displayName = "Badge";
+/**
+* Envolve cada sequência de texto dos filhos num `span` com `truncate`, que é onde as reticências
+* se aplicam: um texto solto num contêiner flex vira um item anônimo e não corta. Os elementos
+* (ícones) ficam como estão, e `null`, `undefined` e booleanos somem. Sem texto, devolve os
+* filhos intactos.
+*/
+const wrapTextChildren = (children) => {
+	const items = Children.toArray(children);
+	if (!items.some(isText)) return children;
+	const result = [];
+	let textRun = [];
+	const flushTextRun = () => {
+		if (textRun.length === 0) return;
+		result.push(/* @__PURE__ */ jsx("span", {
+			className: mergeTwClassNames(["min-w-0", "truncate"]),
+			children: textRun
+		}, `text-${result.length}`));
+		textRun = [];
+	};
+	for (const item of items) if (isText(item)) textRun.push(item);
+	else {
+		flushTextRun();
+		result.push(item);
+	}
+	flushTextRun();
+	return result;
+};
+const isText = (node) => typeof node === "string" || typeof node === "number";
+//#endregion
+export { Badge };
+
+//# sourceMappingURL=badge.js.map

package/dist/components/display/badge/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","names":[],"sources":["../../../../src/components/display/badge/badge.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport type React from 'react';\nimport { Children } from 'react';\nimport { mergeTwClassNames } from '#utils';\nimport { type BadgeVariants, badgeVariants } from './badge-variants';\n\nexport type BadgeProps = MergeOverride<\n  useRender.ComponentProps<'span'>,\n  BadgeVariants\n>;\n\nconst splitVariantProps = createSplitProps<BadgeVariants>();\n\n/**\n * Rótulo curto de exibição, para uma categoria, um estado ou uma contagem (\"Pago\", \"NF-e\", \"3\").\n * Não tem interação: para um item que se remove, a `Tag`.\n *\n * Um ícone entra nos filhos, antes ou depois do texto, pelo `Icon` da lib. A cor sozinha não\n * comunica para quem não a distingue: o texto diz o que o badge significa.\n *\n * O badge não passa da largura do pai: um texto que não cabe termina em reticências. O leitor de\n * tela lê o texto inteiro, e quem vê precisa dele no `title`, como no `Truncate`.\n *\n * @example\n * ```tsx\n * <Badge colorScheme=\"green\">Pago</Badge>\n * ```\n *\n * @example\n * ```tsx\n * <Badge title={status}>{status}</Badge>\n * ```\n */\nexport const Badge = (props: BadgeProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n    'size',\n    'variant',\n  ]);\n\n  const { render, className, children, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'Badge',\n    className: mergeTwClassNames(badgeVariants(variantProps), className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(\n      baseProps,\n      rest,\n      children === undefined ? {} : { children: wrapTextChildren(children) },\n    ),\n  });\n};\n\nBadge.displayName = 'Badge';\n\n/**\n * Envolve cada sequência de texto dos filhos num `span` com `truncate`, que é onde as reticências\n * se aplicam: um texto solto num contêiner flex vira um item anônimo e não corta. Os elementos\n * (ícones) ficam como estão, e `null`, `undefined` e booleanos somem. Sem texto, devolve os\n * filhos intactos.\n */\nconst wrapTextChildren = (children: React.ReactNode): React.ReactNode => {\n  const items = Children.toArray(children);\n\n  if (!items.some(isText)) {\n    return children;\n  }\n\n  const result: React.ReactNode[] = [];\n  let textRun: (string | number)[] = [];\n\n  const flushTextRun = () => {\n    if (textRun.length === 0) {\n      return;\n    }\n\n    result.push(\n      <span\n        key={`text-${result.length}`}\n        className={mergeTwClassNames(['min-w-0', 'truncate'])}\n      >\n        {textRun}\n      </span>,\n    );\n    textRun = [];\n  };\n\n  for (const item of items) {\n    if (isText(item)) {\n      textRun.push(item);\n    } else {\n      flushTextRun();\n      result.push(item);\n    }\n  }\n\n  flushTextRun();\n\n  return result;\n};\n\nconst isText = (node: unknown): node is string | number =>\n  typeof node === 'string' || typeof node === 'number';\n"],"mappings":";;;;;;;AAeA,MAAM,oBAAoB,iBAAgC;;;;;;;;;;;;;;;;;;;;;AAsB1D,MAAa,SAAS,UAAsB;CAC1C,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO;EAC5D;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,QAAQ,WAAW,UAAU,GAAG,SAAS;CAEjD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,cAAc,YAAY,GAAG,SAAS;CACrE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WACL,WACA,MACA,aAAa,KAAA,IAAY,CAAC,IAAI,EAAE,UAAU,iBAAiB,QAAQ,EAAE,CACvE;CACF,CAAC;AACH;AAEA,MAAM,cAAc;;;;;;;AAQpB,MAAM,oBAAoB,aAA+C;CACvE,MAAM,QAAQ,SAAS,QAAQ,QAAQ;CAEvC,IAAI,CAAC,MAAM,KAAK,MAAM,GACpB,OAAO;CAGT,MAAM,SAA4B,CAAC;CACnC,IAAI,UAA+B,CAAC;CAEpC,MAAM,qBAAqB;EACzB,IAAI,QAAQ,WAAW,GACrB;EAGF,OAAO,KACL,oBAAC,QAAD;GAEE,WAAW,kBAAkB,CAAC,WAAW,UAAU,CAAC;GAEnD,UAAA;EACG,GAJC,QAAQ,OAAO,QAIhB,CACR;EACA,UAAU,CAAC;CACb;CAEA,KAAK,MAAM,QAAQ,OACjB,IAAI,OAAO,IAAI,GACb,QAAQ,KAAK,IAAI;MACZ;EACL,aAAa;EACb,OAAO,KAAK,IAAI;CAClB;CAGF,aAAa;CAEb,OAAO;AACT;AAEA,MAAM,UAAU,SACd,OAAO,SAAS,YAAY,OAAO,SAAS"}

package/dist/components/display/badge/index.d.ts

@@ -0,0 +1,3 @@
+import { BadgeVariants } from "./badge-variants.js";
+import { Badge, BadgeProps } from "./badge.js";
+export { Badge, type BadgeProps, type BadgeVariants };

package/dist/components/display/badge/index.js

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

package/dist/components/display/card/card-body.js

@@ -16,6 +16,7 @@ const CardBody = (props) => {
 			"flex",
 			"flex-1",
 			"flex-col",
+			"gap-4",
 			"p-(--card-padding)"
 		], className)
 	};

package/dist/components/display/card/card-body.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-body.js","names":[],"sources":["../../../../src/components/display/card/card-body.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type CardBodyProps = useRender.ComponentProps<'div'>;\n\n/**\n * Conteúdo principal do card. Ocupa o espaço que sobra (`flex-1`), empurrando o `Card.Footer`\n * para a base.\n *\n * Origem do corpo das superfícies com cabeçalho: o `Dialog.Body` copia estas classes (tabela no README de `display`). Uma\n * mudança aqui vale para a cópia na mesma rodada.\n */\nexport const CardBody = (props: CardBodyProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Card.Body',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'flex-1',\n        'flex-col',\n\n        'p-(--card-padding)',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCardBody.displayName = 'Card.Body';\n"],"mappings":";;;;;;;;;;AAYA,MAAa,YAAY,UAAyB;CAChD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,SAAS,cAAc"}
+{"version":3,"file":"card-body.js","names":[],"sources":["../../../../src/components/display/card/card-body.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type CardBodyProps = useRender.ComponentProps<'div'>;\n\n/**\n * Conteúdo principal do card. Ocupa o espaço que sobra (`flex-1`), empurrando o `Card.Footer`\n * para a base.\n *\n * Origem do corpo das superfícies com cabeçalho: o `Dialog.Body` copia estas classes (tabela no README de `display`). Uma\n * mudança aqui vale para a cópia na mesma rodada.\n */\nexport const CardBody = (props: CardBodyProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Card.Body',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'flex-1',\n        'flex-col',\n        'gap-4',\n\n        'p-(--card-padding)',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCardBody.displayName = 'Card.Body';\n"],"mappings":";;;;;;;;;;AAYA,MAAa,YAAY,UAAyB;CAChD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,SAAS,cAAc"}

package/dist/components/display/card/card-root.d.ts

@@ -1,5 +1,5 @@
 import { CardVariants } from "./card-root-variants.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { useRender } from "@base-ui/react";
 //#region src/components/display/card/card-root.d.ts
 export type CardRootProps = MergeOverride<useRender.ComponentProps<'div'>, CardVariants>;

package/dist/components/display/card/card-root.js

@@ -1,6 +1,6 @@
 import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
 import { cardRootVariants } from "./card-root-variants.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { mergeProps, useRender } from "@base-ui/react";
 //#region src/components/display/card/card-root.tsx
 const splitVariantProps = createSplitProps();

package/dist/components/display/card/card-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-root.js","names":[],"sources":["../../../../src/components/display/card/card-root.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\nimport { type CardVariants, cardRootVariants } from './card-root-variants';\n\nexport type CardRootProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  CardVariants\n>;\n\nconst splitVariantProps = createSplitProps<CardVariants>();\n\n/**\n * Contêiner que agrupa conteúdo e ações sobre um mesmo assunto.\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Plano Pro</Card.Title>\n *     <Card.Description>Cobrança mensal</Card.Description>\n *   </Card.Header>\n *   <Card.Body>…</Card.Body>\n *   <Card.Footer>…</Card.Footer>\n * </Card.Root>\n * ```\n */\nexport const CardRoot = (props: CardRootProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['variant']);\n\n  const { render, className, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'Card.Root',\n    className: mergeTwClassNames(cardRootVariants(variantProps), className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCardRoot.displayName = 'Card.Root';\n"],"mappings":";;;;;AAUA,MAAM,oBAAoB,iBAA+B;;;;;;;;;;;;;;;;AAiBzD,MAAa,YAAY,UAAyB;CAChD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,SAAS,CAAC;CAEzE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,iBAAiB,YAAY,GAAG,SAAS;CACxE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,SAAS,cAAc"}
+{"version":3,"file":"card-root.js","names":[],"sources":["../../../../src/components/display/card/card-root.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { mergeTwClassNames } from '#utils';\nimport { type CardVariants, cardRootVariants } from './card-root-variants';\n\nexport type CardRootProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  CardVariants\n>;\n\nconst splitVariantProps = createSplitProps<CardVariants>();\n\n/**\n * Contêiner que agrupa conteúdo e ações sobre um mesmo assunto.\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Plano Pro</Card.Title>\n *     <Card.Description>Cobrança mensal</Card.Description>\n *   </Card.Header>\n *   <Card.Body>…</Card.Body>\n *   <Card.Footer>…</Card.Footer>\n * </Card.Root>\n * ```\n */\nexport const CardRoot = (props: CardRootProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['variant']);\n\n  const { render, className, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'Card.Root',\n    className: mergeTwClassNames(cardRootVariants(variantProps), className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCardRoot.displayName = 'Card.Root';\n"],"mappings":";;;;;AAaA,MAAM,oBAAoB,iBAA+B;;;;;;;;;;;;;;;;AAiBzD,MAAa,YAAY,UAAyB;CAChD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,SAAS,CAAC;CAEzE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,iBAAiB,YAAY,GAAG,SAAS;CACxE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,SAAS,cAAc"}

package/dist/components/display/card/card-title.d.ts

@@ -1,4 +1,4 @@
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { useRender } from "@base-ui/react";
 //#region src/components/display/card/card-title.d.ts
 export type CardTitleProps = MergeOverride<useRender.ComponentProps<'h3'>, {

package/dist/components/display/card/card-title.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-title.js","names":[],"sources":["../../../../src/components/display/card/card-title.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\n\nexport type CardTitleProps = MergeOverride<\n  useRender.ComponentProps<'h3'>,\n  {\n    /**\n     * Nível do título, que define a tag (`h1` a `h6`). Não muda a aparência. Com `render`, a tag\n     * do `render` prevalece.\n     *\n     * @default 3\n     */\n    level?: 1 | 2 | 3 | 4 | 5 | 6;\n  }\n>;\n\n/**\n * Título do card, em tamanho fixo.\n *\n * O `Dialog.Title` copia estas classes (tabela no README de `display`). Uma mudança aqui vale para a\n * cópia na mesma rodada.\n */\nexport const CardTitle = (props: CardTitleProps) => {\n  const { level = 3, render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Card.Title',\n    className: mergeTwClassNames(\n      ['text-base', 'leading-6', 'font-medium', 'text-gray-12', 'text-balance'],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: `h${level}`,\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCardTitle.displayName = 'Card.Title';\n"],"mappings":";;;;;;;;;AAuBA,MAAa,aAAa,UAA0B;CAClD,MAAM,EAAE,QAAQ,GAAG,QAAQ,WAAW,GAAG,SAAS;CAElD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GAAC;GAAa;GAAa;GAAe;GAAgB;EAAc,GACxE,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB,IAAI;EACpB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,UAAU,cAAc"}
+{"version":3,"file":"card-title.js","names":[],"sources":["../../../../src/components/display/card/card-title.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport type { MergeOverride } from '@lucasbernardosn/ts-utils';\nimport { mergeTwClassNames } from '#utils';\n\nexport type CardTitleProps = MergeOverride<\n  useRender.ComponentProps<'h3'>,\n  {\n    /**\n     * Nível do título, que define a tag (`h1` a `h6`). Não muda a aparência. Com `render`, a tag\n     * do `render` prevalece.\n     *\n     * @default 3\n     */\n    level?: 1 | 2 | 3 | 4 | 5 | 6;\n  }\n>;\n\n/**\n * Título do card, em tamanho fixo.\n *\n * O `Dialog.Title` copia estas classes (tabela no README de `display`). Uma mudança aqui vale para a\n * cópia na mesma rodada.\n */\nexport const CardTitle = (props: CardTitleProps) => {\n  const { level = 3, render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Card.Title',\n    className: mergeTwClassNames(\n      ['text-base', 'leading-6', 'font-medium', 'text-gray-12', 'text-balance'],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: `h${level}`,\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCardTitle.displayName = 'Card.Title';\n"],"mappings":";;;;;;;;;AAuBA,MAAa,aAAa,UAA0B;CAClD,MAAM,EAAE,QAAQ,GAAG,QAAQ,WAAW,GAAG,SAAS;CAElD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GAAC;GAAa;GAAa;GAAe;GAAgB;EAAc,GACxE,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB,IAAI;EACpB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,UAAU,cAAc"}

package/dist/components/display/clipboard/clipboard-indicator.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { useRender } from "@base-ui/react";
 //#region src/components/display/clipboard/clipboard-indicator.d.ts
 type IndicatorProps = {