@xaui/native 0.9.1-alpha.1 → 0.9.1-alpha.2

package/dist/{chunk-KFCORXWW.cjs → chunk-B755PRVJ.cjs}

@@ -145,6 +145,130 @@ function apply(fns, theme, colors) {
   return merged;
 }
 
+// src/system/slot/children-to-string.ts
+var _react = require('react');
+function childrenToString(children) {
+  const text = stringify(children);
+  return text === null || text === "" ? null : text;
+}
+function stringify(node) {
+  if (node === null || node === void 0 || typeof node === "boolean") return "";
+  if (typeof node === "string") return node;
+  if (typeof node === "number") return String(node);
+  if (_react.isValidElement.call(void 0, node)) return null;
+  if (Array.isArray(node)) {
+    let text = "";
+    for (const child of node) {
+      const part = stringify(child);
+      if (part === null) return null;
+      text += part;
+    }
+    return text;
+  }
+  return null;
+}
+
+// src/system/slot/create-slot-context.ts
+
+function createSlotContext(name) {
+  const Context = _react.createContext.call(void 0, null);
+  Context.displayName = `XAUI.${name}.Context`;
+  function useSlotContext() {
+    const value = _react.useContext.call(void 0, 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.`
+      );
+      _optionalChain([Error, 'access', _4 => _4.captureStackTrace, 'optionalCall', _5 => _5(
+        error,
+        useSlotContext
+      )]);
+      throw error;
+    }
+    return value;
+  }
+  return [Context.Provider, useSlotContext];
+}
+
+// src/system/slot/merge-refs.ts
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(value);
+      else if (ref) ref.current = value;
+    }
+  };
+}
+
+// src/system/slot/merge-props.ts
+var EVENT_HANDLER = /^on[A-Z]/;
+function mergeProps(ours, theirs) {
+  const merged = { ...ours };
+  for (const key of Object.keys(theirs)) {
+    const ourValue = ours[key];
+    const theirValue = theirs[key];
+    if (EVENT_HANDLER.test(key)) {
+      merged[key] = composeHandlers(ourValue, theirValue);
+    } else if (key === "style") {
+      merged[key] = mergeStyles(ourValue, theirValue);
+    } else if (key === "ref") {
+      merged[key] = mergeRefs(
+        ourValue,
+        theirValue
+      );
+    } else {
+      merged[key] = theirValue;
+    }
+  }
+  return merged;
+}
+function composeHandlers(ours, theirs) {
+  if (typeof ours !== "function") return theirs;
+  if (typeof theirs !== "function") return ours;
+  return (...args) => {
+    ;
+    ours(...args);
+    return theirs(...args);
+  };
+}
+function mergeStyles(ours, theirs) {
+  if (typeof ours === "function" || typeof theirs === "function") {
+    return (state) => [
+      resolveStyle(ours, state),
+      resolveStyle(theirs, state)
+    ];
+  }
+  return [ours, theirs];
+}
+function resolveStyle(style, state) {
+  return typeof style === "function" ? style(state) : style;
+}
+
+// src/system/slot/slot.tsx
+
+var Slot = _react.forwardRef.call(void 0, function Slot2({ children, ...ours }, ref) {
+  if (!_react.isValidElement.call(void 0, children)) {
+    throw new Error(
+      "XAUI: asChild expects exactly one React element as its child, and merges the component's props into it. Text, a fragment, several children or none give it nothing to merge into \u2014 drop `asChild` to render the component itself."
+    );
+  }
+  const child = children;
+  const merged = mergeProps(ours, child.props);
+  merged.ref = mergeRefs(ref, refOf(child));
+  return _react.cloneElement.call(void 0, child, merged);
+});
+Slot.displayName = "XAUI.Slot";
+function refOf(element) {
+  const fromProps = element.props.ref;
+  const fromElement = element.ref;
+  return _nullishCoalesce(fromProps, () => ( fromElement));
+}
+
+
+
+
+
+
 
 
-exports.createRecipe = createRecipe;
+exports.createRecipe = createRecipe; exports.childrenToString = childrenToString; exports.createSlotContext = createSlotContext; exports.mergeRefs = mergeRefs; exports.mergeProps = mergeProps; exports.Slot = Slot;

package/dist/{chunk-N357EQCZ.js → chunk-RCP3SD26.js}

@@ -145,6 +145,130 @@ function apply(fns, theme, colors) {
   return merged;
 }
 
+// src/system/slot/children-to-string.ts
+import { isValidElement } from "react";
+function childrenToString(children) {
+  const text = stringify(children);
+  return text === null || text === "" ? null : text;
+}
+function stringify(node) {
+  if (node === null || node === void 0 || typeof node === "boolean") return "";
+  if (typeof node === "string") return node;
+  if (typeof node === "number") return String(node);
+  if (isValidElement(node)) return null;
+  if (Array.isArray(node)) {
+    let text = "";
+    for (const child of node) {
+      const part = stringify(child);
+      if (part === null) return null;
+      text += part;
+    }
+    return text;
+  }
+  return null;
+}
+
+// src/system/slot/create-slot-context.ts
+import { createContext, useContext } from "react";
+function createSlotContext(name) {
+  const Context = createContext(null);
+  Context.displayName = `XAUI.${name}.Context`;
+  function useSlotContext() {
+    const value = useContext(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.`
+      );
+      Error.captureStackTrace?.(
+        error,
+        useSlotContext
+      );
+      throw error;
+    }
+    return value;
+  }
+  return [Context.Provider, useSlotContext];
+}
+
+// src/system/slot/merge-refs.ts
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(value);
+      else if (ref) ref.current = value;
+    }
+  };
+}
+
+// src/system/slot/merge-props.ts
+var EVENT_HANDLER = /^on[A-Z]/;
+function mergeProps(ours, theirs) {
+  const merged = { ...ours };
+  for (const key of Object.keys(theirs)) {
+    const ourValue = ours[key];
+    const theirValue = theirs[key];
+    if (EVENT_HANDLER.test(key)) {
+      merged[key] = composeHandlers(ourValue, theirValue);
+    } else if (key === "style") {
+      merged[key] = mergeStyles(ourValue, theirValue);
+    } else if (key === "ref") {
+      merged[key] = mergeRefs(
+        ourValue,
+        theirValue
+      );
+    } else {
+      merged[key] = theirValue;
+    }
+  }
+  return merged;
+}
+function composeHandlers(ours, theirs) {
+  if (typeof ours !== "function") return theirs;
+  if (typeof theirs !== "function") return ours;
+  return (...args) => {
+    ;
+    ours(...args);
+    return theirs(...args);
+  };
+}
+function mergeStyles(ours, theirs) {
+  if (typeof ours === "function" || typeof theirs === "function") {
+    return (state) => [
+      resolveStyle(ours, state),
+      resolveStyle(theirs, state)
+    ];
+  }
+  return [ours, theirs];
+}
+function resolveStyle(style, state) {
+  return typeof style === "function" ? style(state) : style;
+}
+
+// src/system/slot/slot.tsx
+import { cloneElement, forwardRef, isValidElement as isValidElement2 } from "react";
+var Slot = forwardRef(function Slot2({ children, ...ours }, ref) {
+  if (!isValidElement2(children)) {
+    throw new Error(
+      "XAUI: asChild expects exactly one React element as its child, and merges the component's props into it. Text, a fragment, several children or none give it nothing to merge into \u2014 drop `asChild` to render the component itself."
+    );
+  }
+  const child = children;
+  const merged = mergeProps(ours, child.props);
+  merged.ref = mergeRefs(ref, refOf(child));
+  return cloneElement(child, merged);
+});
+Slot.displayName = "XAUI.Slot";
+function refOf(element) {
+  const fromProps = element.props.ref;
+  const fromElement = element.ref;
+  return fromProps ?? fromElement;
+}
+
 export {
-  createRecipe
+  createRecipe,
+  childrenToString,
+  createSlotContext,
+  mergeRefs,
+  mergeProps,
+  Slot
 };

package/dist/index.cjs

@@ -1,6 +1,11 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkKFCORXWWcjs = require('./chunk-KFCORXWW.cjs');
+
+
+
+
+
+var _chunkB755PRVJcjs = require('./chunk-B755PRVJ.cjs');
 
 
 
@@ -37,4 +42,9 @@ var _chunkM7P46XKIcjs = require('./chunk-M7P46XKI.cjs');
 
 
 
-exports.ThemeContext = _chunkNHPQQQ7Pcjs.ThemeContext; exports.XAUIProvider = _chunkNHPQQQ7Pcjs.XAUIProvider; exports.buildRadius = _chunkNHPQQQ7Pcjs.buildRadius; exports.buildShadows = _chunkNHPQQQ7Pcjs.buildShadows; exports.createRecipe = _chunkKFCORXWWcjs.createRecipe; exports.createTheme = _chunkNHPQQQ7Pcjs.createTheme; exports.defaultTheme = _chunkNHPQQQ7Pcjs.defaultTheme; exports.deriveColors = _chunkNHPQQQ7Pcjs.deriveColors; exports.deriveTint = _chunkM7P46XKIcjs.deriveTint; exports.palette = _chunkNHPQQQ7Pcjs.palette; exports.primitives = _chunkNHPQQQ7Pcjs.primitives; exports.sourceKeys = _chunkNHPQQQ7Pcjs.sourceKeys; exports.tokens = _chunkNHPQQQ7Pcjs.tokens; exports.useColorMode = _chunkNHPQQQ7Pcjs.useColorMode; exports.useThemeColor = _chunkNHPQQQ7Pcjs.useThemeColor; exports.useXAUITheme = _chunkNHPQQQ7Pcjs.useXAUITheme;
+
+
+
+
+
+exports.Slot = _chunkB755PRVJcjs.Slot; exports.ThemeContext = _chunkNHPQQQ7Pcjs.ThemeContext; exports.XAUIProvider = _chunkNHPQQQ7Pcjs.XAUIProvider; exports.buildRadius = _chunkNHPQQQ7Pcjs.buildRadius; exports.buildShadows = _chunkNHPQQQ7Pcjs.buildShadows; exports.childrenToString = _chunkB755PRVJcjs.childrenToString; exports.createRecipe = _chunkB755PRVJcjs.createRecipe; exports.createSlotContext = _chunkB755PRVJcjs.createSlotContext; exports.createTheme = _chunkNHPQQQ7Pcjs.createTheme; exports.defaultTheme = _chunkNHPQQQ7Pcjs.defaultTheme; exports.deriveColors = _chunkNHPQQQ7Pcjs.deriveColors; exports.deriveTint = _chunkM7P46XKIcjs.deriveTint; exports.mergeProps = _chunkB755PRVJcjs.mergeProps; exports.mergeRefs = _chunkB755PRVJcjs.mergeRefs; exports.palette = _chunkNHPQQQ7Pcjs.palette; exports.primitives = _chunkNHPQQQ7Pcjs.primitives; exports.sourceKeys = _chunkNHPQQQ7Pcjs.sourceKeys; exports.tokens = _chunkNHPQQQ7Pcjs.tokens; exports.useColorMode = _chunkNHPQQQ7Pcjs.useColorMode; exports.useThemeColor = _chunkNHPQQQ7Pcjs.useThemeColor; exports.useXAUITheme = _chunkNHPQQQ7Pcjs.useXAUITheme;

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-export { Axes, CompoundVariant, Recipe, RecipeConfig, ResolveArgs, ResolvedSelection, ResolvedStyles, Selection, SlotStyle, SlotStyles, StateName, States, StyleFn, TintArgs, VariantColors, VariantRole, VariantTokens, createRecipe } from './system/index.cjs';
+export { AsChildProps, Axes, CompoundVariant, MergeableProps, PossibleRef, Recipe, RecipeConfig, ResolveArgs, ResolvedSelection, ResolvedStyles, Selection, Slot, SlotProps, SlotStyle, SlotStyles, StateName, States, StyleFn, TintArgs, VariantColors, VariantRole, VariantTokens, childrenToString, createRecipe, createSlotContext, mergeProps, mergeRefs } 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-B3ODSLbB.cjs';
 import 'react-native';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { Axes, CompoundVariant, Recipe, RecipeConfig, ResolveArgs, ResolvedSelection, ResolvedStyles, Selection, SlotStyle, SlotStyles, StateName, States, StyleFn, TintArgs, VariantColors, VariantRole, VariantTokens, createRecipe } from './system/index.js';
+export { AsChildProps, Axes, CompoundVariant, MergeableProps, PossibleRef, Recipe, RecipeConfig, ResolveArgs, ResolvedSelection, ResolvedStyles, Selection, Slot, SlotProps, SlotStyle, SlotStyles, StateName, States, StyleFn, TintArgs, VariantColors, VariantRole, VariantTokens, childrenToString, createRecipe, createSlotContext, mergeProps, mergeRefs } 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-B3ODSLbB.js';
 import 'react-native';

package/dist/index.js

@@ -1,6 +1,11 @@
 import {
-  createRecipe
-} from "./chunk-N357EQCZ.js";
+  Slot,
+  childrenToString,
+  createRecipe,
+  createSlotContext,
+  mergeProps,
+  mergeRefs
+} from "./chunk-RCP3SD26.js";
 import {
   ThemeContext,
   XAUIProvider,
@@ -21,15 +26,20 @@ import {
   deriveTint
 } from "./chunk-RBNCR5KB.js";
 export {
+  Slot,
   ThemeContext,
   XAUIProvider,
   buildRadius,
   buildShadows,
+  childrenToString,
   createRecipe,
+  createSlotContext,
   createTheme,
   defaultTheme,
   deriveColors,
   deriveTint,
+  mergeProps,
+  mergeRefs,
   palette,
   primitives,
   sourceKeys,

package/dist/system/index.cjs

@@ -1,7 +1,17 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkKFCORXWWcjs = require('../chunk-KFCORXWW.cjs');
+
+
+
+
+
+var _chunkB755PRVJcjs = require('../chunk-B755PRVJ.cjs');
 require('../chunk-M7P46XKI.cjs');
 
 
-exports.createRecipe = _chunkKFCORXWWcjs.createRecipe;
+
+
+
+
+
+exports.Slot = _chunkB755PRVJcjs.Slot; exports.childrenToString = _chunkB755PRVJcjs.childrenToString; exports.createRecipe = _chunkB755PRVJcjs.createRecipe; exports.createSlotContext = _chunkB755PRVJcjs.createSlotContext; exports.mergeProps = _chunkB755PRVJcjs.mergeProps; exports.mergeRefs = _chunkB755PRVJcjs.mergeRefs;

package/dist/system/index.d.cts

@@ -1,5 +1,7 @@
 import { g as XAUITheme, X as XAUIColors } from '../theme.type-B3ODSLbB.cjs';
 import { ViewStyle, TextStyle } from 'react-native';
+import * as react from 'react';
+import { ReactNode, Provider, Ref, RefCallback } from 'react';
 
 /**
  * A slot is a view or a text node, and a recipe writes one object per slot, so the two
@@ -80,4 +82,93 @@ type Recipe<Slot extends string, Variant extends string, A extends Axes<Slot>> =
  */
 declare function createRecipe<Slot extends string, Variant extends string, const A extends Axes<Slot>>(config: RecipeConfig<Slot, Variant, A>): Recipe<Slot, Variant, A>;
 
-export { type Axes, type CompoundVariant, type Recipe, type RecipeConfig, type ResolveArgs, type ResolvedSelection, type ResolvedStyles, type Selection, type SlotStyle, type SlotStyles, type StateName, type States, type StyleFn, type TintArgs, type VariantColors, type VariantRole, type VariantTokens, createRecipe };
+/**
+ * R3: the string a root should wrap in its default text slot, or `null` when it should
+ * render its children as they are.
+ *
+ * The whole tree is stringified recursively rather than the first child inspected. That
+ * is what makes `<Button>{count} items</Button>` work — children there are the array
+ * `[3, ' items']`, and an `isValidElement` check on the first entry would call it an
+ * element-free tree only by accident, while a check for "is the first child a string"
+ * would miss it outright.
+ *
+ * `null` for an empty result as much as for a tree containing an element: in both cases
+ * there is nothing to wrap, and a root's fallback — render the children — is right for
+ * both. It also keeps `<Button>{false}</Button>` from mounting an empty text node.
+ */
+declare function childrenToString(children: ReactNode): string | null;
+
+/**
+ * A context a slot cannot read by accident. Every compound gets one, and it carries
+ * **resolved** values — style references the root already computed, not tokens for the
+ * slot to resolve again (R5).
+ *
+ * ```ts
+ * const [ButtonProvider, useButton] = createSlotContext<ButtonContext>('Button')
+ * ```
+ *
+ * The tuple is what lets each compound name its own hook, which R10 requires it to
+ * export. `name` gives both halves of the error, so there is one place to spell it.
+ */
+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:
+ *
+ * - **Event handlers compose.** Both run, ours first: the component's own behaviour (the
+ *   press state that drives its styles) happens before the child's side effect (the
+ *   navigation). Replacing one with the other is the bug this exists to prevent.
+ * - **Styles stack**, ours under the child's, so the child can override.
+ * - **`ref`s merge** through `mergeRefs`. React 19 passes `ref` as an ordinary prop, so
+ *   it arrives here rather than beside the props, and dropping it would sever the root's
+ *   handle on the node.
+ * - **Everything else: the child's value wins**, and ours fills in what it left unset.
+ */
+declare function mergeProps(ours: MergeableProps, theirs: MergeableProps): MergeableProps;
+
+/**
+ * One callback that feeds several refs — what lets a root keep its own handle on a node
+ * while still honouring the ref its caller passed (R9), and what `asChild` needs to
+ * forward a ref into the child it merges into (R12).
+ *
+ * It returns nothing on purpose. React 19 reads a ref callback's return value as a
+ * cleanup function while React 18 ignores it, and this package supports both; letting
+ * a merged cleanup through would behave differently on each. React calls every ref with
+ * `null` on unmount anyway, which this forwards.
+ */
+declare function mergeRefs<T>(...refs: Array<PossibleRef<T>>): RefCallback<T>;
+
+type SlotProps = MergeableProps & {
+    children?: ReactNode;
+};
+/**
+ * The render branch behind `asChild` (R12). A root picks it instead of its own element:
+ *
+ * ```tsx
+ * const Root = asChild ? Slot : Pressable
+ * return <Root ref={ref} {...rootProps}>{children}</Root>
+ * ```
+ *
+ * One line per root, which is the point — forty-seven roots each hand-rolling a
+ * `cloneElement` and a ref merge would drift, and R12 has to hold uniformly from the
+ * first component or the ref signature of the whole core changes later.
+ */
+declare const Slot: react.ForwardRefExoticComponent<Omit<SlotProps, "ref"> & react.RefAttributes<unknown>>;
+
+export { type AsChildProps, type Axes, type CompoundVariant, type MergeableProps, type PossibleRef, type Recipe, type RecipeConfig, type ResolveArgs, type ResolvedSelection, type ResolvedStyles, type Selection, Slot, 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 };

package/dist/system/index.d.ts

@@ -1,5 +1,7 @@
 import { g as XAUITheme, X as XAUIColors } from '../theme.type-B3ODSLbB.js';
 import { ViewStyle, TextStyle } from 'react-native';
+import * as react from 'react';
+import { ReactNode, Provider, Ref, RefCallback } from 'react';
 
 /**
  * A slot is a view or a text node, and a recipe writes one object per slot, so the two
@@ -80,4 +82,93 @@ type Recipe<Slot extends string, Variant extends string, A extends Axes<Slot>> =
  */
 declare function createRecipe<Slot extends string, Variant extends string, const A extends Axes<Slot>>(config: RecipeConfig<Slot, Variant, A>): Recipe<Slot, Variant, A>;
 
-export { type Axes, type CompoundVariant, type Recipe, type RecipeConfig, type ResolveArgs, type ResolvedSelection, type ResolvedStyles, type Selection, type SlotStyle, type SlotStyles, type StateName, type States, type StyleFn, type TintArgs, type VariantColors, type VariantRole, type VariantTokens, createRecipe };
+/**
+ * R3: the string a root should wrap in its default text slot, or `null` when it should
+ * render its children as they are.
+ *
+ * The whole tree is stringified recursively rather than the first child inspected. That
+ * is what makes `<Button>{count} items</Button>` work — children there are the array
+ * `[3, ' items']`, and an `isValidElement` check on the first entry would call it an
+ * element-free tree only by accident, while a check for "is the first child a string"
+ * would miss it outright.
+ *
+ * `null` for an empty result as much as for a tree containing an element: in both cases
+ * there is nothing to wrap, and a root's fallback — render the children — is right for
+ * both. It also keeps `<Button>{false}</Button>` from mounting an empty text node.
+ */
+declare function childrenToString(children: ReactNode): string | null;
+
+/**
+ * A context a slot cannot read by accident. Every compound gets one, and it carries
+ * **resolved** values — style references the root already computed, not tokens for the
+ * slot to resolve again (R5).
+ *
+ * ```ts
+ * const [ButtonProvider, useButton] = createSlotContext<ButtonContext>('Button')
+ * ```
+ *
+ * The tuple is what lets each compound name its own hook, which R10 requires it to
+ * export. `name` gives both halves of the error, so there is one place to spell it.
+ */
+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:
+ *
+ * - **Event handlers compose.** Both run, ours first: the component's own behaviour (the
+ *   press state that drives its styles) happens before the child's side effect (the
+ *   navigation). Replacing one with the other is the bug this exists to prevent.
+ * - **Styles stack**, ours under the child's, so the child can override.
+ * - **`ref`s merge** through `mergeRefs`. React 19 passes `ref` as an ordinary prop, so
+ *   it arrives here rather than beside the props, and dropping it would sever the root's
+ *   handle on the node.
+ * - **Everything else: the child's value wins**, and ours fills in what it left unset.
+ */
+declare function mergeProps(ours: MergeableProps, theirs: MergeableProps): MergeableProps;
+
+/**
+ * One callback that feeds several refs — what lets a root keep its own handle on a node
+ * while still honouring the ref its caller passed (R9), and what `asChild` needs to
+ * forward a ref into the child it merges into (R12).
+ *
+ * It returns nothing on purpose. React 19 reads a ref callback's return value as a
+ * cleanup function while React 18 ignores it, and this package supports both; letting
+ * a merged cleanup through would behave differently on each. React calls every ref with
+ * `null` on unmount anyway, which this forwards.
+ */
+declare function mergeRefs<T>(...refs: Array<PossibleRef<T>>): RefCallback<T>;
+
+type SlotProps = MergeableProps & {
+    children?: ReactNode;
+};
+/**
+ * The render branch behind `asChild` (R12). A root picks it instead of its own element:
+ *
+ * ```tsx
+ * const Root = asChild ? Slot : Pressable
+ * return <Root ref={ref} {...rootProps}>{children}</Root>
+ * ```
+ *
+ * One line per root, which is the point — forty-seven roots each hand-rolling a
+ * `cloneElement` and a ref merge would drift, and R12 has to hold uniformly from the
+ * first component or the ref signature of the whole core changes later.
+ */
+declare const Slot: react.ForwardRefExoticComponent<Omit<SlotProps, "ref"> & react.RefAttributes<unknown>>;
+
+export { type AsChildProps, type Axes, type CompoundVariant, type MergeableProps, type PossibleRef, type Recipe, type RecipeConfig, type ResolveArgs, type ResolvedSelection, type ResolvedStyles, type Selection, Slot, 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 };

package/dist/system/index.js

@@ -1,7 +1,17 @@
 import {
-  createRecipe
-} from "../chunk-N357EQCZ.js";
+  Slot,
+  childrenToString,
+  createRecipe,
+  createSlotContext,
+  mergeProps,
+  mergeRefs
+} from "../chunk-RCP3SD26.js";
 import "../chunk-RBNCR5KB.js";
 export {
-  createRecipe
+  Slot,
+  childrenToString,
+  createRecipe,
+  createSlotContext,
+  mergeProps,
+  mergeRefs
 };

package/package.json

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