@thewhileloop/whileui 2.0.0 → 3.0.0

package/README.md

@@ -4,7 +4,7 @@
 
 Beautiful, accessible, themeable components built with [Uniwind](https://uniwind.dev) + Tailwind CSS v4.
 
-**Requirements:** React 19+, React Native 0.81+, Expo 52+ (if using Expo). Supports React Native Web.
+**Requirements:** React 19.3+, React Native 0.88+, Expo 58+ (if using Expo). Supports React Native Web.
 
 WhileUI has one renderer: React Native. iOS, Android and React Native Web are all
 production targets — iOS and Android set the interaction baseline. See
@@ -15,7 +15,7 @@ production targets — iOS and Android set the interaction baseline. See
 
 ```bash
 bun add @thewhileloop/whileui
-bun add react@^19.0.0 react-native@^0.81.0 uniwind@^1.0.0 tailwindcss@^4.0.0 react-native-reanimated react-native-safe-area-context react-native-screens
+bun add react@^19.3.0 react-native@^0.88.0 uniwind@^1.12.2 tailwindcss@^4.0.0 react-native-reanimated react-native-safe-area-context react-native-screens
 # Only if you use Select, Popover, Tooltip, or HoverCard:
 bun add @rn-primitives/portal @rn-primitives/hooks @rn-primitives/slot @rn-primitives/select @rn-primitives/popover @rn-primitives/tooltip @rn-primitives/hover-card
 ```
@@ -851,7 +851,8 @@ Optional RN fallback tokens (hex/rgb/hsl/named):
 }
 ```
 
-Or use the first-party ThemeBridge helper with optional persistence:
+Or use the first-party theme bridge with optional persistence. The hook owns theme
+state and exposes event-driven setters:
 
 ```tsx
 import { useThemeBridge, type ThemeBridgeAdapter } from '@thewhileloop/whileui';
@@ -866,6 +867,16 @@ const adapter: ThemeBridgeAdapter = {
 const { mode, resolvedTheme, setMode, cycleMode } = useThemeBridge({ adapter });
 ```
 
+When another store already owns the mode, mount the controlled bridge once near the
+application root. Change `mode` in the owning event handler; the bridge applies and
+persists it without mirroring state back through a callback effect.
+
+```tsx
+import { ThemeBridge } from '@thewhileloop/whileui';
+
+<ThemeBridge mode={mode} adapter={adapter} />;
+```
+
 ## Focus rings
 
 Every interactive component draws a themed focus ring on web. It uses `:focus-visible`,
@@ -1550,7 +1561,8 @@ announces as a heading to assistive technology — as do `DropdownMenuLabel` and
 
 ## SignInForm
 
-Copy from `apps/showcase/templates/auth/sign-in-form.tsx`, then:
+Copy `sign-in-form.tsx` and its sibling `auth-form-footer.tsx` from
+`apps/showcase/templates/auth/`, then:
 
 ```tsx
 import { SignInForm } from './templates/auth'; // or your path
@@ -1574,7 +1586,8 @@ import { SignInForm } from './templates/auth'; // or your path
 
 ## SignUpForm
 
-Copy from `apps/showcase/templates/auth/sign-up-form.tsx`, then:
+Copy `sign-up-form.tsx` and its sibling `auth-form-footer.tsx` from
+`apps/showcase/templates/auth/`, then:
 
 ```tsx
 import { SignUpForm } from './templates/auth'; // or your path

package/dist/blocks/commerce/metric-card.d.ts

@@ -3,40 +3,20 @@ import { type ViewProps } from 'react-native';
 import { type VariantProps } from '../../lib/tv';
 declare const metricCardVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        outlined: string;
+        default: "bg-card";
+        outlined: "bg-transparent border border-border";
     };
-}, undefined, "", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "", {
     variant: {
-        default: string;
-        outlined: string;
+        default: "bg-card";
+        outlined: "bg-transparent border border-border";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        outlined: string;
+        default: "bg-card";
+        outlined: "bg-transparent border border-border";
     };
-}>, {
-    variant: {
-        default: string;
-        outlined: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: string;
-        outlined: string;
-    };
-}, undefined, "", import("tailwind-variants/dist/config.js").TVConfig<{
-    variant: {
-        default: string;
-        outlined: string;
-    };
-}, {
-    variant: {
-        default: string;
-        outlined: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface MetricCardProps extends ViewProps, VariantProps<typeof metricCardVariants> {
     className?: string;
     label: string;

package/dist/blocks/datepicker/date-range-picker-modal.d.ts

@@ -29,7 +29,7 @@ export interface DateRangePickerModalProps extends FrostedSurfaceProps {
     className?: string;
 }
 declare function formatRangeDisplay(range: DateRange | null | undefined): string;
-export declare function DateRangePickerModal({ value, onValueChange, open, onOpenChange, minDate, maxDate, theme: customTheme, trigger, title, confirmLabel, className, frosted, blurIntensity, blurTintToken, }: DateRangePickerModalProps): React.JSX.Element;
+export declare function DateRangePickerModal(props: DateRangePickerModalProps): React.JSX.Element;
 /** Compact trigger showing formatted range. Use as DateRangePickerModal's trigger prop. */
 export declare function DateRangePickerTrigger({ value, placeholder, className, }: {
     value?: DateRange | null;

package/dist/blocks/datepicker/date-range-picker-modal.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { Modal, Pressable, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useUniwind } from 'uniwind';
@@ -47,7 +47,7 @@ function buildMarkedDates(start, end, theme) {
     }
     return marked;
 }
-export function DateRangePickerModal({ value, onValueChange, open, onOpenChange, minDate, maxDate, theme: customTheme, trigger, title = 'Select date range', confirmLabel = 'Done', className, frosted = false, blurIntensity, blurTintToken, }) {
+function DateRangePickerModalSession({ value, onValueChange, open, onOpenChange, minDate, maxDate, theme: customTheme, trigger, title = 'Select date range', confirmLabel = 'Done', className, frosted = false, blurIntensity, blurTintToken, }) {
     const insets = useSafeAreaInsets();
     const { theme } = useUniwind();
     const colors = useThemeColors();
@@ -68,18 +68,6 @@ export function DateRangePickerModal({ value, onValueChange, open, onOpenChange,
     const renderArrow = useCallback((direction) => (_jsx(Text, { className: "font-medium", style: { color: arrowColor, fontSize: arrowFontSize }, children: direction === 'left' ? '<' : '>' })), [arrowColor, arrowFontSize]);
     const [draftStart, setDraftStart] = useState(value?.start ?? null);
     const [draftEnd, setDraftEnd] = useState(value?.end ?? null);
-    const prevOpenRef = useRef(open);
-    useEffect(() => {
-        if (open && !prevOpenRef.current) {
-            setDraftStart(value?.start ?? null);
-            setDraftEnd(value?.end ?? null);
-        }
-        else if (!open && prevOpenRef.current) {
-            setDraftStart(null);
-            setDraftEnd(null);
-        }
-        prevOpenRef.current = open;
-    }, [open, value]);
     const markedDates = useMemo(() => {
         const color = calendarTheme.selectedDayBackgroundColor;
         const textColor = calendarTheme.selectedDayTextColor;
@@ -151,6 +139,10 @@ export function DateRangePickerModal({ value, onValueChange, open, onOpenChange,
                                         borderWidth: visual.borderWidthHairline,
                                     }, children: _jsx(Calendar, { current: draftStart ?? value?.start ?? undefined, onDayPress: handleDayPress, markedDates: markedDates, markingType: "period", minDate: minDate, maxDate: maxDate, theme: calendarTheme, renderArrow: renderArrow, enableSwipeMonths: true }, theme) }) })] }) }) })] }));
 }
+export function DateRangePickerModal(props) {
+    const sessionKey = props.open ? 'open' : 'closed';
+    return _jsx(DateRangePickerModalSession, { ...props }, sessionKey);
+}
 /** Compact trigger showing formatted range. Use as DateRangePickerModal's trigger prop. */
 export function DateRangePickerTrigger({ value, placeholder = 'Select date range', className, }) {
     const visual = useVisualTokens();

package/dist/blocks/datepicker/datepicker-modal.d.ts

@@ -25,7 +25,7 @@ export interface DatePickerModalProps extends FrostedSurfaceProps {
     className?: string;
 }
 declare function formatDisplayDate(dateString: string | null | undefined): string;
-export declare function DatePickerModal({ value, onValueChange, open, onOpenChange, minDate, maxDate, theme: customTheme, trigger, title, confirmLabel, className, frosted, blurIntensity, blurTintToken, }: DatePickerModalProps): React.JSX.Element;
+export declare function DatePickerModal(props: DatePickerModalProps): React.JSX.Element;
 /** Compact trigger showing formatted date. Use as DatePickerModal's trigger prop. */
 export declare function DatePickerTrigger({ value, placeholder, className, }: {
     value?: string | null;

package/dist/blocks/datepicker/datepicker-modal.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { Modal, Pressable, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useUniwind } from 'uniwind';
@@ -23,7 +23,7 @@ function formatDisplayDate(dateString) {
         year: 'numeric',
     });
 }
-export function DatePickerModal({ value, onValueChange, open, onOpenChange, minDate, maxDate, theme: customTheme, trigger, title = 'Select date', confirmLabel = 'Done', className, frosted = false, blurIntensity, blurTintToken, }) {
+function DatePickerModalSession({ value, onValueChange, open, onOpenChange, minDate, maxDate, theme: customTheme, trigger, title = 'Select date', confirmLabel = 'Done', className, frosted = false, blurIntensity, blurTintToken, }) {
     const insets = useSafeAreaInsets();
     const { theme } = useUniwind();
     const colors = useThemeColors();
@@ -43,16 +43,6 @@ export function DatePickerModal({ value, onValueChange, open, onOpenChange, minD
     const arrowFontSize = typographyStyle(visual, 'body').fontSize;
     const renderArrow = useCallback((direction) => (_jsx(Text, { className: "font-medium", style: { color: arrowColor, fontSize: arrowFontSize }, children: direction === 'left' ? '<' : '>' })), [arrowColor, arrowFontSize]);
     const [draftDate, setDraftDate] = useState(value ?? null);
-    const prevOpenRef = useRef(open);
-    useEffect(() => {
-        if (open && !prevOpenRef.current) {
-            setDraftDate(value ?? null);
-        }
-        else if (!open && prevOpenRef.current) {
-            setDraftDate(null);
-        }
-        prevOpenRef.current = open;
-    }, [open, value]);
     const markedDates = useMemo(() => {
         if (!draftDate)
             return undefined;
@@ -95,6 +85,10 @@ export function DatePickerModal({ value, onValueChange, open, onOpenChange, minD
                                         borderWidth: visual.borderWidthHairline,
                                     }, children: _jsx(Calendar, { current: draftDate ?? value ?? undefined, onDayPress: handleDayPress, markedDates: markedDates, minDate: minDate, maxDate: maxDate, theme: calendarTheme, renderArrow: renderArrow, enableSwipeMonths: true }, theme) }) })] }) }) })] }));
 }
+export function DatePickerModal(props) {
+    const sessionKey = props.open ? 'open' : 'closed';
+    return _jsx(DatePickerModalSession, { ...props }, sessionKey);
+}
 /** Compact trigger showing formatted date. Use as DatePickerModal's trigger prop. */
 export function DatePickerTrigger({ value, placeholder = 'Select date', className, }) {
     const visual = useVisualTokens();

package/dist/blocks/layout/smart-input.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { TextInput, type TextInputProps } from 'react-native';
+import { type TextInputInstance, type TextInputProps } from 'react-native';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 export interface SmartInputProps extends TextInputProps {
     /** Left slot: emoji, attach, etc. */
     leftSlot?: React.ReactNode;
@@ -24,4 +25,4 @@ export interface SmartInputProps extends TextInputProps {
     placeholderPauseDuration?: number;
     placeholderClearInterval?: number;
 }
-export declare const SmartInput: React.ForwardRefExoticComponent<SmartInputProps & React.RefAttributes<TextInput>>;
+export declare const SmartInput: ForwardRefComponent<TextInputInstance, SmartInputProps>;

package/dist/blocks/layout/smart-input.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef, useState } from 'react';
-import { AccessibilityInfo, View, TextInput } from 'react-native';
+import { AccessibilityInfo, View, TextInput, } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { cn } from '../../lib/cn';
 import { focusRing } from '../../lib/focus-ring';
@@ -79,6 +79,30 @@ function useRotatingPlaceholder({ active, examplesKey, prefix, typingInterval, p
     }
     return animatedPlaceholder || prefix;
 }
+function useSmartInputPlaceholder({ value, defaultValue, placeholder, examples, prefix, typingInterval, pauseDuration, clearInterval, onChangeText, }) {
+    const [uncontrolledHasText, setUncontrolledHasText] = useState(() => Boolean(defaultValue));
+    const hasText = value !== undefined ? Boolean(value) : uncontrolledHasText;
+    const examplesKey = examples?.join(SEPARATOR) ?? '';
+    const animatedPlaceholder = useRotatingPlaceholder({
+        active: placeholder === undefined && !hasText && Boolean(examplesKey),
+        examplesKey,
+        prefix,
+        typingInterval,
+        pauseDuration,
+        clearInterval,
+    });
+    return {
+        placeholder: placeholder ?? (hasText || !examplesKey ? undefined : animatedPlaceholder),
+        onChangeText: (text) => {
+            if (value === undefined)
+                setUncontrolledHasText(Boolean(text));
+            onChangeText?.(text);
+        },
+    };
+}
+function SmartInputSlot({ children }) {
+    return children ? _jsx(View, { className: "shrink-0", children: children }) : null;
+}
 export const SmartInput = forwardRef(function SmartInput({ leftSlot, centerSlot, rightSlot, variant = 'bar', className, inputClassName, submitBehavior = 'newline', safeArea = true, placeholderExamples, placeholderPrefix = 'e.g. ', placeholderTypingInterval = 65, placeholderPauseDuration = 2200, placeholderClearInterval = 25, placeholderTextColor, placeholder, value, defaultValue, onChangeText, editable = true, style, ...props }, ref) {
     const insets = useSafeAreaInsets();
     const colors = useThemeColors();
@@ -87,22 +111,17 @@ export const SmartInput = forwardRef(function SmartInput({ leftSlot, centerSlot,
     const bottomPadding = safeArea
         ? Math.max(insets.bottom, visual.controlPaddingYSm)
         : visual.controlPaddingYSm;
-    // When the field is controlled its owner already holds the answer, so derive it rather
-    // than mirroring it into state — mirroring cost a frame in which the rotating
-    // placeholder kept animating over text the user had already typed.
-    const [uncontrolledHasText, setUncontrolledHasText] = useState(() => Boolean(defaultValue));
-    const hasText = value !== undefined ? Boolean(value) : uncontrolledHasText;
-    const examplesKey = placeholderExamples?.join(SEPARATOR) ?? '';
-    const animatePlaceholder = placeholder === undefined && !hasText && Boolean(examplesKey);
-    const animatedPlaceholder = useRotatingPlaceholder({
-        active: animatePlaceholder,
-        examplesKey,
+    const placeholderState = useSmartInputPlaceholder({
+        value,
+        defaultValue,
+        placeholder,
+        examples: placeholderExamples,
         prefix: placeholderPrefix,
         typingInterval: placeholderTypingInterval,
         pauseDuration: placeholderPauseDuration,
         clearInterval: placeholderClearInterval,
+        onChangeText,
     });
-    const resolvedPlaceholder = placeholder ?? (hasText || !examplesKey ? undefined : animatedPlaceholder);
     return (_jsxs(View, { className: cn('w-full flex-row items-center gap-2 bg-background', variant === 'bar' && 'border-border', variant === 'card' && 'border-border', className), style: [
             {
                 paddingHorizontal: visual.controlPaddingXSm,
@@ -117,16 +136,12 @@ export const SmartInput = forwardRef(function SmartInput({ leftSlot, centerSlot,
                     ...shadowStyle(visual, colors, 'md'),
                 }
                 : null,
-        ], children: [leftSlot && _jsx(View, { className: "shrink-0", children: leftSlot }), centerSlot && _jsx(View, { className: "shrink-0", children: centerSlot }), _jsx(TextInput, { ref: ref, style: [
+        ], children: [_jsx(SmartInputSlot, { children: leftSlot }), _jsx(SmartInputSlot, { children: centerSlot }), _jsx(TextInput, { ref: ref, style: [
                     controlRecipe(visual, 'default'),
                     typographyStyle(visual, 'label'),
                     variant === 'bar' ? { borderWidth: visual.borderWidthControl } : null,
                     { maxHeight: visual.smartInputMaxHeight },
                     !editable ? { opacity: interaction.disabledOpacity } : null,
                     style,
-                ], className: cn('flex-1 text-foreground placeholder:text-muted-foreground', focusRing, variant === 'bar' && 'border-border bg-muted', variant === 'card' && 'bg-transparent', inputClassName), multiline: true, submitBehavior: submitBehavior, textAlignVertical: "top", placeholderTextColor: placeholderTextColor ?? colors.placeholder, placeholder: resolvedPlaceholder, value: value, defaultValue: defaultValue, onChangeText: (text) => {
-                    if (value === undefined)
-                        setUncontrolledHasText(Boolean(text));
-                    onChangeText?.(text);
-                }, editable: editable, ...props }), rightSlot && _jsx(View, { className: "shrink-0", children: rightSlot })] }));
+                ], className: cn('flex-1 text-foreground placeholder:text-muted-foreground', focusRing, variant === 'bar' && 'border-border bg-muted', variant === 'card' && 'bg-transparent', inputClassName), multiline: true, submitBehavior: submitBehavior, textAlignVertical: "top", placeholderTextColor: placeholderTextColor ?? colors.placeholder, placeholder: placeholderState.placeholder, value: value, defaultValue: defaultValue, onChangeText: placeholderState.onChangeText, editable: editable, ...props }), _jsx(SmartInputSlot, { children: rightSlot })] }));
 });

package/dist/blocks/media/smart-image.d.ts

@@ -1,122 +1,63 @@
-import React from 'react';
-import { View, type ViewProps, type ImageProps as RNImageProps } from 'react-native';
+import { type ViewInstance, type ViewProps } from 'react-native';
+import { type ImageProps } from 'expo-image';
 import { type VariantProps } from '../../lib/tv';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 declare const smartImageVariants: import("tailwind-variants").TVReturnType<{
     radius: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        full: string;
+        none: "";
+        sm: "";
+        md: "";
+        lg: "";
+        xl: "";
+        full: "rounded-full";
     };
     objectFit: {
-        cover: string;
-        contain: string;
-        fill: string;
-        'scale-down': string;
+        cover: "object-cover";
+        contain: "object-contain";
+        fill: "object-fill";
+        'scale-down': "object-scale-down";
     };
-}, undefined, "overflow-hidden", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "overflow-hidden", {
     radius: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        full: string;
+        none: "";
+        sm: "";
+        md: "";
+        lg: "";
+        xl: "";
+        full: "rounded-full";
     };
     objectFit: {
-        cover: string;
-        contain: string;
-        fill: string;
-        'scale-down': string;
+        cover: "object-cover";
+        contain: "object-contain";
+        fill: "object-fill";
+        'scale-down': "object-scale-down";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     radius: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        full: string;
+        none: "";
+        sm: "";
+        md: "";
+        lg: "";
+        xl: "";
+        full: "rounded-full";
     };
     objectFit: {
-        cover: string;
-        contain: string;
-        fill: string;
-        'scale-down': string;
+        cover: "object-cover";
+        contain: "object-contain";
+        fill: "object-fill";
+        'scale-down': "object-scale-down";
     };
-}>, {
-    radius: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        full: string;
-    };
-    objectFit: {
-        cover: string;
-        contain: string;
-        fill: string;
-        'scale-down': string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    radius: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        full: string;
-    };
-    objectFit: {
-        cover: string;
-        contain: string;
-        fill: string;
-        'scale-down': string;
-    };
-}, undefined, "overflow-hidden", import("tailwind-variants/dist/config.js").TVConfig<{
-    radius: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        full: string;
-    };
-    objectFit: {
-        cover: string;
-        contain: string;
-        fill: string;
-        'scale-down': string;
-    };
-}, {
-    radius: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        full: string;
-    };
-    objectFit: {
-        cover: string;
-        contain: string;
-        fill: string;
-        'scale-down': string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface SmartImageProps extends Omit<ViewProps, 'className'>, VariantProps<typeof smartImageVariants> {
     className?: string;
-    source: RNImageProps['source'];
+    source: ImageProps['source'];
     alt: string;
     skeleton?: boolean;
     skeletonClassName?: string;
     transition?: number;
     onLoad?: () => void;
     onError?: () => void;
-    fallbackSource?: RNImageProps['source'];
+    fallbackSource?: ImageProps['source'];
 }
-declare const SmartImage: React.ForwardRefExoticComponent<SmartImageProps & React.RefAttributes<View>>;
+declare const SmartImage: ForwardRefComponent<ViewInstance, SmartImageProps>;
 export { SmartImage, smartImageVariants };