@lucasbernardosn/react-ui 0.3.0 → 0.5.0

package/dist/components/collections/select/select-separator.d.ts

@@ -6,7 +6,7 @@ export type SelectSeparatorState = Select.Separator.State;
  * Linha entre itens ou grupos.
  *
  * Origem do separador das listas em popup: o `Menu.Separator` e o `Autocomplete.Separator` copiam
- * estas classes (tabela no README de `collections`).
+ * estas classes.
  */
 export declare const SelectSeparator: {
   (props: SelectSeparatorProps): import("react").JSX.Element;

package/dist/components/collections/select/select-separator.js

@@ -6,7 +6,7 @@ import { Select } from "@base-ui/react/select";
 * Linha entre itens ou grupos.
 *
 * Origem do separador das listas em popup: o `Menu.Separator` e o `Autocomplete.Separator` copiam
-* estas classes (tabela no README de `collections`).
+* estas classes.
 */
 const SelectSeparator = (props) => {
 	const { className, ...rest } = props;

package/dist/components/collections/select/select-separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-separator.js","names":["BaseSelect"],"sources":["../../../../src/components/collections/select/select-separator.tsx"],"sourcesContent":["import { Select as BaseSelect } from '@base-ui/react/select';\nimport { mergeStateClassNames } from '#utils';\n\nexport type SelectSeparatorProps = BaseSelect.Separator.Props;\n\nexport type SelectSeparatorState = BaseSelect.Separator.State;\n\n/**\n * Linha entre itens ou grupos.\n *\n * Origem do separador das listas em popup: o `Menu.Separator` e o `Autocomplete.Separator` copiam\n * estas classes (tabela no README de `collections`).\n */\nexport const SelectSeparator = (props: SelectSeparatorProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseSelect.Separator\n      data-component=\"Select.Separator\"\n      className={mergeStateClassNames(\n        [\n          'h-px',\n\n          'my-1',\n          'mx-2',\n\n          'bg-gray-6',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nSelectSeparator.displayName = 'Select.Separator';\n"],"mappings":";;;;;;;;;;AAaA,MAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAW,WAAZ;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GAEA;GACA;GAEA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,gBAAgB,cAAc"}
+{"version":3,"file":"select-separator.js","names":["BaseSelect"],"sources":["../../../../src/components/collections/select/select-separator.tsx"],"sourcesContent":["import { Select as BaseSelect } from '@base-ui/react/select';\nimport { mergeStateClassNames } from '#utils';\n\nexport type SelectSeparatorProps = BaseSelect.Separator.Props;\n\nexport type SelectSeparatorState = BaseSelect.Separator.State;\n\n/**\n * Linha entre itens ou grupos.\n *\n * Origem do separador das listas em popup: o `Menu.Separator` e o `Autocomplete.Separator` copiam\n * estas classes.\n */\nexport const SelectSeparator = (props: SelectSeparatorProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseSelect.Separator\n      data-component=\"Select.Separator\"\n      className={mergeStateClassNames(\n        [\n          'h-px',\n\n          'my-1',\n          'mx-2',\n\n          'bg-gray-6',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nSelectSeparator.displayName = 'Select.Separator';\n"],"mappings":";;;;;;;;;;AAaA,MAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAW,WAAZ;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GAEA;GACA;GAEA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,gBAAgB,cAAc"}

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

@@ -1,7 +1,7 @@
 //#region src/components/collections/select/select-trigger-variants.d.ts
 /**
- * Cópia de `inputVariants`, a origem do visual dos campos (tabela no README de `fields`): o anel de
- * foco e o inválido funcionam do mesmo jeito, explicados lá. As diferenças:
+ * Cópia de `inputVariants`, a origem do visual dos campos: o anel de foco e o inválido funcionam
+ * do mesmo jeito, explicados lá. As diferenças:
  * - é um botão: sem `appearance-none`, placeholder e texto de 16px em tela de toque (não abre
  *   teclado);
  * - `inline-flex` com o valor e o ícone nas pontas, `gap` igual ao padding lateral, e altura mínima

package/dist/components/collections/select/select-trigger-variants.js

@@ -2,8 +2,8 @@ import { selectDefaultVariants } from "./use-select-context.js";
 import { cva } from "class-variance-authority";
 //#region src/components/collections/select/select-trigger-variants.ts
 /**
-* Cópia de `inputVariants`, a origem do visual dos campos (tabela no README de `fields`): o anel de
-* foco e o inválido funcionam do mesmo jeito, explicados lá. As diferenças:
+* Cópia de `inputVariants`, a origem do visual dos campos: o anel de foco e o inválido funcionam
+* do mesmo jeito, explicados lá. As diferenças:
 * - é um botão: sem `appearance-none`, placeholder e texto de 16px em tela de toque (não abre
 *   teclado);
 * - `inline-flex` com o valor e o ícone nas pontas, `gap` igual ao padding lateral, e altura mínima
@@ -45,16 +45,16 @@ const selectTriggerVariants = cva([
 	"data-disabled:opacity-50",
 	"data-disabled:cursor-not-allowed",
 	"data-invalid:border-red-9",
-	"data-invalid:[--select-focus-color:var(--color-red-9)]",
+	"data-invalid:[--select-focus-color:var(--red-9)]",
 	"aria-invalid:border-red-9",
-	"aria-invalid:[--select-focus-color:var(--color-red-9)]"
+	"aria-invalid:[--select-focus-color:var(--red-9)]"
 ], {
 	variants: {
 		variant: {
 			outline: [
 				"bg-white/90",
 				"dark:bg-black/90",
-				"border-gray-alpha-7",
+				"border-gray-7",
 				"hover:not-data-disabled:bg-gray-2",
 				"data-popup-open:bg-gray-2",
 				"data-pressed:bg-gray-2"

package/dist/components/collections/select/select-trigger-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-trigger-variants.js","names":[],"sources":["../../../../src/components/collections/select/select-trigger-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { selectDefaultVariants } from './use-select-context';\n\n/**\n * Cópia de `inputVariants`, a origem do visual dos campos (tabela no README de `fields`): o anel de\n * foco e o inválido funcionam do mesmo jeito, explicados lá. As diferenças:\n * - é um botão: sem `appearance-none`, placeholder e texto de 16px em tela de toque (não abre\n *   teclado);\n * - `inline-flex` com o valor e o ícone nas pontas, `gap` igual ao padding lateral, e altura mínima\n *   em vez de fixa, para crescer com um valor longo;\n * - hover, clique e aberto num tom mais escuro do fundo.\n */\nexport const selectTriggerVariants = cva(\n  [\n    'relative',\n    'w-full',\n\n    'inline-flex',\n    'items-center',\n    'justify-between',\n    'align-middle',\n\n    'min-w-0',\n    'max-w-full',\n\n    'outline-none',\n    'select-none',\n\n    'text-start',\n    'font-normal', // Sem isto, herda o peso do `<label>` em volta\n    'text-gray-12',\n\n    'border',\n    'rounded-md',\n    'corner-squircle',\n\n    'overflow-hidden',\n\n    '[--select-focus-color:var(--color-black)]',\n    'dark:[--select-focus-color:var(--color-white)]',\n\n    'focus-visible:outline-1',\n    'focus-visible:outline-solid',\n    'focus-visible:-outline-offset-2', // Offset = borda + anel: o campo não cresce no foco\n    'focus-visible:outline-(--select-focus-color)',\n    'focus-visible:border-(--select-focus-color)',\n\n    'data-focused:outline-1',\n    'data-focused:outline-solid',\n    'data-focused:-outline-offset-2',\n    'data-focused:outline-(--select-focus-color)',\n    'data-focused:border-(--select-focus-color)',\n\n    'disabled:opacity-50',\n    'disabled:cursor-not-allowed',\n\n    'data-disabled:opacity-50',\n    'data-disabled:cursor-not-allowed',\n\n    'data-invalid:border-red-9',\n    'data-invalid:[--select-focus-color:var(--color-red-9)]',\n    'aria-invalid:border-red-9',\n    'aria-invalid:[--select-focus-color:var(--color-red-9)]',\n  ],\n  {\n    variants: {\n      // Um tom só para hover, clique e aberto: o Base UI mantém `data-pressed` enquanto o popup está\n      // aberto, e um tom diferente para o clique piscava entre apertar e soltar.\n      variant: {\n        outline: [\n          'bg-white/90',\n          'dark:bg-black/90',\n\n          'border-gray-alpha-7',\n\n          'hover:not-data-disabled:bg-gray-2',\n          'data-popup-open:bg-gray-2',\n          'data-pressed:bg-gray-2',\n        ],\n        subtle: [\n          'bg-gray-4',\n\n          'border-transparent',\n\n          'hover:not-data-disabled:bg-gray-5',\n          'data-popup-open:bg-gray-5',\n          'data-pressed:bg-gray-5',\n        ],\n      },\n      size: {\n        '2xs': [\n          'min-h-7',\n\n          'px-2',\n          'gap-2',\n\n          'text-xs',\n        ],\n        xs: [\n          'min-h-8',\n\n          'px-2',\n          'gap-2',\n\n          'text-xs',\n        ],\n        sm: [\n          'min-h-9',\n\n          'px-2.5',\n          'gap-2.5',\n\n          'text-sm',\n        ],\n        md: [\n          'min-h-10',\n\n          'px-3',\n          'gap-3',\n\n          'text-sm',\n        ],\n        lg: [\n          'min-h-11',\n\n          'px-4',\n          'gap-4',\n\n          'text-base',\n        ],\n        xl: [\n          'min-h-12',\n\n          'px-4.5',\n          'gap-4.5',\n\n          'text-base',\n        ],\n        '2xl': [\n          'min-h-16',\n\n          'px-5',\n          'gap-5',\n\n          'text-lg',\n        ],\n      },\n    },\n    defaultVariants: {\n      size: selectDefaultVariants.size,\n      variant: selectDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;;;;;;;;;;;AAYA,MAAa,wBAAwB,IACnC;CACE;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CAEA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EAGR,SAAS;GACP,SAAS;IACP;IACA;IAEA;IAEA;IACA;IACA;GACF;GACA,QAAQ;IACN;IAEA;IAEA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,OAAO;IACL;IAEA;IACA;IAEA;GACF;GACA,IAAI;IACF;IAEA;IACA;IAEA;GACF;GACA,IAAI;IACF;IAEA;IACA;IAEA;GACF;GACA,IAAI;IACF;IAEA;IACA;IAEA;GACF;GACA,IAAI;IACF;IAEA;IACA;IAEA;GACF;GACA,IAAI;IACF;IAEA;IACA;IAEA;GACF;GACA,OAAO;IACL;IAEA;IACA;IAEA;GACF;EACF;CACF;CACA,iBAAiB;EACf,MAAM,sBAAsB;EAC5B,SAAS,sBAAsB;CACjC;AACF,CACF"}
+{"version":3,"file":"select-trigger-variants.js","names":[],"sources":["../../../../src/components/collections/select/select-trigger-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { selectDefaultVariants } from './use-select-context';\n\n/**\n * Cópia de `inputVariants`, a origem do visual dos campos: o anel de foco e o inválido funcionam\n * do mesmo jeito, explicados lá. As diferenças:\n * - é um botão: sem `appearance-none`, placeholder e texto de 16px em tela de toque (não abre\n *   teclado);\n * - `inline-flex` com o valor e o ícone nas pontas, `gap` igual ao padding lateral, e altura mínima\n *   em vez de fixa, para crescer com um valor longo;\n * - hover, clique e aberto num tom mais escuro do fundo.\n */\nexport const selectTriggerVariants = cva(\n  [\n    'relative',\n    'w-full',\n\n    'inline-flex',\n    'items-center',\n    'justify-between',\n    'align-middle',\n\n    'min-w-0',\n    'max-w-full',\n\n    'outline-none',\n    'select-none',\n\n    'text-start',\n    'font-normal', // Sem isto, herda o peso do `<label>` em volta\n    'text-gray-12',\n\n    'border',\n    'rounded-md',\n    'corner-squircle',\n\n    'overflow-hidden',\n\n    '[--select-focus-color:var(--color-black)]',\n    'dark:[--select-focus-color:var(--color-white)]',\n\n    'focus-visible:outline-1',\n    'focus-visible:outline-solid',\n    'focus-visible:-outline-offset-2', // Offset = borda + anel: o campo não cresce no foco\n    'focus-visible:outline-(--select-focus-color)',\n    'focus-visible:border-(--select-focus-color)',\n\n    'data-focused:outline-1',\n    'data-focused:outline-solid',\n    'data-focused:-outline-offset-2',\n    'data-focused:outline-(--select-focus-color)',\n    'data-focused:border-(--select-focus-color)',\n\n    'disabled:opacity-50',\n    'disabled:cursor-not-allowed',\n\n    'data-disabled:opacity-50',\n    'data-disabled:cursor-not-allowed',\n\n    'data-invalid:border-red-9',\n    'data-invalid:[--select-focus-color:var(--red-9)]',\n    'aria-invalid:border-red-9',\n    'aria-invalid:[--select-focus-color:var(--red-9)]',\n  ],\n  {\n    variants: {\n      // Um tom só para hover, clique e aberto: o Base UI mantém `data-pressed` enquanto o popup está\n      // aberto, e um tom diferente para o clique piscava entre apertar e soltar.\n      variant: {\n        outline: [\n          'bg-white/90',\n          'dark:bg-black/90',\n\n          'border-gray-7',\n\n          'hover:not-data-disabled:bg-gray-2',\n          'data-popup-open:bg-gray-2',\n          'data-pressed:bg-gray-2',\n        ],\n        subtle: [\n          'bg-gray-4',\n\n          'border-transparent',\n\n          'hover:not-data-disabled:bg-gray-5',\n          'data-popup-open:bg-gray-5',\n          'data-pressed:bg-gray-5',\n        ],\n      },\n      size: {\n        '2xs': [\n          'min-h-7',\n\n          'px-2',\n          'gap-2',\n\n          'text-xs',\n        ],\n        xs: [\n          'min-h-8',\n\n          'px-2',\n          'gap-2',\n\n          'text-xs',\n        ],\n        sm: [\n          'min-h-9',\n\n          'px-2.5',\n          'gap-2.5',\n\n          'text-sm',\n        ],\n        md: [\n          'min-h-10',\n\n          'px-3',\n          'gap-3',\n\n          'text-sm',\n        ],\n        lg: [\n          'min-h-11',\n\n          'px-4',\n          'gap-4',\n\n          'text-base',\n        ],\n        xl: [\n          'min-h-12',\n\n          'px-4.5',\n          'gap-4.5',\n\n          'text-base',\n        ],\n        '2xl': [\n          'min-h-16',\n\n          'px-5',\n          'gap-5',\n\n          'text-lg',\n        ],\n      },\n    },\n    defaultVariants: {\n      size: selectDefaultVariants.size,\n      variant: selectDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;;;;;;;;;;;AAYA,MAAa,wBAAwB,IACnC;CACE;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CAEA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EAGR,SAAS;GACP,SAAS;IACP;IACA;IAEA;IAEA;IACA;IACA;GACF;GACA,QAAQ;IACN;IAEA;IAEA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,OAAO;IACL;IAEA;IACA;IAEA;GACF;GACA,IAAI;IACF;IAEA;IACA;IAEA;GACF;GACA,IAAI;IACF;IAEA;IACA;IAEA;GACF;GACA,IAAI;IACF;IAEA;IACA;IAEA;GACF;GACA,IAAI;IACF;IAEA;IACA;IAEA;GACF;GACA,IAAI;IACF;IAEA;IACA;IAEA;GACF;GACA,OAAO;IACL;IAEA;IACA;IAEA;GACF;EACF;CACF;CACA,iBAAiB;EACf,MAAM,sBAAsB;EAC5B,SAAS,sBAAsB;CACjC;AACF,CACF"}

package/dist/components/collections/tree-view/tree-view-node-checkbox.js

@@ -24,7 +24,7 @@ const TreeViewNodeCheckbox = (props) => {
 			"shrink-0",
 			"size-(--tree-view-icon-size)",
 			"border",
-			"border-gray-alpha-7",
+			"border-gray-7",
 			"rounded-sm",
 			"corner-squircle",
 			"bg-transparent",

package/dist/components/collections/tree-view/tree-view-node-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-view-node-checkbox.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-node-checkbox.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 TreeViewNodeCheckboxProps = useRender.ComponentProps<'span'>;\n\n/**\n * Caixa de marcação de um nó.\n *\n * Reflete três estados: marcado, desmarcado e indeterminado — este último\n * quando só parte dos descendentes está marcada. Marcar um branch propaga a\n * marcação para os filhos.\n */\nexport const TreeViewNodeCheckbox = (props: TreeViewNodeCheckboxProps) => {\n  const { render, className, ...rest } = props;\n\n  const treeView = useTreeViewContext();\n  const nodeProps = useTreeViewNodePropsContext();\n\n  const zagProps = treeView.getNodeCheckboxProps(nodeProps);\n\n  const baseProps = {\n    'data-component': 'TreeView.NodeCheckbox',\n    className: mergeTwClassNames(\n      [\n        'inline-flex',\n        'items-center',\n        'justify-center',\n        'shrink-0',\n\n        'size-(--tree-view-icon-size)',\n\n        'border',\n        'border-gray-alpha-7',\n        'rounded-sm',\n        'corner-squircle',\n\n        'bg-transparent',\n\n        'cursor-pointer',\n\n        'not-motion-reduced:transition-colors',\n        'not-motion-reduced:duration-150',\n\n        // A árvore dimensiona todo ícone com `--tree-view-icon-size`, que aqui é o\n        // tamanho da própria caixa. O ícone de dentro precisa ser menor.\n        '[&_svg]:size-[calc(var(--tree-view-icon-size)*0.75)]',\n\n        // As cores do estado marcado vêm do esquema declarado na linha do nó,\n        // da qual o checkbox é filho.\n        'data-[state=checked]:bg-(--tree-view-solid-bg)',\n        'data-[state=checked]:border-(--tree-view-solid-bg)',\n        'data-[state=checked]:text-(--tree-view-solid-fg)',\n\n        'data-[state=indeterminate]:bg-(--tree-view-solid-bg)',\n        'data-[state=indeterminate]:border-(--tree-view-solid-bg)',\n        'data-[state=indeterminate]:text-(--tree-view-solid-fg)',\n\n        'data-disabled:cursor-not-allowed',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, zagProps, rest),\n  });\n};\n\nTreeViewNodeCheckbox.displayName = 'TreeView.NodeCheckbox';\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,wBAAwB,UAAqC;CACxE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,WAAW,mBAAmB;CACpC,MAAM,YAAY,4BAA4B;CAE9C,MAAM,WAAW,SAAS,qBAAqB,SAAS;CAExD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GAEA;GACA;GACA;GACA;GAEA;GAEA;GAEA;GACA;GAIA;GAIA;GACA;GACA;GAEA;GACA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU,IAAI;CAC7C,CAAC;AACH;AAEA,qBAAqB,cAAc"}
+{"version":3,"file":"tree-view-node-checkbox.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-node-checkbox.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 TreeViewNodeCheckboxProps = useRender.ComponentProps<'span'>;\n\n/**\n * Caixa de marcação de um nó.\n *\n * Reflete três estados: marcado, desmarcado e indeterminado — este último\n * quando só parte dos descendentes está marcada. Marcar um branch propaga a\n * marcação para os filhos.\n */\nexport const TreeViewNodeCheckbox = (props: TreeViewNodeCheckboxProps) => {\n  const { render, className, ...rest } = props;\n\n  const treeView = useTreeViewContext();\n  const nodeProps = useTreeViewNodePropsContext();\n\n  const zagProps = treeView.getNodeCheckboxProps(nodeProps);\n\n  const baseProps = {\n    'data-component': 'TreeView.NodeCheckbox',\n    className: mergeTwClassNames(\n      [\n        'inline-flex',\n        'items-center',\n        'justify-center',\n        'shrink-0',\n\n        'size-(--tree-view-icon-size)',\n\n        'border',\n        'border-gray-7',\n        'rounded-sm',\n        'corner-squircle',\n\n        'bg-transparent',\n\n        'cursor-pointer',\n\n        'not-motion-reduced:transition-colors',\n        'not-motion-reduced:duration-150',\n\n        // A árvore dimensiona todo ícone com `--tree-view-icon-size`, que aqui é o\n        // tamanho da própria caixa. O ícone de dentro precisa ser menor.\n        '[&_svg]:size-[calc(var(--tree-view-icon-size)*0.75)]',\n\n        // As cores do estado marcado vêm do esquema declarado na linha do nó,\n        // da qual o checkbox é filho.\n        'data-[state=checked]:bg-(--tree-view-solid-bg)',\n        'data-[state=checked]:border-(--tree-view-solid-bg)',\n        'data-[state=checked]:text-(--tree-view-solid-fg)',\n\n        'data-[state=indeterminate]:bg-(--tree-view-solid-bg)',\n        'data-[state=indeterminate]:border-(--tree-view-solid-bg)',\n        'data-[state=indeterminate]:text-(--tree-view-solid-fg)',\n\n        'data-disabled:cursor-not-allowed',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, zagProps, rest),\n  });\n};\n\nTreeViewNodeCheckbox.displayName = 'TreeView.NodeCheckbox';\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,wBAAwB,UAAqC;CACxE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,WAAW,mBAAmB;CACpC,MAAM,YAAY,4BAA4B;CAE9C,MAAM,WAAW,SAAS,qBAAqB,SAAS;CAExD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GAEA;GACA;GACA;GACA;GAEA;GAEA;GAEA;GACA;GAIA;GAIA;GACA;GACA;GAEA;GACA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU,IAAI;CAC7C,CAAC;AACH;AAEA,qBAAqB,cAAc"}

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

@@ -9,7 +9,7 @@
  */
 export declare const treeViewNodeVariants: (props?: ({
   variant?: "solid" | "subtle" | null | undefined;
-  colorScheme?: "gray" | "brand" | null | undefined;
+  colorScheme?: "gray" | "accent" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=tree-view-node-variants.d.ts.map

package/dist/components/collections/tree-view/tree-view-node-variants.js

@@ -43,17 +43,17 @@ const treeViewNodeVariants = cva([
 		},
 		colorScheme: {
 			gray: [
-				"[--tree-view-selected-bg:var(--color-gray-4)]",
-				"[--tree-view-selected-fg:var(--color-gray-12)]",
+				"[--tree-view-selected-bg:var(--gray-4)]",
+				"[--tree-view-selected-fg:var(--gray-12)]",
 				"[--tree-view-solid-bg:var(--color-black)]",
 				"dark:[--tree-view-solid-bg:var(--color-white)]",
 				"[--tree-view-solid-fg:var(--color-white)]",
 				"dark:[--tree-view-solid-fg:var(--color-black)]"
 			],
-			brand: [
-				"[--tree-view-selected-bg:var(--color-brand-4)]",
-				"[--tree-view-selected-fg:var(--color-brand-12)]",
-				"[--tree-view-solid-bg:var(--color-brand-9)]",
+			accent: [
+				"[--tree-view-selected-bg:var(--accent-4)]",
+				"[--tree-view-selected-fg:var(--accent-12)]",
+				"[--tree-view-solid-bg:var(--accent-9)]",
 				"[--tree-view-solid-fg:var(--color-white)]"
 			]
 		}

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

@@ -1 +1 @@
-{"version":3,"file":"tree-view-node-variants.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-node-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { treeViewDefaultVariants } from './use-tree-view-variants-context';\n\n/**\n * Compartilhado pelas duas linhas interativas do Tree View: `TreeView.Item` (nó folha) e\n * `TreeView.BranchControl` (nó pai). As duas têm a mesma caixa — indentação, padding, hover,\n * foco e seleção — e só diferem no conteúdo.\n *\n * A cor só declara `--tree-view-selected-*` e `--tree-view-solid-*`, e a `variant` decide qual\n * par pinta a linha selecionada.\n */\nexport const treeViewNodeVariants = cva(\n  [\n    // `--depth` é a profundidade do nó, publicada como variável inline na\n    // própria linha e contada a partir de 1.\n    '[--tree-view-depth:calc(var(--depth)-1)]',\n    '[--tree-view-offset:calc(var(--tree-view-padding-inline)+var(--tree-view-indentation)*var(--tree-view-depth))]',\n\n    '[--focus-ring-width:2px]',\n    // Offset negativo porque o conteúdo de um branch recorta o que passa das\n    // suas bordas para animar a altura: com offset zero o anel é desenhado\n    // exatamente na borda da linha e some nos nós aninhados.\n    '[--focus-ring-offset:-2px]',\n\n    'flex',\n    'items-center',\n    'gap-(--tree-view-item-gap)',\n\n    'relative',\n\n    'w-full',\n\n    'ps-(--tree-view-offset)', // Recuo proporcional à profundidade do nó\n    'pe-(--tree-view-padding-inline)',\n    'py-(--tree-view-padding-block)',\n\n    'border-none',\n    'rounded-md',\n    'corner-squircle',\n\n    'bg-transparent',\n\n    'text-gray-12',\n    'text-start',\n\n    'select-none',\n    'cursor-pointer',\n\n    // O fundo só muda no hover de uma linha ainda não selecionada: navegar\n    // pelo teclado marca a linha apenas com o anel, sem parecer selecionada\n    // antes da confirmação, e uma linha selecionada mantém a cor exata do\n    // esquema.\n    'not-data-selected:not-data-disabled:hover:bg-gray-3',\n\n    'focus-ring-inside',\n    // O anel herda a cor do texto, que já é obrigado a contrastar com o fundo\n    // em qualquer variante e esquema — inclusive no `solid`, de fundo saturado.\n    'ring-current',\n\n    'data-disabled:opacity-50',\n    'data-disabled:cursor-not-allowed',\n  ],\n  {\n    variants: {\n      variant: {\n        subtle: [\n          'data-selected:bg-(--tree-view-selected-bg)',\n          'data-selected:text-(--tree-view-selected-fg)',\n        ],\n        solid: [\n          'data-selected:bg-(--tree-view-solid-bg)',\n          'data-selected:text-(--tree-view-solid-fg)',\n        ],\n      },\n      colorScheme: {\n        gray: [\n          '[--tree-view-selected-bg:var(--color-gray-4)]',\n          '[--tree-view-selected-fg:var(--color-gray-12)]',\n\n          '[--tree-view-solid-bg:var(--color-black)]',\n          'dark:[--tree-view-solid-bg:var(--color-white)]',\n          '[--tree-view-solid-fg:var(--color-white)]',\n          'dark:[--tree-view-solid-fg:var(--color-black)]',\n        ],\n        brand: [\n          '[--tree-view-selected-bg:var(--color-brand-4)]',\n          '[--tree-view-selected-fg:var(--color-brand-12)]',\n\n          '[--tree-view-solid-bg:var(--color-brand-9)]',\n          '[--tree-view-solid-fg:var(--color-white)]',\n        ],\n      },\n    },\n    defaultVariants: {\n      colorScheme: treeViewDefaultVariants.colorScheme,\n      variant: treeViewDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,uBAAuB,IAClC;CAGE;CACA;CAEA;CAIA;CAEA;CACA;CACA;CAEA;CAEA;CAEA;CACA;CACA;CAEA;CACA;CACA;CAEA;CAEA;CACA;CAEA;CACA;CAMA;CAEA;CAGA;CAEA;CACA;AACF,GACA;CACE,UAAU;EACR,SAAS;GACP,QAAQ,CACN,8CACA,8CACF;GACA,OAAO,CACL,2CACA,2CACF;EACF;EACA,aAAa;GACX,MAAM;IACJ;IACA;IAEA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IAEA;IACA;GACF;EACF;CACF;CACA,iBAAiB;EACf,aAAa,wBAAwB;EACrC,SAAS,wBAAwB;CACnC;AACF,CACF"}
+{"version":3,"file":"tree-view-node-variants.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-node-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { treeViewDefaultVariants } from './use-tree-view-variants-context';\n\n/**\n * Compartilhado pelas duas linhas interativas do Tree View: `TreeView.Item` (nó folha) e\n * `TreeView.BranchControl` (nó pai). As duas têm a mesma caixa — indentação, padding, hover,\n * foco e seleção — e só diferem no conteúdo.\n *\n * A cor só declara `--tree-view-selected-*` e `--tree-view-solid-*`, e a `variant` decide qual\n * par pinta a linha selecionada.\n */\nexport const treeViewNodeVariants = cva(\n  [\n    // `--depth` é a profundidade do nó, publicada como variável inline na\n    // própria linha e contada a partir de 1.\n    '[--tree-view-depth:calc(var(--depth)-1)]',\n    '[--tree-view-offset:calc(var(--tree-view-padding-inline)+var(--tree-view-indentation)*var(--tree-view-depth))]',\n\n    '[--focus-ring-width:2px]',\n    // Offset negativo porque o conteúdo de um branch recorta o que passa das\n    // suas bordas para animar a altura: com offset zero o anel é desenhado\n    // exatamente na borda da linha e some nos nós aninhados.\n    '[--focus-ring-offset:-2px]',\n\n    'flex',\n    'items-center',\n    'gap-(--tree-view-item-gap)',\n\n    'relative',\n\n    'w-full',\n\n    'ps-(--tree-view-offset)', // Recuo proporcional à profundidade do nó\n    'pe-(--tree-view-padding-inline)',\n    'py-(--tree-view-padding-block)',\n\n    'border-none',\n    'rounded-md',\n    'corner-squircle',\n\n    'bg-transparent',\n\n    'text-gray-12',\n    'text-start',\n\n    'select-none',\n    'cursor-pointer',\n\n    // O fundo só muda no hover de uma linha ainda não selecionada: navegar\n    // pelo teclado marca a linha apenas com o anel, sem parecer selecionada\n    // antes da confirmação, e uma linha selecionada mantém a cor exata do\n    // esquema.\n    'not-data-selected:not-data-disabled:hover:bg-gray-3',\n\n    'focus-ring-inside',\n    // O anel herda a cor do texto, que já é obrigado a contrastar com o fundo\n    // em qualquer variante e esquema — inclusive no `solid`, de fundo saturado.\n    'ring-current',\n\n    'data-disabled:opacity-50',\n    'data-disabled:cursor-not-allowed',\n  ],\n  {\n    variants: {\n      variant: {\n        subtle: [\n          'data-selected:bg-(--tree-view-selected-bg)',\n          'data-selected:text-(--tree-view-selected-fg)',\n        ],\n        solid: [\n          'data-selected:bg-(--tree-view-solid-bg)',\n          'data-selected:text-(--tree-view-solid-fg)',\n        ],\n      },\n      colorScheme: {\n        gray: [\n          '[--tree-view-selected-bg:var(--gray-4)]',\n          '[--tree-view-selected-fg:var(--gray-12)]',\n\n          '[--tree-view-solid-bg:var(--color-black)]',\n          'dark:[--tree-view-solid-bg:var(--color-white)]',\n          '[--tree-view-solid-fg:var(--color-white)]',\n          'dark:[--tree-view-solid-fg:var(--color-black)]',\n        ],\n        accent: [\n          '[--tree-view-selected-bg:var(--accent-4)]',\n          '[--tree-view-selected-fg:var(--accent-12)]',\n\n          '[--tree-view-solid-bg:var(--accent-9)]',\n          '[--tree-view-solid-fg:var(--color-white)]',\n        ],\n      },\n    },\n    defaultVariants: {\n      colorScheme: treeViewDefaultVariants.colorScheme,\n      variant: treeViewDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,uBAAuB,IAClC;CAGE;CACA;CAEA;CAIA;CAEA;CACA;CACA;CAEA;CAEA;CAEA;CACA;CACA;CAEA;CACA;CACA;CAEA;CAEA;CACA;CAEA;CACA;CAMA;CAEA;CAGA;CAEA;CACA;AACF,GACA;CACE,UAAU;EACR,SAAS;GACP,QAAQ,CACN,8CACA,8CACF;GACA,OAAO,CACL,2CACA,2CACF;EACF;EACA,aAAa;GACX,MAAM;IACJ;IACA;IAEA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IAEA;IACA;GACF;EACF;CACF;CACA,iBAAiB;EACf,aAAa,wBAAwB;EACrC,SAAS,wBAAwB;CACnC;AACF,CACF"}

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

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

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

@@ -20,7 +20,7 @@ const splitVariantProps = createSplitProps();
 *
 * @example
 * ```tsx
-* <TreeView.Root collection={collection} colorScheme="brand">
+* <TreeView.Root collection={collection} colorScheme="accent">
 *   <TreeView.Label>Arquivos</TreeView.Label>
 *
 *   <TreeView.Tree>

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

@@ -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 {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-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":";;;;;;;;;;AA4BA,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"}
+{"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 {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-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=\"accent\">\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":";;;;;;;;;;AA4BA,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/disclosure/collapsible/collapsible-panel-variants.d.ts

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

@@ -1,4 +1,9 @@
 //#region src/components/disclosure/tabs/tabs-indicator-variants.d.ts
+/**
+ * A `variant` `enclosed` é a origem do `SegmentedControl.Indicator`, que copia o fundo
+ * `--tabs-surface-bg`, a sombra, o raio e a transição `ease-move`. Uma mudança no indicador
+ * `enclosed` vale para o `SegmentedControl.Indicator` na mesma rodada.
+ */
 export declare const tabsIndicatorVariants: (props?: ({
   variant?: "line" | "subtle" | "outline" | "plain" | "enclosed" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/disclosure/tabs/tabs-indicator-variants.js

@@ -1,6 +1,11 @@
 import { tabsDefaultVariants } from "./use-tabs-context.js";
 import { cva } from "class-variance-authority";
 //#region src/components/disclosure/tabs/tabs-indicator-variants.ts
+/**
+* A `variant` `enclosed` é a origem do `SegmentedControl.Indicator`, que copia o fundo
+* `--tabs-surface-bg`, a sombra, o raio e a transição `ease-move`. Uma mudança no indicador
+* `enclosed` vale para o `SegmentedControl.Indicator` na mesma rodada.
+*/
 const tabsIndicatorVariants = cva([
 	"absolute",
 	"top-0",
@@ -32,12 +37,12 @@ const tabsIndicatorVariants = cva([
 		enclosed: [
 			"rounded-(--tabs-trigger-radius)",
 			"corner-squircle",
-			"bg-(--tabs-surface-bg)",
+			"bg-(--tabs-enclosed-bg)",
 			"shadow-xs"
 		],
 		outline: [
 			"corner-squircle",
-			"border-gray-alpha-6",
+			"border-gray-6",
 			"bg-(--tabs-surface-bg)",
 			"data-[orientation=horizontal]:rounded-t-(--tabs-trigger-radius)",
 			"data-[orientation=horizontal]:border-x",

package/dist/components/disclosure/tabs/tabs-indicator-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-indicator-variants.js","names":[],"sources":["../../../../src/components/disclosure/tabs/tabs-indicator-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { tabsDefaultVariants } from './use-tabs-context';\n\nexport const tabsIndicatorVariants = cva(\n  [\n    'absolute',\n    'top-0',\n    'left-0',\n    '-z-1',\n\n    'h-(--active-tab-height)',\n    'w-(--active-tab-width)',\n    'translate-x-(--active-tab-left)',\n    'translate-y-(--active-tab-top)',\n\n    'not-motion-reduced:transition-[translate,width,height]',\n    'not-motion-reduced:ease-move',\n    'not-motion-reduced:duration-150',\n  ],\n  {\n    variants: {\n      variant: {\n        // Faixa colada na borda da List, como a da tab.\n        line: [\n          'bg-(--tabs-accent)',\n\n          'data-[orientation=horizontal]:top-auto',\n          'data-[orientation=horizontal]:-bottom-px',\n          'data-[orientation=horizontal]:h-0.5',\n\n          'data-[orientation=vertical]:left-auto',\n          'data-[orientation=vertical]:-inset-e-px',\n          'data-[orientation=vertical]:w-0.5',\n        ],\n        subtle: [\n          'rounded-(--tabs-trigger-radius)',\n          'corner-squircle',\n\n          'bg-(--tabs-subtle-bg)',\n        ],\n        enclosed: [\n          'rounded-(--tabs-trigger-radius)',\n          'corner-squircle',\n\n          'bg-(--tabs-surface-bg)',\n          'shadow-xs',\n        ],\n        // Tem a caixa da tab, que avança 1px sobre a borda da List: o fundo cobre esse trecho.\n        outline: [\n          'corner-squircle',\n\n          'border-gray-alpha-6',\n          'bg-(--tabs-surface-bg)',\n\n          'data-[orientation=horizontal]:rounded-t-(--tabs-trigger-radius)',\n          'data-[orientation=horizontal]:border-x',\n          'data-[orientation=horizontal]:border-t',\n\n          'data-[orientation=vertical]:rounded-s-(--tabs-trigger-radius)',\n          'data-[orientation=vertical]:border-y',\n          'data-[orientation=vertical]:border-s',\n        ],\n        plain: [\n          'rounded-(--tabs-trigger-radius)',\n          'corner-squircle',\n\n          'bg-(--tabs-surface-bg)',\n          'shadow-xs',\n        ],\n      },\n    },\n    defaultVariants: {\n      variant: tabsDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;;AAGA,MAAa,wBAAwB,IACnC;CACE;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,SAAS;EAEP,MAAM;GACJ;GAEA;GACA;GACA;GAEA;GACA;GACA;EACF;EACA,QAAQ;GACN;GACA;GAEA;EACF;EACA,UAAU;GACR;GACA;GAEA;GACA;EACF;EAEA,SAAS;GACP;GAEA;GACA;GAEA;GACA;GACA;GAEA;GACA;GACA;EACF;EACA,OAAO;GACL;GACA;GAEA;GACA;EACF;CACF,EACF;CACA,iBAAiB,EACf,SAAS,oBAAoB,QAC/B;AACF,CACF"}
+{"version":3,"file":"tabs-indicator-variants.js","names":[],"sources":["../../../../src/components/disclosure/tabs/tabs-indicator-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { tabsDefaultVariants } from './use-tabs-context';\n\n/**\n * A `variant` `enclosed` é a origem do `SegmentedControl.Indicator`, que copia o fundo\n * `--tabs-surface-bg`, a sombra, o raio e a transição `ease-move`. Uma mudança no indicador\n * `enclosed` vale para o `SegmentedControl.Indicator` na mesma rodada.\n */\nexport const tabsIndicatorVariants = cva(\n  [\n    'absolute',\n    'top-0',\n    'left-0',\n    '-z-1',\n\n    'h-(--active-tab-height)',\n    'w-(--active-tab-width)',\n    'translate-x-(--active-tab-left)',\n    'translate-y-(--active-tab-top)',\n\n    'not-motion-reduced:transition-[translate,width,height]',\n    'not-motion-reduced:ease-move',\n    'not-motion-reduced:duration-150',\n  ],\n  {\n    variants: {\n      variant: {\n        // Faixa colada na borda da List, como a da tab.\n        line: [\n          'bg-(--tabs-accent)',\n\n          'data-[orientation=horizontal]:top-auto',\n          'data-[orientation=horizontal]:-bottom-px',\n          'data-[orientation=horizontal]:h-0.5',\n\n          'data-[orientation=vertical]:left-auto',\n          'data-[orientation=vertical]:-inset-e-px',\n          'data-[orientation=vertical]:w-0.5',\n        ],\n        subtle: [\n          'rounded-(--tabs-trigger-radius)',\n          'corner-squircle',\n\n          'bg-(--tabs-subtle-bg)',\n        ],\n        enclosed: [\n          'rounded-(--tabs-trigger-radius)',\n          'corner-squircle',\n\n          'bg-(--tabs-enclosed-bg)',\n          'shadow-xs',\n        ],\n        // Tem a caixa da tab, que avança 1px sobre a borda da List: o fundo cobre esse trecho.\n        outline: [\n          'corner-squircle',\n\n          'border-gray-6',\n          'bg-(--tabs-surface-bg)',\n\n          'data-[orientation=horizontal]:rounded-t-(--tabs-trigger-radius)',\n          'data-[orientation=horizontal]:border-x',\n          'data-[orientation=horizontal]:border-t',\n\n          'data-[orientation=vertical]:rounded-s-(--tabs-trigger-radius)',\n          'data-[orientation=vertical]:border-y',\n          'data-[orientation=vertical]:border-s',\n        ],\n        plain: [\n          'rounded-(--tabs-trigger-radius)',\n          'corner-squircle',\n\n          'bg-(--tabs-surface-bg)',\n          'shadow-xs',\n        ],\n      },\n    },\n    defaultVariants: {\n      variant: tabsDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;;;;;;;AAQA,MAAa,wBAAwB,IACnC;CACE;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,SAAS;EAEP,MAAM;GACJ;GAEA;GACA;GACA;GAEA;GACA;GACA;EACF;EACA,QAAQ;GACN;GACA;GAEA;EACF;EACA,UAAU;GACR;GACA;GAEA;GACA;EACF;EAEA,SAAS;GACP;GAEA;GACA;GAEA;GACA;GACA;GAEA;GACA;GACA;EACF;EACA,OAAO;GACL;GACA;GAEA;GACA;EACF;CACF,EACF;CACA,iBAAiB,EACf,SAAS,oBAAoB,QAC/B;AACF,CACF"}

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

@@ -1,4 +1,9 @@
 //#region src/components/disclosure/tabs/tabs-list-variants.d.ts
+/**
+ * A `variant` `enclosed` é a origem do visual do `SegmentedControl` (a trilha em `SegmentedControl.Root`,
+ * o item e o indicador): ele copia as classes dela, cada parte com as diferenças no próprio JSDoc.
+ * Uma mudança na trilha `enclosed` vale para o `SegmentedControl.Root` na mesma rodada.
+ */
 export declare const tabsListVariants: (props?: ({
   fitted?: boolean | null | undefined;
   justify?: "center" | "start" | "end" | null | undefined;

package/dist/components/disclosure/tabs/tabs-list-variants.js

@@ -1,6 +1,11 @@
 import { tabsDefaultVariants } from "./use-tabs-context.js";
 import { cva } from "class-variance-authority";
 //#region src/components/disclosure/tabs/tabs-list-variants.ts
+/**
+* A `variant` `enclosed` é a origem do visual do `SegmentedControl` (a trilha em `SegmentedControl.Root`,
+* o item e o indicador): ele copia as classes dela, cada parte com as diferenças no próprio JSDoc.
+* Uma mudança na trilha `enclosed` vale para o `SegmentedControl.Root` na mesma rodada.
+*/
 const tabsListVariants = cva([
 	"group/tabs-list",
 	"relative",
@@ -23,7 +28,7 @@ const tabsListVariants = cva([
 		},
 		variant: {
 			line: [
-				"border-gray-alpha-6",
+				"border-gray-6",
 				"data-[orientation=horizontal]:border-b",
 				"data-[orientation=vertical]:border-e"
 			],
@@ -35,7 +40,7 @@ const tabsListVariants = cva([
 				"p-1"
 			],
 			outline: [
-				"border-gray-alpha-6",
+				"border-gray-6",
 				"data-[orientation=horizontal]:border-b",
 				"data-[orientation=vertical]:border-e"
 			],

package/dist/components/disclosure/tabs/tabs-list-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-list-variants.js","names":[],"sources":["../../../../src/components/disclosure/tabs/tabs-list-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { tabsDefaultVariants } from './use-tabs-context';\n\nexport const tabsListVariants = cva(\n  [\n    // `group` lido pelo Tab: com um Indicator montado, a tab ativa deixa de pintar o estado.\n    'group/tabs-list',\n\n    'relative',\n    'isolate',\n\n    'inline-flex',\n\n    'min-h-(--tabs-height)',\n\n    'data-[orientation=horizontal]:items-center',\n\n    'data-[orientation=vertical]:flex-col',\n    'data-[orientation=vertical]:items-stretch',\n  ],\n  {\n    variants: {\n      fitted: {\n        true: ['flex', 'data-[orientation=horizontal]:w-full'],\n        false: [],\n      },\n      justify: {\n        start: ['justify-start'],\n        center: ['justify-center'],\n        end: ['justify-end'],\n      },\n      variant: {\n        line: [\n          'border-gray-alpha-6',\n          'data-[orientation=horizontal]:border-b',\n          'data-[orientation=vertical]:border-e',\n        ],\n        subtle: [],\n        enclosed: [\n          'rounded-md',\n          'corner-squircle',\n\n          'bg-gray-3',\n          'p-1',\n        ],\n        outline: [\n          'border-gray-alpha-6',\n          'data-[orientation=horizontal]:border-b',\n          'data-[orientation=vertical]:border-e',\n        ],\n        plain: [],\n      },\n    },\n    defaultVariants: {\n      fitted: tabsDefaultVariants.fitted,\n      justify: tabsDefaultVariants.justify,\n      variant: tabsDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;;AAGA,MAAa,mBAAmB,IAC9B;CAEE;CAEA;CACA;CAEA;CAEA;CAEA;CAEA;CACA;AACF,GACA;CACE,UAAU;EACR,QAAQ;GACN,MAAM,CAAC,QAAQ,sCAAsC;GACrD,OAAO,CAAC;EACV;EACA,SAAS;GACP,OAAO,CAAC,eAAe;GACvB,QAAQ,CAAC,gBAAgB;GACzB,KAAK,CAAC,aAAa;EACrB;EACA,SAAS;GACP,MAAM;IACJ;IACA;IACA;GACF;GACA,QAAQ,CAAC;GACT,UAAU;IACR;IACA;IAEA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;GACA,OAAO,CAAC;EACV;CACF;CACA,iBAAiB;EACf,QAAQ,oBAAoB;EAC5B,SAAS,oBAAoB;EAC7B,SAAS,oBAAoB;CAC/B;AACF,CACF"}
+{"version":3,"file":"tabs-list-variants.js","names":[],"sources":["../../../../src/components/disclosure/tabs/tabs-list-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { tabsDefaultVariants } from './use-tabs-context';\n\n/**\n * A `variant` `enclosed` é a origem do visual do `SegmentedControl` (a trilha em `SegmentedControl.Root`,\n * o item e o indicador): ele copia as classes dela, cada parte com as diferenças no próprio JSDoc.\n * Uma mudança na trilha `enclosed` vale para o `SegmentedControl.Root` na mesma rodada.\n */\nexport const tabsListVariants = cva(\n  [\n    // `group` lido pelo Tab: com um Indicator montado, a tab ativa deixa de pintar o estado.\n    'group/tabs-list',\n\n    'relative',\n    'isolate',\n\n    'inline-flex',\n\n    'min-h-(--tabs-height)',\n\n    'data-[orientation=horizontal]:items-center',\n\n    'data-[orientation=vertical]:flex-col',\n    'data-[orientation=vertical]:items-stretch',\n  ],\n  {\n    variants: {\n      fitted: {\n        true: ['flex', 'data-[orientation=horizontal]:w-full'],\n        false: [],\n      },\n      justify: {\n        start: ['justify-start'],\n        center: ['justify-center'],\n        end: ['justify-end'],\n      },\n      variant: {\n        line: [\n          'border-gray-6',\n          'data-[orientation=horizontal]:border-b',\n          'data-[orientation=vertical]:border-e',\n        ],\n        subtle: [],\n        enclosed: [\n          'rounded-md',\n          'corner-squircle',\n\n          'bg-gray-3',\n          'p-1',\n        ],\n        outline: [\n          'border-gray-6',\n          'data-[orientation=horizontal]:border-b',\n          'data-[orientation=vertical]:border-e',\n        ],\n        plain: [],\n      },\n    },\n    defaultVariants: {\n      fitted: tabsDefaultVariants.fitted,\n      justify: tabsDefaultVariants.justify,\n      variant: tabsDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;;;;;;;AAQA,MAAa,mBAAmB,IAC9B;CAEE;CAEA;CACA;CAEA;CAEA;CAEA;CAEA;CACA;AACF,GACA;CACE,UAAU;EACR,QAAQ;GACN,MAAM,CAAC,QAAQ,sCAAsC;GACrD,OAAO,CAAC;EACV;EACA,SAAS;GACP,OAAO,CAAC,eAAe;GACvB,QAAQ,CAAC,gBAAgB;GACzB,KAAK,CAAC,aAAa;EACrB;EACA,SAAS;GACP,MAAM;IACJ;IACA;IACA;GACF;GACA,QAAQ,CAAC;GACT,UAAU;IACR;IACA;IAEA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;GACA,OAAO,CAAC;EACV;CACF;CACA,iBAAiB;EACf,QAAQ,oBAAoB;EAC5B,SAAS,oBAAoB;EAC7B,SAAS,oBAAoB;CAC/B;AACF,CACF"}

package/dist/components/disclosure/tabs/tabs-root-variants.d.ts

@@ -4,7 +4,7 @@
  * Indicator e Panel leem, e cada parte decide onde usá-las.
  */
 export declare const tabsRootVariants: (props?: ({
-  colorScheme?: "gray" | "brand" | null | undefined;
+  colorScheme?: "gray" | "accent" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=tabs-root-variants.d.ts.map

package/dist/components/disclosure/tabs/tabs-root-variants.js

@@ -11,18 +11,20 @@ const tabsRootVariants = cva([
 	"[--tabs-height:--spacing(10)]",
 	"[--tabs-content-padding:--spacing(4)]",
 	"[--tabs-trigger-radius:var(--radius-md)]",
-	"[--tabs-surface-bg:var(--color-gray-1)]"
+	"[--tabs-surface-bg:var(--gray-1)]",
+	"[--tabs-enclosed-bg:var(--color-white)]",
+	"dark:[--tabs-enclosed-bg:var(--gray-5)]"
 ], {
 	variants: { colorScheme: {
 		gray: [
-			"[--tabs-accent:var(--color-gray-9)]",
-			"[--tabs-accent-fg:var(--color-gray-12)]",
-			"[--tabs-subtle-bg:var(--color-gray-3)]"
+			"[--tabs-accent:var(--gray-9)]",
+			"[--tabs-accent-fg:var(--gray-12)]",
+			"[--tabs-subtle-bg:var(--gray-3)]"
 		],
-		brand: [
-			"[--tabs-accent:var(--color-brand-9)]",
-			"[--tabs-accent-fg:var(--color-brand-11)]",
-			"[--tabs-subtle-bg:var(--color-brand-3)]"
+		accent: [
+			"[--tabs-accent:var(--accent-9)]",
+			"[--tabs-accent-fg:var(--accent-11)]",
+			"[--tabs-subtle-bg:var(--accent-3)]"
 		]
 	} },
 	defaultVariants: { colorScheme: tabsDefaultVariants.colorScheme }

package/dist/components/disclosure/tabs/tabs-root-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-root-variants.js","names":[],"sources":["../../../../src/components/disclosure/tabs/tabs-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { tabsDefaultVariants } from './use-tabs-context';\n\n/**\n * O Root só declara as variáveis `--tabs-*` (cor, altura, respiro, raio e fundo) que List, Tab,\n * Indicator e Panel leem, e cada parte decide onde usá-las.\n */\nexport const tabsRootVariants = cva(\n  [\n    'relative',\n\n    'data-[orientation=vertical]:flex',\n\n    // Altura da lista e das tabs, e respiro fixo do painel, lido por Panel.\n    '[--tabs-height:--spacing(10)]',\n    '[--tabs-content-padding:--spacing(4)]',\n\n    '[--tabs-trigger-radius:var(--radius-md)]',\n    // Fundo da tab ativa no `enclosed` e no `outline`, e do Indicator: a cor da superfície onde\n    // o Tabs está. Dentro de um Card, troque pela cor dele.\n    '[--tabs-surface-bg:var(--color-gray-1)]',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: [\n          '[--tabs-accent:var(--color-gray-9)]',\n          '[--tabs-accent-fg:var(--color-gray-12)]',\n          '[--tabs-subtle-bg:var(--color-gray-3)]',\n        ],\n        brand: [\n          '[--tabs-accent:var(--color-brand-9)]',\n          '[--tabs-accent-fg:var(--color-brand-11)]',\n          '[--tabs-subtle-bg:var(--color-brand-3)]',\n        ],\n      },\n    },\n    defaultVariants: {\n      colorScheme: tabsDefaultVariants.colorScheme,\n    },\n  },\n);\n"],"mappings":";;;;;;;AAOA,MAAa,mBAAmB,IAC9B;CACE;CAEA;CAGA;CACA;CAEA;CAGA;AACF,GACA;CACE,UAAU,EACR,aAAa;EACX,MAAM;GACJ;GACA;GACA;EACF;EACA,OAAO;GACL;GACA;GACA;EACF;CACF,EACF;CACA,iBAAiB,EACf,aAAa,oBAAoB,YACnC;AACF,CACF"}
+{"version":3,"file":"tabs-root-variants.js","names":[],"sources":["../../../../src/components/disclosure/tabs/tabs-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { tabsDefaultVariants } from './use-tabs-context';\n\n/**\n * O Root só declara as variáveis `--tabs-*` (cor, altura, respiro, raio e fundo) que List, Tab,\n * Indicator e Panel leem, e cada parte decide onde usá-las.\n */\nexport const tabsRootVariants = cva(\n  [\n    'relative',\n\n    'data-[orientation=vertical]:flex',\n\n    // Altura da lista e das tabs, e respiro fixo do painel, lido por Panel.\n    '[--tabs-height:--spacing(10)]',\n    '[--tabs-content-padding:--spacing(4)]',\n\n    '[--tabs-trigger-radius:var(--radius-md)]',\n    // Fundo da tab ativa no `outline` e do Indicator: a cor da superfície onde o Tabs está.\n    // Dentro de um Card, troque pela cor dele.\n    '[--tabs-surface-bg:var(--gray-1)]',\n    // Fundo da tab ativa e do Indicator no `enclosed`: mais claro que a lista `gray-3` nos dois\n    // temas. Com a cor da superfície, o ativo afundaria na lista no tema escuro.\n    '[--tabs-enclosed-bg:var(--color-white)]',\n    'dark:[--tabs-enclosed-bg:var(--gray-5)]',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: [\n          '[--tabs-accent:var(--gray-9)]',\n          '[--tabs-accent-fg:var(--gray-12)]',\n          '[--tabs-subtle-bg:var(--gray-3)]',\n        ],\n        accent: [\n          '[--tabs-accent:var(--accent-9)]',\n          '[--tabs-accent-fg:var(--accent-11)]',\n          '[--tabs-subtle-bg:var(--accent-3)]',\n        ],\n      },\n    },\n    defaultVariants: {\n      colorScheme: tabsDefaultVariants.colorScheme,\n    },\n  },\n);\n"],"mappings":";;;;;;;AAOA,MAAa,mBAAmB,IAC9B;CACE;CAEA;CAGA;CACA;CAEA;CAGA;CAGA;CACA;AACF,GACA;CACE,UAAU,EACR,aAAa;EACX,MAAM;GACJ;GACA;GACA;EACF;EACA,QAAQ;GACN;GACA;GACA;EACF;CACF,EACF;CACA,iBAAiB,EACf,aAAa,oBAAoB,YACnC;AACF,CACF"}

package/dist/components/disclosure/tabs/tabs-root.d.ts

@@ -15,7 +15,7 @@ export type TabsRootOrientation = Tabs.Root.Orientation;
  *
  * O fundo da tab ativa no `enclosed` e no `outline`, e o do `Indicator`, vem de
  * `--tabs-surface-bg` (`gray-1`). Sobre outra superfície, troque pela cor dela:
- * `className="[--tabs-surface-bg:var(--color-gray-2)]"`.
+ * `className="[--tabs-surface-bg:var(--gray-2)]"`.
  *
  * @example
  * ```tsx

package/dist/components/disclosure/tabs/tabs-root.js

@@ -14,7 +14,7 @@ const splitVariantProps = createSplitProps();
 *
 * O fundo da tab ativa no `enclosed` e no `outline`, e o do `Indicator`, vem de
 * `--tabs-surface-bg` (`gray-1`). Sobre outra superfície, troque pela cor dela:
-* `className="[--tabs-surface-bg:var(--color-gray-2)]"`.
+* `className="[--tabs-surface-bg:var(--gray-2)]"`.
 *
 * @example
 * ```tsx

package/dist/components/disclosure/tabs/tabs-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-root.js","names":["BaseTabs"],"sources":["../../../../src/components/disclosure/tabs/tabs-root.tsx"],"sourcesContent":["import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { mergeStateClassNames } from '#utils';\nimport { tabsRootVariants } from './tabs-root-variants';\nimport { TabsContextProvider, type TabsVariants } from './use-tabs-context';\n\nexport type TabsRootProps = MergeOverride<BaseTabs.Root.Props, TabsVariants>;\n\nexport type TabsRootState = BaseTabs.Root.State;\n\nexport type TabsRootChangeEventDetails = BaseTabs.Root.ChangeEventDetails;\n\nexport type TabsRootChangeEventReason = BaseTabs.Root.ChangeEventReason;\n\nexport type TabsRootOrientation = BaseTabs.Root.Orientation;\n\nconst splitVariantProps = createSplitProps<TabsVariants>();\n\n/**\n * Agrupa a lista de tabs e os painéis. `variant`, `fitted` e `justify` seguem\n * por contexto para `List`, `Tab` e `Indicator`; `colorScheme` vira variáveis\n * CSS (`--tabs-*`) lidas por todas as partes. Com\n * `orientation=\"vertical\"`, a lista fica ao lado dos painéis.\n *\n * O fundo da tab ativa no `enclosed` e no `outline`, e o do `Indicator`, vem de\n * `--tabs-surface-bg` (`gray-1`). Sobre outra superfície, troque pela cor dela:\n * `className=\"[--tabs-surface-bg:var(--color-gray-2)]\"`.\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"conta\">\n *   <Tabs.List>\n *     <Tabs.Tab value=\"conta\">Conta</Tabs.Tab>\n *     <Tabs.Tab value=\"senha\">Senha</Tabs.Tab>\n *     <Tabs.Indicator />\n *   </Tabs.List>\n *   <Tabs.Panel value=\"conta\">…</Tabs.Panel>\n *   <Tabs.Panel value=\"senha\">…</Tabs.Panel>\n * </Tabs.Root>\n * ```\n */\nexport const TabsRoot = (props: TabsRootProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n    'fitted',\n    'justify',\n    'variant',\n  ]);\n\n  const { className, ...rest } = elementProps;\n\n  return (\n    <TabsContextProvider value={variantProps}>\n      <BaseTabs.Root\n        data-component=\"Tabs.Root\"\n        className={mergeStateClassNames(\n          tabsRootVariants(variantProps),\n          className,\n        )}\n        {...rest}\n      />\n    </TabsContextProvider>\n  );\n};\n\nTabsRoot.displayName = 'Tabs.Root';\n"],"mappings":";;;;;;;AAmBA,MAAM,oBAAoB,iBAA+B;;;;;;;;;;;;;;;;;;;;;;;;AAyBzD,MAAa,YAAY,UAAyB;CAChD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO;EAC5D;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAAC,qBAAD;EAAqB,OAAO;EAC1B,UAAA,oBAACA,KAAS,MAAV;GACE,kBAAe;GACf,WAAW,qBACT,iBAAiB,YAAY,GAC7B,SACF;GACA,GAAI;EACL,CAAA;CACkB,CAAA;AAEzB;AAEA,SAAS,cAAc"}
+{"version":3,"file":"tabs-root.js","names":["BaseTabs"],"sources":["../../../../src/components/disclosure/tabs/tabs-root.tsx"],"sourcesContent":["import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { mergeStateClassNames } from '#utils';\nimport { tabsRootVariants } from './tabs-root-variants';\nimport { TabsContextProvider, type TabsVariants } from './use-tabs-context';\n\nexport type TabsRootProps = MergeOverride<BaseTabs.Root.Props, TabsVariants>;\n\nexport type TabsRootState = BaseTabs.Root.State;\n\nexport type TabsRootChangeEventDetails = BaseTabs.Root.ChangeEventDetails;\n\nexport type TabsRootChangeEventReason = BaseTabs.Root.ChangeEventReason;\n\nexport type TabsRootOrientation = BaseTabs.Root.Orientation;\n\nconst splitVariantProps = createSplitProps<TabsVariants>();\n\n/**\n * Agrupa a lista de tabs e os painéis. `variant`, `fitted` e `justify` seguem\n * por contexto para `List`, `Tab` e `Indicator`; `colorScheme` vira variáveis\n * CSS (`--tabs-*`) lidas por todas as partes. Com\n * `orientation=\"vertical\"`, a lista fica ao lado dos painéis.\n *\n * O fundo da tab ativa no `enclosed` e no `outline`, e o do `Indicator`, vem de\n * `--tabs-surface-bg` (`gray-1`). Sobre outra superfície, troque pela cor dela:\n * `className=\"[--tabs-surface-bg:var(--gray-2)]\"`.\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"conta\">\n *   <Tabs.List>\n *     <Tabs.Tab value=\"conta\">Conta</Tabs.Tab>\n *     <Tabs.Tab value=\"senha\">Senha</Tabs.Tab>\n *     <Tabs.Indicator />\n *   </Tabs.List>\n *   <Tabs.Panel value=\"conta\">…</Tabs.Panel>\n *   <Tabs.Panel value=\"senha\">…</Tabs.Panel>\n * </Tabs.Root>\n * ```\n */\nexport const TabsRoot = (props: TabsRootProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n    'fitted',\n    'justify',\n    'variant',\n  ]);\n\n  const { className, ...rest } = elementProps;\n\n  return (\n    <TabsContextProvider value={variantProps}>\n      <BaseTabs.Root\n        data-component=\"Tabs.Root\"\n        className={mergeStateClassNames(\n          tabsRootVariants(variantProps),\n          className,\n        )}\n        {...rest}\n      />\n    </TabsContextProvider>\n  );\n};\n\nTabsRoot.displayName = 'Tabs.Root';\n"],"mappings":";;;;;;;AAmBA,MAAM,oBAAoB,iBAA+B;;;;;;;;;;;;;;;;;;;;;;;;AAyBzD,MAAa,YAAY,UAAyB;CAChD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO;EAC5D;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAAC,qBAAD;EAAqB,OAAO;EAC1B,UAAA,oBAACA,KAAS,MAAV;GACE,kBAAe;GACf,WAAW,qBACT,iBAAiB,YAAY,GAC7B,SACF;GACA,GAAI;EACL,CAAA;CACkB,CAAA;AAEzB;AAEA,SAAS,cAAc"}

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

@@ -4,6 +4,10 @@
  * desligam essa pintura quando há um Indicator na List: ele passa a ser o único a marcar o
  * estado, e o deslize aparece. Até o Base UI medir a tab, o Indicator não existe e a própria tab
  * se pinta.
+ *
+ * A `variant` `enclosed` é a origem do `SegmentedControl.Item`, que copia as classes dela, com o
+ * anel de foco (`focus-ring-inside` sobre `ring-*`, com `z-10` no foco) e a altura que desconta o
+ * `p-1` da lista. Uma mudança na tab `enclosed` vale para o item na mesma rodada.
  */
 export declare const tabsTabVariants: (props?: ({
   fitted?: boolean | null | undefined;

package/dist/components/disclosure/tabs/tabs-tab-variants.js

@@ -6,6 +6,10 @@ import { cva } from "class-variance-authority";
 * desligam essa pintura quando há um Indicator na List: ele passa a ser o único a marcar o
 * estado, e o deslize aparece. Até o Base UI medir a tab, o Indicator não existe e a própria tab
 * se pinta.
+*
+* A `variant` `enclosed` é a origem do `SegmentedControl.Item`, que copia as classes dela, com o
+* anel de foco (`focus-ring-inside` sobre `ring-*`, com `z-10` no foco) e a altura que desconta o
+* `p-1` da lista. Uma mudança na tab `enclosed` vale para o item na mesma rodada.
 */
 const tabsTabVariants = cva([
 	"relative",
@@ -63,7 +67,7 @@ const tabsTabVariants = cva([
 			enclosed: [
 				"h-[calc(var(--tabs-height)-0.5rem)]",
 				"rounded-(--tabs-trigger-radius)",
-				"data-active:bg-(--tabs-surface-bg)",
+				"data-active:bg-(--tabs-enclosed-bg)",
 				"data-active:shadow-xs",
 				"group-has-data-[component='Tabs.Indicator']/tabs-list:data-active:bg-transparent",
 				"group-has-data-[component='Tabs.Indicator']/tabs-list:data-active:shadow-none"
@@ -71,7 +75,7 @@ const tabsTabVariants = cva([
 			outline: [
 				"border",
 				"border-transparent",
-				"data-active:border-gray-alpha-6",
+				"data-active:border-gray-6",
 				"data-active:bg-(--tabs-surface-bg)",
 				"group-has-data-[component='Tabs.Indicator']/tabs-list:data-active:border-transparent",
 				"group-has-data-[component='Tabs.Indicator']/tabs-list:data-active:bg-transparent",

package/dist/components/disclosure/tabs/tabs-tab-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-tab-variants.js","names":[],"sources":["../../../../src/components/disclosure/tabs/tabs-tab-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { tabsDefaultVariants } from './use-tabs-context';\n\n/**\n * Cada variante pinta a tab ativa, e as classes `group-has-data-[component='Tabs.Indicator']`\n * desligam essa pintura quando há um Indicator na List: ele passa a ser o único a marcar o\n * estado, e o deslize aparece. Até o Base UI medir a tab, o Indicator não existe e a própria tab\n * se pinta.\n */\nexport const tabsTabVariants = cva(\n  [\n    'relative',\n\n    'inline-flex',\n    'items-center',\n    'shrink-0',\n    'gap-2',\n\n    'h-(--tabs-height)',\n    'min-w-(--tabs-height)',\n\n    'px-4',\n\n    'whitespace-nowrap',\n    'text-sm',\n    'font-medium',\n    'text-gray-11',\n    'data-active:text-(--tabs-accent-fg)',\n\n    'corner-squircle',\n\n    'select-none',\n    'cursor-pointer',\n    'transition-[color]',\n\n    'ring-(--tabs-accent)',\n    'focus-ring-inside',\n    '[--focus-ring-width:2px]',\n    'focus-visible:z-10',\n\n    'data-disabled:cursor-not-allowed',\n    'data-disabled:opacity-50',\n\n    'data-[orientation=horizontal]:justify-center',\n    'data-[orientation=vertical]:justify-start',\n  ],\n  {\n    variants: {\n      fitted: {\n        true: ['flex-1', 'text-center'],\n        false: [],\n      },\n      variant: {\n        // Faixa que avança 1px sobre a borda da List.\n        line: [\n          'after:absolute',\n          'after:content-[\"\"]',\n\n          'after:bg-(--tabs-accent)',\n          'after:opacity-0',\n          'after:transition-opacity',\n\n          'data-active:after:opacity-100',\n\n          'data-[orientation=horizontal]:after:inset-x-0',\n          'data-[orientation=horizontal]:after:-bottom-px',\n          'data-[orientation=horizontal]:after:h-0.5',\n\n          'data-[orientation=vertical]:after:inset-y-0',\n          'data-[orientation=vertical]:after:-inset-e-px',\n          'data-[orientation=vertical]:after:w-0.5',\n\n          \"group-has-data-[component='Tabs.Indicator']/tabs-list:after:hidden\",\n        ],\n        subtle: [\n          'rounded-(--tabs-trigger-radius)',\n\n          'data-active:bg-(--tabs-subtle-bg)',\n\n          \"group-has-data-[component='Tabs.Indicator']/tabs-list:data-active:bg-transparent\",\n        ],\n        enclosed: [\n          // A lista tem `p-1`: a tab desconta os dois lados para a lista ficar na altura da lista.\n          'h-[calc(var(--tabs-height)-0.5rem)]',\n\n          'rounded-(--tabs-trigger-radius)',\n\n          'data-active:bg-(--tabs-surface-bg)',\n          'data-active:shadow-xs',\n\n          \"group-has-data-[component='Tabs.Indicator']/tabs-list:data-active:bg-transparent\",\n          \"group-has-data-[component='Tabs.Indicator']/tabs-list:data-active:shadow-none\",\n        ],\n        outline: [\n          'border',\n          'border-transparent',\n\n          'data-active:border-gray-alpha-6',\n          'data-active:bg-(--tabs-surface-bg)',\n\n          \"group-has-data-[component='Tabs.Indicator']/tabs-list:data-active:border-transparent\",\n          \"group-has-data-[component='Tabs.Indicator']/tabs-list:data-active:bg-transparent\",\n\n          // Sobrepõe 1px da borda da List e da tab vizinha.\n          'data-[orientation=horizontal]:rounded-t-(--tabs-trigger-radius)',\n          'data-[orientation=horizontal]:-mb-px',\n          'data-[orientation=horizontal]:not-last:-me-px',\n          'data-[orientation=horizontal]:data-active:border-b-transparent',\n\n          'data-[orientation=vertical]:rounded-s-(--tabs-trigger-radius)',\n          'data-[orientation=vertical]:-me-px',\n          'data-[orientation=vertical]:not-last:-mb-px',\n          'data-[orientation=vertical]:data-active:border-e-transparent',\n        ],\n        plain: ['rounded-(--tabs-trigger-radius)'],\n      },\n    },\n    defaultVariants: {\n      fitted: tabsDefaultVariants.fitted,\n      variant: tabsDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;;;;;;;;AASA,MAAa,kBAAkB,IAC7B;CACE;CAEA;CACA;CACA;CACA;CAEA;CACA;CAEA;CAEA;CACA;CACA;CACA;CACA;CAEA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;AACF,GACA;CACE,UAAU;EACR,QAAQ;GACN,MAAM,CAAC,UAAU,aAAa;GAC9B,OAAO,CAAC;EACV;EACA,SAAS;GAEP,MAAM;IACJ;IACA;IAEA;IACA;IACA;IAEA;IAEA;IACA;IACA;IAEA;IACA;IACA;IAEA;GACF;GACA,QAAQ;IACN;IAEA;IAEA;GACF;GACA,UAAU;IAER;IAEA;IAEA;IACA;IAEA;IACA;GACF;GACA,SAAS;IACP;IACA;IAEA;IACA;IAEA;IACA;IAGA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;GACF;GACA,OAAO,CAAC,iCAAiC;EAC3C;CACF;CACA,iBAAiB;EACf,QAAQ,oBAAoB;EAC5B,SAAS,oBAAoB;CAC/B;AACF,CACF"}
+{"version":3,"file":"tabs-tab-variants.js","names":[],"sources":["../../../../src/components/disclosure/tabs/tabs-tab-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { tabsDefaultVariants } from './use-tabs-context';\n\n/**\n * Cada variante pinta a tab ativa, e as classes `group-has-data-[component='Tabs.Indicator']`\n * desligam essa pintura quando há um Indicator na List: ele passa a ser o único a marcar o\n * estado, e o deslize aparece. Até o Base UI medir a tab, o Indicator não existe e a própria tab\n * se pinta.\n *\n * A `variant` `enclosed` é a origem do `SegmentedControl.Item`, que copia as classes dela, com o\n * anel de foco (`focus-ring-inside` sobre `ring-*`, com `z-10` no foco) e a altura que desconta o\n * `p-1` da lista. Uma mudança na tab `enclosed` vale para o item na mesma rodada.\n */\nexport const tabsTabVariants = cva(\n  [\n    'relative',\n\n    'inline-flex',\n    'items-center',\n    'shrink-0',\n    'gap-2',\n\n    'h-(--tabs-height)',\n    'min-w-(--tabs-height)',\n\n    'px-4',\n\n    'whitespace-nowrap',\n    'text-sm',\n    'font-medium',\n    'text-gray-11',\n    'data-active:text-(--tabs-accent-fg)',\n\n    'corner-squircle',\n\n    'select-none',\n    'cursor-pointer',\n    'transition-[color]',\n\n    'ring-(--tabs-accent)',\n    'focus-ring-inside',\n    '[--focus-ring-width:2px]',\n    'focus-visible:z-10',\n\n    'data-disabled:cursor-not-allowed',\n    'data-disabled:opacity-50',\n\n    'data-[orientation=horizontal]:justify-center',\n    'data-[orientation=vertical]:justify-start',\n  ],\n  {\n    variants: {\n      fitted: {\n        true: ['flex-1', 'text-center'],\n        false: [],\n      },\n      variant: {\n        // Faixa que avança 1px sobre a borda da List.\n        line: [\n          'after:absolute',\n          'after:content-[\"\"]',\n\n          'after:bg-(--tabs-accent)',\n          'after:opacity-0',\n          'after:transition-opacity',\n\n          'data-active:after:opacity-100',\n\n          'data-[orientation=horizontal]:after:inset-x-0',\n          'data-[orientation=horizontal]:after:-bottom-px',\n          'data-[orientation=horizontal]:after:h-0.5',\n\n          'data-[orientation=vertical]:after:inset-y-0',\n          'data-[orientation=vertical]:after:-inset-e-px',\n          'data-[orientation=vertical]:after:w-0.5',\n\n          \"group-has-data-[component='Tabs.Indicator']/tabs-list:after:hidden\",\n        ],\n        subtle: [\n          'rounded-(--tabs-trigger-radius)',\n\n          'data-active:bg-(--tabs-subtle-bg)',\n\n          \"group-has-data-[component='Tabs.Indicator']/tabs-list:data-active:bg-transparent\",\n        ],\n        enclosed: [\n          // A lista tem `p-1`: a tab desconta os dois lados para a lista ficar na altura da lista.\n          'h-[calc(var(--tabs-height)-0.5rem)]',\n\n          'rounded-(--tabs-trigger-radius)',\n\n          'data-active:bg-(--tabs-enclosed-bg)',\n          'data-active:shadow-xs',\n\n          \"group-has-data-[component='Tabs.Indicator']/tabs-list:data-active:bg-transparent\",\n          \"group-has-data-[component='Tabs.Indicator']/tabs-list:data-active:shadow-none\",\n        ],\n        outline: [\n          'border',\n          'border-transparent',\n\n          'data-active:border-gray-6',\n          'data-active:bg-(--tabs-surface-bg)',\n\n          \"group-has-data-[component='Tabs.Indicator']/tabs-list:data-active:border-transparent\",\n          \"group-has-data-[component='Tabs.Indicator']/tabs-list:data-active:bg-transparent\",\n\n          // Sobrepõe 1px da borda da List e da tab vizinha.\n          'data-[orientation=horizontal]:rounded-t-(--tabs-trigger-radius)',\n          'data-[orientation=horizontal]:-mb-px',\n          'data-[orientation=horizontal]:not-last:-me-px',\n          'data-[orientation=horizontal]:data-active:border-b-transparent',\n\n          'data-[orientation=vertical]:rounded-s-(--tabs-trigger-radius)',\n          'data-[orientation=vertical]:-me-px',\n          'data-[orientation=vertical]:not-last:-mb-px',\n          'data-[orientation=vertical]:data-active:border-e-transparent',\n        ],\n        plain: ['rounded-(--tabs-trigger-radius)'],\n      },\n    },\n    defaultVariants: {\n      fitted: tabsDefaultVariants.fitted,\n      variant: tabsDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAa,kBAAkB,IAC7B;CACE;CAEA;CACA;CACA;CACA;CAEA;CACA;CAEA;CAEA;CACA;CACA;CACA;CACA;CAEA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;AACF,GACA;CACE,UAAU;EACR,QAAQ;GACN,MAAM,CAAC,UAAU,aAAa;GAC9B,OAAO,CAAC;EACV;EACA,SAAS;GAEP,MAAM;IACJ;IACA;IAEA;IACA;IACA;IAEA;IAEA;IACA;IACA;IAEA;IACA;IACA;IAEA;GACF;GACA,QAAQ;IACN;IAEA;IAEA;GACF;GACA,UAAU;IAER;IAEA;IAEA;IACA;IAEA;IACA;GACF;GACA,SAAS;IACP;IACA;IAEA;IACA;IAEA;IACA;IAGA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;GACF;GACA,OAAO,CAAC,iCAAiC;EAC3C;CACF;CACA,iBAAiB;EACf,QAAQ,oBAAoB;EAC5B,SAAS,oBAAoB;CAC/B;AACF,CACF"}

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

@@ -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?: "ruby" | "gray" | "accent" | "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;
   size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
   variant?: "solid" | "subtle" | "surface" | "outline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;