@xaui/native 0.9.1-alpha.4 → 0.9.1-alpha.40

package/dist/chunk-UFTCTTKK.js

@@ -0,0 +1,381 @@
+import { IconContext } from "./chunk-FHUYHV6J.js";
+import { createRecipe, radiusAxis } from "./chunk-4GTAZM2C.js";
+import { useXAUITheme } from "./chunk-A3EGFI6T.js";
+import { Slot, childrenToString, createSlotContext } from "./chunk-K72UDPVN.js";
+import { useStyleProps } from "./chunk-M63GFNKV.js";
+
+// src/components/avatar/avatar-fallback.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { View } from "react-native";
+
+// src/components/avatar/avatar-initials.tsx
+import { forwardRef } from "react";
+import { Text } from "react-native";
+
+// src/components/avatar/avatar.context.ts
+var [AvatarProvider, useAvatar] = createSlotContext("Avatar");
+
+// src/components/avatar/avatar-initials.tsx
+import { jsx } from "react/jsx-runtime";
+var AvatarInitials = forwardRef(function AvatarInitials2({
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    initialsStyle
+  } = useAvatar();
+  const [styleProps, rest] = useStyleProps(props);
+  return /* @__PURE__ */jsx(Text, {
+    ref,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no",
+    numberOfLines: 1,
+    ...rest,
+    style: [initialsStyle, styleProps, style],
+    children
+  });
+});
+AvatarInitials.displayName = "XAUI.Avatar.Initials";
+
+// src/components/avatar/avatar-fallback.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var AvatarFallback = forwardRef2(function AvatarFallback2({
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    fallbackStyle,
+    icon
+  } = useAvatar();
+  const [styleProps, rest] = useStyleProps(props);
+  const text = childrenToString(children);
+  const content = text !== null ? /* @__PURE__ */jsx2(AvatarInitials, {
+    children: text
+  }) : children;
+  return /* @__PURE__ */jsx2(View, {
+    ref,
+    style: [fallbackStyle, styleProps, style],
+    ...rest,
+    children: /* @__PURE__ */jsx2(IconContext.Provider, {
+      value: icon,
+      children: content
+    })
+  });
+});
+AvatarFallback.displayName = "XAUI.Avatar.Fallback";
+
+// src/components/avatar/avatar-image.tsx
+import { forwardRef as forwardRef3, useCallback } from "react";
+import { Image } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+
+// src/components/avatar/avatar.style.ts
+import { StyleSheet } from "react-native";
+var avatarSheet = StyleSheet.create({
+  image: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    start: 0,
+    end: 0
+  }
+});
+
+// src/components/avatar/avatar-image.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var FADE_DURATION = 200;
+var AvatarImage = forwardRef3(function AvatarImage2({
+  animation = true,
+  style,
+  ...props
+}, ref) {
+  const [styleProps, rest] = useStyleProps(props);
+  const frameStyle = [avatarSheet.image, styleProps, style];
+  if (!animation) return /* @__PURE__ */jsx3(Image, {
+    ref,
+    ...rest,
+    style: frameStyle
+  });
+  return /* @__PURE__ */jsx3(FadingImage, {
+    ref,
+    ...rest,
+    style: frameStyle
+  });
+});
+AvatarImage.displayName = "XAUI.Avatar.Image";
+const _worklet_11788124035832_init_data = {
+  code: "function chunkUFTCTTKKJs1(){const{opacity}=this.__closure;return{opacity:opacity.value};}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-UFTCTTKK.js",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkUFTCTTKKJs1\",\"opacity\",\"__closure\",\"value\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-UFTCTTKK.js\"],\"mappings\":\"AAoG2C,SAAAA,gBAAMA,CAAA,QAAAC,OAAA,OAAAC,SAAA,CAE3C,MAAO,CAAED,OAAO,CAAEA,OAAO,CAACE,KAAM,CAAC,CACnC\",\"ignoreList\":[]}"
+};
+var FadingImage = forwardRef3(function FadingImage2({
+  onLoad,
+  style,
+  ...props
+}, ref) {
+  const opacity = useSharedValue(0);
+  const handleLoad = useCallback(event => {
+    opacity.value = withTiming(1, {
+      duration: FADE_DURATION
+    });
+    onLoad?.(event);
+  }, [opacity, onLoad]);
+  const animatedStyle = useAnimatedStyle(function chunkUFTCTTKKJs1Factory({
+    _worklet_11788124035832_init_data,
+    opacity
+  }) {
+    const _e = [new global.Error(), -2, -27];
+    const chunkUFTCTTKKJs1 = function () {
+      return {
+        opacity: opacity.value
+      };
+    };
+    chunkUFTCTTKKJs1.__closure = {
+      opacity
+    };
+    chunkUFTCTTKKJs1.__workletHash = 11788124035832;
+    chunkUFTCTTKKJs1.__pluginVersion = "0.7.4";
+    chunkUFTCTTKKJs1.__initData = _worklet_11788124035832_init_data;
+    chunkUFTCTTKKJs1.__stackDetails = _e;
+    return chunkUFTCTTKKJs1;
+  }({
+    _worklet_11788124035832_init_data,
+    opacity
+  }), [opacity]);
+  return /* @__PURE__ */jsx3(Animated.Image, {
+    ref,
+    ...props,
+    onLoad: handleLoad,
+    style: [style, animatedStyle]
+  });
+});
+
+// src/components/avatar/avatar.tsx
+import { forwardRef as forwardRef4, useMemo } from "react";
+import { StyleSheet as StyleSheet2, View as View2 } from "react-native";
+
+// src/components/avatar/avatar.recipe.ts
+var SLOTS = ["root", "fallback", "initials", "icon"];
+var VARIANT_TOKENS = {
+  primary: {
+    bg: "accent",
+    fg: "accentForeground"
+  },
+  secondary: {
+    bg: "accentSoft",
+    fg: "accentSoftForeground"
+  },
+  default: {
+    bg: "default",
+    fg: "defaultForeground"
+  },
+  tertiary: {
+    border: "border",
+    fg: "foreground"
+  },
+  ghost: {
+    fg: "foreground"
+  },
+  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"
+  }
+};
+function sizeAxis(step) {
+  return theme => {
+    const diameter = theme.spacing(step.diameter);
+    return {
+      root: {
+        width: diameter,
+        height: diameter
+      },
+      initials: {
+        fontSize: theme.fontSizes[step.initials],
+        lineHeight: theme.lineHeights[step.initials]
+      },
+      icon: {
+        fontSize: theme.fontSizes[step.glyph]
+      }
+    };
+  };
+}
+var SIZES = {
+  xs: {
+    diameter: 8,
+    initials: "xs",
+    glyph: "xs"
+  },
+  sm: {
+    diameter: 10,
+    initials: "xs",
+    glyph: "sm"
+  },
+  md: {
+    diameter: 12,
+    initials: "sm",
+    glyph: "md"
+  },
+  lg: {
+    diameter: 16,
+    initials: "md",
+    glyph: "xl"
+  }
+};
+var avatarRecipe = createRecipe({
+  slots: SLOTS,
+  base: theme => ({
+    root: {
+      alignItems: "center",
+      justifyContent: "center",
+      // The clip is what makes a square photo round, so unlike on the `Chip` it is not
+      // optional here: without it the image is a rectangle sitting over a circle.
+      overflow: "hidden",
+      // Squircle corners for when `radius` overrides the circle. Free on Android.
+      borderCurve: "continuous",
+      borderWidth: 0
+    },
+    fallback: {
+      width: "100%",
+      height: "100%",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    initials: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.medium,
+      // Two letters in a circle sit off-centre by the descender otherwise.
+      textAlign: "center"
+    }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  /**
+   * Where the variant's colours land, for every variant at once. The border width follows
+   * the *presence* of the border role, so `ghost` needs no rule of its own to say it has
+   * no edge.
+   *
+   * The image takes no colour: it is a photograph, and tinting one is what `Icon`'s
+   * `source` form is for.
+   */
+  paint: (theme, colors) => ({
+    root: {
+      backgroundColor: colors.bg,
+      borderColor: colors.border,
+      borderWidth: colors.border ? theme.borderWidth.default : 0
+    },
+    initials: {
+      color: colors.fg
+    },
+    icon: {
+      color: colors.fg
+    }
+  }),
+  /** Declaration order is application order: `radius` overrides the circle `base` set. */
+  variants: {
+    size: {
+      xs: sizeAxis(SIZES.xs),
+      sm: sizeAxis(SIZES.sm),
+      md: sizeAxis(SIZES.md),
+      lg: sizeAxis(SIZES.lg)
+    },
+    radius: radiusAxis("root")
+  },
+  /**
+   * A circle at every size, where HeroUI fixes one large radius for all three — which
+   * makes their small avatars round and their large ones squircles. `full` says the shape
+   * the name means once, and `radius` is still there for the logo that wants a square.
+   */
+  defaultVariants: {
+    variant: "default",
+    size: "md",
+    radius: "full"
+  }
+});
+
+// src/components/avatar/avatar.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var AvatarRoot = forwardRef4(function Avatar({
+  children,
+  variant,
+  size,
+  radius,
+  color,
+  asChild = false,
+  style,
+  ...props
+}, ref) {
+  const theme = useXAUITheme();
+  const [styleProps, rest] = useStyleProps(props);
+  const selection = {
+    variant,
+    size,
+    radius
+  };
+  const styles = avatarRecipe.resolve({
+    theme,
+    selection
+  });
+  const tint = color ? avatarRecipe.tint({
+    theme,
+    color,
+    selection
+  }) : void 0;
+  const context = useMemo(() => {
+    const icon = StyleSheet2.flatten([styles.icon, tint?.icon]);
+    return {
+      fallbackStyle: styles.fallback,
+      initialsStyle: tint ? [styles.initials, tint.initials] : styles.initials,
+      icon: {
+        size: icon.fontSize,
+        // `ColorValue` also covers the platform's opaque colours, which `Icon` cannot
+        // hand to a third-party component expecting a string.
+        color: typeof icon.color === "string" ? icon.color : void 0
+      }
+    };
+  }, [styles, tint]);
+  const rootStyle = [styles.root, tint?.root, styleProps, style];
+  const text = childrenToString(children);
+  const content = text !== null ? /* @__PURE__ */jsx4(AvatarFallback, {
+    children: text
+  }) : children;
+  const Root = asChild ? Slot : View2;
+  return /* @__PURE__ */jsx4(AvatarProvider, {
+    value: context,
+    children: /* @__PURE__ */jsx4(Root, {
+      ref,
+      ...rest,
+      style: rootStyle,
+      children: asChild ? children : content
+    })
+  });
+});
+AvatarRoot.displayName = "XAUI.Avatar.Root";
+
+// src/components/avatar/index.ts
+var Avatar2 = Object.assign(AvatarRoot, {
+  Image: AvatarImage,
+  Fallback: AvatarFallback,
+  Initials: AvatarInitials
+});
+export { useAvatar, avatarRecipe, Avatar2 as Avatar };

package/dist/chunk-WDDXU3OH.cjs

@@ -0,0 +1,67 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkTK44VBIEcjs = require('./chunk-TK44VBIE.cjs');
+
+// src/system/portal/portal-context.ts
+var _react = require('react');
+var PortalContext = _react.createContext.call(void 0, null);
+
+// src/system/portal/portal.tsx
+
+function Portal({ children }) {
+  const context = _react.useContext.call(void 0, PortalContext);
+  const key = _react.useId.call(void 0, );
+  _react.useLayoutEffect.call(void 0, () => {
+    _optionalChain([context, 'optionalAccess', _ => _.addPortal, 'call', _2 => _2(key, children)]);
+  }, [children, context, key]);
+  _react.useLayoutEffect.call(void 0, () => {
+    return () => _optionalChain([context, 'optionalAccess', _3 => _3.removePortal, 'call', _4 => _4(key)]);
+  }, [context, key]);
+  return null;
+}
+Portal.displayName = "XAUI.Portal";
+
+// src/system/portal/portal-host.tsx
+
+var _reactnative = require('react-native');
+var _jsxruntime = require('react/jsx-runtime');
+var styles = _reactnative.StyleSheet.create({
+  container: { flex: 1 }
+});
+function PortalHost({ children, ...props }) {
+  const [styleProps] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  const [portals, setPortals] = _react.useState.call(void 0, /* @__PURE__ */ new Map());
+  const [origin, setOrigin] = _react.useState.call(void 0, { x: 0, y: 0 });
+  const node = _react.useRef.call(void 0, null);
+  const measure = _react.useCallback.call(void 0, (_event) => {
+    _optionalChain([node, 'access', _5 => _5.current, 'optionalAccess', _6 => _6.measureInWindow, 'call', _7 => _7((x, y) => {
+      setOrigin((current) => current.x === x && current.y === y ? current : { x, y });
+    })]);
+  }, []);
+  const addPortal = _react.useCallback.call(void 0, (key, element) => {
+    setPortals((current) => new Map(current).set(key, element));
+  }, []);
+  const removePortal = _react.useCallback.call(void 0, (key) => {
+    setPortals((current) => {
+      if (!current.has(key)) return current;
+      const next = new Map(current);
+      next.delete(key);
+      return next;
+    });
+  }, []);
+  const methods = _react.useMemo.call(void 0, 
+    () => ({ addPortal, removePortal, origin }),
+    [addPortal, removePortal, origin]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PortalContext.Provider, { value: methods, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _reactnative.View, { ref: node, onLayout: measure, style: [styles.container, styleProps], children: [
+    children,
+    Array.from(portals, ([key, element]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: element }, key))
+  ] }) });
+}
+PortalHost.displayName = "XAUI.PortalHost";
+
+
+
+
+
+exports.PortalContext = PortalContext; exports.Portal = Portal; exports.PortalHost = PortalHost;

package/dist/chunk-WFEMJCXO.cjs

@@ -0,0 +1,13 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkH4E4HDEPcjs = require('./chunk-H4E4HDEP.cjs');
+
+// src/hooks/use-merged-ref.ts
+var _react = require('react');
+function useMergedRef(...refs) {
+  return _react.useMemo.call(void 0, () => _chunkH4E4HDEPcjs.mergeRefs.call(void 0, ...refs), refs);
+}
+
+
+
+exports.useMergedRef = useMergedRef;

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

@@ -1,36 +1,25 @@
+import {
+  PortalHost
+} from "./chunk-2PMXMKS5.js";
 import {
   ThemeContext,
   alpha,
   mix
-} from "./chunk-X2K2FX3W.js";
+} from "./chunk-A3EGFI6T.js";
+import {
+  stableHash
+} from "./chunk-M63GFNKV.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 +52,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 +65,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 +113,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 };
@@ -131,10 +133,10 @@ function buildShadows(mode) {
       surface: noShadow,
       overlay: {
         shadowColor: "#000000",
-        shadowOffset: { width: 0, height: 8 },
-        shadowOpacity: 0.6,
-        shadowRadius: 24,
-        elevation: 16
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.45,
+        shadowRadius: 16,
+        elevation: 8
       },
       field: noShadow
     };
@@ -149,10 +151,10 @@ function buildShadows(mode) {
     },
     overlay: {
       shadowColor: "#000000",
-      shadowOffset: { width: 0, height: 8 },
-      shadowOpacity: 0.14,
-      shadowRadius: 24,
-      elevation: 16
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.1,
+      shadowRadius: 16,
+      elevation: 8
     },
     field: {
       shadowColor: "#000000",
@@ -171,7 +173,7 @@ var tokens = {
     foreground: "#18181b",
     surface: "#ffffff",
     surfaceForeground: "#18181b",
-    surfaceSecondary: "#f4f4f5",
+    surfaceSecondary: "#ececee",
     surfaceSecondaryForeground: "#18181b",
     surfaceTertiary: "#e4e4e7",
     surfaceTertiaryForeground: "#18181b",
@@ -179,7 +181,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 +191,7 @@ var tokens = {
     fieldBorder: "#e4e4e7",
     success: "#15803d",
     successForeground: "#fafafa",
-    warning: "#b45309",
+    warning: "#c2410c",
     warningForeground: "#fafafa",
     danger: "#dc2626",
     dangerForeground: "#fafafa",
@@ -199,24 +201,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 +261,7 @@ var tokens = {
     fieldBorder: "#3f3f46",
     success: "#4ade80",
     successForeground: "#18181b",
-    warning: "#fbbf24",
+    warning: "#fb923c",
     warningForeground: "#18181b",
     danger: "#f87171",
     dangerForeground: "#18181b",
@@ -269,10 +271,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 +286,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,14 +389,16 @@ function createTheme(config = {}) {
 var defaultTheme = createTheme();
 
 // src/provider/xaui-provider.tsx
+import { jsx } from "react/jsx-runtime";
 function XAUIProvider({
   children,
   theme = defaultTheme,
-  colorMode = "system"
+  colorMode = "system",
+  hasPortalHost = true
 }) {
   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: hasPortalHost ? /* @__PURE__ */ jsx(PortalHost, { children }) : children });
 }
 
 // src/theme/palette.ts