@thewhileloop/whileui 1.2.3 → 3.0.0

package/dist/components/data-row/data-row.js

@@ -1,27 +1,40 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { createContext, useContext } from 'react';
-import { Text, View } from 'react-native';
+import React, { createContext, useContext, useMemo } from 'react';
+import { Text, View, } from 'react-native';
 import { cn } from '../../lib/cn';
 import { tv } from '../../lib/tv';
 import { useVisualTokens } from '../../lib/visual-tokens';
+import { typographyStyle } from '../../lib/recipes';
 const dataRowVariants = tv({
     base: 'w-full flex-row items-center gap-3',
     variants: {
         size: {
-            default: 'min-h-11 py-2',
-            compact: 'min-h-10 py-1.5',
+            default: '',
+            compact: '',
         },
     },
     defaultVariants: {
         size: 'default',
     },
 });
+function getDataRowStyle(visual, size) {
+    if (size === 'compact') {
+        return {
+            minHeight: Math.round((visual.controlHeightSm + visual.controlHeightDefault) / 2),
+            paddingVertical: Math.max(4, Math.round(visual.controlPaddingYSm * 0.75)),
+        };
+    }
+    return {
+        minHeight: visual.controlHeightDefault,
+        paddingVertical: visual.controlPaddingYSm,
+    };
+}
 const dataRowLabelVariants = tv({
     base: 'font-medium text-foreground',
     variants: {
         size: {
-            default: 'text-sm',
-            compact: 'text-xs',
+            default: '',
+            compact: '',
         },
     },
     defaultVariants: {
@@ -32,8 +45,8 @@ const dataRowDescriptionVariants = tv({
     base: 'text-muted-foreground',
     variants: {
         size: {
-            default: 'text-xs',
-            compact: 'text-xs',
+            default: '',
+            compact: '',
         },
     },
     defaultVariants: {
@@ -44,8 +57,8 @@ const dataRowValueVariants = tv({
     base: 'font-medium text-foreground text-right',
     variants: {
         size: {
-            default: 'text-sm',
-            compact: 'text-xs',
+            default: '',
+            compact: '',
         },
     },
     defaultVariants: {
@@ -55,8 +68,10 @@ const dataRowValueVariants = tv({
 const DataRowContext = createContext({
     size: 'default',
 });
-const DataRow = React.forwardRef(({ className, size = 'default', ...props }, ref) => {
-    return (_jsx(DataRowContext.Provider, { value: { size }, children: _jsx(View, { ref: ref, className: cn(dataRowVariants({ size }), className), ...props }) }));
+const DataRow = React.forwardRef(({ className, size = 'default', style, ...props }, ref) => {
+    const visual = useVisualTokens();
+    const contextValue = useMemo(() => ({ size }), [size]);
+    return (_jsx(DataRowContext.Provider, { value: contextValue, children: _jsx(View, { ref: ref, className: cn(dataRowVariants({ size }), className), style: [getDataRowStyle(visual, size), style], ...props }) }));
 });
 DataRow.displayName = 'DataRow';
 const DataRowLeft = React.forwardRef(({ className, ...props }, ref) => {
@@ -72,21 +87,24 @@ const DataRowRight = React.forwardRef(({ className, style, ...props }, ref) => {
     return (_jsx(View, { ref: ref, className: cn('ml-2 shrink-0 items-end justify-center', className), style: [{ maxWidth: `${visual.dataRowRightMaxWidthRatio * 100}%` }, style], ...props }));
 });
 DataRowRight.displayName = 'DataRowRight';
-const DataRowLabel = React.forwardRef(({ className, ...props }, ref) => {
+const DataRowLabel = React.forwardRef(({ className, style, ...props }, ref) => {
     const { size } = useContext(DataRowContext);
-    return (_jsx(Text, { ref: ref, className: cn(dataRowLabelVariants({ size }), className), numberOfLines: 1, ...props }));
+    const visual = useVisualTokens();
+    return (_jsx(Text, { ref: ref, className: cn(dataRowLabelVariants({ size }), className), style: [typographyStyle(visual, size === 'compact' ? 'caption' : 'label'), style], numberOfLines: 1, ...props }));
 });
 DataRowLabel.displayName = 'DataRowLabel';
 const DataRowDescription = React.forwardRef(({ className, style, ...props }, ref) => {
     const { size } = useContext(DataRowContext);
     const visual = useVisualTokens();
-    return (_jsx(Text, { ref: ref, className: cn(dataRowDescriptionVariants({ size }), className), style: size === 'compact' ? [{ fontSize: visual.dataRowCompactDescriptionSize }, style] : style, numberOfLines: 2, ...props }));
+    return (_jsx(Text, { ref: ref, className: cn(dataRowDescriptionVariants({ size }), className), style: size === 'compact'
+            ? [{ fontSize: visual.dataRowCompactDescriptionSize }, style]
+            : [typographyStyle(visual, 'caption'), style], numberOfLines: 2, ...props }));
 });
 DataRowDescription.displayName = 'DataRowDescription';
-const DataRowValue = React.forwardRef(({ className, ...props }, ref) => {
+const DataRowValue = React.forwardRef(({ className, style, ...props }, ref) => {
     const { size } = useContext(DataRowContext);
-    return (_jsx(Text, { ref: ref, className: cn(dataRowValueVariants({ size }), className), numberOfLines: 1, ...props }));
+    const visual = useVisualTokens();
+    return (_jsx(Text, { ref: ref, className: cn(dataRowValueVariants({ size }), className), style: [typographyStyle(visual, size === 'compact' ? 'caption' : 'label'), style], numberOfLines: 1, ...props }));
 });
 DataRowValue.displayName = 'DataRowValue';
 export { DataRow, DataRowLeft, DataRowCenter, DataRowRight, DataRowLabel, DataRowDescription, DataRowValue, dataRowVariants, };
-//# sourceMappingURL=data-row.js.map

package/dist/components/data-row/index.d.ts

@@ -1,2 +1 @@
 export { DataRow, DataRowLeft, DataRowCenter, DataRowRight, DataRowLabel, DataRowDescription, DataRowValue, dataRowVariants, type DataRowProps, type DataRowLeftProps, type DataRowCenterProps, type DataRowRightProps, type DataRowLabelProps, type DataRowDescriptionProps, type DataRowValueProps, } from './data-row';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/data-row/index.js

@@ -1,2 +1 @@
 export { DataRow, DataRowLeft, DataRowCenter, DataRowRight, DataRowLabel, DataRowDescription, DataRowValue, dataRowVariants, } from './data-row';
-//# sourceMappingURL=index.js.map

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

@@ -33,37 +33,36 @@ export interface DialogCloseProps extends PressableProps {
     className?: string;
     asChild?: boolean;
 }
-declare function Dialog({ defaultOpen, open: controlledOpen, onOpenChange, children, }: DialogProps): import("react/jsx-runtime").JSX.Element;
+declare function Dialog({ defaultOpen, open: controlledOpen, onOpenChange, children, }: DialogProps): React.JSX.Element;
 declare namespace Dialog {
     var displayName: string;
 }
-declare function DialogTrigger({ className, children, asChild, ...props }: DialogTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function DialogTrigger({ className, children, asChild, onPress, ...props }: DialogTriggerProps): React.JSX.Element;
 declare namespace DialogTrigger {
     var displayName: string;
 }
-declare function DialogContent({ className, children, frosted, blurIntensity, blurTintToken, style, ...props }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
+declare function DialogContent({ className, children, frosted, blurIntensity, blurTintToken, style, ...props }: DialogContentProps): React.JSX.Element;
 declare namespace DialogContent {
     var displayName: string;
 }
-declare function DialogHeader({ className, ...props }: DialogHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function DialogHeader({ className, ...props }: DialogHeaderProps): React.JSX.Element;
 declare namespace DialogHeader {
     var displayName: string;
 }
-declare function DialogFooter({ className, ...props }: DialogFooterProps): import("react/jsx-runtime").JSX.Element;
+declare function DialogFooter({ className, ...props }: DialogFooterProps): React.JSX.Element;
 declare namespace DialogFooter {
     var displayName: string;
 }
-declare function DialogTitle({ className, ...props }: DialogTitleProps): import("react/jsx-runtime").JSX.Element;
+declare function DialogTitle({ className, style, ...props }: DialogTitleProps): React.JSX.Element;
 declare namespace DialogTitle {
     var displayName: string;
 }
-declare function DialogDescription({ className, ...props }: DialogDescriptionProps): import("react/jsx-runtime").JSX.Element;
+declare function DialogDescription({ className, style, ...props }: DialogDescriptionProps): React.JSX.Element;
 declare namespace DialogDescription {
     var displayName: string;
 }
-declare function DialogClose({ className, children, asChild, ...props }: DialogCloseProps): import("react/jsx-runtime").JSX.Element;
+declare function DialogClose({ className, children, asChild, onPress, ...props }: DialogCloseProps): React.JSX.Element;
 declare namespace DialogClose {
     var displayName: string;
 }
 export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose, };
-//# sourceMappingURL=dialog.d.ts.map

package/dist/components/dialog/dialog.js

@@ -1,40 +1,44 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { createContext, useContext, useState } from 'react';
+import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
 import { View, Modal, Pressable, Text, } from 'react-native';
 import { cn } from '../../lib/cn';
+import { composeEventHandlers } from '../../lib/compose-event-handlers';
 import { useThemeColors } from '../../lib/theme-colors';
 import { useFrostedSurface } from '../../lib/frosted-surface';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { shadowStyle, typographyStyle } from '../../lib/recipes';
 const DialogContext = createContext({
     open: false,
     setOpen: () => { },
 });
-// ─── Components ──────────────────────────────────────────────
 function Dialog({ defaultOpen = false, open: controlledOpen, onOpenChange, children, }) {
     const [internalOpen, setInternalOpen] = useState(defaultOpen);
     const open = controlledOpen ?? internalOpen;
-    const setOpen = (value) => {
-        setInternalOpen(value);
+    const setOpen = useCallback((value) => {
+        if (controlledOpen === undefined) {
+            setInternalOpen(value);
+        }
         onOpenChange?.(value);
-    };
-    return _jsx(DialogContext.Provider, { value: { open, setOpen }, children: children });
+    }, [controlledOpen, onOpenChange]);
+    const contextValue = useMemo(() => ({ open, setOpen }), [open, setOpen]);
+    return _jsx(DialogContext.Provider, { value: contextValue, children: children });
 }
-function DialogTrigger({ className, children, asChild, ...props }) {
+function DialogTrigger({ className, children, asChild, onPress, ...props }) {
     const { setOpen } = useContext(DialogContext);
     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 }));
 }
 function DialogContent({ className, children, frosted = false, blurIntensity, blurTintToken, style, ...props }) {
     const { open, setOpen } = useContext(DialogContext);
     const colors = useThemeColors();
+    const visual = useVisualTokens();
     const frostedSurface = useFrostedSurface({
         frosted,
         blurIntensity,
@@ -43,7 +47,28 @@ function DialogContent({ className, children, frosted = false, blurIntensity, bl
         defaultBlurPreset: 'medium',
     });
     const contentStyle = [frostedSurface.surfaceStyle, style];
-    return (_jsx(Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: () => setOpen(false), children: _jsx(Pressable, { className: "flex-1 justify-center items-center px-4", style: { backgroundColor: colors.overlayStrong }, onPress: () => setOpen(false), children: _jsxs(Pressable, { 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, onPress: (e) => e.stopPropagation(), ...props, children: [frostedSurface.overlay, children] }) }) }));
+    return (_jsx(Modal, { visible: open, transparent: true, animationType: "fade", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: () => setOpen(false), children: _jsx(Pressable
+        // Tap-to-dismiss is a pointer affordance. Left accessible it would swallow the
+        // whole panel into one element; screen reader users close from inside.
+        , { 
+            // Tap-to-dismiss is a pointer affordance. Left accessible it would swallow the
+            // whole panel into one element; screen reader users close from inside.
+            accessible: false, importantForAccessibility: "no", className: "flex-1 justify-center items-center px-4", style: { backgroundColor: colors.overlayStrong }, onPress: () => setOpen(false), children: _jsxs(Pressable
+            // Container, not a control — Pressable defaults to `accessible: true`, which
+            // on iOS collapses every descendant into one accessibility element.
+            , { 
+                // Container, not a control — Pressable defaults to `accessible: true`, which
+                // on iOS collapses every descendant into one accessibility element.
+                accessible: false, 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: (e) => e.stopPropagation(), ...props, children: [frostedSurface.overlay, children] }) }) }));
 }
 function DialogHeader({ className, ...props }) {
     return _jsx(View, { className: cn('flex flex-col gap-1.5 pb-4', className), ...props });
@@ -51,26 +76,26 @@ function DialogHeader({ className, ...props }) {
 function DialogFooter({ className, ...props }) {
     return _jsx(View, { className: cn('flex flex-row justify-end gap-2 pt-4', className), ...props });
 }
-function DialogTitle({ className, ...props }) {
-    return _jsx(Text, { className: cn('text-lg font-semibold text-foreground', className), ...props });
+function DialogTitle({ className, style, ...props }) {
+    const visual = useVisualTokens();
+    return (_jsx(Text, { className: cn('font-semibold text-foreground', className), style: [typographyStyle(visual, 'title'), style], ...props }));
 }
-function DialogDescription({ className, ...props }) {
-    return _jsx(Text, { className: cn('text-sm text-muted-foreground', className), ...props });
+function DialogDescription({ className, style, ...props }) {
+    const visual = useVisualTokens();
+    return (_jsx(Text, { className: cn('text-muted-foreground', className), style: [typographyStyle(visual, 'label'), style], ...props }));
 }
 // ... (interfaces update needed too)
-function DialogClose({ className, children, asChild, ...props }) {
+function DialogClose({ className, children, asChild, onPress, ...props }) {
     const { setOpen } = useContext(DialogContext);
     if (asChild && React.isValidElement(children)) {
         const child = children;
         return React.cloneElement(child, {
-            onPress: (e) => {
-                child.props.onPress?.(e);
-                setOpen(false);
-            },
             ...props,
+            className: cn(child.props.className, className),
+            onPress: composeEventHandlers(composeEventHandlers(child.props.onPress, onPress), () => setOpen(false)),
         });
     }
-    return (_jsx(Pressable, { className: cn(className), onPress: () => setOpen(false), ...props, children: children }));
+    return (_jsx(Pressable, { accessibilityRole: "button", ...props, className: cn(className), onPress: composeEventHandlers(onPress, () => setOpen(false)), children: children }));
 }
 Dialog.displayName = 'Dialog';
 DialogTrigger.displayName = 'DialogTrigger';
@@ -81,4 +106,3 @@ DialogTitle.displayName = 'DialogTitle';
 DialogDescription.displayName = 'DialogDescription';
 DialogClose.displayName = 'DialogClose';
 export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose, };
-//# sourceMappingURL=dialog.js.map

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

@@ -1,2 +1 @@
 export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose, type DialogProps, type DialogTriggerProps, type DialogContentProps, type DialogHeaderProps, type DialogFooterProps, type DialogTitleProps, type DialogDescriptionProps, type DialogCloseProps, } from './dialog';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/dialog/index.js

@@ -1,2 +1 @@
 export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose, } from './dialog';
-//# sourceMappingURL=index.js.map

package/dist/components/dropdown-menu/dropdown-menu.d.ts

@@ -21,29 +21,28 @@ export interface DropdownMenuLabelProps extends ViewProps {
 export interface DropdownMenuSeparatorProps extends ViewProps {
     className?: string;
 }
-declare function DropdownMenu({ children }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenu({ children }: DropdownMenuProps): React.JSX.Element;
 declare namespace DropdownMenu {
     var displayName: string;
 }
-declare function DropdownMenuTrigger({ className, children, asChild, ...props }: DropdownMenuTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuTrigger({ className, children, asChild, ...props }: DropdownMenuTriggerProps): React.JSX.Element;
 declare namespace DropdownMenuTrigger {
     var displayName: string;
 }
-declare function DropdownMenuContent({ className, children, frosted, blurIntensity, blurTintToken, style, ...props }: DropdownMenuContentProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuContent({ className, children, frosted, blurIntensity, blurTintToken, style, ...props }: DropdownMenuContentProps): React.JSX.Element;
 declare namespace DropdownMenuContent {
     var displayName: string;
 }
-declare function DropdownMenuItem({ className, ...props }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuItem({ className, style, ...props }: DropdownMenuItemProps): React.JSX.Element;
 declare namespace DropdownMenuItem {
     var displayName: string;
 }
-declare function DropdownMenuLabel({ className, children, ...props }: DropdownMenuLabelProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuLabel({ className, children, ...props }: DropdownMenuLabelProps): React.JSX.Element;
 declare namespace DropdownMenuLabel {
     var displayName: string;
 }
-declare function DropdownMenuSeparator({ className, ...props }: DropdownMenuSeparatorProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSeparator({ className, style, ...props }: DropdownMenuSeparatorProps): React.JSX.Element;
 declare namespace DropdownMenuSeparator {
     var displayName: string;
 }
 export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, };
-//# sourceMappingURL=dropdown-menu.d.ts.map

package/dist/components/dropdown-menu/dropdown-menu.js

@@ -1,15 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { createContext, useContext, useState } from 'react';
+import React, { createContext, useContext, useMemo, useState } from 'react';
 import { View, Modal, Pressable, Text } from 'react-native';
 import { cn } from '../../lib/cn';
 import { useFrostedSurface } from '../../lib/frosted-surface';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { useThemeColors } from '../../lib/theme-colors';
+import { shadowStyle, surfaceRadius, typographyStyle } from '../../lib/recipes';
 const DropdownMenuContext = createContext({
     open: false,
     setOpen: () => { },
 });
 function DropdownMenu({ children }) {
     const [open, setOpen] = useState(false);
-    return (_jsx(DropdownMenuContext.Provider, { value: { open, setOpen }, children: children }));
+    const contextValue = useMemo(() => ({ open, setOpen }), [open]);
+    return (_jsx(DropdownMenuContext.Provider, { value: contextValue, children: children }));
 }
 function DropdownMenuTrigger({ className, children, asChild, ...props }) {
     const { setOpen } = useContext(DropdownMenuContext);
@@ -23,10 +27,12 @@ function DropdownMenuTrigger({ className, children, asChild, ...props }) {
             ...props,
         });
     }
-    return (_jsx(Pressable, { className: cn(className), onPress: () => setOpen(true), ...props, children: children }));
+    return (_jsx(Pressable, { accessibilityRole: "button", className: cn(className), onPress: () => setOpen(true), ...props, children: children }));
 }
 function DropdownMenuContent({ className, children, frosted = false, blurIntensity, blurTintToken, style, ...props }) {
     const { open, setOpen } = useContext(DropdownMenuContext);
+    const visual = useVisualTokens();
+    const colors = useThemeColors();
     const frostedSurface = useFrostedSurface({
         frosted,
         blurIntensity,
@@ -34,21 +40,50 @@ function DropdownMenuContent({ className, children, frosted = false, blurIntensi
         defaultTintToken: 'popover',
         defaultBlurPreset: 'medium',
     });
-    const contentStyle = [frostedSurface.surfaceStyle, style];
-    return (_jsx(Modal, { visible: open, transparent: true, animationType: "slide", onRequestClose: () => setOpen(false), children: _jsx(Pressable, { className: "flex-1 justify-end", onPress: () => setOpen(false), children: _jsxs(Pressable, { className: cn('w-full rounded-t-xl border-t border-x border-border p-2 pb-8 shadow-lg relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-popover', className), style: contentStyle, onPress: (e) => e.stopPropagation(), ...props, children: [frostedSurface.overlay, children] }) }) }));
+    const contentStyle = [
+        {
+            borderTopLeftRadius: surfaceRadius(visual, 'lg'),
+            borderTopRightRadius: surfaceRadius(visual, 'lg'),
+            borderTopWidth: visual.borderWidthHairline,
+            borderLeftWidth: visual.borderWidthHairline,
+            borderRightWidth: visual.borderWidthHairline,
+        },
+        shadowStyle(visual, colors, 'md'),
+        frostedSurface.surfaceStyle,
+        style,
+    ];
+    return (_jsx(Modal, { visible: open, transparent: true, animationType: "slide", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: () => setOpen(false), children: _jsx(Pressable, { accessible: false, importantForAccessibility: "no", className: "flex-1 justify-end", onPress: () => setOpen(false), children: _jsxs(Pressable, { accessible: false, 
+                // Names the container for the `menuitem` children below; without a `menu`
+                // ancestor the role is invalid ARIA and assistive tech ignores it.
+                accessibilityRole: "menu", className: cn('w-full border-border p-2 pb-8 relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-popover', className), style: contentStyle, onPress: (e) => e.stopPropagation(), ...props, children: [frostedSurface.overlay, children] }) }) }));
 }
-function DropdownMenuItem({ className, ...props }) {
+function DropdownMenuItem({ className, style, ...props }) {
     const { setOpen } = useContext(DropdownMenuContext);
-    return (_jsx(Pressable, { className: cn('flex flex-row items-center rounded-md px-2 py-2 active:bg-accent', className), onPress: (e) => {
+    const visual = useVisualTokens();
+    const tokenStyle = {
+        borderRadius: visual.radiusSm,
+        minHeight: visual.touchTargetMinSize,
+        paddingHorizontal: visual.controlPaddingXSm,
+        paddingVertical: visual.controlPaddingYSm,
+    };
+    return (_jsx(Pressable, { accessibilityRole: "menuitem", className: cn('flex flex-row items-center active:bg-accent', className), style: (state) => [tokenStyle, typeof style === 'function' ? style(state) : style], onPress: (e) => {
             props.onPress?.(e);
             setOpen(false);
         }, ...props }));
 }
 function DropdownMenuLabel({ className, children, ...props }) {
-    return (_jsx(View, { className: cn('px-2 py-1.5', className), ...props, children: typeof children === 'string' ? (_jsx(Text, { className: "text-sm font-semibold text-foreground", children: children })) : (children) }));
+    const visual = useVisualTokens();
+    return (_jsx(View, { className: cn('px-2 py-1.5', className), ...props, children: typeof children === 'string' ? (_jsx(Text
+        // A menu section label is a heading — without this it announces as plain text
+        // and rotor navigation cannot find it.
+        , { 
+            // A menu section label is a heading — without this it announces as plain text
+            // and rotor navigation cannot find it.
+            accessibilityRole: "header", className: "font-semibold text-foreground", style: typographyStyle(visual, 'label'), children: children })) : (children) }));
 }
-function DropdownMenuSeparator({ className, ...props }) {
-    return _jsx(View, { className: cn('-mx-1 my-1 h-px bg-border', className), ...props });
+function DropdownMenuSeparator({ className, style, ...props }) {
+    const visual = useVisualTokens();
+    return (_jsx(View, { className: cn('-mx-1 my-1 bg-border', className), style: [{ height: visual.borderWidthHairline }, style], ...props }));
 }
 DropdownMenu.displayName = 'DropdownMenu';
 DropdownMenuTrigger.displayName = 'DropdownMenuTrigger';
@@ -57,4 +92,3 @@ DropdownMenuItem.displayName = 'DropdownMenuItem';
 DropdownMenuLabel.displayName = 'DropdownMenuLabel';
 DropdownMenuSeparator.displayName = 'DropdownMenuSeparator';
 export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, };
-//# sourceMappingURL=dropdown-menu.js.map

package/dist/components/dropdown-menu/index.d.ts

@@ -1,2 +1 @@
 export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, type DropdownMenuProps, type DropdownMenuTriggerProps, type DropdownMenuContentProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuSeparatorProps, } from './dropdown-menu';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/dropdown-menu/index.js

@@ -1,2 +1 @@
 export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, } from './dropdown-menu';
-//# sourceMappingURL=index.js.map

package/dist/components/form-field/form-field.d.ts

@@ -1,106 +1,50 @@
-import React from 'react';
-import { Text, View, type TextProps, type ViewProps } from 'react-native';
+import { type TextInstance, type TextProps, type ViewInstance, type ViewProps } from 'react-native';
 import { type VariantProps } from '../../lib/tv';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 declare const formFieldVariants: import("tailwind-variants").TVReturnType<{
     density: {
-        default: string;
-        compact: string;
+        default: "gap-1.5";
+        compact: "gap-1";
     };
-}, undefined, "w-full", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "w-full", {
     density: {
-        default: string;
-        compact: string;
+        default: "gap-1.5";
+        compact: "gap-1";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     density: {
-        default: string;
-        compact: string;
+        default: "gap-1.5";
+        compact: "gap-1";
     };
-}>, {
-    density: {
-        default: string;
-        compact: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    density: {
-        default: string;
-        compact: string;
-    };
-}, undefined, "w-full", import("tailwind-variants/dist/config.js").TVConfig<{
-    density: {
-        default: string;
-        compact: string;
-    };
-}, {
-    density: {
-        default: string;
-        compact: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 declare const formControlVariants: import("tailwind-variants").TVReturnType<{
     density: {
-        default: string;
-        compact: string;
-    };
-    invalid: {
-        true: string;
-        false: string;
-    };
-}, undefined, "justify-center", import("tailwind-variants/dist/config.js").TVConfig<{
-    density: {
-        default: string;
-        compact: string;
-    };
-    invalid: {
-        true: string;
-        false: string;
-    };
-}, {
-    density: {
-        default: string;
-        compact: string;
-    };
-    invalid: {
-        true: string;
-        false: string;
-    };
-}>, {
-    density: {
-        default: string;
-        compact: string;
-    };
-    invalid: {
-        true: string;
-        false: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    density: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
     invalid: {
-        true: string;
-        false: string;
+        true: "";
+        false: "";
     };
-}, undefined, "justify-center", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "justify-center", {
     density: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
     invalid: {
-        true: string;
-        false: string;
+        true: "";
+        false: "";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     density: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
     invalid: {
-        true: string;
-        false: string;
+        true: "";
+        false: "";
     };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface FormFieldProps extends ViewProps, VariantProps<typeof formFieldVariants> {
     invalid?: boolean;
     disabled?: boolean;
@@ -115,10 +59,9 @@ export interface FormHintProps extends TextProps {
 }
 export interface FormMessageProps extends TextProps {
 }
-declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & React.RefAttributes<View>>;
-declare const FormLabel: React.ForwardRefExoticComponent<FormLabelProps & React.RefAttributes<Text>>;
-declare const FormControl: React.ForwardRefExoticComponent<FormControlProps & React.RefAttributes<View>>;
-declare const FormHint: React.ForwardRefExoticComponent<FormHintProps & React.RefAttributes<Text>>;
-declare const FormMessage: React.ForwardRefExoticComponent<FormMessageProps & React.RefAttributes<Text>>;
+declare const FormField: ForwardRefComponent<ViewInstance, FormFieldProps>;
+declare const FormLabel: ForwardRefComponent<TextInstance, FormLabelProps>;
+declare const FormControl: ForwardRefComponent<ViewInstance, FormControlProps>;
+declare const FormHint: ForwardRefComponent<TextInstance, FormHintProps>;
+declare const FormMessage: ForwardRefComponent<TextInstance, FormMessageProps>;
 export { FormField, FormLabel, FormControl, FormHint, FormMessage, formFieldVariants, formControlVariants, };
-//# sourceMappingURL=form-field.d.ts.map