@xaui/native 0.9.1-alpha.24 → 0.9.1-alpha.26

package/dist/input.type-BUMDlzL9.d.cts

@@ -0,0 +1,167 @@
+import { ReactNode } from 'react';
+import { StyleProp, TextStyle, ViewStyle, TextInputProps, TextProps, ViewProps } from 'react-native';
+import { T as TextStyleProps, V as ViewStyleProps } from './style-props.type-CfnoGEP7.cjs';
+import { S as Size, R as RadiusKey } from './theme.type-C2gNHpEx.cjs';
+
+type InputSlot = 'root' | 'label' | 'field' | 'textArea' | 'placeholder' | 'description' | 'error' | 'prefix' | 'suffix' | 'icon';
+/**
+ * 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>;
+    /** Layered *over* `fieldStyle` by `Input.TextArea`: only what a multiline field adds. */
+    textAreaStyle: StyleProp<TextStyle>;
+    /**
+     * Values, not a style: `rows` is a raw number, so the height it implies is arithmetic
+     * the slot does — and these are the two measurements it needs, flattened once here
+     * rather than in every text area on the screen.
+     */
+    textArea: {
+        lineHeight: number;
+        paddingVertical: number;
+    };
+    descriptionStyle: StyleProp<TextStyle>;
+    errorStyle: StyleProp<TextStyle>;
+    /**
+     * The two decorators of an `InputGroup`, already pinned to their edge and inset by the
+     * field's own padding. They are resolved here, on the root, because the size that
+     * decides that padding is the root's — the group itself adds no axis of its own.
+     */
+    prefixStyle: StyleProp<ViewStyle>;
+    suffixStyle: StyleProp<ViewStyle>;
+    /**
+     * Values, not a style: an icon is a third party's component, and `size` and `color` are
+     * props it takes rather than a style it accepts. Flattened once here, the way the `Chip`
+     * and the `Alert` publish theirs.
+     */
+    icon: {
+        size: number | undefined;
+        color: string | undefined;
+    };
+    /**
+     * 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;
+};
+
+export type { InputFieldProps as I, InputProps as a, InputContextValue as b, InputDescriptionProps as c, InputErrorProps as d, InputLabelPlacement as e, InputLabelProps as f, InputSize as g, InputSlot as h, InputVariant as i };

package/dist/input.type-D2qgi03E.d.ts

@@ -0,0 +1,167 @@
+import { ReactNode } from 'react';
+import { StyleProp, TextStyle, ViewStyle, TextInputProps, TextProps, ViewProps } from 'react-native';
+import { T as TextStyleProps, V as ViewStyleProps } from './style-props.type-CfnoGEP7.js';
+import { S as Size, R as RadiusKey } from './theme.type-C2gNHpEx.js';
+
+type InputSlot = 'root' | 'label' | 'field' | 'textArea' | 'placeholder' | 'description' | 'error' | 'prefix' | 'suffix' | 'icon';
+/**
+ * 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>;
+    /** Layered *over* `fieldStyle` by `Input.TextArea`: only what a multiline field adds. */
+    textAreaStyle: StyleProp<TextStyle>;
+    /**
+     * Values, not a style: `rows` is a raw number, so the height it implies is arithmetic
+     * the slot does — and these are the two measurements it needs, flattened once here
+     * rather than in every text area on the screen.
+     */
+    textArea: {
+        lineHeight: number;
+        paddingVertical: number;
+    };
+    descriptionStyle: StyleProp<TextStyle>;
+    errorStyle: StyleProp<TextStyle>;
+    /**
+     * The two decorators of an `InputGroup`, already pinned to their edge and inset by the
+     * field's own padding. They are resolved here, on the root, because the size that
+     * decides that padding is the root's — the group itself adds no axis of its own.
+     */
+    prefixStyle: StyleProp<ViewStyle>;
+    suffixStyle: StyleProp<ViewStyle>;
+    /**
+     * Values, not a style: an icon is a third party's component, and `size` and `color` are
+     * props it takes rather than a style it accepts. Flattened once here, the way the `Chip`
+     * and the `Alert` publish theirs.
+     */
+    icon: {
+        size: number | undefined;
+        color: string | undefined;
+    };
+    /**
+     * 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;
+};
+
+export type { InputFieldProps as I, InputProps as a, InputContextValue as b, InputDescriptionProps as c, InputErrorProps as d, InputLabelPlacement as e, InputLabelProps as f, InputSize as g, InputSlot as h, InputVariant as i };

package/dist/system/index.cjs

@@ -11,7 +11,6 @@ var _chunkJ2JJLKLGcjs = require('../chunk-J2JJLKLG.cjs');
 
 
 
-var _chunkB4W2XNBPcjs = require('../chunk-B4W2XNBP.cjs');
 
 
 
@@ -29,11 +28,12 @@ var _chunkB4W2XNBPcjs = require('../chunk-B4W2XNBP.cjs');
 
 
 
+var _chunkIG4Q3WQOcjs = require('../chunk-IG4Q3WQO.cjs');
 
 
 
 
-var _chunkIG4Q3WQOcjs = require('../chunk-IG4Q3WQO.cjs');
+var _chunkB4W2XNBPcjs = require('../chunk-B4W2XNBP.cjs');
 require('../chunk-EJQCQPET.cjs');
 
 

package/dist/system/index.js

@@ -7,11 +7,6 @@ import {
   CloseButton,
   closeButtonBase
 } from "../chunk-A4RGJBP2.js";
-import {
-  Icon,
-  IconContext,
-  useIconContext
-} from "../chunk-ICR42HHG.js";
 import {
   FEEDBACK_OVERLAY,
   HIGHLIGHT_DURATION,
@@ -34,6 +29,11 @@ import {
   rippleRadiusFor,
   useFeedback
 } from "../chunk-4HELPMAK.js";
+import {
+  Icon,
+  IconContext,
+  useIconContext
+} from "../chunk-ICR42HHG.js";
 import "../chunk-EGLLDKN6.js";
 import {
   createRecipe,

package/dist/theme/index.cjs

@@ -9,7 +9,7 @@
 
 
 
-var _chunkGBPWTFTUcjs = require('../chunk-GBPWTFTU.cjs');
+var _chunkOHEHPQLCcjs = require('../chunk-OHEHPQLC.cjs');
 
 
 
@@ -34,4 +34,4 @@ require('../chunk-MC7SY2QH.cjs');
 
 
 
-exports.ThemeContext = _chunk57SJ4LJFcjs.ThemeContext; exports.XAUIProvider = _chunkGBPWTFTUcjs.XAUIProvider; exports.buildRadius = _chunkGBPWTFTUcjs.buildRadius; exports.buildShadows = _chunkGBPWTFTUcjs.buildShadows; exports.createTheme = _chunkGBPWTFTUcjs.createTheme; exports.defaultTheme = _chunkGBPWTFTUcjs.defaultTheme; exports.deriveColors = _chunkGBPWTFTUcjs.deriveColors; exports.deriveTint = _chunk57SJ4LJFcjs.deriveTint; exports.palette = _chunkGBPWTFTUcjs.palette; exports.primitives = _chunkGBPWTFTUcjs.primitives; exports.sourceKeys = _chunkGBPWTFTUcjs.sourceKeys; exports.tokens = _chunkGBPWTFTUcjs.tokens; exports.useColorMode = _chunk57SJ4LJFcjs.useColorMode; exports.useThemeColor = _chunk57SJ4LJFcjs.useThemeColor; exports.useXAUITheme = _chunk57SJ4LJFcjs.useXAUITheme;
+exports.ThemeContext = _chunk57SJ4LJFcjs.ThemeContext; exports.XAUIProvider = _chunkOHEHPQLCcjs.XAUIProvider; exports.buildRadius = _chunkOHEHPQLCcjs.buildRadius; exports.buildShadows = _chunkOHEHPQLCcjs.buildShadows; exports.createTheme = _chunkOHEHPQLCcjs.createTheme; exports.defaultTheme = _chunkOHEHPQLCcjs.defaultTheme; exports.deriveColors = _chunkOHEHPQLCcjs.deriveColors; exports.deriveTint = _chunk57SJ4LJFcjs.deriveTint; exports.palette = _chunkOHEHPQLCcjs.palette; exports.primitives = _chunkOHEHPQLCcjs.primitives; exports.sourceKeys = _chunkOHEHPQLCcjs.sourceKeys; exports.tokens = _chunkOHEHPQLCcjs.tokens; exports.useColorMode = _chunk57SJ4LJFcjs.useColorMode; exports.useThemeColor = _chunk57SJ4LJFcjs.useThemeColor; exports.useXAUITheme = _chunk57SJ4LJFcjs.useXAUITheme;

package/dist/theme/index.js

@@ -9,7 +9,7 @@ import {
   primitives,
   sourceKeys,
   tokens
-} from "../chunk-GG2WWCBK.js";
+} from "../chunk-TZG3DERP.js";
 import {
   ThemeContext,
   deriveTint,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaui/native",
-  "version": "0.9.1-alpha.24",
+  "version": "0.9.1-alpha.26",
   "description": "Composition-first React Native UI components with native animations powered by Reanimated",
   "keywords": [
     "react-native",
@@ -77,6 +77,16 @@
         "default": "./dist/components/input/index.cjs"
       }
     },
+    "./input-group": {
+      "import": {
+        "types": "./dist/components/input-group/index.d.ts",
+        "default": "./dist/components/input-group/index.js"
+      },
+      "require": {
+        "types": "./dist/components/input-group/index.d.cts",
+        "default": "./dist/components/input-group/index.cjs"
+      }
+    },
     "./input-otp": {
       "import": {
         "types": "./dist/components/input-otp/index.d.ts",
@@ -87,6 +97,16 @@
         "default": "./dist/components/input-otp/index.cjs"
       }
     },
+    "./text-area": {
+      "import": {
+        "types": "./dist/components/text-area/index.d.ts",
+        "default": "./dist/components/text-area/index.js"
+      },
+      "require": {
+        "types": "./dist/components/text-area/index.d.cts",
+        "default": "./dist/components/text-area/index.cjs"
+      }
+    },
     "./typography": {
       "import": {
         "types": "./dist/components/typography/index.d.ts",

package/dist/{chunk-4J26FA6O.js → chunk-3WISQT22.js}

@@ -2,13 +2,13 @@ import {
   CloseButton,
   closeButtonBase
 } from "./chunk-A4RGJBP2.js";
-import {
-  Icon
-} from "./chunk-ICR42HHG.js";
 import {
   PressableFeedback,
   usePressState
 } from "./chunk-4HELPMAK.js";
+import {
+  Icon
+} from "./chunk-ICR42HHG.js";
 import {
   warnDev
 } from "./chunk-EGLLDKN6.js";

package/dist/{chunk-AV5LMFS3.cjs → chunk-I7G77Q65.cjs}

@@ -4,11 +4,11 @@
 var _chunkJ2JJLKLGcjs = require('./chunk-J2JJLKLG.cjs');
 
 
-var _chunkB4W2XNBPcjs = require('./chunk-B4W2XNBP.cjs');
 
+var _chunkIG4Q3WQOcjs = require('./chunk-IG4Q3WQO.cjs');
 
 
-var _chunkIG4Q3WQOcjs = require('./chunk-IG4Q3WQO.cjs');
+var _chunkB4W2XNBPcjs = require('./chunk-B4W2XNBP.cjs');
 
 
 var _chunkEJQCQPETcjs = require('./chunk-EJQCQPET.cjs');