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

package/dist/{chunk-NUF3UUTE.js → chunk-U3C6VN4X.js}

@@ -3,10 +3,6 @@ import {
   useXAUITheme
 } from "./chunk-X2K2FX3W.js";
 
-// src/system/icon/icon.tsx
-import { cloneElement, isValidElement } from "react";
-import { Image } from "react-native";
-
 // src/system/icon/icon-context.ts
 import { createContext, useContext } from "react";
 var IconContext = createContext({});
@@ -16,6 +12,9 @@ function useIconContext() {
 }
 
 // src/system/icon/icon.tsx
+import { cloneElement, isValidElement } from "react";
+import { Image } from "react-native";
+import { jsx } from "react/jsx-runtime";
 function Icon({
   as: Component,
   children,
@@ -29,7 +28,7 @@ function Icon({
   const resolvedSize = size ?? inherited.size ?? theme.fontSizes.md;
   const resolvedColor = color ?? inherited.color ?? theme.colors.foreground;
   if (Component) {
-    return /* @__PURE__ */ React.createElement(Component, { size: resolvedSize, color: resolvedColor });
+    return /* @__PURE__ */ jsx(Component, { size: resolvedSize, color: resolvedColor });
   }
   if (isValidElement(children)) {
     return cloneElement(children, {
@@ -39,7 +38,7 @@ function Icon({
     });
   }
   if (source) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       Image,
       {
         source,
@@ -56,73 +55,36 @@ function Icon({
 }
 Icon.displayName = "XAUI.Icon";
 
-// src/system/portal/portal.tsx
-import { useContext as useContext2, useId, useLayoutEffect } from "react";
-
-// src/system/portal/portal-context.ts
-import { createContext as createContext2 } from "react";
-var PortalContext = createContext2(null);
-
-// src/system/portal/portal.tsx
-function Portal({ children }) {
-  const context = useContext2(PortalContext);
-  const key = useId();
-  useLayoutEffect(() => {
-    context?.addPortal(key, children);
-  }, [children, context, key]);
-  useLayoutEffect(() => {
-    return () => context?.removePortal(key);
-  }, [context, key]);
-  return null;
+// src/system/slot/children-to-string.ts
+import { isValidElement as isValidElement2 } from "react";
+function childrenToString(children) {
+  const text = stringify(children);
+  return text === null || text === "" ? null : text;
 }
-Portal.displayName = "XAUI.Portal";
-
-// src/system/portal/portal-host.tsx
-import { Fragment, useCallback, useMemo, useState } from "react";
-import { StyleSheet, View } from "react-native";
-var styles = StyleSheet.create({
-  container: { flex: 1 }
-});
-function PortalHost({ children }) {
-  const [portals, setPortals] = useState(/* @__PURE__ */ new Map());
-  const addPortal = useCallback((key, element) => {
-    setPortals((current) => new Map(current).set(key, element));
-  }, []);
-  const removePortal = useCallback((key) => {
-    setPortals((current) => {
-      if (!current.has(key)) return current;
-      const next = new Map(current);
-      next.delete(key);
-      return next;
-    });
-  }, []);
-  const methods = useMemo(
-    () => ({ addPortal, removePortal }),
-    [addPortal, removePortal]
-  );
-  return /* @__PURE__ */ React.createElement(PortalContext.Provider, { value: methods }, /* @__PURE__ */ React.createElement(View, { style: styles.container }, children, Array.from(portals, ([key, element]) => /* @__PURE__ */ React.createElement(Fragment, { key }, element))));
+function stringify(node) {
+  if (node === null || node === void 0 || typeof node === "boolean") return "";
+  if (typeof node === "string") return node;
+  if (typeof node === "number") return String(node);
+  if (isValidElement2(node)) return null;
+  if (Array.isArray(node)) {
+    let text = "";
+    for (const child of node) {
+      const part = stringify(child);
+      if (part === null) return null;
+      text += part;
+    }
+    return text;
+  }
+  return null;
 }
-PortalHost.displayName = "XAUI.PortalHost";
-
-// src/system/pressable-feedback/pressable-feedback.tsx
-import { forwardRef as forwardRef2, useContext as useContext4, useEffect as useEffect2, useMemo as useMemo2 } from "react";
-import { Pressable } from "react-native";
-import Animated3, {
-  useAnimatedStyle as useAnimatedStyle3,
-  useSharedValue as useSharedValue3,
-  withTiming as withTiming3
-} from "react-native-reanimated";
-
-// src/system/pressable-feedback/pressable-feedback-context.ts
-import { createContext as createContext4 } from "react";
 
 // src/system/slot/create-slot-context.ts
-import { createContext as createContext3, useContext as useContext3 } from "react";
+import { createContext as createContext2, useContext as useContext2 } from "react";
 function createSlotContext(name) {
-  const Context = createContext3(null);
+  const Context = createContext2(null);
   Context.displayName = `XAUI.${name}.Context`;
   function useSlotContext() {
-    const value = useContext3(Context);
+    const value = useContext2(Context);
     if (value === null) {
       const error = new Error(
         `XAUI: use${name} must be called inside <${name}>. A slot reads the values its root resolved, so it can only be rendered as a child of one.`
@@ -138,18 +100,84 @@ function createSlotContext(name) {
   return [Context.Provider, useSlotContext];
 }
 
+// src/system/slot/merge-refs.ts
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(value);
+      else if (ref) ref.current = value;
+    }
+  };
+}
+
+// src/system/slot/merge-props.ts
+var EVENT_HANDLER = /^on[A-Z]/;
+function mergeProps(ours, theirs) {
+  const merged = { ...ours };
+  for (const key of Object.keys(theirs)) {
+    const ourValue = ours[key];
+    const theirValue = theirs[key];
+    if (EVENT_HANDLER.test(key)) {
+      merged[key] = composeHandlers(ourValue, theirValue);
+    } else if (key === "style") {
+      merged[key] = mergeStyles(ourValue, theirValue);
+    } else if (key === "ref") {
+      merged[key] = mergeRefs(
+        ourValue,
+        theirValue
+      );
+    } else {
+      merged[key] = theirValue;
+    }
+  }
+  return merged;
+}
+function composeHandlers(ours, theirs) {
+  if (typeof ours !== "function") return theirs;
+  if (typeof theirs !== "function") return ours;
+  return (...args) => {
+    ;
+    ours(...args);
+    return theirs(...args);
+  };
+}
+function mergeStyles(ours, theirs) {
+  if (typeof ours === "function" || typeof theirs === "function") {
+    return (state) => [
+      resolveStyle(ours, state),
+      resolveStyle(theirs, state)
+    ];
+  }
+  return [ours, theirs];
+}
+function resolveStyle(style, state) {
+  return typeof style === "function" ? style(state) : style;
+}
+
+// src/system/slot/slot.tsx
+import { cloneElement as cloneElement2, forwardRef, isValidElement as isValidElement3 } from "react";
+var Slot = forwardRef(function Slot2({ children, ...ours }, ref) {
+  if (!isValidElement3(children)) {
+    throw new Error(
+      "XAUI: asChild expects exactly one React element as its child, and merges the component's props into it. Text, a fragment, several children or none give it nothing to merge into \u2014 drop `asChild` to render the component itself."
+    );
+  }
+  const child = children;
+  const merged = mergeProps(ours, child.props);
+  merged.ref = mergeRefs(ref, refOf(child));
+  return cloneElement2(child, merged);
+});
+Slot.displayName = "XAUI.Slot";
+function refOf(element) {
+  const fromProps = element.props.ref;
+  const fromElement = element.ref;
+  return fromProps ?? fromElement;
+}
+
 // src/system/pressable-feedback/pressable-feedback-context.ts
+import { createContext as createContext3 } from "react";
 var [FeedbackProvider, useFeedback] = createSlotContext("PressableFeedback");
-var DisableAllContext = createContext4(false);
-
-// src/system/pressable-feedback/pressable-feedback-highlight.tsx
-import { useEffect } from "react";
-import { StyleSheet as StyleSheet2, View as View2 } from "react-native";
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming
-} from "react-native-reanimated";
+var DisableAllContext = createContext3(false);
 
 // src/system/pressable-feedback/pressable-feedback.animation.ts
 var PRESS_SCALE = 0.975;
@@ -206,7 +234,24 @@ function resolveSlotAnimation(override, enabledByRoot, defaultOpacity, defaultDu
   };
 }
 
+// src/system/pressable-feedback/pressable-feedback.tsx
+import { forwardRef as forwardRef2, useContext as useContext3, useEffect as useEffect2, useMemo } from "react";
+import { Pressable } from "react-native";
+import Animated3, {
+  useAnimatedStyle as useAnimatedStyle3,
+  useSharedValue as useSharedValue3,
+  withTiming as withTiming3
+} from "react-native-reanimated";
+
 // src/system/pressable-feedback/pressable-feedback-highlight.tsx
+import { useEffect } from "react";
+import { StyleSheet, View } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming
+} from "react-native-reanimated";
+import { jsx as jsx2 } from "react/jsx-runtime";
 function PressableFeedbackHighlight({
   style,
   animation: override
@@ -219,20 +264,20 @@ function PressableFeedbackHighlight({
     HIGHLIGHT_OPACITY
   );
   const base = [
-    StyleSheet2.absoluteFillObject,
+    StyleSheet.absoluteFillObject,
     { backgroundColor: theme.colors.foreground },
     style
   ];
   if (!progress || !settings.enabled) {
-    return /* @__PURE__ */ React.createElement(
-      View2,
+    return /* @__PURE__ */ jsx2(
+      View,
       {
         pointerEvents: "none",
         style: [base, { opacity: isPressed ? settings.opacity : 0 }]
       }
     );
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx2(
     AnimatedHighlight,
     {
       base,
@@ -252,10 +297,11 @@ function AnimatedHighlight({
   useEffect(() => {
     shown.value = withTiming(isPressed ? 1 : 0, { duration });
   }, [isPressed, shown, duration]);
-  const animatedStyle = useAnimatedStyle(() => ({
-    opacity: shown.value * opacity
-  }));
-  return /* @__PURE__ */ React.createElement(Animated.View, { pointerEvents: "none", style: [base, animatedStyle] });
+  const animatedStyle = useAnimatedStyle(
+    () => ({ opacity: shown.value * opacity }),
+    [shown, opacity]
+  );
+  return /* @__PURE__ */ jsx2(Animated.View, { pointerEvents: "none", style: [base, animatedStyle] });
 }
 
 // src/system/pressable-feedback/pressable-feedback-ripple.tsx
@@ -266,6 +312,7 @@ import Animated2, {
   useSharedValue as useSharedValue2,
   withTiming as withTiming2
 } from "react-native-reanimated";
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
 function PressableFeedbackRipple({
   style,
   animation: override
@@ -279,7 +326,7 @@ function PressableFeedbackRipple({
     RIPPLE_DURATION
   );
   if (!progress || !pressCount || !origin || !size || !settings.enabled) return null;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx3(
     AnimatedRipple,
     {
       color: theme.colors.foreground,
@@ -312,29 +359,33 @@ function AnimatedRipple({
       wave.value = 0;
       wave.value = withTiming2(2, { duration: duration * 2 });
       useA.value = !useA.value;
-    }
+    },
+    [pressCount, origin, duration, waveA, waveB, fromA, fromB, useA]
   );
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    RippleWave,
-    {
-      wave: waveA,
-      from: fromA,
-      size,
-      color,
-      opacity,
-      style
-    }
-  ), /* @__PURE__ */ React.createElement(
-    RippleWave,
-    {
-      wave: waveB,
-      from: fromB,
-      size,
-      color,
-      opacity,
-      style
-    }
-  ));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx3(
+      RippleWave,
+      {
+        wave: waveA,
+        from: fromA,
+        size,
+        color,
+        opacity,
+        style
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      RippleWave,
+      {
+        wave: waveB,
+        from: fromB,
+        size,
+        color,
+        opacity,
+        style
+      }
+    )
+  ] });
 }
 function RippleWave({
   wave,
@@ -361,8 +412,8 @@ function RippleWave({
         { scale: interpolate(wave.value, [0, 1, 2], [0, 1, 1]) }
       ]
     };
-  });
-  return /* @__PURE__ */ React.createElement(
+  }, [wave, from, size, opacity]);
+  return /* @__PURE__ */ jsx3(
     Animated2.View,
     {
       pointerEvents: "none",
@@ -375,91 +426,16 @@ function RippleWave({
   );
 }
 
-// src/system/slot/slot.tsx
-import { cloneElement as cloneElement2, forwardRef, isValidElement as isValidElement2 } from "react";
-
-// src/system/slot/merge-refs.ts
-function mergeRefs(...refs) {
-  return (value) => {
-    for (const ref of refs) {
-      if (typeof ref === "function") ref(value);
-      else if (ref) ref.current = value;
-    }
-  };
-}
-
-// src/system/slot/merge-props.ts
-var EVENT_HANDLER = /^on[A-Z]/;
-function mergeProps(ours, theirs) {
-  const merged = { ...ours };
-  for (const key of Object.keys(theirs)) {
-    const ourValue = ours[key];
-    const theirValue = theirs[key];
-    if (EVENT_HANDLER.test(key)) {
-      merged[key] = composeHandlers(ourValue, theirValue);
-    } else if (key === "style") {
-      merged[key] = mergeStyles(ourValue, theirValue);
-    } else if (key === "ref") {
-      merged[key] = mergeRefs(
-        ourValue,
-        theirValue
-      );
-    } else {
-      merged[key] = theirValue;
-    }
-  }
-  return merged;
-}
-function composeHandlers(ours, theirs) {
-  if (typeof ours !== "function") return theirs;
-  if (typeof theirs !== "function") return ours;
-  return (...args) => {
-    ;
-    ours(...args);
-    return theirs(...args);
-  };
-}
-function mergeStyles(ours, theirs) {
-  if (typeof ours === "function" || typeof theirs === "function") {
-    return (state) => [
-      resolveStyle(ours, state),
-      resolveStyle(theirs, state)
-    ];
-  }
-  return [ours, theirs];
-}
-function resolveStyle(style, state) {
-  return typeof style === "function" ? style(state) : style;
-}
-
-// src/system/slot/slot.tsx
-var Slot = forwardRef(function Slot2({ children, ...ours }, ref) {
-  if (!isValidElement2(children)) {
-    throw new Error(
-      "XAUI: asChild expects exactly one React element as its child, and merges the component's props into it. Text, a fragment, several children or none give it nothing to merge into \u2014 drop `asChild` to render the component itself."
-    );
-  }
-  const child = children;
-  const merged = mergeProps(ours, child.props);
-  merged.ref = mergeRefs(ref, refOf(child));
-  return cloneElement2(child, merged);
-});
-Slot.displayName = "XAUI.Slot";
-function refOf(element) {
-  const fromProps = element.props.ref;
-  const fromElement = element.ref;
-  return fromProps ?? fromElement;
-}
-
 // src/system/pressable-feedback/pressable-feedback.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var AnimatedPressable = Animated3.createAnimatedComponent(Pressable);
 var AnimatedSlot = Animated3.createAnimatedComponent(Slot);
 var PressableFeedback = forwardRef2(
   function PressableFeedback2({ animation, feedbackVariant = "scale-highlight", ...rest }, ref) {
-    const inheritedDisableAll = useContext4(DisableAllContext);
+    const inheritedDisableAll = useContext3(DisableAllContext);
     const resolved = resolveAnimation(animation, inheritedDisableAll);
     const Feedback = resolved.none || feedbackVariant === "none" ? StaticFeedback : AnimatedFeedback;
-    const body2 = /* @__PURE__ */ React.createElement(
+    const body2 = /* @__PURE__ */ jsx4(
       Feedback,
       {
         ref,
@@ -468,7 +444,7 @@ var PressableFeedback = forwardRef2(
         ...rest
       }
     );
-    return resolved.disableAll ? /* @__PURE__ */ React.createElement(DisableAllContext.Provider, { value: true }, body2) : body2;
+    return resolved.disableAll ? /* @__PURE__ */ jsx4(DisableAllContext.Provider, { value: true, children: body2 }) : body2;
   }
 );
 var StaticFeedback = forwardRef2(function StaticFeedback2({
@@ -481,9 +457,9 @@ var StaticFeedback = forwardRef2(function StaticFeedback2({
   style,
   ...rest
 }, ref) {
-  const context = useMemo2(() => ({ isPressed, animation }), [isPressed, animation]);
+  const context = useMemo(() => ({ isPressed, animation }), [isPressed, animation]);
   const Root = asChild ? Slot : Pressable;
-  return /* @__PURE__ */ React.createElement(FeedbackProvider, { value: context }, /* @__PURE__ */ React.createElement(Root, { ref, style, disabled: isDisabled, ...rest }, body(asChild, feedbackVariant, children)));
+  return /* @__PURE__ */ jsx4(FeedbackProvider, { value: context, children: /* @__PURE__ */ jsx4(Root, { ref, style, disabled: isDisabled, ...rest, children: body(asChild, feedbackVariant, children) }) });
 });
 var AnimatedFeedback = forwardRef2(function AnimatedFeedback2({
   isPressed = false,
@@ -507,9 +483,10 @@ var AnimatedFeedback = forwardRef2(function AnimatedFeedback2({
     });
   }, [isPressed, progress]);
   const animatedStyle = useAnimatedStyle3(
-    () => animation.scale ? { transform: [{ scale: 1 - (1 - PRESS_SCALE) * progress.value }] } : {}
+    () => animation.scale ? { transform: [{ scale: 1 - (1 - PRESS_SCALE) * progress.value }] } : {},
+    [animation.scale, progress]
   );
-  const context = useMemo2(
+  const context = useMemo(
     () => ({ isPressed, animation, progress, pressCount, origin, size }),
     [isPressed, animation, progress, pressCount, origin, size]
   );
@@ -526,7 +503,7 @@ var AnimatedFeedback = forwardRef2(function AnimatedFeedback2({
   };
   const clip = feedbackVariant === "scale-ripple" ? { overflow: "hidden" } : null;
   const Root = asChild ? AnimatedSlot : AnimatedPressable;
-  return /* @__PURE__ */ React.createElement(FeedbackProvider, { value: context }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx4(FeedbackProvider, { value: context, children: /* @__PURE__ */ jsx4(
     Root,
     {
       ref,
@@ -534,18 +511,21 @@ var AnimatedFeedback = forwardRef2(function AnimatedFeedback2({
       disabled: isDisabled,
       onPressIn: handlePressIn,
       onLayout: handleLayout,
-      ...rest
-    },
-    body(asChild, feedbackVariant, children)
-  ));
+      ...rest,
+      children: body(asChild, feedbackVariant, children)
+    }
+  ) });
 });
 function body(asChild, variant, children) {
   if (asChild) return children;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DefaultOverlay, { variant }), children);
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx4(DefaultOverlay, { variant }),
+    children
+  ] });
 }
 function DefaultOverlay({ variant }) {
-  if (variant === "scale-highlight") return /* @__PURE__ */ React.createElement(PressableFeedbackHighlight, null);
-  if (variant === "scale-ripple") return /* @__PURE__ */ React.createElement(PressableFeedbackRipple, null);
+  if (variant === "scale-highlight") return /* @__PURE__ */ jsx4(PressableFeedbackHighlight, {});
+  if (variant === "scale-ripple") return /* @__PURE__ */ jsx4(PressableFeedbackRipple, {});
   return null;
 }
 
@@ -579,7 +559,7 @@ function resolveTint(tokens, color, theme) {
 }
 
 // src/system/recipe/style-cache.ts
-import { StyleSheet as StyleSheet3 } from "react-native";
+import { StyleSheet as StyleSheet2 } from "react-native";
 
 // src/system/recipe/variant-map.ts
 var STATE_ORDER = ["focused", "pressed", "disabled"];
@@ -642,7 +622,7 @@ function createStyleCache(slots) {
       const built = build();
       const complete = {};
       for (const slot of slots) complete[slot] = built[slot] ?? {};
-      const created = StyleSheet3.create(complete);
+      const created = StyleSheet2.create(complete);
       entries.set(key, created);
       return created;
     },
@@ -698,38 +678,15 @@ function apply(fns, theme, colors) {
   return merged;
 }
 
-// src/system/slot/children-to-string.ts
-import { isValidElement as isValidElement3 } from "react";
-function childrenToString(children) {
-  const text = stringify(children);
-  return text === null || text === "" ? null : text;
-}
-function stringify(node) {
-  if (node === null || node === void 0 || typeof node === "boolean") return "";
-  if (typeof node === "string") return node;
-  if (typeof node === "number") return String(node);
-  if (isValidElement3(node)) return null;
-  if (Array.isArray(node)) {
-    let text = "";
-    for (const child of node) {
-      const part = stringify(child);
-      if (part === null) return null;
-      text += part;
-    }
-    return text;
-  }
-  return null;
-}
-
 export {
-  mergeRefs,
   IconContext,
   useIconContext,
   Icon,
-  PortalContext,
-  Portal,
-  PortalHost,
+  childrenToString,
   createSlotContext,
+  mergeRefs,
+  mergeProps,
+  Slot,
   useFeedback,
   PRESS_SCALE,
   PRESS_DURATION,
@@ -740,9 +697,6 @@ export {
   RIPPLE_COVERAGE,
   resolveAnimation,
   resolveSlotAnimation,
-  mergeProps,
-  Slot,
   PressableFeedback3 as PressableFeedback,
-  createRecipe,
-  childrenToString
+  createRecipe
 };