@lucasbernardosn/react-ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,15 @@
+import { createContext } from "@lucasbernardosn/react-utils";
+//#region src/components/display/data-list/use-data-list-context.ts
+const dataListDefaultVariants = {
+	divided: false,
+	orientation: "vertical",
+	size: "md"
+};
+const [DataListContextProvider, useDataListContext] = createContext({
+	name: "DataListContext",
+	providers: ["DataList.Root"]
+});
+//#endregion
+export { DataListContextProvider, dataListDefaultVariants, useDataListContext };
+
+//# sourceMappingURL=use-data-list-context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-data-list-context.js","names":[],"sources":["../../../../src/components/display/data-list/use-data-list-context.ts"],"sourcesContent":["import { createContext } from '@lucasbernardosn/react-utils';\n\n/**\n * Variantes do DataList. Informadas no `DataList.Root` e repassadas às partes por contexto.\n */\nexport type DataListVariants = {\n  /**\n   * Linha entre os itens.\n   *\n   * @default false\n   */\n  divided?: boolean;\n  /**\n   * Orientação da lista, não do par rótulo/valor: `vertical` empilha os itens, com rótulo e valor\n   * lado a lado; `horizontal` põe os itens em linha, com o valor abaixo do rótulo.\n   *\n   * @default 'vertical'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * Tamanho do texto e espaçamento dos itens.\n   *\n   * @default 'md'\n   */\n  size?: 'sm' | 'md' | 'lg';\n};\n\nexport const dataListDefaultVariants: Required<DataListVariants> = {\n  divided: false,\n  orientation: 'vertical',\n  size: 'md',\n};\n\nexport const [DataListContextProvider, useDataListContext] =\n  createContext<DataListVariants>({\n    name: 'DataListContext',\n    providers: ['DataList.Root'],\n  });\n"],"mappings":";;AA2BA,MAAa,0BAAsD;CACjE,SAAS;CACT,aAAa;CACb,MAAM;AACR;AAEA,MAAa,CAAC,yBAAyB,sBACrC,cAAgC;CAC9B,MAAM;CACN,WAAW,CAAC,eAAe;AAC7B,CAAC"}

package/dist/components/display/icon/icon.d.ts

@@ -0,0 +1,30 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/display/icon/icon.d.ts
+export type IconProps = useRender.ComponentProps<'svg'>;
+/**
+ * Padroniza um ícone passado em `render`: não encolhe em flex, mede `1em` (acompanha o texto ao
+ * redor) e recebe o traço da lib (`weight="bold"` para Phosphor, `strokeWidth={2.5}` para ícones
+ * de traço). O tamanho fixo vem por `className` (`size-5`), não pela prop `size` da lib de ícone,
+ * que o CSS sobrescreve; dentro de um componente, vale o `[&_svg]:size-*` dele.
+ *
+ * É decorativo por padrão (`aria-hidden`). Para um ícone com significado próprio, sem texto ao
+ * lado, passe `aria-hidden={false}`, `role="img"` e `aria-label`.
+ *
+ * @example
+ * ```tsx
+ * <Icon render={<PlusIcon />} />
+ *
+ * <Icon
+ *   render={<WarningIcon />}
+ *   aria-hidden={false}
+ *   role="img"
+ *   aria-label="Boleto vencido"
+ * />
+ * ```
+ */
+export declare const Icon: {
+  (props: IconProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=icon.d.ts.map

package/dist/components/display/icon/icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","names":[],"sources":["../../../../src/components/display/icon/icon.tsx"],"mappings":";;YAGY,YAAY,UAAU;;;;;;;;;;;;;;;;;;;;;;qBAuBrB;GAAe,OAAA,4BAAS,+CAAA"}

package/dist/components/display/icon/icon.js

@@ -0,0 +1,44 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/display/icon/icon.tsx
+/**
+* Padroniza um ícone passado em `render`: não encolhe em flex, mede `1em` (acompanha o texto ao
+* redor) e recebe o traço da lib (`weight="bold"` para Phosphor, `strokeWidth={2.5}` para ícones
+* de traço). O tamanho fixo vem por `className` (`size-5`), não pela prop `size` da lib de ícone,
+* que o CSS sobrescreve; dentro de um componente, vale o `[&_svg]:size-*` dele.
+*
+* É decorativo por padrão (`aria-hidden`). Para um ícone com significado próprio, sem texto ao
+* lado, passe `aria-hidden={false}`, `role="img"` e `aria-label`.
+*
+* @example
+* ```tsx
+* <Icon render={<PlusIcon />} />
+*
+* <Icon
+*   render={<WarningIcon />}
+*   aria-hidden={false}
+*   role="img"
+*   aria-label="Boleto vencido"
+* />
+* ```
+*/
+const Icon = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "Icon",
+		"aria-hidden": true,
+		className: mergeTwClassNames(["shrink-0", "size-[1em]"], className),
+		weight: "bold",
+		strokeWidth: 2.5
+	};
+	return useRender({
+		defaultTagName: "svg",
+		render,
+		props: mergeProps(baseProps, rest)
+	});
+};
+Icon.displayName = "Icon";
+//#endregion
+export { Icon };
+
+//# sourceMappingURL=icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","names":[],"sources":["../../../../src/components/display/icon/icon.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type IconProps = useRender.ComponentProps<'svg'>;\n\n/**\n * Padroniza um ícone passado em `render`: não encolhe em flex, mede `1em` (acompanha o texto ao\n * redor) e recebe o traço da lib (`weight=\"bold\"` para Phosphor, `strokeWidth={2.5}` para ícones\n * de traço). O tamanho fixo vem por `className` (`size-5`), não pela prop `size` da lib de ícone,\n * que o CSS sobrescreve; dentro de um componente, vale o `[&_svg]:size-*` dele.\n *\n * É decorativo por padrão (`aria-hidden`). Para um ícone com significado próprio, sem texto ao\n * lado, passe `aria-hidden={false}`, `role=\"img\"` e `aria-label`.\n *\n * @example\n * ```tsx\n * <Icon render={<PlusIcon />} />\n *\n * <Icon\n *   render={<WarningIcon />}\n *   aria-hidden={false}\n *   role=\"img\"\n *   aria-label=\"Boleto vencido\"\n * />\n * ```\n */\nexport const Icon = (props: IconProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Icon',\n    'aria-hidden': true,\n    className: mergeTwClassNames(['shrink-0', 'size-[1em]'], className),\n    weight: 'bold',\n    strokeWidth: 2.5,\n  };\n\n  return useRender({\n    defaultTagName: 'svg',\n    render,\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nIcon.displayName = 'Icon';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,QAAQ,UAAqB;CACxC,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,eAAe;EACf,WAAW,kBAAkB,CAAC,YAAY,YAAY,GAAG,SAAS;EAClE,QAAQ;EACR,aAAa;CACf;CAEA,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,KAAK,cAAc"}

package/dist/components/display/icon/index.d.ts

@@ -0,0 +1,2 @@
+import { Icon, IconProps } from "./icon.js";
+export { Icon, type IconProps };

package/dist/components/display/icon/index.js

@@ -0,0 +1,2 @@
+import { Icon } from "./icon.js";
+export { Icon };

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

@@ -0,0 +1,13 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/feedback/empty-state/empty-state-content.d.ts
+export type EmptyStateContentProps = useRender.ComponentProps<'div'>;
+/**
+ * Agrupa título e descrição, mais próximos entre si do que das outras partes, no espaço do `size`
+ * do `EmptyState.Root`.
+ */
+export declare const EmptyStateContent: {
+  (props: EmptyStateContentProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=empty-state-content.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state-content.d.ts","names":[],"sources":["../../../../src/components/feedback/empty-state/empty-state-content.tsx"],"mappings":";;YAGY,yBAAyB,UAAU;;;;;qBAMlC;GAA4B,OAAA,yCAAsB,+CAAA"}

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

@@ -0,0 +1,28 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/feedback/empty-state/empty-state-content.tsx
+/**
+* Agrupa título e descrição, mais próximos entre si do que das outras partes, no espaço do `size`
+* do `EmptyState.Root`.
+*/
+const EmptyStateContent = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "EmptyState.Content",
+		className: mergeTwClassNames([
+			"flex",
+			"flex-col",
+			"gap-(--empty-state-header-gap,--spacing(0.5))"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+EmptyStateContent.displayName = "EmptyState.Content";
+//#endregion
+export { EmptyStateContent };
+
+//# sourceMappingURL=empty-state-content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state-content.js","names":[],"sources":["../../../../src/components/feedback/empty-state/empty-state-content.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type EmptyStateContentProps = useRender.ComponentProps<'div'>;\n\n/**\n * Agrupa título e descrição, mais próximos entre si do que das outras partes, no espaço do `size`\n * do `EmptyState.Root`.\n */\nexport const EmptyStateContent = (props: EmptyStateContentProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'EmptyState.Content',\n    className: mergeTwClassNames(\n      ['flex', 'flex-col', 'gap-(--empty-state-header-gap,--spacing(0.5))'],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nEmptyStateContent.displayName = 'EmptyState.Content';\n"],"mappings":";;;;;;;AASA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GAAC;GAAQ;GAAY;EAA+C,GACpE,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,kBAAkB,cAAc"}

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

@@ -0,0 +1,13 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/feedback/empty-state/empty-state-description.d.ts
+export type EmptyStateDescriptionProps = useRender.ComponentProps<'p'>;
+/**
+ * Texto de apoio do estado vazio, em tom mais fraco que o título, no tamanho e na entrelinha do
+ * `size` do `EmptyState.Root`.
+ */
+export declare const EmptyStateDescription: {
+  (props: EmptyStateDescriptionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=empty-state-description.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state-description.d.ts","names":[],"sources":["../../../../src/components/feedback/empty-state/empty-state-description.tsx"],"mappings":";;YAGY,6BAA6B,UAAU;;;;;qBAMtC;GAAgC,OAAA,6CAA0B,+CAAA"}

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

@@ -0,0 +1,29 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/feedback/empty-state/empty-state-description.tsx
+/**
+* Texto de apoio do estado vazio, em tom mais fraco que o título, no tamanho e na entrelinha do
+* `size` do `EmptyState.Root`.
+*/
+const EmptyStateDescription = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "EmptyState.Description",
+		className: mergeTwClassNames([
+			"text-(length:--empty-state-description-size,var(--text-sm))",
+			"leading-(--empty-state-description-leading,--spacing(5))",
+			"text-gray-11",
+			"text-pretty"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "p",
+		props: mergeProps(baseProps, rest)
+	});
+};
+EmptyStateDescription.displayName = "EmptyState.Description";
+//#endregion
+export { EmptyStateDescription };
+
+//# sourceMappingURL=empty-state-description.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state-description.js","names":[],"sources":["../../../../src/components/feedback/empty-state/empty-state-description.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type EmptyStateDescriptionProps = useRender.ComponentProps<'p'>;\n\n/**\n * Texto de apoio do estado vazio, em tom mais fraco que o título, no tamanho e na entrelinha do\n * `size` do `EmptyState.Root`.\n */\nexport const EmptyStateDescription = (props: EmptyStateDescriptionProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'EmptyState.Description',\n    className: mergeTwClassNames(\n      [\n        'text-(length:--empty-state-description-size,var(--text-sm))',\n        'leading-(--empty-state-description-leading,--spacing(5))',\n        'text-gray-11',\n        'text-pretty',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'p',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nEmptyStateDescription.displayName = 'EmptyState.Description';\n"],"mappings":";;;;;;;AASA,MAAa,yBAAyB,UAAsC;CAC1E,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,sBAAsB,cAAc"}

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

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

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

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

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

@@ -0,0 +1,33 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/feedback/empty-state/empty-state-indicator.tsx
+/**
+* Ícone ou ilustração do estado vazio. O tamanho vem do `font-size`, lido do `size` do
+* `EmptyState.Root`, e o `svg` mede `1em`: ícone, emoji e texto seguem a mesma escala, mesmo que o
+* ícone traga um tamanho próprio. Para outro tamanho, troque o `font-size` pela `className`.
+*/
+const EmptyStateIndicator = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "EmptyState.Indicator",
+		className: mergeTwClassNames([
+			"flex",
+			"items-center",
+			"justify-center",
+			"text-gray-12",
+			"text-(length:--empty-state-indicator-size,--spacing(9))",
+			"leading-none",
+			"[&_svg]:size-[1em]"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+EmptyStateIndicator.displayName = "EmptyState.Indicator";
+//#endregion
+export { EmptyStateIndicator };
+
+//# sourceMappingURL=empty-state-indicator.js.map

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,30 @@
+import { EmptyStateVariants } from "./empty-state-root-variants.js";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { useRender } from "@base-ui/react";
+//#region src/components/feedback/empty-state/empty-state-root.d.ts
+export type EmptyStateRootProps = MergeOverride<useRender.ComponentProps<'div'>, EmptyStateVariants>;
+/**
+ * Estado vazio: coluna centralizada que empilha indicador, título, descrição e ações. O `size`
+ * vale para todas as partes, pelas CSS variables que o `Root` declara; a `variant` decide se há
+ * moldura.
+ *
+ * @example
+ * ```tsx
+ * <EmptyState.Root>
+ *   <EmptyState.Indicator>
+ *     <InboxIcon />
+ *   </EmptyState.Indicator>
+ *
+ *   <EmptyState.Content>
+ *     <EmptyState.Title>Nenhuma mensagem</EmptyState.Title>
+ *     <EmptyState.Description>As mensagens recebidas aparecem aqui.</EmptyState.Description>
+ *   </EmptyState.Content>
+ * </EmptyState.Root>
+ * ```
+ */
+export declare const EmptyStateRoot: {
+  (props: EmptyStateRootProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=empty-state-root.d.ts.map

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

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

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

@@ -0,0 +1,43 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { emptyStateRootVariants } from "./empty-state-root-variants.js";
+import { createSplitProps } from "@lucasbernardosn/utils";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/feedback/empty-state/empty-state-root.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Estado vazio: coluna centralizada que empilha indicador, título, descrição e ações. O `size`
+* vale para todas as partes, pelas CSS variables que o `Root` declara; a `variant` decide se há
+* moldura.
+*
+* @example
+* ```tsx
+* <EmptyState.Root>
+*   <EmptyState.Indicator>
+*     <InboxIcon />
+*   </EmptyState.Indicator>
+*
+*   <EmptyState.Content>
+*     <EmptyState.Title>Nenhuma mensagem</EmptyState.Title>
+*     <EmptyState.Description>As mensagens recebidas aparecem aqui.</EmptyState.Description>
+*   </EmptyState.Content>
+* </EmptyState.Root>
+* ```
+*/
+const EmptyStateRoot = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["size", "variant"]);
+	const { render, className, ...rest } = elementProps;
+	const baseProps = {
+		"data-component": "EmptyState.Root",
+		className: mergeTwClassNames(emptyStateRootVariants(variantProps), className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+EmptyStateRoot.displayName = "EmptyState.Root";
+//#endregion
+export { EmptyStateRoot };
+
+//# sourceMappingURL=empty-state-root.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state-title.d.ts","names":[],"sources":["../../../../src/components/feedback/empty-state/empty-state-title.tsx"],"mappings":";;;YAIY,uBAAuB,cACjC,UAAU;;;;;;;EAQR;;;;;;;qBASS;GAA0B,OAAA,uCAAoB,+CAAA"}

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

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

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

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

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

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

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

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

package/dist/components/feedback/empty-state/index.parts.d.ts

@@ -0,0 +1,12 @@
+import { EmptyStateContent, EmptyStateContentProps } from "./empty-state-content.js";
+import { EmptyStateDescription, EmptyStateDescriptionProps } from "./empty-state-description.js";
+import { EmptyStateIndicator, EmptyStateIndicatorProps } from "./empty-state-indicator.js";
+import { EmptyStateVariants } from "./empty-state-root-variants.js";
+import { EmptyStateRoot, EmptyStateRootProps } from "./empty-state-root.js";
+import { EmptyStateTitle, EmptyStateTitleProps } from "./empty-state-title.js";
+declare namespace index_parts_d_exports {
+  export { EmptyStateContent as Content, EmptyStateContentProps as ContentProps, EmptyStateDescription as Description, EmptyStateDescriptionProps as DescriptionProps, EmptyStateIndicator as Indicator, EmptyStateIndicatorProps as IndicatorProps, EmptyStateRoot as Root, EmptyStateRootProps as RootProps, EmptyStateTitle as Title, EmptyStateTitleProps as TitleProps, EmptyStateVariants as Variants };
+}
+//#endregion
+export { EmptyStateContent as Content, type EmptyStateContentProps as ContentProps, EmptyStateDescription as Description, type EmptyStateDescriptionProps as DescriptionProps, EmptyStateIndicator as Indicator, type EmptyStateIndicatorProps as IndicatorProps, EmptyStateRoot as Root, type EmptyStateRootProps as RootProps, EmptyStateTitle as Title, type EmptyStateTitleProps as TitleProps, type EmptyStateVariants as Variants, index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

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

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

package/dist/components/feedback/empty-state/index.parts.js

@@ -0,0 +1,18 @@
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { EmptyStateContent } from "./empty-state-content.js";
+import { EmptyStateDescription } from "./empty-state-description.js";
+import { EmptyStateIndicator } from "./empty-state-indicator.js";
+import { EmptyStateRoot } from "./empty-state-root.js";
+import { EmptyStateTitle } from "./empty-state-title.js";
+//#region src/components/feedback/empty-state/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Content: () => EmptyStateContent,
+	Description: () => EmptyStateDescription,
+	Indicator: () => EmptyStateIndicator,
+	Root: () => EmptyStateRoot,
+	Title: () => EmptyStateTitle
+});
+//#endregion
+export { EmptyStateContent as Content, EmptyStateDescription as Description, EmptyStateIndicator as Indicator, EmptyStateRoot as Root, EmptyStateTitle as Title, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

package/dist/components/feedback/empty-state/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/components/feedback/empty-state/index.parts.ts"],"sourcesContent":["export { EmptyStateContent as Content } from './empty-state-content';\nexport { EmptyStateDescription as Description } from './empty-state-description';\nexport { EmptyStateIndicator as Indicator } from './empty-state-indicator';\nexport { EmptyStateRoot as Root } from './empty-state-root';\nexport { EmptyStateTitle as Title } from './empty-state-title';\n\n/* types */\n\nexport type { EmptyStateContentProps as ContentProps } from './empty-state-content';\nexport type { EmptyStateDescriptionProps as DescriptionProps } from './empty-state-description';\nexport type { EmptyStateIndicatorProps as IndicatorProps } from './empty-state-indicator';\nexport type { EmptyStateRootProps as RootProps } from './empty-state-root';\nexport type { EmptyStateVariants as Variants } from './empty-state-root-variants';\nexport type { EmptyStateTitleProps as TitleProps } from './empty-state-title';\n"],"mappings":""}