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

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-C0XXjuow.d.cts

@@ -0,0 +1,89 @@
+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;
+    compoundVariants?: ReadonlyArray<CompoundVariant<Slot, 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-CPXFo2rk.d.ts

@@ -0,0 +1,89 @@
+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;
+    compoundVariants?: ReadonlyArray<CompoundVariant<Slot, 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/index.cjs

@@ -1,30 +1,31 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
 
 
 
 
+var _chunk6ARON3XTcjs = require('./chunk-6ARON3XT.cjs');
 
-var _chunkB755PRVJcjs = require('./chunk-B755PRVJ.cjs');
 
 
 
+var _chunkUBA6AEY6cjs = require('./chunk-UBA6AEY6.cjs');
 
 
 
 
 
 
+var _chunk33QILJJHcjs = require('./chunk-33QILJJH.cjs');
 
 
 
 
+var _chunk2WMVDMFVcjs = require('./chunk-2WMVDMFV.cjs');
 
 
-var _chunkNHPQQQ7Pcjs = require('./chunk-NHPQQQ7P.cjs');
 
 
-var _chunkM7P46XKIcjs = require('./chunk-M7P46XKI.cjs');
 
 
 
@@ -45,6 +46,151 @@ var _chunkM7P46XKIcjs = require('./chunk-M7P46XKI.cjs');
 
 
 
+var _chunkA4VD4MHKcjs = require('./chunk-A4VD4MHK.cjs');
 
 
-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;
+var _chunkUVO4GFSWcjs = require('./chunk-UVO4GFSW.cjs');
+
+
+
+
+
+
+
+var _chunkEVXZGNPAcjs = require('./chunk-EVXZGNPA.cjs');
+
+
+
+
+
+
+
+
+
+
+
+var _chunkBHTFIZTQcjs = require('./chunk-BHTFIZTQ.cjs');
+
+
+
+
+
+
+var _chunk57SJ4LJFcjs = require('./chunk-57SJ4LJF.cjs');
+require('./chunk-MC7SY2QH.cjs');
+
+// src/hooks/use-controllable-state.ts
+var _react = require('react');
+function useControllableState({
+  value,
+  defaultValue,
+  onChange
+}) {
+  const [uncontrolled, setUncontrolled] = _react.useState.call(void 0, defaultValue);
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : uncontrolled;
+  useControlWarning(isControlled);
+  const latest = _react.useRef.call(void 0, current);
+  latest.current = current;
+  const onChangeRef = _react.useRef.call(void 0, onChange);
+  onChangeRef.current = onChange;
+  const controlled = _react.useRef.call(void 0, isControlled);
+  controlled.current = isControlled;
+  const set = _react.useCallback.call(void 0, (next) => {
+    const resolved = typeof next === "function" ? next(latest.current) : next;
+    if (resolved === latest.current) return;
+    if (!controlled.current) setUncontrolled(resolved);
+    _optionalChain([onChangeRef, 'access', _ => _.current, 'optionalCall', _2 => _2(resolved)]);
+  }, []);
+  return [current, set];
+}
+function useControlWarning(isControlled) {
+  const wasControlled = _react.useRef.call(void 0, isControlled);
+  if (wasControlled.current !== isControlled) {
+    _chunk6ARON3XTcjs.warnDev.call(void 0, 
+      `a component switched from ${wasControlled.current ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}. Decide for the life of the component: pass \`value\` always, or never. Passing \`undefined\` for a value you do control reads as "uncontrolled" here.`
+    );
+    wasControlled.current = isControlled;
+  }
+}
+
+// src/hooks/use-merged-ref.ts
+
+function useMergedRef(...refs) {
+  return _react.useMemo.call(void 0, () => _chunkEVXZGNPAcjs.mergeRefs.call(void 0, ...refs), refs);
+}
+
+// src/hooks/use-previous.ts
+
+function usePrevious(value) {
+  const previous = _react.useRef.call(void 0, void 0);
+  _react.useEffect.call(void 0, () => {
+    previous.current = value;
+  }, [value]);
+  return previous.current;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.Button = _chunk6ARON3XTcjs.Button; exports.Column = _chunk33QILJJHcjs.Column; exports.FEEDBACK_OVERLAY = _chunkA4VD4MHKcjs.FEEDBACK_OVERLAY; exports.Grid = _chunk33QILJJHcjs.Grid; exports.HIGHLIGHT_DURATION = _chunkA4VD4MHKcjs.HIGHLIGHT_DURATION; exports.HIGHLIGHT_OPACITY = _chunkA4VD4MHKcjs.HIGHLIGHT_OPACITY; exports.Icon = _chunkA4VD4MHKcjs.Icon; exports.IconContext = _chunkA4VD4MHKcjs.IconContext; exports.PRESS_DURATION = _chunkA4VD4MHKcjs.PRESS_DURATION; exports.PRESS_SCALE = _chunkA4VD4MHKcjs.PRESS_SCALE; exports.Portal = _chunk2WMVDMFVcjs.Portal; exports.PortalContext = _chunk2WMVDMFVcjs.PortalContext; exports.PortalHost = _chunk2WMVDMFVcjs.PortalHost; exports.PressableFeedback = _chunkA4VD4MHKcjs.PressableFeedback; exports.RIPPLE_CONFIRM_DURATION = _chunkA4VD4MHKcjs.RIPPLE_CONFIRM_DURATION; exports.RIPPLE_EXPAND_DURATION = _chunkA4VD4MHKcjs.RIPPLE_EXPAND_DURATION; exports.RIPPLE_FADE_IN = _chunkA4VD4MHKcjs.RIPPLE_FADE_IN; exports.RIPPLE_FADE_OUT = _chunkA4VD4MHKcjs.RIPPLE_FADE_OUT; exports.RIPPLE_FADE_OUT_DELAY = _chunkA4VD4MHKcjs.RIPPLE_FADE_OUT_DELAY; exports.RIPPLE_OPACITY = _chunkA4VD4MHKcjs.RIPPLE_OPACITY; exports.RIPPLE_START_SCALE = _chunkA4VD4MHKcjs.RIPPLE_START_SCALE; exports.Row = _chunk33QILJJHcjs.Row; exports.SCALE_REFERENCE_WIDTH = _chunkA4VD4MHKcjs.SCALE_REFERENCE_WIDTH; exports.Slot = _chunkEVXZGNPAcjs.Slot; exports.Stack = _chunk33QILJJHcjs.Stack; exports.TextSpan = _chunkUBA6AEY6cjs.TextSpan; exports.ThemeContext = _chunk57SJ4LJFcjs.ThemeContext; exports.Typography = _chunkUBA6AEY6cjs.Typography; exports.XAUIProvider = _chunkBHTFIZTQcjs.XAUIProvider; exports.buildRadius = _chunkBHTFIZTQcjs.buildRadius; exports.buildShadows = _chunkBHTFIZTQcjs.buildShadows; exports.buttonRecipe = _chunk6ARON3XTcjs.buttonRecipe; exports.childrenToString = _chunkEVXZGNPAcjs.childrenToString; exports.createRecipe = _chunkUVO4GFSWcjs.createRecipe; exports.createSlotContext = _chunkEVXZGNPAcjs.createSlotContext; exports.createTheme = _chunkBHTFIZTQcjs.createTheme; exports.defaultTheme = _chunkBHTFIZTQcjs.defaultTheme; exports.deriveColors = _chunkBHTFIZTQcjs.deriveColors; exports.deriveTint = _chunk57SJ4LJFcjs.deriveTint; exports.markOverlay = _chunkA4VD4MHKcjs.markOverlay; exports.mergeProps = _chunkEVXZGNPAcjs.mergeProps; exports.mergeRefs = _chunkEVXZGNPAcjs.mergeRefs; exports.palette = _chunkBHTFIZTQcjs.palette; exports.pressScaleFor = _chunkA4VD4MHKcjs.pressScaleFor; exports.primitives = _chunkBHTFIZTQcjs.primitives; exports.resolveAnimation = _chunkA4VD4MHKcjs.resolveAnimation; exports.resolveSlotAnimation = _chunkA4VD4MHKcjs.resolveSlotAnimation; exports.rippleRadiusFor = _chunkA4VD4MHKcjs.rippleRadiusFor; exports.sourceKeys = _chunkBHTFIZTQcjs.sourceKeys; exports.tokens = _chunkBHTFIZTQcjs.tokens; exports.typographyRecipe = _chunkUBA6AEY6cjs.typographyRecipe; exports.useButton = _chunk6ARON3XTcjs.useButton; exports.useColorMode = _chunk57SJ4LJFcjs.useColorMode; exports.useControllableState = useControllableState; exports.useFeedback = _chunkA4VD4MHKcjs.useFeedback; exports.useGrid = _chunk33QILJJHcjs.useGrid; exports.useIconContext = _chunkA4VD4MHKcjs.useIconContext; exports.useMergedRef = useMergedRef; exports.usePressState = _chunk6ARON3XTcjs.usePressState; exports.usePrevious = usePrevious; exports.useStyleProps = _chunkEVXZGNPAcjs.useStyleProps; exports.useThemeColor = _chunk57SJ4LJFcjs.useThemeColor; exports.useXAUITheme = _chunk57SJ4LJFcjs.useXAUITheme;