@xaui/native 0.9.1-alpha.93 → 0.9.1-beta.100

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

@@ -0,0 +1,13 @@
+import { Text } from 'react-native';
+/**
+ * What is wrong with the chosen value, 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 SelectError: 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/select/select-error.d.ts

@@ -0,0 +1,13 @@
+import { Text } from 'react-native';
+/**
+ * What is wrong with the chosen value, 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 SelectError: 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/select/select-group-label.d.cts

@@ -0,0 +1,11 @@
+import { Text } from 'react-native';
+/**
+ * A heading over a run of rows, **inside the panel**. It is not a row: it takes no press,
+ * and a screen reader announces it as a header so the group it opens is announced with it.
+ *
+ * It is not `Select.Label` either. That one names the field on the form; this one names a
+ * section of the list, and the two were one name until the field grew a label of its own.
+ */
+export declare const SelectGroupLabel: 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/select/select-group-label.d.ts

@@ -0,0 +1,11 @@
+import { Text } from 'react-native';
+/**
+ * A heading over a run of rows, **inside the panel**. It is not a row: it takes no press,
+ * and a screen reader announces it as a header so the group it opens is announced with it.
+ *
+ * It is not `Select.Label` either. That one names the field on the form; this one names a
+ * section of the list, and the two were one name until the field grew a label of its own.
+ */
+export declare const SelectGroupLabel: 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/select/select-indicator.d.cts

@@ -4,7 +4,7 @@ import type { SelectIndicatorProps } from './select.type';
  *
  * It rotates on a spring rather than a timing curve. A 180-degree turn on a curve reads
  * as an animation playing next to the list; on a spring heavy enough not to overshoot it
- * reads as the list pushing the glyph round — which is the same trade HeroUI makes, with
+ * reads as the list pushing the glyph round — which is the same trade the reference implementation makes, with
  * the same numbers.
  *
  * The rotation is a worklet on the UI thread, so it keeps turning while JavaScript is

package/dist/components/select/select-indicator.d.ts

@@ -4,7 +4,7 @@ import type { SelectIndicatorProps } from './select.type';
  *
  * It rotates on a spring rather than a timing curve. A 180-degree turn on a curve reads
  * as an animation playing next to the list; on a spring heavy enough not to overshoot it
- * reads as the list pushing the glyph round — which is the same trade HeroUI makes, with
+ * reads as the list pushing the glyph round — which is the same trade the reference implementation makes, with
  * the same numbers.
  *
  * The rotation is a worklet on the UI thread, so it keeps turning while JavaScript is

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

@@ -1,7 +1,16 @@
 import { Text } from 'react-native';
 /**
- * A heading over a run of rows. It is not a row: it takes no press, and a screen reader
- * announces it as a header so the group it opens is announced with it.
+ * 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
+ * trigger does not tint it.
+ *
+ * It carries the id the trigger points at, which is what makes a screen reader announce
+ * "Langue, bouton" instead of reading the placeholder and hoping.
+ *
+ * The heading over a run of rows *inside* the panel is `Select.GroupLabel`.
  */
 export declare const SelectLabel: import("react").ForwardRefExoticComponent<{
     children?: import("react").ReactNode;

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

@@ -1,7 +1,16 @@
 import { Text } from 'react-native';
 /**
- * A heading over a run of rows. It is not a row: it takes no press, and a screen reader
- * announces it as a header so the group it opens is announced with it.
+ * 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
+ * trigger does not tint it.
+ *
+ * It carries the id the trigger points at, which is what makes a screen reader announce
+ * "Langue, bouton" instead of reading the placeholder and hoping.
+ *
+ * The heading over a run of rows *inside* the panel is `Select.GroupLabel`.
  */
 export declare const SelectLabel: import("react").ForwardRefExoticComponent<{
     children?: import("react").ReactNode;

package/dist/components/select/select.d.cts

@@ -1,9 +1,10 @@
-import type { SelectProps } from './select.type';
+import { View } from 'react-native';
 /**
  * A field that opens a list.
  *
  * ```tsx
  * <Select defaultValue="fr" onValueChange={setLocale}>
+ *   <Select.Label>Langue</Select.Label>
  *   <Select.Trigger>
  *     <Select.Value placeholder="Choisir une langue" />
  *     <Select.Indicator />
@@ -15,15 +16,54 @@ import type { SelectProps } from './select.type';
  *       <Select.ItemIndicator />
  *     </Select.Item>
  *   </Select.Content>
+ *   <Select.Description>Celle de l'interface.</Select.Description>
  * </Select>
  * ```
  *
- * **The root renders no node.** It resolves the styles every slot reads and holds the two
- * pieces of state — what is open and what is chosen. `Select.Overlay` and
- * `Select.Content` render into the nearest `PortalHost` rather than where they are
- * written, so their position in the JSX says when they exist, not where they appear.
+ * **The root is the column, not the field** — the `TextField`'s shape, and the
+ * `Autocomplete`'s: a `View` stacking `Select.Label`, the trigger and
+ * `Select.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 a
+ * select on the same form read as one control.
+ *
+ * `Select.Trigger` is the field, and it keeps its own `ref`: it is the node the panel
+ * measures and the node a screen reader stops on. `Select.Overlay` and `Select.Content`
+ * render into the nearest `PortalHost` rather than where they are written, so their
+ * position in the JSX says when they exist, not where they appear — and they add nothing
+ * to the column.
+ *
+ * The heading over a run of rows *inside* the panel is `Select.GroupLabel`. It was
+ * `Select.Label` until the field grew a label of its own.
  */
-export declare function Select({ children, variant, size, radius, color, value: controlledValue, defaultValue, onValueChange, isOpen: controlledOpen, defaultOpen, onOpenChange, isDisabled, isInvalid, }: SelectProps): import("react").JSX.Element;
-export declare namespace Select {
-    var displayName: string;
-}
+export declare const Select: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode;
+    variant?: import("./select.type").SelectVariant;
+    size?: import("./select.type").SelectSize;
+    radius?: import("../..").RadiusKey;
+    color?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    asChild?: boolean;
+} & Omit<import("react-native").ViewProps, keyof {
+    children?: import("react").ReactNode;
+    variant?: import("./select.type").SelectVariant;
+    size?: import("./select.type").SelectSize;
+    radius?: import("../..").RadiusKey;
+    color?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => 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"> & import("react").RefAttributes<View>>;

package/dist/components/select/select.d.ts

@@ -1,9 +1,10 @@
-import type { SelectProps } from './select.type';
+import { View } from 'react-native';
 /**
  * A field that opens a list.
  *
  * ```tsx
  * <Select defaultValue="fr" onValueChange={setLocale}>
+ *   <Select.Label>Langue</Select.Label>
  *   <Select.Trigger>
  *     <Select.Value placeholder="Choisir une langue" />
  *     <Select.Indicator />
@@ -15,15 +16,54 @@ import type { SelectProps } from './select.type';
  *       <Select.ItemIndicator />
  *     </Select.Item>
  *   </Select.Content>
+ *   <Select.Description>Celle de l'interface.</Select.Description>
  * </Select>
  * ```
  *
- * **The root renders no node.** It resolves the styles every slot reads and holds the two
- * pieces of state — what is open and what is chosen. `Select.Overlay` and
- * `Select.Content` render into the nearest `PortalHost` rather than where they are
- * written, so their position in the JSX says when they exist, not where they appear.
+ * **The root is the column, not the field** — the `TextField`'s shape, and the
+ * `Autocomplete`'s: a `View` stacking `Select.Label`, the trigger and
+ * `Select.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 a
+ * select on the same form read as one control.
+ *
+ * `Select.Trigger` is the field, and it keeps its own `ref`: it is the node the panel
+ * measures and the node a screen reader stops on. `Select.Overlay` and `Select.Content`
+ * render into the nearest `PortalHost` rather than where they are written, so their
+ * position in the JSX says when they exist, not where they appear — and they add nothing
+ * to the column.
+ *
+ * The heading over a run of rows *inside* the panel is `Select.GroupLabel`. It was
+ * `Select.Label` until the field grew a label of its own.
  */
-export declare function Select({ children, variant, size, radius, color, value: controlledValue, defaultValue, onValueChange, isOpen: controlledOpen, defaultOpen, onOpenChange, isDisabled, isInvalid, }: SelectProps): import("react").JSX.Element;
-export declare namespace Select {
-    var displayName: string;
-}
+export declare const Select: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode;
+    variant?: import("./select.type").SelectVariant;
+    size?: import("./select.type").SelectSize;
+    radius?: import("../..").RadiusKey;
+    color?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    asChild?: boolean;
+} & Omit<import("react-native").ViewProps, keyof {
+    children?: import("react").ReactNode;
+    variant?: import("./select.type").SelectVariant;
+    size?: import("./select.type").SelectSize;
+    radius?: import("../..").RadiusKey;
+    color?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => 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"> & import("react").RefAttributes<View>>;

package/dist/components/select/select.recipe.d.cts

@@ -1,7 +1,7 @@
 import type { SlotStyles } from '../../system/recipe';
 import type { XAUITheme } from '../../theme/theme.type';
 import type { SelectSlot, SelectVariant } from './select.type';
-export declare const selectRecipe: import("../..").Recipe<"value" | "label" | "overlay" | "content" | "indicator" | "item" | "trigger" | "placeholder" | "itemLabel" | "itemDescription" | "itemIndicator", SelectVariant, {
+export declare const selectRecipe: import("../..").Recipe<"value" | "overlay" | "content" | "indicator" | "item" | "trigger" | "placeholder" | "groupLabel" | "itemLabel" | "itemDescription" | "itemIndicator", SelectVariant, {
     readonly size: {
         readonly sm: (theme: XAUITheme) => SlotStyles<SelectSlot>;
         readonly md: (theme: XAUITheme) => SlotStyles<SelectSlot>;

package/dist/components/select/select.recipe.d.ts

@@ -1,7 +1,7 @@
 import type { SlotStyles } from '../../system/recipe';
 import type { XAUITheme } from '../../theme/theme.type';
 import type { SelectSlot, SelectVariant } from './select.type';
-export declare const selectRecipe: import("../..").Recipe<"value" | "label" | "overlay" | "content" | "indicator" | "item" | "trigger" | "placeholder" | "itemLabel" | "itemDescription" | "itemIndicator", SelectVariant, {
+export declare const selectRecipe: import("../..").Recipe<"value" | "overlay" | "content" | "indicator" | "item" | "trigger" | "placeholder" | "groupLabel" | "itemLabel" | "itemDescription" | "itemIndicator", SelectVariant, {
     readonly size: {
         readonly sm: (theme: XAUITheme) => SlotStyles<SelectSlot>;
         readonly md: (theme: XAUITheme) => SlotStyles<SelectSlot>;

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

@@ -5,7 +5,7 @@ import type { IconComponentProps, IconContextValue } from '../../system/icon';
 import type { TextStyleProps, ViewStyleProps } from '../../system/style-props';
 import type { RadiusKey, Size } from '../../theme/theme.type';
 import type { Align, Anchor, AnchoredWidth, Insets, Placement } from '../../utils/placement';
-export type SelectSlot = 'trigger' | 'value' | 'placeholder' | 'indicator' | 'overlay' | 'content' | 'label' | 'item' | 'itemLabel' | 'itemDescription' | 'itemIndicator';
+export type SelectSlot = 'trigger' | 'value' | 'placeholder' | 'indicator' | 'overlay' | 'content' | 'groupLabel' | 'item' | 'itemLabel' | 'itemDescription' | 'itemIndicator';
 /**
  * The trigger **is** a field, so it takes the field's four emphasis levels rather than
  * the button's ten. A select that offers `danger` would be offering an intent to a
@@ -51,15 +51,17 @@ type SelectOwnProps = {
     onOpenChange?: (isOpen: boolean) => void;
     isDisabled?: boolean;
     isInvalid?: boolean;
+    asChild?: boolean;
 };
 /**
- * The root renders **no node**. It is state and resolved style around a trigger and a
- * list, and the trigger is the control — which is why `ref`, `style`, `testID`, the a11y
- * props and R14's style props are all on `Select.Trigger` rather than here. A wrapper
- * view would exist only to receive them, and it would put a second box around a field
- * that already is one.
+ * The root is the **column** — a `View` stacking `Select.Label`, the trigger and
+ * `Select.Description` / `.Error` with one `gap` — so `ref`, `style` and R14's style props
+ * here dress that column. The control itself is `Select.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. `Select.Overlay` and `Select.Content` portal out, so they add nothing
+ * to the column.
  */
-export type SelectProps = SelectOwnProps;
+export type SelectProps = SelectOwnProps & Omit<ViewProps, keyof SelectOwnProps> & Omit<ViewStyleProps, keyof SelectOwnProps | keyof ViewProps>;
 type SelectTriggerOwnProps = {
     children?: ReactNode;
     asChild?: boolean;
@@ -112,10 +114,20 @@ type SelectContentOwnProps = {
     insets?: SelectInsets;
 };
 export type SelectContentProps = SelectContentOwnProps & Omit<ViewProps, keyof SelectContentOwnProps> & Omit<ViewStyleProps, keyof SelectContentOwnProps | keyof ViewProps>;
-type SelectLabelOwnProps = {
+type SelectTextSlotOwnProps = {
     children?: ReactNode;
 };
-export type SelectLabelProps = SelectLabelOwnProps & Omit<TextProps, keyof SelectLabelOwnProps> & Omit<TextStyleProps, keyof SelectLabelOwnProps | keyof TextProps>;
+/**
+ * What the field is for — the `TextField.Label`, on a field that opens a list. The
+ * heading over a run of rows *inside* the panel is `Select.GroupLabel`.
+ */
+export type SelectLabelProps = SelectTextSlotOwnProps & Omit<TextProps, keyof SelectTextSlotOwnProps> & Omit<TextStyleProps, keyof SelectTextSlotOwnProps | keyof TextProps>;
+/** The hint under the field — the `TextField.Description`. */
+export type SelectDescriptionProps = SelectLabelProps;
+/** What is wrong with the chosen value — the `TextField.Error`. */
+export type SelectErrorProps = SelectLabelProps;
+/** A heading over a run of rows, inside the panel. */
+export type SelectGroupLabelProps = SelectLabelProps;
 /** What an item's render function is handed, so it can paint its own selected state. */
 export type SelectItemRenderState = {
     isSelected: boolean;
@@ -160,7 +172,16 @@ export type SelectContextValue = {
     indicatorStyle: StyleProp<ViewStyle>;
     overlayStyle: StyleProp<ViewStyle>;
     contentStyle: StyleProp<ViewStyle>;
+    /** The panel's section heading. The field's own label is `labelStyle`. */
+    groupLabelStyle: StyleProp<TextStyle>;
+    /**
+     * The column's three text slots, resolved through `textFieldRecipe` rather than this
+     * component's own: a select and a text field stacked in one form read as one control,
+     * and a second table here would be two to keep in step.
+     */
     labelStyle: StyleProp<TextStyle>;
+    descriptionStyle: StyleProp<TextStyle>;
+    errorStyle: StyleProp<TextStyle>;
     itemStyle: StyleProp<ViewStyle>;
     /** The same split as the trigger's, for the row a finger happens to be on. */
     itemPressedStyle: StyleProp<ViewStyle>;
@@ -188,6 +209,9 @@ export type SelectContextValue = {
     /** Labels registered by the items, so `Select.Value` can name the chosen one. */
     labelFor: (value: string) => string | undefined;
     registerLabel: (value: string, label: string) => void;
+    /** The ids the trigger points at with `aria-labelledby` / `aria-describedby`. */
+    labelId: string;
+    descriptionId: string;
 };
 /** The trigger's rectangle in window coordinates. */
 export type SelectAnchor = Anchor;

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

@@ -5,7 +5,7 @@ import type { IconComponentProps, IconContextValue } from '../../system/icon';
 import type { TextStyleProps, ViewStyleProps } from '../../system/style-props';
 import type { RadiusKey, Size } from '../../theme/theme.type';
 import type { Align, Anchor, AnchoredWidth, Insets, Placement } from '../../utils/placement';
-export type SelectSlot = 'trigger' | 'value' | 'placeholder' | 'indicator' | 'overlay' | 'content' | 'label' | 'item' | 'itemLabel' | 'itemDescription' | 'itemIndicator';
+export type SelectSlot = 'trigger' | 'value' | 'placeholder' | 'indicator' | 'overlay' | 'content' | 'groupLabel' | 'item' | 'itemLabel' | 'itemDescription' | 'itemIndicator';
 /**
  * The trigger **is** a field, so it takes the field's four emphasis levels rather than
  * the button's ten. A select that offers `danger` would be offering an intent to a
@@ -51,15 +51,17 @@ type SelectOwnProps = {
     onOpenChange?: (isOpen: boolean) => void;
     isDisabled?: boolean;
     isInvalid?: boolean;
+    asChild?: boolean;
 };
 /**
- * The root renders **no node**. It is state and resolved style around a trigger and a
- * list, and the trigger is the control — which is why `ref`, `style`, `testID`, the a11y
- * props and R14's style props are all on `Select.Trigger` rather than here. A wrapper
- * view would exist only to receive them, and it would put a second box around a field
- * that already is one.
+ * The root is the **column** — a `View` stacking `Select.Label`, the trigger and
+ * `Select.Description` / `.Error` with one `gap` — so `ref`, `style` and R14's style props
+ * here dress that column. The control itself is `Select.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. `Select.Overlay` and `Select.Content` portal out, so they add nothing
+ * to the column.
  */
-export type SelectProps = SelectOwnProps;
+export type SelectProps = SelectOwnProps & Omit<ViewProps, keyof SelectOwnProps> & Omit<ViewStyleProps, keyof SelectOwnProps | keyof ViewProps>;
 type SelectTriggerOwnProps = {
     children?: ReactNode;
     asChild?: boolean;
@@ -112,10 +114,20 @@ type SelectContentOwnProps = {
     insets?: SelectInsets;
 };
 export type SelectContentProps = SelectContentOwnProps & Omit<ViewProps, keyof SelectContentOwnProps> & Omit<ViewStyleProps, keyof SelectContentOwnProps | keyof ViewProps>;
-type SelectLabelOwnProps = {
+type SelectTextSlotOwnProps = {
     children?: ReactNode;
 };
-export type SelectLabelProps = SelectLabelOwnProps & Omit<TextProps, keyof SelectLabelOwnProps> & Omit<TextStyleProps, keyof SelectLabelOwnProps | keyof TextProps>;
+/**
+ * What the field is for — the `TextField.Label`, on a field that opens a list. The
+ * heading over a run of rows *inside* the panel is `Select.GroupLabel`.
+ */
+export type SelectLabelProps = SelectTextSlotOwnProps & Omit<TextProps, keyof SelectTextSlotOwnProps> & Omit<TextStyleProps, keyof SelectTextSlotOwnProps | keyof TextProps>;
+/** The hint under the field — the `TextField.Description`. */
+export type SelectDescriptionProps = SelectLabelProps;
+/** What is wrong with the chosen value — the `TextField.Error`. */
+export type SelectErrorProps = SelectLabelProps;
+/** A heading over a run of rows, inside the panel. */
+export type SelectGroupLabelProps = SelectLabelProps;
 /** What an item's render function is handed, so it can paint its own selected state. */
 export type SelectItemRenderState = {
     isSelected: boolean;
@@ -160,7 +172,16 @@ export type SelectContextValue = {
     indicatorStyle: StyleProp<ViewStyle>;
     overlayStyle: StyleProp<ViewStyle>;
     contentStyle: StyleProp<ViewStyle>;
+    /** The panel's section heading. The field's own label is `labelStyle`. */
+    groupLabelStyle: StyleProp<TextStyle>;
+    /**
+     * The column's three text slots, resolved through `textFieldRecipe` rather than this
+     * component's own: a select and a text field stacked in one form read as one control,
+     * and a second table here would be two to keep in step.
+     */
     labelStyle: StyleProp<TextStyle>;
+    descriptionStyle: StyleProp<TextStyle>;
+    errorStyle: StyleProp<TextStyle>;
     itemStyle: StyleProp<ViewStyle>;
     /** The same split as the trigger's, for the row a finger happens to be on. */
     itemPressedStyle: StyleProp<ViewStyle>;
@@ -188,6 +209,9 @@ export type SelectContextValue = {
     /** Labels registered by the items, so `Select.Value` can name the chosen one. */
     labelFor: (value: string) => string | undefined;
     registerLabel: (value: string, label: string) => void;
+    /** The ids the trigger points at with `aria-labelledby` / `aria-describedby`. */
+    labelId: string;
+    descriptionId: string;
 };
 /** The trigger's rectangle in window coordinates. */
 export type SelectAnchor = Anchor;

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

@@ -51,7 +51,7 @@ type SkeletonOwnProps = {
     /**
      * `false` freezes the block at full opacity and mounts no worklet.
      *
-     * A boolean rather than HeroUI's `'shimmer' | 'pulse' | 'none'`: a shimmer is a
+     * A boolean rather than the reference implementation's `'shimmer' | 'pulse' | 'none'`: a shimmer is a
      * gradient sweeping across the block, a gradient needs `react-native-svg`, and that is
      * an optional peer a component in the core cannot require. One animation, so there is
      * nothing for a name to choose between.

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

@@ -51,7 +51,7 @@ type SkeletonOwnProps = {
     /**
      * `false` freezes the block at full opacity and mounts no worklet.
      *
-     * A boolean rather than HeroUI's `'shimmer' | 'pulse' | 'none'`: a shimmer is a
+     * A boolean rather than the reference implementation's `'shimmer' | 'pulse' | 'none'`: a shimmer is a
      * gradient sweeping across the block, a gradient needs `react-native-svg`, and that is
      * an optional peer a component in the core cannot require. One animation, so there is
      * nothing for a name to choose between.

package/dist/components/slide-button/index.cjs

@@ -0,0 +1,30 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+
+
+
+
+
+var _chunkC6JO2RTVcjs = require('../../chunk-C6JO2RTV.cjs');
+require('../../chunk-7EIHHOHP.cjs');
+require('../../chunk-GSZDN6EZ.cjs');
+require('../../chunk-FHNIGHN5.cjs');
+require('../../chunk-SL3V7R2Y.cjs');
+require('../../chunk-TVJXC4HY.cjs');
+require('../../chunk-CDRGTUYF.cjs');
+require('../../chunk-H4E4HDEP.cjs');
+require('../../chunk-EJQCQPET.cjs');
+require('../../chunk-IIAQISBG.cjs');
+require('../../chunk-TK44VBIE.cjs');
+
+
+
+
+
+
+
+
+
+exports.SlideButton = _chunkC6JO2RTVcjs.SlideButton; exports.SlideButtonFill = _chunkC6JO2RTVcjs.SlideButtonFill; exports.SlideButtonIcon = _chunkC6JO2RTVcjs.SlideButtonIcon; exports.SlideButtonLabel = _chunkC6JO2RTVcjs.SlideButtonLabel; exports.SlideButtonRoot = _chunkC6JO2RTVcjs.SlideButtonRoot; exports.SlideButtonThumb = _chunkC6JO2RTVcjs.SlideButtonThumb; exports.slideButtonRecipe = _chunkC6JO2RTVcjs.slideButtonRecipe; exports.useSlideButton = _chunkC6JO2RTVcjs.useSlideButton;

package/dist/components/slide-button/index.d.cts

@@ -0,0 +1,44 @@
+import { SlideButtonIcon } from './slide-button-icon';
+import { SlideButtonThumb } from './slide-button-thumb';
+export declare const SlideButton: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode;
+    variant?: import("./slide-button.type").SlideButtonVariant;
+    size?: import("./slide-button.type").SlideButtonSize;
+    radius?: import("../..").RadiusKey;
+    color?: string;
+    threshold?: number;
+    isConfirmed?: boolean;
+    defaultConfirmed?: boolean;
+    onConfirm?: () => void;
+    isDisabled?: boolean;
+    style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+} & Omit<import("react-native").ViewProps, keyof {
+    children?: import("react").ReactNode;
+    variant?: import("./slide-button.type").SlideButtonVariant;
+    size?: import("./slide-button.type").SlideButtonSize;
+    radius?: import("../..").RadiusKey;
+    color?: string;
+    threshold?: number;
+    isConfirmed?: boolean;
+    defaultConfirmed?: boolean;
+    onConfirm?: () => void;
+    isDisabled?: boolean;
+    style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+}> & Omit<import("../..").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" | "threshold" | "isConfirmed" | "defaultConfirmed" | "onConfirm"> & import("react").RefAttributes<import("react-native").View>> & {
+    Fill: import("react").ForwardRefExoticComponent<{
+        children?: never;
+    } & Omit<import("react-native").ViewProps, "children"> & Omit<import("../..").ViewStyleProps, keyof import("react-native").ViewProps> & import("react").RefAttributes<import("react-native").View>>;
+    Label: import("react").ForwardRefExoticComponent<import("react-native").TextProps & Omit<import("../..").TextStyleProps, keyof import("react-native").TextProps> & {
+        children?: import("react").ReactNode;
+    } & import("react").RefAttributes<import("react-native").Text>>;
+    Thumb: typeof SlideButtonThumb;
+    Icon: typeof SlideButtonIcon;
+};
+export { SlideButtonRoot } from './slide-button';
+export { SlideButtonFill } from './slide-button-fill';
+export { SlideButtonLabel } from './slide-button-label';
+export { SlideButtonThumb } from './slide-button-thumb';
+export { SlideButtonIcon } from './slide-button-icon';
+export { useSlideButton } from './slide-button.context';
+export { slideButtonRecipe } from './slide-button.recipe';
+export type { SlideButtonContextValue, SlideButtonFillProps, SlideButtonIconProps, SlideButtonLabelProps, SlideButtonProps, SlideButtonSize, SlideButtonSlot, SlideButtonThumbProps, SlideButtonVariant, } from './slide-button.type';

package/dist/components/slide-button/index.d.ts

@@ -0,0 +1,44 @@
+import { SlideButtonIcon } from './slide-button-icon';
+import { SlideButtonThumb } from './slide-button-thumb';
+export declare const SlideButton: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode;
+    variant?: import("./slide-button.type").SlideButtonVariant;
+    size?: import("./slide-button.type").SlideButtonSize;
+    radius?: import("../..").RadiusKey;
+    color?: string;
+    threshold?: number;
+    isConfirmed?: boolean;
+    defaultConfirmed?: boolean;
+    onConfirm?: () => void;
+    isDisabled?: boolean;
+    style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+} & Omit<import("react-native").ViewProps, keyof {
+    children?: import("react").ReactNode;
+    variant?: import("./slide-button.type").SlideButtonVariant;
+    size?: import("./slide-button.type").SlideButtonSize;
+    radius?: import("../..").RadiusKey;
+    color?: string;
+    threshold?: number;
+    isConfirmed?: boolean;
+    defaultConfirmed?: boolean;
+    onConfirm?: () => void;
+    isDisabled?: boolean;
+    style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+}> & Omit<import("../..").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" | "threshold" | "isConfirmed" | "defaultConfirmed" | "onConfirm"> & import("react").RefAttributes<import("react-native").View>> & {
+    Fill: import("react").ForwardRefExoticComponent<{
+        children?: never;
+    } & Omit<import("react-native").ViewProps, "children"> & Omit<import("../..").ViewStyleProps, keyof import("react-native").ViewProps> & import("react").RefAttributes<import("react-native").View>>;
+    Label: import("react").ForwardRefExoticComponent<import("react-native").TextProps & Omit<import("../..").TextStyleProps, keyof import("react-native").TextProps> & {
+        children?: import("react").ReactNode;
+    } & import("react").RefAttributes<import("react-native").Text>>;
+    Thumb: typeof SlideButtonThumb;
+    Icon: typeof SlideButtonIcon;
+};
+export { SlideButtonRoot } from './slide-button';
+export { SlideButtonFill } from './slide-button-fill';
+export { SlideButtonLabel } from './slide-button-label';
+export { SlideButtonThumb } from './slide-button-thumb';
+export { SlideButtonIcon } from './slide-button-icon';
+export { useSlideButton } from './slide-button.context';
+export { slideButtonRecipe } from './slide-button.recipe';
+export type { SlideButtonContextValue, SlideButtonFillProps, SlideButtonIconProps, SlideButtonLabelProps, SlideButtonProps, SlideButtonSize, SlideButtonSlot, SlideButtonThumbProps, SlideButtonVariant, } from './slide-button.type';