@thewhileloop/whileui 1.2.2 → 2.0.0

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,
@@ -86,6 +123,7 @@ function AlertDialogContent({ className, children, presentation = 'modal', frost
     });
     const contentStyle = [frostedSurface.surfaceStyle, style];
     const useNativeAlert = presentation === 'native' && (Platform.OS === 'ios' || Platform.OS === 'android');
+    const useOverlay = presentation === 'overlay';
     const prevOpenRef = useRef(false);
     const nativeAlertShownForOpenRef = useRef(false);
     useLayoutEffect(() => {
@@ -146,10 +184,57 @@ function AlertDialogContent({ className, children, presentation = 'modal', frost
             prevOpenRef.current = false;
         };
     }, [open, useNativeAlert, setOpen, nativeCopyRef]);
+    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 }));
     }
-    return (_jsx(Modal, { visible: open, transparent: true, animationType: "fade", presentationStyle: Platform.OS === 'ios' ? 'overFullScreen' : undefined, statusBarTranslucent: Platform.OS === 'android', children: _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] }) }) }));
+    if (useOverlay) {
+        if (!open) {
+            return (_jsx(View, { pointerEvents: "none", style: nativeHiddenStyle, collapsable: false, importantForAccessibility: "no-hide-descendants", children: children }));
+        }
+        return (_jsx(View, { pointerEvents: "box-none", style: [
+                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', navigationBarTranslucent: Platform.OS === 'android', onRequestClose: () => setOpen(false), children: themedBody }));
 }
 function useAlertDialogNativeCopy() {
     return useContext(AlertDialogContext).nativeCopyRef;
@@ -160,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(() => {
+        onPressRef.current = onPress;
+    }, [onPress]);
+    const interactiveStyle = withInteractivePressableStyle(undefined, interaction, {
+        pressedVariant: 'strong',
+    });
     useLayoutEffect(() => {
-        nativeCopyRef.current.confirmLabel = textFromPressableChildren(children);
-        nativeCopyRef.current.onConfirm = () => {
+        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(() => {
+        onPressRef.current = onPress;
+    }, [onPress]);
+    const interactiveStyle = withInteractivePressableStyle(undefined, interaction, {
+        pressedVariant: 'default',
+    });
     useLayoutEffect(() => {
-        nativeCopyRef.current.cancelLabel = textFromPressableChildren(children);
-        nativeCopyRef.current.onCancel = () => {
+        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';
@@ -240,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

package/dist/components/avatar/index.js

@@ -1,2 +1 @@
 export { Avatar, AvatarImage, AvatarFallback, avatarVariants, } from './avatar';
-//# sourceMappingURL=index.js.map

package/dist/components/badge/badge.d.ts

@@ -16,7 +16,7 @@ declare const badgeVariants: import("tailwind-variants").TVReturnType<{
         'soft-warning': string;
         'soft-info': string;
     };
-}, undefined, "inline-flex items-center rounded-full px-2.5 py-0.5", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "inline-flex items-center", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         secondary: string;
@@ -80,7 +80,7 @@ declare const badgeVariants: import("tailwind-variants").TVReturnType<{
         'soft-warning': string;
         'soft-info': string;
     };
-}, undefined, "inline-flex items-center rounded-full px-2.5 py-0.5", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "inline-flex items-center", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         secondary: string;
@@ -129,7 +129,7 @@ declare const badgeTextVariants: import("tailwind-variants").TVReturnType<{
         'soft-warning': string;
         'soft-info': string;
     };
-}, undefined, "text-xs font-semibold", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "font-semibold", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         secondary: string;
@@ -193,7 +193,7 @@ declare const badgeTextVariants: import("tailwind-variants").TVReturnType<{
         'soft-warning': string;
         'soft-info': string;
     };
-}, undefined, "text-xs font-semibold", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "font-semibold", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         secondary: string;
@@ -230,13 +230,12 @@ export interface BadgeProps extends ViewProps, VariantProps<typeof badgeVariants
 }
 export interface BadgeTextProps extends TextProps, VariantProps<typeof badgeTextVariants> {
 }
-declare function Badge({ className, variant, children, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+declare function Badge({ className, variant, children, style, ...props }: BadgeProps): import("react").JSX.Element;
 declare namespace Badge {
     var displayName: string;
 }
-declare function BadgeText({ className, variant: variantProp, ...props }: BadgeTextProps): import("react/jsx-runtime").JSX.Element;
+declare function BadgeText({ className, variant: variantProp, style, ...props }: BadgeTextProps): import("react").JSX.Element;
 declare namespace BadgeText {
     var displayName: string;
 }
 export { Badge, BadgeText, badgeVariants, badgeTextVariants };
-//# sourceMappingURL=badge.d.ts.map

package/dist/components/badge/badge.js

@@ -1,20 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useMemo } from 'react';
 import { View } from 'react-native';
 import { Text } from '../text';
 import { cn } from '../../lib/cn';
 import { tv } from '../../lib/tv';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { typographyStyle } from '../../lib/recipes';
 const BadgeContext = createContext({
     variant: 'default',
 });
 const badgeVariants = tv({
-    base: 'inline-flex items-center rounded-full px-2.5 py-0.5',
+    base: 'inline-flex items-center',
     variants: {
         variant: {
             default: 'bg-primary',
             secondary: 'bg-secondary',
             destructive: 'bg-destructive',
-            outline: 'border border-border bg-transparent',
+            outline: 'border-border bg-transparent',
             success: 'bg-success',
             warning: 'bg-warning',
             info: 'bg-info',
@@ -31,7 +33,7 @@ const badgeVariants = tv({
     },
 });
 const badgeTextVariants = tv({
-    base: 'text-xs font-semibold',
+    base: 'font-semibold',
     variants: {
         variant: {
             default: 'text-primary-foreground',
@@ -53,15 +55,25 @@ const badgeTextVariants = tv({
         variant: 'default',
     },
 });
-function Badge({ className, variant = 'default', children, ...props }) {
-    return (_jsx(BadgeContext.Provider, { value: { variant }, children: _jsx(View, { className: cn(badgeVariants({ variant }), className), ...props, children: children }) }));
+function Badge({ className, variant = 'default', children, style, ...props }) {
+    const visual = useVisualTokens();
+    const contextValue = useMemo(() => ({ variant }), [variant]);
+    return (_jsx(BadgeContext.Provider, { value: contextValue, children: _jsx(View, { className: cn(badgeVariants({ variant }), className), style: [
+                {
+                    borderRadius: visual.badgeRadius,
+                    paddingHorizontal: visual.badgePaddingX,
+                    paddingVertical: visual.badgePaddingY,
+                    ...(variant === 'outline' ? { borderWidth: visual.borderWidthHairline } : null),
+                },
+                style,
+            ], ...props, children: children }) }));
 }
-function BadgeText({ className, variant: variantProp, ...props }) {
+function BadgeText({ className, variant: variantProp, style, ...props }) {
     const context = useContext(BadgeContext);
+    const visual = useVisualTokens();
     const variant = variantProp ?? context.variant;
-    return _jsx(Text, { className: cn(badgeTextVariants({ variant }), className), ...props });
+    return (_jsx(Text, { className: cn(badgeTextVariants({ variant }), className), style: [typographyStyle(visual, 'caption'), style], ...props }));
 }
 Badge.displayName = 'Badge';
 BadgeText.displayName = 'BadgeText';
 export { Badge, BadgeText, badgeVariants, badgeTextVariants };
-//# sourceMappingURL=badge.js.map

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

@@ -1,2 +1 @@
 export { Badge, BadgeText, badgeVariants, badgeTextVariants, type BadgeProps, type BadgeTextProps, } from './badge';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/badge/index.js

@@ -1,2 +1 @@
 export { Badge, BadgeText, badgeVariants, badgeTextVariants, } from './badge';
-//# sourceMappingURL=index.js.map