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

@lucasbernardosn/react-ui 0.1.0 → 0.2.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 (192) hide show

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

@@ -29,7 +29,7 @@ export declare const buttonDefaultVariants: Required<ButtonVariants>;
  */
 export declare const buttonVariants: (props?: ({
   colorScheme?: "gray" | "brand" | "red" | "green" | "blue" | "teal" | "pink" | "purple" | "cyan" | "orange" | "brown" | "yellow" | "amber" | null | undefined;
-  variant?: "outline" | "subtle" | "solid" | "surface" | "ghost" | "plain" | null | undefined;
+  variant?: "solid" | "subtle" | "surface" | "outline" | "ghost" | "plain" | null | undefined;
   size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

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

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

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

@@ -48,7 +48,7 @@ const buttonVariants = cva([
 				"[--button-surface-border:var(--color-gray-5)]",
 				"[--button-outline-hover-bg:var(--color-gray-3)]",
 				"[--button-outline-border:var(--color-gray-alpha-7)]",
-				"[--button-ghost-hover-bg:var(--color-gray-3)]",
+				"[--button-ghost-hover-bg:var(--color-gray-4)]",
 				"text-gray-12",
 				"ring-gray-9"
 			],
@@ -61,7 +61,7 @@ const buttonVariants = cva([
 				"[--button-surface-border:var(--color-brand-5)]",
 				"[--button-outline-hover-bg:var(--color-brand-3)]",
 				"[--button-outline-border:var(--color-brand-8)]",
-				"[--button-ghost-hover-bg:var(--color-brand-3)]",
+				"[--button-ghost-hover-bg:var(--color-brand-4)]",
 				"text-brand-11",
 				"ring-brand-9"
 			],
@@ -74,7 +74,7 @@ const buttonVariants = cva([
 				"[--button-surface-border:var(--color-red-5)]",
 				"[--button-outline-hover-bg:var(--color-red-3)]",
 				"[--button-outline-border:var(--color-red-8)]",
-				"[--button-ghost-hover-bg:var(--color-red-3)]",
+				"[--button-ghost-hover-bg:var(--color-red-4)]",
 				"text-red-11",
 				"ring-red-9"
 			],
@@ -87,7 +87,7 @@ const buttonVariants = cva([
 				"[--button-surface-border:var(--color-green-5)]",
 				"[--button-outline-hover-bg:var(--color-green-3)]",
 				"[--button-outline-border:var(--color-green-8)]",
-				"[--button-ghost-hover-bg:var(--color-green-3)]",
+				"[--button-ghost-hover-bg:var(--color-green-4)]",
 				"text-green-11",
 				"ring-green-9"
 			],
@@ -100,7 +100,7 @@ const buttonVariants = cva([
 				"[--button-surface-border:var(--color-blue-5)]",
 				"[--button-outline-hover-bg:var(--color-blue-3)]",
 				"[--button-outline-border:var(--color-blue-8)]",
-				"[--button-ghost-hover-bg:var(--color-blue-3)]",
+				"[--button-ghost-hover-bg:var(--color-blue-4)]",
 				"text-blue-11",
 				"ring-blue-9"
 			],
@@ -113,7 +113,7 @@ const buttonVariants = cva([
 				"[--button-surface-border:var(--color-teal-5)]",
 				"[--button-outline-hover-bg:var(--color-teal-3)]",
 				"[--button-outline-border:var(--color-teal-8)]",
-				"[--button-ghost-hover-bg:var(--color-teal-3)]",
+				"[--button-ghost-hover-bg:var(--color-teal-4)]",
 				"text-teal-11",
 				"ring-teal-9"
 			],
@@ -126,7 +126,7 @@ const buttonVariants = cva([
 				"[--button-surface-border:var(--color-pink-5)]",
 				"[--button-outline-hover-bg:var(--color-pink-3)]",
 				"[--button-outline-border:var(--color-pink-8)]",
-				"[--button-ghost-hover-bg:var(--color-pink-3)]",
+				"[--button-ghost-hover-bg:var(--color-pink-4)]",
 				"text-pink-11",
 				"ring-pink-9"
 			],
@@ -139,7 +139,7 @@ const buttonVariants = cva([
 				"[--button-surface-border:var(--color-purple-5)]",
 				"[--button-outline-hover-bg:var(--color-purple-3)]",
 				"[--button-outline-border:var(--color-purple-8)]",
-				"[--button-ghost-hover-bg:var(--color-purple-3)]",
+				"[--button-ghost-hover-bg:var(--color-purple-4)]",
 				"text-purple-11",
 				"ring-purple-9"
 			],
@@ -152,7 +152,7 @@ const buttonVariants = cva([
 				"[--button-surface-border:var(--color-cyan-5)]",
 				"[--button-outline-hover-bg:var(--color-cyan-3)]",
 				"[--button-outline-border:var(--color-cyan-8)]",
-				"[--button-ghost-hover-bg:var(--color-cyan-3)]",
+				"[--button-ghost-hover-bg:var(--color-cyan-4)]",
 				"text-cyan-11",
 				"ring-cyan-9"
 			],
@@ -165,7 +165,7 @@ const buttonVariants = cva([
 				"[--button-surface-border:var(--color-orange-5)]",
 				"[--button-outline-hover-bg:var(--color-orange-3)]",
 				"[--button-outline-border:var(--color-orange-8)]",
-				"[--button-ghost-hover-bg:var(--color-orange-3)]",
+				"[--button-ghost-hover-bg:var(--color-orange-4)]",
 				"text-orange-11",
 				"ring-orange-9"
 			],
@@ -178,7 +178,7 @@ const buttonVariants = cva([
 				"[--button-surface-border:var(--color-brown-5)]",
 				"[--button-outline-hover-bg:var(--color-brown-3)]",
 				"[--button-outline-border:var(--color-brown-8)]",
-				"[--button-ghost-hover-bg:var(--color-brown-3)]",
+				"[--button-ghost-hover-bg:var(--color-brown-4)]",
 				"text-brown-11",
 				"ring-brown-9"
 			],
@@ -191,7 +191,7 @@ const buttonVariants = cva([
 				"[--button-surface-border:var(--color-yellow-5)]",
 				"[--button-outline-hover-bg:var(--color-yellow-3)]",
 				"[--button-outline-border:var(--color-yellow-8)]",
-				"[--button-ghost-hover-bg:var(--color-yellow-3)]",
+				"[--button-ghost-hover-bg:var(--color-yellow-4)]",
 				"text-yellow-11",
 				"ring-yellow-9"
 			],
@@ -204,7 +204,7 @@ const buttonVariants = cva([
 				"[--button-surface-border:var(--color-amber-5)]",
 				"[--button-outline-hover-bg:var(--color-amber-3)]",
 				"[--button-outline-border:var(--color-amber-8)]",
-				"[--button-ghost-hover-bg:var(--color-amber-3)]",
+				"[--button-ghost-hover-bg:var(--color-amber-4)]",
 				"text-amber-11",
 				"ring-amber-9"
 			]
@@ -258,7 +258,6 @@ const buttonVariants = cva([
 				"h-5",
 				"min-w-5",
 				"text-2xs",
-				"rounded-sm",
 				"px-1.5",
 				"gap-1",
 				"[&_svg]:size-2.5"

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

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

package/dist/components/collections/select/select-group-label-variants.js CHANGED Viewed

@@ -18,7 +18,7 @@ const selectGroupLabelVariants = cva([
 	"pt-2",
 	"pb-1",
 	"text-gray-11",
-	"font-bold",
+	"font-medium",
 	"uppercase",
 	"tracking-wider"
 ], {

package/dist/components/collections/select/select-group-label-variants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"select-group-label-variants.js","names":[],"sources":["../../../../src/components/collections/select/select-group-label-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { selectDefaultVariants } from './use-select-context';\n\n/*\n Origem do rótulo de grupo das listas em popup: o `Menu.GroupLabel` copia estas classes (tabela\n * no README de `collections`).\n \n O recuo inicial de cada `size` é o recuo do texto do `Select.Item` (padding + coluna do check +\n * gap), para o rótulo alinhar com o texto dos itens do grupo. Mudar o espaçamento do item pede\n * recalcular este valor.\n */\nexport const selectGroupLabelVariants = cva(\n [\n 'sticky',\n 'top-0',\n 'z-1',\n\n // Mesmo fundo do popup: fixo no topo, o rótulo cobre os itens que rolam por baixo.\n 'bg-white',\n 'dark:bg-gray-2',\n\n 'pt-2',\n 'pb-1',\n\n 'text-gray-11',\n 'font-~~bold~~',\n 'uppercase',\n 'tracking-wider',\n ],\n {\n variants: {\n size: {\n '2xs': [\n 'ps-6',\n 'pe-2',\n\n 'text-[0.6875rem]', // 11px\n ],\n xs: [\n 'ps-6',\n 'pe-2',\n\n 'text-[0.6875rem]', // 11px\n ],\n sm: [\n 'ps-8',\n 'pe-2.5',\n\n 'text-[0.6875rem]', // 11px\n ],\n md: [\n 'ps-8.5',\n 'pe-3',\n\n 'text-[0.6875rem]', // 11px\n ],\n lg: [\n 'ps-11',\n 'pe-4',\n\n 'text-[0.8125rem]', // 13px\n ],\n xl: [\n 'ps-11.5',\n 'pe-4.5',\n\n 'text-[0.8125rem]', // 13px\n ],\n '2xl': [\n 'ps-12.5',\n 'pe-5',\n\n 'text-sm',\n ],\n },\n },\n defaultVariants: {\n size: selectDefaultVariants.size,\n },\n },\n);\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,2BAA2B,IACtC;CACE;CACA;CACA;CAGA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,OAAO;GACL;GACA;GAEA;EACF;EACA,IAAI;GACF;GACA;GAEA;EACF;EACA,IAAI;GACF;GACA;GAEA;EACF;EACA,IAAI;GACF;GACA;GAEA;EACF;EACA,IAAI;GACF;GACA;GAEA;EACF;EACA,IAAI;GACF;GACA;GAEA;EACF;EACA,OAAO;GACL;GACA;GAEA;EACF;CACF,EACF;CACA,iBAAiB,EACf,MAAM,sBAAsB,KAC9B;AACF,CACF"}
1	+ {"version":3,"file":"select-group-label-variants.js","names":[],"sources":["../../../../src/components/collections/select/select-group-label-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { selectDefaultVariants } from './use-select-context';\n\n/*\n Origem do rótulo de grupo das listas em popup: o `Menu.GroupLabel` copia estas classes (tabela\n * no README de `collections`).\n \n O recuo inicial de cada `size` é o recuo do texto do `Select.Item` (padding + coluna do check +\n * gap), para o rótulo alinhar com o texto dos itens do grupo. Mudar o espaçamento do item pede\n * recalcular este valor.\n */\nexport const selectGroupLabelVariants = cva(\n [\n 'sticky',\n 'top-0',\n 'z-1',\n\n // Mesmo fundo do popup: fixo no topo, o rótulo cobre os itens que rolam por baixo.\n 'bg-white',\n 'dark:bg-gray-2',\n\n 'pt-2',\n 'pb-1',\n\n 'text-gray-11',\n 'font-medium',\n 'uppercase',\n 'tracking-wider',\n ],\n {\n variants: {\n size: {\n '2xs': [\n 'ps-6',\n 'pe-2',\n\n 'text-[0.6875rem]', // 11px\n ],\n xs: [\n 'ps-6',\n 'pe-2',\n\n 'text-[0.6875rem]', // 11px\n ],\n sm: [\n 'ps-8',\n 'pe-2.5',\n\n 'text-[0.6875rem]', // 11px\n ],\n md: [\n 'ps-8.5',\n 'pe-3',\n\n 'text-[0.6875rem]', // 11px\n ],\n lg: [\n 'ps-11',\n 'pe-4',\n\n 'text-[0.8125rem]', // 13px\n ],\n xl: [\n 'ps-11.5',\n 'pe-4.5',\n\n 'text-[0.8125rem]', // 13px\n ],\n '2xl': [\n 'ps-12.5',\n 'pe-5',\n\n 'text-sm',\n ],\n },\n },\n defaultVariants: {\n size: selectDefaultVariants.size,\n },\n },\n);\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,2BAA2B,IACtC;CACE;CACA;CACA;CAGA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,OAAO;GACL;GACA;GAEA;EACF;EACA,IAAI;GACF;GACA;GAEA;EACF;EACA,IAAI;GACF;GACA;GAEA;EACF;EACA,IAAI;GACF;GACA;GAEA;EACF;EACA,IAAI;GACF;GACA;GAEA;EACF;EACA,IAAI;GACF;GACA;GAEA;EACF;EACA,OAAO;GACL;GACA;GAEA;EACF;CACF,EACF;CACA,iBAAiB,EACf,MAAM,sBAAsB,KAC9B;AACF,CACF"}

package/dist/components/collections/select/select-item-variants.js CHANGED Viewed

@@ -34,7 +34,7 @@ const selectItemVariants = cva([
 			"px-2",
 			"gap-1",
 			"py-1",
-			"pointer-coarse:py-2.5",
+			"pointer-coarse:py-2",
 			"text-xs"
 		],
 		xs: [
@@ -42,7 +42,7 @@ const selectItemVariants = cva([
 			"px-2",
 			"gap-1",
 			"py-1.25",
-			"pointer-coarse:py-2.5",
+			"pointer-coarse:py-2",
 			"text-xs"
 		],
 		sm: [
@@ -50,7 +50,7 @@ const selectItemVariants = cva([
 			"px-2.5",
 			"gap-2",
 			"py-1.25",
-			"pointer-coarse:py-2.5",
+			"pointer-coarse:py-2",
 			"text-sm"
 		],
 		md: [
@@ -81,8 +81,8 @@ const selectItemVariants = cva([
 			"grid-cols-[1.125rem_1fr]",
 			"px-5",
 			"gap-3",
-			"py-3",
-			"pointer-coarse:py-5",
+			"py-4",
+			"pointer-coarse:py-4",
 			"text-lg"
 		]
 	} },

package/dist/components/collections/select/select-item-variants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"select-item-variants.js","names":[],"sources":["../../../../src/components/collections/select/select-item-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { selectDefaultVariants } from './use-select-context';\n\n/*\n Origem do item das listas em popup: o `Menu.Item` copia estas classes (tabela no README de\n * `collections`). Uma mudança aqui vale para a cópia na mesma rodada.\n \n O realce é um `::before` recuado 4px das laterais, atrás do texto (`z-[-1]`, com o item em\n * `z-0`): o fundo não encosta na borda do popup, e o item continua com a largura toda, com a\n * área de clique indo até a borda.\n */\nexport const selectItemVariants = cva(\n [\n 'grid',\n 'items-start', // Texto que quebra a linha mantém o check na primeira\n\n 'relative',\n\n 'rounded',\n\n 'cursor-default',\n 'select-none',\n 'outline-none',\n\n 'data-disabled:pointer-events-none',\n 'data-disabled:opacity-50',\n\n 'data-highlighted:z-0',\n 'data-highlighted:before:absolute',\n 'data-highlighted:before:inset-x-1',\n 'data-highlighted:before:inset-y-0',\n 'data-highlighted:before:z-[-1]',\n 'data-highlighted:before:rounded',\n 'data-highlighted:before:content-[\"\"]',\n // Só com hover: no toque o realce fica no último item tocado e, com `multiple` (popup aberto),\n // parece mais selecionado que os outros.\n '[@media(hover:hover)]:data-highlighted:before:bg-gray-4',\n ],\n {\n variants: {\n size: {\n '2xs': [\n 'grid-cols-[0.75rem_1fr]',\n\n 'px-2',\n 'gap-1',\n 'py-1',\n 'pointer-coarse:py-2.5',\n\n 'text-xs',\n ],\n xs: [\n 'grid-cols-[0.75rem_1fr]',\n\n 'px-2',\n 'gap-1',\n 'py-1.25',\n\n 'pointer-coarse:py-2.5',\n\n 'text-xs',\n ],\n sm: [\n 'grid-cols-[0.875rem_1fr]',\n\n 'px-2.5',\n 'gap-2',\n 'py-1.25',\n\n 'pointer-coarse:py-2.5',\n\n 'text-sm',\n ],\n md: [\n 'grid-cols-[0.875rem_1fr]',\n\n 'px-3',\n 'gap-2',\n 'py-1.75',\n\n 'pointer-coarse:py-3',\n\n 'text-sm',\n ],\n lg: [\n 'grid-cols-[1rem_1fr]',\n\n 'px-4',\n 'gap-3',\n 'py-1.75',\n\n 'pointer-coarse:py-3',\n\n 'text-base',\n ],\n xl: [\n 'grid-cols-[1rem_1fr]',\n\n 'px-4.5',\n 'gap-3',\n 'py-2.25',\n\n 'pointer-coarse:py-4',\n\n 'text-base',\n ],\n '2xl': [\n 'grid-cols-[1.125rem_1fr]',\n\n 'px-5',\n 'gap-3',\n 'py-3',\n 'pointer-coarse:py-5',\n\n 'text-lg',\n ],\n },\n },\n defaultVariants: {\n size: selectDefaultVariants.size,\n },\n },\n);\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,qBAAqB,IAChC;CACE;CACA;CAEA;CAEA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,OAAO;GACL;GAEA;GACA;GACA;GACA;GAEA;EACF;EACA,IAAI;GACF;GAEA;GACA;GACA;GAEA;GAEA;EACF;EACA,IAAI;GACF;GAEA;GACA;GACA;GAEA;GAEA;EACF;EACA,IAAI;GACF;GAEA;GACA;GACA;GAEA;GAEA;EACF;EACA,IAAI;GACF;GAEA;GACA;GACA;GAEA;GAEA;EACF;EACA,IAAI;GACF;GAEA;GACA;GACA;GAEA;GAEA;EACF;EACA,OAAO;GACL;GAEA;GACA;GACA;GACA;GAEA;EACF;CACF,EACF;CACA,iBAAiB,EACf,MAAM,sBAAsB,KAC9B;AACF,CACF"}
1	+ {"version":3,"file":"select-item-variants.js","names":[],"sources":["../../../../src/components/collections/select/select-item-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { selectDefaultVariants } from './use-select-context';\n\n/*\n Origem do item das listas em popup: o `Menu.Item` copia estas classes (tabela no README de\n * `collections`). Uma mudança aqui vale para a cópia na mesma rodada.\n \n O realce é um `::before` recuado 4px das laterais, atrás do texto (`z-[-1]`, com o item em\n * `z-0`): o fundo não encosta na borda do popup, e o item continua com a largura toda, com a\n * área de clique indo até a borda.\n */\nexport const selectItemVariants = cva(\n [\n 'grid',\n 'items-start', // Texto que quebra a linha mantém o check na primeira\n\n 'relative',\n\n 'rounded',\n\n 'cursor-default',\n 'select-none',\n 'outline-none',\n\n 'data-disabled:pointer-events-none',\n 'data-disabled:opacity-50',\n\n 'data-highlighted:z-0',\n 'data-highlighted:before:absolute',\n 'data-highlighted:before:inset-x-1',\n 'data-highlighted:before:inset-y-0',\n 'data-highlighted:before:z-[-1]',\n 'data-highlighted:before:rounded',\n 'data-highlighted:before:content-[\"\"]',\n // Só com hover: no toque o realce fica no último item tocado e, com `multiple` (popup aberto),\n // parece mais selecionado que os outros.\n '[@media(hover:hover)]:data-highlighted:before:bg-gray-4',\n ],\n {\n variants: {\n size: {\n '2xs': [\n 'grid-cols-[0.75rem_1fr]',\n\n 'px-2',\n 'gap-1',\n 'py-1',\n 'pointer-coarse:py-2',\n\n 'text-xs',\n ],\n xs: [\n 'grid-cols-[0.75rem_1fr]',\n\n 'px-2',\n 'gap-1',\n 'py-1.25',\n\n 'pointer-coarse:py-2',\n\n 'text-xs',\n ],\n sm: [\n 'grid-cols-[0.875rem_1fr]',\n\n 'px-2.5',\n 'gap-2',\n 'py-1.25',\n\n 'pointer-coarse:py-2',\n\n 'text-sm',\n ],\n md: [\n 'grid-cols-[0.875rem_1fr]',\n\n 'px-3',\n 'gap-2',\n 'py-1.75',\n\n 'pointer-coarse:py-3',\n\n 'text-sm',\n ],\n lg: [\n 'grid-cols-[1rem_1fr]',\n\n 'px-4',\n 'gap-3',\n 'py-1.75',\n\n 'pointer-coarse:py-3',\n\n 'text-base',\n ],\n xl: [\n 'grid-cols-[1rem_1fr]',\n\n 'px-4.5',\n 'gap-3',\n 'py-2.25',\n\n 'pointer-coarse:py-4',\n\n 'text-base',\n ],\n '2xl': [\n 'grid-cols-[1.125rem_1fr]',\n\n 'px-5',\n 'gap-3',\n 'py-4',\n 'pointer-coarse:py-4',\n\n 'text-lg',\n ],\n },\n },\n defaultVariants: {\n size: selectDefaultVariants.size,\n },\n },\n);\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,qBAAqB,IAChC;CACE;CACA;CAEA;CAEA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,OAAO;GACL;GAEA;GACA;GACA;GACA;GAEA;EACF;EACA,IAAI;GACF;GAEA;GACA;GACA;GAEA;GAEA;EACF;EACA,IAAI;GACF;GAEA;GACA;GACA;GAEA;GAEA;EACF;EACA,IAAI;GACF;GAEA;GACA;GACA;GAEA;GAEA;EACF;EACA,IAAI;GACF;GAEA;GACA;GACA;GAEA;GAEA;EACF;EACA,IAAI;GACF;GAEA;GACA;GACA;GAEA;GAEA;EACF;EACA,OAAO;GACL;GAEA;GACA;GACA;GACA;GAEA;EACF;CACF,EACF;CACA,iBAAiB,EACf,MAAM,sBAAsB,KAC9B;AACF,CACF"}

package/dist/components/collections/select/select-trigger-variants.d.ts CHANGED Viewed

@@ -9,7 +9,7 @@
  * - hover, clique e aberto num tom mais escuro do fundo.
  */
 export declare const selectTriggerVariants: (props?: ({
-  variant?: "outline" | "subtle" | null | undefined;
+  variant?: "subtle" | "outline" | null | undefined;
   size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

package/dist/components/collections/tree-view/tree-view-node-rename-input.js CHANGED Viewed

@@ -36,7 +36,8 @@ const TreeViewNodeRenameInput = (props) => {
 			"px-1",
 			"border",
 			"border-gray-7",
-			"rounded-sm",
+			"rounded-md",
+			"corner-squircle",
 			"bg-gray-1",
 			"text-gray-12",
 			"outline-none",

package/dist/components/collections/tree-view/tree-view-node-rename-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tree-view-node-rename-input.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-node-rename-input.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\nimport { useTreeViewContext } from './use-tree-view-context';\nimport { useTreeViewNodePropsContext } from './use-tree-view-node-props-context';\n\nexport type TreeViewNodeRenameInputProps = useRender.ComponentProps<'input'>;\n\n/*\n Campo de edição do rótulo de um nó, visível apenas enquanto ele está sendo\n * renomeado.\n \n `Enter` e a perda de foco confirmam, `Escape` cancela. A renomeação começa\n * com `F2` sobre o nó e só é permitida quando a raiz recebe `canRename`.\n \n Fica ao lado do `TreeView.ItemText` ou do `TreeView.BranchText`, sempre\n * montado: a árvore preenche e foca o campo ao começar, e o rótulo se esconde\n * enquanto a linha tem `data-renaming`.\n \n @example\n * ```tsx\n * <TreeView.Item>\n * <TreeView.ItemText>{node.name}</TreeView.ItemText>\n * <TreeView.NodeRenameInput />\n * </TreeView.Item>\n * ```\n */\nexport const TreeViewNodeRenameInput = (\n props: TreeViewNodeRenameInputProps,\n) => {\n const { render, className, ...rest } = props;\n\n const treeView = useTreeViewContext();\n const nodeProps = useTreeViewNodePropsContext();\n\n const zagProps = treeView.getNodeRenameInputProps(nodeProps);\n\n const baseProps = {\n 'data-component': 'TreeView.NodeRenameInput',\n className: mergeTwClassNames(\n [\n '[--focus-ring-width:2px]',\n\n 'flex-1',\n 'min-w-0',\n\n 'px-1',\n\n 'border',\n 'border-gray-7',\n 'rounded-sm',\n\n 'bg-gray-1',\n\n // A tipografia vem da linha pelo `font: inherit` do preflight. A cor é\n // fixa: herdada, ficaria clara sobre o fundo do campo na linha\n // selecionada do `solid`.\n 'text-gray-12',\n\n 'outline-none',\n 'focus-ring-inside',\n 'ring-gray-8',\n ],\n className,\n ),\n };\n\n return useRender({\n render,\n defaultTagName: 'input',\n props: mergeProps(baseProps, zagProps, rest),\n });\n};\n\nTreeViewNodeRenameInput.displayName = 'TreeView.NodeRenameInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,2BACX,UACG;CACH,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,WAAW,mBAAmB;CACpC,MAAM,YAAY,4BAA4B;CAE9C,MAAM,WAAW,SAAS,wBAAwB,SAAS;CAE3D,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GAEA;GACA;GAEA;GAEA;GACA;GACA;GAEA;GAKA;GAEA;GACA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU,IAAI;CAC7C,CAAC;AACH;AAEA,wBAAwB,cAAc"}
1	+ {"version":3,"file":"tree-view-node-rename-input.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-node-rename-input.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\nimport { useTreeViewContext } from './use-tree-view-context';\nimport { useTreeViewNodePropsContext } from './use-tree-view-node-props-context';\n\nexport type TreeViewNodeRenameInputProps = useRender.ComponentProps<'input'>;\n\n/*\n Campo de edição do rótulo de um nó, visível apenas enquanto ele está sendo\n * renomeado.\n \n `Enter` e a perda de foco confirmam, `Escape` cancela. A renomeação começa\n * com `F2` sobre o nó e só é permitida quando a raiz recebe `canRename`.\n \n Fica ao lado do `TreeView.ItemText` ou do `TreeView.BranchText`, sempre\n * montado: a árvore preenche e foca o campo ao começar, e o rótulo se esconde\n * enquanto a linha tem `data-renaming`.\n \n @example\n * ```tsx\n * <TreeView.Item>\n * <TreeView.ItemText>{node.name}</TreeView.ItemText>\n * <TreeView.NodeRenameInput />\n * </TreeView.Item>\n * ```\n */\nexport const TreeViewNodeRenameInput = (\n props: TreeViewNodeRenameInputProps,\n) => {\n const { render, className, ...rest } = props;\n\n const treeView = useTreeViewContext();\n const nodeProps = useTreeViewNodePropsContext();\n\n const zagProps = treeView.getNodeRenameInputProps(nodeProps);\n\n const baseProps = {\n 'data-component': 'TreeView.NodeRenameInput',\n className: mergeTwClassNames(\n [\n '[--focus-ring-width:2px]',\n\n 'flex-1',\n 'min-w-0',\n\n 'px-1',\n\n 'border',\n 'border-gray-7',\n 'rounded-md',\n 'corner-squircle',\n\n 'bg-gray-1',\n\n // A tipografia vem da linha pelo `font: inherit` do preflight. A cor é\n // fixa: herdada, ficaria clara sobre o fundo do campo na linha\n // selecionada do `solid`.\n 'text-gray-12',\n\n 'outline-none',\n 'focus-ring-inside',\n 'ring-gray-8',\n ],\n className,\n ),\n };\n\n return useRender({\n render,\n defaultTagName: 'input',\n props: mergeProps(baseProps, zagProps, rest),\n });\n};\n\nTreeViewNodeRenameInput.displayName = 'TreeView.NodeRenameInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,2BACX,UACG;CACH,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,WAAW,mBAAmB;CACpC,MAAM,YAAY,4BAA4B;CAE9C,MAAM,WAAW,SAAS,wBAAwB,SAAS;CAE3D,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GAEA;GACA;GAEA;GAEA;GACA;GACA;GACA;GAEA;GAKA;GAEA;GACA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU,IAAI;CAC7C,CAAC;AACH;AAEA,wBAAwB,cAAc"}

package/dist/components/collections/tree-view/tree-view-node-variants.d.ts CHANGED Viewed

@@ -8,7 +8,7 @@
  * par pinta a linha selecionada.
  */
 export declare const treeViewNodeVariants: (props?: ({
-  variant?: "subtle" | "solid" | null | undefined;
+  variant?: "solid" | "subtle" | null | undefined;
   colorScheme?: "gray" | "brand" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

package/dist/components/collections/tree-view/tree-view-root-provider.js CHANGED Viewed

@@ -30,11 +30,7 @@ const splitVariantProps = createSplitProps();
 * ```
 */
 const TreeViewRootProvider = (props) => {
-	const [variantProps, withoutVariantProps] = splitVariantProps(props, [
-		"colorScheme",
-		"size",
-		"variant"
-	]);
+	const [variantProps, withoutVariantProps] = splitVariantProps(props, ["colorScheme", "variant"]);
 	const { value: treeView, render, className, keepMounted = false, ...rest } = withoutVariantProps;
 	const zagProps = treeView.getRootProps();
 	const baseProps = {

package/dist/components/collections/tree-view/tree-view-root-provider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tree-view-root-provider.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-root-provider.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport type { TreeNode } from '@zag-js/collection';\nimport { mergeTwClassNames } from '#utils';\nimport type { UseTreeViewReturn } from './use-tree-view';\nimport { TreeViewContextProvider } from './use-tree-view-context';\nimport {\n TreeViewRenderStrategyContextProvider,\n type TreeViewRenderStrategyContextValue,\n} from './use-tree-view-render-strategy-context';\nimport {\n type TreeViewVariants,\n TreeViewVariantsContextProvider,\n} from './use-tree-view-variants-context';\n\ntype RootProviderProps<T extends TreeNode> = {\n /*\n Instância do Tree View criada com o hook `useTreeView`.\n /\n value: UseTreeViewReturn<T>;\n};\n\n/\n Props do `TreeView.RootProvider`: a instância da árvore, as opções de\n * estilo e as props do elemento renderizado.\n /\nexport type TreeViewRootProviderProps<T extends TreeNode> = MergeOverride<\n useRender.ComponentProps<'div'>,\n RootProviderProps<T> & TreeViewVariants & TreeViewRenderStrategyContextValue\n>;\n\nconst splitVariantProps = createSplitProps<TreeViewVariants>();\n\n/\n Raiz do Tree View alimentada por uma árvore criada fora dela.\n \n Recebe em `value` o retorno de `useTreeView`, o que permite ler o estado e\n * comandar a árvore de componentes irmãos — botões de expandir tudo,\n * contadores de seleção, virtualização.\n \n @example\n * ```tsx\n * const treeView = useTreeView({ collection });\n \n return (\n * <>\n * <button onClick={() => treeView.expand()}>Expandir tudo</button>\n \n <TreeView.RootProvider value={treeView}>\n * <TreeView.Tree>…</TreeView.Tree>\n * </TreeView.RootProvider>\n * </>\n * );\n * ```\n */\nexport const TreeViewRootProvider = <T extends TreeNode>(\n props: TreeViewRootProviderProps<T>,\n) => {\n const [variantProps, withoutVariantProps] = splitVariantProps(props, [\n 'colorScheme',\n '~~size',\n '~~variant',\n ]);\n\n const {\n value: treeView,\n render,\n className,\n keepMounted = false,\n ...rest\n } = withoutVariantProps;\n\n const zagProps = treeView.getRootProps();\n\n const baseProps = {\n 'data-component': 'TreeView.RootProvider',\n className: mergeTwClassNames(\n ['flex', 'flex-col', 'gap-2', 'w-full'],\n className,\n ),\n };\n\n return (\n <TreeViewContextProvider value={treeView}>\n <TreeViewVariantsContextProvider value={variantProps}>\n <TreeViewRenderStrategyContextProvider value={{ keepMounted }}>\n {useRender({\n render,\n defaultTagName: 'div',\n props: mergeProps(baseProps, zagProps, rest),\n })}\n </TreeViewRenderStrategyContextProvider>\n </TreeViewVariantsContextProvider>\n </TreeViewContextProvider>\n );\n};\n\nTreeViewRootProvider.displayName = 'TreeView.RootProvider';\n"],"mappings":";;;;;;;;AA+BA,MAAM,oBAAoB,iBAAmC;;;;;;;;;;;;;;;;;;;;;;;AAwB7D,MAAa,wBACX,UACG;CACH,MAAM,CAAC,cAAc,uBAAuB,kBAAkB,OAAO~~;EACnE;EACA;EACA;CACF~~,CAAC;CAED,MAAM,EACJ,OAAO,UACP,QACA,WACA,cAAc,OACd,GAAG,SACD;CAEJ,MAAM,WAAW,SAAS,aAAa;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GAAC;GAAQ;GAAY;GAAS;EAAQ,GACtC,SACF;CACF;CAEA,OACE,oBAAC,yBAAD;EAAyB,OAAO;EAC9B,UAAA,oBAAC,iCAAD;GAAiC,OAAO;GACtC,UAAA,oBAAC,uCAAD;IAAuC,OAAO,EAAE,YAAY;IACzD,UAAA,UAAU;KACT;KACA,gBAAgB;KAChB,OAAO,WAAW,WAAW,UAAU,IAAI;IAC7C,CAAC;GACoC,CAAA;EACR,CAAA;CACV,CAAA;AAE7B;AAEA,qBAAqB,cAAc"}
1	+ {"version":3,"file":"tree-view-root-provider.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-root-provider.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport type { TreeNode } from '@zag-js/collection';\nimport { mergeTwClassNames } from '#utils';\nimport type { UseTreeViewReturn } from './use-tree-view';\nimport { TreeViewContextProvider } from './use-tree-view-context';\nimport {\n TreeViewRenderStrategyContextProvider,\n type TreeViewRenderStrategyContextValue,\n} from './use-tree-view-render-strategy-context';\nimport {\n type TreeViewVariants,\n TreeViewVariantsContextProvider,\n} from './use-tree-view-variants-context';\n\ntype RootProviderProps<T extends TreeNode> = {\n /*\n Instância do Tree View criada com o hook `useTreeView`.\n /\n value: UseTreeViewReturn<T>;\n};\n\n/\n Props do `TreeView.RootProvider`: a instância da árvore, as opções de\n * estilo e as props do elemento renderizado.\n /\nexport type TreeViewRootProviderProps<T extends TreeNode> = MergeOverride<\n useRender.ComponentProps<'div'>,\n RootProviderProps<T> & TreeViewVariants & TreeViewRenderStrategyContextValue\n>;\n\nconst splitVariantProps = createSplitProps<TreeViewVariants>();\n\n/\n Raiz do Tree View alimentada por uma árvore criada fora dela.\n \n Recebe em `value` o retorno de `useTreeView`, o que permite ler o estado e\n * comandar a árvore de componentes irmãos — botões de expandir tudo,\n * contadores de seleção, virtualização.\n \n @example\n * ```tsx\n * const treeView = useTreeView({ collection });\n \n return (\n * <>\n * <button onClick={() => treeView.expand()}>Expandir tudo</button>\n \n <TreeView.RootProvider value={treeView}>\n * <TreeView.Tree>…</TreeView.Tree>\n * </TreeView.RootProvider>\n * </>\n * );\n * ```\n */\nexport const TreeViewRootProvider = <T extends TreeNode>(\n props: TreeViewRootProviderProps<T>,\n) => {\n const [variantProps, withoutVariantProps] = splitVariantProps(props, [\n 'colorScheme',\n 'variant',\n ]);\n\n const {\n value: treeView,\n render,\n className,\n keepMounted = false,\n ...rest\n } = withoutVariantProps;\n\n const zagProps = treeView.getRootProps();\n\n const baseProps = {\n 'data-component': 'TreeView.RootProvider',\n className: mergeTwClassNames(\n ['flex', 'flex-col', 'gap-2', 'w-full'],\n className,\n ),\n };\n\n return (\n <TreeViewContextProvider value={treeView}>\n <TreeViewVariantsContextProvider value={variantProps}>\n <TreeViewRenderStrategyContextProvider value={{ keepMounted }}>\n {useRender({\n render,\n defaultTagName: 'div',\n props: mergeProps(baseProps, zagProps, rest),\n })}\n </TreeViewRenderStrategyContextProvider>\n </TreeViewVariantsContextProvider>\n </TreeViewContextProvider>\n );\n};\n\nTreeViewRootProvider.displayName = 'TreeView.RootProvider';\n"],"mappings":";;;;;;;;AA+BA,MAAM,oBAAoB,iBAAmC;;;;;;;;;;;;;;;;;;;;;;;AAwB7D,MAAa,wBACX,UACG;CACH,MAAM,CAAC,cAAc,uBAAuB,kBAAkB,OAAO,CACnE,eACA,SACF,CAAC;CAED,MAAM,EACJ,OAAO,UACP,QACA,WACA,cAAc,OACd,GAAG,SACD;CAEJ,MAAM,WAAW,SAAS,aAAa;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GAAC;GAAQ;GAAY;GAAS;EAAQ,GACtC,SACF;CACF;CAEA,OACE,oBAAC,yBAAD;EAAyB,OAAO;EAC9B,UAAA,oBAAC,iCAAD;GAAiC,OAAO;GACtC,UAAA,oBAAC,uCAAD;IAAuC,OAAO,EAAE,YAAY;IACzD,UAAA,UAAU;KACT;KACA,gBAAgB;KAChB,OAAO,WAAW,WAAW,UAAU,IAAI;IAC7C,CAAC;GACoC,CAAA;EACR,CAAA;CACV,CAAA;AAE7B;AAEA,qBAAqB,cAAc"}

package/dist/components/collections/tree-view/tree-view-root.d.ts CHANGED Viewed

@@ -21,7 +21,7 @@ export type TreeViewRootProps<T extends TreeNode> = MergeOverride<useRender.Comp
  *
  * @example
  * ```tsx
- * <TreeView.Root collection={collection} size="sm" colorScheme="brand">
+ * <TreeView.Root collection={collection} colorScheme="brand">
  *   <TreeView.Label>Arquivos</TreeView.Label>
  *
  *   <TreeView.Tree>

package/dist/components/collections/tree-view/tree-view-root.js CHANGED Viewed

@@ -20,7 +20,7 @@ const splitVariantProps = createSplitProps();
 *
 * @example
 * ```tsx
-* <TreeView.Root collection={collection} size="sm" colorScheme="brand">
+* <TreeView.Root collection={collection} colorScheme="brand">
 *   <TreeView.Label>Arquivos</TreeView.Label>
 *
 *   <TreeView.Tree>
@@ -42,11 +42,7 @@ const splitVariantProps = createSplitProps();
 * ```
 */
 const TreeViewRoot = (props) => {
-	const [variantProps, withoutVariantProps] = splitVariantProps(props, [
-		"colorScheme",
-		"size",
-		"variant"
-	]);
+	const [variantProps, withoutVariantProps] = splitVariantProps(props, ["colorScheme", "variant"]);
 	/** Criado aqui, e não no módulo, porque o tipo depende do genérico `T`. */
 	const [useTreeViewProps, elementProps] = createSplitProps()(withoutVariantProps, ZagTreeView.props);
 	const { render, className, keepMounted = false, ...rest } = elementProps;

package/dist/components/collections/tree-view/tree-view-root.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tree-view-root.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-root.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport type { TreeNode } from '@zag-js/collection';\nimport * as ZagTreeView from '@zag-js/tree-view';\nimport { mergeTwClassNames } from '#utils';\nimport { type UseTreeViewProps, useTreeView } from './use-tree-view';\nimport { TreeViewContextProvider } from './use-tree-view-context';\nimport {\n TreeViewRenderStrategyContextProvider,\n type TreeViewRenderStrategyContextValue,\n} from './use-tree-view-render-strategy-context';\nimport {\n type TreeViewVariants,\n TreeViewVariantsContextProvider,\n} from './use-tree-view-variants-context';\n\n/*\n Props do `TreeView.Root`: as opções da árvore, as opções de estilo e as\n * props do elemento renderizado.\n /\nexport type TreeViewRootProps<T extends TreeNode> = MergeOverride<\n useRender.ComponentProps<'div'>,\n UseTreeViewProps<T> & TreeViewVariants & TreeViewRenderStrategyContextValue\n>;\n\nconst splitVariantProps = createSplitProps<TreeViewVariants>();\n\n/\n Raiz do Tree View.\n \n Cria a árvore a partir da `collection` e disponibiliza estado, opções de\n * estilo e estratégia de renderização para todas as partes aninhadas.\n \n Use o `TreeView.RootProvider` no lugar deste componente quando a árvore\n * precisar ser lida ou comandada de fora da própria subárvore.\n \n @example\n * ```tsx\n * <TreeView.Root collection={collection} ~~size=\"sm\"~~ colorScheme=\"brand\">\n * <TreeView.Label>Arquivos</TreeView.Label>\n \n <TreeView.Tree>\n * <TreeView.NodeRenderer<FileNode>\n * renderNode={({ node, nodeState }) =>\n * nodeState.isBranch ? (\n * <TreeView.BranchControl>\n * <TreeView.BranchText>{node.name}</TreeView.BranchText>\n * </TreeView.BranchControl>\n * ) : (\n * <TreeView.Item>\n * <TreeView.ItemText>{node.name}</TreeView.ItemText>\n * </TreeView.Item>\n * )\n * }\n * />\n * </TreeView.Tree>\n * </TreeView.Root>\n * ```\n /\nexport const TreeViewRoot = <T extends TreeNode>(\n props: TreeViewRootProps<T>,\n) => {\n const [variantProps, withoutVariantProps] = splitVariantProps(props, [\n 'colorScheme',\n '~~size',\n '~~variant',\n ]);\n\n /* Criado aqui, e não no módulo, porque o tipo depende do genérico `T`. */\n const [useTreeViewProps, elementProps] = createSplitProps<\n UseTreeViewProps<T>\n >()(withoutVariantProps, ZagTreeView.props);\n\n const { render, className, keepMounted = false, ...rest } = elementProps;\n\n const treeView = useTreeView(useTreeViewProps);\n\n const zagProps = treeView.getRootProps();\n\n const baseProps = {\n 'data-component': 'TreeView.Root',\n className: mergeTwClassNames(\n ['flex', 'flex-col', 'gap-2', 'w-full'],\n className,\n ),\n };\n\n return (\n <TreeViewContextProvider value={treeView}>\n <TreeViewVariantsContextProvider value={variantProps}>\n <TreeViewRenderStrategyContextProvider value={{ keepMounted }}>\n {useRender({\n render,\n defaultTagName: 'div',\n props: mergeProps(baseProps, zagProps, rest),\n })}\n </TreeViewRenderStrategyContextProvider>\n </TreeViewVariantsContextProvider>\n </TreeViewContextProvider>\n );\n};\n\nTreeViewRoot.displayName = 'TreeView.Root';\n"],"mappings":";;;;;;;;;;AAyBA,MAAM,oBAAoB,iBAAmC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkC7D,MAAa,gBACX,UACG;CACH,MAAM,CAAC,cAAc,uBAAuB,kBAAkB,OAAO~~;EACnE;EACA;EACA;CACF~~,CAAC;;CAGD,MAAM,CAAC,kBAAkB,gBAAgB,iBAEvC,CAAC,CAAC,qBAAqB,YAAY,KAAK;CAE1C,MAAM,EAAE,QAAQ,WAAW,cAAc,OAAO,GAAG,SAAS;CAE5D,MAAM,WAAW,YAAY,gBAAgB;CAE7C,MAAM,WAAW,SAAS,aAAa;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GAAC;GAAQ;GAAY;GAAS;EAAQ,GACtC,SACF;CACF;CAEA,OACE,oBAAC,yBAAD;EAAyB,OAAO;EAC9B,UAAA,oBAAC,iCAAD;GAAiC,OAAO;GACtC,UAAA,oBAAC,uCAAD;IAAuC,OAAO,EAAE,YAAY;IACzD,UAAA,UAAU;KACT;KACA,gBAAgB;KAChB,OAAO,WAAW,WAAW,UAAU,IAAI;IAC7C,CAAC;GACoC,CAAA;EACR,CAAA;CACV,CAAA;AAE7B;AAEA,aAAa,cAAc"}
1	+ {"version":3,"file":"tree-view-root.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-root.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport type { TreeNode } from '@zag-js/collection';\nimport * as ZagTreeView from '@zag-js/tree-view';\nimport { mergeTwClassNames } from '#utils';\nimport { type UseTreeViewProps, useTreeView } from './use-tree-view';\nimport { TreeViewContextProvider } from './use-tree-view-context';\nimport {\n TreeViewRenderStrategyContextProvider,\n type TreeViewRenderStrategyContextValue,\n} from './use-tree-view-render-strategy-context';\nimport {\n type TreeViewVariants,\n TreeViewVariantsContextProvider,\n} from './use-tree-view-variants-context';\n\n/*\n Props do `TreeView.Root`: as opções da árvore, as opções de estilo e as\n * props do elemento renderizado.\n /\nexport type TreeViewRootProps<T extends TreeNode> = MergeOverride<\n useRender.ComponentProps<'div'>,\n UseTreeViewProps<T> & TreeViewVariants & TreeViewRenderStrategyContextValue\n>;\n\nconst splitVariantProps = createSplitProps<TreeViewVariants>();\n\n/\n Raiz do Tree View.\n \n Cria a árvore a partir da `collection` e disponibiliza estado, opções de\n * estilo e estratégia de renderização para todas as partes aninhadas.\n \n Use o `TreeView.RootProvider` no lugar deste componente quando a árvore\n * precisar ser lida ou comandada de fora da própria subárvore.\n \n @example\n * ```tsx\n * <TreeView.Root collection={collection} colorScheme=\"brand\">\n * <TreeView.Label>Arquivos</TreeView.Label>\n \n <TreeView.Tree>\n * <TreeView.NodeRenderer<FileNode>\n * renderNode={({ node, nodeState }) =>\n * nodeState.isBranch ? (\n * <TreeView.BranchControl>\n * <TreeView.BranchText>{node.name}</TreeView.BranchText>\n * </TreeView.BranchControl>\n * ) : (\n * <TreeView.Item>\n * <TreeView.ItemText>{node.name}</TreeView.ItemText>\n * </TreeView.Item>\n * )\n * }\n * />\n * </TreeView.Tree>\n * </TreeView.Root>\n * ```\n /\nexport const TreeViewRoot = <T extends TreeNode>(\n props: TreeViewRootProps<T>,\n) => {\n const [variantProps, withoutVariantProps] = splitVariantProps(props, [\n 'colorScheme',\n 'variant',\n ]);\n\n /* Criado aqui, e não no módulo, porque o tipo depende do genérico `T`. */\n const [useTreeViewProps, elementProps] = createSplitProps<\n UseTreeViewProps<T>\n >()(withoutVariantProps, ZagTreeView.props);\n\n const { render, className, keepMounted = false, ...rest } = elementProps;\n\n const treeView = useTreeView(useTreeViewProps);\n\n const zagProps = treeView.getRootProps();\n\n const baseProps = {\n 'data-component': 'TreeView.Root',\n className: mergeTwClassNames(\n ['flex', 'flex-col', 'gap-2', 'w-full'],\n className,\n ),\n };\n\n return (\n <TreeViewContextProvider value={treeView}>\n <TreeViewVariantsContextProvider value={variantProps}>\n <TreeViewRenderStrategyContextProvider value={{ keepMounted }}>\n {useRender({\n render,\n defaultTagName: 'div',\n props: mergeProps(baseProps, zagProps, rest),\n })}\n </TreeViewRenderStrategyContextProvider>\n </TreeViewVariantsContextProvider>\n </TreeViewContextProvider>\n );\n};\n\nTreeViewRoot.displayName = 'TreeView.Root';\n"],"mappings":";;;;;;;;;;AAyBA,MAAM,oBAAoB,iBAAmC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkC7D,MAAa,gBACX,UACG;CACH,MAAM,CAAC,cAAc,uBAAuB,kBAAkB,OAAO,CACnE,eACA,SACF,CAAC;;CAGD,MAAM,CAAC,kBAAkB,gBAAgB,iBAEvC,CAAC,CAAC,qBAAqB,YAAY,KAAK;CAE1C,MAAM,EAAE,QAAQ,WAAW,cAAc,OAAO,GAAG,SAAS;CAE5D,MAAM,WAAW,YAAY,gBAAgB;CAE7C,MAAM,WAAW,SAAS,aAAa;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GAAC;GAAQ;GAAY;GAAS;EAAQ,GACtC,SACF;CACF;CAEA,OACE,oBAAC,yBAAD;EAAyB,OAAO;EAC9B,UAAA,oBAAC,iCAAD;GAAiC,OAAO;GACtC,UAAA,oBAAC,uCAAD;IAAuC,OAAO,EAAE,YAAY;IACzD,UAAA,UAAU;KACT;KACA,gBAAgB;KAChB,OAAO,WAAW,WAAW,UAAU,IAAI;IAC7C,CAAC;GACoC,CAAA;EACR,CAAA;CACV,CAAA;AAE7B;AAEA,aAAa,cAAc"}

package/dist/components/collections/tree-view/tree-view-tree-variants.d.ts CHANGED Viewed

@@ -2,10 +2,8 @@
 /**
  * O `Tree` declara todas as CSS variables de dimensionamento consumidas pelas
  * partes internas, e é por isso que todo nó renderizado precisa viver dentro
- * dele. O tamanho definido aqui vale para a árvore inteira.
+ * dele. Os valores são fixos e valem para a árvore inteira.
  */
-export declare const treeViewTreeVariants: (props?: ({
-  size?: "xs" | "sm" | "md" | "lg" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const treeViewTreeVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
 //# sourceMappingURL=tree-view-tree-variants.d.ts.map

package/dist/components/collections/tree-view/tree-view-tree-variants.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tree-view-tree-variants.d.ts","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-tree-variants.ts"],"mappings":";;;;;;~~qBAQa~~,uBAAoB~~;;6CA8DhC~~"}
1	+ {"version":3,"file":"tree-view-tree-variants.d.ts","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-tree-variants.ts"],"mappings":";;;;;;qBAOa,uBAAoB,iDAAA"}

package/dist/components/collections/tree-view/tree-view-tree-variants.js CHANGED Viewed

@@ -1,12 +1,16 @@
-import { treeViewDefaultVariants } from "./use-tree-view-variants-context.js";
 import { cva } from "class-variance-authority";
 //#region src/components/collections/tree-view/tree-view-tree-variants.ts
 /**
 * O `Tree` declara todas as CSS variables de dimensionamento consumidas pelas
 * partes internas, e é por isso que todo nó renderizado precisa viver dentro
-* dele. O tamanho definido aqui vale para a árvore inteira.
+* dele. Os valores são fixos e valem para a árvore inteira.
 */
 const treeViewTreeVariants = cva([
+	"[--tree-view-indent-size:--spacing(4)]",
+	"[--tree-view-icon-size:--spacing(4)]",
+	"[--tree-view-padding-inline:--spacing(2.5)]",
+	"[--tree-view-padding-block:--spacing(1.5)]",
+	"text-sm",
 	"[--tree-view-item-gap:--spacing(2)]",
 	"[--tree-view-vertical-spacing:--spacing(0.5)]",
 	"[--tree-view-indentation:calc(var(--tree-view-indent-size)+var(--tree-view-icon-size)*0.5)]",
@@ -16,39 +20,7 @@ const treeViewTreeVariants = cva([
 	"space-y-(--tree-view-vertical-spacing)",
 	"[&_svg]:size-(--tree-view-icon-size)",
 	"[&_svg]:shrink-0"
-], {
-	variants: { size: {
-		xs: [
-			"[--tree-view-indent-size:--spacing(4)]",
-			"[--tree-view-icon-size:--spacing(3)]",
-			"[--tree-view-padding-inline:--spacing(2)]",
-			"[--tree-view-padding-block:--spacing(1)]",
-			"text-xs"
-		],
-		sm: [
-			"[--tree-view-indent-size:--spacing(4)]",
-			"[--tree-view-icon-size:--spacing(3)]",
-			"[--tree-view-padding-inline:--spacing(3)]",
-			"[--tree-view-padding-block:--spacing(1)]",
-			"text-sm"
-		],
-		md: [
-			"[--tree-view-indent-size:--spacing(4)]",
-			"[--tree-view-icon-size:--spacing(4)]",
-			"[--tree-view-padding-inline:--spacing(3)]",
-			"[--tree-view-padding-block:--spacing(1.5)]",
-			"text-sm"
-		],
-		lg: [
-			"[--tree-view-indent-size:--spacing(5)]",
-			"[--tree-view-icon-size:--spacing(5)]",
-			"[--tree-view-padding-inline:--spacing(4)]",
-			"[--tree-view-padding-block:--spacing(2)]",
-			"text-base"
-		]
-	} },
-	defaultVariants: { size: treeViewDefaultVariants.size }
-});
+]);
 //#endregion
 export { treeViewTreeVariants };

package/dist/components/collections/tree-view/tree-view-tree-variants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tree-view-tree-variants.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-tree-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\~~nimport { treeViewDefaultVariants } from './use-tree-view-variants-context';\~~n\n/*\n O `Tree` declara todas as CSS variables de dimensionamento consumidas pelas\n * partes internas, e é por isso que todo nó renderizado precisa viver dentro\n * dele. O ~~tamanho~~ ~~definido~~ ~~aqui~~ ~~vale~~ para a árvore inteira.\n /\nexport const treeViewTreeVariants = cva(\n [\n '[--tree-view-item-gap:--spacing(2)]', // Espaço entre ícone, checkbox e texto\n '[--tree-view-vertical-spacing:--spacing(0.5)]', // Espaço vertical entre nós\n\n // Recuo efetivo por nível. Soma metade do ícone ao recuo base para que o\n // texto de um filho alinhe com o texto do pai, e não com o indicador.\n '[--tree-view-indentation:calc(var(--tree-view-indent-size)+var(--tree-view-icon-size)0.5)]',\n\n 'flex',\n 'flex-col',\n\n 'font-medium',\n\n 'space-y-(--tree-view-vertical-spacing)',\n\n // Todo ícone da árvore herda o tamanho do ~~nível escolhido~~, sem precisar de\n // classe em cada ponto de uso.\n '[&_svg]:size-(--tree-view-icon-size)',\n '[&_svg]:shrink-0',\n ]~~,\n {\n variants: {\n size: {\n xs: [\n '[--tree-view-indent-size:--spacing(4~~)]',\n '[--tree-view-icon-size:--spacing(3)]',\n '[--tree-view-padding-inline:--spacing(2)]',\n '[--tree-view-padding-block:--spacing(1)]',\n\n 'text-xs',\n ],\n sm: [\n '[--tree-view-indent-size:--spacing(4)]',\n '[--tree-view-icon-size:--spacing(3)]',\n '[--tree-view-padding-inline:--spacing(3)]',\n '[--tree-view-padding-block:--spacing(1)]',\n\n 'text-sm',\n ],\n md: [\n '[--tree-view-indent-size:--spacing(4)]',\n '[--tree-view-icon-size:--spacing(4)]',\n '[--tree-view-padding-inline:--spacing(3)]',\n '[--tree-view-padding-block:--spacing(1.5)]',\n\n 'text-sm',\n ],\n lg: [\n '[--tree-view-indent-size:--spacing(5)]',\n '[--tree-view-icon-size:--spacing(5)]',\n '[--tree-view-padding-inline:--spacing(4)]',\n '[--tree-view-padding-block:--spacing(2)]',\n\n 'text-base',\n ],\n },\n },\n defaultVariants: {\n size: treeViewDefaultVariants.size,\n },\n },\n);\n"],"mappings":"~~;;;;;;;;AAQA~~,MAAa,uBAAuB,~~IAClC~~;~~CACE~~;CACA;~~CAIA~~;~~CAEA;~~CACA;CAEA;CAEA;~~CAIA;~~CACA;~~AACF,GACA~~;~~CACE,UAAU,EACR,MAAM~~;~~EACJ,IAAI~~;~~GACF~~;~~GACA~~;~~GACA~~;~~GACA;GAEA;EACF;EACA,IAAI;GACF;GACA;GACA;GACA;GAEA;EACF;EACA,IAAI;GACF;GACA;GACA;GACA;GAEA;EACF;EACA,IAAI;GACF;GACA;GACA;GACA;GAEA;EACF;CACF,EACF;~~CACA~~,iBAAiB,EACf,MAAM,wBAAwB,KAChC~~;AACF,~~CACF~~"}
1	+ {"version":3,"file":"tree-view-tree-variants.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-tree-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\n/*\n O `Tree` declara todas as CSS variables de dimensionamento consumidas pelas\n * partes internas, e é por isso que todo nó renderizado precisa viver dentro\n * dele. Os valores são fixos e valem para a árvore inteira.\n /\nexport const treeViewTreeVariants = cva([\n '[--tree-view-indent-size:--spacing(4)]',\n '[--tree-view-icon-size:--spacing(4)]',\n '[--tree-view-padding-inline:--spacing(2.5)]',\n '[--tree-view-padding-block:--spacing(1.5)]',\n\n 'text-sm',\n\n '[--tree-view-item-gap:--spacing(2)]', // Espaço entre ícone, checkbox e texto\n '[--tree-view-vertical-spacing:--spacing(0.5)]', // Espaço vertical entre nós\n\n // Recuo efetivo por nível. Soma metade do ícone ao recuo base para que o\n // texto de um filho alinhe com o texto do pai, e não com o indicador.\n '[--tree-view-indentation:calc(var(--tree-view-indent-size)+var(--tree-view-icon-size)0.5)]',\n\n 'flex',\n 'flex-col',\n\n 'font-medium',\n\n 'space-y-(--tree-view-vertical-spacing)',\n\n // Todo ícone da árvore herda o tamanho da árvore, sem precisar de\n // classe em cada ponto de uso.\n '[&_svg]:size-(--tree-view-icon-size)',\n '[&_svg]:shrink-0',\n]);\n"],"mappings":";;;;;;;AAOA,MAAa,uBAAuB,IAAI;CACtC;CACA;CACA;CACA;CAEA;CAEA;CACA;CAIA;CAEA;CACA;CAEA;CAEA;CAIA;CACA;AACF,CAAC"}

package/dist/components/collections/tree-view/tree-view-tree.d.ts CHANGED Viewed

@@ -4,9 +4,8 @@ export type TreeViewTreeProps = useRender.ComponentProps<'div'>;
 /**
  * Lista de nós da árvore, e o elemento que concentra a navegação por teclado.
  *
- * É aqui que o tamanho escolhido na raiz vira CSS variables — recuo, tamanho
- * de ícone e espaçamentos —, então todo nó precisa ser renderizado dentro
- * dele.
+ * É aqui que o tamanho fixo da árvore vira CSS variables — recuo, tamanho de
+ * ícone e espaçamentos —, então todo nó precisa ser renderizado dentro dele.
  */
 export declare const TreeViewTree: {
   (props: TreeViewTreeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/collections/tree-view/tree-view-tree.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tree-view-tree.d.ts","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-tree.tsx"],"mappings":";;~~YAMY~~,oBAAoB,UAAU~~;;;;;;;;qBAS7B~~;GAAuB,OAAA,oCAAiB,+CAAA"}
1	+ {"version":3,"file":"tree-view-tree.d.ts","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-tree.tsx"],"mappings":";;YAKY,oBAAoB,UAAU;;;;;;;qBAQ7B;GAAuB,OAAA,oCAAiB,+CAAA"}

package/dist/components/collections/tree-view/tree-view-tree.js CHANGED Viewed

@@ -1,24 +1,20 @@
 import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
 import { useTreeViewContext } from "./use-tree-view-context.js";
-import { useTreeViewVariantsContext } from "./use-tree-view-variants-context.js";
 import { treeViewTreeVariants } from "./tree-view-tree-variants.js";
 import { mergeProps, useRender } from "@base-ui/react";
 //#region src/components/collections/tree-view/tree-view-tree.tsx
 /**
 * Lista de nós da árvore, e o elemento que concentra a navegação por teclado.
 *
-* É aqui que o tamanho escolhido na raiz vira CSS variables — recuo, tamanho
-* de ícone e espaçamentos —, então todo nó precisa ser renderizado dentro
-* dele.
+* É aqui que o tamanho fixo da árvore vira CSS variables — recuo, tamanho de
+* ícone e espaçamentos —, então todo nó precisa ser renderizado dentro dele.
 */
 const TreeViewTree = (props) => {
 	const { render, className, ...rest } = props;
-	const treeView = useTreeViewContext();
-	const { size } = useTreeViewVariantsContext();
-	const zagProps = treeView.getTreeProps();
+	const zagProps = useTreeViewContext().getTreeProps();
 	const baseProps = {
 		"data-component": "TreeView.Tree",
-		className: mergeTwClassNames(treeViewTreeVariants({ size }), className)
+		className: mergeTwClassNames(treeViewTreeVariants(), className)
 	};
 	return useRender({
 		render,

package/dist/components/collections/tree-view/tree-view-tree.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tree-view-tree.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-tree.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\nimport { treeViewTreeVariants } from './tree-view-tree-variants';\nimport { useTreeViewContext } from './use-tree-view-context';\~~nimport { useTreeViewVariantsContext } from './use-tree-view-variants-context';\~~n\nexport type TreeViewTreeProps = useRender.ComponentProps<'div'>;\n\n/*\n Lista de nós da árvore, e o elemento que concentra a navegação por teclado.\n \n É aqui que o tamanho ~~escolhido~~ na ~~raiz~~ vira CSS variables — recuo, tamanho\n * de ícone e espaçamentos —, então todo nó precisa ser renderizado dentro\n * dele.\n */\nexport const TreeViewTree = (props: TreeViewTreeProps) => {\n const { render, className, ...rest } = props;\n\n const treeView = useTreeViewContext();\n ~~const { size } = useTreeViewVariantsContext();\n~~\n const zagProps = treeView.getTreeProps();\n\n const baseProps = {\n 'data-component': 'TreeView.Tree',\n className: mergeTwClassNames(treeViewTreeVariants(~~{ size }~~), className),\n };\n\n return useRender({\n render,\n defaultTagName: 'div',\n props: mergeProps(baseProps, zagProps, rest),\n });\n};\n\nTreeViewTree.displayName = 'TreeView.Tree';\n"],"mappings":"~~;;;;;;;;;;;;;AAeA~~,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;~~CAEvC~~,MAAM,~~WAAW~~,~~mBAAmB;CACpC~~,~~MAAM~~,~~EAAE~~,~~SAAS,2BAA2B;CAE5C,MAAM,WAAW,SAAS,~~aAAa;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,qBAAqB,~~EAAE,KAAK,CAAC,~~GAAG,SAAS;~~CACxE~~;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU,IAAI;CAC7C,CAAC;AACH;AAEA,aAAa,cAAc"}
1	+ {"version":3,"file":"tree-view-tree.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-tree.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\nimport { treeViewTreeVariants } from './tree-view-tree-variants';\nimport { useTreeViewContext } from './use-tree-view-context';\n\nexport type TreeViewTreeProps = useRender.ComponentProps<'div'>;\n\n/*\n Lista de nós da árvore, e o elemento que concentra a navegação por teclado.\n \n É aqui que o tamanho fixo da árvore vira CSS variables — recuo, tamanho de\n * ícone e espaçamentos —, então todo nó precisa ser renderizado dentro dele.\n */\nexport const TreeViewTree = (props: TreeViewTreeProps) => {\n const { render, className, ...rest } = props;\n\n const treeView = useTreeViewContext();\n\n const zagProps = treeView.getTreeProps();\n\n const baseProps = {\n 'data-component': 'TreeView.Tree',\n className: mergeTwClassNames(treeViewTreeVariants(), className),\n };\n\n return useRender({\n render,\n defaultTagName: 'div',\n props: mergeProps(baseProps, zagProps, rest),\n });\n};\n\nTreeViewTree.displayName = 'TreeView.Tree';\n"],"mappings":";;;;;;;;;;;AAaA,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAIvC,MAAM,WAFW,mBAEO,CAAC,CAAC,aAAa;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,qBAAqB,GAAG,SAAS;CAChE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU,IAAI;CAC7C,CAAC;AACH;AAEA,aAAa,cAAc"}