@thewhileloop/whileui 1.2.3 → 2.0.0

package/dist/blocks/layout/page-skeleton.d.ts

@@ -14,8 +14,7 @@ export interface PageSkeletonProps extends ViewProps {
     /** Optional placeholder header (when no real header is available yet). */
     headerPlaceholder?: boolean | PageSkeletonHeaderPlaceholder;
 }
-export declare function PageSkeleton({ variant, count, padding, header, headerPlaceholder, className, ...props }: PageSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageSkeleton({ variant, count, padding, header, headerPlaceholder, className, ...props }: PageSkeletonProps): import("react").JSX.Element;
 export declare namespace PageSkeleton {
     var displayName: string;
 }
-//# sourceMappingURL=page-skeleton.d.ts.map

package/dist/blocks/layout/page-skeleton.js

@@ -4,36 +4,54 @@ import { Skeleton } from '../../components/skeleton';
 import { Stack } from '../../components/stack';
 import { Row } from '../../components/row';
 import { cn } from '../../lib/cn';
-const PADDING_CLASS = {
-    none: 'p-0',
-    sm: 'p-3',
-    default: 'p-4',
-    lg: 'p-6',
-};
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { surfacePadding, surfaceRadius } from '../../lib/recipes';
+function containerPadding(visual, padding) {
+    return { padding: surfacePadding(visual, padding) };
+}
+function cardSurface(visual) {
+    return {
+        borderRadius: surfaceRadius(visual, 'xl'),
+        borderWidth: visual.borderWidthHairline,
+        padding: surfacePadding(visual, 'sm'),
+    };
+}
 function HeaderPlaceholder({ variant }) {
+    const visual = useVisualTokens();
     const compact = variant === 'compact';
-    return (_jsx(View, { className: cn(compact ? 'px-4 pt-3 pb-2' : 'px-4 pt-4 pb-3'), children: _jsxs(Row, { align: "center", justify: "between", children: [_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Skeleton, { className: cn('rounded-full', compact ? 'h-8 w-8' : 'h-10 w-10') }), _jsxs(Stack, { gap: "xs", children: [_jsx(Skeleton, { className: cn('h-3 rounded-full', compact ? 'w-24' : 'w-28') }), _jsx(Skeleton, { className: cn('h-3 rounded-full', compact ? 'w-16' : 'w-20') })] })] }), _jsx(Skeleton, { className: cn('rounded-full', compact ? 'h-8 w-8' : 'h-10 w-10') })] }) }));
+    return (_jsx(View, { className: cn(compact ? 'pt-3 pb-2' : 'pt-4 pb-3'), style: { paddingHorizontal: surfacePadding(visual, 'sm') }, children: _jsxs(Row, { align: "center", justify: "between", children: [_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Skeleton, { className: cn('rounded-full', compact ? 'h-8 w-8' : 'h-10 w-10') }), _jsxs(Stack, { gap: "xs", children: [_jsx(Skeleton, { className: cn('h-3 rounded-full', compact ? 'w-24' : 'w-28') }), _jsx(Skeleton, { className: cn('h-3 rounded-full', compact ? 'w-16' : 'w-20') })] })] }), _jsx(Skeleton, { className: cn('rounded-full', compact ? 'h-8 w-8' : 'h-10 w-10') })] }) }));
 }
-// ─── Variant internals ────────────────────────────────────────
-function DashboardVariant({ className, padding = 'default', ...props }) {
-    return (_jsx(View, { className: cn(PADDING_CLASS[padding], className), ...props, children: _jsxs(Stack, { gap: "md", children: [_jsxs(View, { className: "rounded-2xl border border-border bg-card p-4", children: [_jsxs(Row, { className: "mb-3 gap-2", align: "center", children: [_jsx(Skeleton, { className: "h-6 w-16 rounded-full" }), _jsx(Skeleton, { className: "h-6 w-20 rounded-full" }), _jsx(Skeleton, { className: "h-6 w-14 rounded-full" })] }), _jsx(Skeleton, { className: "h-4 w-full" }), _jsx(Skeleton, { className: "mt-1 h-4 w-4/5" })] }), _jsx(Row, { gap: "sm", align: "stretch", children: [1, 2, 3].map((i) => (_jsxs(View, { className: "flex-1 rounded-2xl border border-border bg-card p-3", children: [_jsx(Skeleton, { className: "mb-2 h-3 w-2/3" }), _jsx(Skeleton, { className: "h-6 w-1/2" })] }, i))) }), _jsx(Skeleton, { className: "h-4 w-1/3" }), [1, 2, 3].map((i) => (_jsxs(Row, { className: "items-center gap-3 py-3", align: "center", children: [_jsx(Skeleton, { className: "h-10 w-10 shrink-0 rounded-full" }), _jsxs(Stack, { className: "flex-1", gap: "xs", children: [_jsx(Skeleton, { className: "h-4 w-3/4" }), _jsx(Skeleton, { className: "h-3 w-1/2" })] })] }, i)))] }) }));
+function DashboardVariant({ className, padding = 'default', style, ...props }) {
+    const visual = useVisualTokens();
+    return (_jsx(View, { className: className, style: [containerPadding(visual, padding), style], ...props, children: _jsxs(Stack, { gap: "md", children: [_jsxs(View, { className: "border-border bg-card", style: cardSurface(visual), children: [_jsxs(Row, { className: "mb-3 gap-2", align: "center", children: [_jsx(Skeleton, { className: "h-6 w-16 rounded-full" }), _jsx(Skeleton, { className: "h-6 w-20 rounded-full" }), _jsx(Skeleton, { className: "h-6 w-14 rounded-full" })] }), _jsx(Skeleton, { className: "h-4 w-full" }), _jsx(Skeleton, { className: "mt-1 h-4 w-4/5" })] }), _jsx(Row, { gap: "sm", align: "stretch", children: [1, 2, 3].map((i) => (_jsxs(View, { className: "flex-1 border-border bg-card", style: cardSurface(visual), children: [_jsx(Skeleton, { className: "mb-2 h-3 w-2/3" }), _jsx(Skeleton, { className: "h-6 w-1/2" })] }, i))) }), _jsx(Skeleton, { className: "h-4 w-1/3" }), [1, 2, 3].map((i) => (_jsxs(Row, { className: "items-center gap-3", style: { paddingVertical: visual.controlPaddingYDefault }, align: "center", children: [_jsx(Skeleton, { className: "h-10 w-10 shrink-0 rounded-full" }), _jsxs(Stack, { className: "flex-1", gap: "xs", children: [_jsx(Skeleton, { className: "h-4 w-3/4" }), _jsx(Skeleton, { className: "h-3 w-1/2" })] })] }, i)))] }) }));
 }
-function ListVariant({ count = 3, className, padding = 'default', ...props }) {
-    return (_jsx(View, { className: cn(PADDING_CLASS[padding], className), ...props, children: _jsxs(Stack, { gap: "md", children: [_jsx(Skeleton, { className: "h-5 w-1/3" }), Array.from({ length: count }).map((_, i) => (_jsxs(Row, { className: "items-center gap-3 border-b border-border pb-4", align: "center", children: [_jsx(Skeleton, { className: "h-12 w-12 shrink-0 rounded-full" }), _jsxs(Stack, { className: "flex-1", gap: "xs", children: [_jsx(Skeleton, { className: "h-4 w-3/4" }), _jsx(Skeleton, { className: "h-3 w-1/2" })] })] }, i)))] }) }));
+function ListVariant({ count = 3, className, padding = 'default', style, ...props }) {
+    const visual = useVisualTokens();
+    return (_jsx(View, { className: className, style: [containerPadding(visual, padding), style], ...props, children: _jsxs(Stack, { gap: "md", children: [_jsx(Skeleton, { className: "h-5 w-1/3" }), Array.from({ length: count }).map((_, i) => (_jsxs(Row, { className: "items-center gap-3 border-border", style: {
+                        borderBottomWidth: visual.borderWidthHairline,
+                        paddingBottom: surfacePadding(visual, 'sm'),
+                    }, align: "center", children: [_jsx(Skeleton, { className: "h-12 w-12 shrink-0 rounded-full" }), _jsxs(Stack, { className: "flex-1", gap: "xs", children: [_jsx(Skeleton, { className: "h-4 w-3/4" }), _jsx(Skeleton, { className: "h-3 w-1/2" })] })] }, i)))] }) }));
 }
-function SettingsVariant({ count = 4, className, padding = 'default', ...props }) {
-    return (_jsx(View, { className: cn(PADDING_CLASS[padding], className), ...props, children: _jsx(Stack, { gap: "none", children: Array.from({ length: count }).map((_, i) => (_jsxs(Row, { className: "items-center justify-between border-b border-border py-4", align: "center", children: [_jsx(Skeleton, { className: "h-4 w-1/3" }), _jsx(Skeleton, { className: "h-4 w-16" })] }, i))) }) }));
+function SettingsVariant({ count = 4, className, padding = 'default', style, ...props }) {
+    const visual = useVisualTokens();
+    return (_jsx(View, { className: className, style: [containerPadding(visual, padding), style], ...props, children: _jsx(Stack, { gap: "none", children: Array.from({ length: count }).map((_, i) => (_jsxs(Row, { className: "items-center justify-between border-border", style: {
+                    borderBottomWidth: visual.borderWidthHairline,
+                    paddingVertical: surfacePadding(visual, 'sm'),
+                }, align: "center", children: [_jsx(Skeleton, { className: "h-4 w-1/3" }), _jsx(Skeleton, { className: "h-4 w-16" })] }, i))) }) }));
 }
-function CardVariant({ className, padding = 'default', ...props }) {
-    return (_jsx(View, { className: cn(PADDING_CLASS[padding], className), ...props, children: _jsx(View, { className: "rounded-2xl border border-border bg-card overflow-hidden", children: _jsxs(View, { className: "p-4 gap-3", children: [_jsx(Skeleton, { className: "h-5 w-2/3" }), _jsx(Skeleton, { className: "h-3 w-full" }), _jsx(Skeleton, { className: "h-3 w-full" }), _jsx(Skeleton, { className: "h-3 w-4/5" }), _jsx(Skeleton, { className: "h-3 w-3/4" })] }) }) }));
+function CardVariant({ className, padding = 'default', style, ...props }) {
+    const visual = useVisualTokens();
+    return (_jsx(View, { className: className, style: [containerPadding(visual, padding), style], ...props, children: _jsx(View, { className: "border-border bg-card overflow-hidden", style: {
+                borderRadius: surfaceRadius(visual, 'xl'),
+                borderWidth: visual.borderWidthHairline,
+            }, children: _jsxs(View, { className: "gap-3", style: { padding: surfacePadding(visual, 'sm') }, children: [_jsx(Skeleton, { className: "h-5 w-2/3" }), _jsx(Skeleton, { className: "h-3 w-full" }), _jsx(Skeleton, { className: "h-3 w-full" }), _jsx(Skeleton, { className: "h-3 w-4/5" }), _jsx(Skeleton, { className: "h-3 w-3/4" })] }) }) }));
 }
-function GenericVariant({ className, padding = 'default', ...props }) {
-    return (_jsx(View, { className: cn(PADDING_CLASS[padding], className), ...props, children: _jsxs(Stack, { gap: "lg", children: [_jsx(Skeleton, { className: "h-6 w-1/2" }), _jsxs(Stack, { gap: "sm", children: [_jsx(Skeleton, { className: "h-4 w-full" }), _jsx(Skeleton, { className: "h-4 w-5/6" }), _jsx(Skeleton, { className: "h-4 w-4/5" })] })] }) }));
+function GenericVariant({ className, padding = 'default', style, ...props }) {
+    const visual = useVisualTokens();
+    return (_jsx(View, { className: className, style: [containerPadding(visual, padding), style], ...props, children: _jsxs(Stack, { gap: "lg", children: [_jsx(Skeleton, { className: "h-6 w-1/2" }), _jsxs(Stack, { gap: "sm", children: [_jsx(Skeleton, { className: "h-4 w-full" }), _jsx(Skeleton, { className: "h-4 w-5/6" }), _jsx(Skeleton, { className: "h-4 w-4/5" })] })] }) }));
 }
-// ─── Component ───────────────────────────────────────────────
 export function PageSkeleton({ variant, count, padding = 'default', header, headerPlaceholder = false, className, ...props }) {
     const resolvedHeaderPlaceholder = headerPlaceholder === 'compact' ? 'compact' : 'default';
     return (_jsxs(View, { className: cn('w-full', className), ...props, children: [header, !header && headerPlaceholder && _jsx(HeaderPlaceholder, { variant: resolvedHeaderPlaceholder }), variant === 'dashboard' ? (_jsx(DashboardVariant, { padding: padding })) : variant === 'list' ? (_jsx(ListVariant, { variant: "list", count: count ?? 3, padding: padding })) : variant === 'settings' ? (_jsx(SettingsVariant, { variant: "settings", count: count ?? 4, padding: padding })) : variant === 'card' ? (_jsx(CardVariant, { padding: padding })) : (_jsx(GenericVariant, { padding: padding }))] }));
 }
 PageSkeleton.displayName = 'PageSkeleton';
-//# sourceMappingURL=page-skeleton.js.map

package/dist/blocks/layout/pull-to-refresh-scroll-view.d.ts

@@ -1,9 +1,13 @@
 import { type ScrollViewProps } from 'react-native';
-export interface PullToRefreshScrollViewProps extends ScrollViewProps {
+export interface PullToRefreshScrollViewProps extends Omit<ScrollViewProps, 'refreshControl'> {
     refreshing: boolean;
-    onRefresh: () => void;
+    /**
+     * Refreshing is almost always async, so the signature says so. Nothing here awaits it —
+     * the spinner is driven by `refreshing`, which the owner controls — so a handler that
+     * can reject must catch its own errors.
+     */
+    onRefresh: () => void | Promise<void>;
     /** Override tint/colors. Defaults to theme primary. */
     refreshColor?: string;
 }
-export declare function PullToRefreshScrollView({ refreshing, onRefresh, refreshColor, className, children, ...props }: PullToRefreshScrollViewProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=pull-to-refresh-scroll-view.d.ts.map
+export declare function PullToRefreshScrollView({ refreshing, onRefresh, refreshColor, className, children, alwaysBounceVertical, accessibilityActions, onAccessibilityAction, ...props }: PullToRefreshScrollViewProps): import("react").JSX.Element;

package/dist/blocks/layout/pull-to-refresh-scroll-view.js

@@ -2,10 +2,23 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { RefreshControl, ScrollView } from 'react-native';
 import { useThemeColors } from '../../lib/theme-colors';
 import { cn } from '../../lib/cn';
-// ─── Component ───────────────────────────────────────────────
-export function PullToRefreshScrollView({ refreshing, onRefresh, refreshColor, className, children, ...props }) {
+const REFRESH_ACTION = 'refresh';
+export function PullToRefreshScrollView({ refreshing, onRefresh, refreshColor, className, children, alwaysBounceVertical = true, accessibilityActions, onAccessibilityAction, ...props }) {
     const colors = useThemeColors();
     const tintColor = refreshColor ?? colors.primary;
-    return (_jsx(ScrollView, { className: cn('flex-1', className), refreshControl: _jsx(RefreshControl, { refreshing: refreshing, onRefresh: onRefresh, tintColor: tintColor, colors: [tintColor] }), ...props, children: children }));
+    // Pulling is a drag, and a screen reader user cannot drag. The same refresh is
+    // offered as a named accessibility action, alongside any the caller supplies.
+    const actions = [
+        ...(accessibilityActions ?? []).filter((action) => action.name !== REFRESH_ACTION),
+        { name: REFRESH_ACTION, label: 'Refresh' },
+    ];
+    const handleAccessibilityAction = (event) => {
+        if (event.nativeEvent.actionName === REFRESH_ACTION) {
+            if (!refreshing)
+                void onRefresh();
+            return;
+        }
+        onAccessibilityAction?.(event);
+    };
+    return (_jsx(ScrollView, { className: cn('flex-1', className), alwaysBounceVertical: alwaysBounceVertical, accessibilityActions: actions, onAccessibilityAction: handleAccessibilityAction, refreshControl: _jsx(RefreshControl, { refreshing: refreshing, onRefresh: () => void onRefresh(), tintColor: tintColor, colors: [tintColor] }), ...props, children: children }));
 }
-//# sourceMappingURL=pull-to-refresh-scroll-view.js.map

package/dist/blocks/layout/screen-skeleton.d.ts

@@ -9,8 +9,7 @@ export interface ScreenSkeletonProps extends Omit<ViewProps, 'children'> {
     headerPlaceholder?: boolean | PageSkeletonHeaderPlaceholder;
     className?: string;
 }
-export declare function ScreenSkeleton({ variant, count, padding, header, headerPlaceholder, className, ...props }: ScreenSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare function ScreenSkeleton({ variant, count, padding, header, headerPlaceholder, className, ...props }: ScreenSkeletonProps): import("react").JSX.Element;
 export declare namespace ScreenSkeleton {
     var displayName: string;
 }
-//# sourceMappingURL=screen-skeleton.d.ts.map

package/dist/blocks/layout/screen-skeleton.js

@@ -5,4 +5,3 @@ export function ScreenSkeleton({ variant = 'generic', count, padding = 'default'
     return (_jsx(PageSkeleton, { variant: variant, count: count, padding: padding, header: header, headerPlaceholder: headerPlaceholder, className: cn('flex-1', className), ...props }));
 }
 ScreenSkeleton.displayName = 'ScreenSkeleton';
-//# sourceMappingURL=screen-skeleton.js.map

package/dist/blocks/layout/sheet.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type ViewProps } from 'react-native';
+import { type ScrollViewProps, type PressableProps, type ViewProps } from 'react-native';
 import { type FrostedSurfaceProps } from '../../lib/frosted-surface';
 export interface SheetProps extends FrostedSurfaceProps {
     open: boolean;
@@ -14,18 +14,18 @@ export interface SheetHeaderProps extends ViewProps {
     title?: string;
     description?: string;
 }
-export interface SheetContentProps extends ViewProps {
+export interface SheetContentProps extends ScrollViewProps {
     scrollEnabled?: boolean;
 }
 export interface SheetFooterProps extends ViewProps {
 }
-export interface SheetCloseProps extends ViewProps {
+export interface SheetCloseProps extends PressableProps {
     children: React.ReactNode;
     asChild?: boolean;
+    className?: string;
 }
-export declare function Sheet({ open, onOpenChange, children, maxHeight, maxWidth: maxWidthProp, frosted, blurIntensity, blurTintToken, }: SheetProps): import("react/jsx-runtime").JSX.Element;
-export declare function SheetHeader({ title, description, className, children, ...props }: SheetHeaderProps): import("react/jsx-runtime").JSX.Element;
-export declare function SheetContent({ scrollEnabled, className, children, ...props }: SheetContentProps): import("react/jsx-runtime").JSX.Element;
-export declare function SheetFooter({ className, ...props }: SheetFooterProps): import("react/jsx-runtime").JSX.Element;
-export declare function SheetClose({ children, asChild, className, ...props }: SheetCloseProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=sheet.d.ts.map
+export declare function Sheet({ open, onOpenChange, children, maxHeight, maxWidth: maxWidthProp, frosted, blurIntensity, blurTintToken, }: SheetProps): React.JSX.Element;
+export declare function SheetHeader({ title, description, className, children, style, ...props }: SheetHeaderProps): React.JSX.Element;
+export declare function SheetContent({ scrollEnabled, className, children, style, contentContainerStyle, keyboardShouldPersistTaps, nestedScrollEnabled, ...props }: SheetContentProps): React.JSX.Element;
+export declare function SheetFooter({ className, style, ...props }: SheetFooterProps): React.JSX.Element;
+export declare function SheetClose({ children, asChild, className, onPress, ...props }: SheetCloseProps): React.JSX.Element;

package/dist/blocks/layout/sheet.js

@@ -1,20 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { createContext, useContext } from 'react';
+import React, { createContext, useCallback, useContext, useMemo } from 'react';
 import { Modal, Platform, Pressable, ScrollView, useWindowDimensions, View, } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Text } from '../../components/text';
 import { cn } from '../../lib/cn';
+import { composeEventHandlers } from '../../lib/compose-event-handlers';
 import { useThemeColors } from '../../lib/theme-colors';
 import { useInteractionTokens, withInteractivePressableStyle } from '../../lib/interaction-tokens';
+import { useTapOnly } from '../../lib/tap-only';
 import { useVisualTokens } from '../../lib/visual-tokens';
+import { surfacePadding, surfaceRadius, typographyStyle } from '../../lib/recipes';
 import { useFrostedSurface, useFrostedBackdrop, } from '../../lib/frosted-surface';
 const SheetContext = createContext({ onClose: () => { } });
-// ─── Components ───────────────────────────────────────────────
 export function Sheet({ open, onOpenChange, children, maxHeight = 'full', maxWidth: maxWidthProp, frosted = false, blurIntensity, blurTintToken, }) {
     const insets = useSafeAreaInsets();
     const colors = useThemeColors();
     const visual = useVisualTokens();
-    const onClose = () => onOpenChange(false);
+    const onClose = useCallback(() => onOpenChange(false), [onOpenChange]);
+    const backdropPress = useTapOnly(onClose);
+    const contextValue = useMemo(() => ({ onClose }), [onClose]);
     const frostedSurface = useFrostedSurface({
         frosted,
         blurIntensity,
@@ -31,7 +35,6 @@ export function Sheet({ open, onOpenChange, children, maxHeight = 'full', maxWid
     });
     const { height: screenHeight, width: windowWidth } = useWindowDimensions();
     const maxWidth = maxWidthProp ?? visual.sheetMaxWidth;
-    // Full width on phones; cap at maxWidth only on tablets/web (breakpoint)
     const widthStyle = typeof maxWidth === 'number' && windowWidth >= visual.sheetTabletBreakpoint
         ? { maxWidth, alignSelf: 'center', width: maxWidth }
         : {};
@@ -43,42 +46,69 @@ export function Sheet({ open, onOpenChange, children, maxHeight = 'full', maxWid
                 minHeight: Math.min(screenHeight * visual.sheetHalfMaxHeightRatio, visual.sheetHalfMinHeight),
             }
             : { maxHeight };
+    // A full-height sheet reaches the top of the screen, and the host Modal is
+    // status-bar-translucent, so its header lands underneath the clock and battery. A
+    // shorter sheet starts below the status bar and needs no inset of its own.
+    const isFullHeight = maxHeight === 'full';
     const sheetStyle = [
         maxHeightStyle,
-        { paddingBottom: Math.max(insets.bottom, 16) },
+        {
+            paddingTop: isFullHeight ? insets.top : 0,
+            paddingBottom: Math.max(insets.bottom, 16),
+            // Rounded top corners only read as "a sheet over something" when there is
+            // something behind them. At full height they just fight the device's own corners.
+            borderTopLeftRadius: isFullHeight ? 0 : surfaceRadius(visual, 'xl'),
+            borderTopRightRadius: isFullHeight ? 0 : surfaceRadius(visual, 'xl'),
+            borderWidth: visual.borderWidthHairline,
+        },
         widthStyle,
         frostedSurface.surfaceStyle,
     ];
-    return (_jsx(Modal, { visible: open, transparent: true, animationType: "slide", onRequestClose: onClose, statusBarTranslucent: Platform.OS === 'android', presentationStyle: "overFullScreen", children: _jsxs(View, { className: "flex-1 justify-end", style: { backgroundColor: frosted ? 'transparent' : colors.overlay }, children: [frostedBackdrop, _jsx(Pressable, { className: "flex-1", onPress: onClose }), _jsxs(View, { className: cn('rounded-t-xl border border-border overflow-hidden relative', frosted ? 'bg-transparent' : 'bg-background'), style: sheetStyle, children: [frostedSurface.overlay, _jsx(SheetContext.Provider, { value: { onClose }, children: children })] })] }) }));
+    return (_jsx(Modal, { visible: open, transparent: true, animationType: "slide", onRequestClose: onClose, statusBarTranslucent: Platform.OS === 'android', navigationBarTranslucent: Platform.OS === 'android', presentationStyle: "overFullScreen", children: _jsxs(View, { className: "flex-1 justify-end", style: { backgroundColor: frosted ? 'transparent' : colors.overlay }, children: [frostedBackdrop, _jsx(Pressable, { accessible: false, importantForAccessibility: "no", className: "flex-1", ...backdropPress }), _jsxs(View, { className: cn('border-border overflow-hidden relative', frosted ? 'bg-transparent' : 'bg-background'), style: sheetStyle, children: [frostedSurface.overlay, _jsx(SheetContext.Provider, { value: contextValue, children: children })] })] }) }));
 }
-export function SheetHeader({ title, description, className, children, ...props }) {
+export function SheetHeader({ title, description, className, children, style, ...props }) {
     const { onClose } = useContext(SheetContext);
     const interaction = useInteractionTokens();
-    return (_jsxs(View, { className: cn('flex-row items-center justify-between gap-3 border-b border-border px-4 py-3', className), ...props, children: [_jsxs(View, { className: "flex-1 min-w-0 gap-0.5 self-stretch justify-center", children: [title && (_jsx(Text, { className: "text-base font-semibold text-foreground text-left", children: title })), description && (_jsx(Text, { className: "text-sm text-muted-foreground text-left", children: description }))] }), children ?? (_jsx(Pressable, { onPress: onClose, className: "p-2 -mr-2 -mt-2 -mb-2 rounded-lg", style: withInteractivePressableStyle(undefined, interaction, {
+    const visual = useVisualTokens();
+    return (_jsxs(View, { className: cn('flex-row items-center justify-between gap-3 border-border', className), style: [
+            {
+                borderBottomWidth: visual.borderWidthHairline,
+                paddingHorizontal: surfacePadding(visual, 'sm'),
+                paddingVertical: visual.controlPaddingYDefault,
+            },
+            style,
+        ], ...props, children: [_jsxs(View, { className: "flex-1 min-w-0 gap-0.5 self-stretch justify-center", children: [title && (_jsx(Text, { className: "font-semibold text-foreground text-left", style: typographyStyle(visual, 'body'), children: title })), description && (_jsx(Text, { className: "text-muted-foreground text-left", style: typographyStyle(visual, 'label'), children: description }))] }), children ?? (_jsx(Pressable, { onPress: onClose, className: "p-2 -mr-2 -mt-2 -mb-2", style: withInteractivePressableStyle({ borderRadius: visual.radiusMd }, interaction, {
                     pressedVariant: 'default',
-                }), hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, accessibilityRole: "button", accessibilityLabel: "Close", children: _jsx(Text, { className: "text-xl text-muted-foreground leading-none", children: "\u00D7" }) }))] }));
+                }), hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, accessibilityRole: "button", accessibilityLabel: "Close", children: _jsx(Text, { className: "text-muted-foreground leading-none", style: typographyStyle(visual, 'title'), children: "\u00D7" }) }))] }));
 }
-export function SheetContent({ scrollEnabled = true, className, children, ...props }) {
+export function SheetContent({ scrollEnabled = true, className, children, style, contentContainerStyle, keyboardShouldPersistTaps = 'handled', nestedScrollEnabled = true, ...props }) {
+    const visual = useVisualTokens();
+    const contentPadding = surfacePadding(visual, 'sm');
     if (scrollEnabled) {
-        return (_jsx(ScrollView, { className: cn('flex-1', className), showsVerticalScrollIndicator: false, contentContainerStyle: { paddingHorizontal: 16, paddingVertical: 16 }, ...props, children: children }));
+        return (_jsx(ScrollView, { className: cn('flex-1', className), style: style, showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: keyboardShouldPersistTaps, nestedScrollEnabled: nestedScrollEnabled, contentContainerStyle: [{ padding: contentPadding }, contentContainerStyle], ...props, children: children }));
     }
-    return (_jsx(View, { className: cn('flex-1 px-4 py-4', className), ...props, children: children }));
+    return (_jsx(View, { className: cn('flex-1', className), style: [{ padding: contentPadding }, contentContainerStyle, style], ...props, children: children }));
 }
-export function SheetFooter({ className, ...props }) {
-    return (_jsx(View, { className: cn('flex-row gap-2 justify-end border-t border-border px-4 py-3', className), ...props }));
+export function SheetFooter({ className, style, ...props }) {
+    const visual = useVisualTokens();
+    return (_jsx(View, { className: cn('flex-row gap-2 justify-end border-border', className), style: [
+            {
+                borderTopWidth: visual.borderWidthHairline,
+                paddingHorizontal: surfacePadding(visual, 'sm'),
+                paddingVertical: visual.controlPaddingYDefault,
+            },
+            style,
+        ], ...props }));
 }
-export function SheetClose({ children, asChild, className, ...props }) {
+export function SheetClose({ children, asChild, className, onPress, ...props }) {
     const { onClose } = useContext(SheetContext);
     if (asChild && React.isValidElement(children)) {
         const child = children;
         return React.cloneElement(child, {
-            onPress: (e) => {
-                child.props.onPress?.(e);
-                onClose();
-            },
             ...props,
+            className: cn(child.props.className, className),
+            onPress: composeEventHandlers(composeEventHandlers(child.props.onPress, onPress), () => onClose()),
         });
     }
-    return (_jsx(Pressable, { className: cn(className), onPress: onClose, ...props, children: children }));
+    return (_jsx(Pressable, { accessibilityRole: "button", ...props, className: cn(className), onPress: composeEventHandlers(onPress, () => onClose()), children: children }));
 }
-//# sourceMappingURL=sheet.js.map

package/dist/blocks/layout/smart-input.d.ts

@@ -17,6 +17,11 @@ export interface SmartInputProps extends TextInputProps {
     submitBehavior?: 'newline' | 'submit' | 'blurAndSubmit';
     /** Use safe area insets for bottom padding */
     safeArea?: boolean;
+    /** Rotating examples used as the placeholder when `placeholder` is omitted. */
+    placeholderExamples?: readonly string[];
+    placeholderPrefix?: string;
+    placeholderTypingInterval?: number;
+    placeholderPauseDuration?: number;
+    placeholderClearInterval?: number;
 }
 export declare const SmartInput: React.ForwardRefExoticComponent<SmartInputProps & React.RefAttributes<TextInput>>;
-//# sourceMappingURL=smart-input.d.ts.map

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