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

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

@@ -0,0 +1,21 @@
+import { ScaffoldNavigator } from './scaffold-navigator';
+import { ScaffoldStatusBar } from './scaffold-status-bar';
+export declare const Scaffold: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode;
+    variant?: import("./scaffold.type").ScaffoldVariant;
+    color?: string;
+    asChild?: boolean;
+} & Omit<import("react-native").ViewProps, keyof {
+    children?: import("react").ReactNode;
+    variant?: import("./scaffold.type").ScaffoldVariant;
+    color?: string;
+    asChild?: boolean;
+}> & Omit<import("../..").ViewStyleProps, "color" | "pointerEvents" | "style" | "children" | "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "onLayout" | "removeClippedSubviews" | "testID" | "nativeID" | "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" | "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" | "asChild" | "variant"> & import("react").RefAttributes<import("react-native").View>> & {
+    StatusBar: typeof ScaffoldStatusBar;
+    Navigator: typeof ScaffoldNavigator;
+};
+export { useScaffold } from './scaffold.context';
+export { scaffoldRecipe } from './scaffold.recipe';
+export { mergeScreenOptions } from './scaffold.utils';
+export type { NavigatorScreenOptions, ScreenOptionsProp } from './scaffold.utils';
+export type { ScaffoldContextValue, ScaffoldNavigatorProps, ScaffoldProps, ScaffoldScreenOptions, ScaffoldSlot, ScaffoldStatusBarProps, ScaffoldVariant, } from './scaffold.type';

package/dist/components/scaffold/index.js

@@ -0,0 +1,20 @@
+import {
+  Scaffold,
+  mergeScreenOptions,
+  scaffoldRecipe,
+  useScaffold
+} from "../../chunk-T5HE5RRF.js";
+import "../../chunk-WFZDAXDI.js";
+import "../../chunk-DKVXTMIJ.js";
+import "../../chunk-3Q42X6EQ.js";
+import "../../chunk-TTZOIXKE.js";
+import "../../chunk-36PRYGAM.js";
+import "../../chunk-EGLLDKN6.js";
+import "../../chunk-Z6JBWRPL.js";
+import "../../chunk-M63GFNKV.js";
+export {
+  Scaffold,
+  mergeScreenOptions,
+  scaffoldRecipe,
+  useScaffold
+};

package/dist/components/scaffold/scaffold-navigator.d.cts

@@ -0,0 +1,33 @@
+import type { ReactElement } from 'react';
+import type { ScreenOptionsProp } from './scaffold.utils';
+import type { ScaffoldNavigatorProps } from './scaffold.type';
+/**
+ * The app's navigator, dressed from the theme.
+ *
+ * ```tsx
+ * <Scaffold.Navigator>
+ *   <Stack screenOptions={{ headerRight: () => <ThemeToggle /> }}>
+ *     <Stack.Screen name="index" options={{ title: 'Accueil' }} />
+ *   </Stack>
+ * </Scaffold.Navigator>
+ * ```
+ *
+ * The navigator arrives as the child and leaves as the same navigator: the slot clones it
+ * with the theme's `screenOptions` merged **under** the app's own. Nothing else is touched
+ * — `initialRouteName`, the `Screen` children, a nested layout, the navigator's type — so
+ * a `Stack`, a `Tabs` or a `Drawer` all work, and none of them is a dependency of the
+ * library. That is the whole reason this is a slot rather than a `<Stack>` XAUI renders.
+ *
+ * **There is no `asChild` here, and no default element either.** The prop distinguishes
+ * "render yourself" from "dress my element", and this slot has only the second mode —
+ * there is no navigator XAUI could render in place of the app's.
+ *
+ * `Scaffold.Navigator` is a convenience, not the only path: an app that would rather spread
+ * the options itself reads them off `useScaffold`.
+ */
+export declare function ScaffoldNavigator({ children }: ScaffoldNavigatorProps): ReactElement<{
+    screenOptions?: ScreenOptionsProp;
+}, string | import("react").JSXElementConstructor<any>>;
+export declare namespace ScaffoldNavigator {
+    var displayName: string;
+}

package/dist/components/scaffold/scaffold-navigator.d.ts

@@ -0,0 +1,33 @@
+import type { ReactElement } from 'react';
+import type { ScreenOptionsProp } from './scaffold.utils';
+import type { ScaffoldNavigatorProps } from './scaffold.type';
+/**
+ * The app's navigator, dressed from the theme.
+ *
+ * ```tsx
+ * <Scaffold.Navigator>
+ *   <Stack screenOptions={{ headerRight: () => <ThemeToggle /> }}>
+ *     <Stack.Screen name="index" options={{ title: 'Accueil' }} />
+ *   </Stack>
+ * </Scaffold.Navigator>
+ * ```
+ *
+ * The navigator arrives as the child and leaves as the same navigator: the slot clones it
+ * with the theme's `screenOptions` merged **under** the app's own. Nothing else is touched
+ * — `initialRouteName`, the `Screen` children, a nested layout, the navigator's type — so
+ * a `Stack`, a `Tabs` or a `Drawer` all work, and none of them is a dependency of the
+ * library. That is the whole reason this is a slot rather than a `<Stack>` XAUI renders.
+ *
+ * **There is no `asChild` here, and no default element either.** The prop distinguishes
+ * "render yourself" from "dress my element", and this slot has only the second mode —
+ * there is no navigator XAUI could render in place of the app's.
+ *
+ * `Scaffold.Navigator` is a convenience, not the only path: an app that would rather spread
+ * the options itself reads them off `useScaffold`.
+ */
+export declare function ScaffoldNavigator({ children }: ScaffoldNavigatorProps): ReactElement<{
+    screenOptions?: ScreenOptionsProp;
+}, string | import("react").JSXElementConstructor<any>>;
+export declare namespace ScaffoldNavigator {
+    var displayName: string;
+}

package/dist/components/scaffold/scaffold-status-bar.d.cts

@@ -0,0 +1,21 @@
+import type { ScaffoldStatusBarProps } from './scaffold.type';
+/**
+ * The status bar, in the ink the mode asks for — light text on a dark app, and the reverse.
+ *
+ * ```tsx
+ * <Scaffold.StatusBar />
+ * <Scaffold.StatusBar translucent hidden={isPlaying} />
+ * ```
+ *
+ * React Native's own `StatusBar`, not `expo-status-bar`: the values are the same and the
+ * dependency is one the library already has. An app that prefers Expo's reads
+ * `barContent` off `useAppearance` and renders it itself — the one-word spelling is there
+ * for exactly that.
+ *
+ * `backgroundColor` is Android-only, and it is the **header's** ground rather than the
+ * page's, because that is what the bar sits on.
+ */
+export declare function ScaffoldStatusBar({ barStyle, backgroundColor, ...rest }: ScaffoldStatusBarProps): import("react").JSX.Element;
+export declare namespace ScaffoldStatusBar {
+    var displayName: string;
+}

package/dist/components/scaffold/scaffold-status-bar.d.ts

@@ -0,0 +1,21 @@
+import type { ScaffoldStatusBarProps } from './scaffold.type';
+/**
+ * The status bar, in the ink the mode asks for — light text on a dark app, and the reverse.
+ *
+ * ```tsx
+ * <Scaffold.StatusBar />
+ * <Scaffold.StatusBar translucent hidden={isPlaying} />
+ * ```
+ *
+ * React Native's own `StatusBar`, not `expo-status-bar`: the values are the same and the
+ * dependency is one the library already has. An app that prefers Expo's reads
+ * `barContent` off `useAppearance` and renders it itself — the one-word spelling is there
+ * for exactly that.
+ *
+ * `backgroundColor` is Android-only, and it is the **header's** ground rather than the
+ * page's, because that is what the bar sits on.
+ */
+export declare function ScaffoldStatusBar({ barStyle, backgroundColor, ...rest }: ScaffoldStatusBarProps): import("react").JSX.Element;
+export declare namespace ScaffoldStatusBar {
+    var displayName: string;
+}

package/dist/components/scaffold/scaffold.context.d.cts

@@ -0,0 +1,12 @@
+import type { ScaffoldContextValue } from './scaffold.type';
+/**
+ * R10 — `useScaffold` is exported so an app can dress a navigator the two slots do not
+ * cover. A drawer's `drawerStyle`, an Android navigation-bar module, a header rendered by
+ * hand: all of them read the same resolved values the slots read.
+ *
+ * ```tsx
+ * const { screenOptions } = useScaffold()
+ * <Tabs screenOptions={{ ...screenOptions, tabBarStyle: screenOptions.headerStyle }} />
+ * ```
+ */
+export declare const ScaffoldProvider: import("react").Provider<ScaffoldContextValue | null>, useScaffold: () => ScaffoldContextValue;

package/dist/components/scaffold/scaffold.context.d.ts

@@ -0,0 +1,12 @@
+import type { ScaffoldContextValue } from './scaffold.type';
+/**
+ * R10 — `useScaffold` is exported so an app can dress a navigator the two slots do not
+ * cover. A drawer's `drawerStyle`, an Android navigation-bar module, a header rendered by
+ * hand: all of them read the same resolved values the slots read.
+ *
+ * ```tsx
+ * const { screenOptions } = useScaffold()
+ * <Tabs screenOptions={{ ...screenOptions, tabBarStyle: screenOptions.headerStyle }} />
+ * ```
+ */
+export declare const ScaffoldProvider: import("react").Provider<ScaffoldContextValue | null>, useScaffold: () => ScaffoldContextValue;

package/dist/components/scaffold/scaffold.d.cts

@@ -0,0 +1,40 @@
+import { View } from 'react-native';
+/**
+ * The app's chrome, painted from the theme: the ground under every screen, the status bar
+ * over it, and the options the app's navigator is dressed with.
+ *
+ * ```tsx
+ * <XAUIProvider colorMode={colorMode}>
+ *   <Scaffold>
+ *     <Scaffold.StatusBar />
+ *     <Scaffold.Navigator>
+ *       <Stack>
+ *         <Stack.Screen name="index" options={{ title: 'Accueil' }} />
+ *       </Stack>
+ *     </Scaffold.Navigator>
+ *   </Scaffold>
+ * </XAUIProvider>
+ * ```
+ *
+ * **It depends on no navigator, and on Expo least of all.** `Scaffold.Navigator` takes the
+ * app's own navigator as its child and hands it five style keys, so Expo Router, React
+ * Navigation's native stack, a drawer or a set of tabs are all dressed by the same
+ * component and none of them is imported here. Routing stays entirely the app's: this
+ * writes no route, wraps no screen, and touches nothing the navigator was configured with.
+ *
+ * It is `useAppearance` with the wiring done. The hook stays the answer for a chrome this
+ * does not reach — an Android navigation bar, a header rendered by hand.
+ *
+ * It has to be **under** `XAUIProvider`, which is what resolves the theme it reads.
+ */
+export declare const ScaffoldRoot: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode;
+    variant?: import("./scaffold.type").ScaffoldVariant;
+    color?: string;
+    asChild?: boolean;
+} & Omit<import("react-native").ViewProps, keyof {
+    children?: import("react").ReactNode;
+    variant?: import("./scaffold.type").ScaffoldVariant;
+    color?: string;
+    asChild?: boolean;
+}> & Omit<import("../..").ViewStyleProps, "color" | "pointerEvents" | "style" | "children" | "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "onLayout" | "removeClippedSubviews" | "testID" | "nativeID" | "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" | "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" | "asChild" | "variant"> & import("react").RefAttributes<View>>;

package/dist/components/scaffold/scaffold.d.ts

@@ -0,0 +1,40 @@
+import { View } from 'react-native';
+/**
+ * The app's chrome, painted from the theme: the ground under every screen, the status bar
+ * over it, and the options the app's navigator is dressed with.
+ *
+ * ```tsx
+ * <XAUIProvider colorMode={colorMode}>
+ *   <Scaffold>
+ *     <Scaffold.StatusBar />
+ *     <Scaffold.Navigator>
+ *       <Stack>
+ *         <Stack.Screen name="index" options={{ title: 'Accueil' }} />
+ *       </Stack>
+ *     </Scaffold.Navigator>
+ *   </Scaffold>
+ * </XAUIProvider>
+ * ```
+ *
+ * **It depends on no navigator, and on Expo least of all.** `Scaffold.Navigator` takes the
+ * app's own navigator as its child and hands it five style keys, so Expo Router, React
+ * Navigation's native stack, a drawer or a set of tabs are all dressed by the same
+ * component and none of them is imported here. Routing stays entirely the app's: this
+ * writes no route, wraps no screen, and touches nothing the navigator was configured with.
+ *
+ * It is `useAppearance` with the wiring done. The hook stays the answer for a chrome this
+ * does not reach — an Android navigation bar, a header rendered by hand.
+ *
+ * It has to be **under** `XAUIProvider`, which is what resolves the theme it reads.
+ */
+export declare const ScaffoldRoot: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode;
+    variant?: import("./scaffold.type").ScaffoldVariant;
+    color?: string;
+    asChild?: boolean;
+} & Omit<import("react-native").ViewProps, keyof {
+    children?: import("react").ReactNode;
+    variant?: import("./scaffold.type").ScaffoldVariant;
+    color?: string;
+    asChild?: boolean;
+}> & Omit<import("../..").ViewStyleProps, "color" | "pointerEvents" | "style" | "children" | "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "onLayout" | "removeClippedSubviews" | "testID" | "nativeID" | "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" | "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" | "asChild" | "variant"> & import("react").RefAttributes<View>>;

package/dist/components/scaffold/scaffold.recipe.d.cts

@@ -0,0 +1,2 @@
+import type { ScaffoldVariant } from './scaffold.type';
+export declare const scaffoldRecipe: import("../..").Recipe<"header" | "content" | "root" | "headerTitle", ScaffoldVariant, import("../..").Axes<"header" | "content" | "root" | "headerTitle">>;

package/dist/components/scaffold/scaffold.recipe.d.ts

@@ -0,0 +1,2 @@
+import type { ScaffoldVariant } from './scaffold.type';
+export declare const scaffoldRecipe: import("../..").Recipe<"header" | "content" | "root" | "headerTitle", ScaffoldVariant, import("../..").Axes<"header" | "content" | "root" | "headerTitle">>;

package/dist/components/scaffold/scaffold.type.d.cts

@@ -0,0 +1,74 @@
+import type { ReactNode } from 'react';
+import type { ColorValue, StatusBarProps, StatusBarStyle, TextStyle, ViewProps, ViewStyle } from 'react-native';
+import type { ViewStyleProps } from '../../system/style-props';
+export type ScaffoldSlot = 'root' | 'header' | 'headerTitle' | 'content';
+/**
+ * A ladder rather than an intent, like `Surface`'s: it says **how much the app's header
+ * separates from the page**, from a bar you cannot miss down to no bar at all.
+ *
+ * `primary` is the accent bar, `secondary` the raised one the theme's `surface` draws,
+ * `tertiary` the page's own ground closed by a hairline, and `ghost` that same ground with
+ * no edge — the arrangement almost every app now wants, and the default.
+ *
+ * There is no `success` / `warning` / `danger` here: chrome reports nothing. An app whose
+ * bar is its brand colour passes the tint instead — `<Scaffold color="#7c3aed">`.
+ */
+export type ScaffoldVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost';
+type ScaffoldOwnProps = {
+    children?: ReactNode;
+    variant?: ScaffoldVariant;
+    /**
+     * A raw tint (`'#7c3aed'`), never a token (R7). Where it lands follows the variant, as
+     * it does everywhere else: the bar of a `primary` or a `secondary`, the title and the
+     * hairline of a `tertiary`, the title alone of a `ghost`.
+     */
+    color?: string;
+    asChild?: boolean;
+};
+/**
+ * R14 — the ground is a view like any other, so its own `ViewStyle` keys are props. That
+ * is how an app that paints its page from an image or a gradient gets out of the way of
+ * the theme's flat ground.
+ */
+export type ScaffoldProps = ScaffoldOwnProps & Omit<ViewProps, keyof ScaffoldOwnProps> & Omit<ViewStyleProps, keyof ScaffoldOwnProps | keyof ViewProps>;
+/**
+ * React Native's own `StatusBar` props. Everything is optional and what the caller writes
+ * wins over what the scaffold resolved — `translucent` and `hidden` are the app's call,
+ * and nothing about them is in the theme.
+ */
+export type ScaffoldStatusBarProps = StatusBarProps;
+export type ScaffoldNavigatorProps = {
+    /** The app's navigator — exactly one element. See `Scaffold.Navigator`. */
+    children?: ReactNode;
+};
+/**
+ * The five keys a navigator is dressed with, in React Navigation's spelling — which Expo
+ * Router, `@react-navigation/native-stack` and the bottom tabs all share.
+ *
+ * Declared structurally, so the library depends on **none** of them: this is an object of
+ * styles and one flag, and the app's navigator is the thing that knows what to do with it.
+ * That is what keeps `@xaui/native` free of `expo-router` even here.
+ */
+export type ScaffoldScreenOptions = {
+    headerStyle: ViewStyle;
+    /** The back arrow and the header's icons. Follows the title's ink. */
+    headerTintColor?: string;
+    headerTitleStyle: TextStyle;
+    headerShadowVisible: boolean;
+    /** The screen under the header, so a route that paints no ground does not flash white. */
+    contentStyle: ViewStyle;
+};
+/** R5 — resolved values, never props for a slot to resolve a second time. */
+export type ScaffoldContextValue = {
+    /**
+     * Values rather than a style: `StatusBar` takes props, so the root flattens its slice
+     * once here instead of in the slot.
+     */
+    statusBar: {
+        barStyle: StatusBarStyle;
+        /** Android only — iOS takes the ink alone. */
+        backgroundColor: ColorValue | undefined;
+    };
+    screenOptions: ScaffoldScreenOptions;
+};
+export {};

package/dist/components/scaffold/scaffold.type.d.ts

@@ -0,0 +1,74 @@
+import type { ReactNode } from 'react';
+import type { ColorValue, StatusBarProps, StatusBarStyle, TextStyle, ViewProps, ViewStyle } from 'react-native';
+import type { ViewStyleProps } from '../../system/style-props';
+export type ScaffoldSlot = 'root' | 'header' | 'headerTitle' | 'content';
+/**
+ * A ladder rather than an intent, like `Surface`'s: it says **how much the app's header
+ * separates from the page**, from a bar you cannot miss down to no bar at all.
+ *
+ * `primary` is the accent bar, `secondary` the raised one the theme's `surface` draws,
+ * `tertiary` the page's own ground closed by a hairline, and `ghost` that same ground with
+ * no edge — the arrangement almost every app now wants, and the default.
+ *
+ * There is no `success` / `warning` / `danger` here: chrome reports nothing. An app whose
+ * bar is its brand colour passes the tint instead — `<Scaffold color="#7c3aed">`.
+ */
+export type ScaffoldVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost';
+type ScaffoldOwnProps = {
+    children?: ReactNode;
+    variant?: ScaffoldVariant;
+    /**
+     * A raw tint (`'#7c3aed'`), never a token (R7). Where it lands follows the variant, as
+     * it does everywhere else: the bar of a `primary` or a `secondary`, the title and the
+     * hairline of a `tertiary`, the title alone of a `ghost`.
+     */
+    color?: string;
+    asChild?: boolean;
+};
+/**
+ * R14 — the ground is a view like any other, so its own `ViewStyle` keys are props. That
+ * is how an app that paints its page from an image or a gradient gets out of the way of
+ * the theme's flat ground.
+ */
+export type ScaffoldProps = ScaffoldOwnProps & Omit<ViewProps, keyof ScaffoldOwnProps> & Omit<ViewStyleProps, keyof ScaffoldOwnProps | keyof ViewProps>;
+/**
+ * React Native's own `StatusBar` props. Everything is optional and what the caller writes
+ * wins over what the scaffold resolved — `translucent` and `hidden` are the app's call,
+ * and nothing about them is in the theme.
+ */
+export type ScaffoldStatusBarProps = StatusBarProps;
+export type ScaffoldNavigatorProps = {
+    /** The app's navigator — exactly one element. See `Scaffold.Navigator`. */
+    children?: ReactNode;
+};
+/**
+ * The five keys a navigator is dressed with, in React Navigation's spelling — which Expo
+ * Router, `@react-navigation/native-stack` and the bottom tabs all share.
+ *
+ * Declared structurally, so the library depends on **none** of them: this is an object of
+ * styles and one flag, and the app's navigator is the thing that knows what to do with it.
+ * That is what keeps `@xaui/native` free of `expo-router` even here.
+ */
+export type ScaffoldScreenOptions = {
+    headerStyle: ViewStyle;
+    /** The back arrow and the header's icons. Follows the title's ink. */
+    headerTintColor?: string;
+    headerTitleStyle: TextStyle;
+    headerShadowVisible: boolean;
+    /** The screen under the header, so a route that paints no ground does not flash white. */
+    contentStyle: ViewStyle;
+};
+/** R5 — resolved values, never props for a slot to resolve a second time. */
+export type ScaffoldContextValue = {
+    /**
+     * Values rather than a style: `StatusBar` takes props, so the root flattens its slice
+     * once here instead of in the slot.
+     */
+    statusBar: {
+        barStyle: StatusBarStyle;
+        /** Android only — iOS takes the ink alone. */
+        backgroundColor: ColorValue | undefined;
+    };
+    screenOptions: ScaffoldScreenOptions;
+};
+export {};

package/dist/components/scaffold/scaffold.utils.d.cts

@@ -0,0 +1,23 @@
+import type { ScaffoldScreenOptions } from './scaffold.type';
+/**
+ * A navigator's `screenOptions`, from the outside: the object, or a function of the route
+ * that returns one. Both spellings are React Navigation's, and neither type is imported —
+ * see `ScaffoldScreenOptions`.
+ */
+export type NavigatorScreenOptions = Record<string, unknown>;
+export type ScreenOptionsProp = NavigatorScreenOptions | ((props: Record<string, unknown>) => NavigatorScreenOptions);
+/**
+ * The scaffold's options under the navigator's own, so **the app has the last word on
+ * every key it wrote** and inherits the theme on every key it did not.
+ *
+ * It is the one merge `mergeProps` cannot do. That helper gives the child the whole value
+ * of a key it declares, which is right for a `style` or a handler and wrong here: an app
+ * writing `screenOptions={{ headerRight }}` means "add a button", not "drop the theme's
+ * header". So the three style keys are flattened rather than replaced — a
+ * `headerStyle={{ height: 96 }}` keeps its ground — and everything else is a plain
+ * override.
+ *
+ * The function form is preserved as a function: React Navigation calls it per route, and
+ * resolving it here would freeze the first route's options onto every screen.
+ */
+export declare function mergeScreenOptions(ours: ScaffoldScreenOptions, theirs: ScreenOptionsProp | undefined): ScreenOptionsProp;

package/dist/components/scaffold/scaffold.utils.d.ts

@@ -0,0 +1,23 @@
+import type { ScaffoldScreenOptions } from './scaffold.type';
+/**
+ * A navigator's `screenOptions`, from the outside: the object, or a function of the route
+ * that returns one. Both spellings are React Navigation's, and neither type is imported —
+ * see `ScaffoldScreenOptions`.
+ */
+export type NavigatorScreenOptions = Record<string, unknown>;
+export type ScreenOptionsProp = NavigatorScreenOptions | ((props: Record<string, unknown>) => NavigatorScreenOptions);
+/**
+ * The scaffold's options under the navigator's own, so **the app has the last word on
+ * every key it wrote** and inherits the theme on every key it did not.
+ *
+ * It is the one merge `mergeProps` cannot do. That helper gives the child the whole value
+ * of a key it declares, which is right for a `style` or a handler and wrong here: an app
+ * writing `screenOptions={{ headerRight }}` means "add a button", not "drop the theme's
+ * header". So the three style keys are flattened rather than replaced — a
+ * `headerStyle={{ height: 96 }}` keeps its ground — and everything else is a plain
+ * override.
+ *
+ * The function form is preserved as a function: React Navigation calls it per route, and
+ * resolving it here would freeze the first route's options onto every screen.
+ */
+export declare function mergeScreenOptions(ours: ScaffoldScreenOptions, theirs: ScreenOptionsProp | undefined): ScreenOptionsProp;

package/dist/components/search-field/index.cjs

@@ -0,0 +1,35 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+
+
+
+
+
+var _chunkDPW25YCMcjs = require('../../chunk-DPW25YCM.cjs');
+require('../../chunk-NADCILBL.cjs');
+require('../../chunk-AXKDHX5V.cjs');
+require('../../chunk-WLWZG2PA.cjs');
+require('../../chunk-67WT74DY.cjs');
+require('../../chunk-PIU3JONR.cjs');
+require('../../chunk-7DPL3ZDS.cjs');
+require('../../chunk-GSZDN6EZ.cjs');
+require('../../chunk-FHNIGHN5.cjs');
+require('../../chunk-SL3V7R2Y.cjs');
+require('../../chunk-TVJXC4HY.cjs');
+require('../../chunk-CDRGTUYF.cjs');
+require('../../chunk-H4E4HDEP.cjs');
+require('../../chunk-EJQCQPET.cjs');
+require('../../chunk-IIAQISBG.cjs');
+require('../../chunk-TK44VBIE.cjs');
+
+
+
+
+
+
+
+
+
+exports.SearchField = _chunkDPW25YCMcjs.SearchField; exports.SearchFieldClear = _chunkDPW25YCMcjs.SearchFieldClear; exports.SearchFieldField = _chunkDPW25YCMcjs.SearchFieldField; exports.SearchFieldIcon = _chunkDPW25YCMcjs.SearchFieldIcon; exports.SearchFieldRoot = _chunkDPW25YCMcjs.SearchFieldRoot; exports.SearchIcon = _chunkDPW25YCMcjs.SearchIcon; exports.searchFieldRecipe = _chunkDPW25YCMcjs.searchFieldRecipe; exports.useSearchField = _chunkDPW25YCMcjs.useSearchField;

package/dist/components/search-field/index.d.cts

@@ -0,0 +1,41 @@
+import { SearchFieldIcon } from './search-field-icon';
+/**
+ * Three of the slots **are** the `TextField`'s, re-exported rather than wrapped — the
+ * `MaskField`'s arrangement, for the `MaskField`'s reason: a wrapper would add three
+ * components to the tree to change a `displayName`, and the string it would change is the
+ * one that tells you the truth.
+ */
+export declare const SearchField: import("react").ForwardRefExoticComponent<{
+    variant?: import("./search-field.type").SearchFieldVariant;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (query: string) => void;
+    onSearch?: (query: string) => void;
+} & Omit<import("..").TextFieldProps, keyof {
+    variant?: import("./search-field.type").SearchFieldVariant;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (query: string) => void;
+    onSearch?: (query: string) => void;
+}> & import("react").RefAttributes<import("react-native").View>> & {
+    Label: import("react").ForwardRefExoticComponent<import("react-native").TextProps & Omit<import("../..").TextStyleProps, keyof import("react-native").TextProps> & {
+        children?: import("react").ReactNode;
+    } & import("react").RefAttributes<import("react-native").Text>>;
+    Icon: typeof SearchFieldIcon;
+    Field: import("react").ForwardRefExoticComponent<import("./search-field.type").SearchFieldFieldProps & import("react").RefAttributes<import("react-native").TextInput>>;
+    Clear: import("react").ForwardRefExoticComponent<import("./search-field.type").SearchFieldClearProps & import("react").RefAttributes<import("react-native").View>>;
+    Description: import("react").ForwardRefExoticComponent<import("react-native").TextProps & Omit<import("../..").TextStyleProps, keyof import("react-native").TextProps> & {
+        children?: import("react").ReactNode;
+    } & import("react").RefAttributes<import("react-native").Text>>;
+    Error: import("react").ForwardRefExoticComponent<import("react-native").TextProps & Omit<import("../..").TextStyleProps, keyof import("react-native").TextProps> & {
+        children?: import("react").ReactNode;
+    } & import("react").RefAttributes<import("react-native").Text>>;
+};
+export { SearchFieldRoot } from './search-field';
+export { SearchFieldClear } from './search-field-clear';
+export { SearchFieldField } from './search-field-field';
+export { SearchFieldIcon } from './search-field-icon';
+export { SearchIcon } from './search-icon';
+export { useSearchField } from './search-field.context';
+export { searchFieldRecipe } from './search-field.recipe';
+export type { SearchFieldClearProps, SearchFieldContextValue, SearchFieldFieldProps, SearchFieldIconProps, SearchFieldProps, SearchFieldSlot, SearchFieldVariant, } from './search-field.type';

package/dist/components/search-field/index.d.ts

@@ -0,0 +1,41 @@
+import { SearchFieldIcon } from './search-field-icon';
+/**
+ * Three of the slots **are** the `TextField`'s, re-exported rather than wrapped — the
+ * `MaskField`'s arrangement, for the `MaskField`'s reason: a wrapper would add three
+ * components to the tree to change a `displayName`, and the string it would change is the
+ * one that tells you the truth.
+ */
+export declare const SearchField: import("react").ForwardRefExoticComponent<{
+    variant?: import("./search-field.type").SearchFieldVariant;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (query: string) => void;
+    onSearch?: (query: string) => void;
+} & Omit<import("..").TextFieldProps, keyof {
+    variant?: import("./search-field.type").SearchFieldVariant;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (query: string) => void;
+    onSearch?: (query: string) => void;
+}> & import("react").RefAttributes<import("react-native").View>> & {
+    Label: import("react").ForwardRefExoticComponent<import("react-native").TextProps & Omit<import("../..").TextStyleProps, keyof import("react-native").TextProps> & {
+        children?: import("react").ReactNode;
+    } & import("react").RefAttributes<import("react-native").Text>>;
+    Icon: typeof SearchFieldIcon;
+    Field: import("react").ForwardRefExoticComponent<import("./search-field.type").SearchFieldFieldProps & import("react").RefAttributes<import("react-native").TextInput>>;
+    Clear: import("react").ForwardRefExoticComponent<import("./search-field.type").SearchFieldClearProps & import("react").RefAttributes<import("react-native").View>>;
+    Description: import("react").ForwardRefExoticComponent<import("react-native").TextProps & Omit<import("../..").TextStyleProps, keyof import("react-native").TextProps> & {
+        children?: import("react").ReactNode;
+    } & import("react").RefAttributes<import("react-native").Text>>;
+    Error: import("react").ForwardRefExoticComponent<import("react-native").TextProps & Omit<import("../..").TextStyleProps, keyof import("react-native").TextProps> & {
+        children?: import("react").ReactNode;
+    } & import("react").RefAttributes<import("react-native").Text>>;
+};
+export { SearchFieldRoot } from './search-field';
+export { SearchFieldClear } from './search-field-clear';
+export { SearchFieldField } from './search-field-field';
+export { SearchFieldIcon } from './search-field-icon';
+export { SearchIcon } from './search-icon';
+export { useSearchField } from './search-field.context';
+export { searchFieldRecipe } from './search-field.recipe';
+export type { SearchFieldClearProps, SearchFieldContextValue, SearchFieldFieldProps, SearchFieldIconProps, SearchFieldProps, SearchFieldSlot, SearchFieldVariant, } from './search-field.type';