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

package/dist/{chunk-PBRPIZZ2.js → chunk-V2CEKPJ6.js}

@@ -1,13 +1,37 @@
 import {
-  Icon,
-  PressableFeedback,
-  childrenToString,
+  useRotation
+} from "./chunk-3GFRSZYR.js";
+import {
+  containsElementOfType
+} from "./chunk-7J3M62W5.js";
+import {
+  PressableFeedback
+} from "./chunk-2AFA5HA2.js";
+import {
+  usePressState
+} from "./chunk-423RQBOX.js";
+import {
+  Icon
+} from "./chunk-JN6IRT2M.js";
+import {
+  childrenToString
+} from "./chunk-WFZDAXDI.js";
+import {
   createRecipe,
+  radiusAxis
+} from "./chunk-DKVXTMIJ.js";
+import {
   createSlotContext
-} from "./chunk-U3C6VN4X.js";
+} from "./chunk-TTZOIXKE.js";
+import {
+  warnDev
+} from "./chunk-EGLLDKN6.js";
 import {
   useXAUITheme
-} from "./chunk-X2K2FX3W.js";
+} from "./chunk-Z6JBWRPL.js";
+import {
+  useStyleProps
+} from "./chunk-M63GFNKV.js";
 
 // src/components/button/button.context.ts
 var [ButtonProvider, useButton] = createSlotContext("Button");
@@ -24,14 +48,15 @@ ButtonIcon.displayName = "XAUI.Button.Icon";
 import { forwardRef } from "react";
 import { Text } from "react-native";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var ButtonLabel = forwardRef(function ButtonLabel2({ children, style, numberOfLines = 1, ...rest }, ref) {
+var ButtonLabel = forwardRef(function ButtonLabel2({ children, style, numberOfLines = 1, ...props }, ref) {
   const { labelStyle } = useButton();
+  const [styleProps, rest] = useStyleProps(props);
   return /* @__PURE__ */ jsx2(
     Text,
     {
       ref,
       numberOfLines,
-      style: [labelStyle, style],
+      style: [labelStyle, styleProps, style],
       ...rest,
       children
     }
@@ -40,92 +65,48 @@ var ButtonLabel = forwardRef(function ButtonLabel2({ children, style, numberOfLi
 ButtonLabel.displayName = "XAUI.Button.Label";
 
 // src/components/button/button-spinner.tsx
-import { useEffect } from "react";
 import { View } from "react-native";
-import Animated, {
-  Easing,
-  cancelAnimation,
-  useAnimatedStyle,
-  useSharedValue,
-  withRepeat,
-  withTiming
-} from "react-native-reanimated";
+import Animated from "react-native-reanimated";
 import { jsx as jsx3 } from "react/jsx-runtime";
-var ROTATION_DURATION = 800;
-function ButtonSpinner({ style, animation = true }) {
+function ButtonSpinner({
+  style,
+  animation = true,
+  ...props
+}) {
   const { spinnerStyle } = useButton();
-  if (!animation) return /* @__PURE__ */ jsx3(View, { style: [spinnerStyle, style] });
-  return /* @__PURE__ */ jsx3(SpinningRing, { style: [spinnerStyle, style] });
+  const [styleProps] = useStyleProps(props);
+  const ringStyle = [spinnerStyle, styleProps, style];
+  if (!animation) return /* @__PURE__ */ jsx3(View, { style: ringStyle });
+  return /* @__PURE__ */ jsx3(SpinningRing, { style: ringStyle });
 }
 ButtonSpinner.displayName = "XAUI.Button.Spinner";
 function SpinningRing({ style }) {
-  const angle = useSharedValue(0);
-  useEffect(() => {
-    angle.value = withRepeat(
-      withTiming(360, { duration: ROTATION_DURATION, easing: Easing.linear }),
-      -1,
-      false
-    );
-    return () => cancelAnimation(angle);
-  }, [angle]);
-  const animatedStyle = useAnimatedStyle(
-    () => ({ transform: [{ rotate: `${angle.value}deg` }] }),
-    [angle]
-  );
-  return /* @__PURE__ */ jsx3(Animated.View, { style: [style, animatedStyle] });
+  const rotation = useRotation();
+  return /* @__PURE__ */ jsx3(Animated.View, { style: [style, rotation] });
 }
 
 // src/components/button/button.tsx
 import { forwardRef as forwardRef2, useMemo } from "react";
 import { StyleSheet } from "react-native";
 
-// src/hooks/use-press-state.ts
-import { useCallback, useRef, useState } from "react";
-function usePressState(handlers = {}) {
-  const [isPressed, setIsPressed] = useState(false);
-  const latest = useRef(handlers);
-  latest.current = handlers;
-  const onPressIn = useCallback((event) => {
-    setIsPressed(true);
-    latest.current.onPressIn?.(event);
-  }, []);
-  const onPressOut = useCallback((event) => {
-    setIsPressed(false);
-    latest.current.onPressOut?.(event);
-  }, []);
-  const press = useRef({ onPressIn, onPressOut }).current;
-  return [isPressed, press];
-}
-
-// src/utils/warn-dev.ts
-function warnDev(message) {
-  if (typeof __DEV__ !== "undefined" && !__DEV__) return;
-  console.warn(`XAUI: ${message}`);
-}
-
 // src/components/button/button.recipe.ts
 var SLOTS = ["root", "label", "icon", "spinner"];
 var VARIANT_TOKENS = {
   primary: { bg: "accent", bgPressed: "accentPressed", fg: "accentForeground" },
-  secondary: { bg: "default", bgPressed: "defaultPressed", fg: "defaultForeground" },
+  // The accent's soft slice, not a second neutral: `secondary` is to `primary` what
+  // `danger-soft` is to `danger`, and it reads as the same family at lower emphasis.
+  secondary: {
+    bg: "accentSoft",
+    bgPressed: "accentSoftPressed",
+    fg: "accentSoftForeground"
+  },
+  default: { bg: "default", bgPressed: "defaultPressed", fg: "defaultForeground" },
   tertiary: {
     border: "border",
     bgPressed: "defaultSoftPressed",
     fg: "foreground"
   },
   ghost: { bgPressed: "defaultSoftPressed", fg: "foreground" },
-  success: { bg: "success", bgPressed: "successPressed", fg: "successForeground" },
-  "success-soft": {
-    bg: "successSoft",
-    bgPressed: "successSoftPressed",
-    fg: "successSoftForeground"
-  },
-  warning: { bg: "warning", bgPressed: "warningPressed", fg: "warningForeground" },
-  "warning-soft": {
-    bg: "warningSoft",
-    bgPressed: "warningSoftPressed",
-    fg: "warningSoftForeground"
-  },
   danger: { bg: "danger", bgPressed: "dangerPressed", fg: "dangerForeground" },
   "danger-soft": {
     bg: "dangerSoft",
@@ -211,18 +192,7 @@ var buttonRecipe = createRecipe({
       md: sizeAxis({ size: "md", padding: 4, gap: 2, glyph: "lg", radius: "3xl" }),
       lg: sizeAxis({ size: "lg", padding: 5, gap: 2.5, glyph: "xl", radius: "4xl" })
     },
-    radius: {
-      xs: (t) => ({ root: { borderRadius: t.radius.xs } }),
-      sm: (t) => ({ root: { borderRadius: t.radius.sm } }),
-      md: (t) => ({ root: { borderRadius: t.radius.md } }),
-      lg: (t) => ({ root: { borderRadius: t.radius.lg } }),
-      xl: (t) => ({ root: { borderRadius: t.radius.xl } }),
-      "2xl": (t) => ({ root: { borderRadius: t.radius["2xl"] } }),
-      "3xl": (t) => ({ root: { borderRadius: t.radius["3xl"] } }),
-      "4xl": (t) => ({ root: { borderRadius: t.radius["4xl"] } }),
-      field: (t) => ({ root: { borderRadius: t.radius.field } }),
-      full: (t) => ({ root: { borderRadius: t.radius.full } })
-    },
+    radius: radiusAxis("root"),
     // A square on a fixed height. No width is computed, and none needs to be.
     isIconOnly: {
       true: () => ({ root: { paddingHorizontal: 0, aspectRatio: 1 } })
@@ -239,19 +209,9 @@ var buttonRecipe = createRecipe({
     pressed: (_theme, colors) => ({ root: { backgroundColor: colors.bgPressed } }),
     disabled: (theme) => ({ root: { opacity: theme.opacity.disabled } })
   },
-  // Annotated, or inference reads the whole `Variant` parameter off this one literal and
-  // narrows the recipe to the single variant named here.
   defaultVariants: { variant: "primary", size: "md" }
 });
 
-// src/components/button/button.utils.ts
-import { Children, isValidElement } from "react";
-function containsElementOfType(children, type) {
-  return Children.toArray(children).some(
-    (child) => isValidElement(child) && child.type === type
-  );
-}
-
 // src/components/button/button.tsx
 import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
 var ButtonRoot = forwardRef2(function Button({
@@ -264,16 +224,15 @@ var ButtonRoot = forwardRef2(function Button({
   isLoading = false,
   isIconOnly = false,
   asChild = false,
-  // `scale` and not `scale-highlight`: the recipe's `pressed` state already paints the
-  // variant's own pressed colour, and a neutral wash on top would darken it twice.
-  feedbackVariant = "scale",
   accessibilityRole = "button",
+  accessibilityState,
   style,
   onPressIn,
   onPressOut,
-  ...rest
+  ...props
 }, ref) {
   const theme = useXAUITheme();
+  const [styleProps, rest] = useStyleProps(props);
   const [isPressed, press] = usePressState({ onPressIn, onPressOut });
   const selection = {
     variant,
@@ -302,6 +261,7 @@ var ButtonRoot = forwardRef2(function Button({
   const rootStyle = [
     styles.root,
     tint?.root,
+    styleProps,
     typeof style === "function" ? style({ pressed: isPressed }) : style
   ];
   const text = childrenToString(children);
@@ -318,9 +278,12 @@ var ButtonRoot = forwardRef2(function Button({
       isPressed,
       isDisabled: isDisabled || isLoading,
       asChild,
-      feedbackVariant,
       accessibilityRole,
-      accessibilityState: { disabled: isDisabled, busy: isLoading },
+      accessibilityState: {
+        disabled: isDisabled,
+        busy: isLoading,
+        ...accessibilityState
+      },
       ...rest,
       style: rootStyle,
       onPressIn: press.onPressIn,
@@ -343,8 +306,6 @@ var Button2 = Object.assign(ButtonRoot, {
 
 export {
   useButton,
-  usePressState,
-  warnDev,
   buttonRecipe,
   Button2 as Button
 };

package/dist/{chunk-2FEDC7U5.cjs → chunk-V4IFH65I.cjs}

@@ -1,68 +1,58 @@
 "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 _chunkWDDXU3OHcjs = require('./chunk-WDDXU3OH.cjs');
 
 
-var _chunk3QBT3Q65cjs = require('./chunk-3QBT3Q65.cjs');
+
+
+var _chunkIIAQISBGcjs = require('./chunk-IIAQISBG.cjs');
+
+
+var _chunkTK44VBIEcjs = require('./chunk-TK44VBIE.cjs');
 
 // src/provider/xaui-provider.tsx
 var _reactnative = require('react-native');
 
-// src/utils/stable-hash.ts
-function canonical(value) {
-  if (value === null || typeof value !== "object") return _nullishCoalesce(JSON.stringify(value), () => ( "null"));
-  if (Array.isArray(value)) return `[${value.map(canonical).join(",")}]`;
-  const entries = Object.entries(value).filter(([, v]) => typeof v !== "function").sort(([a], [b]) => a < b ? -1 : 1).map(([k, v]) => `${JSON.stringify(k)}:${canonical(v)}`);
-  return `{${entries.join(",")}}`;
-}
-function stableHash(value) {
-  const input = canonical(value);
-  let hash = 2166136261;
-  for (let i = 0; i < input.length; i++) {
-    hash ^= input.charCodeAt(i);
-    hash = Math.imul(hash, 16777619) >>> 0;
-  }
-  return hash.toString(36);
-}
-
 // src/theme/derive-colors.ts
 function deriveColors(s) {
   return {
-    accentPressed: _chunk3QBT3Q65cjs.mix.call(void 0, s.accent, s.accentForeground, 0.1),
-    successPressed: _chunk3QBT3Q65cjs.mix.call(void 0, s.success, s.successForeground, 0.1),
-    warningPressed: _chunk3QBT3Q65cjs.mix.call(void 0, s.warning, s.warningForeground, 0.1),
-    dangerPressed: _chunk3QBT3Q65cjs.mix.call(void 0, s.danger, s.dangerForeground, 0.1),
-    defaultPressed: _chunk3QBT3Q65cjs.mix.call(void 0, s.default, s.defaultForeground, 0.04),
-    surfacePressed: _chunk3QBT3Q65cjs.mix.call(void 0, s.surface, s.surfaceForeground, 0.08),
-    defaultSoft: _chunk3QBT3Q65cjs.alpha.call(void 0, s.default, 0.5),
+    accentPressed: _chunkIIAQISBGcjs.mix.call(void 0, s.accent, s.foreground, 0.1),
+    successPressed: _chunkIIAQISBGcjs.mix.call(void 0, s.success, s.foreground, 0.1),
+    warningPressed: _chunkIIAQISBGcjs.mix.call(void 0, s.warning, s.foreground, 0.1),
+    dangerPressed: _chunkIIAQISBGcjs.mix.call(void 0, s.danger, s.foreground, 0.1),
+    defaultPressed: _chunkIIAQISBGcjs.mix.call(void 0, s.default, s.defaultForeground, 0.04),
+    surfacePressed: _chunkIIAQISBGcjs.mix.call(void 0, s.surface, s.surfaceForeground, 0.08),
+    defaultSoft: _chunkIIAQISBGcjs.alpha.call(void 0, s.default, 0.5),
     defaultSoftForeground: s.defaultForeground,
-    defaultSoftPressed: _chunk3QBT3Q65cjs.alpha.call(void 0, s.default, 0.6),
-    accentSoft: _chunk3QBT3Q65cjs.alpha.call(void 0, s.accent, 0.15),
-    accentSoftForeground: _chunk3QBT3Q65cjs.mix.call(void 0, s.accent, s.foreground, 0.2),
-    accentSoftPressed: _chunk3QBT3Q65cjs.alpha.call(void 0, s.accent, 0.2),
-    successSoft: _chunk3QBT3Q65cjs.alpha.call(void 0, s.success, 0.15),
-    successSoftForeground: _chunk3QBT3Q65cjs.mix.call(void 0, s.success, s.foreground, 0.3),
-    successSoftPressed: _chunk3QBT3Q65cjs.alpha.call(void 0, s.success, 0.2),
-    warningSoft: _chunk3QBT3Q65cjs.alpha.call(void 0, s.warning, 0.15),
-    warningSoftForeground: _chunk3QBT3Q65cjs.mix.call(void 0, s.warning, s.foreground, 0.35),
-    warningSoftPressed: _chunk3QBT3Q65cjs.alpha.call(void 0, s.warning, 0.2),
-    dangerSoft: _chunk3QBT3Q65cjs.alpha.call(void 0, s.danger, 0.15),
-    dangerSoftForeground: _chunk3QBT3Q65cjs.mix.call(void 0, s.danger, s.foreground, 0.2),
-    dangerSoftPressed: _chunk3QBT3Q65cjs.alpha.call(void 0, s.danger, 0.2),
-    backgroundSecondary: _chunk3QBT3Q65cjs.mix.call(void 0, s.background, s.foreground, 0.04),
-    backgroundTertiary: _chunk3QBT3Q65cjs.mix.call(void 0, s.background, s.foreground, 0.08),
+    defaultSoftPressed: _chunkIIAQISBGcjs.alpha.call(void 0, s.default, 0.6),
+    accentSoft: _chunkIIAQISBGcjs.alpha.call(void 0, s.accent, 0.15),
+    accentSoftForeground: _chunkIIAQISBGcjs.mix.call(void 0, s.accent, s.foreground, 0.2),
+    accentSoftPressed: _chunkIIAQISBGcjs.alpha.call(void 0, s.accent, 0.2),
+    successSoft: _chunkIIAQISBGcjs.alpha.call(void 0, s.success, 0.15),
+    successSoftForeground: _chunkIIAQISBGcjs.mix.call(void 0, s.success, s.foreground, 0.3),
+    successSoftPressed: _chunkIIAQISBGcjs.alpha.call(void 0, s.success, 0.2),
+    warningSoft: _chunkIIAQISBGcjs.alpha.call(void 0, s.warning, 0.15),
+    warningSoftForeground: _chunkIIAQISBGcjs.mix.call(void 0, s.warning, s.foreground, 0.35),
+    warningSoftPressed: _chunkIIAQISBGcjs.alpha.call(void 0, s.warning, 0.2),
+    dangerSoft: _chunkIIAQISBGcjs.alpha.call(void 0, s.danger, 0.15),
+    dangerSoftForeground: _chunkIIAQISBGcjs.mix.call(void 0, s.danger, s.foreground, 0.2),
+    dangerSoftPressed: _chunkIIAQISBGcjs.alpha.call(void 0, s.danger, 0.2),
+    backgroundSecondary: _chunkIIAQISBGcjs.mix.call(void 0, s.background, s.foreground, 0.04),
+    backgroundTertiary: _chunkIIAQISBGcjs.mix.call(void 0, s.background, s.foreground, 0.08),
     backgroundInverse: s.foreground,
-    borderSecondary: _chunk3QBT3Q65cjs.mix.call(void 0, s.surface, s.surfaceForeground, 0.22),
-    borderTertiary: _chunk3QBT3Q65cjs.mix.call(void 0, s.surface, s.surfaceForeground, 0.34),
-    separatorSecondary: _chunk3QBT3Q65cjs.mix.call(void 0, s.surface, s.surfaceForeground, 0.15),
-    separatorTertiary: _chunk3QBT3Q65cjs.mix.call(void 0, s.surface, s.surfaceForeground, 0.19),
-    fieldPressed: _chunk3QBT3Q65cjs.mix.call(void 0, s.fieldBackground, s.fieldForeground, 0.1),
+    borderSecondary: _chunkIIAQISBGcjs.mix.call(void 0, s.surface, s.surfaceForeground, 0.22),
+    borderTertiary: _chunkIIAQISBGcjs.mix.call(void 0, s.surface, s.surfaceForeground, 0.34),
+    separatorSecondary: _chunkIIAQISBGcjs.mix.call(void 0, s.surface, s.surfaceForeground, 0.15),
+    separatorTertiary: _chunkIIAQISBGcjs.mix.call(void 0, s.surface, s.surfaceForeground, 0.19),
+    fieldPressed: _chunkIIAQISBGcjs.mix.call(void 0, s.fieldBackground, s.fieldForeground, 0.1),
     fieldFocus: s.fieldBackground,
-    fieldBorderPressed: _chunk3QBT3Q65cjs.mix.call(void 0, s.fieldBorder, s.fieldForeground, 0.12),
-    fieldBorderFocus: _chunk3QBT3Q65cjs.mix.call(void 0, s.fieldBorder, s.fieldForeground, 0.26)
+    fieldBorderPressed: _chunkIIAQISBGcjs.mix.call(void 0, s.fieldBorder, s.fieldForeground, 0.12),
+    fieldBorderFocus: _chunkIIAQISBGcjs.mix.call(void 0, s.fieldBorder, s.fieldForeground, 0.26)
   };
 }
 
 // src/theme/scales.ts
+
 var SPACING_UNIT = 4;
 var RADIUS_BASE = 12;
 function buildRadius(base) {
@@ -75,7 +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: _reactnative.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)",
@@ -377,7 +379,7 @@ function resolveMode(mode, config, id) {
   };
 }
 function createTheme(config = {}) {
-  const id = stableHash(config);
+  const id = _chunkTK44VBIEcjs.stableHash.call(void 0, config);
   return {
     id,
     light: resolveMode("light", config, id),
@@ -391,11 +393,12 @@ var _jsxruntime = require('react/jsx-runtime');
 function XAUIProvider({
   children,
   theme = defaultTheme,
-  colorMode = "system"
+  colorMode = "system",
+  hasPortalHost = true
 }) {
   const scheme = _reactnative.useColorScheme.call(void 0, );
   const resolved = colorMode === "system" ? scheme === "dark" ? "dark" : "light" : colorMode;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3QBT3Q65cjs.ThemeContext.Provider, { value: theme[resolved], children });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkIIAQISBGcjs.ThemeContext.Provider, { value: theme[resolved], children: hasPortalHost ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWDDXU3OHcjs.PortalHost, { children }) : children });
 }
 
 // src/theme/palette.ts

package/dist/chunk-VLWZPYAO.js

@@ -0,0 +1,132 @@
+import {
+  arcPath
+} from "./chunk-CP23WMFJ.js";
+import {
+  useChartInk,
+  useOptionalChart
+} from "./chunk-6QFJKHSX.js";
+import {
+  createRecipe
+} from "./chunk-DKVXTMIJ.js";
+import {
+  useXAUITheme
+} from "./chunk-Z6JBWRPL.js";
+import {
+  useStyleProps
+} from "./chunk-M63GFNKV.js";
+
+// src/components/pie-chart/pie-chart.tsx
+import { useMemo } from "react";
+import { View } from "react-native";
+import { Path, Svg } from "react-native-svg";
+
+// src/components/pie-chart/pie-chart.recipe.ts
+var SLOTS = ["root", "center"];
+var DIAMETERS = { sm: 140, md: 200, lg: 260 };
+function sizeAxis(size) {
+  const diameter = DIAMETERS[size];
+  return () => ({
+    root: { width: diameter, height: diameter },
+    center: { width: diameter, height: diameter }
+  });
+}
+var pieChartRecipe = createRecipe({
+  slots: SLOTS,
+  base: () => ({
+    root: { alignSelf: "center" },
+    // Laid over the canvas rather than inside it: SVG text needs a font file loaded and
+    // ignores the platform's text size, and a total in the middle of a ring is a `Text`
+    // like any other. `pointerEvents` keeps it from eating a press meant for a slice.
+    center: {
+      position: "absolute",
+      top: 0,
+      alignItems: "center",
+      justifyContent: "center",
+      pointerEvents: "none"
+    }
+  }),
+  variants: {
+    size: { sm: sizeAxis("sm"), md: sizeAxis("md"), lg: sizeAxis("lg") }
+  },
+  states: {
+    disabled: (theme) => ({ root: { opacity: theme.opacity.disabled } })
+  },
+  defaultVariants: { size: "md" }
+});
+
+// src/components/pie-chart/pie-chart.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_INNER_RADIUS = 0.62;
+var DEFAULT_GAP = 1.5;
+var FULL_TURN = Math.PI * 2;
+function PieChart({
+  data,
+  labelKey,
+  valueKey,
+  variant,
+  size = "md",
+  color,
+  innerRadius = DEFAULT_INNER_RADIUS,
+  gap = DEFAULT_GAP,
+  children,
+  isDisabled = false,
+  style,
+  ...props
+}) {
+  const theme = useXAUITheme();
+  const [styleProps, rest] = useStyleProps(props);
+  const frame = useOptionalChart();
+  const { colors } = useChartInk({
+    variant: variant ?? frame?.variant,
+    size,
+    color: color ?? frame?.color,
+    isDisabled: isDisabled || (frame?.isDisabled ?? false),
+    count: data.length
+  });
+  const styles = pieChartRecipe.resolve({
+    theme,
+    selection: { size },
+    states: { disabled: isDisabled }
+  });
+  const diameter = DIAMETERS[size];
+  const slices = useMemo(() => {
+    const values = data.map((row) => {
+      const value = Number(row[valueKey]);
+      return Number.isFinite(value) && value > 0 ? value : 0;
+    });
+    const total = values.reduce((sum, value) => sum + value, 0);
+    if (total === 0) return [];
+    const radius = diameter / 2;
+    const inner = radius * Math.min(Math.max(innerRadius, 0), 0.95);
+    const half = Math.min(Math.max(gap, 0), 20) * Math.PI / 180 / 2;
+    let angle = 0;
+    return values.map((value, index) => {
+      const sweep = value / total * FULL_TURN;
+      const start = angle;
+      angle += sweep;
+      const inset = Math.min(half, sweep / 2 - 1e-4);
+      return {
+        key: String(data[index][labelKey] ?? index),
+        color: colors[index] ?? colors[0],
+        d: arcPath({
+          cx: radius,
+          cy: radius,
+          outerRadius: radius,
+          innerRadius: inner,
+          startAngle: start + inset,
+          endAngle: start + sweep - inset
+        })
+      };
+    });
+  }, [colors, data, diameter, gap, innerRadius, labelKey, valueKey]);
+  return /* @__PURE__ */ jsxs(View, { ...rest, style: [styles.root, styleProps, style], children: [
+    /* @__PURE__ */ jsx(Svg, { width: diameter, height: diameter, children: slices.map((slice) => /* @__PURE__ */ jsx(Path, { d: slice.d, fill: slice.color, fillRule: "evenodd" }, slice.key)) }),
+    children === void 0 ? null : /* @__PURE__ */ jsx(View, { style: styles.center, children })
+  ] });
+}
+PieChart.displayName = "XAUI.PieChart";
+
+export {
+  pieChartRecipe,
+  PieChart
+};