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

package/dist/{chunk-QAMNNTGM.js → chunk-ECDWSSHJ.js}

@@ -3,8 +3,56 @@ import {
   useXAUITheme
 } from "./chunk-X2K2FX3W.js";
 
+// src/system/portal/portal.tsx
+import { useContext, useId, useLayoutEffect } from "react";
+
+// src/system/portal/portal-context.ts
+import { createContext } from "react";
+var PortalContext = createContext(null);
+
+// src/system/portal/portal.tsx
+function Portal({ children }) {
+  const context = useContext(PortalContext);
+  const key = useId();
+  useLayoutEffect(() => {
+    context?.addPortal(key, children);
+  }, [children, context, key]);
+  useLayoutEffect(() => {
+    return () => context?.removePortal(key);
+  }, [context, key]);
+  return null;
+}
+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))));
+}
+PortalHost.displayName = "XAUI.PortalHost";
+
 // src/system/pressable-feedback/pressable-feedback.tsx
-import { forwardRef as forwardRef2, useContext as useContext2, useEffect as useEffect2, useMemo } from "react";
+import { forwardRef as forwardRef2, useContext as useContext3, useEffect as useEffect2, useMemo as useMemo2 } from "react";
 import { Pressable } from "react-native";
 import Animated3, {
   useAnimatedStyle as useAnimatedStyle3,
@@ -13,15 +61,15 @@ import Animated3, {
 } from "react-native-reanimated";
 
 // src/system/pressable-feedback/pressable-feedback-context.ts
-import { createContext as createContext2 } from "react";
+import { createContext as createContext3 } from "react";
 
 // src/system/slot/create-slot-context.ts
-import { createContext, useContext } from "react";
+import { createContext as createContext2, useContext as useContext2 } from "react";
 function createSlotContext(name) {
-  const Context = createContext(null);
+  const Context = createContext2(null);
   Context.displayName = `XAUI.${name}.Context`;
   function useSlotContext() {
-    const value = useContext(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.`
@@ -39,11 +87,11 @@ function createSlotContext(name) {
 
 // src/system/pressable-feedback/pressable-feedback-context.ts
 var [FeedbackProvider, useFeedback] = createSlotContext("PressableFeedback");
-var DisableAllContext = createContext2(false);
+var DisableAllContext = createContext3(false);
 
 // src/system/pressable-feedback/pressable-feedback-highlight.tsx
 import { useEffect } from "react";
-import { StyleSheet, View } from "react-native";
+import { StyleSheet as StyleSheet2, View as View2 } from "react-native";
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
@@ -118,13 +166,13 @@ function PressableFeedbackHighlight({
     HIGHLIGHT_OPACITY
   );
   const base = [
-    StyleSheet.absoluteFillObject,
+    StyleSheet2.absoluteFillObject,
     { backgroundColor: theme.colors.foreground },
     style
   ];
   if (!progress || !settings.enabled) {
     return /* @__PURE__ */ React.createElement(
-      View,
+      View2,
       {
         pointerEvents: "none",
         style: [base, { opacity: isPressed ? settings.opacity : 0 }]
@@ -355,7 +403,7 @@ var AnimatedPressable = Animated3.createAnimatedComponent(Pressable);
 var AnimatedSlot = Animated3.createAnimatedComponent(Slot);
 var PressableFeedback = forwardRef2(
   function PressableFeedback2({ animation, feedbackVariant = "scale-highlight", ...rest }, ref) {
-    const inheritedDisableAll = useContext2(DisableAllContext);
+    const inheritedDisableAll = useContext3(DisableAllContext);
     const resolved = resolveAnimation(animation, inheritedDisableAll);
     const Feedback = resolved.none || feedbackVariant === "none" ? StaticFeedback : AnimatedFeedback;
     const body = /* @__PURE__ */ React.createElement(
@@ -380,7 +428,7 @@ var StaticFeedback = forwardRef2(function StaticFeedback2({
   style,
   ...rest
 }, ref) {
-  const context = useMemo(() => ({ isPressed, animation }), [isPressed, animation]);
+  const context = useMemo2(() => ({ isPressed, animation }), [isPressed, animation]);
   const Root = asChild ? Slot : Pressable;
   return /* @__PURE__ */ React.createElement(Root, { ref, style, disabled: isDisabled, ...rest }, /* @__PURE__ */ React.createElement(FeedbackProvider, { value: context }, /* @__PURE__ */ React.createElement(DefaultOverlay, { variant: feedbackVariant }), children));
 });
@@ -408,7 +456,7 @@ var AnimatedFeedback = forwardRef2(function AnimatedFeedback2({
   const animatedStyle = useAnimatedStyle3(
     () => animation.scale ? { transform: [{ scale: 1 - (1 - PRESS_SCALE) * progress.value }] } : {}
   );
-  const context = useMemo(
+  const context = useMemo2(
     () => ({ isPressed, animation, progress, pressCount, origin, size }),
     [isPressed, animation, progress, pressCount, origin, size]
   );
@@ -474,7 +522,7 @@ function resolveTint(tokens, color, theme) {
 }
 
 // src/system/recipe/style-cache.ts
-import { StyleSheet as StyleSheet2 } from "react-native";
+import { StyleSheet as StyleSheet3 } from "react-native";
 
 // src/system/recipe/variant-map.ts
 var STATE_ORDER = ["focused", "pressed", "disabled"];
@@ -537,7 +585,7 @@ function createStyleCache(slots) {
       const built = build();
       const complete = {};
       for (const slot of slots) complete[slot] = built[slot] ?? {};
-      const created = StyleSheet2.create(complete);
+      const created = StyleSheet3.create(complete);
       entries.set(key, created);
       return created;
     },
@@ -617,6 +665,9 @@ function stringify(node) {
 }
 
 export {
+  PortalContext,
+  Portal,
+  PortalHost,
   createSlotContext,
   useFeedback,
   PRESS_SCALE,

package/dist/{chunk-V63JO65F.cjs → chunk-IYFGO523.cjs}

@@ -3,9 +3,57 @@
 
 var _chunk3QBT3Q65cjs = require('./chunk-3QBT3Q65.cjs');
 
-// src/system/pressable-feedback/pressable-feedback.tsx
+// src/system/portal/portal.tsx
 var _react = require('react');
+
+// src/system/portal/portal-context.ts
+
+var PortalContext = _react.createContext.call(void 0, null);
+
+// src/system/portal/portal.tsx
+function Portal({ children }) {
+  const context = _react.useContext.call(void 0, PortalContext);
+  const key = _react.useId.call(void 0, );
+  _react.useLayoutEffect.call(void 0, () => {
+    _optionalChain([context, 'optionalAccess', _ => _.addPortal, 'call', _2 => _2(key, children)]);
+  }, [children, context, key]);
+  _react.useLayoutEffect.call(void 0, () => {
+    return () => _optionalChain([context, 'optionalAccess', _3 => _3.removePortal, 'call', _4 => _4(key)]);
+  }, [context, key]);
+  return null;
+}
+Portal.displayName = "XAUI.Portal";
+
+// src/system/portal/portal-host.tsx
+
 var _reactnative = require('react-native');
+var styles = _reactnative.StyleSheet.create({
+  container: { flex: 1 }
+});
+function PortalHost({ children }) {
+  const [portals, setPortals] = _react.useState.call(void 0, /* @__PURE__ */ new Map());
+  const addPortal = _react.useCallback.call(void 0, (key, element) => {
+    setPortals((current) => new Map(current).set(key, element));
+  }, []);
+  const removePortal = _react.useCallback.call(void 0, (key) => {
+    setPortals((current) => {
+      if (!current.has(key)) return current;
+      const next = new Map(current);
+      next.delete(key);
+      return next;
+    });
+  }, []);
+  const methods = _react.useMemo.call(void 0, 
+    () => ({ addPortal, removePortal }),
+    [addPortal, removePortal]
+  );
+  return /* @__PURE__ */ React.createElement(PortalContext.Provider, { value: methods }, /* @__PURE__ */ React.createElement(_reactnative.View, { style: styles.container }, children, Array.from(portals, ([key, element]) => /* @__PURE__ */ React.createElement(_react.Fragment, { key }, element))));
+}
+PortalHost.displayName = "XAUI.PortalHost";
+
+// src/system/pressable-feedback/pressable-feedback.tsx
+
+
 
 
 
@@ -26,7 +74,7 @@ function createSlotContext(name) {
       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.`
       );
-      _optionalChain([Error, 'access', _ => _.captureStackTrace, 'optionalCall', _2 => _2(
+      _optionalChain([Error, 'access', _5 => _5.captureStackTrace, 'optionalCall', _6 => _6(
         error,
         useSlotContext
       )]);
@@ -202,12 +250,12 @@ function AnimatedRipple({
   const fromB = _reactnativereanimated.useSharedValue.call(void 0, { x: 0, y: 0 });
   const useA = _reactnativereanimated.useSharedValue.call(void 0, true);
   _reactnativereanimated.useAnimatedReaction.call(void 0, 
-    () => _nullishCoalesce(_optionalChain([pressCount, 'optionalAccess', _3 => _3.value]), () => ( 0)),
+    () => _nullishCoalesce(_optionalChain([pressCount, 'optionalAccess', _7 => _7.value]), () => ( 0)),
     (count, previous) => {
       if (previous === null || count === previous) return;
       const wave = useA.value ? waveA : waveB;
       const from = useA.value ? fromA : fromB;
-      from.value = _nullishCoalesce(_optionalChain([origin, 'optionalAccess', _4 => _4.value]), () => ( { x: 0, y: 0 }));
+      from.value = _nullishCoalesce(_optionalChain([origin, 'optionalAccess', _8 => _8.value]), () => ( { x: 0, y: 0 }));
       wave.value = 0;
       wave.value = _reactnativereanimated.withTiming.call(void 0, 2, { duration: duration * 2 });
       useA.value = !useA.value;
@@ -244,7 +292,7 @@ function RippleWave({
   style
 }) {
   const animatedStyle = _reactnativereanimated.useAnimatedStyle.call(void 0, () => {
-    const within = _nullishCoalesce(_optionalChain([size, 'optionalAccess', _5 => _5.value]), () => ( { width: 0, height: 0 }));
+    const within = _nullishCoalesce(_optionalChain([size, 'optionalAccess', _9 => _9.value]), () => ( { width: 0, height: 0 }));
     const radius = Math.sqrt(within.width * within.width + within.height * within.height) * RIPPLE_COVERAGE;
     const at = from.value;
     return {
@@ -416,12 +464,12 @@ var AnimatedFeedback = _react.forwardRef.call(void 0, function AnimatedFeedback2
     const { locationX, locationY } = event.nativeEvent;
     origin.value = { x: locationX, y: locationY };
     pressCount.value += 1;
-    _optionalChain([onPressIn, 'optionalCall', _6 => _6(event)]);
+    _optionalChain([onPressIn, 'optionalCall', _10 => _10(event)]);
   };
   const handleLayout = (event) => {
     const { width, height } = event.nativeEvent.layout;
     size.value = { width, height };
-    _optionalChain([onLayout, 'optionalCall', _7 => _7(event)]);
+    _optionalChain([onLayout, 'optionalCall', _11 => _11(event)]);
   };
   const clip = feedbackVariant === "scale-ripple" ? { overflow: "hidden" } : null;
   const Root = asChild ? AnimatedSlot : AnimatedPressable;
@@ -501,7 +549,7 @@ function resolveVariantColors(tokens, theme) {
 function activeStateFns(states, active) {
   const fns = [];
   for (const state of STATE_ORDER) {
-    const fn = active[state] ? _optionalChain([states, 'optionalAccess', _8 => _8[state]]) : void 0;
+    const fn = active[state] ? _optionalChain([states, 'optionalAccess', _12 => _12[state]]) : void 0;
     if (fn) fns.push(fn);
   }
   return fns;
@@ -558,7 +606,7 @@ function cacheKey(theme, selection, states) {
 // src/system/recipe/create-recipe.ts
 function createRecipe(config) {
   const cache = createStyleCache(config.slots);
-  const tokensFor = (variant) => variant === void 0 ? void 0 : _optionalChain([config, 'access', _9 => _9.variantTokens, 'optionalAccess', _10 => _10[variant]]);
+  const tokensFor = (variant) => variant === void 0 ? void 0 : _optionalChain([config, 'access', _13 => _13.variantTokens, 'optionalAccess', _14 => _14[variant]]);
   return {
     slots: config.slots,
     resolve({ theme, selection, states = {} }) {
@@ -634,4 +682,7 @@ function stringify(node) {
 
 
 
-exports.createSlotContext = createSlotContext; exports.useFeedback = useFeedback; exports.PRESS_SCALE = PRESS_SCALE; exports.PRESS_DURATION = PRESS_DURATION; exports.RELEASE_DURATION = RELEASE_DURATION; exports.HIGHLIGHT_OPACITY = HIGHLIGHT_OPACITY; exports.RIPPLE_OPACITY = RIPPLE_OPACITY; exports.RIPPLE_DURATION = RIPPLE_DURATION; exports.RIPPLE_COVERAGE = RIPPLE_COVERAGE; exports.resolveAnimation = resolveAnimation; exports.resolveSlotAnimation = resolveSlotAnimation; exports.mergeRefs = mergeRefs; exports.mergeProps = mergeProps; exports.Slot = Slot; exports.PressableFeedback = PressableFeedback3; exports.createRecipe = createRecipe; exports.childrenToString = childrenToString;
+
+
+
+exports.PortalContext = PortalContext; exports.Portal = Portal; exports.PortalHost = PortalHost; exports.createSlotContext = createSlotContext; exports.useFeedback = useFeedback; exports.PRESS_SCALE = PRESS_SCALE; exports.PRESS_DURATION = PRESS_DURATION; exports.RELEASE_DURATION = RELEASE_DURATION; exports.HIGHLIGHT_OPACITY = HIGHLIGHT_OPACITY; exports.RIPPLE_OPACITY = RIPPLE_OPACITY; exports.RIPPLE_DURATION = RIPPLE_DURATION; exports.RIPPLE_COVERAGE = RIPPLE_COVERAGE; exports.resolveAnimation = resolveAnimation; exports.resolveSlotAnimation = resolveSlotAnimation; exports.mergeRefs = mergeRefs; exports.mergeProps = mergeProps; exports.Slot = Slot; exports.PressableFeedback = PressableFeedback3; exports.createRecipe = createRecipe; exports.childrenToString = childrenToString;

package/dist/index.cjs

@@ -16,7 +16,10 @@
 
 
 
-var _chunkV63JO65Fcjs = require('./chunk-V63JO65F.cjs');
+
+
+
+var _chunkIYFGO523cjs = require('./chunk-IYFGO523.cjs');
 
 
 
@@ -69,4 +72,7 @@ var _chunk3QBT3Q65cjs = require('./chunk-3QBT3Q65.cjs');
 
 
 
-exports.HIGHLIGHT_OPACITY = _chunkV63JO65Fcjs.HIGHLIGHT_OPACITY; exports.PRESS_DURATION = _chunkV63JO65Fcjs.PRESS_DURATION; exports.PRESS_SCALE = _chunkV63JO65Fcjs.PRESS_SCALE; exports.PressableFeedback = _chunkV63JO65Fcjs.PressableFeedback; exports.RELEASE_DURATION = _chunkV63JO65Fcjs.RELEASE_DURATION; exports.RIPPLE_COVERAGE = _chunkV63JO65Fcjs.RIPPLE_COVERAGE; exports.RIPPLE_DURATION = _chunkV63JO65Fcjs.RIPPLE_DURATION; exports.RIPPLE_OPACITY = _chunkV63JO65Fcjs.RIPPLE_OPACITY; exports.Slot = _chunkV63JO65Fcjs.Slot; exports.ThemeContext = _chunk3QBT3Q65cjs.ThemeContext; exports.XAUIProvider = _chunkAW63PTQ4cjs.XAUIProvider; exports.buildRadius = _chunkAW63PTQ4cjs.buildRadius; exports.buildShadows = _chunkAW63PTQ4cjs.buildShadows; exports.childrenToString = _chunkV63JO65Fcjs.childrenToString; exports.createRecipe = _chunkV63JO65Fcjs.createRecipe; exports.createSlotContext = _chunkV63JO65Fcjs.createSlotContext; exports.createTheme = _chunkAW63PTQ4cjs.createTheme; exports.defaultTheme = _chunkAW63PTQ4cjs.defaultTheme; exports.deriveColors = _chunkAW63PTQ4cjs.deriveColors; exports.deriveTint = _chunk3QBT3Q65cjs.deriveTint; exports.mergeProps = _chunkV63JO65Fcjs.mergeProps; exports.mergeRefs = _chunkV63JO65Fcjs.mergeRefs; exports.palette = _chunkAW63PTQ4cjs.palette; exports.primitives = _chunkAW63PTQ4cjs.primitives; exports.resolveAnimation = _chunkV63JO65Fcjs.resolveAnimation; exports.resolveSlotAnimation = _chunkV63JO65Fcjs.resolveSlotAnimation; exports.sourceKeys = _chunkAW63PTQ4cjs.sourceKeys; exports.tokens = _chunkAW63PTQ4cjs.tokens; exports.useColorMode = _chunk3QBT3Q65cjs.useColorMode; exports.useFeedback = _chunkV63JO65Fcjs.useFeedback; exports.useThemeColor = _chunk3QBT3Q65cjs.useThemeColor; exports.useXAUITheme = _chunk3QBT3Q65cjs.useXAUITheme;
+
+
+
+exports.HIGHLIGHT_OPACITY = _chunkIYFGO523cjs.HIGHLIGHT_OPACITY; exports.PRESS_DURATION = _chunkIYFGO523cjs.PRESS_DURATION; exports.PRESS_SCALE = _chunkIYFGO523cjs.PRESS_SCALE; exports.Portal = _chunkIYFGO523cjs.Portal; exports.PortalContext = _chunkIYFGO523cjs.PortalContext; exports.PortalHost = _chunkIYFGO523cjs.PortalHost; exports.PressableFeedback = _chunkIYFGO523cjs.PressableFeedback; exports.RELEASE_DURATION = _chunkIYFGO523cjs.RELEASE_DURATION; exports.RIPPLE_COVERAGE = _chunkIYFGO523cjs.RIPPLE_COVERAGE; exports.RIPPLE_DURATION = _chunkIYFGO523cjs.RIPPLE_DURATION; exports.RIPPLE_OPACITY = _chunkIYFGO523cjs.RIPPLE_OPACITY; exports.Slot = _chunkIYFGO523cjs.Slot; exports.ThemeContext = _chunk3QBT3Q65cjs.ThemeContext; exports.XAUIProvider = _chunkAW63PTQ4cjs.XAUIProvider; exports.buildRadius = _chunkAW63PTQ4cjs.buildRadius; exports.buildShadows = _chunkAW63PTQ4cjs.buildShadows; exports.childrenToString = _chunkIYFGO523cjs.childrenToString; exports.createRecipe = _chunkIYFGO523cjs.createRecipe; exports.createSlotContext = _chunkIYFGO523cjs.createSlotContext; exports.createTheme = _chunkAW63PTQ4cjs.createTheme; exports.defaultTheme = _chunkAW63PTQ4cjs.defaultTheme; exports.deriveColors = _chunkAW63PTQ4cjs.deriveColors; exports.deriveTint = _chunk3QBT3Q65cjs.deriveTint; exports.mergeProps = _chunkIYFGO523cjs.mergeProps; exports.mergeRefs = _chunkIYFGO523cjs.mergeRefs; exports.palette = _chunkAW63PTQ4cjs.palette; exports.primitives = _chunkAW63PTQ4cjs.primitives; exports.resolveAnimation = _chunkIYFGO523cjs.resolveAnimation; exports.resolveSlotAnimation = _chunkIYFGO523cjs.resolveSlotAnimation; exports.sourceKeys = _chunkAW63PTQ4cjs.sourceKeys; exports.tokens = _chunkAW63PTQ4cjs.tokens; exports.useColorMode = _chunk3QBT3Q65cjs.useColorMode; exports.useFeedback = _chunkIYFGO523cjs.useFeedback; exports.useThemeColor = _chunk3QBT3Q65cjs.useThemeColor; exports.useXAUITheme = _chunk3QBT3Q65cjs.useXAUITheme;

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-export { AnimationConfig, AnimationProp, AsChildProps, Axes, CompoundVariant, FeedbackContext, FeedbackVariant, HIGHLIGHT_OPACITY, MergeableProps, PRESS_DURATION, PRESS_SCALE, PossibleRef, PressableFeedback, PressableFeedbackHighlightProps, PressableFeedbackProps, PressableFeedbackRippleProps, RELEASE_DURATION, RIPPLE_COVERAGE, RIPPLE_DURATION, RIPPLE_OPACITY, Recipe, RecipeConfig, ResolveArgs, ResolvedAnimation, ResolvedSelection, ResolvedStyles, Selection, Slot, SlotAnimation, SlotProps, SlotStyle, SlotStyles, StateName, States, StyleFn, TintArgs, VariantColors, VariantRole, VariantTokens, childrenToString, createRecipe, createSlotContext, mergeProps, mergeRefs, resolveAnimation, resolveSlotAnimation, useFeedback } from './system/index.cjs';
+export { AnimationConfig, AnimationProp, AsChildProps, Axes, CompoundVariant, FeedbackContext, FeedbackVariant, HIGHLIGHT_OPACITY, MergeableProps, PRESS_DURATION, PRESS_SCALE, Portal, PortalContext, PortalHost, PortalHostProps, PortalMethods, PortalProps, PossibleRef, PressableFeedback, PressableFeedbackHighlightProps, PressableFeedbackProps, PressableFeedbackRippleProps, RELEASE_DURATION, RIPPLE_COVERAGE, RIPPLE_DURATION, RIPPLE_OPACITY, Recipe, RecipeConfig, ResolveArgs, ResolvedAnimation, ResolvedSelection, ResolvedStyles, Selection, Slot, SlotAnimation, SlotProps, SlotStyle, SlotStyles, StateName, States, StyleFn, TintArgs, VariantColors, VariantRole, VariantTokens, childrenToString, createRecipe, createSlotContext, mergeProps, mergeRefs, resolveAnimation, resolveSlotAnimation, useFeedback } from './system/index.cjs';
 export { ColorModePreference, PaletteFamily, PaletteShade, ThemeContext, XAUIProvider, XAUIProviderProps, XAUITint, buildRadius, buildShadows, createTheme, defaultTheme, deriveColors, deriveTint, palette, primitives, sourceKeys, tokens, useColorMode, useThemeColor, useXAUITheme } from './theme/index.cjs';
 export { C as ColorMode, F as FontSizeKey, a as FontWeightKey, R as RadiusKey, S as Size, X as XAUIColors, b as XAUIDerivedColors, c as XAUIPrimitiveColors, d as XAUIRadius, e as XAUIShadow, f as XAUISourceColors, g as XAUITheme, h as XAUIThemeConfig, i as XAUIThemeSet } from './theme.type-C9bFJKFm.cjs';
 import 'react';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { AnimationConfig, AnimationProp, AsChildProps, Axes, CompoundVariant, FeedbackContext, FeedbackVariant, HIGHLIGHT_OPACITY, MergeableProps, PRESS_DURATION, PRESS_SCALE, PossibleRef, PressableFeedback, PressableFeedbackHighlightProps, PressableFeedbackProps, PressableFeedbackRippleProps, RELEASE_DURATION, RIPPLE_COVERAGE, RIPPLE_DURATION, RIPPLE_OPACITY, Recipe, RecipeConfig, ResolveArgs, ResolvedAnimation, ResolvedSelection, ResolvedStyles, Selection, Slot, SlotAnimation, SlotProps, SlotStyle, SlotStyles, StateName, States, StyleFn, TintArgs, VariantColors, VariantRole, VariantTokens, childrenToString, createRecipe, createSlotContext, mergeProps, mergeRefs, resolveAnimation, resolveSlotAnimation, useFeedback } from './system/index.js';
+export { AnimationConfig, AnimationProp, AsChildProps, Axes, CompoundVariant, FeedbackContext, FeedbackVariant, HIGHLIGHT_OPACITY, MergeableProps, PRESS_DURATION, PRESS_SCALE, Portal, PortalContext, PortalHost, PortalHostProps, PortalMethods, PortalProps, PossibleRef, PressableFeedback, PressableFeedbackHighlightProps, PressableFeedbackProps, PressableFeedbackRippleProps, RELEASE_DURATION, RIPPLE_COVERAGE, RIPPLE_DURATION, RIPPLE_OPACITY, Recipe, RecipeConfig, ResolveArgs, ResolvedAnimation, ResolvedSelection, ResolvedStyles, Selection, Slot, SlotAnimation, SlotProps, SlotStyle, SlotStyles, StateName, States, StyleFn, TintArgs, VariantColors, VariantRole, VariantTokens, childrenToString, createRecipe, createSlotContext, mergeProps, mergeRefs, resolveAnimation, resolveSlotAnimation, useFeedback } from './system/index.js';
 export { ColorModePreference, PaletteFamily, PaletteShade, ThemeContext, XAUIProvider, XAUIProviderProps, XAUITint, buildRadius, buildShadows, createTheme, defaultTheme, deriveColors, deriveTint, palette, primitives, sourceKeys, tokens, useColorMode, useThemeColor, useXAUITheme } from './theme/index.js';
 export { C as ColorMode, F as FontSizeKey, a as FontWeightKey, R as RadiusKey, S as Size, X as XAUIColors, b as XAUIDerivedColors, c as XAUIPrimitiveColors, d as XAUIRadius, e as XAUIShadow, f as XAUISourceColors, g as XAUITheme, h as XAUIThemeConfig, i as XAUIThemeSet } from './theme.type-C9bFJKFm.js';
 import 'react';

package/dist/index.js

@@ -2,6 +2,9 @@ import {
   HIGHLIGHT_OPACITY,
   PRESS_DURATION,
   PRESS_SCALE,
+  Portal,
+  PortalContext,
+  PortalHost,
   PressableFeedback,
   RELEASE_DURATION,
   RIPPLE_COVERAGE,
@@ -16,7 +19,7 @@ import {
   resolveAnimation,
   resolveSlotAnimation,
   useFeedback
-} from "./chunk-QAMNNTGM.js";
+} from "./chunk-ECDWSSHJ.js";
 import {
   XAUIProvider,
   buildRadius,
@@ -40,6 +43,9 @@ export {
   HIGHLIGHT_OPACITY,
   PRESS_DURATION,
   PRESS_SCALE,
+  Portal,
+  PortalContext,
+  PortalHost,
   PressableFeedback,
   RELEASE_DURATION,
   RIPPLE_COVERAGE,

package/dist/system/index.cjs

@@ -16,7 +16,10 @@
 
 
 
-var _chunkV63JO65Fcjs = require('../chunk-V63JO65F.cjs');
+
+
+
+var _chunkIYFGO523cjs = require('../chunk-IYFGO523.cjs');
 require('../chunk-3QBT3Q65.cjs');
 
 
@@ -36,4 +39,7 @@ require('../chunk-3QBT3Q65.cjs');
 
 
 
-exports.HIGHLIGHT_OPACITY = _chunkV63JO65Fcjs.HIGHLIGHT_OPACITY; exports.PRESS_DURATION = _chunkV63JO65Fcjs.PRESS_DURATION; exports.PRESS_SCALE = _chunkV63JO65Fcjs.PRESS_SCALE; exports.PressableFeedback = _chunkV63JO65Fcjs.PressableFeedback; exports.RELEASE_DURATION = _chunkV63JO65Fcjs.RELEASE_DURATION; exports.RIPPLE_COVERAGE = _chunkV63JO65Fcjs.RIPPLE_COVERAGE; exports.RIPPLE_DURATION = _chunkV63JO65Fcjs.RIPPLE_DURATION; exports.RIPPLE_OPACITY = _chunkV63JO65Fcjs.RIPPLE_OPACITY; exports.Slot = _chunkV63JO65Fcjs.Slot; exports.childrenToString = _chunkV63JO65Fcjs.childrenToString; exports.createRecipe = _chunkV63JO65Fcjs.createRecipe; exports.createSlotContext = _chunkV63JO65Fcjs.createSlotContext; exports.mergeProps = _chunkV63JO65Fcjs.mergeProps; exports.mergeRefs = _chunkV63JO65Fcjs.mergeRefs; exports.resolveAnimation = _chunkV63JO65Fcjs.resolveAnimation; exports.resolveSlotAnimation = _chunkV63JO65Fcjs.resolveSlotAnimation; exports.useFeedback = _chunkV63JO65Fcjs.useFeedback;
+
+
+
+exports.HIGHLIGHT_OPACITY = _chunkIYFGO523cjs.HIGHLIGHT_OPACITY; exports.PRESS_DURATION = _chunkIYFGO523cjs.PRESS_DURATION; exports.PRESS_SCALE = _chunkIYFGO523cjs.PRESS_SCALE; exports.Portal = _chunkIYFGO523cjs.Portal; exports.PortalContext = _chunkIYFGO523cjs.PortalContext; exports.PortalHost = _chunkIYFGO523cjs.PortalHost; exports.PressableFeedback = _chunkIYFGO523cjs.PressableFeedback; exports.RELEASE_DURATION = _chunkIYFGO523cjs.RELEASE_DURATION; exports.RIPPLE_COVERAGE = _chunkIYFGO523cjs.RIPPLE_COVERAGE; exports.RIPPLE_DURATION = _chunkIYFGO523cjs.RIPPLE_DURATION; exports.RIPPLE_OPACITY = _chunkIYFGO523cjs.RIPPLE_OPACITY; exports.Slot = _chunkIYFGO523cjs.Slot; exports.childrenToString = _chunkIYFGO523cjs.childrenToString; exports.createRecipe = _chunkIYFGO523cjs.createRecipe; exports.createSlotContext = _chunkIYFGO523cjs.createSlotContext; exports.mergeProps = _chunkIYFGO523cjs.mergeProps; exports.mergeRefs = _chunkIYFGO523cjs.mergeRefs; exports.resolveAnimation = _chunkIYFGO523cjs.resolveAnimation; exports.resolveSlotAnimation = _chunkIYFGO523cjs.resolveSlotAnimation; exports.useFeedback = _chunkIYFGO523cjs.useFeedback;

package/dist/system/index.d.cts

@@ -5,6 +5,48 @@ import { PressableProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
 import { SharedValue } from 'react-native-reanimated';
 import { g as XAUITheme, X as XAUIColors } from '../theme.type-C9bFJKFm.cjs';
 
+type PortalProps = {
+    children: ReactNode;
+};
+/**
+ * Renders its children into the nearest `PortalHost` instead of where it sits. What
+ * `Dialog`, `Sheet`, `Drawer` and `Snackbar` are built on: an overlay has to escape the
+ * clipping and stacking of whatever container happened to hold the trigger.
+ *
+ * Both halves run in layout effects rather than effects, which is deliberate: the content
+ * lands in the same commit as the trigger's, so an overlay neither shows one frame late
+ * nor survives one frame past the unmount that closed it. The unpublish sits in its own
+ * effect so that it does not depend on `children` — a re-publish then keeps the portal's
+ * place in the host's order instead of dropping it and re-adding it at the end.
+ */
+declare function Portal({ children }: PortalProps): null;
+declare namespace Portal {
+    var displayName: string;
+}
+
+type PortalMethods = {
+    addPortal: (key: string, element: ReactNode) => void;
+    removePortal: (key: string) => void;
+};
+/**
+ * `null` outside a host, and `Portal` treats that as "render nothing" rather than
+ * throwing: an app that forgot `PortalHost` should lose its overlays, not crash on the
+ * first `Dialog`.
+ */
+declare const PortalContext: react.Context<PortalMethods | null>;
+
+type PortalHostProps = {
+    children: ReactNode;
+};
+/**
+ * Where every `Portal` in the tree below renders. Mounted once, at the root of the app,
+ * above navigation — an overlay that renders inside a screen is clipped by it.
+ */
+declare function PortalHost({ children }: PortalHostProps): react.JSX.Element;
+declare namespace PortalHost {
+    var displayName: string;
+}
+
 /**
  * What the root does under the finger. `scale-highlight` and `scale-ripple` mount their
  * overlay themselves; `scale` mounts none, which is what a root picks when it renders its
@@ -169,7 +211,7 @@ type ResolvedSlotAnimation = {
  */
 declare function resolveSlotAnimation(override: SlotAnimation | undefined, enabledByRoot: boolean, defaultOpacity: number, defaultDuration?: number): ResolvedSlotAnimation;
 
-declare const PressableFeedback: react.ForwardRefExoticComponent<Omit<react_native.PressableProps, "disabled" | "style" | "children"> & {
+declare const PressableFeedback: react.ForwardRefExoticComponent<Omit<react_native.PressableProps, "children" | "style" | "disabled"> & {
     isPressed?: boolean;
     isDisabled?: boolean;
     asChild?: boolean;
@@ -350,4 +392,4 @@ type SlotProps = MergeableProps & {
  */
 declare const Slot: react.ForwardRefExoticComponent<Omit<SlotProps, "ref"> & react.RefAttributes<unknown>>;
 
-export { type AnimationConfig, type AnimationProp, type AsChildProps, type Axes, type CompoundVariant, type FeedbackContext, type FeedbackVariant, HIGHLIGHT_OPACITY, type MergeableProps, PRESS_DURATION, PRESS_SCALE, type PossibleRef, PressableFeedback, type PressableFeedbackHighlightProps, type PressableFeedbackProps, type PressableFeedbackRippleProps, RELEASE_DURATION, RIPPLE_COVERAGE, RIPPLE_DURATION, RIPPLE_OPACITY, type Recipe, type RecipeConfig, type ResolveArgs, type ResolvedAnimation, type ResolvedSelection, type ResolvedStyles, type Selection, Slot, type SlotAnimation, type SlotProps, type SlotStyle, type SlotStyles, type StateName, type States, type StyleFn, type TintArgs, type VariantColors, type VariantRole, type VariantTokens, childrenToString, createRecipe, createSlotContext, mergeProps, mergeRefs, resolveAnimation, resolveSlotAnimation, useFeedback };
+export { type AnimationConfig, type AnimationProp, type AsChildProps, type Axes, type CompoundVariant, type FeedbackContext, type FeedbackVariant, HIGHLIGHT_OPACITY, type MergeableProps, PRESS_DURATION, PRESS_SCALE, Portal, PortalContext, PortalHost, type PortalHostProps, type PortalMethods, type PortalProps, type PossibleRef, PressableFeedback, type PressableFeedbackHighlightProps, type PressableFeedbackProps, type PressableFeedbackRippleProps, RELEASE_DURATION, RIPPLE_COVERAGE, RIPPLE_DURATION, RIPPLE_OPACITY, type Recipe, type RecipeConfig, type ResolveArgs, type ResolvedAnimation, type ResolvedSelection, type ResolvedStyles, type Selection, Slot, type SlotAnimation, type SlotProps, type SlotStyle, type SlotStyles, type StateName, type States, type StyleFn, type TintArgs, type VariantColors, type VariantRole, type VariantTokens, childrenToString, createRecipe, createSlotContext, mergeProps, mergeRefs, resolveAnimation, resolveSlotAnimation, useFeedback };

package/dist/system/index.d.ts

@@ -5,6 +5,48 @@ import { PressableProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
 import { SharedValue } from 'react-native-reanimated';
 import { g as XAUITheme, X as XAUIColors } from '../theme.type-C9bFJKFm.js';
 
+type PortalProps = {
+    children: ReactNode;
+};
+/**
+ * Renders its children into the nearest `PortalHost` instead of where it sits. What
+ * `Dialog`, `Sheet`, `Drawer` and `Snackbar` are built on: an overlay has to escape the
+ * clipping and stacking of whatever container happened to hold the trigger.
+ *
+ * Both halves run in layout effects rather than effects, which is deliberate: the content
+ * lands in the same commit as the trigger's, so an overlay neither shows one frame late
+ * nor survives one frame past the unmount that closed it. The unpublish sits in its own
+ * effect so that it does not depend on `children` — a re-publish then keeps the portal's
+ * place in the host's order instead of dropping it and re-adding it at the end.
+ */
+declare function Portal({ children }: PortalProps): null;
+declare namespace Portal {
+    var displayName: string;
+}
+
+type PortalMethods = {
+    addPortal: (key: string, element: ReactNode) => void;
+    removePortal: (key: string) => void;
+};
+/**
+ * `null` outside a host, and `Portal` treats that as "render nothing" rather than
+ * throwing: an app that forgot `PortalHost` should lose its overlays, not crash on the
+ * first `Dialog`.
+ */
+declare const PortalContext: react.Context<PortalMethods | null>;
+
+type PortalHostProps = {
+    children: ReactNode;
+};
+/**
+ * Where every `Portal` in the tree below renders. Mounted once, at the root of the app,
+ * above navigation — an overlay that renders inside a screen is clipped by it.
+ */
+declare function PortalHost({ children }: PortalHostProps): react.JSX.Element;
+declare namespace PortalHost {
+    var displayName: string;
+}
+
 /**
  * What the root does under the finger. `scale-highlight` and `scale-ripple` mount their
  * overlay themselves; `scale` mounts none, which is what a root picks when it renders its
@@ -169,7 +211,7 @@ type ResolvedSlotAnimation = {
  */
 declare function resolveSlotAnimation(override: SlotAnimation | undefined, enabledByRoot: boolean, defaultOpacity: number, defaultDuration?: number): ResolvedSlotAnimation;
 
-declare const PressableFeedback: react.ForwardRefExoticComponent<Omit<react_native.PressableProps, "disabled" | "style" | "children"> & {
+declare const PressableFeedback: react.ForwardRefExoticComponent<Omit<react_native.PressableProps, "children" | "style" | "disabled"> & {
     isPressed?: boolean;
     isDisabled?: boolean;
     asChild?: boolean;
@@ -350,4 +392,4 @@ type SlotProps = MergeableProps & {
  */
 declare const Slot: react.ForwardRefExoticComponent<Omit<SlotProps, "ref"> & react.RefAttributes<unknown>>;
 
-export { type AnimationConfig, type AnimationProp, type AsChildProps, type Axes, type CompoundVariant, type FeedbackContext, type FeedbackVariant, HIGHLIGHT_OPACITY, type MergeableProps, PRESS_DURATION, PRESS_SCALE, type PossibleRef, PressableFeedback, type PressableFeedbackHighlightProps, type PressableFeedbackProps, type PressableFeedbackRippleProps, RELEASE_DURATION, RIPPLE_COVERAGE, RIPPLE_DURATION, RIPPLE_OPACITY, type Recipe, type RecipeConfig, type ResolveArgs, type ResolvedAnimation, type ResolvedSelection, type ResolvedStyles, type Selection, Slot, type SlotAnimation, type SlotProps, type SlotStyle, type SlotStyles, type StateName, type States, type StyleFn, type TintArgs, type VariantColors, type VariantRole, type VariantTokens, childrenToString, createRecipe, createSlotContext, mergeProps, mergeRefs, resolveAnimation, resolveSlotAnimation, useFeedback };
+export { type AnimationConfig, type AnimationProp, type AsChildProps, type Axes, type CompoundVariant, type FeedbackContext, type FeedbackVariant, HIGHLIGHT_OPACITY, type MergeableProps, PRESS_DURATION, PRESS_SCALE, Portal, PortalContext, PortalHost, type PortalHostProps, type PortalMethods, type PortalProps, type PossibleRef, PressableFeedback, type PressableFeedbackHighlightProps, type PressableFeedbackProps, type PressableFeedbackRippleProps, RELEASE_DURATION, RIPPLE_COVERAGE, RIPPLE_DURATION, RIPPLE_OPACITY, type Recipe, type RecipeConfig, type ResolveArgs, type ResolvedAnimation, type ResolvedSelection, type ResolvedStyles, type Selection, Slot, type SlotAnimation, type SlotProps, type SlotStyle, type SlotStyles, type StateName, type States, type StyleFn, type TintArgs, type VariantColors, type VariantRole, type VariantTokens, childrenToString, createRecipe, createSlotContext, mergeProps, mergeRefs, resolveAnimation, resolveSlotAnimation, useFeedback };

package/dist/system/index.js

@@ -2,6 +2,9 @@ import {
   HIGHLIGHT_OPACITY,
   PRESS_DURATION,
   PRESS_SCALE,
+  Portal,
+  PortalContext,
+  PortalHost,
   PressableFeedback,
   RELEASE_DURATION,
   RIPPLE_COVERAGE,
@@ -16,12 +19,15 @@ import {
   resolveAnimation,
   resolveSlotAnimation,
   useFeedback
-} from "../chunk-QAMNNTGM.js";
+} from "../chunk-ECDWSSHJ.js";
 import "../chunk-X2K2FX3W.js";
 export {
   HIGHLIGHT_OPACITY,
   PRESS_DURATION,
   PRESS_SCALE,
+  Portal,
+  PortalContext,
+  PortalHost,
   PressableFeedback,
   RELEASE_DURATION,
   RIPPLE_COVERAGE,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaui/native",
-  "version": "0.9.1-alpha.3",
+  "version": "0.9.1-alpha.4",
   "description": "Composition-first React Native UI components with native animations powered by Reanimated",
   "keywords": [
     "react-native",