@xaui/native 0.9.1-alpha.3 → 0.9.1-alpha.30

package/dist/{chunk-AW63PTQ4.cjs → chunk-OHEHPQLC.cjs}

@@ -2,67 +2,54 @@
 
 
 
-var _chunk3QBT3Q65cjs = require('./chunk-3QBT3Q65.cjs');
+var _chunk57SJ4LJFcjs = require('./chunk-57SJ4LJF.cjs');
+
+
+var _chunkMC7SY2QHcjs = require('./chunk-MC7SY2QH.cjs');
 
 // src/provider/xaui-provider.tsx
 var _reactnative = require('react-native');
 
-// src/utils/stable-hash.ts
-function canonical(value) {
-  if (value === null || typeof value !== "object") return _nullishCoalesce(JSON.stringify(value), () => ( "null"));
-  if (Array.isArray(value)) return `[${value.map(canonical).join(",")}]`;
-  const entries = Object.entries(value).filter(([, v]) => typeof v !== "function").sort(([a], [b]) => a < b ? -1 : 1).map(([k, v]) => `${JSON.stringify(k)}:${canonical(v)}`);
-  return `{${entries.join(",")}}`;
-}
-function stableHash(value) {
-  const input = canonical(value);
-  let hash = 2166136261;
-  for (let i = 0; i < input.length; i++) {
-    hash ^= input.charCodeAt(i);
-    hash = Math.imul(hash, 16777619) >>> 0;
-  }
-  return hash.toString(36);
-}
-
 // src/theme/derive-colors.ts
 function deriveColors(s) {
   return {
-    accentPressed: _chunk3QBT3Q65cjs.mix.call(void 0, s.accent, s.accentForeground, 0.1),
-    successPressed: _chunk3QBT3Q65cjs.mix.call(void 0, s.success, s.successForeground, 0.1),
-    warningPressed: _chunk3QBT3Q65cjs.mix.call(void 0, s.warning, s.warningForeground, 0.1),
-    dangerPressed: _chunk3QBT3Q65cjs.mix.call(void 0, s.danger, s.dangerForeground, 0.1),
-    defaultPressed: _chunk3QBT3Q65cjs.mix.call(void 0, s.default, s.defaultForeground, 0.04),
-    surfacePressed: _chunk3QBT3Q65cjs.mix.call(void 0, s.surface, s.surfaceForeground, 0.08),
-    defaultSoft: _chunk3QBT3Q65cjs.alpha.call(void 0, s.default, 0.5),
+    accentPressed: _chunk57SJ4LJFcjs.mix.call(void 0, s.accent, s.foreground, 0.1),
+    successPressed: _chunk57SJ4LJFcjs.mix.call(void 0, s.success, s.foreground, 0.1),
+    warningPressed: _chunk57SJ4LJFcjs.mix.call(void 0, s.warning, s.foreground, 0.1),
+    dangerPressed: _chunk57SJ4LJFcjs.mix.call(void 0, s.danger, s.foreground, 0.1),
+    defaultPressed: _chunk57SJ4LJFcjs.mix.call(void 0, s.default, s.defaultForeground, 0.04),
+    surfacePressed: _chunk57SJ4LJFcjs.mix.call(void 0, s.surface, s.surfaceForeground, 0.08),
+    defaultSoft: _chunk57SJ4LJFcjs.alpha.call(void 0, s.default, 0.5),
     defaultSoftForeground: s.defaultForeground,
-    defaultSoftPressed: _chunk3QBT3Q65cjs.alpha.call(void 0, s.default, 0.6),
-    accentSoft: _chunk3QBT3Q65cjs.alpha.call(void 0, s.accent, 0.15),
-    accentSoftForeground: _chunk3QBT3Q65cjs.mix.call(void 0, s.accent, s.foreground, 0.2),
-    accentSoftPressed: _chunk3QBT3Q65cjs.alpha.call(void 0, s.accent, 0.2),
-    successSoft: _chunk3QBT3Q65cjs.alpha.call(void 0, s.success, 0.15),
-    successSoftForeground: _chunk3QBT3Q65cjs.mix.call(void 0, s.success, s.foreground, 0.3),
-    successSoftPressed: _chunk3QBT3Q65cjs.alpha.call(void 0, s.success, 0.2),
-    warningSoft: _chunk3QBT3Q65cjs.alpha.call(void 0, s.warning, 0.15),
-    warningSoftForeground: _chunk3QBT3Q65cjs.mix.call(void 0, s.warning, s.foreground, 0.35),
-    warningSoftPressed: _chunk3QBT3Q65cjs.alpha.call(void 0, s.warning, 0.2),
-    dangerSoft: _chunk3QBT3Q65cjs.alpha.call(void 0, s.danger, 0.15),
-    dangerSoftForeground: _chunk3QBT3Q65cjs.mix.call(void 0, s.danger, s.foreground, 0.2),
-    dangerSoftPressed: _chunk3QBT3Q65cjs.alpha.call(void 0, s.danger, 0.2),
-    backgroundSecondary: _chunk3QBT3Q65cjs.mix.call(void 0, s.background, s.foreground, 0.04),
-    backgroundTertiary: _chunk3QBT3Q65cjs.mix.call(void 0, s.background, s.foreground, 0.08),
+    defaultSoftPressed: _chunk57SJ4LJFcjs.alpha.call(void 0, s.default, 0.6),
+    accentSoft: _chunk57SJ4LJFcjs.alpha.call(void 0, s.accent, 0.15),
+    accentSoftForeground: _chunk57SJ4LJFcjs.mix.call(void 0, s.accent, s.foreground, 0.2),
+    accentSoftPressed: _chunk57SJ4LJFcjs.alpha.call(void 0, s.accent, 0.2),
+    successSoft: _chunk57SJ4LJFcjs.alpha.call(void 0, s.success, 0.15),
+    successSoftForeground: _chunk57SJ4LJFcjs.mix.call(void 0, s.success, s.foreground, 0.3),
+    successSoftPressed: _chunk57SJ4LJFcjs.alpha.call(void 0, s.success, 0.2),
+    warningSoft: _chunk57SJ4LJFcjs.alpha.call(void 0, s.warning, 0.15),
+    warningSoftForeground: _chunk57SJ4LJFcjs.mix.call(void 0, s.warning, s.foreground, 0.35),
+    warningSoftPressed: _chunk57SJ4LJFcjs.alpha.call(void 0, s.warning, 0.2),
+    dangerSoft: _chunk57SJ4LJFcjs.alpha.call(void 0, s.danger, 0.15),
+    dangerSoftForeground: _chunk57SJ4LJFcjs.mix.call(void 0, s.danger, s.foreground, 0.2),
+    dangerSoftPressed: _chunk57SJ4LJFcjs.alpha.call(void 0, s.danger, 0.2),
+    backgroundSecondary: _chunk57SJ4LJFcjs.mix.call(void 0, s.background, s.foreground, 0.04),
+    backgroundTertiary: _chunk57SJ4LJFcjs.mix.call(void 0, s.background, s.foreground, 0.08),
     backgroundInverse: s.foreground,
-    borderSecondary: _chunk3QBT3Q65cjs.mix.call(void 0, s.surface, s.surfaceForeground, 0.22),
-    borderTertiary: _chunk3QBT3Q65cjs.mix.call(void 0, s.surface, s.surfaceForeground, 0.34),
-    separatorSecondary: _chunk3QBT3Q65cjs.mix.call(void 0, s.surface, s.surfaceForeground, 0.15),
-    separatorTertiary: _chunk3QBT3Q65cjs.mix.call(void 0, s.surface, s.surfaceForeground, 0.19),
-    fieldPressed: _chunk3QBT3Q65cjs.mix.call(void 0, s.fieldBackground, s.fieldForeground, 0.1),
+    borderSecondary: _chunk57SJ4LJFcjs.mix.call(void 0, s.surface, s.surfaceForeground, 0.22),
+    borderTertiary: _chunk57SJ4LJFcjs.mix.call(void 0, s.surface, s.surfaceForeground, 0.34),
+    separatorSecondary: _chunk57SJ4LJFcjs.mix.call(void 0, s.surface, s.surfaceForeground, 0.15),
+    separatorTertiary: _chunk57SJ4LJFcjs.mix.call(void 0, s.surface, s.surfaceForeground, 0.19),
+    fieldPressed: _chunk57SJ4LJFcjs.mix.call(void 0, s.fieldBackground, s.fieldForeground, 0.1),
     fieldFocus: s.fieldBackground,
-    fieldBorderPressed: _chunk3QBT3Q65cjs.mix.call(void 0, s.fieldBorder, s.fieldForeground, 0.12),
-    fieldBorderFocus: _chunk3QBT3Q65cjs.mix.call(void 0, s.fieldBorder, s.fieldForeground, 0.26)
+    fieldBorderPressed: _chunk57SJ4LJFcjs.mix.call(void 0, s.fieldBorder, s.fieldForeground, 0.12),
+    fieldBorderFocus: _chunk57SJ4LJFcjs.mix.call(void 0, s.fieldBorder, s.fieldForeground, 0.26)
   };
 }
 
 // src/theme/scales.ts
+
 var SPACING_UNIT = 4;
 var RADIUS_BASE = 12;
 function buildRadius(base) {
@@ -75,7 +62,16 @@ function buildRadius(base) {
     "2xl": base * 2,
     "3xl": base * 3,
     "4xl": base * 4,
-    field: base * 1.75,
+    /**
+     * HeroUI's value, reached from the other side of the scale: their `--radius-field` is
+     * an alias of their `--radius-xl`, and their base is 8 where ours is 12 — so their
+     * field corner is 12 points and, at our default base, so is this.
+     *
+     * It coincides with `lg` today and is still its own key, because that is what lets a
+     * theme round its fields without rounding its cards. It was `base * 1.75`, which put a
+     * 48-tall field at 87% of its geometric maximum — a gélule rather than a rounded box.
+     */
+    field: base,
     full: 9999
   };
 }
@@ -114,7 +110,10 @@ var fontWeights = {
 var fontFamilies = {
   body: "System",
   heading: "System",
-  mono: "monospace"
+  // `'monospace'` is an Android family name, not a generic one: iOS does not resolve it and
+  // silently falls back to the system face, so code set with it is not monospaced there.
+  // Menlo is the face iOS ships, and it is what HeroUI Native selects for the same reason.
+  mono: _reactnative.Platform.OS === "ios" ? "Menlo" : "monospace"
 };
 var borderWidth = { default: 1, field: 1 };
 var opacity = { disabled: 0.5 };
@@ -171,7 +170,7 @@ var tokens = {
     foreground: "#18181b",
     surface: "#ffffff",
     surfaceForeground: "#18181b",
-    surfaceSecondary: "#f4f4f5",
+    surfaceSecondary: "#ececee",
     surfaceSecondaryForeground: "#18181b",
     surfaceTertiary: "#e4e4e7",
     surfaceTertiaryForeground: "#18181b",
@@ -179,7 +178,7 @@ var tokens = {
     overlayForeground: "#18181b",
     backdrop: "rgba(0, 0, 0, 0.2)",
     muted: "#71717a",
-    default: "#f4f4f5",
+    default: "#e4e4e7",
     defaultForeground: "#18181b",
     accent: "#9333ea",
     accentForeground: "#faf5ff",
@@ -189,7 +188,7 @@ var tokens = {
     fieldBorder: "#e4e4e7",
     success: "#15803d",
     successForeground: "#fafafa",
-    warning: "#b45309",
+    warning: "#c2410c",
     warningForeground: "#fafafa",
     danger: "#dc2626",
     dangerForeground: "#fafafa",
@@ -199,24 +198,24 @@ var tokens = {
     separator: "#d4d4d8",
     focus: "#9333ea",
     link: "#18181b",
-    accentPressed: "#9c4eee",
-    successPressed: "#378c50",
-    warningPressed: "#bd642f",
-    dangerPressed: "#e2473f",
-    defaultPressed: "#eaeaeb",
+    accentPressed: "#8533d3",
+    successPressed: "#1b753a",
+    warningPressed: "#af3e15",
+    dangerPressed: "#c72927",
+    defaultPressed: "#dbdbde",
     surfacePressed: "#eaeaea",
-    defaultSoft: "rgba(244, 244, 245, 0.5)",
+    defaultSoft: "rgba(228, 228, 231, 0.5)",
     defaultSoftForeground: "#18181b",
-    defaultSoftPressed: "rgba(244, 244, 245, 0.6)",
+    defaultSoftPressed: "rgba(228, 228, 231, 0.6)",
     accentSoft: "rgba(147, 51, 234, 0.15)",
     accentSoftForeground: "#7833bc",
     accentSoftPressed: "rgba(147, 51, 234, 0.2)",
     successSoft: "rgba(21, 128, 61, 0.15)",
     successSoftForeground: "#205f34",
     successSoftPressed: "rgba(21, 128, 61, 0.2)",
-    warningSoft: "rgba(180, 83, 9, 0.15)",
-    warningSoftForeground: "#793f1e",
-    warningSoftPressed: "rgba(180, 83, 9, 0.2)",
+    warningSoft: "rgba(194, 65, 12, 0.15)",
+    warningSoftForeground: "#82361e",
+    warningSoftPressed: "rgba(194, 65, 12, 0.2)",
     dangerSoft: "rgba(220, 38, 38, 0.15)",
     dangerSoftForeground: "#b22b28",
     dangerSoftPressed: "rgba(220, 38, 38, 0.2)",
@@ -259,7 +258,7 @@ var tokens = {
     fieldBorder: "#3f3f46",
     success: "#4ade80",
     successForeground: "#18181b",
-    warning: "#fbbf24",
+    warning: "#fb923c",
     warningForeground: "#18181b",
     danger: "#f87171",
     dangerForeground: "#18181b",
@@ -269,10 +268,10 @@ var tokens = {
     separator: "#52525b",
     focus: "#c084fc",
     link: "#fafafa",
-    accentPressed: "#ad78e3",
-    successPressed: "#47c875",
-    warningPressed: "#e1ac2b",
-    dangerPressed: "#df6868",
+    accentPressed: "#c691fd",
+    successPressed: "#64e18d",
+    warningPressed: "#fc9d55",
+    dangerPressed: "#fa807e",
     defaultPressed: "#2e2e31",
     surfacePressed: "#27272a",
     defaultSoft: "rgba(39, 39, 42, 0.5)",
@@ -284,9 +283,9 @@ var tokens = {
     successSoft: "rgba(74, 222, 128, 0.15)",
     successSoftForeground: "#8de8a6",
     successSoftPressed: "rgba(74, 222, 128, 0.2)",
-    warningSoft: "rgba(251, 191, 36, 0.15)",
-    warningSoftForeground: "#fbd586",
-    warningSoftPressed: "rgba(251, 191, 36, 0.2)",
+    warningSoft: "rgba(251, 146, 60, 0.15)",
+    warningSoftForeground: "#feb887",
+    warningSoftPressed: "rgba(251, 146, 60, 0.2)",
     dangerSoft: "rgba(248, 113, 113, 0.15)",
     dangerSoftForeground: "#fc8f8c",
     dangerSoftPressed: "rgba(248, 113, 113, 0.2)",
@@ -377,7 +376,7 @@ function resolveMode(mode, config, id) {
   };
 }
 function createTheme(config = {}) {
-  const id = stableHash(config);
+  const id = _chunkMC7SY2QHcjs.stableHash.call(void 0, config);
   return {
     id,
     light: resolveMode("light", config, id),
@@ -387,6 +386,7 @@ function createTheme(config = {}) {
 var defaultTheme = createTheme();
 
 // src/provider/xaui-provider.tsx
+var _jsxruntime = require('react/jsx-runtime');
 function XAUIProvider({
   children,
   theme = defaultTheme,
@@ -394,7 +394,7 @@ function XAUIProvider({
 }) {
   const scheme = _reactnative.useColorScheme.call(void 0, );
   const resolved = colorMode === "system" ? scheme === "dark" ? "dark" : "light" : colorMode;
-  return /* @__PURE__ */ React.createElement(_chunk3QBT3Q65cjs.ThemeContext.Provider, { value: theme[resolved] }, children);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk57SJ4LJFcjs.ThemeContext.Provider, { value: theme[resolved], children });
 }
 
 // src/theme/palette.ts

package/dist/chunk-Q3WFY5N3.js

@@ -0,0 +1,366 @@
+import {
+  CloseButton,
+  closeButtonBase
+} from "./chunk-V4WDMM6Z.js";
+import {
+  Icon
+} from "./chunk-3FV4COTM.js";
+import {
+  createRecipe,
+  radiusAxis
+} from "./chunk-4GTAZM2C.js";
+import {
+  useXAUITheme
+} from "./chunk-A3EGFI6T.js";
+import {
+  Slot,
+  childrenToString,
+  createSlotContext
+} from "./chunk-E2CWBQTV.js";
+import {
+  useStyleProps
+} from "./chunk-URSKA2VR.js";
+
+// src/components/alert/alert-close.tsx
+import { forwardRef } from "react";
+
+// src/components/alert/alert.context.ts
+var [AlertProvider, useAlert] = createSlotContext("Alert");
+
+// src/components/alert/alert-close.tsx
+import { jsx } from "react/jsx-runtime";
+var AlertClose = forwardRef(function AlertClose2({ isDisabled, ...props }, ref) {
+  const { closeStyle, closeGlyphStyle, isDisabled: isAlertDisabled } = useAlert();
+  return /* @__PURE__ */ jsx(
+    CloseButton,
+    {
+      ref,
+      name: "Alert.Close",
+      baseStyle: closeStyle,
+      glyphStyle: closeGlyphStyle,
+      isDisabled: isDisabled ?? isAlertDisabled,
+      ...props
+    }
+  );
+});
+AlertClose.displayName = "XAUI.Alert.Close";
+
+// src/components/alert/alert-content.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { View } from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var AlertContent = forwardRef2(
+  function AlertContent2({ children, style, ...props }, ref) {
+    const { contentStyle } = useAlert();
+    const [styleProps, rest] = useStyleProps(props);
+    return /* @__PURE__ */ jsx2(View, { ref, style: [contentStyle, styleProps, style], ...rest, children });
+  }
+);
+AlertContent.displayName = "XAUI.Alert.Content";
+
+// src/components/alert/alert-description.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { Text } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var AlertDescription = forwardRef3(
+  function AlertDescription2({ children, style, ...props }, ref) {
+    const { descriptionStyle } = useAlert();
+    const [styleProps, rest] = useStyleProps(props);
+    return /* @__PURE__ */ jsx3(Text, { ref, style: [descriptionStyle, styleProps, style], ...rest, children });
+  }
+);
+AlertDescription.displayName = "XAUI.Alert.Description";
+
+// src/components/alert/alert-icon.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { View as View2 } from "react-native";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var AlertIcon = forwardRef4(function AlertIcon2({ as, children, source, size, color, style, ...props }, ref) {
+  const { iconStyle, icon } = useAlert();
+  const [styleProps, rest] = useStyleProps(props);
+  const glyphSize = size ?? icon.size;
+  const glyphColor = color ?? icon.color;
+  return /* @__PURE__ */ jsx4(View2, { ref, style: [iconStyle, styleProps, style], ...rest, children: as ? /* @__PURE__ */ jsx4(Icon, { as, size: glyphSize, color: glyphColor }) : source ? /* @__PURE__ */ jsx4(Icon, { source, size: glyphSize, color: glyphColor }) : /* @__PURE__ */ jsx4(Icon, { size: glyphSize, color: glyphColor, children }) });
+});
+AlertIcon.displayName = "XAUI.Alert.Icon";
+
+// src/components/alert/alert-title.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { Text as Text2 } from "react-native";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var AlertTitle = forwardRef5(function AlertTitle2({ children, style, ...props }, ref) {
+  const { titleStyle } = useAlert();
+  const [styleProps, rest] = useStyleProps(props);
+  return /* @__PURE__ */ jsx5(Text2, { ref, style: [titleStyle, styleProps, style], ...rest, children });
+});
+AlertTitle.displayName = "XAUI.Alert.Title";
+
+// src/components/alert/alert.tsx
+import { forwardRef as forwardRef6, useMemo } from "react";
+import { StyleSheet, View as View3 } from "react-native";
+
+// src/components/alert/alert.recipe.ts
+var SLOTS = [
+  "root",
+  "icon",
+  "iconGlyph",
+  "content",
+  "title",
+  "description",
+  "close",
+  "closeGlyph"
+];
+var VARIANT_TOKENS = {
+  default: { bg: "surface", fg: "surfaceForeground" },
+  primary: { bg: "accent", fg: "accentForeground" },
+  secondary: { bg: "accentSoft", fg: "accentSoftForeground" },
+  success: { bg: "success", fg: "successForeground" },
+  "success-soft": { bg: "successSoft", fg: "successSoftForeground" },
+  warning: { bg: "warning", fg: "warningForeground" },
+  "warning-soft": { bg: "warningSoft", fg: "warningSoftForeground" },
+  danger: { bg: "danger", fg: "dangerForeground" },
+  "danger-soft": { bg: "dangerSoft", fg: "dangerSoftForeground" }
+};
+var DESCRIPTION_OPACITY = 0.6;
+function sizeAxis(step) {
+  const { padding, gap, contentGap, title, description, glyph, cross, radius } = step;
+  return (theme) => ({
+    root: {
+      padding: theme.spacing(padding),
+      gap: theme.spacing(gap),
+      borderRadius: theme.radius[radius]
+    },
+    icon: { paddingTop: (theme.lineHeights[title] - theme.fontSizes[glyph]) / 2 },
+    iconGlyph: { fontSize: theme.fontSizes[glyph] },
+    content: { gap: theme.spacing(contentGap) },
+    title: {
+      fontSize: theme.fontSizes[title],
+      lineHeight: theme.lineHeights[title]
+    },
+    description: {
+      fontSize: theme.fontSizes[description],
+      lineHeight: theme.lineHeights[description]
+    },
+    // The touch target is the glyph's box; the shared `CloseButton` grows it outwards
+    // with `hitSlop`, because a cross big enough to hit is a cross too big to look right.
+    close: { width: theme.fontSizes[glyph], height: theme.fontSizes[glyph] },
+    closeGlyph: { width: theme.spacing(cross) }
+  });
+}
+var SIZES = {
+  xs: {
+    padding: 2,
+    gap: 2,
+    contentGap: 0.5,
+    title: "xs",
+    description: "xs",
+    glyph: "sm",
+    cross: 2,
+    radius: "lg"
+  },
+  sm: {
+    padding: 2.5,
+    gap: 2.5,
+    contentGap: 0.5,
+    title: "sm",
+    description: "xs",
+    glyph: "md",
+    cross: 2,
+    radius: "xl"
+  },
+  md: {
+    padding: 3,
+    gap: 3,
+    contentGap: 1,
+    title: "md",
+    description: "sm",
+    glyph: "lg",
+    cross: 2.5,
+    radius: "2xl"
+  },
+  lg: {
+    padding: 4,
+    gap: 3.5,
+    contentGap: 1,
+    title: "lg",
+    description: "md",
+    glyph: "xl",
+    cross: 3,
+    radius: "3xl"
+  }
+};
+var alertRecipe = createRecipe({
+  slots: SLOTS,
+  // The cross's own geometry — thickness and centring — belongs to the shared
+  // `CloseButton`; what stays below is the box and bar size this component's scale sets.
+  base: (theme) => ({
+    ...closeButtonBase(theme),
+    root: {
+      flexDirection: "row",
+      // Top-aligned, not centred: an alert's message can run to three lines, and an icon
+      // floating beside the middle of a paragraph reads as decoration rather than as the
+      // mark of what the paragraph is. A single-line alert centres itself with
+      // `alignItems="center"` on the root — one prop, and it is the caller's call.
+      alignItems: "flex-start",
+      borderWidth: 0,
+      // iOS's squircle. Free on Android, and it is what makes a radius this large read as
+      // a shape rather than as four arcs meeting straight edges.
+      borderCurve: "continuous"
+      // Deliberately no `overflow: 'hidden'`: on iOS it clips the node's own shadow, so a
+      // `default` alert would lose the elevation the variant just gave it.
+    },
+    // `flex: 1` and not `flexGrow`: the root is a row, so the content has to be measured
+    // from a zero basis to take exactly what the icon and the close leave — the opposite
+    // of the `Card`'s body, which grows in a column where a zero basis collapses it.
+    content: { flex: 1 },
+    // `medium`, not `semibold`. An alert's title sits in prose rather than on a control:
+    // one weight above the description is enough to rank them.
+    title: {
+      fontFamily: theme.fontFamilies.heading,
+      fontWeight: theme.fontWeights.medium
+    },
+    description: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.regular,
+      opacity: DESCRIPTION_OPACITY
+    }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  /**
+   * Where the variant's colours land, for every variant at once.
+   *
+   * The icon takes the **title's** colour rather than a status colour of its own — on a
+   * `danger` alert the readable colour is the one the title already uses, and on a
+   * `danger-soft` one that token *is* the red. HeroUI arrives at the same place from the
+   * other direction, colouring the icon by status on a neutral surface; here the variant
+   * decides both, and an icon that has to disagree with its alert says so itself with
+   * `<Alert.Icon color={…} />`.
+   */
+  paint: (theme, colors) => ({
+    root: {
+      backgroundColor: colors.bg,
+      borderColor: colors.border,
+      borderWidth: colors.border ? theme.borderWidth.default : 0
+    },
+    iconGlyph: { color: colors.fg },
+    title: { color: colors.fg },
+    description: { color: colors.fg },
+    closeGlyph: { backgroundColor: colors.fg }
+  }),
+  /** Declaration order is application order: `radius` overrides the radius `size` set. */
+  variants: {
+    size: {
+      xs: sizeAxis(SIZES.xs),
+      sm: sizeAxis(SIZES.sm),
+      md: sizeAxis(SIZES.md),
+      lg: sizeAxis(SIZES.lg)
+    },
+    radius: radiusAxis("root")
+  },
+  /**
+   * The elevation belongs to the one variant that is a surface standing on the background,
+   * exactly as on the `Card`. A tinted alert already separates itself by its fill, and a
+   * shadow under it would read as dirt. In dark mode the theme's `surface` shadow is
+   * already nothing (§4), which is why this names the role instead of a set of numbers.
+   */
+  compoundVariants: [
+    {
+      when: { variant: "default" },
+      style: (theme) => ({ root: theme.shadows.surface })
+    }
+  ],
+  states: {
+    disabled: (theme) => ({ root: { opacity: theme.opacity.disabled } })
+  },
+  defaultVariants: { variant: "default", size: "md" }
+});
+
+// src/components/alert/alert.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var AlertRoot = forwardRef6(function Alert({
+  children,
+  variant,
+  size,
+  radius,
+  color,
+  isDisabled = false,
+  asChild = false,
+  accessibilityRole = "alert",
+  // Android reads a live region aloud when its content changes, which is what makes an
+  // alert that *appears* announce itself instead of waiting to be found. `'polite'`
+  // rather than `'assertive'`: it queues behind whatever is being read instead of
+  // cutting it off. A static alert that is part of the page sets `'none'`.
+  accessibilityLiveRegion = "polite",
+  style,
+  ...props
+}, ref) {
+  const theme = useXAUITheme();
+  const [styleProps, rest] = useStyleProps(props);
+  const selection = { variant, size, radius };
+  const states = { disabled: isDisabled };
+  const styles = alertRecipe.resolve({ theme, selection, states });
+  const tint = color ? alertRecipe.tint({ theme, color, selection, states }) : void 0;
+  const context = useMemo(() => {
+    const glyph = StyleSheet.flatten([styles.iconGlyph, tint?.iconGlyph]);
+    return {
+      iconStyle: styles.icon,
+      contentStyle: styles.content,
+      titleStyle: tint ? [styles.title, tint.title] : styles.title,
+      descriptionStyle: tint ? [styles.description, tint.description] : styles.description,
+      closeStyle: styles.close,
+      closeGlyphStyle: tint ? [styles.closeGlyph, tint.closeGlyph] : styles.closeGlyph,
+      icon: {
+        size: glyph.fontSize,
+        // `ColorValue` also covers the platform's opaque colours, which `Icon` cannot
+        // hand to a third-party component expecting a string.
+        color: typeof glyph.color === "string" ? glyph.color : void 0
+      },
+      isDisabled
+    };
+  }, [styles, tint, isDisabled]);
+  const rootStyle = [styles.root, tint?.root, styleProps, style];
+  const text = childrenToString(children);
+  const content = text !== null ? /* @__PURE__ */ jsx6(AlertDescription, { children: text }) : children;
+  const surface = asChild ? (
+    // R12 — the caller's element *is* the alert, so it takes the children it was written
+    // with and the auto-wrap does not apply.
+    /* @__PURE__ */ jsx6(
+      Slot,
+      {
+        ref,
+        accessibilityRole,
+        accessibilityLiveRegion,
+        ...rest,
+        style: rootStyle,
+        children
+      }
+    )
+  ) : /* @__PURE__ */ jsx6(
+    View3,
+    {
+      ref,
+      accessibilityRole,
+      accessibilityLiveRegion,
+      ...rest,
+      style: rootStyle,
+      children: content
+    }
+  );
+  return /* @__PURE__ */ jsx6(AlertProvider, { value: context, children: surface });
+});
+AlertRoot.displayName = "XAUI.Alert.Root";
+
+// src/components/alert/index.ts
+var Alert2 = Object.assign(AlertRoot, {
+  Icon: AlertIcon,
+  Content: AlertContent,
+  Title: AlertTitle,
+  Description: AlertDescription,
+  Close: AlertClose
+});
+
+export {
+  useAlert,
+  alertRecipe,
+  Alert2 as Alert
+};