@lucasbernardosn/react-ui 0.1.0 → 0.2.0

package/dist/components/feedback/empty-state/empty-state-indicator.d.ts

@@ -2,9 +2,10 @@ import { useRender } from "@base-ui/react";
 //#region src/components/feedback/empty-state/empty-state-indicator.d.ts
 export type EmptyStateIndicatorProps = useRender.ComponentProps<'div'>;
 /**
- * Ícone ou ilustração do estado vazio. O tamanho vem do `font-size`, lido do `size` do
- * `EmptyState.Root`, e o `svg` mede `1em`: ícone, emoji e texto seguem a mesma escala, mesmo que o
- * ícone traga um tamanho próprio. Para outro tamanho, troque o `font-size` pela `className`.
+ * Ícone ou ilustração do estado vazio. O tamanho vem do `font-size`, lido de
+ * `--empty-state-indicator-size` (24px, declarada no `EmptyState.Root`), e o `svg` mede `1em`:
+ * ícone, emoji e texto seguem o mesmo tamanho, mesmo que o ícone traga um próprio. Para outro
+ * tamanho, troque o `font-size` pela `className`.
  */
 export declare const EmptyStateIndicator: {
   (props: EmptyStateIndicatorProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/feedback/empty-state/empty-state-indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state-indicator.d.ts","names":[],"sources":["../../../../src/components/feedback/empty-state/empty-state-indicator.tsx"],"mappings":";;YAGY,2BAA2B,UAAU;;;;;;qBAOpC;GAA8B,OAAA,2CAAwB,+CAAA"}
+{"version":3,"file":"empty-state-indicator.d.ts","names":[],"sources":["../../../../src/components/feedback/empty-state/empty-state-indicator.tsx"],"mappings":";;YAGY,2BAA2B,UAAU;;;;;;;qBAQpC;GAA8B,OAAA,2CAAwB,+CAAA"}

package/dist/components/feedback/empty-state/empty-state-indicator.js

@@ -2,9 +2,10 @@ import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
 import { mergeProps, useRender } from "@base-ui/react";
 //#region src/components/feedback/empty-state/empty-state-indicator.tsx
 /**
-* Ícone ou ilustração do estado vazio. O tamanho vem do `font-size`, lido do `size` do
-* `EmptyState.Root`, e o `svg` mede `1em`: ícone, emoji e texto seguem a mesma escala, mesmo que o
-* ícone traga um tamanho próprio. Para outro tamanho, troque o `font-size` pela `className`.
+* Ícone ou ilustração do estado vazio. O tamanho vem do `font-size`, lido de
+* `--empty-state-indicator-size` (24px, declarada no `EmptyState.Root`), e o `svg` mede `1em`:
+* ícone, emoji e texto seguem o mesmo tamanho, mesmo que o ícone traga um próprio. Para outro
+* tamanho, troque o `font-size` pela `className`.
 */
 const EmptyStateIndicator = (props) => {
 	const { render, className, ...rest } = props;
@@ -15,7 +16,7 @@ const EmptyStateIndicator = (props) => {
 			"items-center",
 			"justify-center",
 			"text-gray-12",
-			"text-(length:--empty-state-indicator-size,--spacing(9))",
+			"text-(length:--empty-state-indicator-size,--spacing(6))",
 			"leading-none",
 			"[&_svg]:size-[1em]"
 		], className)

package/dist/components/feedback/empty-state/empty-state-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state-indicator.js","names":[],"sources":["../../../../src/components/feedback/empty-state/empty-state-indicator.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type EmptyStateIndicatorProps = useRender.ComponentProps<'div'>;\n\n/**\n * Ícone ou ilustração do estado vazio. O tamanho vem do `font-size`, lido do `size` do\n * `EmptyState.Root`, e o `svg` mede `1em`: ícone, emoji e texto seguem a mesma escala, mesmo que o\n * ícone traga um tamanho próprio. Para outro tamanho, troque o `font-size` pela `className`.\n */\nexport const EmptyStateIndicator = (props: EmptyStateIndicatorProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'EmptyState.Indicator',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'items-center',\n        'justify-center',\n\n        'text-gray-12',\n        'text-(length:--empty-state-indicator-size,--spacing(9))',\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\nEmptyStateIndicator.displayName = 'EmptyState.Indicator';\n"],"mappings":";;;;;;;;AAUA,MAAa,uBAAuB,UAAoC;CACtE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GAEA;GACA;GAEA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,oBAAoB,cAAc"}
+{"version":3,"file":"empty-state-indicator.js","names":[],"sources":["../../../../src/components/feedback/empty-state/empty-state-indicator.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type EmptyStateIndicatorProps = useRender.ComponentProps<'div'>;\n\n/**\n * Ícone ou ilustração do estado vazio. O tamanho vem do `font-size`, lido de\n * `--empty-state-indicator-size` (24px, declarada no `EmptyState.Root`), e o `svg` mede `1em`:\n * ícone, emoji e texto seguem o mesmo tamanho, mesmo que o ícone traga um próprio. Para outro\n * tamanho, troque o `font-size` pela `className`.\n */\nexport const EmptyStateIndicator = (props: EmptyStateIndicatorProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'EmptyState.Indicator',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'items-center',\n        'justify-center',\n\n        'text-gray-12',\n        'text-(length:--empty-state-indicator-size,--spacing(6))',\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\nEmptyStateIndicator.displayName = 'EmptyState.Indicator';\n"],"mappings":";;;;;;;;;AAWA,MAAa,uBAAuB,UAAoC;CACtE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GAEA;GACA;GAEA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,oBAAoB,cAAc"}

package/dist/components/feedback/empty-state/empty-state-root-variants.d.ts

@@ -1,12 +1,5 @@
 //#region src/components/feedback/empty-state/empty-state-root-variants.d.ts
 export type EmptyStateVariants = {
-  /**
-   * Respiro interno, espaço entre as partes, tamanho do indicador e tipografia do título e da
-   * descrição, na escala de título e descrição da lib.
-   *
-   * @default 'sm'
-   */
-  size?: 'xs' | 'sm' | 'md' | 'lg';
   /**
    * Moldura do `Root`: `outline` com borda tracejada e `plain` sem moldura, para quando o estado
    * vazio já está dentro de algo emoldurado (tabela, cartão, dropdown).
@@ -17,17 +10,10 @@ export type EmptyStateVariants = {
 };
 export declare const emptyStateDefaultVariants: Required<EmptyStateVariants>;
 /**
- * O `size` aplica o respiro e o espaço entre as partes no próprio `Root` e declara CSS variables
- * para as partes lerem:
- * - `--empty-state-indicator-size`: o tamanho do ícone no Indicator;
- * - `--empty-state-title-size` e `--empty-state-title-leading`: o Title;
- * - `--empty-state-description-size` e `--empty-state-description-leading`: a Description;
- * - `--empty-state-header-gap`: o espaço entre título e descrição no Content.
- *
- * Assim as partes não precisam de contexto e, fora de um `Root`, ficam no tamanho do `sm`.
+ * O respiro, o espaço entre as partes e o tamanho do indicador são fixos e ficam no `Root`. O
+ * Indicator lê o tamanho pela CSS variable, e fora de um `Root` cai no mesmo valor.
  */
 export declare const emptyStateRootVariants: (props?: ({
-  size?: "xs" | "sm" | "md" | "lg" | null | undefined;
   variant?: "outline" | "plain" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

package/dist/components/feedback/empty-state/empty-state-root-variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state-root-variants.d.ts","names":[],"sources":["../../../../src/components/feedback/empty-state/empty-state-root-variants.ts"],"mappings":";YAEY;;;;;;;EAOV;;;;;;;EAOA;;qBAGW,2BAA2B,SAAS;;;;;;;;;;;qBAepC,yBAAsB;;;6CAsElC"}
+{"version":3,"file":"empty-state-root-variants.d.ts","names":[],"sources":["../../../../src/components/feedback/empty-state/empty-state-root-variants.ts"],"mappings":";YAEY;;;;;;;EAOV;;qBAGW,2BAA2B,SAAS;;;;;qBAQpC,yBAAsB;;6CA6BlC"}

package/dist/components/feedback/empty-state/empty-state-root-variants.js

@@ -1,88 +1,32 @@
 import { cva } from "class-variance-authority";
 //#region src/components/feedback/empty-state/empty-state-root-variants.ts
-const emptyStateDefaultVariants = {
-	size: "sm",
-	variant: "outline"
-};
+const emptyStateDefaultVariants = { variant: "outline" };
 /**
-* O `size` aplica o respiro e o espaço entre as partes no próprio `Root` e declara CSS variables
-* para as partes lerem:
-* - `--empty-state-indicator-size`: o tamanho do ícone no Indicator;
-* - `--empty-state-title-size` e `--empty-state-title-leading`: o Title;
-* - `--empty-state-description-size` e `--empty-state-description-leading`: a Description;
-* - `--empty-state-header-gap`: o espaço entre título e descrição no Content.
-*
-* Assim as partes não precisam de contexto e, fora de um `Root`, ficam no tamanho do `sm`.
+* O respiro, o espaço entre as partes e o tamanho do indicador são fixos e ficam no `Root`. O
+* Indicator lê o tamanho pela CSS variable, e fora de um `Root` cai no mesmo valor.
 */
 const emptyStateRootVariants = cva([
+	"[--empty-state-indicator-size:--spacing(6)]",
 	"flex",
 	"flex-col",
 	"items-center",
 	"justify-center",
+	"gap-4",
+	"px-6",
+	"py-8",
 	"rounded-md",
 	"corner-squircle",
 	"text-center"
 ], {
-	variants: {
-		size: {
-			xs: [
-				"gap-3",
-				"px-4",
-				"py-6",
-				"[--empty-state-indicator-size:--spacing(6)]",
-				"[--empty-state-title-size:var(--text-base)]",
-				"[--empty-state-title-leading:--spacing(5)]",
-				"[--empty-state-description-size:var(--text-xs)]",
-				"[--empty-state-description-leading:--spacing(4)]",
-				"[--empty-state-header-gap:--spacing(0.5)]"
-			],
-			sm: [
-				"gap-4",
-				"px-6",
-				"py-8",
-				"[--empty-state-indicator-size:--spacing(9)]",
-				"[--empty-state-title-size:var(--text-lg)]",
-				"[--empty-state-title-leading:--spacing(6)]",
-				"[--empty-state-description-size:var(--text-sm)]",
-				"[--empty-state-description-leading:--spacing(5)]",
-				"[--empty-state-header-gap:--spacing(0.5)]"
-			],
-			md: [
-				"gap-5",
-				"px-8",
-				"py-12",
-				"[--empty-state-indicator-size:--spacing(12)]",
-				"[--empty-state-title-size:var(--text-xl)]",
-				"[--empty-state-title-leading:--spacing(7)]",
-				"[--empty-state-description-size:var(--text-base)]",
-				"[--empty-state-description-leading:--spacing(6)]",
-				"[--empty-state-header-gap:--spacing(1)]"
-			],
-			lg: [
-				"gap-6",
-				"px-10",
-				"py-16",
-				"[--empty-state-indicator-size:--spacing(15)]",
-				"[--empty-state-title-size:var(--text-2xl)]",
-				"[--empty-state-title-leading:--spacing(8)]",
-				"[--empty-state-description-size:var(--text-lg)]",
-				"[--empty-state-description-leading:--spacing(7)]",
-				"[--empty-state-header-gap:--spacing(1)]"
-			]
-		},
-		variant: {
-			outline: [
-				"border",
-				"border-dashed",
-				"border-gray-6"
-			],
-			plain: []
-		}
-	},
-	defaultVariants: {
-		size: emptyStateDefaultVariants.size,
-		variant: emptyStateDefaultVariants.variant
-	}
+	variants: { variant: {
+		outline: [
+			"border",
+			"border-dashed",
+			"border-gray-6"
+		],
+		plain: []
+	} },
+	defaultVariants: { variant: emptyStateDefaultVariants.variant }
 });
 //#endregion
 export { emptyStateDefaultVariants, emptyStateRootVariants };

package/dist/components/feedback/empty-state/empty-state-root-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state-root-variants.js","names":[],"sources":["../../../../src/components/feedback/empty-state/empty-state-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type EmptyStateVariants = {\n  /**\n   * Respiro interno, espaço entre as partes, tamanho do indicador e tipografia do título e da\n   * descrição, na escala de título e descrição da lib.\n   *\n   * @default 'sm'\n   */\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n  /**\n   * Moldura do `Root`: `outline` com borda tracejada e `plain` sem moldura, para quando o estado\n   * vazio já está dentro de algo emoldurado (tabela, cartão, dropdown).\n   *\n   * @default 'outline'\n   */\n  variant?: 'outline' | 'plain';\n};\n\nexport const emptyStateDefaultVariants: Required<EmptyStateVariants> = {\n  size: 'sm',\n  variant: 'outline',\n};\n\n/**\n * O `size` aplica o respiro e o espaço entre as partes no próprio `Root` e declara CSS variables\n * para as partes lerem:\n * - `--empty-state-indicator-size`: o tamanho do ícone no Indicator;\n * - `--empty-state-title-size` e `--empty-state-title-leading`: o Title;\n * - `--empty-state-description-size` e `--empty-state-description-leading`: a Description;\n * - `--empty-state-header-gap`: o espaço entre título e descrição no Content.\n *\n * Assim as partes não precisam de contexto e, fora de um `Root`, ficam no tamanho do `sm`.\n */\nexport const emptyStateRootVariants = cva(\n  [\n    'flex',\n    'flex-col',\n    'items-center',\n    'justify-center',\n\n    'rounded-md',\n    'corner-squircle',\n\n    'text-center',\n  ],\n  {\n    variants: {\n      size: {\n        xs: [\n          'gap-3',\n          'px-4',\n          'py-6',\n          '[--empty-state-indicator-size:--spacing(6)]',\n          '[--empty-state-title-size:var(--text-base)]',\n          '[--empty-state-title-leading:--spacing(5)]',\n          '[--empty-state-description-size:var(--text-xs)]',\n          '[--empty-state-description-leading:--spacing(4)]',\n          '[--empty-state-header-gap:--spacing(0.5)]',\n        ],\n        sm: [\n          'gap-4',\n          'px-6',\n          'py-8',\n          '[--empty-state-indicator-size:--spacing(9)]',\n          '[--empty-state-title-size:var(--text-lg)]',\n          '[--empty-state-title-leading:--spacing(6)]',\n          '[--empty-state-description-size:var(--text-sm)]',\n          '[--empty-state-description-leading:--spacing(5)]',\n          '[--empty-state-header-gap:--spacing(0.5)]',\n        ],\n        md: [\n          'gap-5',\n          'px-8',\n          'py-12',\n          '[--empty-state-indicator-size:--spacing(12)]',\n          '[--empty-state-title-size:var(--text-xl)]',\n          '[--empty-state-title-leading:--spacing(7)]',\n          '[--empty-state-description-size:var(--text-base)]',\n          '[--empty-state-description-leading:--spacing(6)]',\n          '[--empty-state-header-gap:--spacing(1)]',\n        ],\n        lg: [\n          'gap-6',\n          'px-10',\n          'py-16',\n          '[--empty-state-indicator-size:--spacing(15)]',\n          '[--empty-state-title-size:var(--text-2xl)]',\n          '[--empty-state-title-leading:--spacing(8)]',\n          '[--empty-state-description-size:var(--text-lg)]',\n          '[--empty-state-description-leading:--spacing(7)]',\n          '[--empty-state-header-gap:--spacing(1)]',\n        ],\n      },\n      variant: {\n        outline: ['border', 'border-dashed', 'border-gray-6'],\n        plain: [],\n      },\n    },\n    defaultVariants: {\n      size: emptyStateDefaultVariants.size,\n      variant: emptyStateDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAmBA,MAAa,4BAA0D;CACrE,MAAM;CACN,SAAS;AACX;;;;;;;;;;;AAYA,MAAa,yBAAyB,IACpC;CACE;CACA;CACA;CACA;CAEA;CACA;CAEA;AACF,GACA;CACE,UAAU;EACR,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,SAAS;GACP,SAAS;IAAC;IAAU;IAAiB;GAAe;GACpD,OAAO,CAAC;EACV;CACF;CACA,iBAAiB;EACf,MAAM,0BAA0B;EAChC,SAAS,0BAA0B;CACrC;AACF,CACF"}
+{"version":3,"file":"empty-state-root-variants.js","names":[],"sources":["../../../../src/components/feedback/empty-state/empty-state-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type EmptyStateVariants = {\n  /**\n   * Moldura do `Root`: `outline` com borda tracejada e `plain` sem moldura, para quando o estado\n   * vazio já está dentro de algo emoldurado (tabela, cartão, dropdown).\n   *\n   * @default 'outline'\n   */\n  variant?: 'outline' | 'plain';\n};\n\nexport const emptyStateDefaultVariants: Required<EmptyStateVariants> = {\n  variant: 'outline',\n};\n\n/**\n * O respiro, o espaço entre as partes e o tamanho do indicador são fixos e ficam no `Root`. O\n * Indicator lê o tamanho pela CSS variable, e fora de um `Root` cai no mesmo valor.\n */\nexport const emptyStateRootVariants = cva(\n  [\n    '[--empty-state-indicator-size:--spacing(6)]',\n\n    'flex',\n    'flex-col',\n    'items-center',\n    'justify-center',\n\n    'gap-4',\n    'px-6',\n    'py-8',\n\n    'rounded-md',\n    'corner-squircle',\n\n    'text-center',\n  ],\n  {\n    variants: {\n      variant: {\n        outline: ['border', 'border-dashed', 'border-gray-6'],\n        plain: [],\n      },\n    },\n    defaultVariants: {\n      variant: emptyStateDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAYA,MAAa,4BAA0D,EACrE,SAAS,UACX;;;;;AAMA,MAAa,yBAAyB,IACpC;CACE;CAEA;CACA;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CAEA;AACF,GACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;GAAC;GAAU;GAAiB;EAAe;EACpD,OAAO,CAAC;CACV,EACF;CACA,iBAAiB,EACf,SAAS,0BAA0B,QACrC;AACF,CACF"}

package/dist/components/feedback/empty-state/empty-state-root.d.ts

@@ -4,9 +4,8 @@ import { useRender } from "@base-ui/react";
 //#region src/components/feedback/empty-state/empty-state-root.d.ts
 export type EmptyStateRootProps = MergeOverride<useRender.ComponentProps<'div'>, EmptyStateVariants>;
 /**
- * Estado vazio: coluna centralizada que empilha indicador, título, descrição e ações. O `size`
- * vale para todas as partes, pelas CSS variables que o `Root` declara; a `variant` decide se há
- * moldura.
+ * Estado vazio: coluna centralizada que empilha indicador, título, descrição e ações, com
+ * tamanho e respiro fixos; a `variant` decide se há moldura.
  *
  * @example
  * ```tsx

package/dist/components/feedback/empty-state/empty-state-root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state-root.d.ts","names":[],"sources":["../../../../src/components/feedback/empty-state/empty-state-root.tsx"],"mappings":";;;;YAQY,sBAAsB,cAChC,UAAU,uBACV;;;;;;;;;;;;;;;;;;;;qBAwBW;GAAyB,OAAA,sCAAmB,+CAAA"}
+{"version":3,"file":"empty-state-root.d.ts","names":[],"sources":["../../../../src/components/feedback/empty-state/empty-state-root.tsx"],"mappings":";;;;YAQY,sBAAsB,cAChC,UAAU,uBACV;;;;;;;;;;;;;;;;;;;qBAuBW;GAAyB,OAAA,sCAAmB,+CAAA"}

package/dist/components/feedback/empty-state/empty-state-root.js

@@ -5,9 +5,8 @@ import { mergeProps, useRender } from "@base-ui/react";
 //#region src/components/feedback/empty-state/empty-state-root.tsx
 const splitVariantProps = createSplitProps();
 /**
-* Estado vazio: coluna centralizada que empilha indicador, título, descrição e ações. O `size`
-* vale para todas as partes, pelas CSS variables que o `Root` declara; a `variant` decide se há
-* moldura.
+* Estado vazio: coluna centralizada que empilha indicador, título, descrição e ações, com
+* tamanho e respiro fixos; a `variant` decide se há moldura.
 *
 * @example
 * ```tsx
@@ -24,7 +23,7 @@ const splitVariantProps = createSplitProps();
 * ```
 */
 const EmptyStateRoot = (props) => {
-	const [variantProps, elementProps] = splitVariantProps(props, ["size", "variant"]);
+	const [variantProps, elementProps] = splitVariantProps(props, ["variant"]);
 	const { render, className, ...rest } = elementProps;
 	const baseProps = {
 		"data-component": "EmptyState.Root",

package/dist/components/feedback/empty-state/empty-state-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state-root.js","names":[],"sources":["../../../../src/components/feedback/empty-state/empty-state-root.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\nimport {\n  type EmptyStateVariants,\n  emptyStateRootVariants,\n} from './empty-state-root-variants';\n\nexport type EmptyStateRootProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  EmptyStateVariants\n>;\n\nconst splitVariantProps = createSplitProps<EmptyStateVariants>();\n\n/**\n * Estado vazio: coluna centralizada que empilha indicador, título, descrição e ações. O `size`\n * vale para todas as partes, pelas CSS variables que o `Root` declara; a `variant` decide se há\n * moldura.\n *\n * @example\n * ```tsx\n * <EmptyState.Root>\n *   <EmptyState.Indicator>\n *     <InboxIcon />\n *   </EmptyState.Indicator>\n *\n *   <EmptyState.Content>\n *     <EmptyState.Title>Nenhuma mensagem</EmptyState.Title>\n *     <EmptyState.Description>As mensagens recebidas aparecem aqui.</EmptyState.Description>\n *   </EmptyState.Content>\n * </EmptyState.Root>\n * ```\n */\nexport const EmptyStateRoot = (props: EmptyStateRootProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'size',\n    'variant',\n  ]);\n\n  const { render, className, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'EmptyState.Root',\n    className: mergeTwClassNames(\n      emptyStateRootVariants(variantProps),\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nEmptyStateRoot.displayName = 'EmptyState.Root';\n"],"mappings":";;;;;AAaA,MAAM,oBAAoB,iBAAqC;;;;;;;;;;;;;;;;;;;;AAqB/D,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,QACA,SACF,CAAC;CAED,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT,uBAAuB,YAAY,GACnC,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,eAAe,cAAc"}
+{"version":3,"file":"empty-state-root.js","names":[],"sources":["../../../../src/components/feedback/empty-state/empty-state-root.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\nimport {\n  type EmptyStateVariants,\n  emptyStateRootVariants,\n} from './empty-state-root-variants';\n\nexport type EmptyStateRootProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  EmptyStateVariants\n>;\n\nconst splitVariantProps = createSplitProps<EmptyStateVariants>();\n\n/**\n * Estado vazio: coluna centralizada que empilha indicador, título, descrição e ações, com\n * tamanho e respiro fixos; a `variant` decide se há moldura.\n *\n * @example\n * ```tsx\n * <EmptyState.Root>\n *   <EmptyState.Indicator>\n *     <InboxIcon />\n *   </EmptyState.Indicator>\n *\n *   <EmptyState.Content>\n *     <EmptyState.Title>Nenhuma mensagem</EmptyState.Title>\n *     <EmptyState.Description>As mensagens recebidas aparecem aqui.</EmptyState.Description>\n *   </EmptyState.Content>\n * </EmptyState.Root>\n * ```\n */\nexport const EmptyStateRoot = (props: EmptyStateRootProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['variant']);\n\n  const { render, className, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'EmptyState.Root',\n    className: mergeTwClassNames(\n      emptyStateRootVariants(variantProps),\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nEmptyStateRoot.displayName = 'EmptyState.Root';\n"],"mappings":";;;;;AAaA,MAAM,oBAAoB,iBAAqC;;;;;;;;;;;;;;;;;;;AAoB/D,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,SAAS,CAAC;CAEzE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT,uBAAuB,YAAY,GACnC,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,eAAe,cAAc"}

package/dist/components/feedback/empty-state/empty-state-title.d.ts

@@ -3,15 +3,15 @@ import { useRender } from "@base-ui/react";
 //#region src/components/feedback/empty-state/empty-state-title.d.ts
 export type EmptyStateTitleProps = MergeOverride<useRender.ComponentProps<'h3'>, {
   /**
-   * Nível do título, que define a tag (`h1` a `h6`). Não muda a aparência: o tamanho vem do
-   * `size` do `EmptyState.Root`. Com `render`, a tag do `render` prevalece.
+   * Nível do título, que define a tag (`h1` a `h6`). Não muda a aparência, que é fixa. Com
+   * `render`, a tag do `render` prevalece.
    *
    * @default 3
    */
   level?: 1 | 2 | 3 | 4 | 5 | 6;
 }>;
 /**
- * Título do estado vazio, no tamanho e na entrelinha do `size` do `EmptyState.Root`. Escolha o
+ * Título do estado vazio, com a tipografia fixa dos títulos. Escolha o
  * `level` pela hierarquia da página: `2` para um estado vazio que ocupa a página, `3` ou `4` para o
  * de uma seção.
  */

package/dist/components/feedback/empty-state/empty-state-title.js

@@ -2,7 +2,7 @@ import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
 import { mergeProps, useRender } from "@base-ui/react";
 //#region src/components/feedback/empty-state/empty-state-title.tsx
 /**
-* Título do estado vazio, no tamanho e na entrelinha do `size` do `EmptyState.Root`. Escolha o
+* Título do estado vazio, com a tipografia fixa dos títulos. Escolha o
 * `level` pela hierarquia da página: `2` para um estado vazio que ocupa a página, `3` ou `4` para o
 * de uma seção.
 */
@@ -11,9 +11,9 @@ const EmptyStateTitle = (props) => {
 	const baseProps = {
 		"data-component": "EmptyState.Title",
 		className: mergeTwClassNames([
-			"text-(length:--empty-state-title-size,var(--text-lg))",
-			"leading-(--empty-state-title-leading,--spacing(6))",
-			"font-semibold",
+			"text-base",
+			"leading-6",
+			"font-medium",
 			"text-gray-12",
 			"text-balance"
 		], className)

package/dist/components/feedback/empty-state/empty-state-title.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state-title.js","names":[],"sources":["../../../../src/components/feedback/empty-state/empty-state-title.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\n\nexport type EmptyStateTitleProps = MergeOverride<\n  useRender.ComponentProps<'h3'>,\n  {\n    /**\n     * Nível do título, que define a tag (`h1` a `h6`). Não muda a aparência: o tamanho vem do\n     * `size` do `EmptyState.Root`. Com `render`, a tag do `render` prevalece.\n     *\n     * @default 3\n     */\n    level?: 1 | 2 | 3 | 4 | 5 | 6;\n  }\n>;\n\n/**\n * Título do estado vazio, no tamanho e na entrelinha do `size` do `EmptyState.Root`. Escolha o\n * `level` pela hierarquia da página: `2` para um estado vazio que ocupa a página, `3` ou `4` para o\n * de uma seção.\n */\nexport const EmptyStateTitle = (props: EmptyStateTitleProps) => {\n  const { level = 3, render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'EmptyState.Title',\n    className: mergeTwClassNames(\n      [\n        'text-(length:--empty-state-title-size,var(--text-lg))',\n        'leading-(--empty-state-title-leading,--spacing(6))',\n        'font-semibold',\n        'text-gray-12',\n        'text-balance',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: `h${level}`,\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nEmptyStateTitle.displayName = 'EmptyState.Title';\n"],"mappings":";;;;;;;;AAsBA,MAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,QAAQ,GAAG,QAAQ,WAAW,GAAG,SAAS;CAElD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB,IAAI;EACpB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,gBAAgB,cAAc"}
+{"version":3,"file":"empty-state-title.js","names":[],"sources":["../../../../src/components/feedback/empty-state/empty-state-title.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\n\nexport type EmptyStateTitleProps = MergeOverride<\n  useRender.ComponentProps<'h3'>,\n  {\n    /**\n     * Nível do título, que define a tag (`h1` a `h6`). Não muda a aparência, que é fixa. Com\n     * `render`, a tag do `render` prevalece.\n     *\n     * @default 3\n     */\n    level?: 1 | 2 | 3 | 4 | 5 | 6;\n  }\n>;\n\n/**\n * Título do estado vazio, com a tipografia fixa dos títulos. Escolha o\n * `level` pela hierarquia da página: `2` para um estado vazio que ocupa a página, `3` ou `4` para o\n * de uma seção.\n */\nexport const EmptyStateTitle = (props: EmptyStateTitleProps) => {\n  const { level = 3, render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'EmptyState.Title',\n    className: mergeTwClassNames(\n      ['text-base', 'leading-6', 'font-medium', 'text-gray-12', 'text-balance'],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: `h${level}`,\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nEmptyStateTitle.displayName = 'EmptyState.Title';\n"],"mappings":";;;;;;;;AAsBA,MAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,QAAQ,GAAG,QAAQ,WAAW,GAAG,SAAS;CAElD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GAAC;GAAa;GAAa;GAAe;GAAgB;EAAc,GACxE,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB,IAAI;EACpB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,gBAAgB,cAAc"}

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

@@ -31,7 +31,7 @@ export declare const checkboxRootDefaultVariants: Required<CheckboxRootVariants>
 export declare const checkboxRootVariants: (props?: ({
   colorScheme?: "gray" | "brand" | null | undefined;
   size?: "xs" | "sm" | "md" | "lg" | null | undefined;
-  variant?: "outline" | "subtle" | "solid" | null | undefined;
+  variant?: "solid" | "subtle" | "outline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=checkbox-root-variants.d.ts.map

package/dist/components/fields/currency-brl-input/currency-brl-input-variants.d.ts

@@ -24,7 +24,7 @@ export declare const currencyBrlInputDefaultVariants: Required<CurrencyBrlInputV
  *   tecla nem quando o separador de milhar entra.
  */
 export declare const currencyBrlInputVariants: (props?: ({
-  variant?: "outline" | "subtle" | null | undefined;
+  variant?: "subtle" | "outline" | null | undefined;
   size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

package/dist/components/fields/fieldset/fieldset-legend.d.ts

@@ -3,16 +3,16 @@ import { Fieldset } from "@base-ui/react/fieldset";
 export type FieldsetLegendProps = Fieldset.Legend.Props;
 export type FieldsetLegendState = Fieldset.Legend.State;
 /**
- * Nome do grupo, com a tipografia do `Field.Label`. Renderiza um `<div>` ligado ao
- * `Fieldset.Root` por `aria-labelledby`: o `<legend>` nativo sai do fluxo do flex e fica sobre a
- * borda do `<fieldset>`.
+ * Nome do grupo. Renderiza um `<div>` ligado ao `Fieldset.Root` por `aria-labelledby`: o
+ * `<legend>` nativo sai do fluxo do flex e fica sobre a borda do `<fieldset>`.
  *
- * Num grupo de opções, o Base UI põe o `Fieldset.Root` dentro de um `Field.Root`, e a `Legend`
- * acompanha o `size` dele como o rótulo das opções. Fora de um `Field.Root`, fica no `size`
- * padrão.
+ * Tem dois papéis, que dependem de onde está:
+ * - dentro de um `Field.Root`, como num grupo de opções (o Base UI põe o `Fieldset.Root` dentro
+ *   dele), é o rótulo do grupo: acompanha o `size` do campo, como o rótulo das opções;
+ * - fora de um `Field.Root`, é o título de uma seção de campos, com a tipografia dos títulos.
  *
- * Como título de seção, componha com o título que quiser:
- * `<Heading render={<Fieldset.Legend />}>`.
+ * Ele lê as variáveis do `Field.Root` com a tipografia do título como fallback: sem `Field.Root`,
+ * as variáveis não existem.
  */
 export declare const FieldsetLegend: {
   (props: FieldsetLegendProps): import("react").JSX.Element;

package/dist/components/fields/fieldset/fieldset-legend.js

@@ -3,26 +3,27 @@ import { jsx } from "react/jsx-runtime";
 import { Fieldset } from "@base-ui/react/fieldset";
 //#region src/components/fields/fieldset/fieldset-legend.tsx
 /**
-* Nome do grupo, com a tipografia do `Field.Label`. Renderiza um `<div>` ligado ao
-* `Fieldset.Root` por `aria-labelledby`: o `<legend>` nativo sai do fluxo do flex e fica sobre a
-* borda do `<fieldset>`.
+* Nome do grupo. Renderiza um `<div>` ligado ao `Fieldset.Root` por `aria-labelledby`: o
+* `<legend>` nativo sai do fluxo do flex e fica sobre a borda do `<fieldset>`.
 *
-* Num grupo de opções, o Base UI põe o `Fieldset.Root` dentro de um `Field.Root`, e a `Legend`
-* acompanha o `size` dele como o rótulo das opções. Fora de um `Field.Root`, fica no `size`
-* padrão.
+* Tem dois papéis, que dependem de onde está:
+* - dentro de um `Field.Root`, como num grupo de opções (o Base UI põe o `Fieldset.Root` dentro
+*   dele), é o rótulo do grupo: acompanha o `size` do campo, como o rótulo das opções;
+* - fora de um `Field.Root`, é o título de uma seção de campos, com a tipografia dos títulos.
 *
-* Como título de seção, componha com o título que quiser:
-* `<Heading render={<Fieldset.Legend />}>`.
+* Ele lê as variáveis do `Field.Root` com a tipografia do título como fallback: sem `Field.Root`,
+* as variáveis não existem.
 */
 const FieldsetLegend = (props) => {
 	const { className, ...rest } = props;
 	return /* @__PURE__ */ jsx(Fieldset.Legend, {
 		"data-component": "Fieldset.Legend",
 		className: mergeStateClassNames([
-			"text-(length:--field-label-size,var(--text-sm))",
-			"leading-(--field-label-leading,--spacing(4))",
+			"text-(length:--field-label-size,var(--text-base))",
+			"leading-(--field-label-leading,--spacing(6))",
 			"font-medium",
 			"text-gray-12",
+			"text-balance",
 			"data-disabled:opacity-50"
 		], className),
 		...rest

package/dist/components/fields/fieldset/fieldset-legend.js.map

@@ -1 +1 @@
-{"version":3,"file":"fieldset-legend.js","names":["BaseFieldset"],"sources":["../../../../src/components/fields/fieldset/fieldset-legend.tsx"],"sourcesContent":["import { Fieldset as BaseFieldset } from '@base-ui/react/fieldset';\nimport { mergeStateClassNames } from '#utils';\n\nexport type FieldsetLegendProps = BaseFieldset.Legend.Props;\n\nexport type FieldsetLegendState = BaseFieldset.Legend.State;\n\n/**\n * Nome do grupo, com a tipografia do `Field.Label`. Renderiza um `<div>` ligado ao\n * `Fieldset.Root` por `aria-labelledby`: o `<legend>` nativo sai do fluxo do flex e fica sobre a\n * borda do `<fieldset>`.\n *\n * Num grupo de opções, o Base UI põe o `Fieldset.Root` dentro de um `Field.Root`, e a `Legend`\n * acompanha o `size` dele como o rótulo das opções. Fora de um `Field.Root`, fica no `size`\n * padrão.\n *\n * Como título de seção, componha com o título que quiser:\n * `<Heading render={<Fieldset.Legend />}>`.\n */\nexport const FieldsetLegend = (props: FieldsetLegendProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseFieldset.Legend\n      data-component=\"Fieldset.Legend\"\n      className={mergeStateClassNames(\n        [\n          // Tamanho e linha vêm do `size` do `Field.Root` em volta (ver `fieldRootVariants`).\n          'text-(length:--field-label-size,var(--text-sm))',\n          'leading-(--field-label-leading,--spacing(4))',\n          'font-medium',\n          'text-gray-12',\n\n          'data-disabled:opacity-50',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nFieldsetLegend.displayName = 'Fieldset.Legend';\n"],"mappings":";;;;;;;;;;;;;;;;AAmBA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,SAAa,QAAd;EACE,kBAAe;EACf,WAAW,qBACT;GAEE;GACA;GACA;GACA;GAEA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}
+{"version":3,"file":"fieldset-legend.js","names":["BaseFieldset"],"sources":["../../../../src/components/fields/fieldset/fieldset-legend.tsx"],"sourcesContent":["import { Fieldset as BaseFieldset } from '@base-ui/react/fieldset';\nimport { mergeStateClassNames } from '#utils';\n\nexport type FieldsetLegendProps = BaseFieldset.Legend.Props;\n\nexport type FieldsetLegendState = BaseFieldset.Legend.State;\n\n/**\n * Nome do grupo. Renderiza um `<div>` ligado ao `Fieldset.Root` por `aria-labelledby`: o\n * `<legend>` nativo sai do fluxo do flex e fica sobre a borda do `<fieldset>`.\n *\n * Tem dois papéis, que dependem de onde está:\n * - dentro de um `Field.Root`, como num grupo de opções (o Base UI põe o `Fieldset.Root` dentro\n *   dele), é o rótulo do grupo: acompanha o `size` do campo, como o rótulo das opções;\n * - fora de um `Field.Root`, é o título de uma seção de campos, com a tipografia dos títulos.\n *\n * Ele lê as variáveis do `Field.Root` com a tipografia do título como fallback: sem `Field.Root`,\n * as variáveis não existem.\n */\nexport const FieldsetLegend = (props: FieldsetLegendProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseFieldset.Legend\n      data-component=\"Fieldset.Legend\"\n      className={mergeStateClassNames(\n        [\n          // Tamanho e linha vêm do `size` do `Field.Root` em volta (ver `fieldRootVariants`); sem\n          // ele, caem na tipografia do título.\n          'text-(length:--field-label-size,var(--text-base))',\n          'leading-(--field-label-leading,--spacing(6))',\n          'font-medium',\n          'text-gray-12',\n          'text-balance',\n\n          'data-disabled:opacity-50',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nFieldsetLegend.displayName = 'Fieldset.Legend';\n"],"mappings":";;;;;;;;;;;;;;;;AAmBA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,SAAa,QAAd;EACE,kBAAe;EACf,WAAW,qBACT;GAGE;GACA;GACA;GACA;GACA;GAEA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}

package/dist/components/fields/input/input-variants.d.ts

@@ -32,7 +32,7 @@ export declare const inputDefaultVariants: Required<InputVariants>;
  * que só casa depois de o usuário mexer no campo ou tentar enviar.
  */
 export declare const inputVariants: (props?: ({
-  variant?: "outline" | "subtle" | null | undefined;
+  variant?: "subtle" | "outline" | null | undefined;
   size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

package/dist/components/fields/number-input/number-input-variants.d.ts

@@ -24,7 +24,7 @@ export declare const numberInputDefaultVariants: Required<NumberInputVariants>;
  *   tecla nem quando o separador de milhar entra.
  */
 export declare const numberInputVariants: (props?: ({
-  variant?: "outline" | "subtle" | null | undefined;
+  variant?: "subtle" | "outline" | null | undefined;
   size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

package/dist/components/fields/pattern-input/pattern-input-variants.d.ts

@@ -24,7 +24,7 @@ export declare const patternInputDefaultVariants: Required<PatternInputVariants>
  *   literais): o texto não se mexe quando uma posição vazia é preenchida.
  */
 export declare const patternInputVariants: (props?: ({
-  variant?: "outline" | "subtle" | null | undefined;
+  variant?: "subtle" | "outline" | null | undefined;
   size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

package/dist/components/fields/textarea/textarea-variants.d.ts

@@ -31,7 +31,7 @@ export declare const textareaDefaultVariants: Required<TextareaVariants>;
  *   a borda. Arrastando a alça, o campo não encolhe a ponto de cortar o texto.
  */
 export declare const textareaVariants: (props?: ({
-  variant?: "outline" | "subtle" | null | undefined;
+  variant?: "subtle" | "outline" | null | undefined;
   size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

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

@@ -76,7 +76,7 @@ const textareaVariants = cva([
 			],
 			xs: [
 				"px-2",
-				"[--textarea-py:--spacing(1.5)]",
+				"[--textarea-py:--spacing(2)]",
 				"text-xs",
 				"any-pointer-coarse:text-base"
 			],
@@ -99,7 +99,7 @@ const textareaVariants = cva([
 			],
 			xl: [
 				"px-4.5",
-				"[--textarea-py:--spacing(3.5)]",
+				"[--textarea-py:--spacing(4)]",
 				"text-base"
 			],
 			"2xl": [

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-9/90',\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    'user-invalid:border-red-9',\n    'user-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(1.5)]',\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(3.5)]',\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;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-9/90',\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    'user-invalid:border-red-9',\n    'user-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;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;IACP;IACA;IAEA;GACF;GACA,QAAQ,CACN,aAEA,oBACF;EACF;EACA,MAAM;GACJ,OAAO;IACL;IACA;IAEA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;GACF;GACA,OAAO;IACL;IACA;IAEA;GACF;EACF;CACF;CACA,iBAAiB;EACf,MAAM,wBAAwB;EAC9B,SAAS,wBAAwB;CACnC;AACF,CACF"}

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

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

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

@@ -13,7 +13,7 @@ export declare const floatDefaultVariants: Required<FloatVariants>;
  * de sinal (`rtl:`), para o elemento continuar metade dentro e metade fora do canto.
  */
 export declare const floatVariants: (props?: ({
-  placement?: "bottom-start" | "bottom-end" | "top-start" | "top-center" | "top-end" | "middle-start" | "middle-center" | "middle-end" | "bottom-center" | null | undefined;
+  placement?: "top-start" | "top-center" | "top-end" | "middle-start" | "middle-center" | "middle-end" | "bottom-start" | "bottom-center" | "bottom-end" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=float-variants.d.ts.map

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

@@ -22,7 +22,7 @@ export type ScrollAreaViewportVariants = {
  * já aparecer antes da primeira medição, quando ainda há conteúdo abaixo.
  */
 export declare const scrollAreaViewportVariants: (props?: ({
-  fade?: "vertical" | "horizontal" | "both" | null | undefined;
+  fade?: "both" | "horizontal" | "vertical" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=scroll-area-viewport-variants.d.ts.map

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

@@ -4,7 +4,7 @@
  * e cor do texto estão explicados. As diferenças:
  * - posição própria, `fixed` no rodapé, sem positioner, e sem teto de altura nem animação de
  *   tamanho;
- * - ações em linha (`items-center`, `gap-3`), padding próprio, `rounded-lg` e `shadow-lg`;
+ * - ações em linha (`items-center`, `gap-3`), padding próprio, `rounded-md` e `shadow-lg`;
  * - entra subindo (`translate-y-4`), e não crescendo a partir de um trigger.
  *
  * A distância das bordas da tela fica em `--action-bar-offset`, somada à área segura do celular
@@ -14,7 +14,7 @@
  * Tailwind os dois eixos compõem a mesma propriedade `translate`, então um não anula o outro.
  */
 export declare const actionBarPopupVariants: (props?: ({
-  placement?: "bottom" | "bottom-start" | "bottom-end" | null | undefined;
+  placement?: "bottom-start" | "bottom-end" | "bottom" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=action-bar-popup-variants.d.ts.map

package/dist/components/overlays/action-bar/action-bar-popup-variants.js

@@ -6,7 +6,7 @@ import { cva } from "class-variance-authority";
 * e cor do texto estão explicados. As diferenças:
 * - posição própria, `fixed` no rodapé, sem positioner, e sem teto de altura nem animação de
 *   tamanho;
-* - ações em linha (`items-center`, `gap-3`), padding próprio, `rounded-lg` e `shadow-lg`;
+* - ações em linha (`items-center`, `gap-3`), padding próprio, `rounded-md` e `shadow-lg`;
 * - entra subindo (`translate-y-4`), e não crescendo a partir de um trigger.
 *
 * A distância das bordas da tela fica em `--action-bar-offset`, somada à área segura do celular
@@ -23,9 +23,9 @@ const actionBarPopupVariants = cva([
 	"items-center",
 	"gap-3",
 	"max-w-[calc(100dvw-2*var(--action-bar-offset))]",
-	"px-3",
-	"py-2.5",
-	"rounded-lg",
+	"px-4",
+	"py-2",
+	"rounded-md",
 	"corner-squircle",
 	"outline-1",
 	"outline-gray-6",