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

package/dist/theme/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { i as XAUIThemeSet, h as XAUIThemeConfig, f as XAUISourceColors, b as XAUIDerivedColors, g as XAUITheme, d as XAUIRadius, C as ColorMode, X as XAUIColors } from '../theme.type-C9bFJKFm.js';
-export { F as FontSizeKey, a as FontWeightKey, R as RadiusKey, S as Size, c as XAUIPrimitiveColors, e as XAUIShadow } from '../theme.type-C9bFJKFm.js';
+import { i as XAUIThemeSet, h as XAUIThemeConfig, g as XAUISourceColors, c as XAUIDerivedColors, X as XAUITheme, e as XAUIRadius, C as ColorMode, a as XAUIColors } from '../theme.type-C2gNHpEx.js';
+export { F as FontSizeKey, b as FontWeightKey, R as RadiusKey, S as Size, d as XAUIPrimitiveColors, f as XAUIShadow } from '../theme.type-C2gNHpEx.js';
 import 'react-native';
 
 /** `'system'` follows the device; the resolved value is never `'system'`. */
@@ -12,6 +12,14 @@ type XAUIProviderProps = {
     theme?: XAUIThemeSet;
     /** Controlled: the library owns neither the state nor its persistence. */
     colorMode?: ColorModePreference;
+    /**
+     * Mounts the `PortalHost` overlays render into. Set false only to mount one yourself,
+     * somewhere the provider cannot reach — under a gesture root, say. Without a host
+     * anywhere, `Portal` renders nothing and overlays are silently absent.
+     *
+     * @default true
+     */
+    hasPortalHost?: boolean;
 };
 
 /**
@@ -20,8 +28,14 @@ type XAUIProviderProps = {
  * `theme` is expected to come from `createTheme` at module level. The provider selects a
  * mode from an already-resolved set rather than memoizing on the prop's identity — which
  * is what the v0 provider did, rebuilding every style in the app on each parent render.
+ *
+ * It also mounts the `PortalHost` every overlay renders into. That is here rather than in
+ * the app because forgetting it is silent: `Portal` renders nothing outside a host, so a
+ * select would open onto an empty screen with no error to read. An app that needs the
+ * host somewhere else — under a gesture root, or inside its own navigation container —
+ * sets `hasPortalHost={false}` and mounts one itself.
  */
-declare function XAUIProvider({ children, theme, colorMode, }: XAUIProviderProps): react.JSX.Element;
+declare function XAUIProvider({ children, theme, colorMode, hasPortalHost, }: XAUIProviderProps): react.JSX.Element;
 
 /**
  * Build a theme once, at module level:
@@ -44,6 +58,17 @@ declare const defaultTheme: XAUIThemeSet;
  * These are HeroUI's `color-mix(in oklab, …)` formulas transposed to JS, because React
  * Native has no `color-mix()`. Their `-hover` names became `-pressed`: what they feed is
  * the press overlay, and the web name was a leftover.
+ *
+ * **One deliberate divergence: a pressed state always moves towards the mode's ink**
+ * (P2-API-REVIEW §E). Mixing towards the variant's own foreground — which is what their
+ * formula does — makes the direction follow the fill's lightness rather than a decision:
+ * `#9333ea` has near-white text and lightened under the finger in light mode, while
+ * `#c084fc` has dark text and darkened in dark mode. Same component, opposite gesture,
+ * nobody's choice. Towards `foreground` it is one direction — darker in light, lighter in
+ * dark — and the label's contrast rises in both instead of falling in one.
+ *
+ * The neutral fills already did this: `defaultForeground` and `surfaceForeground` *are*
+ * the ink, so only the four saturated intents ever flipped.
  */
 declare function deriveColors(s: XAUISourceColors): XAUIDerivedColors;
 
@@ -380,6 +405,12 @@ declare function buildRadius(base: number): XAUIRadius;
 /**
  * Three roles, not an sm→xl scale — which is what lets dark mode drop the surface shadow
  * entirely instead of shipping a scale that reads as dirt on a dark background.
+ *
+ * `overlay` was heavier: a 24-point blur eight points down at 16 of Android's elevation.
+ * Android draws elevation on its own curve and draws it strongly, so a panel that read as
+ * lifted on iOS read as detached on Android — a dark halo the width of the gap between it
+ * and the field it came out of. Half the elevation and two thirds of the blur still say
+ * "above the page" without the panel looking cut out of it.
  */
 declare function buildShadows(mode: ColorMode): XAUITheme['shadows'];
 
@@ -389,7 +420,7 @@ declare const tokens: {
         readonly foreground: "#18181b";
         readonly surface: "#ffffff";
         readonly surfaceForeground: "#18181b";
-        readonly surfaceSecondary: "#f4f4f5";
+        readonly surfaceSecondary: "#ececee";
         readonly surfaceSecondaryForeground: "#18181b";
         readonly surfaceTertiary: "#e4e4e7";
         readonly surfaceTertiaryForeground: "#18181b";
@@ -397,7 +428,7 @@ declare const tokens: {
         readonly overlayForeground: "#18181b";
         readonly backdrop: "rgba(0, 0, 0, 0.2)";
         readonly muted: "#71717a";
-        readonly default: "#f4f4f5";
+        readonly default: "#e4e4e7";
         readonly defaultForeground: "#18181b";
         readonly accent: "#9333ea";
         readonly accentForeground: "#faf5ff";
@@ -407,7 +438,7 @@ declare const tokens: {
         readonly fieldBorder: "#e4e4e7";
         readonly success: "#15803d";
         readonly successForeground: "#fafafa";
-        readonly warning: "#b45309";
+        readonly warning: "#c2410c";
         readonly warningForeground: "#fafafa";
         readonly danger: "#dc2626";
         readonly dangerForeground: "#fafafa";
@@ -417,24 +448,24 @@ declare const tokens: {
         readonly separator: "#d4d4d8";
         readonly focus: "#9333ea";
         readonly link: "#18181b";
-        readonly accentPressed: "#9c4eee";
-        readonly successPressed: "#378c50";
-        readonly warningPressed: "#bd642f";
-        readonly dangerPressed: "#e2473f";
-        readonly defaultPressed: "#eaeaeb";
+        readonly accentPressed: "#8533d3";
+        readonly successPressed: "#1b753a";
+        readonly warningPressed: "#af3e15";
+        readonly dangerPressed: "#c72927";
+        readonly defaultPressed: "#dbdbde";
         readonly surfacePressed: "#eaeaea";
-        readonly defaultSoft: "rgba(244, 244, 245, 0.5)";
+        readonly defaultSoft: "rgba(228, 228, 231, 0.5)";
         readonly defaultSoftForeground: "#18181b";
-        readonly defaultSoftPressed: "rgba(244, 244, 245, 0.6)";
+        readonly defaultSoftPressed: "rgba(228, 228, 231, 0.6)";
         readonly accentSoft: "rgba(147, 51, 234, 0.15)";
         readonly accentSoftForeground: "#7833bc";
         readonly accentSoftPressed: "rgba(147, 51, 234, 0.2)";
         readonly successSoft: "rgba(21, 128, 61, 0.15)";
         readonly successSoftForeground: "#205f34";
         readonly successSoftPressed: "rgba(21, 128, 61, 0.2)";
-        readonly warningSoft: "rgba(180, 83, 9, 0.15)";
-        readonly warningSoftForeground: "#793f1e";
-        readonly warningSoftPressed: "rgba(180, 83, 9, 0.2)";
+        readonly warningSoft: "rgba(194, 65, 12, 0.15)";
+        readonly warningSoftForeground: "#82361e";
+        readonly warningSoftPressed: "rgba(194, 65, 12, 0.2)";
         readonly dangerSoft: "rgba(220, 38, 38, 0.15)";
         readonly dangerSoftForeground: "#b22b28";
         readonly dangerSoftPressed: "rgba(220, 38, 38, 0.2)";
@@ -477,7 +508,7 @@ declare const tokens: {
         readonly fieldBorder: "#3f3f46";
         readonly success: "#4ade80";
         readonly successForeground: "#18181b";
-        readonly warning: "#fbbf24";
+        readonly warning: "#fb923c";
         readonly warningForeground: "#18181b";
         readonly danger: "#f87171";
         readonly dangerForeground: "#18181b";
@@ -487,10 +518,10 @@ declare const tokens: {
         readonly separator: "#52525b";
         readonly focus: "#c084fc";
         readonly link: "#fafafa";
-        readonly accentPressed: "#ad78e3";
-        readonly successPressed: "#47c875";
-        readonly warningPressed: "#e1ac2b";
-        readonly dangerPressed: "#df6868";
+        readonly accentPressed: "#c691fd";
+        readonly successPressed: "#64e18d";
+        readonly warningPressed: "#fc9d55";
+        readonly dangerPressed: "#fa807e";
         readonly defaultPressed: "#2e2e31";
         readonly surfacePressed: "#27272a";
         readonly defaultSoft: "rgba(39, 39, 42, 0.5)";
@@ -502,9 +533,9 @@ declare const tokens: {
         readonly successSoft: "rgba(74, 222, 128, 0.15)";
         readonly successSoftForeground: "#8de8a6";
         readonly successSoftPressed: "rgba(74, 222, 128, 0.2)";
-        readonly warningSoft: "rgba(251, 191, 36, 0.15)";
-        readonly warningSoftForeground: "#fbd586";
-        readonly warningSoftPressed: "rgba(251, 191, 36, 0.2)";
+        readonly warningSoft: "rgba(251, 146, 60, 0.15)";
+        readonly warningSoftForeground: "#feb887";
+        readonly warningSoftPressed: "rgba(251, 146, 60, 0.2)";
         readonly dangerSoft: "rgba(248, 113, 113, 0.15)";
         readonly dangerSoftForeground: "#fc8f8c";
         readonly dangerSoftPressed: "rgba(248, 113, 113, 0.2)";

package/dist/theme/index.js

@@ -9,14 +9,16 @@ import {
   primitives,
   sourceKeys,
   tokens
-} from "../chunk-2KXQATVL.js";
+} from "../chunk-WKCQ6VGW.js";
+import "../chunk-2PMXMKS5.js";
 import {
   ThemeContext,
   deriveTint,
   useColorMode,
   useThemeColor,
   useXAUITheme
-} from "../chunk-X2K2FX3W.js";
+} from "../chunk-A3EGFI6T.js";
+import "../chunk-M63GFNKV.js";
 export {
   ThemeContext,
   XAUIProvider,

package/dist/{theme.type-C9bFJKFm.d.cts → theme.type-C2gNHpEx.d.cts}

@@ -156,4 +156,4 @@ type XAUIThemeSet = {
     dark: XAUITheme;
 };
 
-export type { ColorMode as C, FontSizeKey as F, RadiusKey as R, Size as S, XAUIColors as X, FontWeightKey as a, XAUIDerivedColors as b, XAUIPrimitiveColors as c, XAUIRadius as d, XAUIShadow as e, XAUISourceColors as f, XAUITheme as g, XAUIThemeConfig as h, XAUIThemeSet as i };
+export type { ColorMode as C, FontSizeKey as F, RadiusKey as R, Size as S, XAUITheme as X, XAUIColors as a, FontWeightKey as b, XAUIDerivedColors as c, XAUIPrimitiveColors as d, XAUIRadius as e, XAUIShadow as f, XAUISourceColors as g, XAUIThemeConfig as h, XAUIThemeSet as i };

package/dist/{theme.type-C9bFJKFm.d.ts → theme.type-C2gNHpEx.d.ts}

@@ -156,4 +156,4 @@ type XAUIThemeSet = {
     dark: XAUITheme;
 };
 
-export type { ColorMode as C, FontSizeKey as F, RadiusKey as R, Size as S, XAUIColors as X, FontWeightKey as a, XAUIDerivedColors as b, XAUIPrimitiveColors as c, XAUIRadius as d, XAUIShadow as e, XAUISourceColors as f, XAUITheme as g, XAUIThemeConfig as h, XAUIThemeSet as i };
+export type { ColorMode as C, FontSizeKey as F, RadiusKey as R, Size as S, XAUITheme as X, XAUIColors as a, FontWeightKey as b, XAUIDerivedColors as c, XAUIPrimitiveColors as d, XAUIRadius as e, XAUIShadow as f, XAUISourceColors as g, XAUIThemeConfig as h, XAUIThemeSet as i };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaui/native",
-  "version": "0.9.1-alpha.4",
+  "version": "0.9.1-alpha.40",
   "description": "Composition-first React Native UI components with native animations powered by Reanimated",
   "keywords": [
     "react-native",
@@ -14,23 +14,258 @@
   ],
   "license": "MIT",
   "type": "module",
-  "main": "./dist/index.js",
+  "main": "./dist/index.cjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.js"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./accordion": {
+      "import": {
+        "types": "./dist/components/accordion/index.d.ts",
+        "default": "./dist/components/accordion/index.js"
+      },
+      "require": {
+        "types": "./dist/components/accordion/index.d.cts",
+        "default": "./dist/components/accordion/index.cjs"
+      }
+    },
+    "./alert": {
+      "import": {
+        "types": "./dist/components/alert/index.d.ts",
+        "default": "./dist/components/alert/index.js"
+      },
+      "require": {
+        "types": "./dist/components/alert/index.d.cts",
+        "default": "./dist/components/alert/index.cjs"
+      }
+    },
+    "./avatar": {
+      "import": {
+        "types": "./dist/components/avatar/index.d.ts",
+        "default": "./dist/components/avatar/index.js"
+      },
+      "require": {
+        "types": "./dist/components/avatar/index.d.cts",
+        "default": "./dist/components/avatar/index.cjs"
+      }
+    },
+    "./badge": {
+      "import": {
+        "types": "./dist/components/badge/index.d.ts",
+        "default": "./dist/components/badge/index.js"
+      },
+      "require": {
+        "types": "./dist/components/badge/index.d.cts",
+        "default": "./dist/components/badge/index.cjs"
+      }
+    },
+    "./button": {
+      "import": {
+        "types": "./dist/components/button/index.d.ts",
+        "default": "./dist/components/button/index.js"
+      },
+      "require": {
+        "types": "./dist/components/button/index.d.cts",
+        "default": "./dist/components/button/index.cjs"
+      }
+    },
+    "./card": {
+      "import": {
+        "types": "./dist/components/card/index.d.ts",
+        "default": "./dist/components/card/index.js"
+      },
+      "require": {
+        "types": "./dist/components/card/index.d.cts",
+        "default": "./dist/components/card/index.cjs"
+      }
+    },
+    "./checkbox": {
+      "import": {
+        "types": "./dist/components/checkbox/index.d.ts",
+        "default": "./dist/components/checkbox/index.js"
+      },
+      "require": {
+        "types": "./dist/components/checkbox/index.d.cts",
+        "default": "./dist/components/checkbox/index.cjs"
+      }
+    },
+    "./chip": {
+      "import": {
+        "types": "./dist/components/chip/index.d.ts",
+        "default": "./dist/components/chip/index.js"
+      },
+      "require": {
+        "types": "./dist/components/chip/index.d.cts",
+        "default": "./dist/components/chip/index.cjs"
+      }
+    },
+    "./divider": {
+      "import": {
+        "types": "./dist/components/divider/index.d.ts",
+        "default": "./dist/components/divider/index.js"
+      },
+      "require": {
+        "types": "./dist/components/divider/index.d.cts",
+        "default": "./dist/components/divider/index.cjs"
+      }
+    },
+    "./field-group": {
+      "import": {
+        "types": "./dist/components/field-group/index.d.ts",
+        "default": "./dist/components/field-group/index.js"
+      },
+      "require": {
+        "types": "./dist/components/field-group/index.d.cts",
+        "default": "./dist/components/field-group/index.cjs"
+      }
+    },
+    "./input-otp": {
+      "import": {
+        "types": "./dist/components/input-otp/index.d.ts",
+        "default": "./dist/components/input-otp/index.js"
+      },
+      "require": {
+        "types": "./dist/components/input-otp/index.d.cts",
+        "default": "./dist/components/input-otp/index.cjs"
+      }
+    },
+    "./menu": {
+      "import": {
+        "types": "./dist/components/menu/index.d.ts",
+        "default": "./dist/components/menu/index.js"
+      },
+      "require": {
+        "types": "./dist/components/menu/index.d.cts",
+        "default": "./dist/components/menu/index.cjs"
+      }
+    },
+    "./popover": {
+      "import": {
+        "types": "./dist/components/popover/index.d.ts",
+        "default": "./dist/components/popover/index.js"
+      },
+      "require": {
+        "types": "./dist/components/popover/index.d.cts",
+        "default": "./dist/components/popover/index.cjs"
+      }
+    },
+    "./radio": {
+      "import": {
+        "types": "./dist/components/radio/index.d.ts",
+        "default": "./dist/components/radio/index.js"
+      },
+      "require": {
+        "types": "./dist/components/radio/index.d.cts",
+        "default": "./dist/components/radio/index.cjs"
+      }
+    },
+    "./select": {
+      "import": {
+        "types": "./dist/components/select/index.d.ts",
+        "default": "./dist/components/select/index.js"
+      },
+      "require": {
+        "types": "./dist/components/select/index.d.cts",
+        "default": "./dist/components/select/index.cjs"
+      }
+    },
+    "./skeleton": {
+      "import": {
+        "types": "./dist/components/skeleton/index.d.ts",
+        "default": "./dist/components/skeleton/index.js"
+      },
+      "require": {
+        "types": "./dist/components/skeleton/index.d.cts",
+        "default": "./dist/components/skeleton/index.cjs"
+      }
+    },
+    "./spinner": {
+      "import": {
+        "types": "./dist/components/spinner/index.d.ts",
+        "default": "./dist/components/spinner/index.js"
+      },
+      "require": {
+        "types": "./dist/components/spinner/index.d.cts",
+        "default": "./dist/components/spinner/index.cjs"
+      }
+    },
+    "./switch": {
+      "import": {
+        "types": "./dist/components/switch/index.d.ts",
+        "default": "./dist/components/switch/index.js"
+      },
+      "require": {
+        "types": "./dist/components/switch/index.d.cts",
+        "default": "./dist/components/switch/index.cjs"
+      }
+    },
+    "./text-area": {
+      "import": {
+        "types": "./dist/components/text-area/index.d.ts",
+        "default": "./dist/components/text-area/index.js"
+      },
+      "require": {
+        "types": "./dist/components/text-area/index.d.cts",
+        "default": "./dist/components/text-area/index.cjs"
+      }
+    },
+    "./text-field": {
+      "import": {
+        "types": "./dist/components/text-field/index.d.ts",
+        "default": "./dist/components/text-field/index.js"
+      },
+      "require": {
+        "types": "./dist/components/text-field/index.d.cts",
+        "default": "./dist/components/text-field/index.cjs"
+      }
+    },
+    "./typography": {
+      "import": {
+        "types": "./dist/components/typography/index.d.ts",
+        "default": "./dist/components/typography/index.js"
+      },
+      "require": {
+        "types": "./dist/components/typography/index.d.cts",
+        "default": "./dist/components/typography/index.cjs"
+      }
+    },
+    "./view": {
+      "import": {
+        "types": "./dist/components/view/index.d.ts",
+        "default": "./dist/components/view/index.js"
+      },
+      "require": {
+        "types": "./dist/components/view/index.d.cts",
+        "default": "./dist/components/view/index.cjs"
+      }
     },
     "./system": {
-      "types": "./dist/system/index.d.ts",
-      "import": "./dist/system/index.js",
-      "require": "./dist/system/index.js"
+      "import": {
+        "types": "./dist/system/index.d.ts",
+        "default": "./dist/system/index.js"
+      },
+      "require": {
+        "types": "./dist/system/index.d.cts",
+        "default": "./dist/system/index.cjs"
+      }
     },
     "./theme": {
-      "types": "./dist/theme/index.d.ts",
-      "import": "./dist/theme/index.js",
-      "require": "./dist/theme/index.js"
+      "import": {
+        "types": "./dist/theme/index.d.ts",
+        "default": "./dist/theme/index.js"
+      },
+      "require": {
+        "types": "./dist/theme/index.d.cts",
+        "default": "./dist/theme/index.cjs"
+      }
     }
   },
   "files": [
@@ -67,19 +302,20 @@
     }
   },
   "devDependencies": {
-    "@types/react": "^19.1.0",
-    "react": "19.1.0",
-    "react-native": "0.83.6",
+    "@types/react": "^19.2.0",
+    "react": "19.2.0",
+    "react-native": "0.83.10",
     "react-native-gesture-handler": "^2.28.0",
-    "react-native-reanimated": "^4.0.0",
+    "react-native-reanimated": "4.2.1",
     "react-native-safe-area-context": "^5.6.0",
-    "react-native-svg": "^15.8.0",
-    "react-native-worklets": "^0.5.1",
+    "react-native-svg": "15.15.3",
+    "react-native-worklets": "0.7.4",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"
   },
+  "module": "./dist/index.js",
   "scripts": {
-    "build": "rm -rf dist && tsup --config tsup.config.ts",
+    "build": "rm -rf dist && tsup --config tsup.config.ts && node ../../tooling/workletize/workletize.mjs dist",
     "dev": "tsup --config tsup.config.ts --watch",
     "test": "vitest",
     "lint": "eslint src/",