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

package/dist/components/divider/index.d.cts

@@ -0,0 +1,117 @@
+import * as react_native from 'react-native';
+import { ViewProps, StyleProp, ViewStyle, View } from 'react-native';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { V as ViewStyleProps } from '../../style-props.type-CfnoGEP7.cjs';
+import { S as Size, X as XAUITheme } from '../../theme.type-C2gNHpEx.cjs';
+import { R as Recipe, S as SlotStyles } from '../../create-recipe-dC7wMfnj.cjs';
+
+type DividerSlot = 'root';
+type DividerOrientation = 'horizontal' | 'vertical';
+type DividerSize = Size;
+/**
+ * What the `Divider` itself understands. R14 — a name in here is the component's, so the
+ * style prop that shares it is not exposed: `size` is the divider's scale and never
+ * `ViewStyle`'s, and `color` is R7's tint.
+ *
+ * **No `variant`**, and it is the only component in the core without one. A variant is the
+ * design system's *vocabulary* (§1 bis) — a name that means the same thing across the
+ * library. On a rule there is nothing for that name to describe: no fill against a
+ * foreground, no border against a surface, no intent to report. It had three values naming
+ * the three separator tokens, which is a shade of grey wearing a word. `size` says how
+ * heavy the rule is and `color` says what colour it is, in React Native's own values —
+ * between them there is nothing a third name would add.
+ */
+type DividerOwnProps = {
+    /**
+     * Which way the rule runs. A horizontal one stretches across its parent and a vertical
+     * one stretches down it, so the axis a divider does *not* run along is the one it takes
+     * from whatever contains it.
+     */
+    orientation?: DividerOrientation;
+    /**
+     * The thickness — height when horizontal, width when vertical. It is `size` and not
+     * `thickness` because that is the vocabulary word (§1 bis), and it is consistent with
+     * the rest of the library rather than in spite of it: "`size` drives height, never
+     * width" is exactly what this does, on the axis the orientation names.
+     *
+     * `xs` is the hairline and it is the default, unlike everywhere else in the library.
+     * A rule you notice is a rule that is too thick.
+     */
+    size?: DividerSize;
+    /**
+     * A raw tint (`'#7c3aed'`), never a token (R7). There is one thing to colour on a rule,
+     * so it lands on the rule.
+     */
+    color?: string;
+    /**
+     * R12 — the child element becomes the rule and keeps its resolved style. What it is
+     * for here is the animated one: an `Animated.View` that collapses a section takes the
+     * thickness and the colour from the recipe and the height from a shared value.
+     */
+    asChild?: boolean;
+    style?: StyleProp<ViewStyle>;
+    /** Only meaningful under `asChild`, where it is the element that becomes the rule. */
+    children?: ReactNode;
+};
+type DividerProps = Omit<ViewProps, 'style'> & DividerOwnProps & Omit<ViewStyleProps, keyof DividerOwnProps | keyof ViewProps>;
+
+/**
+ * The line between two things.
+ *
+ * ```tsx
+ * <Column gap={12}>
+ *   <Row>…</Row>
+ *   <Divider />
+ *   <Row>…</Row>
+ * </Column>
+ *
+ * <Row gap={12}>
+ *   <Typography>Brouillon</Typography>
+ *   <Divider orientation="vertical" />
+ *   <Typography>Il y a deux minutes</Typography>
+ * </Row>
+ * ```
+ *
+ * **One node and no slots.** A rule is a filled box one point thick; there is nothing
+ * inside it. A divider with a word in the middle of it is a `Row` holding two of these
+ * and a `Typography`, which is the composition the library already has — inventing a
+ * `Divider.Label` would put a layout inside a line.
+ *
+ * **It takes the axis it does not run along from its parent.** `alignSelf: 'stretch'` is
+ * the whole mechanism: in a `Column` that is full width, in a `Row` it is full height, and
+ * on the axis the thickness fixes it is ignored. So a divider needs no width prop, and a
+ * horizontal one written inside a `Row` collapses on purpose rather than guessing.
+ */
+declare const Divider: react.ForwardRefExoticComponent<Omit<react_native.ViewProps, "style"> & {
+    orientation?: DividerOrientation;
+    size?: DividerSize;
+    color?: string;
+    asChild?: 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" | "asChild" | "orientation"> & react.RefAttributes<View>>;
+
+declare const dividerRecipe: Recipe<"root", "default", {
+    readonly size: {
+        readonly xs: (theme: XAUITheme) => SlotStyles<DividerSlot>;
+        readonly sm: (theme: XAUITheme) => SlotStyles<DividerSlot>;
+        readonly md: (theme: XAUITheme) => SlotStyles<DividerSlot>;
+        readonly lg: (theme: XAUITheme) => SlotStyles<DividerSlot>;
+    };
+    /** Second, so it releases the axis `size` had to write blind. */
+    readonly orientation: {
+        readonly horizontal: () => {
+            root: {
+                width: "auto";
+            };
+        };
+        readonly vertical: () => {
+            root: {
+                height: "auto";
+            };
+        };
+    };
+}>;
+
+export { Divider, type DividerOrientation, type DividerProps, type DividerSize, type DividerSlot, dividerRecipe };

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

@@ -0,0 +1,117 @@
+import * as react_native from 'react-native';
+import { ViewProps, StyleProp, ViewStyle, View } from 'react-native';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { V as ViewStyleProps } from '../../style-props.type-CfnoGEP7.js';
+import { S as Size, X as XAUITheme } from '../../theme.type-C2gNHpEx.js';
+import { R as Recipe, S as SlotStyles } from '../../create-recipe-BdVd2ffi.js';
+
+type DividerSlot = 'root';
+type DividerOrientation = 'horizontal' | 'vertical';
+type DividerSize = Size;
+/**
+ * What the `Divider` itself understands. R14 — a name in here is the component's, so the
+ * style prop that shares it is not exposed: `size` is the divider's scale and never
+ * `ViewStyle`'s, and `color` is R7's tint.
+ *
+ * **No `variant`**, and it is the only component in the core without one. A variant is the
+ * design system's *vocabulary* (§1 bis) — a name that means the same thing across the
+ * library. On a rule there is nothing for that name to describe: no fill against a
+ * foreground, no border against a surface, no intent to report. It had three values naming
+ * the three separator tokens, which is a shade of grey wearing a word. `size` says how
+ * heavy the rule is and `color` says what colour it is, in React Native's own values —
+ * between them there is nothing a third name would add.
+ */
+type DividerOwnProps = {
+    /**
+     * Which way the rule runs. A horizontal one stretches across its parent and a vertical
+     * one stretches down it, so the axis a divider does *not* run along is the one it takes
+     * from whatever contains it.
+     */
+    orientation?: DividerOrientation;
+    /**
+     * The thickness — height when horizontal, width when vertical. It is `size` and not
+     * `thickness` because that is the vocabulary word (§1 bis), and it is consistent with
+     * the rest of the library rather than in spite of it: "`size` drives height, never
+     * width" is exactly what this does, on the axis the orientation names.
+     *
+     * `xs` is the hairline and it is the default, unlike everywhere else in the library.
+     * A rule you notice is a rule that is too thick.
+     */
+    size?: DividerSize;
+    /**
+     * A raw tint (`'#7c3aed'`), never a token (R7). There is one thing to colour on a rule,
+     * so it lands on the rule.
+     */
+    color?: string;
+    /**
+     * R12 — the child element becomes the rule and keeps its resolved style. What it is
+     * for here is the animated one: an `Animated.View` that collapses a section takes the
+     * thickness and the colour from the recipe and the height from a shared value.
+     */
+    asChild?: boolean;
+    style?: StyleProp<ViewStyle>;
+    /** Only meaningful under `asChild`, where it is the element that becomes the rule. */
+    children?: ReactNode;
+};
+type DividerProps = Omit<ViewProps, 'style'> & DividerOwnProps & Omit<ViewStyleProps, keyof DividerOwnProps | keyof ViewProps>;
+
+/**
+ * The line between two things.
+ *
+ * ```tsx
+ * <Column gap={12}>
+ *   <Row>…</Row>
+ *   <Divider />
+ *   <Row>…</Row>
+ * </Column>
+ *
+ * <Row gap={12}>
+ *   <Typography>Brouillon</Typography>
+ *   <Divider orientation="vertical" />
+ *   <Typography>Il y a deux minutes</Typography>
+ * </Row>
+ * ```
+ *
+ * **One node and no slots.** A rule is a filled box one point thick; there is nothing
+ * inside it. A divider with a word in the middle of it is a `Row` holding two of these
+ * and a `Typography`, which is the composition the library already has — inventing a
+ * `Divider.Label` would put a layout inside a line.
+ *
+ * **It takes the axis it does not run along from its parent.** `alignSelf: 'stretch'` is
+ * the whole mechanism: in a `Column` that is full width, in a `Row` it is full height, and
+ * on the axis the thickness fixes it is ignored. So a divider needs no width prop, and a
+ * horizontal one written inside a `Row` collapses on purpose rather than guessing.
+ */
+declare const Divider: react.ForwardRefExoticComponent<Omit<react_native.ViewProps, "style"> & {
+    orientation?: DividerOrientation;
+    size?: DividerSize;
+    color?: string;
+    asChild?: 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" | "asChild" | "orientation"> & react.RefAttributes<View>>;
+
+declare const dividerRecipe: Recipe<"root", "default", {
+    readonly size: {
+        readonly xs: (theme: XAUITheme) => SlotStyles<DividerSlot>;
+        readonly sm: (theme: XAUITheme) => SlotStyles<DividerSlot>;
+        readonly md: (theme: XAUITheme) => SlotStyles<DividerSlot>;
+        readonly lg: (theme: XAUITheme) => SlotStyles<DividerSlot>;
+    };
+    /** Second, so it releases the axis `size` had to write blind. */
+    readonly orientation: {
+        readonly horizontal: () => {
+            root: {
+                width: "auto";
+            };
+        };
+        readonly vertical: () => {
+            root: {
+                height: "auto";
+            };
+        };
+    };
+}>;
+
+export { Divider, type DividerOrientation, type DividerProps, type DividerSize, type DividerSlot, dividerRecipe };

package/dist/components/divider/index.js

@@ -0,0 +1,13 @@
+import {
+  Divider,
+  dividerRecipe
+} from "../../chunk-4CUZZWFW.js";
+import "../../chunk-4GTAZM2C.js";
+import "../../chunk-A3EGFI6T.js";
+import "../../chunk-K72UDPVN.js";
+import "../../chunk-36PRYGAM.js";
+import "../../chunk-M63GFNKV.js";
+export {
+  Divider,
+  dividerRecipe
+};

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

@@ -0,0 +1,27 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+
+
+
+
+
+var _chunk6DOLGZVVcjs = require('../../chunk-6DOLGZVV.cjs');
+require('../../chunk-J3MB4PI5.cjs');
+require('../../chunk-4KFKWBN5.cjs');
+require('../../chunk-FNEUOBCV.cjs');
+require('../../chunk-57SJ4LJF.cjs');
+require('../../chunk-7GHM4GKL.cjs');
+require('../../chunk-H4E4HDEP.cjs');
+require('../../chunk-TK44VBIE.cjs');
+
+
+
+
+
+
+
+
+
+exports.FieldGroup = _chunk6DOLGZVVcjs.FieldGroup; exports.FieldGroupField = _chunk6DOLGZVVcjs.FieldGroupField; exports.FieldGroupIcon = _chunk6DOLGZVVcjs.FieldGroupIcon; exports.FieldGroupPrefix = _chunk6DOLGZVVcjs.FieldGroupPrefix; exports.FieldGroupRoot = _chunk6DOLGZVVcjs.FieldGroupRoot; exports.FieldGroupSuffix = _chunk6DOLGZVVcjs.FieldGroupSuffix; exports.decoratorPadding = _chunk6DOLGZVVcjs.decoratorPadding; exports.useFieldGroup = _chunk6DOLGZVVcjs.useFieldGroup;

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

@@ -0,0 +1,270 @@
+import * as react_native from 'react-native';
+import { StyleProp, ViewStyle, ViewProps, View, TextInput } from 'react-native';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { V as ViewStyleProps, T as TextStyleProps } from '../../style-props.type-CfnoGEP7.cjs';
+import { a as IconProps } from '../../icon.type-d_i9ma-i.cjs';
+import { T as TextFieldFieldProps } from '../../text-field.type-DBh06DU5.cjs';
+import '../../theme.type-C2gNHpEx.cjs';
+
+type FieldGroupOwnProps = {
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+};
+/**
+ * R14 — the wrapper `View`'s own props, plus every `ViewStyle` key it does not claim.
+ *
+ * **There is no `variant`, no `size`, no `color` and no `isDisabled` here.** They are the
+ * `TextField`'s, and a `FieldGroup` is one row inside it: a second `size` on this root would
+ * be a second answer to a question the field has already answered.
+ */
+type FieldGroupProps = FieldGroupOwnProps & Omit<ViewProps, keyof FieldGroupOwnProps> & Omit<ViewStyleProps, keyof FieldGroupOwnProps | keyof ViewProps> & {
+    /** R12 — merge into the single child instead of rendering a `View`. */
+    asChild?: boolean;
+};
+type FieldGroupDecoratorOwnProps = {
+    /**
+     * The decorator stops taking touches and disappears from the accessibility tree, so a
+     * tap on the glyph focuses the field under it and a screen reader announces the field
+     * rather than a mark it cannot act on.
+     *
+     * Leave it off whenever the decorator holds something to press — a reveal toggle, a
+     * clear button — which is the whole reason it is a prop and not the default.
+     *
+     * @default false
+     */
+    isDecorative?: boolean;
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+};
+type FieldGroupDecoratorProps = FieldGroupDecoratorOwnProps & Omit<ViewProps, keyof FieldGroupDecoratorOwnProps> & Omit<ViewStyleProps, keyof FieldGroupDecoratorOwnProps | keyof ViewProps>;
+type FieldGroupPrefixProps = FieldGroupDecoratorProps;
+type FieldGroupSuffixProps = FieldGroupDecoratorProps;
+/** Which edge a decorator is pinned to, and therefore which width it reports. */
+type FieldGroupSide = 'prefix' | 'suffix';
+/**
+ * Everything `TextField.Field` accepts. It **is** that field — the same `TextInput`, the same
+ * focus plumbing, the same styles — with the padding the two decorators measured.
+ */
+type FieldGroupFieldProps = TextFieldFieldProps;
+/** Everything `Icon` accepts. `size` and `color` fall back to the field's own. */
+type FieldGroupIconProps = IconProps;
+/**
+ * R5 — but the only thing here that is not already resolved on the `TextField`'s context: two
+ * widths nobody can know before layout.
+ *
+ * A decorator is out of flow, so it cannot push the text aside the way a sibling in a row
+ * would; the field clears it by padding instead, and the padding is the decorator's own
+ * measured width. That is the same shape `TextArea` uses for `rows` — a raw number the
+ * slot turns into a style, outside the cache.
+ */
+type FieldGroupContextValue = {
+    /** `0` while the decorator is absent, and until its first layout. */
+    prefixWidth: number;
+    suffixWidth: number;
+    setPrefixWidth: (width: number) => void;
+    setSuffixWidth: (width: number) => void;
+};
+
+/**
+ * A glyph that takes the field's scale and the placeholder's colour without being told
+ * either:
+ *
+ * ```tsx
+ * <FieldGroup.Prefix isDecorative>
+ *   <FieldGroup.Icon as={MailIcon} />
+ * </FieldGroup.Prefix>
+ * ```
+ *
+ * The size comes from the `TextField`'s own `size` — one step above the field's type, as on
+ * the `Button` and the `Chip`, because a 16pt glyph beside 16pt of text reads as the
+ * smaller of the two. The colour is the theme's `fieldPlaceholder`: a mark in a field is
+ * decoration for the text, not text. An explicit `size` or `color` still wins, which is
+ * what `Icon` promises everywhere else in the library — and it is the answer for a tinted
+ * `primary` field, where the fill is the caller's colour and the placeholder grey is no
+ * longer readable over it.
+ *
+ * It is not one of HeroUI's three parts: theirs colour the glyph at the call site. This is
+ * the same slot `Button`, `Chip` and `Alert` all have, and it exists so that a form does
+ * not carry a hard-coded `#888` on every field.
+ */
+declare function FieldGroupIcon({ size, color, ...rest }: FieldGroupIconProps): react.JSX.Element;
+declare namespace FieldGroupIcon {
+    var displayName: string;
+}
+
+/**
+ * A field with something beside it — a glyph, a unit, a reveal toggle.
+ *
+ * ```tsx
+ * <TextField>
+ *   <TextField.Label>Mot de passe</TextField.Label>
+ *   <FieldGroup>
+ *     <FieldGroup.Prefix isDecorative>
+ *       <FieldGroup.Icon as={LockIcon} />
+ *     </FieldGroup.Prefix>
+ *     <FieldGroup.Field secureTextEntry value={password} onChangeText={setPassword} />
+ *     <FieldGroup.Suffix>
+ *       <Pressable onPress={toggle} hitSlop={20}>
+ *         <FieldGroup.Icon as={EyeIcon} />
+ *       </Pressable>
+ *     </FieldGroup.Suffix>
+ *   </FieldGroup>
+ *   <TextField.Description>Douze caractères au moins.</TextField.Description>
+ * </TextField>
+ * ```
+ *
+ * **It goes inside a `TextField`, and it replaces nothing but the field.** The column, the
+ * label, the hint, the error, the four variants, the `size`, the `radius`, the tint, the
+ * focus and `isInvalid` are all still the `TextField`'s — this root is one row of that column,
+ * and it owns exactly one thing: how wide the two decorators turned out to be.
+ *
+ * That is why the box is still the `TextInput` itself. A wrapper carrying the border, the
+ * fill and the radius would be a second thing to keep in step with `TextField`, and the day
+ * one of them gained a shadow the other would not have it. The decorators are laid **over**
+ * the field instead, out of flow, and the field clears them with padding.
+ *
+ * It works under `TextArea` too — the same context, the same field — though a decorator
+ * centred over six lines of text is rarely what a multiline field wants.
+ */
+declare const FieldGroupRoot: react.ForwardRefExoticComponent<{
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+} & Omit<react_native.ViewProps, keyof {
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+}> & Omit<ViewStyleProps, "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?: boolean;
+} & react.RefAttributes<View>>;
+
+/**
+ * The `TextInput` itself — `TextField.Field` with the room the two decorators need.
+ *
+ * ```tsx
+ * <FieldGroup.Field value={query} onChangeText={setQuery} placeholder="Rechercher…" />
+ * ```
+ *
+ * It renders the `TextField`'s field rather than a second `TextInput`, so the focus plumbing,
+ * the placeholder colour, the label association, `isInvalid` and `isDisabled` are the ones
+ * already written, and every `TextInput` prop is written here for the same reason it is
+ * there.
+ *
+ * The padding is arithmetic rather than a token, the way `TextArea`'s height is: a
+ * decorator's width is not knowable before layout, so it measures itself and this turns
+ * the two numbers into `paddingStart` and `paddingEnd`. They land **after** the recipe's
+ * own `paddingHorizontal`, which is what makes them win, and before the caller's `style`,
+ * which still has the last word.
+ */
+declare const FieldGroupField: react.ForwardRefExoticComponent<Omit<react_native.TextInputProps, "editable"> & Omit<TextStyleProps, keyof react_native.TextInputProps> & react.RefAttributes<TextInput>>;
+
+/**
+ * What sits before the text — a search glyph, a currency, a country code.
+ *
+ * ```tsx
+ * <FieldGroup>
+ *   <FieldGroup.Prefix isDecorative>
+ *     <FieldGroup.Icon as={SearchIcon} />
+ *   </FieldGroup.Prefix>
+ *   <FieldGroup.Field placeholder="Rechercher…" />
+ * </FieldGroup>
+ * ```
+ *
+ * It is pinned to the **leading** edge and inset by the field's own padding, so the glyph
+ * starts where the text would have. The field then clears it by the width it measured —
+ * which is what lets a `+33` prefix and a 16pt mark both sit right, without either one
+ * being told a number.
+ *
+ * Add `isDecorative` whenever it holds nothing to press. Leave it off for a control.
+ */
+declare const FieldGroupPrefix: react.ForwardRefExoticComponent<{
+    isDecorative?: boolean;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+} & Omit<react_native.ViewProps, keyof {
+    isDecorative?: boolean;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+}> & Omit<ViewStyleProps, "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" | "isDecorative"> & react.RefAttributes<View>>;
+
+/**
+ * What sits after the text — a reveal toggle, a clear button, a unit, a counter.
+ *
+ * ```tsx
+ * <FieldGroup>
+ *   <FieldGroup.Field secureTextEntry value={password} onChangeText={setPassword} />
+ *   <FieldGroup.Suffix>
+ *     <Pressable onPress={toggle} hitSlop={20}>
+ *       <FieldGroup.Icon as={isVisible ? EyeOffIcon : EyeIcon} />
+ *     </Pressable>
+ *   </FieldGroup.Suffix>
+ * </FieldGroup>
+ * ```
+ *
+ * The trailing edge is where a suffix is most often a **control**, which is why
+ * `isDecorative` is off by default: a decorator that swallowed its own taps would be a
+ * reveal toggle you cannot press.
+ *
+ * The library ships no button for it. A suffix holds whatever you put in it, and
+ * `Pressable` with a `hitSlop` is the thing to put there — a 16pt glyph is not a touch
+ * target on its own.
+ */
+declare const FieldGroupSuffix: react.ForwardRefExoticComponent<{
+    isDecorative?: boolean;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+} & Omit<react_native.ViewProps, keyof {
+    isDecorative?: boolean;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+}> & Omit<ViewStyleProps, "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" | "isDecorative"> & react.RefAttributes<View>>;
+
+declare const useFieldGroup: () => FieldGroupContextValue;
+
+/**
+ * The room a decorator asks the field to leave it, from the width it measured.
+ *
+ * `start` and `end`, never `left` and `right` (R13): the prefix is the leading edge in
+ * both directions of writing, and RTL mirrors the logical property and only it.
+ *
+ * It returns `undefined` rather than an object of two `undefined`s when there is nothing
+ * to clear, so a group with no decorator adds no entry to the field's style array — and
+ * the `useMemo` around it keeps the same reference until a width actually changes.
+ */
+declare function decoratorPadding(prefixWidth: number, suffixWidth: number): ViewStyle | undefined;
+
+/**
+ * The four parts of a decorated field. The label, the hint and the error are **not** here:
+ * they are the `TextField`'s, and a `FieldGroup` lives inside one.
+ */
+declare const FieldGroup: react.ForwardRefExoticComponent<{
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+} & Omit<react_native.ViewProps, keyof {
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+}> & Omit<ViewStyleProps, "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?: boolean;
+} & react.RefAttributes<react_native.View>> & {
+    Prefix: react.ForwardRefExoticComponent<{
+        isDecorative?: boolean;
+        style?: react_native.StyleProp<react_native.ViewStyle>;
+        children?: react.ReactNode;
+    } & Omit<react_native.ViewProps, keyof {
+        isDecorative?: boolean;
+        style?: react_native.StyleProp<react_native.ViewStyle>;
+        children?: react.ReactNode;
+    }> & Omit<ViewStyleProps, "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" | "isDecorative"> & react.RefAttributes<react_native.View>>;
+    Field: react.ForwardRefExoticComponent<Omit<react_native.TextInputProps, "editable"> & Omit<TextStyleProps, keyof react_native.TextInputProps> & react.RefAttributes<react_native.TextInput>>;
+    Suffix: react.ForwardRefExoticComponent<{
+        isDecorative?: boolean;
+        style?: react_native.StyleProp<react_native.ViewStyle>;
+        children?: react.ReactNode;
+    } & Omit<react_native.ViewProps, keyof {
+        isDecorative?: boolean;
+        style?: react_native.StyleProp<react_native.ViewStyle>;
+        children?: react.ReactNode;
+    }> & Omit<ViewStyleProps, "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" | "isDecorative"> & react.RefAttributes<react_native.View>>;
+    Icon: typeof FieldGroupIcon;
+};
+
+export { FieldGroup, type FieldGroupContextValue, FieldGroupField, type FieldGroupFieldProps, FieldGroupIcon, type FieldGroupIconProps, FieldGroupPrefix, type FieldGroupPrefixProps, type FieldGroupProps, FieldGroupRoot, type FieldGroupSide, FieldGroupSuffix, type FieldGroupSuffixProps, decoratorPadding, useFieldGroup };