@thewhileloop/whileui 1.2.2 → 2.0.0

package/dist/blocks/layout/form-modal-screen.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { View, ScrollView, Pressable, useWindowDimensions } from 'react-native';
+import { Pressable, ScrollView, StyleSheet, useWindowDimensions, View, } from 'react-native';
 import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context';
 import { Text } from '../../components/text';
 import { Spinner } from '../../components/spinner';
@@ -10,26 +10,29 @@ function FormModalScreen({ className, title, subtitle, leftSlot, rightSlot, onCl
     const { height: screenHeight } = useWindowDimensions();
     const interaction = useInteractionTokens();
     const visual = useVisualTokens();
-    const content = loading ? (_jsx(SafeAreaView, { style: { flex: 1 }, className: "bg-background", edges: ['top'], children: _jsx(View, { style: { flex: 1 }, className: "items-center justify-center", children: _jsx(Spinner, { color: loadingSpinnerColor }) }) })) : (_jsxs(SafeAreaView, { style: { flex: 1 }, className: cn('bg-background', className), edges: ['top'], ...props, children: [_jsxs(View, { className: "flex-row items-center px-4 py-3 border-b border-border", children: [_jsx(View, { className: "w-12", children: leftSlot ? (leftSlot) : onClose ? (_jsx(Pressable, { onPress: onClose, disabled: saving, className: "p-2 -m-2 items-center justify-center", style: (state) => {
-                                const interactiveStyle = withInteractivePressableStyle(undefined, interaction, {
-                                    disabled: saving,
-                                    pressedVariant: 'default',
-                                });
-                                const resolved = typeof interactiveStyle === 'function'
-                                    ? interactiveStyle(state)
-                                    : interactiveStyle;
-                                return [
-                                    {
-                                        minWidth: visual.touchTargetMinSize,
-                                        minHeight: visual.touchTargetMinSize,
-                                    },
-                                    resolved,
-                                ];
-                            }, accessibilityRole: "button", accessibilityLabel: "Close", children: _jsx(Text, { className: "text-foreground text-xl font-medium", children: "\u00D7" }) })) : null }), _jsxs(View, { className: "flex-1 items-center", children: [_jsx(Text, { variant: "title", className: "text-center", children: title }), subtitle && (_jsx(Text, { variant: "caption", className: "text-center text-muted-foreground", children: subtitle }))] }), _jsx(View, { className: "w-12 items-end", children: rightSlot })] }), saving && (_jsxs(View, { className: "bg-primary px-4 py-2 flex-row items-center justify-center gap-2", children: [_jsx(Spinner, { size: "sm", color: savingSpinnerColor }), _jsx(Text, { className: "text-primary-foreground text-sm", children: savingText })] })), _jsx(ScrollView, { style: { flex: 1 }, contentContainerStyle: {
-                    padding: 16,
-                    minHeight: screenHeight * visual.formModalContentMinHeightRatio,
-                }, scrollEnabled: !saving && scrollEnabled, keyboardShouldPersistTaps: "handled", children: children })] }));
+    // `className` is silently dropped on react-native-safe-area-context's `SafeAreaView`:
+    // it is a native view, and Uniwind only wraps React Native's own components. The
+    // background — and any `className` a caller passes — has to go on a child.
+    const content = loading ? (_jsx(SafeAreaView, { style: styles.fill, edges: ['top'], children: _jsx(View, { style: styles.fill, className: "bg-background items-center justify-center", children: _jsx(Spinner, { color: loadingSpinnerColor }) }) })) : (_jsx(SafeAreaView, { style: styles.fill, edges: ['top'], children: _jsxs(View, { style: styles.fill, className: cn('bg-background', className), ...props, children: [_jsxs(View, { className: "flex-row items-center px-4 py-3 border-b border-border", children: [_jsx(View, { className: "w-12", children: leftSlot ? (leftSlot) : onClose ? (_jsx(Pressable, { onPress: onClose, disabled: saving, className: "p-2 -m-2 items-center justify-center", style: (state) => {
+                                    const interactiveStyle = withInteractivePressableStyle(undefined, interaction, {
+                                        disabled: saving,
+                                        pressedVariant: 'default',
+                                    });
+                                    const resolved = typeof interactiveStyle === 'function'
+                                        ? interactiveStyle(state)
+                                        : interactiveStyle;
+                                    return [
+                                        {
+                                            minWidth: visual.touchTargetMinSize,
+                                            minHeight: visual.touchTargetMinSize,
+                                        },
+                                        resolved,
+                                    ];
+                                }, accessibilityRole: "button", accessibilityLabel: "Close", children: _jsx(Text, { className: "text-foreground text-xl font-medium", children: "\u00D7" }) })) : null }), _jsxs(View, { className: "flex-1 items-center", children: [_jsx(Text, { variant: "title", className: "text-center", children: title }), subtitle && (_jsx(Text, { variant: "caption", className: "text-center text-muted-foreground", children: subtitle }))] }), _jsx(View, { className: "w-12 items-end", children: rightSlot })] }), saving && (_jsxs(View, { className: "bg-primary px-4 py-2 flex-row items-center justify-center gap-2", children: [_jsx(Spinner, { size: "sm", color: savingSpinnerColor }), _jsx(Text, { className: "text-primary-foreground text-sm", children: savingText })] })), _jsx(ScrollView, { style: { flex: 1 }, contentContainerStyle: {
+                        padding: 16,
+                        minHeight: screenHeight * visual.formModalContentMinHeightRatio,
+                    }, scrollEnabled: !saving && scrollEnabled, keyboardShouldPersistTaps: "handled", children: children })] }) }));
     return (_jsx(SafeAreaProvider, { style: { flex: 1, minHeight: screenHeight }, children: content }));
 }
+const styles = StyleSheet.create({ fill: { flex: 1 } });
 export { FormModalScreen };
-//# sourceMappingURL=form-modal-screen.js.map

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

@@ -1,4 +1,6 @@
 export { AppShell, type AppShellProps } from './app-shell';
+export { KeyboardAwareScreen, type KeyboardAwareScreenProps } from './keyboard-aware-screen';
+export { DockedInput, type DockedInputProps } from './docked-input';
 export { ActionBar, type ActionBarProps } from './action-bar';
 export { ConfirmActionSheet, type ConfirmActionSheetAction, type ConfirmActionSheetActionVariant, type ConfirmActionSheetProps, } from './confirm-action-sheet';
 export { ContentSkeleton, type ContentSkeletonProps } from './content-skeleton';
@@ -13,5 +15,3 @@ export { PullToRefreshScrollView, type PullToRefreshScrollViewProps, } from './p
 export { Sheet, SheetHeader, SheetContent, SheetFooter, SheetClose } from './sheet';
 export type { SheetProps, SheetHeaderProps, SheetContentProps, SheetFooterProps, SheetCloseProps, } from './sheet';
 export { SmartInput, type SmartInputProps } from './smart-input';
-export { OnboardingScreen, type OnboardingScreenProps, type OnboardingSlide, } from './onboarding-screen';
-//# sourceMappingURL=index.d.ts.map

package/dist/blocks/layout/index.js

@@ -1,4 +1,6 @@
 export { AppShell } from './app-shell';
+export { KeyboardAwareScreen } from './keyboard-aware-screen';
+export { DockedInput } from './docked-input';
 export { ActionBar } from './action-bar';
 export { ConfirmActionSheet, } from './confirm-action-sheet';
 export { ContentSkeleton } from './content-skeleton';
@@ -12,5 +14,3 @@ export { LoadingScreen } from './loading-screen';
 export { PullToRefreshScrollView, } from './pull-to-refresh-scroll-view';
 export { Sheet, SheetHeader, SheetContent, SheetFooter, SheetClose } from './sheet';
 export { SmartInput } from './smart-input';
-export { OnboardingScreen, } from './onboarding-screen';
-//# sourceMappingURL=index.js.map

package/dist/blocks/layout/keyboard-aware-screen.d.ts

@@ -0,0 +1,14 @@
+import { type KeyboardAvoidingViewProps } from 'react-native';
+export interface KeyboardAwareScreenProps extends KeyboardAvoidingViewProps {
+    /** Override the platform default. iOS uses padding; Android lets the window resize. */
+    behavior?: KeyboardAvoidingViewProps['behavior'];
+}
+/**
+ * Screen root for layouts with controls docked to the bottom edge. It gives the
+ * whole layout one keyboard policy so inputs do not add their own avoidance and
+ * accidentally apply the keyboard offset twice.
+ */
+export declare function KeyboardAwareScreen({ behavior, className, ...props }: KeyboardAwareScreenProps): import("react").JSX.Element;
+export declare namespace KeyboardAwareScreen {
+    var displayName: string;
+}

package/dist/blocks/layout/keyboard-aware-screen.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Platform, KeyboardAvoidingView } from 'react-native';
+import { cn } from '../../lib/cn';
+/**
+ * Screen root for layouts with controls docked to the bottom edge. It gives the
+ * whole layout one keyboard policy so inputs do not add their own avoidance and
+ * accidentally apply the keyboard offset twice.
+ */
+export function KeyboardAwareScreen({ behavior = Platform.OS === 'ios' ? 'padding' : undefined, className, ...props }) {
+    return (_jsx(KeyboardAvoidingView, { behavior: behavior, className: cn('flex-1 bg-background', className), ...props }));
+}
+KeyboardAwareScreen.displayName = 'KeyboardAwareScreen';

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

@@ -5,5 +5,4 @@ export interface LoadingScreenProps extends ViewProps {
     /** Hex color for spinner. ActivityIndicator requires hex. */
     spinnerColor?: string;
 }
-export declare function LoadingScreen({ message, size, spinnerColor, className, ...props }: LoadingScreenProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=loading-screen.d.ts.map
+export declare function LoadingScreen({ message, size, spinnerColor, className, ...props }: LoadingScreenProps): import("react").JSX.Element;

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

@@ -3,13 +3,11 @@ import { View } from 'react-native';
 import { Text } from '../../components/text';
 import { Spinner } from '../../components/spinner';
 import { cn } from '../../lib/cn';
-// ─── Component ───────────────────────────────────────────────
+const SPINNER_SIZE_CLASS = {
+    sm: 'h-6 w-6',
+    md: 'h-10 w-10',
+    lg: 'h-16 w-16',
+};
 export function LoadingScreen({ message, size = 'md', spinnerColor, className, ...props }) {
-    const spinnerSizes = {
-        sm: 'h-6 w-6',
-        md: 'h-10 w-10',
-        lg: 'h-16 w-16',
-    };
-    return (_jsxs(View, { className: cn('flex-1 items-center justify-center bg-background', className), ...props, children: [_jsx(View, { className: spinnerSizes[size], children: _jsx(Spinner, { color: spinnerColor }) }), message && _jsx(Text, { className: "mt-4 text-muted-foreground", children: message })] }));
+    return (_jsxs(View, { className: cn('flex-1 items-center justify-center bg-background', className), ...props, children: [_jsx(View, { className: SPINNER_SIZE_CLASS[size], children: _jsx(Spinner, { color: spinnerColor }) }), message && _jsx(Text, { className: "mt-4 text-muted-foreground", children: message })] }));
 }
-//# sourceMappingURL=loading-screen.js.map

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