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

@lucasbernardosn/react-ui 0.1.0 → 0.3.0

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

Files changed (983) hide show

package/dist/components/display/tag/tag-root-variants.js ADDED Viewed

@@ -0,0 +1,333 @@
+import { cva } from "class-variance-authority";
+//#region src/components/display/tag/tag-root-variants.ts
+const tagRootDefaultVariants = {
+	colorScheme: "gray",
+	size: "sm",
+	variant: "subtle"
+};
+/**
+* Cópia de `badgeVariants`, a origem do visual do rótulo curto, onde as variáveis de cor estão
+* explicadas (tabela no README de `display`). As diferenças:
+* - variáveis com o prefixo `--tag-`;
+* - `max-w-full` e `min-w-0`, para o `Tag.Label` truncar um texto longo;
+* - cada `size` declara o tamanho do `Tag.Close` em `--tag-close-size`.
+*/
+const tagRootVariants = 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: [
+				"[--tag-fg:var(--color-gray-11)]",
+				"[--tag-subtle-bg:var(--color-gray-alpha-3)]",
+				"[--tag-surface-bg:var(--color-gray-alpha-2)]",
+				"[--tag-surface-border:var(--color-gray-alpha-6)]",
+				"[--tag-outline-border:var(--color-gray-alpha-8)]",
+				"[--tag-solid-bg:var(--color-black)]",
+				"dark:[--tag-solid-bg:var(--color-white)]",
+				"[--tag-solid-fg:var(--color-white)]",
+				"dark:[--tag-solid-fg:var(--color-black)]"
+			],
+			brand: [
+				"[--tag-fg:var(--color-brand-11)]",
+				"[--tag-subtle-bg:var(--color-brand-alpha-3)]",
+				"[--tag-surface-bg:var(--color-brand-alpha-2)]",
+				"[--tag-surface-border:var(--color-brand-alpha-6)]",
+				"[--tag-outline-border:var(--color-brand-alpha-8)]",
+				"[--tag-solid-bg:var(--color-brand-9)]",
+				"[--tag-solid-fg:var(--color-white)]"
+			],
+			red: [
+				"[--tag-fg:var(--color-red-11)]",
+				"[--tag-subtle-bg:var(--color-red-alpha-3)]",
+				"[--tag-surface-bg:var(--color-red-alpha-2)]",
+				"[--tag-surface-border:var(--color-red-alpha-6)]",
+				"[--tag-outline-border:var(--color-red-alpha-8)]",
+				"[--tag-solid-bg:var(--color-red-9)]",
+				"[--tag-solid-fg:var(--color-white)]"
+			],
+			green: [
+				"[--tag-fg:var(--color-green-11)]",
+				"[--tag-subtle-bg:var(--color-green-alpha-3)]",
+				"[--tag-surface-bg:var(--color-green-alpha-2)]",
+				"[--tag-surface-border:var(--color-green-alpha-6)]",
+				"[--tag-outline-border:var(--color-green-alpha-8)]",
+				"[--tag-solid-bg:var(--color-green-9)]",
+				"[--tag-solid-fg:var(--color-white)]"
+			],
+			blue: [
+				"[--tag-fg:var(--color-blue-11)]",
+				"[--tag-subtle-bg:var(--color-blue-alpha-3)]",
+				"[--tag-surface-bg:var(--color-blue-alpha-2)]",
+				"[--tag-surface-border:var(--color-blue-alpha-6)]",
+				"[--tag-outline-border:var(--color-blue-alpha-8)]",
+				"[--tag-solid-bg:var(--color-blue-9)]",
+				"[--tag-solid-fg:var(--color-white)]"
+			],
+			amber: [
+				"[--tag-fg:var(--color-amber-11)]",
+				"[--tag-subtle-bg:var(--color-amber-alpha-3)]",
+				"[--tag-surface-bg:var(--color-amber-alpha-2)]",
+				"[--tag-surface-border:var(--color-amber-alpha-6)]",
+				"[--tag-outline-border:var(--color-amber-alpha-8)]",
+				"[--tag-solid-bg:var(--color-amber-9)]",
+				"[--tag-solid-fg:var(--color-black)]"
+			],
+			purple: [
+				"[--tag-fg:var(--color-purple-11)]",
+				"[--tag-subtle-bg:var(--color-purple-alpha-3)]",
+				"[--tag-surface-bg:var(--color-purple-alpha-2)]",
+				"[--tag-surface-border:var(--color-purple-alpha-6)]",
+				"[--tag-outline-border:var(--color-purple-alpha-8)]",
+				"[--tag-solid-bg:var(--color-purple-9)]",
+				"[--tag-solid-fg:var(--color-white)]"
+			],
+			pink: [
+				"[--tag-fg:var(--color-pink-11)]",
+				"[--tag-subtle-bg:var(--color-pink-alpha-3)]",
+				"[--tag-surface-bg:var(--color-pink-alpha-2)]",
+				"[--tag-surface-border:var(--color-pink-alpha-6)]",
+				"[--tag-outline-border:var(--color-pink-alpha-8)]",
+				"[--tag-solid-bg:var(--color-pink-9)]",
+				"[--tag-solid-fg:var(--color-white)]"
+			],
+			cyan: [
+				"[--tag-fg:var(--color-cyan-11)]",
+				"[--tag-subtle-bg:var(--color-cyan-alpha-3)]",
+				"[--tag-surface-bg:var(--color-cyan-alpha-2)]",
+				"[--tag-surface-border:var(--color-cyan-alpha-6)]",
+				"[--tag-outline-border:var(--color-cyan-alpha-8)]",
+				"[--tag-solid-bg:var(--color-cyan-9)]",
+				"[--tag-solid-fg:var(--color-white)]"
+			],
+			teal: [
+				"[--tag-fg:var(--color-teal-11)]",
+				"[--tag-subtle-bg:var(--color-teal-alpha-3)]",
+				"[--tag-surface-bg:var(--color-teal-alpha-2)]",
+				"[--tag-surface-border:var(--color-teal-alpha-6)]",
+				"[--tag-outline-border:var(--color-teal-alpha-8)]",
+				"[--tag-solid-bg:var(--color-teal-9)]",
+				"[--tag-solid-fg:var(--color-white)]"
+			],
+			orange: [
+				"[--tag-fg:var(--color-orange-11)]",
+				"[--tag-subtle-bg:var(--color-orange-alpha-3)]",
+				"[--tag-surface-bg:var(--color-orange-alpha-2)]",
+				"[--tag-surface-border:var(--color-orange-alpha-6)]",
+				"[--tag-outline-border:var(--color-orange-alpha-8)]",
+				"[--tag-solid-bg:var(--color-orange-9)]",
+				"[--tag-solid-fg:var(--color-white)]"
+			],
+			brown: [
+				"[--tag-fg:var(--color-brown-11)]",
+				"[--tag-subtle-bg:var(--color-brown-alpha-3)]",
+				"[--tag-surface-bg:var(--color-brown-alpha-2)]",
+				"[--tag-surface-border:var(--color-brown-alpha-6)]",
+				"[--tag-outline-border:var(--color-brown-alpha-8)]",
+				"[--tag-solid-bg:var(--color-brown-9)]",
+				"[--tag-solid-fg:var(--color-white)]"
+			],
+			yellow: [
+				"[--tag-fg:var(--color-yellow-11)]",
+				"[--tag-subtle-bg:var(--color-yellow-alpha-3)]",
+				"[--tag-surface-bg:var(--color-yellow-alpha-2)]",
+				"[--tag-surface-border:var(--color-yellow-alpha-6)]",
+				"[--tag-outline-border:var(--color-yellow-alpha-8)]",
+				"[--tag-solid-bg:var(--color-yellow-9)]",
+				"[--tag-solid-fg:var(--color-black)]"
+			],
+			bronze: [
+				"[--tag-fg:var(--color-bronze-11)]",
+				"[--tag-subtle-bg:var(--color-bronze-alpha-3)]",
+				"[--tag-surface-bg:var(--color-bronze-alpha-2)]",
+				"[--tag-surface-border:var(--color-bronze-alpha-6)]",
+				"[--tag-outline-border:var(--color-bronze-alpha-8)]",
+				"[--tag-solid-bg:var(--color-bronze-9)]",
+				"[--tag-solid-fg:var(--color-white)]"
+			],
+			gold: [
+				"[--tag-fg:var(--color-gold-11)]",
+				"[--tag-subtle-bg:var(--color-gold-alpha-3)]",
+				"[--tag-surface-bg:var(--color-gold-alpha-2)]",
+				"[--tag-surface-border:var(--color-gold-alpha-6)]",
+				"[--tag-outline-border:var(--color-gold-alpha-8)]",
+				"[--tag-solid-bg:var(--color-gold-9)]",
+				"[--tag-solid-fg:var(--color-white)]"
+			],
+			tomato: [
+				"[--tag-fg:var(--color-tomato-11)]",
+				"[--tag-subtle-bg:var(--color-tomato-alpha-3)]",
+				"[--tag-surface-bg:var(--color-tomato-alpha-2)]",
+				"[--tag-surface-border:var(--color-tomato-alpha-6)]",
+				"[--tag-outline-border:var(--color-tomato-alpha-8)]",
+				"[--tag-solid-bg:var(--color-tomato-9)]",
+				"[--tag-solid-fg:var(--color-white)]"
+			],
+			ruby: [
+				"[--tag-fg:var(--color-ruby-11)]",
+				"[--tag-subtle-bg:var(--color-ruby-alpha-3)]",
+				"[--tag-surface-bg:var(--color-ruby-alpha-2)]",
+				"[--tag-surface-border:var(--color-ruby-alpha-6)]",
+				"[--tag-outline-border:var(--color-ruby-alpha-8)]",
+				"[--tag-solid-bg:var(--color-ruby-9)]",
+				"[--tag-solid-fg:var(--color-white)]"
+			],
+			crimson: [
+				"[--tag-fg:var(--color-crimson-11)]",
+				"[--tag-subtle-bg:var(--color-crimson-alpha-3)]",
+				"[--tag-surface-bg:var(--color-crimson-alpha-2)]",
+				"[--tag-surface-border:var(--color-crimson-alpha-6)]",
+				"[--tag-outline-border:var(--color-crimson-alpha-8)]",
+				"[--tag-solid-bg:var(--color-crimson-9)]",
+				"[--tag-solid-fg:var(--color-white)]"
+			],
+			plum: [
+				"[--tag-fg:var(--color-plum-11)]",
+				"[--tag-subtle-bg:var(--color-plum-alpha-3)]",
+				"[--tag-surface-bg:var(--color-plum-alpha-2)]",
+				"[--tag-surface-border:var(--color-plum-alpha-6)]",
+				"[--tag-outline-border:var(--color-plum-alpha-8)]",
+				"[--tag-solid-bg:var(--color-plum-9)]",
+				"[--tag-solid-fg:var(--color-white)]"
+			],
+			violet: [
+				"[--tag-fg:var(--color-violet-11)]",
+				"[--tag-subtle-bg:var(--color-violet-alpha-3)]",
+				"[--tag-surface-bg:var(--color-violet-alpha-2)]",
+				"[--tag-surface-border:var(--color-violet-alpha-6)]",
+				"[--tag-outline-border:var(--color-violet-alpha-8)]",
+				"[--tag-solid-bg:var(--color-violet-9)]",
+				"[--tag-solid-fg:var(--color-white)]"
+			],
+			iris: [
+				"[--tag-fg:var(--color-iris-11)]",
+				"[--tag-subtle-bg:var(--color-iris-alpha-3)]",
+				"[--tag-surface-bg:var(--color-iris-alpha-2)]",
+				"[--tag-surface-border:var(--color-iris-alpha-6)]",
+				"[--tag-outline-border:var(--color-iris-alpha-8)]",
+				"[--tag-solid-bg:var(--color-iris-9)]",
+				"[--tag-solid-fg:var(--color-white)]"
+			],
+			indigo: [
+				"[--tag-fg:var(--color-indigo-11)]",
+				"[--tag-subtle-bg:var(--color-indigo-alpha-3)]",
+				"[--tag-surface-bg:var(--color-indigo-alpha-2)]",
+				"[--tag-surface-border:var(--color-indigo-alpha-6)]",
+				"[--tag-outline-border:var(--color-indigo-alpha-8)]",
+				"[--tag-solid-bg:var(--color-indigo-9)]",
+				"[--tag-solid-fg:var(--color-white)]"
+			],
+			sky: [
+				"[--tag-fg:var(--color-sky-11)]",
+				"[--tag-subtle-bg:var(--color-sky-alpha-3)]",
+				"[--tag-surface-bg:var(--color-sky-alpha-2)]",
+				"[--tag-surface-border:var(--color-sky-alpha-6)]",
+				"[--tag-outline-border:var(--color-sky-alpha-8)]",
+				"[--tag-solid-bg:var(--color-sky-9)]",
+				"[--tag-solid-fg:var(--color-black)]"
+			],
+			mint: [
+				"[--tag-fg:var(--color-mint-11)]",
+				"[--tag-subtle-bg:var(--color-mint-alpha-3)]",
+				"[--tag-surface-bg:var(--color-mint-alpha-2)]",
+				"[--tag-surface-border:var(--color-mint-alpha-6)]",
+				"[--tag-outline-border:var(--color-mint-alpha-8)]",
+				"[--tag-solid-bg:var(--color-mint-9)]",
+				"[--tag-solid-fg:var(--color-black)]"
+			],
+			lime: [
+				"[--tag-fg:var(--color-lime-11)]",
+				"[--tag-subtle-bg:var(--color-lime-alpha-3)]",
+				"[--tag-surface-bg:var(--color-lime-alpha-2)]",
+				"[--tag-surface-border:var(--color-lime-alpha-6)]",
+				"[--tag-outline-border:var(--color-lime-alpha-8)]",
+				"[--tag-solid-bg:var(--color-lime-9)]",
+				"[--tag-solid-fg:var(--color-black)]"
+			],
+			jade: [
+				"[--tag-fg:var(--color-jade-11)]",
+				"[--tag-subtle-bg:var(--color-jade-alpha-3)]",
+				"[--tag-surface-bg:var(--color-jade-alpha-2)]",
+				"[--tag-surface-border:var(--color-jade-alpha-6)]",
+				"[--tag-outline-border:var(--color-jade-alpha-8)]",
+				"[--tag-solid-bg:var(--color-jade-9)]",
+				"[--tag-solid-fg:var(--color-white)]"
+			],
+			grass: [
+				"[--tag-fg:var(--color-grass-11)]",
+				"[--tag-subtle-bg:var(--color-grass-alpha-3)]",
+				"[--tag-surface-bg:var(--color-grass-alpha-2)]",
+				"[--tag-surface-border:var(--color-grass-alpha-6)]",
+				"[--tag-outline-border:var(--color-grass-alpha-8)]",
+				"[--tag-solid-bg:var(--color-grass-9)]",
+				"[--tag-solid-fg:var(--color-white)]"
+			]
+		},
+		size: {
+			sm: [
+				"[--tag-close-size:--spacing(4)]",
+				"h-5",
+				"px-1.5",
+				"gap-1",
+				"text-xs",
+				"[&_svg]:size-3"
+			],
+			md: [
+				"[--tag-close-size:--spacing(5)]",
+				"h-6",
+				"px-2",
+				"gap-1",
+				"text-xs",
+				"[&_svg]:size-3.5"
+			],
+			lg: [
+				"[--tag-close-size:--spacing(5)]",
+				"h-7",
+				"px-2.5",
+				"gap-1.5",
+				"text-sm",
+				"[&_svg]:size-4"
+			]
+		},
+		variant: {
+			subtle: [
+				"border-transparent",
+				"bg-(--tag-subtle-bg)",
+				"text-(--tag-fg)"
+			],
+			surface: [
+				"border-(--tag-surface-border)",
+				"bg-(--tag-surface-bg)",
+				"text-(--tag-fg)"
+			],
+			outline: ["border-(--tag-outline-border)", "text-(--tag-fg)"],
+			solid: [
+				"border-transparent",
+				"bg-(--tag-solid-bg)",
+				"text-(--tag-solid-fg)"
+			]
+		}
+	},
+	defaultVariants: {
+		colorScheme: tagRootDefaultVariants.colorScheme,
+		size: tagRootDefaultVariants.size,
+		variant: tagRootDefaultVariants.variant
+	}
+});
+//#endregion
+export { tagRootDefaultVariants, tagRootVariants };
+//# sourceMappingURL=tag-root-variants.js.map

package/dist/components/display/tag/tag-root-variants.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"tag-root-variants.js","names":[],"sources":["../../../../src/components/display/tag/tag-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeFull } from '#types';\n\nexport type TagRootVariants = {\n /**\n * Cor do texto, do fundo e da borda, como no `Badge`.\n *\n * @default 'gray'\n */\n colorScheme?: ColorSchemeFull;\n /**\n * Altura, padding, tamanho do texto e do botão de remover: `sm` = `h-5`, `md` = `h-6`,\n * `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 tagRootDefaultVariants: Required<TagRootVariants> = {\n colorScheme: 'gray',\n size: 'sm',\n variant: 'subtle',\n};\n\n/**\n * Cópia de `badgeVariants`, a origem do visual do rótulo curto, onde as variáveis de cor estão\n * explicadas (tabela no README de `display`). As diferenças:\n * - variáveis com o prefixo `--tag-`;\n * - `max-w-full` e `min-w-0`, para o `Tag.Label` truncar um texto longo;\n * - cada `size` declara o tamanho do `Tag.Close` em `--tag-close-size`.\n */\nexport const tagRootVariants = 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 '[--tag-fg:var(--color-gray-11)]',\n '[--tag-subtle-bg:var(--color-gray-alpha-3)]',\n '[--tag-surface-bg:var(--color-gray-alpha-2)]',\n '[--tag-surface-border:var(--color-gray-alpha-6)]',\n '[--tag-outline-border:var(--color-gray-alpha-8)]',\n '[--tag-solid-bg:var(--color-black)]',\n 'dark:[--tag-solid-bg:var(--color-white)]',\n '[--tag-solid-fg:var(--color-white)]',\n 'dark:[--tag-solid-fg:var(--color-black)]',\n ],\n brand: [\n '[--tag-fg:var(--color-brand-11)]',\n '[--tag-subtle-bg:var(--color-brand-alpha-3)]',\n '[--tag-surface-bg:var(--color-brand-alpha-2)]',\n '[--tag-surface-border:var(--color-brand-alpha-6)]',\n '[--tag-outline-border:var(--color-brand-alpha-8)]',\n '[--tag-solid-bg:var(--color-brand-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n red: [\n '[--tag-fg:var(--color-red-11)]',\n '[--tag-subtle-bg:var(--color-red-alpha-3)]',\n '[--tag-surface-bg:var(--color-red-alpha-2)]',\n '[--tag-surface-border:var(--color-red-alpha-6)]',\n '[--tag-outline-border:var(--color-red-alpha-8)]',\n '[--tag-solid-bg:var(--color-red-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n green: [\n '[--tag-fg:var(--color-green-11)]',\n '[--tag-subtle-bg:var(--color-green-alpha-3)]',\n '[--tag-surface-bg:var(--color-green-alpha-2)]',\n '[--tag-surface-border:var(--color-green-alpha-6)]',\n '[--tag-outline-border:var(--color-green-alpha-8)]',\n '[--tag-solid-bg:var(--color-green-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n blue: [\n '[--tag-fg:var(--color-blue-11)]',\n '[--tag-subtle-bg:var(--color-blue-alpha-3)]',\n '[--tag-surface-bg:var(--color-blue-alpha-2)]',\n '[--tag-surface-border:var(--color-blue-alpha-6)]',\n '[--tag-outline-border:var(--color-blue-alpha-8)]',\n '[--tag-solid-bg:var(--color-blue-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n amber: [\n '[--tag-fg:var(--color-amber-11)]',\n '[--tag-subtle-bg:var(--color-amber-alpha-3)]',\n '[--tag-surface-bg:var(--color-amber-alpha-2)]',\n '[--tag-surface-border:var(--color-amber-alpha-6)]',\n '[--tag-outline-border:var(--color-amber-alpha-8)]',\n '[--tag-solid-bg:var(--color-amber-9)]',\n '[--tag-solid-fg:var(--color-black)]',\n ],\n purple: [\n '[--tag-fg:var(--color-purple-11)]',\n '[--tag-subtle-bg:var(--color-purple-alpha-3)]',\n '[--tag-surface-bg:var(--color-purple-alpha-2)]',\n '[--tag-surface-border:var(--color-purple-alpha-6)]',\n '[--tag-outline-border:var(--color-purple-alpha-8)]',\n '[--tag-solid-bg:var(--color-purple-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n pink: [\n '[--tag-fg:var(--color-pink-11)]',\n '[--tag-subtle-bg:var(--color-pink-alpha-3)]',\n '[--tag-surface-bg:var(--color-pink-alpha-2)]',\n '[--tag-surface-border:var(--color-pink-alpha-6)]',\n '[--tag-outline-border:var(--color-pink-alpha-8)]',\n '[--tag-solid-bg:var(--color-pink-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n cyan: [\n '[--tag-fg:var(--color-cyan-11)]',\n '[--tag-subtle-bg:var(--color-cyan-alpha-3)]',\n '[--tag-surface-bg:var(--color-cyan-alpha-2)]',\n '[--tag-surface-border:var(--color-cyan-alpha-6)]',\n '[--tag-outline-border:var(--color-cyan-alpha-8)]',\n '[--tag-solid-bg:var(--color-cyan-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n teal: [\n '[--tag-fg:var(--color-teal-11)]',\n '[--tag-subtle-bg:var(--color-teal-alpha-3)]',\n '[--tag-surface-bg:var(--color-teal-alpha-2)]',\n '[--tag-surface-border:var(--color-teal-alpha-6)]',\n '[--tag-outline-border:var(--color-teal-alpha-8)]',\n '[--tag-solid-bg:var(--color-teal-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n orange: [\n '[--tag-fg:var(--color-orange-11)]',\n '[--tag-subtle-bg:var(--color-orange-alpha-3)]',\n '[--tag-surface-bg:var(--color-orange-alpha-2)]',\n '[--tag-surface-border:var(--color-orange-alpha-6)]',\n '[--tag-outline-border:var(--color-orange-alpha-8)]',\n '[--tag-solid-bg:var(--color-orange-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n brown: [\n '[--tag-fg:var(--color-brown-11)]',\n '[--tag-subtle-bg:var(--color-brown-alpha-3)]',\n '[--tag-surface-bg:var(--color-brown-alpha-2)]',\n '[--tag-surface-border:var(--color-brown-alpha-6)]',\n '[--tag-outline-border:var(--color-brown-alpha-8)]',\n '[--tag-solid-bg:var(--color-brown-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n yellow: [\n '[--tag-fg:var(--color-yellow-11)]',\n '[--tag-subtle-bg:var(--color-yellow-alpha-3)]',\n '[--tag-surface-bg:var(--color-yellow-alpha-2)]',\n '[--tag-surface-border:var(--color-yellow-alpha-6)]',\n '[--tag-outline-border:var(--color-yellow-alpha-8)]',\n '[--tag-solid-bg:var(--color-yellow-9)]',\n '[--tag-solid-fg:var(--color-black)]',\n ],\n bronze: [\n '[--tag-fg:var(--color-bronze-11)]',\n '[--tag-subtle-bg:var(--color-bronze-alpha-3)]',\n '[--tag-surface-bg:var(--color-bronze-alpha-2)]',\n '[--tag-surface-border:var(--color-bronze-alpha-6)]',\n '[--tag-outline-border:var(--color-bronze-alpha-8)]',\n '[--tag-solid-bg:var(--color-bronze-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n gold: [\n '[--tag-fg:var(--color-gold-11)]',\n '[--tag-subtle-bg:var(--color-gold-alpha-3)]',\n '[--tag-surface-bg:var(--color-gold-alpha-2)]',\n '[--tag-surface-border:var(--color-gold-alpha-6)]',\n '[--tag-outline-border:var(--color-gold-alpha-8)]',\n '[--tag-solid-bg:var(--color-gold-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n tomato: [\n '[--tag-fg:var(--color-tomato-11)]',\n '[--tag-subtle-bg:var(--color-tomato-alpha-3)]',\n '[--tag-surface-bg:var(--color-tomato-alpha-2)]',\n '[--tag-surface-border:var(--color-tomato-alpha-6)]',\n '[--tag-outline-border:var(--color-tomato-alpha-8)]',\n '[--tag-solid-bg:var(--color-tomato-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n ruby: [\n '[--tag-fg:var(--color-ruby-11)]',\n '[--tag-subtle-bg:var(--color-ruby-alpha-3)]',\n '[--tag-surface-bg:var(--color-ruby-alpha-2)]',\n '[--tag-surface-border:var(--color-ruby-alpha-6)]',\n '[--tag-outline-border:var(--color-ruby-alpha-8)]',\n '[--tag-solid-bg:var(--color-ruby-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n crimson: [\n '[--tag-fg:var(--color-crimson-11)]',\n '[--tag-subtle-bg:var(--color-crimson-alpha-3)]',\n '[--tag-surface-bg:var(--color-crimson-alpha-2)]',\n '[--tag-surface-border:var(--color-crimson-alpha-6)]',\n '[--tag-outline-border:var(--color-crimson-alpha-8)]',\n '[--tag-solid-bg:var(--color-crimson-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n plum: [\n '[--tag-fg:var(--color-plum-11)]',\n '[--tag-subtle-bg:var(--color-plum-alpha-3)]',\n '[--tag-surface-bg:var(--color-plum-alpha-2)]',\n '[--tag-surface-border:var(--color-plum-alpha-6)]',\n '[--tag-outline-border:var(--color-plum-alpha-8)]',\n '[--tag-solid-bg:var(--color-plum-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n violet: [\n '[--tag-fg:var(--color-violet-11)]',\n '[--tag-subtle-bg:var(--color-violet-alpha-3)]',\n '[--tag-surface-bg:var(--color-violet-alpha-2)]',\n '[--tag-surface-border:var(--color-violet-alpha-6)]',\n '[--tag-outline-border:var(--color-violet-alpha-8)]',\n '[--tag-solid-bg:var(--color-violet-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n iris: [\n '[--tag-fg:var(--color-iris-11)]',\n '[--tag-subtle-bg:var(--color-iris-alpha-3)]',\n '[--tag-surface-bg:var(--color-iris-alpha-2)]',\n '[--tag-surface-border:var(--color-iris-alpha-6)]',\n '[--tag-outline-border:var(--color-iris-alpha-8)]',\n '[--tag-solid-bg:var(--color-iris-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n indigo: [\n '[--tag-fg:var(--color-indigo-11)]',\n '[--tag-subtle-bg:var(--color-indigo-alpha-3)]',\n '[--tag-surface-bg:var(--color-indigo-alpha-2)]',\n '[--tag-surface-border:var(--color-indigo-alpha-6)]',\n '[--tag-outline-border:var(--color-indigo-alpha-8)]',\n '[--tag-solid-bg:var(--color-indigo-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n sky: [\n '[--tag-fg:var(--color-sky-11)]',\n '[--tag-subtle-bg:var(--color-sky-alpha-3)]',\n '[--tag-surface-bg:var(--color-sky-alpha-2)]',\n '[--tag-surface-border:var(--color-sky-alpha-6)]',\n '[--tag-outline-border:var(--color-sky-alpha-8)]',\n '[--tag-solid-bg:var(--color-sky-9)]',\n '[--tag-solid-fg:var(--color-black)]',\n ],\n mint: [\n '[--tag-fg:var(--color-mint-11)]',\n '[--tag-subtle-bg:var(--color-mint-alpha-3)]',\n '[--tag-surface-bg:var(--color-mint-alpha-2)]',\n '[--tag-surface-border:var(--color-mint-alpha-6)]',\n '[--tag-outline-border:var(--color-mint-alpha-8)]',\n '[--tag-solid-bg:var(--color-mint-9)]',\n '[--tag-solid-fg:var(--color-black)]',\n ],\n lime: [\n '[--tag-fg:var(--color-lime-11)]',\n '[--tag-subtle-bg:var(--color-lime-alpha-3)]',\n '[--tag-surface-bg:var(--color-lime-alpha-2)]',\n '[--tag-surface-border:var(--color-lime-alpha-6)]',\n '[--tag-outline-border:var(--color-lime-alpha-8)]',\n '[--tag-solid-bg:var(--color-lime-9)]',\n '[--tag-solid-fg:var(--color-black)]',\n ],\n jade: [\n '[--tag-fg:var(--color-jade-11)]',\n '[--tag-subtle-bg:var(--color-jade-alpha-3)]',\n '[--tag-surface-bg:var(--color-jade-alpha-2)]',\n '[--tag-surface-border:var(--color-jade-alpha-6)]',\n '[--tag-outline-border:var(--color-jade-alpha-8)]',\n '[--tag-solid-bg:var(--color-jade-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n grass: [\n '[--tag-fg:var(--color-grass-11)]',\n '[--tag-subtle-bg:var(--color-grass-alpha-3)]',\n '[--tag-surface-bg:var(--color-grass-alpha-2)]',\n '[--tag-surface-border:var(--color-grass-alpha-6)]',\n '[--tag-outline-border:var(--color-grass-alpha-8)]',\n '[--tag-solid-bg:var(--color-grass-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n },\n size: {\n sm: [\n '[--tag-close-size:--spacing(4)]',\n 'h-5',\n 'px-1.5',\n 'gap-1',\n 'text-xs',\n '[&_svg]:size-3',\n ],\n md: [\n '[--tag-close-size:--spacing(5)]',\n 'h-6',\n 'px-2',\n 'gap-1',\n 'text-xs',\n '[&_svg]:size-3.5',\n ],\n lg: [\n '[--tag-close-size:--spacing(5)]',\n 'h-7',\n 'px-2.5',\n 'gap-1.5',\n 'text-sm',\n '[&_svg]:size-4',\n ],\n },\n variant: {\n // A borda transparente fica para as variantes terem a mesma medida.\n subtle: [\n 'border-transparent',\n 'bg-(--tag-subtle-bg)',\n 'text-(--tag-fg)',\n ],\n surface: [\n 'border-(--tag-surface-border)',\n 'bg-(--tag-surface-bg)',\n 'text-(--tag-fg)',\n ],\n outline: ['border-(--tag-outline-border)', 'text-(--tag-fg)'],\n solid: [\n 'border-transparent',\n 'bg-(--tag-solid-bg)',\n 'text-(--tag-solid-fg)',\n ],\n },\n },\n defaultVariants: {\n colorScheme: tagRootDefaultVariants.colorScheme,\n size: tagRootDefaultVariants.size,\n variant: tagRootDefaultVariants.variant,\n },\n },\n);\n"],"mappings":";;AA0BA,MAAa,yBAAoD;CAC/D,aAAa;CACb,MAAM;CACN,SAAS;AACX;;;;;;;;AASA,MAAa,kBAAkB,IAC7B;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;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,SAAS;GAEP,QAAQ;IACN;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;GACA,SAAS,CAAC,iCAAiC,iBAAiB;GAC5D,OAAO;IACL;IACA;IACA;GACF;EACF;CACF;CACA,iBAAiB;EACf,aAAa,uBAAuB;EACpC,MAAM,uBAAuB;EAC7B,SAAS,uBAAuB;CAClC;AACF,CACF"}

package/dist/components/display/tag/tag-root.d.ts ADDED Viewed

@@ -0,0 +1,29 @@
+import { TagRootVariants } from "./tag-root-variants.js";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
+import { useRender } from "@base-ui/react";
+//#region src/components/display/tag/tag-root.d.ts
+export type TagRootProps = MergeOverride<useRender.ComponentProps<'span'>, TagRootVariants>;
+/**
+ * Item removível, como um filtro aplicado ou um valor escolhido: o visual do `Badge`, com o
+ * `Tag.Close` no fim. Para um rótulo só de exibição, o `Badge`.
+ *
+ * O `Root` não é focável nem clicável: a ação fica no `Tag.Close`, um botão próprio, alcançado pelo
+ * `Tab`. Quem remove é o app, no `onClick` do `Tag.Close`.
+ *
+ * @example
+ * ```tsx
+ * <Tag.Root>
+ *   <Tag.Label>Vencidos</Tag.Label>
+ *   <Tag.Close
+ *     aria-label="Remover o filtro Vencidos"
+ *     onClick={() => removeFilter('overdue')}
+ *   />
+ * </Tag.Root>
+ * ```
+ */
+export declare const TagRoot: {
+  (props: TagRootProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=tag-root.d.ts.map

package/dist/components/display/tag/tag-root.js ADDED Viewed

@@ -0,0 +1,46 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { tagRootVariants } from "./tag-root-variants.js";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/display/tag/tag-root.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Item removível, como um filtro aplicado ou um valor escolhido: o visual do `Badge`, com o
+* `Tag.Close` no fim. Para um rótulo só de exibição, o `Badge`.
+*
+* O `Root` não é focável nem clicável: a ação fica no `Tag.Close`, um botão próprio, alcançado pelo
+* `Tab`. Quem remove é o app, no `onClick` do `Tag.Close`.
+*
+* @example
+* ```tsx
+* <Tag.Root>
+*   <Tag.Label>Vencidos</Tag.Label>
+*   <Tag.Close
+*     aria-label="Remover o filtro Vencidos"
+*     onClick={() => removeFilter('overdue')}
+*   />
+* </Tag.Root>
+* ```
+*/
+const TagRoot = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, [
+		"colorScheme",
+		"size",
+		"variant"
+	]);
+	const { render, className, ...rest } = elementProps;
+	const baseProps = {
+		"data-component": "Tag.Root",
+		className: mergeTwClassNames(tagRootVariants(variantProps), className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "span",
+		props: mergeProps(baseProps, rest)
+	});
+};
+TagRoot.displayName = "Tag.Root";
+//#endregion
+export { TagRoot };
+//# sourceMappingURL=tag-root.js.map

package/dist/components/display/tag/tag-root.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"tag-root.js","names":[],"sources":["../../../../src/components/display/tag/tag-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 TagRootVariants, tagRootVariants } from './tag-root-variants';\n\nexport type TagRootProps = MergeOverride<\n useRender.ComponentProps<'span'>,\n TagRootVariants\n>;\n\nconst splitVariantProps = createSplitProps<TagRootVariants>();\n\n/**\n * Item removível, como um filtro aplicado ou um valor escolhido: o visual do `Badge`, com o\n * `Tag.Close` no fim. Para um rótulo só de exibição, o `Badge`.\n *\n * O `Root` não é focável nem clicável: a ação fica no `Tag.Close`, um botão próprio, alcançado pelo\n * `Tab`. Quem remove é o app, no `onClick` do `Tag.Close`.\n *\n * @example\n * ```tsx\n * <Tag.Root>\n * <Tag.Label>Vencidos</Tag.Label>\n * <Tag.Close\n * aria-label=\"Remover o filtro Vencidos\"\n * onClick={() => removeFilter('overdue')}\n * />\n * </Tag.Root>\n * ```\n */\nexport const TagRoot = (props: TagRootProps) => {\n const [variantProps, elementProps] = splitVariantProps(props, [\n 'colorScheme',\n 'size',\n 'variant',\n ]);\n\n const { render, className, ...rest } = elementProps;\n\n const baseProps = {\n 'data-component': 'Tag.Root',\n className: mergeTwClassNames(tagRootVariants(variantProps), className),\n };\n\n return useRender({\n render,\n defaultTagName: 'span',\n props: mergeProps(baseProps, rest),\n });\n};\n\nTagRoot.displayName = 'Tag.Root';\n"],"mappings":";;;;;AAaA,MAAM,oBAAoB,iBAAkC;;;;;;;;;;;;;;;;;;;AAoB5D,MAAa,WAAW,UAAwB;CAC9C,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO;EAC5D;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,gBAAgB,YAAY,GAAG,SAAS;CACvE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,QAAQ,cAAc"}

package/dist/components/feedback/alert/alert-content.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/feedback/alert/alert-content.d.ts
+export type AlertContentProps = useRender.ComponentProps<'div'>;
+/**
+ * Agrupa título e descrição ao lado do indicador, ocupando o resto da linha. Para título e
+ * descrição na mesma linha, `flex-row` na `className`.
+ */
+export declare const AlertContent: {
+  (props: AlertContentProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=alert-content.d.ts.map

package/dist/components/feedback/alert/alert-content.js ADDED Viewed

@@ -0,0 +1,30 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/feedback/alert/alert-content.tsx
+/**
+* Agrupa título e descrição ao lado do indicador, ocupando o resto da linha. Para título e
+* descrição na mesma linha, `flex-row` na `className`.
+*/
+const AlertContent = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "Alert.Content",
+		className: mergeTwClassNames([
+			"flex",
+			"flex-1",
+			"flex-col",
+			"gap-0.5",
+			"min-w-0"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+AlertContent.displayName = "Alert.Content";
+//#endregion
+export { AlertContent };
+//# sourceMappingURL=alert-content.js.map

package/dist/components/feedback/alert/alert-content.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"alert-content.js","names":[],"sources":["../../../../src/components/feedback/alert/alert-content.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type AlertContentProps = useRender.ComponentProps<'div'>;\n\n/**\n * Agrupa título e descrição ao lado do indicador, ocupando o resto da linha. Para título e\n * descrição na mesma linha, `flex-row` na `className`.\n */\nexport const AlertContent = (props: AlertContentProps) => {\n const { render, className, ...rest } = props;\n\n const baseProps = {\n 'data-component': 'Alert.Content',\n className: mergeTwClassNames(\n ['flex', 'flex-1', 'flex-col', 'gap-0.5', 'min-w-0'],\n className,\n ),\n };\n\n return useRender({\n render,\n defaultTagName: 'div',\n props: mergeProps(baseProps, rest),\n });\n};\n\nAlertContent.displayName = 'Alert.Content';\n"],"mappings":";;;;;;;AASA,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GAAC;GAAQ;GAAU;GAAY;GAAW;EAAS,GACnD,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,aAAa,cAAc"}

package/dist/components/feedback/alert/alert-description.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/feedback/alert/alert-description.d.ts
+export type AlertDescriptionProps = useRender.ComponentProps<'div'>;
+/**
+ * Texto de apoio do alerta, com a tipografia fixa das descrições, na cor do título (passo 12 do
+ * `status`): a diferença entre os dois fica no peso. Fora de um `Root`, cai no gray 11 das
+ * descrições. É um `div`, para aceitar parágrafos e listas dentro.
+ *
+ * Origem do `Toast.Description`, que o copia (tabela no README de `feedback`). Uma mudança aqui
+ * vale para a cópia na mesma rodada.
+ */
+export declare const AlertDescription: {
+  (props: AlertDescriptionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=alert-description.d.ts.map

package/dist/components/feedback/alert/alert-description.js ADDED Viewed

@@ -0,0 +1,33 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/feedback/alert/alert-description.tsx
+/**
+* Texto de apoio do alerta, com a tipografia fixa das descrições, na cor do título (passo 12 do
+* `status`): a diferença entre os dois fica no peso. Fora de um `Root`, cai no gray 11 das
+* descrições. É um `div`, para aceitar parágrafos e listas dentro.
+*
+* Origem do `Toast.Description`, que o copia (tabela no README de `feedback`). Uma mudança aqui
+* vale para a cópia na mesma rodada.
+*/
+const AlertDescription = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "Alert.Description",
+		className: mergeTwClassNames([
+			"text-sm",
+			"leading-5",
+			"text-(--alert-fg,var(--color-gray-11))",
+			"text-pretty"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+AlertDescription.displayName = "Alert.Description";
+//#endregion
+export { AlertDescription };
+//# sourceMappingURL=alert-description.js.map

package/dist/components/feedback/alert/alert-description.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"alert-description.js","names":[],"sources":["../../../../src/components/feedback/alert/alert-description.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type AlertDescriptionProps = useRender.ComponentProps<'div'>;\n\n/**\n * Texto de apoio do alerta, com a tipografia fixa das descrições, na cor do título (passo 12 do\n * `status`): a diferença entre os dois fica no peso. Fora de um `Root`, cai no gray 11 das\n * descrições. É um `div`, para aceitar parágrafos e listas dentro.\n *\n * Origem do `Toast.Description`, que o copia (tabela no README de `feedback`). Uma mudança aqui\n * vale para a cópia na mesma rodada.\n */\nexport const AlertDescription = (props: AlertDescriptionProps) => {\n const { render, className, ...rest } = props;\n\n const baseProps = {\n 'data-component': 'Alert.Description',\n className: mergeTwClassNames(\n [\n 'text-sm',\n 'leading-5',\n 'text-(--alert-fg,var(--color-gray-11))',\n 'text-pretty',\n ],\n className,\n ),\n };\n\n return useRender({\n render,\n defaultTagName: 'div',\n props: mergeProps(baseProps, rest),\n });\n};\n\nAlertDescription.displayName = 'Alert.Description';\n"],"mappings":";;;;;;;;;;;AAaA,MAAa,oBAAoB,UAAiC;CAChE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,iBAAiB,cAAc"}

package/dist/components/feedback/alert/alert-indicator.d.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import React from "react";
+import { useRender } from "@base-ui/react";
+//#region src/components/feedback/alert/alert-indicator.d.ts
+export type AlertIndicatorProps = useRender.ComponentProps<'div'>;
+/**
+ * Ícone do alerta, na cor do `status`. Sem filhos, mostra o ícone do `status`, pelo `Icon` da lib;
+ * com filhos (outro ícone, um `Spinner`), usa os filhos, e um ícone próprio entra pelo `Icon` para
+ * ter o mesmo traço. O `svg` mede `1em` (20px), numa caixa da altura da linha do título, para ficar
+ * alinhado à primeira linha.
+ *
+ * Fica com `aria-hidden`: o ícone repete o que o texto diz, e o `status` não é anunciado por ele.
+ *
+ * Origem do `Toast.Indicator`, que o copia (tabela no README de `feedback`). Uma mudança aqui vale
+ * para a cópia na mesma rodada.
+ */
+export declare const AlertIndicator: {
+  (props: AlertIndicatorProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=alert-indicator.d.ts.map

package/dist/components/feedback/alert/alert-indicator.js ADDED Viewed

@@ -0,0 +1,56 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { Icon } from "../../display/icon/icon.js";
+import { alertDefaultVariants, useAlertContext } from "./use-alert-context.js";
+import { mergeProps, useRender } from "@base-ui/react";
+import { jsx } from "react/jsx-runtime";
+import { CheckCircleIcon, InfoIcon, WarningCircleIcon, WarningIcon } from "@phosphor-icons/react";
+//#region src/components/feedback/alert/alert-indicator.tsx
+/**
+* Ícone do alerta, na cor do `status`. Sem filhos, mostra o ícone do `status`, pelo `Icon` da lib;
+* com filhos (outro ícone, um `Spinner`), usa os filhos, e um ícone próprio entra pelo `Icon` para
+* ter o mesmo traço. O `svg` mede `1em` (20px), numa caixa da altura da linha do título, para ficar
+* alinhado à primeira linha.
+*
+* Fica com `aria-hidden`: o ícone repete o que o texto diz, e o `status` não é anunciado por ele.
+*
+* Origem do `Toast.Indicator`, que o copia (tabela no README de `feedback`). Uma mudança aqui vale
+* para a cópia na mesma rodada.
+*/
+const AlertIndicator = (props) => {
+	const { render, className, children, ...rest } = props;
+	const { status = alertDefaultVariants.status } = useAlertContext();
+	const StatusIcon = statusIcons[status];
+	const baseProps = {
+		"data-component": "Alert.Indicator",
+		"aria-hidden": true,
+		children: children ?? /* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(StatusIcon, {}) }),
+		className: mergeTwClassNames([
+			"flex",
+			"items-center",
+			"justify-center",
+			"shrink-0",
+			"h-5",
+			"text-(--alert-fg)",
+			"text-xl",
+			"leading-none",
+			"[&_svg]:size-[1em]"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+AlertIndicator.displayName = "Alert.Indicator";
+const statusIcons = {
+	neutral: InfoIcon,
+	info: InfoIcon,
+	success: CheckCircleIcon,
+	warning: WarningIcon,
+	error: WarningCircleIcon
+};
+//#endregion
+export { AlertIndicator };
+//# sourceMappingURL=alert-indicator.js.map

package/dist/components/feedback/alert/alert-indicator.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"alert-indicator.js","names":[],"sources":["../../../../src/components/feedback/alert/alert-indicator.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n CheckCircleIcon,\n InfoIcon,\n WarningCircleIcon,\n WarningIcon,\n} from '@phosphor-icons/react';\nimport type React from 'react';\nimport { Icon } from '#components/display/icon';\nimport { mergeTwClassNames } from '#utils';\nimport {\n type AlertVariants,\n alertDefaultVariants,\n useAlertContext,\n} from './use-alert-context';\n\nexport type AlertIndicatorProps = useRender.ComponentProps<'div'>;\n\n/**\n * Ícone do alerta, na cor do `status`. Sem filhos, mostra o ícone do `status`, pelo `Icon` da lib;\n * com filhos (outro ícone, um `Spinner`), usa os filhos, e um ícone próprio entra pelo `Icon` para\n * ter o mesmo traço. O `svg` mede `1em` (20px), numa caixa da altura da linha do título, para ficar\n * alinhado à primeira linha.\n *\n * Fica com `aria-hidden`: o ícone repete o que o texto diz, e o `status` não é anunciado por ele.\n *\n * Origem do `Toast.Indicator`, que o copia (tabela no README de `feedback`). Uma mudança aqui vale\n * para a cópia na mesma rodada.\n */\nexport const AlertIndicator = (props: AlertIndicatorProps) => {\n const { render, className, children, ...rest } = props;\n\n const { status = alertDefaultVariants.status } = useAlertContext();\n\n const StatusIcon = statusIcons[status];\n\n const baseProps = {\n 'data-component': 'Alert.Indicator',\n 'aria-hidden': true,\n children: children ?? <Icon render={<StatusIcon />} />,\n className: mergeTwClassNames(\n [\n 'flex',\n 'items-center',\n 'justify-center',\n 'shrink-0',\n\n 'h-5',\n\n 'text-(--alert-fg)',\n 'text-xl',\n // Sem entrelinha, um emoji ocuparia mais altura que o ícone.\n 'leading-none',\n\n '[&_svg]:size-[1em]',\n ],\n className,\n ),\n };\n\n return useRender({\n render,\n defaultTagName: 'div',\n props: mergeProps(baseProps, rest),\n });\n};\n\nAlertIndicator.displayName = 'Alert.Indicator';\n\nconst statusIcons: Record<\n Required<AlertVariants>['status'],\n React.ComponentType\n> = {\n neutral: InfoIcon,\n info: InfoIcon,\n success: CheckCircleIcon,\n warning: WarningIcon,\n error: WarningCircleIcon,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AA6BA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,QAAQ,WAAW,UAAU,GAAG,SAAS;CAEjD,MAAM,EAAE,SAAS,qBAAqB,WAAW,gBAAgB;CAEjE,MAAM,aAAa,YAAY;CAE/B,MAAM,YAAY;EAChB,kBAAkB;EAClB,eAAe;EACf,UAAU,YAAY,oBAAC,MAAD,EAAM,QAAQ,oBAAC,YAAD,CAAa,CAAA,EAAI,CAAA;EACrD,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GAEA;GACA;GAEA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,eAAe,cAAc;AAE7B,MAAM,cAGF;CACF,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;AACT"}