@lucasbernardosn/react-ui 0.2.0 → 0.4.0

package/dist/components/layout/scroll-area/scroll-area-root.js

@@ -14,9 +14,11 @@ import { ScrollArea } from "@base-ui/react/scroll-area";
 *
 * | Variável | Controla | Padrão |
 * | --- | --- | --- |
-* | `--scroll-area-scrollbar-size` | espessura da trilha | 4px no toque, 6px com mouse |
+* | `--scroll-area-scrollbar-size` | espessura da trilha | 4px no toque, 12px com mouse, 16px com mouse e `scrollbars="always"` |
 * | `--scroll-area-scrollbar-inset` | recuo da trilha até a borda | 2px |
-* | `--scroll-area-thumb-size` | espessura do polegar na trilha | a trilha toda |
+* | `--scroll-area-thumb-size` | espessura do polegar na trilha | a trilha toda no toque, 6px com mouse |
+*
+* A visibilidade e a espessura de `scrollbars="always"` são explicadas no `Scrollbar`.
 *
 * Como funciona:
 * 1. o `Root` zera as três com `initial` — assim um `ScrollArea` aninhado não herda os valores
@@ -32,9 +34,10 @@ import { ScrollArea } from "@base-ui/react/scroll-area";
 * ```
 */
 const ScrollAreaRoot = (props) => {
-	const { className, ...rest } = props;
+	const { className, scrollbars, ...rest } = props;
 	return /* @__PURE__ */ jsx(ScrollArea.Root, {
 		"data-component": "ScrollArea.Root",
+		"data-scrollbars": scrollbars === "always" ? "always" : void 0,
 		className: mergeStateClassNames([
 			"overflow-hidden",
 			"[--scroll-area-scrollbar-size:initial]",

package/dist/components/layout/scroll-area/scroll-area-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area-root.js","names":["BaseScrollArea"],"sources":["../../../../src/components/layout/scroll-area/scroll-area-root.tsx"],"sourcesContent":["import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport { mergeStateClassNames } from '#utils';\n\nexport type ScrollAreaRootProps = BaseScrollArea.Root.Props;\n\nexport type ScrollAreaRootState = BaseScrollArea.Root.State;\n\n/**\n * Agrupa as partes e serve de referência de posição para as barras. **Não declara tamanho**:\n * com altura definida a área rola; sem altura ela cresce com o conteúdo e quem rola é o\n * contêiner de cima. Altura e largura (`h-72`, `flex-1`, `md:h-52`) ficam com quem usa.\n *\n * #### Personalização das barras\n *\n * Por variável CSS na `className` do `Root`. As barras herdam — inclusive as de\n * `ScrollArea.Bars`, que não recebe props.\n *\n * | Variável | Controla | Padrão |\n * | --- | --- | --- |\n * | `--scroll-area-scrollbar-size` | espessura da trilha | 4px no toque, 6px com mouse |\n * | `--scroll-area-scrollbar-inset` | recuo da trilha até a borda | 2px |\n * | `--scroll-area-thumb-size` | espessura do polegar na trilha | a trilha toda |\n *\n * Como funciona:\n * 1. o `Root` zera as três com `initial` — assim um `ScrollArea` aninhado não herda os valores\n *    do de fora;\n * 2. `Scrollbar` e `Thumb` leem cada uma com um padrão no `var()`: é ali que os valores padrão\n *    moram, e eles valem enquanto a variável estiver zerada;\n * 3. a classe de quem usa substitui o `initial`, porque o `mergeTwClassNames` descarta a classe\n *    conflitante anterior.\n *\n * @example\n * ```tsx\n * <ScrollArea.Root className=\"h-72 [--scroll-area-scrollbar-size:--spacing(2.5)]\">\n * ```\n */\nexport const ScrollAreaRoot = (props: ScrollAreaRootProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseScrollArea.Root\n      data-component=\"ScrollArea.Root\"\n      className={mergeStateClassNames(\n        [\n          // Zera o piso automático de item flex/grid: `flex-1` basta para encolher e rolar, sem\n          // `min-h-0`/`min-w-0`. Também recorta os cantos do `rounded-*` e impede que um\n          // decorativo vazado dê scroll à página (no Chrome Android, a barra de endereço passa a\n          // recolher). `overflow-clip` recortaria, mas não zera o piso.\n          //\n          // Custo: sem altura, numa coluna flex que não comporta os filhos, o `Root` encolhe e\n          // rola em vez de crescer. `shrink-0` devolve o crescimento.\n          'overflow-hidden',\n\n          // Ver \"Personalização das barras\" acima.\n          '[--scroll-area-scrollbar-size:initial]',\n          '[--scroll-area-scrollbar-inset:initial]',\n          '[--scroll-area-thumb-size:initial]',\n\n          // Anel do `Viewport` (`focusRing`), pintado aqui porque a máscara do `fade` apagaria o\n          // que o viewport pintasse. A utility dispara pelo `data-focus-ring` do filho.\n          'focus-ring-inside',\n          'ring-gray-12',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nScrollAreaRoot.displayName = 'ScrollArea.Root';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,WAAe,MAAhB;EACE,kBAAe;EACf,WAAW,qBACT;GAQE;GAGA;GACA;GACA;GAIA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}
+{"version":3,"file":"scroll-area-root.js","names":["BaseScrollArea"],"sources":["../../../../src/components/layout/scroll-area/scroll-area-root.tsx"],"sourcesContent":["import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport type { MergeOverride } from '@lucasbernardosn/ts-utils';\nimport { mergeStateClassNames } from '#utils';\n\nexport type ScrollAreaRootProps = MergeOverride<\n  BaseScrollArea.Root.Props,\n  {\n    /**\n     * Quando as barras aparecem. Com `'auto'`, no hover e na rolagem. Com `'always'`, ficam sempre\n     * visíveis com mouse, com a trilha de 16px; no toque, continuam sumindo. Serve a uma área de\n     * dados, em que a barra mostra a posição e que há mais conteúdo ao lado. Vale para as barras\n     * filhas diretas do `Root`, não para as de um `ScrollArea` aninhado.\n     *\n     * @default 'auto'\n     */\n    scrollbars?: 'auto' | 'always';\n  }\n>;\n\nexport type ScrollAreaRootState = BaseScrollArea.Root.State;\n\n/**\n * Agrupa as partes e serve de referência de posição para as barras. **Não declara tamanho**:\n * com altura definida a área rola; sem altura ela cresce com o conteúdo e quem rola é o\n * contêiner de cima. Altura e largura (`h-72`, `flex-1`, `md:h-52`) ficam com quem usa.\n *\n * #### Personalização das barras\n *\n * Por variável CSS na `className` do `Root`. As barras herdam — inclusive as de\n * `ScrollArea.Bars`, que não recebe props.\n *\n * | Variável | Controla | Padrão |\n * | --- | --- | --- |\n * | `--scroll-area-scrollbar-size` | espessura da trilha | 4px no toque, 12px com mouse, 16px com mouse e `scrollbars=\"always\"` |\n * | `--scroll-area-scrollbar-inset` | recuo da trilha até a borda | 2px |\n * | `--scroll-area-thumb-size` | espessura do polegar na trilha | a trilha toda no toque, 6px com mouse |\n *\n * A visibilidade e a espessura de `scrollbars=\"always\"` são explicadas no `Scrollbar`.\n *\n * Como funciona:\n * 1. o `Root` zera as três com `initial` — assim um `ScrollArea` aninhado não herda os valores\n *    do de fora;\n * 2. `Scrollbar` e `Thumb` leem cada uma com um padrão no `var()`: é ali que os valores padrão\n *    moram, e eles valem enquanto a variável estiver zerada;\n * 3. a classe de quem usa substitui o `initial`, porque o `mergeTwClassNames` descarta a classe\n *    conflitante anterior.\n *\n * @example\n * ```tsx\n * <ScrollArea.Root className=\"h-72 [--scroll-area-scrollbar-size:--spacing(2.5)]\">\n * ```\n */\nexport const ScrollAreaRoot = (props: ScrollAreaRootProps) => {\n  const { className, scrollbars, ...rest } = props;\n\n  return (\n    <BaseScrollArea.Root\n      data-component=\"ScrollArea.Root\"\n      data-scrollbars={scrollbars === 'always' ? 'always' : undefined}\n      className={mergeStateClassNames(\n        [\n          // Zera o piso automático de item flex/grid: `flex-1` basta para encolher e rolar, sem\n          // `min-h-0`/`min-w-0`. Também recorta os cantos do `rounded-*` e impede que um\n          // decorativo vazado dê scroll à página (no Chrome Android, a barra de endereço passa a\n          // recolher). `overflow-clip` recortaria, mas não zera o piso.\n          //\n          // Custo: sem altura, numa coluna flex que não comporta os filhos, o `Root` encolhe e\n          // rola em vez de crescer. `shrink-0` devolve o crescimento.\n          'overflow-hidden',\n\n          // Ver \"Personalização das barras\" acima.\n          '[--scroll-area-scrollbar-size:initial]',\n          '[--scroll-area-scrollbar-inset:initial]',\n          '[--scroll-area-thumb-size:initial]',\n\n          // Anel do `Viewport` (`focusRing`), pintado aqui porque a máscara do `fade` apagaria o\n          // que o viewport pintasse. A utility dispara pelo `data-focus-ring` do filho.\n          'focus-ring-inside',\n          'ring-gray-12',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nScrollAreaRoot.displayName = 'ScrollArea.Root';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,WAAW,YAAY,GAAG,SAAS;CAE3C,OACE,oBAACA,WAAe,MAAhB;EACE,kBAAe;EACf,mBAAiB,eAAe,WAAW,WAAW,KAAA;EACtD,WAAW,qBACT;GAQE;GAGA;GACA;GACA;GAIA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}

package/dist/components/layout/scroll-area/scroll-area-scrollbar.d.ts

@@ -8,6 +8,9 @@ export type ScrollAreaScrollbarState = ScrollArea.Scrollbar.State;
  *
  * Espessura e recuo se ajustam pelas variáveis do `Root`, não por classe: um `w-*` passado aqui
  * perde para as regras `data-[orientation=…]:`, que têm especificidade maior.
+ *
+ * Com `scrollbars="always"` no `Root`, as barras filhas diretas dele ficam sempre visíveis com
+ * mouse, com a trilha de 16px; no toque, seguem o comportamento padrão.
  */
 export declare const ScrollAreaScrollbar: {
   (props: ScrollAreaScrollbarProps): import("react").JSX.Element;

package/dist/components/layout/scroll-area/scroll-area-scrollbar.js

@@ -8,6 +8,9 @@ import { ScrollArea } from "@base-ui/react/scroll-area";
 *
 * Espessura e recuo se ajustam pelas variáveis do `Root`, não por classe: um `w-*` passado aqui
 * perde para as regras `data-[orientation=…]:`, que têm especificidade maior.
+*
+* Com `scrollbars="always"` no `Root`, as barras filhas diretas dele ficam sempre visíveis com
+* mouse, com a trilha de 16px; no toque, seguem o comportamento padrão.
 */
 const ScrollAreaScrollbar = (props) => {
 	const { className, ...rest } = props;
@@ -19,9 +22,13 @@ const ScrollAreaScrollbar = (props) => {
 			"data-[orientation=horizontal]:items-center",
 			"m-(--scroll-area-scrollbar-inset,--spacing(0.5))",
 			"data-[orientation=vertical]:w-(--scroll-area-scrollbar-size,--spacing(1))",
-			"pointer-fine:data-[orientation=vertical]:w-(--scroll-area-scrollbar-size,--spacing(1.5))",
+			"pointer-fine:data-[orientation=vertical]:w-(--scroll-area-scrollbar-size,--spacing(3))",
 			"data-[orientation=horizontal]:h-(--scroll-area-scrollbar-size,--spacing(1))",
-			"pointer-fine:data-[orientation=horizontal]:h-(--scroll-area-scrollbar-size,--spacing(1.5))",
+			"pointer-fine:data-[orientation=horizontal]:h-(--scroll-area-scrollbar-size,--spacing(3))",
+			"pointer-fine:[[data-scrollbars=always]>&]:opacity-100",
+			"pointer-fine:[[data-scrollbars=always]>&]:pointer-events-auto",
+			"pointer-fine:[[data-scrollbars=always]>&]:data-[orientation=vertical]:w-(--scroll-area-scrollbar-size,--spacing(4))",
+			"pointer-fine:[[data-scrollbars=always]>&]:data-[orientation=horizontal]:h-(--scroll-area-scrollbar-size,--spacing(4))",
 			"before:absolute",
 			"before:content-['']",
 			"data-[orientation=vertical]:before:inset-y-0",

package/dist/components/layout/scroll-area/scroll-area-scrollbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area-scrollbar.js","names":["BaseScrollArea"],"sources":["../../../../src/components/layout/scroll-area/scroll-area-scrollbar.tsx"],"sourcesContent":["import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport { mergeStateClassNames } from '#utils';\n\nexport type ScrollAreaScrollbarProps = BaseScrollArea.Scrollbar.Props;\n\nexport type ScrollAreaScrollbarState = BaseScrollArea.Scrollbar.State;\n\n/**\n * A trilha do polegar, transparente e sobreposta ao conteúdo. O Base UI a posiciona inline\n * (`absolute` na borda do `Root`) e só a monta quando o eixo dela transborda.\n *\n * Espessura e recuo se ajustam pelas variáveis do `Root`, não por classe: um `w-*` passado aqui\n * perde para as regras `data-[orientation=…]:`, que têm especificidade maior.\n */\nexport const ScrollAreaScrollbar = (props: ScrollAreaScrollbarProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseScrollArea.Scrollbar\n      data-component=\"ScrollArea.Scrollbar\"\n      className={mergeStateClassNames(\n        [\n          // Centraliza o polegar quando ele é mais fino que a trilha.\n          'flex',\n          'data-[orientation=vertical]:justify-center',\n          'data-[orientation=horizontal]:items-center',\n\n          'm-(--scroll-area-scrollbar-inset,--spacing(0.5))',\n\n          // ESPESSURA — fina no toque, onde a barra só indica posição; mais grossa com mouse,\n          // onde vira alvo de arrasto. As duas regras leem a mesma variável, então uma classe no\n          // `Root` vale para os dois. Uma regra por orientação porque o comprimento vem do\n          // `top`/`bottom` que o Base UI escreve — uma altura explícita o desligaria.\n          'data-[orientation=vertical]:w-(--scroll-area-scrollbar-size,--spacing(1))',\n          'pointer-fine:data-[orientation=vertical]:w-(--scroll-area-scrollbar-size,--spacing(1.5))',\n\n          'data-[orientation=horizontal]:h-(--scroll-area-scrollbar-size,--spacing(1))',\n          'pointer-fine:data-[orientation=horizontal]:h-(--scroll-area-scrollbar-size,--spacing(1.5))',\n\n          // ÁREA DE TOQUE — pseudo-elemento de 12px, maior que a trilha visível; herda o\n          // `pointer-events` e some junto com ela. Cresce só para dentro: para fora, daria\n          // scroll à página. O `overflow-hidden` do `Root` seguraria, mas não se depende dele.\n          'before:absolute',\n          \"before:content-['']\",\n\n          'data-[orientation=vertical]:before:inset-y-0',\n          'data-[orientation=vertical]:before:inset-e-0',\n          'data-[orientation=vertical]:before:w-3',\n\n          'data-[orientation=horizontal]:before:inset-x-0',\n          'data-[orientation=horizontal]:before:bottom-0',\n          'data-[orientation=horizontal]:before:h-3',\n\n          // VISIBILIDADE — invisível e sem capturar clique em repouso. Aparece na hora e some\n          // com atraso: os estados zeram `delay`/`duration` na entrada, e a base volta a valer\n          // na saída.\n          'opacity-0',\n          'pointer-events-none',\n          'transition-opacity',\n          'duration-150',\n          'ease-exit',\n          'delay-300',\n\n          'data-hovering:opacity-100',\n          'data-hovering:pointer-events-auto',\n          'data-hovering:ease-enter',\n          'data-hovering:delay-0',\n\n          'data-scrolling:opacity-100',\n          'data-scrolling:pointer-events-auto',\n          'data-scrolling:duration-0',\n          'data-scrolling:delay-0',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nScrollAreaScrollbar.displayName = 'ScrollArea.Scrollbar';\n"],"mappings":";;;;;;;;;;;AAcA,MAAa,uBAAuB,UAAoC;CACtE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,WAAe,WAAhB;EACE,kBAAe;EACf,WAAW,qBACT;GAEE;GACA;GACA;GAEA;GAMA;GACA;GAEA;GACA;GAKA;GACA;GAEA;GACA;GACA;GAEA;GACA;GACA;GAKA;GACA;GACA;GACA;GACA;GACA;GAEA;GACA;GACA;GACA;GAEA;GACA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,oBAAoB,cAAc"}
+{"version":3,"file":"scroll-area-scrollbar.js","names":["BaseScrollArea"],"sources":["../../../../src/components/layout/scroll-area/scroll-area-scrollbar.tsx"],"sourcesContent":["import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport { mergeStateClassNames } from '#utils';\n\nexport type ScrollAreaScrollbarProps = BaseScrollArea.Scrollbar.Props;\n\nexport type ScrollAreaScrollbarState = BaseScrollArea.Scrollbar.State;\n\n/**\n * A trilha do polegar, transparente e sobreposta ao conteúdo. O Base UI a posiciona inline\n * (`absolute` na borda do `Root`) e só a monta quando o eixo dela transborda.\n *\n * Espessura e recuo se ajustam pelas variáveis do `Root`, não por classe: um `w-*` passado aqui\n * perde para as regras `data-[orientation=…]:`, que têm especificidade maior.\n *\n * Com `scrollbars=\"always\"` no `Root`, as barras filhas diretas dele ficam sempre visíveis com\n * mouse, com a trilha de 16px; no toque, seguem o comportamento padrão.\n */\nexport const ScrollAreaScrollbar = (props: ScrollAreaScrollbarProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseScrollArea.Scrollbar\n      data-component=\"ScrollArea.Scrollbar\"\n      className={mergeStateClassNames(\n        [\n          // Centraliza o polegar quando ele é mais fino que a trilha.\n          'flex',\n          'data-[orientation=vertical]:justify-center',\n          'data-[orientation=horizontal]:items-center',\n\n          'm-(--scroll-area-scrollbar-inset,--spacing(0.5))',\n\n          // ESPESSURA — fina no toque, onde a barra só indica posição; com mouse, 12px, onde vira\n          // alvo de arrasto e o polegar tem espaço para engrossar (ver `ScrollArea.Thumb`). As duas regras leem a mesma variável, então uma classe no\n          // `Root` vale para os dois. Uma regra por orientação porque o comprimento vem do\n          // `top`/`bottom` que o Base UI escreve — uma altura explícita o desligaria.\n          'data-[orientation=vertical]:w-(--scroll-area-scrollbar-size,--spacing(1))',\n          'pointer-fine:data-[orientation=vertical]:w-(--scroll-area-scrollbar-size,--spacing(3))',\n\n          'data-[orientation=horizontal]:h-(--scroll-area-scrollbar-size,--spacing(1))',\n          'pointer-fine:data-[orientation=horizontal]:h-(--scroll-area-scrollbar-size,--spacing(3))',\n\n          // SEMPRE VISÍVEL — `scrollbars=\"always\"` no `Root` (`data-scrollbars`). O seletor\n          // `[data-scrollbars=always]>&` vale só para a barra filha direta: um `ScrollArea`\n          // aninhado não herda. Ele soma um atributo à especificidade, então vence as regras\n          // de espessura acima sem depender da ordem do CSS; e a variável de quem usa vence\n          // todas, porque está no `var()`. Sem isso, a trilha fina e a opacidade 0 voltariam.\n          'pointer-fine:[[data-scrollbars=always]>&]:opacity-100',\n          'pointer-fine:[[data-scrollbars=always]>&]:pointer-events-auto',\n          'pointer-fine:[[data-scrollbars=always]>&]:data-[orientation=vertical]:w-(--scroll-area-scrollbar-size,--spacing(4))',\n          'pointer-fine:[[data-scrollbars=always]>&]:data-[orientation=horizontal]:h-(--scroll-area-scrollbar-size,--spacing(4))',\n\n          // ÁREA DE TOQUE — pseudo-elemento de 12px, maior que a trilha visível; herda o\n          // `pointer-events` e some junto com ela. Cresce só para dentro: para fora, daria\n          // scroll à página. O `overflow-hidden` do `Root` seguraria, mas não se depende dele.\n          'before:absolute',\n          \"before:content-['']\",\n\n          'data-[orientation=vertical]:before:inset-y-0',\n          'data-[orientation=vertical]:before:inset-e-0',\n          'data-[orientation=vertical]:before:w-3',\n\n          'data-[orientation=horizontal]:before:inset-x-0',\n          'data-[orientation=horizontal]:before:bottom-0',\n          'data-[orientation=horizontal]:before:h-3',\n\n          // VISIBILIDADE — invisível e sem capturar clique em repouso. Aparece na hora e some\n          // com atraso: os estados zeram `delay`/`duration` na entrada, e a base volta a valer\n          // na saída.\n          'opacity-0',\n          'pointer-events-none',\n          'transition-opacity',\n          'duration-150',\n          'ease-exit',\n          'delay-300',\n\n          'data-hovering:opacity-100',\n          'data-hovering:pointer-events-auto',\n          'data-hovering:ease-enter',\n          'data-hovering:delay-0',\n\n          'data-scrolling:opacity-100',\n          'data-scrolling:pointer-events-auto',\n          'data-scrolling:duration-0',\n          'data-scrolling:delay-0',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nScrollAreaScrollbar.displayName = 'ScrollArea.Scrollbar';\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAa,uBAAuB,UAAoC;CACtE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,WAAe,WAAhB;EACE,kBAAe;EACf,WAAW,qBACT;GAEE;GACA;GACA;GAEA;GAMA;GACA;GAEA;GACA;GAOA;GACA;GACA;GACA;GAKA;GACA;GAEA;GACA;GACA;GAEA;GACA;GACA;GAKA;GACA;GACA;GACA;GACA;GACA;GAEA;GACA;GACA;GACA;GAEA;GACA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,oBAAoB,cAAc"}

package/dist/components/layout/scroll-area/scroll-area-thumb.d.ts

@@ -4,7 +4,11 @@ export type ScrollAreaThumbProps = ScrollArea.Thumb.Props;
 export type ScrollAreaThumbState = ScrollArea.Thumb.State;
 /**
  * O polegar que corre na trilha. Espessura em `--scroll-area-thumb-size`, no `Root`; sem ela,
- * ocupa a trilha toda. Translúcido para funcionar sobre qualquer fundo.
+ * ocupa a trilha toda.
+ *
+ * Tem três estados, em degraus da escala alpha do cinza, que é translúcida e funciona sobre
+ * qualquer fundo: repouso (entre o passo 8 e o 9), hover (10) e arrastando (11). Com mouse, no
+ * hover e ao arrastar, ele engrossa para 8px, sem passar da trilha; no toque, mantém a espessura.
  */
 export declare const ScrollAreaThumb: {
   (props: ScrollAreaThumbProps): import("react").JSX.Element;

package/dist/components/layout/scroll-area/scroll-area-thumb.js

@@ -4,7 +4,11 @@ import { ScrollArea } from "@base-ui/react/scroll-area";
 //#region src/components/layout/scroll-area/scroll-area-thumb.tsx
 /**
 * O polegar que corre na trilha. Espessura em `--scroll-area-thumb-size`, no `Root`; sem ela,
-* ocupa a trilha toda. Translúcido para funcionar sobre qualquer fundo.
+* ocupa a trilha toda.
+*
+* Tem três estados, em degraus da escala alpha do cinza, que é translúcida e funciona sobre
+* qualquer fundo: repouso (entre o passo 8 e o 9), hover (10) e arrastando (11). Com mouse, no
+* hover e ao arrastar, ele engrossa para 8px, sem passar da trilha; no toque, mantém a espessura.
 */
 const ScrollAreaThumb = (props) => {
 	const { className, ...rest } = props;
@@ -12,10 +16,16 @@ const ScrollAreaThumb = (props) => {
 		"data-component": "ScrollArea.Thumb",
 		className: mergeStateClassNames([
 			"size-(--scroll-area-thumb-size,100%)",
-			"rounded-full",
-			"bg-gray-9/50",
-			"active:bg-gray-10",
-			"transition-colors"
+			"pointer-fine:size-(--scroll-area-thumb-size,--spacing(1.5))",
+			"rounded-xs",
+			"bg-[color-mix(in_oklab,var(--color-gray-alpha-8),var(--color-gray-alpha-9))]",
+			"hover:bg-gray-alpha-10",
+			"active:bg-gray-alpha-11",
+			"pointer-fine:hover:[--scroll-area-thumb-size:min(--spacing(2),100%)]",
+			"pointer-fine:active:[--scroll-area-thumb-size:min(--spacing(2),100%)]",
+			"not-motion-reduced:transition-[background-color,width,height]",
+			"not-motion-reduced:duration-150",
+			"not-motion-reduced:ease-move"
 		], className),
 		...rest
 	});

package/dist/components/layout/scroll-area/scroll-area-thumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area-thumb.js","names":["BaseScrollArea"],"sources":["../../../../src/components/layout/scroll-area/scroll-area-thumb.tsx"],"sourcesContent":["import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport { mergeStateClassNames } from '#utils';\n\nexport type ScrollAreaThumbProps = BaseScrollArea.Thumb.Props;\n\nexport type ScrollAreaThumbState = BaseScrollArea.Thumb.State;\n\n/**\n * O polegar que corre na trilha. Espessura em `--scroll-area-thumb-size`, no `Root`; sem ela,\n * ocupa a trilha toda. Translúcido para funcionar sobre qualquer fundo.\n */\nexport const ScrollAreaThumb = (props: ScrollAreaThumbProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseScrollArea.Thumb\n      data-component=\"ScrollArea.Thumb\"\n      className={mergeStateClassNames(\n        [\n          // Os dois eixos sem olhar a orientação: o principal o Base UI escreve inline, e\n          // inline vence classe. Na prática, a classe só define o eixo cruzado.\n          'size-(--scroll-area-thumb-size,100%)',\n          'rounded-full',\n\n          // O `active:` dura o arrasto inteiro: o Base UI captura o ponteiro no polegar.\n          'bg-gray-9/50',\n          'active:bg-gray-10',\n          'transition-colors',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nScrollAreaThumb.displayName = 'ScrollArea.Thumb';\n"],"mappings":";;;;;;;;AAWA,MAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,WAAe,OAAhB;EACE,kBAAe;EACf,WAAW,qBACT;GAGE;GACA;GAGA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,gBAAgB,cAAc"}
+{"version":3,"file":"scroll-area-thumb.js","names":["BaseScrollArea"],"sources":["../../../../src/components/layout/scroll-area/scroll-area-thumb.tsx"],"sourcesContent":["import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport { mergeStateClassNames } from '#utils';\n\nexport type ScrollAreaThumbProps = BaseScrollArea.Thumb.Props;\n\nexport type ScrollAreaThumbState = BaseScrollArea.Thumb.State;\n\n/**\n * O polegar que corre na trilha. Espessura em `--scroll-area-thumb-size`, no `Root`; sem ela,\n * ocupa a trilha toda.\n *\n * Tem três estados, em degraus da escala alpha do cinza, que é translúcida e funciona sobre\n * qualquer fundo: repouso (entre o passo 8 e o 9), hover (10) e arrastando (11). Com mouse, no\n * hover e ao arrastar, ele engrossa para 8px, sem passar da trilha; no toque, mantém a espessura.\n */\nexport const ScrollAreaThumb = (props: ScrollAreaThumbProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseScrollArea.Thumb\n      data-component=\"ScrollArea.Thumb\"\n      className={mergeStateClassNames(\n        [\n          // Os dois eixos sem olhar a orientação: o principal o Base UI escreve inline, e\n          // inline vence classe. Na prática, a classe só define o eixo cruzado.\n          'size-(--scroll-area-thumb-size,100%)',\n          // Com mouse, 6px no meio da trilha de 12px (16px no `always`), com folga para o hover\n          // engrossar. No toque, a trilha toda. Também no `var()`: a variável do `Root` vence.\n          'pointer-fine:size-(--scroll-area-thumb-size,--spacing(1.5))',\n          'rounded-xs',\n\n          // Os três estados na escala alpha. O `active:` dura o arrasto inteiro: o Base UI\n          // captura o ponteiro no polegar.\n          'bg-[color-mix(in_oklab,var(--color-gray-alpha-8),var(--color-gray-alpha-9))]',\n          'hover:bg-gray-alpha-10',\n          'active:bg-gray-alpha-11',\n\n          // Com mouse, engrossa para 8px no hover e ao arrastar. A variável é redeclarada no\n          // próprio polegar, onde o `size-*` acima a lê; o `min` impede de passar da trilha, e\n          // numa barra fina ele só a ocupa toda.\n          'pointer-fine:hover:[--scroll-area-thumb-size:min(--spacing(2),100%)]',\n          'pointer-fine:active:[--scroll-area-thumb-size:min(--spacing(2),100%)]',\n\n          // A cor e o tamanho numa transição só, com uma curva só. Vale o `ease-move`: a troca de\n          // tamanho é movimento, e a de cor, de 150ms, acompanha sem diferença perceptível.\n          'not-motion-reduced:transition-[background-color,width,height]',\n          'not-motion-reduced:duration-150',\n          'not-motion-reduced:ease-move',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nScrollAreaThumb.displayName = 'ScrollArea.Thumb';\n"],"mappings":";;;;;;;;;;;;AAeA,MAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,WAAe,OAAhB;EACE,kBAAe;EACf,WAAW,qBACT;GAGE;GAGA;GACA;GAIA;GACA;GACA;GAKA;GACA;GAIA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,gBAAgB,cAAc"}

package/dist/components/layout/scroll-area/scroll-area-viewport.d.ts

@@ -1,5 +1,5 @@
 import { ScrollAreaViewportVariants } from "./scroll-area-viewport-variants.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { ScrollArea } from "@base-ui/react/scroll-area";
 //#region src/components/layout/scroll-area/scroll-area-viewport.d.ts
 export type ScrollAreaViewportProps = MergeOverride<ScrollArea.Viewport.Props, ScrollAreaViewportVariants & {

package/dist/components/layout/scroll-area/scroll-area-viewport.js

@@ -1,6 +1,6 @@
 import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
 import { scrollAreaViewportVariants } from "./scroll-area-viewport-variants.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { jsx } from "react/jsx-runtime";
 import { ScrollArea } from "@base-ui/react/scroll-area";
 //#region src/components/layout/scroll-area/scroll-area-viewport.tsx

package/dist/components/layout/scroll-area/scroll-area-viewport.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area-viewport.js","names":["BaseScrollArea"],"sources":["../../../../src/components/layout/scroll-area/scroll-area-viewport.tsx"],"sourcesContent":["import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeStateClassNames } from '#utils';\nimport {\n  type ScrollAreaViewportVariants,\n  scrollAreaViewportVariants,\n} from './scroll-area-viewport-variants';\n\nexport type ScrollAreaViewportProps = MergeOverride<\n  BaseScrollArea.Viewport.Props,\n  ScrollAreaViewportVariants & {\n    /**\n     * Mostra o anel de foco do tema quando o viewport recebe foco pelo teclado.\n     *\n     * O Base UI coloca o viewport na ordem de tabulação sempre que há transbordamento, para que\n     * dê para rolar pelo teclado. Desligado, **nenhuma** indicação de foco aparece — nem o\n     * contorno padrão do navegador —, mas o viewport continua focável: só desligue quando outra\n     * coisa já mostrar onde está o foco.\n     *\n     * O anel é pintado pelo `Root` (`focus-ring-inside`), não por este elemento: com `fade`, a\n     * máscara apagaria qualquer coisa que o viewport pintasse. É o arranjo da demo oficial de\n     * fade. O viewport só se marca com `data-focus-ring`.\n     *\n     * @default true\n     */\n    focusRing?: boolean;\n  }\n>;\n\nexport type ScrollAreaViewportState = BaseScrollArea.Viewport.State;\n\nconst splitVariantProps = createSplitProps<ScrollAreaViewportVariants>();\n\n/**\n * O elemento que de fato rola. O Base UI aplica `overflow: scroll` inline, esconde a barra\n * nativa e põe o elemento na ordem de tabulação quando há transbordamento.\n *\n * Segue a altura do `Root`. Para crescer até um limite e rolar a partir dele, o `max-h-*` vai\n * **aqui**, não no `Root`: percentual não resolve contra `max-height`.\n *\n * Sem `overscroll-behavior` de propósito: `contain` cortaria o gesto antes da página, e é ele\n * que dispara o pull-to-refresh quando esta área é o conteúdo principal. Scroller sobreposto\n * (drawer, popover) declara `overscroll-contain` por conta própria.\n */\nexport const ScrollAreaViewport = (props: ScrollAreaViewportProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['fade']);\n\n  const { className, focusRing = true, ...rest } = elementProps;\n\n  return (\n    <BaseScrollArea.Viewport\n      data-component=\"ScrollArea.Viewport\"\n      data-focus-ring={focusRing ? '' : undefined}\n      className={mergeStateClassNames(\n        scrollAreaViewportVariants(variantProps),\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nScrollAreaViewport.displayName = 'ScrollArea.Viewport';\n"],"mappings":";;;;;;AA+BA,MAAM,oBAAoB,iBAA6C;;;;;;;;;;;;AAavE,MAAa,sBAAsB,UAAmC;CACpE,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,MAAM,CAAC;CAEtE,MAAM,EAAE,WAAW,YAAY,MAAM,GAAG,SAAS;CAEjD,OACE,oBAACA,WAAe,UAAhB;EACE,kBAAe;EACf,mBAAiB,YAAY,KAAK,KAAA;EAClC,WAAW,qBACT,2BAA2B,YAAY,GACvC,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,mBAAmB,cAAc"}
+{"version":3,"file":"scroll-area-viewport.js","names":["BaseScrollArea"],"sources":["../../../../src/components/layout/scroll-area/scroll-area-viewport.tsx"],"sourcesContent":["import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { mergeStateClassNames } from '#utils';\nimport {\n  type ScrollAreaViewportVariants,\n  scrollAreaViewportVariants,\n} from './scroll-area-viewport-variants';\n\nexport type ScrollAreaViewportProps = MergeOverride<\n  BaseScrollArea.Viewport.Props,\n  ScrollAreaViewportVariants & {\n    /**\n     * Mostra o anel de foco do tema quando o viewport recebe foco pelo teclado.\n     *\n     * O Base UI coloca o viewport na ordem de tabulação sempre que há transbordamento, para que\n     * dê para rolar pelo teclado. Desligado, **nenhuma** indicação de foco aparece — nem o\n     * contorno padrão do navegador —, mas o viewport continua focável: só desligue quando outra\n     * coisa já mostrar onde está o foco.\n     *\n     * O anel é pintado pelo `Root` (`focus-ring-inside`), não por este elemento: com `fade`, a\n     * máscara apagaria qualquer coisa que o viewport pintasse. É o arranjo da demo oficial de\n     * fade. O viewport só se marca com `data-focus-ring`.\n     *\n     * @default true\n     */\n    focusRing?: boolean;\n  }\n>;\n\nexport type ScrollAreaViewportState = BaseScrollArea.Viewport.State;\n\nconst splitVariantProps = createSplitProps<ScrollAreaViewportVariants>();\n\n/**\n * O elemento que de fato rola. O Base UI aplica `overflow: scroll` inline, esconde a barra\n * nativa e põe o elemento na ordem de tabulação quando há transbordamento.\n *\n * Segue a altura do `Root`. Para crescer até um limite e rolar a partir dele, o `max-h-*` vai\n * **aqui**, não no `Root`: percentual não resolve contra `max-height`.\n *\n * Sem `overscroll-behavior` de propósito: `contain` cortaria o gesto antes da página, e é ele\n * que dispara o pull-to-refresh quando esta área é o conteúdo principal. Scroller sobreposto\n * (drawer, popover) declara `overscroll-contain` por conta própria.\n */\nexport const ScrollAreaViewport = (props: ScrollAreaViewportProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['fade']);\n\n  const { className, focusRing = true, ...rest } = elementProps;\n\n  return (\n    <BaseScrollArea.Viewport\n      data-component=\"ScrollArea.Viewport\"\n      data-focus-ring={focusRing ? '' : undefined}\n      className={mergeStateClassNames(\n        scrollAreaViewportVariants(variantProps),\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nScrollAreaViewport.displayName = 'ScrollArea.Viewport';\n"],"mappings":";;;;;;AAkCA,MAAM,oBAAoB,iBAA6C;;;;;;;;;;;;AAavE,MAAa,sBAAsB,UAAmC;CACpE,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,MAAM,CAAC;CAEtE,MAAM,EAAE,WAAW,YAAY,MAAM,GAAG,SAAS;CAEjD,OACE,oBAACA,WAAe,UAAhB;EACE,kBAAe;EACf,mBAAiB,YAAY,KAAK,KAAA;EAClC,WAAW,qBACT,2BAA2B,YAAY,GACvC,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,mBAAmB,cAAc"}

package/dist/components/layout/separator/separator.d.ts

@@ -1,5 +1,5 @@
 import { SeparatorVariants } from "./separator-variants.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { Separator as Separator$1 } from "@base-ui/react/separator";
 //#region src/components/layout/separator/separator.d.ts
 export type SeparatorProps = MergeOverride<Separator$1.Props, SeparatorVariants>;

package/dist/components/layout/separator/separator.js

@@ -1,6 +1,6 @@
 import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
 import { separatorVariants } from "./separator-variants.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { jsx } from "react/jsx-runtime";
 import { Separator as Separator$1 } from "@base-ui/react/separator";
 //#region src/components/layout/separator/separator.tsx

package/dist/components/layout/separator/separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"separator.js","names":["BaseSeparator"],"sources":["../../../../src/components/layout/separator/separator.tsx"],"sourcesContent":["import { Separator as BaseSeparator } from '@base-ui/react/separator';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeStateClassNames } from '#utils';\nimport {\n  type SeparatorVariants,\n  separatorVariants,\n} from './separator-variants';\n\nexport type SeparatorProps = MergeOverride<\n  BaseSeparator.Props,\n  SeparatorVariants\n>;\n\nexport type SeparatorState = BaseSeparator.State;\n\nconst splitVariantProps = createSplitProps<SeparatorVariants>();\n\n/**\n * Linha que divide conteúdo. O Base UI escreve `role=\"separator\"` e `aria-orientation`.\n *\n * `orientation` (padrão `horizontal`) é prop do Base UI e chega às classes pelo\n * `data-orientation`. Na vertical, a linha estica pela altura do pai flex (`self-stretch`);\n * fora de um flex, a altura fica com quem usa.\n */\nexport const Separator = (props: SeparatorProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n    'size',\n    'variant',\n  ]);\n  const { className, ...rest } = elementProps;\n\n  return (\n    <BaseSeparator\n      data-component=\"Separator\"\n      className={mergeStateClassNames(\n        separatorVariants(variantProps),\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nSeparator.displayName = 'Separator';\n"],"mappings":";;;;;;AAeA,MAAM,oBAAoB,iBAAoC;;;;;;;;AAS9D,MAAa,aAAa,UAA0B;CAClD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO;EAC5D;EACA;EACA;CACF,CAAC;CACD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,aAAD;EACE,kBAAe;EACf,WAAW,qBACT,kBAAkB,YAAY,GAC9B,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,UAAU,cAAc"}
+{"version":3,"file":"separator.js","names":["BaseSeparator"],"sources":["../../../../src/components/layout/separator/separator.tsx"],"sourcesContent":["import { Separator as BaseSeparator } from '@base-ui/react/separator';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { mergeStateClassNames } from '#utils';\nimport {\n  type SeparatorVariants,\n  separatorVariants,\n} from './separator-variants';\n\nexport type SeparatorProps = MergeOverride<\n  BaseSeparator.Props,\n  SeparatorVariants\n>;\n\nexport type SeparatorState = BaseSeparator.State;\n\nconst splitVariantProps = createSplitProps<SeparatorVariants>();\n\n/**\n * Linha que divide conteúdo. O Base UI escreve `role=\"separator\"` e `aria-orientation`.\n *\n * `orientation` (padrão `horizontal`) é prop do Base UI e chega às classes pelo\n * `data-orientation`. Na vertical, a linha estica pela altura do pai flex (`self-stretch`);\n * fora de um flex, a altura fica com quem usa.\n */\nexport const Separator = (props: SeparatorProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n    'size',\n    'variant',\n  ]);\n  const { className, ...rest } = elementProps;\n\n  return (\n    <BaseSeparator\n      data-component=\"Separator\"\n      className={mergeStateClassNames(\n        separatorVariants(variantProps),\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nSeparator.displayName = 'Separator';\n"],"mappings":";;;;;;AAkBA,MAAM,oBAAoB,iBAAoC;;;;;;;;AAS9D,MAAa,aAAa,UAA0B;CAClD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO;EAC5D;EACA;EACA;CACF,CAAC;CACD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,aAAD;EACE,kBAAe;EACf,WAAW,qBACT,kBAAkB,YAAY,GAC9B,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,UAAU,cAAc"}

package/dist/components/layout/splitter/splitter-panel.d.ts

@@ -1,4 +1,4 @@
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { useRender } from "@base-ui/react";
 import * as ZagSplitter from "@zag-js/splitter";
 //#region src/components/layout/splitter/splitter-panel.d.ts

package/dist/components/layout/splitter/splitter-panel.js

@@ -1,6 +1,6 @@
 import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
 import { useSplitterContext } from "./use-splitter-context.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { mergeProps, useRender } from "@base-ui/react";
 import * as ZagSplitter from "@zag-js/splitter";
 //#region src/components/layout/splitter/splitter-panel.tsx

package/dist/components/layout/splitter/splitter-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"splitter-panel.js","names":[],"sources":["../../../../src/components/layout/splitter/splitter-panel.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport * as ZagSplitter from '@zag-js/splitter';\nimport { mergeTwClassNames } from '#utils';\nimport { useSplitterContext } from './use-splitter-context';\n\n/**\n * Props do `Splitter.Panel`: o `id` do painel e as props do elemento\n * renderizado.\n */\nexport type SplitterPanelProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  ZagSplitter.PanelProps\n>;\n\nconst splitPanelProps = createSplitProps<ZagSplitter.PanelProps>();\n\n/**\n * Painel redimensionável.\n *\n * O `id` liga o painel à entrada de mesmo `id` em `panels`, no `Splitter.Root`\n * — não é o `id` do elemento, que o Zag gera.\n *\n * O Zag escreve inline o tamanho (`flex-grow` em %, `flex-basis: 0`) e\n * `overflow: hidden`: conteúdo que rola precisa de uma área de rolagem dentro.\n * Um `style` passado aqui sobrescreve o do Zag chave a chave.\n *\n * O painel não declara `display`, então `hidden` o esconde, e os visíveis\n * dividem o espaço na proporção dos próprios tamanhos. O Zag continua contando\n * o escondido: esconda junto o puxador vizinho.\n */\nexport const SplitterPanel = (props: SplitterPanelProps) => {\n  const [panelProps, elementProps] = splitPanelProps(\n    props,\n    ZagSplitter.panelProps,\n  );\n\n  const { render, className, ...rest } = elementProps;\n\n  const splitter = useSplitterContext();\n\n  const zagProps = splitter.getPanelProps(panelProps);\n\n  const baseProps = {\n    'data-component': 'Splitter.Panel',\n    className: mergeTwClassNames([], className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, zagProps, rest),\n  });\n};\n\nSplitterPanel.displayName = 'Splitter.Panel';\n"],"mappings":";;;;;;AAeA,MAAM,kBAAkB,iBAAyC;;;;;;;;;;;;;;;AAgBjE,MAAa,iBAAiB,UAA8B;CAC1D,MAAM,CAAC,YAAY,gBAAgB,gBACjC,OACA,YAAY,UACd;CAEA,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAIvC,MAAM,WAFW,mBAEO,CAAC,CAAC,cAAc,UAAU;CAElD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,GAAG,SAAS;CAC5C;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU,IAAI;CAC7C,CAAC;AACH;AAEA,cAAc,cAAc"}
+{"version":3,"file":"splitter-panel.js","names":[],"sources":["../../../../src/components/layout/splitter/splitter-panel.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport * as ZagSplitter from '@zag-js/splitter';\nimport { mergeTwClassNames } from '#utils';\nimport { useSplitterContext } from './use-splitter-context';\n\n/**\n * Props do `Splitter.Panel`: o `id` do painel e as props do elemento\n * renderizado.\n */\nexport type SplitterPanelProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  ZagSplitter.PanelProps\n>;\n\nconst splitPanelProps = createSplitProps<ZagSplitter.PanelProps>();\n\n/**\n * Painel redimensionável.\n *\n * O `id` liga o painel à entrada de mesmo `id` em `panels`, no `Splitter.Root`\n * — não é o `id` do elemento, que o Zag gera.\n *\n * O Zag escreve inline o tamanho (`flex-grow` em %, `flex-basis: 0`) e\n * `overflow: hidden`: conteúdo que rola precisa de uma área de rolagem dentro.\n * Um `style` passado aqui sobrescreve o do Zag chave a chave.\n *\n * O painel não declara `display`, então `hidden` o esconde, e os visíveis\n * dividem o espaço na proporção dos próprios tamanhos. O Zag continua contando\n * o escondido: esconda junto o puxador vizinho.\n */\nexport const SplitterPanel = (props: SplitterPanelProps) => {\n  const [panelProps, elementProps] = splitPanelProps(\n    props,\n    ZagSplitter.panelProps,\n  );\n\n  const { render, className, ...rest } = elementProps;\n\n  const splitter = useSplitterContext();\n\n  const zagProps = splitter.getPanelProps(panelProps);\n\n  const baseProps = {\n    'data-component': 'Splitter.Panel',\n    className: mergeTwClassNames([], className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, zagProps, rest),\n  });\n};\n\nSplitterPanel.displayName = 'Splitter.Panel';\n"],"mappings":";;;;;;AAkBA,MAAM,kBAAkB,iBAAyC;;;;;;;;;;;;;;;AAgBjE,MAAa,iBAAiB,UAA8B;CAC1D,MAAM,CAAC,YAAY,gBAAgB,gBACjC,OACA,YAAY,UACd;CAEA,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAIvC,MAAM,WAFW,mBAEO,CAAC,CAAC,cAAc,UAAU;CAElD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,GAAG,SAAS;CAC5C;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU,IAAI;CAC7C,CAAC;AACH;AAEA,cAAc,cAAc"}

package/dist/components/layout/splitter/splitter-resize-trigger.d.ts

@@ -1,4 +1,4 @@
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { useRender } from "@base-ui/react";
 import * as ZagSplitter from "@zag-js/splitter";
 //#region src/components/layout/splitter/splitter-resize-trigger.d.ts

package/dist/components/layout/splitter/splitter-resize-trigger.js

@@ -1,6 +1,6 @@
 import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
 import { useSplitterContext } from "./use-splitter-context.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { mergeProps, useRender } from "@base-ui/react";
 import * as ZagSplitter from "@zag-js/splitter";
 //#region src/components/layout/splitter/splitter-resize-trigger.tsx

package/dist/components/layout/splitter/splitter-resize-trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"splitter-resize-trigger.js","names":[],"sources":["../../../../src/components/layout/splitter/splitter-resize-trigger.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport * as ZagSplitter from '@zag-js/splitter';\nimport { mergeTwClassNames } from '#utils';\nimport { useSplitterContext } from './use-splitter-context';\n\n/**\n * Props do `Splitter.ResizeTrigger`: o `id` do par de painéis, o `disabled` e\n * as props do elemento renderizado.\n */\nexport type SplitterResizeTriggerProps = MergeOverride<\n  useRender.ComponentProps<'button'>,\n  ZagSplitter.ResizeTriggerProps\n>;\n\nconst splitResizeTriggerProps =\n  createSplitProps<ZagSplitter.ResizeTriggerProps>();\n\n/**\n * Puxador entre dois painéis.\n *\n * O `id` nomeia o par no formato `antes:depois` (ex.: `nav:content`). Arrasto,\n * setas (1% por tecla, 10% com `Shift`), `Home`/`End` e `F6` entre puxadores\n * vêm do Zag. O rótulo acessível padrão é genérico: passe um `aria-label` que\n * diga o que é redimensionado.\n *\n * **Não ocupa espaço no layout.** A linha de 1px é pintada sobre a última\n * coluna do painel anterior, e a área de toque, de 9px, fica centrada nela: 4px\n * de cada lado, por cima dos dois painéis. Com largura própria, os painéis\n * dividiriam o espaço menos a do puxador, e um tamanho pedido em px sairia\n * menor na tela. Uma barra de rolagem encostada na divisa fica sob a área de\n * toque: afaste-a com padding no painel.\n *\n * Em repouso, só o cursor indica o puxador; o tom aparece no arrasto e no foco\n * pelo teclado, e no foco a linha ganha a cor do anel de foco. O hover não\n * muda nada, e ganha tom por classe no uso.\n */\nexport const SplitterResizeTrigger = (props: SplitterResizeTriggerProps) => {\n  const [triggerProps, elementProps] = splitResizeTriggerProps(\n    props,\n    ZagSplitter.resizeTriggerProps,\n  );\n\n  const { render, className, ...rest } = elementProps;\n\n  const splitter = useSplitterContext();\n\n  const zagProps = splitter.getResizeTriggerProps(triggerProps);\n\n  const baseProps = {\n    'data-component': 'Splitter.ResizeTrigger',\n    // Sem `type`, um `button` dentro de `form` envia o formulário no clique.\n    type: 'button' as const,\n    'aria-label': 'Redimensionar painéis',\n    className: mergeTwClassNames(\n      [\n        'relative',\n        // Por cima dos painéis, inclusive dos filhos posicionados deles: a área\n        // de toque invade os dois lados da divisa.\n        'z-10',\n        'outline-none',\n\n        'data-[orientation=horizontal]:w-0',\n        'data-[orientation=vertical]:h-0',\n\n        // LINHA — 1px sobre a última coluna (ou linha) do painel anterior.\n        'after:absolute',\n        \"after:content-['']\",\n        'after:bg-gray-6',\n\n        'data-[orientation=horizontal]:after:inset-y-0',\n        'data-[orientation=horizontal]:after:-inset-s-px',\n        'data-[orientation=horizontal]:after:w-px',\n\n        'data-[orientation=vertical]:after:inset-x-0',\n        'data-[orientation=vertical]:after:-top-px',\n        'data-[orientation=vertical]:after:h-px',\n\n        // ÁREA DE TOQUE — centrada na linha, não na divisa: a linha está na coluna\n        // antes dela, e 4px + 1px + 4px exigem largura ímpar. Tingida no arrasto e\n        // no foco.\n        'before:absolute',\n        \"before:content-['']\",\n        'before:transition-colors',\n\n        'data-[orientation=horizontal]:before:inset-y-0',\n        'data-[orientation=horizontal]:before:-inset-s-1.25',\n        'data-[orientation=horizontal]:before:w-2.25',\n\n        'data-[orientation=vertical]:before:inset-x-0',\n        'data-[orientation=vertical]:before:-top-1.25',\n        'data-[orientation=vertical]:before:h-2.25',\n\n        // Sem tom no hover: a área de toque cobre a borda dos dois painéis, e\n        // passar o mouse por ali não deve acender nada. O Zag foca o puxador no\n        // clique sem `focus-visible`, então o tom de foco só vem do teclado.\n        'focus-visible:before:bg-gray-6/50',\n        // O tom da área sozinho tem pouco contraste: a linha marca o foco.\n        'focus-visible:after:bg-gray-9',\n        'data-dragging:before:bg-gray-6',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'button',\n    props: mergeProps(baseProps, zagProps, rest),\n  });\n};\n\nSplitterResizeTrigger.displayName = 'Splitter.ResizeTrigger';\n"],"mappings":";;;;;;AAeA,MAAM,0BACJ,iBAAiD;;;;;;;;;;;;;;;;;;;;AAqBnD,MAAa,yBAAyB,UAAsC;CAC1E,MAAM,CAAC,cAAc,gBAAgB,wBACnC,OACA,YAAY,kBACd;CAEA,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAIvC,MAAM,WAFW,mBAEO,CAAC,CAAC,sBAAsB,YAAY;CAE5D,MAAM,YAAY;EAChB,kBAAkB;EAElB,MAAM;EACN,cAAc;EACd,WAAW,kBACT;GACE;GAGA;GACA;GAEA;GACA;GAGA;GACA;GACA;GAEA;GACA;GACA;GAEA;GACA;GACA;GAKA;GACA;GACA;GAEA;GACA;GACA;GAEA;GACA;GACA;GAKA;GAEA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU,IAAI;CAC7C,CAAC;AACH;AAEA,sBAAsB,cAAc"}
+{"version":3,"file":"splitter-resize-trigger.js","names":[],"sources":["../../../../src/components/layout/splitter/splitter-resize-trigger.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport * as ZagSplitter from '@zag-js/splitter';\nimport { mergeTwClassNames } from '#utils';\nimport { useSplitterContext } from './use-splitter-context';\n\n/**\n * Props do `Splitter.ResizeTrigger`: o `id` do par de painéis, o `disabled` e\n * as props do elemento renderizado.\n */\nexport type SplitterResizeTriggerProps = MergeOverride<\n  useRender.ComponentProps<'button'>,\n  ZagSplitter.ResizeTriggerProps\n>;\n\nconst splitResizeTriggerProps =\n  createSplitProps<ZagSplitter.ResizeTriggerProps>();\n\n/**\n * Puxador entre dois painéis.\n *\n * O `id` nomeia o par no formato `antes:depois` (ex.: `nav:content`). Arrasto,\n * setas (1% por tecla, 10% com `Shift`), `Home`/`End` e `F6` entre puxadores\n * vêm do Zag. O rótulo acessível padrão é genérico: passe um `aria-label` que\n * diga o que é redimensionado.\n *\n * **Não ocupa espaço no layout.** A linha de 1px é pintada sobre a última\n * coluna do painel anterior, e a área de toque, de 9px, fica centrada nela: 4px\n * de cada lado, por cima dos dois painéis. Com largura própria, os painéis\n * dividiriam o espaço menos a do puxador, e um tamanho pedido em px sairia\n * menor na tela. Uma barra de rolagem encostada na divisa fica sob a área de\n * toque: afaste-a com padding no painel.\n *\n * Em repouso, só o cursor indica o puxador; o tom aparece no arrasto e no foco\n * pelo teclado, e no foco a linha ganha a cor do anel de foco. O hover não\n * muda nada, e ganha tom por classe no uso.\n */\nexport const SplitterResizeTrigger = (props: SplitterResizeTriggerProps) => {\n  const [triggerProps, elementProps] = splitResizeTriggerProps(\n    props,\n    ZagSplitter.resizeTriggerProps,\n  );\n\n  const { render, className, ...rest } = elementProps;\n\n  const splitter = useSplitterContext();\n\n  const zagProps = splitter.getResizeTriggerProps(triggerProps);\n\n  const baseProps = {\n    'data-component': 'Splitter.ResizeTrigger',\n    // Sem `type`, um `button` dentro de `form` envia o formulário no clique.\n    type: 'button' as const,\n    'aria-label': 'Redimensionar painéis',\n    className: mergeTwClassNames(\n      [\n        'relative',\n        // Por cima dos painéis, inclusive dos filhos posicionados deles: a área\n        // de toque invade os dois lados da divisa.\n        'z-10',\n        'outline-none',\n\n        'data-[orientation=horizontal]:w-0',\n        'data-[orientation=vertical]:h-0',\n\n        // LINHA — 1px sobre a última coluna (ou linha) do painel anterior.\n        'after:absolute',\n        \"after:content-['']\",\n        'after:bg-gray-6',\n\n        'data-[orientation=horizontal]:after:inset-y-0',\n        'data-[orientation=horizontal]:after:-inset-s-px',\n        'data-[orientation=horizontal]:after:w-px',\n\n        'data-[orientation=vertical]:after:inset-x-0',\n        'data-[orientation=vertical]:after:-top-px',\n        'data-[orientation=vertical]:after:h-px',\n\n        // ÁREA DE TOQUE — centrada na linha, não na divisa: a linha está na coluna\n        // antes dela, e 4px + 1px + 4px exigem largura ímpar. Tingida no arrasto e\n        // no foco.\n        'before:absolute',\n        \"before:content-['']\",\n        'before:transition-colors',\n\n        'data-[orientation=horizontal]:before:inset-y-0',\n        'data-[orientation=horizontal]:before:-inset-s-1.25',\n        'data-[orientation=horizontal]:before:w-2.25',\n\n        'data-[orientation=vertical]:before:inset-x-0',\n        'data-[orientation=vertical]:before:-top-1.25',\n        'data-[orientation=vertical]:before:h-2.25',\n\n        // Sem tom no hover: a área de toque cobre a borda dos dois painéis, e\n        // passar o mouse por ali não deve acender nada. O Zag foca o puxador no\n        // clique sem `focus-visible`, então o tom de foco só vem do teclado.\n        'focus-visible:before:bg-gray-6/50',\n        // O tom da área sozinho tem pouco contraste: a linha marca o foco.\n        'focus-visible:after:bg-gray-9',\n        'data-dragging:before:bg-gray-6',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'button',\n    props: mergeProps(baseProps, zagProps, rest),\n  });\n};\n\nSplitterResizeTrigger.displayName = 'Splitter.ResizeTrigger';\n"],"mappings":";;;;;;AAkBA,MAAM,0BACJ,iBAAiD;;;;;;;;;;;;;;;;;;;;AAqBnD,MAAa,yBAAyB,UAAsC;CAC1E,MAAM,CAAC,cAAc,gBAAgB,wBACnC,OACA,YAAY,kBACd;CAEA,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAIvC,MAAM,WAFW,mBAEO,CAAC,CAAC,sBAAsB,YAAY;CAE5D,MAAM,YAAY;EAChB,kBAAkB;EAElB,MAAM;EACN,cAAc;EACd,WAAW,kBACT;GACE;GAGA;GACA;GAEA;GACA;GAGA;GACA;GACA;GAEA;GACA;GACA;GAEA;GACA;GACA;GAKA;GACA;GACA;GAEA;GACA;GACA;GAEA;GACA;GACA;GAKA;GAEA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU,IAAI;CAC7C,CAAC;AACH;AAEA,sBAAsB,cAAc"}

package/dist/components/layout/splitter/splitter-root-provider.d.ts

@@ -1,5 +1,5 @@
 import { UseSplitterReturn } from "./use-splitter.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { useRender } from "@base-ui/react";
 //#region src/components/layout/splitter/splitter-root-provider.d.ts
 type RootProviderProps = {

package/dist/components/layout/splitter/splitter-root-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"splitter-root-provider.js","names":[],"sources":["../../../../src/components/layout/splitter/splitter-root-provider.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\nimport type { UseSplitterReturn } from './use-splitter';\nimport { SplitterContextProvider } from './use-splitter-context';\n\ntype RootProviderProps = {\n  /**\n   * Instância do Splitter criada com o hook `useSplitter`.\n   */\n  value: UseSplitterReturn;\n};\n\n/**\n * Props do `Splitter.RootProvider`: a instância do Splitter e as props do\n * elemento renderizado.\n */\nexport type SplitterRootProviderProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  RootProviderProps\n>;\n\n/**\n * Raiz do Splitter alimentada por uma instância criada fora dela.\n *\n * Recebe em `value` o retorno de `useSplitter`, o que permite ler os tamanhos\n * e comandar os painéis de componentes irmãos — um botão que restaura o\n * layout, ou um indicador da largura atual. Os estilos inline da raiz são os\n * mesmos do `Splitter.Root`.\n *\n * @example\n * ```tsx\n * const splitter = useSplitter({ panels: [{ id: 'a' }, { id: 'b' }] });\n *\n * return (\n *   <Splitter.RootProvider value={splitter}>\n *     <Splitter.Panel id=\"a\">A</Splitter.Panel>\n *     <Splitter.ResizeTrigger id=\"a:b\" />\n *     <Splitter.Panel id=\"b\">B</Splitter.Panel>\n *   </Splitter.RootProvider>\n * );\n * ```\n */\nexport const SplitterRootProvider = (props: SplitterRootProviderProps) => {\n  const { value: splitter, render, className, ...rest } = props;\n\n  const zagProps = splitter.getRootProps();\n\n  const baseProps = {\n    'data-component': 'Splitter.RootProvider',\n    className: mergeTwClassNames([], className),\n  };\n\n  return (\n    <SplitterContextProvider value={splitter}>\n      {useRender({\n        render,\n        defaultTagName: 'div',\n        props: mergeProps(baseProps, zagProps, rest),\n      })}\n    </SplitterContextProvider>\n  );\n};\n\nSplitterRootProvider.displayName = 'Splitter.RootProvider';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,wBAAwB,UAAqC;CACxE,MAAM,EAAE,OAAO,UAAU,QAAQ,WAAW,GAAG,SAAS;CAExD,MAAM,WAAW,SAAS,aAAa;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,GAAG,SAAS;CAC5C;CAEA,OACE,oBAAC,yBAAD;EAAyB,OAAO;EAC7B,UAAA,UAAU;GACT;GACA,gBAAgB;GAChB,OAAO,WAAW,WAAW,UAAU,IAAI;EAC7C,CAAC;CACsB,CAAA;AAE7B;AAEA,qBAAqB,cAAc"}
+{"version":3,"file":"splitter-root-provider.js","names":[],"sources":["../../../../src/components/layout/splitter/splitter-root-provider.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport type { MergeOverride } from '@lucasbernardosn/ts-utils';\nimport { mergeTwClassNames } from '#utils';\nimport type { UseSplitterReturn } from './use-splitter';\nimport { SplitterContextProvider } from './use-splitter-context';\n\ntype RootProviderProps = {\n  /**\n   * Instância do Splitter criada com o hook `useSplitter`.\n   */\n  value: UseSplitterReturn;\n};\n\n/**\n * Props do `Splitter.RootProvider`: a instância do Splitter e as props do\n * elemento renderizado.\n */\nexport type SplitterRootProviderProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  RootProviderProps\n>;\n\n/**\n * Raiz do Splitter alimentada por uma instância criada fora dela.\n *\n * Recebe em `value` o retorno de `useSplitter`, o que permite ler os tamanhos\n * e comandar os painéis de componentes irmãos — um botão que restaura o\n * layout, ou um indicador da largura atual. Os estilos inline da raiz são os\n * mesmos do `Splitter.Root`.\n *\n * @example\n * ```tsx\n * const splitter = useSplitter({ panels: [{ id: 'a' }, { id: 'b' }] });\n *\n * return (\n *   <Splitter.RootProvider value={splitter}>\n *     <Splitter.Panel id=\"a\">A</Splitter.Panel>\n *     <Splitter.ResizeTrigger id=\"a:b\" />\n *     <Splitter.Panel id=\"b\">B</Splitter.Panel>\n *   </Splitter.RootProvider>\n * );\n * ```\n */\nexport const SplitterRootProvider = (props: SplitterRootProviderProps) => {\n  const { value: splitter, render, className, ...rest } = props;\n\n  const zagProps = splitter.getRootProps();\n\n  const baseProps = {\n    'data-component': 'Splitter.RootProvider',\n    className: mergeTwClassNames([], className),\n  };\n\n  return (\n    <SplitterContextProvider value={splitter}>\n      {useRender({\n        render,\n        defaultTagName: 'div',\n        props: mergeProps(baseProps, zagProps, rest),\n      })}\n    </SplitterContextProvider>\n  );\n};\n\nSplitterRootProvider.displayName = 'Splitter.RootProvider';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,wBAAwB,UAAqC;CACxE,MAAM,EAAE,OAAO,UAAU,QAAQ,WAAW,GAAG,SAAS;CAExD,MAAM,WAAW,SAAS,aAAa;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,GAAG,SAAS;CAC5C;CAEA,OACE,oBAAC,yBAAD;EAAyB,OAAO;EAC7B,UAAA,UAAU;GACT;GACA,gBAAgB;GAChB,OAAO,WAAW,WAAW,UAAU,IAAI;EAC7C,CAAC;CACsB,CAAA;AAE7B;AAEA,qBAAqB,cAAc"}

package/dist/components/layout/splitter/splitter-root.d.ts

@@ -1,5 +1,5 @@
 import { UseSplitterProps } from "./use-splitter.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { useRender } from "@base-ui/react";
 //#region src/components/layout/splitter/splitter-root.d.ts
 /**

package/dist/components/layout/splitter/splitter-root.js

@@ -1,7 +1,7 @@
 import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
 import { SplitterContextProvider } from "./use-splitter-context.js";
 import { useSplitter } from "./use-splitter.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { mergeProps, useRender } from "@base-ui/react";
 import { jsx } from "react/jsx-runtime";
 import * as ZagSplitter from "@zag-js/splitter";

package/dist/components/layout/splitter/splitter-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"splitter-root.js","names":[],"sources":["../../../../src/components/layout/splitter/splitter-root.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport * as ZagSplitter from '@zag-js/splitter';\nimport { mergeTwClassNames } from '#utils';\nimport { type UseSplitterProps, useSplitter } from './use-splitter';\nimport { SplitterContextProvider } from './use-splitter-context';\n\n/**\n * Props do `Splitter.Root`: as opções do Splitter e as props do elemento\n * renderizado.\n */\nexport type SplitterRootProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  UseSplitterProps\n>;\n\nconst splitRootProps = createSplitProps<UseSplitterProps>();\n\n/**\n * Raiz do Splitter.\n *\n * Cria a máquina de redimensionamento e disponibiliza os tamanhos e os\n * comandos para as partes aninhadas. Em `panels` ficam as restrições de cada\n * painel; `minSize`, `maxSize` e `defaultSize` aceitam número (%) ou texto com\n * unidade (`'240px'`, `'20rem'`), convertido para % a cada medida da raiz.\n *\n * O Zag escreve inline `display: flex`, a direção, `width`/`height: 100%` e\n * `overflow: hidden` — classe nenhuma muda isso. Numa coluna flex, a raiz\n * encolhe para caber ao lado dos irmãos: o `overflow: hidden` zera o mínimo\n * automático, e o `height: 100%` vira só a base.\n *\n * Use o `Splitter.RootProvider` no lugar deste componente quando os tamanhos\n * precisarem ser lidos ou comandados de fora da própria subárvore.\n *\n * @example\n * ```tsx\n * <Splitter.Root\n *   panels={[{ id: 'a', minSize: 20 }, { id: 'b', minSize: 20 }]}\n *   defaultSize={[40, 60]}\n * >\n *   <Splitter.Panel id=\"a\">A</Splitter.Panel>\n *   <Splitter.ResizeTrigger id=\"a:b\" />\n *   <Splitter.Panel id=\"b\">B</Splitter.Panel>\n * </Splitter.Root>\n * ```\n */\nexport const SplitterRoot = (props: SplitterRootProps) => {\n  const [useSplitterProps, elementProps] = splitRootProps(\n    props,\n    ZagSplitter.props,\n  );\n\n  const { render, className, ...rest } = elementProps;\n\n  const splitter = useSplitter(useSplitterProps);\n\n  const zagProps = splitter.getRootProps();\n\n  const baseProps = {\n    'data-component': 'Splitter.Root',\n    className: mergeTwClassNames([], className),\n  };\n\n  return (\n    <SplitterContextProvider value={splitter}>\n      {useRender({\n        render,\n        defaultTagName: 'div',\n        props: mergeProps(baseProps, zagProps, rest),\n      })}\n    </SplitterContextProvider>\n  );\n};\n\nSplitterRoot.displayName = 'Splitter.Root';\n"],"mappings":";;;;;;;;AAgBA,MAAM,iBAAiB,iBAAmC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8B1D,MAAa,gBAAgB,UAA6B;CACxD,MAAM,CAAC,kBAAkB,gBAAgB,eACvC,OACA,YAAY,KACd;CAEA,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,WAAW,YAAY,gBAAgB;CAE7C,MAAM,WAAW,SAAS,aAAa;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,GAAG,SAAS;CAC5C;CAEA,OACE,oBAAC,yBAAD;EAAyB,OAAO;EAC7B,UAAA,UAAU;GACT;GACA,gBAAgB;GAChB,OAAO,WAAW,WAAW,UAAU,IAAI;EAC7C,CAAC;CACsB,CAAA;AAE7B;AAEA,aAAa,cAAc"}
+{"version":3,"file":"splitter-root.js","names":[],"sources":["../../../../src/components/layout/splitter/splitter-root.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport * as ZagSplitter from '@zag-js/splitter';\nimport { mergeTwClassNames } from '#utils';\nimport { type UseSplitterProps, useSplitter } from './use-splitter';\nimport { SplitterContextProvider } from './use-splitter-context';\n\n/**\n * Props do `Splitter.Root`: as opções do Splitter e as props do elemento\n * renderizado.\n */\nexport type SplitterRootProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  UseSplitterProps\n>;\n\nconst splitRootProps = createSplitProps<UseSplitterProps>();\n\n/**\n * Raiz do Splitter.\n *\n * Cria a máquina de redimensionamento e disponibiliza os tamanhos e os\n * comandos para as partes aninhadas. Em `panels` ficam as restrições de cada\n * painel; `minSize`, `maxSize` e `defaultSize` aceitam número (%) ou texto com\n * unidade (`'240px'`, `'20rem'`), convertido para % a cada medida da raiz.\n *\n * O Zag escreve inline `display: flex`, a direção, `width`/`height: 100%` e\n * `overflow: hidden` — classe nenhuma muda isso. Numa coluna flex, a raiz\n * encolhe para caber ao lado dos irmãos: o `overflow: hidden` zera o mínimo\n * automático, e o `height: 100%` vira só a base.\n *\n * Use o `Splitter.RootProvider` no lugar deste componente quando os tamanhos\n * precisarem ser lidos ou comandados de fora da própria subárvore.\n *\n * @example\n * ```tsx\n * <Splitter.Root\n *   panels={[{ id: 'a', minSize: 20 }, { id: 'b', minSize: 20 }]}\n *   defaultSize={[40, 60]}\n * >\n *   <Splitter.Panel id=\"a\">A</Splitter.Panel>\n *   <Splitter.ResizeTrigger id=\"a:b\" />\n *   <Splitter.Panel id=\"b\">B</Splitter.Panel>\n * </Splitter.Root>\n * ```\n */\nexport const SplitterRoot = (props: SplitterRootProps) => {\n  const [useSplitterProps, elementProps] = splitRootProps(\n    props,\n    ZagSplitter.props,\n  );\n\n  const { render, className, ...rest } = elementProps;\n\n  const splitter = useSplitter(useSplitterProps);\n\n  const zagProps = splitter.getRootProps();\n\n  const baseProps = {\n    'data-component': 'Splitter.Root',\n    className: mergeTwClassNames([], className),\n  };\n\n  return (\n    <SplitterContextProvider value={splitter}>\n      {useRender({\n        render,\n        defaultTagName: 'div',\n        props: mergeProps(baseProps, zagProps, rest),\n      })}\n    </SplitterContextProvider>\n  );\n};\n\nSplitterRoot.displayName = 'Splitter.Root';\n"],"mappings":";;;;;;;;AAmBA,MAAM,iBAAiB,iBAAmC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8B1D,MAAa,gBAAgB,UAA6B;CACxD,MAAM,CAAC,kBAAkB,gBAAgB,eACvC,OACA,YAAY,KACd;CAEA,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,WAAW,YAAY,gBAAgB;CAE7C,MAAM,WAAW,SAAS,aAAa;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,GAAG,SAAS;CAC5C;CAEA,OACE,oBAAC,yBAAD;EAAyB,OAAO;EAC7B,UAAA,UAAU;GACT;GACA,gBAAgB;GAChB,OAAO,WAAW,WAAW,UAAU,IAAI;EAC7C,CAAC;CACsB,CAAA;AAE7B;AAEA,aAAa,cAAc"}

package/dist/components/layout/splitter/use-splitter.d.ts

@@ -1,4 +1,4 @@
-import { Optional } from "@lucasbernardosn/utils";
+import { Optional } from "@lucasbernardosn/ts-utils";
 import { PropTypes } from "@zag-js/react";
 import * as ZagSplitter from "@zag-js/splitter";
 //#region src/components/layout/splitter/use-splitter.d.ts

package/dist/components/layout/splitter/use-splitter.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-splitter.js","names":[],"sources":["../../../../src/components/layout/splitter/use-splitter.ts"],"sourcesContent":["import type { Optional } from '@lucasbernardosn/utils';\nimport { normalizeProps, type PropTypes, useMachine } from '@zag-js/react';\nimport * as ZagSplitter from '@zag-js/splitter';\nimport { useId } from 'react';\n\n/**\n * Propriedades do hook `useSplitter`.\n *\n * São as mesmas opções aceitas pelo `Splitter.Root`, com o `id` opcional — um\n * id único é gerado quando ele não é informado.\n */\nexport type UseSplitterProps = Optional<ZagSplitter.Props, 'id'>;\n\n/**\n * Retorno do hook `useSplitter`: a API completa do Splitter, com os tamanhos\n * atuais, o estado de arrasto, os comandos (`setSizes`, `resetSizes`,\n * `collapsePanel`…) e as props de cada parte.\n */\nexport type UseSplitterReturn = ZagSplitter.Api<PropTypes>;\n\n/**\n * Cria e gerencia o estado de um Splitter.\n *\n * Use junto do `Splitter.RootProvider` quando for preciso ler ou comandar os\n * tamanhos de fora da subárvore do componente. Nos casos comuns prefira o\n * `Splitter.Root`, que chama este hook internamente.\n *\n * O componente que chama o hook re-renderiza a cada quadro do arrasto. Quando\n * ele monta uma árvore grande, prefira o `Splitter.Root` e leia a API com\n * `useSplitterContext` num componente pequeno, só onde ela é usada.\n *\n * @example\n * ```tsx\n * const splitter = useSplitter({\n *   panels: [{ id: 'a' }, { id: 'b' }],\n *   defaultSize: [50, 50],\n * });\n *\n * return (\n *   <>\n *     <button onClick={() => splitter.resetSizes()}>Restaurar</button>\n *\n *     <Splitter.RootProvider value={splitter}>…</Splitter.RootProvider>\n *   </>\n * );\n * ```\n */\nexport const useSplitter = (props: UseSplitterProps): UseSplitterReturn => {\n  // Id de fallback: só é usado quando `props.id` não é informado.\n  const id = useId();\n\n  const service = useMachine(ZagSplitter.machine, { id, ...props });\n\n  return ZagSplitter.connect(service, normalizeProps);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,eAAe,UAA+C;CAEzE,MAAM,KAAK,MAAM;CAEjB,MAAM,UAAU,WAAW,YAAY,SAAS;EAAE;EAAI,GAAG;CAAM,CAAC;CAEhE,OAAO,YAAY,QAAQ,SAAS,cAAc;AACpD"}
+{"version":3,"file":"use-splitter.js","names":[],"sources":["../../../../src/components/layout/splitter/use-splitter.ts"],"sourcesContent":["import type { Optional } from '@lucasbernardosn/ts-utils';\nimport { normalizeProps, type PropTypes, useMachine } from '@zag-js/react';\nimport * as ZagSplitter from '@zag-js/splitter';\nimport { useId } from 'react';\n\n/**\n * Propriedades do hook `useSplitter`.\n *\n * São as mesmas opções aceitas pelo `Splitter.Root`, com o `id` opcional — um\n * id único é gerado quando ele não é informado.\n */\nexport type UseSplitterProps = Optional<ZagSplitter.Props, 'id'>;\n\n/**\n * Retorno do hook `useSplitter`: a API completa do Splitter, com os tamanhos\n * atuais, o estado de arrasto, os comandos (`setSizes`, `resetSizes`,\n * `collapsePanel`…) e as props de cada parte.\n */\nexport type UseSplitterReturn = ZagSplitter.Api<PropTypes>;\n\n/**\n * Cria e gerencia o estado de um Splitter.\n *\n * Use junto do `Splitter.RootProvider` quando for preciso ler ou comandar os\n * tamanhos de fora da subárvore do componente. Nos casos comuns prefira o\n * `Splitter.Root`, que chama este hook internamente.\n *\n * O componente que chama o hook re-renderiza a cada quadro do arrasto. Quando\n * ele monta uma árvore grande, prefira o `Splitter.Root` e leia a API com\n * `useSplitterContext` num componente pequeno, só onde ela é usada.\n *\n * @example\n * ```tsx\n * const splitter = useSplitter({\n *   panels: [{ id: 'a' }, { id: 'b' }],\n *   defaultSize: [50, 50],\n * });\n *\n * return (\n *   <>\n *     <button onClick={() => splitter.resetSizes()}>Restaurar</button>\n *\n *     <Splitter.RootProvider value={splitter}>…</Splitter.RootProvider>\n *   </>\n * );\n * ```\n */\nexport const useSplitter = (props: UseSplitterProps): UseSplitterReturn => {\n  // Id de fallback: só é usado quando `props.id` não é informado.\n  const id = useId();\n\n  const service = useMachine(ZagSplitter.machine, { id, ...props });\n\n  return ZagSplitter.connect(service, normalizeProps);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,eAAe,UAA+C;CAEzE,MAAM,KAAK,MAAM;CAEjB,MAAM,UAAU,WAAW,YAAY,SAAS;EAAE;EAAI,GAAG;CAAM,CAAC;CAEhE,OAAO,YAAY,QAAQ,SAAS,cAAc;AACpD"}

package/dist/components/layout/stack/stack.d.ts

@@ -1,5 +1,5 @@
 import { StackVariants } from "./stack-variants.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { useRender } from "@base-ui/react";
 //#region src/components/layout/stack/stack.d.ts
 export type StackProps = MergeOverride<useRender.ComponentProps<'div'>, StackVariants>;

package/dist/components/layout/stack/stack.js

@@ -1,6 +1,6 @@
 import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
 import { stackVariants } from "./stack-variants.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { mergeProps, useRender } from "@base-ui/react";
 //#region src/components/layout/stack/stack.tsx
 const splitVariantProps = createSplitProps();

package/dist/components/layout/stack/stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"stack.js","names":[],"sources":["../../../../src/components/layout/stack/stack.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\nimport { type StackVariants, stackVariants } from './stack-variants';\n\nexport type StackProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  StackVariants\n>;\n\nconst splitVariantProps = createSplitProps<StackVariants>();\n\n/**\n * Empilha os itens numa direção, com espaçamento entre eles.\n */\nexport const Stack = (props: StackProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['direction']);\n\n  const { render, className, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'Stack',\n    className: mergeTwClassNames(stackVariants(variantProps), className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nStack.displayName = 'Stack';\n"],"mappings":";;;;;AAUA,MAAM,oBAAoB,iBAAgC;;;;AAK1D,MAAa,SAAS,UAAsB;CAC1C,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,WAAW,CAAC;CAE3E,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,cAAc,YAAY,GAAG,SAAS;CACrE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,MAAM,cAAc"}
+{"version":3,"file":"stack.js","names":[],"sources":["../../../../src/components/layout/stack/stack.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { mergeTwClassNames } from '#utils';\nimport { type StackVariants, stackVariants } from './stack-variants';\n\nexport type StackProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  StackVariants\n>;\n\nconst splitVariantProps = createSplitProps<StackVariants>();\n\n/**\n * Empilha os itens numa direção, com espaçamento entre eles.\n */\nexport const Stack = (props: StackProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['direction']);\n\n  const { render, className, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'Stack',\n    className: mergeTwClassNames(stackVariants(variantProps), className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nStack.displayName = 'Stack';\n"],"mappings":";;;;;AAaA,MAAM,oBAAoB,iBAAgC;;;;AAK1D,MAAa,SAAS,UAAsB;CAC1C,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,WAAW,CAAC;CAE3E,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,cAAc,YAAY,GAAG,SAAS;CACrE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,MAAM,cAAc"}

package/dist/components/overlays/action-bar/action-bar-popup-variants.d.ts

@@ -14,7 +14,7 @@
  * Tailwind os dois eixos compõem a mesma propriedade `translate`, então um não anula o outro.
  */
 export declare const actionBarPopupVariants: (props?: ({
-  placement?: "bottom-start" | "bottom-end" | "bottom" | null | undefined;
+  placement?: "bottom" | "bottom-start" | "bottom-end" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=action-bar-popup-variants.d.ts.map

package/dist/components/overlays/action-bar/action-bar-root.d.ts

@@ -1,5 +1,5 @@
 import { ActionBarVariants } from "./use-action-bar-context.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/components/overlays/action-bar/action-bar-root.d.ts
 export type ActionBarRootProps = MergeOverride<Dialog.Root.Props, ActionBarVariants>;

package/dist/components/overlays/action-bar/action-bar-root.js

@@ -1,5 +1,5 @@
 import { ActionBarContextProvider } from "./use-action-bar-context.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { jsx } from "react/jsx-runtime";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/components/overlays/action-bar/action-bar-root.tsx

package/dist/components/overlays/action-bar/action-bar-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"action-bar-root.js","names":["BaseDialog"],"sources":["../../../../src/components/overlays/action-bar/action-bar-root.tsx"],"sourcesContent":["import { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport {\n  ActionBarContextProvider,\n  type ActionBarVariants,\n} from './use-action-bar-context';\n\nexport type ActionBarRootProps = MergeOverride<\n  BaseDialog.Root.Props,\n  ActionBarVariants\n>;\n\nexport type ActionBarRootState = BaseDialog.Root.State;\n\nexport type ActionBarRootActions = BaseDialog.Root.Actions;\n\nexport type ActionBarRootChangeEventDetails =\n  BaseDialog.Root.ChangeEventDetails;\n\nexport type ActionBarRootChangeEventReason = BaseDialog.Root.ChangeEventReason;\n\nconst splitVariantProps = createSplitProps<ActionBarVariants>();\n\n/**\n * Estado da barra de ações. Não renderiza elemento.\n *\n * É um dialog não modal do Base UI, sem trigger: a barra abre pelo `open`, ligado à seleção de\n * quem usa. Fecha só pelo `Esc` e pelo `Close`; o clique fora e o foco saindo da barra não\n * fecham (`disablePointerDismissal`), porque selecionar outra linha é um clique fora.\n *\n * A barra continua montada durante a animação de saída. Um texto derivado da seleção (\"3\n * selecionados\") vira \"0 selecionados\" enquanto ela some, e a largura muda junto: mostre a\n * última contagem maior que zero.\n *\n * @example\n * ```tsx\n * <ActionBar.Root\n *   open={selected.length > 0}\n *   onOpenChange={(open) => !open && clearSelection()}\n * >\n *   <ActionBar.Portal>\n *     <ActionBar.Popup>\n *       <ActionBar.SelectionTrigger>\n *         {selected.length} selecionados\n *       </ActionBar.SelectionTrigger>\n *       <ActionBar.Separator />\n *       <Button size=\"sm\">Excluir</Button>\n *       <ActionBar.Close render={<IconButton aria-label=\"Fechar\" />} />\n *     </ActionBar.Popup>\n *   </ActionBar.Portal>\n * </ActionBar.Root>\n * ```\n */\nexport const ActionBarRoot = (props: ActionBarRootProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['placement']);\n\n  return (\n    <ActionBarContextProvider value={variantProps}>\n      <BaseDialog.Root\n        modal={false}\n        disablePointerDismissal={true}\n        {...elementProps}\n      />\n    </ActionBarContextProvider>\n  );\n};\n\nActionBarRoot.displayName = 'ActionBar.Root';\n"],"mappings":";;;;;AAqBA,MAAM,oBAAoB,iBAAoC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgC9D,MAAa,iBAAiB,UAA8B;CAC1D,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,WAAW,CAAC;CAE3E,OACE,oBAAC,0BAAD;EAA0B,OAAO;EAC/B,UAAA,oBAACA,OAAW,MAAZ;GACE,OAAO;GACP,yBAAyB;GACzB,GAAI;EACL,CAAA;CACuB,CAAA;AAE9B;AAEA,cAAc,cAAc"}
+{"version":3,"file":"action-bar-root.js","names":["BaseDialog"],"sources":["../../../../src/components/overlays/action-bar/action-bar-root.tsx"],"sourcesContent":["import { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport {\n  ActionBarContextProvider,\n  type ActionBarVariants,\n} from './use-action-bar-context';\n\nexport type ActionBarRootProps = MergeOverride<\n  BaseDialog.Root.Props,\n  ActionBarVariants\n>;\n\nexport type ActionBarRootState = BaseDialog.Root.State;\n\nexport type ActionBarRootActions = BaseDialog.Root.Actions;\n\nexport type ActionBarRootChangeEventDetails =\n  BaseDialog.Root.ChangeEventDetails;\n\nexport type ActionBarRootChangeEventReason = BaseDialog.Root.ChangeEventReason;\n\nconst splitVariantProps = createSplitProps<ActionBarVariants>();\n\n/**\n * Estado da barra de ações. Não renderiza elemento.\n *\n * É um dialog não modal do Base UI, sem trigger: a barra abre pelo `open`, ligado à seleção de\n * quem usa. Fecha só pelo `Esc` e pelo `Close`; o clique fora e o foco saindo da barra não\n * fecham (`disablePointerDismissal`), porque selecionar outra linha é um clique fora.\n *\n * A barra continua montada durante a animação de saída. Um texto derivado da seleção (\"3\n * selecionados\") vira \"0 selecionados\" enquanto ela some, e a largura muda junto: mostre a\n * última contagem maior que zero.\n *\n * @example\n * ```tsx\n * <ActionBar.Root\n *   open={selected.length > 0}\n *   onOpenChange={(open) => !open && clearSelection()}\n * >\n *   <ActionBar.Portal>\n *     <ActionBar.Popup>\n *       <ActionBar.SelectionTrigger>\n *         {selected.length} selecionados\n *       </ActionBar.SelectionTrigger>\n *       <ActionBar.Separator />\n *       <Button size=\"sm\">Excluir</Button>\n *       <ActionBar.Close render={<IconButton aria-label=\"Fechar\" />} />\n *     </ActionBar.Popup>\n *   </ActionBar.Portal>\n * </ActionBar.Root>\n * ```\n */\nexport const ActionBarRoot = (props: ActionBarRootProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['placement']);\n\n  return (\n    <ActionBarContextProvider value={variantProps}>\n      <BaseDialog.Root\n        modal={false}\n        disablePointerDismissal={true}\n        {...elementProps}\n      />\n    </ActionBarContextProvider>\n  );\n};\n\nActionBarRoot.displayName = 'ActionBar.Root';\n"],"mappings":";;;;;AAwBA,MAAM,oBAAoB,iBAAoC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgC9D,MAAa,iBAAiB,UAA8B;CAC1D,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,WAAW,CAAC;CAE3E,OACE,oBAAC,0BAAD;EAA0B,OAAO;EAC/B,UAAA,oBAACA,OAAW,MAAZ;GACE,OAAO;GACP,yBAAyB;GACzB,GAAI;EACL,CAAA;CACuB,CAAA;AAE9B;AAEA,cAAc,cAAc"}

package/dist/components/overlays/alert-dialog/alert-dialog-body.d.ts

@@ -5,8 +5,11 @@ export type AlertDialogBodyProps = useRender.ComponentProps<'div'>;
  * Conteúdo extra do alert dialog, como a lista do que será apagado ou um campo de confirmação.
  * Opcional: o caso comum é só `Header` e `Footer`.
  *
- * Cópia de `DialogBody`, sem diferenças (tabela no README de `overlays`); o mecanismo está
- * explicado lá.
+ * Cópia de `DialogBody` (tabela no README de `overlays`; o mecanismo está explicado lá), com o
+ * espaço de cima por margem de 16px depois de outra parte, sem o `py-2`, e o recuo à esquerda
+ * (padding mais 32px, a partir de `sm`) quando o `AlertDialog.Header` anterior tem um
+ * `AlertDialog.Indicator`, para o conteúdo alinhar ao texto do header. Segue o modelo de superfície
+ * da pendência "Superfícies" do ROADMAP, ainda não aplicado ao Dialog.
  */
 export declare const AlertDialogBody: {
   (props: AlertDialogBodyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/overlays/alert-dialog/alert-dialog-body.js

@@ -5,8 +5,11 @@ import { mergeProps, useRender } from "@base-ui/react";
 * Conteúdo extra do alert dialog, como a lista do que será apagado ou um campo de confirmação.
 * Opcional: o caso comum é só `Header` e `Footer`.
 *
-* Cópia de `DialogBody`, sem diferenças (tabela no README de `overlays`); o mecanismo está
-* explicado lá.
+* Cópia de `DialogBody` (tabela no README de `overlays`; o mecanismo está explicado lá), com o
+* espaço de cima por margem de 16px depois de outra parte, sem o `py-2`, e o recuo à esquerda
+* (padding mais 32px, a partir de `sm`) quando o `AlertDialog.Header` anterior tem um
+* `AlertDialog.Indicator`, para o conteúdo alinhar ao texto do header. Segue o modelo de superfície
+* da pendência "Superfícies" do ROADMAP, ainda não aplicado ao Dialog.
 */
 const AlertDialogBody = (props) => {
 	const { render, className, ...rest } = props;
@@ -16,11 +19,13 @@ const AlertDialogBody = (props) => {
 			"flex",
 			"flex-1",
 			"flex-col",
+			"gap-4",
 			"min-h-0",
 			"overflow-y-auto",
 			"px-(--alert-dialog-padding)",
-			"py-2",
 			"first:pt-(--alert-dialog-padding)",
+			"not-first:mt-4",
+			"sm:[[data-component='AlertDialog.Header']:has(>[data-component='AlertDialog.Indicator'])~&]:pl-[calc(var(--alert-dialog-padding)+--spacing(8))]",
 			"[&:not(:has(~[data-component='AlertDialog.Footer']))]:pb-(--alert-dialog-padding)"
 		], className)
 	};

package/dist/components/overlays/alert-dialog/alert-dialog-body.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-body.js","names":[],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-body.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type AlertDialogBodyProps = useRender.ComponentProps<'div'>;\n\n/**\n * Conteúdo extra do alert dialog, como a lista do que será apagado ou um campo de confirmação.\n * Opcional: o caso comum é só `Header` e `Footer`.\n *\n * Cópia de `DialogBody`, sem diferenças (tabela no README de `overlays`); o mecanismo está\n * explicado lá.\n */\nexport const AlertDialogBody = (props: AlertDialogBodyProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'AlertDialog.Body',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'flex-1',\n        'flex-col',\n        // Sem o `min-h-0`, o item flex não encolhe abaixo do conteúdo, e o popup vaza da tela.\n        'min-h-0',\n        'overflow-y-auto',\n\n        'px-(--alert-dialog-padding)',\n        'py-2',\n        'first:pt-(--alert-dialog-padding)',\n        // Por irmão, e não por `last:`, porque um `Close` pode vir depois.\n        \"[&:not(:has(~[data-component='AlertDialog.Footer']))]:pb-(--alert-dialog-padding)\",\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nAlertDialogBody.displayName = 'AlertDialog.Body';\n"],"mappings":";;;;;;;;;;AAYA,MAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GAEA;GACA;GAEA;GACA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,gBAAgB,cAAc"}
+{"version":3,"file":"alert-dialog-body.js","names":[],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-body.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type AlertDialogBodyProps = useRender.ComponentProps<'div'>;\n\n/**\n * Conteúdo extra do alert dialog, como a lista do que será apagado ou um campo de confirmação.\n * Opcional: o caso comum é só `Header` e `Footer`.\n *\n * Cópia de `DialogBody` (tabela no README de `overlays`; o mecanismo está explicado lá), com o\n * espaço de cima por margem de 16px depois de outra parte, sem o `py-2`, e o recuo à esquerda\n * (padding mais 32px, a partir de `sm`) quando o `AlertDialog.Header` anterior tem um\n * `AlertDialog.Indicator`, para o conteúdo alinhar ao texto do header. Segue o modelo de superfície\n * da pendência \"Superfícies\" do ROADMAP, ainda não aplicado ao Dialog.\n */\nexport const AlertDialogBody = (props: AlertDialogBodyProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'AlertDialog.Body',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'flex-1',\n        'flex-col',\n        'gap-4',\n        // Sem o `min-h-0`, o item flex não encolhe abaixo do conteúdo, e o popup vaza da tela.\n        'min-h-0',\n        'overflow-y-auto',\n\n        'px-(--alert-dialog-padding)',\n        'first:pt-(--alert-dialog-padding)',\n        // Depois de outra parte, o espaço de 16px é margem, e não padding: fica fora da área que\n        // rola. Com padding, o conteúdo rolado seria cortado rente à descrição do header, e com a\n        // margem ele some 16px abaixo dela.\n        'not-first:mt-4',\n        // Com um indicador no header anterior (ícone de 20px mais gap de 12px), recua o conteúdo\n        // para o alinhar ao texto do header. No celular o header é centralizado, sem recuo.\n        \"sm:[[data-component='AlertDialog.Header']:has(>[data-component='AlertDialog.Indicator'])~&]:pl-[calc(var(--alert-dialog-padding)+--spacing(8))]\",\n        // Por irmão, e não por `last:`, porque um `Close` pode vir depois.\n        \"[&:not(:has(~[data-component='AlertDialog.Footer']))]:pb-(--alert-dialog-padding)\",\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nAlertDialogBody.displayName = 'AlertDialog.Body';\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GACA;GAEA;GACA;GAIA;GAGA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,gBAAgB,cAAc"}

package/dist/components/overlays/alert-dialog/alert-dialog-footer.d.ts

@@ -2,10 +2,13 @@ import { useRender } from "@base-ui/react";
 //#region src/components/overlays/alert-dialog/alert-dialog-footer.d.ts
 export type AlertDialogFooterProps = useRender.ComponentProps<'div'>;
 /**
- * Linha de ações na base do alert dialog, alinhadas à direita.
+ * Linha de ações na base do alert dialog, alinhadas à direita. Em tela pequena, empilha as ações
+ * na largura toda, com a última em cima: a ordem do DOM e do foco não muda (cancelar antes da
+ * ação).
  *
- * Cópia de `DialogFooter`, sem diferenças (tabela no README de `overlays`); o mecanismo está
- * explicado lá.
+ * Cópia de `DialogFooter` (tabela no README de `overlays`; o mecanismo está explicado lá), com a
+ * pilha do celular e sempre 24px antes das ações (sem o `pt-2`). Segue o modelo de superfície
+ * da pendência "Superfícies" do ROADMAP, ainda não aplicado ao Dialog.
  */
 export declare const AlertDialogFooter: {
   (props: AlertDialogFooterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;