@thewhileloop/whileui 1.2.3 → 2.0.0

package/dist/blocks/lists/timeline-feed.d.ts

@@ -13,6 +13,5 @@ export interface TimelineFeedProps extends ViewProps {
     items: TimelineItem[];
     showConnector?: boolean;
 }
-declare function TimelineFeed({ className, items, showConnector, ...props }: TimelineFeedProps): import("react/jsx-runtime").JSX.Element;
+declare function TimelineFeed({ className, items, showConnector, ...props }: TimelineFeedProps): React.JSX.Element;
 export { TimelineFeed };
-//# sourceMappingURL=timeline-feed.d.ts.map

package/dist/blocks/lists/timeline-feed.js

@@ -2,8 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { View, ScrollView } from 'react-native';
 import { Text } from '../../components/text';
 import { cn } from '../../lib/cn';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { surfacePadding } from '../../lib/recipes';
 function TimelineFeed({ className, items, showConnector = true, ...props }) {
-    return (_jsx(ScrollView, { className: cn('flex-1', className), ...props, children: _jsx(View, { className: "p-4", children: items.map((item, index) => (_jsxs(View, { className: "flex-row", children: [_jsxs(View, { className: "items-center mr-4", style: { minWidth: 16 }, children: [showConnector && index > 0 && _jsx(View, { className: "w-0.5 bg-border h-4" }), item.icon ? (_jsx(View, { className: "w-8 h-8 rounded-full bg-primary items-center justify-center shrink-0", children: item.icon })) : (_jsx(View, { className: "w-4 h-4 rounded-full bg-primary border-2 border-background shrink-0" })), showConnector && index < items.length - 1 && (_jsx(View, { className: "w-0.5 bg-border flex-1 min-h-4" }))] }), _jsxs(View, { className: cn('flex-1 pb-6', index === items.length - 1 && 'pb-0'), children: [_jsxs(View, { className: "flex-row items-center justify-between", children: [_jsx(Text, { variant: "body", className: "font-medium", children: item.title }), item.time && (_jsx(Text, { variant: "caption", className: "text-muted-foreground", children: item.time }))] }), item.subtitle && (_jsx(Text, { variant: "caption", className: "text-muted-foreground mt-1", children: item.subtitle })), item.content && _jsx(View, { className: "mt-2", children: item.content })] })] }, item.id))) }) }));
+    const visual = useVisualTokens();
+    return (_jsx(ScrollView, { className: cn('flex-1', className), ...props, children: _jsx(View, { style: { padding: surfacePadding(visual, 'sm') }, children: items.map((item, index) => (_jsxs(View, { className: "flex-row", children: [_jsxs(View, { className: "items-center mr-4", style: { minWidth: 16 }, children: [showConnector && index > 0 && _jsx(View, { className: "w-0.5 bg-border h-4" }), item.icon ? (_jsx(View, { className: "w-8 h-8 rounded-full bg-primary items-center justify-center shrink-0", children: item.icon })) : (_jsx(View, { className: "w-4 h-4 rounded-full bg-primary border-background shrink-0", style: { borderWidth: visual.borderWidthEmphasis } })), showConnector && index < items.length - 1 && (_jsx(View, { className: "w-0.5 bg-border flex-1 min-h-4" }))] }), _jsxs(View, { className: cn('flex-1 pb-6', index === items.length - 1 && 'pb-0'), children: [_jsxs(View, { className: "flex-row items-center justify-between", children: [_jsx(Text, { variant: "body", className: "font-medium", children: item.title }), item.time && (_jsx(Text, { variant: "caption", className: "text-muted-foreground", children: item.time }))] }), item.subtitle && (_jsx(Text, { variant: "caption", className: "text-muted-foreground mt-1", children: item.subtitle })), item.content && _jsx(View, { className: "mt-2", children: item.content })] })] }, item.id))) }) }));
 }
 export { TimelineFeed };
-//# sourceMappingURL=timeline-feed.js.map

package/dist/blocks/media/index.d.ts

@@ -1,2 +1 @@
 export { SmartImage, smartImageVariants, type SmartImageProps } from './smart-image';
-//# sourceMappingURL=index.d.ts.map

package/dist/blocks/media/index.js

@@ -1,2 +1 @@
 export { SmartImage, smartImageVariants } from './smart-image';
-//# sourceMappingURL=index.js.map

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

@@ -120,4 +120,3 @@ export interface SmartImageProps extends Omit<ViewProps, 'className'>, VariantPr
 }
 declare const SmartImage: React.ForwardRefExoticComponent<SmartImageProps & React.RefAttributes<View>>;
 export { SmartImage, smartImageVariants };
-//# sourceMappingURL=smart-image.d.ts.map

package/dist/blocks/media/smart-image.js

@@ -5,15 +5,16 @@ import { Image } from 'expo-image';
 import { Skeleton } from '../../components/skeleton';
 import { cn } from '../../lib/cn';
 import { tv } from '../../lib/tv';
+import { useVisualTokens } from '../../lib/visual-tokens';
 const smartImageVariants = tv({
     base: 'overflow-hidden',
     variants: {
         radius: {
-            none: 'rounded-none',
-            sm: 'rounded-sm',
-            md: 'rounded-md',
-            lg: 'rounded-lg',
-            xl: 'rounded-xl',
+            none: '',
+            sm: '',
+            md: '',
+            lg: '',
+            xl: '',
             full: 'rounded-full',
         },
         objectFit: {
@@ -28,9 +29,25 @@ const smartImageVariants = tv({
         objectFit: 'cover',
     },
 });
-const SmartImage = React.forwardRef(({ className, source, alt, skeleton = true, skeletonClassName, transition = 200, radius, objectFit, onLoad, onError, fallbackSource, ...props }, ref) => {
+const FULL_RADIUS = 9999;
+function resolveRadius(visual, radius) {
+    if (radius === 'none')
+        return 0;
+    if (radius === 'sm')
+        return visual.radiusSm;
+    if (radius === 'lg')
+        return visual.radiusLg;
+    if (radius === 'xl')
+        return visual.radiusXl;
+    if (radius === 'full')
+        return FULL_RADIUS;
+    return visual.radiusMd;
+}
+const SmartImage = React.forwardRef(({ className, source, alt, skeleton = true, skeletonClassName, transition = 200, radius, objectFit, onLoad, onError, fallbackSource, style, ...props }, ref) => {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(false);
+    const visual = useVisualTokens();
+    const borderRadius = resolveRadius(visual, radius ?? 'md');
     const handleLoad = () => {
         setLoading(false);
         onLoad?.();
@@ -41,8 +58,7 @@ const SmartImage = React.forwardRef(({ className, source, alt, skeleton = true,
         onError?.();
     };
     const imageSource = error && fallbackSource ? fallbackSource : source;
-    return (_jsxs(View, { ref: ref, className: cn(smartImageVariants({ radius, objectFit }), className), ...props, children: [skeleton && loading && (_jsx(Skeleton, { className: cn('absolute inset-0', radius === 'none' && 'rounded-none', radius === 'sm' && 'rounded-sm', radius === 'md' && 'rounded-md', radius === 'lg' && 'rounded-lg', radius === 'xl' && 'rounded-xl', radius === 'full' && 'rounded-full', skeletonClassName) })), _jsx(Image, { source: imageSource, alt: alt, transition: transition, onLoad: handleLoad, onError: handleError, className: cn('w-full h-full', objectFit === 'cover' && 'object-cover', objectFit === 'contain' && 'object-contain', objectFit === 'fill' && 'object-fill', objectFit === 'scale-down' && 'object-scale-down'), style: { opacity: loading && !error ? 0 : 1 } })] }));
+    return (_jsxs(View, { ref: ref, className: cn(smartImageVariants({ radius, objectFit }), className), style: [{ borderRadius }, style], ...props, children: [skeleton && loading && (_jsx(Skeleton, { className: cn('absolute inset-0', skeletonClassName) })), _jsx(Image, { source: imageSource, alt: alt, transition: transition, onLoad: handleLoad, onError: handleError, className: cn('w-full h-full', objectFit === 'cover' && 'object-cover', objectFit === 'contain' && 'object-contain', objectFit === 'fill' && 'object-fill', objectFit === 'scale-down' && 'object-scale-down'), style: { opacity: loading && !error ? 0 : 1 } })] }));
 });
 SmartImage.displayName = 'SmartImage';
 export { SmartImage, smartImageVariants };
-//# sourceMappingURL=smart-image.js.map

package/dist/blocks/navigation/bottom-nav.d.ts

@@ -15,5 +15,4 @@ export interface BottomNavItemProps extends Omit<PressableProps, 'children'> {
     item: BottomNavItem;
     isActive: boolean;
 }
-export declare function BottomNav({ items, activeKey, onSelect, className, ...props }: BottomNavProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=bottom-nav.d.ts.map
+export declare function BottomNav({ items, activeKey, onSelect, className, ...props }: BottomNavProps): React.JSX.Element;

package/dist/blocks/navigation/bottom-nav.js

@@ -4,7 +4,7 @@ import { Text } from '../../components/text';
 import { cn } from '../../lib/cn';
 import { useInteractionTokens, withInteractivePressableStyle } from '../../lib/interaction-tokens';
 import { useVisualTokens } from '../../lib/visual-tokens';
-// ─── Components ──────────────────────────────────────────────
+import { typographyStyle } from '../../lib/recipes';
 function BottomNavItemComponent({ item, isActive, className, style: styleProp, ...props }) {
     const { label, icon, badge } = item;
     const interaction = useInteractionTokens();
@@ -12,9 +12,12 @@ function BottomNavItemComponent({ item, isActive, className, style: styleProp, .
     const interactiveStyle = withInteractivePressableStyle(styleProp, interaction, {
         pressedVariant: 'default',
     });
-    return (_jsxs(Pressable, { className: cn('flex-1 items-center justify-center py-2', className), style: interactiveStyle, ...props, children: [_jsxs(View, { className: "relative", style: !isActive ? { opacity: interaction.inactiveOpacity } : undefined, children: [icon, badge !== undefined && badge > 0 && (_jsx(View, { className: "absolute -right-2 -top-1 h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1", children: _jsx(Text, { className: "font-bold text-destructive-foreground", style: { fontSize: visual.bottomNavBadgeFontSize }, children: badge > 99 ? '99+' : badge }) }))] }), _jsx(Text, { className: cn('mt-1 text-xs font-medium', isActive ? 'text-primary' : 'text-muted-foreground'), children: label })] }));
+    return (_jsxs(Pressable, { accessibilityRole: "tab", accessibilityState: { selected: isActive }, "aria-selected": isActive, className: cn('flex-1 items-center justify-center py-2', className), style: interactiveStyle, ...props, children: [_jsxs(View, { className: "relative", style: !isActive ? { opacity: interaction.inactiveOpacity } : undefined, children: [icon, badge !== undefined && badge > 0 && (_jsx(View, { className: "absolute -right-2 -top-1 h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1", children: _jsx(Text, { className: "font-bold text-destructive-foreground", style: { fontSize: visual.bottomNavBadgeFontSize }, children: badge > 99 ? '99+' : badge }) }))] }), _jsx(Text, { className: cn('mt-1 font-medium', isActive ? 'text-primary' : 'text-muted-foreground'), style: typographyStyle(visual, 'caption'), children: label })] }));
 }
 export function BottomNav({ items, activeKey, onSelect, className, ...props }) {
-    return (_jsx(View, { className: cn('flex-row border-t border-border bg-background px-2 pb-6 pt-2', className), ...props, children: items.map((item) => (_jsx(BottomNavItemComponent, { item: item, isActive: activeKey === item.key, onPress: () => onSelect(item.key) }, item.key))) }));
+    return (_jsx(View
+    // The items below are `tab`s, and ARIA requires a `tablist` parent for that role.
+    , { 
+        // The items below are `tab`s, and ARIA requires a `tablist` parent for that role.
+        accessibilityRole: "tablist", className: cn('flex-row border-t border-border bg-background px-2 pb-6 pt-2', className), ...props, children: items.map((item) => (_jsx(BottomNavItemComponent, { item: item, isActive: activeKey === item.key, onPress: () => onSelect(item.key) }, item.key))) }));
 }
-//# sourceMappingURL=bottom-nav.js.map

package/dist/blocks/navigation/drawer-menu.d.ts

@@ -25,5 +25,4 @@ export interface DrawerMenuProps extends FrostedSurfaceProps {
     className?: string;
     style?: StyleProp<ViewStyle>;
 }
-export declare function DrawerMenu({ visible, onClose, sections, activeKey, onSelect, header, footer, maxWidth, className, style, frosted, blurIntensity, blurTintToken, }: DrawerMenuProps): import("react/jsx-runtime").JSX.Element | null;
-//# sourceMappingURL=drawer-menu.d.ts.map
+export declare function DrawerMenu({ visible, onClose, sections, activeKey, onSelect, header, footer, maxWidth, className, style, frosted, blurIntensity, blurTintToken, }: DrawerMenuProps): React.JSX.Element | null;

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, useWindowDimensions, StyleSheet, } from 'react-native';
+import { View, Pressable, Platform, Modal, I18nManager, ScrollView, 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';
@@ -8,12 +8,17 @@ import { cn } from '../../lib/cn';
 import { useThemeColors } from '../../lib/theme-colors';
 import { useInteractionTokens, withInteractivePressableStyle } from '../../lib/interaction-tokens';
 import { useVisualTokens } from '../../lib/visual-tokens';
+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,
@@ -33,16 +38,22 @@ export function DrawerMenu({ visible, onClose, sections, activeKey, onSelect, he
     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 : 0;
+    const cornerRadius = frosted ? visual.drawerFrostedRadius : surfaceRadius(visual, 'xl');
     const useFloatingFrostedDrawer = frosted && frostedInset > 0;
     const contentTopPadding = insets.top + visual.drawerContentTopPadding;
     const progress = useSharedValue(0);
     const [mounted, setMounted] = React.useState(visible);
     const closeTimerRef = React.useRef(null);
-    React.useEffect(() => {
+    // 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);
+    if (prevVisible !== visible) {
+        setPrevVisible(visible);
         if (visible)
             setMounted(true);
-    }, [visible]);
+    }
     React.useEffect(() => {
         if (!mounted)
             return;
@@ -50,8 +61,14 @@ export function DrawerMenu({ visible, onClose, sections, activeKey, onSelect, he
             clearTimeout(closeTimerRef.current);
             closeTimerRef.current = null;
         }
+        const duration = motion.reduceMotion || !motion.animationsEnabled
+            ? 0
+            : visible
+                ? interaction.drawerOpenDuration
+                : interaction.drawerCloseDuration;
         progress.value = withTiming(visible ? 1 : 0, {
-            duration: visible ? interaction.drawerOpenDuration : interaction.drawerCloseDuration,
+            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
@@ -59,7 +76,7 @@ export function DrawerMenu({ visible, onClose, sections, activeKey, onSelect, he
         if (!visible) {
             closeTimerRef.current = setTimeout(() => {
                 setMounted(false);
-            }, interaction.drawerCloseDuration);
+            }, duration);
         }
         return () => {
             if (closeTimerRef.current) {
@@ -67,13 +84,25 @@ export function DrawerMenu({ visible, onClose, sections, activeKey, onSelect, he
                 closeTimerRef.current = null;
             }
         };
-    }, [mounted, visible, progress, interaction.drawerOpenDuration, interaction.drawerCloseDuration]);
+    }, [
+        mounted,
+        visible,
+        progress,
+        interaction.drawerOpenDuration,
+        interaction.drawerCloseDuration,
+        motion.animationsEnabled,
+        motion.reduceMotion,
+        motion.reanimatedReduceMotion,
+    ]);
     const backdropStyle = useAnimatedStyle(() => ({
         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.
+    const offscreenX = I18nManager.isRTL ? drawerWidth : -drawerWidth;
     const drawerStyle = useAnimatedStyle(() => ({
-        transform: [{ translateX: interpolate(progress.value, [0, 1], [-drawerWidth, 0]) }],
+        transform: [{ translateX: interpolate(progress.value, [0, 1], [offscreenX, 0]) }],
     }));
     const containerStyle = useAnimatedStyle(() => ({
         pointerEvents: progress.value > 0 ? 'auto' : 'none',
@@ -87,7 +116,7 @@ export function DrawerMenu({ visible, onClose, sections, activeKey, onSelect, he
                     StyleSheet.absoluteFill,
                     { backgroundColor: frosted ? 'transparent' : colors.overlayStrong },
                     backdropStyle,
-                ], children: [frostedBackdrop, _jsx(Pressable, { style: StyleSheet.absoluteFill, onPress: onClose })] }), _jsxs(Animated.View, { style: [
+                ], children: [frostedBackdrop, _jsx(Pressable, { accessible: false, importantForAccessibility: "no", style: StyleSheet.absoluteFill, ...backdropPress })] }), _jsxs(Animated.View, { style: [
                     {
                         position: 'absolute',
                         top: frostedInset,
@@ -99,23 +128,31 @@ export function DrawerMenu({ visible, onClose, sections, activeKey, onSelect, he
                         borderTopLeftRadius: useFloatingFrostedDrawer ? cornerRadius : 0,
                         borderBottomLeftRadius: useFloatingFrostedDrawer ? cornerRadius : 0,
                     },
+                    shadowStyle(visual, colors, frosted ? 'lg' : 'md'),
                     drawerStyle,
                     frostedSurface.surfaceStyle,
                     style,
                 ], className: cn(frosted
-                    ? 'border border-border shadow-xl relative overflow-hidden'
-                    : 'border-r border-border rounded-r-2xl shadow-lg 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(View, { className: "flex-1 px-3", 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) => {
+                    ? '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, { onPress: () => handleItemPress(item.key), className: cn('flex-row items-center gap-3 px-4 py-3 mx-1 rounded-xl transition-colors', isActive && 'bg-primary-soft-subtle'), style: withInteractivePressableStyle(undefined, interaction, {
+                                                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 rounded-full items-center", style: { minWidth: visual.drawerBadgeMinWidth }, children: _jsx(Text, { className: "font-semibold text-primary-foreground", style: { fontSize: visual.navItemBadgeFontSize }, children: item.badge }) }))] }, item.key));
+                                                                    : '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 })] })] })] }));
     if (Platform.OS !== 'android')
         return drawerTree;
-    return (_jsx(Modal, { visible: mounted, transparent: true, animationType: "none", onRequestClose: onClose, statusBarTranslucent: true, presentationStyle: "overFullScreen", children: drawerTree }));
+    return (_jsx(Modal, { visible: mounted, transparent: true, animationType: "none", onRequestClose: onClose, statusBarTranslucent: true, navigationBarTranslucent: true, presentationStyle: "overFullScreen", children: drawerTree }));
 }
-//# sourceMappingURL=drawer-menu.js.map

package/dist/blocks/navigation/floating-bottom-nav.d.ts

@@ -14,5 +14,4 @@ export interface FloatingBottomNavItemProps extends Omit<PressableProps, 'childr
     item: FloatingBottomNavItem;
     isActive: boolean;
 }
-export declare function FloatingBottomNav({ items, activeKey, onSelect, className, ...props }: FloatingBottomNavProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=floating-bottom-nav.d.ts.map
+export declare function FloatingBottomNav({ items, activeKey, onSelect, className, ...props }: FloatingBottomNavProps): React.JSX.Element;

package/dist/blocks/navigation/floating-bottom-nav.js

@@ -2,12 +2,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { View, Pressable } from 'react-native';
 import { Text } from '../../components/text';
 import { cn } from '../../lib/cn';
-// ─── Components ──────────────────────────────────────────────
-function FloatingNavItem({ item, isActive, className, ...props }) {
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { useThemeColors } from '../../lib/theme-colors';
+import { shadowStyle, surfaceRadius, typographyStyle } from '../../lib/recipes';
+function FloatingNavItem({ item, isActive, className, style: styleProp, ...props }) {
     const { label, icon } = item;
-    return (_jsxs(Pressable, { className: cn('flex-row items-center gap-2 rounded-full px-4 py-2 active:scale-95', isActive && 'bg-primary', className), ...props, children: [_jsx(View, { className: cn(isActive ? 'text-primary-foreground' : 'text-muted-foreground'), children: icon }), isActive && _jsx(Text, { className: "text-sm font-semibold text-primary-foreground", children: label })] }));
+    const visual = useVisualTokens();
+    const pillStyle = {
+        borderRadius: visual.badgeRadius,
+        paddingHorizontal: visual.controlPaddingXDefault,
+        paddingVertical: visual.controlPaddingYSm,
+    };
+    return (_jsxs(Pressable, { accessibilityRole: "tab", accessibilityState: { selected: isActive }, "aria-selected": isActive, className: cn('flex-row items-center gap-2 active:scale-95', isActive && 'bg-primary', className), style: (state) => [pillStyle, typeof styleProp === 'function' ? styleProp(state) : styleProp], ...props, children: [_jsx(View, { className: cn(isActive ? 'text-primary-foreground' : 'text-muted-foreground'), children: icon }), isActive && (_jsx(Text, { className: "font-semibold text-primary-foreground", style: typographyStyle(visual, 'label'), children: label }))] }));
 }
 export function FloatingBottomNav({ items, activeKey, onSelect, className, ...props }) {
-    return (_jsx(View, { className: cn('items-center pb-8', className), ...props, children: _jsx(View, { className: "flex-row items-center gap-1 rounded-full bg-card p-1.5 shadow-lg", children: items.map((item) => (_jsx(FloatingNavItem, { item: item, isActive: activeKey === item.key, onPress: () => onSelect(item.key) }, item.key))) }) }));
+    const visual = useVisualTokens();
+    const colors = useThemeColors();
+    return (_jsx(View, { className: cn('items-center pb-8', className), ...props, children: _jsx(View, { accessibilityRole: "tablist", className: "flex-row items-center gap-1 bg-card p-1.5", style: [{ borderRadius: surfaceRadius(visual, 'xl') }, shadowStyle(visual, colors, 'md')], children: items.map((item) => (_jsx(FloatingNavItem, { item: item, isActive: activeKey === item.key, onPress: () => onSelect(item.key) }, item.key))) }) }));
 }
-//# sourceMappingURL=floating-bottom-nav.js.map

package/dist/blocks/navigation/header.d.ts

@@ -14,10 +14,9 @@ export interface HeaderProps extends ViewProps {
     transparent?: boolean;
     border?: boolean;
 }
-export declare function Header({ title, subtitle, leftAction, rightActions, centerContent, transparent, border, className, ...props }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ title, subtitle, leftAction, rightActions, centerContent, transparent, border, className, style, ...props }: HeaderProps): React.JSX.Element;
 export interface HeaderBackButtonProps extends Omit<PressableProps, 'children'> {
     icon?: React.ReactNode;
     label?: string;
 }
-export declare function HeaderBackButton({ icon, label, className, style: styleProp, ...props }: HeaderBackButtonProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=header.d.ts.map
+export declare function HeaderBackButton({ icon, label, className, style: styleProp, ...props }: HeaderBackButtonProps): React.JSX.Element;

package/dist/blocks/navigation/header.js

@@ -3,19 +3,27 @@ import { View, Pressable } from 'react-native';
 import { Text } from '../../components/text';
 import { cn } from '../../lib/cn';
 import { useInteractionTokens, withInteractivePressableStyle } from '../../lib/interaction-tokens';
-// ─── Component ───────────────────────────────────────────────
-export function Header({ title, subtitle, leftAction, rightActions, centerContent, transparent = false, border = true, className, ...props }) {
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { typographyStyle } from '../../lib/recipes';
+export function Header({ title, subtitle, leftAction, rightActions, centerContent, transparent = false, border = true, className, style, ...props }) {
     const interaction = useInteractionTokens();
-    return (_jsxs(View, { className: cn('flex-row items-center px-4 py-3', !transparent && 'bg-background', border && 'border-b border-border', className), ...props, children: [_jsx(View, { className: "min-w-12", children: leftAction }), _jsx(View, { className: "flex-1 items-center", children: centerContent || (_jsxs(View, { className: "items-center", children: [title && (_jsx(Text, { className: "text-base font-semibold text-foreground", numberOfLines: 1, children: title })), subtitle && (_jsx(Text, { className: "text-xs text-muted-foreground", numberOfLines: 1, children: subtitle }))] })) }), _jsx(View, { className: "min-w-12 flex-row items-center justify-end gap-2", children: rightActions?.map((action) => (_jsx(Pressable, { onPress: action.onPress, className: "rounded-full p-2 active:bg-accent", style: withInteractivePressableStyle(undefined, interaction, {
+    const visual = useVisualTokens();
+    return (_jsxs(View, { className: cn('flex-row items-center', !transparent && 'bg-background', border && 'border-b border-border', className), style: [
+            {
+                paddingHorizontal: visual.controlPaddingXDefault,
+                paddingVertical: visual.controlPaddingYDefault,
+            },
+            style,
+        ], ...props, children: [_jsx(View, { className: "min-w-12", children: leftAction }), _jsx(View, { className: "flex-1 items-center", children: centerContent || (_jsxs(View, { className: "items-center", children: [title && (_jsx(Text, { className: "font-semibold text-foreground", style: typographyStyle(visual, 'body'), numberOfLines: 1, children: title })), subtitle && (_jsx(Text, { className: "text-muted-foreground", style: typographyStyle(visual, 'caption'), numberOfLines: 1, children: subtitle }))] })) }), _jsx(View, { className: "min-w-12 flex-row items-center justify-end gap-2", children: rightActions?.map((action) => (_jsx(Pressable, { accessibilityRole: "button", onPress: action.onPress, className: "rounded-full p-2 active:bg-accent", style: withInteractivePressableStyle(undefined, interaction, {
                         pressedVariant: 'default',
                     }), children: action.icon }, action.key))) })] }));
 }
 export function HeaderBackButton({ icon, label, className, style: styleProp, ...props }) {
     const interaction = useInteractionTokens();
+    const visual = useVisualTokens();
     const interactiveStyle = withInteractivePressableStyle(styleProp, interaction, {
         disabled: Boolean(props.disabled),
         pressedVariant: 'default',
     });
-    return (_jsxs(Pressable, { className: cn('flex-row items-center gap-1 rounded-full py-1', className), style: interactiveStyle, ...props, children: [icon || _jsx(Text, { className: "text-xl text-primary", children: "\u2039" }), label && _jsx(Text, { className: "text-base text-primary", children: label })] }));
+    return (_jsxs(Pressable, { className: cn('flex-row items-center gap-1 rounded-full py-1', className), style: interactiveStyle, ...props, children: [icon || (_jsx(Text, { className: "text-primary", style: typographyStyle(visual, 'title'), children: "\u2039" })), label && (_jsx(Text, { className: "text-primary", style: typographyStyle(visual, 'body'), children: label }))] }));
 }
-//# sourceMappingURL=header.js.map

package/dist/blocks/navigation/index.d.ts

@@ -3,5 +3,3 @@ export { FloatingBottomNav, type FloatingBottomNavItem, type FloatingBottomNavPr
 export { Header, HeaderBackButton, type HeaderAction, type HeaderBackButtonProps, type HeaderProps, } from './header';
 export { TabBar, type TabBarItem, type TabBarProps } from './tab-bar';
 export { DrawerMenu, type DrawerMenuItem, type DrawerMenuSection, type DrawerMenuProps, } from './drawer-menu';
-export { NavigationSidebar, type NavigationSidebarItem, type NavigationSidebarSection, type NavigationSidebarProps, } from './navigation-sidebar';
-//# sourceMappingURL=index.d.ts.map

package/dist/blocks/navigation/index.js

@@ -3,5 +3,3 @@ export { FloatingBottomNav, } from './floating-bottom-nav';
 export { Header, HeaderBackButton, } from './header';
 export { TabBar } from './tab-bar';
 export { DrawerMenu, } from './drawer-menu';
-export { NavigationSidebar, } from './navigation-sidebar';
-//# sourceMappingURL=index.js.map

package/dist/blocks/navigation/tab-bar.d.ts

@@ -17,5 +17,4 @@ export interface TabBarItemProps extends Omit<PressableProps, 'children'> {
     isActive: boolean;
     variant: 'default' | 'pills' | 'underline';
 }
-export declare function TabBar({ items, activeKey, onSelect, variant, scrollable, className, ...props }: TabBarProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=tab-bar.d.ts.map
+export declare function TabBar({ items, activeKey, onSelect, variant, scrollable, className, style, ...props }: TabBarProps): React.JSX.Element;

package/dist/blocks/navigation/tab-bar.js

@@ -3,32 +3,44 @@ import { View, Pressable, ScrollView } from 'react-native';
 import { Text } from '../../components/text';
 import { cn } from '../../lib/cn';
 import { useInteractionTokens, withInteractivePressableStyle } from '../../lib/interaction-tokens';
-// ─── Components ──────────────────────────────────────────────
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { typographyStyle } from '../../lib/recipes';
 function TabBarItemComponent({ item, isActive, variant, className, style: styleProp, ...props }) {
     const { label, icon } = item;
     const interaction = useInteractionTokens();
+    const visual = useVisualTokens();
+    const showUnderline = variant === 'default' || (variant === 'underline' && isActive);
+    const tokenStyle = {
+        paddingHorizontal: visual.controlPaddingXDefault,
+        paddingVertical: visual.controlPaddingYSm,
+        ...(variant === 'pills' ? { borderRadius: visual.badgeRadius } : null),
+        ...(showUnderline ? { borderBottomWidth: visual.borderWidthEmphasis } : null),
+    };
     const interactiveStyle = withInteractivePressableStyle(styleProp, interaction, {
         disabled: Boolean(props.disabled),
         pressedVariant: 'default',
     });
-    const baseStyles = 'flex-row items-center justify-center gap-2 px-4 py-2';
+    const baseStyles = 'flex-row items-center justify-center gap-2';
     const variantStyles = {
-        default: isActive ? 'border-b-2 border-primary' : 'border-b-2 border-transparent',
-        pills: isActive ? 'bg-primary rounded-full' : 'rounded-full',
-        underline: isActive ? 'border-b-2 border-primary' : '',
+        default: isActive ? 'border-primary' : 'border-transparent',
+        pills: isActive ? 'bg-primary' : '',
+        underline: isActive ? 'border-primary' : '',
     };
     const textStyles = {
         default: isActive ? 'text-primary font-medium' : 'text-muted-foreground font-medium',
         pills: isActive ? 'text-primary-foreground font-medium' : 'text-muted-foreground font-medium',
         underline: isActive ? 'text-foreground font-medium' : 'text-muted-foreground font-medium',
     };
-    return (_jsxs(Pressable, { className: cn(baseStyles, variantStyles[variant], className), style: interactiveStyle, ...props, children: [icon && (_jsx(View, { className: isActive && variant === 'pills' ? 'text-primary-foreground' : '', children: icon })), _jsx(Text, { className: cn('text-sm', textStyles[variant]), children: label })] }));
+    return (_jsxs(Pressable, { accessibilityRole: "tab", accessibilityState: { selected: isActive }, "aria-selected": isActive, className: cn(baseStyles, variantStyles[variant], className), style: (state) => [
+            tokenStyle,
+            typeof interactiveStyle === 'function' ? interactiveStyle(state) : interactiveStyle,
+        ], ...props, children: [icon && (_jsx(View, { className: isActive && variant === 'pills' ? 'text-primary-foreground' : '', children: icon })), _jsx(Text, { className: cn(textStyles[variant]), style: typographyStyle(visual, 'label'), children: label })] }));
 }
-export function TabBar({ items, activeKey, onSelect, variant = 'default', scrollable = false, className, ...props }) {
-    const content = (_jsx(View, { className: cn('flex-row', variant === 'pills' && 'gap-1 rounded-full bg-muted p-1', variant === 'default' && 'border-b border-border', !scrollable && 'justify-around', className), ...props, children: items.map((item) => (_jsx(TabBarItemComponent, { item: item, isActive: activeKey === item.key, variant: variant, onPress: () => onSelect(item.key) }, item.key))) }));
+export function TabBar({ items, activeKey, onSelect, variant = 'default', scrollable = false, className, style, ...props }) {
+    const visual = useVisualTokens();
+    const content = (_jsx(View, { accessibilityRole: "tablist", className: cn('flex-row', variant === 'pills' && 'gap-1 bg-muted p-1', variant === 'default' && 'border-b border-border', !scrollable && 'justify-around', className), style: [variant === 'pills' ? { borderRadius: visual.badgeRadius } : null, style], ...props, children: items.map((item) => (_jsx(TabBarItemComponent, { item: item, isActive: activeKey === item.key, variant: variant, onPress: () => onSelect(item.key) }, item.key))) }));
     if (scrollable) {
-        return (_jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: { paddingHorizontal: 16 }, children: content }));
+        return (_jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: { paddingHorizontal: visual.surfacePaddingSm }, children: content }));
     }
     return content;
 }
-//# sourceMappingURL=tab-bar.js.map

package/dist/blocks/splash/index.d.ts

@@ -1,2 +1 @@
 export { SplashScreen, MinimalSplash, BrandedSplash, type SplashScreenProps, type MinimalSplashProps, type BrandedSplashProps, } from './splash-screen';
-//# sourceMappingURL=index.d.ts.map

package/dist/blocks/splash/index.js

@@ -1,2 +1 @@
 export { SplashScreen, MinimalSplash, BrandedSplash, } from './splash-screen';
-//# sourceMappingURL=index.js.map

package/dist/blocks/splash/splash-screen.d.ts

@@ -17,13 +17,12 @@ export interface SplashScreenProps extends ViewProps {
     /** Loading text */
     loadingText?: string;
 }
-export declare function SplashScreen({ appName, tagline, logo, variant, duration, onAnimationComplete, showLoading, loadingText, className, ...props }: SplashScreenProps): import("react/jsx-runtime").JSX.Element;
+export declare function SplashScreen({ appName, tagline, logo, variant, duration, onAnimationComplete, showLoading, loadingText, className, ...props }: SplashScreenProps): import("react").JSX.Element;
 export interface MinimalSplashProps extends Omit<SplashScreenProps, 'variant'> {
 }
 /** Minimal splash with just logo and name */
-export declare function MinimalSplash(props: MinimalSplashProps): import("react/jsx-runtime").JSX.Element;
+export declare function MinimalSplash(props: MinimalSplashProps): import("react").JSX.Element;
 export interface BrandedSplashProps extends Omit<SplashScreenProps, 'variant' | 'showLoading'> {
 }
 /** Branded splash with scale animation and loading */
-export declare function BrandedSplash(props: BrandedSplashProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=splash-screen.d.ts.map
+export declare function BrandedSplash(props: BrandedSplashProps): import("react").JSX.Element;

package/dist/blocks/splash/splash-screen.js

@@ -4,31 +4,29 @@ import { View } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, withDelay, withRepeat, withSequence, Easing, } from 'react-native-reanimated';
 import { Text } from '../../components/text';
 import { cn } from '../../lib/cn';
-// ─── Animated Components ─────────────────────────────────────
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { typographyStyle } from '../../lib/recipes';
 const AnimatedView = Animated.createAnimatedComponent(View);
-// ─── Loading Dot Component ───────────────────────────────────
 function LoadingDot({ delay }) {
     const scale = useSharedValue(0.6);
     const opacity = useSharedValue(0.3);
     useEffect(() => {
         scale.value = withDelay(delay, withRepeat(withSequence(withTiming(1, { duration: 400, easing: Easing.out(Easing.cubic) }), withTiming(0.6, { duration: 400, easing: Easing.in(Easing.cubic) })), -1, false));
         opacity.value = withDelay(delay, withRepeat(withSequence(withTiming(1, { duration: 400, easing: Easing.out(Easing.cubic) }), withTiming(0.3, { duration: 400, easing: Easing.in(Easing.cubic) })), -1, false));
-    }, [delay]);
+    }, [delay, opacity, scale]);
     const animatedStyle = useAnimatedStyle(() => ({
         transform: [{ scale: scale.value }],
         opacity: opacity.value,
     }));
     return (_jsx(AnimatedView, { style: animatedStyle, className: "h-2 w-2 rounded-full bg-muted-foreground" }));
 }
-// ─── Component ───────────────────────────────────────────────
 export function SplashScreen({ appName, tagline, logo, variant = 'scale', duration = 800, onAnimationComplete, showLoading = false, loadingText, className, ...props }) {
-    // Animation values
+    const visual = useVisualTokens();
     const opacity = useSharedValue(0);
     const scale = useSharedValue(variant === 'scale' ? 0.8 : 1);
     const translateY = useSharedValue(variant === 'slide' ? 30 : 0);
     const loadingOpacity = useSharedValue(0);
     useEffect(() => {
-        // Main content animation
         opacity.value = withTiming(1, {
             duration: duration * 0.6,
             easing: Easing.out(Easing.cubic),
@@ -45,16 +43,23 @@ export function SplashScreen({ appName, tagline, logo, variant = 'scale', durati
                 easing: Easing.out(Easing.cubic),
             });
         }
-        // Loading indicator fade in
         if (showLoading) {
             loadingOpacity.value = withDelay(duration * 0.5, withTiming(1, { duration: 400 }));
         }
-        // Callback after animation
         if (onAnimationComplete) {
             const timer = setTimeout(onAnimationComplete, duration);
             return () => clearTimeout(timer);
         }
-    }, [variant, duration, showLoading, onAnimationComplete]);
+    }, [
+        duration,
+        loadingOpacity,
+        onAnimationComplete,
+        opacity,
+        scale,
+        showLoading,
+        translateY,
+        variant,
+    ]);
     const containerStyle = useAnimatedStyle(() => ({
         opacity: opacity.value,
         transform: [{ scale: scale.value }, { translateY: translateY.value }],
@@ -62,7 +67,7 @@ export function SplashScreen({ appName, tagline, logo, variant = 'scale', durati
     const loadingStyle = useAnimatedStyle(() => ({
         opacity: loadingOpacity.value,
     }));
-    return (_jsxs(View, { className: cn('flex-1 items-center justify-center bg-background', className), ...props, children: [_jsxs(AnimatedView, { style: containerStyle, className: "items-center", children: [logo && _jsx(View, { className: "mb-6", children: logo }), appName && (_jsx(Text, { className: "text-4xl font-bold text-foreground tracking-tight", children: appName })), tagline && (_jsx(Text, { className: "mt-2 text-base text-muted-foreground text-center px-8", children: tagline }))] }), showLoading && (_jsxs(AnimatedView, { style: loadingStyle, className: "absolute bottom-20 items-center", children: [_jsxs(View, { className: "flex-row items-center gap-2", children: [_jsx(LoadingDot, { delay: 0 }), _jsx(LoadingDot, { delay: 150 }), _jsx(LoadingDot, { delay: 300 })] }), loadingText && _jsx(Text, { className: "mt-3 text-sm text-muted-foreground", children: loadingText })] }))] }));
+    return (_jsxs(View, { className: cn('flex-1 items-center justify-center bg-background', className), ...props, children: [_jsxs(AnimatedView, { style: containerStyle, className: "items-center", children: [logo && _jsx(View, { className: "mb-6", children: logo }), appName && (_jsx(Text, { className: "text-4xl font-bold text-foreground tracking-tight", children: appName })), tagline && (_jsx(Text, { className: "mt-2 text-muted-foreground text-center px-8", style: typographyStyle(visual, 'body'), children: tagline }))] }), showLoading && (_jsxs(AnimatedView, { style: loadingStyle, className: "absolute bottom-20 items-center", children: [_jsxs(View, { className: "flex-row items-center gap-2", children: [_jsx(LoadingDot, { delay: 0 }), _jsx(LoadingDot, { delay: 150 }), _jsx(LoadingDot, { delay: 300 })] }), loadingText && (_jsx(Text, { className: "mt-3 text-muted-foreground", style: typographyStyle(visual, 'label'), children: loadingText }))] }))] }));
 }
 /** Minimal splash with just logo and name */
 export function MinimalSplash(props) {
@@ -72,4 +77,3 @@ export function MinimalSplash(props) {
 export function BrandedSplash(props) {
     return _jsx(SplashScreen, { variant: "scale", showLoading: true, ...props });
 }
-//# sourceMappingURL=splash-screen.js.map

package/dist/components/accordion/accordion.d.ts

@@ -18,21 +18,20 @@ export interface AccordionTriggerProps extends Omit<PressableProps, 'children'>
 export interface AccordionContentProps extends ViewProps {
     className?: string;
 }
-declare function Accordion({ type, defaultValue, collapsible, className, children, ...props }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+declare function Accordion({ type, defaultValue, collapsible, className, children, ...props }: AccordionProps): React.JSX.Element;
 declare namespace Accordion {
     var displayName: string;
 }
-declare function AccordionItem({ value, className, children, ...props }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+declare function AccordionItem({ value, className, children, ...props }: AccordionItemProps): React.JSX.Element;
 declare namespace AccordionItem {
     var displayName: string;
 }
-declare function AccordionTrigger({ className, children, style: styleProp, ...props }: AccordionTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function AccordionTrigger({ className, children, style: styleProp, ...props }: AccordionTriggerProps): React.JSX.Element;
 declare namespace AccordionTrigger {
     var displayName: string;
 }
-declare function AccordionContent({ className, children, ...props }: AccordionContentProps): import("react/jsx-runtime").JSX.Element | null;
+declare function AccordionContent({ className, children, ...props }: AccordionContentProps): React.JSX.Element | null;
 declare namespace AccordionContent {
     var displayName: string;
 }
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
-//# sourceMappingURL=accordion.d.ts.map