asheeui 0.7.0 → 1.1.0

package/README.md

@@ -1,210 +1,105 @@
 # asheeui
 
-A config-driven React component library built on Tailwind CSS v4. Accessible, styled components with a unified configuration system — set defaults once, override them anywhere.
+A React UI framework built on Tailwind CSS v4. Accessible, config-driven
+components, a layout system, the sections a page is made of, and a Puck
+integration behind their own entry point.
 
 ## Features
 
-- **Config-driven** — Define theme, variant, color, and radius defaults in one place (`asheeui.config.ts`) and override at the component or instance level.
-- **Tailwind CSS v4** — Built on the latest Tailwind with CSS-variable-driven theming.
-- **Light & dark themes** — Ships with built-in `light`, `dark`, and `system` themes, plus full support for custom themes.
-- **Accessible components** — Every component is designed with accessibility in mind.
-- **Runtime theming** — Switch themes on the fly with the `useTheme` hook; preferences persist via `localStorage`.
-- **TypeScript-first** — Fully typed config, theme registry, and component props.
+- **Config-driven** — theme, variant, color, radius and spacing defaults resolve
+  through one cascade, so a value can be set globally, per component or per
+  instance.
+- **A layout system** — `Container`, `Section`, `Stack`/`HStack`/`VStack`,
+  `Grid`, `Page`/`PageHeader`/`PageContent`/`PageFooter`, plus `SidebarLayout`
+  and `AuthLayout` for application pages.
+- **Page sections** — `Navbar`, `Hero`, `FeatureGrid`, `CTA`, `Testimonials`,
+  `PricingCard` and `Footer`, each taking its actions as configuration.
+- **Puck integration** — `asheeui/puck` exposes the same components as builder
+  blocks, so an application, an editor and a published page share one
+  implementation. `@puckeditor/core` is an optional peer dependency.
+- **Tailwind CSS v4** — class names are static and complete, and colours resolve
+  through CSS custom properties.
+- **Light and dark themes** — built-in `light`, `dark` and `system` themes, plus
+  custom themes.
+- **Accessible** — landmarks, names, keyboard behaviour and announced state are
+  part of each component's contract, with tests that state them.
+- **TypeScript-first** — fully typed configuration, theme registry and component
+  props, with JSDoc on every exported symbol.
 
 ## Requirements
 
 - React 18 or newer
 - Tailwind CSS v4
-- Node.js 18 or newer
+- Node.js 22.12 or newer for development
 
 ## Installation
 
-The fastest way to get started is with the CLI. Run this in your project root:
-
-```bash
-npx asheeui@latest init
-```
-
-The CLI detects your framework, installs dependencies, adds the provider to your root layout, and configures Tailwind.
-
-### Manual setup
-
-Install the package:
-
 ```bash
-npm install asheeui@latest
+npm install asheeui
 ```
 
-Add the styles import to your global CSS file (must come **after** the Tailwind import):
+Import the stylesheet once and wrap your root in the provider:
 
 ```css
 @import "tailwindcss";
 @import "asheeui/styles";
 ```
 
-Wrap your app with `AsheeUIProvider`:
-
-```jsx
+```tsx
 import { AsheeUIProvider } from "asheeui";
-
-export default function RootLayout({ children }) {
-  return (
-    <html suppressHydrationWarning>
-      <body>
-        <AsheeUIProvider>{children}</AsheeUIProvider>
-      </body>
-    </html>
-  );
-}
 ```
 
-> **Note:** `suppressHydrationWarning` is required on the `<html>` element to prevent hydration mismatches from theme switching.
+The optional `@asheeui/cli` package can scaffold that setup and check it, but it
+is not required: the two steps above are the whole setup.
 
-### Framework guides
+## Documentation
 
-- [Next.js](/docs/installation/nextjs) — App Router and Pages Router
-- [TanStack Start](/docs/installation/tanstack-start) — Full-stack React with TanStack Router
-- [Vite + React](/docs/installation/vite) — Lightweight React SPA
+The framework documentation lives in the repository:
 
-## Quick start
-
-Render a component:
-
-```jsx
-import { Button } from "asheeui";
-
-function App() {
-  return <Button>Hello AsheeUI</Button>;
-}
-```
+- [Installation](https://github.com/AsheeSoftworks/AsheeUI/blob/main/docs/installation.md)
+- [Configuration](https://github.com/AsheeSoftworks/AsheeUI/blob/main/docs/configuration.md)
+- [Components](https://github.com/AsheeSoftworks/AsheeUI/blob/main/docs/components.md)
+- [Puck](https://github.com/AsheeSoftworks/AsheeUI/blob/main/docs/puck.md)
+- [Accessibility](https://github.com/AsheeSoftworks/AsheeUI/blob/main/docs/accessibility.md)
+- [Migration](https://github.com/AsheeSoftworks/AsheeUI/blob/main/docs/migration.md)
 
-You should see a styled button using the default theme.
-
-## Configuration
-
-AsheeUI is configured through an optional `asheeui.config.ts` file at your project root. Sensible defaults apply with no config at all.
-
-```ts
-// asheeui.config.ts
-import type { ExternalConfig } from "asheeui";
-
-export const config: ExternalConfig = {
-  defaultTheme: "system",   // "light" | "dark" | "system"
-  defaultVariant: "solid",  // "solid" | "ghost" | "bordered" | "faded" | "underlined"
-  defaultColor: "primary",  // "none" | "default" | "primary" | "secondary" | "danger" | "warning" | "success"
-  defaultRadius: "md",      // "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full"
-};
-```
-
-Values are resolved in this order (highest priority first):
-
-1. **Instance prop** — `<Button variant="solid" />`
-2. **Component config** — `components.button.variant`
-3. **Theme default** — top-level `defaultVariant`, `defaultColor`, etc.
-4. **Built-in fallback** — the library's internal default
-
-### Per-component defaults
-
-Set defaults for specific components while keeping global defaults for everything else:
-
-```ts
-export const config: ExternalConfig = {
-  defaultVariant: "bordered",       // applies to all components
-  components: {
-    button: { variant: "solid" },   // overrides for Button only
-    input:  { variant: "bordered", radius: "sm" },
-    toast:  { variant: "bordered", placement: "bottom-right" },
-  },
-};
-```
-
-See the [Configuration docs](/docs/configuration) for the full reference.
-
-## Theming
-
-AsheeUI's theming system is CSS-variable-driven. It ships with `light`, `dark`, and `system` themes, and you can override tokens or define entirely custom themes.
-
-### Switch themes at runtime
-
-```jsx
-import { useTheme } from "asheeui";
+## Quick start
 
-function ThemeSwitcher() {
-  const { theme, setTheme, toggleTheme } = useTheme();
+```tsx
+import { Button, Page, PageContent, Hero } from "asheeui";
 
+export function App() {
   return (
-    <div>
-      <p>Current theme: {theme}</p>
-      <button onClick={() => setTheme("dark")}>Dark</button>
-      <button onClick={() => setTheme("light")}>Light</button>
-      <button onClick={toggleTheme}>Toggle</button>
-    </div>
+    <Page>
+      <PageContent>
+        <Hero
+          title="Run your campaigns from one place"
+          primaryAction={{ label: "Start free", href: "/signup" }}
+        />
+        <Button>Hello AsheeUI</Button>
+      </PageContent>
+    </Page>
   );
 }
 ```
 
-`useTheme` returns:
-
-| Property | Type | Description |
-|---|---|---|
-| `theme` | `ThemeSelection` | Current selected theme (`"light"` \| `"dark"` \| `"system"`) |
-| `resolvedTheme` | `ThemeName` | Actual resolved theme (after system fallback) |
-| `setTheme` | `(theme: ThemeSelection) => void` | Set the active theme |
-| `toggleTheme` | `() => void` | Cycle to the next theme in sequence |
-| `availableThemes` | `readonly string[]` | All registered theme names |
+A complete page is `Navbar`, a band or two, and `Footer`, all of them composing
+through `Page`, `Section`, `Container` and `Grid`.
 
-Theme preference persists across page reloads via `localStorage`.
-
-### Override a built-in theme
-
-```ts
-export const config: ExternalConfig = {
-  color: {
-    light: { primary: "#7c3aed", background: "#faf5ff" },
-    dark:  { primary: "#8b5cf6", border: "#3b3b3b" },
-  },
-};
-```
-
-Only the tokens you specify are overridden — everything else stays at the built-in default.
-
-### Add a custom theme
-
-Extend `light` or `dark` and override only what you need:
-
-```ts
-export const config: ExternalConfig = {
-  defaultTheme: "company-red",
-  color: {
-    "company-red": {
-      extends: "dark",
-      background: "#1a0505",
-      foreground: "#fef2f2",
-      primary: "#dc2626",
-      // ...other tokens inherit from dark
-    },
-  },
-};
-```
-
-> **TypeScript:** Register custom theme names so `useTheme` and `setTheme` recognize them:
->
-> ```ts
-> declare module "asheeui" {
->   interface AsheeColorRegistry {
->     "company-red": true;
->   }
-> }
-> ```
+## Theming
 
-See the [Theming docs](/docs/theming) for the full token list.
+Themes are CSS custom properties (`--ashee-background`, `--ashee-primary`, and
+so on), applied by the provider before the first paint. `useTheme` switches the
+theme at runtime and records the preference, `themeController` does the same
+outside React, and a theme is defined as a block in the configuration.
 
 ## Links
 
-- [Documentation](/docs)
-- [Configuration reference](/docs/configuration)
-- [Theming reference](/docs/theming)
+- Documentation: https://asheeui.com
+- Repository: https://github.com/AsheeSoftworks/AsheeUI
+- Issues: https://github.com/AsheeSoftworks/AsheeUI/issues
 
 ## License
 
-MIT
+MIT
+

package/dist/AsheeUIProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AsheeUIProvider.d.ts","sourceRoot":"","sources":["../src/AsheeUIProvider.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAOtD;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,wBAAgB,eAAe,CAAC,EAC9B,MAAW,EACX,QAAQ,GACT,EAAE,oBAAoB,+BAgBtB"}
+{"version":3,"file":"AsheeUIProvider.d.ts","sourceRoot":"","sources":["../src/AsheeUIProvider.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,SAAS,EAAiC,MAAM,OAAO,CAAC;AACtE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAWtD;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AA2BD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,wBAAgB,eAAe,CAAC,EAC9B,MAAW,EACX,QAAQ,GACT,EAAE,oBAAoB,+BAiCtB"}

package/dist/AsheeUIProvider.js

@@ -2,23 +2,30 @@
 "use client";
 import { themeController as e } from "./theme/controller.js";
 import { resolveConfig as t } from "./config/resolve-config.js";
-import { AsheeConfigContext as n } from "./libs/context.js";
-import { useIsomorphicLayoutEffect as r } from "./libs/use-isomorphic-layout-effect.js";
-import { AsheeThemeScript as i } from "./scripts/AsheeThemeScript.js";
-import { useMemo as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { assertValidConfig as n } from "./config/validate-config.js";
+import { AsheeConfigContext as r } from "./libs/context.js";
+import { useIsomorphicLayoutEffect as i } from "./libs/use-isomorphic-layout-effect.js";
+import { AsheeThemeScript as a, ensureThemeVarsStyle as o } from "./scripts/AsheeThemeScript.js";
+import { useMemo as s, useSyncExternalStore as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/AsheeUIProvider.tsx
-function c({ config: c = {}, children: l }) {
-	let u = a(() => t(c), [c]);
-	return r(() => {
+var d = () => () => {};
+function f() {
+	return c(d, () => !1, () => !0);
+}
+function p({ config: c = {}, children: d }) {
+	let p = s(() => (n(c), t(c)), [c]);
+	i(() => {
 		e.configure({
-			defaultTheme: u.defaultTheme ?? "system",
-			themes: Object.keys(u.color)
-		});
-	}, [u]), /* @__PURE__ */ s(n.Provider, {
-		value: u,
-		children: [/* @__PURE__ */ o(i, { config: u }), l]
+			defaultTheme: p.defaultTheme ?? "system",
+			themes: Object.keys(p.color)
+		}), o(p);
+	}, [p]);
+	let m = f();
+	return /* @__PURE__ */ u(r.Provider, {
+		value: p,
+		children: [m && /* @__PURE__ */ l(a, { config: p }), d]
 	});
 }
 //#endregion
-export { c as AsheeUIProvider };
+export { p as AsheeUIProvider };

package/dist/components/accordion/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/Accordion.tsx"],"names":[],"mappings":"AAUA,OAAO,EAEL,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAUf,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,aAAa,EAInB,MAAM,oBAAoB,CAAC;AAU5B,KAAK,kBAAkB,GAAG,eAAe,GACvC,IAAI,CACF,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,OAAO,GAAG,cAAc,GAAG,UAAU,CACtC,CAAC;AAEJ;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD;;;;;;OAMG;IACH,KAAK,EAAE,aAAa,EAAE,CAAC;IAEvB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAEjC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAE1B;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAE1C;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH,eAAO,MAAM,SAAS,2GAmOrB,CAAC"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/Accordion.tsx"],"names":[],"mappings":"AAUA,OAAO,EAEL,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAUf,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,aAAa,EAInB,MAAM,oBAAoB,CAAC;AAU5B,KAAK,kBAAkB,GAAG,eAAe,GACvC,IAAI,CACF,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,OAAO,GAAG,cAAc,GAAG,UAAU,CACtC,CAAC;AAEJ;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD;;;;;;OAMG;IACH,KAAK,EAAE,aAAa,EAAE,CAAC;IAEvB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAEjC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAE1B;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAE1C;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH,eAAO,MAAM,SAAS,2GAyOrB,CAAC"}

package/dist/components/accordion/Accordion.js

@@ -1,9 +1,9 @@
 "use client";
 "use client";
 import { cn as e } from "../../utils/cn.js";
-import { useAsheeConfig as t } from "../../libs/context.js";
-import { ChevronDownIcon as n } from "../../icons/ChevronDownIcon.js";
-import { RADIUS_CLASS as r } from "../../shared/radius.js";
+import { RADIUS_CLASS as t } from "../../shared/radius.js";
+import { useAsheeConfig as n } from "../../libs/context.js";
+import { ChevronDownIcon as r } from "../../icons/ChevronDownIcon.js";
 import { resolveCascade as i, resolveClassKey as a, resolveRadiusKey as o } from "../../utils/resolve-token.js";
 import { FALLBACK_ACCORDION_CONFIG as s } from "./accordion-config.js";
 import { ACCORDION_CONTENT_SIZE_CLASS as c, ACCORDION_HEADER_SIZE_CLASS as l, ACCORDION_VARIANT_CONTAINER_CLASS as u, ACCORDION_VARIANT_ITEM_CLASS as d } from "./accordion-styles.js";
@@ -11,7 +11,7 @@ import { forwardRef as f, useCallback as p, useId as m, useState as h } from "re
 import { jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/components/accordion/Accordion.tsx
 var v = f(({ items: f = [], variant: v, size: y, radius: b, allowMultiple: x, defaultValue: S, value: C, onValueChange: w, expandIcon: T, disableAnimation: E = !1, itemClassName: D, headerClassName: O, contentClassName: k, className: A, style: j, id: M, ...N }, P) => {
-	let F = t(), I = F.components?.accordion, L = m(), R = M ?? L, z = i(y, I?.size, void 0, s.size), B = i(v, I?.variant, F.defaultVariant, s.variant), V = i(x, I?.allowMultiple, void 0, s.allowMultiple), H = o(b, I?.radius, F.defaultRadius, s.radius), U = u[B] ?? u.separated, W = d[B] ?? d.separated, G = a(z, l, s.size), K = a(z, c, s.size), q = a(H, r, s.radius), J = C !== void 0, Y = p((e) => e === void 0 ? [] : Array.isArray(e) ? e : [e], []), [X, Z] = h(() => Y(S)), Q = J ? Y(C) : X, $ = p((e, t) => {
+	let F = n(), I = F.components?.accordion, L = m(), R = M ?? L, z = i(y, I?.size, void 0, s.size), B = i(v, I?.variant, F.defaultVariant, s.variant), V = i(x, I?.allowMultiple, void 0, s.allowMultiple), H = o(b, I?.radius, F.defaultRadius, s.radius), U = u[B] ?? u.separated, W = d[B] ?? d.separated, G = a(z, l, s.size), K = a(z, c, s.size), q = a(H, t, s.radius), J = C !== void 0, Y = p((e) => e === void 0 ? [] : Array.isArray(e) ? e : [e], []), [X, Z] = h(() => Y(S)), Q = J ? Y(C) : X, $ = p((e, t) => {
 		if (t) return;
 		let n;
 		n = Q.includes(e) ? Q.filter((t) => t !== e) : V ? [...Q, e] : [e], J || Z(n), w?.(n);
@@ -27,8 +27,8 @@ var v = f(({ items: f = [], variant: v, size: y, radius: b, allowMultiple: x, de
 		className: e("w-full", U, B !== "ghost" && B !== "flush" && q, A),
 		style: j,
 		...N,
-		children: f.map((t, r) => {
-			let i = t.id || `item-${r}`, a = Q.includes(i), o = `${R}-header-${i}`, s = `${R}-content-${i}`;
+		children: f.map((t, n) => {
+			let i = t.id || `item-${n}`, a = Q.includes(i), o = `${R}-header-${i}`, s = `${R}-content-${i}`;
 			return /* @__PURE__ */ _("div", {
 				className: e("w-full transition-colors box-border", W, (B === "separated" || B === "ghost") && q, D),
 				children: [/* @__PURE__ */ _("button", {
@@ -56,12 +56,14 @@ var v = f(({ items: f = [], variant: v, size: y, radius: b, allowMultiple: x, de
 						})]
 					}), /* @__PURE__ */ g("div", {
 						className: e("text-foreground/70 shrink-0 ml-2 transition-transform duration-200 ease-in-out", E ? "transition-none" : "", a && "rotate-180"),
-						children: T || /* @__PURE__ */ g(n, { className: "w-4 h-4" })
+						children: T || /* @__PURE__ */ g(r, { className: "w-4 h-4" })
 					})]
 				}), /* @__PURE__ */ g("section", {
 					id: s,
 					"aria-labelledby": o,
 					"data-state": a ? "open" : "closed",
+					"aria-hidden": !a || void 0,
+					inert: !a,
 					className: e("w-full grid transition-[grid-template-rows,opacity] duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]", E ? "transition-none" : "", a ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0 pointer-events-none"),
 					children: /* @__PURE__ */ g("div", {
 						className: "scrollbar-hide overflow-hidden w-full",

package/dist/components/alert/Alert.d.ts

@@ -0,0 +1,88 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { AlertConfig, AlertType } from './alert-config';
+type BaseAlertProps = AlertConfig & Omit<HTMLAttributes<HTMLDivElement>, "color" | "title" | "content">;
+/**
+ * Configuration options for the Alert component.
+ */
+export interface AlertProps extends BaseAlertProps {
+    /**
+     * Intent of the alert.
+     * Selects the colour and the urgency of the announcement.
+     *
+     * @default "info"
+     */
+    type?: AlertType;
+    /**
+     * Short heading for the message.
+     */
+    title?: ReactNode;
+    /**
+     * Message body.
+     */
+    children?: ReactNode;
+    /**
+     * Leading content, shown in place of the intent's default icon.
+     */
+    icon?: ReactNode;
+    /**
+     * Whether the alert can be dismissed by the consumer.
+     * The dismiss control appears only when this is true and `onClose` is given.
+     *
+     * @default false
+     */
+    isClosable?: boolean;
+    /**
+     * Called when the dismiss control is used.
+     */
+    onClose?: () => void;
+    /**
+     * Name of the dismiss control, for assistive technology.
+     *
+     * @default "Dismiss alert"
+     */
+    closeLabel?: string;
+}
+/**
+ * An inline message or validation summary.
+ *
+ * Alert presents a message next to the surface it relates to: a form summary,
+ * a failed step, or a statement the consumer should not miss. Its colour,
+ * variant and radius resolve through the standard AsheeUI cascade: prop,
+ * component config, global theme defaults, and the built-in fallback.
+ *
+ * The intent decides how urgently the message is announced. `error` and
+ * `warning` are exposed as an alert, which interrupts assistive technology;
+ * `info` and `success` are exposed as a status, which waits for a pause. Pass
+ * `role` to override that choice.
+ *
+ * An alert never moves focus, never takes focus, and never appears above the
+ * page: when a message has to interrupt with a modal surface, use `Modal`
+ * instead. The dismiss control carries an accessible name and is the only
+ * focusable element the component adds.
+ *
+ * @param props - Alert configuration options and div attributes.
+ * @param props.type - Intent. Defaults to "info".
+ * @param props.title - Short heading for the message.
+ * @param props.children - Message body.
+ * @param props.icon - Leading content, in place of the default icon.
+ * @param props.isClosable - Whether a dismiss control is shown. Defaults to false.
+ * @param props.onClose - Called when the dismiss control is used.
+ * @param props.closeLabel - Name of the dismiss control. Defaults to "Dismiss alert".
+ * @param props.variant - Visual style variant. Defaults to the configured value.
+ * @param props.radius - Corner rounding. Defaults to "md".
+ * @param props.role - Announcement role, overriding the intent's default.
+ * @param props.className - Extra classes applied last.
+ *
+ * @example
+ * ```tsx
+ * <Alert type="error" title="Payment failed">
+ *   The card was declined. Check the details and try again.
+ * </Alert>
+ * ```
+ *
+ * @see AlertConfig - The configuration type for component defaults.
+ * @see ToastProvider - For messages that appear above the page instead of inline.
+ */
+export declare const Alert: import('react').ForwardRefExoticComponent<AlertProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=Alert.d.ts.map

package/dist/components/alert/Alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/alert/Alert.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAWxE,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,SAAS,EAEf,MAAM,gBAAgB,CAAC;AAUxB,KAAK,cAAc,GAAG,WAAW,GAC/B,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC;AAEtE;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAqBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,KAAK,uGAwFjB,CAAC"}

package/dist/components/alert/Alert.js

@@ -0,0 +1,61 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { RADIUS_CLASS as t } from "../../shared/radius.js";
+import { resolveVariantClass as n } from "../../shared/variant.js";
+import { useAsheeConfig as r } from "../../libs/context.js";
+import { resolveCascade as i, resolveClassKey as a } from "../../utils/resolve-token.js";
+import { CheckIcon as o } from "../../icons/CheckIcon.js";
+import { CloseIcon as s } from "../../icons/CloseIcon.js";
+import { ErrorIcon as c } from "../../icons/ErrorIcon.js";
+import { InfoIcon as l } from "../../icons/InfoIcon.js";
+import { WarningIcon as u } from "../../icons/WarningIcon.js";
+import { FALLBACK_ALERT_CONFIG as d } from "./alert-config.js";
+import { ALERT_BASE_CLASS as f, ALERT_ICON_CLASS as p, ALERT_TYPE_COLOR as m, ALERT_TYPE_ICON_CLASS as h, ALERT_TYPE_ROLE as g } from "./alert-styles.js";
+import { forwardRef as _ } from "react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+//#region src/components/alert/Alert.tsx
+function b(e) {
+	switch (e) {
+		case "success": return /* @__PURE__ */ v(o, {});
+		case "error": return /* @__PURE__ */ v(c, {});
+		case "warning": return /* @__PURE__ */ v(u, {});
+		default: return /* @__PURE__ */ v(l, {});
+	}
+}
+var x = _(({ type: o, variant: c, radius: l, title: u, children: _, icon: x, isClosable: S = !1, onClose: C, closeLabel: w = "Dismiss alert", role: T, className: E, ...D }, O) => {
+	let k = r(), A = k.components?.alert, j = i(o, A?.type, void 0, d.type), M = i(c, A?.variant, k.defaultVariant, d.variant), N = M === "underlined" ? "bordered" : M, P = i(l, A?.radius, k.defaultRadius, d.radius), F = a(P, t, d.radius);
+	return /* @__PURE__ */ y("div", {
+		ref: O,
+		role: T ?? g[j],
+		className: e(f, F, n(N, m[j]), E),
+		...D,
+		children: [
+			/* @__PURE__ */ v("span", {
+				"aria-hidden": "true",
+				className: e(p, h[j]),
+				children: x ?? b(j)
+			}),
+			/* @__PURE__ */ y("div", {
+				className: "flex-1 min-w-0 flex flex-col gap-0.5",
+				children: [u && /* @__PURE__ */ v("span", {
+					className: "font-medium",
+					children: u
+				}), _ && /* @__PURE__ */ v("div", {
+					className: "text-current/80",
+					children: _
+				})]
+			}),
+			S && C && /* @__PURE__ */ v("button", {
+				type: "button",
+				"aria-label": w,
+				onClick: C,
+				className: "shrink-0 inline-flex items-center justify-center size-6 rounded-sm text-current/70 hover:text-current transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-current",
+				children: /* @__PURE__ */ v(s, { className: "size-3.5" })
+			})
+		]
+	});
+});
+x.displayName = "Alert";
+//#endregion
+export { x as Alert };

package/dist/components/alert/alert-config.d.ts

@@ -0,0 +1,56 @@
+import { Radius, Variant } from '../../shared';
+/**
+ * Intent of an alert.
+ * Selects the colour an alert is presented in and how urgently it is
+ * announced: `error` and `warning` interrupt, `info` and `success` wait for a
+ * pause in what assistive technology is reading.
+ */
+export type AlertType = "success" | "error" | "info" | "warning";
+/**
+ * Theme configuration options for the Alert component.
+ *
+ * Set under `components.alert` in the AsheeUI config. Values feed the
+ * component-level fallback tier of the theme cascade.
+ */
+export interface AlertConfig {
+    /**
+     * Intent of the alert.
+     * Controls its colour and how urgently its message is announced.
+     *
+     * @default "info"
+     */
+    type?: AlertType;
+    /**
+     * Visual style variant.
+     * Controls the alert's background, border, and text treatment.
+     *
+     * @default "faded"
+     */
+    variant?: Exclude<Variant, "underlined">;
+    /**
+     * Corner rounding.
+     * Controls the border-radius of the alert.
+     *
+     * @default "md"
+     */
+    radius?: Radius;
+}
+/**
+ * Default config values registered for the Alert component.
+ *
+ * `variant` is intentionally absent so it inherits from the global
+ * `defaultVariant`.
+ */
+export declare const defaultAlertConfig: AlertConfig;
+/**
+ * Hard fallback values used when no config tier provides a value.
+ * These values are used when instance props, component config,
+ * and global defaults are all undefined.
+ */
+export declare const FALLBACK_ALERT_CONFIG: Required<AlertConfig>;
+declare module "../../libs/registry" {
+    interface ComponentTypeConfigRegistry {
+        alert: AlertConfig;
+    }
+}
+//# sourceMappingURL=alert-config.d.ts.map

package/dist/components/alert/alert-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-config.d.ts","sourceRoot":"","sources":["../../../src/components/alert/alert-config.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEpD;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAEjE;;;;;GAKG;AACH,MAAM,WAAW,WAAW;IAC1B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;IAEzC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,EAAE,WAGhC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,EAAE,QAAQ,CAAC,WAAW,CAI9C,CAAC;AAEX,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,KAAK,EAAE,WAAW,CAAC;KACpB;CACF"}

package/dist/components/alert/alert-config.js

@@ -0,0 +1,14 @@
+"use client";
+import { registerComponentDefaults as e } from "../../libs/registry.js";
+//#region src/components/alert/alert-config.ts
+var t = {
+	type: "info",
+	radius: "md"
+}, n = {
+	type: "info",
+	variant: "faded",
+	radius: "md"
+};
+e("alert", t);
+//#endregion
+export { n as FALLBACK_ALERT_CONFIG, t as defaultAlertConfig };

package/dist/components/alert/alert-styles.d.ts

@@ -0,0 +1,32 @@
+import { Color } from '../../shared';
+import { AlertType } from './alert-config';
+/**
+ * Colour each intent is presented in.
+ * The colour resolves through the framework's colour engine, so an alert has
+ * no palette colour of its own.
+ */
+export declare const ALERT_TYPE_COLOR: Record<AlertType, Color>;
+/**
+ * How urgently each intent is announced.
+ * `alert` interrupts what assistive technology is reading, so it is reserved
+ * for the two intents that need attention now.
+ */
+export declare const ALERT_TYPE_ROLE: Record<AlertType, "alert" | "status">;
+/**
+ * Colour of the leading icon for each intent.
+ * The icon is decoration: the message text carries the information.
+ */
+export declare const ALERT_TYPE_ICON_CLASS: Record<AlertType, string>;
+/**
+ * Base classes for the alert surface and its content layout.
+ */
+export declare const ALERT_BASE_CLASS = "relative flex items-start gap-3 w-full p-3 text-sm transition-colors";
+/**
+ * Classes for the icon slot.
+ */
+export declare const ALERT_ICON_CLASS = "shrink-0 mt-0.5 [&_svg]:size-5";
+/**
+ * Classes for the dismiss control.
+ */
+export declare const ALERT_DISMISS_CLASS = "shrink-0 inline-flex items-center justify-center size-6 rounded-sm text-current/70 hover:text-current transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-current";
+//# sourceMappingURL=alert-styles.d.ts.map

package/dist/components/alert/alert-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-styles.d.ts","sourceRoot":"","sources":["../../../src/components/alert/alert-styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEhD;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,SAAS,EAAE,KAAK,CAKrD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,SAAS,EAAE,OAAO,GAAG,QAAQ,CAKjE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAK3D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,yEAC2C,CAAC;AAEzE;;GAEG;AACH,eAAO,MAAM,gBAAgB,mCAAmC,CAAC;AAEjE;;GAEG;AACH,eAAO,MAAM,mBAAmB,+LAC8J,CAAC"}