@thewhileloop/whileui 1.2.2 → 2.0.0

package/dist/blocks/navigation/header.d.ts

@@ -14,10 +14,9 @@ export interface HeaderProps extends ViewProps {
     transparent?: boolean;
     border?: boolean;
 }
-export declare function Header({ title, subtitle, leftAction, rightActions, centerContent, transparent, border, className, ...props }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ title, subtitle, leftAction, rightActions, centerContent, transparent, border, className, style, ...props }: HeaderProps): React.JSX.Element;
 export interface HeaderBackButtonProps extends Omit<PressableProps, 'children'> {
     icon?: React.ReactNode;
     label?: string;
 }
-export declare function HeaderBackButton({ icon, label, className, style: styleProp, ...props }: HeaderBackButtonProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=header.d.ts.map
+export declare function HeaderBackButton({ icon, label, className, style: styleProp, ...props }: HeaderBackButtonProps): React.JSX.Element;

package/dist/blocks/navigation/header.js

@@ -3,19 +3,27 @@ import { View, Pressable } from 'react-native';
 import { Text } from '../../components/text';
 import { cn } from '../../lib/cn';
 import { useInteractionTokens, withInteractivePressableStyle } from '../../lib/interaction-tokens';
-// ─── Component ───────────────────────────────────────────────
-export function Header({ title, subtitle, leftAction, rightActions, centerContent, transparent = false, border = true, className, ...props }) {
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { typographyStyle } from '../../lib/recipes';
+export function Header({ title, subtitle, leftAction, rightActions, centerContent, transparent = false, border = true, className, style, ...props }) {
     const interaction = useInteractionTokens();
-    return (_jsxs(View, { className: cn('flex-row items-center px-4 py-3', !transparent && 'bg-background', border && 'border-b border-border', className), ...props, children: [_jsx(View, { className: "min-w-12", children: leftAction }), _jsx(View, { className: "flex-1 items-center", children: centerContent || (_jsxs(View, { className: "items-center", children: [title && (_jsx(Text, { className: "text-base font-semibold text-foreground", numberOfLines: 1, children: title })), subtitle && (_jsx(Text, { className: "text-xs text-muted-foreground", numberOfLines: 1, children: subtitle }))] })) }), _jsx(View, { className: "min-w-12 flex-row items-center justify-end gap-2", children: rightActions?.map((action) => (_jsx(Pressable, { onPress: action.onPress, className: "rounded-full p-2 active:bg-accent", style: withInteractivePressableStyle(undefined, interaction, {
+    const visual = useVisualTokens();
+    return (_jsxs(View, { className: cn('flex-row items-center', !transparent && 'bg-background', border && 'border-b border-border', className), style: [
+            {
+                paddingHorizontal: visual.controlPaddingXDefault,
+                paddingVertical: visual.controlPaddingYDefault,
+            },
+            style,
+        ], ...props, children: [_jsx(View, { className: "min-w-12", children: leftAction }), _jsx(View, { className: "flex-1 items-center", children: centerContent || (_jsxs(View, { className: "items-center", children: [title && (_jsx(Text, { className: "font-semibold text-foreground", style: typographyStyle(visual, 'body'), numberOfLines: 1, children: title })), subtitle && (_jsx(Text, { className: "text-muted-foreground", style: typographyStyle(visual, 'caption'), numberOfLines: 1, children: subtitle }))] })) }), _jsx(View, { className: "min-w-12 flex-row items-center justify-end gap-2", children: rightActions?.map((action) => (_jsx(Pressable, { accessibilityRole: "button", onPress: action.onPress, className: "rounded-full p-2 active:bg-accent", style: withInteractivePressableStyle(undefined, interaction, {
                         pressedVariant: 'default',
                     }), children: action.icon }, action.key))) })] }));
 }
 export function HeaderBackButton({ icon, label, className, style: styleProp, ...props }) {
     const interaction = useInteractionTokens();
+    const visual = useVisualTokens();
     const interactiveStyle = withInteractivePressableStyle(styleProp, interaction, {
         disabled: Boolean(props.disabled),
         pressedVariant: 'default',
     });
-    return (_jsxs(Pressable, { className: cn('flex-row items-center gap-1 rounded-full py-1', className), style: interactiveStyle, ...props, children: [icon || _jsx(Text, { className: "text-xl text-primary", children: "\u2039" }), label && _jsx(Text, { className: "text-base text-primary", children: label })] }));
+    return (_jsxs(Pressable, { className: cn('flex-row items-center gap-1 rounded-full py-1', className), style: interactiveStyle, ...props, children: [icon || (_jsx(Text, { className: "text-primary", style: typographyStyle(visual, 'title'), children: "\u2039" })), label && (_jsx(Text, { className: "text-primary", style: typographyStyle(visual, 'body'), children: label }))] }));
 }
-//# sourceMappingURL=header.js.map

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

@@ -3,5 +3,3 @@ export { FloatingBottomNav, type FloatingBottomNavItem, type FloatingBottomNavPr
 export { Header, HeaderBackButton, type HeaderAction, type HeaderBackButtonProps, type HeaderProps, } from './header';
 export { TabBar, type TabBarItem, type TabBarProps } from './tab-bar';
 export { DrawerMenu, type DrawerMenuItem, type DrawerMenuSection, type DrawerMenuProps, } from './drawer-menu';
-export { NavigationSidebar, type NavigationSidebarItem, type NavigationSidebarSection, type NavigationSidebarProps, } from './navigation-sidebar';
-//# sourceMappingURL=index.d.ts.map

package/dist/blocks/navigation/index.js

@@ -3,5 +3,3 @@ export { FloatingBottomNav, } from './floating-bottom-nav';
 export { Header, HeaderBackButton, } from './header';
 export { TabBar } from './tab-bar';
 export { DrawerMenu, } from './drawer-menu';
-export { NavigationSidebar, } from './navigation-sidebar';
-//# sourceMappingURL=index.js.map

package/dist/blocks/navigation/tab-bar.d.ts

@@ -17,5 +17,4 @@ export interface TabBarItemProps extends Omit<PressableProps, 'children'> {
     isActive: boolean;
     variant: 'default' | 'pills' | 'underline';
 }
-export declare function TabBar({ items, activeKey, onSelect, variant, scrollable, className, ...props }: TabBarProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=tab-bar.d.ts.map
+export declare function TabBar({ items, activeKey, onSelect, variant, scrollable, className, style, ...props }: TabBarProps): React.JSX.Element;

package/dist/blocks/navigation/tab-bar.js

@@ -3,32 +3,44 @@ import { View, Pressable, ScrollView } from 'react-native';
 import { Text } from '../../components/text';
 import { cn } from '../../lib/cn';
 import { useInteractionTokens, withInteractivePressableStyle } from '../../lib/interaction-tokens';
-// ─── Components ──────────────────────────────────────────────
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { typographyStyle } from '../../lib/recipes';
 function TabBarItemComponent({ item, isActive, variant, className, style: styleProp, ...props }) {
     const { label, icon } = item;
     const interaction = useInteractionTokens();
+    const visual = useVisualTokens();
+    const showUnderline = variant === 'default' || (variant === 'underline' && isActive);
+    const tokenStyle = {
+        paddingHorizontal: visual.controlPaddingXDefault,
+        paddingVertical: visual.controlPaddingYSm,
+        ...(variant === 'pills' ? { borderRadius: visual.badgeRadius } : null),
+        ...(showUnderline ? { borderBottomWidth: visual.borderWidthEmphasis } : null),
+    };
     const interactiveStyle = withInteractivePressableStyle(styleProp, interaction, {
         disabled: Boolean(props.disabled),
         pressedVariant: 'default',
     });
-    const baseStyles = 'flex-row items-center justify-center gap-2 px-4 py-2';
+    const baseStyles = 'flex-row items-center justify-center gap-2';
     const variantStyles = {
-        default: isActive ? 'border-b-2 border-primary' : 'border-b-2 border-transparent',
-        pills: isActive ? 'bg-primary rounded-full' : 'rounded-full',
-        underline: isActive ? 'border-b-2 border-primary' : '',
+        default: isActive ? 'border-primary' : 'border-transparent',
+        pills: isActive ? 'bg-primary' : '',
+        underline: isActive ? 'border-primary' : '',
     };
     const textStyles = {
         default: isActive ? 'text-primary font-medium' : 'text-muted-foreground font-medium',
         pills: isActive ? 'text-primary-foreground font-medium' : 'text-muted-foreground font-medium',
         underline: isActive ? 'text-foreground font-medium' : 'text-muted-foreground font-medium',
     };
-    return (_jsxs(Pressable, { className: cn(baseStyles, variantStyles[variant], className), style: interactiveStyle, ...props, children: [icon && (_jsx(View, { className: isActive && variant === 'pills' ? 'text-primary-foreground' : '', children: icon })), _jsx(Text, { className: cn('text-sm', textStyles[variant]), children: label })] }));
+    return (_jsxs(Pressable, { accessibilityRole: "tab", accessibilityState: { selected: isActive }, "aria-selected": isActive, className: cn(baseStyles, variantStyles[variant], className), style: (state) => [
+            tokenStyle,
+            typeof interactiveStyle === 'function' ? interactiveStyle(state) : interactiveStyle,
+        ], ...props, children: [icon && (_jsx(View, { className: isActive && variant === 'pills' ? 'text-primary-foreground' : '', children: icon })), _jsx(Text, { className: cn(textStyles[variant]), style: typographyStyle(visual, 'label'), children: label })] }));
 }
-export function TabBar({ items, activeKey, onSelect, variant = 'default', scrollable = false, className, ...props }) {
-    const content = (_jsx(View, { className: cn('flex-row', variant === 'pills' && 'gap-1 rounded-full bg-muted p-1', variant === 'default' && 'border-b border-border', !scrollable && 'justify-around', className), ...props, children: items.map((item) => (_jsx(TabBarItemComponent, { item: item, isActive: activeKey === item.key, variant: variant, onPress: () => onSelect(item.key) }, item.key))) }));
+export function TabBar({ items, activeKey, onSelect, variant = 'default', scrollable = false, className, style, ...props }) {
+    const visual = useVisualTokens();
+    const content = (_jsx(View, { accessibilityRole: "tablist", className: cn('flex-row', variant === 'pills' && 'gap-1 bg-muted p-1', variant === 'default' && 'border-b border-border', !scrollable && 'justify-around', className), style: [variant === 'pills' ? { borderRadius: visual.badgeRadius } : null, style], ...props, children: items.map((item) => (_jsx(TabBarItemComponent, { item: item, isActive: activeKey === item.key, variant: variant, onPress: () => onSelect(item.key) }, item.key))) }));
     if (scrollable) {
-        return (_jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: { paddingHorizontal: 16 }, children: content }));
+        return (_jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: { paddingHorizontal: visual.surfacePaddingSm }, children: content }));
     }
     return content;
 }
-//# sourceMappingURL=tab-bar.js.map

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

@@ -1,2 +1 @@
 export { SplashScreen, MinimalSplash, BrandedSplash, type SplashScreenProps, type MinimalSplashProps, type BrandedSplashProps, } from './splash-screen';
-//# sourceMappingURL=index.d.ts.map

package/dist/blocks/splash/index.js

@@ -1,2 +1 @@
 export { SplashScreen, MinimalSplash, BrandedSplash, } from './splash-screen';
-//# sourceMappingURL=index.js.map

package/dist/blocks/splash/splash-screen.d.ts

@@ -17,13 +17,12 @@ export interface SplashScreenProps extends ViewProps {
     /** Loading text */
     loadingText?: string;
 }
-export declare function SplashScreen({ appName, tagline, logo, variant, duration, onAnimationComplete, showLoading, loadingText, className, ...props }: SplashScreenProps): import("react/jsx-runtime").JSX.Element;
+export declare function SplashScreen({ appName, tagline, logo, variant, duration, onAnimationComplete, showLoading, loadingText, className, ...props }: SplashScreenProps): import("react").JSX.Element;
 export interface MinimalSplashProps extends Omit<SplashScreenProps, 'variant'> {
 }
 /** Minimal splash with just logo and name */
-export declare function MinimalSplash(props: MinimalSplashProps): import("react/jsx-runtime").JSX.Element;
+export declare function MinimalSplash(props: MinimalSplashProps): import("react").JSX.Element;
 export interface BrandedSplashProps extends Omit<SplashScreenProps, 'variant' | 'showLoading'> {
 }
 /** Branded splash with scale animation and loading */
-export declare function BrandedSplash(props: BrandedSplashProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=splash-screen.d.ts.map
+export declare function BrandedSplash(props: BrandedSplashProps): import("react").JSX.Element;

package/dist/blocks/splash/splash-screen.js

@@ -4,31 +4,29 @@ import { View } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, withDelay, withRepeat, withSequence, Easing, } from 'react-native-reanimated';
 import { Text } from '../../components/text';
 import { cn } from '../../lib/cn';
-// ─── Animated Components ─────────────────────────────────────
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { typographyStyle } from '../../lib/recipes';
 const AnimatedView = Animated.createAnimatedComponent(View);
-// ─── Loading Dot Component ───────────────────────────────────
 function LoadingDot({ delay }) {
     const scale = useSharedValue(0.6);
     const opacity = useSharedValue(0.3);
     useEffect(() => {
         scale.value = withDelay(delay, withRepeat(withSequence(withTiming(1, { duration: 400, easing: Easing.out(Easing.cubic) }), withTiming(0.6, { duration: 400, easing: Easing.in(Easing.cubic) })), -1, false));
         opacity.value = withDelay(delay, withRepeat(withSequence(withTiming(1, { duration: 400, easing: Easing.out(Easing.cubic) }), withTiming(0.3, { duration: 400, easing: Easing.in(Easing.cubic) })), -1, false));
-    }, [delay]);
+    }, [delay, opacity, scale]);
     const animatedStyle = useAnimatedStyle(() => ({
         transform: [{ scale: scale.value }],
         opacity: opacity.value,
     }));
     return (_jsx(AnimatedView, { style: animatedStyle, className: "h-2 w-2 rounded-full bg-muted-foreground" }));
 }
-// ─── Component ───────────────────────────────────────────────
 export function SplashScreen({ appName, tagline, logo, variant = 'scale', duration = 800, onAnimationComplete, showLoading = false, loadingText, className, ...props }) {
-    // Animation values
+    const visual = useVisualTokens();
     const opacity = useSharedValue(0);
     const scale = useSharedValue(variant === 'scale' ? 0.8 : 1);
     const translateY = useSharedValue(variant === 'slide' ? 30 : 0);
     const loadingOpacity = useSharedValue(0);
     useEffect(() => {
-        // Main content animation
         opacity.value = withTiming(1, {
             duration: duration * 0.6,
             easing: Easing.out(Easing.cubic),
@@ -45,16 +43,23 @@ export function SplashScreen({ appName, tagline, logo, variant = 'scale', durati
                 easing: Easing.out(Easing.cubic),
             });
         }
-        // Loading indicator fade in
         if (showLoading) {
             loadingOpacity.value = withDelay(duration * 0.5, withTiming(1, { duration: 400 }));
         }
-        // Callback after animation
         if (onAnimationComplete) {
             const timer = setTimeout(onAnimationComplete, duration);
             return () => clearTimeout(timer);
         }
-    }, [variant, duration, showLoading, onAnimationComplete]);
+    }, [
+        duration,
+        loadingOpacity,
+        onAnimationComplete,
+        opacity,
+        scale,
+        showLoading,
+        translateY,
+        variant,
+    ]);
     const containerStyle = useAnimatedStyle(() => ({
         opacity: opacity.value,
         transform: [{ scale: scale.value }, { translateY: translateY.value }],
@@ -62,7 +67,7 @@ export function SplashScreen({ appName, tagline, logo, variant = 'scale', durati
     const loadingStyle = useAnimatedStyle(() => ({
         opacity: loadingOpacity.value,
     }));
-    return (_jsxs(View, { className: cn('flex-1 items-center justify-center bg-background', className), ...props, children: [_jsxs(AnimatedView, { style: containerStyle, className: "items-center", children: [logo && _jsx(View, { className: "mb-6", children: logo }), appName && (_jsx(Text, { className: "text-4xl font-bold text-foreground tracking-tight", children: appName })), tagline && (_jsx(Text, { className: "mt-2 text-base text-muted-foreground text-center px-8", children: tagline }))] }), showLoading && (_jsxs(AnimatedView, { style: loadingStyle, className: "absolute bottom-20 items-center", children: [_jsxs(View, { className: "flex-row items-center gap-2", children: [_jsx(LoadingDot, { delay: 0 }), _jsx(LoadingDot, { delay: 150 }), _jsx(LoadingDot, { delay: 300 })] }), loadingText && _jsx(Text, { className: "mt-3 text-sm text-muted-foreground", children: loadingText })] }))] }));
+    return (_jsxs(View, { className: cn('flex-1 items-center justify-center bg-background', className), ...props, children: [_jsxs(AnimatedView, { style: containerStyle, className: "items-center", children: [logo && _jsx(View, { className: "mb-6", children: logo }), appName && (_jsx(Text, { className: "text-4xl font-bold text-foreground tracking-tight", children: appName })), tagline && (_jsx(Text, { className: "mt-2 text-muted-foreground text-center px-8", style: typographyStyle(visual, 'body'), children: tagline }))] }), showLoading && (_jsxs(AnimatedView, { style: loadingStyle, className: "absolute bottom-20 items-center", children: [_jsxs(View, { className: "flex-row items-center gap-2", children: [_jsx(LoadingDot, { delay: 0 }), _jsx(LoadingDot, { delay: 150 }), _jsx(LoadingDot, { delay: 300 })] }), loadingText && (_jsx(Text, { className: "mt-3 text-muted-foreground", style: typographyStyle(visual, 'label'), children: loadingText }))] }))] }));
 }
 /** Minimal splash with just logo and name */
 export function MinimalSplash(props) {
@@ -72,4 +77,3 @@ export function MinimalSplash(props) {
 export function BrandedSplash(props) {
     return _jsx(SplashScreen, { variant: "scale", showLoading: true, ...props });
 }
-//# sourceMappingURL=splash-screen.js.map

package/dist/components/accordion/accordion.d.ts

@@ -18,21 +18,20 @@ export interface AccordionTriggerProps extends Omit<PressableProps, 'children'>
 export interface AccordionContentProps extends ViewProps {
     className?: string;
 }
-declare function Accordion({ type, defaultValue, collapsible, className, children, ...props }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+declare function Accordion({ type, defaultValue, collapsible, className, children, ...props }: AccordionProps): React.JSX.Element;
 declare namespace Accordion {
     var displayName: string;
 }
-declare function AccordionItem({ value, className, children, ...props }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+declare function AccordionItem({ value, className, children, ...props }: AccordionItemProps): React.JSX.Element;
 declare namespace AccordionItem {
     var displayName: string;
 }
-declare function AccordionTrigger({ className, children, style: styleProp, ...props }: AccordionTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function AccordionTrigger({ className, children, style: styleProp, ...props }: AccordionTriggerProps): React.JSX.Element;
 declare namespace AccordionTrigger {
     var displayName: string;
 }
-declare function AccordionContent({ className, children, ...props }: AccordionContentProps): import("react/jsx-runtime").JSX.Element | null;
+declare function AccordionContent({ className, children, ...props }: AccordionContentProps): React.JSX.Element | null;
 declare namespace AccordionContent {
     var displayName: string;
 }
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
-//# sourceMappingURL=accordion.d.ts.map

package/dist/components/accordion/accordion.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { createContext, useContext, useState, useCallback } from 'react';
+import React, { createContext, useContext, useState, useCallback, useMemo } from 'react';
 import { View, Pressable } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, } from 'react-native-reanimated';
 import { cn } from '../../lib/cn';
@@ -14,7 +14,6 @@ const AccordionItemContext = createContext({
     value: '',
     isOpen: false,
 });
-// ─── Components ──────────────────────────────────────────────
 function Accordion({ type = 'single', defaultValue, collapsible = true, className, children, ...props }) {
     const [value, setValue] = useState(() => {
         if (!defaultValue)
@@ -35,12 +34,14 @@ function Accordion({ type = 'single', defaultValue, collapsible = true, classNam
             return [...prev, itemValue];
         });
     }, [type, collapsible]);
-    return (_jsx(AccordionContext.Provider, { value: { type, value, onValueChange, collapsible }, children: _jsx(View, { className: cn('w-full', className), ...props, children: children }) }));
+    const contextValue = useMemo(() => ({ type, value, onValueChange, collapsible }), [collapsible, onValueChange, type, value]);
+    return (_jsx(AccordionContext.Provider, { value: contextValue, children: _jsx(View, { className: cn('w-full', className), ...props, children: children }) }));
 }
 function AccordionItem({ value, className, children, ...props }) {
     const { value: selectedValues } = useContext(AccordionContext);
     const isOpen = selectedValues.includes(value);
-    return (_jsx(AccordionItemContext.Provider, { value: { value, isOpen }, children: _jsx(View, { className: cn('border-b border-border', className), ...props, children: children }) }));
+    const contextValue = useMemo(() => ({ value, isOpen }), [isOpen, value]);
+    return (_jsx(AccordionItemContext.Provider, { value: contextValue, children: _jsx(View, { className: cn('border-b border-border', className), ...props, children: children }) }));
 }
 function AccordionTrigger({ className, children, style: styleProp, ...props }) {
     const { onValueChange } = useContext(AccordionContext);
@@ -49,7 +50,7 @@ function AccordionTrigger({ className, children, style: styleProp, ...props }) {
     const interactiveStyle = withInteractivePressableStyle(styleProp, interaction, {
         pressedVariant: 'default',
     });
-    return (_jsxs(Pressable, { className: cn('flex flex-row items-center justify-between py-4', className), onPress: () => onValueChange(value), style: interactiveStyle, ...props, children: [children, _jsx(View, { className: cn('border-foreground h-2 w-2 rotate-45 border-b-2 border-r-2 transition-transform', isOpen && 'rotate-[225deg]') })] }));
+    return (_jsxs(Pressable, { accessibilityRole: "button", className: cn('flex flex-row items-center justify-between py-4', className), onPress: () => onValueChange(value), style: interactiveStyle, ...props, children: [children, _jsx(View, { className: cn('border-foreground h-2 w-2 rotate-45 border-b-2 border-r-2 transition-transform', isOpen && 'rotate-[225deg]') })] }));
 }
 function AccordionContent({ className, children, ...props }) {
     const { isOpen } = useContext(AccordionItemContext);
@@ -72,6 +73,4 @@ Accordion.displayName = 'Accordion';
 AccordionItem.displayName = 'AccordionItem';
 AccordionTrigger.displayName = 'AccordionTrigger';
 AccordionContent.displayName = 'AccordionContent';
-// ─── Exports ─────────────────────────────────────────────────
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
-//# sourceMappingURL=accordion.js.map

package/dist/components/accordion/index.d.ts

@@ -1,2 +1 @@
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, type AccordionProps, type AccordionItemProps, type AccordionTriggerProps, type AccordionContentProps, } from './accordion';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/accordion/index.js

@@ -1,2 +1 @@
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, } from './accordion';
-//# sourceMappingURL=index.js.map

package/dist/components/alert/alert.d.ts

@@ -9,7 +9,7 @@ declare const alertVariants: import("tailwind-variants").TVReturnType<{
         warning: string;
         info: string;
     };
-}, undefined, "w-full rounded-lg border p-4", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "w-full border", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         destructive: string;
@@ -41,7 +41,7 @@ declare const alertVariants: import("tailwind-variants").TVReturnType<{
         warning: string;
         info: string;
     };
-}, undefined, "w-full rounded-lg border p-4", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "w-full border", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         destructive: string;
@@ -68,4 +68,3 @@ export interface AlertDescriptionProps extends TextProps {
 }
 declare const AlertDescription: React.ForwardRefExoticComponent<AlertDescriptionProps & React.RefAttributes<Text>>;
 export { Alert, AlertTitle, AlertDescription, alertVariants };
-//# sourceMappingURL=alert.d.ts.map

package/dist/components/alert/alert.js

@@ -3,8 +3,10 @@ import React from 'react';
 import { View, Text } from 'react-native';
 import { cn } from '../../lib/cn';
 import { tv } from '../../lib/tv';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { surfacePadding, surfaceRadius, typographyStyle } from '../../lib/recipes';
 const alertVariants = tv({
-    base: 'w-full rounded-lg border p-4',
+    base: 'w-full border',
     variants: {
         variant: {
             default: 'border-border bg-background',
@@ -18,17 +20,26 @@ const alertVariants = tv({
         variant: 'default',
     },
 });
-const Alert = React.forwardRef(({ className, variant, ...props }, ref) => {
-    return _jsx(View, { ref: ref, className: cn(alertVariants({ variant }), className), ...props });
+const Alert = React.forwardRef(({ className, variant, style, ...props }, ref) => {
+    const visual = useVisualTokens();
+    return (_jsx(View, { ref: ref, className: cn(alertVariants({ variant }), className), style: [
+            {
+                borderRadius: surfaceRadius(visual, 'lg'),
+                borderWidth: visual.borderWidthHairline,
+                padding: surfacePadding(visual, 'sm'),
+            },
+            style,
+        ], ...props }));
 });
 Alert.displayName = 'Alert';
-const AlertTitle = React.forwardRef(({ className, ...props }, ref) => {
-    return (_jsx(Text, { ref: ref, className: cn('mb-1 text-base font-semibold text-foreground', className), ...props }));
+const AlertTitle = React.forwardRef(({ className, style, ...props }, ref) => {
+    const visual = useVisualTokens();
+    return (_jsx(Text, { ref: ref, className: cn('mb-1 font-semibold text-foreground', className), style: [typographyStyle(visual, 'body'), style], ...props }));
 });
 AlertTitle.displayName = 'AlertTitle';
-const AlertDescription = React.forwardRef(({ className, ...props }, ref) => {
-    return _jsx(Text, { ref: ref, className: cn('text-sm text-muted-foreground', className), ...props });
+const AlertDescription = React.forwardRef(({ className, style, ...props }, ref) => {
+    const visual = useVisualTokens();
+    return (_jsx(Text, { ref: ref, className: cn('text-muted-foreground', className), style: [typographyStyle(visual, 'label'), style], ...props }));
 });
 AlertDescription.displayName = 'AlertDescription';
 export { Alert, AlertTitle, AlertDescription, alertVariants };
-//# sourceMappingURL=alert.js.map

package/dist/components/alert/index.d.ts

@@ -1,2 +1 @@
 export { Alert, AlertTitle, AlertDescription, alertVariants, type AlertProps, type AlertTitleProps, type AlertDescriptionProps, } from './alert';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/alert/index.js

@@ -1,2 +1 @@
 export { Alert, AlertTitle, AlertDescription, alertVariants, } from './alert';
-//# sourceMappingURL=index.js.map

package/dist/components/alert-dialog/alert-dialog.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import { type ViewProps, type TextProps, type PressableProps } from 'react-native';
 import { type FrostedSurfaceProps } from '../../lib/frosted-surface';
-export type AlertDialogPresentation = 'modal' | 'native';
+/** `overlay` = themed UI as an absolute layer inside the parent (no second RN Modal). Mount inside your sheet `Modal` for app-styled confirms. */
+export type AlertDialogPresentation = 'modal' | 'native' | 'overlay';
 export interface AlertDialogProps {
     defaultOpen?: boolean;
     open?: boolean;
@@ -14,7 +15,11 @@ export interface AlertDialogTriggerProps extends PressableProps {
 }
 export interface AlertDialogContentProps extends ViewProps, FrostedSurfaceProps {
     className?: string;
-    /** @default 'modal' */
+    /**
+     * `modal` — RN `Modal` + themed card (default).
+     * `native` — `Alert.alert` on iOS/Android (system chrome); ignored on web.
+     * `overlay` — same themed card as `modal`, but absolute fill inside the parent view (nest inside your `Modal`).
+     */
     presentation?: AlertDialogPresentation;
 }
 export interface AlertDialogHeaderProps extends ViewProps {
@@ -36,41 +41,40 @@ export interface AlertDialogActionProps extends PressableProps {
 export interface AlertDialogCancelProps extends PressableProps {
     className?: string;
 }
-declare function AlertDialog({ defaultOpen, open: controlledOpen, onOpenChange, children, }: AlertDialogProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialog({ defaultOpen, open: controlledOpen, onOpenChange, children, }: AlertDialogProps): React.JSX.Element;
 declare namespace AlertDialog {
     var displayName: string;
 }
-declare function AlertDialogTrigger({ className, children, asChild, ...props }: AlertDialogTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogTrigger({ className, children, asChild, onPress, ...props }: AlertDialogTriggerProps): React.JSX.Element;
 declare namespace AlertDialogTrigger {
     var displayName: string;
 }
-declare function AlertDialogContent({ className, children, presentation, frosted, blurIntensity, blurTintToken, style, ...props }: AlertDialogContentProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogContent({ className, children, presentation, frosted, blurIntensity, blurTintToken, style, ...props }: AlertDialogContentProps): React.JSX.Element;
 declare namespace AlertDialogContent {
     var displayName: string;
 }
-declare function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps): React.JSX.Element;
 declare namespace AlertDialogHeader {
     var displayName: string;
 }
-declare function AlertDialogFooter({ className, ...props }: AlertDialogFooterProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: AlertDialogFooterProps): React.JSX.Element;
 declare namespace AlertDialogFooter {
     var displayName: string;
 }
-declare function AlertDialogTitle({ className, children, ...props }: AlertDialogTitleProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogTitle({ className, children, style, ...props }: AlertDialogTitleProps): React.JSX.Element;
 declare namespace AlertDialogTitle {
     var displayName: string;
 }
-declare function AlertDialogDescription({ className, children, ...props }: AlertDialogDescriptionProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogDescription({ className, children, style, ...props }: AlertDialogDescriptionProps): React.JSX.Element;
 declare namespace AlertDialogDescription {
     var displayName: string;
 }
-declare function AlertDialogAction({ className, children, asChild, ...props }: AlertDialogActionProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogAction({ className, children, asChild, onPress, ...props }: AlertDialogActionProps): React.JSX.Element;
 declare namespace AlertDialogAction {
     var displayName: string;
 }
-declare function AlertDialogCancel({ className, children, ...props }: AlertDialogCancelProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogCancel({ className, children, onPress, ...props }: AlertDialogCancelProps): React.JSX.Element;
 declare namespace AlertDialogCancel {
     var displayName: string;
 }
 export { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };
-//# sourceMappingURL=alert-dialog.d.ts.map