@thewhileloop/whileui 2.0.0 → 4.0.0

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

@@ -0,0 +1,187 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Modal, Platform, Pressable, ScrollView, View, } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Text } from '../../components/text';
+import { Button, ButtonText } from '../../components/button';
+import { cn } from '../../lib/cn';
+import { focusRingInset } from '../../lib/focus-ring';
+import { useThemeColors } from '../../lib/theme-colors';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { fieldRecipe, surfacePadding, surfaceRadius, typographyStyle } from '../../lib/recipes';
+import { useFrostedSurface } from '../../lib/frosted-surface';
+const ITEM_HEIGHT = 44;
+/** Rows visible in a wheel. Odd, so one row sits centred under the selection band. */
+const VISIBLE_ROWS = 5;
+const WHEEL_HEIGHT = ITEM_HEIGHT * VISIBLE_ROWS;
+const WHEEL_PADDING = ITEM_HEIGHT * Math.floor(VISIBLE_ROWS / 2);
+const pad2 = (n) => String(n).padStart(2, '0');
+/** The locale's clock, so a US device gets AM/PM and most of the world does not. */
+function localeHourCycle() {
+    try {
+        const cycle = new Intl.DateTimeFormat(undefined, { hour: 'numeric' }).resolvedOptions()
+            .hourCycle;
+        return cycle === 'h11' || cycle === 'h12' ? 'h12' : 'h23';
+    }
+    catch {
+        return 'h23';
+    }
+}
+function parseTime(value) {
+    if (!value)
+        return null;
+    const match = /^(\d{1,2}):(\d{2})$/.exec(value.trim());
+    if (!match)
+        return null;
+    const hour = Number(match[1]);
+    const minute = Number(match[2]);
+    if (hour > 23 || minute > 59)
+        return null;
+    return { hour, minute };
+}
+/** `HH:MM` as the locale writes it — "10:30 PM" or "22:30". */
+function formatDisplayTime(value, hourCycle) {
+    const parsed = parseTime(value);
+    if (!parsed)
+        return 'Select time';
+    const date = new Date(2000, 0, 1, parsed.hour, parsed.minute);
+    return date.toLocaleTimeString(undefined, {
+        hour: 'numeric',
+        minute: '2-digit',
+        ...(hourCycle ? { hour12: hourCycle === 'h12' } : {}),
+    });
+}
+/**
+ * One scrolling column. Scrolls snap to a row, a tap selects a row, and the whole
+ * column is a single adjustable element for assistive tech and the keyboard — sixty
+ * minute rows as sixty tab stops would be nobody's idea of operable.
+ */
+function Wheel({ label, options, selected, onSelect }) {
+    const visual = useVisualTokens();
+    const colors = useThemeColors();
+    const ref = useRef(null);
+    const index = Math.max(0, options.findIndex((option) => option.value === selected));
+    // Keep the band on the selected row when the value changes from outside the wheel
+    // (a tap, a keyboard step, the initial value), not after the user's own scroll.
+    const lastScrolledIndex = useRef(-1);
+    useEffect(() => {
+        if (lastScrolledIndex.current === index)
+            return;
+        lastScrolledIndex.current = index;
+        ref.current?.scrollTo({ y: index * ITEM_HEIGHT, animated: Platform.OS !== 'web' });
+    }, [index]);
+    const settle = useCallback((event) => {
+        const next = Math.round(event.nativeEvent.contentOffset.y / ITEM_HEIGHT);
+        const clamped = Math.min(options.length - 1, Math.max(0, next));
+        lastScrolledIndex.current = clamped;
+        const option = options[clamped];
+        if (option && option.value !== selected)
+            onSelect(option.value);
+    }, [onSelect, options, selected]);
+    const step = useCallback((delta) => {
+        const next = (index + delta + options.length) % options.length;
+        onSelect(options[next].value);
+    }, [index, onSelect, options]);
+    const current = options[index]?.label ?? '';
+    return (_jsxs(View, { accessible: true, accessibilityRole: "adjustable", accessibilityLabel: label, accessibilityValue: { text: current }, accessibilityActions: [{ name: 'increment' }, { name: 'decrement' }], onAccessibilityAction: (event) => {
+            if (event.nativeEvent.actionName === 'increment')
+                step(1);
+            if (event.nativeEvent.actionName === 'decrement')
+                step(-1);
+        }, ...(Platform.OS === 'web'
+            ? {
+                focusable: true,
+                onKeyDown: (event) => {
+                    if (event.nativeEvent.key === 'ArrowUp') {
+                        event.preventDefault();
+                        step(-1);
+                    }
+                    else if (event.nativeEvent.key === 'ArrowDown') {
+                        event.preventDefault();
+                        step(1);
+                    }
+                },
+            }
+            : null), className: cn('flex-1 overflow-hidden', focusRingInset), style: { height: WHEEL_HEIGHT, borderRadius: surfaceRadius(visual, 'lg') }, children: [_jsx(View, { pointerEvents: "none", className: "absolute left-0 right-0 bg-muted", style: {
+                    top: WHEEL_PADDING,
+                    height: ITEM_HEIGHT,
+                    borderRadius: surfaceRadius(visual, 'md'),
+                } }), _jsx(ScrollView, { ref: ref, showsVerticalScrollIndicator: false, snapToInterval: ITEM_HEIGHT, decelerationRate: "fast", nestedScrollEnabled: true, contentContainerStyle: { paddingVertical: WHEEL_PADDING }, contentOffset: { x: 0, y: index * ITEM_HEIGHT }, onMomentumScrollEnd: settle, onScrollEndDrag: Platform.OS === 'web' ? settle : undefined, importantForAccessibility: "no-hide-descendants", accessibilityElementsHidden: true, children: options.map((option) => {
+                    const on = option.value === selected;
+                    return (_jsx(Pressable, { onPress: () => onSelect(option.value), focusable: false, className: "items-center justify-center", style: { height: ITEM_HEIGHT }, children: _jsx(Text, { className: on ? 'font-medium text-foreground' : 'text-muted-foreground', style: {
+                                ...typographyStyle(visual, on ? 'title' : 'body'),
+                                color: on ? colors.foreground : colors.mutedForeground,
+                            }, children: option.label }) }, option.value));
+                }) })] }));
+}
+function TimePickerModalSession({ value, onValueChange, open, onOpenChange, minuteStep = 1, hourCycle: hourCycleProp, trigger, title = 'Select time', confirmLabel = 'Done', className, frosted = false, blurIntensity, blurTintToken, }) {
+    const insets = useSafeAreaInsets();
+    const colors = useThemeColors();
+    const visual = useVisualTokens();
+    const frostedSurface = useFrostedSurface({
+        frosted,
+        blurIntensity,
+        blurTintToken,
+        defaultTintToken: 'surfaceTranslucent',
+        defaultBlurPreset: 'medium',
+    });
+    const hourCycle = hourCycleProp ?? localeHourCycle();
+    const step = Math.min(30, Math.max(1, Math.round(minuteStep)));
+    // The draft opens on the current value, or on the current clock time rounded to the
+    // step, so the first confirm without touching anything records "now".
+    const initial = (() => {
+        const parsed = parseTime(value);
+        if (parsed)
+            return parsed;
+        const now = new Date();
+        return { hour: now.getHours(), minute: Math.floor(now.getMinutes() / step) * step };
+    })();
+    const [hour, setHour] = useState(initial.hour);
+    const [minute, setMinute] = useState(initial.minute);
+    const hours = hourCycle === 'h12'
+        ? Array.from({ length: 12 }, (_, i) => ({ value: i + 1, label: String(i + 1) }))
+        : Array.from({ length: 24 }, (_, i) => ({ value: i, label: pad2(i) }));
+    const minutes = Array.from({ length: Math.ceil(60 / step) }, (_, i) => ({
+        value: i * step,
+        label: pad2(i * step),
+    }));
+    const periods = [
+        { value: 0, label: 'AM' },
+        { value: 1, label: 'PM' },
+    ];
+    const period = hour >= 12 ? 1 : 0;
+    const hour12 = hour % 12 === 0 ? 12 : hour % 12;
+    const handleConfirm = useCallback(() => {
+        onValueChange?.(`${pad2(hour)}:${pad2(minute)}`);
+        onOpenChange(false);
+    }, [hour, minute, onOpenChange, onValueChange]);
+    const handleDismiss = useCallback(() => onOpenChange(false), [onOpenChange]);
+    const handleOpen = useCallback(() => onOpenChange(true), [onOpenChange]);
+    return (_jsxs(_Fragment, { children: [trigger ? (_jsx(Pressable, { accessibilityRole: "button", onPress: handleOpen, className: cn('w-full flex-row items-center border-border bg-muted', className), style: fieldRecipe(visual, 'default'), children: trigger })) : null, _jsx(Modal, { visible: open, transparent: true, animationType: "slide", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: handleDismiss, children: _jsx(Pressable, { accessible: false, importantForAccessibility: "no", className: "flex-1 justify-end", style: { backgroundColor: colors.overlay }, onPress: handleDismiss, children: _jsxs(Pressable, { accessible: false, className: cn('border border-border relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-background'), style: [
+                            {
+                                borderTopLeftRadius: surfaceRadius(visual, 'xl'),
+                                borderTopRightRadius: surfaceRadius(visual, 'xl'),
+                                paddingBottom: Math.max(insets.bottom, surfacePadding(visual, 'sm')),
+                            },
+                            frostedSurface.surfaceStyle,
+                        ], onPress: (e) => e.stopPropagation(), children: [frostedSurface.overlay, _jsxs(View, { className: "flex-row items-center justify-between border-b border-border", style: {
+                                    paddingHorizontal: surfacePadding(visual, 'sm'),
+                                    paddingVertical: visual.controlPaddingYDefault,
+                                }, children: [_jsx(Text, { accessibilityRole: "header", className: "font-medium text-foreground", style: typographyStyle(visual, 'body'), children: title }), _jsx(Button, { size: "sm", onPress: handleConfirm, children: _jsx(ButtonText, { children: confirmLabel }) })] }), _jsxs(View, { className: "flex-row items-center", style: { padding: surfacePadding(visual, 'sm'), gap: visual.controlPaddingYDefault }, children: [_jsx(Wheel, { label: "Hour", options: hours, selected: hourCycle === 'h12' ? hour12 : hour, onSelect: (next) => setHour(hourCycle === 'h12' ? (next % 12) + (period === 1 ? 12 : 0) : next) }), _jsx(Text, { className: "text-muted-foreground", style: typographyStyle(visual, 'title'), accessibilityElementsHidden: true, importantForAccessibility: "no", children: ":" }), _jsx(Wheel, { label: "Minute", options: minutes, selected: minute, onSelect: setMinute }), hourCycle === 'h12' ? (_jsx(Wheel, { label: "AM or PM", options: periods, selected: period, onSelect: (next) => setHour((hour % 12) + (next === 1 ? 12 : 0)) })) : null] })] }) }) })] }));
+}
+/**
+ * A time chosen on two wheels — three with AM/PM — in the same bottom sheet as
+ * `DatePickerModal`, so a form's date and time fields open the same way.
+ */
+export function TimePickerModal(props) {
+    // Remount per opening so the draft starts from the value each time, as the date
+    // picker does; a draft that outlives a cancel would reopen on the abandoned pick.
+    const sessionKey = props.open ? 'open' : 'closed';
+    return _jsx(TimePickerModalSession, { ...props }, sessionKey);
+}
+/** Compact trigger showing the formatted time. Use as TimePickerModal's trigger prop. */
+export function TimePickerTrigger({ value, placeholder = 'Select time', hourCycle, className, }) {
+    const visual = useVisualTokens();
+    return (_jsxs(View, { className: cn('flex-1 flex-row items-center min-w-0', className), children: [_jsx(Text, { className: cn('flex-1', value ? 'text-foreground' : 'text-muted-foreground'), style: typographyStyle(visual, 'body'), numberOfLines: 1, children: value ? formatDisplayTime(value, hourCycle) : placeholder }), _jsx(View, { className: "ml-2 shrink-0 h-2 w-2 rotate-45 border-b-2 border-r-2 border-muted-foreground" })] }));
+}
+export { formatDisplayTime, parseTime };

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 };