@thewhileloop/whileui 4.2.3 → 4.4.0

package/dist/components/form-field/form-field.d.ts

@@ -51,8 +51,26 @@ export interface FormFieldState {
     invalid: boolean;
     disabled: boolean;
     required: boolean;
+    /** Set inside a FormField: `FormLabel` takes it as its id and controls point to it. */
+    labelId?: string;
 }
 export declare function useFormFieldState(): FormFieldState;
+interface CallerNaming {
+    accessibilityLabel?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    accessibilityLabelledBy?: string | string[];
+}
+/**
+ * Accessibility props that tie a text control to its FormField: named by the FormLabel
+ * unless the caller names or links it any of the four ways React Native allows, and
+ * required when the field is. Spread before the caller's props. iOS has no labelled-by;
+ * VoiceOver reads the visible label just before the field.
+ */
+export declare function fieldAccessibilityProps(field: FormFieldState, props: CallerNaming): {
+    'aria-labelledby': string | undefined;
+    'aria-required': true | undefined;
+};
 export interface FormFieldProps extends ViewProps, VariantProps<typeof formFieldVariants> {
     invalid?: boolean;
     disabled?: boolean;

package/dist/components/form-field/form-field.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { createContext, useContext, useMemo } from 'react';
+import React, { createContext, useContext, useId, useMemo } from 'react';
 import { Text, View, } from 'react-native';
 import { cn } from '../../lib/cn';
 import { tv } from '../../lib/tv';
@@ -44,16 +44,37 @@ const FormFieldContext = createContext({
 export function useFormFieldState() {
     return useContext(FormFieldContext);
 }
+/**
+ * Accessibility props that tie a text control to its FormField: named by the FormLabel
+ * unless the caller names or links it any of the four ways React Native allows, and
+ * required when the field is. Spread before the caller's props. iOS has no labelled-by;
+ * VoiceOver reads the visible label just before the field.
+ */
+export function fieldAccessibilityProps(field, props) {
+    const named = props.accessibilityLabel ??
+        props['aria-label'] ??
+        props['aria-labelledby'] ??
+        props.accessibilityLabelledBy;
+    return {
+        'aria-labelledby': named ? undefined : field.labelId,
+        'aria-required': field.required || undefined,
+    };
+}
 const FormField = React.forwardRef(({ className, density = 'default', invalid = false, disabled = false, required = false, ...props }, ref) => {
     const interaction = useInteractionTokens();
-    const contextValue = useMemo(() => ({ density, invalid, disabled, required }), [density, disabled, invalid, required]);
+    const labelId = useId();
+    const contextValue = useMemo(() => ({ density, invalid, disabled, required, labelId }), [density, disabled, invalid, labelId, required]);
     return (_jsx(FormFieldContext.Provider, { value: contextValue, children: _jsx(View, { ref: ref, className: cn(formFieldVariants({ density }), className), style: disabled ? { opacity: interaction.disabledOpacitySoft } : undefined, ...props }) }));
 });
 FormField.displayName = 'FormField';
 const FormLabel = React.forwardRef(({ className, showRequiredIndicator = true, children, style, ...props }, ref) => {
-    const { invalid, disabled, required } = useContext(FormFieldContext);
+    const { invalid, disabled, required, labelId } = useContext(FormFieldContext);
     const visual = useVisualTokens();
-    return (_jsxs(Text, { ref: ref, className: cn('font-medium text-foreground', invalid && 'text-destructive', disabled && 'text-muted-foreground', className), style: [typographyStyle(visual, 'label'), style], ...props, children: [children, required && showRequiredIndicator ? _jsx(Text, { className: "text-destructive", children: " *" }) : null] }));
+    const indicator = required && showRequiredIndicator;
+    return (_jsxs(Text, { ref: ref, nativeID: labelId, 
+        // iOS reads nested Text as one string, so hiding the asterisk alone still says
+        // "star"; a plain-text label names it once. The control announces "required".
+        accessibilityLabel: indicator && typeof children === 'string' ? children : undefined, className: cn('font-medium text-foreground', invalid && 'text-destructive', disabled && 'text-muted-foreground', className), style: [typographyStyle(visual, 'label'), style], ...props, children: [children, indicator ? (_jsx(Text, { "aria-hidden": true, className: "text-destructive", children: ' *' })) : null] }));
 });
 FormLabel.displayName = 'FormLabel';
 const FormControl = React.forwardRef(({ className, style, ...props }, ref) => {

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

@@ -27,7 +27,12 @@ declare const inputVariants: import("tailwind-variants").TVReturnType<{
 export interface InputProps extends TextInputProps, VariantProps<typeof inputVariants> {
     'aria-invalid'?: boolean;
     className?: string;
+    /**
+     * Shown before the text. A decorative icon here needs `aria-hidden`; screen readers
+     * otherwise stop on it as a separate element and read out its glyph.
+     */
     prefix?: React.ReactNode;
+    /** Shown after the text: a unit, or a control such as a clear button. */
     suffix?: React.ReactNode;
     inputClassName?: string;
 }

package/dist/components/input/input.js

@@ -7,9 +7,9 @@ import { tv } from '../../lib/tv';
 import { useThemeColors } from '../../lib/theme-colors';
 import { useInteractionTokens } from '../../lib/interaction-tokens';
 import { useVisualTokens } from '../../lib/visual-tokens';
-import { typographyStyle } from '../../lib/recipes';
+import { textCursorColors, typographyStyle } from '../../lib/recipes';
 import { webAutofillField } from '../../lib/web-autofill';
-import { useFormFieldState } from '../form-field/form-field';
+import { fieldAccessibilityProps, useFormFieldState } from '../form-field/form-field';
 const inputVariants = tv({
     base: 'w-full border-border bg-muted text-foreground',
     variants: {
@@ -43,11 +43,11 @@ const Input = React.forwardRef(({ className, prefix, suffix, inputClassName, var
                 paddingHorizontal: plain ? 0 : visual.controlPaddingXDefault,
             },
             !effectiveEditable ? { opacity: interaction.disabledOpacity } : undefined,
-        ], children: [prefix && (_jsx(View, { style: { paddingRight: Math.max(8, Math.round(visual.controlPaddingXDefault * 0.5)) }, children: prefix })), _jsx(TextInput, { ref: ref, className: cn('flex-1 text-foreground placeholder:text-muted-foreground web:outline-none', !plain && webAutofillField, inputClassName), style: {
+        ], children: [prefix && (_jsx(View, { style: { paddingRight: Math.max(8, Math.round(visual.controlPaddingXDefault * 0.5)) }, children: prefix })), _jsx(TextInput, { ref: ref, ...fieldAccessibilityProps(field, props), className: cn('flex-1 text-foreground placeholder:text-muted-foreground web:outline-none', !plain && webAutofillField, inputClassName), style: {
                     ...typographyStyle(visual, 'label'),
                     minHeight: visual.controlHeightDefault - 2,
                     paddingVertical: visual.controlPaddingYDefault,
-                }, editable: effectiveEditable, "aria-invalid": ariaInvalid ?? field.invalid, placeholderTextColor: placeholderTextColor ?? colors.placeholder, onFocus: (event) => {
+                }, editable: effectiveEditable, "aria-invalid": ariaInvalid ?? field.invalid, placeholderTextColor: placeholderTextColor ?? colors.placeholder, ...textCursorColors(colors), onFocus: (event) => {
                     setFocused(true);
                     onFocus?.(event);
                 }, onBlur: (event) => {

package/dist/components/numeric-input/numeric-input.d.ts

@@ -52,12 +52,15 @@ export interface NumericInputProps extends Omit<TextInputProps, 'value' | 'defau
     inputClassName?: string;
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
+    /** Controlled numeric value. */
     value?: number | null;
     defaultValue?: number;
+    /** Numeric value change callback. */
     onValueChange?: (value: number | null) => void;
     min?: number;
     max?: number;
     step?: number;
+    /** Show decrement/increment controls. */
     showSteppers?: boolean;
     /** Drop the field shell (border, background, radius, padding) for embedding inside another field shell like LabeledField. */
     unstyled?: boolean;

package/dist/components/numeric-input/numeric-input.js

@@ -7,9 +7,9 @@ import { tv } from '../../lib/tv';
 import { useThemeColors } from '../../lib/theme-colors';
 import { useInteractionTokens, withInteractivePressableStyle } from '../../lib/interaction-tokens';
 import { useVisualTokens } from '../../lib/visual-tokens';
-import { typographyStyle } from '../../lib/recipes';
+import { textCursorColors, typographyStyle } from '../../lib/recipes';
 import { webAutofillField } from '../../lib/web-autofill';
-import { useFormFieldState } from '../form-field/form-field';
+import { fieldAccessibilityProps, useFormFieldState } from '../form-field/form-field';
 const numericInputVariants = tv({
     base: 'w-full flex-row items-center border-border bg-muted',
     variants: {
@@ -171,13 +171,13 @@ const NumericInput = React.forwardRef(({ className, inputClassName, prefix, suff
                 paddingRight: unstyled ? 0 : showSteppers ? stepInset : 0,
             },
             !effectiveEditable ? { opacity: interaction.disabledOpacity } : undefined,
-        ], children: [_jsx(NumericAffix, { side: "prefix", visual: visual, children: prefix }), _jsx(View, { className: "min-w-0 flex-1", style: Platform.OS === 'web' ? { minWidth: 0, flex: 1 } : undefined, children: _jsx(TextInput, { ref: ref, className: cn(numericInputTextVariants({ size }), 'w-full web:outline-none', !unstyled && webAutofillField, inputClassName), style: numericInputTextStyle(visual, size, unstyled, styleProp), value: model.textValue, onChangeText: model.handleTextChange, onFocus: (event) => {
+        ], children: [_jsx(NumericAffix, { side: "prefix", visual: visual, children: prefix }), _jsx(View, { className: "min-w-0 flex-1", style: Platform.OS === 'web' ? { minWidth: 0, flex: 1 } : undefined, children: _jsx(TextInput, { ref: ref, ...fieldAccessibilityProps(field, props), className: cn(numericInputTextVariants({ size }), 'w-full web:outline-none', !unstyled && webAutofillField, inputClassName), style: numericInputTextStyle(visual, size, unstyled, styleProp), value: model.textValue, onChangeText: model.handleTextChange, onFocus: (event) => {
                         setFocused(true);
                         onFocus?.(event);
                     }, onBlur: (event) => {
                         setFocused(false);
                         model.handleBlur(event);
-                    }, keyboardType: "decimal-pad", editable: effectiveEditable, "aria-invalid": ariaInvalid ?? field.invalid, placeholderTextColor: placeholderTextColor ?? colors.placeholder, ...props }) }), _jsx(NumericAffix, { side: "suffix", visual: visual, children: suffix }), _jsx(NumericSteppers, { visible: showSteppers, inset: stepInset, size: stepSize, radius: stepRadius, model: model, interaction: interaction, visual: visual })] }));
+                    }, keyboardType: "decimal-pad", editable: effectiveEditable, "aria-invalid": ariaInvalid ?? field.invalid, placeholderTextColor: placeholderTextColor ?? colors.placeholder, ...textCursorColors(colors), ...props }) }), _jsx(NumericAffix, { side: "suffix", visual: visual, children: suffix }), _jsx(NumericSteppers, { visible: showSteppers, inset: stepInset, size: stepSize, radius: stepRadius, model: model, interaction: interaction, visual: visual })] }));
 });
 NumericInput.displayName = 'NumericInput';
 export { NumericInput, numericInputVariants, numericInputTextVariants };

package/dist/components/otp-input/otp-input.d.ts

@@ -34,14 +34,22 @@ declare const otpCellVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined>>;
 export interface OTPInputProps extends Omit<ViewProps, 'children'> {
+    /** Number of digit cells. */
     length?: number;
+    /** Controlled value. */
     value?: string;
+    /** Called on each digit change. */
     onValueChange?: (value: string) => void;
+    /** Called when all digits are filled. */
     onComplete?: (code: string) => void;
+    /** Error variant triggers shake. */
     variant?: 'default' | 'error';
+    /** Cell size. */
     size?: 'default' | 'compact';
+    /** Mask digits with dots. */
     secure?: boolean;
     disabled?: boolean;
+    /** Focus first cell on mount. */
     autoFocus?: boolean;
     className?: string;
 }

package/dist/components/popover/popover.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { Platform, StyleSheet } from 'react-native';
+import { useComposedRefs } from '@rn-primitives/hooks';
 import * as PopoverPrimitive from '@rn-primitives/popover';
 import { cn } from '../../lib/cn';
+import { useDismissKeyboardOnOpen } from '../../lib/dismiss-keyboard-on-open';
 import { useFrostedSurface } from '../../lib/frosted-surface';
 import { useNestedOverlay, useOverlayPortalTarget } from '../../lib/overlay-host';
 import { useOverlayInsets } from '../../lib/overlay-insets';
@@ -12,7 +14,13 @@ import { shadowStyle, surfacePadding, surfaceRadius } from '../../lib/recipes';
 function Popover({ onOpenChange, children }) {
     return _jsx(PopoverPrimitive.Root, { onOpenChange: onOpenChange, children: children });
 }
-const PopoverTrigger = React.forwardRef(({ className, ...props }, ref) => (_jsx(PopoverPrimitive.Trigger, { ref: ref, className: cn(className), ...props })));
+const PopoverTrigger = React.forwardRef(({ className, ...props }, ref) => {
+    const { open, setTriggerPosition } = PopoverPrimitive.useRootContext();
+    const triggerRef = React.useRef(null);
+    const composedRef = useComposedRefs(triggerRef, ref);
+    useDismissKeyboardOnOpen(open, triggerRef, setTriggerPosition);
+    return _jsx(PopoverPrimitive.Trigger, { ref: composedRef, className: cn(className), ...props });
+});
 PopoverTrigger.displayName = 'PopoverTrigger';
 const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffset = 4, insets, portalHost, children, style, frosted = false, blurIntensity, blurTintToken, ...props }, ref) => {
     const frostedSurface = useFrostedSurface({

package/dist/components/pressable/pressable.d.ts

@@ -2,6 +2,7 @@ import { type PressableInstance, type PressableProps as RNPressableProps } from
 import { type DisabledVariant, type PressedVariant } from '../../lib/interaction-tokens';
 import type { ForwardRefComponent } from '../../lib/ref-types';
 export interface PressableProps extends RNPressableProps {
+    /** Additional Tailwind classes. */
     className?: string;
     /** Semantic press feedback. `none` preserves a plain React Native Pressable. */
     feedback?: PressedVariant;

package/dist/components/segmented-control/segmented-control.d.ts

@@ -9,6 +9,11 @@ declare const segmentedControlVariants: import("tailwind-variants").TVReturnType
         true: "flex-wrap justify-center gap-1";
         false: "flex-nowrap gap-1";
     };
+    /** Sized to its segments inside a horizontal scroll view. */
+    scroll: {
+        true: "w-auto";
+        false: "";
+    };
     size: {
         default: "";
         compact: "";
@@ -22,6 +27,11 @@ declare const segmentedControlVariants: import("tailwind-variants").TVReturnType
         true: "flex-wrap justify-center gap-1";
         false: "flex-nowrap gap-1";
     };
+    /** Sized to its segments inside a horizontal scroll view. */
+    scroll: {
+        true: "w-auto";
+        false: "";
+    };
     size: {
         default: "";
         compact: "";
@@ -35,6 +45,11 @@ declare const segmentedControlVariants: import("tailwind-variants").TVReturnType
         true: "flex-wrap justify-center gap-1";
         false: "flex-nowrap gap-1";
     };
+    /** Sized to its segments inside a horizontal scroll view. */
+    scroll: {
+        true: "w-auto";
+        false: "";
+    };
     size: {
         default: "";
         compact: "";
@@ -61,6 +76,11 @@ declare const segmentedControlItemVariants: import("tailwind-variants").TVReturn
         true: "grow-0";
         false: "flex-1";
     };
+    /** As wide as its label, so segments overflow into the scroll view rather than shrink. */
+    scroll: {
+        true: "flex-none";
+        false: "";
+    };
 }, undefined, "min-w-0 flex-row items-center justify-center", {
     variant: {
         default: "";
@@ -82,6 +102,11 @@ declare const segmentedControlItemVariants: import("tailwind-variants").TVReturn
         true: "grow-0";
         false: "flex-1";
     };
+    /** As wide as its label, so segments overflow into the scroll view rather than shrink. */
+    scroll: {
+        true: "flex-none";
+        false: "";
+    };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         default: "";
@@ -103,6 +128,11 @@ declare const segmentedControlItemVariants: import("tailwind-variants").TVReturn
         true: "grow-0";
         false: "flex-1";
     };
+    /** As wide as its label, so segments overflow into the scroll view rather than shrink. */
+    scroll: {
+        true: "flex-none";
+        false: "";
+    };
 }, undefined>>;
 declare const segmentedControlItemTextVariants: import("tailwind-variants").TVReturnType<{
     selected: {
@@ -136,8 +166,16 @@ export interface SegmentedControlProps extends ViewProps {
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
+    /** Pill = rounded-full items. */
     variant?: 'default' | 'pill';
-    wrap?: boolean | 'auto';
+    /**
+     * `true` wraps segments onto more rows; `false` keeps one row and shares its width.
+     * `'scroll'` keeps one row with each segment as wide as its label and scrolls
+     * sideways when they do not fit — for labels a phone cannot show in full.
+     * `'auto'` wraps above three segments.
+     * @default 'auto'
+     */
+    wrap?: boolean | 'auto' | 'scroll';
     size?: 'default' | 'compact';
     disabled?: boolean;
     className?: string;

package/dist/components/segmented-control/segmented-control.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
-import { Pressable, Text, View, } from 'react-native';
+import { Pressable, ScrollView, Text, View, } from 'react-native';
 import { cn } from '../../lib/cn';
 import { focusRingInset } from '../../lib/focus-ring';
 import { tv } from '../../lib/tv';
@@ -19,6 +19,11 @@ const segmentedControlVariants = tv({
             true: 'flex-wrap justify-center gap-1',
             false: 'flex-nowrap gap-1',
         },
+        /** Sized to its segments inside a horizontal scroll view. */
+        scroll: {
+            true: 'w-auto',
+            false: '',
+        },
         size: {
             default: '',
             compact: '',
@@ -27,6 +32,7 @@ const segmentedControlVariants = tv({
     defaultVariants: {
         variant: 'default',
         wrap: true,
+        scroll: false,
         size: 'default',
     },
 });
@@ -53,6 +59,11 @@ const segmentedControlItemVariants = tv({
             true: 'grow-0',
             false: 'flex-1',
         },
+        /** As wide as its label, so segments overflow into the scroll view rather than shrink. */
+        scroll: {
+            true: 'flex-none',
+            false: '',
+        },
     },
     defaultVariants: {
         variant: 'default',
@@ -60,6 +71,7 @@ const segmentedControlItemVariants = tv({
         size: 'default',
         disabled: false,
         wrap: true,
+        scroll: false,
     },
 });
 const segmentedControlItemTextVariants = tv({
@@ -105,6 +117,7 @@ const SegmentedControlContext = createContext({
     variant: 'default',
     size: 'default',
     wrap: true,
+    scroll: false,
     disabled: false,
 });
 const SegmentedControlItemContext = createContext({
@@ -117,7 +130,8 @@ function SegmentedControl({ value: controlledValue, defaultValue = '', onValueCh
     const [internalValue, setInternalValue] = useState(defaultValue);
     const value = controlledValue ?? internalValue;
     const itemCount = useMemo(() => React.Children.toArray(children).filter((child) => React.isValidElement(child)).length, [children]);
-    const shouldWrap = wrap === 'auto' ? itemCount > 3 : wrap;
+    const scroll = wrap === 'scroll';
+    const shouldWrap = wrap === 'auto' ? itemCount > 3 : wrap === true;
     const handleValueChange = useCallback((nextValue) => {
         if (disabled || value === nextValue) {
             return;
@@ -125,11 +139,20 @@ function SegmentedControl({ value: controlledValue, defaultValue = '', onValueCh
         setInternalValue(nextValue);
         onValueChange?.(nextValue);
     }, [disabled, onValueChange, value]);
-    const contextValue = useMemo(() => ({ value, onValueChange: handleValueChange, variant, size, wrap: shouldWrap, disabled }), [disabled, handleValueChange, shouldWrap, size, value, variant]);
-    return (_jsx(SegmentedControlContext.Provider, { value: contextValue, children: _jsx(View, { className: cn(segmentedControlVariants({ variant, wrap: shouldWrap, size }), className), style: [getSegmentedContainerStyle(visual, colors, variant), styleProp], accessibilityRole: "radiogroup", ...props, children: children }) }));
+    const contextValue = useMemo(() => ({
+        value,
+        onValueChange: handleValueChange,
+        variant,
+        size,
+        wrap: shouldWrap,
+        scroll,
+        disabled,
+    }), [disabled, handleValueChange, scroll, shouldWrap, size, value, variant]);
+    const group = (_jsx(View, { className: cn(segmentedControlVariants({ variant, wrap: shouldWrap, scroll, size }), className), style: [getSegmentedContainerStyle(visual, colors, variant), styleProp], accessibilityRole: "radiogroup", ...props, children: children }));
+    return (_jsx(SegmentedControlContext.Provider, { value: contextValue, children: scroll ? (_jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: group })) : (group) }));
 }
 function SegmentedControlItem({ value: itemValue, className, children, disabled: itemDisabled, style: styleProp, ...props }) {
-    const { value, onValueChange, variant, size, wrap, disabled } = useContext(SegmentedControlContext);
+    const { value, onValueChange, variant, size, wrap, scroll, disabled } = useContext(SegmentedControlContext);
     const selected = value === itemValue;
     const finalDisabled = disabled || Boolean(itemDisabled);
     const interaction = useInteractionTokens();
@@ -150,6 +173,7 @@ function SegmentedControlItem({ value: itemValue, className, children, disabled:
                 size,
                 disabled: finalDisabled,
                 wrap,
+                scroll,
             }), focusRingInset, className), onPress: () => onValueChange(itemValue), accessibilityRole: "radio", 
             // A radio is checked, not selected. `selected` maps to `aria-selected`, which is
             // not a valid attribute on `role="radio"` — assistive technology could not tell

package/dist/components/select/select.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { Platform, ScrollView, StyleSheet, useWindowDimensions, View, } from 'react-native';
+import { useComposedRefs } from '@rn-primitives/hooks';
 import * as SelectPrimitive from '@rn-primitives/select';
 import { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';
 import { Text } from '../text';
 import { cn } from '../../lib/cn';
+import { useDismissKeyboardOnOpen } from '../../lib/dismiss-keyboard-on-open';
 import { focusRing } from '../../lib/focus-ring';
 import { useInteractionTokens } from '../../lib/interaction-tokens';
 import { useFrostedSurface } from '../../lib/frosted-surface';
@@ -26,7 +28,11 @@ const SelectTrigger = React.forwardRef(({ className, children, style: styleProp,
     const visual = useVisualTokens();
     const field = useFormFieldState();
     const effectiveDisabled = disabled ?? field.disabled;
-    return (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn('border-border bg-muted flex w-full flex-row items-center justify-between gap-2 shadow-sm active:bg-state-pressed', field.invalid && 'border-destructive', focusRing, effectiveDisabled && '', className), 
+    const { open, setTriggerPosition } = SelectPrimitive.useRootContext();
+    const triggerRef = React.useRef(null);
+    const composedRef = useComposedRefs(triggerRef, ref);
+    useDismissKeyboardOnOpen(open, triggerRef, setTriggerPosition);
+    return (_jsxs(SelectPrimitive.Trigger, { ref: composedRef, className: cn('border-border bg-muted flex w-full flex-row items-center justify-between gap-2 shadow-sm active:bg-state-pressed', field.invalid && 'border-destructive', focusRing, effectiveDisabled && '', className), 
         // Flattened, not an array. On web this primitive is merged through a Slot that
         // spreads `style`, and spreading an array yields { 0: …, 1: … } — numeric keys
         // that reach the DOM as indexed style properties and throw. The Select rendered

package/dist/components/surface/surface.d.ts

@@ -4,10 +4,15 @@ import { type ShadowTier, type SurfacePaddingSize } from '../../lib/recipes';
 import type { ForwardRefComponent } from '../../lib/ref-types';
 export type SurfaceLevel = 'base' | 'raised' | 'overlay';
 export interface SurfaceProps extends ViewProps, FrostedSurfaceProps {
+    /** Semantic background and depth tier. */
     level?: SurfaceLevel;
+    /** Token-backed interior spacing. */
     padding?: SurfacePaddingSize;
+    /** Token-backed corner radius. */
     radius?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Draw the theme hairline border. */
     bordered?: boolean;
+    /** Override the level's depth. */
     shadow?: ShadowTier;
 }
 declare const Surface: ForwardRefComponent<ViewInstance, SurfaceProps>;

package/dist/components/textarea/textarea.js

@@ -7,9 +7,9 @@ import { tv } from '../../lib/tv';
 import { useThemeColors } from '../../lib/theme-colors';
 import { useInteractionTokens } from '../../lib/interaction-tokens';
 import { useVisualTokens } from '../../lib/visual-tokens';
-import { typographyStyle } from '../../lib/recipes';
+import { textCursorColors, typographyStyle } from '../../lib/recipes';
 import { webAutofillField } from '../../lib/web-autofill';
-import { useFormFieldState } from '../form-field/form-field';
+import { fieldAccessibilityProps, useFormFieldState } from '../form-field/form-field';
 const textareaVariants = tv({
     base: 'w-full border-border bg-muted text-foreground',
     variants: {
@@ -48,7 +48,7 @@ const Textarea = React.forwardRef(({ className, size = 'default', placeholderTex
         paddingVertical: visual.controlPaddingYDefault,
         ...(!effectiveEditable ? { opacity: interaction.disabledOpacity } : null),
     };
-    return (_jsx(TextInput, { ref: ref, className: cn(textareaVariants({ size }), field.invalid && 'border-destructive', focusField, webAutofillField, className), style: style, multiline: true, textAlignVertical: "top", placeholderTextColor: placeholderTextColor ?? colors.placeholder, editable: effectiveEditable, "aria-invalid": ariaInvalid ?? field.invalid, ...props }));
+    return (_jsx(TextInput, { ref: ref, ...fieldAccessibilityProps(field, props), className: cn(textareaVariants({ size }), field.invalid && 'border-destructive', focusField, webAutofillField, className), style: style, multiline: true, textAlignVertical: "top", placeholderTextColor: placeholderTextColor ?? colors.placeholder, ...textCursorColors(colors), editable: effectiveEditable, "aria-invalid": ariaInvalid ?? field.invalid, ...props }));
 });
 Textarea.displayName = 'Textarea';
 export { Textarea, textareaVariants };

package/dist/components/toast/toast.d.ts

@@ -25,21 +25,21 @@ export interface ToastProviderProps {
 export declare function ToastProvider({ children }: ToastProviderProps): React.JSX.Element;
 declare const toastVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: "border-border bg-background";
-        destructive: "border-destructive bg-destructive";
-        success: "border-success bg-success";
+        default: "border-border";
+        destructive: "border-destructive-soft-border";
+        success: "border-success-soft-border";
     };
-}, undefined, "w-full flex-row items-center justify-between border", {
+}, undefined, "w-full flex-row items-center gap-3 border bg-popover", {
     variant: {
-        default: "border-border bg-background";
-        destructive: "border-destructive bg-destructive";
-        success: "border-success bg-success";
+        default: "border-border";
+        destructive: "border-destructive-soft-border";
+        success: "border-success-soft-border";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: "border-border bg-background";
-        destructive: "border-destructive bg-destructive";
-        success: "border-success bg-success";
+        default: "border-border";
+        destructive: "border-destructive-soft-border";
+        success: "border-success-soft-border";
     };
 }, undefined>>;
 export interface ToastProps extends ViewProps, VariantProps<typeof toastVariants> {