@thewhileloop/whileui 1.2.3 → 3.0.0

package/dist/components/card/card.js

@@ -1,19 +1,21 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { View } from 'react-native';
+import { View, } from 'react-native';
 import { Text } from '../text';
 import { cn } from '../../lib/cn';
 import { tv } from '../../lib/tv';
 import { useFrostedSurface } from '../../lib/frosted-surface';
-// ─── Card ────────────────────────────────────────────────────
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { useThemeColors } from '../../lib/theme-colors';
+import { shadowStyle, surfacePadding, typographyStyle } from '../../lib/recipes';
 const cardVariants = tv({
-    base: 'rounded-xl border border-border bg-card',
+    base: 'border border-border bg-card',
     variants: {
         padding: {
-            none: 'p-0',
-            sm: 'p-4',
-            default: 'p-6',
-            lg: 'p-8',
+            none: '',
+            sm: '',
+            default: '',
+            lg: '',
         },
         unstyled: {
             true: 'rounded-none border-0 bg-transparent shadow-none',
@@ -25,7 +27,9 @@ const cardVariants = tv({
         unstyled: false,
     },
 });
-const Card = React.forwardRef(({ className, padding, unstyled, frosted = false, blurIntensity, blurTintToken, style, children, ...props }, ref) => {
+const Card = React.forwardRef(({ className, padding, unstyled, shadow = 'sm', frosted = false, blurIntensity, blurTintToken, style, children, ...props }, ref) => {
+    const visual = useVisualTokens();
+    const colors = useThemeColors();
     const frostedSurface = useFrostedSurface({
         frosted,
         blurIntensity,
@@ -33,7 +37,17 @@ const Card = React.forwardRef(({ className, padding, unstyled, frosted = false,
         defaultTintToken: 'card',
         defaultBlurPreset: 'subtle',
     });
-    const cardStyle = [frostedSurface.surfaceStyle, style];
+    const effectivePadding = surfacePadding(visual, padding ?? 'default');
+    const cardStyle = [
+        {
+            borderRadius: unstyled ? 0 : visual.radiusXl,
+            padding: unstyled ? 0 : effectivePadding,
+            borderWidth: unstyled ? 0 : visual.borderWidthHairline,
+        },
+        unstyled ? null : shadowStyle(visual, colors, shadow),
+        frostedSurface.surfaceStyle,
+        style,
+    ];
     return (_jsxs(View, { ref: ref, className: cn(cardVariants({ padding, unstyled }), frosted && 'relative overflow-hidden bg-transparent', className), style: cardStyle, ...props, children: [frostedSurface.overlay, children] }));
 });
 Card.displayName = 'Card';
@@ -41,12 +55,14 @@ const CardHeader = React.forwardRef(({ className, ...props }, ref) => {
     return _jsx(View, { ref: ref, className: cn('pb-3', className), ...props });
 });
 CardHeader.displayName = 'CardHeader';
-const CardTitle = React.forwardRef(({ className, ...props }, ref) => {
-    return (_jsx(Text, { ref: ref, className: cn('text-xl font-semibold text-card-foreground tracking-tight', className), ...props }));
+const CardTitle = React.forwardRef(({ className, style, ...props }, ref) => {
+    const visual = useVisualTokens();
+    return (_jsx(Text, { ref: ref, className: cn('font-semibold text-card-foreground tracking-tight', className), style: [typographyStyle(visual, 'title'), style], ...props }));
 });
 CardTitle.displayName = 'CardTitle';
-const CardDescription = React.forwardRef(({ className, ...props }, ref) => {
-    return _jsx(Text, { ref: ref, className: cn('text-sm text-muted-foreground', className), ...props });
+const CardDescription = 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 }));
 });
 CardDescription.displayName = 'CardDescription';
 const CardContent = React.forwardRef(({ className, ...props }, ref) => {
@@ -57,6 +73,4 @@ const CardFooter = React.forwardRef(({ className, ...props }, ref) => {
     return _jsx(View, { ref: ref, className: cn('flex-row items-center pt-1', className), ...props });
 });
 CardFooter.displayName = 'CardFooter';
-// ─── Exports ─────────────────────────────────────────────────
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, cardVariants };
-//# sourceMappingURL=card.js.map

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

@@ -1,2 +1 @@
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, cardVariants, type CardProps, type CardHeaderProps, type CardTitleProps, type CardDescriptionProps, type CardContentProps, type CardFooterProps, } from './card';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/card/index.js

@@ -1,2 +1 @@
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, cardVariants, } from './card';
-//# sourceMappingURL=index.js.map

package/dist/components/checkbox/checkbox.d.ts

@@ -6,9 +6,8 @@ export interface CheckboxProps extends Omit<ViewProps, 'children'> {
     disabled?: boolean;
     className?: string;
 }
-declare function Checkbox({ checked: controlledChecked, defaultChecked, onCheckedChange, disabled, className, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+declare function Checkbox({ checked: controlledChecked, defaultChecked, onCheckedChange, disabled, className, ...props }: CheckboxProps): import("react").JSX.Element;
 declare namespace Checkbox {
     var displayName: string;
 }
 export { Checkbox };
-//# sourceMappingURL=checkbox.d.ts.map

package/dist/components/checkbox/checkbox.js

@@ -2,15 +2,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Pressable, View } from 'react-native';
 import { cn } from '../../lib/cn';
+import { focusRing } from '../../lib/focus-ring';
 import { useInteractionTokens, withInteractivePressableStyle } from '../../lib/interaction-tokens';
+import { useVisualTokens } from '../../lib/visual-tokens';
 function Checkbox({ checked: controlledChecked, defaultChecked = false, onCheckedChange, disabled = false, className, ...props }) {
     const [internalChecked, setInternalChecked] = useState(defaultChecked);
     const isChecked = controlledChecked ?? internalChecked;
     const interaction = useInteractionTokens();
+    const visual = useVisualTokens();
     const interactiveStyle = withInteractivePressableStyle(undefined, interaction, {
         disabled,
         pressedVariant: 'default',
     });
+    const size = Math.max(18, Math.round(visual.controlHeightSm * 0.55));
+    const checkSize = Math.max(8, Math.round(size * 0.5));
     const handleToggle = () => {
         if (disabled)
             return;
@@ -18,8 +23,16 @@ function Checkbox({ checked: controlledChecked, defaultChecked = false, onChecke
         setInternalChecked(newValue);
         onCheckedChange?.(newValue);
     };
-    return (_jsx(Pressable, { onPress: handleToggle, disabled: disabled, style: interactiveStyle, hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }, accessibilityRole: "checkbox", accessibilityState: { checked: isChecked, disabled }, children: _jsx(View, { className: cn('h-5 w-5 items-center justify-center rounded border', isChecked ? 'border-primary bg-primary' : 'border-border bg-muted', className), ...props, children: isChecked && _jsx(View, { className: "h-2.5 w-2.5 rounded-sm bg-primary-foreground" }) }) }));
+    return (_jsx(Pressable, { onPress: handleToggle, disabled: disabled, style: interactiveStyle, hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }, accessibilityRole: "checkbox", accessibilityState: { checked: isChecked, disabled }, "aria-checked": isChecked, children: _jsx(View, { className: cn('items-center justify-center', isChecked ? 'border-primary bg-primary' : 'border-border bg-muted', focusRing, className), style: {
+                width: size,
+                height: size,
+                borderWidth: visual.borderWidthControl,
+                borderRadius: Math.max(6, Math.round(visual.radiusSm * 0.7)),
+            }, ...props, children: isChecked && (_jsx(View, { className: "bg-primary-foreground", style: {
+                    width: checkSize,
+                    height: checkSize,
+                    borderRadius: Math.max(3, Math.round(visual.radiusSm * 0.35)),
+                } })) }) }));
 }
 Checkbox.displayName = 'Checkbox';
 export { Checkbox };
-//# sourceMappingURL=checkbox.js.map

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

@@ -1,2 +1 @@
 export { Checkbox, type CheckboxProps } from './checkbox';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/checkbox/index.js

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

package/dist/components/collapsible/collapsible.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { type ViewProps, type PressableProps } from 'react-native';
 interface CollapsibleContextValue {
     isOpen: boolean;
@@ -20,17 +21,16 @@ export interface CollapsibleContentProps extends ViewProps {
     className?: string;
     forceMount?: boolean;
 }
-declare function Collapsible({ defaultOpen, open: controlledOpen, onOpenChange, disabled, className, children, ...props }: CollapsibleProps): import("react/jsx-runtime").JSX.Element;
+declare function Collapsible({ defaultOpen, open: controlledOpen, onOpenChange, disabled, className, children, ...props }: CollapsibleProps): React.JSX.Element;
 declare namespace Collapsible {
     var displayName: string;
 }
-declare function CollapsibleTrigger({ className, children, asChild, onPress, ...props }: CollapsibleTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function CollapsibleTrigger({ className, children, asChild, onPress, ...props }: CollapsibleTriggerProps): React.JSX.Element;
 declare namespace CollapsibleTrigger {
     var displayName: string;
 }
-declare function CollapsibleContent({ className, children, forceMount, ...props }: CollapsibleContentProps): import("react/jsx-runtime").JSX.Element | null;
+declare function CollapsibleContent({ className, children, forceMount, ...props }: CollapsibleContentProps): React.JSX.Element | null;
 declare namespace CollapsibleContent {
     var displayName: string;
 }
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };
-//# sourceMappingURL=collapsible.d.ts.map

package/dist/components/collapsible/collapsible.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { createContext, useContext, useState } from 'react';
-import { View, Pressable } from 'react-native';
+import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import { View, Pressable, } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, } from 'react-native-reanimated';
 import { cn } from '../../lib/cn';
 const CollapsibleContext = createContext({
@@ -8,22 +8,21 @@ const CollapsibleContext = createContext({
     toggle: () => { },
     disabled: false,
 });
-// Hook to access collapsible state
 export function useCollapsible() {
     return useContext(CollapsibleContext);
 }
-// ─── Components ──────────────────────────────────────────────
 function Collapsible({ defaultOpen = false, open: controlledOpen, onOpenChange, disabled = false, className, children, ...props }) {
     const [internalOpen, setInternalOpen] = useState(defaultOpen);
     const isOpen = controlledOpen ?? internalOpen;
-    const toggle = () => {
+    const toggle = useCallback(() => {
         if (disabled)
             return;
         const next = !isOpen;
         setInternalOpen(next);
         onOpenChange?.(next);
-    };
-    return (_jsx(CollapsibleContext.Provider, { value: { isOpen, toggle, disabled }, children: _jsx(View, { className: cn(className), ...props, children: children }) }));
+    }, [disabled, isOpen, onOpenChange]);
+    const contextValue = useMemo(() => ({ isOpen, toggle, disabled }), [disabled, isOpen, toggle]);
+    return (_jsx(CollapsibleContext.Provider, { value: contextValue, children: _jsx(View, { className: cn(className), ...props, children: children }) }));
 }
 function CollapsibleTrigger({ className, children, asChild, onPress, ...props }) {
     const { toggle, disabled } = useContext(CollapsibleContext);
@@ -31,11 +30,10 @@ function CollapsibleTrigger({ className, children, asChild, onPress, ...props })
         onPress?.(e);
         toggle();
     };
-    // When asChild is true, wrap child in an invisible pressable overlay
     if (asChild && React.isValidElement(children)) {
-        return (_jsx(Pressable, { onPress: handlePress, disabled: disabled, className: cn(className), ...props, children: children }));
+        return (_jsx(Pressable, { accessibilityRole: "button", onPress: handlePress, disabled: disabled, className: cn(className), ...props, children: children }));
     }
-    return (_jsx(Pressable, { className: cn(className), onPress: handlePress, disabled: disabled, ...props, children: children }));
+    return (_jsx(Pressable, { accessibilityRole: "button", className: cn(className), onPress: handlePress, disabled: disabled, ...props, children: children }));
 }
 function CollapsibleContent({ className, children, forceMount, ...props }) {
     const { isOpen } = useContext(CollapsibleContext);
@@ -57,4 +55,3 @@ Collapsible.displayName = 'Collapsible';
 CollapsibleTrigger.displayName = 'CollapsibleTrigger';
 CollapsibleContent.displayName = 'CollapsibleContent';
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };
-//# sourceMappingURL=collapsible.js.map

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

@@ -1,2 +1 @@
 export { Collapsible, CollapsibleTrigger, CollapsibleContent, useCollapsible, type CollapsibleProps, type CollapsibleTriggerProps, type CollapsibleContentProps, } from './collapsible';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/collapsible/index.js

@@ -1,2 +1 @@
 export { Collapsible, CollapsibleTrigger, CollapsibleContent, useCollapsible, } from './collapsible';
-//# sourceMappingURL=index.js.map

package/dist/components/container/container.d.ts

@@ -0,0 +1,74 @@
+import { type ViewProps } from 'react-native';
+import { type VariantProps } from '../../lib/tv';
+/**
+ * A centred content column with a maximum width.
+ *
+ * Phone-first layouts stretch to whatever the viewport is, which is correct at
+ * 390px and wrong at 1600px — line lengths become unreadable and related controls
+ * drift apart. This caps the content and centres it.
+ *
+ * There is no platform branch and none is needed: every size here is wider than any
+ * phone, so on iOS and Android the cap never engages and this renders as a plain
+ * full-width `View`. The same component is a no-op on native and the whole fix on
+ * desktop.
+ */
+declare const containerVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        /** Forms, auth, single-column reading. */
+        sm: "max-w-xl";
+        /** Default. Feeds, dashboards, most app screens. */
+        md: "max-w-3xl";
+        /** Multi-column dashboards and wide tables. */
+        lg: "max-w-5xl";
+        /** Near-full width, still stops short of an ultrawide monitor. */
+        xl: "max-w-7xl";
+        /** Opt out — edge-to-edge at every width. */
+        full: "max-w-none";
+    };
+    /** Fill the available height, for a container used as a screen root. */
+    fill: {
+        true: "flex-1";
+        false: "";
+    };
+}, undefined, "w-full self-center", {
+    size: {
+        /** Forms, auth, single-column reading. */
+        sm: "max-w-xl";
+        /** Default. Feeds, dashboards, most app screens. */
+        md: "max-w-3xl";
+        /** Multi-column dashboards and wide tables. */
+        lg: "max-w-5xl";
+        /** Near-full width, still stops short of an ultrawide monitor. */
+        xl: "max-w-7xl";
+        /** Opt out — edge-to-edge at every width. */
+        full: "max-w-none";
+    };
+    /** Fill the available height, for a container used as a screen root. */
+    fill: {
+        true: "flex-1";
+        false: "";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        /** Forms, auth, single-column reading. */
+        sm: "max-w-xl";
+        /** Default. Feeds, dashboards, most app screens. */
+        md: "max-w-3xl";
+        /** Multi-column dashboards and wide tables. */
+        lg: "max-w-5xl";
+        /** Near-full width, still stops short of an ultrawide monitor. */
+        xl: "max-w-7xl";
+        /** Opt out — edge-to-edge at every width. */
+        full: "max-w-none";
+    };
+    /** Fill the available height, for a container used as a screen root. */
+    fill: {
+        true: "flex-1";
+        false: "";
+    };
+}, undefined>>;
+export interface ContainerProps extends ViewProps, VariantProps<typeof containerVariants> {
+    className?: string;
+}
+export declare function Container({ size, fill, className, children, ...props }: ContainerProps): import("react").JSX.Element;
+export { containerVariants };

package/dist/components/container/container.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { cn } from '../../lib/cn';
+import { tv } from '../../lib/tv';
+/**
+ * A centred content column with a maximum width.
+ *
+ * Phone-first layouts stretch to whatever the viewport is, which is correct at
+ * 390px and wrong at 1600px — line lengths become unreadable and related controls
+ * drift apart. This caps the content and centres it.
+ *
+ * There is no platform branch and none is needed: every size here is wider than any
+ * phone, so on iOS and Android the cap never engages and this renders as a plain
+ * full-width `View`. The same component is a no-op on native and the whole fix on
+ * desktop.
+ */
+const containerVariants = tv({
+    base: 'w-full self-center',
+    variants: {
+        size: {
+            /** Forms, auth, single-column reading. */
+            sm: 'max-w-xl',
+            /** Default. Feeds, dashboards, most app screens. */
+            md: 'max-w-3xl',
+            /** Multi-column dashboards and wide tables. */
+            lg: 'max-w-5xl',
+            /** Near-full width, still stops short of an ultrawide monitor. */
+            xl: 'max-w-7xl',
+            /** Opt out — edge-to-edge at every width. */
+            full: 'max-w-none',
+        },
+        /** Fill the available height, for a container used as a screen root. */
+        fill: {
+            true: 'flex-1',
+            false: '',
+        },
+    },
+    defaultVariants: { size: 'md', fill: false },
+});
+export function Container({ size, fill, className, children, ...props }) {
+    return (_jsx(View, { className: cn(containerVariants({ size, fill }), className), ...props, children: children }));
+}
+export { containerVariants };

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

@@ -0,0 +1 @@
+export * from './container';

package/dist/components/container/index.js

@@ -0,0 +1 @@
+export * from './container';

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

@@ -21,29 +21,28 @@ export interface ContextMenuLabelProps extends ViewProps {
 export interface ContextMenuSeparatorProps extends ViewProps {
     className?: string;
 }
-declare function ContextMenu({ children }: ContextMenuProps): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenu({ children }: ContextMenuProps): React.JSX.Element;
 declare namespace ContextMenu {
     var displayName: string;
 }
-declare function ContextMenuTrigger({ className, children, asChild, ...props }: ContextMenuTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuTrigger({ className, children, asChild, ...props }: ContextMenuTriggerProps): React.JSX.Element;
 declare namespace ContextMenuTrigger {
     var displayName: string;
 }
-declare function ContextMenuContent({ className, children, frosted, blurIntensity, blurTintToken, style, ...props }: ContextMenuContentProps): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuContent({ className, children, frosted, blurIntensity, blurTintToken, style, ...props }: ContextMenuContentProps): React.JSX.Element;
 declare namespace ContextMenuContent {
     var displayName: string;
 }
-declare function ContextMenuItem({ className, ...props }: ContextMenuItemProps): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuItem({ className, style, ...props }: ContextMenuItemProps): React.JSX.Element;
 declare namespace ContextMenuItem {
     var displayName: string;
 }
-declare function ContextMenuLabel({ className, children, ...props }: ContextMenuLabelProps): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuLabel({ className, children, ...props }: ContextMenuLabelProps): React.JSX.Element;
 declare namespace ContextMenuLabel {
     var displayName: string;
 }
-declare function ContextMenuSeparator({ className, ...props }: ContextMenuSeparatorProps): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuSeparator({ className, style, ...props }: ContextMenuSeparatorProps): React.JSX.Element;
 declare namespace ContextMenuSeparator {
     var displayName: string;
 }
 export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator, };
-//# sourceMappingURL=context-menu.d.ts.map

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

@@ -1,16 +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 ContextMenuContext = createContext({
     open: false,
     setOpen: () => { },
 });
-// ─── Components ──────────────────────────────────────────────
 function ContextMenu({ children }) {
     const [open, setOpen] = useState(false);
-    return (_jsx(ContextMenuContext.Provider, { value: { open, setOpen }, children: children }));
+    const contextValue = useMemo(() => ({ open, setOpen }), [open]);
+    return _jsx(ContextMenuContext.Provider, { value: contextValue, children: children });
 }
 function ContextMenuTrigger({ className, children, asChild, ...props }) {
     const { setOpen } = useContext(ContextMenuContext);
@@ -25,10 +28,12 @@ function ContextMenuTrigger({ className, children, asChild, ...props }) {
             ...props,
         });
     }
-    return (_jsx(Pressable, { className: cn(className), onLongPress: () => setOpen(true), delayLongPress: 300, ...props, children: children }));
+    return (_jsx(Pressable, { accessibilityRole: "button", className: cn(className), onLongPress: () => setOpen(true), delayLongPress: 300, ...props, children: children }));
 }
 function ContextMenuContent({ className, children, frosted = false, blurIntensity, blurTintToken, style, ...props }) {
     const { open, setOpen } = useContext(ContextMenuContext);
+    const visual = useVisualTokens();
+    const colors = useThemeColors();
     const frostedSurface = useFrostedSurface({
         frosted,
         blurIntensity,
@@ -36,21 +41,47 @@ function ContextMenuContent({ className, children, frosted = false, blurIntensit
         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, 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 ContextMenuItem({ className, ...props }) {
+function ContextMenuItem({ className, style, ...props }) {
     const { setOpen } = useContext(ContextMenuContext);
-    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 ContextMenuLabel({ 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 ContextMenuSeparator({ className, ...props }) {
-    return _jsx(View, { className: cn('-mx-1 my-1 h-px bg-border', className), ...props });
+function ContextMenuSeparator({ className, style, ...props }) {
+    const visual = useVisualTokens();
+    return (_jsx(View, { className: cn('-mx-1 my-1 bg-border', className), style: [{ height: visual.borderWidthHairline }, style], ...props }));
 }
 ContextMenu.displayName = 'ContextMenu';
 ContextMenuTrigger.displayName = 'ContextMenuTrigger';
@@ -59,4 +90,3 @@ ContextMenuItem.displayName = 'ContextMenuItem';
 ContextMenuLabel.displayName = 'ContextMenuLabel';
 ContextMenuSeparator.displayName = 'ContextMenuSeparator';
 export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator, };
-//# sourceMappingURL=context-menu.js.map

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

@@ -1,2 +1 @@
 export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator, type ContextMenuProps, type ContextMenuTriggerProps, type ContextMenuContentProps, type ContextMenuItemProps, type ContextMenuLabelProps, type ContextMenuSeparatorProps, } from './context-menu';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,2 +1 @@
 export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator, } from './context-menu';
-//# sourceMappingURL=index.js.map

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

@@ -1,41 +1,21 @@
-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 { ForwardRefComponent } from '../../lib/ref-types';
 declare const dataRowVariants: import("tailwind-variants").TVReturnType<{
     size: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
-}, undefined, "w-full flex-row items-center gap-3", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "w-full flex-row items-center gap-3", {
     size: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
-}>, {
-    size: {
-        default: string;
-        compact: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    size: {
-        default: string;
-        compact: string;
-    };
-}, undefined, "w-full flex-row items-center gap-3", import("tailwind-variants/dist/config.js").TVConfig<{
-    size: {
-        default: string;
-        compact: string;
-    };
-}, {
-    size: {
-        default: string;
-        compact: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface DataRowProps extends ViewProps {
     size?: 'default' | 'compact';
     className?: string;
@@ -58,12 +38,11 @@ export interface DataRowDescriptionProps extends TextProps {
 export interface DataRowValueProps extends TextProps {
     className?: string;
 }
-declare const DataRow: React.ForwardRefExoticComponent<DataRowProps & React.RefAttributes<View>>;
-declare const DataRowLeft: React.ForwardRefExoticComponent<DataRowLeftProps & React.RefAttributes<View>>;
-declare const DataRowCenter: React.ForwardRefExoticComponent<DataRowCenterProps & React.RefAttributes<View>>;
-declare const DataRowRight: React.ForwardRefExoticComponent<DataRowRightProps & React.RefAttributes<View>>;
-declare const DataRowLabel: React.ForwardRefExoticComponent<DataRowLabelProps & React.RefAttributes<Text>>;
-declare const DataRowDescription: React.ForwardRefExoticComponent<DataRowDescriptionProps & React.RefAttributes<Text>>;
-declare const DataRowValue: React.ForwardRefExoticComponent<DataRowValueProps & React.RefAttributes<Text>>;
+declare const DataRow: ForwardRefComponent<ViewInstance, DataRowProps>;
+declare const DataRowLeft: ForwardRefComponent<ViewInstance, DataRowLeftProps>;
+declare const DataRowCenter: ForwardRefComponent<ViewInstance, DataRowCenterProps>;
+declare const DataRowRight: ForwardRefComponent<ViewInstance, DataRowRightProps>;
+declare const DataRowLabel: ForwardRefComponent<TextInstance, DataRowLabelProps>;
+declare const DataRowDescription: ForwardRefComponent<TextInstance, DataRowDescriptionProps>;
+declare const DataRowValue: ForwardRefComponent<TextInstance, DataRowValueProps>;
 export { DataRow, DataRowLeft, DataRowCenter, DataRowRight, DataRowLabel, DataRowDescription, DataRowValue, dataRowVariants, };
-//# sourceMappingURL=data-row.d.ts.map