@xaui/native 0.9.1-alpha.9 → 0.9.1-alpha.91

package/dist/chunk-X4CZYJZ6.cjs

@@ -0,0 +1,311 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } 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 _chunkUEW3GAP5cjs = require('./chunk-UEW3GAP5.cjs');
+
+
+
+
+
+var _chunkISHMSP6Pcjs = require('./chunk-ISHMSP6P.cjs');
+
+
+var _chunk7EIHHOHPcjs = require('./chunk-7EIHHOHP.cjs');
+
+
+var _chunkOW4N2C3Mcjs = require('./chunk-OW4N2C3M.cjs');
+
+
+var _chunk7DPL3ZDScjs = require('./chunk-7DPL3ZDS.cjs');
+
+
+var _chunkSL3V7R2Ycjs = require('./chunk-SL3V7R2Y.cjs');
+
+
+var _chunkCDRGTUYFcjs = require('./chunk-CDRGTUYF.cjs');
+
+
+var _chunkIIAQISBGcjs = require('./chunk-IIAQISBG.cjs');
+
+
+var _chunkTK44VBIEcjs = require('./chunk-TK44VBIE.cjs');
+
+// src/components/range-calendar/range-calendar-day.tsx
+var _react = require('react');
+var _reactnative = require('react-native');
+
+// src/components/range-calendar/range-calendar.context.ts
+var [RangeCalendarProvider, useRangeCalendar] = _chunkCDRGTUYFcjs.createSlotContext.call(void 0, "RangeCalendar");
+
+// src/components/range-calendar/range-calendar-day.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var RangeCalendarDay = _react.forwardRef.call(void 0, 
+  function RangeCalendarDay2({
+    date,
+    children,
+    isDisabled,
+    accessibilityRole,
+    accessibilityState,
+    accessibilityLabel,
+    style,
+    onPress,
+    onPressIn,
+    onPressOut,
+    ...props
+  }, ref) {
+    const {
+      dayStyle,
+      daySelectedStyle,
+      dayLabelStyle,
+      dayLabelSelectedStyle,
+      dayLabelMutedStyle,
+      dotStyle,
+      dotSelectedStyle,
+      month,
+      locale,
+      isDayEnabled
+    } = _chunkUEW3GAP5cjs.useCalendar.call(void 0, );
+    const { bandStyle, bandStartStyle, bandEndStyle, positionOf, select } = useRangeCalendar();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    const [isPressed, press] = _chunk7DPL3ZDScjs.usePressState.call(void 0, { onPressIn, onPressOut });
+    const position = positionOf(date);
+    const isEnd = position === "start" || position === "end" || position === "single";
+    const isOutside = !_chunkISHMSP6Pcjs.isSameMonth.call(void 0, date, month);
+    const isToday = _chunkISHMSP6Pcjs.isSameDay.call(void 0, date, /* @__PURE__ */ new Date());
+    const disabled = _nullishCoalesce(isDisabled, () => ( !isDayEnabled(date)));
+    const handlePress = _react.useCallback.call(void 0, 
+      (event) => {
+        select(date);
+        _optionalChain([onPress, 'optionalCall', _ => _(event)]);
+      },
+      [date, onPress, select]
+    );
+    const label = _react.useMemo.call(void 0, () => fullDate(date, locale), [date, locale]);
+    const band = position === "middle" ? bandStyle : position === "start" ? bandStartStyle : position === "end" ? bandEndStyle : null;
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      band === null ? null : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { pointerEvents: "none", style: band }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkOW4N2C3Mcjs.PressableFeedback,
+        {
+          ref,
+          isPressed,
+          isDisabled: disabled,
+          accessibilityRole: _nullishCoalesce(accessibilityRole, () => ( "button")),
+          accessibilityLabel: _nullishCoalesce(accessibilityLabel, () => ( label)),
+          accessibilityState: {
+            disabled,
+            selected: position !== "none",
+            ...accessibilityState
+          },
+          ...rest,
+          style: [
+            dayStyle,
+            isEnd && daySelectedStyle,
+            styleProps,
+            // R9 — `style` may be `Pressable`'s function form. This slot owns the press
+            // state, so it resolves the function here rather than forwarding it.
+            typeof style === "function" ? style({ pressed: isPressed }) : style
+          ],
+          onPress: handlePress,
+          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.Text,
+              {
+                style: [
+                  dayLabelStyle,
+                  // Order is the reading order: muted for a day that is not this month's or
+                  // is out of bounds, then the chosen colour, which outranks both.
+                  (isOutside || disabled) && dayLabelMutedStyle,
+                  isEnd && dayLabelSelectedStyle
+                ],
+                children: date.getDate()
+              }
+            ),
+            isToday ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { style: isEnd ? dotSelectedStyle : dotStyle }) : null
+          ] })))
+        }
+      )
+    ] });
+  }
+);
+RangeCalendarDay.displayName = "XAUI.RangeCalendar.Day";
+function fullDate(date, locale) {
+  try {
+    return new Intl.DateTimeFormat(locale, {
+      weekday: "long",
+      day: "numeric",
+      month: "long",
+      year: "numeric"
+    }).format(date);
+  } catch (e) {
+    return `${date.getDate()} ${_chunkISHMSP6Pcjs.monthLabel.call(void 0, date, locale)}`;
+  }
+}
+
+// src/components/range-calendar/range-calendar-grid.tsx
+
+
+var RangeCalendarGrid = _react.forwardRef.call(void 0, 
+  function RangeCalendarGrid2({ children, ...props }, ref) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUEW3GAP5cjs.Calendar.Grid, { ref, ...props, children: _nullishCoalesce(children, () => ( ((date) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RangeCalendarDay, { date })))) });
+  }
+);
+RangeCalendarGrid.displayName = "XAUI.RangeCalendar.Grid";
+
+// src/components/range-calendar/range-calendar.tsx
+
+
+// src/utils/date-range.ts
+var EMPTY_RANGE = { start: null, end: null };
+function nextRange(current, day) {
+  const chosen = _chunkISHMSP6Pcjs.startOfDay.call(void 0, day);
+  if (current.start === null || current.end !== null) {
+    return { start: chosen, end: null };
+  }
+  if (chosen.getTime() < current.start.getTime()) {
+    return { start: chosen, end: null };
+  }
+  return { start: current.start, end: chosen };
+}
+function isInRange(day, range) {
+  if (range.start === null) return false;
+  const at = _chunkISHMSP6Pcjs.startOfDay.call(void 0, day).getTime();
+  const from = range.start.getTime();
+  if (range.end === null) return at === from;
+  return at >= from && at <= range.end.getTime();
+}
+function rangePosition(day, range) {
+  if (range.start === null) return "none";
+  const isStart = _chunkISHMSP6Pcjs.isSameDay.call(void 0, day, range.start);
+  const isEnd = range.end !== null && _chunkISHMSP6Pcjs.isSameDay.call(void 0, day, range.end);
+  if (isStart && isEnd) return "single";
+  if (isStart) return range.end === null ? "single" : "start";
+  if (isEnd) return "end";
+  return isInRange(day, range) ? "middle" : "none";
+}
+
+// src/components/range-calendar/range-calendar.recipe.ts
+var SLOTS = ["band", "bandStart", "bandEnd"];
+var VARIANT_TOKENS = {
+  default: { bgSelected: "accentSoft" }
+};
+function sizeAxis(size) {
+  return () => {
+    const height = _chunkUEW3GAP5cjs.SIZES[size].cell;
+    return { band: { height }, bandStart: { height }, bandEnd: { height } };
+  };
+}
+var rangeCalendarRecipe = _chunkSL3V7R2Ycjs.createRecipe.call(void 0, {
+  slots: SLOTS,
+  base: () => ({
+    /**
+     * The band runs the **whole width of the cell, and not one point more**. It is out of
+     * flow and behind the number, so nothing about the day's own layout moves when it
+     * appears.
+     *
+     * It used to overhang a point on each side, against the hairline of background a
+     * seventh of a row could leave between two days. That cure was worse: a soft token is
+     * translucent — `accentSoft` is the accent at fifteen percent — so the two points where
+     * one cell's band lay over its neighbour's were painted twice and read as a rule down
+     * every seam, which is a border on each selected day rather than one unbroken strip.
+     *
+     * Abutting exactly is what leaves neither. Yoga rounds a node's leading and trailing
+     * edges to the pixel grid independently, so two adjacent cells share the boundary they
+     * meet on and no fraction of a seventh can open a gap between them.
+     */
+    band: { position: "absolute", start: 0, end: 0 },
+    /**
+     * **The two ends stop at the middle of their own cell**, which is where the chosen day's
+     * circle is. A cell is a seventh of the row and the circle inside it is a fixed square,
+     * so a cap drawn to the cell's edge sticks out past the day it belongs to — the band
+     * would run four or five points beyond the first and last days of the range, and a
+     * period would read as wider than the two days that bound it.
+     *
+     * From the centre, the cap is hidden under the circle for its whole first half and
+     * emerges level with the circle's edge. That also means **no radius on the outer side**:
+     * the strip's round ends are the two circles themselves, and a half-pill cap behind them
+     * would curve away from the circle it sits under and leave a lens of background between
+     * the two. `start` and `end`, never left and right (R13).
+     */
+    bandStart: { position: "absolute", start: "50%", end: 0 },
+    bandEnd: { position: "absolute", start: 0, end: "50%" }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  paint: (_theme, colors) => ({
+    band: { backgroundColor: colors.bgSelected },
+    bandStart: { backgroundColor: colors.bgSelected },
+    bandEnd: { backgroundColor: colors.bgSelected }
+  }),
+  variants: {
+    size: { sm: sizeAxis("sm"), md: sizeAxis("md"), lg: sizeAxis("lg") }
+  },
+  // `default` and not just the size: `paint` runs off the *selected* variant, and a table
+  // with one entry still has to be selected for its tokens to be read.
+  defaultVariants: { variant: "default", size: "md" }
+});
+
+// src/components/range-calendar/range-calendar.tsx
+
+var RangeCalendarRoot = _react.forwardRef.call(void 0, 
+  function RangeCalendar({ children, value: controlledValue, defaultValue, onValueChange, ...props }, ref) {
+    const theme = _chunkIIAQISBGcjs.useXAUITheme.call(void 0, );
+    const [value, setValue] = _chunk7EIHHOHPcjs.useControllableState.call(void 0, {
+      value: controlledValue,
+      defaultValue: _nullishCoalesce(defaultValue, () => ( EMPTY_RANGE)),
+      onChange: onValueChange
+    });
+    const selection = { size: props.size };
+    const styles = rangeCalendarRecipe.resolve({ theme, selection });
+    const tint = props.color ? rangeCalendarRecipe.tint({ theme, color: props.color, selection }) : void 0;
+    const select = _react.useCallback.call(void 0, 
+      (date) => setValue((current) => nextRange(current, date)),
+      [setValue]
+    );
+    const positionOf = _react.useCallback.call(void 0, 
+      (date) => rangePosition(date, value),
+      [value]
+    );
+    const context = _react.useMemo.call(void 0, 
+      () => ({
+        bandStyle: [styles.band, _optionalChain([tint, 'optionalAccess', _2 => _2.band])],
+        bandStartStyle: [styles.bandStart, _optionalChain([tint, 'optionalAccess', _3 => _3.bandStart])],
+        bandEndStyle: [styles.bandEnd, _optionalChain([tint, 'optionalAccess', _4 => _4.bandEnd])],
+        value,
+        positionOf,
+        select
+      }),
+      [styles, tint, value, positionOf, select]
+    );
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RangeCalendarProvider, { value: context, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUEW3GAP5cjs.Calendar, { ref, defaultMonth: _nullishCoalesce(value.start, () => ( void 0)), ...props, children }) });
+  }
+);
+RangeCalendarRoot.displayName = "XAUI.RangeCalendar.Root";
+
+// src/components/range-calendar/index.ts
+var RangeCalendar2 = Object.assign(RangeCalendarRoot, {
+  Header: _chunkUEW3GAP5cjs.CalendarHeader,
+  Title: _chunkUEW3GAP5cjs.CalendarTitle,
+  PreviousButton: _chunkUEW3GAP5cjs.CalendarPreviousButton,
+  NextButton: _chunkUEW3GAP5cjs.CalendarNextButton,
+  Weekdays: _chunkUEW3GAP5cjs.CalendarWeekdays,
+  Grid: RangeCalendarGrid,
+  Day: RangeCalendarDay
+});
+
+
+
+
+
+
+
+
+
+exports.EMPTY_RANGE = EMPTY_RANGE; exports.useRangeCalendar = useRangeCalendar; exports.RangeCalendarDay = RangeCalendarDay; exports.RangeCalendarGrid = RangeCalendarGrid; exports.rangeCalendarRecipe = rangeCalendarRecipe; exports.RangeCalendarRoot = RangeCalendarRoot; exports.RangeCalendar = RangeCalendar2;

package/dist/chunk-XSQPVDFH.cjs

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+}); // src/hooks/use-previous.ts
+var _react = require('react');
+function usePrevious(value) {
+  const previous = _react.useRef.call(void 0, void 0);
+  _react.useEffect.call(void 0, () => {
+    previous.current = value;
+  }, [value]);
+  return previous.current;
+}
+
+// src/hooks/use-rotation.ts
+
+var _reactnativereanimated = require('react-native-reanimated');
+var ROTATION_DURATION = 900;
+const _worklet_15909689137170_init_data = {
+  code: "function chunkXSQPVDFHCjs1(){const{angle}=this.__closure;return{transform:[{rotate:angle.value+\"deg\"}]};}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-XSQPVDFH.cjs",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkXSQPVDFHCjs1\",\"angle\",\"__closure\",\"transform\",\"rotate\",\"value\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-XSQPVDFH.cjs\"],\"mappings\":\"AA+B8D,SAAAA,iBAAMA,CAAA,QAAAC,KAAA,OAAAC,SAAA,CAEhE,MAAO,CAAEC,SAAS,CAAE,CAAC,CAAEC,MAAM,CAAKH,KAAK,CAACI,KAAK,MAAM,CAAC,CAAE,CAAC,CACzD\",\"ignoreList\":[]}"
+};
+function useRotation() {
+  const angle = _reactnativereanimated.useSharedValue.call(void 0, 0);
+  _react.useEffect.call(void 0, () => {
+    angle.value = _reactnativereanimated.withRepeat.call(void 0, _reactnativereanimated.withTiming.call(void 0, 360, {
+      duration: ROTATION_DURATION,
+      easing: _reactnativereanimated.Easing.linear
+    }), -1, false);
+    return () => _reactnativereanimated.cancelAnimation.call(void 0, angle);
+  }, [angle]);
+  return _reactnativereanimated.useAnimatedStyle.call(void 0, function chunkXSQPVDFHCjs1Factory({
+    _worklet_15909689137170_init_data,
+    angle
+  }) {
+    const _e = [new global.Error(), -2, -27];
+    const chunkXSQPVDFHCjs1 = function () {
+      return {
+        transform: [{
+          rotate: `${angle.value}deg`
+        }]
+      };
+    };
+    chunkXSQPVDFHCjs1.__closure = {
+      angle
+    };
+    chunkXSQPVDFHCjs1.__workletHash = 15909689137170;
+    chunkXSQPVDFHCjs1.__pluginVersion = "0.7.4";
+    chunkXSQPVDFHCjs1.__initData = _worklet_15909689137170_init_data;
+    chunkXSQPVDFHCjs1.__stackDetails = _e;
+    return chunkXSQPVDFHCjs1;
+  }({
+    _worklet_15909689137170_init_data,
+    angle
+  }), [angle]);
+}
+exports.usePrevious = usePrevious;
+exports.ROTATION_DURATION = ROTATION_DURATION;
+exports.useRotation = useRotation;

package/dist/chunk-YCQEX25B.cjs

@@ -0,0 +1,74 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
+
+
+
+
+
+
+var _chunkAXKDHX5Vcjs = require('./chunk-AXKDHX5V.cjs');
+
+
+var _chunkCDRGTUYFcjs = require('./chunk-CDRGTUYF.cjs');
+
+
+var _chunkTK44VBIEcjs = require('./chunk-TK44VBIE.cjs');
+
+// src/components/text-area/text-area-field.tsx
+var _react = require('react');
+
+// src/components/text-area/text-area.context.ts
+var [TextAreaProvider, useTextArea] = _chunkCDRGTUYFcjs.createSlotContext.call(void 0, "TextArea");
+
+// src/components/text-area/text-area-field.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var TextAreaField = _react.forwardRef.call(void 0, 
+  function TextAreaField2({ style, scrollEnabled, ...props }, ref) {
+    const { textAreaStyle, textArea } = _chunkAXKDHX5Vcjs.useTextField.call(void 0, );
+    const { rows, maxRows } = useTextArea();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    const height = _react.useMemo.call(void 0, () => {
+      const chrome = textArea.paddingVertical * 2;
+      return {
+        minHeight: rows * textArea.lineHeight + chrome,
+        // Unset, the field grows for as long as the text does. With a ceiling it stops
+        // there and scrolls, which is the only case that needs `scrollEnabled` — a
+        // multiline field that can grow has nothing to scroll.
+        maxHeight: maxRows ? maxRows * textArea.lineHeight + chrome : void 0
+      };
+    }, [rows, maxRows, textArea]);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkAXKDHX5Vcjs.TextFieldField,
+      {
+        ref,
+        multiline: true,
+        scrollEnabled: _nullishCoalesce(scrollEnabled, () => ( maxRows !== void 0)),
+        ...rest,
+        style: [textAreaStyle, height, styleProps, style]
+      }
+    );
+  }
+);
+TextAreaField.displayName = "XAUI.TextArea.Field";
+
+// src/components/text-area/text-area.tsx
+
+
+var DEFAULT_ROWS = 3;
+var TextAreaRoot = _react.forwardRef.call(void 0, function TextArea({ rows = DEFAULT_ROWS, maxRows, children, ...props }, ref) {
+  const context = _react.useMemo.call(void 0, () => ({ rows, maxRows }), [rows, maxRows]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TextAreaProvider, { value: context, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAXKDHX5Vcjs.TextFieldRoot, { ref, ...props, children }) });
+});
+TextAreaRoot.displayName = "XAUI.TextArea.Root";
+
+// src/components/text-area/index.ts
+var TextArea2 = Object.assign(TextAreaRoot, {
+  Label: _chunkAXKDHX5Vcjs.TextFieldLabel,
+  Field: TextAreaField,
+  Description: _chunkAXKDHX5Vcjs.TextFieldDescription,
+  Error: _chunkAXKDHX5Vcjs.TextFieldError
+});
+
+
+
+
+exports.useTextArea = useTextArea; exports.TextArea = TextArea2;

package/dist/{chunk-7XGOXTGT.js → chunk-YGETADPV.js}

@@ -1,36 +1,25 @@
+import {
+  PortalHost
+} from "./chunk-2PMXMKS5.js";
 import {
   ThemeContext,
   alpha,
   mix
-} from "./chunk-X2K2FX3W.js";
+} from "./chunk-Z6JBWRPL.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)",
@@ -391,11 +393,12 @@ 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__ */ jsx(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