@thewhileloop/whileui 1.2.2 → 2.0.0

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

@@ -1,20 +1,132 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { View, TextInput, KeyboardAvoidingView, Platform } from 'react-native';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { AccessibilityInfo, View, TextInput } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { cn } from '../../lib/cn';
+import { focusRing } from '../../lib/focus-ring';
 import { useThemeColors } from '../../lib/theme-colors';
 import { useInteractionTokens } from '../../lib/interaction-tokens';
 import { useVisualTokens } from '../../lib/visual-tokens';
-export const SmartInput = forwardRef(function SmartInput({ leftSlot, centerSlot, rightSlot, variant = 'bar', className, inputClassName, submitBehavior = 'newline', safeArea = true, placeholderTextColor, editable = true, ...props }, ref) {
+import { controlRecipe, shadowStyle, surfaceRadius, typographyStyle } from '../../lib/recipes';
+// The examples list is joined into one string so it can be an effect dependency without
+// re-running on every render. A NUL byte cannot appear in a placeholder.
+const SEPARATOR = '\0';
+function useReducedMotion() {
+    const [reduceMotion, setReduceMotion] = useState(false);
+    useEffect(() => {
+        void AccessibilityInfo.isReduceMotionEnabled().then(setReduceMotion);
+        const subscription = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotion);
+        return () => subscription.remove();
+    }, []);
+    return reduceMotion;
+}
+function useRotatingPlaceholder({ active, examplesKey, prefix, typingInterval, pauseDuration, clearInterval: clearIntervalMs, }) {
+    const [animatedPlaceholder, setAnimatedPlaceholder] = useState('');
+    const exampleIndexRef = useRef(0);
+    const reduceMotion = useReducedMotion();
+    useEffect(() => {
+        const examples = examplesKey ? examplesKey.split(SEPARATOR) : [];
+        // The reduced-motion placeholder is derived below, not animated — there is no timer
+        // to start and nothing for this effect to do.
+        if (!active || reduceMotion || examples.length === 0)
+            return;
+        let charIndex = 0;
+        let elapsed = 0;
+        let phase = 'typing';
+        let exampleIndex = exampleIndexRef.current;
+        const resolution = Math.max(16, Math.min(typingInterval, clearIntervalMs));
+        // Clearing before the first tick is part of starting the timer: without it the
+        // previous example's tail stays on screen until the next interval fires.
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        setAnimatedPlaceholder('');
+        const timer = setInterval(() => {
+            elapsed += resolution;
+            const target = `${prefix}${examples[exampleIndex % examples.length]}`;
+            const phaseDuration = phase === 'typing'
+                ? Math.max(typingInterval, 1)
+                : phase === 'pause'
+                    ? Math.max(pauseDuration, 1)
+                    : Math.max(clearIntervalMs, 1);
+            if (elapsed < phaseDuration)
+                return;
+            elapsed = 0;
+            if (phase === 'typing') {
+                charIndex += 1;
+                setAnimatedPlaceholder(target.slice(0, charIndex));
+                if (charIndex >= target.length)
+                    phase = 'pause';
+                return;
+            }
+            if (phase === 'pause') {
+                phase = 'clearing';
+                return;
+            }
+            charIndex -= 1;
+            setAnimatedPlaceholder(target.slice(0, Math.max(0, charIndex)));
+            if (charIndex <= 0) {
+                phase = 'typing';
+                exampleIndex += 1;
+                exampleIndexRef.current = exampleIndex;
+            }
+        }, resolution);
+        return () => clearInterval(timer);
+    }, [active, clearIntervalMs, examplesKey, pauseDuration, prefix, reduceMotion, typingInterval]);
+    if (!active)
+        return '';
+    if (reduceMotion) {
+        const examples = examplesKey ? examplesKey.split(SEPARATOR) : [];
+        return examples.length > 0 ? `${prefix}${examples[0]}` : prefix;
+    }
+    return animatedPlaceholder || prefix;
+}
+export const SmartInput = forwardRef(function SmartInput({ leftSlot, centerSlot, rightSlot, variant = 'bar', className, inputClassName, submitBehavior = 'newline', safeArea = true, placeholderExamples, placeholderPrefix = 'e.g. ', placeholderTypingInterval = 65, placeholderPauseDuration = 2200, placeholderClearInterval = 25, placeholderTextColor, placeholder, value, defaultValue, onChangeText, editable = true, style, ...props }, ref) {
     const insets = useSafeAreaInsets();
     const colors = useThemeColors();
     const interaction = useInteractionTokens();
     const visual = useVisualTokens();
-    const bottomPadding = safeArea ? Math.max(insets.bottom, 12) : 12;
-    return (_jsx(KeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, className: "w-full", children: _jsxs(View, { className: cn('w-full flex-row items-center gap-2 px-3 py-2 bg-background', variant === 'bar' && 'border-t border-border', variant === 'card' && 'rounded-2xl border border-border shadow-md', className), style: { paddingBottom: bottomPadding }, children: [leftSlot && _jsx(View, { className: "shrink-0", children: leftSlot }), centerSlot && _jsx(View, { className: "shrink-0", children: centerSlot }), _jsx(TextInput, { ref: ref, style: [
-                        { maxHeight: visual.smartInputMaxHeight },
-                        !editable ? { opacity: interaction.disabledOpacity } : null,
-                    ], className: cn('flex-1 min-h-11 px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground outline-none', variant === 'bar' && 'rounded-xl border border-border bg-muted', variant === 'card' && 'rounded-xl bg-transparent', inputClassName), multiline: true, submitBehavior: submitBehavior, textAlignVertical: "top", placeholderTextColor: placeholderTextColor ?? colors.placeholder, editable: editable, ...props }), rightSlot && _jsx(View, { className: "shrink-0", children: rightSlot })] }) }));
+    const bottomPadding = safeArea
+        ? Math.max(insets.bottom, visual.controlPaddingYSm)
+        : visual.controlPaddingYSm;
+    // When the field is controlled its owner already holds the answer, so derive it rather
+    // than mirroring it into state — mirroring cost a frame in which the rotating
+    // placeholder kept animating over text the user had already typed.
+    const [uncontrolledHasText, setUncontrolledHasText] = useState(() => Boolean(defaultValue));
+    const hasText = value !== undefined ? Boolean(value) : uncontrolledHasText;
+    const examplesKey = placeholderExamples?.join(SEPARATOR) ?? '';
+    const animatePlaceholder = placeholder === undefined && !hasText && Boolean(examplesKey);
+    const animatedPlaceholder = useRotatingPlaceholder({
+        active: animatePlaceholder,
+        examplesKey,
+        prefix: placeholderPrefix,
+        typingInterval: placeholderTypingInterval,
+        pauseDuration: placeholderPauseDuration,
+        clearInterval: placeholderClearInterval,
+    });
+    const resolvedPlaceholder = placeholder ?? (hasText || !examplesKey ? undefined : animatedPlaceholder);
+    return (_jsxs(View, { className: cn('w-full flex-row items-center gap-2 bg-background', variant === 'bar' && 'border-border', variant === 'card' && 'border-border', className), style: [
+            {
+                paddingHorizontal: visual.controlPaddingXSm,
+                paddingTop: visual.controlPaddingYSm,
+                paddingBottom: bottomPadding,
+            },
+            variant === 'bar' ? { borderTopWidth: visual.borderWidthHairline } : null,
+            variant === 'card'
+                ? {
+                    borderRadius: surfaceRadius(visual, 'xl'),
+                    borderWidth: visual.borderWidthHairline,
+                    ...shadowStyle(visual, colors, 'md'),
+                }
+                : null,
+        ], children: [leftSlot && _jsx(View, { className: "shrink-0", children: leftSlot }), centerSlot && _jsx(View, { className: "shrink-0", children: centerSlot }), _jsx(TextInput, { ref: ref, style: [
+                    controlRecipe(visual, 'default'),
+                    typographyStyle(visual, 'label'),
+                    variant === 'bar' ? { borderWidth: visual.borderWidthControl } : null,
+                    { maxHeight: visual.smartInputMaxHeight },
+                    !editable ? { opacity: interaction.disabledOpacity } : null,
+                    style,
+                ], className: cn('flex-1 text-foreground placeholder:text-muted-foreground', focusRing, variant === 'bar' && 'border-border bg-muted', variant === 'card' && 'bg-transparent', inputClassName), multiline: true, submitBehavior: submitBehavior, textAlignVertical: "top", placeholderTextColor: placeholderTextColor ?? colors.placeholder, placeholder: resolvedPlaceholder, value: value, defaultValue: defaultValue, onChangeText: (text) => {
+                    if (value === undefined)
+                        setUncontrolledHasText(Boolean(text));
+                    onChangeText?.(text);
+                }, editable: editable, ...props }), rightSlot && _jsx(View, { className: "shrink-0", children: rightSlot })] }));
 });
-//# sourceMappingURL=smart-input.js.map

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

@@ -1,5 +1,3 @@
 export { ListItem, type ListItemProps } from './list-item';
-export { SwipeableItem, type SwipeableItemProps, type SwipeAction } from './swipeable-item';
 export { NotificationItem, type NotificationItemProps } from './notification-item';
 export { TimelineFeed, type TimelineFeedProps, type TimelineItem } from './timeline-feed';
-//# sourceMappingURL=index.d.ts.map

package/dist/blocks/lists/index.js

@@ -1,5 +1,3 @@
 export { ListItem } from './list-item';
-export { SwipeableItem } from './swipeable-item';
 export { NotificationItem } from './notification-item';
 export { TimelineFeed } from './timeline-feed';
-//# sourceMappingURL=index.js.map

package/dist/blocks/lists/list-item.d.ts

@@ -13,5 +13,4 @@ export interface ListItemProps extends Omit<PressableProps, 'children'> {
     /** Show a skeleton placeholder instead of content. */
     loading?: boolean;
 }
-export declare function ListItem({ icon, title, subtitle, description, rightIcon, rightText, action, showBorder, compact, loading, className, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=list-item.d.ts.map
+export declare function ListItem({ icon, title, subtitle, description, rightIcon, rightText, action, showBorder, compact, loading, className, style: styleProp, ...props }: ListItemProps): React.JSX.Element;

package/dist/blocks/lists/list-item.js

@@ -3,15 +3,29 @@ import { View, Pressable } from 'react-native';
 import { Text } from '../../components/text';
 import { Skeleton } from '../../components/skeleton';
 import { cn } from '../../lib/cn';
-// ─── Skeleton ─────────────────────────────────────────────────
+import { focusRing } from '../../lib/focus-ring';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { surfacePadding, typographyStyle } from '../../lib/recipes';
+function useListRowStyle(compact, showBorder) {
+    const visual = useVisualTokens();
+    return {
+        paddingHorizontal: surfacePadding(visual, 'sm'),
+        paddingVertical: compact ? visual.controlPaddingYSm : visual.controlPaddingYDefault,
+        borderBottomWidth: showBorder ? visual.borderWidthHairline : 0,
+    };
+}
 function ListItemSkeleton({ showBorder = true, compact = false, className, }) {
-    return (_jsxs(View, { className: cn('flex-row items-center bg-card px-4', compact ? 'py-2' : 'py-3', showBorder && 'border-b border-border', className), children: [_jsx(Skeleton, { className: "mr-3 h-8 w-8 rounded-lg" }), _jsxs(View, { className: "flex-1 gap-1.5", children: [_jsx(Skeleton, { className: "h-4 w-2/3 rounded-md" }), _jsx(Skeleton, { className: "h-3 w-1/3 rounded-md" })] }), _jsx(Skeleton, { className: "h-4 w-4 rounded-sm" })] }));
+    const rowStyle = useListRowStyle(compact, showBorder);
+    return (_jsxs(View, { className: cn('flex-row items-center bg-card', showBorder && 'border-border', className), style: rowStyle, children: [_jsx(Skeleton, { className: "mr-3 h-8 w-8" }), _jsxs(View, { className: "flex-1 gap-1.5", children: [_jsx(Skeleton, { className: "h-4 w-2/3" }), _jsx(Skeleton, { className: "h-3 w-1/3" })] }), _jsx(Skeleton, { className: "h-4 w-4" })] }));
 }
-// ─── Component ───────────────────────────────────────────────
-export function ListItem({ icon, title, subtitle, description, rightIcon, rightText, action, showBorder = true, compact = false, loading = false, className, ...props }) {
+export function ListItem({ icon, title, subtitle, description, rightIcon, rightText, action, showBorder = true, compact = false, loading = false, className, style: styleProp, ...props }) {
+    const visual = useVisualTokens();
+    const rowStyle = useListRowStyle(compact, showBorder);
     if (loading) {
         return _jsx(ListItemSkeleton, { showBorder: showBorder, compact: compact, className: className });
     }
-    return (_jsxs(Pressable, { className: cn('flex-row items-center bg-card px-4', compact ? 'py-2' : 'py-3', showBorder && 'border-b border-border', 'active:bg-muted', className), ...props, children: [icon && _jsx(View, { className: "mr-3 text-muted-foreground", children: icon }), _jsxs(View, { className: "flex-1", children: [_jsx(Text, { className: "text-base text-foreground", children: title }), subtitle && _jsx(Text, { className: "text-sm text-muted-foreground", children: subtitle }), description && (_jsx(Text, { className: "mt-1 text-sm text-muted-foreground", numberOfLines: 2, children: description }))] }), rightText && _jsx(Text, { className: "mr-2 text-sm text-muted-foreground", children: rightText }), rightIcon && _jsx(View, { className: "text-muted-foreground", children: rightIcon }), action, !action && !rightIcon && _jsx(Text, { className: "text-lg text-muted-foreground", children: "\u203A" })] }));
+    return (_jsxs(Pressable, { accessibilityRole: props.onPress || props.onLongPress ? 'button' : undefined, className: cn('flex-row items-center bg-card', focusRing, showBorder && 'border-border', 'active:bg-muted', className), style: (state) => {
+            const callerStyle = typeof styleProp === 'function' ? styleProp(state) : styleProp;
+            return [rowStyle, callerStyle];
+        }, ...props, children: [icon && _jsx(View, { className: "mr-3 text-muted-foreground", children: icon }), _jsxs(View, { className: "flex-1", children: [_jsx(Text, { className: "text-foreground", style: typographyStyle(visual, 'body'), children: title }), subtitle && (_jsx(Text, { className: "text-muted-foreground", style: typographyStyle(visual, 'label'), children: subtitle })), description && (_jsx(Text, { className: "mt-1 text-muted-foreground", style: typographyStyle(visual, 'label'), numberOfLines: 2, children: description }))] }), rightText && (_jsx(Text, { className: "mr-2 text-muted-foreground", style: typographyStyle(visual, 'label'), children: rightText })), rightIcon && _jsx(View, { className: "text-muted-foreground", children: rightIcon }), action, !action && !rightIcon && (_jsx(Text, { className: "text-muted-foreground", style: typographyStyle(visual, 'emphasis'), children: "\u203A" }))] }));
 }
-//# sourceMappingURL=list-item.js.map

package/dist/blocks/lists/notification-item.d.ts

@@ -12,5 +12,4 @@ export interface NotificationItemProps extends Omit<PressableProps, 'children'>
     /** Show a skeleton placeholder instead of content. */
     loading?: boolean;
 }
-export declare function NotificationItem({ icon, avatarUrl, avatarFallback, title, message, time, read, showDot, loading, className, ...props }: NotificationItemProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=notification-item.d.ts.map
+export declare function NotificationItem({ icon, avatarUrl, avatarFallback, title, message, time, read, showDot, loading, className, style: styleProp, ...props }: NotificationItemProps): React.JSX.Element;

package/dist/blocks/lists/notification-item.js

@@ -4,15 +4,28 @@ import { Text } from '../../components/text';
 import { Avatar, AvatarFallback, AvatarImage } from '../../components/avatar';
 import { Skeleton } from '../../components/skeleton';
 import { cn } from '../../lib/cn';
-// ─── Skeleton ─────────────────────────────────────────────────
+import { focusRing } from '../../lib/focus-ring';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { surfacePadding, typographyStyle } from '../../lib/recipes';
+function useNotificationRowStyle() {
+    const visual = useVisualTokens();
+    return {
+        paddingHorizontal: surfacePadding(visual, 'sm'),
+        paddingVertical: visual.controlPaddingYDefault,
+    };
+}
 function NotificationItemSkeleton({ className }) {
-    return (_jsxs(View, { className: cn('flex-row items-start px-4 py-3', className), children: [_jsx(Skeleton, { className: "h-10 w-10 rounded-full" }), _jsxs(View, { className: "ml-3 flex-1 gap-2", children: [_jsxs(View, { className: "flex-row items-center justify-between", children: [_jsx(Skeleton, { className: "h-3.5 w-1/3 rounded-md" }), _jsx(Skeleton, { className: "h-3 w-12 rounded-md" })] }), _jsx(Skeleton, { className: "h-3 w-4/5 rounded-md" })] })] }));
+    const rowStyle = useNotificationRowStyle();
+    return (_jsxs(View, { className: cn('flex-row items-start', className), style: rowStyle, children: [_jsx(Skeleton, { className: "h-10 w-10 rounded-full" }), _jsxs(View, { className: "ml-3 flex-1 gap-2", children: [_jsxs(View, { className: "flex-row items-center justify-between", children: [_jsx(Skeleton, { className: "h-3.5 w-1/3" }), _jsx(Skeleton, { className: "h-3 w-12" })] }), _jsx(Skeleton, { className: "h-3 w-4/5" })] })] }));
 }
-// ─── Component ───────────────────────────────────────────────
-export function NotificationItem({ icon, avatarUrl, avatarFallback, title, message, time, read = false, showDot = true, loading = false, className, ...props }) {
+export function NotificationItem({ icon, avatarUrl, avatarFallback, title, message, time, read = false, showDot = true, loading = false, className, style: styleProp, ...props }) {
+    const visual = useVisualTokens();
+    const rowStyle = useNotificationRowStyle();
     if (loading) {
         return _jsx(NotificationItemSkeleton, { className: className });
     }
-    return (_jsxs(Pressable, { className: cn('flex-row items-start px-4 py-3 active:bg-muted', !read && 'bg-primary-soft-subtle', className), ...props, children: [avatarUrl || avatarFallback ? (_jsxs(Avatar, { className: "h-10 w-10", children: [avatarUrl && _jsx(AvatarImage, { src: avatarUrl }), _jsx(AvatarFallback, { children: avatarFallback })] })) : (icon && (_jsx(View, { className: "h-10 w-10 items-center justify-center rounded-full bg-muted", children: icon }))), _jsxs(View, { className: "ml-3 flex-1", children: [_jsxs(View, { className: "flex-row items-center justify-between", children: [_jsx(Text, { className: cn('text-sm', !read ? 'font-semibold text-foreground' : 'text-foreground'), children: title }), _jsxs(View, { className: "flex-row items-center gap-2", children: [_jsx(Text, { className: "text-xs text-muted-foreground", children: time }), !read && showDot && _jsx(View, { className: "h-2 w-2 rounded-full bg-primary" })] })] }), _jsx(Text, { className: "mt-0.5 text-sm text-muted-foreground", numberOfLines: 2, children: message })] })] }));
+    return (_jsxs(Pressable, { accessibilityRole: props.onPress || props.onLongPress ? 'button' : undefined, className: cn('flex-row items-start active:bg-muted', focusRing, !read && 'bg-primary-soft-subtle', className), style: (state) => {
+            const callerStyle = typeof styleProp === 'function' ? styleProp(state) : styleProp;
+            return [rowStyle, callerStyle];
+        }, ...props, children: [avatarUrl || avatarFallback ? (_jsxs(Avatar, { className: "h-10 w-10", children: [avatarUrl && _jsx(AvatarImage, { src: avatarUrl }), _jsx(AvatarFallback, { children: avatarFallback })] })) : (icon && (_jsx(View, { className: "h-10 w-10 items-center justify-center rounded-full bg-muted", children: icon }))), _jsxs(View, { className: "ml-3 flex-1", children: [_jsxs(View, { className: "flex-row items-center justify-between", children: [_jsx(Text, { className: cn(!read ? 'font-semibold text-foreground' : 'text-foreground'), style: typographyStyle(visual, 'label'), children: title }), _jsxs(View, { className: "flex-row items-center gap-2", children: [_jsx(Text, { className: "text-muted-foreground", style: typographyStyle(visual, 'caption'), children: time }), !read && showDot && _jsx(View, { className: "h-2 w-2 rounded-full bg-primary" })] })] }), _jsx(Text, { className: "mt-0.5 text-muted-foreground", style: typographyStyle(visual, 'label'), numberOfLines: 2, children: message })] })] }));
 }
-//# sourceMappingURL=notification-item.js.map

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