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

package/dist/{chunk-IYFGO523.cjs → chunk-46M765BS.cjs}

@@ -3,8 +3,61 @@
 
 var _chunk3QBT3Q65cjs = require('./chunk-3QBT3Q65.cjs');
 
-// src/system/portal/portal.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
 
@@ -26,7 +79,7 @@ Portal.displayName = "XAUI.Portal";
 
 // src/system/portal/portal-host.tsx
 
-var _reactnative = require('react-native');
+
 var styles = _reactnative.StyleSheet.create({
   container: { flex: 1 }
 });
@@ -685,4 +738,7 @@ function stringify(node) {
 
 
 
-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;
+
+
+
+exports.mergeRefs = mergeRefs; 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.mergeProps = mergeProps; exports.Slot = Slot; exports.PressableFeedback = PressableFeedback3; exports.createRecipe = createRecipe; exports.childrenToString = childrenToString;

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

@@ -3,16 +3,69 @@ 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, useId, useLayoutEffect } from "react";
+import { useContext as useContext2, useId, useLayoutEffect } from "react";
 
 // src/system/portal/portal-context.ts
-import { createContext } from "react";
-var PortalContext = createContext(null);
+import { createContext as createContext2 } from "react";
+var PortalContext = createContext2(null);
 
 // src/system/portal/portal.tsx
 function Portal({ children }) {
-  const context = useContext(PortalContext);
+  const context = useContext2(PortalContext);
   const key = useId();
   useLayoutEffect(() => {
     context?.addPortal(key, children);
@@ -52,7 +105,7 @@ function PortalHost({ children }) {
 PortalHost.displayName = "XAUI.PortalHost";
 
 // src/system/pressable-feedback/pressable-feedback.tsx
-import { forwardRef as forwardRef2, useContext as useContext3, useEffect as useEffect2, useMemo as useMemo2 } 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,
@@ -61,15 +114,15 @@ import Animated3, {
 } from "react-native-reanimated";
 
 // src/system/pressable-feedback/pressable-feedback-context.ts
-import { createContext as createContext3 } from "react";
+import { createContext as createContext4 } from "react";
 
 // src/system/slot/create-slot-context.ts
-import { createContext as createContext2, useContext as useContext2 } from "react";
+import { createContext as createContext3, useContext as useContext3 } from "react";
 function createSlotContext(name) {
-  const Context = createContext2(null);
+  const Context = createContext3(null);
   Context.displayName = `XAUI.${name}.Context`;
   function useSlotContext() {
-    const value = useContext2(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.`
@@ -87,7 +140,7 @@ function createSlotContext(name) {
 
 // src/system/pressable-feedback/pressable-feedback-context.ts
 var [FeedbackProvider, useFeedback] = createSlotContext("PressableFeedback");
-var DisableAllContext = createContext3(false);
+var DisableAllContext = createContext4(false);
 
 // src/system/pressable-feedback/pressable-feedback-highlight.tsx
 import { useEffect } from "react";
@@ -323,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) {
@@ -381,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."
     );
@@ -389,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) {
@@ -403,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 = useContext3(DisableAllContext);
+    const inheritedDisableAll = useContext4(DisableAllContext);
     const resolved = resolveAnimation(animation, inheritedDisableAll);
     const Feedback = resolved.none || feedbackVariant === "none" ? StaticFeedback : AnimatedFeedback;
     const body = /* @__PURE__ */ React.createElement(
@@ -642,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;
@@ -651,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) {
@@ -665,6 +718,10 @@ function stringify(node) {
 }
 
 export {
+  mergeRefs,
+  IconContext,
+  useIconContext,
+  Icon,
   PortalContext,
   Portal,
   PortalHost,
@@ -679,7 +736,6 @@ export {
   RIPPLE_COVERAGE,
   resolveAnimation,
   resolveSlotAnimation,
-  mergeRefs,
   mergeProps,
   Slot,
   PressableFeedback3 as PressableFeedback,

package/dist/index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
 
 
@@ -19,7 +19,10 @@
 
 
 
-var _chunkIYFGO523cjs = require('./chunk-IYFGO523.cjs');
+
+
+
+var _chunk46M765BScjs = require('./chunk-46M765BS.cjs');
 
 
 
@@ -40,6 +43,90 @@ var _chunkAW63PTQ4cjs = require('./chunk-AW63PTQ4.cjs');
 
 var _chunk3QBT3Q65cjs = require('./chunk-3QBT3Q65.cjs');
 
+// src/hooks/use-controllable-state.ts
+var _react = require('react');
+
+// src/utils/warn-dev.ts
+function warnDev(message) {
+  if (typeof __DEV__ !== "undefined" && !__DEV__) return;
+  console.warn(`XAUI: ${message}`);
+}
+
+// src/hooks/use-controllable-state.ts
+function useControllableState({
+  value,
+  defaultValue,
+  onChange
+}) {
+  const [uncontrolled, setUncontrolled] = _react.useState.call(void 0, defaultValue);
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : uncontrolled;
+  useControlWarning(isControlled);
+  const latest = _react.useRef.call(void 0, current);
+  latest.current = current;
+  const onChangeRef = _react.useRef.call(void 0, onChange);
+  onChangeRef.current = onChange;
+  const controlled = _react.useRef.call(void 0, isControlled);
+  controlled.current = isControlled;
+  const set = _react.useCallback.call(void 0, (next) => {
+    const resolved = typeof next === "function" ? next(latest.current) : next;
+    if (resolved === latest.current) return;
+    if (!controlled.current) setUncontrolled(resolved);
+    _optionalChain([onChangeRef, 'access', _ => _.current, 'optionalCall', _2 => _2(resolved)]);
+  }, []);
+  return [current, set];
+}
+function useControlWarning(isControlled) {
+  const wasControlled = _react.useRef.call(void 0, isControlled);
+  if (wasControlled.current !== isControlled) {
+    warnDev(
+      `a component switched from ${wasControlled.current ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}. Decide for the life of the component: pass \`value\` always, or never. Passing \`undefined\` for a value you do control reads as "uncontrolled" here.`
+    );
+    wasControlled.current = isControlled;
+  }
+}
+
+// src/hooks/use-merged-ref.ts
+
+function useMergedRef(...refs) {
+  return _react.useMemo.call(void 0, () => _chunk46M765BScjs.mergeRefs.call(void 0, ...refs), refs);
+}
+
+// src/hooks/use-press-state.ts
+
+function usePressState(handlers = {}) {
+  const [isPressed, setIsPressed] = _react.useState.call(void 0, false);
+  const latest = _react.useRef.call(void 0, handlers);
+  latest.current = handlers;
+  const onPressIn = _react.useCallback.call(void 0, (event) => {
+    setIsPressed(true);
+    _optionalChain([latest, 'access', _3 => _3.current, 'access', _4 => _4.onPressIn, 'optionalCall', _5 => _5(event)]);
+  }, []);
+  const onPressOut = _react.useCallback.call(void 0, (event) => {
+    setIsPressed(false);
+    _optionalChain([latest, 'access', _6 => _6.current, 'access', _7 => _7.onPressOut, 'optionalCall', _8 => _8(event)]);
+  }, []);
+  const press = _react.useRef.call(void 0, { onPressIn, onPressOut }).current;
+  return [isPressed, press];
+}
+
+// src/hooks/use-previous.ts
+
+function usePrevious(value) {
+  const previous = _react.useRef.call(void 0, void 0);
+  _react.useEffect.call(void 0, () => {
+    previous.current = value;
+  }, [value]);
+  return previous.current;
+}
+
+
+
+
+
+
+
+
 
 
 
@@ -75,4 +162,4 @@ var _chunk3QBT3Q65cjs = require('./chunk-3QBT3Q65.cjs');
 
 
 
-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;
+exports.HIGHLIGHT_OPACITY = _chunk46M765BScjs.HIGHLIGHT_OPACITY; exports.Icon = _chunk46M765BScjs.Icon; exports.IconContext = _chunk46M765BScjs.IconContext; exports.PRESS_DURATION = _chunk46M765BScjs.PRESS_DURATION; exports.PRESS_SCALE = _chunk46M765BScjs.PRESS_SCALE; exports.Portal = _chunk46M765BScjs.Portal; exports.PortalContext = _chunk46M765BScjs.PortalContext; exports.PortalHost = _chunk46M765BScjs.PortalHost; exports.PressableFeedback = _chunk46M765BScjs.PressableFeedback; exports.RELEASE_DURATION = _chunk46M765BScjs.RELEASE_DURATION; exports.RIPPLE_COVERAGE = _chunk46M765BScjs.RIPPLE_COVERAGE; exports.RIPPLE_DURATION = _chunk46M765BScjs.RIPPLE_DURATION; exports.RIPPLE_OPACITY = _chunk46M765BScjs.RIPPLE_OPACITY; exports.Slot = _chunk46M765BScjs.Slot; exports.ThemeContext = _chunk3QBT3Q65cjs.ThemeContext; exports.XAUIProvider = _chunkAW63PTQ4cjs.XAUIProvider; exports.buildRadius = _chunkAW63PTQ4cjs.buildRadius; exports.buildShadows = _chunkAW63PTQ4cjs.buildShadows; exports.childrenToString = _chunk46M765BScjs.childrenToString; exports.createRecipe = _chunk46M765BScjs.createRecipe; exports.createSlotContext = _chunk46M765BScjs.createSlotContext; exports.createTheme = _chunkAW63PTQ4cjs.createTheme; exports.defaultTheme = _chunkAW63PTQ4cjs.defaultTheme; exports.deriveColors = _chunkAW63PTQ4cjs.deriveColors; exports.deriveTint = _chunk3QBT3Q65cjs.deriveTint; exports.mergeProps = _chunk46M765BScjs.mergeProps; exports.mergeRefs = _chunk46M765BScjs.mergeRefs; exports.palette = _chunkAW63PTQ4cjs.palette; exports.primitives = _chunkAW63PTQ4cjs.primitives; exports.resolveAnimation = _chunk46M765BScjs.resolveAnimation; exports.resolveSlotAnimation = _chunk46M765BScjs.resolveSlotAnimation; exports.sourceKeys = _chunkAW63PTQ4cjs.sourceKeys; exports.tokens = _chunkAW63PTQ4cjs.tokens; exports.useColorMode = _chunk3QBT3Q65cjs.useColorMode; exports.useControllableState = useControllableState; exports.useFeedback = _chunk46M765BScjs.useFeedback; exports.useIconContext = _chunk46M765BScjs.useIconContext; exports.useMergedRef = useMergedRef; exports.usePressState = usePressState; exports.usePrevious = usePrevious; exports.useThemeColor = _chunk3QBT3Q65cjs.useThemeColor; exports.useXAUITheme = _chunk3QBT3Q65cjs.useXAUITheme;

package/dist/index.d.cts

@@ -1,6 +1,64 @@
-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';
+import { RefCallback } from 'react';
+import { PossibleRef } 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, 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';
+import { GestureResponderEvent } from 'react-native';
 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';
-import 'react-native';
 import 'react-native-reanimated';
+
+type ControllableStateOptions<T> = {
+    /** Present means controlled: the caller owns the value and this never stores one. */
+    value?: T;
+    /** The starting value when uncontrolled. */
+    defaultValue: T;
+    /** Called with every new value, controlled or not. */
+    onChange?: (value: T) => void;
+};
+/**
+ * One state that works both ways, so a component never has two code paths for "the
+ * caller drives this" and "we do".
+ *
+ * The setter is stable across renders and reads the current value from a ref, so a
+ * handler built on it can be passed to a memoized child without rebuilding it on every
+ * render — which is the whole reason components reach for this rather than a local
+ * `useState` plus an `if`.
+ */
+declare function useControllableState<T>({ value, defaultValue, onChange, }: ControllableStateOptions<T>): [T, (next: T | ((current: T) => T)) => void];
+
+/**
+ * `mergeRefs` for a component that renders: memoized on the refs it was given, so React
+ * does not detach and reattach every one of them on each render — which it does whenever
+ * a ref callback changes identity, and which costs a node measurement every time.
+ */
+declare function useMergedRef<T>(...refs: Array<PossibleRef<T>>): RefCallback<T>;
+
+type PressHandlers = {
+    onPressIn?: (event: GestureResponderEvent) => void;
+    onPressOut?: (event: GestureResponderEvent) => void;
+};
+/**
+ * The press state a root owns, with the handlers that maintain it.
+ *
+ * It exists because every pressable component needs the same three things and gets one
+ * of them wrong on its own: the state has to be *up here* — the recipe resolves on it
+ * (R5) — the caller's handlers must be **composed, never replaced**, and the returned
+ * handlers must keep their identity so passing them down does not defeat a memo.
+ *
+ * ```tsx
+ * const [isPressed, pressHandlers] = usePressState(props)
+ * const styles = recipe.resolve({ theme, selection, states: { pressed: isPressed } })
+ * <PressableFeedback isPressed={isPressed} {...pressHandlers} />
+ * ```
+ */
+declare function usePressState(handlers?: PressHandlers): [boolean, Required<PressHandlers>];
+
+/**
+ * The value from the render before this one, `undefined` on the first.
+ *
+ * Written in an effect rather than during render on purpose: reading it mid-render would
+ * make "previous" mean something different depending on whether React re-ran the render,
+ * which under StrictMode it does.
+ */
+declare function usePrevious<T>(value: T): T | undefined;
+
+export { type ControllableStateOptions, PossibleRef, type PressHandlers, useControllableState, useMergedRef, usePressState, usePrevious };

package/dist/index.d.ts

@@ -1,6 +1,64 @@
-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';
+import { RefCallback } from 'react';
+import { PossibleRef } 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, 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';
+import { GestureResponderEvent } from 'react-native';
 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';
-import 'react-native';
 import 'react-native-reanimated';
+
+type ControllableStateOptions<T> = {
+    /** Present means controlled: the caller owns the value and this never stores one. */
+    value?: T;
+    /** The starting value when uncontrolled. */
+    defaultValue: T;
+    /** Called with every new value, controlled or not. */
+    onChange?: (value: T) => void;
+};
+/**
+ * One state that works both ways, so a component never has two code paths for "the
+ * caller drives this" and "we do".
+ *
+ * The setter is stable across renders and reads the current value from a ref, so a
+ * handler built on it can be passed to a memoized child without rebuilding it on every
+ * render — which is the whole reason components reach for this rather than a local
+ * `useState` plus an `if`.
+ */
+declare function useControllableState<T>({ value, defaultValue, onChange, }: ControllableStateOptions<T>): [T, (next: T | ((current: T) => T)) => void];
+
+/**
+ * `mergeRefs` for a component that renders: memoized on the refs it was given, so React
+ * does not detach and reattach every one of them on each render — which it does whenever
+ * a ref callback changes identity, and which costs a node measurement every time.
+ */
+declare function useMergedRef<T>(...refs: Array<PossibleRef<T>>): RefCallback<T>;
+
+type PressHandlers = {
+    onPressIn?: (event: GestureResponderEvent) => void;
+    onPressOut?: (event: GestureResponderEvent) => void;
+};
+/**
+ * The press state a root owns, with the handlers that maintain it.
+ *
+ * It exists because every pressable component needs the same three things and gets one
+ * of them wrong on its own: the state has to be *up here* — the recipe resolves on it
+ * (R5) — the caller's handlers must be **composed, never replaced**, and the returned
+ * handlers must keep their identity so passing them down does not defeat a memo.
+ *
+ * ```tsx
+ * const [isPressed, pressHandlers] = usePressState(props)
+ * const styles = recipe.resolve({ theme, selection, states: { pressed: isPressed } })
+ * <PressableFeedback isPressed={isPressed} {...pressHandlers} />
+ * ```
+ */
+declare function usePressState(handlers?: PressHandlers): [boolean, Required<PressHandlers>];
+
+/**
+ * The value from the render before this one, `undefined` on the first.
+ *
+ * Written in an effect rather than during render on purpose: reading it mid-render would
+ * make "previous" mean something different depending on whether React re-ran the render,
+ * which under StrictMode it does.
+ */
+declare function usePrevious<T>(value: T): T | undefined;
+
+export { type ControllableStateOptions, PossibleRef, type PressHandlers, useControllableState, useMergedRef, usePressState, usePrevious };

package/dist/index.js

@@ -1,5 +1,7 @@
 import {
   HIGHLIGHT_OPACITY,
+  Icon,
+  IconContext,
   PRESS_DURATION,
   PRESS_SCALE,
   Portal,
@@ -18,8 +20,9 @@ import {
   mergeRefs,
   resolveAnimation,
   resolveSlotAnimation,
-  useFeedback
-} from "./chunk-ECDWSSHJ.js";
+  useFeedback,
+  useIconContext
+} from "./chunk-GYK2CAX4.js";
 import {
   XAUIProvider,
   buildRadius,
@@ -39,8 +42,87 @@ import {
   useThemeColor,
   useXAUITheme
 } from "./chunk-X2K2FX3W.js";
+
+// src/hooks/use-controllable-state.ts
+import { useCallback, useRef, useState } from "react";
+
+// src/utils/warn-dev.ts
+function warnDev(message) {
+  if (typeof __DEV__ !== "undefined" && !__DEV__) return;
+  console.warn(`XAUI: ${message}`);
+}
+
+// src/hooks/use-controllable-state.ts
+function useControllableState({
+  value,
+  defaultValue,
+  onChange
+}) {
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : uncontrolled;
+  useControlWarning(isControlled);
+  const latest = useRef(current);
+  latest.current = current;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const controlled = useRef(isControlled);
+  controlled.current = isControlled;
+  const set = useCallback((next) => {
+    const resolved = typeof next === "function" ? next(latest.current) : next;
+    if (resolved === latest.current) return;
+    if (!controlled.current) setUncontrolled(resolved);
+    onChangeRef.current?.(resolved);
+  }, []);
+  return [current, set];
+}
+function useControlWarning(isControlled) {
+  const wasControlled = useRef(isControlled);
+  if (wasControlled.current !== isControlled) {
+    warnDev(
+      `a component switched from ${wasControlled.current ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}. Decide for the life of the component: pass \`value\` always, or never. Passing \`undefined\` for a value you do control reads as "uncontrolled" here.`
+    );
+    wasControlled.current = isControlled;
+  }
+}
+
+// src/hooks/use-merged-ref.ts
+import { useMemo } from "react";
+function useMergedRef(...refs) {
+  return useMemo(() => mergeRefs(...refs), refs);
+}
+
+// src/hooks/use-press-state.ts
+import { useCallback as useCallback2, useRef as useRef2, useState as useState2 } from "react";
+function usePressState(handlers = {}) {
+  const [isPressed, setIsPressed] = useState2(false);
+  const latest = useRef2(handlers);
+  latest.current = handlers;
+  const onPressIn = useCallback2((event) => {
+    setIsPressed(true);
+    latest.current.onPressIn?.(event);
+  }, []);
+  const onPressOut = useCallback2((event) => {
+    setIsPressed(false);
+    latest.current.onPressOut?.(event);
+  }, []);
+  const press = useRef2({ onPressIn, onPressOut }).current;
+  return [isPressed, press];
+}
+
+// src/hooks/use-previous.ts
+import { useEffect, useRef as useRef3 } from "react";
+function usePrevious(value) {
+  const previous = useRef3(void 0);
+  useEffect(() => {
+    previous.current = value;
+  }, [value]);
+  return previous.current;
+}
 export {
   HIGHLIGHT_OPACITY,
+  Icon,
+  IconContext,
   PRESS_DURATION,
   PRESS_SCALE,
   Portal,
@@ -72,7 +154,12 @@ export {
   sourceKeys,
   tokens,
   useColorMode,
+  useControllableState,
   useFeedback,
+  useIconContext,
+  useMergedRef,
+  usePressState,
+  usePrevious,
   useThemeColor,
   useXAUITheme
 };

package/dist/system/index.cjs

@@ -19,7 +19,10 @@
 
 
 
-var _chunkIYFGO523cjs = require('../chunk-IYFGO523.cjs');
+
+
+
+var _chunk46M765BScjs = require('../chunk-46M765BS.cjs');
 require('../chunk-3QBT3Q65.cjs');
 
 
@@ -42,4 +45,7 @@ require('../chunk-3QBT3Q65.cjs');
 
 
 
-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;
+
+
+
+exports.HIGHLIGHT_OPACITY = _chunk46M765BScjs.HIGHLIGHT_OPACITY; exports.Icon = _chunk46M765BScjs.Icon; exports.IconContext = _chunk46M765BScjs.IconContext; exports.PRESS_DURATION = _chunk46M765BScjs.PRESS_DURATION; exports.PRESS_SCALE = _chunk46M765BScjs.PRESS_SCALE; exports.Portal = _chunk46M765BScjs.Portal; exports.PortalContext = _chunk46M765BScjs.PortalContext; exports.PortalHost = _chunk46M765BScjs.PortalHost; exports.PressableFeedback = _chunk46M765BScjs.PressableFeedback; exports.RELEASE_DURATION = _chunk46M765BScjs.RELEASE_DURATION; exports.RIPPLE_COVERAGE = _chunk46M765BScjs.RIPPLE_COVERAGE; exports.RIPPLE_DURATION = _chunk46M765BScjs.RIPPLE_DURATION; exports.RIPPLE_OPACITY = _chunk46M765BScjs.RIPPLE_OPACITY; exports.Slot = _chunk46M765BScjs.Slot; exports.childrenToString = _chunk46M765BScjs.childrenToString; exports.createRecipe = _chunk46M765BScjs.createRecipe; exports.createSlotContext = _chunk46M765BScjs.createSlotContext; exports.mergeProps = _chunk46M765BScjs.mergeProps; exports.mergeRefs = _chunk46M765BScjs.mergeRefs; exports.resolveAnimation = _chunk46M765BScjs.resolveAnimation; exports.resolveSlotAnimation = _chunk46M765BScjs.resolveSlotAnimation; exports.useFeedback = _chunk46M765BScjs.useFeedback; exports.useIconContext = _chunk46M765BScjs.useIconContext;

package/dist/system/index.d.cts

@@ -1,10 +1,81 @@
 import * as react from 'react';
-import { ReactNode, Provider, Ref, RefCallback } from 'react';
+import { Ref, ComponentType, ReactNode, Provider, 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';
 
+/** Anything React accepts as a ref, plus the absence of one. */
+type PossibleRef<T> = Ref<T> | undefined;
+/**
+ * The props `mergeProps` knows how to combine. Deliberately loose: it merges whatever a
+ * root hands to whatever child it was given, and neither side is knowable from here.
+ */
+type MergeableProps = Record<string, unknown>;
+type AsChildProps = {
+    /**
+     * Merge this component's props into its single child instead of rendering an element
+     * of its own — a navigation `Link` as a `Button`, a bespoke trigger as a `Select`.
+     */
+    asChild?: boolean;
+};
+
+/**
+ * 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;
 };
@@ -333,21 +404,6 @@ declare function childrenToString(children: ReactNode): string | null;
  */
 declare function createSlotContext<T>(name: string): readonly [Provider<T | null>, () => T];
 
-/** Anything React accepts as a ref, plus the absence of one. */
-type PossibleRef<T> = Ref<T> | undefined;
-/**
- * The props `mergeProps` knows how to combine. Deliberately loose: it merges whatever a
- * root hands to whatever child it was given, and neither side is knowable from here.
- */
-type MergeableProps = Record<string, unknown>;
-type AsChildProps = {
-    /**
-     * Merge this component's props into its single child instead of rendering an element
-     * of its own — a navigation `Link` as a `Button`, a bespoke trigger as a `Select`.
-     */
-    asChild?: boolean;
-};
-
 /**
  * Merges a root's own props into the child it renders through `asChild` (R12). Four
  * rules, and the child wins wherever they do not apply — it is the more specific intent:
@@ -392,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, 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 };
+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,81 @@
 import * as react from 'react';
-import { ReactNode, Provider, Ref, RefCallback } from 'react';
+import { Ref, ComponentType, ReactNode, Provider, 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';
 
+/** Anything React accepts as a ref, plus the absence of one. */
+type PossibleRef<T> = Ref<T> | undefined;
+/**
+ * The props `mergeProps` knows how to combine. Deliberately loose: it merges whatever a
+ * root hands to whatever child it was given, and neither side is knowable from here.
+ */
+type MergeableProps = Record<string, unknown>;
+type AsChildProps = {
+    /**
+     * Merge this component's props into its single child instead of rendering an element
+     * of its own — a navigation `Link` as a `Button`, a bespoke trigger as a `Select`.
+     */
+    asChild?: boolean;
+};
+
+/**
+ * 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;
 };
@@ -333,21 +404,6 @@ declare function childrenToString(children: ReactNode): string | null;
  */
 declare function createSlotContext<T>(name: string): readonly [Provider<T | null>, () => T];
 
-/** Anything React accepts as a ref, plus the absence of one. */
-type PossibleRef<T> = Ref<T> | undefined;
-/**
- * The props `mergeProps` knows how to combine. Deliberately loose: it merges whatever a
- * root hands to whatever child it was given, and neither side is knowable from here.
- */
-type MergeableProps = Record<string, unknown>;
-type AsChildProps = {
-    /**
-     * Merge this component's props into its single child instead of rendering an element
-     * of its own — a navigation `Link` as a `Button`, a bespoke trigger as a `Select`.
-     */
-    asChild?: boolean;
-};
-
 /**
  * Merges a root's own props into the child it renders through `asChild` (R12). Four
  * rules, and the child wins wherever they do not apply — it is the more specific intent:
@@ -392,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, 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 };
+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,5 +1,7 @@
 import {
   HIGHLIGHT_OPACITY,
+  Icon,
+  IconContext,
   PRESS_DURATION,
   PRESS_SCALE,
   Portal,
@@ -18,11 +20,14 @@ import {
   mergeRefs,
   resolveAnimation,
   resolveSlotAnimation,
-  useFeedback
-} from "../chunk-ECDWSSHJ.js";
+  useFeedback,
+  useIconContext
+} from "../chunk-GYK2CAX4.js";
 import "../chunk-X2K2FX3W.js";
 export {
   HIGHLIGHT_OPACITY,
+  Icon,
+  IconContext,
   PRESS_DURATION,
   PRESS_SCALE,
   Portal,
@@ -41,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.4",
+  "version": "0.9.1-alpha.6",
   "description": "Composition-first React Native UI components with native animations powered by Reanimated",
   "keywords": [
     "react-native",