@xaui/native 0.9.1-alpha.4 → 0.9.1-alpha.40

package/dist/components/switch/index.js

@@ -0,0 +1,27 @@
+import {
+  Switch,
+  SwitchLabel,
+  SwitchRoot,
+  SwitchThumb,
+  SwitchTrack,
+  switchRecipe,
+  useSwitch
+} from "../../chunk-DHGLGSH6.js";
+import "../../chunk-F6W3JQ7K.js";
+import "../../chunk-6UEZJRVI.js";
+import "../../chunk-423RQBOX.js";
+import "../../chunk-EGLLDKN6.js";
+import "../../chunk-4GTAZM2C.js";
+import "../../chunk-A3EGFI6T.js";
+import "../../chunk-K72UDPVN.js";
+import "../../chunk-36PRYGAM.js";
+import "../../chunk-M63GFNKV.js";
+export {
+  Switch,
+  SwitchLabel,
+  SwitchRoot,
+  SwitchThumb,
+  SwitchTrack,
+  switchRecipe,
+  useSwitch
+};

package/dist/components/text-area/index.cjs

@@ -0,0 +1,14 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+var _chunk7YF5NAHQcjs = require('../../chunk-7YF5NAHQ.cjs');
+require('../../chunk-J3MB4PI5.cjs');
+require('../../chunk-FNEUOBCV.cjs');
+require('../../chunk-57SJ4LJF.cjs');
+require('../../chunk-7GHM4GKL.cjs');
+require('../../chunk-H4E4HDEP.cjs');
+require('../../chunk-TK44VBIE.cjs');
+
+
+
+exports.TextArea = _chunk7YF5NAHQcjs.TextArea; exports.useTextArea = _chunk7YF5NAHQcjs.useTextArea;

package/dist/components/text-area/index.d.cts

@@ -0,0 +1,73 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { T as TextFieldFieldProps, a as TextFieldProps } from '../../text-field.type-DBh06DU5.cjs';
+import * as react_native from 'react-native';
+import { T as TextStyleProps } from '../../style-props.type-CfnoGEP7.cjs';
+import '../../theme.type-C2gNHpEx.cjs';
+
+type TextAreaOwnProps = {
+    /**
+     * How many lines tall the field starts. It is a **raw value**, not a token: it resolves
+     * outside the style cache from the line height the size chose, the same path `color`
+     * takes — which is what lets `rows={7}` exist without seven entries in the cache.
+     *
+     * @default 3
+     */
+    rows?: number;
+    /**
+     * The ceiling, in lines. Past it the field stops growing and scrolls; unset, it grows
+     * with the text for as long as the text goes on.
+     */
+    maxRows?: number;
+    children?: ReactNode;
+};
+/**
+ * Everything the `TextField` root understands, plus the two the shape of a multiline field
+ * needs. They sit on the **root** rather than on `TextArea.Field` for the reason `size`
+ * and `variant` do: the root is where the field's shape is decided, and the slot reads
+ * what it resolved.
+ */
+type TextAreaProps = Omit<TextFieldProps, 'children'> & TextAreaOwnProps;
+/**
+ * Everything `TextField.Field` accepts except `multiline`, which this sets — it is the same
+ * `TextInput`, and the same props, with the three things several lines need.
+ */
+type TextAreaFieldProps = Omit<TextFieldFieldProps, 'multiline'>;
+/**
+ * The one thing the `TextField`'s own context cannot carry, because `rows` is not the
+ * `TextField`'s business: a single-line field has no use for it, and a prop that does nothing
+ * in the common case is a prop that reads as broken.
+ */
+type TextAreaContextValue = {
+    rows: number;
+    maxRows: number | undefined;
+};
+
+declare const useTextArea: () => TextAreaContextValue;
+
+/**
+ * Three of the four slots **are** the `TextField`'s, re-exported rather than wrapped.
+ *
+ * A wrapper would add three components to the tree to change a `displayName` string, and
+ * the string it would change is the one that tells you the truth: a `XAUI.TextField.Label`
+ * showing up inside a `XAUI.TextArea.Root` is exactly what is happening. Only the field
+ * differs, and it is the only one written here.
+ */
+declare const TextArea: react.ForwardRefExoticComponent<Omit<TextFieldProps, "children"> & {
+    rows?: number;
+    maxRows?: number;
+    children?: react.ReactNode;
+} & react.RefAttributes<react_native.View>> & {
+    Label: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
+        children?: react.ReactNode;
+    } & react.RefAttributes<react_native.Text>>;
+    Field: react.ForwardRefExoticComponent<TextAreaFieldProps & react.RefAttributes<react_native.TextInput>>;
+    Description: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
+        children?: react.ReactNode;
+    } & react.RefAttributes<react_native.Text>>;
+    Error: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
+        children?: react.ReactNode;
+    } & react.RefAttributes<react_native.Text>>;
+};
+
+export { TextArea, type TextAreaContextValue, type TextAreaFieldProps, type TextAreaProps, useTextArea };

package/dist/components/text-area/index.d.ts

@@ -0,0 +1,73 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { T as TextFieldFieldProps, a as TextFieldProps } from '../../text-field.type-0l73acce.js';
+import * as react_native from 'react-native';
+import { T as TextStyleProps } from '../../style-props.type-CfnoGEP7.js';
+import '../../theme.type-C2gNHpEx.js';
+
+type TextAreaOwnProps = {
+    /**
+     * How many lines tall the field starts. It is a **raw value**, not a token: it resolves
+     * outside the style cache from the line height the size chose, the same path `color`
+     * takes — which is what lets `rows={7}` exist without seven entries in the cache.
+     *
+     * @default 3
+     */
+    rows?: number;
+    /**
+     * The ceiling, in lines. Past it the field stops growing and scrolls; unset, it grows
+     * with the text for as long as the text goes on.
+     */
+    maxRows?: number;
+    children?: ReactNode;
+};
+/**
+ * Everything the `TextField` root understands, plus the two the shape of a multiline field
+ * needs. They sit on the **root** rather than on `TextArea.Field` for the reason `size`
+ * and `variant` do: the root is where the field's shape is decided, and the slot reads
+ * what it resolved.
+ */
+type TextAreaProps = Omit<TextFieldProps, 'children'> & TextAreaOwnProps;
+/**
+ * Everything `TextField.Field` accepts except `multiline`, which this sets — it is the same
+ * `TextInput`, and the same props, with the three things several lines need.
+ */
+type TextAreaFieldProps = Omit<TextFieldFieldProps, 'multiline'>;
+/**
+ * The one thing the `TextField`'s own context cannot carry, because `rows` is not the
+ * `TextField`'s business: a single-line field has no use for it, and a prop that does nothing
+ * in the common case is a prop that reads as broken.
+ */
+type TextAreaContextValue = {
+    rows: number;
+    maxRows: number | undefined;
+};
+
+declare const useTextArea: () => TextAreaContextValue;
+
+/**
+ * Three of the four slots **are** the `TextField`'s, re-exported rather than wrapped.
+ *
+ * A wrapper would add three components to the tree to change a `displayName` string, and
+ * the string it would change is the one that tells you the truth: a `XAUI.TextField.Label`
+ * showing up inside a `XAUI.TextArea.Root` is exactly what is happening. Only the field
+ * differs, and it is the only one written here.
+ */
+declare const TextArea: react.ForwardRefExoticComponent<Omit<TextFieldProps, "children"> & {
+    rows?: number;
+    maxRows?: number;
+    children?: react.ReactNode;
+} & react.RefAttributes<react_native.View>> & {
+    Label: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
+        children?: react.ReactNode;
+    } & react.RefAttributes<react_native.Text>>;
+    Field: react.ForwardRefExoticComponent<TextAreaFieldProps & react.RefAttributes<react_native.TextInput>>;
+    Description: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
+        children?: react.ReactNode;
+    } & react.RefAttributes<react_native.Text>>;
+    Error: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
+        children?: react.ReactNode;
+    } & react.RefAttributes<react_native.Text>>;
+};
+
+export { TextArea, type TextAreaContextValue, type TextAreaFieldProps, type TextAreaProps, useTextArea };

package/dist/components/text-area/index.js

@@ -0,0 +1,14 @@
+import {
+  TextArea,
+  useTextArea
+} from "../../chunk-YVHT2UVW.js";
+import "../../chunk-2NRZKJG7.js";
+import "../../chunk-4GTAZM2C.js";
+import "../../chunk-A3EGFI6T.js";
+import "../../chunk-K72UDPVN.js";
+import "../../chunk-36PRYGAM.js";
+import "../../chunk-M63GFNKV.js";
+export {
+  TextArea,
+  useTextArea
+};

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

@@ -0,0 +1,25 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+
+
+
+
+
+var _chunkJ3MB4PI5cjs = require('../../chunk-J3MB4PI5.cjs');
+require('../../chunk-FNEUOBCV.cjs');
+require('../../chunk-57SJ4LJF.cjs');
+require('../../chunk-7GHM4GKL.cjs');
+require('../../chunk-H4E4HDEP.cjs');
+require('../../chunk-TK44VBIE.cjs');
+
+
+
+
+
+
+
+
+
+exports.TextField = _chunkJ3MB4PI5cjs.TextField; exports.TextFieldDescription = _chunkJ3MB4PI5cjs.TextFieldDescription; exports.TextFieldError = _chunkJ3MB4PI5cjs.TextFieldError; exports.TextFieldField = _chunkJ3MB4PI5cjs.TextFieldField; exports.TextFieldLabel = _chunkJ3MB4PI5cjs.TextFieldLabel; exports.TextFieldRoot = _chunkJ3MB4PI5cjs.TextFieldRoot; exports.textFieldRecipe = _chunkJ3MB4PI5cjs.textFieldRecipe; exports.useTextField = _chunkJ3MB4PI5cjs.useTextField;

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

@@ -0,0 +1,205 @@
+import * as react from 'react';
+import * as react_native from 'react-native';
+import { View, Text, TextInput } from 'react-native';
+import { V as ViewStyleProps, T as TextStyleProps } from '../../style-props.type-CfnoGEP7.cjs';
+import { R as RadiusKey, X as XAUITheme } from '../../theme.type-C2gNHpEx.cjs';
+import { i as TextFieldVariant, g as TextFieldSize, e as TextFieldLabelPlacement, b as TextFieldContextValue, h as TextFieldSlot } from '../../text-field.type-DBh06DU5.cjs';
+export { c as TextFieldDescriptionProps, d as TextFieldErrorProps, T as TextFieldFieldProps, f as TextFieldLabelProps, a as TextFieldProps } from '../../text-field.type-DBh06DU5.cjs';
+import { R as Recipe, S as SlotStyles, a as StyleFn } from '../../create-recipe-dC7wMfnj.cjs';
+
+/**
+ * A text field, with the label, the hint and the error that make it usable.
+ *
+ * ```tsx
+ * <TextField>
+ *   <TextField.Label>Courriel</TextField.Label>
+ *   <TextField.Field
+ *     value={email}
+ *     onChangeText={setEmail}
+ *     placeholder="nom@exemple.fr"
+ *     keyboardType="email-address"
+ *   />
+ *   <TextField.Description>On ne le partage jamais.</TextField.Description>
+ * </TextField>
+ *
+ * <TextField isInvalid={Boolean(error)}>
+ *   <TextField.Label>Mot de passe</TextField.Label>
+ *   <TextField.Field secureTextEntry value={password} onChangeText={setPassword} />
+ *   {error ? <TextField.Error>{error}</TextField.Error> : null}
+ * </TextField>
+ * ```
+ *
+ * **The root is the column, not the field.** `TextField.Field` is the `TextInput`, which is
+ * what makes the label, the hint and the error slots of one component rather than three
+ * components a form has to keep in step — and it is why `TextInputProps` are on the field
+ * rather than on the root.
+ *
+ * There is no auto-wrap here (R3): a string child of an input is not a label, a value or
+ * a placeholder in any way the component could guess.
+ */
+declare const TextFieldRoot: react.ForwardRefExoticComponent<{
+    variant?: TextFieldVariant;
+    size?: TextFieldSize;
+    radius?: RadiusKey;
+    labelPlacement?: TextFieldLabelPlacement;
+    color?: string;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+} & Omit<react_native.ViewProps, keyof {
+    variant?: TextFieldVariant;
+    size?: TextFieldSize;
+    radius?: RadiusKey;
+    labelPlacement?: TextFieldLabelPlacement;
+    color?: string;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+}> & Omit<ViewStyleProps, "color" | "pointerEvents" | "style" | "children" | "size" | "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" | "variant" | "radius" | "isDisabled" | "isInvalid" | "labelPlacement"> & {
+    asChild?: boolean;
+} & react.RefAttributes<View>>;
+
+/**
+ * The hint under the field — the format expected, what the value is used for.
+ *
+ * It carries the id the field points at with `aria-describedby`, so it is read after the
+ * label rather than skipped. It turns `danger` with `isInvalid`, like the label.
+ *
+ * It sits inset by half the field's padding, so the column reads as one block rather than
+ * as a label, a box and a stray line.
+ */
+declare const TextFieldDescription: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<Text>>;
+
+/**
+ * What is wrong with the value, in `danger`.
+ *
+ * **It always renders what it is given.** `isInvalid` paints the border, the label and the
+ * description; it does not mount or unmount this slot, because a slot that silently
+ * renders nothing is a slot you cannot debug — you write the condition yourself and see
+ * it:
+ *
+ * ```tsx
+ * <TextField isInvalid={Boolean(error)}>
+ *   <TextField.Field value={value} onChangeText={onChange} />
+ *   {error ? <TextField.Error>{error}</TextField.Error> : null}
+ * </TextField>
+ * ```
+ *
+ * `accessibilityLiveRegion` is deliberately not set: an error that appears while you are
+ * still typing in the field is announced by the field's own `aria-invalid`, and a live
+ * region on top of that reads the message on every keystroke that changes it.
+ */
+declare const TextFieldError: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<Text>>;
+
+/**
+ * The `TextInput` itself — the one node of this component that the user types into.
+ *
+ * ```tsx
+ * <TextField.Field value={email} onChangeText={setEmail} placeholder="nom@exemple.fr" />
+ * ```
+ *
+ * It takes everything `TextInput` takes, which is why `value`, `defaultValue`, `onChange`,
+ * `keyboardType`, `secureTextEntry`, `autoComplete` and `multiline` are written here and
+ * not on the root. There is no `type`: that is an HTML prop, and React Native splits it
+ * into `inputMode`, `keyboardType`, `secureTextEntry` and `autoComplete`.
+ *
+ * What it does *not* take is `editable`: that is `disabled` under another name, and R8
+ * keeps it off the public surface — `isDisabled` on the root is what stops the field.
+ *
+ * It reports focus up rather than styling it (R5): the root's recipe resolves on the
+ * focus state, so the root owns it and this composes the caller's handlers into the two
+ * the context published.
+ */
+declare const TextFieldField: react.ForwardRefExoticComponent<Omit<react_native.TextInputProps, "editable"> & Omit<TextStyleProps, keyof react_native.TextInputProps> & react.RefAttributes<TextInput>>;
+
+/**
+ * What the field is for. It turns `danger` with `isInvalid`, so the field that is wrong is
+ * findable on a long form without reading every message.
+ *
+ * It carries the id the field points at, which is what makes a screen reader announce
+ * "Courriel, champ de saisie" instead of reading the placeholder and hoping.
+ *
+ * Its colour comes from the theme's `foreground` rather than the variant's: the label sits
+ * outside the box, on the screen behind it, so a tinted field does not tint it.
+ */
+declare const TextFieldLabel: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<Text>>;
+
+declare const useTextField: () => TextFieldContextValue;
+
+declare const textFieldRecipe: Recipe<"label" | "field" | "root" | "description" | "suffix" | "icon" | "textArea" | "placeholder" | "error" | "prefix", TextFieldVariant, {
+    readonly size: {
+        readonly xs: (theme: XAUITheme) => SlotStyles<TextFieldSlot>;
+        readonly sm: (theme: XAUITheme) => SlotStyles<TextFieldSlot>;
+        readonly md: (theme: XAUITheme) => SlotStyles<TextFieldSlot>;
+        readonly lg: (theme: XAUITheme) => SlotStyles<TextFieldSlot>;
+    };
+    readonly radius: Record<RadiusKey, StyleFn<"field">>;
+    /**
+     * `outside` is the base behaviour, so it adds nothing — it is declared because an
+     * axis needs both of its values for the selection to be typed, and because a reader
+     * looking for "what does outside do" should find the answer here rather than infer it
+     * from an absence. The size-dependent half of `inside` is in `compoundVariants`.
+     */
+    readonly labelPlacement: {
+        readonly outside: () => {};
+        readonly inside: () => {};
+    };
+    readonly isInvalid: {
+        readonly true: (theme: XAUITheme) => {
+            field: {
+                borderColor: string;
+            };
+            label: {
+                color: string;
+            };
+            description: {
+                color: string;
+            };
+        };
+    };
+}>;
+
+declare const TextField: react.ForwardRefExoticComponent<{
+    variant?: TextFieldVariant;
+    size?: TextFieldSize;
+    radius?: RadiusKey;
+    labelPlacement?: TextFieldLabelPlacement;
+    color?: string;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+} & Omit<react_native.ViewProps, keyof {
+    variant?: TextFieldVariant;
+    size?: TextFieldSize;
+    radius?: RadiusKey;
+    labelPlacement?: TextFieldLabelPlacement;
+    color?: string;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+}> & Omit<ViewStyleProps, "color" | "pointerEvents" | "style" | "children" | "size" | "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" | "variant" | "radius" | "isDisabled" | "isInvalid" | "labelPlacement"> & {
+    asChild?: boolean;
+} & react.RefAttributes<react_native.View>> & {
+    Label: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
+        children?: react.ReactNode;
+    } & react.RefAttributes<react_native.Text>>;
+    Field: react.ForwardRefExoticComponent<Omit<react_native.TextInputProps, "editable"> & Omit<TextStyleProps, keyof react_native.TextInputProps> & react.RefAttributes<react_native.TextInput>>;
+    Description: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
+        children?: react.ReactNode;
+    } & react.RefAttributes<react_native.Text>>;
+    Error: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
+        children?: react.ReactNode;
+    } & react.RefAttributes<react_native.Text>>;
+};
+
+export { TextField, TextFieldContextValue, TextFieldDescription, TextFieldError, TextFieldField, TextFieldLabel, TextFieldLabelPlacement, TextFieldRoot, TextFieldSize, TextFieldSlot, TextFieldVariant, textFieldRecipe, useTextField };

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

@@ -0,0 +1,205 @@
+import * as react from 'react';
+import * as react_native from 'react-native';
+import { View, Text, TextInput } from 'react-native';
+import { V as ViewStyleProps, T as TextStyleProps } from '../../style-props.type-CfnoGEP7.js';
+import { R as RadiusKey, X as XAUITheme } from '../../theme.type-C2gNHpEx.js';
+import { i as TextFieldVariant, g as TextFieldSize, e as TextFieldLabelPlacement, b as TextFieldContextValue, h as TextFieldSlot } from '../../text-field.type-0l73acce.js';
+export { c as TextFieldDescriptionProps, d as TextFieldErrorProps, T as TextFieldFieldProps, f as TextFieldLabelProps, a as TextFieldProps } from '../../text-field.type-0l73acce.js';
+import { R as Recipe, S as SlotStyles, a as StyleFn } from '../../create-recipe-BdVd2ffi.js';
+
+/**
+ * A text field, with the label, the hint and the error that make it usable.
+ *
+ * ```tsx
+ * <TextField>
+ *   <TextField.Label>Courriel</TextField.Label>
+ *   <TextField.Field
+ *     value={email}
+ *     onChangeText={setEmail}
+ *     placeholder="nom@exemple.fr"
+ *     keyboardType="email-address"
+ *   />
+ *   <TextField.Description>On ne le partage jamais.</TextField.Description>
+ * </TextField>
+ *
+ * <TextField isInvalid={Boolean(error)}>
+ *   <TextField.Label>Mot de passe</TextField.Label>
+ *   <TextField.Field secureTextEntry value={password} onChangeText={setPassword} />
+ *   {error ? <TextField.Error>{error}</TextField.Error> : null}
+ * </TextField>
+ * ```
+ *
+ * **The root is the column, not the field.** `TextField.Field` is the `TextInput`, which is
+ * what makes the label, the hint and the error slots of one component rather than three
+ * components a form has to keep in step — and it is why `TextInputProps` are on the field
+ * rather than on the root.
+ *
+ * There is no auto-wrap here (R3): a string child of an input is not a label, a value or
+ * a placeholder in any way the component could guess.
+ */
+declare const TextFieldRoot: react.ForwardRefExoticComponent<{
+    variant?: TextFieldVariant;
+    size?: TextFieldSize;
+    radius?: RadiusKey;
+    labelPlacement?: TextFieldLabelPlacement;
+    color?: string;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+} & Omit<react_native.ViewProps, keyof {
+    variant?: TextFieldVariant;
+    size?: TextFieldSize;
+    radius?: RadiusKey;
+    labelPlacement?: TextFieldLabelPlacement;
+    color?: string;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+}> & Omit<ViewStyleProps, "color" | "pointerEvents" | "style" | "children" | "size" | "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" | "variant" | "radius" | "isDisabled" | "isInvalid" | "labelPlacement"> & {
+    asChild?: boolean;
+} & react.RefAttributes<View>>;
+
+/**
+ * The hint under the field — the format expected, what the value is used for.
+ *
+ * It carries the id the field points at with `aria-describedby`, so it is read after the
+ * label rather than skipped. It turns `danger` with `isInvalid`, like the label.
+ *
+ * It sits inset by half the field's padding, so the column reads as one block rather than
+ * as a label, a box and a stray line.
+ */
+declare const TextFieldDescription: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<Text>>;
+
+/**
+ * What is wrong with the value, in `danger`.
+ *
+ * **It always renders what it is given.** `isInvalid` paints the border, the label and the
+ * description; it does not mount or unmount this slot, because a slot that silently
+ * renders nothing is a slot you cannot debug — you write the condition yourself and see
+ * it:
+ *
+ * ```tsx
+ * <TextField isInvalid={Boolean(error)}>
+ *   <TextField.Field value={value} onChangeText={onChange} />
+ *   {error ? <TextField.Error>{error}</TextField.Error> : null}
+ * </TextField>
+ * ```
+ *
+ * `accessibilityLiveRegion` is deliberately not set: an error that appears while you are
+ * still typing in the field is announced by the field's own `aria-invalid`, and a live
+ * region on top of that reads the message on every keystroke that changes it.
+ */
+declare const TextFieldError: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<Text>>;
+
+/**
+ * The `TextInput` itself — the one node of this component that the user types into.
+ *
+ * ```tsx
+ * <TextField.Field value={email} onChangeText={setEmail} placeholder="nom@exemple.fr" />
+ * ```
+ *
+ * It takes everything `TextInput` takes, which is why `value`, `defaultValue`, `onChange`,
+ * `keyboardType`, `secureTextEntry`, `autoComplete` and `multiline` are written here and
+ * not on the root. There is no `type`: that is an HTML prop, and React Native splits it
+ * into `inputMode`, `keyboardType`, `secureTextEntry` and `autoComplete`.
+ *
+ * What it does *not* take is `editable`: that is `disabled` under another name, and R8
+ * keeps it off the public surface — `isDisabled` on the root is what stops the field.
+ *
+ * It reports focus up rather than styling it (R5): the root's recipe resolves on the
+ * focus state, so the root owns it and this composes the caller's handlers into the two
+ * the context published.
+ */
+declare const TextFieldField: react.ForwardRefExoticComponent<Omit<react_native.TextInputProps, "editable"> & Omit<TextStyleProps, keyof react_native.TextInputProps> & react.RefAttributes<TextInput>>;
+
+/**
+ * What the field is for. It turns `danger` with `isInvalid`, so the field that is wrong is
+ * findable on a long form without reading every message.
+ *
+ * It carries the id the field points at, which is what makes a screen reader announce
+ * "Courriel, champ de saisie" instead of reading the placeholder and hoping.
+ *
+ * Its colour comes from the theme's `foreground` rather than the variant's: the label sits
+ * outside the box, on the screen behind it, so a tinted field does not tint it.
+ */
+declare const TextFieldLabel: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<Text>>;
+
+declare const useTextField: () => TextFieldContextValue;
+
+declare const textFieldRecipe: Recipe<"label" | "field" | "root" | "description" | "suffix" | "icon" | "textArea" | "placeholder" | "error" | "prefix", TextFieldVariant, {
+    readonly size: {
+        readonly xs: (theme: XAUITheme) => SlotStyles<TextFieldSlot>;
+        readonly sm: (theme: XAUITheme) => SlotStyles<TextFieldSlot>;
+        readonly md: (theme: XAUITheme) => SlotStyles<TextFieldSlot>;
+        readonly lg: (theme: XAUITheme) => SlotStyles<TextFieldSlot>;
+    };
+    readonly radius: Record<RadiusKey, StyleFn<"field">>;
+    /**
+     * `outside` is the base behaviour, so it adds nothing — it is declared because an
+     * axis needs both of its values for the selection to be typed, and because a reader
+     * looking for "what does outside do" should find the answer here rather than infer it
+     * from an absence. The size-dependent half of `inside` is in `compoundVariants`.
+     */
+    readonly labelPlacement: {
+        readonly outside: () => {};
+        readonly inside: () => {};
+    };
+    readonly isInvalid: {
+        readonly true: (theme: XAUITheme) => {
+            field: {
+                borderColor: string;
+            };
+            label: {
+                color: string;
+            };
+            description: {
+                color: string;
+            };
+        };
+    };
+}>;
+
+declare const TextField: react.ForwardRefExoticComponent<{
+    variant?: TextFieldVariant;
+    size?: TextFieldSize;
+    radius?: RadiusKey;
+    labelPlacement?: TextFieldLabelPlacement;
+    color?: string;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+} & Omit<react_native.ViewProps, keyof {
+    variant?: TextFieldVariant;
+    size?: TextFieldSize;
+    radius?: RadiusKey;
+    labelPlacement?: TextFieldLabelPlacement;
+    color?: string;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+}> & Omit<ViewStyleProps, "color" | "pointerEvents" | "style" | "children" | "size" | "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" | "variant" | "radius" | "isDisabled" | "isInvalid" | "labelPlacement"> & {
+    asChild?: boolean;
+} & react.RefAttributes<react_native.View>> & {
+    Label: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
+        children?: react.ReactNode;
+    } & react.RefAttributes<react_native.Text>>;
+    Field: react.ForwardRefExoticComponent<Omit<react_native.TextInputProps, "editable"> & Omit<TextStyleProps, keyof react_native.TextInputProps> & react.RefAttributes<react_native.TextInput>>;
+    Description: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
+        children?: react.ReactNode;
+    } & react.RefAttributes<react_native.Text>>;
+    Error: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
+        children?: react.ReactNode;
+    } & react.RefAttributes<react_native.Text>>;
+};
+
+export { TextField, TextFieldContextValue, TextFieldDescription, TextFieldError, TextFieldField, TextFieldLabel, TextFieldLabelPlacement, TextFieldRoot, TextFieldSize, TextFieldSlot, TextFieldVariant, textFieldRecipe, useTextField };