@lucasbernardosn/react-ui 0.3.0 → 0.5.0

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

@@ -6,19 +6,24 @@ const badgeDefaultVariants = {
 	variant: "subtle"
 };
 /**
-* Origem do visual do rótulo curto, copiado pela `Tag` (tabela no README de `display`).
+* Origem do visual do rótulo curto, copiado pela `Tag`.
 *
 * 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`.
+* fundo usa a escala alpha, para o badge funcionar sobre qualquer fundo, e a borda o passo sólido.
+* 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",
@@ -31,248 +36,248 @@ const badgeVariants = cva([
 	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-fg:var(--gray-11)]",
+				"[--badge-subtle-bg:var(--gray-a3)]",
+				"[--badge-surface-bg:var(--gray-a2)]",
+				"[--badge-surface-border:var(--gray-6)]",
+				"[--badge-outline-border:var(--gray-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)]",
+			accent: [
+				"[--badge-fg:var(--accent-11)]",
+				"[--badge-subtle-bg:var(--accent-a3)]",
+				"[--badge-surface-bg:var(--accent-a2)]",
+				"[--badge-surface-border:var(--accent-6)]",
+				"[--badge-outline-border:var(--accent-8)]",
+				"[--badge-solid-bg:var(--accent-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-fg:var(--red-11)]",
+				"[--badge-subtle-bg:var(--red-a3)]",
+				"[--badge-surface-bg:var(--red-a2)]",
+				"[--badge-surface-border:var(--red-6)]",
+				"[--badge-outline-border:var(--red-8)]",
+				"[--badge-solid-bg:var(--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-fg:var(--green-11)]",
+				"[--badge-subtle-bg:var(--green-a3)]",
+				"[--badge-surface-bg:var(--green-a2)]",
+				"[--badge-surface-border:var(--green-6)]",
+				"[--badge-outline-border:var(--green-8)]",
+				"[--badge-solid-bg:var(--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-fg:var(--blue-11)]",
+				"[--badge-subtle-bg:var(--blue-a3)]",
+				"[--badge-surface-bg:var(--blue-a2)]",
+				"[--badge-surface-border:var(--blue-6)]",
+				"[--badge-outline-border:var(--blue-8)]",
+				"[--badge-solid-bg:var(--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-fg:var(--amber-11)]",
+				"[--badge-subtle-bg:var(--amber-a3)]",
+				"[--badge-surface-bg:var(--amber-a2)]",
+				"[--badge-surface-border:var(--amber-6)]",
+				"[--badge-outline-border:var(--amber-8)]",
+				"[--badge-solid-bg:var(--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-fg:var(--purple-11)]",
+				"[--badge-subtle-bg:var(--purple-a3)]",
+				"[--badge-surface-bg:var(--purple-a2)]",
+				"[--badge-surface-border:var(--purple-6)]",
+				"[--badge-outline-border:var(--purple-8)]",
+				"[--badge-solid-bg:var(--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-fg:var(--pink-11)]",
+				"[--badge-subtle-bg:var(--pink-a3)]",
+				"[--badge-surface-bg:var(--pink-a2)]",
+				"[--badge-surface-border:var(--pink-6)]",
+				"[--badge-outline-border:var(--pink-8)]",
+				"[--badge-solid-bg:var(--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-fg:var(--cyan-11)]",
+				"[--badge-subtle-bg:var(--cyan-a3)]",
+				"[--badge-surface-bg:var(--cyan-a2)]",
+				"[--badge-surface-border:var(--cyan-6)]",
+				"[--badge-outline-border:var(--cyan-8)]",
+				"[--badge-solid-bg:var(--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-fg:var(--teal-11)]",
+				"[--badge-subtle-bg:var(--teal-a3)]",
+				"[--badge-surface-bg:var(--teal-a2)]",
+				"[--badge-surface-border:var(--teal-6)]",
+				"[--badge-outline-border:var(--teal-8)]",
+				"[--badge-solid-bg:var(--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-fg:var(--orange-11)]",
+				"[--badge-subtle-bg:var(--orange-a3)]",
+				"[--badge-surface-bg:var(--orange-a2)]",
+				"[--badge-surface-border:var(--orange-6)]",
+				"[--badge-outline-border:var(--orange-8)]",
+				"[--badge-solid-bg:var(--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-fg:var(--brown-11)]",
+				"[--badge-subtle-bg:var(--brown-a3)]",
+				"[--badge-surface-bg:var(--brown-a2)]",
+				"[--badge-surface-border:var(--brown-6)]",
+				"[--badge-outline-border:var(--brown-8)]",
+				"[--badge-solid-bg:var(--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-fg:var(--yellow-11)]",
+				"[--badge-subtle-bg:var(--yellow-a3)]",
+				"[--badge-surface-bg:var(--yellow-a2)]",
+				"[--badge-surface-border:var(--yellow-6)]",
+				"[--badge-outline-border:var(--yellow-8)]",
+				"[--badge-solid-bg:var(--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-fg:var(--bronze-11)]",
+				"[--badge-subtle-bg:var(--bronze-a3)]",
+				"[--badge-surface-bg:var(--bronze-a2)]",
+				"[--badge-surface-border:var(--bronze-6)]",
+				"[--badge-outline-border:var(--bronze-8)]",
+				"[--badge-solid-bg:var(--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-fg:var(--gold-11)]",
+				"[--badge-subtle-bg:var(--gold-a3)]",
+				"[--badge-surface-bg:var(--gold-a2)]",
+				"[--badge-surface-border:var(--gold-6)]",
+				"[--badge-outline-border:var(--gold-8)]",
+				"[--badge-solid-bg:var(--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-fg:var(--tomato-11)]",
+				"[--badge-subtle-bg:var(--tomato-a3)]",
+				"[--badge-surface-bg:var(--tomato-a2)]",
+				"[--badge-surface-border:var(--tomato-6)]",
+				"[--badge-outline-border:var(--tomato-8)]",
+				"[--badge-solid-bg:var(--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-fg:var(--ruby-11)]",
+				"[--badge-subtle-bg:var(--ruby-a3)]",
+				"[--badge-surface-bg:var(--ruby-a2)]",
+				"[--badge-surface-border:var(--ruby-6)]",
+				"[--badge-outline-border:var(--ruby-8)]",
+				"[--badge-solid-bg:var(--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-fg:var(--crimson-11)]",
+				"[--badge-subtle-bg:var(--crimson-a3)]",
+				"[--badge-surface-bg:var(--crimson-a2)]",
+				"[--badge-surface-border:var(--crimson-6)]",
+				"[--badge-outline-border:var(--crimson-8)]",
+				"[--badge-solid-bg:var(--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-fg:var(--plum-11)]",
+				"[--badge-subtle-bg:var(--plum-a3)]",
+				"[--badge-surface-bg:var(--plum-a2)]",
+				"[--badge-surface-border:var(--plum-6)]",
+				"[--badge-outline-border:var(--plum-8)]",
+				"[--badge-solid-bg:var(--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-fg:var(--violet-11)]",
+				"[--badge-subtle-bg:var(--violet-a3)]",
+				"[--badge-surface-bg:var(--violet-a2)]",
+				"[--badge-surface-border:var(--violet-6)]",
+				"[--badge-outline-border:var(--violet-8)]",
+				"[--badge-solid-bg:var(--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-fg:var(--iris-11)]",
+				"[--badge-subtle-bg:var(--iris-a3)]",
+				"[--badge-surface-bg:var(--iris-a2)]",
+				"[--badge-surface-border:var(--iris-6)]",
+				"[--badge-outline-border:var(--iris-8)]",
+				"[--badge-solid-bg:var(--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-fg:var(--indigo-11)]",
+				"[--badge-subtle-bg:var(--indigo-a3)]",
+				"[--badge-surface-bg:var(--indigo-a2)]",
+				"[--badge-surface-border:var(--indigo-6)]",
+				"[--badge-outline-border:var(--indigo-8)]",
+				"[--badge-solid-bg:var(--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-fg:var(--sky-11)]",
+				"[--badge-subtle-bg:var(--sky-a3)]",
+				"[--badge-surface-bg:var(--sky-a2)]",
+				"[--badge-surface-border:var(--sky-6)]",
+				"[--badge-outline-border:var(--sky-8)]",
+				"[--badge-solid-bg:var(--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-fg:var(--mint-11)]",
+				"[--badge-subtle-bg:var(--mint-a3)]",
+				"[--badge-surface-bg:var(--mint-a2)]",
+				"[--badge-surface-border:var(--mint-6)]",
+				"[--badge-outline-border:var(--mint-8)]",
+				"[--badge-solid-bg:var(--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-fg:var(--lime-11)]",
+				"[--badge-subtle-bg:var(--lime-a3)]",
+				"[--badge-surface-bg:var(--lime-a2)]",
+				"[--badge-surface-border:var(--lime-6)]",
+				"[--badge-outline-border:var(--lime-8)]",
+				"[--badge-solid-bg:var(--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-fg:var(--jade-11)]",
+				"[--badge-subtle-bg:var(--jade-a3)]",
+				"[--badge-surface-bg:var(--jade-a2)]",
+				"[--badge-surface-border:var(--jade-6)]",
+				"[--badge-outline-border:var(--jade-8)]",
+				"[--badge-solid-bg:var(--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-fg:var(--grass-11)]",
+				"[--badge-subtle-bg:var(--grass-a3)]",
+				"[--badge-surface-bg:var(--grass-a2)]",
+				"[--badge-surface-border:var(--grass-6)]",
+				"[--badge-outline-border:var(--grass-8)]",
+				"[--badge-solid-bg:var(--grass-9)]",
 				"[--badge-solid-fg:var(--color-white)]"
 			]
 		},

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

@@ -1 +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 */\nexport const badgeVariants = cva(\n  [\n    'inline-flex',\n    'items-center',\n    'shrink-0',\n    'align-middle',\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;;;;;;;;;;AAWA,MAAa,gBAAgB,IAC3B;CACE;CACA;CACA;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"}
+{"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`.\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 usa a escala alpha, para o badge funcionar sobre qualquer fundo, e a borda o passo sólido.\n * No `solid`, o texto é branco, menos em amber, yellow, sky, mint e lime, claros demais para ele,\n * que levam 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(--gray-11)]',\n          '[--badge-subtle-bg:var(--gray-a3)]',\n          '[--badge-surface-bg:var(--gray-a2)]',\n          '[--badge-surface-border:var(--gray-6)]',\n          '[--badge-outline-border:var(--gray-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        accent: [\n          '[--badge-fg:var(--accent-11)]',\n          '[--badge-subtle-bg:var(--accent-a3)]',\n          '[--badge-surface-bg:var(--accent-a2)]',\n          '[--badge-surface-border:var(--accent-6)]',\n          '[--badge-outline-border:var(--accent-8)]',\n          '[--badge-solid-bg:var(--accent-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        red: [\n          '[--badge-fg:var(--red-11)]',\n          '[--badge-subtle-bg:var(--red-a3)]',\n          '[--badge-surface-bg:var(--red-a2)]',\n          '[--badge-surface-border:var(--red-6)]',\n          '[--badge-outline-border:var(--red-8)]',\n          '[--badge-solid-bg:var(--red-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        green: [\n          '[--badge-fg:var(--green-11)]',\n          '[--badge-subtle-bg:var(--green-a3)]',\n          '[--badge-surface-bg:var(--green-a2)]',\n          '[--badge-surface-border:var(--green-6)]',\n          '[--badge-outline-border:var(--green-8)]',\n          '[--badge-solid-bg:var(--green-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        blue: [\n          '[--badge-fg:var(--blue-11)]',\n          '[--badge-subtle-bg:var(--blue-a3)]',\n          '[--badge-surface-bg:var(--blue-a2)]',\n          '[--badge-surface-border:var(--blue-6)]',\n          '[--badge-outline-border:var(--blue-8)]',\n          '[--badge-solid-bg:var(--blue-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        amber: [\n          '[--badge-fg:var(--amber-11)]',\n          '[--badge-subtle-bg:var(--amber-a3)]',\n          '[--badge-surface-bg:var(--amber-a2)]',\n          '[--badge-surface-border:var(--amber-6)]',\n          '[--badge-outline-border:var(--amber-8)]',\n          '[--badge-solid-bg:var(--amber-9)]',\n          '[--badge-solid-fg:var(--color-black)]',\n        ],\n        purple: [\n          '[--badge-fg:var(--purple-11)]',\n          '[--badge-subtle-bg:var(--purple-a3)]',\n          '[--badge-surface-bg:var(--purple-a2)]',\n          '[--badge-surface-border:var(--purple-6)]',\n          '[--badge-outline-border:var(--purple-8)]',\n          '[--badge-solid-bg:var(--purple-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        pink: [\n          '[--badge-fg:var(--pink-11)]',\n          '[--badge-subtle-bg:var(--pink-a3)]',\n          '[--badge-surface-bg:var(--pink-a2)]',\n          '[--badge-surface-border:var(--pink-6)]',\n          '[--badge-outline-border:var(--pink-8)]',\n          '[--badge-solid-bg:var(--pink-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        cyan: [\n          '[--badge-fg:var(--cyan-11)]',\n          '[--badge-subtle-bg:var(--cyan-a3)]',\n          '[--badge-surface-bg:var(--cyan-a2)]',\n          '[--badge-surface-border:var(--cyan-6)]',\n          '[--badge-outline-border:var(--cyan-8)]',\n          '[--badge-solid-bg:var(--cyan-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        teal: [\n          '[--badge-fg:var(--teal-11)]',\n          '[--badge-subtle-bg:var(--teal-a3)]',\n          '[--badge-surface-bg:var(--teal-a2)]',\n          '[--badge-surface-border:var(--teal-6)]',\n          '[--badge-outline-border:var(--teal-8)]',\n          '[--badge-solid-bg:var(--teal-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        orange: [\n          '[--badge-fg:var(--orange-11)]',\n          '[--badge-subtle-bg:var(--orange-a3)]',\n          '[--badge-surface-bg:var(--orange-a2)]',\n          '[--badge-surface-border:var(--orange-6)]',\n          '[--badge-outline-border:var(--orange-8)]',\n          '[--badge-solid-bg:var(--orange-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        brown: [\n          '[--badge-fg:var(--brown-11)]',\n          '[--badge-subtle-bg:var(--brown-a3)]',\n          '[--badge-surface-bg:var(--brown-a2)]',\n          '[--badge-surface-border:var(--brown-6)]',\n          '[--badge-outline-border:var(--brown-8)]',\n          '[--badge-solid-bg:var(--brown-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        yellow: [\n          '[--badge-fg:var(--yellow-11)]',\n          '[--badge-subtle-bg:var(--yellow-a3)]',\n          '[--badge-surface-bg:var(--yellow-a2)]',\n          '[--badge-surface-border:var(--yellow-6)]',\n          '[--badge-outline-border:var(--yellow-8)]',\n          '[--badge-solid-bg:var(--yellow-9)]',\n          '[--badge-solid-fg:var(--color-black)]',\n        ],\n        bronze: [\n          '[--badge-fg:var(--bronze-11)]',\n          '[--badge-subtle-bg:var(--bronze-a3)]',\n          '[--badge-surface-bg:var(--bronze-a2)]',\n          '[--badge-surface-border:var(--bronze-6)]',\n          '[--badge-outline-border:var(--bronze-8)]',\n          '[--badge-solid-bg:var(--bronze-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        gold: [\n          '[--badge-fg:var(--gold-11)]',\n          '[--badge-subtle-bg:var(--gold-a3)]',\n          '[--badge-surface-bg:var(--gold-a2)]',\n          '[--badge-surface-border:var(--gold-6)]',\n          '[--badge-outline-border:var(--gold-8)]',\n          '[--badge-solid-bg:var(--gold-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        tomato: [\n          '[--badge-fg:var(--tomato-11)]',\n          '[--badge-subtle-bg:var(--tomato-a3)]',\n          '[--badge-surface-bg:var(--tomato-a2)]',\n          '[--badge-surface-border:var(--tomato-6)]',\n          '[--badge-outline-border:var(--tomato-8)]',\n          '[--badge-solid-bg:var(--tomato-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        ruby: [\n          '[--badge-fg:var(--ruby-11)]',\n          '[--badge-subtle-bg:var(--ruby-a3)]',\n          '[--badge-surface-bg:var(--ruby-a2)]',\n          '[--badge-surface-border:var(--ruby-6)]',\n          '[--badge-outline-border:var(--ruby-8)]',\n          '[--badge-solid-bg:var(--ruby-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        crimson: [\n          '[--badge-fg:var(--crimson-11)]',\n          '[--badge-subtle-bg:var(--crimson-a3)]',\n          '[--badge-surface-bg:var(--crimson-a2)]',\n          '[--badge-surface-border:var(--crimson-6)]',\n          '[--badge-outline-border:var(--crimson-8)]',\n          '[--badge-solid-bg:var(--crimson-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        plum: [\n          '[--badge-fg:var(--plum-11)]',\n          '[--badge-subtle-bg:var(--plum-a3)]',\n          '[--badge-surface-bg:var(--plum-a2)]',\n          '[--badge-surface-border:var(--plum-6)]',\n          '[--badge-outline-border:var(--plum-8)]',\n          '[--badge-solid-bg:var(--plum-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        violet: [\n          '[--badge-fg:var(--violet-11)]',\n          '[--badge-subtle-bg:var(--violet-a3)]',\n          '[--badge-surface-bg:var(--violet-a2)]',\n          '[--badge-surface-border:var(--violet-6)]',\n          '[--badge-outline-border:var(--violet-8)]',\n          '[--badge-solid-bg:var(--violet-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        iris: [\n          '[--badge-fg:var(--iris-11)]',\n          '[--badge-subtle-bg:var(--iris-a3)]',\n          '[--badge-surface-bg:var(--iris-a2)]',\n          '[--badge-surface-border:var(--iris-6)]',\n          '[--badge-outline-border:var(--iris-8)]',\n          '[--badge-solid-bg:var(--iris-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        indigo: [\n          '[--badge-fg:var(--indigo-11)]',\n          '[--badge-subtle-bg:var(--indigo-a3)]',\n          '[--badge-surface-bg:var(--indigo-a2)]',\n          '[--badge-surface-border:var(--indigo-6)]',\n          '[--badge-outline-border:var(--indigo-8)]',\n          '[--badge-solid-bg:var(--indigo-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        sky: [\n          '[--badge-fg:var(--sky-11)]',\n          '[--badge-subtle-bg:var(--sky-a3)]',\n          '[--badge-surface-bg:var(--sky-a2)]',\n          '[--badge-surface-border:var(--sky-6)]',\n          '[--badge-outline-border:var(--sky-8)]',\n          '[--badge-solid-bg:var(--sky-9)]',\n          '[--badge-solid-fg:var(--color-black)]',\n        ],\n        mint: [\n          '[--badge-fg:var(--mint-11)]',\n          '[--badge-subtle-bg:var(--mint-a3)]',\n          '[--badge-surface-bg:var(--mint-a2)]',\n          '[--badge-surface-border:var(--mint-6)]',\n          '[--badge-outline-border:var(--mint-8)]',\n          '[--badge-solid-bg:var(--mint-9)]',\n          '[--badge-solid-fg:var(--color-black)]',\n        ],\n        lime: [\n          '[--badge-fg:var(--lime-11)]',\n          '[--badge-subtle-bg:var(--lime-a3)]',\n          '[--badge-surface-bg:var(--lime-a2)]',\n          '[--badge-surface-border:var(--lime-6)]',\n          '[--badge-outline-border:var(--lime-8)]',\n          '[--badge-solid-bg:var(--lime-9)]',\n          '[--badge-solid-fg:var(--color-black)]',\n        ],\n        jade: [\n          '[--badge-fg:var(--jade-11)]',\n          '[--badge-subtle-bg:var(--jade-a3)]',\n          '[--badge-surface-bg:var(--jade-a2)]',\n          '[--badge-surface-border:var(--jade-6)]',\n          '[--badge-outline-border:var(--jade-8)]',\n          '[--badge-solid-bg:var(--jade-9)]',\n          '[--badge-solid-fg:var(--color-white)]',\n        ],\n        grass: [\n          '[--badge-fg:var(--grass-11)]',\n          '[--badge-subtle-bg:var(--grass-a3)]',\n          '[--badge-surface-bg:var(--grass-a2)]',\n          '[--badge-surface-border:var(--grass-6)]',\n          '[--badge-outline-border:var(--grass-8)]',\n          '[--badge-solid-bg:var(--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,QAAQ;IACN;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

@@ -1,4 +1,5 @@
 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
@@ -10,13 +11,21 @@ export type BadgeProps = MergeOverride<useRender.ComponentProps<'span'>, BadgeVa
  * 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): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  (props: BadgeProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
   displayName: string;
 };
 //#endregion

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

@@ -1,7 +1,9 @@
 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();
 /**
@@ -11,10 +13,18 @@ const splitVariantProps = createSplitProps();
 * 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, [
@@ -22,7 +32,7 @@ const Badge = (props) => {
 		"size",
 		"variant"
 	]);
-	const { render, className, ...rest } = elementProps;
+	const { render, className, children, ...rest } = elementProps;
 	const baseProps = {
 		"data-component": "Badge",
 		className: mergeTwClassNames(badgeVariants(variantProps), className)
@@ -30,10 +40,38 @@ const Badge = (props) => {
 	return useRender({
 		render,
 		defaultTagName: "span",
-		props: mergeProps(baseProps, rest)
+		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 };