@xaui/native 0.9.1-beta.97 → 0.9.1-beta.99

package/dist/components/agenda-calendar/agenda-calendar-today-button.d.ts

@@ -13,6 +13,10 @@ import { View } from 'react-native';
  *
  * The word is the caller's: "Today", "Aujourd'hui", "Hoy". R3 wraps a text child into the
  * label, so `<AgendaCalendar.TodayButton>Today</…>` is the whole call.
+ *
+ * **It wears the card's `variant`**, the one that aims the chosen day: outlined with the
+ * word in the accent on `primary`, a soft fill on `secondary`, a neutral one on `tertiary`,
+ * the bare word on `ghost`. Nothing to pass — the pill reads the root's resolution.
  */
 export declare const AgendaCalendarTodayButton: import("react").ForwardRefExoticComponent<{
     children?: import("react").ReactNode;

package/dist/components/agenda-calendar/agenda-calendar.recipe.d.cts

@@ -1,7 +1,7 @@
 import type { SlotStyles } from '../../system/recipe';
 import type { XAUITheme } from '../../theme/theme.type';
 import type { AgendaCalendarSlot } from './agenda-calendar.type';
-export declare const agendaCalendarRecipe: import("../..").Recipe<"header" | "nav" | "week" | "root" | "navButton" | "today" | "todayDisabled" | "todayLabel" | "picker" | "pickerItem", "default", {
+export declare const agendaCalendarRecipe: import("../..").Recipe<"header" | "nav" | "week" | "root" | "navButton" | "today" | "todayDisabled" | "todayLabel" | "picker" | "pickerItem", import("..").CalendarVariant, {
     readonly size: {
         readonly sm: (theme: XAUITheme) => SlotStyles<AgendaCalendarSlot>;
         readonly md: (theme: XAUITheme) => SlotStyles<AgendaCalendarSlot>;

package/dist/components/agenda-calendar/agenda-calendar.recipe.d.ts

@@ -1,7 +1,7 @@
 import type { SlotStyles } from '../../system/recipe';
 import type { XAUITheme } from '../../theme/theme.type';
 import type { AgendaCalendarSlot } from './agenda-calendar.type';
-export declare const agendaCalendarRecipe: import("../..").Recipe<"header" | "nav" | "week" | "root" | "navButton" | "today" | "todayDisabled" | "todayLabel" | "picker" | "pickerItem", "default", {
+export declare const agendaCalendarRecipe: import("../..").Recipe<"header" | "nav" | "week" | "root" | "navButton" | "today" | "todayDisabled" | "todayLabel" | "picker" | "pickerItem", import("..").CalendarVariant, {
     readonly size: {
         readonly sm: (theme: XAUITheme) => SlotStyles<AgendaCalendarSlot>;
         readonly md: (theme: XAUITheme) => SlotStyles<AgendaCalendarSlot>;

package/dist/components/agenda-calendar/agenda-calendar.type.d.cts

@@ -7,7 +7,10 @@ import type { RadiusKey, Size } from '../../theme/theme.type';
 import type { WeekDay } from '../../utils/dates';
 import type { CalendarVariant } from '../calendar';
 export type AgendaCalendarSlot = 'root' | 'header' | 'nav' | 'navButton' | 'today' | 'todayDisabled' | 'todayLabel' | 'week' | 'picker' | 'pickerItem';
-/** The `Calendar`'s four, because the chosen day is the same day. */
+/**
+ * The `Calendar`'s four, because the chosen day is the same day. It aims the pill that says
+ * "Today" as well — the variant is the card's one level of emphasis, not the disc's alone.
+ */
 export type AgendaCalendarVariant = CalendarVariant;
 /**
  * Which strip is on screen: the week of days, the months of the year, or the years.

package/dist/components/agenda-calendar/agenda-calendar.type.d.ts

@@ -7,7 +7,10 @@ import type { RadiusKey, Size } from '../../theme/theme.type';
 import type { WeekDay } from '../../utils/dates';
 import type { CalendarVariant } from '../calendar';
 export type AgendaCalendarSlot = 'root' | 'header' | 'nav' | 'navButton' | 'today' | 'todayDisabled' | 'todayLabel' | 'week' | 'picker' | 'pickerItem';
-/** The `Calendar`'s four, because the chosen day is the same day. */
+/**
+ * The `Calendar`'s four, because the chosen day is the same day. It aims the pill that says
+ * "Today" as well — the variant is the card's one level of emphasis, not the disc's alone.
+ */
 export type AgendaCalendarVariant = CalendarVariant;
 /**
  * Which strip is on screen: the week of days, the months of the year, or the years.

package/dist/components/agenda-calendar/index.cjs

@@ -14,7 +14,7 @@
 
 
 
-var _chunkSIOSYITDcjs = require('../../chunk-SIOSYITD.cjs');
+var _chunkZBFBF7S4cjs = require('../../chunk-ZBFBF7S4.cjs');
 require('../../chunk-6ZWQDTGQ.cjs');
 require('../../chunk-ISHMSP6P.cjs');
 require('../../chunk-WFEMJCXO.cjs');
@@ -46,4 +46,4 @@ require('../../chunk-TK44VBIE.cjs');
 
 
 
-exports.AgendaCalendar = _chunkSIOSYITDcjs.AgendaCalendar; exports.AgendaCalendarDay = _chunkSIOSYITDcjs.AgendaCalendarDay; exports.AgendaCalendarHeader = _chunkSIOSYITDcjs.AgendaCalendarHeader; exports.AgendaCalendarMonthPicker = _chunkSIOSYITDcjs.AgendaCalendarMonthPicker; exports.AgendaCalendarNav = _chunkSIOSYITDcjs.AgendaCalendarNav; exports.AgendaCalendarNextButton = _chunkSIOSYITDcjs.AgendaCalendarNextButton; exports.AgendaCalendarPreviousButton = _chunkSIOSYITDcjs.AgendaCalendarPreviousButton; exports.AgendaCalendarRoot = _chunkSIOSYITDcjs.AgendaCalendarRoot; exports.AgendaCalendarTitle = _chunkSIOSYITDcjs.AgendaCalendarTitle; exports.AgendaCalendarTodayButton = _chunkSIOSYITDcjs.AgendaCalendarTodayButton; exports.AgendaCalendarWeek = _chunkSIOSYITDcjs.AgendaCalendarWeek; exports.AgendaCalendarWeekdays = _chunkSIOSYITDcjs.AgendaCalendarWeekdays; exports.AgendaCalendarYearPicker = _chunkSIOSYITDcjs.AgendaCalendarYearPicker; exports.agendaCalendarRecipe = _chunkSIOSYITDcjs.agendaCalendarRecipe; exports.useAgendaCalendar = _chunkSIOSYITDcjs.useAgendaCalendar;
+exports.AgendaCalendar = _chunkZBFBF7S4cjs.AgendaCalendar; exports.AgendaCalendarDay = _chunkZBFBF7S4cjs.AgendaCalendarDay; exports.AgendaCalendarHeader = _chunkZBFBF7S4cjs.AgendaCalendarHeader; exports.AgendaCalendarMonthPicker = _chunkZBFBF7S4cjs.AgendaCalendarMonthPicker; exports.AgendaCalendarNav = _chunkZBFBF7S4cjs.AgendaCalendarNav; exports.AgendaCalendarNextButton = _chunkZBFBF7S4cjs.AgendaCalendarNextButton; exports.AgendaCalendarPreviousButton = _chunkZBFBF7S4cjs.AgendaCalendarPreviousButton; exports.AgendaCalendarRoot = _chunkZBFBF7S4cjs.AgendaCalendarRoot; exports.AgendaCalendarTitle = _chunkZBFBF7S4cjs.AgendaCalendarTitle; exports.AgendaCalendarTodayButton = _chunkZBFBF7S4cjs.AgendaCalendarTodayButton; exports.AgendaCalendarWeek = _chunkZBFBF7S4cjs.AgendaCalendarWeek; exports.AgendaCalendarWeekdays = _chunkZBFBF7S4cjs.AgendaCalendarWeekdays; exports.AgendaCalendarYearPicker = _chunkZBFBF7S4cjs.AgendaCalendarYearPicker; exports.agendaCalendarRecipe = _chunkZBFBF7S4cjs.agendaCalendarRecipe; exports.useAgendaCalendar = _chunkZBFBF7S4cjs.useAgendaCalendar;

package/dist/components/agenda-calendar/index.js

@@ -14,7 +14,7 @@ import {
   AgendaCalendarYearPicker,
   agendaCalendarRecipe,
   useAgendaCalendar
-} from "../../chunk-QT7KLGO3.js";
+} from "../../chunk-V5FYHQKQ.js";
 import "../../chunk-6NAZ2IHL.js";
 import "../../chunk-SHFUQVLX.js";
 import "../../chunk-NCTOTTVW.js";

package/dist/components/autocomplete/autocomplete-description.d.cts

@@ -0,0 +1,14 @@
+import { Text } from 'react-native';
+/**
+ * The hint under the field — what the list holds, how much of it there is. The
+ * `TextField.Description`, on a field that opens a list.
+ *
+ * It turns `danger` with `isInvalid`, like the label, and sits inset by half the field's
+ * padding so the column reads as one block rather than a label, a box and a stray line.
+ *
+ * It carries the id the trigger points at, so a screen reader reads the hint after the
+ * value rather than leaving it on screen for the sighted alone.
+ */
+export declare const AutocompleteDescription: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode;
+} & Omit<import("react-native").TextProps, "children"> & Omit<import("../..").TextStyleProps, keyof import("react-native").TextProps> & import("react").RefAttributes<Text>>;

package/dist/components/autocomplete/autocomplete-description.d.ts

@@ -0,0 +1,14 @@
+import { Text } from 'react-native';
+/**
+ * The hint under the field — what the list holds, how much of it there is. The
+ * `TextField.Description`, on a field that opens a list.
+ *
+ * It turns `danger` with `isInvalid`, like the label, and sits inset by half the field's
+ * padding so the column reads as one block rather than a label, a box and a stray line.
+ *
+ * It carries the id the trigger points at, so a screen reader reads the hint after the
+ * value rather than leaving it on screen for the sighted alone.
+ */
+export declare const AutocompleteDescription: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode;
+} & Omit<import("react-native").TextProps, "children"> & Omit<import("../..").TextStyleProps, keyof import("react-native").TextProps> & import("react").RefAttributes<Text>>;

package/dist/components/autocomplete/autocomplete-error.d.cts

@@ -0,0 +1,12 @@
+import { Text } from 'react-native';
+/**
+ * What is wrong with the chosen row, in `danger` — the `TextField.Error`, on a field that
+ * opens a list.
+ *
+ * **It always renders what it is given.** `isInvalid` paints the trigger's border and turns
+ * the label and the description, but it does not mount or unmount this slot: a slot that
+ * silently renders nothing is one you cannot debug, so you write the condition yourself.
+ */
+export declare const AutocompleteError: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode;
+} & Omit<import("react-native").TextProps, "children"> & Omit<import("../..").TextStyleProps, keyof import("react-native").TextProps> & import("react").RefAttributes<Text>>;

package/dist/components/autocomplete/autocomplete-error.d.ts

@@ -0,0 +1,12 @@
+import { Text } from 'react-native';
+/**
+ * What is wrong with the chosen row, in `danger` — the `TextField.Error`, on a field that
+ * opens a list.
+ *
+ * **It always renders what it is given.** `isInvalid` paints the trigger's border and turns
+ * the label and the description, but it does not mount or unmount this slot: a slot that
+ * silently renders nothing is one you cannot debug, so you write the condition yourself.
+ */
+export declare const AutocompleteError: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode;
+} & Omit<import("react-native").TextProps, "children"> & Omit<import("../..").TextStyleProps, keyof import("react-native").TextProps> & import("react").RefAttributes<Text>>;

package/dist/components/autocomplete/autocomplete-label.d.cts

@@ -0,0 +1,15 @@
+import { Text } from 'react-native';
+/**
+ * What the field is for — the `TextField.Label`, on a field that opens a list.
+ *
+ * It turns `danger` with `isInvalid`, so the field that is wrong is findable on a long form
+ * without reading every message. Its colour is the theme's `foreground` rather than the
+ * variant's: the label sits outside the box, on the screen behind it, so a tinted field
+ * does not tint it.
+ *
+ * It carries the id the trigger points at, which is what makes a screen reader announce
+ * "État, liste déroulante" instead of reading the placeholder and hoping.
+ */
+export declare const AutocompleteLabel: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode;
+} & Omit<import("react-native").TextProps, "children"> & Omit<import("../..").TextStyleProps, keyof import("react-native").TextProps> & import("react").RefAttributes<Text>>;

package/dist/components/autocomplete/autocomplete-label.d.ts

@@ -0,0 +1,15 @@
+import { Text } from 'react-native';
+/**
+ * What the field is for — the `TextField.Label`, on a field that opens a list.
+ *
+ * It turns `danger` with `isInvalid`, so the field that is wrong is findable on a long form
+ * without reading every message. Its colour is the theme's `foreground` rather than the
+ * variant's: the label sits outside the box, on the screen behind it, so a tinted field
+ * does not tint it.
+ *
+ * It carries the id the trigger points at, which is what makes a screen reader announce
+ * "État, liste déroulante" instead of reading the placeholder and hoping.
+ */
+export declare const AutocompleteLabel: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode;
+} & Omit<import("react-native").TextProps, "children"> & Omit<import("../..").TextStyleProps, keyof import("react-native").TextProps> & import("react").RefAttributes<Text>>;

package/dist/components/autocomplete/autocomplete.d.cts

@@ -1,9 +1,10 @@
-import type { AutocompleteProps } from './autocomplete.type';
+import { View } from 'react-native';
 /**
  * A field that opens a list you search.
  *
  * ```tsx
  * <Autocomplete onValueChange={setState}>
+ *   <Autocomplete.Label>État</Autocomplete.Label>
  *   <Autocomplete.Trigger>
  *     <Autocomplete.Value placeholder="Choisir un état" />
  *     <Autocomplete.Indicator />
@@ -15,6 +16,7 @@ import type { AutocompleteProps } from './autocomplete.type';
  *     <Autocomplete.Item value="tx">Texas</Autocomplete.Item>
  *     <Autocomplete.Empty>Aucun résultat</Autocomplete.Empty>
  *   </Autocomplete.Content>
+ *   <Autocomplete.Description>Cinquante États, une seule ligne.</Autocomplete.Description>
  * </Autocomplete>
  * ```
  *
@@ -30,10 +32,51 @@ import type { AutocompleteProps } from './autocomplete.type';
  * the drift would show as a select and an autocomplete side by side in a form with fields
  * half a shade apart.
  *
- * **The root renders no node.** It is state and resolved style around a trigger and a
- * panel, so `ref`, `style` and the a11y props live on `Autocomplete.Trigger`.
+ * **The root is the column, not the field** — the `TextField`'s shape, and the
+ * `DatePicker`'s: a `View` that stacks `Autocomplete.Label`, the trigger and
+ * `Autocomplete.Description` / `.Error` with one `gap`, so JSX order is screen order. It is
+ * the column and the help lines that make this a field on a form rather than a button that
+ * opens a list, and they are the `TextField`'s token for token — a text field and an
+ * autocomplete on the same form read as one control.
+ *
+ * `Autocomplete.Trigger` is the field, and it keeps its own `ref` — it is the node the
+ * panel measures. `Autocomplete.Overlay` and `Autocomplete.Content` portal out, so they add
+ * nothing to the column.
  */
-export declare function Autocomplete({ children, variant, size, radius, color, value: controlledValue, defaultValue, onValueChange, isOpen: controlledOpen, defaultOpen, onOpenChange, query: controlledQuery, defaultQuery, onQueryChange, isDisabled, isInvalid, }: AutocompleteProps): import("react").JSX.Element;
-export declare namespace Autocomplete {
-    var displayName: string;
-}
+export declare const Autocomplete: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode;
+    variant?: import("./autocomplete.type").AutocompleteVariant;
+    size?: import("./autocomplete.type").AutocompleteSize;
+    radius?: import("../..").RadiusKey;
+    color?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    query?: string;
+    defaultQuery?: string;
+    onQueryChange?: (query: string) => void;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    asChild?: boolean;
+} & Omit<import("react-native").ViewProps, keyof {
+    children?: import("react").ReactNode;
+    variant?: import("./autocomplete.type").AutocompleteVariant;
+    size?: import("./autocomplete.type").AutocompleteSize;
+    radius?: import("../..").RadiusKey;
+    color?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    query?: string;
+    defaultQuery?: string;
+    onQueryChange?: (query: string) => void;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    asChild?: boolean;
+}> & Omit<import("../..").ViewStyleProps, "color" | "value" | "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" | "asChild" | "radius" | "size" | "variant" | "defaultValue" | "onValueChange" | "isOpen" | "defaultOpen" | "onOpenChange" | "isInvalid" | "query" | "defaultQuery" | "onQueryChange"> & import("react").RefAttributes<View>>;

package/dist/components/autocomplete/autocomplete.d.ts

@@ -1,9 +1,10 @@
-import type { AutocompleteProps } from './autocomplete.type';
+import { View } from 'react-native';
 /**
  * A field that opens a list you search.
  *
  * ```tsx
  * <Autocomplete onValueChange={setState}>
+ *   <Autocomplete.Label>État</Autocomplete.Label>
  *   <Autocomplete.Trigger>
  *     <Autocomplete.Value placeholder="Choisir un état" />
  *     <Autocomplete.Indicator />
@@ -15,6 +16,7 @@ import type { AutocompleteProps } from './autocomplete.type';
  *     <Autocomplete.Item value="tx">Texas</Autocomplete.Item>
  *     <Autocomplete.Empty>Aucun résultat</Autocomplete.Empty>
  *   </Autocomplete.Content>
+ *   <Autocomplete.Description>Cinquante États, une seule ligne.</Autocomplete.Description>
  * </Autocomplete>
  * ```
  *
@@ -30,10 +32,51 @@ import type { AutocompleteProps } from './autocomplete.type';
  * the drift would show as a select and an autocomplete side by side in a form with fields
  * half a shade apart.
  *
- * **The root renders no node.** It is state and resolved style around a trigger and a
- * panel, so `ref`, `style` and the a11y props live on `Autocomplete.Trigger`.
+ * **The root is the column, not the field** — the `TextField`'s shape, and the
+ * `DatePicker`'s: a `View` that stacks `Autocomplete.Label`, the trigger and
+ * `Autocomplete.Description` / `.Error` with one `gap`, so JSX order is screen order. It is
+ * the column and the help lines that make this a field on a form rather than a button that
+ * opens a list, and they are the `TextField`'s token for token — a text field and an
+ * autocomplete on the same form read as one control.
+ *
+ * `Autocomplete.Trigger` is the field, and it keeps its own `ref` — it is the node the
+ * panel measures. `Autocomplete.Overlay` and `Autocomplete.Content` portal out, so they add
+ * nothing to the column.
  */
-export declare function Autocomplete({ children, variant, size, radius, color, value: controlledValue, defaultValue, onValueChange, isOpen: controlledOpen, defaultOpen, onOpenChange, query: controlledQuery, defaultQuery, onQueryChange, isDisabled, isInvalid, }: AutocompleteProps): import("react").JSX.Element;
-export declare namespace Autocomplete {
-    var displayName: string;
-}
+export declare const Autocomplete: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode;
+    variant?: import("./autocomplete.type").AutocompleteVariant;
+    size?: import("./autocomplete.type").AutocompleteSize;
+    radius?: import("../..").RadiusKey;
+    color?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    query?: string;
+    defaultQuery?: string;
+    onQueryChange?: (query: string) => void;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    asChild?: boolean;
+} & Omit<import("react-native").ViewProps, keyof {
+    children?: import("react").ReactNode;
+    variant?: import("./autocomplete.type").AutocompleteVariant;
+    size?: import("./autocomplete.type").AutocompleteSize;
+    radius?: import("../..").RadiusKey;
+    color?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    query?: string;
+    defaultQuery?: string;
+    onQueryChange?: (query: string) => void;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    asChild?: boolean;
+}> & Omit<import("../..").ViewStyleProps, "color" | "value" | "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" | "asChild" | "radius" | "size" | "variant" | "defaultValue" | "onValueChange" | "isOpen" | "defaultOpen" | "onOpenChange" | "isInvalid" | "query" | "defaultQuery" | "onQueryChange"> & import("react").RefAttributes<View>>;

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

@@ -34,13 +34,15 @@ type AutocompleteOwnProps = {
     onQueryChange?: (query: string) => void;
     isDisabled?: boolean;
     isInvalid?: boolean;
+    asChild?: boolean;
 };
 /**
- * The root renders **no node**, like the `Select`'s. It is state and resolved style around
- * a trigger and a panel, and the trigger is the control — which is why `ref`, `style`,
- * `testID`, the a11y props and R14's style props are all on `Autocomplete.Trigger`.
+ * The root is the **column** — a `View` stacking the label, the trigger and the help line —
+ * so `ref`, `style` and R14's style props here dress that column. The control itself is
+ * `Autocomplete.Trigger`, which keeps its own `ref` and its own a11y props: it is the node
+ * the panel measures and the node a screen reader stops on.
  */
-export type AutocompleteProps = AutocompleteOwnProps;
+export type AutocompleteProps = AutocompleteOwnProps & Omit<ViewProps, keyof AutocompleteOwnProps> & Omit<ViewStyleProps, keyof AutocompleteOwnProps | keyof ViewProps>;
 export type AutocompleteTriggerProps = {
     children?: ReactNode;
     asChild?: boolean;
@@ -51,6 +53,15 @@ type AutocompleteTextOwnProps = {
 };
 export type AutocompleteValueProps = AutocompleteTextOwnProps & Omit<TextProps, keyof AutocompleteTextOwnProps> & Omit<TextStyleProps, keyof AutocompleteTextOwnProps | keyof TextProps>;
 export type AutocompleteOverlayProps = ViewProps & ViewStyleProps;
+type AutocompleteTextSlotOwnProps = {
+    children?: ReactNode;
+};
+/** What the field is for — the `TextField.Label`, on a field that opens a list. */
+export type AutocompleteLabelProps = AutocompleteTextSlotOwnProps & Omit<TextProps, keyof AutocompleteTextSlotOwnProps> & Omit<TextStyleProps, keyof AutocompleteTextSlotOwnProps | keyof TextProps>;
+/** The hint under the field — the `TextField.Description`. */
+export type AutocompleteDescriptionProps = AutocompleteLabelProps;
+/** What is wrong with the chosen row — the `TextField.Error`. */
+export type AutocompleteErrorProps = AutocompleteLabelProps;
 /** A row's own word. It has no placeholder — a row is never empty. */
 export type AutocompleteItemLabelProps = {
     children?: ReactNode;
@@ -92,6 +103,9 @@ export type AutocompleteContextValue = {
     itemStyle: StyleProp<ViewStyle>;
     itemPressedStyle: StyleProp<ViewStyle>;
     itemLabelStyle: StyleProp<TextStyle>;
+    labelStyle: StyleProp<TextStyle>;
+    descriptionStyle: StyleProp<TextStyle>;
+    errorStyle: StyleProp<TextStyle>;
     glyph: IconContextValue;
     placeholderColor?: string;
     value?: string;
@@ -108,6 +122,9 @@ export type AutocompleteContextValue = {
     setAnchor: (anchor: AutocompleteAnchor) => void;
     labelFor: (value: string) => string | undefined;
     registerLabel: (value: string, label: string) => void;
+    /** The ids the trigger points at, so the label and the hint are what it is announced by. */
+    labelId: string;
+    descriptionId: string;
 };
 /** What one row publishes to its own slots. */
 export type AutocompleteItemContextValue = {

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

@@ -34,13 +34,15 @@ type AutocompleteOwnProps = {
     onQueryChange?: (query: string) => void;
     isDisabled?: boolean;
     isInvalid?: boolean;
+    asChild?: boolean;
 };
 /**
- * The root renders **no node**, like the `Select`'s. It is state and resolved style around
- * a trigger and a panel, and the trigger is the control — which is why `ref`, `style`,
- * `testID`, the a11y props and R14's style props are all on `Autocomplete.Trigger`.
+ * The root is the **column** — a `View` stacking the label, the trigger and the help line —
+ * so `ref`, `style` and R14's style props here dress that column. The control itself is
+ * `Autocomplete.Trigger`, which keeps its own `ref` and its own a11y props: it is the node
+ * the panel measures and the node a screen reader stops on.
  */
-export type AutocompleteProps = AutocompleteOwnProps;
+export type AutocompleteProps = AutocompleteOwnProps & Omit<ViewProps, keyof AutocompleteOwnProps> & Omit<ViewStyleProps, keyof AutocompleteOwnProps | keyof ViewProps>;
 export type AutocompleteTriggerProps = {
     children?: ReactNode;
     asChild?: boolean;
@@ -51,6 +53,15 @@ type AutocompleteTextOwnProps = {
 };
 export type AutocompleteValueProps = AutocompleteTextOwnProps & Omit<TextProps, keyof AutocompleteTextOwnProps> & Omit<TextStyleProps, keyof AutocompleteTextOwnProps | keyof TextProps>;
 export type AutocompleteOverlayProps = ViewProps & ViewStyleProps;
+type AutocompleteTextSlotOwnProps = {
+    children?: ReactNode;
+};
+/** What the field is for — the `TextField.Label`, on a field that opens a list. */
+export type AutocompleteLabelProps = AutocompleteTextSlotOwnProps & Omit<TextProps, keyof AutocompleteTextSlotOwnProps> & Omit<TextStyleProps, keyof AutocompleteTextSlotOwnProps | keyof TextProps>;
+/** The hint under the field — the `TextField.Description`. */
+export type AutocompleteDescriptionProps = AutocompleteLabelProps;
+/** What is wrong with the chosen row — the `TextField.Error`. */
+export type AutocompleteErrorProps = AutocompleteLabelProps;
 /** A row's own word. It has no placeholder — a row is never empty. */
 export type AutocompleteItemLabelProps = {
     children?: ReactNode;
@@ -92,6 +103,9 @@ export type AutocompleteContextValue = {
     itemStyle: StyleProp<ViewStyle>;
     itemPressedStyle: StyleProp<ViewStyle>;
     itemLabelStyle: StyleProp<TextStyle>;
+    labelStyle: StyleProp<TextStyle>;
+    descriptionStyle: StyleProp<TextStyle>;
+    errorStyle: StyleProp<TextStyle>;
     glyph: IconContextValue;
     placeholderColor?: string;
     value?: string;
@@ -108,6 +122,9 @@ export type AutocompleteContextValue = {
     setAnchor: (anchor: AutocompleteAnchor) => void;
     labelFor: (value: string) => string | undefined;
     registerLabel: (value: string, label: string) => void;
+    /** The ids the trigger points at, so the label and the hint are what it is announced by. */
+    labelId: string;
+    descriptionId: string;
 };
 /** What one row publishes to its own slots. */
 export type AutocompleteItemContextValue = {

package/dist/components/autocomplete/index.cjs

@@ -13,9 +13,13 @@
 
 
 
-var _chunkWH7MFY3Hcjs = require('../../chunk-WH7MFY3H.cjs');
+
+
+
+var _chunkJMHB7K53cjs = require('../../chunk-JMHB7K53.cjs');
 require('../../chunk-FJGPDWMS.cjs');
 require('../../chunk-YVYYONTP.cjs');
+require('../../chunk-BKY5YQ7W.cjs');
 require('../../chunk-XILRXEUL.cjs');
 require('../../chunk-WDDXU3OH.cjs');
 require('../../chunk-EKS3W46M.cjs');
@@ -47,4 +51,7 @@ require('../../chunk-TK44VBIE.cjs');
 
 
 
-exports.Autocomplete = _chunkWH7MFY3Hcjs.Autocomplete2; exports.AutocompleteContent = _chunkWH7MFY3Hcjs.AutocompleteContent; exports.AutocompleteEmpty = _chunkWH7MFY3Hcjs.AutocompleteEmpty; exports.AutocompleteIndicator = _chunkWH7MFY3Hcjs.AutocompleteIndicator; exports.AutocompleteItem = _chunkWH7MFY3Hcjs.AutocompleteItem; exports.AutocompleteItemLabel = _chunkWH7MFY3Hcjs.AutocompleteItemLabel; exports.AutocompleteOverlay = _chunkWH7MFY3Hcjs.AutocompleteOverlay; exports.AutocompleteRoot = _chunkWH7MFY3Hcjs.Autocomplete; exports.AutocompleteSearch = _chunkWH7MFY3Hcjs.AutocompleteSearch; exports.AutocompleteTrigger = _chunkWH7MFY3Hcjs.AutocompleteTrigger; exports.AutocompleteValue = _chunkWH7MFY3Hcjs.AutocompleteValue; exports.autocompleteRecipe = _chunkWH7MFY3Hcjs.autocompleteRecipe; exports.useAutocomplete = _chunkWH7MFY3Hcjs.useAutocomplete; exports.useAutocompleteItem = _chunkWH7MFY3Hcjs.useAutocompleteItem;
+
+
+
+exports.Autocomplete = _chunkJMHB7K53cjs.Autocomplete2; exports.AutocompleteContent = _chunkJMHB7K53cjs.AutocompleteContent; exports.AutocompleteDescription = _chunkJMHB7K53cjs.AutocompleteDescription; exports.AutocompleteEmpty = _chunkJMHB7K53cjs.AutocompleteEmpty; exports.AutocompleteError = _chunkJMHB7K53cjs.AutocompleteError; exports.AutocompleteIndicator = _chunkJMHB7K53cjs.AutocompleteIndicator; exports.AutocompleteItem = _chunkJMHB7K53cjs.AutocompleteItem; exports.AutocompleteItemLabel = _chunkJMHB7K53cjs.AutocompleteItemLabel; exports.AutocompleteLabel = _chunkJMHB7K53cjs.AutocompleteLabel; exports.AutocompleteOverlay = _chunkJMHB7K53cjs.AutocompleteOverlay; exports.AutocompleteRoot = _chunkJMHB7K53cjs.Autocomplete; exports.AutocompleteSearch = _chunkJMHB7K53cjs.AutocompleteSearch; exports.AutocompleteTrigger = _chunkJMHB7K53cjs.AutocompleteTrigger; exports.AutocompleteValue = _chunkJMHB7K53cjs.AutocompleteValue; exports.autocompleteRecipe = _chunkJMHB7K53cjs.autocompleteRecipe; exports.useAutocomplete = _chunkJMHB7K53cjs.useAutocomplete; exports.useAutocompleteItem = _chunkJMHB7K53cjs.useAutocompleteItem;

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

@@ -1,6 +1,44 @@
-import { Autocomplete as AutocompleteRoot } from './autocomplete';
 import { AutocompleteIndicator } from './autocomplete-indicator';
-export declare const Autocomplete: typeof AutocompleteRoot & {
+export declare const Autocomplete: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode;
+    variant?: import("./autocomplete.type").AutocompleteVariant;
+    size?: import("./autocomplete.type").AutocompleteSize;
+    radius?: import("../..").RadiusKey;
+    color?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    query?: string;
+    defaultQuery?: string;
+    onQueryChange?: (query: string) => void;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    asChild?: boolean;
+} & Omit<import("react-native").ViewProps, keyof {
+    children?: import("react").ReactNode;
+    variant?: import("./autocomplete.type").AutocompleteVariant;
+    size?: import("./autocomplete.type").AutocompleteSize;
+    radius?: import("../..").RadiusKey;
+    color?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    query?: string;
+    defaultQuery?: string;
+    onQueryChange?: (query: string) => void;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    asChild?: boolean;
+}> & Omit<import("../..").ViewStyleProps, "color" | "value" | "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" | "asChild" | "radius" | "size" | "variant" | "defaultValue" | "onValueChange" | "isOpen" | "defaultOpen" | "onOpenChange" | "isInvalid" | "query" | "defaultQuery" | "onQueryChange"> & import("react").RefAttributes<import("react-native").View>> & {
+    Label: import("react").ForwardRefExoticComponent<{
+        children?: import("react").ReactNode;
+    } & Omit<import("react-native").TextProps, "children"> & Omit<import("../..").TextStyleProps, keyof import("react-native").TextProps> & import("react").RefAttributes<import("react-native").Text>>;
     Trigger: import("react").ForwardRefExoticComponent<{
         children?: import("react").ReactNode;
         asChild?: boolean;
@@ -57,17 +95,26 @@ export declare const Autocomplete: typeof AutocompleteRoot & {
     Empty: import("react").ForwardRefExoticComponent<{
         children?: import("react").ReactNode;
     } & Omit<import("react-native").TextProps, "children"> & Omit<import("../..").TextStyleProps, keyof import("react-native").TextProps> & import("react").RefAttributes<import("react-native").Text>>;
+    Description: import("react").ForwardRefExoticComponent<{
+        children?: import("react").ReactNode;
+    } & Omit<import("react-native").TextProps, "children"> & Omit<import("../..").TextStyleProps, keyof import("react-native").TextProps> & import("react").RefAttributes<import("react-native").Text>>;
+    Error: import("react").ForwardRefExoticComponent<{
+        children?: import("react").ReactNode;
+    } & Omit<import("react-native").TextProps, "children"> & Omit<import("../..").TextStyleProps, keyof import("react-native").TextProps> & import("react").RefAttributes<import("react-native").Text>>;
 };
 export { Autocomplete as AutocompleteRoot } from './autocomplete';
 export { AutocompleteContent } from './autocomplete-content';
+export { AutocompleteDescription } from './autocomplete-description';
 export { AutocompleteEmpty } from './autocomplete-empty';
+export { AutocompleteError } from './autocomplete-error';
 export { AutocompleteIndicator } from './autocomplete-indicator';
 export { AutocompleteItem } from './autocomplete-item';
 export { AutocompleteItemLabel } from './autocomplete-item-label';
+export { AutocompleteLabel } from './autocomplete-label';
 export { AutocompleteOverlay } from './autocomplete-overlay';
 export { AutocompleteSearch } from './autocomplete-search';
 export { AutocompleteTrigger } from './autocomplete-trigger';
 export { AutocompleteValue } from './autocomplete-value';
 export { useAutocomplete, useAutocompleteItem } from './autocomplete.context';
 export { autocompleteRecipe } from './autocomplete.recipe';
-export type { AutocompleteContentProps, AutocompleteContextValue, AutocompleteEmptyProps, AutocompleteItemContextValue, AutocompleteItemLabelProps, AutocompleteItemProps, AutocompleteOverlayProps, AutocompleteProps, AutocompleteSearchProps, AutocompleteSize, AutocompleteSlot, AutocompleteTriggerProps, AutocompleteValueProps, AutocompleteVariant, } from './autocomplete.type';
+export type { AutocompleteContentProps, AutocompleteContextValue, AutocompleteDescriptionProps, AutocompleteEmptyProps, AutocompleteErrorProps, AutocompleteItemContextValue, AutocompleteItemLabelProps, AutocompleteItemProps, AutocompleteLabelProps, AutocompleteOverlayProps, AutocompleteProps, AutocompleteSearchProps, AutocompleteSize, AutocompleteSlot, AutocompleteTriggerProps, AutocompleteValueProps, AutocompleteVariant, } from './autocomplete.type';