@lucasbernardosn/react-ui 0.4.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/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-thumb.js

@@ -18,9 +18,9 @@ const ScrollAreaThumb = (props) => {
 			"size-(--scroll-area-thumb-size,100%)",
 			"pointer-fine:size-(--scroll-area-thumb-size,--spacing(1.5))",
 			"rounded-xs",
-			"bg-[color-mix(in_oklab,var(--color-gray-alpha-8),var(--color-gray-alpha-9))]",
-			"hover:bg-gray-alpha-10",
-			"active:bg-gray-alpha-11",
+			"bg-[color-mix(in_oklab,var(--gray-a8),var(--gray-a9))]",
+			"hover:bg-gray-a10",
+			"active:bg-gray-a11",
 			"pointer-fine:hover:[--scroll-area-thumb-size:min(--spacing(2),100%)]",
 			"pointer-fine:active:[--scroll-area-thumb-size:min(--spacing(2),100%)]",
 			"not-motion-reduced:transition-[background-color,width,height]",

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

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

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

@@ -22,7 +22,7 @@ export type SeparatorVariants = {
 };
 export declare const separatorDefaultVariants: Required<SeparatorVariants>;
 export declare const separatorVariants: (props?: ({
-  colorScheme?: "gray" | "brand" | null | undefined;
+  colorScheme?: "gray" | "accent" | null | undefined;
   size?: "sm" | "md" | "lg" | "xl" | null | undefined;
   variant?: "solid" | "dashed" | "dotted" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

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

@@ -14,7 +14,7 @@ const separatorVariants = cva([
 	variants: {
 		colorScheme: {
 			gray: ["border-gray-6"],
-			brand: ["border-brand-6"]
+			accent: ["border-accent-6"]
 		},
 		size: {
 			sm: ["[--separator-size:1px]"],

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

@@ -1 +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"}
+{"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        accent: ['border-accent-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,QAAQ,CAAC,iBAAiB;EAC5B;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/overlays/action-bar/action-bar-selection-trigger.js

@@ -21,7 +21,7 @@ const ActionBarSelectionTrigger = (props) => {
 			"corner-squircle",
 			"border",
 			"border-dashed",
-			"border-gray-alpha-7",
+			"border-gray-7",
 			"text-sm",
 			"text-gray-12",
 			"font-medium",
@@ -30,7 +30,7 @@ const ActionBarSelectionTrigger = (props) => {
 			"hover:transition-[background-color]",
 			"hover:ease-in",
 			"hover:duration-150",
-			"hover:bg-gray-alpha-3",
+			"hover:bg-gray-a3",
 			"ring-gray-9",
 			"focus-ring-outside",
 			"[&_svg]:shrink-0"

package/dist/components/overlays/action-bar/action-bar-selection-trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"action-bar-selection-trigger.js","names":[],"sources":["../../../../src/components/overlays/action-bar/action-bar-selection-trigger.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type ActionBarSelectionTriggerProps = useRender.ComponentProps<'button'>;\n\n/**\n * Resumo da seleção (\"3 selecionados\"), no início da barra. É um botão para quem usa ligar uma\n * ação à contagem, como limpar a seleção ou listar os itens.\n */\nexport const ActionBarSelectionTrigger = (\n  props: ActionBarSelectionTriggerProps,\n) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'ActionBar.SelectionTrigger',\n    type: 'button' as const,\n    className: mergeTwClassNames(\n      [\n        'inline-flex',\n        'items-center',\n        'gap-2',\n        // Estica até a altura dos botões ao lado.\n        'self-stretch',\n        'shrink-0',\n\n        'px-3',\n\n        'rounded-md',\n        'corner-squircle',\n        'border',\n        'border-dashed',\n        'border-gray-alpha-7',\n\n        'text-sm',\n        'text-gray-12',\n        'font-medium',\n        'whitespace-nowrap',\n\n        'cursor-pointer',\n\n        'hover:transition-[background-color]', // O `transition-colors` animaria também a cor do anel de foco\n        'hover:ease-in',\n        'hover:duration-150',\n        'hover:bg-gray-alpha-3',\n\n        'ring-gray-9',\n        'focus-ring-outside',\n\n        '[&_svg]:shrink-0',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'button',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nActionBarSelectionTrigger.displayName = 'ActionBar.SelectionTrigger';\n"],"mappings":";;;;;;;AASA,MAAa,6BACX,UACG;CACH,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,MAAM;EACN,WAAW,kBACT;GACE;GACA;GACA;GAEA;GACA;GAEA;GAEA;GACA;GACA;GACA;GACA;GAEA;GACA;GACA;GACA;GAEA;GAEA;GACA;GACA;GACA;GAEA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,0BAA0B,cAAc"}
+{"version":3,"file":"action-bar-selection-trigger.js","names":[],"sources":["../../../../src/components/overlays/action-bar/action-bar-selection-trigger.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type ActionBarSelectionTriggerProps = useRender.ComponentProps<'button'>;\n\n/**\n * Resumo da seleção (\"3 selecionados\"), no início da barra. É um botão para quem usa ligar uma\n * ação à contagem, como limpar a seleção ou listar os itens.\n */\nexport const ActionBarSelectionTrigger = (\n  props: ActionBarSelectionTriggerProps,\n) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'ActionBar.SelectionTrigger',\n    type: 'button' as const,\n    className: mergeTwClassNames(\n      [\n        'inline-flex',\n        'items-center',\n        'gap-2',\n        // Estica até a altura dos botões ao lado.\n        'self-stretch',\n        'shrink-0',\n\n        'px-3',\n\n        'rounded-md',\n        'corner-squircle',\n        'border',\n        'border-dashed',\n        'border-gray-7',\n\n        'text-sm',\n        'text-gray-12',\n        'font-medium',\n        'whitespace-nowrap',\n\n        'cursor-pointer',\n\n        'hover:transition-[background-color]', // O `transition-colors` animaria também a cor do anel de foco\n        'hover:ease-in',\n        'hover:duration-150',\n        'hover:bg-gray-a3',\n\n        'ring-gray-9',\n        'focus-ring-outside',\n\n        '[&_svg]:shrink-0',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'button',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nActionBarSelectionTrigger.displayName = 'ActionBar.SelectionTrigger';\n"],"mappings":";;;;;;;AASA,MAAa,6BACX,UACG;CACH,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,MAAM;EACN,WAAW,kBACT;GACE;GACA;GACA;GAEA;GACA;GAEA;GAEA;GACA;GACA;GACA;GACA;GAEA;GACA;GACA;GACA;GAEA;GAEA;GACA;GACA;GACA;GAEA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,0BAA0B,cAAc"}

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

@@ -6,8 +6,7 @@ export type AlertDialogBackdropState = AlertDialog.Backdrop.State;
  * Camada atrás do popup que cobre e escurece a página. Num alert dialog aninhado, o Base UI não a
  * renderiza (a não ser com `forceRender`): quem escurece é o popup de trás.
  *
- * Cópia de `PopoverBackdrop`, a origem do backdrop dos popups, sem diferenças (tabela no README
- * de `overlays`).
+ * Cópia de `PopoverBackdrop`, a origem do backdrop dos popups, sem diferenças.
  */
 export declare const AlertDialogBackdrop: {
   (props: AlertDialogBackdropProps): import("react").JSX.Element;