@lucasbernardosn/react-ui 0.1.0 → 0.3.0

package/dist/components/feedback/alert/alert-root-variants.d.ts

@@ -0,0 +1,13 @@
+//#region src/components/feedback/alert/alert-root-variants.d.ts
+/**
+ * O `status` só declara as variáveis `--alert-*`, e a `variant` decide onde cada uma entra. Assim
+ * não há um bloco por combinação de `status` e `variant`. O fundo e a borda usam a escala alpha,
+ * para o alerta funcionar sobre qualquer fundo. O `Alert.Indicator`, o `Alert.Title` e o
+ * `Alert.Description` leem a mesma cor, no passo 12, em `--alert-fg`.
+ */
+export declare const alertRootVariants: (props?: ({
+  status?: "neutral" | "info" | "success" | "warning" | "error" | null | undefined;
+  variant?: "subtle" | "surface" | "outline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=alert-root-variants.d.ts.map

package/dist/components/feedback/alert/alert-root-variants.js

@@ -0,0 +1,75 @@
+import { alertDefaultVariants } from "./use-alert-context.js";
+import { cva } from "class-variance-authority";
+//#region src/components/feedback/alert/alert-root-variants.ts
+/**
+* O `status` só declara as variáveis `--alert-*`, e a `variant` decide onde cada uma entra. Assim
+* não há um bloco por combinação de `status` e `variant`. O fundo e a borda usam a escala alpha,
+* para o alerta funcionar sobre qualquer fundo. O `Alert.Indicator`, o `Alert.Title` e o
+* `Alert.Description` leem a mesma cor, no passo 12, em `--alert-fg`.
+*/
+const alertRootVariants = cva([
+	"flex",
+	"items-start",
+	"gap-2",
+	"w-full",
+	"min-w-0",
+	"p-4",
+	"border",
+	"rounded-md",
+	"corner-squircle",
+	"text-start",
+	"wrap-break-word"
+], {
+	variants: {
+		status: {
+			neutral: [
+				"[--alert-subtle-bg:var(--color-gray-alpha-3)]",
+				"[--alert-surface-bg:var(--color-gray-alpha-2)]",
+				"[--alert-surface-border:var(--color-gray-alpha-6)]",
+				"[--alert-outline-border:var(--color-gray-alpha-7)]",
+				"[--alert-fg:var(--color-gray-12)]"
+			],
+			info: [
+				"[--alert-subtle-bg:var(--color-blue-alpha-3)]",
+				"[--alert-surface-bg:var(--color-blue-alpha-2)]",
+				"[--alert-surface-border:var(--color-blue-alpha-6)]",
+				"[--alert-outline-border:var(--color-blue-alpha-7)]",
+				"[--alert-fg:var(--color-blue-12)]"
+			],
+			success: [
+				"[--alert-subtle-bg:var(--color-green-alpha-3)]",
+				"[--alert-surface-bg:var(--color-green-alpha-2)]",
+				"[--alert-surface-border:var(--color-green-alpha-6)]",
+				"[--alert-outline-border:var(--color-green-alpha-7)]",
+				"[--alert-fg:var(--color-green-12)]"
+			],
+			warning: [
+				"[--alert-subtle-bg:var(--color-amber-alpha-3)]",
+				"[--alert-surface-bg:var(--color-amber-alpha-2)]",
+				"[--alert-surface-border:var(--color-amber-alpha-6)]",
+				"[--alert-outline-border:var(--color-amber-alpha-7)]",
+				"[--alert-fg:var(--color-amber-12)]"
+			],
+			error: [
+				"[--alert-subtle-bg:var(--color-red-alpha-3)]",
+				"[--alert-surface-bg:var(--color-red-alpha-2)]",
+				"[--alert-surface-border:var(--color-red-alpha-6)]",
+				"[--alert-outline-border:var(--color-red-alpha-7)]",
+				"[--alert-fg:var(--color-red-12)]"
+			]
+		},
+		variant: {
+			surface: ["border-(--alert-surface-border)", "bg-(--alert-surface-bg)"],
+			subtle: ["border-transparent", "bg-(--alert-subtle-bg)"],
+			outline: ["border-(--alert-outline-border)"]
+		}
+	},
+	defaultVariants: {
+		status: alertDefaultVariants.status,
+		variant: alertDefaultVariants.variant
+	}
+});
+//#endregion
+export { alertRootVariants };
+
+//# sourceMappingURL=alert-root-variants.js.map

package/dist/components/feedback/alert/alert-root-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-root-variants.js","names":[],"sources":["../../../../src/components/feedback/alert/alert-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { alertDefaultVariants } from './use-alert-context';\n\n/**\n * O `status` só declara as variáveis `--alert-*`, e a `variant` decide onde cada uma entra. Assim\n * não há um bloco por combinação de `status` e `variant`. O fundo e a borda usam a escala alpha,\n * para o alerta funcionar sobre qualquer fundo. O `Alert.Indicator`, o `Alert.Title` e o\n * `Alert.Description` leem a mesma cor, no passo 12, em `--alert-fg`.\n */\nexport const alertRootVariants = cva(\n  [\n    'flex',\n    'items-start',\n    'gap-2',\n\n    'w-full',\n    'min-w-0',\n\n    'p-4',\n\n    'border',\n    'rounded-md',\n    'corner-squircle',\n\n    'text-start',\n    'wrap-break-word',\n  ],\n  {\n    variants: {\n      status: {\n        neutral: [\n          '[--alert-subtle-bg:var(--color-gray-alpha-3)]',\n          '[--alert-surface-bg:var(--color-gray-alpha-2)]',\n          '[--alert-surface-border:var(--color-gray-alpha-6)]',\n          '[--alert-outline-border:var(--color-gray-alpha-7)]',\n          '[--alert-fg:var(--color-gray-12)]',\n        ],\n        info: [\n          '[--alert-subtle-bg:var(--color-blue-alpha-3)]',\n          '[--alert-surface-bg:var(--color-blue-alpha-2)]',\n          '[--alert-surface-border:var(--color-blue-alpha-6)]',\n          '[--alert-outline-border:var(--color-blue-alpha-7)]',\n          '[--alert-fg:var(--color-blue-12)]',\n        ],\n        success: [\n          '[--alert-subtle-bg:var(--color-green-alpha-3)]',\n          '[--alert-surface-bg:var(--color-green-alpha-2)]',\n          '[--alert-surface-border:var(--color-green-alpha-6)]',\n          '[--alert-outline-border:var(--color-green-alpha-7)]',\n          '[--alert-fg:var(--color-green-12)]',\n        ],\n        warning: [\n          '[--alert-subtle-bg:var(--color-amber-alpha-3)]',\n          '[--alert-surface-bg:var(--color-amber-alpha-2)]',\n          '[--alert-surface-border:var(--color-amber-alpha-6)]',\n          '[--alert-outline-border:var(--color-amber-alpha-7)]',\n          '[--alert-fg:var(--color-amber-12)]',\n        ],\n        error: [\n          '[--alert-subtle-bg:var(--color-red-alpha-3)]',\n          '[--alert-surface-bg:var(--color-red-alpha-2)]',\n          '[--alert-surface-border:var(--color-red-alpha-6)]',\n          '[--alert-outline-border:var(--color-red-alpha-7)]',\n          '[--alert-fg:var(--color-red-12)]',\n        ],\n      },\n      variant: {\n        surface: ['border-(--alert-surface-border)', 'bg-(--alert-surface-bg)'],\n        // A borda transparente fica para as três variantes terem a mesma medida.\n        subtle: ['border-transparent', 'bg-(--alert-subtle-bg)'],\n        outline: ['border-(--alert-outline-border)'],\n      },\n    },\n    defaultVariants: {\n      status: alertDefaultVariants.status,\n      variant: alertDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;;;;;;;;AASA,MAAa,oBAAoB,IAC/B;CACE;CACA;CACA;CAEA;CACA;CAEA;CAEA;CACA;CACA;CAEA;CACA;AACF,GACA;CACE,UAAU;EACR,QAAQ;GACN,SAAS;IACP;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;GACF;EACF;EACA,SAAS;GACP,SAAS,CAAC,mCAAmC,yBAAyB;GAEtE,QAAQ,CAAC,sBAAsB,wBAAwB;GACvD,SAAS,CAAC,iCAAiC;EAC7C;CACF;CACA,iBAAiB;EACf,QAAQ,qBAAqB;EAC7B,SAAS,qBAAqB;CAChC;AACF,CACF"}

package/dist/components/feedback/alert/alert-root.d.ts

@@ -0,0 +1,33 @@
+import { AlertVariants } from "./use-alert-context.js";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
+import { useRender } from "@base-ui/react";
+//#region src/components/feedback/alert/alert-root.d.ts
+export type AlertRootProps = MergeOverride<useRender.ComponentProps<'div'>, AlertVariants>;
+/**
+ * Mensagem fixa na página, fora de um popup: indicador à esquerda e o conteúdo ao lado, com
+ * respiro fixo. O `status` decide a cor (do texto, do ícone, do fundo e da borda) e o ícone padrão.
+ *
+ * Não tem papel ARIA por padrão: um aviso que já está na página é lido na ordem normal. Para o
+ * que surge depois do carregamento, passe `role="alert"` (erro que precisa interromper, anunciado na
+ * hora) ou `role="status"` (o resto, anunciado numa pausa do leitor de tela).
+ *
+ * Fechar é composição: o app controla se o alerta aparece e põe um `CloseButton` no fim do `Root`.
+ *
+ * @example
+ * ```tsx
+ * <Alert.Root status="error">
+ *   <Alert.Indicator />
+ *
+ *   <Alert.Content>
+ *     <Alert.Title>Nota rejeitada pela SEFAZ</Alert.Title>
+ *     <Alert.Description>Rejeição 539: duplicidade de NF-e.</Alert.Description>
+ *   </Alert.Content>
+ * </Alert.Root>
+ * ```
+ */
+export declare const AlertRoot: {
+  (props: AlertRootProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=alert-root.d.ts.map

package/dist/components/feedback/alert/alert-root.js

@@ -0,0 +1,52 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { AlertContextProvider } from "./use-alert-context.js";
+import { alertRootVariants } from "./alert-root-variants.js";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
+import { mergeProps, useRender } from "@base-ui/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/feedback/alert/alert-root.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Mensagem fixa na página, fora de um popup: indicador à esquerda e o conteúdo ao lado, com
+* respiro fixo. O `status` decide a cor (do texto, do ícone, do fundo e da borda) e o ícone padrão.
+*
+* Não tem papel ARIA por padrão: um aviso que já está na página é lido na ordem normal. Para o
+* que surge depois do carregamento, passe `role="alert"` (erro que precisa interromper, anunciado na
+* hora) ou `role="status"` (o resto, anunciado numa pausa do leitor de tela).
+*
+* Fechar é composição: o app controla se o alerta aparece e põe um `CloseButton` no fim do `Root`.
+*
+* @example
+* ```tsx
+* <Alert.Root status="error">
+*   <Alert.Indicator />
+*
+*   <Alert.Content>
+*     <Alert.Title>Nota rejeitada pela SEFAZ</Alert.Title>
+*     <Alert.Description>Rejeição 539: duplicidade de NF-e.</Alert.Description>
+*   </Alert.Content>
+* </Alert.Root>
+* ```
+*/
+const AlertRoot = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["status", "variant"]);
+	const { render, className, ...rest } = elementProps;
+	const baseProps = {
+		"data-component": "Alert.Root",
+		className: mergeTwClassNames(alertRootVariants(variantProps), className)
+	};
+	const element = useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+	return /* @__PURE__ */ jsx(AlertContextProvider, {
+		value: variantProps,
+		children: element
+	});
+};
+AlertRoot.displayName = "Alert.Root";
+//#endregion
+export { AlertRoot };
+
+//# sourceMappingURL=alert-root.js.map

package/dist/components/feedback/alert/alert-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-root.js","names":[],"sources":["../../../../src/components/feedback/alert/alert-root.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { mergeTwClassNames } from '#utils';\nimport { alertRootVariants } from './alert-root-variants';\nimport { AlertContextProvider, type AlertVariants } from './use-alert-context';\n\nexport type AlertRootProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  AlertVariants\n>;\n\nconst splitVariantProps = createSplitProps<AlertVariants>();\n\n/**\n * Mensagem fixa na página, fora de um popup: indicador à esquerda e o conteúdo ao lado, com\n * respiro fixo. O `status` decide a cor (do texto, do ícone, do fundo e da borda) e o ícone padrão.\n *\n * Não tem papel ARIA por padrão: um aviso que já está na página é lido na ordem normal. Para o\n * que surge depois do carregamento, passe `role=\"alert\"` (erro que precisa interromper, anunciado na\n * hora) ou `role=\"status\"` (o resto, anunciado numa pausa do leitor de tela).\n *\n * Fechar é composição: o app controla se o alerta aparece e põe um `CloseButton` no fim do `Root`.\n *\n * @example\n * ```tsx\n * <Alert.Root status=\"error\">\n *   <Alert.Indicator />\n *\n *   <Alert.Content>\n *     <Alert.Title>Nota rejeitada pela SEFAZ</Alert.Title>\n *     <Alert.Description>Rejeição 539: duplicidade de NF-e.</Alert.Description>\n *   </Alert.Content>\n * </Alert.Root>\n * ```\n */\nexport const AlertRoot = (props: AlertRootProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'status',\n    'variant',\n  ]);\n\n  const { render, className, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'Alert.Root',\n    className: mergeTwClassNames(alertRootVariants(variantProps), className),\n  };\n\n  const element = useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n\n  return (\n    <AlertContextProvider value={variantProps}>{element}</AlertContextProvider>\n  );\n};\n\nAlertRoot.displayName = 'Alert.Root';\n"],"mappings":";;;;;;;AAcA,MAAM,oBAAoB,iBAAgC;;;;;;;;;;;;;;;;;;;;;;;AAwB1D,MAAa,aAAa,UAA0B;CAClD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,UACA,SACF,CAAC;CAED,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,kBAAkB,YAAY,GAAG,SAAS;CACzE;CAEA,MAAM,UAAU,UAAU;EACxB;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;CAED,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAAe,UAAA;CAA8B,CAAA;AAE9E;AAEA,UAAU,cAAc"}

package/dist/components/feedback/alert/alert-title.d.ts

@@ -0,0 +1,22 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/feedback/alert/alert-title.d.ts
+export type AlertTitleProps = useRender.ComponentProps<'div'>;
+/**
+ * Título do alerta, no passo 12 da cor do `status`. Foge da tabela de tipografia: fica no tamanho
+ * da descrição (`text-sm/5`), diferenciado só pelo peso, para o alerta ficar compacto e não
+ * competir com os títulos da página. Quebra como a descrição (`text-pretty`): o `text-balance` dos
+ * títulos quebrava cedo num alerta estreito.
+ *
+ * É um `div`, não um `h*`: o alerta não abre uma seção, e um título de alerta na lista de títulos
+ * da página atrapalharia a navegação por títulos. Para um alerta que é uma seção, troque pelo
+ * `render`.
+ *
+ * Origem do `Toast.Title`, que o copia (tabela no README de `feedback`). Uma mudança aqui vale para
+ * a cópia na mesma rodada.
+ */
+export declare const AlertTitle: {
+  (props: AlertTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=alert-title.d.ts.map

package/dist/components/feedback/alert/alert-title.js

@@ -0,0 +1,39 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/feedback/alert/alert-title.tsx
+/**
+* Título do alerta, no passo 12 da cor do `status`. Foge da tabela de tipografia: fica no tamanho
+* da descrição (`text-sm/5`), diferenciado só pelo peso, para o alerta ficar compacto e não
+* competir com os títulos da página. Quebra como a descrição (`text-pretty`): o `text-balance` dos
+* títulos quebrava cedo num alerta estreito.
+*
+* É um `div`, não um `h*`: o alerta não abre uma seção, e um título de alerta na lista de títulos
+* da página atrapalharia a navegação por títulos. Para um alerta que é uma seção, troque pelo
+* `render`.
+*
+* Origem do `Toast.Title`, que o copia (tabela no README de `feedback`). Uma mudança aqui vale para
+* a cópia na mesma rodada.
+*/
+const AlertTitle = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "Alert.Title",
+		className: mergeTwClassNames([
+			"text-sm",
+			"leading-5",
+			"font-medium",
+			"text-(--alert-fg,var(--color-gray-12))",
+			"text-pretty"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+AlertTitle.displayName = "Alert.Title";
+//#endregion
+export { AlertTitle };
+
+//# sourceMappingURL=alert-title.js.map

package/dist/components/feedback/alert/alert-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-title.js","names":[],"sources":["../../../../src/components/feedback/alert/alert-title.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type AlertTitleProps = useRender.ComponentProps<'div'>;\n\n/**\n * Título do alerta, no passo 12 da cor do `status`. Foge da tabela de tipografia: fica no tamanho\n * da descrição (`text-sm/5`), diferenciado só pelo peso, para o alerta ficar compacto e não\n * competir com os títulos da página. Quebra como a descrição (`text-pretty`): o `text-balance` dos\n * títulos quebrava cedo num alerta estreito.\n *\n * É um `div`, não um `h*`: o alerta não abre uma seção, e um título de alerta na lista de títulos\n * da página atrapalharia a navegação por títulos. Para um alerta que é uma seção, troque pelo\n * `render`.\n *\n * Origem do `Toast.Title`, que o copia (tabela no README de `feedback`). Uma mudança aqui vale para\n * a cópia na mesma rodada.\n */\nexport const AlertTitle = (props: AlertTitleProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Alert.Title',\n    className: mergeTwClassNames(\n      [\n        'text-sm',\n        'leading-5',\n        'font-medium',\n        'text-(--alert-fg,var(--color-gray-12))',\n        'text-pretty',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nAlertTitle.displayName = 'Alert.Title';\n"],"mappings":";;;;;;;;;;;;;;;;AAkBA,MAAa,cAAc,UAA2B;CACpD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,WAAW,cAAc"}

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

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

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

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

package/dist/components/feedback/alert/index.parts.d.ts

@@ -0,0 +1,12 @@
+import { AlertContent, AlertContentProps } from "./alert-content.js";
+import { AlertDescription, AlertDescriptionProps } from "./alert-description.js";
+import { AlertIndicator, AlertIndicatorProps } from "./alert-indicator.js";
+import { AlertVariants } from "./use-alert-context.js";
+import { AlertRoot, AlertRootProps } from "./alert-root.js";
+import { AlertTitle, AlertTitleProps } from "./alert-title.js";
+declare namespace index_parts_d_exports {
+  export { AlertContent as Content, AlertContentProps as ContentProps, AlertDescription as Description, AlertDescriptionProps as DescriptionProps, AlertIndicator as Indicator, AlertIndicatorProps as IndicatorProps, AlertRoot as Root, AlertRootProps as RootProps, AlertTitle as Title, AlertTitleProps as TitleProps, AlertVariants as Variants };
+}
+//#endregion
+export { AlertContent as Content, type AlertContentProps as ContentProps, AlertDescription as Description, type AlertDescriptionProps as DescriptionProps, AlertIndicator as Indicator, type AlertIndicatorProps as IndicatorProps, AlertRoot as Root, type AlertRootProps as RootProps, AlertTitle as Title, type AlertTitleProps as TitleProps, type AlertVariants as Variants, index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

package/dist/components/feedback/alert/index.parts.js

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

package/dist/components/feedback/alert/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/components/feedback/alert/index.parts.ts"],"sourcesContent":["export { AlertContent as Content } from './alert-content';\nexport { AlertDescription as Description } from './alert-description';\nexport { AlertIndicator as Indicator } from './alert-indicator';\nexport { AlertRoot as Root } from './alert-root';\nexport { AlertTitle as Title } from './alert-title';\n\n/* types */\n\nexport type { AlertContentProps as ContentProps } from './alert-content';\nexport type { AlertDescriptionProps as DescriptionProps } from './alert-description';\nexport type { AlertIndicatorProps as IndicatorProps } from './alert-indicator';\nexport type { AlertRootProps as RootProps } from './alert-root';\nexport type { AlertTitleProps as TitleProps } from './alert-title';\nexport type { AlertVariants as Variants } from './use-alert-context';\n"],"mappings":""}

package/dist/components/feedback/alert/use-alert-context.d.ts

@@ -0,0 +1,23 @@
+//#region src/components/feedback/alert/use-alert-context.d.ts
+/**
+ * Variantes do Alert. Informadas no `Alert.Root` e repassadas às partes por contexto.
+ */
+export type AlertVariants = {
+  /**
+   * O que o alerta comunica. Decide a cor (`neutral` gray, `info` blue, `success` green, `warning`
+   * amber, `error` red) e o ícone padrão do `Alert.Indicator`.
+   *
+   * @default 'neutral'
+   */
+  status?: 'neutral' | 'info' | 'success' | 'warning' | 'error';
+  /**
+   * Fundo e borda: `surface` com fundo e borda, `subtle` só com fundo e `outline` só com borda.
+   *
+   * @default 'surface'
+   */
+  variant?: 'surface' | 'subtle' | 'outline';
+};
+export declare const alertDefaultVariants: Required<AlertVariants>;
+export declare const AlertContextProvider: import("react").Provider<AlertVariants>, useAlertContext: () => AlertVariants;
+//#endregion
+//# sourceMappingURL=use-alert-context.d.ts.map

package/dist/components/feedback/alert/use-alert-context.js

@@ -0,0 +1,14 @@
+import { createContext } from "@lucasbernardosn/react-utils";
+//#region src/components/feedback/alert/use-alert-context.ts
+const alertDefaultVariants = {
+	status: "neutral",
+	variant: "surface"
+};
+const [AlertContextProvider, useAlertContext] = createContext({
+	name: "AlertContext",
+	providers: ["Alert.Root"]
+});
+//#endregion
+export { AlertContextProvider, alertDefaultVariants, useAlertContext };
+
+//# sourceMappingURL=use-alert-context.js.map

package/dist/components/feedback/alert/use-alert-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-alert-context.js","names":[],"sources":["../../../../src/components/feedback/alert/use-alert-context.ts"],"sourcesContent":["import { createContext } from '@lucasbernardosn/react-utils';\n\n/**\n * Variantes do Alert. Informadas no `Alert.Root` e repassadas às partes por contexto.\n */\nexport type AlertVariants = {\n  /**\n   * O que o alerta comunica. Decide a cor (`neutral` gray, `info` blue, `success` green, `warning`\n   * amber, `error` red) e o ícone padrão do `Alert.Indicator`.\n   *\n   * @default 'neutral'\n   */\n  status?: 'neutral' | 'info' | 'success' | 'warning' | 'error';\n  /**\n   * Fundo e borda: `surface` com fundo e borda, `subtle` só com fundo e `outline` só com borda.\n   *\n   * @default 'surface'\n   */\n  variant?: 'surface' | 'subtle' | 'outline';\n};\n\nexport const alertDefaultVariants: Required<AlertVariants> = {\n  status: 'neutral',\n  variant: 'surface',\n};\n\nexport const [AlertContextProvider, useAlertContext] =\n  createContext<AlertVariants>({\n    name: 'AlertContext',\n    providers: ['Alert.Root'],\n  });\n"],"mappings":";;AAqBA,MAAa,uBAAgD;CAC3D,QAAQ;CACR,SAAS;AACX;AAEA,MAAa,CAAC,sBAAsB,mBAClC,cAA6B;CAC3B,MAAM;CACN,WAAW,CAAC,YAAY;AAC1B,CAAC"}

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

@@ -2,8 +2,7 @@ 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`.
+ * Agrupa título e descrição, mais próximos entre si do que das outras partes.
  */
 export declare const EmptyStateContent: {
   (props: EmptyStateContentProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

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

@@ -2,8 +2,7 @@ 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`.
+* Agrupa título e descrição, mais próximos entre si do que das outras partes.
 */
 const EmptyStateContent = (props) => {
 	const { render, className, ...rest } = props;
@@ -12,7 +11,7 @@ const EmptyStateContent = (props) => {
 		className: mergeTwClassNames([
 			"flex",
 			"flex-col",
-			"gap-(--empty-state-header-gap,--spacing(0.5))"
+			"gap-0.5"
 		], className)
 	};
 	return useRender({

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

@@ -1 +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"}
+{"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.\n */\nexport const EmptyStateContent = (props: EmptyStateContentProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'EmptyState.Content',\n    className: mergeTwClassNames(['flex', 'flex-col', 'gap-0.5'], className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nEmptyStateContent.displayName = 'EmptyState.Content';\n"],"mappings":";;;;;;AAQA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB;GAAC;GAAQ;GAAY;EAAS,GAAG,SAAS;CACzE;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

@@ -2,8 +2,8 @@ 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`.
+ * Texto de apoio do estado vazio, em tom mais fraco que o título, com a tipografia fixa das
+ * descrições.
  */
 export declare const EmptyStateDescription: {
   (props: EmptyStateDescriptionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

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

@@ -2,16 +2,16 @@ 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`.
+* 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-(length:--empty-state-description-size,var(--text-sm))",
-			"leading-(--empty-state-description-leading,--spacing(5))",
+			"text-sm",
+			"leading-5",
 			"text-gray-11",
 			"text-pretty"
 		], className)

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

@@ -1 +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"}
+{"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

@@ -2,9 +2,10 @@ 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`.
+ * Í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>>;

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

@@ -2,9 +2,10 @@ 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`.
+* Í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;
@@ -15,7 +16,7 @@ const EmptyStateIndicator = (props) => {
 			"items-center",
 			"justify-center",
 			"text-gray-12",
-			"text-(length:--empty-state-indicator-size,--spacing(9))",
+			"text-(length:--empty-state-indicator-size,--spacing(6))",
 			"leading-none",
 			"[&_svg]:size-[1em]"
 		], className)

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

@@ -1 +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"}
+{"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

@@ -1,12 +1,5 @@
 //#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).
@@ -17,17 +10,10 @@ export type EmptyStateVariants = {
 };
 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`.
+ * 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?: ({
-  size?: "xs" | "sm" | "md" | "lg" | null | undefined;
   variant?: "outline" | "plain" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion