npm - @lucasbernardosn/react-ui - Versions diffs - 0.3.0 → 0.4.0 - Mend

@lucasbernardosn/react-ui 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (111) hide show

package/dist/components/display/data-list/data-list-item.js CHANGED Viewed

@@ -4,14 +4,18 @@ import { dataListItemVariants } from "./data-list-item-variants.js";
 import { mergeProps, useRender } from "@base-ui/react";
 //#region src/components/display/data-list/data-list-item.tsx
 /**
-* Um par rótulo e valor. O `div` em volta de `dt` e `dd` é válido dentro de `dl`.
+* Um par rótulo e valor, com a orientação e o tamanho do `Root`. O `div` em volta de `dt` e `dd` é
+* válido dentro de `dl`.
 */
 const DataListItem = (props) => {
 	const { render, className, ...rest } = props;
-	const { orientation } = useDataListContext();
+	const { orientation, size } = useDataListContext();
 	const baseProps = {
 		"data-component": "DataList.Item",
-		className: mergeTwClassNames(dataListItemVariants({ orientation }), className)
+		className: mergeTwClassNames(dataListItemVariants({
+			orientation,
+			size
+		}), className)
 	};
 	return useRender({
 		render,

package/dist/components/display/data-list/data-list-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-list-item.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-item.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\nimport { dataListItemVariants } from './data-list-item-variants';\nimport { useDataListContext } from './use-data-list-context';\n\nexport type DataListItemProps = useRender.ComponentProps<'div'>;\n\n/*\n Um par rótulo e valor. O `div` em volta de `dt` e `dd` é válido dentro de `dl`.\n */\nexport const DataListItem = (props: DataListItemProps) => {\n const { render, className, ...rest } = props;\n\n const { orientation } = useDataListContext();\n\n const baseProps = {\n 'data-component': 'DataList.Item',\n className: mergeTwClassNames(\n dataListItemVariants({ orientation }),\n className,\n ),\n };\n\n return useRender({\n render,\n defaultTagName: 'div',\n props: mergeProps(baseProps, rest),\n });\n};\n\nDataListItem.displayName = 'DataList.Item';\n"],"mappings":"~~;;;;;;;;AAUA~~,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,EAAE,~~gBAAgB~~,mBAAmB;~~CAE3C~~,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT,qBAAqB,~~EAAE,YAAY,~~CAAC,~~GACpC~~,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,aAAa,cAAc"}
1	+ {"version":3,"file":"data-list-item.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-item.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\nimport { dataListItemVariants } from './data-list-item-variants';\nimport { useDataListContext } from './use-data-list-context';\n\nexport type DataListItemProps = useRender.ComponentProps<'div'>;\n\n/*\n Um par rótulo e valor, com a orientação e o tamanho do `Root`. O `div` em volta de `dt` e `dd` é\n * válido dentro de `dl`.\n */\nexport const DataListItem = (props: DataListItemProps) => {\n const { render, className, ...rest } = props;\n\n const { orientation, size } = useDataListContext();\n\n const baseProps = {\n 'data-component': 'DataList.Item',\n className: mergeTwClassNames(\n dataListItemVariants({ orientation, size }),\n className,\n ),\n };\n\n return useRender({\n render,\n defaultTagName: 'div',\n props: mergeProps(baseProps, rest),\n });\n};\n\nDataListItem.displayName = 'DataList.Item';\n"],"mappings":";;;;;;;;;AAWA,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,EAAE,aAAa,SAAS,mBAAmB;CAEjD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT,qBAAqB;GAAE;GAAa;EAAK,CAAC,GAC1C,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,aAAa,cAAc"}

package/dist/components/display/data-list/data-list-root-variants.d.ts CHANGED Viewed

@@ -1,7 +1,6 @@
 //#region src/components/display/data-list/data-list-root-variants.d.ts
 export declare const dataListRootVariants: (props?: ({
-  divided?: boolean | null | undefined;
-  orientation?: "vertical" | "horizontal" | null | undefined;
+  size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=data-list-root-variants.d.ts.map

package/dist/components/display/data-list/data-list-root-variants.js CHANGED Viewed

@@ -1,30 +1,13 @@
 import { dataListDefaultVariants } from "./use-data-list-context.js";
 import { cva } from "class-variance-authority";
 //#region src/components/display/data-list/data-list-root-variants.ts
-const dataListRootVariants = cva(["flex", "text-sm"], {
-	variants: {
-		divided: {
-			true: [],
-			false: []
-		},
-		orientation: {
-			horizontal: ["flex-row"],
-			vertical: ["flex-col"]
-		}
-	},
-	compoundVariants: [{
-		divided: true,
-		orientation: "horizontal",
-		className: ["divide-x", "divide-gray-6"]
-	}, {
-		divided: true,
-		orientation: "vertical",
-		className: ["divide-y", "divide-gray-6"]
-	}],
-	defaultVariants: {
-		divided: dataListDefaultVariants.divided,
-		orientation: dataListDefaultVariants.orientation
-	}
+const dataListRootVariants = cva(["flex", "flex-col"], {
+	variants: { size: {
+		sm: ["gap-3"],
+		md: ["gap-4"],
+		lg: ["gap-5"]
+	} },
+	defaultVariants: { size: dataListDefaultVariants.size }
 });
 //#endregion
 export { dataListRootVariants };

package/dist/components/display/data-list/data-list-root-variants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-list-root-variants.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { dataListDefaultVariants } from './use-data-list-context';\n\nexport const dataListRootVariants = cva(['flex', '~~text~~-sm'], {\n variants: {\n ~~divided~~: {\n ~~true~~: [~~],\n false: [],\n },\n orientation: {\n horizontal: [~~'~~flex~~-~~row~~'],\n ~~vertical~~: ['~~flex~~-~~col~~'],\n ~~},\n },\n compoundVariants: [\n {\n~~ ~~divided~~: ~~true,\n orientation: 'horizontal',\n className:~~ ['~~divide~~-x'~~, 'divide-gray-6'~~],\n },\n ~~{\n divided: true,\n orientation: 'vertical',\n className: ['divide-y', 'divide-gray-6'],\n~~ },\n ~~],\n~~ defaultVariants: {\n ~~divided~~: dataListDefaultVariants.~~divided~~,\n ~~orientation: dataListDefaultVariants.orientation,\n~~ },\n});\n"],"mappings":";;;~~AAGA~~,MAAa,uBAAuB,IAAI,CAAC,QAAQ,~~SAAS~~,GAAG;~~CAC3D~~,UAAU;EACR,~~SAAS~~;~~GACP~~,~~MAAM~~,CAAC~~;GACP~~,OAAO~~,CAAC~~;~~EACV;EACA~~,~~aAAa;GACX~~,~~YAAY,~~CAAC,~~UAAU~~;~~GACvB~~,~~UAAU~~,CAAC,~~UAAU~~;~~EACvB;CACF;CACA~~,~~kBAAkB,CAChB~~;~~EACE,SAAS;EACT,aAAa;EACb,WAAW,CAAC,YAAY,eAAe;CACzC,GACA;EACE,SAAS;EACT,aAAa;EACb,WAAW,CAAC,YAAY,eAAe;CACzC,CACF;~~CACA,iBAAiB;EACf,~~SAAS~~,wBAAwB~~;EACjC~~,~~aAAa,wBAAwB~~;~~CACvC;~~AACF,CAAC"}
1	+ {"version":3,"file":"data-list-root-variants.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nimport { dataListDefaultVariants } from './use-data-list-context';\n\nexport const dataListRootVariants = cva(['flex', 'flex-col'], {\n variants: {\n size: {\n sm: ['gap-3'],\n md: ['gap-4'],\n lg: ['gap-5'],\n },\n },\n defaultVariants: {\n size: dataListDefaultVariants.size,\n },\n});\n"],"mappings":";;;AAIA,MAAa,uBAAuB,IAAI,CAAC,QAAQ,UAAU,GAAG;CAC5D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,OAAO;EACZ,IAAI,CAAC,OAAO;EACZ,IAAI,CAAC,OAAO;CACd,EACF;CACA,iBAAiB,EACf,MAAM,wBAAwB,KAChC;AACF,CAAC"}

package/dist/components/display/data-list/data-list-root.d.ts CHANGED Viewed

@@ -4,11 +4,12 @@ import { useRender } from "@base-ui/react";
 //#region src/components/display/data-list/data-list-root.d.ts
 export type DataListRootProps = MergeOverride<useRender.ComponentProps<'dl'>, DataListVariants>;
 /**
- * Lista de pares rótulo e valor, renderizada como `dl`.
+ * Lista de pares rótulo e valor, renderizada como `dl`. É sempre uma coluna; grade ou linha vêm da
+ * `className`, e o espaço entre os itens, do `gap`.
  *
  * @example
  * ```tsx
- * <DataList.Root>
+ * <DataList.Root orientation="horizontal">
  *   <DataList.Item>
  *     <DataList.ItemLabel>Status</DataList.ItemLabel>
  *     <DataList.ItemValue>Ativo</DataList.ItemValue>

package/dist/components/display/data-list/data-list-root.js CHANGED Viewed

@@ -7,11 +7,12 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/display/data-list/data-list-root.tsx
 const splitVariantProps = createSplitProps();
 /**
-* Lista de pares rótulo e valor, renderizada como `dl`.
+* Lista de pares rótulo e valor, renderizada como `dl`. É sempre uma coluna; grade ou linha vêm da
+* `className`, e o espaço entre os itens, do `gap`.
 *
 * @example
 * ```tsx
-* <DataList.Root>
+* <DataList.Root orientation="horizontal">
 *   <DataList.Item>
 *     <DataList.ItemLabel>Status</DataList.ItemLabel>
 *     <DataList.ItemValue>Ativo</DataList.ItemValue>
@@ -20,7 +21,11 @@ const splitVariantProps = createSplitProps();
 * ```
 */
 const DataListRoot = (props) => {
-	const [variantProps, elementProps] = splitVariantProps(props, ["divided", "orientation"]);
+	const [variantProps, elementProps] = splitVariantProps(props, [
+		"orientation",
+		"size",
+		"variant"
+	]);
 	const { render, className, ...rest } = elementProps;
 	const baseProps = {
 		"data-component": "DataList.Root",

package/dist/components/display/data-list/data-list-root.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-list-root.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-root.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 { dataListRootVariants } from './data-list-root-variants';\nimport {\n DataListContextProvider,\n type DataListVariants,\n} from './use-data-list-context';\n\nexport type DataListRootProps = MergeOverride<\n useRender.ComponentProps<'dl'>,\n DataListVariants\n>;\n\nconst splitVariantProps = createSplitProps<DataListVariants>();\n\n/*\n Lista de pares rótulo e valor, renderizada como `dl`.\n \n @example\n * ```tsx\n * <DataList.Root>\n * <DataList.Item>\n * <DataList.ItemLabel>Status</DataList.ItemLabel>\n * <DataList.ItemValue>Ativo</DataList.ItemValue>\n * </DataList.Item>\n * </DataList.Root>\n * ```\n */\nexport const DataListRoot = (props: DataListRootProps) => {\n const [variantProps, elementProps] = splitVariantProps(props, [\n '~~divided~~',\n '~~orientation~~',\n ]);\n\n const { render, className, ...rest } = elementProps;\n\n const baseProps = {\n 'data-component': 'DataList.Root',\n className: mergeTwClassNames(dataListRootVariants(variantProps), className),\n };\n\n return (\n <DataListContextProvider value={variantProps}>\n {useRender({\n render,\n defaultTagName: 'dl',\n props: mergeProps(baseProps, rest),\n })}\n </DataListContextProvider>\n );\n};\n\nDataListRoot.displayName = 'DataList.Root';\n"],"mappings":";;;;;;;AAiBA,MAAM,oBAAoB,iBAAmC~~;;;;;;;;;;;;;;AAe7D~~,MAAa,gBAAgB,UAA6B;CACxD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,~~CAC5D,WACA,aACF,~~CAAC;CAED,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,qBAAqB,YAAY,GAAG,SAAS;CAC5E;CAEA,OACE,oBAAC,yBAAD;EAAyB,OAAO;EAC7B,UAAA,UAAU;GACT;GACA,gBAAgB;GAChB,OAAO,WAAW,WAAW,IAAI;EACnC,CAAC;CACsB,CAAA;AAE7B;AAEA,aAAa,cAAc"}
1	+ {"version":3,"file":"data-list-root.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-root.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 { dataListRootVariants } from './data-list-root-variants';\nimport {\n DataListContextProvider,\n type DataListVariants,\n} from './use-data-list-context';\n\nexport type DataListRootProps = MergeOverride<\n useRender.ComponentProps<'dl'>,\n DataListVariants\n>;\n\nconst splitVariantProps = createSplitProps<DataListVariants>();\n\n/*\n Lista de pares rótulo e valor, renderizada como `dl`. É sempre uma coluna; grade ou linha vêm da\n * `className`, e o espaço entre os itens, do `gap`.\n \n @example\n * ```tsx\n * <DataList.Root orientation=\"horizontal\">\n * <DataList.Item>\n * <DataList.ItemLabel>Status</DataList.ItemLabel>\n * <DataList.ItemValue>Ativo</DataList.ItemValue>\n * </DataList.Item>\n * </DataList.Root>\n * ```\n */\nexport const DataListRoot = (props: DataListRootProps) => {\n const [variantProps, elementProps] = splitVariantProps(props, [\n 'orientation',\n 'size',\n 'variant',\n ]);\n\n const { render, className, ...rest } = elementProps;\n\n const baseProps = {\n 'data-component': 'DataList.Root',\n className: mergeTwClassNames(dataListRootVariants(variantProps), className),\n };\n\n return (\n <DataListContextProvider value={variantProps}>\n {useRender({\n render,\n defaultTagName: 'dl',\n props: mergeProps(baseProps, rest),\n })}\n </DataListContextProvider>\n );\n};\n\nDataListRoot.displayName = 'DataList.Root';\n"],"mappings":";;;;;;;AAiBA,MAAM,oBAAoB,iBAAmC;;;;;;;;;;;;;;;AAgB7D,MAAa,gBAAgB,UAA6B;CACxD,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,qBAAqB,YAAY,GAAG,SAAS;CAC5E;CAEA,OACE,oBAAC,yBAAD;EAAyB,OAAO;EAC7B,UAAA,UAAU;GACT;GACA,gBAAgB;GAChB,OAAO,WAAW,WAAW,IAAI;EACnC,CAAC;CACsB,CAAA;AAE7B;AAEA,aAAa,cAAc"}

package/dist/components/display/data-list/use-data-list-context.d.ts CHANGED Viewed

@@ -1,21 +1,32 @@
 //#region src/components/display/data-list/use-data-list-context.d.ts
 /**
  * Variantes do DataList. Informadas no `DataList.Root` e repassadas às partes por contexto.
+ *
+ * O `size` e o `variant` são exceções à tipografia fixa por papel: a lista aparece em densidades
+ * diferentes (um resumo compacto, uma ficha completa), e o `bold` inverte a ênfase quando o rótulo
+ * é o que se procura.
  */
 export type DataListVariants = {
   /**
-   * Linha entre os itens.
+   * Orientação do par rótulo/valor, não da lista: `vertical` põe o rótulo em cima e o valor
+   * embaixo; `horizontal` põe os dois lado a lado, com o rótulo numa largura mínima de 120px para
+   * os valores alinharem. O `Root` é sempre uma coluna, e grade ou linha vêm pela `className`.
    *
-   * @default false
+   * @default 'vertical'
    */
-  divided?: boolean;
+  orientation?: 'horizontal' | 'vertical';
   /**
-   * Orientação da lista, não do par rótulo/valor: `vertical` empilha os itens, com rótulo e valor
-   * lado a lado; `horizontal` põe os itens em linha, com o valor abaixo do rótulo.
+   * Espaço entre os itens e tamanho do texto.
    *
-   * @default 'vertical'
+   * @default 'md'
    */
-  orientation?: 'horizontal' | 'vertical';
+  size?: 'sm' | 'md' | 'lg';
+  /**
+   * Ênfase do par: `subtle` apaga o rótulo; `bold` põe o rótulo em peso médio e apaga o valor.
+   *
+   * @default 'subtle'
+   */
+  variant?: 'subtle' | 'bold';
 };
 export declare const dataListDefaultVariants: Required<DataListVariants>;
 export declare const DataListContextProvider: import("react").Provider<DataListVariants>, useDataListContext: () => DataListVariants;

package/dist/components/display/data-list/use-data-list-context.js CHANGED Viewed

@@ -1,8 +1,9 @@
 import { createContext } from "@lucasbernardosn/react-utils";
 //#region src/components/display/data-list/use-data-list-context.ts
 const dataListDefaultVariants = {
-	divided: false,
-	orientation: "vertical"
+	orientation: "vertical",
+	size: "md",
+	variant: "subtle"
 };
 const [DataListContextProvider, useDataListContext] = createContext({
 	name: "DataListContext",

package/dist/components/display/data-list/use-data-list-context.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-data-list-context.js","names":[],"sources":["../../../../src/components/display/data-list/use-data-list-context.ts"],"sourcesContent":["import { createContext } from '@lucasbernardosn/react-utils';\n\n/*\n Variantes do DataList. Informadas no `DataList.Root` e repassadas às partes por contexto.\n /\nexport type DataListVariants = {\n /\n ~~Linha~~ ~~entre~~ os ~~itens.\~~n \n @default ~~false~~\n /\n ~~divided~~?: ~~boolean~~;\n /\n ~~Orientação~~ da ~~lista,~~ ~~não~~ do ~~par~~ ~~rótulo/valor:~~ ~~`vertical`~~ ~~empilha~~ os ~~itens,~~ ~~com~~ ~~rótulo~~ e ~~valor\~~n * ~~lado~~ a ~~lado~~; `~~horizontal~~` põe os ~~itens~~ em ~~linha,~~ ~~com~~ o valor ~~abaixo do rótulo~~.\n \n @default '~~vertical~~'\n */\n ~~orientation~~?: '~~horizontal~~' \| '~~vertical~~';\n};\n\nexport const dataListDefaultVariants: Required<DataListVariants> = {\n ~~divided~~: ~~false~~,\n ~~orientation~~: '~~vertical~~',\n};\n\nexport const [DataListContextProvider, useDataListContext] =\n createContext<DataListVariants>({\n name: 'DataListContext',\n providers: ['DataList.Root'],\n });\n"],"mappings":";;~~AAqBA~~,MAAa,0BAAsD;CACjE,~~SAAS~~;~~CACT~~,~~aAAa~~;~~AACf~~;AAEA,MAAa,CAAC,yBAAyB,sBACrC,cAAgC;CAC9B,MAAM;CACN,WAAW,CAAC,eAAe;AAC7B,CAAC"}
1	+ {"version":3,"file":"use-data-list-context.js","names":[],"sources":["../../../../src/components/display/data-list/use-data-list-context.ts"],"sourcesContent":["import { createContext } from '@lucasbernardosn/react-utils';\n\n/*\n Variantes do DataList. Informadas no `DataList.Root` e repassadas às partes por contexto.\n \n O `size` e o `variant` são exceções à tipografia fixa por papel: a lista aparece em densidades\n * diferentes (um resumo compacto, uma ficha completa), e o `bold` inverte a ênfase quando o rótulo\n * é o que se procura.\n /\nexport type DataListVariants = {\n /\n Orientação do par rótulo/valor, não da lista: `vertical` põe o rótulo em cima e o valor\n * embaixo; `horizontal` põe os dois lado a lado, com o rótulo numa largura mínima de 120px para\n * os valores alinharem. O `Root` é sempre uma coluna, e grade ou linha vêm pela `className`.\n \n @default 'vertical'\n /\n orientation?: 'horizontal' \| 'vertical';\n /\n Espaço entre os itens e tamanho do texto.\n \n @default 'md'\n /\n size?: 'sm' \| 'md' \| 'lg';\n /\n Ênfase do par: `subtle` apaga o rótulo; `bold` põe o rótulo em peso médio e apaga o valor.\n \n @default 'subtle'\n */\n variant?: 'subtle' \| 'bold';\n};\n\nexport const dataListDefaultVariants: Required<DataListVariants> = {\n orientation: 'vertical',\n size: 'md',\n variant: 'subtle',\n};\n\nexport const [DataListContextProvider, useDataListContext] =\n createContext<DataListVariants>({\n name: 'DataListContext',\n providers: ['DataList.Root'],\n });\n"],"mappings":";;AAgCA,MAAa,0BAAsD;CACjE,aAAa;CACb,MAAM;CACN,SAAS;AACX;AAEA,MAAa,CAAC,yBAAyB,sBACrC,cAAgC;CAC9B,MAAM;CACN,WAAW,CAAC,eAAe;AAC7B,CAAC"}

package/dist/components/display/tag/tag-root-variants.d.ts CHANGED Viewed

@@ -27,11 +27,10 @@ export declare const tagRootDefaultVariants: Required<TagRootVariants>;
  * Cópia de `badgeVariants`, a origem do visual do rótulo curto, onde as variáveis de cor estão
  * explicadas (tabela no README de `display`). As diferenças:
  * - variáveis com o prefixo `--tag-`;
- * - `max-w-full` e `min-w-0`, para o `Tag.Label` truncar um texto longo;
  * - cada `size` declara o tamanho do `Tag.Close` em `--tag-close-size`.
  */
 export declare const tagRootVariants: (props?: ({
-  colorScheme?: "ruby" | "gray" | "brand" | "red" | "green" | "blue" | "teal" | "pink" | "purple" | "cyan" | "orange" | "brown" | "yellow" | "amber" | "bronze" | "gold" | "tomato" | "crimson" | "plum" | "violet" | "iris" | "indigo" | "jade" | "grass" | "lime" | "mint" | "sky" | null | undefined;
+  colorScheme?: "gray" | "brand" | "red" | "green" | "blue" | "teal" | "pink" | "purple" | "cyan" | "orange" | "brown" | "yellow" | "amber" | "ruby" | "bronze" | "gold" | "tomato" | "crimson" | "plum" | "violet" | "iris" | "indigo" | "jade" | "grass" | "lime" | "mint" | "sky" | null | undefined;
   size?: "sm" | "md" | "lg" | null | undefined;
   variant?: "solid" | "subtle" | "surface" | "outline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/display/tag/tag-root-variants.js CHANGED Viewed

@@ -9,7 +9,6 @@ const tagRootDefaultVariants = {
 * Cópia de `badgeVariants`, a origem do visual do rótulo curto, onde as variáveis de cor estão
 * explicadas (tabela no README de `display`). As diferenças:
 * - variáveis com o prefixo `--tag-`;
-* - `max-w-full` e `min-w-0`, para o `Tag.Label` truncar um texto longo;
 * - cada `size` declara o tamanho do `Tag.Close` em `--tag-close-size`.
 */
 const tagRootVariants = cva([

package/dist/components/display/tag/tag-root-variants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tag-root-variants.js","names":[],"sources":["../../../../src/components/display/tag/tag-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeFull } from '#types';\n\nexport type TagRootVariants = {\n /*\n Cor do texto, do fundo e da borda, como no `Badge`.\n \n @default 'gray'\n /\n colorScheme?: ColorSchemeFull;\n /\n Altura, padding, tamanho do texto e do botão de remover: `sm` = `h-5`, `md` = `h-6`,\n * `lg` = `h-7`.\n \n @default 'sm'\n /\n size?: 'sm' \| 'md' \| 'lg';\n /\n Fundo e borda: `subtle` só com fundo, `surface` com fundo e borda, `outline` só com borda e\n * `solid` com o fundo cheio (passo 9) e o texto em contraste.\n \n @default 'subtle'\n /\n variant?: 'subtle' \| 'surface' \| 'outline' \| 'solid';\n};\n\nexport const tagRootDefaultVariants: Required<TagRootVariants> = {\n colorScheme: 'gray',\n size: 'sm',\n variant: 'subtle',\n};\n\n/\n Cópia de `badgeVariants`, a origem do visual do rótulo curto, onde as variáveis de cor estão\n * explicadas (tabela no README de `display`). As diferenças:\n * - variáveis com o prefixo `--tag-`;\n * - `max-w-full` e `min-w-0`, para o `Tag.Label` truncar um texto longo;\n * - cada `size` declara o tamanho do `Tag.Close` em `--tag-close-size`.\n */\nexport const tagRootVariants = cva(\n [\n 'inline-flex',\n 'items-center',\n 'shrink-0',\n 'align-middle',\n\n 'max-w-full',\n 'min-w-0',\n\n 'border',\n 'rounded-sm',\n 'corner-squircle',\n\n 'font-medium',\n 'leading-none',\n 'whitespace-nowrap',\n 'tabular-nums',\n\n '[&_svg]:shrink-0',\n ],\n {\n variants: {\n colorScheme: {\n gray: [\n '[--tag-fg:var(--color-gray-11)]',\n '[--tag-subtle-bg:var(--color-gray-alpha-3)]',\n '[--tag-surface-bg:var(--color-gray-alpha-2)]',\n '[--tag-surface-border:var(--color-gray-alpha-6)]',\n '[--tag-outline-border:var(--color-gray-alpha-8)]',\n '[--tag-solid-bg:var(--color-black)]',\n 'dark:[--tag-solid-bg:var(--color-white)]',\n '[--tag-solid-fg:var(--color-white)]',\n 'dark:[--tag-solid-fg:var(--color-black)]',\n ],\n brand: [\n '[--tag-fg:var(--color-brand-11)]',\n '[--tag-subtle-bg:var(--color-brand-alpha-3)]',\n '[--tag-surface-bg:var(--color-brand-alpha-2)]',\n '[--tag-surface-border:var(--color-brand-alpha-6)]',\n '[--tag-outline-border:var(--color-brand-alpha-8)]',\n '[--tag-solid-bg:var(--color-brand-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n red: [\n '[--tag-fg:var(--color-red-11)]',\n '[--tag-subtle-bg:var(--color-red-alpha-3)]',\n '[--tag-surface-bg:var(--color-red-alpha-2)]',\n '[--tag-surface-border:var(--color-red-alpha-6)]',\n '[--tag-outline-border:var(--color-red-alpha-8)]',\n '[--tag-solid-bg:var(--color-red-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n green: [\n '[--tag-fg:var(--color-green-11)]',\n '[--tag-subtle-bg:var(--color-green-alpha-3)]',\n '[--tag-surface-bg:var(--color-green-alpha-2)]',\n '[--tag-surface-border:var(--color-green-alpha-6)]',\n '[--tag-outline-border:var(--color-green-alpha-8)]',\n '[--tag-solid-bg:var(--color-green-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n blue: [\n '[--tag-fg:var(--color-blue-11)]',\n '[--tag-subtle-bg:var(--color-blue-alpha-3)]',\n '[--tag-surface-bg:var(--color-blue-alpha-2)]',\n '[--tag-surface-border:var(--color-blue-alpha-6)]',\n '[--tag-outline-border:var(--color-blue-alpha-8)]',\n '[--tag-solid-bg:var(--color-blue-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n amber: [\n '[--tag-fg:var(--color-amber-11)]',\n '[--tag-subtle-bg:var(--color-amber-alpha-3)]',\n '[--tag-surface-bg:var(--color-amber-alpha-2)]',\n '[--tag-surface-border:var(--color-amber-alpha-6)]',\n '[--tag-outline-border:var(--color-amber-alpha-8)]',\n '[--tag-solid-bg:var(--color-amber-9)]',\n '[--tag-solid-fg:var(--color-black)]',\n ],\n purple: [\n '[--tag-fg:var(--color-purple-11)]',\n '[--tag-subtle-bg:var(--color-purple-alpha-3)]',\n '[--tag-surface-bg:var(--color-purple-alpha-2)]',\n '[--tag-surface-border:var(--color-purple-alpha-6)]',\n '[--tag-outline-border:var(--color-purple-alpha-8)]',\n '[--tag-solid-bg:var(--color-purple-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n pink: [\n '[--tag-fg:var(--color-pink-11)]',\n '[--tag-subtle-bg:var(--color-pink-alpha-3)]',\n '[--tag-surface-bg:var(--color-pink-alpha-2)]',\n '[--tag-surface-border:var(--color-pink-alpha-6)]',\n '[--tag-outline-border:var(--color-pink-alpha-8)]',\n '[--tag-solid-bg:var(--color-pink-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n cyan: [\n '[--tag-fg:var(--color-cyan-11)]',\n '[--tag-subtle-bg:var(--color-cyan-alpha-3)]',\n '[--tag-surface-bg:var(--color-cyan-alpha-2)]',\n '[--tag-surface-border:var(--color-cyan-alpha-6)]',\n '[--tag-outline-border:var(--color-cyan-alpha-8)]',\n '[--tag-solid-bg:var(--color-cyan-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n teal: [\n '[--tag-fg:var(--color-teal-11)]',\n '[--tag-subtle-bg:var(--color-teal-alpha-3)]',\n '[--tag-surface-bg:var(--color-teal-alpha-2)]',\n '[--tag-surface-border:var(--color-teal-alpha-6)]',\n '[--tag-outline-border:var(--color-teal-alpha-8)]',\n '[--tag-solid-bg:var(--color-teal-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n orange: [\n '[--tag-fg:var(--color-orange-11)]',\n '[--tag-subtle-bg:var(--color-orange-alpha-3)]',\n '[--tag-surface-bg:var(--color-orange-alpha-2)]',\n '[--tag-surface-border:var(--color-orange-alpha-6)]',\n '[--tag-outline-border:var(--color-orange-alpha-8)]',\n '[--tag-solid-bg:var(--color-orange-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n brown: [\n '[--tag-fg:var(--color-brown-11)]',\n '[--tag-subtle-bg:var(--color-brown-alpha-3)]',\n '[--tag-surface-bg:var(--color-brown-alpha-2)]',\n '[--tag-surface-border:var(--color-brown-alpha-6)]',\n '[--tag-outline-border:var(--color-brown-alpha-8)]',\n '[--tag-solid-bg:var(--color-brown-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n yellow: [\n '[--tag-fg:var(--color-yellow-11)]',\n '[--tag-subtle-bg:var(--color-yellow-alpha-3)]',\n '[--tag-surface-bg:var(--color-yellow-alpha-2)]',\n '[--tag-surface-border:var(--color-yellow-alpha-6)]',\n '[--tag-outline-border:var(--color-yellow-alpha-8)]',\n '[--tag-solid-bg:var(--color-yellow-9)]',\n '[--tag-solid-fg:var(--color-black)]',\n ],\n bronze: [\n '[--tag-fg:var(--color-bronze-11)]',\n '[--tag-subtle-bg:var(--color-bronze-alpha-3)]',\n '[--tag-surface-bg:var(--color-bronze-alpha-2)]',\n '[--tag-surface-border:var(--color-bronze-alpha-6)]',\n '[--tag-outline-border:var(--color-bronze-alpha-8)]',\n '[--tag-solid-bg:var(--color-bronze-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n gold: [\n '[--tag-fg:var(--color-gold-11)]',\n '[--tag-subtle-bg:var(--color-gold-alpha-3)]',\n '[--tag-surface-bg:var(--color-gold-alpha-2)]',\n '[--tag-surface-border:var(--color-gold-alpha-6)]',\n '[--tag-outline-border:var(--color-gold-alpha-8)]',\n '[--tag-solid-bg:var(--color-gold-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n tomato: [\n '[--tag-fg:var(--color-tomato-11)]',\n '[--tag-subtle-bg:var(--color-tomato-alpha-3)]',\n '[--tag-surface-bg:var(--color-tomato-alpha-2)]',\n '[--tag-surface-border:var(--color-tomato-alpha-6)]',\n '[--tag-outline-border:var(--color-tomato-alpha-8)]',\n '[--tag-solid-bg:var(--color-tomato-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n ruby: [\n '[--tag-fg:var(--color-ruby-11)]',\n '[--tag-subtle-bg:var(--color-ruby-alpha-3)]',\n '[--tag-surface-bg:var(--color-ruby-alpha-2)]',\n '[--tag-surface-border:var(--color-ruby-alpha-6)]',\n '[--tag-outline-border:var(--color-ruby-alpha-8)]',\n '[--tag-solid-bg:var(--color-ruby-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n crimson: [\n '[--tag-fg:var(--color-crimson-11)]',\n '[--tag-subtle-bg:var(--color-crimson-alpha-3)]',\n '[--tag-surface-bg:var(--color-crimson-alpha-2)]',\n '[--tag-surface-border:var(--color-crimson-alpha-6)]',\n '[--tag-outline-border:var(--color-crimson-alpha-8)]',\n '[--tag-solid-bg:var(--color-crimson-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n plum: [\n '[--tag-fg:var(--color-plum-11)]',\n '[--tag-subtle-bg:var(--color-plum-alpha-3)]',\n '[--tag-surface-bg:var(--color-plum-alpha-2)]',\n '[--tag-surface-border:var(--color-plum-alpha-6)]',\n '[--tag-outline-border:var(--color-plum-alpha-8)]',\n '[--tag-solid-bg:var(--color-plum-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n violet: [\n '[--tag-fg:var(--color-violet-11)]',\n '[--tag-subtle-bg:var(--color-violet-alpha-3)]',\n '[--tag-surface-bg:var(--color-violet-alpha-2)]',\n '[--tag-surface-border:var(--color-violet-alpha-6)]',\n '[--tag-outline-border:var(--color-violet-alpha-8)]',\n '[--tag-solid-bg:var(--color-violet-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n iris: [\n '[--tag-fg:var(--color-iris-11)]',\n '[--tag-subtle-bg:var(--color-iris-alpha-3)]',\n '[--tag-surface-bg:var(--color-iris-alpha-2)]',\n '[--tag-surface-border:var(--color-iris-alpha-6)]',\n '[--tag-outline-border:var(--color-iris-alpha-8)]',\n '[--tag-solid-bg:var(--color-iris-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n indigo: [\n '[--tag-fg:var(--color-indigo-11)]',\n '[--tag-subtle-bg:var(--color-indigo-alpha-3)]',\n '[--tag-surface-bg:var(--color-indigo-alpha-2)]',\n '[--tag-surface-border:var(--color-indigo-alpha-6)]',\n '[--tag-outline-border:var(--color-indigo-alpha-8)]',\n '[--tag-solid-bg:var(--color-indigo-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n sky: [\n '[--tag-fg:var(--color-sky-11)]',\n '[--tag-subtle-bg:var(--color-sky-alpha-3)]',\n '[--tag-surface-bg:var(--color-sky-alpha-2)]',\n '[--tag-surface-border:var(--color-sky-alpha-6)]',\n '[--tag-outline-border:var(--color-sky-alpha-8)]',\n '[--tag-solid-bg:var(--color-sky-9)]',\n '[--tag-solid-fg:var(--color-black)]',\n ],\n mint: [\n '[--tag-fg:var(--color-mint-11)]',\n '[--tag-subtle-bg:var(--color-mint-alpha-3)]',\n '[--tag-surface-bg:var(--color-mint-alpha-2)]',\n '[--tag-surface-border:var(--color-mint-alpha-6)]',\n '[--tag-outline-border:var(--color-mint-alpha-8)]',\n '[--tag-solid-bg:var(--color-mint-9)]',\n '[--tag-solid-fg:var(--color-black)]',\n ],\n lime: [\n '[--tag-fg:var(--color-lime-11)]',\n '[--tag-subtle-bg:var(--color-lime-alpha-3)]',\n '[--tag-surface-bg:var(--color-lime-alpha-2)]',\n '[--tag-surface-border:var(--color-lime-alpha-6)]',\n '[--tag-outline-border:var(--color-lime-alpha-8)]',\n '[--tag-solid-bg:var(--color-lime-9)]',\n '[--tag-solid-fg:var(--color-black)]',\n ],\n jade: [\n '[--tag-fg:var(--color-jade-11)]',\n '[--tag-subtle-bg:var(--color-jade-alpha-3)]',\n '[--tag-surface-bg:var(--color-jade-alpha-2)]',\n '[--tag-surface-border:var(--color-jade-alpha-6)]',\n '[--tag-outline-border:var(--color-jade-alpha-8)]',\n '[--tag-solid-bg:var(--color-jade-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n grass: [\n '[--tag-fg:var(--color-grass-11)]',\n '[--tag-subtle-bg:var(--color-grass-alpha-3)]',\n '[--tag-surface-bg:var(--color-grass-alpha-2)]',\n '[--tag-surface-border:var(--color-grass-alpha-6)]',\n '[--tag-outline-border:var(--color-grass-alpha-8)]',\n '[--tag-solid-bg:var(--color-grass-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n },\n size: {\n sm: [\n '[--tag-close-size:--spacing(4)]',\n 'h-5',\n 'px-1.5',\n 'gap-1',\n 'text-xs',\n '[&_svg]:size-3',\n ],\n md: [\n '[--tag-close-size:--spacing(5)]',\n 'h-6',\n 'px-2',\n 'gap-1',\n 'text-xs',\n '[&_svg]:size-3.5',\n ],\n lg: [\n '[--tag-close-size:--spacing(5)]',\n 'h-7',\n 'px-2.5',\n 'gap-1.5',\n 'text-sm',\n '[&_svg]:size-4',\n ],\n },\n variant: {\n // A borda transparente fica para as variantes terem a mesma medida.\n subtle: [\n 'border-transparent',\n 'bg-(--tag-subtle-bg)',\n 'text-(--tag-fg)',\n ],\n surface: [\n 'border-(--tag-surface-border)',\n 'bg-(--tag-surface-bg)',\n 'text-(--tag-fg)',\n ],\n outline: ['border-(--tag-outline-border)', 'text-(--tag-fg)'],\n solid: [\n 'border-transparent',\n 'bg-(--tag-solid-bg)',\n 'text-(--tag-solid-fg)',\n ],\n },\n },\n defaultVariants: {\n colorScheme: tagRootDefaultVariants.colorScheme,\n size: tagRootDefaultVariants.size,\n variant: tagRootDefaultVariants.variant,\n },\n },\n);\n"],"mappings":";;AA0BA,MAAa,yBAAoD;CAC/D,aAAa;CACb,MAAM;CACN,SAAS;AACX;;;;;;;;AASA,MAAa,kBAAkB,IAC7B;CACE;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CAEA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,KAAK;IACH;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,KAAK;IACH;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,SAAS;GAEP,QAAQ;IACN;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;GACA,SAAS,CAAC,iCAAiC,iBAAiB;GAC5D,OAAO;IACL;IACA;IACA;GACF;EACF;CACF;CACA,iBAAiB;EACf,aAAa,uBAAuB;EACpC,MAAM,uBAAuB;EAC7B,SAAS,uBAAuB;CAClC;AACF,CACF"}
1	+ {"version":3,"file":"tag-root-variants.js","names":[],"sources":["../../../../src/components/display/tag/tag-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeFull } from '#types';\n\nexport type TagRootVariants = {\n /*\n Cor do texto, do fundo e da borda, como no `Badge`.\n \n @default 'gray'\n /\n colorScheme?: ColorSchemeFull;\n /\n Altura, padding, tamanho do texto e do botão de remover: `sm` = `h-5`, `md` = `h-6`,\n * `lg` = `h-7`.\n \n @default 'sm'\n /\n size?: 'sm' \| 'md' \| 'lg';\n /\n Fundo e borda: `subtle` só com fundo, `surface` com fundo e borda, `outline` só com borda e\n * `solid` com o fundo cheio (passo 9) e o texto em contraste.\n \n @default 'subtle'\n /\n variant?: 'subtle' \| 'surface' \| 'outline' \| 'solid';\n};\n\nexport const tagRootDefaultVariants: Required<TagRootVariants> = {\n colorScheme: 'gray',\n size: 'sm',\n variant: 'subtle',\n};\n\n/\n Cópia de `badgeVariants`, a origem do visual do rótulo curto, onde as variáveis de cor estão\n * explicadas (tabela no README de `display`). As diferenças:\n * - variáveis com o prefixo `--tag-`;\n * - cada `size` declara o tamanho do `Tag.Close` em `--tag-close-size`.\n */\nexport const tagRootVariants = cva(\n [\n 'inline-flex',\n 'items-center',\n 'shrink-0',\n 'align-middle',\n\n 'max-w-full',\n 'min-w-0',\n\n 'border',\n 'rounded-sm',\n 'corner-squircle',\n\n 'font-medium',\n 'leading-none',\n 'whitespace-nowrap',\n 'tabular-nums',\n\n '[&_svg]:shrink-0',\n ],\n {\n variants: {\n colorScheme: {\n gray: [\n '[--tag-fg:var(--color-gray-11)]',\n '[--tag-subtle-bg:var(--color-gray-alpha-3)]',\n '[--tag-surface-bg:var(--color-gray-alpha-2)]',\n '[--tag-surface-border:var(--color-gray-alpha-6)]',\n '[--tag-outline-border:var(--color-gray-alpha-8)]',\n '[--tag-solid-bg:var(--color-black)]',\n 'dark:[--tag-solid-bg:var(--color-white)]',\n '[--tag-solid-fg:var(--color-white)]',\n 'dark:[--tag-solid-fg:var(--color-black)]',\n ],\n brand: [\n '[--tag-fg:var(--color-brand-11)]',\n '[--tag-subtle-bg:var(--color-brand-alpha-3)]',\n '[--tag-surface-bg:var(--color-brand-alpha-2)]',\n '[--tag-surface-border:var(--color-brand-alpha-6)]',\n '[--tag-outline-border:var(--color-brand-alpha-8)]',\n '[--tag-solid-bg:var(--color-brand-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n red: [\n '[--tag-fg:var(--color-red-11)]',\n '[--tag-subtle-bg:var(--color-red-alpha-3)]',\n '[--tag-surface-bg:var(--color-red-alpha-2)]',\n '[--tag-surface-border:var(--color-red-alpha-6)]',\n '[--tag-outline-border:var(--color-red-alpha-8)]',\n '[--tag-solid-bg:var(--color-red-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n green: [\n '[--tag-fg:var(--color-green-11)]',\n '[--tag-subtle-bg:var(--color-green-alpha-3)]',\n '[--tag-surface-bg:var(--color-green-alpha-2)]',\n '[--tag-surface-border:var(--color-green-alpha-6)]',\n '[--tag-outline-border:var(--color-green-alpha-8)]',\n '[--tag-solid-bg:var(--color-green-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n blue: [\n '[--tag-fg:var(--color-blue-11)]',\n '[--tag-subtle-bg:var(--color-blue-alpha-3)]',\n '[--tag-surface-bg:var(--color-blue-alpha-2)]',\n '[--tag-surface-border:var(--color-blue-alpha-6)]',\n '[--tag-outline-border:var(--color-blue-alpha-8)]',\n '[--tag-solid-bg:var(--color-blue-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n amber: [\n '[--tag-fg:var(--color-amber-11)]',\n '[--tag-subtle-bg:var(--color-amber-alpha-3)]',\n '[--tag-surface-bg:var(--color-amber-alpha-2)]',\n '[--tag-surface-border:var(--color-amber-alpha-6)]',\n '[--tag-outline-border:var(--color-amber-alpha-8)]',\n '[--tag-solid-bg:var(--color-amber-9)]',\n '[--tag-solid-fg:var(--color-black)]',\n ],\n purple: [\n '[--tag-fg:var(--color-purple-11)]',\n '[--tag-subtle-bg:var(--color-purple-alpha-3)]',\n '[--tag-surface-bg:var(--color-purple-alpha-2)]',\n '[--tag-surface-border:var(--color-purple-alpha-6)]',\n '[--tag-outline-border:var(--color-purple-alpha-8)]',\n '[--tag-solid-bg:var(--color-purple-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n pink: [\n '[--tag-fg:var(--color-pink-11)]',\n '[--tag-subtle-bg:var(--color-pink-alpha-3)]',\n '[--tag-surface-bg:var(--color-pink-alpha-2)]',\n '[--tag-surface-border:var(--color-pink-alpha-6)]',\n '[--tag-outline-border:var(--color-pink-alpha-8)]',\n '[--tag-solid-bg:var(--color-pink-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n cyan: [\n '[--tag-fg:var(--color-cyan-11)]',\n '[--tag-subtle-bg:var(--color-cyan-alpha-3)]',\n '[--tag-surface-bg:var(--color-cyan-alpha-2)]',\n '[--tag-surface-border:var(--color-cyan-alpha-6)]',\n '[--tag-outline-border:var(--color-cyan-alpha-8)]',\n '[--tag-solid-bg:var(--color-cyan-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n teal: [\n '[--tag-fg:var(--color-teal-11)]',\n '[--tag-subtle-bg:var(--color-teal-alpha-3)]',\n '[--tag-surface-bg:var(--color-teal-alpha-2)]',\n '[--tag-surface-border:var(--color-teal-alpha-6)]',\n '[--tag-outline-border:var(--color-teal-alpha-8)]',\n '[--tag-solid-bg:var(--color-teal-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n orange: [\n '[--tag-fg:var(--color-orange-11)]',\n '[--tag-subtle-bg:var(--color-orange-alpha-3)]',\n '[--tag-surface-bg:var(--color-orange-alpha-2)]',\n '[--tag-surface-border:var(--color-orange-alpha-6)]',\n '[--tag-outline-border:var(--color-orange-alpha-8)]',\n '[--tag-solid-bg:var(--color-orange-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n brown: [\n '[--tag-fg:var(--color-brown-11)]',\n '[--tag-subtle-bg:var(--color-brown-alpha-3)]',\n '[--tag-surface-bg:var(--color-brown-alpha-2)]',\n '[--tag-surface-border:var(--color-brown-alpha-6)]',\n '[--tag-outline-border:var(--color-brown-alpha-8)]',\n '[--tag-solid-bg:var(--color-brown-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n yellow: [\n '[--tag-fg:var(--color-yellow-11)]',\n '[--tag-subtle-bg:var(--color-yellow-alpha-3)]',\n '[--tag-surface-bg:var(--color-yellow-alpha-2)]',\n '[--tag-surface-border:var(--color-yellow-alpha-6)]',\n '[--tag-outline-border:var(--color-yellow-alpha-8)]',\n '[--tag-solid-bg:var(--color-yellow-9)]',\n '[--tag-solid-fg:var(--color-black)]',\n ],\n bronze: [\n '[--tag-fg:var(--color-bronze-11)]',\n '[--tag-subtle-bg:var(--color-bronze-alpha-3)]',\n '[--tag-surface-bg:var(--color-bronze-alpha-2)]',\n '[--tag-surface-border:var(--color-bronze-alpha-6)]',\n '[--tag-outline-border:var(--color-bronze-alpha-8)]',\n '[--tag-solid-bg:var(--color-bronze-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n gold: [\n '[--tag-fg:var(--color-gold-11)]',\n '[--tag-subtle-bg:var(--color-gold-alpha-3)]',\n '[--tag-surface-bg:var(--color-gold-alpha-2)]',\n '[--tag-surface-border:var(--color-gold-alpha-6)]',\n '[--tag-outline-border:var(--color-gold-alpha-8)]',\n '[--tag-solid-bg:var(--color-gold-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n tomato: [\n '[--tag-fg:var(--color-tomato-11)]',\n '[--tag-subtle-bg:var(--color-tomato-alpha-3)]',\n '[--tag-surface-bg:var(--color-tomato-alpha-2)]',\n '[--tag-surface-border:var(--color-tomato-alpha-6)]',\n '[--tag-outline-border:var(--color-tomato-alpha-8)]',\n '[--tag-solid-bg:var(--color-tomato-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n ruby: [\n '[--tag-fg:var(--color-ruby-11)]',\n '[--tag-subtle-bg:var(--color-ruby-alpha-3)]',\n '[--tag-surface-bg:var(--color-ruby-alpha-2)]',\n '[--tag-surface-border:var(--color-ruby-alpha-6)]',\n '[--tag-outline-border:var(--color-ruby-alpha-8)]',\n '[--tag-solid-bg:var(--color-ruby-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n crimson: [\n '[--tag-fg:var(--color-crimson-11)]',\n '[--tag-subtle-bg:var(--color-crimson-alpha-3)]',\n '[--tag-surface-bg:var(--color-crimson-alpha-2)]',\n '[--tag-surface-border:var(--color-crimson-alpha-6)]',\n '[--tag-outline-border:var(--color-crimson-alpha-8)]',\n '[--tag-solid-bg:var(--color-crimson-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n plum: [\n '[--tag-fg:var(--color-plum-11)]',\n '[--tag-subtle-bg:var(--color-plum-alpha-3)]',\n '[--tag-surface-bg:var(--color-plum-alpha-2)]',\n '[--tag-surface-border:var(--color-plum-alpha-6)]',\n '[--tag-outline-border:var(--color-plum-alpha-8)]',\n '[--tag-solid-bg:var(--color-plum-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n violet: [\n '[--tag-fg:var(--color-violet-11)]',\n '[--tag-subtle-bg:var(--color-violet-alpha-3)]',\n '[--tag-surface-bg:var(--color-violet-alpha-2)]',\n '[--tag-surface-border:var(--color-violet-alpha-6)]',\n '[--tag-outline-border:var(--color-violet-alpha-8)]',\n '[--tag-solid-bg:var(--color-violet-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n iris: [\n '[--tag-fg:var(--color-iris-11)]',\n '[--tag-subtle-bg:var(--color-iris-alpha-3)]',\n '[--tag-surface-bg:var(--color-iris-alpha-2)]',\n '[--tag-surface-border:var(--color-iris-alpha-6)]',\n '[--tag-outline-border:var(--color-iris-alpha-8)]',\n '[--tag-solid-bg:var(--color-iris-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n indigo: [\n '[--tag-fg:var(--color-indigo-11)]',\n '[--tag-subtle-bg:var(--color-indigo-alpha-3)]',\n '[--tag-surface-bg:var(--color-indigo-alpha-2)]',\n '[--tag-surface-border:var(--color-indigo-alpha-6)]',\n '[--tag-outline-border:var(--color-indigo-alpha-8)]',\n '[--tag-solid-bg:var(--color-indigo-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n sky: [\n '[--tag-fg:var(--color-sky-11)]',\n '[--tag-subtle-bg:var(--color-sky-alpha-3)]',\n '[--tag-surface-bg:var(--color-sky-alpha-2)]',\n '[--tag-surface-border:var(--color-sky-alpha-6)]',\n '[--tag-outline-border:var(--color-sky-alpha-8)]',\n '[--tag-solid-bg:var(--color-sky-9)]',\n '[--tag-solid-fg:var(--color-black)]',\n ],\n mint: [\n '[--tag-fg:var(--color-mint-11)]',\n '[--tag-subtle-bg:var(--color-mint-alpha-3)]',\n '[--tag-surface-bg:var(--color-mint-alpha-2)]',\n '[--tag-surface-border:var(--color-mint-alpha-6)]',\n '[--tag-outline-border:var(--color-mint-alpha-8)]',\n '[--tag-solid-bg:var(--color-mint-9)]',\n '[--tag-solid-fg:var(--color-black)]',\n ],\n lime: [\n '[--tag-fg:var(--color-lime-11)]',\n '[--tag-subtle-bg:var(--color-lime-alpha-3)]',\n '[--tag-surface-bg:var(--color-lime-alpha-2)]',\n '[--tag-surface-border:var(--color-lime-alpha-6)]',\n '[--tag-outline-border:var(--color-lime-alpha-8)]',\n '[--tag-solid-bg:var(--color-lime-9)]',\n '[--tag-solid-fg:var(--color-black)]',\n ],\n jade: [\n '[--tag-fg:var(--color-jade-11)]',\n '[--tag-subtle-bg:var(--color-jade-alpha-3)]',\n '[--tag-surface-bg:var(--color-jade-alpha-2)]',\n '[--tag-surface-border:var(--color-jade-alpha-6)]',\n '[--tag-outline-border:var(--color-jade-alpha-8)]',\n '[--tag-solid-bg:var(--color-jade-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n grass: [\n '[--tag-fg:var(--color-grass-11)]',\n '[--tag-subtle-bg:var(--color-grass-alpha-3)]',\n '[--tag-surface-bg:var(--color-grass-alpha-2)]',\n '[--tag-surface-border:var(--color-grass-alpha-6)]',\n '[--tag-outline-border:var(--color-grass-alpha-8)]',\n '[--tag-solid-bg:var(--color-grass-9)]',\n '[--tag-solid-fg:var(--color-white)]',\n ],\n },\n size: {\n sm: [\n '[--tag-close-size:--spacing(4)]',\n 'h-5',\n 'px-1.5',\n 'gap-1',\n 'text-xs',\n '[&_svg]:size-3',\n ],\n md: [\n '[--tag-close-size:--spacing(5)]',\n 'h-6',\n 'px-2',\n 'gap-1',\n 'text-xs',\n '[&_svg]:size-3.5',\n ],\n lg: [\n '[--tag-close-size:--spacing(5)]',\n 'h-7',\n 'px-2.5',\n 'gap-1.5',\n 'text-sm',\n '[&_svg]:size-4',\n ],\n },\n variant: {\n // A borda transparente fica para as variantes terem a mesma medida.\n subtle: [\n 'border-transparent',\n 'bg-(--tag-subtle-bg)',\n 'text-(--tag-fg)',\n ],\n surface: [\n 'border-(--tag-surface-border)',\n 'bg-(--tag-surface-bg)',\n 'text-(--tag-fg)',\n ],\n outline: ['border-(--tag-outline-border)', 'text-(--tag-fg)'],\n solid: [\n 'border-transparent',\n 'bg-(--tag-solid-bg)',\n 'text-(--tag-solid-fg)',\n ],\n },\n },\n defaultVariants: {\n colorScheme: tagRootDefaultVariants.colorScheme,\n size: tagRootDefaultVariants.size,\n variant: tagRootDefaultVariants.variant,\n },\n },\n);\n"],"mappings":";;AA0BA,MAAa,yBAAoD;CAC/D,aAAa;CACb,MAAM;CACN,SAAS;AACX;;;;;;;AAQA,MAAa,kBAAkB,IAC7B;CACE;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CAEA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,KAAK;IACH;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,KAAK;IACH;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,SAAS;GAEP,QAAQ;IACN;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;GACA,SAAS,CAAC,iCAAiC,iBAAiB;GAC5D,OAAO;IACL;IACA;IACA;GACF;EACF;CACF;CACA,iBAAiB;EACf,aAAa,uBAAuB;EACpC,MAAM,uBAAuB;EAC7B,SAAS,uBAAuB;CAClC;AACF,CACF"}

package/dist/components/feedback/alert/alert-indicator.d.ts CHANGED Viewed

@@ -10,8 +10,8 @@ export type AlertIndicatorProps = useRender.ComponentProps<'div'>;
  *
  * Fica com `aria-hidden`: o ícone repete o que o texto diz, e o `status` não é anunciado por ele.
  *
- * Origem do `Toast.Indicator`, que o copia (tabela no README de `feedback`). Uma mudança aqui vale
- * para a cópia na mesma rodada.
+ * Origem do `Toast.Indicator` e do `AlertDialog.Indicator`, que o copiam (tabela no README de
+ * `feedback`). Uma mudança aqui vale para as cópias na mesma rodada.
  */
 export declare const AlertIndicator: {
   (props: AlertIndicatorProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;

package/dist/components/feedback/alert/alert-indicator.js CHANGED Viewed

@@ -13,8 +13,8 @@ import { CheckCircleIcon, InfoIcon, WarningCircleIcon, WarningIcon } from "@phos
 *
 * Fica com `aria-hidden`: o ícone repete o que o texto diz, e o `status` não é anunciado por ele.
 *
-* Origem do `Toast.Indicator`, que o copia (tabela no README de `feedback`). Uma mudança aqui vale
-* para a cópia na mesma rodada.
+* Origem do `Toast.Indicator` e do `AlertDialog.Indicator`, que o copiam (tabela no README de
+* `feedback`). Uma mudança aqui vale para as cópias na mesma rodada.
 */
 const AlertIndicator = (props) => {
 	const { render, className, children, ...rest } = props;

package/dist/components/feedback/alert/alert-indicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"alert-indicator.js","names":[],"sources":["../../../../src/components/feedback/alert/alert-indicator.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n CheckCircleIcon,\n InfoIcon,\n WarningCircleIcon,\n WarningIcon,\n} from '@phosphor-icons/react';\nimport type React from 'react';\nimport { Icon } from '#components/display/icon';\nimport { mergeTwClassNames } from '#utils';\nimport {\n type AlertVariants,\n alertDefaultVariants,\n useAlertContext,\n} from './use-alert-context';\n\nexport type AlertIndicatorProps = useRender.ComponentProps<'div'>;\n\n/*\n Ícone do alerta, na cor do `status`. Sem filhos, mostra o ícone do `status`, pelo `Icon` da lib;\n * com filhos (outro ícone, um `Spinner`), usa os filhos, e um ícone próprio entra pelo `Icon` para\n * ter o mesmo traço. O `svg` mede `1em` (20px), numa caixa da altura da linha do título, para ficar\n * alinhado à primeira linha.\n \n Fica com `aria-hidden`: o ícone repete o que o texto diz, e o `status` não é anunciado por ele.\n \n Origem do `Toast.Indicator`, que o ~~copia~~ (tabela no README de `feedback`). Uma mudança aqui vale\n * para a ~~cópia~~ na mesma rodada.\n */\nexport const AlertIndicator = (props: AlertIndicatorProps) => {\n const { render, className, children, ...rest } = props;\n\n const { status = alertDefaultVariants.status } = useAlertContext();\n\n const StatusIcon = statusIcons[status];\n\n const baseProps = {\n 'data-component': 'Alert.Indicator',\n 'aria-hidden': true,\n children: children ?? <Icon render={<StatusIcon />} />,\n className: mergeTwClassNames(\n [\n 'flex',\n 'items-center',\n 'justify-center',\n 'shrink-0',\n\n 'h-5',\n\n 'text-(--alert-fg)',\n 'text-xl',\n // Sem entrelinha, um emoji ocuparia mais altura que o ícone.\n 'leading-none',\n\n '[&_svg]:size-[1em]',\n ],\n className,\n ),\n };\n\n return useRender({\n render,\n defaultTagName: 'div',\n props: mergeProps(baseProps, rest),\n });\n};\n\nAlertIndicator.displayName = 'Alert.Indicator';\n\nconst statusIcons: Record<\n Required<AlertVariants>['status'],\n React.ComponentType\n> = {\n neutral: InfoIcon,\n info: InfoIcon,\n success: CheckCircleIcon,\n warning: WarningIcon,\n error: WarningCircleIcon,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AA6BA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,QAAQ,WAAW,UAAU,GAAG,SAAS;CAEjD,MAAM,EAAE,SAAS,qBAAqB,WAAW,gBAAgB;CAEjE,MAAM,aAAa,YAAY;CAE/B,MAAM,YAAY;EAChB,kBAAkB;EAClB,eAAe;EACf,UAAU,YAAY,oBAAC,MAAD,EAAM,QAAQ,oBAAC,YAAD,CAAa,CAAA,EAAI,CAAA;EACrD,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GAEA;GACA;GAEA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,eAAe,cAAc;AAE7B,MAAM,cAGF;CACF,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;AACT"}
1	+ {"version":3,"file":"alert-indicator.js","names":[],"sources":["../../../../src/components/feedback/alert/alert-indicator.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n CheckCircleIcon,\n InfoIcon,\n WarningCircleIcon,\n WarningIcon,\n} from '@phosphor-icons/react';\nimport type React from 'react';\nimport { Icon } from '#components/display/icon';\nimport { mergeTwClassNames } from '#utils';\nimport {\n type AlertVariants,\n alertDefaultVariants,\n useAlertContext,\n} from './use-alert-context';\n\nexport type AlertIndicatorProps = useRender.ComponentProps<'div'>;\n\n/*\n Ícone do alerta, na cor do `status`. Sem filhos, mostra o ícone do `status`, pelo `Icon` da lib;\n * com filhos (outro ícone, um `Spinner`), usa os filhos, e um ícone próprio entra pelo `Icon` para\n * ter o mesmo traço. O `svg` mede `1em` (20px), numa caixa da altura da linha do título, para ficar\n * alinhado à primeira linha.\n \n Fica com `aria-hidden`: o ícone repete o que o texto diz, e o `status` não é anunciado por ele.\n \n Origem do `Toast.Indicator` e do `AlertDialog.Indicator`, que o copiam (tabela no README de\n * `feedback`). Uma mudança aqui vale para as cópias na mesma rodada.\n */\nexport const AlertIndicator = (props: AlertIndicatorProps) => {\n const { render, className, children, ...rest } = props;\n\n const { status = alertDefaultVariants.status } = useAlertContext();\n\n const StatusIcon = statusIcons[status];\n\n const baseProps = {\n 'data-component': 'Alert.Indicator',\n 'aria-hidden': true,\n children: children ?? <Icon render={<StatusIcon />} />,\n className: mergeTwClassNames(\n [\n 'flex',\n 'items-center',\n 'justify-center',\n 'shrink-0',\n\n 'h-5',\n\n 'text-(--alert-fg)',\n 'text-xl',\n // Sem entrelinha, um emoji ocuparia mais altura que o ícone.\n 'leading-none',\n\n '[&_svg]:size-[1em]',\n ],\n className,\n ),\n };\n\n return useRender({\n render,\n defaultTagName: 'div',\n props: mergeProps(baseProps, rest),\n });\n};\n\nAlertIndicator.displayName = 'Alert.Indicator';\n\nconst statusIcons: Record<\n Required<AlertVariants>['status'],\n React.ComponentType\n> = {\n neutral: InfoIcon,\n info: InfoIcon,\n success: CheckCircleIcon,\n warning: WarningIcon,\n error: WarningCircleIcon,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AA6BA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,QAAQ,WAAW,UAAU,GAAG,SAAS;CAEjD,MAAM,EAAE,SAAS,qBAAqB,WAAW,gBAAgB;CAEjE,MAAM,aAAa,YAAY;CAE/B,MAAM,YAAY;EAChB,kBAAkB;EAClB,eAAe;EACf,UAAU,YAAY,oBAAC,MAAD,EAAM,QAAQ,oBAAC,YAAD,CAAa,CAAA,EAAI,CAAA;EACrD,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GAEA;GACA;GAEA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,eAAe,cAAc;AAE7B,MAAM,cAGF;CACF,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;AACT"}

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

@@ -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/scroll-area/scroll-area-root.d.ts CHANGED Viewed

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

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

	@@ -1 +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"}
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 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 CHANGED Viewed

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

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

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

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

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

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"scroll-area-thumb.js","names":["BaseScrollArea"],"sources":["../../../../src/components/layout/scroll-area/scroll-area-thumb.tsx"],"sourcesContent":["import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport { mergeStateClassNames } from '#utils';\n\nexport type ScrollAreaThumbProps = BaseScrollArea.Thumb.Props;\n\nexport type ScrollAreaThumbState = BaseScrollArea.Thumb.State;\n\n/*\n O polegar que corre na trilha. Espessura em `--scroll-area-thumb-size`, no `Root`; sem ela,\n * ocupa a trilha toda. ~~Translúcido~~ ~~para~~ ~~funcionar~~ sobre qualquer fundo.\n */\nexport const ScrollAreaThumb = (props: ScrollAreaThumbProps) => {\n const { className, ...rest } = props;\n\n return (\n <BaseScrollArea.Thumb\n data-component=\"ScrollArea.Thumb\"\n className={mergeStateClassNames(\n [\n // Os dois eixos sem olhar a orientação: o principal o Base UI escreve inline, e\n // inline vence classe. Na prática, a classe só define o eixo cruzado.\n 'size-(--scroll-area-thumb-size,100%)',\n 'rounded-~~full~~',\n\n // O `active:` dura o arrasto inteiro: o Base UI captura o ponteiro no polegar.\n 'bg-gray-9~~/50~~',\n '~~active~~:bg-gray-10',\n 'transition-~~colors~~',\n ],\n className,\n )}\n {...rest}\n />\n );\n};\n\nScrollAreaThumb.displayName = 'ScrollArea.Thumb';\n"],"mappings":"~~;;;;;;;;AAWA~~,MAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,WAAe,OAAhB;EACE,kBAAe;EACf,WAAW,qBACT;GAGE;GACA;~~GAGA~~;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,gBAAgB,cAAc"}
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"}