@thewhileloop/whileui 4.2.1 → 4.3.0

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.js

@@ -9,7 +9,7 @@ import { useInteractionTokens } from '../../lib/interaction-tokens';
 import { useVisualTokens } from '../../lib/visual-tokens';
 import { 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,7 +43,7 @@ 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,

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

@@ -9,7 +9,7 @@ import { useInteractionTokens, withInteractivePressableStyle } from '../../lib/i
 import { useVisualTokens } from '../../lib/visual-tokens';
 import { 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,7 +171,7 @@ 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) => {

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/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

@@ -136,6 +136,7 @@ export interface SegmentedControlProps extends ViewProps {
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
+    /** Pill = rounded-full items. */
     variant?: 'default' | 'pill';
     wrap?: boolean | 'auto';
     size?: 'default' | 'compact';

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

@@ -9,7 +9,7 @@ import { useInteractionTokens } from '../../lib/interaction-tokens';
 import { useVisualTokens } from '../../lib/visual-tokens';
 import { 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, 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> {

package/dist/components/toast/toast.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { Pressable, View } from 'react-native';
-import Animated, { SlideInUp, SlideOutUp } from 'react-native-reanimated';
+import { AccessibilityInfo, Platform, Pressable, View } from 'react-native';
+import Animated, { FadeOut, SlideInUp } from 'react-native-reanimated';
 import { Text } from '../text';
 import { cn } from '../../lib/cn';
+import { focusRing } from '../../lib/focus-ring';
+import { useMotionPolicy } from '../../lib/motion-policy';
 import { tv } from '../../lib/tv';
 import { useVisualTokens } from '../../lib/visual-tokens';
 import { useThemeColors } from '../../lib/theme-colors';
@@ -17,15 +19,11 @@ export function useToast() {
     return context;
 }
 let toastId = 0;
-const TEXT_COLOR_BY_VARIANT = {
-    default: 'text-foreground',
-    destructive: 'text-destructive-foreground',
-    success: 'text-success-foreground',
-};
-const DESCRIPTION_COLOR_BY_VARIANT = {
-    default: 'text-muted-foreground',
-    destructive: 'text-destructive-foreground-muted',
-    success: 'text-success-foreground-muted',
+/** Status variants carry a small dot, not a fill, so every toast sits on the theme's surface. */
+const ACCENT_BY_VARIANT = {
+    default: undefined,
+    destructive: 'bg-destructive',
+    success: 'bg-success',
 };
 export function ToastProvider({ children }) {
     const [toasts, setToasts] = useState([]);
@@ -44,12 +42,12 @@ export function ToastProvider({ children }) {
     return _jsx(ToastContext.Provider, { value: contextValue, children: children });
 }
 const toastVariants = tv({
-    base: 'w-full flex-row items-center justify-between border',
+    base: 'w-full flex-row items-center gap-3 border bg-popover',
     variants: {
         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',
         },
     },
     defaultVariants: {
@@ -60,31 +58,51 @@ function Toast({ toast: toastData, onDismiss, className, style, ...props }) {
     const { title, description, variant = 'default', duration = 4000, action } = toastData;
     const visual = useVisualTokens();
     const colors = useThemeColors();
+    const motion = useMotionPolicy();
+    const accent = ACCENT_BY_VARIANT[variant];
     useEffect(() => {
         if (duration > 0) {
             const timer = setTimeout(onDismiss, duration);
             return () => clearTimeout(timer);
         }
     }, [duration, onDismiss]);
-    const textColor = TEXT_COLOR_BY_VARIANT[variant];
-    const descColor = DESCRIPTION_COLOR_BY_VARIANT[variant];
-    return (_jsxs(Animated.View, { entering: SlideInUp.duration(300), exiting: SlideOutUp.duration(200), className: cn(toastVariants({ variant }), className), style: [
-            {
-                borderRadius: surfaceRadius(visual, 'lg'),
-                borderWidth: visual.borderWidthHairline,
-                padding: surfacePadding(visual, 'sm'),
-            },
-            shadowStyle(visual, colors, 'lg'),
-            style,
-        ], ...props, children: [_jsxs(View, { className: "flex-1 gap-1", children: [title && (_jsx(Text, { className: cn('font-semibold', textColor), style: typographyStyle(visual, 'label'), children: title })), description && (_jsx(Text, { className: cn(descColor), style: typographyStyle(visual, 'label'), children: description }))] }), _jsxs(View, { className: "flex-row items-center gap-2", children: [action && (_jsx(Pressable, { accessibilityRole: "button", onPress: () => {
-                            action.onPress();
-                            onDismiss();
-                        }, className: "border border-border", style: {
-                            borderRadius: visual.radiusMd,
-                            borderWidth: visual.borderWidthControl,
-                            paddingHorizontal: visual.controlPaddingXSm,
-                            paddingVertical: visual.controlPaddingYSm,
-                        }, children: _jsx(Text, { className: cn('font-medium', textColor), style: typographyStyle(visual, 'label'), children: action.label }) })), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Dismiss", onPress: onDismiss, className: "p-1", children: _jsx(Text, { className: cn(textColor), style: typographyStyle(visual, 'emphasis'), children: "\u00D7" }) })] })] }));
+    // Android and the web announce through the live region below; iOS has no live
+    // regions, so it is told once, when the toast appears.
+    useEffect(() => {
+        if (Platform.OS !== 'ios')
+            return;
+        const message = [title, description].filter(Boolean).join('. ');
+        if (message)
+            AccessibilityInfo.announceForAccessibility(message);
+        // Announce on appearance only; a re-render must not repeat it.
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- once per toast, by design
+    }, []);
+    return (_jsx(Animated.View, { entering: motion.animationsEnabled ? SlideInUp.duration(motion.durations.normal) : undefined, exiting: motion.animationsEnabled ? FadeOut.duration(motion.durations.fast) : undefined, children: _jsxs(View
+        // Announced where it appears, without moving focus. Set before the spread so a
+        // caller can still override.
+        , { 
+            // Announced where it appears, without moving focus. Set before the spread so a
+            // caller can still override.
+            accessibilityRole: "alert", accessibilityLiveRegion: "polite", className: cn(toastVariants({ variant }), className), style: [
+                {
+                    borderRadius: surfaceRadius(visual, 'lg'),
+                    borderWidth: visual.borderWidthHairline,
+                    padding: surfacePadding(visual, 'sm'),
+                },
+                shadowStyle(visual, colors, 'lg'),
+                style,
+            ], ...props, children: [_jsxs(View, { className: "flex-1 gap-0.5", children: [title ? (_jsxs(View, { className: "flex-row items-center gap-2", children: [accent ? _jsx(View, { className: cn('h-2 w-2 rounded-full', accent) }) : null, _jsx(Text, { className: "font-semibold text-popover-foreground", style: typographyStyle(visual, 'label'), children: title })] })) : null, description ? (_jsx(Text, { className: "text-muted-foreground", style: typographyStyle(visual, 'label'), children: description })) : null] }), action ? (_jsx(Pressable, { accessibilityRole: "button", onPress: () => {
+                        action.onPress();
+                        onDismiss();
+                    }, className: cn('border border-border active:bg-state-pressed', focusRing), style: {
+                        borderRadius: visual.radiusMd,
+                        borderWidth: visual.borderWidthControl,
+                        paddingHorizontal: visual.controlPaddingXSm,
+                        paddingVertical: visual.controlPaddingYSm,
+                    }, children: _jsx(Text, { className: "font-medium text-popover-foreground", style: typographyStyle(visual, 'label'), children: action.label }) })) : null, _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Dismiss", onPress: onDismiss, 
+                    // 44 px everywhere, since hitSlop does nothing on the web; the negative margin
+                    // keeps the toast as compact as the old 32 px button left it.
+                    hitSlop: 2, className: cn('-my-1.5 -mr-1.5 h-11 w-11 items-center justify-center rounded-full active:bg-state-pressed', focusRing), children: _jsx(Text, { className: "text-muted-foreground", style: typographyStyle(visual, 'emphasis'), children: "\u00D7" }) })] }) }));
 }
 function ToastContainerItem({ toast, dismiss, }) {
     const handleDismiss = useCallback(() => dismiss(toast.id), [dismiss, toast.id]);
@@ -94,6 +112,6 @@ export function ToastContainer({ position = 'top', className, style, ...props })
     const { toasts, dismiss } = useToast();
     const visual = useVisualTokens();
     const positionClass = position === 'top' ? 'top-0' : 'bottom-0';
-    return (_jsx(View, { className: cn('absolute left-0 right-0 z-50 py-2', positionClass, className), style: [{ paddingHorizontal: visual.surfacePaddingSm }, style], pointerEvents: "box-none", ...props, children: toasts.map((toast) => (_jsx(ToastContainerItem, { toast: toast, dismiss: dismiss }, toast.id))) }));
+    return (_jsx(View, { className: cn('absolute left-0 right-0 z-50 py-2', positionClass, className), style: [{ paddingHorizontal: visual.surfacePaddingSm }, style], pointerEvents: "box-none", ...props, children: _jsx(View, { className: "w-full max-w-md self-center", pointerEvents: "box-none", children: toasts.map((toast) => (_jsx(ToastContainerItem, { toast: toast, dismiss: dismiss }, toast.id))) }) }));
 }
 export { Toast, toastVariants };

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export { registerFrostedBlurView, type FrostedSurfaceProps, type FrostedTintToke
 export { controlRecipe, fieldRecipe, surfaceRecipe, surfacePadding, surfaceRadius, shadowStyle, typographyStyle, useControlRecipe, useFieldRecipe, useSurfaceRecipe, useShadowStyle, useTypography, type ControlSize, type SurfacePaddingSize, type SurfaceRecipeOptions, type ShadowTier, type TypographyRole, } from './lib/recipes';
 export { WHILEUI_PRESET_SOFT, WHILEUI_PRESET_ATELIER, WHILEUI_THEME_PRESETS, themePresetToCssVariables, themePresetToCss, type ThemePreset, } from './lib/theme-presets';
 export { deriveThemeColors, THEME_BASE_TOKEN_KEYS, type ThemeBaseColors } from './lib/theme-derive';
+export { checkThemeContrast, themeFromSeeds, type ContrastCheck, type ThemeSeeds, } from './lib/theme-seeds';
 export { Text, textVariants, type TextProps } from './components/text';
 export { Surface, type SurfaceLevel, type SurfaceProps } from './components/surface';
 export { View, type ViewProps } from './components/view';

package/dist/index.js

@@ -15,6 +15,7 @@ export { registerFrostedBlurView, } from './lib/frosted-surface';
 export { controlRecipe, fieldRecipe, surfaceRecipe, surfacePadding, surfaceRadius, shadowStyle, typographyStyle, useControlRecipe, useFieldRecipe, useSurfaceRecipe, useShadowStyle, useTypography, } from './lib/recipes';
 export { WHILEUI_PRESET_SOFT, WHILEUI_PRESET_ATELIER, WHILEUI_THEME_PRESETS, themePresetToCssVariables, themePresetToCss, } from './lib/theme-presets';
 export { deriveThemeColors, THEME_BASE_TOKEN_KEYS } from './lib/theme-derive';
+export { checkThemeContrast, themeFromSeeds, } from './lib/theme-seeds';
 export { Text, textVariants } from './components/text';
 export { Surface } from './components/surface';
 export { View } from './components/view';

package/dist/lib/frosted-surface.d.ts

@@ -3,8 +3,11 @@ import { type ViewStyle } from 'react-native';
 export type FrostedTintToken = 'surfaceElevated' | 'surfaceTranslucent' | 'card' | 'popover';
 export type FrostedBlurPreset = 'subtle' | 'medium' | 'strong';
 export interface FrostedSurfaceProps {
+    /** Enable the optional frosted overlay. */
     frosted?: boolean;
+    /** Override blur amount directly. */
     blurIntensity?: number;
+    /** Tint token used for frosted mode. */
     blurTintToken?: FrostedTintToken;
 }
 interface UseFrostedSurfaceOptions extends FrostedSurfaceProps {

package/dist/lib/theme-colors.d.ts

@@ -1,8 +1,7 @@
 import { type ThemeColors } from './theme-contract';
 export type { ThemeColors } from './theme-contract';
 export declare function useThemeColors(): ThemeColors;
-/** Icon colors derived from theme. For @expo/vector-icons which need hex values. */
-export declare function useIconColors(): {
+export interface IconColors {
     foreground: string;
     muted: string;
     primary: string;
@@ -12,6 +11,8 @@ export declare function useIconColors(): {
     success: string;
     info: string;
     destructive: string;
-};
+}
+/** Icon colors derived from theme. For @expo/vector-icons which need hex values. */
+export declare function useIconColors(): IconColors;
 /** Alias for useThemeColors. Returns RN-safe color strings (hex/rgb/rgba) for RefreshControl, LinearGradient, charts. */
 export declare const useThemeTokens: typeof useThemeColors;

package/dist/lib/theme-colors.js

@@ -41,10 +41,29 @@ function resolveThemeToken(cssValue, appValue) {
     }
     return parseThemeColor(cssValue) ?? parseThemeColor(appValue);
 }
+// Every themed component calls this hook on every render, and parsing 104 colour
+// strings plus deriving the palette cost about 0.16 ms per call in Node, several times
+// that under Hermes. The inputs only change with the theme, so the result is derived
+// once per distinct snapshot and shared: the same object comes back until the CSS
+// variables change, which also keeps it stable for downstream memoisation.
+const resolvedThemeColors = new Map();
+const RESOLVED_THEME_LIMIT = 8;
 export function useThemeColors() {
     const { theme } = useUniwind();
     const values = useCSSVariable(THEME_TOKEN_VARIABLES);
     const scheme = theme === 'dark' ? 'dark' : 'light';
+    const key = `${scheme}\u0001${values.join('\u0001')}`;
+    const cached = resolvedThemeColors.get(key);
+    if (cached)
+        return cached;
+    const resolved = resolveThemeColors(values, scheme);
+    if (resolvedThemeColors.size >= RESOLVED_THEME_LIMIT) {
+        resolvedThemeColors.delete(resolvedThemeColors.keys().next().value);
+    }
+    resolvedThemeColors.set(key, resolved);
+    return resolved;
+}
+function resolveThemeColors(values, scheme) {
     const fallbackPalette = scheme === 'dark' ? WHILEUI_DARK_THEME_COLORS : WHILEUI_LIGHT_THEME_COLORS;
     const defined = {};
     let index = 0;
@@ -61,10 +80,14 @@ export function useThemeColors() {
     const derived = deriveThemeColors(base, scheme);
     return { ...derived, ...defined, placeholder: derived.placeholder };
 }
+const iconColorsByTheme = new WeakMap();
 /** Icon colors derived from theme. For @expo/vector-icons which need hex values. */
 export function useIconColors() {
     const c = useThemeColors();
-    return {
+    const cached = iconColorsByTheme.get(c);
+    if (cached)
+        return cached;
+    const icons = {
         foreground: c.foreground,
         muted: c.mutedForeground,
         primary: c.primary,
@@ -75,6 +98,8 @@ export function useIconColors() {
         info: c.info,
         destructive: c.destructive,
     };
+    iconColorsByTheme.set(c, icons);
+    return icons;
 }
 /** Alias for useThemeColors. Returns RN-safe color strings (hex/rgb/rgba) for RefreshControl, LinearGradient, charts. */
 export const useThemeTokens = useThemeColors;

package/dist/lib/theme-contract.js

@@ -13,16 +13,16 @@ export const WHILEUI_LIGHT_THEME_COLORS = {
     mutedForeground: '#645783',
     border: 'rgba(68, 87, 255, 0.16)',
     input: 'rgba(255, 255, 255, 0.84)',
-    ring: 'rgba(61, 139, 255, 0.34)',
+    ring: '#3d8bff',
     accent: '#a7f432',
     accentForeground: '#163218',
-    destructive: '#f66151',
+    destructive: '#d03d31',
     destructiveForeground: '#fff8f6',
-    success: '#13a86d',
+    success: '#00864d',
     successForeground: '#f5fff9',
     warning: '#ffb224',
     warningForeground: '#3d2200',
-    info: '#3d8bff',
+    info: '#2070e1',
     infoForeground: '#f8fbff',
     overlay: 'rgba(39, 31, 72, 0.14)',
     overlayStrong: 'rgba(39, 31, 72, 0.22)',
@@ -37,19 +37,19 @@ export const WHILEUI_LIGHT_THEME_COLORS = {
     shadow: '#271f48',
     primaryActive: '#3346e6',
     secondaryActive: 'rgba(255, 123, 92, 0.18)',
-    destructiveActive: '#e0503f',
+    destructiveActive: '#bb261d',
     primarySoft: 'rgba(68, 87, 255, 0.13)',
     primarySoftSubtle: 'rgba(68, 87, 255, 0.07)',
     secondarySoft: 'rgba(255, 123, 92, 0.16)',
     mutedSoft: 'rgba(74, 55, 122, 0.05)',
-    destructiveSoft: 'rgba(246, 97, 81, 0.12)',
-    destructiveSoftBorder: 'rgba(246, 97, 81, 0.30)',
-    successSoft: 'rgba(19, 168, 109, 0.12)',
-    successSoftBorder: 'rgba(19, 168, 109, 0.30)',
+    destructiveSoft: 'rgba(208, 61, 49, 0.12)',
+    destructiveSoftBorder: 'rgba(208, 61, 49, 0.30)',
+    successSoft: 'rgba(0, 134, 77, 0.12)',
+    successSoftBorder: 'rgba(0, 134, 77, 0.30)',
     warningSoft: 'rgba(255, 178, 36, 0.14)',
     warningSoftBorder: 'rgba(255, 178, 36, 0.34)',
-    infoSoft: 'rgba(61, 139, 255, 0.12)',
-    infoSoftBorder: 'rgba(61, 139, 255, 0.30)',
+    infoSoft: 'rgba(32, 112, 225, 0.12)',
+    infoSoftBorder: 'rgba(32, 112, 225, 0.30)',
     placeholder: '#645783',
 };
 export const WHILEUI_DARK_THEME_COLORS = {
@@ -67,7 +67,7 @@ export const WHILEUI_DARK_THEME_COLORS = {
     mutedForeground: '#c5bad9',
     border: 'rgba(255, 255, 255, 0.12)',
     input: 'rgba(27, 18, 49, 0.86)',
-    ring: 'rgba(127, 240, 197, 0.36)',
+    ring: '#7ff0c5',
     accent: '#7ff0c5',
     accentForeground: '#0f2d24',
     destructive: '#ff6b57',

package/dist/lib/theme-presets.js

@@ -38,7 +38,7 @@ export const WHILEUI_PRESET_SOFT = {
 };
 // Compact geometry, hairline-plus borders, real drop shadows, warm ink.
 const ATELIER_LIGHT = {
-    primary: '#b4552d',
+    primary: '#af5028',
     primaryForeground: '#fdf6ee',
     foreground: '#2b2118',
     background: '#f6efe4',
@@ -49,10 +49,10 @@ const ATELIER_LIGHT = {
     secondary: 'rgba(43, 33, 24, 0.06)',
     secondaryForeground: '#4a3a2a',
     muted: 'rgba(43, 33, 24, 0.05)',
-    mutedForeground: '#7a6a58',
+    mutedForeground: '#716150',
     border: 'rgba(43, 33, 24, 0.22)',
     input: '#fffdf8',
-    ring: 'rgba(180, 85, 45, 0.45)',
+    ring: '#af5028',
     accent: '#1f6f54',
     accentForeground: '#f0faf5',
     destructive: '#b3261e',
@@ -70,15 +70,15 @@ const ATELIER_LIGHT = {
     surfaceTranslucentBorder: 'rgba(43, 33, 24, 0.16)',
     surfaceBorder: 'rgba(43, 33, 24, 0.22)',
     surfaceHighlight: 'rgba(255, 255, 255, 0.65)',
-    stateHover: 'rgba(180, 85, 45, 0.07)',
-    statePressed: 'rgba(180, 85, 45, 0.14)',
+    stateHover: 'rgba(175, 80, 40, 0.07)',
+    statePressed: 'rgba(175, 80, 40, 0.14)',
     stateDisabled: 'rgba(122, 106, 88, 0.30)',
     shadow: '#3a2c1c',
     primaryActive: '#96431f',
     secondaryActive: 'rgba(43, 33, 24, 0.12)',
     destructiveActive: '#8f1d17',
-    primarySoft: 'rgba(180, 85, 45, 0.12)',
-    primarySoftSubtle: 'rgba(180, 85, 45, 0.06)',
+    primarySoft: 'rgba(175, 80, 40, 0.12)',
+    primarySoftSubtle: 'rgba(175, 80, 40, 0.06)',
     secondarySoft: 'rgba(31, 111, 84, 0.10)',
     mutedSoft: 'rgba(43, 33, 24, 0.04)',
     destructiveSoft: 'rgba(179, 38, 30, 0.10)',
@@ -89,7 +89,7 @@ const ATELIER_LIGHT = {
     warningSoftBorder: 'rgba(192, 123, 18, 0.36)',
     infoSoft: 'rgba(47, 93, 158, 0.10)',
     infoSoftBorder: 'rgba(47, 93, 158, 0.32)',
-    placeholder: '#7a6a58',
+    placeholder: '#716150',
 };
 const ATELIER_DARK = {
     primary: '#e8935f',
@@ -106,7 +106,7 @@ const ATELIER_DARK = {
     mutedForeground: '#a3937d',
     border: 'rgba(239, 230, 216, 0.18)',
     input: '#211a14',
-    ring: 'rgba(232, 147, 95, 0.45)',
+    ring: '#e8935f',
     accent: '#6fd0a8',
     accentForeground: '#0b2419',
     destructive: '#e5695f',

package/dist/lib/theme-seeds.d.ts

@@ -0,0 +1,40 @@
+import type { ThemeColors } from './theme-contract';
+import { type ThemeBaseColors } from './theme-derive';
+import { type ThemePreset } from './theme-presets';
+import type { VisualTokens } from './visual-token-contract';
+export interface ThemeSeeds {
+    /** Page background. */
+    background: string;
+    /** Body text. */
+    foreground: string;
+    /** Brand colour: primary buttons, links, focus ring. */
+    primary: string;
+    /** Second voice for highlights and selected states. Derived from `primary` if left out. */
+    accent?: string;
+}
+/**
+ * A complete preset from seeds. `light` is required; `dark` defaults to a dark page with
+ * the same brand colours. `overrides` replaces any base colour before the rest is
+ * derived, so nothing is out of reach; derived tokens can be adjusted on the result.
+ */
+export declare function themeFromSeeds(input: {
+    name: string;
+    description: string;
+    light: ThemeSeeds;
+    dark?: ThemeSeeds;
+    overrides?: {
+        light?: Partial<ThemeBaseColors>;
+        dark?: Partial<ThemeBaseColors>;
+    };
+    visual?: Partial<VisualTokens>;
+}): ThemePreset;
+export interface ContrastCheck {
+    /** "foreground on background" */
+    pair: string;
+    ratio: number;
+    /** 4.5 for text, 3 for focus rings and other non-text UI (WCAG 1.4.3, 1.4.11). */
+    min: number;
+    pass: boolean;
+}
+/** Every text and focus-ring pairing the components render, checked against WCAG AA. */
+export declare function checkThemeContrast(colors: ThemeColors): ContrastCheck[];