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

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

@@ -3,8 +3,109 @@ 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({});
+IconContext.displayName = "XAUI.Icon.Context";
+function useIconContext() {
+  return useContext(IconContext);
+}
+
+// src/system/icon/icon.tsx
+function Icon({
+  as: Component,
+  children,
+  source,
+  size,
+  color,
+  style
+}) {
+  const inherited = useIconContext();
+  const theme = useXAUITheme();
+  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 });
+  }
+  if (isValidElement(children)) {
+    return cloneElement(children, {
+      width: resolvedSize,
+      height: resolvedSize,
+      color: resolvedColor
+    });
+  }
+  if (source) {
+    return /* @__PURE__ */ React.createElement(
+      Image,
+      {
+        source,
+        style: [
+          { width: resolvedSize, height: resolvedSize, tintColor: resolvedColor },
+          style
+        ]
+      }
+    );
+  }
+  throw new Error(
+    "XAUI: Icon needs one of `as` (an icon component), a raw SVG element as its child, or `source` (an image). It renders nothing on its own."
+  );
+}
+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;
+}
+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 useContext4, useEffect as useEffect2, useMemo as useMemo2 } from "react";
 import { Pressable } from "react-native";
 import Animated3, {
   useAnimatedStyle as useAnimatedStyle3,
@@ -13,15 +114,15 @@ import Animated3, {
 } from "react-native-reanimated";
 
 // src/system/pressable-feedback/pressable-feedback-context.ts
-import { createContext as createContext2 } from "react";
+import { createContext as createContext4 } from "react";
 
 // src/system/slot/create-slot-context.ts
-import { createContext, useContext } from "react";
+import { createContext as createContext3, useContext as useContext3 } from "react";
 function createSlotContext(name) {
-  const Context = createContext(null);
+  const Context = createContext3(null);
   Context.displayName = `XAUI.${name}.Context`;
   function useSlotContext() {
-    const value = useContext(Context);
+    const value = useContext3(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 +140,11 @@ function createSlotContext(name) {
 
 // src/system/pressable-feedback/pressable-feedback-context.ts
 var [FeedbackProvider, useFeedback] = createSlotContext("PressableFeedback");
-var DisableAllContext = createContext2(false);
+var DisableAllContext = createContext4(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 +219,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 }]
@@ -275,7 +376,7 @@ function RippleWave({
 }
 
 // src/system/slot/slot.tsx
-import { cloneElement, forwardRef, isValidElement } from "react";
+import { cloneElement as cloneElement2, forwardRef, isValidElement as isValidElement2 } from "react";
 
 // src/system/slot/merge-refs.ts
 function mergeRefs(...refs) {
@@ -333,7 +434,7 @@ function resolveStyle(style, state) {
 
 // src/system/slot/slot.tsx
 var Slot = forwardRef(function Slot2({ children, ...ours }, ref) {
-  if (!isValidElement(children)) {
+  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."
     );
@@ -341,7 +442,7 @@ var Slot = forwardRef(function Slot2({ children, ...ours }, ref) {
   const child = children;
   const merged = mergeProps(ours, child.props);
   merged.ref = mergeRefs(ref, refOf(child));
-  return cloneElement(child, merged);
+  return cloneElement2(child, merged);
 });
 Slot.displayName = "XAUI.Slot";
 function refOf(element) {
@@ -355,7 +456,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 = useContext4(DisableAllContext);
     const resolved = resolveAnimation(animation, inheritedDisableAll);
     const Feedback = resolved.none || feedbackVariant === "none" ? StaticFeedback : AnimatedFeedback;
     const body = /* @__PURE__ */ React.createElement(
@@ -380,7 +481,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 +509,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 +575,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 +638,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;
     },
@@ -594,7 +695,7 @@ function apply(fns, theme, colors) {
 }
 
 // src/system/slot/children-to-string.ts
-import { isValidElement as isValidElement2 } from "react";
+import { isValidElement as isValidElement3 } from "react";
 function childrenToString(children) {
   const text = stringify(children);
   return text === null || text === "" ? null : text;
@@ -603,7 +704,7 @@ 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 (isValidElement3(node)) return null;
   if (Array.isArray(node)) {
     let text = "";
     for (const child of node) {
@@ -617,6 +718,12 @@ function stringify(node) {
 }
 
 export {
+  IconContext,
+  useIconContext,
+  Icon,
+  PortalContext,
+  Portal,
+  PortalHost,
   createSlotContext,
   useFeedback,
   PRESS_SCALE,

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

@@ -3,10 +3,111 @@
 
 var _chunk3QBT3Q65cjs = require('./chunk-3QBT3Q65.cjs');
 
-// src/system/pressable-feedback/pressable-feedback.tsx
+// src/system/icon/icon.tsx
 var _react = require('react');
 var _reactnative = require('react-native');
 
+// src/system/icon/icon-context.ts
+
+var IconContext = _react.createContext.call(void 0, {});
+IconContext.displayName = "XAUI.Icon.Context";
+function useIconContext() {
+  return _react.useContext.call(void 0, IconContext);
+}
+
+// src/system/icon/icon.tsx
+function Icon({
+  as: Component,
+  children,
+  source,
+  size,
+  color,
+  style
+}) {
+  const inherited = useIconContext();
+  const theme = _chunk3QBT3Q65cjs.useXAUITheme.call(void 0, );
+  const resolvedSize = _nullishCoalesce(_nullishCoalesce(size, () => ( inherited.size)), () => ( theme.fontSizes.md));
+  const resolvedColor = _nullishCoalesce(_nullishCoalesce(color, () => ( inherited.color)), () => ( theme.colors.foreground));
+  if (Component) {
+    return /* @__PURE__ */ React.createElement(Component, { size: resolvedSize, color: resolvedColor });
+  }
+  if (_react.isValidElement.call(void 0, children)) {
+    return _react.cloneElement.call(void 0, children, {
+      width: resolvedSize,
+      height: resolvedSize,
+      color: resolvedColor
+    });
+  }
+  if (source) {
+    return /* @__PURE__ */ React.createElement(
+      _reactnative.Image,
+      {
+        source,
+        style: [
+          { width: resolvedSize, height: resolvedSize, tintColor: resolvedColor },
+          style
+        ]
+      }
+    );
+  }
+  throw new Error(
+    "XAUI: Icon needs one of `as` (an icon component), a raw SVG element as its child, or `source` (an image). It renders nothing on its own."
+  );
+}
+Icon.displayName = "XAUI.Icon";
+
+// src/system/portal/portal.tsx
+
+
+// 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 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 +127,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 +303,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 +345,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 +517,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 +602,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 +659,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 +735,10 @@ 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.IconContext = IconContext; exports.useIconContext = useIconContext; exports.Icon = Icon; 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,13 @@
 
 
 
-var _chunkV63JO65Fcjs = require('./chunk-V63JO65F.cjs');
+
+
+
+
+
+
+var _chunkPSSG6C3Qcjs = require('./chunk-PSSG6C3Q.cjs');
 
 
 
@@ -69,4 +75,10 @@ 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 = _chunkPSSG6C3Qcjs.HIGHLIGHT_OPACITY; exports.Icon = _chunkPSSG6C3Qcjs.Icon; exports.IconContext = _chunkPSSG6C3Qcjs.IconContext; exports.PRESS_DURATION = _chunkPSSG6C3Qcjs.PRESS_DURATION; exports.PRESS_SCALE = _chunkPSSG6C3Qcjs.PRESS_SCALE; exports.Portal = _chunkPSSG6C3Qcjs.Portal; exports.PortalContext = _chunkPSSG6C3Qcjs.PortalContext; exports.PortalHost = _chunkPSSG6C3Qcjs.PortalHost; exports.PressableFeedback = _chunkPSSG6C3Qcjs.PressableFeedback; exports.RELEASE_DURATION = _chunkPSSG6C3Qcjs.RELEASE_DURATION; exports.RIPPLE_COVERAGE = _chunkPSSG6C3Qcjs.RIPPLE_COVERAGE; exports.RIPPLE_DURATION = _chunkPSSG6C3Qcjs.RIPPLE_DURATION; exports.RIPPLE_OPACITY = _chunkPSSG6C3Qcjs.RIPPLE_OPACITY; exports.Slot = _chunkPSSG6C3Qcjs.Slot; exports.ThemeContext = _chunk3QBT3Q65cjs.ThemeContext; exports.XAUIProvider = _chunkAW63PTQ4cjs.XAUIProvider; exports.buildRadius = _chunkAW63PTQ4cjs.buildRadius; exports.buildShadows = _chunkAW63PTQ4cjs.buildShadows; exports.childrenToString = _chunkPSSG6C3Qcjs.childrenToString; exports.createRecipe = _chunkPSSG6C3Qcjs.createRecipe; exports.createSlotContext = _chunkPSSG6C3Qcjs.createSlotContext; exports.createTheme = _chunkAW63PTQ4cjs.createTheme; exports.defaultTheme = _chunkAW63PTQ4cjs.defaultTheme; exports.deriveColors = _chunkAW63PTQ4cjs.deriveColors; exports.deriveTint = _chunk3QBT3Q65cjs.deriveTint; exports.mergeProps = _chunkPSSG6C3Qcjs.mergeProps; exports.mergeRefs = _chunkPSSG6C3Qcjs.mergeRefs; exports.palette = _chunkAW63PTQ4cjs.palette; exports.primitives = _chunkAW63PTQ4cjs.primitives; exports.resolveAnimation = _chunkPSSG6C3Qcjs.resolveAnimation; exports.resolveSlotAnimation = _chunkPSSG6C3Qcjs.resolveSlotAnimation; exports.sourceKeys = _chunkAW63PTQ4cjs.sourceKeys; exports.tokens = _chunkAW63PTQ4cjs.tokens; exports.useColorMode = _chunk3QBT3Q65cjs.useColorMode; exports.useFeedback = _chunkPSSG6C3Qcjs.useFeedback; exports.useIconContext = _chunkPSSG6C3Qcjs.useIconContext; 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, Icon, IconComponentProps, IconContext, IconContextValue, IconProps, 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, useIconContext } 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, Icon, IconComponentProps, IconContext, IconContextValue, IconProps, 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, useIconContext } 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

@@ -1,7 +1,12 @@
 import {
   HIGHLIGHT_OPACITY,
+  Icon,
+  IconContext,
   PRESS_DURATION,
   PRESS_SCALE,
+  Portal,
+  PortalContext,
+  PortalHost,
   PressableFeedback,
   RELEASE_DURATION,
   RIPPLE_COVERAGE,
@@ -15,8 +20,9 @@ import {
   mergeRefs,
   resolveAnimation,
   resolveSlotAnimation,
-  useFeedback
-} from "./chunk-QAMNNTGM.js";
+  useFeedback,
+  useIconContext
+} from "./chunk-AUDOMZR3.js";
 import {
   XAUIProvider,
   buildRadius,
@@ -38,8 +44,13 @@ import {
 } from "./chunk-X2K2FX3W.js";
 export {
   HIGHLIGHT_OPACITY,
+  Icon,
+  IconContext,
   PRESS_DURATION,
   PRESS_SCALE,
+  Portal,
+  PortalContext,
+  PortalHost,
   PressableFeedback,
   RELEASE_DURATION,
   RIPPLE_COVERAGE,
@@ -67,6 +78,7 @@ export {
   tokens,
   useColorMode,
   useFeedback,
+  useIconContext,
   useThemeColor,
   useXAUITheme
 };

package/dist/system/index.cjs

@@ -16,7 +16,13 @@
 
 
 
-var _chunkV63JO65Fcjs = require('../chunk-V63JO65F.cjs');
+
+
+
+
+
+
+var _chunkPSSG6C3Qcjs = require('../chunk-PSSG6C3Q.cjs');
 require('../chunk-3QBT3Q65.cjs');
 
 
@@ -36,4 +42,10 @@ 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 = _chunkPSSG6C3Qcjs.HIGHLIGHT_OPACITY; exports.Icon = _chunkPSSG6C3Qcjs.Icon; exports.IconContext = _chunkPSSG6C3Qcjs.IconContext; exports.PRESS_DURATION = _chunkPSSG6C3Qcjs.PRESS_DURATION; exports.PRESS_SCALE = _chunkPSSG6C3Qcjs.PRESS_SCALE; exports.Portal = _chunkPSSG6C3Qcjs.Portal; exports.PortalContext = _chunkPSSG6C3Qcjs.PortalContext; exports.PortalHost = _chunkPSSG6C3Qcjs.PortalHost; exports.PressableFeedback = _chunkPSSG6C3Qcjs.PressableFeedback; exports.RELEASE_DURATION = _chunkPSSG6C3Qcjs.RELEASE_DURATION; exports.RIPPLE_COVERAGE = _chunkPSSG6C3Qcjs.RIPPLE_COVERAGE; exports.RIPPLE_DURATION = _chunkPSSG6C3Qcjs.RIPPLE_DURATION; exports.RIPPLE_OPACITY = _chunkPSSG6C3Qcjs.RIPPLE_OPACITY; exports.Slot = _chunkPSSG6C3Qcjs.Slot; exports.childrenToString = _chunkPSSG6C3Qcjs.childrenToString; exports.createRecipe = _chunkPSSG6C3Qcjs.createRecipe; exports.createSlotContext = _chunkPSSG6C3Qcjs.createSlotContext; exports.mergeProps = _chunkPSSG6C3Qcjs.mergeProps; exports.mergeRefs = _chunkPSSG6C3Qcjs.mergeRefs; exports.resolveAnimation = _chunkPSSG6C3Qcjs.resolveAnimation; exports.resolveSlotAnimation = _chunkPSSG6C3Qcjs.resolveSlotAnimation; exports.useFeedback = _chunkPSSG6C3Qcjs.useFeedback; exports.useIconContext = _chunkPSSG6C3Qcjs.useIconContext;

package/dist/system/index.d.cts

@@ -1,10 +1,108 @@
 import * as react from 'react';
-import { ReactNode, Provider, Ref, RefCallback } from 'react';
+import { ComponentType, ReactNode, Provider, Ref, RefCallback } from 'react';
 import * as react_native from 'react-native';
-import { PressableProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { ImageSourcePropType, StyleProp, ImageStyle, PressableProps, ViewStyle, TextStyle } from 'react-native';
 import { SharedValue } from 'react-native-reanimated';
 import { g as XAUITheme, X as XAUIColors } from '../theme.type-C9bFJKFm.cjs';
 
+/**
+ * The props Lucide, Ionicons and `react-native-vector-icons` all accept — the shape
+ * `as` is handed. It is a convention rather than an interface anyone published, which is
+ * exactly why `Icon` exists: without it every call site computes the two values by hand.
+ */
+type IconComponentProps = {
+    size?: number;
+    color?: string;
+};
+type IconProps = {
+    /** An icon component. `size` and `color` are injected into it. */
+    as?: ComponentType<IconComponentProps>;
+    /** A raw `react-native-svg` element, cloned with the resolved size and colour. */
+    children?: ReactNode;
+    /** An image, tinted with the resolved colour. */
+    source?: ImageSourcePropType;
+    /** Overrides what the surrounding slot asked for. */
+    size?: number;
+    /** A raw value (R7), never a token. Overrides the slot's. */
+    color?: string;
+    style?: StyleProp<ImageStyle>;
+};
+/** What a component root publishes so the icons inside it need no props at all. */
+type IconContextValue = {
+    size?: number;
+    color?: string;
+};
+
+/**
+ * The gap nobody else closes: an icon is a third-party component, so a slot context does
+ * not reach it and every call site ends up computing the colour by hand.
+ *
+ * ```tsx
+ * <Button variant="danger">
+ *   <Button.Icon as={TrashIcon} />   {/* colour and size inherited, nothing to pass *\/}
+ *   <Button.Label>Supprimer</Button.Label>
+ * </Button>
+ * ```
+ *
+ * Three accepted forms — a component through `as`, a raw SVG as children, or an image
+ * through `source` — and the resolution is the same for all three: an explicit prop, else
+ * what the surrounding slot published, else the theme.
+ */
+declare function Icon({ as: Component, children, source, size, color, style, }: IconProps): react.JSX.Element;
+declare namespace Icon {
+    var displayName: string;
+}
+
+/**
+ * Not a `createSlotContext`: that one throws outside its parent, and an `Icon` has to
+ * work on its own as much as inside a `Button`. An empty context is the honest default —
+ * nothing inherited, so the theme decides.
+ */
+declare const IconContext: react.Context<IconContextValue>;
+declare function useIconContext(): IconContextValue;
+
+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 +267,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 +448,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, Icon, type IconComponentProps, IconContext, type IconContextValue, type IconProps, 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, useIconContext };

package/dist/system/index.d.ts

@@ -1,10 +1,108 @@
 import * as react from 'react';
-import { ReactNode, Provider, Ref, RefCallback } from 'react';
+import { ComponentType, ReactNode, Provider, Ref, RefCallback } from 'react';
 import * as react_native from 'react-native';
-import { PressableProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { ImageSourcePropType, StyleProp, ImageStyle, PressableProps, ViewStyle, TextStyle } from 'react-native';
 import { SharedValue } from 'react-native-reanimated';
 import { g as XAUITheme, X as XAUIColors } from '../theme.type-C9bFJKFm.js';
 
+/**
+ * The props Lucide, Ionicons and `react-native-vector-icons` all accept — the shape
+ * `as` is handed. It is a convention rather than an interface anyone published, which is
+ * exactly why `Icon` exists: without it every call site computes the two values by hand.
+ */
+type IconComponentProps = {
+    size?: number;
+    color?: string;
+};
+type IconProps = {
+    /** An icon component. `size` and `color` are injected into it. */
+    as?: ComponentType<IconComponentProps>;
+    /** A raw `react-native-svg` element, cloned with the resolved size and colour. */
+    children?: ReactNode;
+    /** An image, tinted with the resolved colour. */
+    source?: ImageSourcePropType;
+    /** Overrides what the surrounding slot asked for. */
+    size?: number;
+    /** A raw value (R7), never a token. Overrides the slot's. */
+    color?: string;
+    style?: StyleProp<ImageStyle>;
+};
+/** What a component root publishes so the icons inside it need no props at all. */
+type IconContextValue = {
+    size?: number;
+    color?: string;
+};
+
+/**
+ * The gap nobody else closes: an icon is a third-party component, so a slot context does
+ * not reach it and every call site ends up computing the colour by hand.
+ *
+ * ```tsx
+ * <Button variant="danger">
+ *   <Button.Icon as={TrashIcon} />   {/* colour and size inherited, nothing to pass *\/}
+ *   <Button.Label>Supprimer</Button.Label>
+ * </Button>
+ * ```
+ *
+ * Three accepted forms — a component through `as`, a raw SVG as children, or an image
+ * through `source` — and the resolution is the same for all three: an explicit prop, else
+ * what the surrounding slot published, else the theme.
+ */
+declare function Icon({ as: Component, children, source, size, color, style, }: IconProps): react.JSX.Element;
+declare namespace Icon {
+    var displayName: string;
+}
+
+/**
+ * Not a `createSlotContext`: that one throws outside its parent, and an `Icon` has to
+ * work on its own as much as inside a `Button`. An empty context is the honest default —
+ * nothing inherited, so the theme decides.
+ */
+declare const IconContext: react.Context<IconContextValue>;
+declare function useIconContext(): IconContextValue;
+
+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 +267,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 +448,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, Icon, type IconComponentProps, IconContext, type IconContextValue, type IconProps, 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, useIconContext };

package/dist/system/index.js

@@ -1,7 +1,12 @@
 import {
   HIGHLIGHT_OPACITY,
+  Icon,
+  IconContext,
   PRESS_DURATION,
   PRESS_SCALE,
+  Portal,
+  PortalContext,
+  PortalHost,
   PressableFeedback,
   RELEASE_DURATION,
   RIPPLE_COVERAGE,
@@ -15,13 +20,19 @@ import {
   mergeRefs,
   resolveAnimation,
   resolveSlotAnimation,
-  useFeedback
-} from "../chunk-QAMNNTGM.js";
+  useFeedback,
+  useIconContext
+} from "../chunk-AUDOMZR3.js";
 import "../chunk-X2K2FX3W.js";
 export {
   HIGHLIGHT_OPACITY,
+  Icon,
+  IconContext,
   PRESS_DURATION,
   PRESS_SCALE,
+  Portal,
+  PortalContext,
+  PortalHost,
   PressableFeedback,
   RELEASE_DURATION,
   RIPPLE_COVERAGE,
@@ -35,5 +46,6 @@ export {
   mergeRefs,
   resolveAnimation,
   resolveSlotAnimation,
-  useFeedback
+  useFeedback,
+  useIconContext
 };

package/package.json

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