@thewhileloop/whileui 1.2.3 → 3.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, 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';
@@ -8,41 +8,44 @@ 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 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 : 0;
-    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);
-    React.useEffect(() => {
+    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)
             setMounted(true);
-    }, [visible]);
+    }
     React.useEffect(() => {
         if (!mounted)
             return;
@@ -50,16 +53,18 @@ 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,
-            easing: visible
-                ? Easing.bezier(0.2, 0.8, 0.2, 1) // Swift, decelerating entrance
-                : Easing.bezier(0.4, 0, 1, 1), // Accelerating, sharp exit
+            duration,
+            reduceMotion: motion.reanimatedReduceMotion,
+            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);
-            }, interaction.drawerCloseDuration);
+            closeTimerRef.current = setTimeout(() => setMounted(false), duration);
         }
         return () => {
             if (closeTimerRef.current) {
@@ -67,55 +72,103 @@ 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',
     }));
+    // 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], [-drawerWidth, 0]) }],
+        transform: [{ translateX: interpolate(progress.value, [0, 1], [offscreenX, 0]) }],
     }));
     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: [
                     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,
-                        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 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) => {
-                                                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, {
-                                                        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));
-                                            }) })] }, 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, 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

package/dist/components/accordion/accordion.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { createContext, useContext, useState, useCallback } from 'react';
+import React, { createContext, useContext, useState, useCallback, useMemo } from 'react';
 import { View, Pressable } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, } from 'react-native-reanimated';
 import { cn } from '../../lib/cn';
@@ -14,7 +14,6 @@ const AccordionItemContext = createContext({
     value: '',
     isOpen: false,
 });
-// ─── Components ──────────────────────────────────────────────
 function Accordion({ type = 'single', defaultValue, collapsible = true, className, children, ...props }) {
     const [value, setValue] = useState(() => {
         if (!defaultValue)
@@ -35,12 +34,14 @@ function Accordion({ type = 'single', defaultValue, collapsible = true, classNam
             return [...prev, itemValue];
         });
     }, [type, collapsible]);
-    return (_jsx(AccordionContext.Provider, { value: { type, value, onValueChange, collapsible }, children: _jsx(View, { className: cn('w-full', className), ...props, children: children }) }));
+    const contextValue = useMemo(() => ({ type, value, onValueChange, collapsible }), [collapsible, onValueChange, type, value]);
+    return (_jsx(AccordionContext.Provider, { value: contextValue, children: _jsx(View, { className: cn('w-full', className), ...props, children: children }) }));
 }
 function AccordionItem({ value, className, children, ...props }) {
     const { value: selectedValues } = useContext(AccordionContext);
     const isOpen = selectedValues.includes(value);
-    return (_jsx(AccordionItemContext.Provider, { value: { value, isOpen }, children: _jsx(View, { className: cn('border-b border-border', className), ...props, children: children }) }));
+    const contextValue = useMemo(() => ({ value, isOpen }), [isOpen, value]);
+    return (_jsx(AccordionItemContext.Provider, { value: contextValue, children: _jsx(View, { className: cn('border-b border-border', className), ...props, children: children }) }));
 }
 function AccordionTrigger({ className, children, style: styleProp, ...props }) {
     const { onValueChange } = useContext(AccordionContext);
@@ -49,7 +50,7 @@ function AccordionTrigger({ className, children, style: styleProp, ...props }) {
     const interactiveStyle = withInteractivePressableStyle(styleProp, interaction, {
         pressedVariant: 'default',
     });
-    return (_jsxs(Pressable, { className: cn('flex flex-row items-center justify-between py-4', className), onPress: () => onValueChange(value), style: interactiveStyle, ...props, children: [children, _jsx(View, { className: cn('border-foreground h-2 w-2 rotate-45 border-b-2 border-r-2 transition-transform', isOpen && 'rotate-[225deg]') })] }));
+    return (_jsxs(Pressable, { accessibilityRole: "button", className: cn('flex flex-row items-center justify-between py-4', className), onPress: () => onValueChange(value), style: interactiveStyle, ...props, children: [children, _jsx(View, { className: cn('border-foreground h-2 w-2 rotate-45 border-b-2 border-r-2 transition-transform', isOpen && 'rotate-[225deg]') })] }));
 }
 function AccordionContent({ className, children, ...props }) {
     const { isOpen } = useContext(AccordionItemContext);
@@ -72,6 +73,4 @@ Accordion.displayName = 'Accordion';
 AccordionItem.displayName = 'AccordionItem';
 AccordionTrigger.displayName = 'AccordionTrigger';
 AccordionContent.displayName = 'AccordionContent';
-// ─── Exports ─────────────────────────────────────────────────
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
-//# sourceMappingURL=accordion.js.map

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

@@ -1,2 +1 @@
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, type AccordionProps, type AccordionItemProps, type AccordionTriggerProps, type AccordionContentProps, } from './accordion';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/accordion/index.js

@@ -1,2 +1 @@
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, } from './accordion';
-//# sourceMappingURL=index.js.map