@lucasbernardosn/react-ui 0.1.0 → 0.3.0

package/dist/components/display/card/card-description.js

@@ -2,19 +2,18 @@ import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
 import { mergeProps, useRender } from "@base-ui/react";
 //#region src/components/display/card/card-description.tsx
 /**
-* Texto de apoio do card, abaixo do título, no tamanho e na entrelinha do `size` do `Card.Root`
-* mais próximo; fora de um card, fica no tamanho do `sm`.
+* Texto de apoio do card, abaixo do título, em tamanho fixo.
 *
-* Origem da descrição na escala: o `Dialog.Description` copia estas classes (tabela no README de `display`). Uma
-* mudança aqui vale para a cópia na mesma rodada.
+* O `Dialog.Description` copia estas classes (tabela no README de `display`). Uma mudança aqui vale
+* para a cópia na mesma rodada.
 */
 const CardDescription = (props) => {
 	const { render, className, ...rest } = props;
 	const baseProps = {
 		"data-component": "Card.Description",
 		className: mergeTwClassNames([
-			"text-(length:--card-description-size,var(--text-sm))",
-			"leading-(--card-description-leading,--spacing(5))",
+			"text-sm",
+			"leading-5",
 			"text-gray-11",
 			"text-pretty"
 		], className)

package/dist/components/display/card/card-description.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-description.js","names":[],"sources":["../../../../src/components/display/card/card-description.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type CardDescriptionProps = useRender.ComponentProps<'p'>;\n\n/**\n * Texto de apoio do card, abaixo do título, no tamanho e na entrelinha do `size` do `Card.Root`\n * mais próximo; fora de um card, fica no tamanho do `sm`.\n *\n * Origem da descrição na escala: o `Dialog.Description` copia estas classes (tabela no README de `display`). Uma\n * mudança aqui vale para a cópia na mesma rodada.\n */\nexport const CardDescription = (props: CardDescriptionProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Card.Description',\n    className: mergeTwClassNames(\n      [\n        'text-(length:--card-description-size,var(--text-sm))',\n        'leading-(--card-description-leading,--spacing(5))',\n        'text-gray-11',\n        'text-pretty',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'p',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCardDescription.displayName = 'Card.Description';\n"],"mappings":";;;;;;;;;;AAYA,MAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,gBAAgB,cAAc"}
+{"version":3,"file":"card-description.js","names":[],"sources":["../../../../src/components/display/card/card-description.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type CardDescriptionProps = useRender.ComponentProps<'p'>;\n\n/**\n * Texto de apoio do card, abaixo do título, em tamanho fixo.\n *\n * O `Dialog.Description` copia estas classes (tabela no README de `display`). Uma mudança aqui vale\n * para a cópia na mesma rodada.\n */\nexport const CardDescription = (props: CardDescriptionProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Card.Description',\n    className: mergeTwClassNames(\n      ['text-sm', 'leading-5', 'text-gray-11', 'text-pretty'],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'p',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCardDescription.displayName = 'Card.Description';\n"],"mappings":";;;;;;;;;AAWA,MAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GAAC;GAAW;GAAa;GAAgB;EAAa,GACtD,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,gBAAgB,cAAc"}

package/dist/components/display/card/card-header.d.ts

@@ -4,8 +4,8 @@ export type CardHeaderProps = useRender.ComponentProps<'div'>;
 /**
  * Topo do card, onde ficam título e descrição.
  *
- * Origem do cabeçalho com a escala de título e descrição: o `Dialog.Header` copia estas classes (tabela no README de `display`). Uma
- * mudança aqui vale para a cópia na mesma rodada.
+ * O `Dialog.Header` copia estas classes (tabela no README de `display`). Uma mudança aqui vale para a
+ * cópia na mesma rodada.
  */
 export declare const CardHeader: {
   (props: CardHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/display/card/card-header.js

@@ -4,8 +4,8 @@ import { mergeProps, useRender } from "@base-ui/react";
 /**
 * Topo do card, onde ficam título e descrição.
 *
-* Origem do cabeçalho com a escala de título e descrição: o `Dialog.Header` copia estas classes (tabela no README de `display`). Uma
-* mudança aqui vale para a cópia na mesma rodada.
+* O `Dialog.Header` copia estas classes (tabela no README de `display`). Uma mudança aqui vale para a
+* cópia na mesma rodada.
 */
 const CardHeader = (props) => {
 	const { render, className, ...rest } = props;
@@ -14,7 +14,7 @@ const CardHeader = (props) => {
 		className: mergeTwClassNames([
 			"flex",
 			"flex-col",
-			"gap-(--card-header-gap,--spacing(0.5))",
+			"gap-0.5",
 			"px-(--card-padding)",
 			"pt-(--card-padding)",
 			"last:pb-(--card-padding)"

package/dist/components/display/card/card-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-header.js","names":[],"sources":["../../../../src/components/display/card/card-header.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type CardHeaderProps = useRender.ComponentProps<'div'>;\n\n/**\n * Topo do card, onde ficam título e descrição.\n *\n * Origem do cabeçalho com a escala de título e descrição: o `Dialog.Header` copia estas classes (tabela no README de `display`). Uma\n * mudança aqui vale para a cópia na mesma rodada.\n */\nexport const CardHeader = (props: CardHeaderProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Card.Header',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'flex-col',\n        'gap-(--card-header-gap,--spacing(0.5))',\n\n        'px-(--card-padding)',\n        'pt-(--card-padding)',\n        // Sem `Body` nem `Footer` depois, fecha o respiro do card embaixo.\n        'last:pb-(--card-padding)',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCardHeader.displayName = 'Card.Header';\n"],"mappings":";;;;;;;;;AAWA,MAAa,cAAc,UAA2B;CACpD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GAEA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,WAAW,cAAc"}
+{"version":3,"file":"card-header.js","names":[],"sources":["../../../../src/components/display/card/card-header.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type CardHeaderProps = useRender.ComponentProps<'div'>;\n\n/**\n * Topo do card, onde ficam título e descrição.\n *\n * O `Dialog.Header` copia estas classes (tabela no README de `display`). Uma mudança aqui vale para a\n * cópia na mesma rodada.\n */\nexport const CardHeader = (props: CardHeaderProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Card.Header',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'flex-col',\n        'gap-0.5',\n\n        'px-(--card-padding)',\n        'pt-(--card-padding)',\n        // Sem `Body` nem `Footer` depois, fecha o respiro do card embaixo.\n        'last:pb-(--card-padding)',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCardHeader.displayName = 'Card.Header';\n"],"mappings":";;;;;;;;;AAWA,MAAa,cAAc,UAA2B;CACpD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GAEA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,WAAW,cAAc"}

package/dist/components/display/card/card-root-variants.d.ts

@@ -1,12 +1,5 @@
 //#region src/components/display/card/card-root-variants.d.ts
 export type CardVariants = {
-  /**
-   * Respiro interno das partes e tipografia do cabeçalho: tamanho e entrelinha do título e da
-   * descrição, e o espaço entre os dois.
-   *
-   * @default 'sm'
-   */
-  size?: 'xs' | 'sm' | 'md' | 'lg';
   /**
    * Fundo, borda e sombra do card.
    *
@@ -16,18 +9,11 @@ export type CardVariants = {
 };
 export declare const cardDefaultVariants: Required<CardVariants>;
 /**
- * O `size` só declara CSS variables, e as partes as leem:
- * - `--card-padding`: o respiro de Header, Body e Footer;
- * - `--card-title-size` e `--card-title-leading`: o Title;
- * - `--card-description-size` e `--card-description-leading`: a Description;
- * - `--card-header-gap`: o espaço entre título e descrição no Header.
- *
- * Assim as partes não precisam de contexto, e um card aninhado redeclara as variáveis para o que
- * está dentro dele.
+ * O respiro de Header, Body e Footer fica em `--card-padding`, fixo em 16px: as partes leem a
+ * variável, e um card aninhado a redeclara para o que está dentro dele.
  */
 export declare const cardRootVariants: (props?: ({
-  size?: "xs" | "sm" | "md" | "lg" | null | undefined;
-  variant?: "outline" | "subtle" | "elevated" | null | undefined;
+  variant?: "subtle" | "outline" | "elevated" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=card-root-variants.d.ts.map

package/dist/components/display/card/card-root-variants.js

@@ -1,91 +1,44 @@
 import { cva } from "class-variance-authority";
 //#region src/components/display/card/card-root-variants.ts
-const cardDefaultVariants = {
-	size: "sm",
-	variant: "outline"
-};
+const cardDefaultVariants = { variant: "outline" };
 /**
-* O `size` só declara CSS variables, e as partes as leem:
-* - `--card-padding`: o respiro de Header, Body e Footer;
-* - `--card-title-size` e `--card-title-leading`: o Title;
-* - `--card-description-size` e `--card-description-leading`: a Description;
-* - `--card-header-gap`: o espaço entre título e descrição no Header.
-*
-* Assim as partes não precisam de contexto, e um card aninhado redeclara as variáveis para o que
-* está dentro dele.
+* O respiro de Header, Body e Footer fica em `--card-padding`, fixo em 16px: as partes leem a
+* variável, e um card aninhado a redeclara para o que está dentro dele.
 */
 const cardRootVariants = cva([
+	"[--card-padding:--spacing(4)]",
 	"relative",
 	"flex",
 	"flex-col",
 	"min-w-0",
-	"rounded-xl",
+	"rounded-md",
 	"corner-squircle",
 	"text-gray-12",
 	"text-start",
 	"wrap-break-word"
 ], {
-	variants: {
-		size: {
-			xs: [
-				"[--card-padding:--spacing(4)]",
-				"[--card-title-size:var(--text-base)]",
-				"[--card-title-leading:--spacing(5)]",
-				"[--card-description-size:var(--text-xs)]",
-				"[--card-description-leading:--spacing(4)]",
-				"[--card-header-gap:--spacing(0.5)]"
-			],
-			sm: [
-				"[--card-padding:--spacing(6)]",
-				"[--card-title-size:var(--text-lg)]",
-				"[--card-title-leading:--spacing(6)]",
-				"[--card-description-size:var(--text-sm)]",
-				"[--card-description-leading:--spacing(5)]",
-				"[--card-header-gap:--spacing(0.5)]"
-			],
-			md: [
-				"[--card-padding:--spacing(7)]",
-				"[--card-title-size:var(--text-xl)]",
-				"[--card-title-leading:--spacing(7)]",
-				"[--card-description-size:var(--text-base)]",
-				"[--card-description-leading:--spacing(6)]",
-				"[--card-header-gap:--spacing(1)]"
-			],
-			lg: [
-				"[--card-padding:--spacing(8)]",
-				"[--card-title-size:var(--text-2xl)]",
-				"[--card-title-leading:--spacing(8)]",
-				"[--card-description-size:var(--text-lg)]",
-				"[--card-description-leading:--spacing(7)]",
-				"[--card-header-gap:--spacing(1)]"
-			]
-		},
-		variant: {
-			elevated: [
-				"border",
-				"border-transparent",
-				"bg-white",
-				"dark:bg-gray-2",
-				"shadow-md"
-			],
-			outline: [
-				"border",
-				"border-gray-6",
-				"bg-white",
-				"dark:bg-gray-1"
-			],
-			subtle: [
-				"border",
-				"border-transparent",
-				"bg-gray-3",
-				"dark:bg-gray-3"
-			]
-		}
-	},
-	defaultVariants: {
-		size: cardDefaultVariants.size,
-		variant: cardDefaultVariants.variant
-	}
+	variants: { variant: {
+		elevated: [
+			"border",
+			"border-transparent",
+			"bg-white",
+			"dark:bg-gray-2",
+			"shadow-md"
+		],
+		outline: [
+			"border",
+			"border-gray-6",
+			"bg-white",
+			"dark:bg-gray-1"
+		],
+		subtle: [
+			"border",
+			"border-transparent",
+			"bg-gray-3",
+			"dark:bg-gray-3"
+		]
+	} },
+	defaultVariants: { variant: cardDefaultVariants.variant }
 });
 //#endregion
 export { cardDefaultVariants, cardRootVariants };

package/dist/components/display/card/card-root-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-root-variants.js","names":[],"sources":["../../../../src/components/display/card/card-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type CardVariants = {\n  /**\n   * Respiro interno das partes e tipografia do cabeçalho: tamanho e entrelinha do título e da\n   * descrição, e o espaço entre os dois.\n   *\n   * @default 'sm'\n   */\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n  /**\n   * Fundo, borda e sombra do card.\n   *\n   * @default 'outline'\n   */\n  variant?: 'elevated' | 'outline' | 'subtle';\n};\n\nexport const cardDefaultVariants: Required<CardVariants> = {\n  size: 'sm',\n  variant: 'outline',\n};\n\n/**\n * O `size` só declara CSS variables, e as partes as leem:\n * - `--card-padding`: o respiro de Header, Body e Footer;\n * - `--card-title-size` e `--card-title-leading`: o Title;\n * - `--card-description-size` e `--card-description-leading`: a Description;\n * - `--card-header-gap`: o espaço entre título e descrição no Header.\n *\n * Assim as partes não precisam de contexto, e um card aninhado redeclara as variáveis para o que\n * está dentro dele.\n */\nexport const cardRootVariants = cva(\n  [\n    'relative',\n\n    'flex',\n    'flex-col',\n\n    'min-w-0',\n\n    'rounded-xl',\n    'corner-squircle',\n\n    'text-gray-12',\n    'text-start',\n    'wrap-break-word',\n  ],\n  {\n    variants: {\n      size: {\n        xs: [\n          '[--card-padding:--spacing(4)]',\n          '[--card-title-size:var(--text-base)]',\n          '[--card-title-leading:--spacing(5)]',\n          '[--card-description-size:var(--text-xs)]',\n          '[--card-description-leading:--spacing(4)]',\n          '[--card-header-gap:--spacing(0.5)]',\n        ],\n        sm: [\n          '[--card-padding:--spacing(6)]',\n          '[--card-title-size:var(--text-lg)]',\n          '[--card-title-leading:--spacing(6)]',\n          '[--card-description-size:var(--text-sm)]',\n          '[--card-description-leading:--spacing(5)]',\n          '[--card-header-gap:--spacing(0.5)]',\n        ],\n        md: [\n          '[--card-padding:--spacing(7)]',\n          '[--card-title-size:var(--text-xl)]',\n          '[--card-title-leading:--spacing(7)]',\n          '[--card-description-size:var(--text-base)]',\n          '[--card-description-leading:--spacing(6)]',\n          '[--card-header-gap:--spacing(1)]',\n        ],\n        lg: [\n          '[--card-padding:--spacing(8)]',\n          '[--card-title-size:var(--text-2xl)]',\n          '[--card-title-leading:--spacing(8)]',\n          '[--card-description-size:var(--text-lg)]',\n          '[--card-description-leading:--spacing(7)]',\n          '[--card-header-gap:--spacing(1)]',\n        ],\n      },\n      variant: {\n        elevated: [\n          'border',\n          'border-transparent',\n\n          'bg-white',\n          'dark:bg-gray-2',\n\n          'shadow-md',\n        ],\n        outline: [\n          'border',\n          'border-gray-6',\n\n          'bg-white',\n          'dark:bg-gray-1',\n        ],\n        subtle: [\n          'border',\n          'border-transparent',\n\n          'bg-gray-3',\n          'dark:bg-gray-3',\n        ],\n      },\n    },\n    defaultVariants: {\n      size: cardDefaultVariants.size,\n      variant: cardDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAkBA,MAAa,sBAA8C;CACzD,MAAM;CACN,SAAS;AACX;;;;;;;;;;;AAYA,MAAa,mBAAmB,IAC9B;CACE;CAEA;CACA;CAEA;CAEA;CACA;CAEA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,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;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,SAAS;GACP,UAAU;IACR;IACA;IAEA;IACA;IAEA;GACF;GACA,SAAS;IACP;IACA;IAEA;IACA;GACF;GACA,QAAQ;IACN;IACA;IAEA;IACA;GACF;EACF;CACF;CACA,iBAAiB;EACf,MAAM,oBAAoB;EAC1B,SAAS,oBAAoB;CAC/B;AACF,CACF"}
+{"version":3,"file":"card-root-variants.js","names":[],"sources":["../../../../src/components/display/card/card-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type CardVariants = {\n  /**\n   * Fundo, borda e sombra do card.\n   *\n   * @default 'outline'\n   */\n  variant?: 'elevated' | 'outline' | 'subtle';\n};\n\nexport const cardDefaultVariants: Required<CardVariants> = {\n  variant: 'outline',\n};\n\n/**\n * O respiro de Header, Body e Footer fica em `--card-padding`, fixo em 16px: as partes leem a\n * variável, e um card aninhado a redeclara para o que está dentro dele.\n */\nexport const cardRootVariants = cva(\n  [\n    '[--card-padding:--spacing(4)]',\n\n    'relative',\n\n    'flex',\n    'flex-col',\n\n    'min-w-0',\n\n    'rounded-md',\n    'corner-squircle',\n\n    'text-gray-12',\n    'text-start',\n    'wrap-break-word',\n  ],\n  {\n    variants: {\n      variant: {\n        elevated: [\n          'border',\n          'border-transparent',\n\n          'bg-white',\n          'dark:bg-gray-2',\n\n          'shadow-md',\n        ],\n        outline: [\n          'border',\n          'border-gray-6',\n\n          'bg-white',\n          'dark:bg-gray-1',\n        ],\n        subtle: [\n          'border',\n          'border-transparent',\n\n          'bg-gray-3',\n          'dark:bg-gray-3',\n        ],\n      },\n    },\n    defaultVariants: {\n      variant: cardDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAWA,MAAa,sBAA8C,EACzD,SAAS,UACX;;;;;AAMA,MAAa,mBAAmB,IAC9B;CACE;CAEA;CAEA;CACA;CAEA;CAEA;CACA;CAEA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,SAAS;EACP,UAAU;GACR;GACA;GAEA;GACA;GAEA;EACF;EACA,SAAS;GACP;GACA;GAEA;GACA;EACF;EACA,QAAQ;GACN;GACA;GAEA;GACA;EACF;CACF,EACF;CACA,iBAAiB,EACf,SAAS,oBAAoB,QAC/B;AACF,CACF"}

package/dist/components/display/card/card-root.d.ts

@@ -1,5 +1,5 @@
 import { CardVariants } from "./card-root-variants.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { useRender } from "@base-ui/react";
 //#region src/components/display/card/card-root.d.ts
 export type CardRootProps = MergeOverride<useRender.ComponentProps<'div'>, CardVariants>;

package/dist/components/display/card/card-root.js

@@ -1,6 +1,6 @@
 import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
 import { cardRootVariants } from "./card-root-variants.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { mergeProps, useRender } from "@base-ui/react";
 //#region src/components/display/card/card-root.tsx
 const splitVariantProps = createSplitProps();
@@ -20,7 +20,7 @@ const splitVariantProps = createSplitProps();
 * ```
 */
 const CardRoot = (props) => {
-	const [variantProps, elementProps] = splitVariantProps(props, ["size", "variant"]);
+	const [variantProps, elementProps] = splitVariantProps(props, ["variant"]);
 	const { render, className, ...rest } = elementProps;
 	const baseProps = {
 		"data-component": "Card.Root",

package/dist/components/display/card/card-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-root.js","names":[],"sources":["../../../../src/components/display/card/card-root.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\nimport { type CardVariants, cardRootVariants } from './card-root-variants';\n\nexport type CardRootProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  CardVariants\n>;\n\nconst splitVariantProps = createSplitProps<CardVariants>();\n\n/**\n * Contêiner que agrupa conteúdo e ações sobre um mesmo assunto.\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Plano Pro</Card.Title>\n *     <Card.Description>Cobrança mensal</Card.Description>\n *   </Card.Header>\n *   <Card.Body>…</Card.Body>\n *   <Card.Footer>…</Card.Footer>\n * </Card.Root>\n * ```\n */\nexport const CardRoot = (props: CardRootProps) => {\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': 'Card.Root',\n    className: mergeTwClassNames(cardRootVariants(variantProps), className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCardRoot.displayName = 'Card.Root';\n"],"mappings":";;;;;AAUA,MAAM,oBAAoB,iBAA+B;;;;;;;;;;;;;;;;AAiBzD,MAAa,YAAY,UAAyB;CAChD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,QACA,SACF,CAAC;CAED,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,iBAAiB,YAAY,GAAG,SAAS;CACxE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,SAAS,cAAc"}
+{"version":3,"file":"card-root.js","names":[],"sources":["../../../../src/components/display/card/card-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 { type CardVariants, cardRootVariants } from './card-root-variants';\n\nexport type CardRootProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  CardVariants\n>;\n\nconst splitVariantProps = createSplitProps<CardVariants>();\n\n/**\n * Contêiner que agrupa conteúdo e ações sobre um mesmo assunto.\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Plano Pro</Card.Title>\n *     <Card.Description>Cobrança mensal</Card.Description>\n *   </Card.Header>\n *   <Card.Body>…</Card.Body>\n *   <Card.Footer>…</Card.Footer>\n * </Card.Root>\n * ```\n */\nexport const CardRoot = (props: CardRootProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['variant']);\n\n  const { render, className, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'Card.Root',\n    className: mergeTwClassNames(cardRootVariants(variantProps), className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCardRoot.displayName = 'Card.Root';\n"],"mappings":";;;;;AAaA,MAAM,oBAAoB,iBAA+B;;;;;;;;;;;;;;;;AAiBzD,MAAa,YAAY,UAAyB;CAChD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,SAAS,CAAC;CAEzE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,iBAAiB,YAAY,GAAG,SAAS;CACxE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,SAAS,cAAc"}

package/dist/components/display/card/card-title.d.ts

@@ -1,21 +1,20 @@
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { useRender } from "@base-ui/react";
 //#region src/components/display/card/card-title.d.ts
 export type CardTitleProps = 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 `Card.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. Com `render`, a tag
+   * do `render` prevalece.
    *
    * @default 3
    */
   level?: 1 | 2 | 3 | 4 | 5 | 6;
 }>;
 /**
- * Título do card, no tamanho e na entrelinha do `size` do `Card.Root` mais próximo (pelas CSS
- * variables que ele declara); fora de um card, fica no tamanho do `sm`.
+ * Título do card, em tamanho fixo.
  *
- * Origem do título na escala: o `Dialog.Title` copia estas classes (tabela no README de `display`). Uma
- * mudança aqui vale para a cópia na mesma rodada.
+ * O `Dialog.Title` copia estas classes (tabela no README de `display`). Uma mudança aqui vale para a
+ * cópia na mesma rodada.
  */
 export declare const CardTitle: {
   (props: CardTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/display/card/card-title.js

@@ -2,20 +2,19 @@ import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
 import { mergeProps, useRender } from "@base-ui/react";
 //#region src/components/display/card/card-title.tsx
 /**
-* Título do card, no tamanho e na entrelinha do `size` do `Card.Root` mais próximo (pelas CSS
-* variables que ele declara); fora de um card, fica no tamanho do `sm`.
+* Título do card, em tamanho fixo.
 *
-* Origem do título na escala: o `Dialog.Title` copia estas classes (tabela no README de `display`). Uma
-* mudança aqui vale para a cópia na mesma rodada.
+* O `Dialog.Title` copia estas classes (tabela no README de `display`). Uma mudança aqui vale para a
+* cópia na mesma rodada.
 */
 const CardTitle = (props) => {
 	const { level = 3, render, className, ...rest } = props;
 	const baseProps = {
 		"data-component": "Card.Title",
 		className: mergeTwClassNames([
-			"text-(length:--card-title-size,var(--text-lg))",
-			"leading-(--card-title-leading,--spacing(6))",
-			"font-semibold",
+			"text-base",
+			"leading-6",
+			"font-medium",
 			"text-gray-12",
 			"text-balance"
 		], className)

package/dist/components/display/card/card-title.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-title.js","names":[],"sources":["../../../../src/components/display/card/card-title.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\n\nexport type CardTitleProps = 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 `Card.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 card, no tamanho e na entrelinha do `size` do `Card.Root` mais próximo (pelas CSS\n * variables que ele declara); fora de um card, fica no tamanho do `sm`.\n *\n * Origem do título na escala: o `Dialog.Title` copia estas classes (tabela no README de `display`). Uma\n * mudança aqui vale para a cópia na mesma rodada.\n */\nexport const CardTitle = (props: CardTitleProps) => {\n  const { level = 3, render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Card.Title',\n    className: mergeTwClassNames(\n      [\n        'text-(length:--card-title-size,var(--text-lg))',\n        'leading-(--card-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\nCardTitle.displayName = 'Card.Title';\n"],"mappings":";;;;;;;;;;AAwBA,MAAa,aAAa,UAA0B;CAClD,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,UAAU,cAAc"}
+{"version":3,"file":"card-title.js","names":[],"sources":["../../../../src/components/display/card/card-title.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport type { MergeOverride } from '@lucasbernardosn/ts-utils';\nimport { mergeTwClassNames } from '#utils';\n\nexport type CardTitleProps = 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. Com `render`, a tag\n     * do `render` prevalece.\n     *\n     * @default 3\n     */\n    level?: 1 | 2 | 3 | 4 | 5 | 6;\n  }\n>;\n\n/**\n * Título do card, em tamanho fixo.\n *\n * O `Dialog.Title` copia estas classes (tabela no README de `display`). Uma mudança aqui vale para a\n * cópia na mesma rodada.\n */\nexport const CardTitle = (props: CardTitleProps) => {\n  const { level = 3, render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Card.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\nCardTitle.displayName = 'Card.Title';\n"],"mappings":";;;;;;;;;AAuBA,MAAa,aAAa,UAA0B;CAClD,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,UAAU,cAAc"}

package/dist/components/display/clipboard/clipboard-indicator.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { useRender } from "@base-ui/react";
 //#region src/components/display/clipboard/clipboard-indicator.d.ts
 type IndicatorProps = {

package/dist/components/display/clipboard/clipboard-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"clipboard-indicator.js","names":[],"sources":["../../../../src/components/display/clipboard/clipboard-indicator.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { CheckIcon, ClipboardIcon } from '@phosphor-icons/react';\nimport type React from 'react';\nimport { Icon } from '#components/display/icon';\nimport { mergeTwClassNames } from '#utils';\nimport { useClipboardContext } from './use-clipboard-context';\n\ntype IndicatorProps = {\n  /**\n   * Conteúdo exibido enquanto a cópia está em destaque.\n   *\n   * O destaque dura o tempo definido em `timeout` no `Clipboard.Root`.\n   *\n   * @default <Icon render={<CheckIcon />} />\n   */\n  copied?: React.ReactNode;\n};\n\n/**\n * Props do `Clipboard.Indicator`.\n */\nexport type ClipboardIndicatorProps = MergeOverride<\n  useRender.ComponentProps<'span'>,\n  IndicatorProps\n>;\n\n/**\n * Conteúdo que alterna entre os estados de repouso e de cópia.\n *\n * Renderiza `children` normalmente e `copied` logo após a cópia. Os dois têm\n * ícone padrão, então a forma mais curta de usar é sem nenhuma prop.\n *\n * Renderiza um `span` por padrão para ser válido dentro do\n * `Clipboard.Trigger`, que é um `button`, e sem caixa própria (`contents`): o\n * ícone ou texto de dentro é que ocupa o lugar no layout. Assim, passado como\n * `icon` de um `IconButton`, o tamanho que o `Icon` aplica ao invólucro não\n * encolhe o ícone, que fica centralizado pelo botão.\n */\nexport const ClipboardIndicator = (props: ClipboardIndicatorProps) => {\n  const {\n    render,\n    className,\n    children = <Icon render={<ClipboardIcon />} />,\n    copied = <Icon render={<CheckIcon />} />,\n    ...rest\n  } = props;\n\n  const clipboard = useClipboardContext();\n\n  // O Zag esconde o indicador quando o `copied` informado não bate com o\n  // estado atual. Aqui os dois conteúdos vivem no mesmo elemento, então o\n  // estado real é repassado para que o indicador nunca seja escondido.\n  const zagProps = clipboard.getIndicatorProps({\n    copied: clipboard.copied,\n  });\n\n  const baseProps = {\n    'data-component': 'Clipboard.Indicator',\n    className: mergeTwClassNames(['contents'], className),\n    children: clipboard.copied ? copied : children,\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, zagProps, rest),\n  });\n};\n\nClipboardIndicator.displayName = 'Clipboard.Indicator';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuCA,MAAa,sBAAsB,UAAmC;CACpE,MAAM,EACJ,QACA,WACA,WAAW,oBAAC,MAAD,EAAM,QAAQ,oBAAC,eAAD,CAAgB,CAAA,EAAI,CAAA,GAC7C,SAAS,oBAAC,MAAD,EAAM,QAAQ,oBAAC,WAAD,CAAY,CAAA,EAAI,CAAA,GACvC,GAAG,SACD;CAEJ,MAAM,YAAY,oBAAoB;CAKtC,MAAM,WAAW,UAAU,kBAAkB,EAC3C,QAAQ,UAAU,OACpB,CAAC;CAED,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,UAAU,GAAG,SAAS;EACpD,UAAU,UAAU,SAAS,SAAS;CACxC;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU,IAAI;CAC7C,CAAC;AACH;AAEA,mBAAmB,cAAc"}
+{"version":3,"file":"clipboard-indicator.js","names":[],"sources":["../../../../src/components/display/clipboard/clipboard-indicator.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport type { MergeOverride } from '@lucasbernardosn/ts-utils';\nimport { CheckIcon, ClipboardIcon } from '@phosphor-icons/react';\nimport type React from 'react';\nimport { Icon } from '#components/display/icon';\nimport { mergeTwClassNames } from '#utils';\nimport { useClipboardContext } from './use-clipboard-context';\n\ntype IndicatorProps = {\n  /**\n   * Conteúdo exibido enquanto a cópia está em destaque.\n   *\n   * O destaque dura o tempo definido em `timeout` no `Clipboard.Root`.\n   *\n   * @default <Icon render={<CheckIcon />} />\n   */\n  copied?: React.ReactNode;\n};\n\n/**\n * Props do `Clipboard.Indicator`.\n */\nexport type ClipboardIndicatorProps = MergeOverride<\n  useRender.ComponentProps<'span'>,\n  IndicatorProps\n>;\n\n/**\n * Conteúdo que alterna entre os estados de repouso e de cópia.\n *\n * Renderiza `children` normalmente e `copied` logo após a cópia. Os dois têm\n * ícone padrão, então a forma mais curta de usar é sem nenhuma prop.\n *\n * Renderiza um `span` por padrão para ser válido dentro do\n * `Clipboard.Trigger`, que é um `button`, e sem caixa própria (`contents`): o\n * ícone ou texto de dentro é que ocupa o lugar no layout. Assim, passado como\n * `icon` de um `IconButton`, o tamanho que o `Icon` aplica ao invólucro não\n * encolhe o ícone, que fica centralizado pelo botão.\n */\nexport const ClipboardIndicator = (props: ClipboardIndicatorProps) => {\n  const {\n    render,\n    className,\n    children = <Icon render={<ClipboardIcon />} />,\n    copied = <Icon render={<CheckIcon />} />,\n    ...rest\n  } = props;\n\n  const clipboard = useClipboardContext();\n\n  // O Zag esconde o indicador quando o `copied` informado não bate com o\n  // estado atual. Aqui os dois conteúdos vivem no mesmo elemento, então o\n  // estado real é repassado para que o indicador nunca seja escondido.\n  const zagProps = clipboard.getIndicatorProps({\n    copied: clipboard.copied,\n  });\n\n  const baseProps = {\n    'data-component': 'Clipboard.Indicator',\n    className: mergeTwClassNames(['contents'], className),\n    children: clipboard.copied ? copied : children,\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, zagProps, rest),\n  });\n};\n\nClipboardIndicator.displayName = 'Clipboard.Indicator';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuCA,MAAa,sBAAsB,UAAmC;CACpE,MAAM,EACJ,QACA,WACA,WAAW,oBAAC,MAAD,EAAM,QAAQ,oBAAC,eAAD,CAAgB,CAAA,EAAI,CAAA,GAC7C,SAAS,oBAAC,MAAD,EAAM,QAAQ,oBAAC,WAAD,CAAY,CAAA,EAAI,CAAA,GACvC,GAAG,SACD;CAEJ,MAAM,YAAY,oBAAoB;CAKtC,MAAM,WAAW,UAAU,kBAAkB,EAC3C,QAAQ,UAAU,OACpB,CAAC;CAED,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,UAAU,GAAG,SAAS;EACpD,UAAU,UAAU,SAAS,SAAS;CACxC;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU,IAAI;CAC7C,CAAC;AACH;AAEA,mBAAmB,cAAc"}

package/dist/components/display/clipboard/clipboard-root-provider.d.ts

@@ -1,5 +1,5 @@
 import { UseClipboardReturn } from "./use-clipboard.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { useRender } from "@base-ui/react";
 //#region src/components/display/clipboard/clipboard-root-provider.d.ts
 type RootProviderProps = {

package/dist/components/display/clipboard/clipboard-root-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"clipboard-root-provider.js","names":[],"sources":["../../../../src/components/display/clipboard/clipboard-root-provider.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\nimport { ClipboardAnnouncer } from './clipboard-announcer';\nimport type { UseClipboardReturn } from './use-clipboard';\nimport { ClipboardContextProvider } from './use-clipboard-context';\n\ntype RootProviderProps = {\n  /**\n   * Instância do Clipboard criada com o hook `useClipboard`.\n   */\n  value: UseClipboardReturn;\n};\n\n/**\n * Props do `Clipboard.RootProvider`: a instância do Clipboard e as props do\n * elemento renderizado.\n */\nexport type ClipboardRootProviderProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  RootProviderProps\n>;\n\n/**\n * Raiz do Clipboard alimentada por uma instância criada fora dela.\n *\n * Recebe em `value` o retorno de `useClipboard`, o que permite ler o estado e\n * comandar a cópia de componentes irmãos — contadores de cópia, botões\n * externos, ou a exibição do valor fora da subárvore. Como o `Root`, anuncia a\n * cópia ao leitor de tela numa região `sr-only` depois dos filhos.\n *\n * @example\n * ```tsx\n * const clipboard = useClipboard({ value: 'https://github.com' });\n *\n * return (\n *   <>\n *     <button onClick={() => clipboard.copy()}>Copiar de fora</button>\n *\n *     <Clipboard.RootProvider value={clipboard}>\n *       <Clipboard.Trigger>\n *         <Clipboard.Indicator />\n *       </Clipboard.Trigger>\n *     </Clipboard.RootProvider>\n *   </>\n * );\n * ```\n */\nexport const ClipboardRootProvider = (props: ClipboardRootProviderProps) => {\n  const { value: clipboard, render, className, children, ...rest } = props;\n\n  const zagProps = clipboard.getRootProps();\n\n  const baseProps = {\n    'data-component': 'Clipboard.RootProvider',\n    className: mergeTwClassNames([], className),\n    children: (\n      <>\n        {children}\n        <ClipboardAnnouncer />\n      </>\n    ),\n  };\n\n  return (\n    <ClipboardContextProvider value={clipboard}>\n      {useRender({\n        render,\n        defaultTagName: 'div',\n        props: mergeProps(baseProps, zagProps, rest),\n      })}\n    </ClipboardContextProvider>\n  );\n};\n\nClipboardRootProvider.displayName = 'Clipboard.RootProvider';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDA,MAAa,yBAAyB,UAAsC;CAC1E,MAAM,EAAE,OAAO,WAAW,QAAQ,WAAW,UAAU,GAAG,SAAS;CAEnE,MAAM,WAAW,UAAU,aAAa;CAExC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,GAAG,SAAS;EAC1C,UACE,qBAAA,UAAA,EAAA,UAAA,CACG,UACD,oBAAC,oBAAD,CAAqB,CAAA,CACrB,EAAA,CAAA;CAEN;CAEA,OACE,oBAAC,0BAAD;EAA0B,OAAO;EAC9B,UAAA,UAAU;GACT;GACA,gBAAgB;GAChB,OAAO,WAAW,WAAW,UAAU,IAAI;EAC7C,CAAC;CACuB,CAAA;AAE9B;AAEA,sBAAsB,cAAc"}
+{"version":3,"file":"clipboard-root-provider.js","names":[],"sources":["../../../../src/components/display/clipboard/clipboard-root-provider.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport type { MergeOverride } from '@lucasbernardosn/ts-utils';\nimport { mergeTwClassNames } from '#utils';\nimport { ClipboardAnnouncer } from './clipboard-announcer';\nimport type { UseClipboardReturn } from './use-clipboard';\nimport { ClipboardContextProvider } from './use-clipboard-context';\n\ntype RootProviderProps = {\n  /**\n   * Instância do Clipboard criada com o hook `useClipboard`.\n   */\n  value: UseClipboardReturn;\n};\n\n/**\n * Props do `Clipboard.RootProvider`: a instância do Clipboard e as props do\n * elemento renderizado.\n */\nexport type ClipboardRootProviderProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  RootProviderProps\n>;\n\n/**\n * Raiz do Clipboard alimentada por uma instância criada fora dela.\n *\n * Recebe em `value` o retorno de `useClipboard`, o que permite ler o estado e\n * comandar a cópia de componentes irmãos — contadores de cópia, botões\n * externos, ou a exibição do valor fora da subárvore. Como o `Root`, anuncia a\n * cópia ao leitor de tela numa região `sr-only` depois dos filhos.\n *\n * @example\n * ```tsx\n * const clipboard = useClipboard({ value: 'https://github.com' });\n *\n * return (\n *   <>\n *     <button onClick={() => clipboard.copy()}>Copiar de fora</button>\n *\n *     <Clipboard.RootProvider value={clipboard}>\n *       <Clipboard.Trigger>\n *         <Clipboard.Indicator />\n *       </Clipboard.Trigger>\n *     </Clipboard.RootProvider>\n *   </>\n * );\n * ```\n */\nexport const ClipboardRootProvider = (props: ClipboardRootProviderProps) => {\n  const { value: clipboard, render, className, children, ...rest } = props;\n\n  const zagProps = clipboard.getRootProps();\n\n  const baseProps = {\n    'data-component': 'Clipboard.RootProvider',\n    className: mergeTwClassNames([], className),\n    children: (\n      <>\n        {children}\n        <ClipboardAnnouncer />\n      </>\n    ),\n  };\n\n  return (\n    <ClipboardContextProvider value={clipboard}>\n      {useRender({\n        render,\n        defaultTagName: 'div',\n        props: mergeProps(baseProps, zagProps, rest),\n      })}\n    </ClipboardContextProvider>\n  );\n};\n\nClipboardRootProvider.displayName = 'Clipboard.RootProvider';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDA,MAAa,yBAAyB,UAAsC;CAC1E,MAAM,EAAE,OAAO,WAAW,QAAQ,WAAW,UAAU,GAAG,SAAS;CAEnE,MAAM,WAAW,UAAU,aAAa;CAExC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,GAAG,SAAS;EAC1C,UACE,qBAAA,UAAA,EAAA,UAAA,CACG,UACD,oBAAC,oBAAD,CAAqB,CAAA,CACrB,EAAA,CAAA;CAEN;CAEA,OACE,oBAAC,0BAAD;EAA0B,OAAO;EAC9B,UAAA,UAAU;GACT;GACA,gBAAgB;GAChB,OAAO,WAAW,WAAW,UAAU,IAAI;EAC7C,CAAC;CACuB,CAAA;AAE9B;AAEA,sBAAsB,cAAc"}

package/dist/components/display/clipboard/clipboard-root.d.ts

@@ -1,5 +1,5 @@
 import { UseClipboardProps } from "./use-clipboard.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { useRender } from "@base-ui/react";
 //#region src/components/display/clipboard/clipboard-root.d.ts
 /**

package/dist/components/display/clipboard/clipboard-root.js

@@ -2,7 +2,7 @@ import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
 import { ClipboardContextProvider } from "./use-clipboard-context.js";
 import { ClipboardAnnouncer } from "./clipboard-announcer.js";
 import { useClipboard } from "./use-clipboard.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { mergeProps, useRender } from "@base-ui/react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as ZagClipboard from "@zag-js/clipboard";

package/dist/components/display/clipboard/clipboard-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"clipboard-root.js","names":[],"sources":["../../../../src/components/display/clipboard/clipboard-root.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport * as ZagClipboard from '@zag-js/clipboard';\nimport { mergeTwClassNames } from '#utils';\nimport { ClipboardAnnouncer } from './clipboard-announcer';\nimport { type UseClipboardProps, useClipboard } from './use-clipboard';\nimport { ClipboardContextProvider } from './use-clipboard-context';\n\n/**\n * Props do `Clipboard.Root`: as opções da área de transferência e as props do\n * elemento renderizado.\n */\nexport type ClipboardRootProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  UseClipboardProps\n>;\n\nconst splitRootProps = createSplitProps<UseClipboardProps>();\n\n/**\n * Raiz do Clipboard.\n *\n * Cria a máquina de cópia e disponibiliza o valor, o estado `copied` e o\n * método `copy` para todas as partes aninhadas. Depois dos filhos, renderiza\n * uma região `sr-only` que anuncia a cópia ao leitor de tela.\n *\n * Use o `Clipboard.RootProvider` no lugar deste componente quando a cópia\n * precisar ser lida ou comandada de fora da própria subárvore.\n *\n * É headless: as partes não têm visual próprio. O botão vem por composição,\n * no `render` do `Clipboard.Trigger`.\n *\n * @example\n * ```tsx\n * <Clipboard.Root value=\"https://github.com\">\n *   <Clipboard.Label>Copie este link</Clipboard.Label>\n *\n *   <Clipboard.Control>\n *     <Clipboard.Input />\n *\n *     <Clipboard.Trigger>\n *       <Clipboard.Indicator />\n *     </Clipboard.Trigger>\n *   </Clipboard.Control>\n * </Clipboard.Root>\n * ```\n */\nexport const ClipboardRoot = (props: ClipboardRootProps) => {\n  const [useClipboardProps, elementProps] = splitRootProps(\n    props,\n    ZagClipboard.props,\n  );\n\n  const { render, className, children, ...rest } = elementProps;\n\n  const clipboard = useClipboard(useClipboardProps);\n\n  const zagProps = clipboard.getRootProps();\n\n  const baseProps = {\n    'data-component': 'Clipboard.Root',\n    className: mergeTwClassNames([], className),\n    children: (\n      <>\n        {children}\n        <ClipboardAnnouncer />\n      </>\n    ),\n  };\n\n  return (\n    <ClipboardContextProvider value={clipboard}>\n      {useRender({\n        render,\n        defaultTagName: 'div',\n        props: mergeProps(baseProps, zagProps, rest),\n      })}\n    </ClipboardContextProvider>\n  );\n};\n\nClipboardRoot.displayName = 'Clipboard.Root';\n"],"mappings":";;;;;;;;;AAiBA,MAAM,iBAAiB,iBAAoC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8B3D,MAAa,iBAAiB,UAA8B;CAC1D,MAAM,CAAC,mBAAmB,gBAAgB,eACxC,OACA,aAAa,KACf;CAEA,MAAM,EAAE,QAAQ,WAAW,UAAU,GAAG,SAAS;CAEjD,MAAM,YAAY,aAAa,iBAAiB;CAEhD,MAAM,WAAW,UAAU,aAAa;CAExC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,GAAG,SAAS;EAC1C,UACE,qBAAA,UAAA,EAAA,UAAA,CACG,UACD,oBAAC,oBAAD,CAAqB,CAAA,CACrB,EAAA,CAAA;CAEN;CAEA,OACE,oBAAC,0BAAD;EAA0B,OAAO;EAC9B,UAAA,UAAU;GACT;GACA,gBAAgB;GAChB,OAAO,WAAW,WAAW,UAAU,IAAI;EAC7C,CAAC;CACuB,CAAA;AAE9B;AAEA,cAAc,cAAc"}
+{"version":3,"file":"clipboard-root.js","names":[],"sources":["../../../../src/components/display/clipboard/clipboard-root.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport * as ZagClipboard from '@zag-js/clipboard';\nimport { mergeTwClassNames } from '#utils';\nimport { ClipboardAnnouncer } from './clipboard-announcer';\nimport { type UseClipboardProps, useClipboard } from './use-clipboard';\nimport { ClipboardContextProvider } from './use-clipboard-context';\n\n/**\n * Props do `Clipboard.Root`: as opções da área de transferência e as props do\n * elemento renderizado.\n */\nexport type ClipboardRootProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  UseClipboardProps\n>;\n\nconst splitRootProps = createSplitProps<UseClipboardProps>();\n\n/**\n * Raiz do Clipboard.\n *\n * Cria a máquina de cópia e disponibiliza o valor, o estado `copied` e o\n * método `copy` para todas as partes aninhadas. Depois dos filhos, renderiza\n * uma região `sr-only` que anuncia a cópia ao leitor de tela.\n *\n * Use o `Clipboard.RootProvider` no lugar deste componente quando a cópia\n * precisar ser lida ou comandada de fora da própria subárvore.\n *\n * É headless: as partes não têm visual próprio. O botão vem por composição,\n * no `render` do `Clipboard.Trigger`.\n *\n * @example\n * ```tsx\n * <Clipboard.Root value=\"https://github.com\">\n *   <Clipboard.Label>Copie este link</Clipboard.Label>\n *\n *   <Clipboard.Control>\n *     <Clipboard.Input />\n *\n *     <Clipboard.Trigger>\n *       <Clipboard.Indicator />\n *     </Clipboard.Trigger>\n *   </Clipboard.Control>\n * </Clipboard.Root>\n * ```\n */\nexport const ClipboardRoot = (props: ClipboardRootProps) => {\n  const [useClipboardProps, elementProps] = splitRootProps(\n    props,\n    ZagClipboard.props,\n  );\n\n  const { render, className, children, ...rest } = elementProps;\n\n  const clipboard = useClipboard(useClipboardProps);\n\n  const zagProps = clipboard.getRootProps();\n\n  const baseProps = {\n    'data-component': 'Clipboard.Root',\n    className: mergeTwClassNames([], className),\n    children: (\n      <>\n        {children}\n        <ClipboardAnnouncer />\n      </>\n    ),\n  };\n\n  return (\n    <ClipboardContextProvider value={clipboard}>\n      {useRender({\n        render,\n        defaultTagName: 'div',\n        props: mergeProps(baseProps, zagProps, rest),\n      })}\n    </ClipboardContextProvider>\n  );\n};\n\nClipboardRoot.displayName = 'Clipboard.Root';\n"],"mappings":";;;;;;;;;AAoBA,MAAM,iBAAiB,iBAAoC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8B3D,MAAa,iBAAiB,UAA8B;CAC1D,MAAM,CAAC,mBAAmB,gBAAgB,eACxC,OACA,aAAa,KACf;CAEA,MAAM,EAAE,QAAQ,WAAW,UAAU,GAAG,SAAS;CAEjD,MAAM,YAAY,aAAa,iBAAiB;CAEhD,MAAM,WAAW,UAAU,aAAa;CAExC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,GAAG,SAAS;EAC1C,UACE,qBAAA,UAAA,EAAA,UAAA,CACG,UACD,oBAAC,oBAAD,CAAqB,CAAA,CACrB,EAAA,CAAA;CAEN;CAEA,OACE,oBAAC,0BAAD;EAA0B,OAAO;EAC9B,UAAA,UAAU;GACT;GACA,gBAAgB;GAChB,OAAO,WAAW,WAAW,UAAU,IAAI;EAC7C,CAAC;CACuB,CAAA;AAE9B;AAEA,cAAc,cAAc"}

package/dist/components/display/clipboard/use-clipboard.d.ts

@@ -1,4 +1,4 @@
-import { Optional } from "@lucasbernardosn/utils";
+import { Optional } from "@lucasbernardosn/ts-utils";
 import * as ZagClipboard from "@zag-js/clipboard";
 import { PropTypes } from "@zag-js/react";
 //#region src/components/display/clipboard/use-clipboard.d.ts

package/dist/components/display/clipboard/use-clipboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-clipboard.js","names":[],"sources":["../../../../src/components/display/clipboard/use-clipboard.ts"],"sourcesContent":["import type { Optional } from '@lucasbernardosn/utils';\nimport * as ZagClipboard from '@zag-js/clipboard';\nimport { normalizeProps, type PropTypes, useMachine } from '@zag-js/react';\nimport { useId } from 'react';\n\n/**\n * Textos acessíveis padrão do Clipboard.\n *\n * O Zag traz os rótulos em inglês; aqui eles são substituídos pelos\n * equivalentes em pt-BR. Passar `translations` no `Clipboard.Root` ou no\n * `useClipboard` sobrescreve apenas as chaves informadas.\n */\nexport const clipboardTranslations: ZagClipboard.IntlTranslations = {\n  triggerLabel: (copied) =>\n    copied\n      ? 'Copiado para a área de transferência'\n      : 'Copiar para a área de transferência',\n};\n\n/**\n * Propriedades do hook `useClipboard`.\n *\n * São as mesmas opções aceitas pelo `Clipboard.Root`, com o `id` opcional — um\n * id único é gerado quando ele não é informado.\n */\nexport type UseClipboardProps = Optional<ZagClipboard.Props, 'id'>;\n\n/**\n * Retorno do hook `useClipboard`: a API completa da área de transferência, com\n * o valor, o estado de cópia, o método `copy` e as props de cada parte.\n */\nexport type UseClipboardReturn = ZagClipboard.Api<PropTypes>;\n\n/**\n * Cria e gerencia o estado de um Clipboard.\n *\n * Use junto do `Clipboard.RootProvider` quando for preciso ler ou comandar a\n * cópia de fora da subárvore do componente — um contador de cópias, um botão\n * externo, ou a exibição do valor em um componente irmão. Nos casos comuns\n * prefira o `Clipboard.Root`, que chama este hook internamente.\n *\n * @example\n * ```tsx\n * const clipboard = useClipboard({ value: 'https://github.com' });\n *\n * return (\n *   <>\n *     <span>{clipboard.copied ? 'Copiado!' : clipboard.value}</span>\n *\n *     <Clipboard.RootProvider value={clipboard}>\n *       <Clipboard.Trigger>\n *         <Clipboard.Indicator />\n *       </Clipboard.Trigger>\n *     </Clipboard.RootProvider>\n *   </>\n * );\n * ```\n */\nexport const useClipboard = (props?: UseClipboardProps): UseClipboardReturn => {\n  // Id de fallback: só é usado quando `props.id` não é informado.\n  const id = useId();\n\n  const machineProps: ZagClipboard.Props = {\n    id,\n    ...props,\n    // Mesclado por chave para que um `translations` parcial não derrube os\n    // demais textos padrão.\n    translations: { ...clipboardTranslations, ...props?.translations },\n  };\n\n  const service = useMachine(ZagClipboard.machine, machineProps);\n\n  return ZagClipboard.connect(service, normalizeProps);\n};\n"],"mappings":";;;;;;;;;;;AAYA,MAAa,wBAAuD,EAClE,eAAe,WACb,SACI,yCACA,sCACR;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAa,gBAAgB,UAAkD;CAI7E,MAAM,eAAmC;EACvC,IAHS,MAGR;EACD,GAAG;EAGH,cAAc;GAAE,GAAG;GAAuB,GAAG,OAAO;EAAa;CACnE;CAEA,MAAM,UAAU,WAAW,aAAa,SAAS,YAAY;CAE7D,OAAO,aAAa,QAAQ,SAAS,cAAc;AACrD"}
+{"version":3,"file":"use-clipboard.js","names":[],"sources":["../../../../src/components/display/clipboard/use-clipboard.ts"],"sourcesContent":["import type { Optional } from '@lucasbernardosn/ts-utils';\nimport * as ZagClipboard from '@zag-js/clipboard';\nimport { normalizeProps, type PropTypes, useMachine } from '@zag-js/react';\nimport { useId } from 'react';\n\n/**\n * Textos acessíveis padrão do Clipboard.\n *\n * O Zag traz os rótulos em inglês; aqui eles são substituídos pelos\n * equivalentes em pt-BR. Passar `translations` no `Clipboard.Root` ou no\n * `useClipboard` sobrescreve apenas as chaves informadas.\n */\nexport const clipboardTranslations: ZagClipboard.IntlTranslations = {\n  triggerLabel: (copied) =>\n    copied\n      ? 'Copiado para a área de transferência'\n      : 'Copiar para a área de transferência',\n};\n\n/**\n * Propriedades do hook `useClipboard`.\n *\n * São as mesmas opções aceitas pelo `Clipboard.Root`, com o `id` opcional — um\n * id único é gerado quando ele não é informado.\n */\nexport type UseClipboardProps = Optional<ZagClipboard.Props, 'id'>;\n\n/**\n * Retorno do hook `useClipboard`: a API completa da área de transferência, com\n * o valor, o estado de cópia, o método `copy` e as props de cada parte.\n */\nexport type UseClipboardReturn = ZagClipboard.Api<PropTypes>;\n\n/**\n * Cria e gerencia o estado de um Clipboard.\n *\n * Use junto do `Clipboard.RootProvider` quando for preciso ler ou comandar a\n * cópia de fora da subárvore do componente — um contador de cópias, um botão\n * externo, ou a exibição do valor em um componente irmão. Nos casos comuns\n * prefira o `Clipboard.Root`, que chama este hook internamente.\n *\n * @example\n * ```tsx\n * const clipboard = useClipboard({ value: 'https://github.com' });\n *\n * return (\n *   <>\n *     <span>{clipboard.copied ? 'Copiado!' : clipboard.value}</span>\n *\n *     <Clipboard.RootProvider value={clipboard}>\n *       <Clipboard.Trigger>\n *         <Clipboard.Indicator />\n *       </Clipboard.Trigger>\n *     </Clipboard.RootProvider>\n *   </>\n * );\n * ```\n */\nexport const useClipboard = (props?: UseClipboardProps): UseClipboardReturn => {\n  // Id de fallback: só é usado quando `props.id` não é informado.\n  const id = useId();\n\n  const machineProps: ZagClipboard.Props = {\n    id,\n    ...props,\n    // Mesclado por chave para que um `translations` parcial não derrube os\n    // demais textos padrão.\n    translations: { ...clipboardTranslations, ...props?.translations },\n  };\n\n  const service = useMachine(ZagClipboard.machine, machineProps);\n\n  return ZagClipboard.connect(service, normalizeProps);\n};\n"],"mappings":";;;;;;;;;;;AAYA,MAAa,wBAAuD,EAClE,eAAe,WACb,SACI,yCACA,sCACR;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAa,gBAAgB,UAAkD;CAI7E,MAAM,eAAmC;EACvC,IAHS,MAGR;EACD,GAAG;EAGH,cAAc;GAAE,GAAG;GAAuB,GAAG,OAAO;EAAa;CACnE;CAEA,MAAM,UAAU,WAAW,aAAa,SAAS,YAAY;CAE7D,OAAO,aAAa,QAAQ,SAAS,cAAc;AACrD"}

package/dist/components/display/data-list/data-list-item-variants.d.ts

@@ -1,12 +1,11 @@
 //#region src/components/display/data-list/data-list-item-variants.d.ts
 /**
  * O espaçamento depende da orientação: em `horizontal` os itens ficam lado a lado e o respiro é
- * lateral; em `vertical` eles empilham e o respiro é vertical. Por isso o `size` só tem valor nos
- * `compoundVariants`.
+ * lateral, com o valor abaixo do rótulo; em `vertical` eles empilham e o respiro é vertical, com
+ * rótulo e valor lado a lado.
  */
 export declare const dataListItemVariants: (props?: ({
   orientation?: "vertical" | "horizontal" | null | undefined;
-  size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=data-list-item-variants.d.ts.map

package/dist/components/display/data-list/data-list-item-variants.js

@@ -3,68 +3,30 @@ import { cva } from "class-variance-authority";
 //#region src/components/display/data-list/data-list-item-variants.ts
 /**
 * O espaçamento depende da orientação: em `horizontal` os itens ficam lado a lado e o respiro é
-* lateral; em `vertical` eles empilham e o respiro é vertical. Por isso o `size` só tem valor nos
-* `compoundVariants`.
+* lateral, com o valor abaixo do rótulo; em `vertical` eles empilham e o respiro é vertical, com
+* rótulo e valor lado a lado.
 */
 const dataListItemVariants = cva(["flex"], {
-	variants: {
-		orientation: {
-			horizontal: [
-				"flex-col",
-				"items-start",
-				"first:pl-0",
-				"last:pr-0"
-			],
-			vertical: [
-				"flex-row",
-				"items-center",
-				"justify-between",
-				"first:pt-0",
-				"last:pb-0"
-			]
-		},
-		size: {
-			sm: [],
-			md: [],
-			lg: []
-		}
-	},
-	compoundVariants: [
-		{
-			orientation: "horizontal",
-			size: "sm",
-			className: ["gap-0.5", "px-1.5"]
-		},
-		{
-			orientation: "horizontal",
-			size: "md",
-			className: ["gap-1", "px-2"]
-		},
-		{
-			orientation: "horizontal",
-			size: "lg",
-			className: ["gap-2", "px-3"]
-		},
-		{
-			orientation: "vertical",
-			size: "sm",
-			className: ["gap-4", "py-2"]
-		},
-		{
-			orientation: "vertical",
-			size: "md",
-			className: ["gap-4", "py-2.5"]
-		},
-		{
-			orientation: "vertical",
-			size: "lg",
-			className: ["gap-8", "py-3.5"]
-		}
-	],
-	defaultVariants: {
-		orientation: dataListDefaultVariants.orientation,
-		size: dataListDefaultVariants.size
-	}
+	variants: { orientation: {
+		horizontal: [
+			"flex-col",
+			"items-start",
+			"gap-1",
+			"px-2",
+			"first:pl-0",
+			"last:pr-0"
+		],
+		vertical: [
+			"flex-row",
+			"items-center",
+			"justify-between",
+			"gap-4",
+			"py-2",
+			"first:pt-0",
+			"last:pb-0"
+		]
+	} },
+	defaultVariants: { orientation: dataListDefaultVariants.orientation }
 });
 //#endregion
 export { dataListItemVariants };

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

@@ -1 +1 @@
-{"version":3,"file":"data-list-item-variants.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-item-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { dataListDefaultVariants } from './use-data-list-context';\n\n/**\n * O espaçamento depende da orientação: em `horizontal` os itens ficam lado a lado e o respiro é\n * lateral; em `vertical` eles empilham e o respiro é vertical. Por isso o `size` só tem valor nos\n * `compoundVariants`.\n */\nexport const dataListItemVariants = cva(['flex'], {\n  variants: {\n    orientation: {\n      horizontal: [\n        'flex-col',\n        'items-start',\n\n        'first:pl-0',\n        'last:pr-0',\n      ],\n      vertical: [\n        'flex-row',\n        'items-center',\n        'justify-between',\n\n        'first:pt-0',\n        'last:pb-0',\n      ],\n    },\n    size: {\n      sm: [],\n      md: [],\n      lg: [],\n    },\n  },\n  compoundVariants: [\n    {\n      orientation: 'horizontal',\n      size: 'sm',\n      className: ['gap-0.5', 'px-1.5'],\n    },\n    {\n      orientation: 'horizontal',\n      size: 'md',\n      className: ['gap-1', 'px-2'],\n    },\n    {\n      orientation: 'horizontal',\n      size: 'lg',\n      className: ['gap-2', 'px-3'],\n    },\n    {\n      orientation: 'vertical',\n      size: 'sm',\n      className: ['gap-4', 'py-2'],\n    },\n    {\n      orientation: 'vertical',\n      size: 'md',\n      className: ['gap-4', 'py-2.5'],\n    },\n    {\n      orientation: 'vertical',\n      size: 'lg',\n      className: ['gap-8', 'py-3.5'],\n    },\n  ],\n  defaultVariants: {\n    orientation: dataListDefaultVariants.orientation,\n    size: dataListDefaultVariants.size,\n  },\n});\n"],"mappings":";;;;;;;;AAQA,MAAa,uBAAuB,IAAI,CAAC,MAAM,GAAG;CAChD,UAAU;EACR,aAAa;GACX,YAAY;IACV;IACA;IAEA;IACA;GACF;GACA,UAAU;IACR;IACA;IACA;IAEA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI,CAAC;GACL,IAAI,CAAC;GACL,IAAI,CAAC;EACP;CACF;CACA,kBAAkB;EAChB;GACE,aAAa;GACb,MAAM;GACN,WAAW,CAAC,WAAW,QAAQ;EACjC;EACA;GACE,aAAa;GACb,MAAM;GACN,WAAW,CAAC,SAAS,MAAM;EAC7B;EACA;GACE,aAAa;GACb,MAAM;GACN,WAAW,CAAC,SAAS,MAAM;EAC7B;EACA;GACE,aAAa;GACb,MAAM;GACN,WAAW,CAAC,SAAS,MAAM;EAC7B;EACA;GACE,aAAa;GACb,MAAM;GACN,WAAW,CAAC,SAAS,QAAQ;EAC/B;EACA;GACE,aAAa;GACb,MAAM;GACN,WAAW,CAAC,SAAS,QAAQ;EAC/B;CACF;CACA,iBAAiB;EACf,aAAa,wBAAwB;EACrC,MAAM,wBAAwB;CAChC;AACF,CAAC"}
+{"version":3,"file":"data-list-item-variants.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-item-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { dataListDefaultVariants } from './use-data-list-context';\n\n/**\n * O espaçamento depende da orientação: em `horizontal` os itens ficam lado a lado e o respiro é\n * lateral, com o valor abaixo do rótulo; em `vertical` eles empilham e o respiro é vertical, com\n * rótulo e valor lado a lado.\n */\nexport const dataListItemVariants = cva(['flex'], {\n  variants: {\n    orientation: {\n      horizontal: [\n        'flex-col',\n        'items-start',\n\n        'gap-1',\n        'px-2',\n\n        'first:pl-0',\n        'last:pr-0',\n      ],\n      vertical: [\n        'flex-row',\n        'items-center',\n        'justify-between',\n\n        'gap-4',\n        'py-2',\n\n        'first:pt-0',\n        'last:pb-0',\n      ],\n    },\n  },\n  defaultVariants: {\n    orientation: dataListDefaultVariants.orientation,\n  },\n});\n"],"mappings":";;;;;;;;AAQA,MAAa,uBAAuB,IAAI,CAAC,MAAM,GAAG;CAChD,UAAU,EACR,aAAa;EACX,YAAY;GACV;GACA;GAEA;GACA;GAEA;GACA;EACF;EACA,UAAU;GACR;GACA;GACA;GAEA;GACA;GAEA;GACA;EACF;CACF,EACF;CACA,iBAAiB,EACf,aAAa,wBAAwB,YACvC;AACF,CAAC"}