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

package/dist/provider/xaui-provider.d.cts

@@ -0,0 +1,15 @@
+import type { XAUIProviderProps } from './xaui-provider.type';
+/**
+ * Wraps the app once.
+ *
+ * `theme` is expected to come from `createTheme` at module level. The provider selects a
+ * mode from an already-resolved set rather than memoizing on the prop's identity — which
+ * is what the v0 provider did, rebuilding every style in the app on each parent render.
+ *
+ * It also mounts the `PortalHost` every overlay renders into. That is here rather than in
+ * the app because forgetting it is silent: `Portal` renders nothing outside a host, so a
+ * select would open onto an empty screen with no error to read. An app that needs the
+ * host somewhere else — under a gesture root, or inside its own navigation container —
+ * sets `hasPortalHost={false}` and mounts one itself.
+ */
+export declare function XAUIProvider({ children, theme, colorMode, hasPortalHost, }: XAUIProviderProps): import("react").JSX.Element;

package/dist/provider/xaui-provider.d.ts

@@ -0,0 +1,15 @@
+import type { XAUIProviderProps } from './xaui-provider.type';
+/**
+ * Wraps the app once.
+ *
+ * `theme` is expected to come from `createTheme` at module level. The provider selects a
+ * mode from an already-resolved set rather than memoizing on the prop's identity — which
+ * is what the v0 provider did, rebuilding every style in the app on each parent render.
+ *
+ * It also mounts the `PortalHost` every overlay renders into. That is here rather than in
+ * the app because forgetting it is silent: `Portal` renders nothing outside a host, so a
+ * select would open onto an empty screen with no error to read. An app that needs the
+ * host somewhere else — under a gesture root, or inside its own navigation container —
+ * sets `hasPortalHost={false}` and mounts one itself.
+ */
+export declare function XAUIProvider({ children, theme, colorMode, hasPortalHost, }: XAUIProviderProps): import("react").JSX.Element;

package/dist/provider/xaui-provider.type.d.cts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import type { XAUIThemeSet } from '../theme/theme.type';
+/** `'system'` follows the device; the resolved value is never `'system'`. */
+export type ColorModePreference = 'light' | 'dark' | 'system';
+export type XAUIProviderProps = {
+    children: ReactNode;
+    /** Build it once with `createTheme`, at module level. */
+    theme?: XAUIThemeSet;
+    /** Controlled: the library owns neither the state nor its persistence. */
+    colorMode?: ColorModePreference;
+    /**
+     * Mounts the `PortalHost` overlays render into. Set false only to mount one yourself,
+     * somewhere the provider cannot reach — under a gesture root, say. Without a host
+     * anywhere, `Portal` renders nothing and overlays are silently absent.
+     *
+     * @default true
+     */
+    hasPortalHost?: boolean;
+};

package/dist/provider/xaui-provider.type.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import type { XAUIThemeSet } from '../theme/theme.type';
+/** `'system'` follows the device; the resolved value is never `'system'`. */
+export type ColorModePreference = 'light' | 'dark' | 'system';
+export type XAUIProviderProps = {
+    children: ReactNode;
+    /** Build it once with `createTheme`, at module level. */
+    theme?: XAUIThemeSet;
+    /** Controlled: the library owns neither the state nor its persistence. */
+    colorMode?: ColorModePreference;
+    /**
+     * Mounts the `PortalHost` overlays render into. Set false only to mount one yourself,
+     * somewhere the provider cannot reach — under a gesture root, say. Without a host
+     * anywhere, `Portal` renders nothing and overlays are silently absent.
+     *
+     * @default true
+     */
+    hasPortalHost?: boolean;
+};

package/dist/system/anchored/anchored-motion.d.cts

@@ -0,0 +1,20 @@
+import type { Placement } from '../../utils/placement';
+/**
+ * A panel that grows out of the thing that opened it.
+ *
+ * It starts slightly small and offset **towards** the trigger, so the motion points back
+ * at what opened it: a panel below enters upwards, one above enters downwards, one beside
+ * enters sideways. That is the only reason placement reaches the animation at all.
+ *
+ * Shared by the `Select` and the `Popover`, which is the second use §2 bis waits for. It
+ * lives in `system/` rather than in `utils/` because a `Keyframe` is Reanimated's, and
+ * `utils/` has to stay importable by a test that never mounts anything.
+ */
+export declare function anchoredEntering(placement: Placement): import("react-native-reanimated").ReanimatedKeyframe;
+/**
+ * The mirror, shorter. Closing is an acknowledgement rather than an arrival, and a
+ * dismissal that takes as long as the opening feels like the control is arguing.
+ */
+export declare function anchoredExiting(placement: Placement): import("react-native-reanimated").ReanimatedKeyframe;
+export declare const overlayEntering: import("react-native-reanimated").ReanimatedKeyframe;
+export declare const overlayExiting: import("react-native-reanimated").ReanimatedKeyframe;

package/dist/system/anchored/anchored-motion.d.ts

@@ -0,0 +1,20 @@
+import type { Placement } from '../../utils/placement';
+/**
+ * A panel that grows out of the thing that opened it.
+ *
+ * It starts slightly small and offset **towards** the trigger, so the motion points back
+ * at what opened it: a panel below enters upwards, one above enters downwards, one beside
+ * enters sideways. That is the only reason placement reaches the animation at all.
+ *
+ * Shared by the `Select` and the `Popover`, which is the second use §2 bis waits for. It
+ * lives in `system/` rather than in `utils/` because a `Keyframe` is Reanimated's, and
+ * `utils/` has to stay importable by a test that never mounts anything.
+ */
+export declare function anchoredEntering(placement: Placement): import("react-native-reanimated").ReanimatedKeyframe;
+/**
+ * The mirror, shorter. Closing is an acknowledgement rather than an arrival, and a
+ * dismissal that takes as long as the opening feels like the control is arguing.
+ */
+export declare function anchoredExiting(placement: Placement): import("react-native-reanimated").ReanimatedKeyframe;
+export declare const overlayEntering: import("react-native-reanimated").ReanimatedKeyframe;
+export declare const overlayExiting: import("react-native-reanimated").ReanimatedKeyframe;

package/dist/system/anchored/index.d.cts

@@ -0,0 +1,2 @@
+export { anchoredEntering, anchoredExiting, overlayEntering, overlayExiting, } from './anchored-motion';
+export { INDICATOR_ROTATION, INDICATOR_SPRING } from './indicator-spring';

package/dist/system/anchored/index.d.ts

@@ -0,0 +1,2 @@
+export { anchoredEntering, anchoredExiting, overlayEntering, overlayExiting, } from './anchored-motion';
+export { INDICATOR_ROTATION, INDICATOR_SPRING } from './indicator-spring';

package/dist/system/anchored/indicator-spring.d.cts

@@ -0,0 +1,14 @@
+/**
+ * The chevron's turn, shared by the `Select` and the `Accordion`.
+ *
+ * HeroUI's numbers. Heavily damped against a very high stiffness: it arrives in about a
+ * fifth of a second and does not overshoot, which is what a turn of 180 degrees needs —
+ * an oscillating chevron reads as a bug rather than as motion.
+ */
+export declare const INDICATOR_SPRING: {
+    readonly damping: 140;
+    readonly stiffness: 1000;
+    readonly mass: 4;
+};
+/** Degrees. Down when closed, up when open, turning anticlockwise as HeroUI's does. */
+export declare const INDICATOR_ROTATION: readonly [0, -180];

package/dist/system/anchored/indicator-spring.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The chevron's turn, shared by the `Select` and the `Accordion`.
+ *
+ * HeroUI's numbers. Heavily damped against a very high stiffness: it arrives in about a
+ * fifth of a second and does not overshoot, which is what a turn of 180 degrees needs —
+ * an oscillating chevron reads as a bug rather than as motion.
+ */
+export declare const INDICATOR_SPRING: {
+    readonly damping: 140;
+    readonly stiffness: 1000;
+    readonly mass: 4;
+};
+/** Degrees. Down when closed, up when open, turning anticlockwise as HeroUI's does. */
+export declare const INDICATOR_ROTATION: readonly [0, -180];

package/dist/system/close-button/close-button.d.cts

@@ -0,0 +1,37 @@
+import { View } from 'react-native';
+/**
+ * The dismiss affordance shared by everything that can be dismissed — `Chip.Close`,
+ * `Alert.Close`, and the `Dialog`, `Snackbar` and `Sheet` of P5. Each of those is a
+ * five-line call site handing it the styles its own recipe resolved:
+ *
+ * ```tsx
+ * const { closeStyle, closeGlyphStyle, isDisabled } = useChip()
+ *
+ * <CloseButtonBase
+ *   name="Chip.Close"
+ *   baseStyle={closeStyle}
+ *   glyphStyle={closeGlyphStyle}
+ *   isDisabled={isDisabled}
+ * />
+ * ```
+ *
+ * **It owns its press state**, unlike every other pressable in the library, where the
+ * component root owns it because its recipe resolves on it. Here the surrounding
+ * component is usually not a control at all, and where it is, the two are different
+ * targets: pressing the cross must not read as pressing the chip around it.
+ *
+ * With no children it draws its own cross from two bars a quarter turn apart, so a
+ * dismissible component works in a project that has installed no icon set.
+ *
+ * **It is not the public `CloseButton`.** That one is a component with a recipe of its own,
+ * for a dismiss on something the library does not own; this is the behaviour underneath
+ * both, and it is the base rather than the component because a close *inside* a component
+ * takes that component's colours and that component's scale, resolved once at its root.
+ */
+export declare const CloseButtonBase: import("react").ForwardRefExoticComponent<{
+    name: string;
+    children?: import("react").ReactNode;
+    baseStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    glyphStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    style?: import("react-native").StyleProp<import("react-native").ViewStyle> | ((state: import("react-native").PressableStateCallbackType) => import("react-native").StyleProp<import("react-native").ViewStyle>);
+} & Omit<import("..").PressableFeedbackProps, "isPressed" | "style" | "children"> & import("react").RefAttributes<View>>;

package/dist/system/close-button/close-button.d.ts

@@ -0,0 +1,37 @@
+import { View } from 'react-native';
+/**
+ * The dismiss affordance shared by everything that can be dismissed — `Chip.Close`,
+ * `Alert.Close`, and the `Dialog`, `Snackbar` and `Sheet` of P5. Each of those is a
+ * five-line call site handing it the styles its own recipe resolved:
+ *
+ * ```tsx
+ * const { closeStyle, closeGlyphStyle, isDisabled } = useChip()
+ *
+ * <CloseButtonBase
+ *   name="Chip.Close"
+ *   baseStyle={closeStyle}
+ *   glyphStyle={closeGlyphStyle}
+ *   isDisabled={isDisabled}
+ * />
+ * ```
+ *
+ * **It owns its press state**, unlike every other pressable in the library, where the
+ * component root owns it because its recipe resolves on it. Here the surrounding
+ * component is usually not a control at all, and where it is, the two are different
+ * targets: pressing the cross must not read as pressing the chip around it.
+ *
+ * With no children it draws its own cross from two bars a quarter turn apart, so a
+ * dismissible component works in a project that has installed no icon set.
+ *
+ * **It is not the public `CloseButton`.** That one is a component with a recipe of its own,
+ * for a dismiss on something the library does not own; this is the behaviour underneath
+ * both, and it is the base rather than the component because a close *inside* a component
+ * takes that component's colours and that component's scale, resolved once at its root.
+ */
+export declare const CloseButtonBase: import("react").ForwardRefExoticComponent<{
+    name: string;
+    children?: import("react").ReactNode;
+    baseStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    glyphStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    style?: import("react-native").StyleProp<import("react-native").ViewStyle> | ((state: import("react-native").PressableStateCallbackType) => import("react-native").StyleProp<import("react-native").ViewStyle>);
+} & Omit<import("..").PressableFeedbackProps, "isPressed" | "style" | "children"> & import("react").RefAttributes<View>>;

package/dist/system/close-button/close-button.recipe.d.cts

@@ -0,0 +1,23 @@
+import type { SlotStyle } from '../recipe';
+import type { XAUITheme } from '../../theme/theme.type';
+/** The two slots a component publishes for a `CloseButtonBase`: its box and one cross bar. */
+export type CloseButtonSlots = {
+    close: SlotStyle;
+    closeGlyph: SlotStyle;
+};
+/**
+ * The cross's own geometry, for the `base` of any recipe that hosts a `CloseButtonBase`:
+ *
+ * ```ts
+ * base: theme => ({ ...closeButtonGeometry(theme), root: { … } })
+ * ```
+ *
+ * The bar's thickness and the box's centring belong to the button rather than to the
+ * component around it, so they are written once here. What stays in the recipe is what is
+ * genuinely the component's: the size of the box and the length of the bar, both of which
+ * follow that component's own scale.
+ *
+ * Two bars are rendered, rotated a quarter turn apart, which is why only one is described
+ * and why it is positioned absolutely — they overlap at the centre of the box.
+ */
+export declare function closeButtonGeometry(theme: XAUITheme): CloseButtonSlots;

package/dist/system/close-button/close-button.recipe.d.ts

@@ -0,0 +1,23 @@
+import type { SlotStyle } from '../recipe';
+import type { XAUITheme } from '../../theme/theme.type';
+/** The two slots a component publishes for a `CloseButtonBase`: its box and one cross bar. */
+export type CloseButtonSlots = {
+    close: SlotStyle;
+    closeGlyph: SlotStyle;
+};
+/**
+ * The cross's own geometry, for the `base` of any recipe that hosts a `CloseButtonBase`:
+ *
+ * ```ts
+ * base: theme => ({ ...closeButtonGeometry(theme), root: { … } })
+ * ```
+ *
+ * The bar's thickness and the box's centring belong to the button rather than to the
+ * component around it, so they are written once here. What stays in the recipe is what is
+ * genuinely the component's: the size of the box and the length of the bar, both of which
+ * follow that component's own scale.
+ *
+ * Two bars are rendered, rotated a quarter turn apart, which is why only one is described
+ * and why it is positioned absolutely — they overlap at the centre of the box.
+ */
+export declare function closeButtonGeometry(theme: XAUITheme): CloseButtonSlots;

package/dist/system/close-button/close-button.style.d.cts

@@ -0,0 +1,17 @@
+/**
+ * The two bars of the built-in cross, a quarter turn apart. Pure geometry with no token
+ * in it, which is why it is here and not in a recipe — the bar's length, thickness and
+ * colour all come from the component that hosts the button.
+ */
+export declare const closeButtonSheet: {
+    bar: {
+        transform: {
+            rotate: string;
+        }[];
+    };
+    barMirrored: {
+        transform: {
+            rotate: string;
+        }[];
+    };
+};

package/dist/system/close-button/close-button.style.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The two bars of the built-in cross, a quarter turn apart. Pure geometry with no token
+ * in it, which is why it is here and not in a recipe — the bar's length, thickness and
+ * colour all come from the component that hosts the button.
+ */
+export declare const closeButtonSheet: {
+    bar: {
+        transform: {
+            rotate: string;
+        }[];
+    };
+    barMirrored: {
+        transform: {
+            rotate: string;
+        }[];
+    };
+};

package/dist/system/close-button/close-button.type.d.cts

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+import type { PressableStateCallbackType, StyleProp, ViewStyle } from 'react-native';
+import type { PressableFeedbackProps } from '../pressable-feedback';
+type CloseButtonOwnProps = {
+    /**
+     * Names the slot in the development warning about a missing label — `'Chip.Close'`,
+     * `'Alert.Close'`. Without it the warning would say "a close button" and leave the
+     * reader to find which one.
+     */
+    name: string;
+    /**
+     * Replaces the built-in cross — an `Icon`, or any glyph. Unset, the button draws its
+     * own from two rotated bars, which is what makes a dismissible component work in a
+     * project that has installed no icon set.
+     */
+    children?: ReactNode;
+    /**
+     * The style the surrounding component's recipe resolved for this node, applied under
+     * the caller's own. It is separate from `style` because `style` may be `Pressable`'s
+     * function form, and a function cannot be merged into an array without being resolved
+     * first — which only this component can do, since it owns the press state.
+     */
+    baseStyle?: StyleProp<ViewStyle>;
+    /** One bar of the cross: its length, its thickness and its colour, from the recipe. */
+    glyphStyle?: StyleProp<ViewStyle>;
+    /** R9 — `Pressable`'s function form as much as an object or an array. */
+    style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
+};
+/**
+ * R14 — it renders a `PressableFeedback`, so it carries that node's style keys as props
+ * through it.
+ */
+export type CloseButtonBaseProps = CloseButtonOwnProps & Omit<PressableFeedbackProps, 'isPressed' | 'style' | 'children'>;
+export {};

package/dist/system/close-button/close-button.type.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+import type { PressableStateCallbackType, StyleProp, ViewStyle } from 'react-native';
+import type { PressableFeedbackProps } from '../pressable-feedback';
+type CloseButtonOwnProps = {
+    /**
+     * Names the slot in the development warning about a missing label — `'Chip.Close'`,
+     * `'Alert.Close'`. Without it the warning would say "a close button" and leave the
+     * reader to find which one.
+     */
+    name: string;
+    /**
+     * Replaces the built-in cross — an `Icon`, or any glyph. Unset, the button draws its
+     * own from two rotated bars, which is what makes a dismissible component work in a
+     * project that has installed no icon set.
+     */
+    children?: ReactNode;
+    /**
+     * The style the surrounding component's recipe resolved for this node, applied under
+     * the caller's own. It is separate from `style` because `style` may be `Pressable`'s
+     * function form, and a function cannot be merged into an array without being resolved
+     * first — which only this component can do, since it owns the press state.
+     */
+    baseStyle?: StyleProp<ViewStyle>;
+    /** One bar of the cross: its length, its thickness and its colour, from the recipe. */
+    glyphStyle?: StyleProp<ViewStyle>;
+    /** R9 — `Pressable`'s function form as much as an object or an array. */
+    style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
+};
+/**
+ * R14 — it renders a `PressableFeedback`, so it carries that node's style keys as props
+ * through it.
+ */
+export type CloseButtonBaseProps = CloseButtonOwnProps & Omit<PressableFeedbackProps, 'isPressed' | 'style' | 'children'>;
+export {};

package/dist/system/close-button/index.d.cts

@@ -0,0 +1,4 @@
+export { CloseButtonBase } from './close-button';
+export { closeButtonGeometry } from './close-button.recipe';
+export type { CloseButtonSlots } from './close-button.recipe';
+export type { CloseButtonBaseProps } from './close-button.type';

package/dist/system/close-button/index.d.ts

@@ -0,0 +1,4 @@
+export { CloseButtonBase } from './close-button';
+export { closeButtonGeometry } from './close-button.recipe';
+export type { CloseButtonSlots } from './close-button.recipe';
+export type { CloseButtonBaseProps } from './close-button.type';

package/dist/system/icon/chevron-down-icon.d.cts

@@ -0,0 +1,14 @@
+import type { IconComponentProps } from './icon.type';
+/**
+ * The chevron the library ships, rather than requiring one from the caller: a control
+ * whose whole affordance is "there is more under here" cannot be written without it, and
+ * asking for an icon package to draw one arrow is a peer dependency for a chevron.
+ *
+ * It sits in `system/` because two components draw it — `Select` turns it half a turn
+ * when its list opens, `Accordion` when its panel does. §2 bis: promotion at the second
+ * use, never by anticipation.
+ */
+export declare function ChevronDownIcon({ size, color, }: IconComponentProps): import("react").JSX.Element;
+export declare namespace ChevronDownIcon {
+    var displayName: string;
+}

package/dist/system/icon/chevron-down-icon.d.ts

@@ -0,0 +1,14 @@
+import type { IconComponentProps } from './icon.type';
+/**
+ * The chevron the library ships, rather than requiring one from the caller: a control
+ * whose whole affordance is "there is more under here" cannot be written without it, and
+ * asking for an icon package to draw one arrow is a peer dependency for a chevron.
+ *
+ * It sits in `system/` because two components draw it — `Select` turns it half a turn
+ * when its list opens, `Accordion` when its panel does. §2 bis: promotion at the second
+ * use, never by anticipation.
+ */
+export declare function ChevronDownIcon({ size, color, }: IconComponentProps): import("react").JSX.Element;
+export declare namespace ChevronDownIcon {
+    var displayName: string;
+}

package/dist/system/icon/icon-context.d.cts

@@ -0,0 +1,8 @@
+import type { IconContextValue } from './icon.type';
+/**
+ * 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.
+ */
+export declare const IconContext: import("react").Context<IconContextValue>;
+export declare function useIconContext(): IconContextValue;

package/dist/system/icon/icon-context.d.ts

@@ -0,0 +1,8 @@
+import type { IconContextValue } from './icon.type';
+/**
+ * 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.
+ */
+export declare const IconContext: import("react").Context<IconContextValue>;
+export declare function useIconContext(): IconContextValue;

package/dist/system/icon/icon.d.cts

@@ -0,0 +1,24 @@
+import type { IconProps } from './icon.type';
+/**
+ * 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.
+ *
+ * The props are taken whole rather than destructured, because they are a union: which
+ * keys exist depends on the form, and narrowing is what lets `style` be reachable in the
+ * one branch that renders a node and unwritable in the two that do not.
+ */
+export declare function Icon(props: IconProps): import("react").JSX.Element;
+export declare namespace Icon {
+    var displayName: string;
+}

package/dist/system/icon/icon.d.ts

@@ -0,0 +1,24 @@
+import type { IconProps } from './icon.type';
+/**
+ * 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.
+ *
+ * The props are taken whole rather than destructured, because they are a union: which
+ * keys exist depends on the form, and narrowing is what lets `style` be reachable in the
+ * one branch that renders a node and unwritable in the two that do not.
+ */
+export declare function Icon(props: IconProps): import("react").JSX.Element;
+export declare namespace Icon {
+    var displayName: string;
+}

package/dist/system/icon/icon.type.d.cts

@@ -0,0 +1,71 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { ImageSourcePropType, ImageStyle, StyleProp } from 'react-native';
+import type { ImageStyleProps } from '../style-props';
+/**
+ * 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.
+ */
+export type IconComponentProps = {
+    size?: number;
+    color?: string;
+};
+/** What every form takes, and the only lever the two non-rendering ones have. */
+type IconBase = {
+    /** Overrides what the surrounding slot asked for. */
+    size?: number;
+    /** A raw value (R7), never a token. Overrides the slot's. */
+    color?: string;
+};
+/**
+ * An icon component — `size` and `color` are injected into it.
+ *
+ * No style props and no `style`: we do not render this node, the third party does, and
+ * there is no published interface that says it would accept either. Wrapping it in a view
+ * to make them work would add a level of depth to every icon in the library.
+ */
+type IconAsProps = IconBase & {
+    as: ComponentType<IconComponentProps>;
+    children?: never;
+    source?: never;
+};
+/**
+ * A raw `react-native-svg` element, cloned with the resolved size and colour.
+ *
+ * No style props and no `style` either: the node is the caller's own element, and they can
+ * style it where they wrote it.
+ */
+type IconChildrenProps = IconBase & {
+    as?: never;
+    children: ReactNode;
+    source?: never;
+};
+/**
+ * An image, tinted with the resolved colour — **the one form that carries R14**, because
+ * it is the one where we render the node.
+ */
+export type IconSourceProps = IconBase & ImageStyleProps & {
+    as?: never;
+    children?: never;
+    source: ImageSourcePropType;
+    style?: StyleProp<ImageStyle>;
+};
+/**
+ * Three forms, and the type says which one you are in.
+ *
+ * The union is what makes R14's boundary checkable rather than merely documented. When
+ * every form declared the style props, `<Icon as={Trash2} marginEnd={8} />` compiled and
+ * did nothing at all — the prop was dropped on the two forms that do not render the node,
+ * silently, and only a comment said so. Now it is a compile error that points at `size`
+ * and `color`, which are the levers those forms actually have.
+ *
+ * It also makes the three mutually exclusive, which they always were at runtime: `as`
+ * wins over children, and children over `source`.
+ */
+export type IconProps = IconAsProps | IconChildrenProps | IconSourceProps;
+/** What a component root publishes so the icons inside it need no props at all. */
+export type IconContextValue = {
+    size?: number;
+    color?: string;
+};
+export {};

package/dist/system/icon/icon.type.d.ts

@@ -0,0 +1,71 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { ImageSourcePropType, ImageStyle, StyleProp } from 'react-native';
+import type { ImageStyleProps } from '../style-props';
+/**
+ * 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.
+ */
+export type IconComponentProps = {
+    size?: number;
+    color?: string;
+};
+/** What every form takes, and the only lever the two non-rendering ones have. */
+type IconBase = {
+    /** Overrides what the surrounding slot asked for. */
+    size?: number;
+    /** A raw value (R7), never a token. Overrides the slot's. */
+    color?: string;
+};
+/**
+ * An icon component — `size` and `color` are injected into it.
+ *
+ * No style props and no `style`: we do not render this node, the third party does, and
+ * there is no published interface that says it would accept either. Wrapping it in a view
+ * to make them work would add a level of depth to every icon in the library.
+ */
+type IconAsProps = IconBase & {
+    as: ComponentType<IconComponentProps>;
+    children?: never;
+    source?: never;
+};
+/**
+ * A raw `react-native-svg` element, cloned with the resolved size and colour.
+ *
+ * No style props and no `style` either: the node is the caller's own element, and they can
+ * style it where they wrote it.
+ */
+type IconChildrenProps = IconBase & {
+    as?: never;
+    children: ReactNode;
+    source?: never;
+};
+/**
+ * An image, tinted with the resolved colour — **the one form that carries R14**, because
+ * it is the one where we render the node.
+ */
+export type IconSourceProps = IconBase & ImageStyleProps & {
+    as?: never;
+    children?: never;
+    source: ImageSourcePropType;
+    style?: StyleProp<ImageStyle>;
+};
+/**
+ * Three forms, and the type says which one you are in.
+ *
+ * The union is what makes R14's boundary checkable rather than merely documented. When
+ * every form declared the style props, `<Icon as={Trash2} marginEnd={8} />` compiled and
+ * did nothing at all — the prop was dropped on the two forms that do not render the node,
+ * silently, and only a comment said so. Now it is a compile error that points at `size`
+ * and `color`, which are the levers those forms actually have.
+ *
+ * It also makes the three mutually exclusive, which they always were at runtime: `as`
+ * wins over children, and children over `source`.
+ */
+export type IconProps = IconAsProps | IconChildrenProps | IconSourceProps;
+/** What a component root publishes so the icons inside it need no props at all. */
+export type IconContextValue = {
+    size?: number;
+    color?: string;
+};
+export {};