@lucasbernardosn/react-ui 0.0.0-stage → 0.2.0

package/dist/components/layout/scroll-area/scroll-area-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area-content.d.ts","names":["BaseScrollArea"],"sources":["../../../../src/components/layout/scroll-area/scroll-area-content.tsx"],"mappings":";;YAGY,yBAAyBA,WAAe,QAAQ;YAEhD,yBAAyBA,WAAe,QAAQ;;;;;;;;;;;;;qBAc/C;GAA4B,OAAA,yCAAsB,IAAA"}

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

@@ -0,0 +1,29 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+//#region src/components/layout/scroll-area/scroll-area-content.tsx
+/**
+* Envolve o conteúdo rolável e é onde mora o padding — a divisão da documentação oficial:
+* `Root` carrega o tamanho, `Viewport` a altura, `Content` o espaçamento.
+*
+* O Base UI aplica `min-width: fit-content` inline, para a largura do conteúdo atravessar o
+* viewport em vez de ser cortada. Para contê-la, passe `style={{ minWidth: 0 }}`: o `style` de
+* quem usa é mesclado depois do interno, e uma classe não venceria o inline.
+*
+* Com `flex flex-col` aqui, o filho que ocupa o resto e rola usa `grow basis-0`, não `flex-1`:
+* o `min-h-full` deixa a altura indefinida, a base `0%` do `flex-1` não resolve contra ela, e
+* o filho cresce até caber todo o conteúdo em vez de rolar.
+*/
+const ScrollAreaContent = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(ScrollArea.Content, {
+		"data-component": "ScrollArea.Content",
+		className: mergeStateClassNames(["min-h-full"], className),
+		...rest
+	});
+};
+ScrollAreaContent.displayName = "ScrollArea.Content";
+//#endregion
+export { ScrollAreaContent };
+
+//# sourceMappingURL=scroll-area-content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area-content.js","names":["BaseScrollArea"],"sources":["../../../../src/components/layout/scroll-area/scroll-area-content.tsx"],"sourcesContent":["import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport { mergeStateClassNames } from '#utils';\n\nexport type ScrollAreaContentProps = BaseScrollArea.Content.Props;\n\nexport type ScrollAreaContentState = BaseScrollArea.Content.State;\n\n/**\n * Envolve o conteúdo rolável e é onde mora o padding — a divisão da documentação oficial:\n * `Root` carrega o tamanho, `Viewport` a altura, `Content` o espaçamento.\n *\n * O Base UI aplica `min-width: fit-content` inline, para a largura do conteúdo atravessar o\n * viewport em vez de ser cortada. Para contê-la, passe `style={{ minWidth: 0 }}`: o `style` de\n * quem usa é mesclado depois do interno, e uma classe não venceria o inline.\n *\n * Com `flex flex-col` aqui, o filho que ocupa o resto e rola usa `grow basis-0`, não `flex-1`:\n * o `min-h-full` deixa a altura indefinida, a base `0%` do `flex-1` não resolve contra ela, e\n * o filho cresce até caber todo o conteúdo em vez de rolar.\n */\nexport const ScrollAreaContent = (props: ScrollAreaContentProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseScrollArea.Content\n      data-component=\"ScrollArea.Content\"\n      className={mergeStateClassNames(\n        [\n          // Piso, não altura. Com pouco conteúdo ocupa o viewport (um estado vazio centraliza\n          // com `flex items-center`); com muito, cresce, e o padding de baixo continua depois\n          // do último item. `h-full` aqui colaria o último item na borda. Sem altura no `Root`,\n          // não há piso.\n          'min-h-full',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nScrollAreaContent.displayName = 'ScrollArea.Content';\n"],"mappings":";;;;;;;;;;;;;;;;AAmBA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,WAAe,SAAhB;EACE,kBAAe;EACf,WAAW,qBACT,CAKE,YACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,kBAAkB,cAAc"}

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

@@ -0,0 +1,17 @@
+import { ScrollArea } from "@base-ui/react/scroll-area";
+//#region src/components/layout/scroll-area/scroll-area-corner.d.ts
+export type ScrollAreaCornerProps = ScrollArea.Corner.Props;
+export type ScrollAreaCornerState = ScrollArea.Corner.State;
+/**
+ * Reserva o quadrado onde as duas barras se cruzariam; sem ele, elas se sobrepõem no canto. Já
+ * vem em `ScrollArea.Bars`.
+ *
+ * Sem preenchimento de propósito: as trilhas têm recuo e cantos arredondados, e um canto
+ * colorido apareceria como um quadrado solto.
+ */
+export declare const ScrollAreaCorner: {
+  (props: ScrollAreaCornerProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=scroll-area-corner.d.ts.map

package/dist/components/layout/scroll-area/scroll-area-corner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area-corner.d.ts","names":["BaseScrollArea"],"sources":["../../../../src/components/layout/scroll-area/scroll-area-corner.tsx"],"mappings":";;YAGY,wBAAwBA,WAAe,OAAO;YAE9C,wBAAwBA,WAAe,OAAO;;;;;;;;qBAS7C;GAA2B,OAAA,wCAAqB,IAAA"}

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

@@ -0,0 +1,24 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+//#region src/components/layout/scroll-area/scroll-area-corner.tsx
+/**
+* Reserva o quadrado onde as duas barras se cruzariam; sem ele, elas se sobrepõem no canto. Já
+* vem em `ScrollArea.Bars`.
+*
+* Sem preenchimento de propósito: as trilhas têm recuo e cantos arredondados, e um canto
+* colorido apareceria como um quadrado solto.
+*/
+const ScrollAreaCorner = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(ScrollArea.Corner, {
+		"data-component": "ScrollArea.Corner",
+		className: mergeStateClassNames([], className),
+		...rest
+	});
+};
+ScrollAreaCorner.displayName = "ScrollArea.Corner";
+//#endregion
+export { ScrollAreaCorner };
+
+//# sourceMappingURL=scroll-area-corner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area-corner.js","names":["BaseScrollArea"],"sources":["../../../../src/components/layout/scroll-area/scroll-area-corner.tsx"],"sourcesContent":["import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport { mergeStateClassNames } from '#utils';\n\nexport type ScrollAreaCornerProps = BaseScrollArea.Corner.Props;\n\nexport type ScrollAreaCornerState = BaseScrollArea.Corner.State;\n\n/**\n * Reserva o quadrado onde as duas barras se cruzariam; sem ele, elas se sobrepõem no canto. Já\n * vem em `ScrollArea.Bars`.\n *\n * Sem preenchimento de propósito: as trilhas têm recuo e cantos arredondados, e um canto\n * colorido apareceria como um quadrado solto.\n */\nexport const ScrollAreaCorner = (props: ScrollAreaCornerProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseScrollArea.Corner\n      data-component=\"ScrollArea.Corner\"\n      className={mergeStateClassNames([], className)}\n      {...rest}\n    />\n  );\n};\n\nScrollAreaCorner.displayName = 'ScrollArea.Corner';\n"],"mappings":";;;;;;;;;;;AAcA,MAAa,oBAAoB,UAAiC;CAChE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,WAAe,QAAhB;EACE,kBAAe;EACf,WAAW,qBAAqB,CAAC,GAAG,SAAS;EAC7C,GAAI;CACL,CAAA;AAEL;AAEA,iBAAiB,cAAc"}

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

@@ -0,0 +1,39 @@
+import { ScrollArea } from "@base-ui/react/scroll-area";
+//#region src/components/layout/scroll-area/scroll-area-root.d.ts
+export type ScrollAreaRootProps = ScrollArea.Root.Props;
+export type ScrollAreaRootState = ScrollArea.Root.State;
+/**
+ * Agrupa as partes e serve de referência de posição para as barras. **Não declara tamanho**:
+ * com altura definida a área rola; sem altura ela cresce com o conteúdo e quem rola é o
+ * contêiner de cima. Altura e largura (`h-72`, `flex-1`, `md:h-52`) ficam com quem usa.
+ *
+ * #### Personalização das barras
+ *
+ * Por variável CSS na `className` do `Root`. As barras herdam — inclusive as de
+ * `ScrollArea.Bars`, que não recebe props.
+ *
+ * | Variável | Controla | Padrão |
+ * | --- | --- | --- |
+ * | `--scroll-area-scrollbar-size` | espessura da trilha | 4px no toque, 6px com mouse |
+ * | `--scroll-area-scrollbar-inset` | recuo da trilha até a borda | 2px |
+ * | `--scroll-area-thumb-size` | espessura do polegar na trilha | a trilha toda |
+ *
+ * Como funciona:
+ * 1. o `Root` zera as três com `initial` — assim um `ScrollArea` aninhado não herda os valores
+ *    do de fora;
+ * 2. `Scrollbar` e `Thumb` leem cada uma com um padrão no `var()`: é ali que os valores padrão
+ *    moram, e eles valem enquanto a variável estiver zerada;
+ * 3. a classe de quem usa substitui o `initial`, porque o `mergeTwClassNames` descarta a classe
+ *    conflitante anterior.
+ *
+ * @example
+ * ```tsx
+ * <ScrollArea.Root className="h-72 [--scroll-area-scrollbar-size:--spacing(2.5)]">
+ * ```
+ */
+export declare const ScrollAreaRoot: {
+  (props: ScrollAreaRootProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=scroll-area-root.d.ts.map

package/dist/components/layout/scroll-area/scroll-area-root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area-root.d.ts","names":["BaseScrollArea"],"sources":["../../../../src/components/layout/scroll-area/scroll-area-root.tsx"],"mappings":";;YAGY,sBAAsBA,WAAe,KAAK;YAE1C,sBAAsBA,WAAe,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA+BzC;GAAyB,OAAA,sCAAmB,IAAA"}

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

@@ -0,0 +1,53 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+//#region src/components/layout/scroll-area/scroll-area-root.tsx
+/**
+* Agrupa as partes e serve de referência de posição para as barras. **Não declara tamanho**:
+* com altura definida a área rola; sem altura ela cresce com o conteúdo e quem rola é o
+* contêiner de cima. Altura e largura (`h-72`, `flex-1`, `md:h-52`) ficam com quem usa.
+*
+* #### Personalização das barras
+*
+* Por variável CSS na `className` do `Root`. As barras herdam — inclusive as de
+* `ScrollArea.Bars`, que não recebe props.
+*
+* | Variável | Controla | Padrão |
+* | --- | --- | --- |
+* | `--scroll-area-scrollbar-size` | espessura da trilha | 4px no toque, 6px com mouse |
+* | `--scroll-area-scrollbar-inset` | recuo da trilha até a borda | 2px |
+* | `--scroll-area-thumb-size` | espessura do polegar na trilha | a trilha toda |
+*
+* Como funciona:
+* 1. o `Root` zera as três com `initial` — assim um `ScrollArea` aninhado não herda os valores
+*    do de fora;
+* 2. `Scrollbar` e `Thumb` leem cada uma com um padrão no `var()`: é ali que os valores padrão
+*    moram, e eles valem enquanto a variável estiver zerada;
+* 3. a classe de quem usa substitui o `initial`, porque o `mergeTwClassNames` descarta a classe
+*    conflitante anterior.
+*
+* @example
+* ```tsx
+* <ScrollArea.Root className="h-72 [--scroll-area-scrollbar-size:--spacing(2.5)]">
+* ```
+*/
+const ScrollAreaRoot = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(ScrollArea.Root, {
+		"data-component": "ScrollArea.Root",
+		className: mergeStateClassNames([
+			"overflow-hidden",
+			"[--scroll-area-scrollbar-size:initial]",
+			"[--scroll-area-scrollbar-inset:initial]",
+			"[--scroll-area-thumb-size:initial]",
+			"focus-ring-inside",
+			"ring-gray-12"
+		], className),
+		...rest
+	});
+};
+ScrollAreaRoot.displayName = "ScrollArea.Root";
+//#endregion
+export { ScrollAreaRoot };
+
+//# sourceMappingURL=scroll-area-root.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,17 @@
+import { ScrollArea } from "@base-ui/react/scroll-area";
+//#region src/components/layout/scroll-area/scroll-area-scrollbar.d.ts
+export type ScrollAreaScrollbarProps = ScrollArea.Scrollbar.Props;
+export type ScrollAreaScrollbarState = ScrollArea.Scrollbar.State;
+/**
+ * A trilha do polegar, transparente e sobreposta ao conteúdo. O Base UI a posiciona inline
+ * (`absolute` na borda do `Root`) e só a monta quando o eixo dela transborda.
+ *
+ * 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.
+ */
+export declare const ScrollAreaScrollbar: {
+  (props: ScrollAreaScrollbarProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=scroll-area-scrollbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area-scrollbar.d.ts","names":["BaseScrollArea"],"sources":["../../../../src/components/layout/scroll-area/scroll-area-scrollbar.tsx"],"mappings":";;YAGY,2BAA2BA,WAAe,UAAU;YAEpD,2BAA2BA,WAAe,UAAU;;;;;;;;qBASnD;GAA8B,OAAA,2CAAwB,IAAA"}

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

@@ -0,0 +1,55 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+//#region src/components/layout/scroll-area/scroll-area-scrollbar.tsx
+/**
+* A trilha do polegar, transparente e sobreposta ao conteúdo. O Base UI a posiciona inline
+* (`absolute` na borda do `Root`) e só a monta quando o eixo dela transborda.
+*
+* 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.
+*/
+const ScrollAreaScrollbar = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+		"data-component": "ScrollArea.Scrollbar",
+		className: mergeStateClassNames([
+			"flex",
+			"data-[orientation=vertical]:justify-center",
+			"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))",
+			"data-[orientation=horizontal]:h-(--scroll-area-scrollbar-size,--spacing(1))",
+			"pointer-fine:data-[orientation=horizontal]:h-(--scroll-area-scrollbar-size,--spacing(1.5))",
+			"before:absolute",
+			"before:content-['']",
+			"data-[orientation=vertical]:before:inset-y-0",
+			"data-[orientation=vertical]:before:inset-e-0",
+			"data-[orientation=vertical]:before:w-3",
+			"data-[orientation=horizontal]:before:inset-x-0",
+			"data-[orientation=horizontal]:before:bottom-0",
+			"data-[orientation=horizontal]:before:h-3",
+			"opacity-0",
+			"pointer-events-none",
+			"transition-opacity",
+			"duration-150",
+			"ease-exit",
+			"delay-300",
+			"data-hovering:opacity-100",
+			"data-hovering:pointer-events-auto",
+			"data-hovering:ease-enter",
+			"data-hovering:delay-0",
+			"data-scrolling:opacity-100",
+			"data-scrolling:pointer-events-auto",
+			"data-scrolling:duration-0",
+			"data-scrolling:delay-0"
+		], className),
+		...rest
+	});
+};
+ScrollAreaScrollbar.displayName = "ScrollArea.Scrollbar";
+//#endregion
+export { ScrollAreaScrollbar };
+
+//# sourceMappingURL=scroll-area-scrollbar.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,14 @@
+import { ScrollArea } from "@base-ui/react/scroll-area";
+//#region src/components/layout/scroll-area/scroll-area-thumb.d.ts
+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.
+ */
+export declare const ScrollAreaThumb: {
+  (props: ScrollAreaThumbProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=scroll-area-thumb.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area-thumb.d.ts","names":["BaseScrollArea"],"sources":["../../../../src/components/layout/scroll-area/scroll-area-thumb.tsx"],"mappings":";;YAGY,uBAAuBA,WAAe,MAAM;YAE5C,uBAAuBA,WAAe,MAAM;;;;;qBAM3C;GAA0B,OAAA,uCAAoB,IAAA"}

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

@@ -0,0 +1,27 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+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.
+*/
+const ScrollAreaThumb = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(ScrollArea.Thumb, {
+		"data-component": "ScrollArea.Thumb",
+		className: mergeStateClassNames([
+			"size-(--scroll-area-thumb-size,100%)",
+			"rounded-full",
+			"bg-gray-9/50",
+			"active:bg-gray-10",
+			"transition-colors"
+		], className),
+		...rest
+	});
+};
+ScrollAreaThumb.displayName = "ScrollArea.Thumb";
+//#endregion
+export { ScrollAreaThumb };
+
+//# sourceMappingURL=scroll-area-thumb.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,28 @@
+//#region src/components/layout/scroll-area/scroll-area-viewport-variants.d.ts
+export type ScrollAreaViewportVariants = {
+  /**
+   * Esmaece as bordas por onde ainda há conteúdo para rolar. Sem a prop, não há esmaecimento.
+   *
+   * O esmaecimento cresce com a distância já rolada: na borda inicial ele não existe, e vai até
+   * `--scroll-area-fade-size` (padrão 2.5rem, sobrescrevível por `style`) conforme o conteúdo
+   * some por ali. Lê as variáveis `--scroll-area-overflow-*` que o Base UI escreve no próprio
+   * viewport.
+   *
+   * Não use o vertical sobre conteúdo com cabeçalho grudado: a máscara pega o topo do viewport
+   * inteiro, e o cabeçalho esmaece junto.
+   */
+  fade?: 'vertical' | 'horizontal' | 'both';
+};
+/**
+ * A máscara só lê o canal alfa, por isso o gradiente vai de `transparent` a `black` e não há
+ * variável de cor: qualquer cor opaca daria exatamente o mesmo resultado.
+ *
+ * `min(--scroll-area-fade-size, --scroll-area-overflow-*-start)` é o que faz o esmaecimento
+ * crescer com a rolagem. O fim leva `--scroll-area-fade-size` como fallback para o esmaecimento
+ * já aparecer antes da primeira medição, quando ainda há conteúdo abaixo.
+ */
+export declare const scrollAreaViewportVariants: (props?: ({
+  fade?: "both" | "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=scroll-area-viewport-variants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area-viewport-variants.d.ts","names":[],"sources":["../../../../src/components/layout/scroll-area/scroll-area-viewport-variants.ts"],"mappings":";YAEY;;;;;;;;;;;;EAYV;;;;;;;;;;qBAWW,6BAA0B;;6CA8BtC"}

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

@@ -0,0 +1,27 @@
+import { cva } from "class-variance-authority";
+//#region src/components/layout/scroll-area/scroll-area-viewport-variants.ts
+/**
+* A máscara só lê o canal alfa, por isso o gradiente vai de `transparent` a `black` e não há
+* variável de cor: qualquer cor opaca daria exatamente o mesmo resultado.
+*
+* `min(--scroll-area-fade-size, --scroll-area-overflow-*-start)` é o que faz o esmaecimento
+* crescer com a rolagem. O fim leva `--scroll-area-fade-size` como fallback para o esmaecimento
+* já aparecer antes da primeira medição, quando ainda há conteúdo abaixo.
+*/
+const scrollAreaViewportVariants = cva([
+	"[--scroll-area-fade-size:2.5rem]",
+	"h-full",
+	"outline-none"
+], { variants: { fade: {
+	vertical: ["mask-linear-[to_bottom,transparent_0,black_min(var(--scroll-area-fade-size),var(--scroll-area-overflow-y-start)),black_calc(100%-min(var(--scroll-area-fade-size),var(--scroll-area-overflow-y-end,var(--scroll-area-fade-size)))),transparent_100%]", "mask-no-repeat"],
+	horizontal: ["mask-linear-[to_right,transparent_0,black_min(var(--scroll-area-fade-size),var(--scroll-area-overflow-x-start)),black_calc(100%-min(var(--scroll-area-fade-size),var(--scroll-area-overflow-x-end,var(--scroll-area-fade-size)))),transparent_100%]", "mask-no-repeat"],
+	both: [
+		"mask-[linear-gradient(to_bottom,transparent_0,black_min(var(--scroll-area-fade-size),var(--scroll-area-overflow-y-start)),black_calc(100%-min(var(--scroll-area-fade-size),var(--scroll-area-overflow-y-end,var(--scroll-area-fade-size)))),transparent_100%),linear-gradient(to_right,transparent_0,black_min(var(--scroll-area-fade-size),var(--scroll-area-overflow-x-start)),black_calc(100%-min(var(--scroll-area-fade-size),var(--scroll-area-overflow-x-end,var(--scroll-area-fade-size)))),transparent_100%)]",
+		"mask-intersect",
+		"mask-no-repeat"
+	]
+} } });
+//#endregion
+export { scrollAreaViewportVariants };
+
+//# sourceMappingURL=scroll-area-viewport-variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area-viewport-variants.js","names":[],"sources":["../../../../src/components/layout/scroll-area/scroll-area-viewport-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type ScrollAreaViewportVariants = {\n  /**\n   * Esmaece as bordas por onde ainda há conteúdo para rolar. Sem a prop, não há esmaecimento.\n   *\n   * O esmaecimento cresce com a distância já rolada: na borda inicial ele não existe, e vai até\n   * `--scroll-area-fade-size` (padrão 2.5rem, sobrescrevível por `style`) conforme o conteúdo\n   * some por ali. Lê as variáveis `--scroll-area-overflow-*` que o Base UI escreve no próprio\n   * viewport.\n   *\n   * Não use o vertical sobre conteúdo com cabeçalho grudado: a máscara pega o topo do viewport\n   * inteiro, e o cabeçalho esmaece junto.\n   */\n  fade?: 'vertical' | 'horizontal' | 'both';\n};\n\n/**\n * A máscara só lê o canal alfa, por isso o gradiente vai de `transparent` a `black` e não há\n * variável de cor: qualquer cor opaca daria exatamente o mesmo resultado.\n *\n * `min(--scroll-area-fade-size, --scroll-area-overflow-*-start)` é o que faz o esmaecimento\n * crescer com a rolagem. O fim leva `--scroll-area-fade-size` como fallback para o esmaecimento\n * já aparecer antes da primeira medição, quando ainda há conteúdo abaixo.\n */\nexport const scrollAreaViewportVariants = cva(\n  [\n    '[--scroll-area-fade-size:2.5rem]',\n\n    // Cobre os dois arranjos: com `Root` de altura definida, trava nela e rola; com altura\n    // automática, o percentual vira `auto` e o viewport cresce com o conteúdo.\n    'h-full',\n\n    // O contorno nativo sai sempre; o anel do tema, quando ligado, é pintado pelo `Root`.\n    'outline-none',\n  ],\n  {\n    variants: {\n      fade: {\n        vertical: [\n          'mask-linear-[to_bottom,transparent_0,black_min(var(--scroll-area-fade-size),var(--scroll-area-overflow-y-start)),black_calc(100%-min(var(--scroll-area-fade-size),var(--scroll-area-overflow-y-end,var(--scroll-area-fade-size)))),transparent_100%]',\n          'mask-no-repeat',\n        ],\n        horizontal: [\n          'mask-linear-[to_right,transparent_0,black_min(var(--scroll-area-fade-size),var(--scroll-area-overflow-x-start)),black_calc(100%-min(var(--scroll-area-fade-size),var(--scroll-area-overflow-x-end,var(--scroll-area-fade-size)))),transparent_100%]',\n          'mask-no-repeat',\n        ],\n        both: [\n          'mask-[linear-gradient(to_bottom,transparent_0,black_min(var(--scroll-area-fade-size),var(--scroll-area-overflow-y-start)),black_calc(100%-min(var(--scroll-area-fade-size),var(--scroll-area-overflow-y-end,var(--scroll-area-fade-size)))),transparent_100%),linear-gradient(to_right,transparent_0,black_min(var(--scroll-area-fade-size),var(--scroll-area-overflow-x-start)),black_calc(100%-min(var(--scroll-area-fade-size),var(--scroll-area-overflow-x-end,var(--scroll-area-fade-size)))),transparent_100%)]',\n          'mask-intersect',\n          'mask-no-repeat',\n        ],\n      },\n    },\n  },\n);\n"],"mappings":";;;;;;;;;;AAyBA,MAAa,6BAA6B,IACxC;CACE;CAIA;CAGA;AACF,GACA,EACE,UAAU,EACR,MAAM;CACJ,UAAU,CACR,wPACA,gBACF;CACA,YAAY,CACV,uPACA,gBACF;CACA,MAAM;EACJ;EACA;EACA;CACF;AACF,EACF,EACF,CACF"}

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

@@ -0,0 +1,39 @@
+import { ScrollAreaViewportVariants } from "./scroll-area-viewport-variants.js";
+import { MergeOverride } from "@lucasbernardosn/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 & {
+  /**
+   * Mostra o anel de foco do tema quando o viewport recebe foco pelo teclado.
+   *
+   * O Base UI coloca o viewport na ordem de tabulação sempre que há transbordamento, para que
+   * dê para rolar pelo teclado. Desligado, **nenhuma** indicação de foco aparece — nem o
+   * contorno padrão do navegador —, mas o viewport continua focável: só desligue quando outra
+   * coisa já mostrar onde está o foco.
+   *
+   * O anel é pintado pelo `Root` (`focus-ring-inside`), não por este elemento: com `fade`, a
+   * máscara apagaria qualquer coisa que o viewport pintasse. É o arranjo da demo oficial de
+   * fade. O viewport só se marca com `data-focus-ring`.
+   *
+   * @default true
+   */
+  focusRing?: boolean;
+}>;
+export type ScrollAreaViewportState = ScrollArea.Viewport.State;
+/**
+ * O elemento que de fato rola. O Base UI aplica `overflow: scroll` inline, esconde a barra
+ * nativa e põe o elemento na ordem de tabulação quando há transbordamento.
+ *
+ * Segue a altura do `Root`. Para crescer até um limite e rolar a partir dele, o `max-h-*` vai
+ * **aqui**, não no `Root`: percentual não resolve contra `max-height`.
+ *
+ * Sem `overscroll-behavior` de propósito: `contain` cortaria o gesto antes da página, e é ele
+ * que dispara o pull-to-refresh quando esta área é o conteúdo principal. Scroller sobreposto
+ * (drawer, popover) declara `overscroll-contain` por conta própria.
+ */
+export declare const ScrollAreaViewport: {
+  (props: ScrollAreaViewportProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=scroll-area-viewport.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area-viewport.d.ts","names":["BaseScrollArea"],"sources":["../../../../src/components/layout/scroll-area/scroll-area-viewport.tsx"],"mappings":";;;;YAQY,0BAA0B,cACpCA,WAAe,SAAS,OACxB;;;;;;;;;;;;;;;EAeE;;YAIQ,0BAA0BA,WAAe,SAAS;;;;;;;;;;;;qBAejD;GAA6B,OAAA,0CAAuB,IAAA"}

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

@@ -0,0 +1,33 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { scrollAreaViewportVariants } from "./scroll-area-viewport-variants.js";
+import { createSplitProps } from "@lucasbernardosn/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
+const splitVariantProps = createSplitProps();
+/**
+* O elemento que de fato rola. O Base UI aplica `overflow: scroll` inline, esconde a barra
+* nativa e põe o elemento na ordem de tabulação quando há transbordamento.
+*
+* Segue a altura do `Root`. Para crescer até um limite e rolar a partir dele, o `max-h-*` vai
+* **aqui**, não no `Root`: percentual não resolve contra `max-height`.
+*
+* Sem `overscroll-behavior` de propósito: `contain` cortaria o gesto antes da página, e é ele
+* que dispara o pull-to-refresh quando esta área é o conteúdo principal. Scroller sobreposto
+* (drawer, popover) declara `overscroll-contain` por conta própria.
+*/
+const ScrollAreaViewport = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["fade"]);
+	const { className, focusRing = true, ...rest } = elementProps;
+	return /* @__PURE__ */ jsx(ScrollArea.Viewport, {
+		"data-component": "ScrollArea.Viewport",
+		"data-focus-ring": focusRing ? "" : void 0,
+		className: mergeStateClassNames(scrollAreaViewportVariants(variantProps), className),
+		...rest
+	});
+};
+ScrollAreaViewport.displayName = "ScrollArea.Viewport";
+//#endregion
+export { ScrollAreaViewport };
+
+//# sourceMappingURL=scroll-area-viewport.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,3 @@
+import { SeparatorVariants } from "./separator-variants.js";
+import { Separator, SeparatorProps, SeparatorState } from "./separator.js";
+export { Separator, type SeparatorProps, type SeparatorState, type SeparatorVariants };

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

@@ -0,0 +1,2 @@
+import { Separator } from "./separator.js";
+export { Separator };

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

@@ -0,0 +1,30 @@
+import { ColorSchemeCore } from "../../../types/color-scheme.js";
+//#region src/components/layout/separator/separator-variants.d.ts
+export type SeparatorVariants = {
+  /**
+   * Cor da linha.
+   *
+   * @default 'gray'
+   */
+  colorScheme?: ColorSchemeCore;
+  /**
+   * Espessura da linha: 1, 2, 4 ou 8px.
+   *
+   * @default 'sm'
+   */
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  /**
+   * Estilo do traço.
+   *
+   * @default 'solid'
+   */
+  variant?: 'solid' | 'dashed' | 'dotted';
+};
+export declare const separatorDefaultVariants: Required<SeparatorVariants>;
+export declare const separatorVariants: (props?: ({
+  colorScheme?: "gray" | "brand" | null | undefined;
+  size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+  variant?: "solid" | "dashed" | "dotted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=separator-variants.d.ts.map

package/dist/components/layout/separator/separator-variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator-variants.d.ts","names":[],"sources":["../../../../src/components/layout/separator/separator-variants.ts"],"mappings":";;YAGY;;;;;;EAMV,cAAc;;;;;;EAMd;;;;;;EAMA;;qBAGW,0BAA0B,SAAS;qBAMnC,oBAAiB;;;;6CAkC7B"}

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

@@ -0,0 +1,40 @@
+import { cva } from "class-variance-authority";
+//#region src/components/layout/separator/separator-variants.ts
+const separatorDefaultVariants = {
+	colorScheme: "gray",
+	size: "sm",
+	variant: "solid"
+};
+const separatorVariants = cva([
+	"data-[orientation=horizontal]:w-full",
+	"data-[orientation=horizontal]:border-t-(length:--separator-size)",
+	"data-[orientation=vertical]:self-stretch",
+	"data-[orientation=vertical]:border-s-(length:--separator-size)"
+], {
+	variants: {
+		colorScheme: {
+			gray: ["border-gray-6"],
+			brand: ["border-brand-6"]
+		},
+		size: {
+			sm: ["[--separator-size:1px]"],
+			md: ["[--separator-size:2px]"],
+			lg: ["[--separator-size:4px]"],
+			xl: ["[--separator-size:8px]"]
+		},
+		variant: {
+			solid: ["border-solid"],
+			dashed: ["border-dashed"],
+			dotted: ["border-dotted"]
+		}
+	},
+	defaultVariants: {
+		colorScheme: separatorDefaultVariants.colorScheme,
+		size: separatorDefaultVariants.size,
+		variant: separatorDefaultVariants.variant
+	}
+});
+//#endregion
+export { separatorDefaultVariants, separatorVariants };
+
+//# sourceMappingURL=separator-variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"separator-variants.js","names":[],"sources":["../../../../src/components/layout/separator/separator-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeCore } from '#types';\n\nexport type SeparatorVariants = {\n  /**\n   * Cor da linha.\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeCore;\n  /**\n   * Espessura da linha: 1, 2, 4 ou 8px.\n   *\n   * @default 'sm'\n   */\n  size?: 'sm' | 'md' | 'lg' | 'xl';\n  /**\n   * Estilo do traço.\n   *\n   * @default 'solid'\n   */\n  variant?: 'solid' | 'dashed' | 'dotted';\n};\n\nexport const separatorDefaultVariants: Required<SeparatorVariants> = {\n  colorScheme: 'gray',\n  size: 'sm',\n  variant: 'solid',\n};\n\nexport const separatorVariants = cva(\n  [\n    // A espessura vai só na borda do lado que desenha a linha. Um `border-*` de largura valeria\n    // para os quatro lados, e a linha sairia com o dobro da espessura e bordas laterais.\n    'data-[orientation=horizontal]:w-full',\n    'data-[orientation=horizontal]:border-t-(length:--separator-size)',\n\n    'data-[orientation=vertical]:self-stretch',\n    'data-[orientation=vertical]:border-s-(length:--separator-size)',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: ['border-gray-6'],\n        brand: ['border-brand-6'],\n      },\n      size: {\n        sm: ['[--separator-size:1px]'],\n        md: ['[--separator-size:2px]'],\n        lg: ['[--separator-size:4px]'],\n        xl: ['[--separator-size:8px]'],\n      },\n      variant: {\n        solid: ['border-solid'],\n        dashed: ['border-dashed'],\n        dotted: ['border-dotted'],\n      },\n    },\n    defaultVariants: {\n      colorScheme: separatorDefaultVariants.colorScheme,\n      size: separatorDefaultVariants.size,\n      variant: separatorDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAwBA,MAAa,2BAAwD;CACnE,aAAa;CACb,MAAM;CACN,SAAS;AACX;AAEA,MAAa,oBAAoB,IAC/B;CAGE;CACA;CAEA;CACA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM,CAAC,eAAe;GACtB,OAAO,CAAC,gBAAgB;EAC1B;EACA,MAAM;GACJ,IAAI,CAAC,wBAAwB;GAC7B,IAAI,CAAC,wBAAwB;GAC7B,IAAI,CAAC,wBAAwB;GAC7B,IAAI,CAAC,wBAAwB;EAC/B;EACA,SAAS;GACP,OAAO,CAAC,cAAc;GACtB,QAAQ,CAAC,eAAe;GACxB,QAAQ,CAAC,eAAe;EAC1B;CACF;CACA,iBAAiB;EACf,aAAa,yBAAyB;EACtC,MAAM,yBAAyB;EAC/B,SAAS,yBAAyB;CACpC;AACF,CACF"}

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

@@ -0,0 +1,19 @@
+import { SeparatorVariants } from "./separator-variants.js";
+import { MergeOverride } from "@lucasbernardosn/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>;
+export type SeparatorState = Separator$1.State;
+/**
+ * Linha que divide conteúdo. O Base UI escreve `role="separator"` e `aria-orientation`.
+ *
+ * `orientation` (padrão `horizontal`) é prop do Base UI e chega às classes pelo
+ * `data-orientation`. Na vertical, a linha estica pela altura do pai flex (`self-stretch`);
+ * fora de um flex, a altura fica com quem usa.
+ */
+export declare const Separator: {
+  (props: SeparatorProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=separator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"separator.d.ts","names":["BaseSeparator"],"sources":["../../../../src/components/layout/separator/separator.tsx"],"mappings":";;;;YAQY,iBAAiB,cAC3BA,YAAc,OACd;YAGU,iBAAiBA,YAAc;;;;;;;;qBAW9B;GAAoB,OAAA,iCAAc,IAAA"}