@thewhileloop/whileui 1.2.3 → 3.0.0

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

@@ -1,20 +1,147 @@
 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;
+}
+function useSmartInputPlaceholder({ value, defaultValue, placeholder, examples, prefix, typingInterval, pauseDuration, clearInterval, onChangeText, }) {
+    const [uncontrolledHasText, setUncontrolledHasText] = useState(() => Boolean(defaultValue));
+    const hasText = value !== undefined ? Boolean(value) : uncontrolledHasText;
+    const examplesKey = examples?.join(SEPARATOR) ?? '';
+    const animatedPlaceholder = useRotatingPlaceholder({
+        active: placeholder === undefined && !hasText && Boolean(examplesKey),
+        examplesKey,
+        prefix,
+        typingInterval,
+        pauseDuration,
+        clearInterval,
+    });
+    return {
+        placeholder: placeholder ?? (hasText || !examplesKey ? undefined : animatedPlaceholder),
+        onChangeText: (text) => {
+            if (value === undefined)
+                setUncontrolledHasText(Boolean(text));
+            onChangeText?.(text);
+        },
+    };
+}
+function SmartInputSlot({ children }) {
+    return children ? _jsx(View, { className: "shrink-0", children: children }) : null;
+}
+export const SmartInput = forwardRef(function SmartInput({ leftSlot, centerSlot, rightSlot, variant = 'bar', className, inputClassName, submitBehavior = 'newline', safeArea = true, placeholderExamples, placeholderPrefix = 'e.g. ', placeholderTypingInterval = 65, placeholderPauseDuration = 2200, placeholderClearInterval = 25, placeholderTextColor, placeholder, value, defaultValue, onChangeText, editable = true, style, ...props }, ref) {
     const insets = useSafeAreaInsets();
     const colors = useThemeColors();
     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;
+    const placeholderState = useSmartInputPlaceholder({
+        value,
+        defaultValue,
+        placeholder,
+        examples: placeholderExamples,
+        prefix: placeholderPrefix,
+        typingInterval: placeholderTypingInterval,
+        pauseDuration: placeholderPauseDuration,
+        clearInterval: placeholderClearInterval,
+        onChangeText,
+    });
+    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: [_jsx(SmartInputSlot, { children: leftSlot }), _jsx(SmartInputSlot, { children: centerSlot }), _jsx(TextInput, { ref: ref, style: [
+                    controlRecipe(visual, 'default'),
+                    typographyStyle(visual, 'label'),
+                    variant === 'bar' ? { borderWidth: visual.borderWidthControl } : null,
+                    { maxHeight: visual.smartInputMaxHeight },
+                    !editable ? { opacity: interaction.disabledOpacity } : null,
+                    style,
+                ], className: cn('flex-1 text-foreground placeholder:text-muted-foreground', focusRing, variant === 'bar' && 'border-border bg-muted', variant === 'card' && 'bg-transparent', inputClassName), multiline: true, submitBehavior: submitBehavior, textAlignVertical: "top", placeholderTextColor: placeholderTextColor ?? colors.placeholder, placeholder: placeholderState.placeholder, value: value, defaultValue: defaultValue, onChangeText: placeholderState.onChangeText, editable: editable, ...props }), _jsx(SmartInputSlot, { 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

@@ -1,123 +1,63 @@
-import React from 'react';
-import { View, type ViewProps, type ImageProps as RNImageProps } from 'react-native';
+import { type ViewInstance, type ViewProps } from 'react-native';
+import { type ImageProps } from 'expo-image';
 import { type VariantProps } from '../../lib/tv';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 declare const smartImageVariants: import("tailwind-variants").TVReturnType<{
     radius: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        full: string;
+        none: "";
+        sm: "";
+        md: "";
+        lg: "";
+        xl: "";
+        full: "rounded-full";
     };
     objectFit: {
-        cover: string;
-        contain: string;
-        fill: string;
-        'scale-down': string;
+        cover: "object-cover";
+        contain: "object-contain";
+        fill: "object-fill";
+        'scale-down': "object-scale-down";
     };
-}, undefined, "overflow-hidden", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "overflow-hidden", {
     radius: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        full: string;
+        none: "";
+        sm: "";
+        md: "";
+        lg: "";
+        xl: "";
+        full: "rounded-full";
     };
     objectFit: {
-        cover: string;
-        contain: string;
-        fill: string;
-        'scale-down': string;
+        cover: "object-cover";
+        contain: "object-contain";
+        fill: "object-fill";
+        'scale-down': "object-scale-down";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     radius: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        full: string;
+        none: "";
+        sm: "";
+        md: "";
+        lg: "";
+        xl: "";
+        full: "rounded-full";
     };
     objectFit: {
-        cover: string;
-        contain: string;
-        fill: string;
-        'scale-down': string;
+        cover: "object-cover";
+        contain: "object-contain";
+        fill: "object-fill";
+        'scale-down': "object-scale-down";
     };
-}>, {
-    radius: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        full: string;
-    };
-    objectFit: {
-        cover: string;
-        contain: string;
-        fill: string;
-        'scale-down': string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    radius: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        full: string;
-    };
-    objectFit: {
-        cover: string;
-        contain: string;
-        fill: string;
-        'scale-down': string;
-    };
-}, undefined, "overflow-hidden", import("tailwind-variants/dist/config.js").TVConfig<{
-    radius: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        full: string;
-    };
-    objectFit: {
-        cover: string;
-        contain: string;
-        fill: string;
-        'scale-down': string;
-    };
-}, {
-    radius: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        full: string;
-    };
-    objectFit: {
-        cover: string;
-        contain: string;
-        fill: string;
-        'scale-down': string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface SmartImageProps extends Omit<ViewProps, 'className'>, VariantProps<typeof smartImageVariants> {
     className?: string;
-    source: RNImageProps['source'];
+    source: ImageProps['source'];
     alt: string;
     skeleton?: boolean;
     skeletonClassName?: string;
     transition?: number;
     onLoad?: () => void;
     onError?: () => void;
-    fallbackSource?: RNImageProps['source'];
+    fallbackSource?: ImageProps['source'];
 }
-declare const SmartImage: React.ForwardRefExoticComponent<SmartImageProps & React.RefAttributes<View>>;
+declare const SmartImage: ForwardRefComponent<ViewInstance, SmartImageProps>;
 export { SmartImage, smartImageVariants };
-//# 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;