@thewhileloop/whileui 1.2.3 → 2.0.0

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

@@ -41,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

package/dist/components/alert-dialog/alert-dialog.js

@@ -1,9 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { createContext, useContext, useLayoutEffect, useRef, useState } from 'react';
+import React, { createContext, useCallback, useContext, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { View, Modal, Pressable, Text, Alert, Platform, StyleSheet, } from 'react-native';
 import { cn } from '../../lib/cn';
+import { composeEventHandlers } from '../../lib/compose-event-handlers';
+import { useInteractionTokens, withInteractivePressableStyle } from '../../lib/interaction-tokens';
 import { useThemeColors } from '../../lib/theme-colors';
 import { useFrostedSurface } from '../../lib/frosted-surface';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { shadowStyle, typographyStyle } from '../../lib/recipes';
 function emptyNativeCopy() {
     return {
         title: '',
@@ -19,13 +23,43 @@ function textFromNode(node) {
         return '';
     if (typeof node === 'string' || typeof node === 'number')
         return String(node);
-    if (Array.isArray(node))
-        return node.map(textFromNode).filter(Boolean).join(' ');
+    if (Array.isArray(node)) {
+        return node
+            .reduce((parts, child) => {
+            const text = textFromNode(child);
+            if (text)
+                parts.push(text);
+            return parts;
+        }, [])
+            .join(' ');
+    }
     if (React.isValidElement(node)) {
         return textFromNode(node.props.children);
     }
     return '';
 }
+/**
+ * Finds the `AlertDialogTitle` in a subtree and returns its text, so the panel can carry
+ * an accessible name from the same render that draws it. The native-alert path's copy ref
+ * cannot serve this: it is populated by child layout effects, which run after this render
+ * and never schedule another.
+ */
+function titleTextFromChildren(node) {
+    if (Array.isArray(node)) {
+        for (const child of node) {
+            const found = titleTextFromChildren(child);
+            if (found)
+                return found;
+        }
+        return '';
+    }
+    if (!React.isValidElement(node))
+        return '';
+    const children = node.props.children;
+    if (node.type === AlertDialogTitle)
+        return textFromNode(children);
+    return titleTextFromChildren(children);
+}
 /** Pressable children may be a render function; native alert only supports static labels. */
 function textFromPressableChildren(children) {
     if (typeof children === 'function')
@@ -38,30 +72,32 @@ const AlertDialogContext = createContext({
     setOpen: () => { },
     nativeCopyRef: fallbackNativeRef,
 });
-// ─── Components ──────────────────────────────────────────────
 function AlertDialog({ defaultOpen = false, open: controlledOpen, onOpenChange, children, }) {
     const [internalOpen, setInternalOpen] = useState(defaultOpen);
     const open = controlledOpen ?? internalOpen;
-    const nativeCopyRef = useRef(emptyNativeCopy());
-    const setOpen = (value) => {
-        setInternalOpen(value);
+    const [nativeCopyRef] = useState(() => ({
+        current: emptyNativeCopy(),
+    }));
+    const setOpen = useCallback((value) => {
+        if (controlledOpen === undefined) {
+            setInternalOpen(value);
+        }
         onOpenChange?.(value);
-    };
-    return (_jsx(AlertDialogContext.Provider, { value: { open, setOpen, nativeCopyRef }, children: children }));
+    }, [controlledOpen, onOpenChange]);
+    const contextValue = useMemo(() => ({ open, setOpen, nativeCopyRef }), [nativeCopyRef, open, setOpen]);
+    return _jsx(AlertDialogContext.Provider, { value: contextValue, children: children });
 }
-function AlertDialogTrigger({ className, children, asChild, ...props }) {
+function AlertDialogTrigger({ className, children, asChild, onPress, ...props }) {
     const { setOpen } = useContext(AlertDialogContext);
     if (asChild && React.isValidElement(children)) {
         const child = children;
         return React.cloneElement(child, {
-            onPress: (e) => {
-                child.props.onPress?.(e);
-                setOpen(true);
-            },
             ...props,
+            className: cn(child.props.className, className),
+            onPress: composeEventHandlers(composeEventHandlers(child.props.onPress, onPress), () => setOpen(true)),
         });
     }
-    return (_jsx(Pressable, { className: cn(className), onPress: () => setOpen(true), ...props, children: children }));
+    return (_jsx(Pressable, { accessibilityRole: "button", ...props, className: cn(className), onPress: composeEventHandlers(onPress, () => setOpen(true)), children: children }));
 }
 const nativeHiddenStyle = StyleSheet.create({
     root: {
@@ -77,6 +113,7 @@ const nativeHiddenStyle = StyleSheet.create({
 function AlertDialogContent({ className, children, presentation = 'modal', frosted = false, blurIntensity, blurTintToken, style, ...props }) {
     const { open, setOpen, nativeCopyRef } = useContext(AlertDialogContext);
     const colors = useThemeColors();
+    const visual = useVisualTokens();
     const frostedSurface = useFrostedSurface({
         frosted,
         blurIntensity,
@@ -147,7 +184,44 @@ function AlertDialogContent({ className, children, presentation = 'modal', frost
             prevOpenRef.current = false;
         };
     }, [open, useNativeAlert, setOpen, nativeCopyRef]);
-    const themedBody = (_jsx(View, { className: "flex-1 justify-center items-center px-4", style: { backgroundColor: colors.overlayStrong }, children: _jsxs(View, { className: cn('w-full max-w-lg rounded-lg border border-border p-6 shadow-lg relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-background', className), style: contentStyle, ...props, children: [frostedSurface.overlay, children] }) }));
+    const themedBody = (_jsx(Pressable
+    // Tap-to-dismiss is a pointer affordance. Left accessible, this Pressable would be
+    // a single accessibility element wrapping the entire dialog, so VoiceOver would
+    // reach one "dismiss" target and none of the buttons inside it. Screen reader users
+    // dismiss with Cancel.
+    , { 
+        // Tap-to-dismiss is a pointer affordance. Left accessible, this Pressable would be
+        // a single accessibility element wrapping the entire dialog, so VoiceOver would
+        // reach one "dismiss" target and none of the buttons inside it. Screen reader users
+        // dismiss with Cancel.
+        accessible: false, importantForAccessibility: "no", className: "flex-1 justify-center items-center px-4", style: { backgroundColor: colors.overlayStrong }, onPress: () => setOpen(false), children: _jsxs(Pressable
+        // This Pressable is a container: its only `onPress` stops the backdrop from
+        // dismissing. `accessible={false}` is what keeps it that way — Pressable defaults
+        // to `accessible: true`, which on iOS collapses every descendant into one element
+        // and makes the confirm and cancel buttons unreachable.
+        , { 
+            // This Pressable is a container: its only `onPress` stops the backdrop from
+            // dismissing. `accessible={false}` is what keeps it that way — Pressable defaults
+            // to `accessible: true`, which on iOS collapses every descendant into one element
+            // and makes the confirm and cancel buttons unreachable.
+            accessible: false, 
+            // A destructive confirmation is the worst place for a screen reader to wander
+            // out of. `accessibilityViewIsModal` keeps VoiceOver inside the panel; Android
+            // gets the same containment from the host Modal.
+            accessibilityViewIsModal: true, accessibilityRole: "alert", 
+            // Names the panel where the container is exposed (Android contentDescription,
+            // web `aria-label`). Read from the element tree because the native-alert copy ref
+            // is filled by child layout effects, which run after this render.
+            accessibilityLabel: titleTextFromChildren(children) || undefined, className: cn('w-full border-border relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-background', className), style: [
+                {
+                    maxWidth: visual.sheetMaxWidth,
+                    borderWidth: visual.borderWidthHairline,
+                    borderRadius: visual.radiusXl,
+                    padding: visual.surfacePaddingDefault,
+                },
+                shadowStyle(visual, colors, 'lg'),
+                contentStyle,
+            ], onPress: (event) => event.stopPropagation(), ...props, children: [frostedSurface.overlay, children] }) }));
     if (useNativeAlert) {
         return (_jsx(View, { pointerEvents: "none", style: nativeHiddenStyle, collapsable: false, importantForAccessibility: "no-hide-descendants", children: children }));
     }
@@ -156,11 +230,11 @@ function AlertDialogContent({ className, children, presentation = 'modal', frost
             return (_jsx(View, { pointerEvents: "none", style: nativeHiddenStyle, collapsable: false, importantForAccessibility: "no-hide-descendants", children: children }));
         }
         return (_jsx(View, { pointerEvents: "box-none", style: [
-                StyleSheet.absoluteFillObject,
+                StyleSheet.absoluteFill,
                 { zIndex: 100, elevation: Platform.OS === 'android' ? 24 : undefined },
             ], children: themedBody }));
     }
-    return (_jsx(Modal, { visible: open, transparent: true, animationType: "fade", presentationStyle: Platform.OS === 'ios' ? 'overFullScreen' : undefined, statusBarTranslucent: Platform.OS === 'android', children: themedBody }));
+    return (_jsx(Modal, { visible: open, transparent: true, animationType: "fade", presentationStyle: Platform.OS === 'ios' ? 'overFullScreen' : undefined, statusBarTranslucent: Platform.OS === 'android', navigationBarTranslucent: Platform.OS === 'android', onRequestClose: () => setOpen(false), children: themedBody }));
 }
 function useAlertDialogNativeCopy() {
     return useContext(AlertDialogContext).nativeCopyRef;
@@ -171,75 +245,126 @@ function AlertDialogHeader({ className, ...props }) {
 function AlertDialogFooter({ className, ...props }) {
     return _jsx(View, { className: cn('flex flex-row justify-end gap-2 pt-4', className), ...props });
 }
-function AlertDialogTitle({ className, children, ...props }) {
+function AlertDialogTitle({ className, children, style, ...props }) {
     const nativeCopyRef = useAlertDialogNativeCopy();
+    const visual = useVisualTokens();
     useLayoutEffect(() => {
-        nativeCopyRef.current.title = textFromNode(children);
+        const copy = nativeCopyRef.current;
+        copy.title = textFromNode(children);
         return () => {
-            nativeCopyRef.current.title = '';
+            copy.title = '';
         };
     }, [children, nativeCopyRef]);
-    return (_jsx(Text, { className: cn('text-lg font-semibold text-foreground', className), ...props, children: children }));
+    return (_jsx(Text
+    // Gives VoiceOver and TalkBack something to land on first inside the modal, and
+    // lets rotor navigation find it. Set before the spread so callers can override.
+    , { 
+        // Gives VoiceOver and TalkBack something to land on first inside the modal, and
+        // lets rotor navigation find it. Set before the spread so callers can override.
+        accessibilityRole: "header", className: cn('font-semibold text-foreground', className), style: [typographyStyle(visual, 'title'), style], ...props, children: children }));
 }
-function AlertDialogDescription({ className, children, ...props }) {
+function AlertDialogDescription({ className, children, style, ...props }) {
     const nativeCopyRef = useAlertDialogNativeCopy();
+    const visual = useVisualTokens();
     useLayoutEffect(() => {
-        nativeCopyRef.current.message = textFromNode(children);
+        const copy = nativeCopyRef.current;
+        copy.message = textFromNode(children);
         return () => {
-            nativeCopyRef.current.message = '';
+            copy.message = '';
         };
     }, [children, nativeCopyRef]);
-    return (_jsx(Text, { className: cn('text-sm text-muted-foreground', className), ...props, children: children }));
+    return (_jsx(Text, { className: cn('text-muted-foreground', className), style: [typographyStyle(visual, 'label'), style], ...props, children: children }));
 }
-function AlertDialogAction({ className, children, asChild, ...props }) {
+function AlertDialogAction({ className, children, asChild, onPress, ...props }) {
     const { setOpen, nativeCopyRef } = useContext(AlertDialogContext);
-    const onPressRef = useRef(props.onPress);
-    onPressRef.current = props.onPress;
+    const interaction = useInteractionTokens();
+    const visual = useVisualTokens();
+    const onPressRef = useRef(onPress);
     useLayoutEffect(() => {
-        nativeCopyRef.current.confirmLabel = textFromPressableChildren(children);
-        nativeCopyRef.current.onConfirm = () => {
+        onPressRef.current = onPress;
+    }, [onPress]);
+    const interactiveStyle = withInteractivePressableStyle(undefined, interaction, {
+        pressedVariant: 'strong',
+    });
+    useLayoutEffect(() => {
+        const copy = nativeCopyRef.current;
+        copy.confirmLabel = textFromPressableChildren(children);
+        copy.onConfirm = () => {
             const h = onPressRef.current;
             if (h)
                 h();
         };
         return () => {
-            nativeCopyRef.current.confirmLabel = 'OK';
-            nativeCopyRef.current.onConfirm = null;
+            copy.confirmLabel = 'OK';
+            copy.onConfirm = null;
         };
     }, [children, nativeCopyRef]);
-    const handlePress = (e) => {
-        props.onPress?.(e);
-        setOpen(false);
-    };
     if (asChild && React.isValidElement(children)) {
         const child = children;
         return React.cloneElement(child, {
-            onPress: handlePress,
             ...props,
+            className: cn(child.props.className, className),
+            onPress: composeEventHandlers(composeEventHandlers(child.props.onPress, onPress), () => setOpen(false)),
         });
     }
-    return (_jsx(Pressable, { className: cn('inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 active:bg-primary-active', className), onPress: handlePress, ...props, children: typeof children === 'string' ? (_jsx(Text, { className: "text-sm font-medium text-primary-foreground", children: children })) : (children) }));
+    return (_jsx(Pressable
+    // Pressable sets no role of its own, so without this the confirm button in a
+    // destructive dialog announces as a plain view. Before the spread, so a caller can
+    // still override it.
+    , { 
+        // Pressable sets no role of its own, so without this the confirm button in a
+        // destructive dialog announces as a plain view. Before the spread, so a caller can
+        // still override it.
+        accessibilityRole: "button", ...props, className: cn('inline-flex items-center justify-center bg-primary', className), style: (state) => {
+            const baseStyle = typeof interactiveStyle === 'function' ? interactiveStyle(state) : interactiveStyle;
+            return [
+                baseStyle,
+                {
+                    minHeight: visual.controlHeightDefault,
+                    borderRadius: visual.radiusLg,
+                    paddingHorizontal: visual.controlPaddingXDefault,
+                    paddingVertical: visual.controlPaddingYDefault,
+                },
+            ];
+        }, onPress: composeEventHandlers(onPress, () => setOpen(false)), children: typeof children === 'string' ? (_jsx(Text, { className: "font-medium text-primary-foreground", style: typographyStyle(visual, 'label'), children: children })) : (children) }));
 }
-function AlertDialogCancel({ className, children, ...props }) {
+function AlertDialogCancel({ className, children, onPress, ...props }) {
     const { setOpen, nativeCopyRef } = useContext(AlertDialogContext);
-    const onPressRef = useRef(props.onPress);
-    onPressRef.current = props.onPress;
+    const interaction = useInteractionTokens();
+    const visual = useVisualTokens();
+    const onPressRef = useRef(onPress);
     useLayoutEffect(() => {
-        nativeCopyRef.current.cancelLabel = textFromPressableChildren(children);
-        nativeCopyRef.current.onCancel = () => {
+        onPressRef.current = onPress;
+    }, [onPress]);
+    const interactiveStyle = withInteractivePressableStyle(undefined, interaction, {
+        pressedVariant: 'default',
+    });
+    useLayoutEffect(() => {
+        const copy = nativeCopyRef.current;
+        copy.cancelLabel = textFromPressableChildren(children);
+        copy.onCancel = () => {
             const h = onPressRef.current;
             if (h)
                 h();
         };
         return () => {
-            nativeCopyRef.current.cancelLabel = 'Cancel';
-            nativeCopyRef.current.onCancel = null;
+            copy.cancelLabel = 'Cancel';
+            copy.onCancel = null;
         };
     }, [children, nativeCopyRef]);
-    return (_jsx(Pressable, { className: cn('inline-flex items-center justify-center rounded-md border border-border bg-transparent px-4 py-2 active:bg-accent', className), onPress: (e) => {
-            props.onPress?.(e);
-            setOpen(false);
-        }, ...props, children: typeof children === 'string' ? (_jsx(Text, { className: "text-sm font-medium text-foreground", children: children })) : (children) }));
+    return (_jsx(Pressable, { accessibilityRole: "button", ...props, className: cn('inline-flex items-center justify-center border-border bg-transparent', className), style: (state) => {
+            const baseStyle = typeof interactiveStyle === 'function' ? interactiveStyle(state) : interactiveStyle;
+            return [
+                baseStyle,
+                {
+                    minHeight: visual.controlHeightDefault,
+                    borderWidth: visual.borderWidthControl,
+                    borderRadius: visual.radiusLg,
+                    paddingHorizontal: visual.controlPaddingXDefault,
+                    paddingVertical: visual.controlPaddingYDefault,
+                },
+            ];
+        }, onPress: composeEventHandlers(onPress, () => setOpen(false)), children: typeof children === 'string' ? (_jsx(Text, { className: "font-medium text-foreground", style: typographyStyle(visual, 'label'), children: children })) : (children) }));
 }
 AlertDialog.displayName = 'AlertDialog';
 AlertDialogTrigger.displayName = 'AlertDialogTrigger';
@@ -251,4 +376,3 @@ AlertDialogDescription.displayName = 'AlertDialogDescription';
 AlertDialogAction.displayName = 'AlertDialogAction';
 AlertDialogCancel.displayName = 'AlertDialogCancel';
 export { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };
-//# sourceMappingURL=alert-dialog.js.map

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

@@ -1,2 +1 @@
 export { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, type AlertDialogProps, type AlertDialogTriggerProps, type AlertDialogContentProps, type AlertDialogHeaderProps, type AlertDialogFooterProps, type AlertDialogTitleProps, type AlertDialogDescriptionProps, type AlertDialogActionProps, type AlertDialogCancelProps, type AlertDialogPresentation, } from './alert-dialog';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/alert-dialog/index.js

@@ -1,2 +1 @@
 export { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, } from './alert-dialog';
-//# sourceMappingURL=index.js.map

package/dist/components/aspect-ratio/aspect-ratio.d.ts

@@ -3,9 +3,8 @@ export interface AspectRatioProps extends ViewProps {
     ratio?: number;
     className?: string;
 }
-declare function AspectRatio({ ratio, className, children, style, ...props }: AspectRatioProps): import("react/jsx-runtime").JSX.Element;
+declare function AspectRatio({ ratio, className, children, style, ...props }: AspectRatioProps): import("react").JSX.Element;
 declare namespace AspectRatio {
     var displayName: string;
 }
 export { AspectRatio };
-//# sourceMappingURL=aspect-ratio.d.ts.map

package/dist/components/aspect-ratio/aspect-ratio.js

@@ -1,11 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { View } from 'react-native';
 import { cn } from '../../lib/cn';
-// ─── Component ───────────────────────────────────────────────
 function AspectRatio({ ratio = 1, className, children, style, ...props }) {
     return (_jsx(View, { className: cn('relative', className), style: [{ aspectRatio: ratio }, style], ...props, children: children }));
 }
 AspectRatio.displayName = 'AspectRatio';
-// ─── Exports ─────────────────────────────────────────────────
 export { AspectRatio };
-//# sourceMappingURL=aspect-ratio.js.map

package/dist/components/aspect-ratio/index.d.ts

@@ -1,2 +1 @@
 export { AspectRatio, type AspectRatioProps } from './aspect-ratio';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/aspect-ratio/index.js

@@ -1,2 +1 @@
 export { AspectRatio } from './aspect-ratio';
-//# sourceMappingURL=index.js.map

package/dist/components/avatar/avatar.d.ts

@@ -62,13 +62,12 @@ export interface AvatarFallbackProps extends ViewProps {
     className?: string;
 }
 declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<View>>;
-declare function AvatarImage({ className, onLoadingStatusChange, ...props }: AvatarImageProps): import("react/jsx-runtime").JSX.Element;
+declare function AvatarImage({ className, onLoadingStatusChange, ...props }: AvatarImageProps): React.JSX.Element;
 declare namespace AvatarImage {
     var displayName: string;
 }
-declare function AvatarFallback({ className, children, ...props }: AvatarFallbackProps): import("react/jsx-runtime").JSX.Element | null;
+declare function AvatarFallback({ className, children, ...props }: AvatarFallbackProps): React.JSX.Element | null;
 declare namespace AvatarFallback {
     var displayName: string;
 }
 export { Avatar, AvatarImage, AvatarFallback, avatarVariants };
-//# sourceMappingURL=avatar.d.ts.map

package/dist/components/avatar/avatar.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { View, Image, Text } from 'react-native';
 import { cn } from '../../lib/cn';
 import { tv } from '../../lib/tv';
-// ─── Variants ────────────────────────────────────────────────
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { typographyStyle } from '../../lib/recipes';
 const avatarVariants = tv({
     base: 'relative flex shrink-0 overflow-hidden rounded-full',
     variants: {
@@ -18,15 +19,14 @@ const avatarVariants = tv({
         size: 'default',
     },
 });
-// ─── Context ─────────────────────────────────────────────────
 const AvatarContext = React.createContext({
     imageLoaded: false,
     setImageLoaded: () => { },
 });
-// ─── Components ──────────────────────────────────────────────
 const Avatar = React.forwardRef(({ className, size, ...props }, ref) => {
     const [imageLoaded, setImageLoaded] = useState(false);
-    return (_jsx(AvatarContext.Provider, { value: { imageLoaded, setImageLoaded }, children: _jsx(View, { ref: ref, className: cn(avatarVariants({ size }), className), ...props }) }));
+    const contextValue = useMemo(() => ({ imageLoaded, setImageLoaded }), [imageLoaded]);
+    return (_jsx(AvatarContext.Provider, { value: contextValue, children: _jsx(View, { ref: ref, className: cn(avatarVariants({ size }), className), ...props }) }));
 });
 Avatar.displayName = 'Avatar';
 function AvatarImage({ className, onLoadingStatusChange, ...props }) {
@@ -42,11 +42,10 @@ function AvatarImage({ className, onLoadingStatusChange, ...props }) {
 AvatarImage.displayName = 'AvatarImage';
 function AvatarFallback({ className, children, ...props }) {
     const { imageLoaded } = React.useContext(AvatarContext);
+    const visual = useVisualTokens();
     if (imageLoaded)
         return null;
-    return (_jsx(View, { className: cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className), ...props, children: typeof children === 'string' ? (_jsx(Text, { className: "text-sm font-medium text-muted-foreground", children: children })) : (children) }));
+    return (_jsx(View, { className: cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className), ...props, children: typeof children === 'string' ? (_jsx(Text, { className: "font-medium text-muted-foreground", style: typographyStyle(visual, 'label'), children: children })) : (children) }));
 }
 AvatarFallback.displayName = 'AvatarFallback';
-// ─── Exports ─────────────────────────────────────────────────
 export { Avatar, AvatarImage, AvatarFallback, avatarVariants };
-//# sourceMappingURL=avatar.js.map

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

@@ -1,2 +1 @@
 export { Avatar, AvatarImage, AvatarFallback, avatarVariants, type AvatarProps, type AvatarImageProps, type AvatarFallbackProps, } from './avatar';
-//# sourceMappingURL=index.d.ts.map