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

package/dist/components/view/index.d.ts

@@ -0,0 +1,152 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as react_native from 'react-native';
+import { View, ViewProps, StyleProp, ViewStyle } from 'react-native';
+import { V as ViewStyleProps } from '../../style-props.type-B1BG5TCm.js';
+
+/**
+ * A horizontal axis.
+ *
+ * ```tsx
+ * <Row gap={8} alignItems="center">
+ *   <Button.Icon as={Trash2} />
+ *   <Typography variant="h6">Supprimer</Typography>
+ * </Row>
+ * ```
+ *
+ * **It contributes one declaration**, `flexDirection: 'row'`, and everything else it looks
+ * like it offers comes from R14: `gap`, `alignItems`, `justifyContent`, `padding` and the
+ * rest are `ViewStyle` keys every node already exposes as props. That is deliberate — the
+ * legacy component invented `mainAxisAlignment`, `crossAxisAlignment` and `mainAxisSize`,
+ * a vocabulary to learn for saying what React Native already says.
+ *
+ * There is no `reversed` prop either. `row` already flips in an RTL layout, which is the
+ * case that matters, and a genuine reversal is `style={{ flexDirection: 'row-reverse' }}`.
+ */
+declare const Row: react.ForwardRefExoticComponent<Omit<react_native.ViewProps, "style"> & {
+    asChild?: boolean;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+} & Omit<ViewStyleProps, "flexDirection" | "pointerEvents" | "style" | "children" | "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "hitSlop" | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "asChild"> & react.RefAttributes<View>>;
+
+/**
+ * A vertical axis.
+ *
+ * ```tsx
+ * <Column gap={16} padding={16}>
+ *   <Typography variant="h3">Projets</Typography>
+ *   <Typography variant="body-sm">Trois en cours, un archivé.</Typography>
+ * </Column>
+ * ```
+ *
+ * **It contributes one declaration**, `flexDirection: 'column'` — which is React Native's
+ * default, so this component exists for what it *says* rather than for what it changes.
+ * A column written as a column reads as a deliberate axis, and its siblings in a layout
+ * are then all named the same way; a bare `View` leaves the reader to infer it.
+ *
+ * Everything else comes from R14: `gap`, `alignItems`, `justifyContent`, `padding` are
+ * `ViewStyle` keys every node already exposes as props, under React Native's own names.
+ */
+declare const Column: react.ForwardRefExoticComponent<Omit<react_native.ViewProps, "style"> & {
+    asChild?: boolean;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+} & Omit<ViewStyleProps, "flexDirection" | "pointerEvents" | "style" | "children" | "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "hitSlop" | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "asChild"> & react.RefAttributes<View>>;
+
+type GridContextValue = {
+    /**
+     * The width of one column in points, or `undefined` on the very first render — the grid
+     * has not been measured yet. A cell falls back to a percentage for that one frame.
+     */
+    cellWidth: number | undefined;
+    columns: number;
+    gap: number;
+};
+/**
+ * R10 — the resolved geometry a cell needs, published by the root that measured it.
+ *
+ * Strict, and named: a `Grid.Item` outside a `Grid` has no column width to span, and
+ * failing with the component's name beats rendering a cell of arbitrary size.
+ */
+declare function useGrid(): GridContextValue;
+
+type AxisOwnProps = {
+    /** R12 — the child element becomes the axis, keeping its direction. */
+    asChild?: boolean;
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+};
+/**
+ * Everything a `View` can be styled with, as props (R14), **minus `flexDirection`** — that
+ * one is the component's identity, and a `Row` that could be told to lay out as a column
+ * would only be a `View` with a longer name. Reversal and the rest go through `style`,
+ * which is the escape hatch for what has no readable prop.
+ *
+ * Note what is *not* declared here: no `mainAxisAlignment`, no `crossAxisAlignment`, no
+ * `gap` prop of our own. They are `justifyContent`, `alignItems` and `gap` — React
+ * Native's own names, carrying React Native's own values, and R14 already exposes every
+ * one of them. A vocabulary of ours would be a second set of words for the same thing.
+ */
+type AxisProps = Omit<ViewProps, 'style'> & AxisOwnProps & Omit<ViewStyleProps, keyof AxisOwnProps | keyof ViewProps | 'flexDirection'>;
+type RowProps = AxisProps;
+type ColumnProps = AxisProps;
+/**
+ * `Stack` and `Stack.Item` take the full R14 set: unlike the axes, neither claims a style
+ * key as its identity. `position` is set by each of them and remains overridable, because
+ * a layer that has to be `relative` for one screen should not need a different component.
+ */
+type StackProps = Omit<ViewProps, 'style'> & AxisOwnProps & Omit<ViewStyleProps, keyof AxisOwnProps | keyof ViewProps>;
+type StackItemProps = StackProps;
+type GridOwnProps = {
+    /** How many columns. Floored, and never below one. @default 2 */
+    columns?: number;
+    /**
+     * The space between cells, in points — React Native's `gap`, taken as a prop because the
+     * root has to read it to size the columns. @default 0
+     */
+    gap?: number;
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+};
+/**
+ * No `asChild`: the root measures itself through `onLayout` and publishes the result, so
+ * it has to be the node it renders. `flexDirection`, `flexWrap` and the three gap keys are
+ * withheld for the same reason — they are the grid's mechanism, not its decoration.
+ */
+type GridProps = Omit<ViewProps, 'style'> & GridOwnProps & Omit<ViewStyleProps, keyof GridOwnProps | keyof ViewProps | 'flexDirection' | 'flexWrap' | 'columnGap' | 'rowGap'>;
+type GridItemOwnProps = {
+    /** How many columns the cell covers. Clamped to the grid's count. @default 1 */
+    span?: number;
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+};
+/** `width` is the grid's answer, so it is not a prop here. */
+type GridItemProps = Omit<ViewProps, 'style'> & GridItemOwnProps & Omit<ViewStyleProps, keyof GridItemOwnProps | keyof ViewProps | 'width'>;
+
+/** Overlaying is composed: the root is the containing block, `Item` is a layer in it. */
+declare const Stack: react.ForwardRefExoticComponent<Omit<react_native.ViewProps, "style"> & {
+    asChild?: boolean;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+} & Omit<ViewStyleProps, "pointerEvents" | "style" | "children" | "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "hitSlop" | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "asChild"> & react.RefAttributes<react_native.View>> & {
+    Item: react.ForwardRefExoticComponent<Omit<react_native.ViewProps, "style"> & {
+        asChild?: boolean;
+        style?: react_native.StyleProp<react_native.ViewStyle>;
+        children?: react.ReactNode;
+    } & Omit<ViewStyleProps, "pointerEvents" | "style" | "children" | "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "hitSlop" | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "asChild"> & react.RefAttributes<react_native.View>>;
+};
+/** Every child is a cell; `Item` is the one that spans more than a column. */
+declare const Grid: react.ForwardRefExoticComponent<Omit<react_native.ViewProps, "style"> & {
+    columns?: number;
+    gap?: number;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+} & Omit<ViewStyleProps, "columnGap" | "flexDirection" | "flexWrap" | "gap" | "rowGap" | "pointerEvents" | "style" | "children" | "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "hitSlop" | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "columns"> & react.RefAttributes<react_native.View>> & {
+    Item: react.ForwardRefExoticComponent<Omit<react_native.ViewProps, "style"> & {
+        span?: number;
+        style?: react_native.StyleProp<react_native.ViewStyle>;
+        children?: react.ReactNode;
+    } & Omit<ViewStyleProps, "width" | "pointerEvents" | "span" | "style" | "children" | "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "hitSlop" | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture"> & react.RefAttributes<react_native.View>>;
+};
+
+export { type AxisProps, Column, type ColumnProps, Grid, type GridContextValue, type GridItemProps, type GridProps, Row, type RowProps, Stack, type StackItemProps, type StackProps, useGrid };

package/dist/components/view/index.js

@@ -0,0 +1,16 @@
+import {
+  Column,
+  Grid,
+  Row,
+  Stack,
+  useGrid
+} from "../../chunk-JXLRHKCQ.js";
+import "../../chunk-EXX6ATAS.js";
+import "../../chunk-GGW42MY4.js";
+export {
+  Column,
+  Grid,
+  Row,
+  Stack,
+  useGrid
+};

package/dist/create-recipe-CC3NNCqF.d.ts

@@ -0,0 +1,94 @@
+import { X as XAUITheme, a as XAUIColors } from './theme.type-C2gNHpEx.js';
+import { ViewStyle, TextStyle } from 'react-native';
+
+/**
+ * A slot is a view or a text node, and a recipe writes one object per slot, so the two
+ * RN style shapes are merged rather than discriminated per slot.
+ */
+type SlotStyle = ViewStyle & TextStyle;
+type SlotStyles<Slot extends string> = Partial<Record<Slot, SlotStyle>>;
+/** The roles a variant consumes. The variant names tokens; `paint` says where they land. */
+type VariantRole = 'bg' | 'bgPressed' | 'fg' | 'border';
+/** Token names per role — no colour value ever appears in a recipe. */
+type VariantTokens = Partial<Record<VariantRole, keyof XAUIColors>>;
+/** The same roles resolved: theme colours, or the slices of a raw `color`. */
+type VariantColors = Partial<Record<VariantRole, string>>;
+/**
+ * `disabled` is applied last of the three: a control that is both pressed and disabled
+ * has to read disabled.
+ */
+type StateName = 'focused' | 'pressed' | 'disabled';
+type States = Partial<Record<StateName, boolean>>;
+/** Reads the theme and the variant's resolved colours; returns one style per slot. */
+type StyleFn<Slot extends string> = (theme: XAUITheme, colors: VariantColors) => SlotStyles<Slot>;
+/** Named axes of finite token values — `{ size: { sm: fn, md: fn } }`. */
+type Axes<Slot extends string> = Record<string, Record<string, StyleFn<Slot>>>;
+/** One value per axis, plus the variant. Missing keys fall back to `defaultVariants`. */
+type Selection<Variant extends string, A extends Axes<string>> = {
+    variant?: Variant;
+} & {
+    [Axis in keyof A]?: Extract<keyof A[Axis], string>;
+};
+type CompoundVariant<Slot extends string, Variant extends string, A extends Axes<Slot>> = {
+    when: Selection<Variant, A>;
+    style: StyleFn<Slot>;
+};
+type RecipeConfig<Slot extends string, Variant extends string, A extends Axes<Slot>> = {
+    /** Every slot the component publishes. Slots a recipe never styles resolve to `{}`. */
+    slots: readonly Slot[];
+    base?: StyleFn<Slot>;
+    variantTokens?: Record<Variant, VariantTokens>;
+    /** Where the variant's colours land — written once, and it holds for every variant. */
+    paint?: StyleFn<Slot>;
+    variants?: A;
+    /**
+     * `NoInfer` for the same reason as `defaultVariants` below: a `when: { variant: 'x' }`
+     * names one variant, and letting inference read `Variant` off it collapses the recipe
+     * to that single value.
+     */
+    compoundVariants?: ReadonlyArray<CompoundVariant<Slot, NoInfer<Variant>, A>>;
+    states?: Partial<Record<StateName, StyleFn<Slot>>>;
+    /**
+     * `NoInfer`, because this is the one place a single variant name appears on its own:
+     * without it, inference reads `Variant` off `{ variant: 'primary' }` and narrows the
+     * whole recipe to that one value, so every other variant becomes a type error at the
+     * call site. `variantTokens` is the declaration; this only picks a default from it.
+     */
+    defaultVariants?: Selection<NoInfer<Variant>, A>;
+};
+/** Stable references: the same object for the same tokens, for the app's lifetime. */
+type ResolvedStyles<Slot extends string> = Readonly<Record<Slot, SlotStyle>>;
+/** A selection with `defaultVariants` already folded in, keyed by axis name. */
+type ResolvedSelection = Readonly<Record<string, string | undefined>>;
+
+type ResolveArgs<Variant extends string, A extends Axes<string>> = {
+    theme: XAUITheme;
+    selection?: Selection<Variant, A>;
+    states?: States;
+};
+type TintArgs<Variant extends string, A extends Axes<string>> = ResolveArgs<Variant, A> & {
+    color: string;
+};
+type Recipe<Slot extends string, Variant extends string, A extends Axes<Slot>> = {
+    readonly slots: readonly Slot[];
+    /** The cached pass: stable `StyleSheet` references, keyed by tokens alone. */
+    resolve(args: ResolveArgs<Variant, A>): ResolvedStyles<Slot>;
+    /**
+     * The tint pass: the same functions run again with `color`'s slices in place of the
+     * theme's tokens. Uncached and allocating, and only ever called when `color` is set.
+     */
+    tint(args: TintArgs<Variant, A>): SlotStyles<Slot>;
+};
+/**
+ * A component's style, declared once. Resolution splits in two because the two halves
+ * have different lifetimes: everything keyed by a finite token is cached forever, and
+ * an arbitrary `color` is recomputed per render — which is what keeps the cache bounded
+ * by the number of token combinations rather than by the palette users invent.
+ *
+ *     const styles = buttonRecipe.resolve({ theme, selection: { variant, size }, states })
+ *     const tint = color ? buttonRecipe.tint({ theme, color, selection, states }) : undefined
+ *     <View style={[styles.root, tint?.root, style]} />
+ */
+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 as A, type CompoundVariant as C, type Recipe as R, type Selection as S, type TintArgs as T, type VariantColors as V, type ResolveArgs as a, type RecipeConfig as b, createRecipe as c, type ResolvedSelection as d, type ResolvedStyles as e, type SlotStyle as f, type SlotStyles as g, type StateName as h, type States as i, type StyleFn as j, type VariantRole as k, type VariantTokens as l };

package/dist/create-recipe-CPBFg7ym.d.cts

@@ -0,0 +1,94 @@
+import { X as XAUITheme, a as XAUIColors } from './theme.type-C2gNHpEx.cjs';
+import { ViewStyle, TextStyle } from 'react-native';
+
+/**
+ * A slot is a view or a text node, and a recipe writes one object per slot, so the two
+ * RN style shapes are merged rather than discriminated per slot.
+ */
+type SlotStyle = ViewStyle & TextStyle;
+type SlotStyles<Slot extends string> = Partial<Record<Slot, SlotStyle>>;
+/** The roles a variant consumes. The variant names tokens; `paint` says where they land. */
+type VariantRole = 'bg' | 'bgPressed' | 'fg' | 'border';
+/** Token names per role — no colour value ever appears in a recipe. */
+type VariantTokens = Partial<Record<VariantRole, keyof XAUIColors>>;
+/** The same roles resolved: theme colours, or the slices of a raw `color`. */
+type VariantColors = Partial<Record<VariantRole, string>>;
+/**
+ * `disabled` is applied last of the three: a control that is both pressed and disabled
+ * has to read disabled.
+ */
+type StateName = 'focused' | 'pressed' | 'disabled';
+type States = Partial<Record<StateName, boolean>>;
+/** Reads the theme and the variant's resolved colours; returns one style per slot. */
+type StyleFn<Slot extends string> = (theme: XAUITheme, colors: VariantColors) => SlotStyles<Slot>;
+/** Named axes of finite token values — `{ size: { sm: fn, md: fn } }`. */
+type Axes<Slot extends string> = Record<string, Record<string, StyleFn<Slot>>>;
+/** One value per axis, plus the variant. Missing keys fall back to `defaultVariants`. */
+type Selection<Variant extends string, A extends Axes<string>> = {
+    variant?: Variant;
+} & {
+    [Axis in keyof A]?: Extract<keyof A[Axis], string>;
+};
+type CompoundVariant<Slot extends string, Variant extends string, A extends Axes<Slot>> = {
+    when: Selection<Variant, A>;
+    style: StyleFn<Slot>;
+};
+type RecipeConfig<Slot extends string, Variant extends string, A extends Axes<Slot>> = {
+    /** Every slot the component publishes. Slots a recipe never styles resolve to `{}`. */
+    slots: readonly Slot[];
+    base?: StyleFn<Slot>;
+    variantTokens?: Record<Variant, VariantTokens>;
+    /** Where the variant's colours land — written once, and it holds for every variant. */
+    paint?: StyleFn<Slot>;
+    variants?: A;
+    /**
+     * `NoInfer` for the same reason as `defaultVariants` below: a `when: { variant: 'x' }`
+     * names one variant, and letting inference read `Variant` off it collapses the recipe
+     * to that single value.
+     */
+    compoundVariants?: ReadonlyArray<CompoundVariant<Slot, NoInfer<Variant>, A>>;
+    states?: Partial<Record<StateName, StyleFn<Slot>>>;
+    /**
+     * `NoInfer`, because this is the one place a single variant name appears on its own:
+     * without it, inference reads `Variant` off `{ variant: 'primary' }` and narrows the
+     * whole recipe to that one value, so every other variant becomes a type error at the
+     * call site. `variantTokens` is the declaration; this only picks a default from it.
+     */
+    defaultVariants?: Selection<NoInfer<Variant>, A>;
+};
+/** Stable references: the same object for the same tokens, for the app's lifetime. */
+type ResolvedStyles<Slot extends string> = Readonly<Record<Slot, SlotStyle>>;
+/** A selection with `defaultVariants` already folded in, keyed by axis name. */
+type ResolvedSelection = Readonly<Record<string, string | undefined>>;
+
+type ResolveArgs<Variant extends string, A extends Axes<string>> = {
+    theme: XAUITheme;
+    selection?: Selection<Variant, A>;
+    states?: States;
+};
+type TintArgs<Variant extends string, A extends Axes<string>> = ResolveArgs<Variant, A> & {
+    color: string;
+};
+type Recipe<Slot extends string, Variant extends string, A extends Axes<Slot>> = {
+    readonly slots: readonly Slot[];
+    /** The cached pass: stable `StyleSheet` references, keyed by tokens alone. */
+    resolve(args: ResolveArgs<Variant, A>): ResolvedStyles<Slot>;
+    /**
+     * The tint pass: the same functions run again with `color`'s slices in place of the
+     * theme's tokens. Uncached and allocating, and only ever called when `color` is set.
+     */
+    tint(args: TintArgs<Variant, A>): SlotStyles<Slot>;
+};
+/**
+ * A component's style, declared once. Resolution splits in two because the two halves
+ * have different lifetimes: everything keyed by a finite token is cached forever, and
+ * an arbitrary `color` is recomputed per render — which is what keeps the cache bounded
+ * by the number of token combinations rather than by the palette users invent.
+ *
+ *     const styles = buttonRecipe.resolve({ theme, selection: { variant, size }, states })
+ *     const tint = color ? buttonRecipe.tint({ theme, color, selection, states }) : undefined
+ *     <View style={[styles.root, tint?.root, style]} />
+ */
+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 as A, type CompoundVariant as C, type Recipe as R, type Selection as S, type TintArgs as T, type VariantColors as V, type ResolveArgs as a, type RecipeConfig as b, createRecipe as c, type ResolvedSelection as d, type ResolvedStyles as e, type SlotStyle as f, type SlotStyles as g, type StateName as h, type States as i, type StyleFn as j, type VariantRole as k, type VariantTokens as l };

package/dist/icon.type-BkcEPJbK.d.ts

@@ -0,0 +1,73 @@
+import { ComponentType, ReactNode } from 'react';
+import { ImageSourcePropType, StyleProp, ImageStyle } from 'react-native';
+import { I as ImageStyleProps } from './style-props.type-B1BG5TCm.js';
+
+/**
+ * The props Lucide, Ionicons and `react-native-vector-icons` all accept — the shape
+ * `as` is handed. It is a convention rather than an interface anyone published, which is
+ * exactly why `Icon` exists: without it every call site computes the two values by hand.
+ */
+type IconComponentProps = {
+    size?: number;
+    color?: string;
+};
+/** 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.
+ */
+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`.
+ */
+type IconProps = IconAsProps | IconChildrenProps | IconSourceProps;
+/** What a component root publishes so the icons inside it need no props at all. */
+type IconContextValue = {
+    size?: number;
+    color?: string;
+};
+
+export type { IconComponentProps as I, IconContextValue as a, IconProps as b };

package/dist/icon.type-Cs1tMX0W.d.cts

@@ -0,0 +1,73 @@
+import { ComponentType, ReactNode } from 'react';
+import { ImageSourcePropType, StyleProp, ImageStyle } from 'react-native';
+import { I as ImageStyleProps } from './style-props.type-B1BG5TCm.cjs';
+
+/**
+ * The props Lucide, Ionicons and `react-native-vector-icons` all accept — the shape
+ * `as` is handed. It is a convention rather than an interface anyone published, which is
+ * exactly why `Icon` exists: without it every call site computes the two values by hand.
+ */
+type IconComponentProps = {
+    size?: number;
+    color?: string;
+};
+/** 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.
+ */
+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`.
+ */
+type IconProps = IconAsProps | IconChildrenProps | IconSourceProps;
+/** What a component root publishes so the icons inside it need no props at all. */
+type IconContextValue = {
+    size?: number;
+    color?: string;
+};
+
+export type { IconComponentProps as I, IconContextValue as a, IconProps as b };