@lucasbernardosn/react-ui 0.0.0-stage → 0.2.0

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, com a tipografia fixa das
+* descrições.
+*/
+const EmptyStateDescription = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "EmptyState.Description",
+		className: mergeTwClassNames([
+			"text-sm",
+			"leading-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, com a tipografia fixa das\n * descrições.\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      ['text-sm', 'leading-5', 'text-gray-11', 'text-pretty'],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'p',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\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;GAAC;GAAW;GAAa;GAAgB;EAAa,GACtD,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,15 @@
+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 de
+ * `--empty-state-indicator-size` (24px, declarada no `EmptyState.Root`), e o `svg` mede `1em`:
+ * ícone, emoji e texto seguem o mesmo tamanho, mesmo que o ícone traga um 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;;;;;;;qBAQpC;GAA8B,OAAA,2CAAwB,+CAAA"}

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

@@ -0,0 +1,34 @@
+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 de
+* `--empty-state-indicator-size` (24px, declarada no `EmptyState.Root`), e o `svg` mede `1em`:
+* ícone, emoji e texto seguem o mesmo tamanho, mesmo que o ícone traga um 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(6))",
+			"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 de\n * `--empty-state-indicator-size` (24px, declarada no `EmptyState.Root`), e o `svg` mede `1em`:\n * ícone, emoji e texto seguem o mesmo tamanho, mesmo que o ícone traga um próprio. Para outro\n * 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(6))',\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":";;;;;;;;;AAWA,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,20 @@
+//#region src/components/feedback/empty-state/empty-state-root-variants.d.ts
+export type EmptyStateVariants = {
+  /**
+   * 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 respiro, o espaço entre as partes e o tamanho do indicador são fixos e ficam no `Root`. O
+ * Indicator lê o tamanho pela CSS variable, e fora de um `Root` cai no mesmo valor.
+ */
+export declare const emptyStateRootVariants: (props?: ({
+  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;;qBAGW,2BAA2B,SAAS;;;;;qBAQpC,yBAAsB;;6CA6BlC"}

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

@@ -0,0 +1,34 @@
+import { cva } from "class-variance-authority";
+//#region src/components/feedback/empty-state/empty-state-root-variants.ts
+const emptyStateDefaultVariants = { variant: "outline" };
+/**
+* O respiro, o espaço entre as partes e o tamanho do indicador são fixos e ficam no `Root`. O
+* Indicator lê o tamanho pela CSS variable, e fora de um `Root` cai no mesmo valor.
+*/
+const emptyStateRootVariants = cva([
+	"[--empty-state-indicator-size:--spacing(6)]",
+	"flex",
+	"flex-col",
+	"items-center",
+	"justify-center",
+	"gap-4",
+	"px-6",
+	"py-8",
+	"rounded-md",
+	"corner-squircle",
+	"text-center"
+], {
+	variants: { variant: {
+		outline: [
+			"border",
+			"border-dashed",
+			"border-gray-6"
+		],
+		plain: []
+	} },
+	defaultVariants: { 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   * 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  variant: 'outline',\n};\n\n/**\n * O respiro, o espaço entre as partes e o tamanho do indicador são fixos e ficam no `Root`. O\n * Indicator lê o tamanho pela CSS variable, e fora de um `Root` cai no mesmo valor.\n */\nexport const emptyStateRootVariants = cva(\n  [\n    '[--empty-state-indicator-size:--spacing(6)]',\n\n    'flex',\n    'flex-col',\n    'items-center',\n    'justify-center',\n\n    'gap-4',\n    'px-6',\n    'py-8',\n\n    'rounded-md',\n    'corner-squircle',\n\n    'text-center',\n  ],\n  {\n    variants: {\n      variant: {\n        outline: ['border', 'border-dashed', 'border-gray-6'],\n        plain: [],\n      },\n    },\n    defaultVariants: {\n      variant: emptyStateDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAYA,MAAa,4BAA0D,EACrE,SAAS,UACX;;;;;AAMA,MAAa,yBAAyB,IACpC;CACE;CAEA;CACA;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CAEA;AACF,GACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;GAAC;GAAU;GAAiB;EAAe;EACpD,OAAO,CAAC;CACV,EACF;CACA,iBAAiB,EACf,SAAS,0BAA0B,QACrC;AACF,CACF"}

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

@@ -0,0 +1,29 @@
+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, com
+ * tamanho e respiro fixos; 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;;;;;;;;;;;;;;;;;;;qBAuBW;GAAyB,OAAA,sCAAmB,+CAAA"}

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

@@ -0,0 +1,42 @@
+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, com
+* tamanho e respiro fixos; 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, ["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, com\n * tamanho e respiro fixos; a `variant` decide se há 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, ['variant']);\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;;;;;;;;;;;;;;;;;;;AAoB/D,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,SAAS,CAAC;CAEzE,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, que é fixa. Com
+   * `render`, a tag do `render` prevalece.
+   *
+   * @default 3
+   */
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+}>;
+/**
+ * Título do estado vazio, com a tipografia fixa dos títulos. 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, com a tipografia fixa dos títulos. 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-base",
+			"leading-6",
+			"font-medium",
+			"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, que é fixa. Com\n     * `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, com a tipografia fixa dos títulos. 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      ['text-base', 'leading-6', 'font-medium', 'text-gray-12', 'text-balance'],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: `h${level}`,\n    props: mergeProps(baseProps, rest),\n  });\n};\n\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;GAAC;GAAa;GAAa;GAAe;GAAgB;EAAc,GACxE,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB,IAAI;EACpB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,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":""}

package/dist/components/feedback/skeleton/index.d.ts

@@ -0,0 +1,4 @@
+import { SkeletonVariants } from "./skeleton-variants.js";
+import { Skeleton, SkeletonProps } from "./skeleton.js";
+import { SkeletonText, SkeletonTextProps } from "./skeleton-text.js";
+export { Skeleton, type SkeletonProps, SkeletonText, type SkeletonTextProps, type SkeletonVariants };

package/dist/components/feedback/skeleton/index.js

@@ -0,0 +1,3 @@
+import { Skeleton } from "./skeleton.js";
+import { SkeletonText } from "./skeleton-text.js";
+export { Skeleton, SkeletonText };

package/dist/components/feedback/skeleton/skeleton-text.d.ts

@@ -0,0 +1,35 @@
+import { SkeletonVariants } from "./skeleton-variants.js";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { useRender } from "@base-ui/react";
+//#region src/components/feedback/skeleton/skeleton-text.d.ts
+export type SkeletonTextProps = MergeOverride<Omit<useRender.ComponentProps<'div'>, 'children'>, Pick<SkeletonVariants, 'variant'> & {
+  /**
+   * Quantidade de linhas. Com mais de uma, a última fica mais curta, como o fim de um
+   * parágrafo.
+   *
+   * @default 3
+   */
+  lines?: number;
+}>;
+/**
+ * Placeholder de um parágrafo: uma barra por linha.
+ *
+ * Cada linha mede `1lh`, a entrelinha do texto, com a barra mais fina centralizada pela margem.
+ * Assim o bloco tem a altura que o texto terá, e a troca não move o layout. Para acertar a
+ * medida, passe na `className` o tamanho e a entrelinha do texto que vai entrar (`text-sm/5`).
+ *
+ * Só ocupa o lugar do texto: a troca pelo conteúdo fica com quem usa (`Show`, ternário).
+ *
+ * Fica fora de um namespace: o uso principal do `Skeleton` é avulso.
+ *
+ * @example
+ * ```tsx
+ * <SkeletonText lines={2} className="text-sm/5" />
+ * ```
+ */
+export declare const SkeletonText: {
+  (props: SkeletonTextProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=skeleton-text.d.ts.map

package/dist/components/feedback/skeleton/skeleton-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-text.d.ts","names":[],"sources":["../../../../src/components/feedback/skeleton/skeleton-text.tsx"],"mappings":";;;;YAMY,oBAAoB,cAC9B,KAAK,UAAU,oCACf,KAAK;;;;;;;EAOH;;;;;;;;;;;;;;;;;;qBAsBS;GAAuB,OAAA,oCAAiB,+CAAA"}

package/dist/components/feedback/skeleton/skeleton-text.js

@@ -0,0 +1,53 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { Skeleton } from "./skeleton.js";
+import { createSplitProps } from "@lucasbernardosn/utils";
+import { mergeProps, useRender } from "@base-ui/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/feedback/skeleton/skeleton-text.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Placeholder de um parágrafo: uma barra por linha.
+*
+* Cada linha mede `1lh`, a entrelinha do texto, com a barra mais fina centralizada pela margem.
+* Assim o bloco tem a altura que o texto terá, e a troca não move o layout. Para acertar a
+* medida, passe na `className` o tamanho e a entrelinha do texto que vai entrar (`text-sm/5`).
+*
+* Só ocupa o lugar do texto: a troca pelo conteúdo fica com quem usa (`Show`, ternário).
+*
+* Fica fora de um namespace: o uso principal do `Skeleton` é avulso.
+*
+* @example
+* ```tsx
+* <SkeletonText lines={2} className="text-sm/5" />
+* ```
+*/
+const SkeletonText = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["variant"]);
+	const { lines = 3, render, className, ...rest } = elementProps;
+	const baseProps = {
+		"data-component": "SkeletonText",
+		className: mergeTwClassNames([
+			"flex",
+			"flex-col",
+			"w-full"
+		], className),
+		children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx(Skeleton, {
+			variant: variantProps.variant,
+			className: mergeTwClassNames([
+				"h-[0.75lh]",
+				"my-[0.125lh]",
+				"last:not-only:w-4/5"
+			])
+		}, index))
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+SkeletonText.displayName = "SkeletonText";
+//#endregion
+export { SkeletonText };
+
+//# sourceMappingURL=skeleton-text.js.map

package/dist/components/feedback/skeleton/skeleton-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-text.js","names":[],"sources":["../../../../src/components/feedback/skeleton/skeleton-text.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\nimport { Skeleton } from './skeleton';\nimport type { SkeletonVariants } from './skeleton-variants';\n\nexport type SkeletonTextProps = MergeOverride<\n  Omit<useRender.ComponentProps<'div'>, 'children'>,\n  Pick<SkeletonVariants, 'variant'> & {\n    /**\n     * Quantidade de linhas. Com mais de uma, a última fica mais curta, como o fim de um\n     * parágrafo.\n     *\n     * @default 3\n     */\n    lines?: number;\n  }\n>;\n\nconst splitVariantProps = createSplitProps<Pick<SkeletonVariants, 'variant'>>();\n\n/**\n * Placeholder de um parágrafo: uma barra por linha.\n *\n * Cada linha mede `1lh`, a entrelinha do texto, com a barra mais fina centralizada pela margem.\n * Assim o bloco tem a altura que o texto terá, e a troca não move o layout. Para acertar a\n * medida, passe na `className` o tamanho e a entrelinha do texto que vai entrar (`text-sm/5`).\n *\n * Só ocupa o lugar do texto: a troca pelo conteúdo fica com quem usa (`Show`, ternário).\n *\n * Fica fora de um namespace: o uso principal do `Skeleton` é avulso.\n *\n * @example\n * ```tsx\n * <SkeletonText lines={2} className=\"text-sm/5\" />\n * ```\n */\nexport const SkeletonText = (props: SkeletonTextProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['variant']);\n\n  const { lines = 3, render, className, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'SkeletonText',\n    className: mergeTwClassNames(['flex', 'flex-col', 'w-full'], className),\n    children: Array.from({ length: lines }, (_, index) => (\n      <Skeleton\n        // As linhas são iguais e só mudam pela quantidade: o índice é a identidade.\n        key={index}\n        variant={variantProps.variant}\n        className={mergeTwClassNames([\n          'h-[0.75lh]',\n          'my-[0.125lh]',\n\n          'last:not-only:w-4/5',\n        ])}\n      />\n    )),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nSkeletonText.displayName = 'SkeletonText';\n"],"mappings":";;;;;;AAmBA,MAAM,oBAAoB,iBAAoD;;;;;;;;;;;;;;;;;AAkB9E,MAAa,gBAAgB,UAA6B;CACxD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,SAAS,CAAC;CAEzE,MAAM,EAAE,QAAQ,GAAG,QAAQ,WAAW,GAAG,SAAS;CAElD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB;GAAC;GAAQ;GAAY;EAAQ,GAAG,SAAS;EACtE,UAAU,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,UAC1C,oBAAC,UAAD;GAGE,SAAS,aAAa;GACtB,WAAW,kBAAkB;IAC3B;IACA;IAEA;GACF,CAAC;EACF,GARM,KAQN,CACF;CACH;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,aAAa,cAAc"}

package/dist/components/feedback/skeleton/skeleton-variants.d.ts

@@ -0,0 +1,29 @@
+//#region src/components/feedback/skeleton/skeleton-variants.d.ts
+export type SkeletonVariants = {
+  /**
+   * Mostra o bloco no lugar do conteúdo. Com `false`, os filhos aparecem com um fade.
+   *
+   * @default true
+   */
+  loading?: boolean;
+  /**
+   * Animação do bloco enquanto carrega: `pulse` varia a opacidade, `shine` passa um brilho da
+   * esquerda para a direita. Para um bloco parado, passe `animate-none` na `className`.
+   *
+   * @default 'pulse'
+   */
+  variant?: 'pulse' | 'shine';
+};
+export declare const skeletonDefaultVariants: Required<SkeletonVariants>;
+/**
+ * Enquanto carrega, os filhos ficam `invisible` e o texto direto fica transparente: o bloco
+ * mantém o tamanho do conteúdo sem mostrá-lo. A animação só existe nesse estado, por isso fica
+ * nas `compoundVariants`. Com movimento reduzido, o bloco fica parado, e o `shine` perde o
+ * gradiente: parado, ele seria só uma faixa clara fora de lugar.
+ */
+export declare const skeletonVariants: (props?: ({
+  loading?: boolean | null | undefined;
+  variant?: "pulse" | "shine" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=skeleton-variants.d.ts.map

package/dist/components/feedback/skeleton/skeleton-variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-variants.d.ts","names":[],"sources":["../../../../src/components/feedback/skeleton/skeleton-variants.ts"],"mappings":";YAEY;;;;;;EAMV;;;;;;;EAOA;;qBAGW,yBAAyB,SAAS;;;;;;;qBAWlC,mBAAgB;;;6CAoD3B"}

package/dist/components/feedback/skeleton/skeleton-variants.js

@@ -0,0 +1,61 @@
+import { cva } from "class-variance-authority";
+//#region src/components/feedback/skeleton/skeleton-variants.ts
+const skeletonDefaultVariants = {
+	loading: true,
+	variant: "pulse"
+};
+/**
+* Enquanto carrega, os filhos ficam `invisible` e o texto direto fica transparente: o bloco
+* mantém o tamanho do conteúdo sem mostrá-lo. A animação só existe nesse estado, por isso fica
+* nas `compoundVariants`. Com movimento reduzido, o bloco fica parado, e o `shine` perde o
+* gradiente: parado, ele seria só uma faixa clara fora de lugar.
+*/
+const skeletonVariants = cva([], {
+	variants: {
+		loading: {
+			true: [
+				"shrink-0",
+				"rounded-md",
+				"corner-squircle",
+				"bg-gray-6",
+				"text-transparent",
+				"**:invisible",
+				"pointer-events-none",
+				"select-none"
+			],
+			false: ["animate-fade-in"]
+		},
+		variant: {
+			pulse: [],
+			shine: []
+		}
+	},
+	compoundVariants: [{
+		loading: true,
+		variant: "pulse",
+		className: ["not-motion-reduced:animate-skeleton-pulse"]
+	}, {
+		loading: true,
+		variant: "shine",
+		className: [
+			"bg-linear-to-r",
+			"from-gray-5",
+			"from-25%",
+			"via-gray-7",
+			"via-50%",
+			"to-gray-5",
+			"to-75%",
+			"bg-size-[400%_100%]",
+			"motion-reduced:bg-none",
+			"not-motion-reduced:animate-skeleton-shine"
+		]
+	}],
+	defaultVariants: {
+		loading: skeletonDefaultVariants.loading,
+		variant: skeletonDefaultVariants.variant
+	}
+});
+//#endregion
+export { skeletonDefaultVariants, skeletonVariants };
+
+//# sourceMappingURL=skeleton-variants.js.map

package/dist/components/feedback/skeleton/skeleton-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-variants.js","names":[],"sources":["../../../../src/components/feedback/skeleton/skeleton-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type SkeletonVariants = {\n  /**\n   * Mostra o bloco no lugar do conteúdo. Com `false`, os filhos aparecem com um fade.\n   *\n   * @default true\n   */\n  loading?: boolean;\n  /**\n   * Animação do bloco enquanto carrega: `pulse` varia a opacidade, `shine` passa um brilho da\n   * esquerda para a direita. Para um bloco parado, passe `animate-none` na `className`.\n   *\n   * @default 'pulse'\n   */\n  variant?: 'pulse' | 'shine';\n};\n\nexport const skeletonDefaultVariants: Required<SkeletonVariants> = {\n  loading: true,\n  variant: 'pulse',\n};\n\n/**\n * Enquanto carrega, os filhos ficam `invisible` e o texto direto fica transparente: o bloco\n * mantém o tamanho do conteúdo sem mostrá-lo. A animação só existe nesse estado, por isso fica\n * nas `compoundVariants`. Com movimento reduzido, o bloco fica parado, e o `shine` perde o\n * gradiente: parado, ele seria só uma faixa clara fora de lugar.\n */\nexport const skeletonVariants = cva([], {\n  variants: {\n    loading: {\n      true: [\n        'shrink-0',\n\n        'rounded-md',\n        'corner-squircle',\n\n        'bg-gray-6',\n        'text-transparent',\n        '**:invisible',\n\n        'pointer-events-none',\n        'select-none',\n      ],\n      false: ['animate-fade-in'],\n    },\n    variant: {\n      pulse: [],\n      shine: [],\n    },\n  },\n  compoundVariants: [\n    {\n      loading: true,\n      variant: 'pulse',\n      className: ['not-motion-reduced:animate-skeleton-pulse'],\n    },\n    {\n      loading: true,\n      variant: 'shine',\n      className: [\n        // Pontas lisas até 25% e a partir de 75%: o loop emenda sem corte (ver o keyframe).\n        'bg-linear-to-r',\n        'from-gray-5',\n        'from-25%',\n        'via-gray-7',\n        'via-50%',\n        'to-gray-5',\n        'to-75%',\n        'bg-size-[400%_100%]',\n        'motion-reduced:bg-none',\n\n        'not-motion-reduced:animate-skeleton-shine',\n      ],\n    },\n  ],\n  defaultVariants: {\n    loading: skeletonDefaultVariants.loading,\n    variant: skeletonDefaultVariants.variant,\n  },\n});\n"],"mappings":";;AAkBA,MAAa,0BAAsD;CACjE,SAAS;CACT,SAAS;AACX;;;;;;;AAQA,MAAa,mBAAmB,IAAI,CAAC,GAAG;CACtC,UAAU;EACR,SAAS;GACP,MAAM;IACJ;IAEA;IACA;IAEA;IACA;IACA;IAEA;IACA;GACF;GACA,OAAO,CAAC,iBAAiB;EAC3B;EACA,SAAS;GACP,OAAO,CAAC;GACR,OAAO,CAAC;EACV;CACF;CACA,kBAAkB,CAChB;EACE,SAAS;EACT,SAAS;EACT,WAAW,CAAC,2CAA2C;CACzD,GACA;EACE,SAAS;EACT,SAAS;EACT,WAAW;GAET;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GAEA;EACF;CACF,CACF;CACA,iBAAiB;EACf,SAAS,wBAAwB;EACjC,SAAS,wBAAwB;CACnC;AACF,CAAC"}

package/dist/components/feedback/skeleton/skeleton.d.ts

@@ -0,0 +1,33 @@
+import { SkeletonVariants } from "./skeleton-variants.js";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { useRender } from "@base-ui/react";
+//#region src/components/feedback/skeleton/skeleton.d.ts
+export type SkeletonProps = MergeOverride<useRender.ComponentProps<'div'>, SkeletonVariants>;
+/**
+ * Bloco que ocupa o lugar do conteúdo enquanto ele carrega. Altura, largura e forma vêm pela
+ * `className` (`h-5 w-4/5`). O canto sai em `corner-squircle`, que deforma o `rounded-full`: o
+ * círculo leva `corner-round` junto (`size-10 rounded-full corner-round`).
+ *
+ * Com filhos, o bloco toma o tamanho deles e os esconde até `loading` virar `false`. Passe o
+ * componente como filho, não pelo `render`: pelo `render`, as classes dele concorrem com as do
+ * bloco, e o fundo ou o texto dele podem aparecer.
+ *
+ * Enquanto carrega, recebe `inert`: o texto direto, que só fica transparente, sai da árvore de
+ * acessibilidade, e o elemento sai do foco. O anúncio da espera fica com o contêiner que está
+ * carregando, por `aria-busy`.
+ *
+ * @example
+ * ```tsx
+ * <Skeleton className="h-5 w-4/5" />
+ *
+ * <Skeleton loading={isLoading} className="w-fit">
+ *   <Badge>Pago</Badge>
+ * </Skeleton>
+ * ```
+ */
+export declare const Skeleton: {
+  (props: SkeletonProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=skeleton.d.ts.map

package/dist/components/feedback/skeleton/skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","names":[],"sources":["../../../../src/components/feedback/skeleton/skeleton.tsx"],"mappings":";;;;YASY,gBAAgB,cAC1B,UAAU,uBACV;;;;;;;;;;;;;;;;;;;;;;;qBA2BW;GAAmB,OAAA,gCAAa,+CAAA"}