@lucasbernardosn/react-ui 0.3.0 → 0.5.0

package/dist/components/fields/segmented-control/use-segmented-control-context.d.ts

@@ -0,0 +1,33 @@
+import { ColorSchemeCore } from "../../../types/color-scheme.js";
+//#region src/components/fields/segmented-control/use-segmented-control-context.d.ts
+/**
+ * Variantes do SegmentedControl. Informadas no `SegmentedControl.Root` e repassadas aos itens por
+ * contexto.
+ */
+export type SegmentedControlVariants = {
+  /**
+   * Cor do item marcado, que é o `solid` do `Button`: preto ou branco no `gray`, `accent-9` no
+   * `accent`. A trilha é neutra nas duas.
+   *
+   * @default 'gray'
+   */
+  colorScheme?: ColorSchemeCore;
+  /**
+   * Disposição dos itens. O `RadioGroup` do Base UI não tem orientação: as setas andam entre os
+   * itens nas duas direções, qualquer que seja o valor.
+   *
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * Altura total do controle, padding, tamanho do texto e do ícone. Segue a altura dos campos de
+   * formulário: `xs` = `h-8`, `sm` = `h-9`, `md` = `h-10`, `lg` = `h-11`.
+   *
+   * @default 'sm'
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+};
+export declare const segmentedControlDefaultVariants: Required<SegmentedControlVariants>;
+export declare const SegmentedControlContextProvider: import("react").Provider<SegmentedControlVariants>, useSegmentedControlContext: () => SegmentedControlVariants;
+//#endregion
+//# sourceMappingURL=use-segmented-control-context.d.ts.map

package/dist/components/fields/segmented-control/use-segmented-control-context.js

@@ -0,0 +1,15 @@
+import { createContext } from "@lucasbernardosn/react-utils";
+//#region src/components/fields/segmented-control/use-segmented-control-context.ts
+const segmentedControlDefaultVariants = {
+	colorScheme: "gray",
+	orientation: "horizontal",
+	size: "sm"
+};
+const [SegmentedControlContextProvider, useSegmentedControlContext] = createContext({
+	name: "SegmentedControlContext",
+	providers: ["SegmentedControl.Root"]
+});
+//#endregion
+export { SegmentedControlContextProvider, segmentedControlDefaultVariants, useSegmentedControlContext };
+
+//# sourceMappingURL=use-segmented-control-context.js.map

package/dist/components/fields/segmented-control/use-segmented-control-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-segmented-control-context.js","names":[],"sources":["../../../../src/components/fields/segmented-control/use-segmented-control-context.ts"],"sourcesContent":["import { createContext } from '@lucasbernardosn/react-utils';\nimport type { ColorSchemeCore } from '#types';\n\n/**\n * Variantes do SegmentedControl. Informadas no `SegmentedControl.Root` e repassadas aos itens por\n * contexto.\n */\nexport type SegmentedControlVariants = {\n  /**\n   * Cor do item marcado, que é o `solid` do `Button`: preto ou branco no `gray`, `accent-9` no\n   * `accent`. A trilha é neutra nas duas.\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeCore;\n  /**\n   * Disposição dos itens. O `RadioGroup` do Base UI não tem orientação: as setas andam entre os\n   * itens nas duas direções, qualquer que seja o valor.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * Altura total do controle, padding, tamanho do texto e do ícone. Segue a altura dos campos de\n   * formulário: `xs` = `h-8`, `sm` = `h-9`, `md` = `h-10`, `lg` = `h-11`.\n   *\n   * @default 'sm'\n   */\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n};\n\nexport const segmentedControlDefaultVariants: Required<SegmentedControlVariants> =\n  {\n    colorScheme: 'gray',\n    orientation: 'horizontal',\n    size: 'sm',\n  };\n\nexport const [SegmentedControlContextProvider, useSegmentedControlContext] =\n  createContext<SegmentedControlVariants>({\n    name: 'SegmentedControlContext',\n    providers: ['SegmentedControl.Root'],\n  });\n"],"mappings":";;AA+BA,MAAa,kCACX;CACE,aAAa;CACb,aAAa;CACb,MAAM;AACR;AAEF,MAAa,CAAC,iCAAiC,8BAC7C,cAAwC;CACtC,MAAM;CACN,WAAW,CAAC,uBAAuB;AACrC,CAAC"}

package/dist/components/fields/segmented-control/use-segmented-control-indicator.d.ts

@@ -0,0 +1,22 @@
+//#region src/components/fields/segmented-control/use-segmented-control-indicator.d.ts
+/**
+ * Mede o item marcado e escreve a posição do `SegmentedControl.Indicator` no próprio `Root`, nas
+ * variáveis `--segmented-control-indicator-left`, `-top`, `-width` e `-height` (o
+ * `offsetLeft`, `offsetTop`, `offsetWidth` e `offsetHeight` do item, em px). O `Root` é o
+ * ancestral posicionado do indicador e dos itens, então os dois medem a partir da mesma origem.
+ *
+ * A medida é refeita quando o item marcado muda (`data-checked`, seja o valor controlado ou não),
+ * quando um item entra ou sai e quando o `Root` ou um item muda de tamanho (fonte que carrega,
+ * texto que muda, largura que muda). Sem item marcado, as variáveis ficam como estavam e o CSS
+ * esconde o indicador. Um controle sem layout (`display: none`) não é medido.
+ *
+ * `isMeasured` vira `true` na primeira medida e não volta: até lá o `Root` não tem
+ * `data-measured`, o indicador fica escondido, o item marcado se pinta e a transição do indicador
+ * está desligada. Assim o primeiro desenho não tem o salto do indicador chegando da origem.
+ */
+export declare const useSegmentedControlIndicator: () => {
+  rootRef: import("react").RefObject<HTMLDivElement | null>;
+  isMeasured: boolean;
+};
+//#endregion
+//# sourceMappingURL=use-segmented-control-indicator.d.ts.map

package/dist/components/fields/segmented-control/use-segmented-control-indicator.js

@@ -0,0 +1,67 @@
+import { useRef, useState } from "react";
+import { useIsoLayoutEffect } from "@base-ui/utils/useIsoLayoutEffect";
+//#region src/components/fields/segmented-control/use-segmented-control-indicator.ts
+const itemSelector = "[data-component=\"SegmentedControl.Item\"]";
+const checkedItemSelector = `${itemSelector}[data-checked]`;
+/**
+* Mede o item marcado e escreve a posição do `SegmentedControl.Indicator` no próprio `Root`, nas
+* variáveis `--segmented-control-indicator-left`, `-top`, `-width` e `-height` (o
+* `offsetLeft`, `offsetTop`, `offsetWidth` e `offsetHeight` do item, em px). O `Root` é o
+* ancestral posicionado do indicador e dos itens, então os dois medem a partir da mesma origem.
+*
+* A medida é refeita quando o item marcado muda (`data-checked`, seja o valor controlado ou não),
+* quando um item entra ou sai e quando o `Root` ou um item muda de tamanho (fonte que carrega,
+* texto que muda, largura que muda). Sem item marcado, as variáveis ficam como estavam e o CSS
+* esconde o indicador. Um controle sem layout (`display: none`) não é medido.
+*
+* `isMeasured` vira `true` na primeira medida e não volta: até lá o `Root` não tem
+* `data-measured`, o indicador fica escondido, o item marcado se pinta e a transição do indicador
+* está desligada. Assim o primeiro desenho não tem o salto do indicador chegando da origem.
+*/
+const useSegmentedControlIndicator = () => {
+	const rootRef = useRef(null);
+	const [isMeasured, setIsMeasured] = useState(false);
+	useIsoLayoutEffect(() => {
+		const root = rootRef.current;
+		if (!root) return;
+		const measure = () => {
+			const item = root.querySelector(checkedItemSelector);
+			if (!item || item.offsetWidth === 0 && item.offsetHeight === 0) return;
+			root.style.setProperty("--segmented-control-indicator-left", `${item.offsetLeft}px`);
+			root.style.setProperty("--segmented-control-indicator-top", `${item.offsetTop}px`);
+			root.style.setProperty("--segmented-control-indicator-width", `${item.offsetWidth}px`);
+			root.style.setProperty("--segmented-control-indicator-height", `${item.offsetHeight}px`);
+			setIsMeasured(true);
+		};
+		const resizeObserver = new ResizeObserver(measure);
+		const observeSizes = () => {
+			resizeObserver.disconnect();
+			resizeObserver.observe(root);
+			for (const item of root.querySelectorAll(itemSelector)) resizeObserver.observe(item);
+		};
+		const mutationObserver = new MutationObserver((records) => {
+			if (records.some((record) => record.type === "childList")) observeSizes();
+			measure();
+		});
+		mutationObserver.observe(root, {
+			attributes: true,
+			attributeFilter: ["data-checked"],
+			childList: true,
+			subtree: true
+		});
+		observeSizes();
+		measure();
+		return () => {
+			resizeObserver.disconnect();
+			mutationObserver.disconnect();
+		};
+	}, []);
+	return {
+		rootRef,
+		isMeasured
+	};
+};
+//#endregion
+export { useSegmentedControlIndicator };
+
+//# sourceMappingURL=use-segmented-control-indicator.js.map

package/dist/components/fields/segmented-control/use-segmented-control-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-segmented-control-indicator.js","names":[],"sources":["../../../../src/components/fields/segmented-control/use-segmented-control-indicator.ts"],"sourcesContent":["import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';\nimport { useRef, useState } from 'react';\n\nconst itemSelector = '[data-component=\"SegmentedControl.Item\"]';\n\nconst checkedItemSelector = `${itemSelector}[data-checked]`;\n\n/**\n * Mede o item marcado e escreve a posição do `SegmentedControl.Indicator` no próprio `Root`, nas\n * variáveis `--segmented-control-indicator-left`, `-top`, `-width` e `-height` (o\n * `offsetLeft`, `offsetTop`, `offsetWidth` e `offsetHeight` do item, em px). O `Root` é o\n * ancestral posicionado do indicador e dos itens, então os dois medem a partir da mesma origem.\n *\n * A medida é refeita quando o item marcado muda (`data-checked`, seja o valor controlado ou não),\n * quando um item entra ou sai e quando o `Root` ou um item muda de tamanho (fonte que carrega,\n * texto que muda, largura que muda). Sem item marcado, as variáveis ficam como estavam e o CSS\n * esconde o indicador. Um controle sem layout (`display: none`) não é medido.\n *\n * `isMeasured` vira `true` na primeira medida e não volta: até lá o `Root` não tem\n * `data-measured`, o indicador fica escondido, o item marcado se pinta e a transição do indicador\n * está desligada. Assim o primeiro desenho não tem o salto do indicador chegando da origem.\n */\nexport const useSegmentedControlIndicator = () => {\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  const [isMeasured, setIsMeasured] = useState(false);\n\n  useIsoLayoutEffect(() => {\n    const root = rootRef.current;\n\n    if (!root) {\n      return;\n    }\n\n    const measure = () => {\n      const item = root.querySelector<HTMLElement>(checkedItemSelector);\n\n      if (!item || (item.offsetWidth === 0 && item.offsetHeight === 0)) {\n        return;\n      }\n\n      root.style.setProperty(\n        '--segmented-control-indicator-left',\n        `${item.offsetLeft}px`,\n      );\n      root.style.setProperty(\n        '--segmented-control-indicator-top',\n        `${item.offsetTop}px`,\n      );\n      root.style.setProperty(\n        '--segmented-control-indicator-width',\n        `${item.offsetWidth}px`,\n      );\n      root.style.setProperty(\n        '--segmented-control-indicator-height',\n        `${item.offsetHeight}px`,\n      );\n\n      setIsMeasured(true);\n    };\n\n    const resizeObserver = new ResizeObserver(measure);\n\n    const observeSizes = () => {\n      resizeObserver.disconnect();\n      resizeObserver.observe(root);\n\n      for (const item of root.querySelectorAll(itemSelector)) {\n        resizeObserver.observe(item);\n      }\n    };\n\n    const mutationObserver = new MutationObserver((records) => {\n      if (records.some((record) => record.type === 'childList')) {\n        observeSizes();\n      }\n\n      measure();\n    });\n\n    mutationObserver.observe(root, {\n      attributes: true,\n      attributeFilter: ['data-checked'],\n      childList: true,\n      subtree: true,\n    });\n\n    observeSizes();\n    measure();\n\n    return () => {\n      resizeObserver.disconnect();\n      mutationObserver.disconnect();\n    };\n  }, []);\n\n  return { rootRef, isMeasured };\n};\n"],"mappings":";;;AAGA,MAAM,eAAe;AAErB,MAAM,sBAAsB,GAAG,aAAa;;;;;;;;;;;;;;;;AAiB5C,MAAa,qCAAqC;CAChD,MAAM,UAAU,OAAuB,IAAI;CAE3C,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAElD,yBAAyB;EACvB,MAAM,OAAO,QAAQ;EAErB,IAAI,CAAC,MACH;EAGF,MAAM,gBAAgB;GACpB,MAAM,OAAO,KAAK,cAA2B,mBAAmB;GAEhE,IAAI,CAAC,QAAS,KAAK,gBAAgB,KAAK,KAAK,iBAAiB,GAC5D;GAGF,KAAK,MAAM,YACT,sCACA,GAAG,KAAK,WAAW,GACrB;GACA,KAAK,MAAM,YACT,qCACA,GAAG,KAAK,UAAU,GACpB;GACA,KAAK,MAAM,YACT,uCACA,GAAG,KAAK,YAAY,GACtB;GACA,KAAK,MAAM,YACT,wCACA,GAAG,KAAK,aAAa,GACvB;GAEA,cAAc,IAAI;EACpB;EAEA,MAAM,iBAAiB,IAAI,eAAe,OAAO;EAEjD,MAAM,qBAAqB;GACzB,eAAe,WAAW;GAC1B,eAAe,QAAQ,IAAI;GAE3B,KAAK,MAAM,QAAQ,KAAK,iBAAiB,YAAY,GACnD,eAAe,QAAQ,IAAI;EAE/B;EAEA,MAAM,mBAAmB,IAAI,kBAAkB,YAAY;GACzD,IAAI,QAAQ,MAAM,WAAW,OAAO,SAAS,WAAW,GACtD,aAAa;GAGf,QAAQ;EACV,CAAC;EAED,iBAAiB,QAAQ,MAAM;GAC7B,YAAY;GACZ,iBAAiB,CAAC,cAAc;GAChC,WAAW;GACX,SAAS;EACX,CAAC;EAED,aAAa;EACb,QAAQ;EAER,aAAa;GACX,eAAe,WAAW;GAC1B,iBAAiB,WAAW;EAC9B;CACF,GAAG,CAAC,CAAC;CAEL,OAAO;EAAE;EAAS;CAAW;AAC/B"}

package/dist/components/fields/switch/switch-root-variants.d.ts

@@ -26,7 +26,7 @@ export declare const switchRootDefaultVariants: Required<SwitchRootVariants>;
  * de foco também fica vermelho.
  */
 export declare const switchRootVariants: (props?: ({
-  colorScheme?: "gray" | "brand" | null | undefined;
+  colorScheme?: "gray" | "accent" | null | undefined;
   size?: "xs" | "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

package/dist/components/fields/switch/switch-root-variants.js

@@ -54,10 +54,10 @@ const switchRootVariants = cva([
 				"dark:[--switch-thumb-checked-bg:var(--color-black)]",
 				"ring-gray-9"
 			],
-			brand: [
-				"[--switch-checked-bg:var(--color-brand-9)]",
+			accent: [
+				"[--switch-checked-bg:var(--accent-9)]",
 				"[--switch-thumb-checked-bg:var(--color-white)]",
-				"ring-brand-9"
+				"ring-accent-9"
 			]
 		},
 		size: {

package/dist/components/fields/switch/switch-root-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch-root-variants.js","names":[],"sources":["../../../../src/components/fields/switch/switch-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeCore } from '#types';\n\nexport type SwitchRootVariants = {\n  /**\n   * Cor do trilho ligado, da bolinha ligada e do anel de foco.\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeCore;\n  /**\n   * Tamanho do trilho. A bolinha do `Switch.Thumb` acompanha.\n   *\n   * @default 'md'\n   */\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n};\n\nexport const switchRootDefaultVariants: Required<SwitchRootVariants> = {\n  colorScheme: 'gray',\n  size: 'md',\n};\n\n/**\n * O trilho declara as medidas e as cores em CSS variables, e o `Switch.Thumb` as lê:\n * - `--switch-width` e `--switch-height` vêm do `size`, e a bolinha mede a altura do trilho;\n * - `--switch-x` é o deslocamento da bolinha ligada (a largura menos a altura), negativo em RTL;\n * - `--switch-checked-bg` e `--switch-thumb-checked-bg` vêm do `colorScheme`.\n *\n * Inválido (`data-invalid` do `Field` ou `aria-invalid`) contorna o trilho desligado de vermelho,\n * como a caixa desmarcada do `Checkbox`: o erro de um switch quase sempre é \"não ligado\". O anel\n * de foco também fica vermelho.\n */\nexport const switchRootVariants = cva(\n  [\n    'relative',\n    'inline-flex',\n    'shrink-0',\n    'align-middle',\n\n    'w-(--switch-width)',\n    'h-(--switch-height)',\n\n    '[--switch-x:calc(var(--switch-width)-var(--switch-height))]',\n    'rtl:[--switch-x:calc((var(--switch-width)-var(--switch-height))*-1)]',\n\n    'rounded-full',\n\n    'bg-gray-6',\n    'data-checked:bg-(--switch-checked-bg)',\n    'inset-shadow-sm',\n\n    'transition-[background-color]', // O `transition-colors` animaria também a cor do anel de foco\n\n    'cursor-pointer',\n    'select-none',\n\n    'focus-ring-outside',\n\n    'data-disabled:opacity-50',\n    'data-disabled:cursor-not-allowed',\n\n    'data-readonly:cursor-default',\n\n    'data-invalid:not-data-checked:outline-2',\n    'data-invalid:not-data-checked:outline-offset-2',\n    'data-invalid:not-data-checked:outline-solid',\n    'data-invalid:not-data-checked:outline-red-9',\n    'aria-invalid:not-data-checked:outline-2',\n    'aria-invalid:not-data-checked:outline-offset-2',\n    'aria-invalid:not-data-checked:outline-solid',\n    'aria-invalid:not-data-checked:outline-red-9',\n    'data-invalid:ring-red-9',\n    'aria-invalid:ring-red-9',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: [\n          '[--switch-checked-bg:var(--color-black)]',\n          'dark:[--switch-checked-bg:var(--color-white)]',\n          '[--switch-thumb-checked-bg:var(--color-white)]',\n          'dark:[--switch-thumb-checked-bg:var(--color-black)]',\n          'ring-gray-9',\n        ],\n        brand: [\n          '[--switch-checked-bg:var(--color-brand-9)]',\n          '[--switch-thumb-checked-bg:var(--color-white)]',\n          'ring-brand-9',\n        ],\n      },\n      size: {\n        xs: ['[--switch-width:--spacing(6)]', '[--switch-height:--spacing(3)]'],\n        sm: ['[--switch-width:--spacing(8)]', '[--switch-height:--spacing(4)]'],\n        md: [\n          '[--switch-width:--spacing(10)]',\n          '[--switch-height:--spacing(5)]',\n        ],\n        lg: [\n          '[--switch-width:--spacing(12)]',\n          '[--switch-height:--spacing(6)]',\n        ],\n      },\n    },\n    defaultVariants: {\n      colorScheme: switchRootDefaultVariants.colorScheme,\n      size: switchRootDefaultVariants.size,\n    },\n  },\n);\n"],"mappings":";;AAkBA,MAAa,4BAA0D;CACrE,aAAa;CACb,MAAM;AACR;;;;;;;;;;;AAYA,MAAa,qBAAqB,IAChC;CACE;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CAEA;CACA;CACA;CAEA;CAEA;CACA;CAEA;CAEA;CACA;CAEA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI,CAAC,iCAAiC,gCAAgC;GACtE,IAAI,CAAC,iCAAiC,gCAAgC;GACtE,IAAI,CACF,kCACA,gCACF;GACA,IAAI,CACF,kCACA,gCACF;EACF;CACF;CACA,iBAAiB;EACf,aAAa,0BAA0B;EACvC,MAAM,0BAA0B;CAClC;AACF,CACF"}
+{"version":3,"file":"switch-root-variants.js","names":[],"sources":["../../../../src/components/fields/switch/switch-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeCore } from '#types';\n\nexport type SwitchRootVariants = {\n  /**\n   * Cor do trilho ligado, da bolinha ligada e do anel de foco.\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeCore;\n  /**\n   * Tamanho do trilho. A bolinha do `Switch.Thumb` acompanha.\n   *\n   * @default 'md'\n   */\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n};\n\nexport const switchRootDefaultVariants: Required<SwitchRootVariants> = {\n  colorScheme: 'gray',\n  size: 'md',\n};\n\n/**\n * O trilho declara as medidas e as cores em CSS variables, e o `Switch.Thumb` as lê:\n * - `--switch-width` e `--switch-height` vêm do `size`, e a bolinha mede a altura do trilho;\n * - `--switch-x` é o deslocamento da bolinha ligada (a largura menos a altura), negativo em RTL;\n * - `--switch-checked-bg` e `--switch-thumb-checked-bg` vêm do `colorScheme`.\n *\n * Inválido (`data-invalid` do `Field` ou `aria-invalid`) contorna o trilho desligado de vermelho,\n * como a caixa desmarcada do `Checkbox`: o erro de um switch quase sempre é \"não ligado\". O anel\n * de foco também fica vermelho.\n */\nexport const switchRootVariants = cva(\n  [\n    'relative',\n    'inline-flex',\n    'shrink-0',\n    'align-middle',\n\n    'w-(--switch-width)',\n    'h-(--switch-height)',\n\n    '[--switch-x:calc(var(--switch-width)-var(--switch-height))]',\n    'rtl:[--switch-x:calc((var(--switch-width)-var(--switch-height))*-1)]',\n\n    'rounded-full',\n\n    'bg-gray-6',\n    'data-checked:bg-(--switch-checked-bg)',\n    'inset-shadow-sm',\n\n    'transition-[background-color]', // O `transition-colors` animaria também a cor do anel de foco\n\n    'cursor-pointer',\n    'select-none',\n\n    'focus-ring-outside',\n\n    'data-disabled:opacity-50',\n    'data-disabled:cursor-not-allowed',\n\n    'data-readonly:cursor-default',\n\n    'data-invalid:not-data-checked:outline-2',\n    'data-invalid:not-data-checked:outline-offset-2',\n    'data-invalid:not-data-checked:outline-solid',\n    'data-invalid:not-data-checked:outline-red-9',\n    'aria-invalid:not-data-checked:outline-2',\n    'aria-invalid:not-data-checked:outline-offset-2',\n    'aria-invalid:not-data-checked:outline-solid',\n    'aria-invalid:not-data-checked:outline-red-9',\n    'data-invalid:ring-red-9',\n    'aria-invalid:ring-red-9',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: [\n          '[--switch-checked-bg:var(--color-black)]',\n          'dark:[--switch-checked-bg:var(--color-white)]',\n          '[--switch-thumb-checked-bg:var(--color-white)]',\n          'dark:[--switch-thumb-checked-bg:var(--color-black)]',\n          'ring-gray-9',\n        ],\n        accent: [\n          '[--switch-checked-bg:var(--accent-9)]',\n          '[--switch-thumb-checked-bg:var(--color-white)]',\n          'ring-accent-9',\n        ],\n      },\n      size: {\n        xs: ['[--switch-width:--spacing(6)]', '[--switch-height:--spacing(3)]'],\n        sm: ['[--switch-width:--spacing(8)]', '[--switch-height:--spacing(4)]'],\n        md: [\n          '[--switch-width:--spacing(10)]',\n          '[--switch-height:--spacing(5)]',\n        ],\n        lg: [\n          '[--switch-width:--spacing(12)]',\n          '[--switch-height:--spacing(6)]',\n        ],\n      },\n    },\n    defaultVariants: {\n      colorScheme: switchRootDefaultVariants.colorScheme,\n      size: switchRootDefaultVariants.size,\n    },\n  },\n);\n"],"mappings":";;AAkBA,MAAa,4BAA0D;CACrE,aAAa;CACb,MAAM;AACR;;;;;;;;;;;AAYA,MAAa,qBAAqB,IAChC;CACE;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CAEA;CACA;CACA;CAEA;CAEA;CACA;CAEA;CAEA;CACA;CAEA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI,CAAC,iCAAiC,gCAAgC;GACtE,IAAI,CAAC,iCAAiC,gCAAgC;GACtE,IAAI,CACF,kCACA,gCACF;GACA,IAAI,CACF,kCACA,gCACF;EACF;CACF;CACA,iBAAiB;EACf,aAAa,0BAA0B;EACvC,MAAM,0BAA0B;CAClC;AACF,CACF"}

package/dist/components/fields/textarea/textarea-variants.js

@@ -52,16 +52,16 @@ const textareaVariants = cva([
 	"data-disabled:opacity-50",
 	"data-disabled:cursor-not-allowed",
 	"data-invalid:border-red-9",
-	"data-invalid:[--textarea-focus-color:var(--color-red-9)]",
+	"data-invalid:[--textarea-focus-color:var(--red-9)]",
 	"aria-invalid:border-red-9",
-	"aria-invalid:[--textarea-focus-color:var(--color-red-9)]"
+	"aria-invalid:[--textarea-focus-color:var(--red-9)]"
 ], {
 	variants: {
 		variant: {
 			outline: [
 				"bg-white/90",
 				"dark:bg-black/90",
-				"border-gray-alpha-7"
+				"border-gray-7"
 			],
 			subtle: ["bg-gray-4", "border-transparent"]
 		},

package/dist/components/fields/textarea/textarea-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea-variants.js","names":[],"sources":["../../../../src/components/fields/textarea/textarea-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type TextareaVariants = {\n  /**\n   * Padding e tamanho do texto, com os nomes do `Input`. Sem altura fixa: ela vem de `rows` ou,\n   * com `field-sizing-content`, do conteúdo. Em tela de toque, do `2xs` ao `md` o texto sobe para\n   * 16px, para o iPhone não dar zoom no foco.\n   *\n   * @default 'sm'\n   */\n  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /**\n   * Fundo e borda do campo.\n   *\n   * @default 'outline'\n   */\n  variant?: 'outline' | 'subtle';\n};\n\nexport const textareaDefaultVariants: Required<TextareaVariants> = {\n  size: 'sm',\n  variant: 'outline',\n};\n\n/**\n * Cópia de `inputVariants`, a origem do visual dos campos: o anel de foco e o inválido funcionam do\n * mesmo jeito, explicados lá. As diferenças:\n * - sem `data-placeholder` nem altura fixa: a altura vem de `rows` ou, com `field-sizing-content`,\n *   do conteúdo;\n * - `block`, `resize-y` e o padding vertical em `--textarea-py`.\n *\n * Cada tamanho declara o padding vertical em `--textarea-py`, que três classes da base leem:\n * - `py`;\n * - `scroll-pb`: ao digitar na última linha de um textarea com rolagem, o navegador rola até o\n *   cursor; sem ele, a linha fica colada na borda de baixo, sem o padding;\n * - `min-h`: uma linha (`1lh`, que acompanha o texto, inclusive em tela de toque), mais o padding e\n *   a borda. Arrastando a alça, o campo não encolhe a ponto de cortar o texto.\n */\nexport const textareaVariants = cva(\n  [\n    'relative',\n    'block', // Como `inline-block`, o padrão, deixa um vão embaixo, na linha de base do texto em volta\n    'w-full',\n    'min-h-[calc(1lh+var(--textarea-py)*2+2px)]',\n\n    'py-(--textarea-py)',\n    'scroll-pb-(--textarea-py)',\n\n    'appearance-none',\n    'outline-none',\n\n    'resize-y',\n\n    'text-start',\n    'font-normal', // Sem isto, herda o peso do `<label>` em volta\n    'text-gray-12',\n\n    'placeholder:text-gray-11/80',\n\n    'border',\n    'rounded-md',\n    'corner-squircle',\n\n    '[--textarea-focus-color:var(--color-black)]',\n    'dark:[--textarea-focus-color:var(--color-white)]',\n\n    'focus-visible:outline-1',\n    'focus-visible:outline-solid',\n    'focus-visible:-outline-offset-2', // Offset = borda + anel: o campo não cresce no foco\n    'focus-visible:outline-(--textarea-focus-color)',\n    'focus-visible:border-(--textarea-focus-color)',\n\n    'data-focused:outline-1',\n    'data-focused:outline-solid',\n    'data-focused:-outline-offset-2',\n    'data-focused:outline-(--textarea-focus-color)',\n    'data-focused:border-(--textarea-focus-color)',\n\n    'disabled:opacity-50',\n    'disabled:cursor-not-allowed',\n\n    'data-disabled:opacity-50',\n    'data-disabled:cursor-not-allowed',\n\n    'data-invalid:border-red-9',\n    'data-invalid:[--textarea-focus-color:var(--color-red-9)]',\n    'aria-invalid:border-red-9',\n    'aria-invalid:[--textarea-focus-color:var(--color-red-9)]',\n  ],\n  {\n    variants: {\n      variant: {\n        outline: [\n          'bg-white/90',\n          'dark:bg-black/90',\n\n          'border-gray-alpha-7',\n        ],\n        subtle: [\n          'bg-gray-4',\n\n          'border-transparent',\n        ],\n      },\n      size: {\n        '2xs': [\n          'px-2',\n          '[--textarea-py:--spacing(1)]',\n\n          'text-xs',\n          // Em tela de toque, 16px: abaixo disso o Safari do iPhone dá zoom ao focar o campo.\n          'any-pointer-coarse:text-base',\n        ],\n        xs: [\n          'px-2',\n          '[--textarea-py:--spacing(2)]',\n\n          'text-xs',\n          'any-pointer-coarse:text-base',\n        ],\n        sm: [\n          'px-2.5',\n          '[--textarea-py:--spacing(2)]',\n\n          'text-sm',\n          'any-pointer-coarse:text-base',\n        ],\n        md: [\n          'px-3',\n          '[--textarea-py:--spacing(2)]',\n\n          'text-sm',\n          'any-pointer-coarse:text-base',\n        ],\n        lg: [\n          'px-4',\n          '[--textarea-py:--spacing(3)]',\n\n          'text-base',\n        ],\n        xl: [\n          'px-4.5',\n          '[--textarea-py:--spacing(4)]',\n\n          'text-base',\n        ],\n        '2xl': [\n          'px-5',\n          '[--textarea-py:--spacing(4)]',\n\n          'text-lg',\n        ],\n      },\n    },\n    defaultVariants: {\n      size: textareaDefaultVariants.size,\n      variant: textareaDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAmBA,MAAa,0BAAsD;CACjE,MAAM;CACN,SAAS;AACX;;;;;;;;;;;;;;;AAgBA,MAAa,mBAAmB,IAC9B;CACE;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CAEA;CACA;CACA;CAEA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;IACP;IACA;IAEA;GACF;GACA,QAAQ,CACN,aAEA,oBACF;EACF;EACA,MAAM;GACJ,OAAO;IACL;IACA;IAEA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;GACF;GACA,OAAO;IACL;IACA;IAEA;GACF;EACF;CACF;CACA,iBAAiB;EACf,MAAM,wBAAwB;EAC9B,SAAS,wBAAwB;CACnC;AACF,CACF"}
+{"version":3,"file":"textarea-variants.js","names":[],"sources":["../../../../src/components/fields/textarea/textarea-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type TextareaVariants = {\n  /**\n   * Padding e tamanho do texto, com os nomes do `Input`. Sem altura fixa: ela vem de `rows` ou,\n   * com `field-sizing-content`, do conteúdo. Em tela de toque, do `2xs` ao `md` o texto sobe para\n   * 16px, para o iPhone não dar zoom no foco.\n   *\n   * @default 'sm'\n   */\n  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /**\n   * Fundo e borda do campo.\n   *\n   * @default 'outline'\n   */\n  variant?: 'outline' | 'subtle';\n};\n\nexport const textareaDefaultVariants: Required<TextareaVariants> = {\n  size: 'sm',\n  variant: 'outline',\n};\n\n/**\n * Cópia de `inputVariants`, a origem do visual dos campos: o anel de foco e o inválido funcionam do\n * mesmo jeito, explicados lá. As diferenças:\n * - sem `data-placeholder` nem altura fixa: a altura vem de `rows` ou, com `field-sizing-content`,\n *   do conteúdo;\n * - `block`, `resize-y` e o padding vertical em `--textarea-py`.\n *\n * Cada tamanho declara o padding vertical em `--textarea-py`, que três classes da base leem:\n * - `py`;\n * - `scroll-pb`: ao digitar na última linha de um textarea com rolagem, o navegador rola até o\n *   cursor; sem ele, a linha fica colada na borda de baixo, sem o padding;\n * - `min-h`: uma linha (`1lh`, que acompanha o texto, inclusive em tela de toque), mais o padding e\n *   a borda. Arrastando a alça, o campo não encolhe a ponto de cortar o texto.\n */\nexport const textareaVariants = cva(\n  [\n    'relative',\n    'block', // Como `inline-block`, o padrão, deixa um vão embaixo, na linha de base do texto em volta\n    'w-full',\n    'min-h-[calc(1lh+var(--textarea-py)*2+2px)]',\n\n    'py-(--textarea-py)',\n    'scroll-pb-(--textarea-py)',\n\n    'appearance-none',\n    'outline-none',\n\n    'resize-y',\n\n    'text-start',\n    'font-normal', // Sem isto, herda o peso do `<label>` em volta\n    'text-gray-12',\n\n    'placeholder:text-gray-11/80',\n\n    'border',\n    'rounded-md',\n    'corner-squircle',\n\n    '[--textarea-focus-color:var(--color-black)]',\n    'dark:[--textarea-focus-color:var(--color-white)]',\n\n    'focus-visible:outline-1',\n    'focus-visible:outline-solid',\n    'focus-visible:-outline-offset-2', // Offset = borda + anel: o campo não cresce no foco\n    'focus-visible:outline-(--textarea-focus-color)',\n    'focus-visible:border-(--textarea-focus-color)',\n\n    'data-focused:outline-1',\n    'data-focused:outline-solid',\n    'data-focused:-outline-offset-2',\n    'data-focused:outline-(--textarea-focus-color)',\n    'data-focused:border-(--textarea-focus-color)',\n\n    'disabled:opacity-50',\n    'disabled:cursor-not-allowed',\n\n    'data-disabled:opacity-50',\n    'data-disabled:cursor-not-allowed',\n\n    'data-invalid:border-red-9',\n    'data-invalid:[--textarea-focus-color:var(--red-9)]',\n    'aria-invalid:border-red-9',\n    'aria-invalid:[--textarea-focus-color:var(--red-9)]',\n  ],\n  {\n    variants: {\n      variant: {\n        outline: [\n          'bg-white/90',\n          'dark:bg-black/90',\n\n          'border-gray-7',\n        ],\n        subtle: [\n          'bg-gray-4',\n\n          'border-transparent',\n        ],\n      },\n      size: {\n        '2xs': [\n          'px-2',\n          '[--textarea-py:--spacing(1)]',\n\n          'text-xs',\n          // Em tela de toque, 16px: abaixo disso o Safari do iPhone dá zoom ao focar o campo.\n          'any-pointer-coarse:text-base',\n        ],\n        xs: [\n          'px-2',\n          '[--textarea-py:--spacing(2)]',\n\n          'text-xs',\n          'any-pointer-coarse:text-base',\n        ],\n        sm: [\n          'px-2.5',\n          '[--textarea-py:--spacing(2)]',\n\n          'text-sm',\n          'any-pointer-coarse:text-base',\n        ],\n        md: [\n          'px-3',\n          '[--textarea-py:--spacing(2)]',\n\n          'text-sm',\n          'any-pointer-coarse:text-base',\n        ],\n        lg: [\n          'px-4',\n          '[--textarea-py:--spacing(3)]',\n\n          'text-base',\n        ],\n        xl: [\n          'px-4.5',\n          '[--textarea-py:--spacing(4)]',\n\n          'text-base',\n        ],\n        '2xl': [\n          'px-5',\n          '[--textarea-py:--spacing(4)]',\n\n          'text-lg',\n        ],\n      },\n    },\n    defaultVariants: {\n      size: textareaDefaultVariants.size,\n      variant: textareaDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAmBA,MAAa,0BAAsD;CACjE,MAAM;CACN,SAAS;AACX;;;;;;;;;;;;;;;AAgBA,MAAa,mBAAmB,IAC9B;CACE;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CAEA;CACA;CACA;CAEA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;IACP;IACA;IAEA;GACF;GACA,QAAQ,CACN,aAEA,oBACF;EACF;EACA,MAAM;GACJ,OAAO;IACL;IACA;IAEA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;GACF;GACA,OAAO;IACL;IACA;IAEA;GACF;EACF;CACF;CACA,iBAAiB;EACf,MAAM,wBAAwB;EAC9B,SAAS,wBAAwB;CACnC;AACF,CACF"}

package/dist/components/layout/center-absolute/center-absolute-variants.d.ts

@@ -9,7 +9,7 @@ export type CenterAbsoluteVariants = {
 };
 export declare const centerAbsoluteDefaultVariants: Required<CenterAbsoluteVariants>;
 export declare const centerAbsoluteVariants: (props?: ({
-  axis?: "vertical" | "horizontal" | "both" | null | undefined;
+  axis?: "both" | "horizontal" | "vertical" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=center-absolute-variants.d.ts.map

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

@@ -0,0 +1,43 @@
+//#region src/components/layout/group/group-variants.d.ts
+export type GroupVariants = {
+  /**
+   * Cola os filhos, sem espaço entre eles: os cantos de dentro ficam retos e as bordas de dois
+   * vizinhos se sobrepõem numa só.
+   *
+   * @default false
+   */
+  attached?: boolean;
+  /**
+   * Direção em que os filhos ficam.
+   *
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * Ocupa a largura toda e divide o espaço em partes iguais entre os filhos.
+   *
+   * @default false
+   */
+  grow?: boolean;
+};
+export declare const groupDefaultVariants: Required<GroupVariants>;
+/**
+ * Com `attached`, o grupo tira os cantos de dentro dos filhos diretos e sobrepõe as bordas, só por
+ * CSS, sem clonar os filhos nem marcá-los. Cada regra do grupo (`.group > *:not(:first-child)`,
+ * 0,2,0) vence o `rounded-md` do filho (`.filho`, 0,1,0). Um filho que desenha a própria borda
+ * dentro de outro elemento (um `InputGroup` com addon, cuja caixa está um nível abaixo) não tem os
+ * cantos ajustados.
+ *
+ * A sobreposição de 1px (`-ms-px`, `-mt-px`) faz a borda de dois vizinhos coincidir. O filho com
+ * foco ou hover sobe, dentro do `isolate` do grupo, para a borda dele aparecer inteira por cima da
+ * vizinha; o `has()` cobre o filho que contém o elemento focado (um campo dentro de uma caixa) e o
+ * `data-focused` do `Field`. O foco (`z-2`) fica acima do hover (`z-1`): sem isso, passar o mouse
+ * no vizinho cobriria a borda do filho focado.
+ */
+export declare const groupVariants: (props?: ({
+  attached?: boolean | null | undefined;
+  orientation?: "horizontal" | "vertical" | null | undefined;
+  grow?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=group-variants.d.ts.map

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

@@ -0,0 +1,72 @@
+import { cva } from "class-variance-authority";
+//#region src/components/layout/group/group-variants.ts
+const groupDefaultVariants = {
+	attached: false,
+	orientation: "horizontal",
+	grow: false
+};
+/**
+* Com `attached`, o grupo tira os cantos de dentro dos filhos diretos e sobrepõe as bordas, só por
+* CSS, sem clonar os filhos nem marcá-los. Cada regra do grupo (`.group > *:not(:first-child)`,
+* 0,2,0) vence o `rounded-md` do filho (`.filho`, 0,1,0). Um filho que desenha a própria borda
+* dentro de outro elemento (um `InputGroup` com addon, cuja caixa está um nível abaixo) não tem os
+* cantos ajustados.
+*
+* A sobreposição de 1px (`-ms-px`, `-mt-px`) faz a borda de dois vizinhos coincidir. O filho com
+* foco ou hover sobe, dentro do `isolate` do grupo, para a borda dele aparecer inteira por cima da
+* vizinha; o `has()` cobre o filho que contém o elemento focado (um campo dentro de uma caixa) e o
+* `data-focused` do `Field`. O foco (`z-2`) fica acima do hover (`z-1`): sem isso, passar o mouse
+* no vizinho cobriria a borda do filho focado.
+*/
+const groupVariants = cva(["relative", "isolate"], {
+	variants: {
+		attached: {
+			true: [
+				"gap-0",
+				"[&>*:focus-visible]:z-2",
+				"[&>*:has(:focus-visible)]:z-2",
+				"[&>*:has([data-focused])]:z-2",
+				"[&>*:hover]:z-1"
+			],
+			false: ["gap-2"]
+		},
+		orientation: {
+			horizontal: ["flex-row"],
+			vertical: ["flex-col"]
+		},
+		grow: {
+			true: [
+				"flex",
+				"w-full",
+				"*:flex-1"
+			],
+			false: ["inline-flex"]
+		}
+	},
+	compoundVariants: [{
+		attached: true,
+		orientation: "horizontal",
+		className: [
+			"[&>*:not(:first-child)]:rounded-s-none",
+			"[&>*:not(:last-child)]:rounded-e-none",
+			"[&>*:not(:first-child)]:-ms-px"
+		]
+	}, {
+		attached: true,
+		orientation: "vertical",
+		className: [
+			"[&>*:not(:first-child)]:rounded-t-none",
+			"[&>*:not(:last-child)]:rounded-b-none",
+			"[&>*:not(:first-child)]:-mt-px"
+		]
+	}],
+	defaultVariants: {
+		attached: groupDefaultVariants.attached,
+		orientation: groupDefaultVariants.orientation,
+		grow: groupDefaultVariants.grow
+	}
+});
+//#endregion
+export { groupDefaultVariants, groupVariants };
+
+//# sourceMappingURL=group-variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"group-variants.js","names":[],"sources":["../../../../src/components/layout/group/group-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type GroupVariants = {\n  /**\n   * Cola os filhos, sem espaço entre eles: os cantos de dentro ficam retos e as bordas de dois\n   * vizinhos se sobrepõem numa só.\n   *\n   * @default false\n   */\n  attached?: boolean;\n  /**\n   * Direção em que os filhos ficam.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * Ocupa a largura toda e divide o espaço em partes iguais entre os filhos.\n   *\n   * @default false\n   */\n  grow?: boolean;\n};\n\nexport const groupDefaultVariants: Required<GroupVariants> = {\n  attached: false,\n  orientation: 'horizontal',\n  grow: false,\n};\n\n/**\n * Com `attached`, o grupo tira os cantos de dentro dos filhos diretos e sobrepõe as bordas, só por\n * CSS, sem clonar os filhos nem marcá-los. Cada regra do grupo (`.group > *:not(:first-child)`,\n * 0,2,0) vence o `rounded-md` do filho (`.filho`, 0,1,0). Um filho que desenha a própria borda\n * dentro de outro elemento (um `InputGroup` com addon, cuja caixa está um nível abaixo) não tem os\n * cantos ajustados.\n *\n * A sobreposição de 1px (`-ms-px`, `-mt-px`) faz a borda de dois vizinhos coincidir. O filho com\n * foco ou hover sobe, dentro do `isolate` do grupo, para a borda dele aparecer inteira por cima da\n * vizinha; o `has()` cobre o filho que contém o elemento focado (um campo dentro de uma caixa) e o\n * `data-focused` do `Field`. O foco (`z-2`) fica acima do hover (`z-1`): sem isso, passar o mouse\n * no vizinho cobriria a borda do filho focado.\n */\nexport const groupVariants = cva(['relative', 'isolate'], {\n  variants: {\n    attached: {\n      true: [\n        'gap-0',\n\n        '[&>*:focus-visible]:z-2',\n        '[&>*:has(:focus-visible)]:z-2',\n        '[&>*:has([data-focused])]:z-2',\n        '[&>*:hover]:z-1',\n      ],\n      false: ['gap-2'],\n    },\n    orientation: {\n      horizontal: ['flex-row'],\n      vertical: ['flex-col'],\n    },\n    grow: {\n      true: ['flex', 'w-full', '*:flex-1'],\n      false: ['inline-flex'],\n    },\n  },\n  compoundVariants: [\n    {\n      attached: true,\n      orientation: 'horizontal',\n      className: [\n        '[&>*:not(:first-child)]:rounded-s-none',\n        '[&>*:not(:last-child)]:rounded-e-none',\n        '[&>*:not(:first-child)]:-ms-px',\n      ],\n    },\n    {\n      attached: true,\n      orientation: 'vertical',\n      className: [\n        '[&>*:not(:first-child)]:rounded-t-none',\n        '[&>*:not(:last-child)]:rounded-b-none',\n        '[&>*:not(:first-child)]:-mt-px',\n      ],\n    },\n  ],\n  defaultVariants: {\n    attached: groupDefaultVariants.attached,\n    orientation: groupDefaultVariants.orientation,\n    grow: groupDefaultVariants.grow,\n  },\n});\n"],"mappings":";;AAwBA,MAAa,uBAAgD;CAC3D,UAAU;CACV,aAAa;CACb,MAAM;AACR;;;;;;;;;;;;;;AAeA,MAAa,gBAAgB,IAAI,CAAC,YAAY,SAAS,GAAG;CACxD,UAAU;EACR,UAAU;GACR,MAAM;IACJ;IAEA;IACA;IACA;IACA;GACF;GACA,OAAO,CAAC,OAAO;EACjB;EACA,aAAa;GACX,YAAY,CAAC,UAAU;GACvB,UAAU,CAAC,UAAU;EACvB;EACA,MAAM;GACJ,MAAM;IAAC;IAAQ;IAAU;GAAU;GACnC,OAAO,CAAC,aAAa;EACvB;CACF;CACA,kBAAkB,CAChB;EACE,UAAU;EACV,aAAa;EACb,WAAW;GACT;GACA;GACA;EACF;CACF,GACA;EACE,UAAU;EACV,aAAa;EACb,WAAW;GACT;GACA;GACA;EACF;CACF,CACF;CACA,iBAAiB;EACf,UAAU,qBAAqB;EAC/B,aAAa,qBAAqB;EAClC,MAAM,qBAAqB;CAC7B;AACF,CAAC"}

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

@@ -0,0 +1,38 @@
+import { GroupVariants } from "./group-variants.js";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
+import { useRender } from "@base-ui/react";
+//#region src/components/layout/group/group.d.ts
+export type GroupProps = MergeOverride<useRender.ComponentProps<'div'>, GroupVariants>;
+/**
+ * Agrupa elementos lado a lado ou em coluna, com espaço entre eles ou colados: botões
+ * relacionados, um campo com um botão, o addon de um `InputGroup`. Os filhos esticam na altura
+ * (ou na largura, em coluna) do maior.
+ *
+ * - Com `attached`, o grupo tira os cantos de dentro dos filhos diretos e sobrepõe as bordas
+ *   (o mecanismo está no `groupVariants`). Um filho que desenha a borda um nível abaixo dele
+ *   (um `InputGroup` com addon) não tem os cantos de dentro ajustados.
+ * - O `grow` ocupa a linha toda e divide a largura em partes iguais.
+ *
+ * @example
+ * ```tsx
+ * <Group attached>
+ *   <Button variant="outline">Dia</Button>
+ *   <Button variant="outline">Semana</Button>
+ *   <Button variant="outline">Mês</Button>
+ * </Group>
+ *
+ * <Group attached>
+ *   <InputGroup>
+ *     <Input aria-label="Cupom" />
+ *   </InputGroup>
+ *
+ *   <Button>Aplicar</Button>
+ * </Group>
+ * ```
+ */
+export declare const Group: {
+  (props: GroupProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=group.d.ts.map

package/dist/components/layout/group/group.js

@@ -0,0 +1,55 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { groupVariants } from "./group-variants.js";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/layout/group/group.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Agrupa elementos lado a lado ou em coluna, com espaço entre eles ou colados: botões
+* relacionados, um campo com um botão, o addon de um `InputGroup`. Os filhos esticam na altura
+* (ou na largura, em coluna) do maior.
+*
+* - Com `attached`, o grupo tira os cantos de dentro dos filhos diretos e sobrepõe as bordas
+*   (o mecanismo está no `groupVariants`). Um filho que desenha a borda um nível abaixo dele
+*   (um `InputGroup` com addon) não tem os cantos de dentro ajustados.
+* - O `grow` ocupa a linha toda e divide a largura em partes iguais.
+*
+* @example
+* ```tsx
+* <Group attached>
+*   <Button variant="outline">Dia</Button>
+*   <Button variant="outline">Semana</Button>
+*   <Button variant="outline">Mês</Button>
+* </Group>
+*
+* <Group attached>
+*   <InputGroup>
+*     <Input aria-label="Cupom" />
+*   </InputGroup>
+*
+*   <Button>Aplicar</Button>
+* </Group>
+* ```
+*/
+const Group = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, [
+		"attached",
+		"orientation",
+		"grow"
+	]);
+	const { render, className, ...rest } = elementProps;
+	const baseProps = {
+		"data-component": "Group",
+		className: mergeTwClassNames(groupVariants(variantProps), className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+Group.displayName = "Group";
+//#endregion
+export { Group };
+
+//# sourceMappingURL=group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"group.js","names":[],"sources":["../../../../src/components/layout/group/group.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 GroupVariants, groupVariants } from './group-variants';\n\nexport type GroupProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  GroupVariants\n>;\n\nconst splitVariantProps = createSplitProps<GroupVariants>();\n\n/**\n * Agrupa elementos lado a lado ou em coluna, com espaço entre eles ou colados: botões\n * relacionados, um campo com um botão, o addon de um `InputGroup`. Os filhos esticam na altura\n * (ou na largura, em coluna) do maior.\n *\n * - Com `attached`, o grupo tira os cantos de dentro dos filhos diretos e sobrepõe as bordas\n *   (o mecanismo está no `groupVariants`). Um filho que desenha a borda um nível abaixo dele\n *   (um `InputGroup` com addon) não tem os cantos de dentro ajustados.\n * - O `grow` ocupa a linha toda e divide a largura em partes iguais.\n *\n * @example\n * ```tsx\n * <Group attached>\n *   <Button variant=\"outline\">Dia</Button>\n *   <Button variant=\"outline\">Semana</Button>\n *   <Button variant=\"outline\">Mês</Button>\n * </Group>\n *\n * <Group attached>\n *   <InputGroup>\n *     <Input aria-label=\"Cupom\" />\n *   </InputGroup>\n *\n *   <Button>Aplicar</Button>\n * </Group>\n * ```\n */\nexport const Group = (props: GroupProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'attached',\n    'orientation',\n    'grow',\n  ]);\n\n  const { render, className, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'Group',\n    className: mergeTwClassNames(groupVariants(variantProps), className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nGroup.displayName = 'Group';\n"],"mappings":";;;;;AAaA,MAAM,oBAAoB,iBAAgC;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6B1D,MAAa,SAAS,UAAsB;CAC1C,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO;EAC5D;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,cAAc,YAAY,GAAG,SAAS;CACrE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,MAAM,cAAc"}

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

@@ -0,0 +1,3 @@
+import { GroupVariants } from "./group-variants.js";
+import { Group, GroupProps } from "./group.js";
+export { Group, type GroupProps, type GroupVariants };

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

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

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

@@ -1,6 +1,17 @@
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 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 ScrollAreaRootProps = MergeOverride<ScrollArea.Root.Props, {
+  /**
+   * Quando as barras aparecem. Com `'auto'`, no hover e na rolagem. Com `'always'`, ficam sempre
+   * visíveis com mouse, com a trilha de 16px; no toque, continuam sumindo. Serve a uma área de
+   * dados, em que a barra mostra a posição e que há mais conteúdo ao lado. Vale para as barras
+   * filhas diretas do `Root`, não para as de um `ScrollArea` aninhado.
+   *
+   * @default 'auto'
+   */
+  scrollbars?: 'auto' | 'always';
+}>;
 export type ScrollAreaRootState = ScrollArea.Root.State;
 /**
  * Agrupa as partes e serve de referência de posição para as barras. **Não declara tamanho**:
@@ -14,9 +25,11 @@ export type ScrollAreaRootState = ScrollArea.Root.State;
  *
  * | 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

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;