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

@lucasbernardosn/react-ui 0.3.0 → 0.4.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 (111) hide show

package/README.md CHANGED Viewed

@@ -120,7 +120,8 @@ Toast.add({ type: 'success', title: 'Nota 4821 emitida' });
 const confirmed = await AlertDialog.confirm({
   title: 'Excluir a nota 4821?',
   description: 'A exclusão não pode ser desfeita.',
-  confirmButton: { children: 'Excluir', colorScheme: 'red' },
+  confirmLabel: 'Excluir',
+  destructive: true,
 });
 ```

package/dist/components/disclosure/collapsible/collapsible-panel-variants.d.ts CHANGED Viewed

@@ -10,7 +10,7 @@ export type CollapsiblePanelVariants = {
 };
 export declare const collapsiblePanelDefaultVariants: Required<CollapsiblePanelVariants>;
 export declare const collapsiblePanelVariants: (props?: ({
-  orientation?: "vertical" | "horizontal" | null | undefined;
+  orientation?: "horizontal" | "vertical" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=collapsible-panel-variants.d.ts.map

package/dist/components/disclosure/tabs/tabs-indicator-variants.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 //#region src/components/disclosure/tabs/tabs-indicator-variants.d.ts
 export declare const tabsIndicatorVariants: (props?: ({
-  variant?: "line" | "subtle" | "outline" | "plain" | "enclosed" | null | undefined;
+  variant?: "subtle" | "outline" | "plain" | "line" | "enclosed" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=tabs-indicator-variants.d.ts.map

package/dist/components/disclosure/tabs/tabs-list-variants.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@
 export declare const tabsListVariants: (props?: ({
   fitted?: boolean | null | undefined;
   justify?: "center" | "start" | "end" | null | undefined;
-  variant?: "line" | "subtle" | "outline" | "plain" | "enclosed" | null | undefined;
+  variant?: "subtle" | "outline" | "plain" | "line" | "enclosed" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=tabs-list-variants.d.ts.map

package/dist/components/disclosure/tabs/tabs-tab-variants.d.ts CHANGED Viewed

@@ -7,7 +7,7 @@
  */
 export declare const tabsTabVariants: (props?: ({
   fitted?: boolean | null | undefined;
-  variant?: "line" | "subtle" | "outline" | "plain" | "enclosed" | null | undefined;
+  variant?: "subtle" | "outline" | "plain" | "line" | "enclosed" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=tabs-tab-variants.d.ts.map

package/dist/components/display/avatar/avatar-root-variants.d.ts CHANGED Viewed

@@ -31,7 +31,7 @@ export declare const avatarRootDefaultVariants: Pick<Required<AvatarRootVariants
  * yellow, sky, mint e lime), que levam preto; o gray é preto no tema claro e branco no escuro.
  */
 export declare const avatarRootVariants: (props?: ({
-  colorScheme?: "ruby" | "gray" | "brand" | "red" | "green" | "blue" | "teal" | "pink" | "purple" | "cyan" | "orange" | "brown" | "yellow" | "amber" | "bronze" | "gold" | "tomato" | "crimson" | "plum" | "violet" | "iris" | "indigo" | "jade" | "grass" | "lime" | "mint" | "sky" | null | undefined;
+  colorScheme?: "gray" | "brand" | "red" | "green" | "blue" | "teal" | "pink" | "purple" | "cyan" | "orange" | "brown" | "yellow" | "amber" | "ruby" | "bronze" | "gold" | "tomato" | "crimson" | "plum" | "violet" | "iris" | "indigo" | "jade" | "grass" | "lime" | "mint" | "sky" | null | undefined;
   size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
   variant?: "solid" | "subtle" | "surface" | "outline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

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

@@ -31,9 +31,12 @@ export declare const badgeDefaultVariants: Required<BadgeVariants>;
  * fundo e a borda usam a escala alpha, para o badge funcionar sobre qualquer fundo. No `solid`, o
  * texto é branco, menos em amber, yellow, sky, mint e lime, claros demais para ele, que levam
  * preto; o gray sólido é preto no tema claro e branco no escuro, como o do `Button`.
+ *
+ * O `max-w-full` e o `min-w-0` limitam o badge à largura do pai, para o `Badge` cortar um texto
+ * longo com reticências. O `shrink-0` fica: numa linha flex, quem encolhe é o vizinho.
  */
 export declare const badgeVariants: (props?: ({
-  colorScheme?: "ruby" | "gray" | "brand" | "red" | "green" | "blue" | "teal" | "pink" | "purple" | "cyan" | "orange" | "brown" | "yellow" | "amber" | "bronze" | "gold" | "tomato" | "crimson" | "plum" | "violet" | "iris" | "indigo" | "jade" | "grass" | "lime" | "mint" | "sky" | null | undefined;
+  colorScheme?: "gray" | "brand" | "red" | "green" | "blue" | "teal" | "pink" | "purple" | "cyan" | "orange" | "brown" | "yellow" | "amber" | "ruby" | "bronze" | "gold" | "tomato" | "crimson" | "plum" | "violet" | "iris" | "indigo" | "jade" | "grass" | "lime" | "mint" | "sky" | null | undefined;
   size?: "sm" | "md" | "lg" | null | undefined;
   variant?: "solid" | "subtle" | "surface" | "outline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

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

@@ -13,12 +13,17 @@ const badgeDefaultVariants = {
 * fundo e a borda usam a escala alpha, para o badge funcionar sobre qualquer fundo. No `solid`, o
 * texto é branco, menos em amber, yellow, sky, mint e lime, claros demais para ele, que levam
 * preto; o gray sólido é preto no tema claro e branco no escuro, como o do `Button`.
+*
+* O `max-w-full` e o `min-w-0` limitam o badge à largura do pai, para o `Badge` cortar um texto
+* longo com reticências. O `shrink-0` fica: numa linha flex, quem encolhe é o vizinho.
 */
 const badgeVariants = cva([
 	"inline-flex",
 	"items-center",
 	"shrink-0",
 	"align-middle",
+	"max-w-full",
+	"min-w-0",
 	"border",
 	"rounded-sm",
 	"corner-squircle",

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

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

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

@@ -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 CHANGED Viewed

@@ -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 };

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

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

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

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

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

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

package/dist/components/display/data-list/data-list-item-label-variants.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+//#region src/components/display/data-list/data-list-item-label-variants.d.ts
+export declare const dataListItemLabelVariants: (props?: ({
+  orientation?: "horizontal" | "vertical" | null | undefined;
+  variant?: "subtle" | "bold" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=data-list-item-label-variants.d.ts.map

package/dist/components/display/data-list/data-list-item-label-variants.js ADDED Viewed

@@ -0,0 +1,27 @@
+import { dataListDefaultVariants } from "./use-data-list-context.js";
+import { cva } from "class-variance-authority";
+//#region src/components/display/data-list/data-list-item-label-variants.ts
+const dataListItemLabelVariants = cva([
+	"flex",
+	"items-center",
+	"gap-1"
+], {
+	variants: {
+		orientation: {
+			vertical: [],
+			horizontal: ["min-w-30"]
+		},
+		variant: {
+			subtle: ["text-gray-11"],
+			bold: ["font-medium", "text-gray-12"]
+		}
+	},
+	defaultVariants: {
+		orientation: dataListDefaultVariants.orientation,
+		variant: dataListDefaultVariants.variant
+	}
+});
+//#endregion
+export { dataListItemLabelVariants };
+//# sourceMappingURL=data-list-item-label-variants.js.map

package/dist/components/display/data-list/data-list-item-label-variants.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"data-list-item-label-variants.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-item-label-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nimport { dataListDefaultVariants } from './use-data-list-context';\n\nexport const dataListItemLabelVariants = cva(\n [\n 'flex',\n 'items-center',\n\n 'gap-1',\n ],\n {\n variants: {\n orientation: {\n vertical: [],\n horizontal: ['min-w-30'],\n },\n variant: {\n subtle: ['text-gray-11'],\n bold: [\n 'font-medium',\n\n 'text-gray-12',\n ],\n },\n },\n defaultVariants: {\n orientation: dataListDefaultVariants.orientation,\n variant: dataListDefaultVariants.variant,\n },\n },\n);\n"],"mappings":";;;AAIA,MAAa,4BAA4B,IACvC;CACE;CACA;CAEA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,UAAU,CAAC;GACX,YAAY,CAAC,UAAU;EACzB;EACA,SAAS;GACP,QAAQ,CAAC,cAAc;GACvB,MAAM,CACJ,eAEA,cACF;EACF;CACF;CACA,iBAAiB;EACf,aAAa,wBAAwB;EACrC,SAAS,wBAAwB;CACnC;AACF,CACF"}

package/dist/components/display/data-list/data-list-item-label.d.ts CHANGED Viewed

@@ -2,7 +2,8 @@ import { useRender } from "@base-ui/react";
 //#region src/components/display/data-list/data-list-item-label.d.ts
 export type DataListItemLabelProps = useRender.ComponentProps<'dt'>;
 /**
- * Rótulo do item, renderizado como `dt`.
+ * Rótulo do item, renderizado como `dt`. É um `flex`, para caber um ícone ao lado do texto. Na
+ * orientação `horizontal`, tem largura mínima de 120px.
  */
 export declare const DataListItemLabel: {
   (props: DataListItemLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/display/data-list/data-list-item-label.js CHANGED Viewed

@@ -1,14 +1,21 @@
 import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { useDataListContext } from "./use-data-list-context.js";
+import { dataListItemLabelVariants } from "./data-list-item-label-variants.js";
 import { mergeProps, useRender } from "@base-ui/react";
 //#region src/components/display/data-list/data-list-item-label.tsx
 /**
-* Rótulo do item, renderizado como `dt`.
+* Rótulo do item, renderizado como `dt`. É um `flex`, para caber um ícone ao lado do texto. Na
+* orientação `horizontal`, tem largura mínima de 120px.
 */
 const DataListItemLabel = (props) => {
 	const { render, className, ...rest } = props;
+	const { orientation, variant } = useDataListContext();
 	const baseProps = {
 		"data-component": "DataList.ItemLabel",
-		className: mergeTwClassNames(["text-gray-11"], className)
+		className: mergeTwClassNames(dataListItemLabelVariants({
+			orientation,
+			variant
+		}), className)
 	};
 	return useRender({
 		render,

package/dist/components/display/data-list/data-list-item-label.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-list-item-label.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-item-label.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type DataListItemLabelProps = useRender.ComponentProps<'dt'>;\n\n/*\n Rótulo do item, renderizado como `dt~~`.\~~n */\nexport const DataListItemLabel = (props: DataListItemLabelProps) => {\n const { render, className, ...rest } = props;\n\n const baseProps = {\n 'data-component': 'DataList.ItemLabel',\n className: mergeTwClassNames(~~['text-gray-11']~~, className),\n };\n\n return useRender({\n render,\n defaultTagName: 'dt',\n props: mergeProps(baseProps, rest),\n });\n};\n\nDataListItemLabel.displayName = 'DataList.ItemLabel';\n"],"mappings":"~~;;;;;;AAQA~~,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,~~kBAAkB~~,CAAC,~~cAAc~~,~~GAAG,SAAS~~;~~CAC1D~~;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,kBAAkB,cAAc"}
1	+ {"version":3,"file":"data-list-item-label.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-item-label.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\nimport { dataListItemLabelVariants } from './data-list-item-label-variants';\nimport { useDataListContext } from './use-data-list-context';\n\nexport type DataListItemLabelProps = useRender.ComponentProps<'dt'>;\n\n/*\n Rótulo do item, renderizado como `dt`. É um `flex`, para caber um ícone ao lado do texto. Na\n * orientação `horizontal`, tem largura mínima de 120px.\n */\nexport const DataListItemLabel = (props: DataListItemLabelProps) => {\n const { render, className, ...rest } = props;\n\n const { orientation, variant } = useDataListContext();\n\n const baseProps = {\n 'data-component': 'DataList.ItemLabel',\n className: mergeTwClassNames(\n dataListItemLabelVariants({ orientation, variant }),\n className,\n ),\n };\n\n return useRender({\n render,\n defaultTagName: 'dt',\n props: mergeProps(baseProps, rest),\n });\n};\n\nDataListItemLabel.displayName = 'DataList.ItemLabel';\n"],"mappings":";;;;;;;;;AAWA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,EAAE,aAAa,YAAY,mBAAmB;CAEpD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT,0BAA0B;GAAE;GAAa;EAAQ,CAAC,GAClD,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,kBAAkB,cAAc"}

package/dist/components/display/data-list/data-list-item-value-variants.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 //#region src/components/display/data-list/data-list-item-value-variants.d.ts
 export declare const dataListItemValueVariants: (props?: ({
-  orientation?: "vertical" | "horizontal" | null | undefined;
+  variant?: "subtle" | "bold" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=data-list-item-value-variants.d.ts.map

package/dist/components/display/data-list/data-list-item-value-variants.js CHANGED Viewed

@@ -1,12 +1,16 @@
 import { dataListDefaultVariants } from "./use-data-list-context.js";
 import { cva } from "class-variance-authority";
 //#region src/components/display/data-list/data-list-item-value-variants.ts
-const dataListItemValueVariants = cva(["text-gray-12"], {
-	variants: { orientation: {
-		horizontal: ["text-start"],
-		vertical: ["text-end"]
+const dataListItemValueVariants = cva([
+	"flex",
+	"min-w-0",
+	"flex-1"
+], {
+	variants: { variant: {
+		subtle: ["text-gray-12"],
+		bold: ["text-gray-11"]
 	} },
-	defaultVariants: { orientation: dataListDefaultVariants.orientation }
+	defaultVariants: { variant: dataListDefaultVariants.variant }
 });
 //#endregion
 export { dataListItemValueVariants };

package/dist/components/display/data-list/data-list-item-value-variants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-list-item-value-variants.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-item-value-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { dataListDefaultVariants } from './use-data-list-context';\n\nexport const dataListItemValueVariants = cva(['~~text~~-~~gray~~-12'], {\n variants: {\n ~~orientation~~: {\n ~~horizontal~~: ['text-~~start~~'],\n ~~vertical~~: ['text-~~end~~'],\n },\n },\n defaultVariants: {\n ~~orientation~~: dataListDefaultVariants.~~orientation~~,\n },\n});\n"],"mappings":";;;~~AAGA~~,MAAa,4BAA4B,~~IAAI~~,~~CAAC,cAAc,GAAG~~;~~CAC7D~~,UAAU,EACR,~~aAAa~~;~~EACX~~,~~YAAY~~,CAAC,~~YAAY~~;~~EACzB~~,~~UAAU~~,CAAC,~~UAAU~~;CACvB,EACF;CACA,iBAAiB,EACf,~~aAAa~~,wBAAwB,~~YACvC~~;AACF,~~CAAC~~"}
1	+ {"version":3,"file":"data-list-item-value-variants.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-item-value-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nimport { dataListDefaultVariants } from './use-data-list-context';\n\nexport const dataListItemValueVariants = cva(\n [\n 'flex',\n 'min-w-0',\n\n 'flex-1',\n ],\n {\n variants: {\n variant: {\n subtle: ['text-gray-12'],\n bold: ['text-gray-11'],\n },\n },\n defaultVariants: {\n variant: dataListDefaultVariants.variant,\n },\n },\n);\n"],"mappings":";;;AAIA,MAAa,4BAA4B,IACvC;CACE;CACA;CAEA;AACF,GACA;CACE,UAAU,EACR,SAAS;EACP,QAAQ,CAAC,cAAc;EACvB,MAAM,CAAC,cAAc;CACvB,EACF;CACA,iBAAiB,EACf,SAAS,wBAAwB,QACnC;AACF,CACF"}

package/dist/components/display/data-list/data-list-item-value.d.ts CHANGED Viewed

@@ -2,7 +2,8 @@ import { useRender } from "@base-ui/react";
 //#region src/components/display/data-list/data-list-item-value.d.ts
 export type DataListItemValueProps = useRender.ComponentProps<'dd'>;
 /**
- * Valor do item, renderizado como `dd`. Na orientação `vertical`, alinha à direita.
+ * Valor do item, renderizado como `dd`. Ocupa o espaço que sobra ao lado do rótulo e quebra o texto
+ * longo dentro da própria coluna.
  */
 export declare const DataListItemValue: {
   (props: DataListItemValueProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/display/data-list/data-list-item-value.js CHANGED Viewed

@@ -4,14 +4,15 @@ import { dataListItemValueVariants } from "./data-list-item-value-variants.js";
 import { mergeProps, useRender } from "@base-ui/react";
 //#region src/components/display/data-list/data-list-item-value.tsx
 /**
-* Valor do item, renderizado como `dd`. Na orientação `vertical`, alinha à direita.
+* Valor do item, renderizado como `dd`. Ocupa o espaço que sobra ao lado do rótulo e quebra o texto
+* longo dentro da própria coluna.
 */
 const DataListItemValue = (props) => {
 	const { render, className, ...rest } = props;
-	const { orientation } = useDataListContext();
+	const { variant } = useDataListContext();
 	const baseProps = {
 		"data-component": "DataList.ItemValue",
-		className: mergeTwClassNames(dataListItemValueVariants({ orientation }), className)
+		className: mergeTwClassNames(dataListItemValueVariants({ variant }), className)
 	};
 	return useRender({
 		render,

package/dist/components/display/data-list/data-list-item-value.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-list-item-value.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-item-value.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\nimport { dataListItemValueVariants } from './data-list-item-value-variants';\nimport { useDataListContext } from './use-data-list-context';\n\nexport type DataListItemValueProps = useRender.ComponentProps<'dd'>;\n\n/*\n Valor do item, renderizado como `dd`. Na ~~orientação~~ ~~`vertical`,~~ ~~alinha~~ à ~~direita~~.\n */\nexport const DataListItemValue = (props: DataListItemValueProps) => {\n const { render, className, ...rest } = props;\n\n const { ~~orientation~~ } = useDataListContext();\n\n const baseProps = {\n 'data-component': 'DataList.ItemValue',\n className: mergeTwClassNames(\n dataListItemValueVariants({ ~~orientation~~ }),\n className,\n ),\n };\n\n return useRender({\n render,\n defaultTagName: 'dd',\n props: mergeProps(baseProps, rest),\n });\n};\n\nDataListItemValue.displayName = 'DataList.ItemValue';\n"],"mappings":"~~;;;;;;;;AAUA~~,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,EAAE,~~gBAAgB~~,mBAAmB;~~CAE3C~~,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT,0BAA0B,EAAE,~~YAAY~~,CAAC,~~GACzC~~,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,kBAAkB,cAAc"}
1	+ {"version":3,"file":"data-list-item-value.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-item-value.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\nimport { dataListItemValueVariants } from './data-list-item-value-variants';\nimport { useDataListContext } from './use-data-list-context';\n\nexport type DataListItemValueProps = useRender.ComponentProps<'dd'>;\n\n/*\n Valor do item, renderizado como `dd`. Ocupa o espaço que sobra ao lado do rótulo e quebra o texto\n * longo dentro da própria coluna.\n */\nexport const DataListItemValue = (props: DataListItemValueProps) => {\n const { render, className, ...rest } = props;\n\n const { variant } = useDataListContext();\n\n const baseProps = {\n 'data-component': 'DataList.ItemValue',\n className: mergeTwClassNames(\n dataListItemValueVariants({ variant }),\n className,\n ),\n };\n\n return useRender({\n render,\n defaultTagName: 'dd',\n props: mergeProps(baseProps, rest),\n });\n};\n\nDataListItemValue.displayName = 'DataList.ItemValue';\n"],"mappings":";;;;;;;;;AAWA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,EAAE,YAAY,mBAAmB;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT,0BAA0B,EAAE,QAAQ,CAAC,GACrC,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,kBAAkB,cAAc"}

package/dist/components/display/data-list/data-list-item-variants.d.ts CHANGED Viewed

@@ -1,11 +1,7 @@
 //#region src/components/display/data-list/data-list-item-variants.d.ts
-/**
- * O espaçamento depende da orientação: em `horizontal` os itens ficam lado a lado e o respiro é
- * lateral, com o valor abaixo do rótulo; em `vertical` eles empilham e o respiro é vertical, com
- * rótulo e valor lado a lado.
- */
 export declare const dataListItemVariants: (props?: ({
-  orientation?: "vertical" | "horizontal" | null | undefined;
+  orientation?: "horizontal" | "vertical" | null | undefined;
+  size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=data-list-item-variants.d.ts.map

package/dist/components/display/data-list/data-list-item-variants.js CHANGED Viewed

@@ -1,32 +1,30 @@
 import { dataListDefaultVariants } from "./use-data-list-context.js";
 import { cva } from "class-variance-authority";
 //#region src/components/display/data-list/data-list-item-variants.ts
-/**
-* O espaçamento depende da orientação: em `horizontal` os itens ficam lado a lado e o respiro é
-* lateral, com o valor abaixo do rótulo; em `vertical` eles empilham e o respiro é vertical, com
-* rótulo e valor lado a lado.
-*/
-const dataListItemVariants = cva(["flex"], {
-	variants: { orientation: {
-		horizontal: [
-			"flex-col",
-			"items-start",
-			"gap-1",
-			"px-2",
-			"first:pl-0",
-			"last:pr-0"
-		],
-		vertical: [
-			"flex-row",
-			"items-center",
-			"justify-between",
-			"gap-4",
-			"py-2",
-			"first:pt-0",
-			"last:pb-0"
-		]
-	} },
-	defaultVariants: { orientation: dataListDefaultVariants.orientation }
+const dataListItemVariants = cva([], {
+	variants: {
+		orientation: {
+			vertical: [
+				"flex",
+				"flex-col",
+				"gap-1"
+			],
+			horizontal: [
+				"inline-flex",
+				"items-center",
+				"gap-4"
+			]
+		},
+		size: {
+			sm: ["text-xs/4"],
+			md: ["text-sm/5"],
+			lg: ["text-base/6"]
+		}
+	},
+	defaultVariants: {
+		orientation: dataListDefaultVariants.orientation,
+		size: dataListDefaultVariants.size
+	}
 });
 //#endregion
 export { dataListItemVariants };

package/dist/components/display/data-list/data-list-item-variants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-list-item-variants.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-item-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { dataListDefaultVariants } from './use-data-list-context';\n\n/*\n O espaçamento depende da orientação: em `horizontal` os itens ficam lado a lado e o respiro é\n * lateral, com o valor abaixo do rótulo; em `vertical` eles empilham e o respiro é vertical, com\n * rótulo e valor lado a lado.\n */\nexport const dataListItemVariants = cva([~~'flex'~~], {\n variants: {\n orientation: {\n ~~horizontal~~: [\n 'flex~~-col~~',\n '~~items~~-~~start~~',\n\n 'gap-1',\n ~~'px-2',\n\n 'first:pl-0',\n 'last:pr-0',\n~~ ],\n ~~vertical~~: [\n 'flex~~-row~~',\n 'items-center',\n ~~'justify-between',\n~~\n 'gap-4',\n ~~'py-2'~~,\n\n '~~first:pt~~-0',\n '~~last:pb~~-0',\n ],\n },\n },\n defaultVariants: {\n orientation: dataListDefaultVariants.orientation,\n },\n});\n"],"mappings":"~~;;;;;;;;AAQA~~,MAAa,uBAAuB,IAAI,CAAC,~~MAAM,~~GAAG;~~CAChD~~,UAAU,EACR,aAAa;~~EACX~~,~~YAAY~~;~~GACV~~;~~GACA~~;~~GAEA~~;GACA;~~GAEA~~;~~GACA~~;EACF;EACA,~~UAAU~~;~~GACR~~;~~GACA~~;~~GACA~~;~~GAEA~~;~~GACA;GAEA;GACA;EACF;~~CACF~~,EACF~~;CACA,iBAAiB,EACf,aAAa,wBAAwB,~~YACvC~~;AACF,CAAC"}
1	+ {"version":3,"file":"data-list-item-variants.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-item-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nimport { dataListDefaultVariants } from './use-data-list-context';\n\nexport const dataListItemVariants = cva([], {\n variants: {\n orientation: {\n vertical: [\n 'flex',\n 'flex-col',\n\n 'gap-1',\n ],\n horizontal: [\n 'inline-flex',\n 'items-center',\n\n 'gap-4',\n ],\n },\n size: {\n sm: ['text-xs/4'],\n md: ['text-sm/5'],\n lg: ['text-base/6'],\n },\n },\n defaultVariants: {\n orientation: dataListDefaultVariants.orientation,\n size: dataListDefaultVariants.size,\n },\n});\n"],"mappings":";;;AAIA,MAAa,uBAAuB,IAAI,CAAC,GAAG;CAC1C,UAAU;EACR,aAAa;GACX,UAAU;IACR;IACA;IAEA;GACF;GACA,YAAY;IACV;IACA;IAEA;GACF;EACF;EACA,MAAM;GACJ,IAAI,CAAC,WAAW;GAChB,IAAI,CAAC,WAAW;GAChB,IAAI,CAAC,aAAa;EACpB;CACF;CACA,iBAAiB;EACf,aAAa,wBAAwB;EACrC,MAAM,wBAAwB;CAChC;AACF,CAAC"}

package/dist/components/display/data-list/data-list-item.d.ts CHANGED Viewed

@@ -2,7 +2,8 @@ import { useRender } from "@base-ui/react";
 //#region src/components/display/data-list/data-list-item.d.ts
 export type DataListItemProps = useRender.ComponentProps<'div'>;
 /**
- * Um par rótulo e valor. O `div` em volta de `dt` e `dd` é válido dentro de `dl`.
+ * Um par rótulo e valor, com a orientação e o tamanho do `Root`. O `div` em volta de `dt` e `dd` é
+ * válido dentro de `dl`.
  */
 export declare const DataListItem: {
   (props: DataListItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;