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

package/dist/chunk-RDTKAAHX.js

@@ -0,0 +1,346 @@
+import {
+  SelectionFill
+} from "./chunk-BA2DBSAN.js";
+import {
+  useControllableState
+} from "./chunk-F6W3JQ7K.js";
+import {
+  PressableFeedback
+} from "./chunk-BFMTUMTU.js";
+import {
+  usePressState
+} from "./chunk-423RQBOX.js";
+import {
+  createRecipe,
+  radiusAxis
+} from "./chunk-4GTAZM2C.js";
+import {
+  useXAUITheme
+} from "./chunk-A3EGFI6T.js";
+import {
+  childrenToString,
+  createSlotContext
+} from "./chunk-E2CWBQTV.js";
+import {
+  useStyleProps
+} from "./chunk-URSKA2VR.js";
+
+// src/components/checkbox/checkbox-indicator.tsx
+import { forwardRef } from "react";
+import { View } from "react-native";
+
+// src/components/checkbox/checkbox.context.ts
+var [CheckboxProvider, useCheckbox] = createSlotContext("Checkbox");
+
+// src/components/checkbox/checkbox-indicator.tsx
+import { jsx } from "react/jsx-runtime";
+var CheckboxIndicator = forwardRef(
+  function CheckboxIndicator2({ children, animation = true, style, ...props }, ref) {
+    const { indicatorStyle, fillStyle, isSelected, isIndeterminate } = useCheckbox();
+    const [styleProps, rest] = useStyleProps(props);
+    const isFilled = isSelected || isIndeterminate;
+    const mark = children ?? (isIndeterminate ? /* @__PURE__ */ jsx(Dash, {}) : /* @__PURE__ */ jsx(Check, {}));
+    return /* @__PURE__ */ jsx(View, { ref, ...rest, style: [indicatorStyle, styleProps, style], children: /* @__PURE__ */ jsx(SelectionFill, { isVisible: isFilled, style: fillStyle, animation, children: mark }) });
+  }
+);
+CheckboxIndicator.displayName = "XAUI.Checkbox.Indicator";
+function Check() {
+  const { checkStyle } = useCheckbox();
+  return /* @__PURE__ */ jsx(View, { style: checkStyle });
+}
+function Dash() {
+  const { dashStyle } = useCheckbox();
+  return /* @__PURE__ */ jsx(View, { style: dashStyle });
+}
+
+// src/components/checkbox/checkbox-label.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { Text } from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var CheckboxLabel = forwardRef2(
+  function CheckboxLabel2({ children, style, ...props }, ref) {
+    const { labelStyle } = useCheckbox();
+    const [styleProps, rest] = useStyleProps(props);
+    return /* @__PURE__ */ jsx2(Text, { ref, style: [labelStyle, styleProps, style], ...rest, children });
+  }
+);
+CheckboxLabel.displayName = "XAUI.Checkbox.Label";
+
+// src/components/checkbox/checkbox.tsx
+import { forwardRef as forwardRef3, useCallback, useMemo } from "react";
+
+// src/components/checkbox/checkbox.recipe.ts
+var SLOTS = ["root", "indicator", "fill", "check", "dash", "label"];
+var VARIANT_TOKENS = {
+  primary: {
+    bg: "fieldBackground",
+    border: "fieldBorder",
+    bgSelected: "accent",
+    fgSelected: "accentForeground"
+  },
+  // `bg: 'default'` is the neutral *token*, not this variant's name — the two namespaces
+  // meet here as they do on the `Input`, and for the same reason: on a card,
+  // `fieldBackground` is the card's own colour and the box would vanish into it.
+  secondary: {
+    bg: "default",
+    border: "fieldBorder",
+    bgSelected: "accent",
+    fgSelected: "accentForeground"
+  },
+  tertiary: {
+    border: "fieldBorder",
+    bgSelected: "accent",
+    fgSelected: "accentForeground"
+  }
+};
+function sizeAxis(step) {
+  const { box, radius, label, gap, stroke } = step;
+  return (theme) => {
+    const side = theme.spacing(box);
+    return {
+      root: { gap: theme.spacing(gap) },
+      indicator: { width: side, height: side, borderRadius: theme.radius[radius] },
+      check: {
+        width: side * CHECK_WIDTH,
+        height: side * CHECK_HEIGHT,
+        borderStartWidth: stroke,
+        borderBottomWidth: stroke,
+        // An "L" has its ink in one corner, not in the middle of its box, so rotating it
+        // about that box's centre leaves the tick sitting low. Rotating by −45° maps a
+        // point to `(dy − dx)·√2/2`, and over the two strokes that spans `H` at the top
+        // and `H − t − W` at the bottom — an ink centre `(H − t)·√2/4` **below** the box
+        // centre, which flexbox then dutifully centres. Lifting by exactly that is what
+        // makes the mark look centred rather than measure centred.
+        //
+        // Both transforms live here, and not half here and half in a sheet, because
+        // `transform` is a whole value: the recipe's merge replaces it rather than
+        // blending, so a second step would drop the first.
+        transform: [
+          { translateY: -((side * CHECK_HEIGHT - stroke) * Math.SQRT2) / 4 },
+          { rotate: "-45deg" }
+        ]
+      },
+      // The third state's mark: the check's long stroke, on its own and level.
+      dash: {
+        width: side * CHECK_WIDTH,
+        height: stroke,
+        borderRadius: stroke / 2
+      },
+      label: {
+        fontSize: theme.fontSizes[label],
+        lineHeight: theme.lineHeights[label]
+      }
+    };
+  };
+}
+var CHECK_WIDTH = 0.5;
+var CHECK_HEIGHT = 0.25;
+var SIZES = {
+  sm: { box: 5, radius: "sm", gap: 2, label: "sm", stroke: 2 },
+  md: { box: 6, radius: "md", gap: 2, label: "md", stroke: 2 },
+  lg: { box: 7, radius: "md", gap: 2.5, label: "lg", stroke: 2.5 }
+};
+var checkboxRecipe = createRecipe({
+  slots: SLOTS,
+  base: (theme) => ({
+    root: { flexDirection: "row", alignItems: "center", alignSelf: "flex-start" },
+    indicator: {
+      alignItems: "center",
+      justifyContent: "center",
+      borderWidth: theme.borderWidth.field,
+      borderCurve: "continuous",
+      // The fill is laid inside the box and has to stop at its corners.
+      overflow: "hidden"
+    },
+    // Laid over the box rather than sized to it: the two corners are the indicator's, and
+    // an inset of zero is what keeps the fill inside the border it is clipped by.
+    fill: {
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      start: 0,
+      end: 0,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    label: {
+      fontFamily: theme.fontFamilies.body,
+      color: theme.colors.foreground
+    }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  /**
+   * Where the variant's colours land. The border width follows the *presence* of the
+   * border role, exactly as on the `Input`.
+   *
+   * `bgSelected` and `fgSelected` are painted unconditionally, on two slots the indicator
+   * only mounts while it is ticked — which is what keeps selection out of the cache key
+   * and inside the tint pass at the same time. An axis would have given up the second.
+   */
+  paint: (theme, colors) => ({
+    indicator: {
+      backgroundColor: colors.bg,
+      borderColor: colors.border,
+      borderWidth: colors.border ? theme.borderWidth.field : 0
+    },
+    fill: { backgroundColor: colors.bgSelected },
+    check: { borderColor: colors.fgSelected },
+    dash: { backgroundColor: colors.fgSelected }
+  }),
+  variants: {
+    size: {
+      sm: sizeAxis(SIZES.sm),
+      md: sizeAxis(SIZES.md),
+      lg: sizeAxis(SIZES.lg)
+    },
+    radius: radiusAxis("indicator"),
+    /**
+     * Declared after `size` so its border wins. The resting fill is dropped rather than
+     * repainted — `undefined` over a colour is what RN reads as "no background" — because
+     * a box that is wrong should read as an outline, not as a filled control that happens
+     * to be red at the edge. HeroUI reaches the same shape with a compound.
+     */
+    isInvalid: {
+      true: (theme) => ({
+        indicator: { borderColor: theme.colors.danger, backgroundColor: void 0 },
+        fill: { backgroundColor: theme.colors.danger },
+        check: { borderColor: theme.colors.dangerForeground },
+        dash: { backgroundColor: theme.colors.dangerForeground },
+        // The label turns with it: on a long form the field that is wrong has to be
+        // findable without reading every message.
+        label: { color: theme.colors.danger }
+      })
+    }
+  },
+  /** What `primary` adds to a filled box — the `Input`'s compound, on a smaller field. */
+  compoundVariants: [
+    {
+      when: { variant: "primary" },
+      style: (theme) => ({ indicator: theme.shadows.field })
+    }
+  ],
+  states: {
+    disabled: (theme) => ({ root: { opacity: theme.opacity.disabled } })
+  },
+  defaultVariants: { variant: "secondary", size: "md" }
+});
+
+// src/components/checkbox/checkbox.tsx
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+var CheckboxRoot = forwardRef3(function Checkbox({
+  children,
+  variant,
+  size,
+  radius,
+  color,
+  isSelected,
+  defaultSelected = false,
+  onSelectedChange,
+  isIndeterminate = false,
+  isInvalid = false,
+  isDisabled = false,
+  asChild = false,
+  accessibilityRole,
+  accessibilityState,
+  animation,
+  style,
+  onPress,
+  onPressIn,
+  onPressOut,
+  ...props
+}, ref) {
+  const theme = useXAUITheme();
+  const [styleProps, rest] = useStyleProps(props);
+  const [isPressed, press] = usePressState({ onPressIn, onPressOut });
+  const [selected, setSelected] = useControllableState({
+    value: isSelected,
+    defaultValue: defaultSelected,
+    onChange: onSelectedChange
+  });
+  const handlePress = useCallback(
+    (event) => {
+      setSelected((current) => isIndeterminate ? true : !current);
+      onPress?.(event);
+    },
+    [setSelected, isIndeterminate, onPress]
+  );
+  const selection = {
+    variant,
+    size,
+    radius,
+    isInvalid: isInvalid ? "true" : void 0
+  };
+  const states = { pressed: isPressed, disabled: isDisabled };
+  const styles = checkboxRecipe.resolve({ theme, selection, states });
+  const tint = color && !isInvalid ? checkboxRecipe.tint({ theme, color, selection, states }) : void 0;
+  const context = useMemo(
+    () => ({
+      // The tint never reaches the box **at rest**, only the two nodes that say the box
+      // is ticked. `paint` writes the resting fill from `bg` and the tint pass re-runs
+      // `paint`, so applying `tint.indicator` here would paint an unticked box in the
+      // caller's brand colour — which reads as ticked, which is the one thing it is not.
+      indicatorStyle: styles.indicator,
+      fillStyle: tint ? [styles.fill, tint.fill] : styles.fill,
+      checkStyle: tint ? [styles.check, tint.check] : styles.check,
+      dashStyle: tint ? [styles.dash, tint.dash] : styles.dash,
+      labelStyle: styles.label,
+      isSelected: selected,
+      isIndeterminate,
+      isDisabled,
+      isInvalid
+    }),
+    [styles, tint, selected, isIndeterminate, isDisabled, isInvalid]
+  );
+  const rootStyle = [
+    styles.root,
+    tint?.root,
+    styleProps,
+    typeof style === "function" ? style({ pressed: isPressed }) : style
+  ];
+  const text = childrenToString(children);
+  const content = text !== null ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx3(CheckboxIndicator, {}),
+    /* @__PURE__ */ jsx3(CheckboxLabel, { children: text })
+  ] }) : children ?? /* @__PURE__ */ jsx3(CheckboxIndicator, {});
+  return /* @__PURE__ */ jsx3(CheckboxProvider, { value: context, children: /* @__PURE__ */ jsx3(
+    PressableFeedback,
+    {
+      ref,
+      isPressed,
+      isDisabled,
+      asChild,
+      animation,
+      accessibilityRole: accessibilityRole ?? "checkbox",
+      accessibilityState: {
+        // `'mixed'` is the platform's own word for the third state, and it is the only
+        // thing that tells a screen reader this box speaks for rows it cannot see.
+        checked: isIndeterminate ? "mixed" : selected,
+        disabled: isDisabled,
+        ...accessibilityState
+      },
+      "aria-invalid": isInvalid,
+      ...rest,
+      style: rootStyle,
+      onPress: handlePress,
+      onPressIn: press.onPressIn,
+      onPressOut: press.onPressOut,
+      children: asChild ? children : content
+    }
+  ) });
+});
+CheckboxRoot.displayName = "XAUI.Checkbox.Root";
+
+// src/components/checkbox/index.ts
+var Checkbox2 = Object.assign(CheckboxRoot, {
+  Indicator: CheckboxIndicator,
+  Label: CheckboxLabel
+});
+
+export {
+  useCheckbox,
+  CheckboxIndicator,
+  CheckboxLabel,
+  checkboxRecipe,
+  CheckboxRoot,
+  Checkbox2 as Checkbox
+};

package/dist/chunk-TGZZ3RZU.cjs

@@ -0,0 +1,86 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
+
+var _chunkGPVNCJ3Zcjs = require('./chunk-GPVNCJ3Z.cjs');
+
+
+var _chunk7DPL3ZDScjs = require('./chunk-7DPL3ZDS.cjs');
+
+
+var _chunkEJQCQPETcjs = require('./chunk-EJQCQPET.cjs');
+
+
+var _chunkGLGU2WFLcjs = require('./chunk-GLGU2WFL.cjs');
+
+// src/system/close-button/close-button.tsx
+var _react = require('react');
+var _reactnative = require('react-native');
+
+// src/system/close-button/close-button.style.ts
+
+var closeButtonSheet = _reactnative.StyleSheet.create({
+  bar: { transform: [{ rotate: "45deg" }] },
+  barMirrored: { transform: [{ rotate: "-45deg" }] }
+});
+
+// src/system/close-button/close-button.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var HIT_SLOP = 8;
+var CloseButton = _react.forwardRef.call(void 0, function CloseButton2({
+  name,
+  children,
+  baseStyle,
+  glyphStyle,
+  accessibilityRole = "button",
+  hitSlop = HIT_SLOP,
+  style,
+  onPressIn,
+  onPressOut,
+  ...props
+}, ref) {
+  const [styleProps, rest] = _chunkGLGU2WFLcjs.useStyleProps.call(void 0, props);
+  const [isPressed, press] = _chunk7DPL3ZDScjs.usePressState.call(void 0, { onPressIn, onPressOut });
+  if (!rest.accessibilityLabel && !rest["aria-label"]) {
+    _chunkEJQCQPETcjs.warnDev.call(void 0, 
+      `${name}: a close button needs an \`accessibilityLabel\` \u2014 the cross is not text, and the label beside it names what is being dismissed, not the action.`
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkGPVNCJ3Zcjs.PressableFeedback,
+    {
+      ref,
+      isPressed,
+      accessibilityRole,
+      hitSlop,
+      ...rest,
+      style: [
+        baseStyle,
+        styleProps,
+        typeof style === "function" ? style({ pressed: isPressed }) : style
+      ],
+      onPressIn: press.onPressIn,
+      onPressOut: press.onPressOut,
+      children: _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { style: [glyphStyle, closeButtonSheet.bar] }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { style: [glyphStyle, closeButtonSheet.barMirrored] })
+      ] })))
+    }
+  );
+});
+CloseButton.displayName = "XAUI.CloseButton";
+
+// src/system/close-button/close-button.recipe.ts
+function closeButtonBase(theme) {
+  return {
+    close: { alignItems: "center", justifyContent: "center" },
+    closeGlyph: {
+      position: "absolute",
+      height: theme.borderWidth.default * 1.5,
+      borderRadius: theme.borderWidth.default
+    }
+  };
+}
+
+
+
+
+exports.CloseButton = CloseButton; exports.closeButtonBase = closeButtonBase;

package/dist/{chunk-2KXQATVL.js → chunk-TZG3DERP.js}

@@ -2,35 +2,21 @@ import {
   ThemeContext,
   alpha,
   mix
-} from "./chunk-X2K2FX3W.js";
+} from "./chunk-A3EGFI6T.js";
+import {
+  stableHash
+} from "./chunk-GGW42MY4.js";
 
 // src/provider/xaui-provider.tsx
 import { useColorScheme } from "react-native";
 
-// src/utils/stable-hash.ts
-function canonical(value) {
-  if (value === null || typeof value !== "object") return 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: mix(s.accent, s.accentForeground, 0.1),
-    successPressed: mix(s.success, s.successForeground, 0.1),
-    warningPressed: mix(s.warning, s.warningForeground, 0.1),
-    dangerPressed: mix(s.danger, s.dangerForeground, 0.1),
+    accentPressed: mix(s.accent, s.foreground, 0.1),
+    successPressed: mix(s.success, s.foreground, 0.1),
+    warningPressed: mix(s.warning, s.foreground, 0.1),
+    dangerPressed: mix(s.danger, s.foreground, 0.1),
     defaultPressed: mix(s.default, s.defaultForeground, 0.04),
     surfacePressed: mix(s.surface, s.surfaceForeground, 0.08),
     defaultSoft: alpha(s.default, 0.5),
@@ -63,6 +49,7 @@ function deriveColors(s) {
 }
 
 // src/theme/scales.ts
+import { Platform } from "react-native";
 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: 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)",
@@ -387,6 +386,7 @@ function createTheme(config = {}) {
 var defaultTheme = createTheme();
 
 // src/provider/xaui-provider.tsx
+import { jsx } from "react/jsx-runtime";
 function XAUIProvider({
   children,
   theme = defaultTheme,
@@ -394,7 +394,7 @@ function XAUIProvider({
 }) {
   const scheme = useColorScheme();
   const resolved = colorMode === "system" ? scheme === "dark" ? "dark" : "light" : colorMode;
-  return /* @__PURE__ */ React.createElement(ThemeContext.Provider, { value: theme[resolved] }, children);
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: theme[resolved], children });
 }
 
 // src/theme/palette.ts