@lucasbernardosn/react-ui 0.2.0 → 0.4.0

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-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?: "horizontal" | "vertical" | 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?: "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?: "horizontal" | "vertical" | 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"}

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

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

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

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

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

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

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

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

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

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