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

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

@@ -0,0 +1,213 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as react_native from 'react-native';
+import { StyleProp, TextStyle, TextInputProps, TextProps, ViewStyle, ViewProps } from 'react-native';
+import { T as TextStyleProps, V as ViewStyleProps } from '../../style-props.type-CfnoGEP7.cjs';
+import { S as Size, R as RadiusKey, X as XAUITheme } from '../../theme.type-C2gNHpEx.cjs';
+import { R as Recipe, g as SlotStyles, j as StyleFn } from '../../create-recipe-dBN_ewZc.cjs';
+
+type InputSlot = 'root' | 'label' | 'field' | 'placeholder' | 'description' | 'error';
+/**
+ * The library's four emphasis levels, narrowed like the `Card`'s (§1 bis). A field
+ * **reports nothing** — an error is `isInvalid`, which is a state and not a variant — so
+ * `success`, `warning` and `danger` are absent here for the same reason they are there.
+ *
+ * This is where the theme's `field*` family is finally read, and the four names split
+ * HeroUI's two-name `primary | secondary` by saying what each of their ends already is:
+ *
+ * - **`primary`** — the `fieldBackground` fill plus the theme's `field` shadow. HeroUI's
+ *   `primary`, with the elevation their flat token only implies.
+ * - **`secondary`** — the neutral `default` fill. HeroUI's `secondary`, and the default
+ *   here: on a plain background a white field is its border and nothing else, while on a
+ *   card the `fieldBackground` token *is* the card's own colour.
+ * - **`tertiary`** — the border alone, no fill. The same drop the `Button`'s `tertiary`
+ *   makes.
+ * - **`ghost`** — neither. A bare field for a toolbar or an inline edit; it has no border
+ *   to move, so its focus shows in the caret alone.
+ *
+ * The first three name the `fieldBorder` edge and `ghost` gives it up. Its width is the
+ * theme's `borderWidth.field` — HeroUI's `--field-border-width`, which they ship at `0`
+ * and we ship at `1`. That is the one shipped default where the two differ;
+ * `createTheme({ borderWidth: { field: 0 } })` reproduces theirs.
+ */
+type InputVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost';
+/**
+ * Where the label sits relative to the field's box.
+ *
+ * `outside` is the label above the box, in the column's flow. `inside` lifts it into the
+ * box, above the text — the label is taken **out of flow** and placed against the box's
+ * own padding, so the JSX is identical either way and nothing is reparented (R4).
+ *
+ * Because the inside label positions itself against the top of the root, it assumes the
+ * field is the first thing in the column's flow: write `Input.Description` and
+ * `Input.Error` after the field, which is where they belong anyway.
+ */
+type InputLabelPlacement = 'outside' | 'inside';
+type InputSize = Size;
+/**
+ * What the `Input` itself understands. R14 — a name in here is the component's, so the
+ * style prop that shares it is not exposed: `size` is the field's scale and never
+ * `ViewStyle`'s, and `color` is R7's tint.
+ */
+type InputOwnProps = {
+    variant?: InputVariant;
+    /** The field's height, its padding, the gaps and the type. Never width. */
+    size?: InputSize;
+    /** Overrides the `field` radius the theme chose for every size. */
+    radius?: RadiusKey;
+    /** Above the box, or lifted into it. @default 'outside' */
+    labelPlacement?: InputLabelPlacement;
+    /**
+     * A raw tint (`'#7c3aed'`), never a token (R7). It lands where the variant put its
+     * tokens — the fill of a `default`, the border of a `tertiary` — and, because the focus
+     * colour is a role like any other, it is also what the field borders on focus.
+     */
+    color?: string;
+    /**
+     * Paints the border, the label and the description in `danger`, and takes the focus
+     * treatment off: an error outranks focus, and a field that is both should read as
+     * wrong rather than as busy.
+     *
+     * It does **not** mount or unmount `Input.Error`. That stays the caller's — a slot that
+     * silently renders nothing is a slot you cannot debug.
+     */
+    isInvalid?: boolean;
+    /** Dims the field and makes it uneditable. */
+    isDisabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+};
+/**
+ * R14 — the input's own props, the wrapper `View`'s, and every `ViewStyle` key neither
+ * already claims. **`TextInputProps` are not here**: they belong to `Input.Field`, which
+ * is the node that has them.
+ */
+type InputProps = InputOwnProps & Omit<ViewProps, keyof InputOwnProps> & Omit<ViewStyleProps, keyof InputOwnProps | keyof ViewProps> & {
+    /** R12 — merge into the single child instead of rendering a `View`. */
+    asChild?: boolean;
+};
+/**
+ * Everything `TextInput` accepts, plus the `TextStyle` keys as props (R14).
+ *
+ * `editable` is absent: it is `disabled` under another name, and R8 keeps that off the
+ * public surface — `isDisabled` on the root is what stops the field.
+ */
+type InputFieldProps = Omit<TextInputProps, 'editable'> & Omit<TextStyleProps, keyof TextInputProps>;
+/** `Text`'s own props win over the `TextStyle` keys of the same name (R14). */
+type InputTextProps = TextProps & Omit<TextStyleProps, keyof TextProps> & {
+    children?: ReactNode;
+};
+type InputLabelProps = InputTextProps;
+type InputDescriptionProps = InputTextProps;
+type InputErrorProps = InputTextProps;
+/**
+ * Read off `TextInput`'s own props rather than spelled out: React Native has renamed the
+ * payload of these two more than once, and a hand-written `NativeSyntheticEvent<…>` here
+ * would be a second declaration free to drift from the node that actually fires them.
+ */
+type FieldFocusEvent = Parameters<NonNullable<TextInputProps['onFocus']>>[0];
+type FieldBlurEvent = Parameters<NonNullable<TextInputProps['onBlur']>>[0];
+/**
+ * R5 — resolved styles, not props for a slot to resolve a second time. Each entry is the
+ * cached `StyleSheet` reference with the uncached tint pass layered over it, so a slot
+ * merges its own `style` on top and does no work of its own.
+ */
+type InputContextValue = {
+    labelStyle: StyleProp<TextStyle>;
+    fieldStyle: StyleProp<TextStyle>;
+    descriptionStyle: StyleProp<TextStyle>;
+    errorStyle: StyleProp<TextStyle>;
+    /**
+     * A value and not a style: `placeholderTextColor` is a `TextInput` prop, so the root
+     * flattens its placeholder slot once here rather than in the field.
+     */
+    placeholderTextColor?: string;
+    /**
+     * The focus state lives on the **root**, because the root's recipe resolves on it (R5)
+     * and it needs the value before it renders — but the node that hears the event is
+     * `Input.Field`, three levels down. These are how it reports back. Their identity is
+     * stable, so publishing them costs no re-render of a memoized slot.
+     */
+    onFieldFocus: (event: FieldFocusEvent) => void;
+    onFieldBlur: (event: FieldBlurEvent) => void;
+    /**
+     * The id the label carries and the field points at, so a screen reader reads "Courriel,
+     * champ de saisie" rather than just the placeholder.
+     */
+    labelId: string;
+    descriptionId: string;
+    isDisabled: boolean;
+    isInvalid: boolean;
+};
+
+declare const useInput: () => InputContextValue;
+
+declare const inputRecipe: Recipe<"label" | "field" | "description" | "root" | "placeholder" | "error", InputVariant, {
+    readonly size: {
+        readonly xs: (theme: XAUITheme) => SlotStyles<InputSlot>;
+        readonly sm: (theme: XAUITheme) => SlotStyles<InputSlot>;
+        readonly md: (theme: XAUITheme) => SlotStyles<InputSlot>;
+        readonly lg: (theme: XAUITheme) => SlotStyles<InputSlot>;
+    };
+    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 Input: react.ForwardRefExoticComponent<{
+    variant?: InputVariant;
+    size?: InputSize;
+    radius?: RadiusKey;
+    labelPlacement?: InputLabelPlacement;
+    color?: string;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+} & Omit<react_native.ViewProps, keyof {
+    variant?: InputVariant;
+    size?: InputSize;
+    radius?: RadiusKey;
+    labelPlacement?: InputLabelPlacement;
+    color?: string;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+}> & Omit<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" | "isDisabled" | "radius" | "size" | "variant" | "labelPlacement" | "isInvalid"> & {
+    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 { Input, type InputContextValue, type InputDescriptionProps, type InputErrorProps, type InputFieldProps, type InputLabelPlacement, type InputLabelProps, type InputProps, type InputSize, type InputSlot, type InputVariant, inputRecipe, useInput };

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

@@ -0,0 +1,213 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as react_native from 'react-native';
+import { StyleProp, TextStyle, TextInputProps, TextProps, ViewStyle, ViewProps } from 'react-native';
+import { T as TextStyleProps, V as ViewStyleProps } from '../../style-props.type-CfnoGEP7.js';
+import { S as Size, R as RadiusKey, X as XAUITheme } from '../../theme.type-C2gNHpEx.js';
+import { R as Recipe, g as SlotStyles, j as StyleFn } from '../../create-recipe-C4JkINrA.js';
+
+type InputSlot = 'root' | 'label' | 'field' | 'placeholder' | 'description' | 'error';
+/**
+ * The library's four emphasis levels, narrowed like the `Card`'s (§1 bis). A field
+ * **reports nothing** — an error is `isInvalid`, which is a state and not a variant — so
+ * `success`, `warning` and `danger` are absent here for the same reason they are there.
+ *
+ * This is where the theme's `field*` family is finally read, and the four names split
+ * HeroUI's two-name `primary | secondary` by saying what each of their ends already is:
+ *
+ * - **`primary`** — the `fieldBackground` fill plus the theme's `field` shadow. HeroUI's
+ *   `primary`, with the elevation their flat token only implies.
+ * - **`secondary`** — the neutral `default` fill. HeroUI's `secondary`, and the default
+ *   here: on a plain background a white field is its border and nothing else, while on a
+ *   card the `fieldBackground` token *is* the card's own colour.
+ * - **`tertiary`** — the border alone, no fill. The same drop the `Button`'s `tertiary`
+ *   makes.
+ * - **`ghost`** — neither. A bare field for a toolbar or an inline edit; it has no border
+ *   to move, so its focus shows in the caret alone.
+ *
+ * The first three name the `fieldBorder` edge and `ghost` gives it up. Its width is the
+ * theme's `borderWidth.field` — HeroUI's `--field-border-width`, which they ship at `0`
+ * and we ship at `1`. That is the one shipped default where the two differ;
+ * `createTheme({ borderWidth: { field: 0 } })` reproduces theirs.
+ */
+type InputVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost';
+/**
+ * Where the label sits relative to the field's box.
+ *
+ * `outside` is the label above the box, in the column's flow. `inside` lifts it into the
+ * box, above the text — the label is taken **out of flow** and placed against the box's
+ * own padding, so the JSX is identical either way and nothing is reparented (R4).
+ *
+ * Because the inside label positions itself against the top of the root, it assumes the
+ * field is the first thing in the column's flow: write `Input.Description` and
+ * `Input.Error` after the field, which is where they belong anyway.
+ */
+type InputLabelPlacement = 'outside' | 'inside';
+type InputSize = Size;
+/**
+ * What the `Input` itself understands. R14 — a name in here is the component's, so the
+ * style prop that shares it is not exposed: `size` is the field's scale and never
+ * `ViewStyle`'s, and `color` is R7's tint.
+ */
+type InputOwnProps = {
+    variant?: InputVariant;
+    /** The field's height, its padding, the gaps and the type. Never width. */
+    size?: InputSize;
+    /** Overrides the `field` radius the theme chose for every size. */
+    radius?: RadiusKey;
+    /** Above the box, or lifted into it. @default 'outside' */
+    labelPlacement?: InputLabelPlacement;
+    /**
+     * A raw tint (`'#7c3aed'`), never a token (R7). It lands where the variant put its
+     * tokens — the fill of a `default`, the border of a `tertiary` — and, because the focus
+     * colour is a role like any other, it is also what the field borders on focus.
+     */
+    color?: string;
+    /**
+     * Paints the border, the label and the description in `danger`, and takes the focus
+     * treatment off: an error outranks focus, and a field that is both should read as
+     * wrong rather than as busy.
+     *
+     * It does **not** mount or unmount `Input.Error`. That stays the caller's — a slot that
+     * silently renders nothing is a slot you cannot debug.
+     */
+    isInvalid?: boolean;
+    /** Dims the field and makes it uneditable. */
+    isDisabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+};
+/**
+ * R14 — the input's own props, the wrapper `View`'s, and every `ViewStyle` key neither
+ * already claims. **`TextInputProps` are not here**: they belong to `Input.Field`, which
+ * is the node that has them.
+ */
+type InputProps = InputOwnProps & Omit<ViewProps, keyof InputOwnProps> & Omit<ViewStyleProps, keyof InputOwnProps | keyof ViewProps> & {
+    /** R12 — merge into the single child instead of rendering a `View`. */
+    asChild?: boolean;
+};
+/**
+ * Everything `TextInput` accepts, plus the `TextStyle` keys as props (R14).
+ *
+ * `editable` is absent: it is `disabled` under another name, and R8 keeps that off the
+ * public surface — `isDisabled` on the root is what stops the field.
+ */
+type InputFieldProps = Omit<TextInputProps, 'editable'> & Omit<TextStyleProps, keyof TextInputProps>;
+/** `Text`'s own props win over the `TextStyle` keys of the same name (R14). */
+type InputTextProps = TextProps & Omit<TextStyleProps, keyof TextProps> & {
+    children?: ReactNode;
+};
+type InputLabelProps = InputTextProps;
+type InputDescriptionProps = InputTextProps;
+type InputErrorProps = InputTextProps;
+/**
+ * Read off `TextInput`'s own props rather than spelled out: React Native has renamed the
+ * payload of these two more than once, and a hand-written `NativeSyntheticEvent<…>` here
+ * would be a second declaration free to drift from the node that actually fires them.
+ */
+type FieldFocusEvent = Parameters<NonNullable<TextInputProps['onFocus']>>[0];
+type FieldBlurEvent = Parameters<NonNullable<TextInputProps['onBlur']>>[0];
+/**
+ * R5 — resolved styles, not props for a slot to resolve a second time. Each entry is the
+ * cached `StyleSheet` reference with the uncached tint pass layered over it, so a slot
+ * merges its own `style` on top and does no work of its own.
+ */
+type InputContextValue = {
+    labelStyle: StyleProp<TextStyle>;
+    fieldStyle: StyleProp<TextStyle>;
+    descriptionStyle: StyleProp<TextStyle>;
+    errorStyle: StyleProp<TextStyle>;
+    /**
+     * A value and not a style: `placeholderTextColor` is a `TextInput` prop, so the root
+     * flattens its placeholder slot once here rather than in the field.
+     */
+    placeholderTextColor?: string;
+    /**
+     * The focus state lives on the **root**, because the root's recipe resolves on it (R5)
+     * and it needs the value before it renders — but the node that hears the event is
+     * `Input.Field`, three levels down. These are how it reports back. Their identity is
+     * stable, so publishing them costs no re-render of a memoized slot.
+     */
+    onFieldFocus: (event: FieldFocusEvent) => void;
+    onFieldBlur: (event: FieldBlurEvent) => void;
+    /**
+     * The id the label carries and the field points at, so a screen reader reads "Courriel,
+     * champ de saisie" rather than just the placeholder.
+     */
+    labelId: string;
+    descriptionId: string;
+    isDisabled: boolean;
+    isInvalid: boolean;
+};
+
+declare const useInput: () => InputContextValue;
+
+declare const inputRecipe: Recipe<"label" | "field" | "description" | "root" | "placeholder" | "error", InputVariant, {
+    readonly size: {
+        readonly xs: (theme: XAUITheme) => SlotStyles<InputSlot>;
+        readonly sm: (theme: XAUITheme) => SlotStyles<InputSlot>;
+        readonly md: (theme: XAUITheme) => SlotStyles<InputSlot>;
+        readonly lg: (theme: XAUITheme) => SlotStyles<InputSlot>;
+    };
+    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 Input: react.ForwardRefExoticComponent<{
+    variant?: InputVariant;
+    size?: InputSize;
+    radius?: RadiusKey;
+    labelPlacement?: InputLabelPlacement;
+    color?: string;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+} & Omit<react_native.ViewProps, keyof {
+    variant?: InputVariant;
+    size?: InputSize;
+    radius?: RadiusKey;
+    labelPlacement?: InputLabelPlacement;
+    color?: string;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+}> & Omit<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" | "isDisabled" | "radius" | "size" | "variant" | "labelPlacement" | "isInvalid"> & {
+    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 { Input, type InputContextValue, type InputDescriptionProps, type InputErrorProps, type InputFieldProps, type InputLabelPlacement, type InputLabelProps, type InputProps, type InputSize, type InputSlot, type InputVariant, inputRecipe, useInput };

package/dist/components/input/index.js

@@ -0,0 +1,14 @@
+import {
+  Input,
+  inputRecipe,
+  useInput
+} from "../../chunk-E3LXUXE7.js";
+import "../../chunk-3JATAB7S.js";
+import "../../chunk-A3EGFI6T.js";
+import "../../chunk-PMO62QK4.js";
+import "../../chunk-GGW42MY4.js";
+export {
+  Input,
+  inputRecipe,
+  useInput
+};

package/dist/components/typography/index.cjs

@@ -2,13 +2,13 @@
 
 
 
-var _chunkUBA6AEY6cjs = require('../../chunk-UBA6AEY6.cjs');
-require('../../chunk-UVO4GFSW.cjs');
-require('../../chunk-EVXZGNPA.cjs');
+var _chunkRAWOJ3N3cjs = require('../../chunk-RAWOJ3N3.cjs');
+require('../../chunk-YXVKQMCK.cjs');
 require('../../chunk-57SJ4LJF.cjs');
+require('../../chunk-HUZ4AUM2.cjs');
 require('../../chunk-MC7SY2QH.cjs');
 
 
 
 
-exports.TextSpan = _chunkUBA6AEY6cjs.TextSpan; exports.Typography = _chunkUBA6AEY6cjs.Typography; exports.typographyRecipe = _chunkUBA6AEY6cjs.typographyRecipe;
+exports.TextSpan = _chunkRAWOJ3N3cjs.TextSpan; exports.Typography = _chunkRAWOJ3N3cjs.Typography; exports.typographyRecipe = _chunkRAWOJ3N3cjs.typographyRecipe;

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

@@ -2,8 +2,8 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import * as react_native from 'react-native';
 import { TextProps, StyleProp, TextStyle, Text } from 'react-native';
-import { T as TextStyleProps } from '../../style-props.type-B1BG5TCm.cjs';
-import { R as Recipe } from '../../create-recipe-CPBFg7ym.cjs';
+import { T as TextStyleProps } from '../../style-props.type-CfnoGEP7.cjs';
+import { R as Recipe } from '../../create-recipe-dBN_ewZc.cjs';
 import { X as XAUITheme } from '../../theme.type-C2gNHpEx.cjs';
 
 /**
@@ -76,7 +76,7 @@ declare const Typography: react.ForwardRefExoticComponent<Omit<react_native.Text
     asChild?: boolean;
     style?: react_native.StyleProp<react_native.TextStyle>;
     children?: react.ReactNode;
-} & Omit<TextStyleProps, "color" | "pointerEvents" | "style" | "children" | "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "disabled" | "onPress" | "onPressIn" | "onPressOut" | "onLongPress" | "pressRetentionOffset" | "asChild" | "variant" | "allowFontScaling" | "ellipsizeMode" | "lineBreakMode" | "numberOfLines" | "onTextLayout" | "maxFontSizeMultiplier" | "minimumFontScale" | "adjustsFontSizeToFit" | "dynamicTypeRamp" | "suppressHighlighting" | "lineBreakStrategyIOS" | "selectable" | "selectionColor" | "textBreakStrategy" | "dataDetectorType" | "android_hyphenationFrequency"> & react.RefAttributes<Text>>;
+} & Omit<TextStyleProps, "color" | "pointerEvents" | "disabled" | "style" | "children" | "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "onPress" | "onPressIn" | "onPressOut" | "onLongPress" | "pressRetentionOffset" | "asChild" | "variant" | "allowFontScaling" | "ellipsizeMode" | "lineBreakMode" | "numberOfLines" | "onTextLayout" | "maxFontSizeMultiplier" | "minimumFontScale" | "adjustsFontSizeToFit" | "dynamicTypeRamp" | "suppressHighlighting" | "lineBreakStrategyIOS" | "selectable" | "selectionColor" | "textBreakStrategy" | "dataDetectorType" | "android_hyphenationFrequency"> & react.RefAttributes<Text>>;
 
 /**
  * A fragment of text, styled apart from the text around it.
@@ -101,7 +101,7 @@ declare const TextSpan: react.ForwardRefExoticComponent<Omit<react_native.TextPr
     asChild?: boolean;
     style?: react_native.StyleProp<react_native.TextStyle>;
     children?: react.ReactNode;
-} & Omit<TextStyleProps, "pointerEvents" | "style" | "children" | "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "disabled" | "onPress" | "onPressIn" | "onPressOut" | "onLongPress" | "pressRetentionOffset" | "asChild" | "allowFontScaling" | "ellipsizeMode" | "lineBreakMode" | "numberOfLines" | "onTextLayout" | "maxFontSizeMultiplier" | "minimumFontScale" | "adjustsFontSizeToFit" | "dynamicTypeRamp" | "suppressHighlighting" | "lineBreakStrategyIOS" | "selectable" | "selectionColor" | "textBreakStrategy" | "dataDetectorType" | "android_hyphenationFrequency"> & react.RefAttributes<Text>>;
+} & Omit<TextStyleProps, "pointerEvents" | "disabled" | "style" | "children" | "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "onPress" | "onPressIn" | "onPressOut" | "onLongPress" | "pressRetentionOffset" | "asChild" | "allowFontScaling" | "ellipsizeMode" | "lineBreakMode" | "numberOfLines" | "onTextLayout" | "maxFontSizeMultiplier" | "minimumFontScale" | "adjustsFontSizeToFit" | "dynamicTypeRamp" | "suppressHighlighting" | "lineBreakStrategyIOS" | "selectable" | "selectionColor" | "textBreakStrategy" | "dataDetectorType" | "android_hyphenationFrequency"> & react.RefAttributes<Text>>;
 
 /** Every role produces the same one slot, so the recipe's style functions share a shape. */
 type StyleFn = (theme: XAUITheme) => Record<TypographySlot, TextStyle>;

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

@@ -2,8 +2,8 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import * as react_native from 'react-native';
 import { TextProps, StyleProp, TextStyle, Text } from 'react-native';
-import { T as TextStyleProps } from '../../style-props.type-B1BG5TCm.js';
-import { R as Recipe } from '../../create-recipe-CC3NNCqF.js';
+import { T as TextStyleProps } from '../../style-props.type-CfnoGEP7.js';
+import { R as Recipe } from '../../create-recipe-C4JkINrA.js';
 import { X as XAUITheme } from '../../theme.type-C2gNHpEx.js';
 
 /**
@@ -76,7 +76,7 @@ declare const Typography: react.ForwardRefExoticComponent<Omit<react_native.Text
     asChild?: boolean;
     style?: react_native.StyleProp<react_native.TextStyle>;
     children?: react.ReactNode;
-} & Omit<TextStyleProps, "color" | "pointerEvents" | "style" | "children" | "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "disabled" | "onPress" | "onPressIn" | "onPressOut" | "onLongPress" | "pressRetentionOffset" | "asChild" | "variant" | "allowFontScaling" | "ellipsizeMode" | "lineBreakMode" | "numberOfLines" | "onTextLayout" | "maxFontSizeMultiplier" | "minimumFontScale" | "adjustsFontSizeToFit" | "dynamicTypeRamp" | "suppressHighlighting" | "lineBreakStrategyIOS" | "selectable" | "selectionColor" | "textBreakStrategy" | "dataDetectorType" | "android_hyphenationFrequency"> & react.RefAttributes<Text>>;
+} & Omit<TextStyleProps, "color" | "pointerEvents" | "disabled" | "style" | "children" | "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "onPress" | "onPressIn" | "onPressOut" | "onLongPress" | "pressRetentionOffset" | "asChild" | "variant" | "allowFontScaling" | "ellipsizeMode" | "lineBreakMode" | "numberOfLines" | "onTextLayout" | "maxFontSizeMultiplier" | "minimumFontScale" | "adjustsFontSizeToFit" | "dynamicTypeRamp" | "suppressHighlighting" | "lineBreakStrategyIOS" | "selectable" | "selectionColor" | "textBreakStrategy" | "dataDetectorType" | "android_hyphenationFrequency"> & react.RefAttributes<Text>>;
 
 /**
  * A fragment of text, styled apart from the text around it.
@@ -101,7 +101,7 @@ declare const TextSpan: react.ForwardRefExoticComponent<Omit<react_native.TextPr
     asChild?: boolean;
     style?: react_native.StyleProp<react_native.TextStyle>;
     children?: react.ReactNode;
-} & Omit<TextStyleProps, "pointerEvents" | "style" | "children" | "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "disabled" | "onPress" | "onPressIn" | "onPressOut" | "onLongPress" | "pressRetentionOffset" | "asChild" | "allowFontScaling" | "ellipsizeMode" | "lineBreakMode" | "numberOfLines" | "onTextLayout" | "maxFontSizeMultiplier" | "minimumFontScale" | "adjustsFontSizeToFit" | "dynamicTypeRamp" | "suppressHighlighting" | "lineBreakStrategyIOS" | "selectable" | "selectionColor" | "textBreakStrategy" | "dataDetectorType" | "android_hyphenationFrequency"> & react.RefAttributes<Text>>;
+} & Omit<TextStyleProps, "pointerEvents" | "disabled" | "style" | "children" | "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "onPress" | "onPressIn" | "onPressOut" | "onLongPress" | "pressRetentionOffset" | "asChild" | "allowFontScaling" | "ellipsizeMode" | "lineBreakMode" | "numberOfLines" | "onTextLayout" | "maxFontSizeMultiplier" | "minimumFontScale" | "adjustsFontSizeToFit" | "dynamicTypeRamp" | "suppressHighlighting" | "lineBreakStrategyIOS" | "selectable" | "selectionColor" | "textBreakStrategy" | "dataDetectorType" | "android_hyphenationFrequency"> & react.RefAttributes<Text>>;
 
 /** Every role produces the same one slot, so the recipe's style functions share a shape. */
 type StyleFn = (theme: XAUITheme) => Record<TypographySlot, TextStyle>;

package/dist/components/typography/index.js

@@ -2,10 +2,10 @@ import {
   TextSpan,
   Typography,
   typographyRecipe
-} from "../../chunk-RMLFMRWL.js";
-import "../../chunk-N7C4UNUL.js";
-import "../../chunk-EXX6ATAS.js";
+} from "../../chunk-2U6JR7BF.js";
+import "../../chunk-3JATAB7S.js";
 import "../../chunk-A3EGFI6T.js";
+import "../../chunk-PMO62QK4.js";
 import "../../chunk-GGW42MY4.js";
 export {
   TextSpan,

package/dist/components/view/index.cjs

@@ -4,8 +4,8 @@
 
 
 
-var _chunk33QILJJHcjs = require('../../chunk-33QILJJH.cjs');
-require('../../chunk-EVXZGNPA.cjs');
+var _chunkIBEX4XGVcjs = require('../../chunk-IBEX4XGV.cjs');
+require('../../chunk-HUZ4AUM2.cjs');
 require('../../chunk-MC7SY2QH.cjs');
 
 
@@ -13,4 +13,4 @@ require('../../chunk-MC7SY2QH.cjs');
 
 
 
-exports.Column = _chunk33QILJJHcjs.Column; exports.Grid = _chunk33QILJJHcjs.Grid; exports.Row = _chunk33QILJJHcjs.Row; exports.Stack = _chunk33QILJJHcjs.Stack; exports.useGrid = _chunk33QILJJHcjs.useGrid;
+exports.Column = _chunkIBEX4XGVcjs.Column; exports.Grid = _chunkIBEX4XGVcjs.Grid; exports.Row = _chunkIBEX4XGVcjs.Row; exports.Stack = _chunkIBEX4XGVcjs.Stack; exports.useGrid = _chunkIBEX4XGVcjs.useGrid;