@thewhileloop/whileui 1.2.3 → 3.0.0

package/dist/blocks/datepicker/date-range-picker-modal.js

@@ -8,6 +8,8 @@ import { Text } from '../../components/text';
 import { Button, ButtonText } from '../../components/button';
 import { cn } from '../../lib/cn';
 import { useThemeColors } from '../../lib/theme-colors';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { fieldRecipe, surfacePadding, surfaceRadius, typographyStyle } from '../../lib/recipes';
 import { useFrostedSurface } from '../../lib/frosted-surface';
 import { useCalendarTheme } from './use-calendar-theme';
 function formatRangeDisplay(range) {
@@ -45,10 +47,11 @@ function buildMarkedDates(start, end, theme) {
     }
     return marked;
 }
-export function DateRangePickerModal({ value, onValueChange, open, onOpenChange, minDate, maxDate, theme: customTheme, trigger, title = 'Select date range', confirmLabel = 'Done', className, frosted = false, blurIntensity, blurTintToken, }) {
+function DateRangePickerModalSession({ value, onValueChange, open, onOpenChange, minDate, maxDate, theme: customTheme, trigger, title = 'Select date range', confirmLabel = 'Done', className, frosted = false, blurIntensity, blurTintToken, }) {
     const insets = useSafeAreaInsets();
     const { theme } = useUniwind();
     const colors = useThemeColors();
+    const visual = useVisualTokens();
     const frostedSurface = useFrostedSurface({
         frosted,
         blurIntensity,
@@ -61,7 +64,8 @@ export function DateRangePickerModal({ value, onValueChange, open, onOpenChange,
         calendarTheme.monthTextColor ??
         calendarTheme.dayTextColor ??
         colors.foreground;
-    const renderArrow = useCallback((direction) => (_jsx(Text, { className: "text-base font-medium", style: { color: arrowColor }, children: direction === 'left' ? '<' : '>' })), [arrowColor]);
+    const arrowFontSize = typographyStyle(visual, 'body').fontSize;
+    const renderArrow = useCallback((direction) => (_jsx(Text, { className: "font-medium", style: { color: arrowColor, fontSize: arrowFontSize }, children: direction === 'left' ? '<' : '>' })), [arrowColor, arrowFontSize]);
     const [draftStart, setDraftStart] = useState(value?.start ?? null);
     const [draftEnd, setDraftEnd] = useState(value?.end ?? null);
     const markedDates = useMemo(() => {
@@ -120,14 +124,28 @@ export function DateRangePickerModal({ value, onValueChange, open, onOpenChange,
         setDraftStart(null);
         setDraftEnd(null);
     }, [onOpenChange]);
-    return (_jsxs(_Fragment, { children: [trigger ? (_jsx(Pressable, { onPress: handleOpen, className: cn('min-h-10 w-full flex-row items-center rounded-lg border border-border bg-muted px-4', className), children: trigger })) : null, _jsx(Modal, { visible: open, transparent: true, animationType: "slide", children: _jsx(Pressable, { className: "flex-1 justify-end", style: { backgroundColor: colors.overlay }, onPress: handleBackdropPress, children: _jsxs(Pressable, { className: cn('rounded-t-xl border border-border relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-background'), style: [
-                            { paddingBottom: Math.max(insets.bottom, 16) },
+    return (_jsxs(_Fragment, { children: [trigger ? (_jsx(Pressable, { accessibilityRole: "button", onPress: handleOpen, className: cn('w-full flex-row items-center border-border bg-muted', className), style: fieldRecipe(visual, 'default'), children: trigger })) : null, _jsx(Modal, { visible: open, transparent: true, animationType: "slide", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: handleBackdropPress, children: _jsx(Pressable, { accessible: false, importantForAccessibility: "no", className: "flex-1 justify-end", style: { backgroundColor: colors.overlay }, onPress: handleBackdropPress, children: _jsxs(Pressable, { accessible: false, className: cn('border border-border relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-background'), style: [
+                            {
+                                borderTopLeftRadius: surfaceRadius(visual, 'xl'),
+                                borderTopRightRadius: surfaceRadius(visual, 'xl'),
+                                paddingBottom: Math.max(insets.bottom, surfacePadding(visual, 'sm')),
+                            },
                             frostedSurface.surfaceStyle,
-                        ], onPress: (e) => e.stopPropagation(), children: [frostedSurface.overlay, _jsxs(View, { className: "flex-row items-center justify-between border-b border-border px-4 py-3", children: [_jsx(Text, { className: "text-base font-medium text-foreground", children: title }), _jsx(Button, { size: "sm", onPress: handleConfirm, children: _jsx(ButtonText, { children: confirmLabel }) })] }), _jsx(View, { className: "p-4", children: _jsx(View, { className: "rounded-xl border border-border overflow-hidden", children: _jsx(Calendar, { current: draftStart ?? value?.start ?? undefined, onDayPress: handleDayPress, markedDates: markedDates, markingType: "period", minDate: minDate, maxDate: maxDate, theme: calendarTheme, renderArrow: renderArrow, enableSwipeMonths: true }, theme) }) })] }) }) })] }));
+                        ], onPress: (e) => e.stopPropagation(), children: [frostedSurface.overlay, _jsxs(View, { className: "flex-row items-center justify-between border-b border-border", style: {
+                                    paddingHorizontal: surfacePadding(visual, 'sm'),
+                                    paddingVertical: visual.controlPaddingYDefault,
+                                }, children: [_jsx(Text, { className: "font-medium text-foreground", style: typographyStyle(visual, 'body'), children: title }), _jsx(Button, { size: "sm", onPress: handleConfirm, children: _jsx(ButtonText, { children: confirmLabel }) })] }), _jsx(View, { style: { padding: surfacePadding(visual, 'sm') }, children: _jsx(View, { className: "border-border overflow-hidden", style: {
+                                        borderRadius: surfaceRadius(visual, 'lg'),
+                                        borderWidth: visual.borderWidthHairline,
+                                    }, children: _jsx(Calendar, { current: draftStart ?? value?.start ?? undefined, onDayPress: handleDayPress, markedDates: markedDates, markingType: "period", minDate: minDate, maxDate: maxDate, theme: calendarTheme, renderArrow: renderArrow, enableSwipeMonths: true }, theme) }) })] }) }) })] }));
+}
+export function DateRangePickerModal(props) {
+    const sessionKey = props.open ? 'open' : 'closed';
+    return _jsx(DateRangePickerModalSession, { ...props }, sessionKey);
 }
 /** Compact trigger showing formatted range. Use as DateRangePickerModal's trigger prop. */
 export function DateRangePickerTrigger({ value, placeholder = 'Select date range', className, }) {
-    return (_jsxs(View, { className: cn('flex-1 flex-row items-center min-w-0', className), children: [_jsx(Text, { className: cn('flex-1 text-base', value ? 'text-foreground' : 'text-muted-foreground'), numberOfLines: 1, children: value ? formatRangeDisplay(value) : placeholder }), _jsx(View, { className: "ml-2 shrink-0 h-2 w-2 rotate-45 border-b-2 border-r-2 border-muted-foreground" })] }));
+    const visual = useVisualTokens();
+    return (_jsxs(View, { className: cn('flex-1 flex-row items-center min-w-0', className), children: [_jsx(Text, { className: cn('flex-1', value ? 'text-foreground' : 'text-muted-foreground'), style: typographyStyle(visual, 'body'), numberOfLines: 1, children: value ? formatRangeDisplay(value) : placeholder }), _jsx(View, { className: "ml-2 shrink-0 h-2 w-2 rotate-45 border-b-2 border-r-2 border-muted-foreground" })] }));
 }
 export { formatRangeDisplay };
-//# sourceMappingURL=date-range-picker-modal.js.map

package/dist/blocks/datepicker/datepicker-inline.d.ts

@@ -12,5 +12,4 @@ export interface DatePickerInlineProps {
     theme?: CalendarTheme;
     className?: string;
 }
-export declare function DatePickerInline({ value, onValueChange, minDate, maxDate, theme: customTheme, className, }: DatePickerInlineProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=datepicker-inline.d.ts.map
+export declare function DatePickerInline({ value, onValueChange, minDate, maxDate, theme: customTheme, className, }: DatePickerInlineProps): import("react").JSX.Element;

package/dist/blocks/datepicker/datepicker-inline.js

@@ -6,16 +6,20 @@ import { Calendar } from 'react-native-calendars';
 import { Text } from '../../components/text';
 import { cn } from '../../lib/cn';
 import { useThemeColors } from '../../lib/theme-colors';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { surfaceRadius, typographyStyle } from '../../lib/recipes';
 import { useCalendarTheme } from './use-calendar-theme';
 export function DatePickerInline({ value, onValueChange, minDate, maxDate, theme: customTheme, className, }) {
     const { theme } = useUniwind();
     const colors = useThemeColors();
+    const visual = useVisualTokens();
     const calendarTheme = useCalendarTheme(customTheme);
     const arrowColor = calendarTheme.arrowColor ??
         calendarTheme.monthTextColor ??
         calendarTheme.dayTextColor ??
         colors.foreground;
-    const renderArrow = useCallback((direction) => (_jsx(Text, { className: "text-base font-medium", style: { color: arrowColor }, children: direction === 'left' ? '<' : '>' })), [arrowColor]);
+    const arrowFontSize = typographyStyle(visual, 'body').fontSize;
+    const renderArrow = useCallback((direction) => (_jsx(Text, { className: "font-medium", style: { color: arrowColor, fontSize: arrowFontSize }, children: direction === 'left' ? '<' : '>' })), [arrowColor, arrowFontSize]);
     const markedDates = useMemo(() => {
         if (!value)
             return undefined;
@@ -30,6 +34,8 @@ export function DatePickerInline({ value, onValueChange, minDate, maxDate, theme
     const handleDayPress = (day) => {
         onValueChange?.(day.dateString);
     };
-    return (_jsx(View, { className: cn('overflow-hidden rounded-xl border border-border', className), children: _jsx(Calendar, { current: value ?? undefined, onDayPress: handleDayPress, markedDates: markedDates, minDate: minDate, maxDate: maxDate, theme: calendarTheme, renderArrow: renderArrow, enableSwipeMonths: true }, theme) }));
+    return (_jsx(View, { className: cn('overflow-hidden border-border', className), style: {
+            borderRadius: surfaceRadius(visual, 'lg'),
+            borderWidth: visual.borderWidthHairline,
+        }, children: _jsx(Calendar, { current: value ?? undefined, onDayPress: handleDayPress, markedDates: markedDates, minDate: minDate, maxDate: maxDate, theme: calendarTheme, renderArrow: renderArrow, enableSwipeMonths: true }, theme) }));
 }
-//# sourceMappingURL=datepicker-inline.js.map

package/dist/blocks/datepicker/datepicker-modal.d.ts

@@ -25,12 +25,11 @@ export interface DatePickerModalProps extends FrostedSurfaceProps {
     className?: string;
 }
 declare function formatDisplayDate(dateString: string | null | undefined): string;
-export declare function DatePickerModal({ value, onValueChange, open, onOpenChange, minDate, maxDate, theme: customTheme, trigger, title, confirmLabel, className, frosted, blurIntensity, blurTintToken, }: DatePickerModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function DatePickerModal(props: DatePickerModalProps): React.JSX.Element;
 /** Compact trigger showing formatted date. Use as DatePickerModal's trigger prop. */
 export declare function DatePickerTrigger({ value, placeholder, className, }: {
     value?: string | null;
     placeholder?: string;
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export { formatDisplayDate };
-//# sourceMappingURL=datepicker-modal.d.ts.map

package/dist/blocks/datepicker/datepicker-modal.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { Modal, Pressable, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useUniwind } from 'uniwind';
@@ -8,6 +8,8 @@ import { Text } from '../../components/text';
 import { Button, ButtonText } from '../../components/button';
 import { cn } from '../../lib/cn';
 import { useThemeColors } from '../../lib/theme-colors';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { fieldRecipe, surfacePadding, surfaceRadius, typographyStyle } from '../../lib/recipes';
 import { useFrostedSurface } from '../../lib/frosted-surface';
 import { useCalendarTheme } from './use-calendar-theme';
 function formatDisplayDate(dateString) {
@@ -21,10 +23,11 @@ function formatDisplayDate(dateString) {
         year: 'numeric',
     });
 }
-export function DatePickerModal({ value, onValueChange, open, onOpenChange, minDate, maxDate, theme: customTheme, trigger, title = 'Select date', confirmLabel = 'Done', className, frosted = false, blurIntensity, blurTintToken, }) {
+function DatePickerModalSession({ value, onValueChange, open, onOpenChange, minDate, maxDate, theme: customTheme, trigger, title = 'Select date', confirmLabel = 'Done', className, frosted = false, blurIntensity, blurTintToken, }) {
     const insets = useSafeAreaInsets();
     const { theme } = useUniwind();
     const colors = useThemeColors();
+    const visual = useVisualTokens();
     const frostedSurface = useFrostedSurface({
         frosted,
         blurIntensity,
@@ -37,35 +40,58 @@ export function DatePickerModal({ value, onValueChange, open, onOpenChange, minD
         calendarTheme.monthTextColor ??
         calendarTheme.dayTextColor ??
         colors.foreground;
-    const renderArrow = useCallback((direction) => (_jsx(Text, { className: "text-base font-medium", style: { color: arrowColor }, children: direction === 'left' ? '<' : '>' })), [arrowColor]);
+    const arrowFontSize = typographyStyle(visual, 'body').fontSize;
+    const renderArrow = useCallback((direction) => (_jsx(Text, { className: "font-medium", style: { color: arrowColor, fontSize: arrowFontSize }, children: direction === 'left' ? '<' : '>' })), [arrowColor, arrowFontSize]);
+    const [draftDate, setDraftDate] = useState(value ?? null);
     const markedDates = useMemo(() => {
-        if (!value)
+        if (!draftDate)
             return undefined;
         return {
-            [value]: {
+            [draftDate]: {
                 selected: true,
                 disableTouchEvent: false,
                 today: false,
             },
         };
-    }, [value]);
-    const handleDayPress = (day) => {
-        onValueChange?.(day.dateString);
-    };
-    const handleConfirm = () => {
+    }, [draftDate]);
+    const handleDayPress = useCallback((day) => {
+        setDraftDate(day.dateString);
+    }, []);
+    const handleConfirm = useCallback(() => {
+        onValueChange?.(draftDate ?? null);
         onOpenChange(false);
-    };
-    const handleBackdropPress = () => {
+        setDraftDate(null);
+    }, [draftDate, onOpenChange, onValueChange]);
+    const handleDismiss = useCallback(() => {
         onOpenChange(false);
-    };
-    return (_jsxs(_Fragment, { children: [trigger ? (_jsx(Pressable, { onPress: () => onOpenChange(true), className: cn('min-h-10 w-full flex-row items-center rounded-lg border border-border bg-muted px-4', className), children: trigger })) : null, _jsx(Modal, { visible: open, transparent: true, animationType: "slide", children: _jsx(Pressable, { className: "flex-1 justify-end", style: { backgroundColor: colors.overlay }, onPress: handleBackdropPress, children: _jsxs(Pressable, { className: cn('rounded-t-xl border border-border relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-background'), style: [
-                            { paddingBottom: Math.max(insets.bottom, 16) },
+        setDraftDate(null);
+    }, [onOpenChange]);
+    const handleOpen = useCallback(() => {
+        setDraftDate(value ?? null);
+        onOpenChange(true);
+    }, [onOpenChange, value]);
+    return (_jsxs(_Fragment, { children: [trigger ? (_jsx(Pressable, { accessibilityRole: "button", onPress: handleOpen, className: cn('w-full flex-row items-center border-border bg-muted', className), style: fieldRecipe(visual, 'default'), children: trigger })) : null, _jsx(Modal, { visible: open, transparent: true, animationType: "slide", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: handleDismiss, children: _jsx(Pressable, { accessible: false, importantForAccessibility: "no", className: "flex-1 justify-end", style: { backgroundColor: colors.overlay }, onPress: handleDismiss, children: _jsxs(Pressable, { accessible: false, className: cn('border border-border relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-background'), style: [
+                            {
+                                borderTopLeftRadius: surfaceRadius(visual, 'xl'),
+                                borderTopRightRadius: surfaceRadius(visual, 'xl'),
+                                paddingBottom: Math.max(insets.bottom, surfacePadding(visual, 'sm')),
+                            },
                             frostedSurface.surfaceStyle,
-                        ], onPress: (e) => e.stopPropagation(), children: [frostedSurface.overlay, _jsxs(View, { className: "flex-row items-center justify-between border-b border-border px-4 py-3", children: [_jsx(Text, { className: "text-base font-medium text-foreground", children: title }), _jsx(Button, { size: "sm", onPress: handleConfirm, children: _jsx(ButtonText, { children: confirmLabel }) })] }), _jsx(View, { className: "p-4", children: _jsx(View, { className: "rounded-xl border border-border overflow-hidden", children: _jsx(Calendar, { current: value ?? undefined, onDayPress: handleDayPress, markedDates: markedDates, minDate: minDate, maxDate: maxDate, theme: calendarTheme, renderArrow: renderArrow, enableSwipeMonths: true }, theme) }) })] }) }) })] }));
+                        ], onPress: (e) => e.stopPropagation(), children: [frostedSurface.overlay, _jsxs(View, { className: "flex-row items-center justify-between border-b border-border", style: {
+                                    paddingHorizontal: surfacePadding(visual, 'sm'),
+                                    paddingVertical: visual.controlPaddingYDefault,
+                                }, children: [_jsx(Text, { className: "font-medium text-foreground", style: typographyStyle(visual, 'body'), children: title }), _jsx(Button, { size: "sm", onPress: handleConfirm, children: _jsx(ButtonText, { children: confirmLabel }) })] }), _jsx(View, { style: { padding: surfacePadding(visual, 'sm') }, children: _jsx(View, { className: "border-border overflow-hidden", style: {
+                                        borderRadius: surfaceRadius(visual, 'lg'),
+                                        borderWidth: visual.borderWidthHairline,
+                                    }, children: _jsx(Calendar, { current: draftDate ?? value ?? undefined, onDayPress: handleDayPress, markedDates: markedDates, minDate: minDate, maxDate: maxDate, theme: calendarTheme, renderArrow: renderArrow, enableSwipeMonths: true }, theme) }) })] }) }) })] }));
+}
+export function DatePickerModal(props) {
+    const sessionKey = props.open ? 'open' : 'closed';
+    return _jsx(DatePickerModalSession, { ...props }, sessionKey);
 }
 /** Compact trigger showing formatted date. Use as DatePickerModal's trigger prop. */
 export function DatePickerTrigger({ value, placeholder = 'Select date', className, }) {
-    return (_jsxs(View, { className: cn('flex-1 flex-row items-center min-w-0', className), children: [_jsx(Text, { className: cn('flex-1 text-base', value ? 'text-foreground' : 'text-muted-foreground'), numberOfLines: 1, children: value ? formatDisplayDate(value) : placeholder }), _jsx(View, { className: "ml-2 shrink-0 h-2 w-2 rotate-45 border-b-2 border-r-2 border-muted-foreground" })] }));
+    const visual = useVisualTokens();
+    return (_jsxs(View, { className: cn('flex-1 flex-row items-center min-w-0', className), children: [_jsx(Text, { className: cn('flex-1', value ? 'text-foreground' : 'text-muted-foreground'), style: typographyStyle(visual, 'body'), numberOfLines: 1, children: value ? formatDisplayDate(value) : placeholder }), _jsx(View, { className: "ml-2 shrink-0 h-2 w-2 rotate-45 border-b-2 border-r-2 border-muted-foreground" })] }));
 }
 export { formatDisplayDate };
-//# sourceMappingURL=datepicker-modal.js.map

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

@@ -2,4 +2,3 @@ export { DatePickerModal, DatePickerTrigger, formatDisplayDate, type DatePickerM
 export { DatePickerInline, type DatePickerInlineProps } from './datepicker-inline';
 export { DateRangePickerModal, DateRangePickerTrigger, formatRangeDisplay, type DateRangePickerModalProps, type DateRange, } from './date-range-picker-modal';
 export { useCalendarTheme, type CalendarTheme } from './use-calendar-theme';
-//# sourceMappingURL=index.d.ts.map

package/dist/blocks/datepicker/index.js

@@ -2,4 +2,3 @@ export { DatePickerModal, DatePickerTrigger, formatDisplayDate, } from './datepi
 export { DatePickerInline } from './datepicker-inline';
 export { DateRangePickerModal, DateRangePickerTrigger, formatRangeDisplay, } from './date-range-picker-modal';
 export { useCalendarTheme } from './use-calendar-theme';
-//# sourceMappingURL=index.js.map

package/dist/blocks/datepicker/use-calendar-theme.d.ts

@@ -35,4 +35,3 @@ export interface CalendarTheme {
  * Only defined custom values override base; undefined keys keep base values.
  */
 export declare function useCalendarTheme(customTheme?: CalendarTheme): CalendarTheme;
-//# sourceMappingURL=use-calendar-theme.d.ts.map

package/dist/blocks/datepicker/use-calendar-theme.js

@@ -42,4 +42,3 @@ export function useCalendarTheme(customTheme) {
     }
     return merged;
 }
-//# sourceMappingURL=use-calendar-theme.js.map

package/dist/blocks/layout/action-bar.d.ts

@@ -4,5 +4,4 @@ export interface ActionBarProps extends ViewProps {
     safeArea?: boolean;
     elevated?: boolean;
 }
-export declare function ActionBar({ sticky, safeArea, elevated, className, style, ...props }: ActionBarProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=action-bar.d.ts.map
+export declare function ActionBar({ sticky, safeArea, elevated, className, style, ...props }: ActionBarProps): import("react").JSX.Element;

package/dist/blocks/layout/action-bar.js

@@ -7,4 +7,3 @@ export function ActionBar({ sticky = true, safeArea = true, elevated = false, cl
     const bottomPadding = safeArea ? Math.max(insets.bottom, 12) : 12;
     return (_jsx(View, { className: cn('w-full flex-row items-center gap-3 bg-background px-4 pt-3', sticky && 'absolute inset-x-0 bottom-0 border-t border-border', elevated && 'shadow-lg', className), style: [{ paddingBottom: bottomPadding }, style], ...props }));
 }
-//# sourceMappingURL=action-bar.js.map

package/dist/blocks/layout/app-shell.d.ts

@@ -10,5 +10,4 @@ export interface AppShellProps extends ViewProps {
     /** Optional custom loading placeholder for the content area. */
     skeleton?: React.ReactNode;
 }
-export declare function AppShell({ header, footer, bottomNav, safeArea, loading, skeleton, children, className, ...props }: AppShellProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=app-shell.d.ts.map
+export declare function AppShell({ header, footer, bottomNav, safeArea, loading, skeleton, children, className, ...props }: AppShellProps): React.JSX.Element;

package/dist/blocks/layout/app-shell.js

@@ -1,10 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { cn } from '../../lib/cn';
-// ─── Component ───────────────────────────────────────────────
 export function AppShell({ header, footer, bottomNav, safeArea = true, loading = false, skeleton, children, className, ...props }) {
-    const Container = safeArea ? SafeAreaView : View;
-    return (_jsxs(Container, { className: cn('flex-1 bg-background', className), ...props, children: [header, _jsx(View, { className: "flex-1", children: loading ? (skeleton ?? null) : children }), footer, bottomNav] }));
+    // `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. Styling
+    // the safe area directly meant `AppShell` rendered with no background and no `flex-1`
+    // whenever `safeArea` was true — which is the default — and correctly when it was
+    // false. So the safe area stays bare and every style goes on the child.
+    const shell = (_jsxs(View, { className: cn('flex-1 bg-background', className), ...props, children: [header, _jsx(View, { className: "flex-1", children: loading ? (skeleton ?? null) : children }), footer, bottomNav] }));
+    if (!safeArea)
+        return shell;
+    return _jsx(SafeAreaView, { style: styles.fill, children: shell });
 }
-//# sourceMappingURL=app-shell.js.map
+const styles = StyleSheet.create({ fill: { flex: 1 } });

package/dist/blocks/layout/confirm-action-sheet.d.ts

@@ -21,5 +21,4 @@ export interface ConfirmActionSheetProps extends Omit<ViewProps, 'children'>, Fr
     onCancel?: () => void;
     destructive?: boolean;
 }
-export declare function ConfirmActionSheet({ open, onOpenChange, title, description, actions, confirmLabel, cancelLabel, onConfirm, onCancel, destructive, className, style, frosted, blurIntensity, blurTintToken, ...props }: ConfirmActionSheetProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=confirm-action-sheet.d.ts.map
+export declare function ConfirmActionSheet({ open, onOpenChange, title, description, actions, confirmLabel, cancelLabel, onConfirm, onCancel, destructive, className, style, frosted, blurIntensity, blurTintToken, ...props }: ConfirmActionSheetProps): import("react").JSX.Element;

package/dist/blocks/layout/confirm-action-sheet.js

@@ -6,11 +6,14 @@ import { Text } from '../../components/text';
 import { cn } from '../../lib/cn';
 import { useThemeColors } from '../../lib/theme-colors';
 import { useInteractionTokens, withInteractivePressableStyle } from '../../lib/interaction-tokens';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { controlRecipe, surfacePadding, surfaceRadius, typographyStyle } from '../../lib/recipes';
 import { useFrostedSurface } from '../../lib/frosted-surface';
 export function ConfirmActionSheet({ open, onOpenChange, title, description, actions, confirmLabel = 'Confirm', cancelLabel = 'Cancel', onConfirm, onCancel, destructive = true, className, style, frosted = false, blurIntensity, blurTintToken, ...props }) {
     const insets = useSafeAreaInsets();
     const colors = useThemeColors();
     const interaction = useInteractionTokens();
+    const visual = useVisualTokens();
     const frostedSurface = useFrostedSurface({
         frosted,
         blurIntensity,
@@ -44,17 +47,26 @@ export function ConfirmActionSheet({ open, onOpenChange, title, description, act
             onOpenChange(false);
         }
     };
-    return (_jsx(Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: handleClose, children: _jsxs(View, { className: "flex-1 justify-end", style: { backgroundColor: colors.overlay }, children: [_jsx(Pressable, { className: "flex-1", onPress: handleClose }), _jsxs(View, { className: cn('rounded-t-lg border border-border px-4 pt-4 relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-background', className), style: [
-                        { paddingBottom: Math.max(insets.bottom, 12) },
+    return (_jsx(Modal, { visible: open, transparent: true, animationType: "fade", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: handleClose, children: _jsxs(View, { className: "flex-1 justify-end", style: { backgroundColor: colors.overlay }, children: [_jsx(Pressable, { accessible: false, importantForAccessibility: "no", className: "flex-1", onPress: handleClose }), _jsxs(View, { className: cn('border-border relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-background', className), style: [
+                        {
+                            borderTopLeftRadius: surfaceRadius(visual, 'xl'),
+                            borderTopRightRadius: surfaceRadius(visual, 'xl'),
+                            borderWidth: visual.borderWidthHairline,
+                            paddingHorizontal: surfacePadding(visual, 'sm'),
+                            paddingTop: surfacePadding(visual, 'sm'),
+                            paddingBottom: Math.max(insets.bottom, 12),
+                        },
                         frostedSurface.surfaceStyle,
                         style,
-                    ], ...props, children: [frostedSurface.overlay, _jsxs(View, { className: "mb-4 gap-1.5", children: [_jsx(Text, { className: "text-base font-semibold text-foreground", children: title }), description ? (_jsx(Text, { className: "text-sm text-muted-foreground", children: description })) : null] }), _jsx(View, { className: "gap-2", children: resolvedActions.map((action) => {
+                    ], ...props, children: [frostedSurface.overlay, _jsxs(View, { className: "mb-4 gap-1.5", children: [_jsx(Text, { className: "font-semibold text-foreground", style: typographyStyle(visual, 'body'), children: title }), description ? (_jsx(Text, { className: "text-muted-foreground", style: typographyStyle(visual, 'label'), children: description })) : null] }), _jsx(View, { className: "gap-2", children: resolvedActions.map((action) => {
                                 const isDestructive = action.variant === 'destructive';
                                 const isCancel = action.variant === 'cancel';
-                                return (_jsx(Pressable, { className: cn('min-h-11 items-center justify-center rounded-md border px-4 py-2', isCancel ? 'border-border bg-muted' : 'border-transparent bg-secondary', isDestructive && 'bg-destructive-soft border-destructive-soft-border', action.disabled && ''), style: withInteractivePressableStyle(undefined, interaction, {
+                                return (_jsx(Pressable, { className: cn('items-center justify-center', isCancel ? 'border-border bg-muted' : 'border-transparent bg-secondary', isDestructive && 'bg-destructive-soft border-destructive-soft-border', action.disabled && ''), style: withInteractivePressableStyle({
+                                        ...controlRecipe(visual, 'default'),
+                                        borderWidth: visual.borderWidthControl,
+                                    }, interaction, {
                                         disabled: Boolean(action.disabled),
                                         pressedVariant: 'default',
-                                    }), onPress: () => handleActionPress(action), disabled: action.disabled, accessibilityRole: "button", children: _jsx(Text, { className: cn('text-sm font-medium', isCancel ? 'text-foreground' : 'text-secondary-foreground', isDestructive && 'text-destructive'), children: action.label }) }, action.key));
+                                    }), onPress: () => handleActionPress(action), disabled: action.disabled, accessibilityRole: "button", children: _jsx(Text, { className: cn('font-medium', isCancel ? 'text-foreground' : 'text-secondary-foreground', isDestructive && 'text-destructive'), style: typographyStyle(visual, 'label'), children: action.label }) }, action.key));
                             }) })] })] }) }));
 }
-//# sourceMappingURL=confirm-action-sheet.js.map

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

@@ -5,5 +5,4 @@ export interface ContentSkeletonProps extends ViewProps {
     /** Number of list rows (list variant only). Default 4. */
     rows?: number;
 }
-export declare function ContentSkeleton({ variant, rows, className, ...props }: ContentSkeletonProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=content-skeleton.d.ts.map
+export declare function ContentSkeleton({ variant, rows, className, ...props }: ContentSkeletonProps): import("react").JSX.Element;

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

@@ -2,18 +2,32 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { View } from 'react-native';
 import { Skeleton } from '../../components/skeleton';
 import { cn } from '../../lib/cn';
-// ─── Component ───────────────────────────────────────────────
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { surfacePadding, surfaceRadius } from '../../lib/recipes';
 function ListRow() {
-    return (_jsxs(View, { className: "flex-row items-center gap-3 border-b border-border pb-4 mb-4", children: [_jsx(Skeleton, { className: "h-12 w-12 rounded-full shrink-0" }), _jsxs(View, { className: "flex-1 gap-2", children: [_jsx(Skeleton, { className: "h-4 w-3/4" }), _jsx(Skeleton, { className: "h-3 w-1/2" })] })] }));
+    const visual = useVisualTokens();
+    return (_jsxs(View, { className: "flex-row items-center gap-3 border-border mb-4", style: {
+            borderBottomWidth: visual.borderWidthHairline,
+            paddingBottom: surfacePadding(visual, 'sm'),
+        }, children: [_jsx(Skeleton, { className: "h-12 w-12 rounded-full shrink-0" }), _jsxs(View, { className: "flex-1 gap-2", children: [_jsx(Skeleton, { className: "h-4 w-3/4" }), _jsx(Skeleton, { className: "h-3 w-1/2" })] })] }));
 }
-function ListVariant({ className, rows = 4, ...props }) {
-    return (_jsx(View, { className: cn('p-4', className), ...props, children: Array.from({ length: rows }).map((_, i) => (_jsx(ListRow, {}, i))) }));
+function ListVariant({ className, rows = 4, style, ...props }) {
+    const visual = useVisualTokens();
+    return (_jsx(View, { className: className, style: [{ padding: surfacePadding(visual, 'sm') }, style], ...props, children: Array.from({ length: rows }).map((_, i) => (_jsx(ListRow, {}, i))) }));
 }
-function CardVariant({ className, ...props }) {
-    return (_jsxs(View, { className: cn('rounded-xl overflow-hidden bg-card border border-border', className), ...props, children: [_jsx(Skeleton, { className: "aspect-video w-full" }), _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" })] })] }));
+function CardVariant({ className, style, ...props }) {
+    const visual = useVisualTokens();
+    return (_jsxs(View, { className: cn('overflow-hidden bg-card border-border', className), style: [
+            {
+                borderRadius: surfaceRadius(visual, 'xl'),
+                borderWidth: visual.borderWidthHairline,
+            },
+            style,
+        ], ...props, children: [_jsx(Skeleton, { className: "aspect-video w-full" }), _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" })] })] }));
 }
-function GenericVariant({ className, ...props }) {
-    return (_jsxs(View, { className: cn('p-4 gap-4', className), ...props, children: [_jsx(Skeleton, { className: "h-6 w-1/2" }), _jsxs(View, { className: "gap-3", children: [_jsx(Skeleton, { className: "h-4 w-full" }), _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, style, ...props }) {
+    const visual = useVisualTokens();
+    return (_jsxs(View, { className: cn('gap-4', className), style: [{ padding: surfacePadding(visual, 'sm') }, style], ...props, children: [_jsx(Skeleton, { className: "h-6 w-1/2" }), _jsxs(View, { className: "gap-3", children: [_jsx(Skeleton, { className: "h-4 w-full" }), _jsx(Skeleton, { className: "h-4 w-full" }), _jsx(Skeleton, { className: "h-4 w-5/6" }), _jsx(Skeleton, { className: "h-4 w-4/5" })] })] }));
 }
 export function ContentSkeleton({ variant = 'list', rows = 4, className, ...props }) {
     if (variant === 'list') {
@@ -24,4 +38,3 @@ export function ContentSkeleton({ variant = 'list', rows = 4, className, ...prop
     }
     return _jsx(GenericVariant, { className: className, ...props });
 }
-//# sourceMappingURL=content-skeleton.js.map

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

@@ -0,0 +1,11 @@
+import { type ViewProps } from 'react-native';
+export interface DockedInputProps extends ViewProps {
+    safeArea?: boolean;
+    /** Reports the complete dock height for the scroll area's bottom inset. */
+    onHeightChange?: (height: number) => void;
+}
+/** Bottom-edge container intended for use inside `KeyboardAwareScreen`. */
+export declare function DockedInput({ safeArea, onHeightChange, onLayout, className, style, ...props }: DockedInputProps): import("react").JSX.Element;
+export declare namespace DockedInput {
+    var displayName: string;
+}

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { cn } from '../../lib/cn';
+import { surfacePadding } from '../../lib/recipes';
+import { useVisualTokens } from '../../lib/visual-tokens';
+/** Bottom-edge container intended for use inside `KeyboardAwareScreen`. */
+export function DockedInput({ safeArea = true, onHeightChange, onLayout, className, style, ...props }) {
+    const insets = useSafeAreaInsets();
+    const visual = useVisualTokens();
+    const handleLayout = useCallback((event) => {
+        onLayout?.(event);
+        onHeightChange?.(event.nativeEvent.layout.height);
+    }, [onHeightChange, onLayout]);
+    return (_jsx(View, { pointerEvents: "box-none", className: cn('absolute inset-x-0 bottom-0', className), style: [
+            {
+                paddingHorizontal: surfacePadding(visual, 'sm'),
+                paddingTop: visual.controlPaddingYSm,
+                paddingBottom: safeArea
+                    ? Math.max(insets.bottom, visual.controlPaddingYSm)
+                    : visual.controlPaddingYSm,
+            },
+            style,
+        ], onLayout: handleLayout, ...props }));
+}
+DockedInput.displayName = 'DockedInput';

package/dist/blocks/layout/empty-state.d.ts

@@ -13,5 +13,4 @@ export interface EmptyStateProps extends ViewProps {
         onPress: () => void;
     };
 }
-export declare function EmptyState({ icon, title, description, action, secondaryAction, className, ...props }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=empty-state.d.ts.map
+export declare function EmptyState({ icon, title, description, action, secondaryAction, className, style, ...props }: EmptyStateProps): React.JSX.Element;

package/dist/blocks/layout/empty-state.js

@@ -3,11 +3,16 @@ import { View } from 'react-native';
 import { Text } from '../../components/text';
 import { Button, ButtonText } from '../../components/button';
 import { cn } from '../../lib/cn';
-// ─── Component ───────────────────────────────────────────────
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { surfacePadding, typographyStyle } from '../../lib/recipes';
 function DefaultEmptyIcon() {
-    return (_jsx(View, { className: "mb-6 h-14 w-14 items-center justify-center rounded-2xl border-2 border-dashed border-muted", children: _jsx(View, { className: "h-4 w-5 rounded-sm border border-muted-foreground" }) }));
+    const visual = useVisualTokens();
+    return (_jsx(View, { className: "mb-6 h-14 w-14 items-center justify-center border-dashed border-muted", style: {
+            borderRadius: visual.radiusLg,
+            borderWidth: visual.borderWidthEmphasis,
+        }, children: _jsx(View, { className: "h-4 w-5 rounded-sm border-muted-foreground", style: { borderWidth: visual.borderWidthHairline } }) }));
 }
-export function EmptyState({ icon, title, description, action, secondaryAction, className, ...props }) {
-    return (_jsxs(View, { className: cn('flex-1 items-center justify-center p-8', className), ...props, children: [_jsx(View, { className: "mb-6", children: icon ? _jsx(View, { className: "text-muted-foreground", children: icon }) : _jsx(DefaultEmptyIcon, {}) }), _jsx(Text, { className: "mb-2 text-center text-xl font-semibold text-foreground", children: title }), description && (_jsx(Text, { className: "mb-6 max-w-xs text-center text-muted-foreground", children: description })), action && (_jsx(Button, { onPress: action.onPress, className: "mb-3", children: _jsx(ButtonText, { children: action.label }) })), secondaryAction && (_jsx(Button, { variant: "ghost", onPress: secondaryAction.onPress, children: _jsx(ButtonText, { children: secondaryAction.label }) }))] }));
+export function EmptyState({ icon, title, description, action, secondaryAction, className, style, ...props }) {
+    const visual = useVisualTokens();
+    return (_jsxs(View, { className: cn('flex-1 items-center justify-center', className), style: [{ padding: surfacePadding(visual, 'lg') }, style], ...props, children: [_jsx(View, { className: "mb-6", children: icon ? _jsx(View, { className: "text-muted-foreground", children: icon }) : _jsx(DefaultEmptyIcon, {}) }), _jsx(Text, { className: "mb-2 text-center font-semibold text-foreground", style: typographyStyle(visual, 'title'), children: title }), description && (_jsx(Text, { className: "mb-6 max-w-xs text-center text-muted-foreground", children: description })), action && (_jsx(Button, { onPress: action.onPress, className: "mb-3", children: _jsx(ButtonText, { children: action.label }) })), secondaryAction && (_jsx(Button, { variant: "ghost", onPress: secondaryAction.onPress, children: _jsx(ButtonText, { children: secondaryAction.label }) }))] }));
 }
-//# sourceMappingURL=empty-state.js.map

package/dist/blocks/layout/error-boundary.d.ts

@@ -14,7 +14,6 @@ export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBo
     static getDerivedStateFromError(error: Error): ErrorBoundaryState;
     componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
     reset: () => void;
-    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
 }
 export {};
-//# sourceMappingURL=error-boundary.d.ts.map

package/dist/blocks/layout/error-boundary.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import { ErrorState } from './error-state';
-// ─── Component ───────────────────────────────────────────────
 export class ErrorBoundary extends Component {
     state = { error: null };
     static getDerivedStateFromError(error) {
@@ -28,4 +27,3 @@ export class ErrorBoundary extends Component {
         return children;
     }
 }
-//# sourceMappingURL=error-boundary.js.map

package/dist/blocks/layout/error-state.d.ts

@@ -8,5 +8,4 @@ export interface ErrorStateProps extends ViewProps {
     onRetry?: () => void;
     retryLabel?: string;
 }
-export declare function ErrorState({ icon, title, description, error, onRetry, retryLabel, className, ...props }: ErrorStateProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=error-state.d.ts.map
+export declare function ErrorState({ icon, title, description, error, onRetry, retryLabel, className, ...props }: ErrorStateProps): React.JSX.Element;

package/dist/blocks/layout/error-state.js

@@ -3,11 +3,9 @@ import { View } from 'react-native';
 import { Text } from '../../components/text';
 import { Button, ButtonText } from '../../components/button';
 import { cn } from '../../lib/cn';
-// ─── Component ───────────────────────────────────────────────
 export function ErrorState({ icon, title = 'Something went wrong', description, error, onRetry, retryLabel = 'Try again', className, ...props }) {
     const errorMessage = description ||
         (error instanceof Error ? error.message : error) ||
         'An unexpected error occurred';
     return (_jsxs(View, { className: cn('flex-1 items-center justify-center p-8', className), ...props, children: [icon && _jsx(View, { className: "mb-6 text-destructive", children: icon }), _jsx(Text, { className: "mb-2 text-center text-xl font-semibold text-foreground", children: title }), _jsx(Text, { className: "mb-6 max-w-xs text-center text-muted-foreground", children: errorMessage }), onRetry && (_jsx(Button, { onPress: onRetry, children: _jsx(ButtonText, { children: retryLabel }) }))] }));
 }
-//# sourceMappingURL=error-state.js.map

package/dist/blocks/layout/form-modal-screen.d.ts

@@ -17,6 +17,5 @@ export interface FormModalScreenProps extends Omit<ViewProps, 'className'> {
     scrollEnabled?: boolean;
     children: React.ReactNode;
 }
-declare function FormModalScreen({ className, title, subtitle, leftSlot, rightSlot, onClose, loading, saving, savingText, loadingSpinnerColor, savingSpinnerColor, scrollEnabled, children, ...props }: FormModalScreenProps): import("react/jsx-runtime").JSX.Element;
+declare function FormModalScreen({ className, title, subtitle, leftSlot, rightSlot, onClose, loading, saving, savingText, loadingSpinnerColor, savingSpinnerColor, scrollEnabled, children, ...props }: FormModalScreenProps): React.JSX.Element;
 export { FormModalScreen };
-//# sourceMappingURL=form-modal-screen.d.ts.map