@lucasbernardosn/react-ui 0.3.0 → 0.5.0

package/dist/components/display/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","names":[],"sources":["../../../../src/components/display/badge/badge.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 BadgeVariants, badgeVariants } from './badge-variants';\n\nexport type BadgeProps = MergeOverride<\n  useRender.ComponentProps<'span'>,\n  BadgeVariants\n>;\n\nconst splitVariantProps = createSplitProps<BadgeVariants>();\n\n/**\n * Rótulo curto de exibição, para uma categoria, um estado ou uma contagem (\"Pago\", \"NF-e\", \"3\").\n * Não tem interação: para um item que se remove, a `Tag`.\n *\n * Um ícone entra nos filhos, antes ou depois do texto, pelo `Icon` da lib. A cor sozinha não\n * comunica para quem não a distingue: o texto diz o que o badge significa.\n *\n * @example\n * ```tsx\n * <Badge colorScheme=\"green\">Pago</Badge>\n * ```\n */\nexport const Badge = (props: BadgeProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n    'size',\n    'variant',\n  ]);\n\n  const { render, className, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'Badge',\n    className: mergeTwClassNames(badgeVariants(variantProps), className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nBadge.displayName = 'Badge';\n"],"mappings":";;;;;AAaA,MAAM,oBAAoB,iBAAgC;;;;;;;;;;;;;AAc1D,MAAa,SAAS,UAAsB;CAC1C,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO;EAC5D;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,cAAc,YAAY,GAAG,SAAS;CACrE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,MAAM,cAAc"}
+{"version":3,"file":"badge.js","names":[],"sources":["../../../../src/components/display/badge/badge.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport type React from 'react';\nimport { Children } from 'react';\nimport { mergeTwClassNames } from '#utils';\nimport { type BadgeVariants, badgeVariants } from './badge-variants';\n\nexport type BadgeProps = MergeOverride<\n  useRender.ComponentProps<'span'>,\n  BadgeVariants\n>;\n\nconst splitVariantProps = createSplitProps<BadgeVariants>();\n\n/**\n * Rótulo curto de exibição, para uma categoria, um estado ou uma contagem (\"Pago\", \"NF-e\", \"3\").\n * Não tem interação: para um item que se remove, a `Tag`.\n *\n * Um ícone entra nos filhos, antes ou depois do texto, pelo `Icon` da lib. A cor sozinha não\n * comunica para quem não a distingue: o texto diz o que o badge significa.\n *\n * O badge não passa da largura do pai: um texto que não cabe termina em reticências. O leitor de\n * tela lê o texto inteiro, e quem vê precisa dele no `title`, como no `Truncate`.\n *\n * @example\n * ```tsx\n * <Badge colorScheme=\"green\">Pago</Badge>\n * ```\n *\n * @example\n * ```tsx\n * <Badge title={status}>{status}</Badge>\n * ```\n */\nexport const Badge = (props: BadgeProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n    'size',\n    'variant',\n  ]);\n\n  const { render, className, children, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'Badge',\n    className: mergeTwClassNames(badgeVariants(variantProps), className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(\n      baseProps,\n      rest,\n      children === undefined ? {} : { children: wrapTextChildren(children) },\n    ),\n  });\n};\n\nBadge.displayName = 'Badge';\n\n/**\n * Envolve cada sequência de texto dos filhos num `span` com `truncate`, que é onde as reticências\n * se aplicam: um texto solto num contêiner flex vira um item anônimo e não corta. Os elementos\n * (ícones) ficam como estão, e `null`, `undefined` e booleanos somem. Sem texto, devolve os\n * filhos intactos.\n */\nconst wrapTextChildren = (children: React.ReactNode): React.ReactNode => {\n  const items = Children.toArray(children);\n\n  if (!items.some(isText)) {\n    return children;\n  }\n\n  const result: React.ReactNode[] = [];\n  let textRun: (string | number)[] = [];\n\n  const flushTextRun = () => {\n    if (textRun.length === 0) {\n      return;\n    }\n\n    result.push(\n      <span\n        key={`text-${result.length}`}\n        className={mergeTwClassNames(['min-w-0', 'truncate'])}\n      >\n        {textRun}\n      </span>,\n    );\n    textRun = [];\n  };\n\n  for (const item of items) {\n    if (isText(item)) {\n      textRun.push(item);\n    } else {\n      flushTextRun();\n      result.push(item);\n    }\n  }\n\n  flushTextRun();\n\n  return result;\n};\n\nconst isText = (node: unknown): node is string | number =>\n  typeof node === 'string' || typeof node === 'number';\n"],"mappings":";;;;;;;AAeA,MAAM,oBAAoB,iBAAgC;;;;;;;;;;;;;;;;;;;;;AAsB1D,MAAa,SAAS,UAAsB;CAC1C,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO;EAC5D;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,QAAQ,WAAW,UAAU,GAAG,SAAS;CAEjD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,cAAc,YAAY,GAAG,SAAS;CACrE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WACL,WACA,MACA,aAAa,KAAA,IAAY,CAAC,IAAI,EAAE,UAAU,iBAAiB,QAAQ,EAAE,CACvE;CACF,CAAC;AACH;AAEA,MAAM,cAAc;;;;;;;AAQpB,MAAM,oBAAoB,aAA+C;CACvE,MAAM,QAAQ,SAAS,QAAQ,QAAQ;CAEvC,IAAI,CAAC,MAAM,KAAK,MAAM,GACpB,OAAO;CAGT,MAAM,SAA4B,CAAC;CACnC,IAAI,UAA+B,CAAC;CAEpC,MAAM,qBAAqB;EACzB,IAAI,QAAQ,WAAW,GACrB;EAGF,OAAO,KACL,oBAAC,QAAD;GAEE,WAAW,kBAAkB,CAAC,WAAW,UAAU,CAAC;GAEnD,UAAA;EACG,GAJC,QAAQ,OAAO,QAIhB,CACR;EACA,UAAU,CAAC;CACb;CAEA,KAAK,MAAM,QAAQ,OACjB,IAAI,OAAO,IAAI,GACb,QAAQ,KAAK,IAAI;MACZ;EACL,aAAa;EACb,OAAO,KAAK,IAAI;CAClB;CAGF,aAAa;CAEb,OAAO;AACT;AAEA,MAAM,UAAU,SACd,OAAO,SAAS,YAAY,OAAO,SAAS"}

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

@@ -5,8 +5,8 @@ export type CardBodyProps = useRender.ComponentProps<'div'>;
  * Conteúdo principal do card. Ocupa o espaço que sobra (`flex-1`), empurrando o `Card.Footer`
  * para a base.
  *
- * Origem do corpo das superfícies com cabeçalho: o `Dialog.Body` copia estas classes (tabela no README de `display`). Uma
- * mudança aqui vale para a cópia na mesma rodada.
+ * Origem do corpo das superfícies com cabeçalho: o `Dialog.Body` copia estas classes. Uma mudança
+ * aqui vale para a cópia na mesma rodada.
  */
 export declare const CardBody: {
   (props: CardBodyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

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

@@ -5,8 +5,8 @@ import { mergeProps, useRender } from "@base-ui/react";
 * Conteúdo principal do card. Ocupa o espaço que sobra (`flex-1`), empurrando o `Card.Footer`
 * para a base.
 *
-* Origem do corpo das superfícies com cabeçalho: o `Dialog.Body` copia estas classes (tabela no README de `display`). Uma
-* mudança aqui vale para a cópia na mesma rodada.
+* Origem do corpo das superfícies com cabeçalho: o `Dialog.Body` copia estas classes. Uma mudança
+* aqui vale para a cópia na mesma rodada.
 */
 const CardBody = (props) => {
 	const { render, className, ...rest } = props;
@@ -16,6 +16,7 @@ const CardBody = (props) => {
 			"flex",
 			"flex-1",
 			"flex-col",
+			"gap-4",
 			"p-(--card-padding)"
 		], className)
 	};

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

@@ -1 +1 @@
-{"version":3,"file":"card-body.js","names":[],"sources":["../../../../src/components/display/card/card-body.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type CardBodyProps = useRender.ComponentProps<'div'>;\n\n/**\n * Conteúdo principal do card. Ocupa o espaço que sobra (`flex-1`), empurrando o `Card.Footer`\n * para a base.\n *\n * Origem do corpo das superfícies com cabeçalho: o `Dialog.Body` copia estas classes (tabela no README de `display`). Uma\n * mudança aqui vale para a cópia na mesma rodada.\n */\nexport const CardBody = (props: CardBodyProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Card.Body',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'flex-1',\n        'flex-col',\n\n        'p-(--card-padding)',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCardBody.displayName = 'Card.Body';\n"],"mappings":";;;;;;;;;;AAYA,MAAa,YAAY,UAAyB;CAChD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,SAAS,cAAc"}
+{"version":3,"file":"card-body.js","names":[],"sources":["../../../../src/components/display/card/card-body.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type CardBodyProps = useRender.ComponentProps<'div'>;\n\n/**\n * Conteúdo principal do card. Ocupa o espaço que sobra (`flex-1`), empurrando o `Card.Footer`\n * para a base.\n *\n * Origem do corpo das superfícies com cabeçalho: o `Dialog.Body` copia estas classes. Uma mudança\n * aqui vale para a cópia na mesma rodada.\n */\nexport const CardBody = (props: CardBodyProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Card.Body',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'flex-1',\n        'flex-col',\n        'gap-4',\n\n        'p-(--card-padding)',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCardBody.displayName = 'Card.Body';\n"],"mappings":";;;;;;;;;;AAYA,MAAa,YAAY,UAAyB;CAChD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,SAAS,cAAc"}

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

@@ -4,8 +4,7 @@ export type CardDescriptionProps = useRender.ComponentProps<'p'>;
 /**
  * Texto de apoio do card, abaixo do título, em tamanho fixo.
  *
- * 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. Uma mudança aqui vale para a cópia na mesma rodada.
  */
 export declare const CardDescription: {
   (props: CardDescriptionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

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

@@ -4,8 +4,7 @@ import { mergeProps, useRender } from "@base-ui/react";
 /**
 * Texto de apoio do card, abaixo do título, em tamanho fixo.
 *
-* 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. Uma mudança aqui vale para a cópia na mesma rodada.
 */
 const CardDescription = (props) => {
 	const { render, className, ...rest } = props;

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, 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"}
+{"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. Uma 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      ['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":";;;;;;;;AAUA,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-footer.d.ts

@@ -4,7 +4,7 @@ export type CardFooterProps = useRender.ComponentProps<'div'>;
 /**
  * Linha de ações na base do card.
  *
- * Origem do rodapé das superfícies com cabeçalho: o `Dialog.Footer` copia estas classes (tabela no README de `display`). Uma
+ * Origem do rodapé das superfícies com cabeçalho: o `Dialog.Footer` copia estas classes. Uma
  * mudança aqui vale para a cópia na mesma rodada.
  */
 export declare const CardFooter: {

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

@@ -4,7 +4,7 @@ import { mergeProps, useRender } from "@base-ui/react";
 /**
 * Linha de ações na base do card.
 *
-* Origem do rodapé das superfícies com cabeçalho: o `Dialog.Footer` copia estas classes (tabela no README de `display`). Uma
+* Origem do rodapé das superfícies com cabeçalho: o `Dialog.Footer` copia estas classes. Uma
 * mudança aqui vale para a cópia na mesma rodada.
 */
 const CardFooter = (props) => {

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

@@ -1 +1 @@
-{"version":3,"file":"card-footer.js","names":[],"sources":["../../../../src/components/display/card/card-footer.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type CardFooterProps = useRender.ComponentProps<'div'>;\n\n/**\n * Linha de ações na base do card.\n *\n * Origem do rodapé das superfícies com cabeçalho: o `Dialog.Footer` copia estas classes (tabela no README de `display`). Uma\n * mudança aqui vale para a cópia na mesma rodada.\n */\nexport const CardFooter = (props: CardFooterProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Card.Footer',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'items-center',\n        'gap-2',\n\n        'px-(--card-padding)',\n        'pb-(--card-padding)',\n        // O respiro de cima vem do `Body`. Sem ele (o `Footer` abrindo o card ou logo depois do\n        // `Header`), o próprio `Footer` o declara, para não ficar colado.\n        'first:pt-(--card-padding)',\n        \"[[data-component='Card.Header']+&]:pt-(--card-padding)\",\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCardFooter.displayName = 'Card.Footer';\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;GAGA;GACA;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-footer.js","names":[],"sources":["../../../../src/components/display/card/card-footer.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type CardFooterProps = useRender.ComponentProps<'div'>;\n\n/**\n * Linha de ações na base do card.\n *\n * Origem do rodapé das superfícies com cabeçalho: o `Dialog.Footer` copia estas classes. Uma\n * mudança aqui vale para a cópia na mesma rodada.\n */\nexport const CardFooter = (props: CardFooterProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Card.Footer',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'items-center',\n        'gap-2',\n\n        'px-(--card-padding)',\n        'pb-(--card-padding)',\n        // O respiro de cima vem do `Body`. Sem ele (o `Footer` abrindo o card ou logo depois do\n        // `Header`), o próprio `Footer` o declara, para não ficar colado.\n        'first:pt-(--card-padding)',\n        \"[[data-component='Card.Header']+&]:pt-(--card-padding)\",\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCardFooter.displayName = 'Card.Footer';\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;GAGA;GACA;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-header.d.ts

@@ -4,8 +4,7 @@ export type CardHeaderProps = useRender.ComponentProps<'div'>;
 /**
  * Topo do card, onde ficam 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. 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,7 @@ import { mergeProps, useRender } from "@base-ui/react";
 /**
 * Topo do card, onde ficam 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. Uma mudança aqui vale para a cópia na mesma rodada.
 */
 const CardHeader = (props) => {
 	const { render, className, ...rest } = props;

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 * 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"}
+{"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. Uma 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-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":";;;;;;;;AAUA,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-title.d.ts

@@ -13,8 +13,7 @@ export type CardTitleProps = MergeOverride<useRender.ComponentProps<'h3'>, {
 /**
  * Título do card, em tamanho fixo.
  *
- * 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. 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

@@ -4,8 +4,7 @@ import { mergeProps, useRender } from "@base-ui/react";
 /**
 * Título do card, em tamanho fixo.
 *
-* 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. Uma mudança aqui vale para a cópia na mesma rodada.
 */
 const CardTitle = (props) => {
 	const { level = 3, render, className, ...rest } = props;

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/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"}
+{"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. Uma 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      ['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":";;;;;;;;AAsBA,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.js

@@ -3,7 +3,7 @@ import { Icon } from "../icon/icon.js";
 import { useClipboardContext } from "./use-clipboard-context.js";
 import { mergeProps, useRender } from "@base-ui/react";
 import { jsx } from "react/jsx-runtime";
-import { CheckIcon, ClipboardIcon } from "@phosphor-icons/react";
+import { CheckIcon, CopyIcon } from "@phosphor-icons/react";
 //#region src/components/display/clipboard/clipboard-indicator.tsx
 /**
 * Conteúdo que alterna entre os estados de repouso e de cópia.
@@ -18,7 +18,7 @@ import { CheckIcon, ClipboardIcon } from "@phosphor-icons/react";
 * encolhe o ícone, que fica centralizado pelo botão.
 */
 const ClipboardIndicator = (props) => {
-	const { render, className, children = /* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(ClipboardIcon, {}) }), copied = /* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(CheckIcon, {}) }), ...rest } = props;
+	const { render, className, children = /* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(CopyIcon, {}) }), copied = /* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(CheckIcon, {}) }), ...rest } = props;
 	const clipboard = useClipboardContext();
 	const zagProps = clipboard.getIndicatorProps({ copied: clipboard.copied });
 	const baseProps = {

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/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"}
+{"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, CopyIcon } 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={<CopyIcon />} />,\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,UAAD,CAAW,CAAA,EAAI,CAAA,GACxC,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/data-list/data-list-item-label-variants.d.ts

@@ -0,0 +1,7 @@
+//#region src/components/display/data-list/data-list-item-label-variants.d.ts
+export declare const dataListItemLabelVariants: (props?: ({
+  orientation?: "horizontal" | "vertical" | null | undefined;
+  variant?: "subtle" | "bold" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=data-list-item-label-variants.d.ts.map

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

@@ -0,0 +1,27 @@
+import { dataListDefaultVariants } from "./use-data-list-context.js";
+import { cva } from "class-variance-authority";
+//#region src/components/display/data-list/data-list-item-label-variants.ts
+const dataListItemLabelVariants = cva([
+	"flex",
+	"items-center",
+	"gap-1"
+], {
+	variants: {
+		orientation: {
+			vertical: [],
+			horizontal: ["min-w-30"]
+		},
+		variant: {
+			subtle: ["text-gray-11"],
+			bold: ["font-medium", "text-gray-12"]
+		}
+	},
+	defaultVariants: {
+		orientation: dataListDefaultVariants.orientation,
+		variant: dataListDefaultVariants.variant
+	}
+});
+//#endregion
+export { dataListItemLabelVariants };
+
+//# sourceMappingURL=data-list-item-label-variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-list-item-label-variants.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-item-label-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nimport { dataListDefaultVariants } from './use-data-list-context';\n\nexport const dataListItemLabelVariants = cva(\n  [\n    'flex',\n    'items-center',\n\n    'gap-1',\n  ],\n  {\n    variants: {\n      orientation: {\n        vertical: [],\n        horizontal: ['min-w-30'],\n      },\n      variant: {\n        subtle: ['text-gray-11'],\n        bold: [\n          'font-medium',\n\n          'text-gray-12',\n        ],\n      },\n    },\n    defaultVariants: {\n      orientation: dataListDefaultVariants.orientation,\n      variant: dataListDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;;AAIA,MAAa,4BAA4B,IACvC;CACE;CACA;CAEA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,UAAU,CAAC;GACX,YAAY,CAAC,UAAU;EACzB;EACA,SAAS;GACP,QAAQ,CAAC,cAAc;GACvB,MAAM,CACJ,eAEA,cACF;EACF;CACF;CACA,iBAAiB;EACf,aAAa,wBAAwB;EACrC,SAAS,wBAAwB;CACnC;AACF,CACF"}

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

@@ -2,7 +2,8 @@ import { useRender } from "@base-ui/react";
 //#region src/components/display/data-list/data-list-item-label.d.ts
 export type DataListItemLabelProps = useRender.ComponentProps<'dt'>;
 /**
- * Rótulo do item, renderizado como `dt`.
+ * Rótulo do item, renderizado como `dt`. É um `flex`, para caber um ícone ao lado do texto. Na
+ * orientação `horizontal`, tem largura mínima de 120px.
  */
 export declare const DataListItemLabel: {
   (props: DataListItemLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

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

@@ -1,14 +1,21 @@
 import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { useDataListContext } from "./use-data-list-context.js";
+import { dataListItemLabelVariants } from "./data-list-item-label-variants.js";
 import { mergeProps, useRender } from "@base-ui/react";
 //#region src/components/display/data-list/data-list-item-label.tsx
 /**
-* Rótulo do item, renderizado como `dt`.
+* Rótulo do item, renderizado como `dt`. É um `flex`, para caber um ícone ao lado do texto. Na
+* orientação `horizontal`, tem largura mínima de 120px.
 */
 const DataListItemLabel = (props) => {
 	const { render, className, ...rest } = props;
+	const { orientation, variant } = useDataListContext();
 	const baseProps = {
 		"data-component": "DataList.ItemLabel",
-		className: mergeTwClassNames(["text-gray-11"], className)
+		className: mergeTwClassNames(dataListItemLabelVariants({
+			orientation,
+			variant
+		}), className)
 	};
 	return useRender({
 		render,

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

@@ -1 +1 @@
-{"version":3,"file":"data-list-item-label.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-item-label.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type DataListItemLabelProps = useRender.ComponentProps<'dt'>;\n\n/**\n * Rótulo do item, renderizado como `dt`.\n */\nexport const DataListItemLabel = (props: DataListItemLabelProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'DataList.ItemLabel',\n    className: mergeTwClassNames(['text-gray-11'], className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'dt',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDataListItemLabel.displayName = 'DataList.ItemLabel';\n"],"mappings":";;;;;;AAQA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,cAAc,GAAG,SAAS;CAC1D;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,kBAAkB,cAAc"}
+{"version":3,"file":"data-list-item-label.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-item-label.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\nimport { dataListItemLabelVariants } from './data-list-item-label-variants';\nimport { useDataListContext } from './use-data-list-context';\n\nexport type DataListItemLabelProps = useRender.ComponentProps<'dt'>;\n\n/**\n * Rótulo do item, renderizado como `dt`. É um `flex`, para caber um ícone ao lado do texto. Na\n * orientação `horizontal`, tem largura mínima de 120px.\n */\nexport const DataListItemLabel = (props: DataListItemLabelProps) => {\n  const { render, className, ...rest } = props;\n\n  const { orientation, variant } = useDataListContext();\n\n  const baseProps = {\n    'data-component': 'DataList.ItemLabel',\n    className: mergeTwClassNames(\n      dataListItemLabelVariants({ orientation, variant }),\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'dt',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDataListItemLabel.displayName = 'DataList.ItemLabel';\n"],"mappings":";;;;;;;;;AAWA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,EAAE,aAAa,YAAY,mBAAmB;CAEpD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT,0BAA0B;GAAE;GAAa;EAAQ,CAAC,GAClD,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,kBAAkB,cAAc"}

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

@@ -1,6 +1,6 @@
 //#region src/components/display/data-list/data-list-item-value-variants.d.ts
 export declare const dataListItemValueVariants: (props?: ({
-  orientation?: "vertical" | "horizontal" | null | undefined;
+  variant?: "subtle" | "bold" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=data-list-item-value-variants.d.ts.map

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

@@ -1,12 +1,16 @@
 import { dataListDefaultVariants } from "./use-data-list-context.js";
 import { cva } from "class-variance-authority";
 //#region src/components/display/data-list/data-list-item-value-variants.ts
-const dataListItemValueVariants = cva(["text-gray-12"], {
-	variants: { orientation: {
-		horizontal: ["text-start"],
-		vertical: ["text-end"]
+const dataListItemValueVariants = cva([
+	"flex",
+	"min-w-0",
+	"flex-1"
+], {
+	variants: { variant: {
+		subtle: ["text-gray-12"],
+		bold: ["text-gray-11"]
 	} },
-	defaultVariants: { orientation: dataListDefaultVariants.orientation }
+	defaultVariants: { variant: dataListDefaultVariants.variant }
 });
 //#endregion
 export { dataListItemValueVariants };

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

@@ -1 +1 @@
-{"version":3,"file":"data-list-item-value-variants.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-item-value-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { dataListDefaultVariants } from './use-data-list-context';\n\nexport const dataListItemValueVariants = cva(['text-gray-12'], {\n  variants: {\n    orientation: {\n      horizontal: ['text-start'],\n      vertical: ['text-end'],\n    },\n  },\n  defaultVariants: {\n    orientation: dataListDefaultVariants.orientation,\n  },\n});\n"],"mappings":";;;AAGA,MAAa,4BAA4B,IAAI,CAAC,cAAc,GAAG;CAC7D,UAAU,EACR,aAAa;EACX,YAAY,CAAC,YAAY;EACzB,UAAU,CAAC,UAAU;CACvB,EACF;CACA,iBAAiB,EACf,aAAa,wBAAwB,YACvC;AACF,CAAC"}
+{"version":3,"file":"data-list-item-value-variants.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-item-value-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nimport { dataListDefaultVariants } from './use-data-list-context';\n\nexport const dataListItemValueVariants = cva(\n  [\n    'flex',\n    'min-w-0',\n\n    'flex-1',\n  ],\n  {\n    variants: {\n      variant: {\n        subtle: ['text-gray-12'],\n        bold: ['text-gray-11'],\n      },\n    },\n    defaultVariants: {\n      variant: dataListDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;;AAIA,MAAa,4BAA4B,IACvC;CACE;CACA;CAEA;AACF,GACA;CACE,UAAU,EACR,SAAS;EACP,QAAQ,CAAC,cAAc;EACvB,MAAM,CAAC,cAAc;CACvB,EACF;CACA,iBAAiB,EACf,SAAS,wBAAwB,QACnC;AACF,CACF"}

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

@@ -2,7 +2,8 @@ import { useRender } from "@base-ui/react";
 //#region src/components/display/data-list/data-list-item-value.d.ts
 export type DataListItemValueProps = useRender.ComponentProps<'dd'>;
 /**
- * Valor do item, renderizado como `dd`. Na orientação `vertical`, alinha à direita.
+ * Valor do item, renderizado como `dd`. Ocupa o espaço que sobra ao lado do rótulo e quebra o texto
+ * longo dentro da própria coluna.
  */
 export declare const DataListItemValue: {
   (props: DataListItemValueProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

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

@@ -4,14 +4,15 @@ import { dataListItemValueVariants } from "./data-list-item-value-variants.js";
 import { mergeProps, useRender } from "@base-ui/react";
 //#region src/components/display/data-list/data-list-item-value.tsx
 /**
-* Valor do item, renderizado como `dd`. Na orientação `vertical`, alinha à direita.
+* Valor do item, renderizado como `dd`. Ocupa o espaço que sobra ao lado do rótulo e quebra o texto
+* longo dentro da própria coluna.
 */
 const DataListItemValue = (props) => {
 	const { render, className, ...rest } = props;
-	const { orientation } = useDataListContext();
+	const { variant } = useDataListContext();
 	const baseProps = {
 		"data-component": "DataList.ItemValue",
-		className: mergeTwClassNames(dataListItemValueVariants({ orientation }), className)
+		className: mergeTwClassNames(dataListItemValueVariants({ variant }), className)
 	};
 	return useRender({
 		render,

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

@@ -1 +1 @@
-{"version":3,"file":"data-list-item-value.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-item-value.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\nimport { dataListItemValueVariants } from './data-list-item-value-variants';\nimport { useDataListContext } from './use-data-list-context';\n\nexport type DataListItemValueProps = useRender.ComponentProps<'dd'>;\n\n/**\n * Valor do item, renderizado como `dd`. Na orientação `vertical`, alinha à direita.\n */\nexport const DataListItemValue = (props: DataListItemValueProps) => {\n  const { render, className, ...rest } = props;\n\n  const { orientation } = useDataListContext();\n\n  const baseProps = {\n    'data-component': 'DataList.ItemValue',\n    className: mergeTwClassNames(\n      dataListItemValueVariants({ orientation }),\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'dd',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDataListItemValue.displayName = 'DataList.ItemValue';\n"],"mappings":";;;;;;;;AAUA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,EAAE,gBAAgB,mBAAmB;CAE3C,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT,0BAA0B,EAAE,YAAY,CAAC,GACzC,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,kBAAkB,cAAc"}
+{"version":3,"file":"data-list-item-value.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-item-value.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\nimport { dataListItemValueVariants } from './data-list-item-value-variants';\nimport { useDataListContext } from './use-data-list-context';\n\nexport type DataListItemValueProps = useRender.ComponentProps<'dd'>;\n\n/**\n * Valor do item, renderizado como `dd`. Ocupa o espaço que sobra ao lado do rótulo e quebra o texto\n * longo dentro da própria coluna.\n */\nexport const DataListItemValue = (props: DataListItemValueProps) => {\n  const { render, className, ...rest } = props;\n\n  const { variant } = useDataListContext();\n\n  const baseProps = {\n    'data-component': 'DataList.ItemValue',\n    className: mergeTwClassNames(\n      dataListItemValueVariants({ variant }),\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'dd',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDataListItemValue.displayName = 'DataList.ItemValue';\n"],"mappings":";;;;;;;;;AAWA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,EAAE,YAAY,mBAAmB;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT,0BAA0B,EAAE,QAAQ,CAAC,GACrC,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,kBAAkB,cAAc"}

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

@@ -1,11 +1,7 @@
 //#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, 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;
+  orientation?: "horizontal" | "vertical" | 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

@@ -1,32 +1,30 @@
 import { dataListDefaultVariants } from "./use-data-list-context.js";
 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, 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",
-			"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 }
+const dataListItemVariants = cva([], {
+	variants: {
+		orientation: {
+			vertical: [
+				"flex",
+				"flex-col",
+				"gap-1"
+			],
+			horizontal: [
+				"inline-flex",
+				"items-center",
+				"gap-4"
+			]
+		},
+		size: {
+			sm: ["text-xs/4"],
+			md: ["text-sm/5"],
+			lg: ["text-base/6"]
+		}
+	},
+	defaultVariants: {
+		orientation: dataListDefaultVariants.orientation,
+		size: dataListDefaultVariants.size
+	}
 });
 //#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, 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"}
+{"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';\n\nimport { dataListDefaultVariants } from './use-data-list-context';\n\nexport const dataListItemVariants = cva([], {\n  variants: {\n    orientation: {\n      vertical: [\n        'flex',\n        'flex-col',\n\n        'gap-1',\n      ],\n      horizontal: [\n        'inline-flex',\n        'items-center',\n\n        'gap-4',\n      ],\n    },\n    size: {\n      sm: ['text-xs/4'],\n      md: ['text-sm/5'],\n      lg: ['text-base/6'],\n    },\n  },\n  defaultVariants: {\n    orientation: dataListDefaultVariants.orientation,\n    size: dataListDefaultVariants.size,\n  },\n});\n"],"mappings":";;;AAIA,MAAa,uBAAuB,IAAI,CAAC,GAAG;CAC1C,UAAU;EACR,aAAa;GACX,UAAU;IACR;IACA;IAEA;GACF;GACA,YAAY;IACV;IACA;IAEA;GACF;EACF;EACA,MAAM;GACJ,IAAI,CAAC,WAAW;GAChB,IAAI,CAAC,WAAW;GAChB,IAAI,CAAC,aAAa;EACpB;CACF;CACA,iBAAiB;EACf,aAAa,wBAAwB;EACrC,MAAM,wBAAwB;CAChC;AACF,CAAC"}

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

@@ -2,7 +2,8 @@ import { useRender } from "@base-ui/react";
 //#region src/components/display/data-list/data-list-item.d.ts
 export type DataListItemProps = useRender.ComponentProps<'div'>;
 /**
- * Um par rótulo e valor. O `div` em volta de `dt` e `dd` é válido dentro de `dl`.
+ * Um par rótulo e valor, com a orientação e o tamanho do `Root`. O `div` em volta de `dt` e `dd` é
+ * válido dentro de `dl`.
  */
 export declare const DataListItem: {
   (props: DataListItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

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

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

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

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

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

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

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

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

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

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