@lucasbernardosn/react-ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,52 @@
+import { Optional } from "@lucasbernardosn/utils";
+import * as ZagClipboard from "@zag-js/clipboard";
+import { PropTypes } from "@zag-js/react";
+//#region src/components/display/clipboard/use-clipboard.d.ts
+/**
+ * Textos acessíveis padrão do Clipboard.
+ *
+ * O Zag traz os rótulos em inglês; aqui eles são substituídos pelos
+ * equivalentes em pt-BR. Passar `translations` no `Clipboard.Root` ou no
+ * `useClipboard` sobrescreve apenas as chaves informadas.
+ */
+export declare const clipboardTranslations: ZagClipboard.IntlTranslations;
+/**
+ * Propriedades do hook `useClipboard`.
+ *
+ * São as mesmas opções aceitas pelo `Clipboard.Root`, com o `id` opcional — um
+ * id único é gerado quando ele não é informado.
+ */
+export type UseClipboardProps = Optional<ZagClipboard.Props, 'id'>;
+/**
+ * Retorno do hook `useClipboard`: a API completa da área de transferência, com
+ * o valor, o estado de cópia, o método `copy` e as props de cada parte.
+ */
+export type UseClipboardReturn = ZagClipboard.Api<PropTypes>;
+/**
+ * Cria e gerencia o estado de um Clipboard.
+ *
+ * Use junto do `Clipboard.RootProvider` quando for preciso ler ou comandar a
+ * cópia de fora da subárvore do componente — um contador de cópias, um botão
+ * externo, ou a exibição do valor em um componente irmão. Nos casos comuns
+ * prefira o `Clipboard.Root`, que chama este hook internamente.
+ *
+ * @example
+ * ```tsx
+ * const clipboard = useClipboard({ value: 'https://github.com' });
+ *
+ * return (
+ *   <>
+ *     <span>{clipboard.copied ? 'Copiado!' : clipboard.value}</span>
+ *
+ *     <Clipboard.RootProvider value={clipboard}>
+ *       <Clipboard.Trigger>
+ *         <Clipboard.Indicator />
+ *       </Clipboard.Trigger>
+ *     </Clipboard.RootProvider>
+ *   </>
+ * );
+ * ```
+ */
+export declare const useClipboard: (props?: UseClipboardProps) => UseClipboardReturn;
+//#endregion
+//# sourceMappingURL=use-clipboard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-clipboard.d.ts","names":[],"sources":["../../../../src/components/display/clipboard/use-clipboard.ts"],"mappings":";;;;;;;;;;;qBAYa,uBAAuB,aAAa;;;;;;;YAarC,oBAAoB,SAAS,aAAa;;;;;YAM1C,qBAAqB,aAAa,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;qBA2BrC,eAAgB,QAAQ,sBAAoB"}

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

@@ -0,0 +1,53 @@
+import { useId } from "react";
+import * as ZagClipboard from "@zag-js/clipboard";
+import { normalizeProps, useMachine } from "@zag-js/react";
+//#region src/components/display/clipboard/use-clipboard.ts
+/**
+* Textos acessíveis padrão do Clipboard.
+*
+* O Zag traz os rótulos em inglês; aqui eles são substituídos pelos
+* equivalentes em pt-BR. Passar `translations` no `Clipboard.Root` ou no
+* `useClipboard` sobrescreve apenas as chaves informadas.
+*/
+const clipboardTranslations = { triggerLabel: (copied) => copied ? "Copiado para a área de transferência" : "Copiar para a área de transferência" };
+/**
+* Cria e gerencia o estado de um Clipboard.
+*
+* Use junto do `Clipboard.RootProvider` quando for preciso ler ou comandar a
+* cópia de fora da subárvore do componente — um contador de cópias, um botão
+* externo, ou a exibição do valor em um componente irmão. Nos casos comuns
+* prefira o `Clipboard.Root`, que chama este hook internamente.
+*
+* @example
+* ```tsx
+* const clipboard = useClipboard({ value: 'https://github.com' });
+*
+* return (
+*   <>
+*     <span>{clipboard.copied ? 'Copiado!' : clipboard.value}</span>
+*
+*     <Clipboard.RootProvider value={clipboard}>
+*       <Clipboard.Trigger>
+*         <Clipboard.Indicator />
+*       </Clipboard.Trigger>
+*     </Clipboard.RootProvider>
+*   </>
+* );
+* ```
+*/
+const useClipboard = (props) => {
+	const machineProps = {
+		id: useId(),
+		...props,
+		translations: {
+			...clipboardTranslations,
+			...props?.translations
+		}
+	};
+	const service = useMachine(ZagClipboard.machine, machineProps);
+	return ZagClipboard.connect(service, normalizeProps);
+};
+//#endregion
+export { clipboardTranslations, useClipboard };
+
+//# sourceMappingURL=use-clipboard.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,12 @@
+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`.
+ */
+export declare const DataListItemLabel: {
+  (props: DataListItemLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-list-item-label.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-list-item-label.d.ts","names":[],"sources":["../../../../src/components/display/data-list/data-list-item-label.tsx"],"mappings":";;YAGY,yBAAyB,UAAU;;;;qBAKlC;GAA4B,OAAA,yCAAsB,+CAAA"}

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

@@ -0,0 +1,23 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.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`.
+*/
+const DataListItemLabel = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "DataList.ItemLabel",
+		className: mergeTwClassNames(["text-gray-11"], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "dt",
+		props: mergeProps(baseProps, rest)
+	});
+};
+DataListItemLabel.displayName = "DataList.ItemLabel";
+//#endregion
+export { DataListItemLabel };
+
+//# sourceMappingURL=data-list-item-label.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +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;
+} & 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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-list-item-value-variants.d.ts","names":[],"sources":["../../../../src/components/display/data-list/data-list-item-value-variants.ts"],"mappings":";qBAGa,4BAAyB;;6CAUpC"}

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

@@ -0,0 +1,14 @@
+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"]
+	} },
+	defaultVariants: { orientation: dataListDefaultVariants.orientation }
+});
+//#endregion
+export { dataListItemValueVariants };
+
+//# sourceMappingURL=data-list-item-value-variants.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,12 @@
+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.
+ */
+export declare const DataListItemValue: {
+  (props: DataListItemValueProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-list-item-value.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-list-item-value.d.ts","names":[],"sources":["../../../../src/components/display/data-list/data-list-item-value.tsx"],"mappings":";;YAKY,yBAAyB,UAAU;;;;qBAKlC;GAA4B,OAAA,yCAAsB,+CAAA"}

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

@@ -0,0 +1,26 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { useDataListContext } from "./use-data-list-context.js";
+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.
+*/
+const DataListItemValue = (props) => {
+	const { render, className, ...rest } = props;
+	const { orientation } = useDataListContext();
+	const baseProps = {
+		"data-component": "DataList.ItemValue",
+		className: mergeTwClassNames(dataListItemValueVariants({ orientation }), className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "dd",
+		props: mergeProps(baseProps, rest)
+	});
+};
+DataListItemValue.displayName = "DataList.ItemValue";
+//#endregion
+export { DataListItemValue };
+
+//# sourceMappingURL=data-list-item-value.js.map

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

@@ -0,0 +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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-list-item-variants.d.ts","names":[],"sources":["../../../../src/components/display/data-list/data-list-item-variants.ts"],"mappings":";;;;;;qBAQa,uBAAoB;;;6CA6D/B"}

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

@@ -0,0 +1,72 @@
+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; em `vertical` eles empilham e o respiro é vertical. Por isso o `size` só tem valor nos
+* `compoundVariants`.
+*/
+const dataListItemVariants = cva(["flex"], {
+	variants: {
+		orientation: {
+			horizontal: [
+				"flex-col",
+				"items-start",
+				"first:pl-0",
+				"last:pr-0"
+			],
+			vertical: [
+				"flex-row",
+				"items-center",
+				"justify-between",
+				"first:pt-0",
+				"last:pb-0"
+			]
+		},
+		size: {
+			sm: [],
+			md: [],
+			lg: []
+		}
+	},
+	compoundVariants: [
+		{
+			orientation: "horizontal",
+			size: "sm",
+			className: ["gap-0.5", "px-1.5"]
+		},
+		{
+			orientation: "horizontal",
+			size: "md",
+			className: ["gap-1", "px-2"]
+		},
+		{
+			orientation: "horizontal",
+			size: "lg",
+			className: ["gap-2", "px-3"]
+		},
+		{
+			orientation: "vertical",
+			size: "sm",
+			className: ["gap-4", "py-2"]
+		},
+		{
+			orientation: "vertical",
+			size: "md",
+			className: ["gap-4", "py-2.5"]
+		},
+		{
+			orientation: "vertical",
+			size: "lg",
+			className: ["gap-8", "py-3.5"]
+		}
+	],
+	defaultVariants: {
+		orientation: dataListDefaultVariants.orientation,
+		size: dataListDefaultVariants.size
+	}
+});
+//#endregion
+export { dataListItemVariants };
+
+//# sourceMappingURL=data-list-item-variants.js.map

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

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

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

@@ -0,0 +1,12 @@
+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`.
+ */
+export declare const DataListItem: {
+  (props: DataListItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-list-item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-list-item.d.ts","names":[],"sources":["../../../../src/components/display/data-list/data-list-item.tsx"],"mappings":";;YAKY,oBAAoB,UAAU;;;;qBAK7B;GAAuB,OAAA,oCAAiB,+CAAA"}

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

@@ -0,0 +1,29 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { useDataListContext } from "./use-data-list-context.js";
+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`.
+*/
+const DataListItem = (props) => {
+	const { render, className, ...rest } = props;
+	const { orientation, size } = useDataListContext();
+	const baseProps = {
+		"data-component": "DataList.Item",
+		className: mergeTwClassNames(dataListItemVariants({
+			orientation,
+			size
+		}), className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+DataListItem.displayName = "DataList.Item";
+//#endregion
+export { DataListItem };
+
+//# sourceMappingURL=data-list-item.js.map

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

@@ -0,0 +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, 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":";;;;;;;;AAUA,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

@@ -0,0 +1,8 @@
+//#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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-list-root-variants.d.ts","names":[],"sources":["../../../../src/components/display/data-list/data-list-root-variants.ts"],"mappings":";qBAGa,uBAAoB;;;;6CAiC/B"}

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

@@ -0,0 +1,38 @@
+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"], {
+	variants: {
+		divided: {
+			true: [],
+			false: []
+		},
+		orientation: {
+			horizontal: ["flex-row"],
+			vertical: ["flex-col"]
+		},
+		size: {
+			sm: ["text-xs"],
+			md: ["text-sm"],
+			lg: ["text-base"]
+		}
+	},
+	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,
+		size: dataListDefaultVariants.size
+	}
+});
+//#endregion
+export { dataListRootVariants };
+
+//# sourceMappingURL=data-list-root-variants.js.map

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

@@ -0,0 +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'], {\n  variants: {\n    divided: {\n      true: [],\n      false: [],\n    },\n    orientation: {\n      horizontal: ['flex-row'],\n      vertical: ['flex-col'],\n    },\n    size: {\n      sm: ['text-xs'],\n      md: ['text-sm'],\n      lg: ['text-base'],\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    size: dataListDefaultVariants.size,\n  },\n});\n"],"mappings":";;;AAGA,MAAa,uBAAuB,IAAI,CAAC,MAAM,GAAG;CAChD,UAAU;EACR,SAAS;GACP,MAAM,CAAC;GACP,OAAO,CAAC;EACV;EACA,aAAa;GACX,YAAY,CAAC,UAAU;GACvB,UAAU,CAAC,UAAU;EACvB;EACA,MAAM;GACJ,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,WAAW;EAClB;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;EACrC,MAAM,wBAAwB;CAChC;AACF,CAAC"}

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

@@ -0,0 +1,24 @@
+import { DataListVariants } from "./use-data-list-context.js";
+import { MergeOverride } from "@lucasbernardosn/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`.
+ *
+ * @example
+ * ```tsx
+ * <DataList.Root>
+ *   <DataList.Item>
+ *     <DataList.ItemLabel>Status</DataList.ItemLabel>
+ *     <DataList.ItemValue>Ativo</DataList.ItemValue>
+ *   </DataList.Item>
+ * </DataList.Root>
+ * ```
+ */
+export declare const DataListRoot: {
+  (props: DataListRootProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-list-root.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-list-root.d.ts","names":[],"sources":["../../../../src/components/display/data-list/data-list-root.tsx"],"mappings":";;;;YASY,oBAAoB,cAC9B,UAAU,sBACV;;;;;;;;;;;;;;qBAkBW;GAAuB,OAAA,oCAAiB,IAAA"}

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

@@ -0,0 +1,46 @@
+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 { 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`.
+*
+* @example
+* ```tsx
+* <DataList.Root>
+*   <DataList.Item>
+*     <DataList.ItemLabel>Status</DataList.ItemLabel>
+*     <DataList.ItemValue>Ativo</DataList.ItemValue>
+*   </DataList.Item>
+* </DataList.Root>
+* ```
+*/
+const DataListRoot = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, [
+		"divided",
+		"orientation",
+		"size"
+	]);
+	const { render, className, ...rest } = elementProps;
+	const baseProps = {
+		"data-component": "DataList.Root",
+		className: mergeTwClassNames(dataListRootVariants(variantProps), className)
+	};
+	return /* @__PURE__ */ jsx(DataListContextProvider, {
+		value: variantProps,
+		children: useRender({
+			render,
+			defaultTagName: "dl",
+			props: mergeProps(baseProps, rest)
+		})
+	});
+};
+DataListRoot.displayName = "DataList.Root";
+//#endregion
+export { DataListRoot };
+
+//# sourceMappingURL=data-list-root.js.map

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

@@ -0,0 +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    'size',\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;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/index.d.ts

@@ -0,0 +1,2 @@
+import { index_parts_d_exports } from "./index.parts.js";
+export { index_parts_d_exports as DataList };

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

@@ -0,0 +1,2 @@
+import { index_parts_exports } from "./index.parts.js";
+export { index_parts_exports as DataList };

package/dist/components/display/data-list/index.parts.d.ts

@@ -0,0 +1,11 @@
+import { DataListItemLabel, DataListItemLabelProps } from "./data-list-item-label.js";
+import { DataListItemValue, DataListItemValueProps } from "./data-list-item-value.js";
+import { DataListItem, DataListItemProps } from "./data-list-item.js";
+import { DataListVariants } from "./use-data-list-context.js";
+import { DataListRoot, DataListRootProps } from "./data-list-root.js";
+declare namespace index_parts_d_exports {
+  export { DataListItem as Item, DataListItemLabel as ItemLabel, DataListItemLabelProps as ItemLabelProps, DataListItemProps as ItemProps, DataListItemValue as ItemValue, DataListItemValueProps as ItemValueProps, DataListRoot as Root, DataListRootProps as RootProps, DataListVariants as Variants };
+}
+//#endregion
+export { DataListItem as Item, DataListItemLabel as ItemLabel, type DataListItemLabelProps as ItemLabelProps, type DataListItemProps as ItemProps, DataListItemValue as ItemValue, type DataListItemValueProps as ItemValueProps, DataListRoot as Root, type DataListRootProps as RootProps, type DataListVariants as Variants, index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

package/dist/components/display/data-list/index.parts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.d.ts","names":[],"sources":["../../../../src/components/display/data-list/index.parts.ts"],"mappings":""}

package/dist/components/display/data-list/index.parts.js

@@ -0,0 +1,16 @@
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { DataListItemLabel } from "./data-list-item-label.js";
+import { DataListItemValue } from "./data-list-item-value.js";
+import { DataListItem } from "./data-list-item.js";
+import { DataListRoot } from "./data-list-root.js";
+//#region src/components/display/data-list/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Item: () => DataListItem,
+	ItemLabel: () => DataListItemLabel,
+	ItemValue: () => DataListItemValue,
+	Root: () => DataListRoot
+});
+//#endregion
+export { DataListItem as Item, DataListItemLabel as ItemLabel, DataListItemValue as ItemValue, DataListRoot as Root, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

package/dist/components/display/data-list/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/components/display/data-list/index.parts.ts"],"sourcesContent":["export { DataListItem as Item } from './data-list-item';\nexport { DataListItemLabel as ItemLabel } from './data-list-item-label';\nexport { DataListItemValue as ItemValue } from './data-list-item-value';\nexport { DataListRoot as Root } from './data-list-root';\n\n/* types */\n\nexport type { DataListItemProps as ItemProps } from './data-list-item';\nexport type { DataListItemLabelProps as ItemLabelProps } from './data-list-item-label';\nexport type { DataListItemValueProps as ItemValueProps } from './data-list-item-value';\nexport type { DataListRootProps as RootProps } from './data-list-root';\nexport type { DataListVariants as Variants } from './use-data-list-context';\n"],"mappings":""}

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

@@ -0,0 +1,29 @@
+//#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.
+ */
+export type DataListVariants = {
+  /**
+   * Linha entre os itens.
+   *
+   * @default false
+   */
+  divided?: boolean;
+  /**
+   * 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.
+   *
+   * @default 'vertical'
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * Tamanho do texto e espaçamento dos itens.
+   *
+   * @default 'md'
+   */
+  size?: 'sm' | 'md' | 'lg';
+};
+export declare const dataListDefaultVariants: Required<DataListVariants>;
+export declare const DataListContextProvider: import("react").Provider<DataListVariants>, useDataListContext: () => DataListVariants;
+//#endregion
+//# sourceMappingURL=use-data-list-context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-data-list-context.d.ts","names":[],"sources":["../../../../src/components/display/data-list/use-data-list-context.ts"],"mappings":";;;;YAKY;;;;;;EAMV;;;;;;;EAOA;;;;;;EAMA;;qBAGW,yBAAyB,SAAS;qBAMjC,yCAAuB,SAAA,mBAAE,0BAAkB"}