@thewhileloop/whileui 2.0.0 → 4.0.0

package/dist/blocks/navigation/drawer-menu.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { View, Pressable, Platform, Modal, I18nManager, ScrollView, useWindowDimensions, StyleSheet, } from 'react-native';
+import { View, Pressable, Platform, Modal, I18nManager, SectionList, useWindowDimensions, StyleSheet, } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, interpolate, } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Text } from '../../components/text';
@@ -12,43 +12,35 @@ import { shadowStyle, surfaceRadius } from '../../lib/recipes';
 import { useMotionPolicy } from '../../lib/motion-policy';
 import { useTapOnly } from '../../lib/tap-only';
 import { useFrostedSurface, useFrostedBackdrop, } from '../../lib/frosted-surface';
-export function DrawerMenu({ visible, onClose, sections, activeKey, onSelect, header, footer, maxWidth, className, style, frosted = false, blurIntensity, blurTintToken, }) {
-    const insets = useSafeAreaInsets();
-    const colors = useThemeColors();
-    const interaction = useInteractionTokens();
-    const visual = useVisualTokens();
-    const motion = useMotionPolicy();
-    const backdropPress = useTapOnly(onClose);
-    const frostedSurface = useFrostedSurface({
-        frosted,
-        blurIntensity,
-        blurTintToken,
-        defaultTintToken: 'surfaceTranslucent',
-        defaultBlurPreset: 'medium',
-    });
-    const frostedBackdrop = useFrostedBackdrop({
-        frosted,
-        blurIntensity: typeof blurIntensity === 'number' && Number.isFinite(blurIntensity)
-            ? blurIntensity * visual.frostedBackdropBlurScale
-            : undefined,
-        tintColor: colors.overlay,
-    });
-    const { width: screenWidth } = useWindowDimensions();
-    const rawWidth = screenWidth * visual.drawerWidthRatio;
-    const effectiveMaxWidth = maxWidth ?? (Platform.OS === 'web' ? visual.drawerMaxWidthWeb : undefined);
-    const drawerWidth = effectiveMaxWidth != null ? Math.min(rawWidth, effectiveMaxWidth) : rawWidth;
-    const frostedInset = frosted ? visual.drawerFrostedInset : 0;
-    const cornerRadius = frosted ? visual.drawerFrostedRadius : surfaceRadius(visual, 'xl');
-    const useFloatingFrostedDrawer = frosted && frostedInset > 0;
-    const contentTopPadding = insets.top + visual.drawerContentTopPadding;
+function DrawerItemRow({ item, active, onSelect, interaction, visual }) {
+    const handlePress = React.useCallback(() => onSelect(item.key), [item.key, onSelect]);
+    const pressStyle = React.useMemo(() => withInteractivePressableStyle({
+        borderRadius: visual.radiusLg,
+        paddingHorizontal: visual.controlPaddingXDefault,
+        paddingVertical: visual.controlPaddingYDefault,
+        minHeight: visual.touchTargetMinSize,
+    }, interaction, { pressedVariant: 'default' }), [interaction, visual]);
+    return (_jsxs(Pressable, { accessibilityRole: "button", onPress: handlePress, className: cn('flex-row items-center gap-3 mx-1 transition-colors', active && 'bg-primary-soft-subtle'), style: pressStyle, children: [item.icon, _jsx(Text, { className: cn('flex-1 font-semibold tracking-tight', item.destructive ? 'text-destructive' : active ? 'text-primary' : 'text-foreground'), style: { fontSize: visual.drawerItemFontSize }, children: item.label }), item.badge === undefined ? null : (_jsx(View, { className: "bg-primary px-2 py-0.5 items-center", style: { minWidth: visual.drawerBadgeMinWidth, borderRadius: visual.badgeRadius }, children: _jsx(Text, { className: "font-semibold text-primary-foreground", style: { fontSize: visual.navItemBadgeFontSize }, children: item.badge }) }))] }));
+}
+function DrawerSectionGap() {
+    return _jsx(View, { className: "mb-4" });
+}
+function DrawerItemGap() {
+    return _jsx(View, { className: "h-0.5" });
+}
+function DrawerSectionList({ sections, activeKey, onSelect, interaction, visual, }) {
+    const data = React.useMemo(() => sections.map((section) => ({ title: section.title, data: section.items })), [sections]);
+    const renderItem = React.useCallback(({ item }) => (_jsx(DrawerItemRow, { item: item, active: activeKey === item.key, onSelect: onSelect, interaction: interaction, visual: visual })), [activeKey, interaction, onSelect, visual]);
+    const renderSectionHeader = React.useCallback(({ section }) => section.title ? (_jsx(Text, { accessibilityRole: "header", className: "font-medium text-muted-foreground uppercase tracking-wide px-3 mb-2", style: { fontSize: visual.navSectionTitleFontSize }, children: section.title })) : null, [visual.navSectionTitleFontSize]);
+    return (_jsx(SectionList, { sections: data, keyExtractor: (item) => item.key, className: "flex-1 px-3", keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: false, renderSectionHeader: renderSectionHeader, renderSectionFooter: DrawerSectionGap, ItemSeparatorComponent: DrawerItemGap, renderItem: renderItem }));
+}
+function useDrawerAnimation({ visible, drawerWidth, interaction, motion }) {
     const progress = useSharedValue(0);
     const [mounted, setMounted] = React.useState(visible);
     const closeTimerRef = React.useRef(null);
-    // Mounting has to happen in the same commit that `visible` flips, or the drawer's
-    // entrance animation loses its first frame. React's documented way to do that is to
-    // adjust state during render on a props change rather than in an effect; the close
-    // path is the asymmetric one and stays below, on a timer, so the exit can finish.
     const [prevVisible, setPrevVisible] = React.useState(visible);
+    // Open in the prop-change render so the first animation frame has a mounted panel;
+    // closing stays mounted on the timer until the exit animation finishes.
     if (prevVisible !== visible) {
         setPrevVisible(visible);
         if (visible)
@@ -69,14 +61,10 @@ export function DrawerMenu({ visible, onClose, sections, activeKey, onSelect, he
         progress.value = withTiming(visible ? 1 : 0, {
             duration,
             reduceMotion: motion.reanimatedReduceMotion,
-            easing: visible
-                ? Easing.bezier(0.2, 0.8, 0.2, 1) // Swift, decelerating entrance
-                : Easing.bezier(0.4, 0, 1, 1), // Accelerating, sharp exit
+            easing: visible ? Easing.bezier(0.2, 0.8, 0.2, 1) : Easing.bezier(0.4, 0, 1, 1),
         });
         if (!visible) {
-            closeTimerRef.current = setTimeout(() => {
-                setMounted(false);
-            }, duration);
+            closeTimerRef.current = setTimeout(() => setMounted(false), duration);
         }
         return () => {
             if (closeTimerRef.current) {
@@ -98,8 +86,7 @@ export function DrawerMenu({ visible, onClose, sections, activeKey, onSelect, he
         opacity: progress.value,
         pointerEvents: progress.value > 0 ? 'auto' : 'none',
     }));
-    // React Native swaps `left` for `right` under RTL, so the panel already sits on the
-    // trailing edge; the translate has to start off-screen on that same side.
+    // RN mirrors the anchored edge in RTL, so the off-screen translation mirrors too.
     const offscreenX = I18nManager.isRTL ? drawerWidth : -drawerWidth;
     const drawerStyle = useAnimatedStyle(() => ({
         transform: [{ translateX: interpolate(progress.value, [0, 1], [offscreenX, 0]) }],
@@ -107,9 +94,57 @@ export function DrawerMenu({ visible, onClose, sections, activeKey, onSelect, he
     const containerStyle = useAnimatedStyle(() => ({
         pointerEvents: progress.value > 0 ? 'auto' : 'none',
     }));
-    const handleItemPress = (key) => {
+    return { mounted, backdropStyle, drawerStyle, containerStyle };
+}
+function resolveDrawerLayout(screenWidth, maxWidth, frosted, visual) {
+    const rawWidth = screenWidth * visual.drawerWidthRatio;
+    const effectiveMaxWidth = maxWidth ?? (Platform.OS === 'web' ? visual.drawerMaxWidthWeb : undefined);
+    const width = effectiveMaxWidth == null ? rawWidth : Math.min(rawWidth, effectiveMaxWidth);
+    const inset = frosted ? visual.drawerFrostedInset : 0;
+    const radius = frosted ? visual.drawerFrostedRadius : surfaceRadius(visual, 'xl');
+    return { width, inset, radius, floating: frosted && inset > 0 };
+}
+function resolveBackdropBlur(blurIntensity, scale) {
+    return typeof blurIntensity === 'number' && Number.isFinite(blurIntensity)
+        ? blurIntensity * scale
+        : undefined;
+}
+function drawerPanelClassName(frosted, className) {
+    return cn(frosted
+        ? 'border border-border relative overflow-hidden'
+        : 'border-r border-border relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-background', className);
+}
+export function DrawerMenu({ visible, onClose, sections, activeKey, onSelect, header, footer, maxWidth, className, style, frosted = false, blurIntensity, blurTintToken, }) {
+    const insets = useSafeAreaInsets();
+    const colors = useThemeColors();
+    const interaction = useInteractionTokens();
+    const visual = useVisualTokens();
+    const motion = useMotionPolicy();
+    const backdropPress = useTapOnly(onClose);
+    const frostedSurface = useFrostedSurface({
+        frosted,
+        blurIntensity,
+        blurTintToken,
+        defaultTintToken: 'surfaceTranslucent',
+        defaultBlurPreset: 'medium',
+    });
+    const frostedBackdrop = useFrostedBackdrop({
+        frosted,
+        blurIntensity: resolveBackdropBlur(blurIntensity, visual.frostedBackdropBlurScale),
+        tintColor: colors.overlay,
+    });
+    const { width: screenWidth } = useWindowDimensions();
+    const layout = resolveDrawerLayout(screenWidth, maxWidth, frosted, visual);
+    const contentTopPadding = insets.top + visual.drawerContentTopPadding;
+    const { mounted, backdropStyle, drawerStyle, containerStyle } = useDrawerAnimation({
+        visible,
+        drawerWidth: layout.width,
+        interaction,
+        motion,
+    });
+    const handleItemPress = React.useCallback((key) => {
         onSelect?.(key);
-    };
+    }, [onSelect]);
     if (!mounted)
         return null;
     const drawerTree = (_jsxs(Animated.View, { style: [StyleSheet.absoluteFill, containerStyle], children: [_jsxs(Animated.View, { style: [
@@ -119,39 +154,20 @@ export function DrawerMenu({ visible, onClose, sections, activeKey, onSelect, he
                 ], children: [frostedBackdrop, _jsx(Pressable, { accessible: false, importantForAccessibility: "no", style: StyleSheet.absoluteFill, ...backdropPress })] }), _jsxs(Animated.View, { style: [
                     {
                         position: 'absolute',
-                        top: frostedInset,
-                        bottom: frostedInset,
-                        left: frostedInset,
-                        width: Math.max(drawerWidth - frostedInset, 0),
-                        borderTopRightRadius: cornerRadius,
-                        borderBottomRightRadius: cornerRadius,
-                        borderTopLeftRadius: useFloatingFrostedDrawer ? cornerRadius : 0,
-                        borderBottomLeftRadius: useFloatingFrostedDrawer ? cornerRadius : 0,
+                        top: layout.inset,
+                        bottom: layout.inset,
+                        left: layout.inset,
+                        width: Math.max(layout.width - layout.inset, 0),
+                        borderTopRightRadius: layout.radius,
+                        borderBottomRightRadius: layout.radius,
+                        borderTopLeftRadius: layout.floating ? layout.radius : 0,
+                        borderBottomLeftRadius: layout.floating ? layout.radius : 0,
                     },
                     shadowStyle(visual, colors, frosted ? 'lg' : 'md'),
                     drawerStyle,
                     frostedSurface.surfaceStyle,
                     style,
-                ], className: cn(frosted
-                    ? 'border border-border relative overflow-hidden'
-                    : 'border-r border-border relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-background', className), children: [frostedSurface.overlay, _jsxs(View, { className: "flex-1 pb-8", style: { paddingTop: contentTopPadding }, children: [header && _jsx(View, { className: "px-5 pb-4 mb-2 border-b border-border", children: header }), _jsx(ScrollView, { className: "flex-1 px-3", keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: false, children: sections.map((section, sectionIndex) => (_jsxs(View, { className: "mb-4", children: [section.title && (_jsx(Text, { className: "font-medium text-muted-foreground uppercase tracking-wide px-3 mb-2", style: { fontSize: visual.navSectionTitleFontSize }, children: section.title })), _jsx(View, { className: "gap-0.5", children: section.items.map((item) => {
-                                                const isActive = activeKey === item.key;
-                                                return (_jsxs(Pressable, { accessibilityRole: "button", onPress: () => handleItemPress(item.key), className: cn('flex-row items-center gap-3 mx-1 transition-colors', isActive && 'bg-primary-soft-subtle'), style: withInteractivePressableStyle({
-                                                        borderRadius: visual.radiusLg,
-                                                        paddingHorizontal: visual.controlPaddingXDefault,
-                                                        paddingVertical: visual.controlPaddingYDefault,
-                                                        minHeight: visual.touchTargetMinSize,
-                                                    }, interaction, {
-                                                        pressedVariant: 'default',
-                                                    }), children: [item.icon, _jsx(Text, { className: cn('flex-1 font-semibold tracking-tight', item.destructive
-                                                                ? 'text-destructive'
-                                                                : isActive
-                                                                    ? 'text-primary'
-                                                                    : 'text-foreground'), style: { fontSize: visual.drawerItemFontSize }, children: item.label }), item.badge !== undefined && (_jsx(View, { className: "bg-primary px-2 py-0.5 items-center", style: {
-                                                                minWidth: visual.drawerBadgeMinWidth,
-                                                                borderRadius: visual.badgeRadius,
-                                                            }, children: _jsx(Text, { className: "font-semibold text-primary-foreground", style: { fontSize: visual.navItemBadgeFontSize }, children: item.badge }) }))] }, item.key));
-                                            }) })] }, sectionIndex))) }), footer && _jsx(View, { className: "px-5 py-4 mt-auto border-t border-border", children: footer })] })] })] }));
+                ], className: drawerPanelClassName(frosted, className), children: [frostedSurface.overlay, _jsxs(View, { className: "flex-1 pb-8", style: { paddingTop: contentTopPadding }, children: [header && _jsx(View, { className: "px-5 pb-4 mb-2 border-b border-border", children: header }), _jsx(DrawerSectionList, { sections: sections, activeKey: activeKey, onSelect: handleItemPress, interaction: interaction, visual: visual }), footer && _jsx(View, { className: "px-5 py-4 mt-auto border-t border-border", children: footer })] })] })] }));
     if (Platform.OS !== 'android')
         return drawerTree;
     return (_jsx(Modal, { visible: mounted, transparent: true, animationType: "none", onRequestClose: onClose, statusBarTranslucent: true, navigationBarTranslucent: true, presentationStyle: "overFullScreen", children: drawerTree }));

package/dist/components/alert/alert.d.ts

@@ -1,70 +1,38 @@
-import React from 'react';
-import { View, Text, type ViewProps, type TextProps } from 'react-native';
+import { type ViewInstance, type ViewProps, type TextInstance, type TextProps } from 'react-native';
 import { type VariantProps } from '../../lib/tv';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 declare const alertVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        destructive: string;
-        success: string;
-        warning: string;
-        info: string;
+        default: "border-border bg-background";
+        destructive: "border-destructive-soft-border bg-destructive-soft";
+        success: "border-success-soft-border bg-success-soft";
+        warning: "border-warning-soft-border bg-warning-soft";
+        info: "border-info-soft-border bg-info-soft";
     };
-}, undefined, "w-full border", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "w-full border", {
     variant: {
-        default: string;
-        destructive: string;
-        success: string;
-        warning: string;
-        info: string;
+        default: "border-border bg-background";
+        destructive: "border-destructive-soft-border bg-destructive-soft";
+        success: "border-success-soft-border bg-success-soft";
+        warning: "border-warning-soft-border bg-warning-soft";
+        info: "border-info-soft-border bg-info-soft";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        destructive: string;
-        success: string;
-        warning: string;
-        info: string;
+        default: "border-border bg-background";
+        destructive: "border-destructive-soft-border bg-destructive-soft";
+        success: "border-success-soft-border bg-success-soft";
+        warning: "border-warning-soft-border bg-warning-soft";
+        info: "border-info-soft-border bg-info-soft";
     };
-}>, {
-    variant: {
-        default: string;
-        destructive: string;
-        success: string;
-        warning: string;
-        info: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: string;
-        destructive: string;
-        success: string;
-        warning: string;
-        info: string;
-    };
-}, undefined, "w-full border", import("tailwind-variants/dist/config.js").TVConfig<{
-    variant: {
-        default: string;
-        destructive: string;
-        success: string;
-        warning: string;
-        info: string;
-    };
-}, {
-    variant: {
-        default: string;
-        destructive: string;
-        success: string;
-        warning: string;
-        info: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface AlertProps extends ViewProps, VariantProps<typeof alertVariants> {
 }
-declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<View>>;
+declare const Alert: ForwardRefComponent<ViewInstance, AlertProps>;
 export interface AlertTitleProps extends TextProps {
 }
-declare const AlertTitle: React.ForwardRefExoticComponent<AlertTitleProps & React.RefAttributes<Text>>;
+declare const AlertTitle: ForwardRefComponent<TextInstance, AlertTitleProps>;
 export interface AlertDescriptionProps extends TextProps {
 }
-declare const AlertDescription: React.ForwardRefExoticComponent<AlertDescriptionProps & React.RefAttributes<Text>>;
+declare const AlertDescription: ForwardRefComponent<TextInstance, AlertDescriptionProps>;
 export { Alert, AlertTitle, AlertDescription, alertVariants };

package/dist/components/alert/alert.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, } from 'react-native';
 import { cn } from '../../lib/cn';
 import { tv } from '../../lib/tv';
 import { useVisualTokens } from '../../lib/visual-tokens';

package/dist/components/alert-dialog/alert-dialog.js

@@ -229,10 +229,7 @@ function AlertDialogContent({ className, children, presentation = 'modal', frost
         if (!open) {
             return (_jsx(View, { pointerEvents: "none", style: nativeHiddenStyle, collapsable: false, importantForAccessibility: "no-hide-descendants", children: children }));
         }
-        return (_jsx(View, { pointerEvents: "box-none", style: [
-                StyleSheet.absoluteFill,
-                { zIndex: 100, elevation: Platform.OS === 'android' ? 24 : undefined },
-            ], children: themedBody }));
+        return (_jsx(View, { pointerEvents: "box-none", style: [StyleSheet.absoluteFill, { zIndex: 100 }], children: themedBody }));
     }
     return (_jsx(Modal, { visible: open, transparent: true, animationType: "fade", presentationStyle: Platform.OS === 'ios' ? 'overFullScreen' : undefined, statusBarTranslucent: Platform.OS === 'android', navigationBarTranslucent: Platform.OS === 'android', onRequestClose: () => setOpen(false), children: themedBody }));
 }

package/dist/components/avatar/avatar.d.ts

@@ -1,56 +1,29 @@
 import React from 'react';
-import { View, type ViewProps, type ImageProps } from 'react-native';
+import { type ViewInstance, type ViewProps, type ImageProps } from 'react-native';
 import { type VariantProps } from '../../lib/tv';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 declare const avatarVariants: import("tailwind-variants").TVReturnType<{
     size: {
-        default: string;
-        sm: string;
-        lg: string;
-        xl: string;
+        default: "h-10 w-10";
+        sm: "h-8 w-8";
+        lg: "h-12 w-12";
+        xl: "h-16 w-16";
     };
-}, undefined, "relative flex shrink-0 overflow-hidden rounded-full", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "relative flex shrink-0 overflow-hidden rounded-full", {
     size: {
-        default: string;
-        sm: string;
-        lg: string;
-        xl: string;
+        default: "h-10 w-10";
+        sm: "h-8 w-8";
+        lg: "h-12 w-12";
+        xl: "h-16 w-16";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
-        default: string;
-        sm: string;
-        lg: string;
-        xl: string;
+        default: "h-10 w-10";
+        sm: "h-8 w-8";
+        lg: "h-12 w-12";
+        xl: "h-16 w-16";
     };
-}>, {
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-        xl: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-        xl: string;
-    };
-}, undefined, "relative flex shrink-0 overflow-hidden rounded-full", import("tailwind-variants/dist/config.js").TVConfig<{
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-        xl: string;
-    };
-}, {
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-        xl: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface AvatarProps extends ViewProps, VariantProps<typeof avatarVariants> {
     className?: string;
 }
@@ -61,7 +34,7 @@ export interface AvatarImageProps extends Omit<ImageProps, 'style'> {
 export interface AvatarFallbackProps extends ViewProps {
     className?: string;
 }
-declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<View>>;
+declare const Avatar: ForwardRefComponent<ViewInstance, AvatarProps>;
 declare function AvatarImage({ className, onLoadingStatusChange, ...props }: AvatarImageProps): React.JSX.Element;
 declare namespace AvatarImage {
     var displayName: string;

package/dist/components/avatar/avatar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useMemo, useState } from 'react';
-import { View, Image, Text } from 'react-native';
+import { View, Image, Text, } from 'react-native';
 import { cn } from '../../lib/cn';
 import { tv } from '../../lib/tv';
 import { useVisualTokens } from '../../lib/visual-tokens';