@yarcl/react 0.1.0 → 0.2.0

package/README.md

@@ -2,6 +2,16 @@
 
 Yet another react component library. Your config file is the design system: every key becomes a typed prop and a rendered style.
 
+From an existing React project using Vite, webpack, Rspack, Rollup or esbuild, run:
+
+```sh
+npx @yarcl/react init
+```
+
+This installs the package, adds the detected build plugin and TypeScript path mapping, and creates `src/yarcl.config.ts`. The equivalent commands are `pnpm dlx @yarcl/react init`, `yarn dlx @yarcl/react init` and `bunx @yarcl/react init`.
+
+For manual setup:
+
 ```sh
 npm install @yarcl/react
 ```
@@ -10,17 +20,19 @@ npm install @yarcl/react
 // vite.config.ts
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
-import { yarcl } from '@yarcl/react/plugin';
+import yarcl from '@yarcl/react/vite';
 
 export default defineConfig({ plugins: [react(), yarcl({ config: 'src/yarcl.config.ts' })] });
 ```
 
+For webpack, Rspack, Rollup or esbuild, import the plugin from the matching `@yarcl/react/<build-tool>` entry point.
+
 ```jsonc
 // tsconfig.json
 {
   "compilerOptions": {
     "paths": {
-      "@yarcl/config": ["./src/yarcl.config.ts", "./node_modules/@yarcl/react/src/yarcl.config.ts"]
+      "@yarcl/config": ["./src/yarcl.config.ts", "./node_modules/@yarcl/react/dist/yarcl.config.d.ts"]
     }
   }
 }

package/{src/apply.ts → dist/apply.d.ts}

@@ -1,17 +1,11 @@
 import { generateCss } from './css';
 import type { YarclShape } from './define';
-import { setActiveConfig } from './runtime';
-
 export { generateCss };
-
-const STYLE_ID = 'yarcl-theme';
-
 /** Options for {@link applyTheme}. */
 export interface ApplyThemeOptions {
-  /** Receives contrast warnings for the theme's colors. */
-  onWarning?: (message: string) => void;
+    /** Receives contrast warnings for the theme's colors. */
+    onWarning?: (message: string) => void;
 }
-
 /**
  * Switches the whole app to another theme at runtime, without a rebuild.
  *
@@ -28,19 +22,6 @@ export interface ApplyThemeOptions {
  * applyTheme(themes.editorial);
  * ```
  */
-export function applyTheme(theme: YarclShape, { onWarning }: ApplyThemeOptions = {}) {
-  let style = document.getElementById(STYLE_ID);
-  if (!style) {
-    style = document.createElement('style');
-    style.id = STYLE_ID;
-  }
-  document.head.appendChild(style);
-  style.textContent = generateCss(theme, onWarning);
-  setActiveConfig(theme);
-}
-
+export declare function applyTheme(theme: YarclShape, { onWarning }?: ApplyThemeOptions): void;
 /** Removes a theme applied with {@link applyTheme} and returns to the build-time config and styles. */
-export function resetTheme() {
-  document.getElementById(STYLE_ID)?.remove();
-  setActiveConfig(null);
-}
+export declare function resetTheme(): void;

package/dist/apply.js

@@ -0,0 +1,37 @@
+import { setActiveConfig } from "./runtime.js";
+import { generateCss } from "./css.js";
+//#region src/apply.ts
+var STYLE_ID = "yarcl-theme";
+/**
+* Switches the whole app to another theme at runtime, without a rebuild.
+*
+* Injects the theme's generated CSS (replacing the build-time styles) and makes components read
+* their defaults (`defaults`, `components`, heading levels) from the theme, re-rendering them.
+* The theme must define the keys your app uses; bundled themes share the defaults' keys
+* (`ThemeContract`), so any of them can replace another.
+*
+* @example
+* ```ts
+* import { applyTheme } from '@yarcl/react/css';
+* import { themes } from '@yarcl/react/themes';
+*
+* applyTheme(themes.editorial);
+* ```
+*/
+function applyTheme(theme, { onWarning } = {}) {
+	let style = document.getElementById(STYLE_ID);
+	if (!style) {
+		style = document.createElement("style");
+		style.id = STYLE_ID;
+	}
+	document.head.appendChild(style);
+	style.textContent = generateCss(theme, onWarning);
+	setActiveConfig(theme);
+}
+/** Removes a theme applied with {@link applyTheme} and returns to the build-time config and styles. */
+function resetTheme() {
+	document.getElementById(STYLE_ID)?.remove();
+	setActiveConfig(null);
+}
+//#endregion
+export { applyTheme, generateCss, resetTheme };

package/dist/classes.d.ts

@@ -0,0 +1,13 @@
+import type { Color, Density, Radius, Shadow, Size, Spacing, TextStyle, Variant } from './types';
+import type { ComponentName } from './define';
+export declare function cx(...parts: (string | false | null | undefined)[]): string;
+export declare const sizeClass: (size?: Size, component?: ComponentName) => string;
+export declare function radiusClass(radius?: Radius | 'size', size?: Size): string | undefined;
+export declare const colorClass: (color?: Color) => string;
+export declare const variantClass: (variant?: Variant) => string;
+export declare const gapClass: (gap?: Spacing) => string;
+export declare const paddingClass: (padding?: Spacing) => string;
+export declare const shadowClass: (shadow?: Shadow) => string | undefined;
+export declare const typeClass: (style: TextStyle) => string;
+export declare const densityClass: (density?: Density) => string;
+export declare const softVariantClass: (variant?: Variant) => string;

package/dist/classes.js

@@ -0,0 +1,22 @@
+import { activeConfig } from "./runtime.js";
+//#region src/classes.ts
+function cx(...parts) {
+	return parts.filter(Boolean).join(" ");
+}
+var sizeClass = (size = activeConfig().defaults.size, component) => `yarcl-size-${size}${component ? ` yarcl-sized-${component}` : ""}`;
+function radiusClass(radius, size) {
+	const value = radius ?? activeConfig().defaults.radius;
+	if (value !== "size") return `yarcl-radius-${value}`;
+	const match = size ?? activeConfig().defaults.size;
+	return match in activeConfig().radii ? `yarcl-radius-${match}` : void 0;
+}
+var colorClass = (color = activeConfig().defaults.color) => `yarcl-color-${color}`;
+var variantClass = (variant = activeConfig().defaults.variant) => `yarcl-variant-${variant}`;
+var gapClass = (gap = activeConfig().defaults.gap) => `yarcl-gap-${gap}`;
+var paddingClass = (padding = activeConfig().defaults.padding) => `yarcl-padding-${padding}`;
+var shadowClass = (shadow) => shadow && `yarcl-shadow-${shadow}`;
+var typeClass = (style) => `yarcl-type-${style}`;
+var densityClass = (density = activeConfig().defaults.density) => `yarcl-density-${density}`;
+var softVariantClass = (variant = activeConfig().defaults.softVariant) => `yarcl-variant-${variant}`;
+//#endregion
+export { colorClass, cx, densityClass, gapClass, paddingClass, radiusClass, shadowClass, sizeClass, softVariantClass, typeClass, variantClass };

package/dist/cli.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cli.js

@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+import { initProject } from "./init.js";
+import { readFile } from "node:fs/promises";
+import { dirname, resolve } from "node:path";
+import { error, log } from "node:console";
+import process from "node:process";
+import { fileURLToPath } from "node:url";
+//#region src/cli.ts
+var buildTools = /* @__PURE__ */ new Set([
+	"vite",
+	"webpack",
+	"rspack",
+	"rollup",
+	"esbuild"
+]);
+function usage() {
+	log("Usage: yarcl init [--config <path>] [--root <path>] [--bundler <name>] [--skip-install]");
+}
+function option(args, name) {
+	const index = args.indexOf(name);
+	if (index < 0) return void 0;
+	const value = args[index + 1];
+	if (!value || value.startsWith("--")) throw new Error(`yarcl: ${name} requires a value.`);
+	return value;
+}
+async function main() {
+	const args = process.argv.slice(2);
+	if (args.includes("--help") || args.includes("-h")) {
+		usage();
+		return;
+	}
+	if (args[0] !== "init") {
+		usage();
+		process.exitCode = 1;
+		return;
+	}
+	const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), "..");
+	const manifest = JSON.parse(await readFile(resolve(packageRoot, "package.json"), "utf8"));
+	const configPath = option(args, "--config");
+	const requestedBuildTool = option(args, "--bundler");
+	if (requestedBuildTool && !buildTools.has(requestedBuildTool)) throw new Error(`yarcl: Unsupported bundler "${requestedBuildTool}". Use vite, webpack, rspack, rollup or esbuild.`);
+	const root = resolve(option(args, "--root") ?? process.cwd());
+	const result = await initProject({
+		root,
+		configPath,
+		configProvided: configPath !== void 0,
+		buildTool: requestedBuildTool,
+		install: !args.includes("--skip-install"),
+		version: manifest.version
+	});
+	log(`yarcl configured ${result.configPath}`);
+	log(`Updated ${result.buildConfig.slice(root.length + 1)} and ${result.tsconfig.slice(root.length + 1)}`);
+}
+main().catch((cause) => {
+	error(cause instanceof Error ? cause.message : cause);
+	process.exitCode = 1;
+});
+//#endregion

package/dist/color.js

@@ -1,41 +1,58 @@
-export function parseHex(value) {
-    const hex = value.trim().replace(/^#/, '');
-    if (!/^([0-9a-f]{3}|[0-9a-f]{6})$/i.test(hex))
-        return null;
-    const full = hex.length === 3 ? [...hex].map((c) => c + c).join('') : hex;
-    return [0, 2, 4].map((i) => parseInt(full.slice(i, i + 2), 16));
+//#region src/color.ts
+function parseHex(value) {
+	const hex = value.trim().replace(/^#/, "");
+	if (!/^([0-9a-f]{3}|[0-9a-f]{6})$/i.test(hex)) return null;
+	const full = hex.length === 3 ? [...hex].map((c) => c + c).join("") : hex;
+	return [
+		0,
+		2,
+		4
+	].map((i) => parseInt(full.slice(i, i + 2), 16));
 }
 function luminance([r, g, b]) {
-    const [lr, lg, lb] = [r, g, b].map((c) => {
-        const s = c / 255;
-        return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
-    });
-    return 0.2126 * lr + 0.7152 * lg + 0.0722 * lb;
+	const [lr, lg, lb] = [
+		r,
+		g,
+		b
+	].map((c) => {
+		const s = c / 255;
+		return s <= .03928 ? s / 12.92 : ((s + .055) / 1.055) ** 2.4;
+	});
+	return .2126 * lr + .7152 * lg + .0722 * lb;
 }
-export function contrast(a, b) {
-    const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
-    return (hi + 0.05) / (lo + 0.05);
+function contrast(a, b) {
+	const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+	return (hi + .05) / (lo + .05);
 }
-const WHITE = [255, 255, 255];
-const BLACK = [0, 0, 0];
-export function mix(a, b, amount) {
-    return a.map((channel, i) => Math.round(channel + (b[i] - channel) * amount));
+var WHITE = [
+	255,
+	255,
+	255
+];
+var BLACK = [
+	0,
+	0,
+	0
+];
+function mix(a, b, amount) {
+	return a.map((channel, i) => Math.round(channel + (b[i] - channel) * amount));
 }
-export function toHex(rgb) {
-    return `#${rgb.map((c) => c.toString(16).padStart(2, '0')).join('')}`;
+function toHex(rgb) {
+	return `#${rgb.map((c) => c.toString(16).padStart(2, "0")).join("")}`;
 }
 /**
- * The color, mixed toward `toward` in small steps until it reaches `min` contrast
- * against every background. Returns the color unchanged when it already passes.
- */
-export function readableText(color, backgrounds, toward, min) {
-    for (let step = 0; step <= 20; step++) {
-        const candidate = mix(color, toward, step / 20);
-        if (backgrounds.every((bg) => contrast(candidate, bg) >= min))
-            return candidate;
-    }
-    return toward;
+* The color, mixed toward `toward` in small steps until it reaches `min` contrast
+* against every background. Returns the color unchanged when it already passes.
+*/
+function readableText(color, backgrounds, toward, min) {
+	for (let step = 0; step <= 20; step++) {
+		const candidate = mix(color, toward, step / 20);
+		if (backgrounds.every((bg) => contrast(candidate, bg) >= min)) return candidate;
+	}
+	return toward;
 }
-export function readableOn(background) {
-    return contrast(background, WHITE) >= contrast(background, BLACK) ? '#ffffff' : '#000000';
+function readableOn(background) {
+	return contrast(background, WHITE) >= contrast(background, BLACK) ? "#ffffff" : "#000000";
 }
+//#endregion
+export { contrast, mix, parseHex, readableOn, readableText, toHex };

package/dist/components/Accordion.d.ts

@@ -0,0 +1,96 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import type { Color, ComponentSize, Radius } from '../types';
+/** Props shared by both forms of {@link AccordionProps}. */
+export interface AccordionBaseProps extends Omit<ComponentProps<'div'>, 'defaultValue' | 'color'> {
+    /**
+     * Trigger height, padding and font size, from the `sizes` config.
+     * @default config.defaults.size
+     */
+    size?: ComponentSize<'Accordion'>;
+    /**
+     * Corner radius of the outer frame, from the `radii` config, or `'size'` to match the size.
+     * @default config.defaults.radius
+     */
+    radius?: Radius | 'size';
+    /**
+     * Color of the open item's indicator, from the `colors` config.
+     * @default config.defaults.color
+     */
+    color?: Color;
+    /** Disables every item. */
+    disabled?: boolean;
+    /** `Accordion.Item`s. */
+    children?: ReactNode;
+}
+/** Props for {@link Accordion}. `type` decides whether one or many items can be open. */
+export type AccordionProps = AccordionBaseProps & ({
+    /** One item open at a time. */
+    type: 'single';
+    /** Open item (controlled), or `null` when all are closed. */
+    value?: string | null;
+    /** Initially open item (uncontrolled). */
+    defaultValue?: string | null;
+    /** Called with the open item, or `null` when it closes. */
+    onValueChange?: (value: string | null) => void;
+    /**
+     * Lets the open item close, leaving all closed. When `false`, one item always stays open.
+     * @default true
+     */
+    collapsible?: boolean;
+} | {
+    /** Any number of items open. */
+    type: 'multiple';
+    /** Open items (controlled). */
+    value?: string[];
+    /** Initially open items (uncontrolled). */
+    defaultValue?: string[];
+    /** Called with all open items. */
+    onValueChange?: (value: string[]) => void;
+    collapsible?: never;
+});
+declare function AccordionRoot(props: AccordionProps): import("react").JSX.Element;
+/** Props for `Accordion.Item`. */
+export interface AccordionItemProps extends Omit<ComponentProps<'div'>, 'value'> {
+    /** Identifies the item in the accordion's value. */
+    value: string;
+    /** Prevents opening or closing this item. */
+    disabled?: boolean;
+}
+declare function AccordionItem({ value, disabled, className, ...props }: AccordionItemProps): import("react").JSX.Element;
+/** Props for `Accordion.Trigger`. */
+export interface AccordionTriggerProps extends ComponentProps<'button'> {
+    /**
+     * Level of the heading that wraps the button, to fit the page outline.
+     * @default 3
+     */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+declare function AccordionTrigger({ level, className, onClick, children, ...props }: AccordionTriggerProps): import("react").JSX.Element;
+/** Props for `Accordion.Content`. */
+export type AccordionContentProps = ComponentProps<'div'>;
+declare function AccordionContent({ className, children, ...props }: AccordionContentProps): import("react").JSX.Element;
+/**
+ * Stacked sections that expand and collapse. Each trigger is a button inside a heading;
+ * Up and Down move between triggers, Home and End jump to the ends. The panel height animates
+ * with the `motion` tokens, and snaps when reduced motion is preferred.
+ *
+ * @example
+ * ```tsx
+ * <Accordion type="single" defaultValue="shipping">
+ *   <Accordion.Item value="shipping">
+ *     <Accordion.Trigger>Shipping</Accordion.Trigger>
+ *     <Accordion.Content>Orders ship within two working days.</Accordion.Content>
+ *   </Accordion.Item>
+ *   <Accordion.Item value="returns">
+ *     <Accordion.Trigger>Returns</Accordion.Trigger>
+ *     <Accordion.Content>Free returns within 30 days.</Accordion.Content>
+ *   </Accordion.Item>
+ * </Accordion>
+ * ```
+ */
+export declare const Accordion: typeof AccordionRoot & {
+    Item: typeof AccordionItem;
+    Trigger: typeof AccordionTrigger;
+    Content: typeof AccordionContent;
+};
+export {};

package/dist/components/Accordion.js

@@ -0,0 +1,148 @@
+import { useDefaults } from "../runtime.js";
+import { colorClass, cx, radiusClass, sizeClass } from "../classes.js";
+import { useControllable } from "../hooks.js";
+import { ChevronIcon } from "../floating.js";
+import { createContext, useContext, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Accordion.tsx
+var AccordionContext = createContext(null);
+var AccordionItemContext = createContext(null);
+function useAccordionContext(component) {
+	const context = useContext(AccordionContext);
+	if (!context) throw new Error(`yarcl: <${component}> must be inside <Accordion>`);
+	return context;
+}
+function useItemContext(component) {
+	const context = useContext(AccordionItemContext);
+	if (!context) throw new Error(`yarcl: <${component}> must be inside <Accordion.Item>`);
+	return context;
+}
+var toArray = (value) => value == null ? [] : Array.isArray(value) ? value : [value];
+function AccordionRoot(props) {
+	const own = useDefaults("Accordion");
+	const { type, value, defaultValue, onValueChange, collapsible = true, size, radius, color, disabled, className, onKeyDown, ...rest } = props;
+	const [open, setOpen] = useControllable(value === void 0 ? void 0 : toArray(value), toArray(defaultValue), (next) => type === "multiple" ? onValueChange?.(next) : onValueChange?.(next[0] ?? null));
+	const baseId = useId();
+	const idFor = (kind, v) => `${baseId}-${kind}-${v.replace(/[^\w-]/g, "_")}`;
+	function toggle(item) {
+		const on = open.includes(item);
+		if (type === "multiple") setOpen(on ? open.filter((v) => v !== item) : [...open, item]);
+		else if (!on) setOpen([item]);
+		else if (collapsible) setOpen([]);
+	}
+	function handleKeyDown(event) {
+		onKeyDown?.(event);
+		const root = event.currentTarget;
+		const triggers = [...root.querySelectorAll(".yarcl-accordion-trigger:not(:disabled)")].filter((trigger) => trigger.closest(".yarcl-accordion") === root);
+		const current = triggers.indexOf(document.activeElement);
+		if (current === -1) return;
+		const next = {
+			ArrowDown: (current + 1) % triggers.length,
+			ArrowUp: (current - 1 + triggers.length) % triggers.length,
+			Home: 0,
+			End: triggers.length - 1
+		}[event.key];
+		if (next === void 0) return;
+		event.preventDefault();
+		triggers[next].focus();
+	}
+	const resolvedSize = size ?? own.size;
+	return /* @__PURE__ */ jsx(AccordionContext.Provider, {
+		value: {
+			open,
+			toggle,
+			disabled,
+			idFor
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: cx("yarcl-accordion", sizeClass(resolvedSize, "Accordion"), radiusClass(radius ?? own.radius, resolvedSize), colorClass(color ?? own.color), className),
+			onKeyDown: handleKeyDown,
+			...rest
+		})
+	});
+}
+function AccordionItem({ value, disabled, className, ...props }) {
+	const context = useAccordionContext("Accordion.Item");
+	const open = context.open.includes(value);
+	const itemDisabled = disabled || context.disabled;
+	return /* @__PURE__ */ jsx(AccordionItemContext.Provider, {
+		value: {
+			value,
+			open,
+			disabled: itemDisabled
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			"data-state": open ? "open" : "closed",
+			"data-disabled": itemDisabled || void 0,
+			className: cx("yarcl-accordion-item", className),
+			...props
+		})
+	});
+}
+function AccordionTrigger({ level = 3, className, onClick, children, ...props }) {
+	const context = useAccordionContext("Accordion.Trigger");
+	const item = useItemContext("Accordion.Trigger");
+	const Heading = `h${level}`;
+	return /* @__PURE__ */ jsx(Heading, {
+		className: "yarcl-accordion-heading",
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			id: context.idFor("trigger", item.value),
+			"aria-controls": context.idFor("content", item.value),
+			"aria-expanded": item.open,
+			disabled: item.disabled,
+			className: cx("yarcl-accordion-trigger", className),
+			onClick: (event) => {
+				onClick?.(event);
+				if (!event.defaultPrevented) context.toggle(item.value);
+			},
+			...props,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "yarcl-accordion-label",
+				children
+			}), /* @__PURE__ */ jsx(ChevronIcon, {})]
+		})
+	});
+}
+function AccordionContent({ className, children, ...props }) {
+	const context = useAccordionContext("Accordion.Content");
+	const item = useItemContext("Accordion.Content");
+	return /* @__PURE__ */ jsx("div", {
+		role: "region",
+		id: context.idFor("content", item.value),
+		"aria-labelledby": context.idFor("trigger", item.value),
+		"data-state": item.open ? "open" : "closed",
+		className: cx("yarcl-accordion-content", className),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "yarcl-accordion-body",
+			children
+		})
+	});
+}
+/**
+* Stacked sections that expand and collapse. Each trigger is a button inside a heading;
+* Up and Down move between triggers, Home and End jump to the ends. The panel height animates
+* with the `motion` tokens, and snaps when reduced motion is preferred.
+*
+* @example
+* ```tsx
+* <Accordion type="single" defaultValue="shipping">
+*   <Accordion.Item value="shipping">
+*     <Accordion.Trigger>Shipping</Accordion.Trigger>
+*     <Accordion.Content>Orders ship within two working days.</Accordion.Content>
+*   </Accordion.Item>
+*   <Accordion.Item value="returns">
+*     <Accordion.Trigger>Returns</Accordion.Trigger>
+*     <Accordion.Content>Free returns within 30 days.</Accordion.Content>
+*   </Accordion.Item>
+* </Accordion>
+* ```
+*/
+var Accordion = Object.assign(AccordionRoot, {
+	Item: AccordionItem,
+	Trigger: AccordionTrigger,
+	Content: AccordionContent
+});
+//#endregion
+export { Accordion };

package/dist/components/Alert.d.ts

@@ -0,0 +1,60 @@
+import type { ComponentProps, ReactNode } from 'react';
+import type { Color, Radius, Spacing, TextStyle, Variant } from '../types';
+/** Props for {@link Alert}. */
+export interface AlertProps extends Omit<ComponentProps<'div'>, 'color' | 'title'> {
+    /** Bold first line. */
+    title?: ReactNode;
+    /** Icon shown before the text. */
+    icon?: ReactNode;
+    /** Actions shown after the text, e.g. a {@link Button} or {@link Link}. */
+    action?: ReactNode;
+    /**
+     * Semantic color, from the `colors` config.
+     * @default config.defaults.color
+     */
+    color?: Color;
+    /**
+     * Style recipe, from the `variants` config.
+     * @default config.defaults.softVariant
+     */
+    variant?: Variant;
+    /**
+     * Corner radius, from the `radii` config.
+     * @default config.defaults.radius
+     */
+    radius?: Radius;
+    /**
+     * Space between the icon, text, action and dismiss button, from the `spacing` config.
+     * @default config.components.Alert.gap ?? config.defaults.gap
+     */
+    gap?: Spacing;
+    /**
+     * Inner spacing, from the `spacing` config.
+     * @default config.components.Alert.padding ?? config.defaults.padding
+     */
+    padding?: Spacing;
+    /**
+     * Typography style, from the `typography.styles` config.
+     * @default config.components.Alert.textStyle ?? config.defaults.labelStyle
+     */
+    textStyle?: TextStyle;
+    /** Shows a dismiss button. Called when it is pressed; hide the alert in response. */
+    onDismiss?: () => void;
+    /**
+     * Announces the alert when it appears: `'polite'` (`role="status"`) or `'assertive'` (`role="alert"`).
+     * Leave unset for messages present on page load.
+     */
+    live?: 'polite' | 'assertive';
+}
+/**
+ * An inline message that stays on the page, e.g. a warning above a form.
+ * For transient messages use {@link toast}.
+ *
+ * @example
+ * ```tsx
+ * <Alert color="warning" title="Trial ends in 3 days" action={<Button size="sm">Upgrade</Button>}>
+ *   Add a payment method to keep your projects.
+ * </Alert>
+ * ```
+ */
+export declare function Alert({ title, icon, action, color, variant, radius, gap, padding, textStyle, onDismiss, live, className, children, ...props }: AlertProps): import("react").JSX.Element;