@thewhileloop/whileui 1.2.2 → 2.0.0

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

@@ -121,4 +121,3 @@ declare const FormControl: React.ForwardRefExoticComponent<FormControlProps & Re
 declare const FormHint: React.ForwardRefExoticComponent<FormHintProps & React.RefAttributes<Text>>;
 declare const FormMessage: React.ForwardRefExoticComponent<FormMessageProps & React.RefAttributes<Text>>;
 export { FormField, FormLabel, FormControl, FormHint, FormMessage, formFieldVariants, formControlVariants, };
-//# sourceMappingURL=form-field.d.ts.map

package/dist/components/form-field/form-field.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { createContext, useContext } from 'react';
+import React, { createContext, useContext, useMemo } from 'react';
 import { Text, View } from 'react-native';
 import { cn } from '../../lib/cn';
 import { tv } from '../../lib/tv';
 import { useInteractionTokens } from '../../lib/interaction-tokens';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { typographyStyle } from '../../lib/recipes';
 const formFieldVariants = tv({
     base: 'w-full',
     variants: {
@@ -20,8 +22,8 @@ const formControlVariants = tv({
     base: 'justify-center',
     variants: {
         density: {
-            default: 'min-h-10',
-            compact: 'min-h-9',
+            default: '',
+            compact: '',
         },
         invalid: {
             true: '',
@@ -41,31 +43,42 @@ const FormFieldContext = createContext({
 });
 const FormField = React.forwardRef(({ className, density = 'default', invalid = false, disabled = false, required = false, ...props }, ref) => {
     const interaction = useInteractionTokens();
-    return (_jsx(FormFieldContext.Provider, { value: { density, invalid, disabled, required }, children: _jsx(View, { ref: ref, className: cn(formFieldVariants({ density }), className), style: disabled ? { opacity: interaction.disabledOpacitySoft } : undefined, ...props }) }));
+    const contextValue = useMemo(() => ({ density, invalid, disabled, required }), [density, disabled, invalid, required]);
+    return (_jsx(FormFieldContext.Provider, { value: contextValue, children: _jsx(View, { ref: ref, className: cn(formFieldVariants({ density }), className), style: disabled ? { opacity: interaction.disabledOpacitySoft } : undefined, ...props }) }));
 });
 FormField.displayName = 'FormField';
-const FormLabel = React.forwardRef(({ className, showRequiredIndicator = true, children, ...props }, ref) => {
+const FormLabel = React.forwardRef(({ className, showRequiredIndicator = true, children, style, ...props }, ref) => {
     const { invalid, disabled, required } = useContext(FormFieldContext);
-    return (_jsxs(Text, { ref: ref, className: cn('text-sm font-medium leading-tight text-foreground', invalid && 'text-destructive', disabled && 'text-muted-foreground', className), ...props, children: [children, required && showRequiredIndicator ? _jsx(Text, { className: "text-destructive", children: " *" }) : null] }));
+    const visual = useVisualTokens();
+    return (_jsxs(Text, { ref: ref, className: cn('font-medium text-foreground', invalid && 'text-destructive', disabled && 'text-muted-foreground', className), style: [typographyStyle(visual, 'label'), style], ...props, children: [children, required && showRequiredIndicator ? _jsx(Text, { className: "text-destructive", children: " *" }) : null] }));
 });
 FormLabel.displayName = 'FormLabel';
-const FormControl = React.forwardRef(({ className, ...props }, ref) => {
+const FormControl = React.forwardRef(({ className, style, ...props }, ref) => {
     const { density, invalid, disabled } = useContext(FormFieldContext);
     const interaction = useInteractionTokens();
-    return (_jsx(View, { ref: ref, className: cn(formControlVariants({ density, invalid }), invalid && 'rounded-md ring-1 ring-destructive-soft-border', className), style: disabled ? { opacity: interaction.disabledOpacitySoft } : undefined, ...props }));
+    const visual = useVisualTokens();
+    return (_jsx(View, { ref: ref, className: cn(formControlVariants({ density, invalid }), invalid && 'ring-1 ring-destructive-soft-border', className), style: [
+            {
+                minHeight: density === 'compact' ? visual.controlHeightSm : visual.controlHeightDefault,
+            },
+            invalid ? { borderRadius: visual.radiusMd } : null,
+            disabled ? { opacity: interaction.disabledOpacitySoft } : null,
+            style,
+        ], ...props }));
 });
 FormControl.displayName = 'FormControl';
-const FormHint = React.forwardRef(({ className, ...props }, ref) => {
+const FormHint = React.forwardRef(({ className, style, ...props }, ref) => {
     const { invalid } = useContext(FormFieldContext);
-    return (_jsx(Text, { ref: ref, className: cn('text-xs text-muted-foreground', invalid && 'text-destructive-muted', className), ...props }));
+    const visual = useVisualTokens();
+    return (_jsx(Text, { ref: ref, className: cn('text-muted-foreground', invalid && 'text-destructive-muted', className), style: [typographyStyle(visual, 'caption'), style], ...props }));
 });
 FormHint.displayName = 'FormHint';
-const FormMessage = React.forwardRef(({ className, children, ...props }, ref) => {
+const FormMessage = React.forwardRef(({ className, children, style, ...props }, ref) => {
+    const visual = useVisualTokens();
     if (children === undefined || children === null || children === false) {
         return null;
     }
-    return (_jsx(Text, { ref: ref, className: cn('text-xs font-medium text-destructive', className), ...props, children: children }));
+    return (_jsx(Text, { ref: ref, className: cn('font-medium text-destructive', className), style: [typographyStyle(visual, 'caption'), style], ...props, children: children }));
 });
 FormMessage.displayName = 'FormMessage';
 export { FormField, FormLabel, FormControl, FormHint, FormMessage, formFieldVariants, formControlVariants, };
-//# sourceMappingURL=form-field.js.map

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

@@ -1,2 +1 @@
 export { FormField, FormLabel, FormControl, FormHint, FormMessage, formFieldVariants, formControlVariants, type FormFieldProps, type FormLabelProps, type FormControlProps, type FormHintProps, type FormMessageProps, } from './form-field';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/form-field/index.js

@@ -1,2 +1 @@
 export { FormField, FormLabel, FormControl, FormHint, FormMessage, formFieldVariants, formControlVariants, } from './form-field';
-//# sourceMappingURL=index.js.map

package/dist/components/hover-card/hover-card.d.ts

@@ -14,8 +14,7 @@ export interface HoverCardContentProps extends React.ComponentPropsWithoutRef<ty
     className?: string;
     portalHost?: string;
 }
-declare function HoverCard({ onOpenChange, openDelay, closeDelay, children }: HoverCardProps): import("react/jsx-runtime").JSX.Element;
+declare function HoverCard({ onOpenChange, openDelay, closeDelay, children }: HoverCardProps): React.JSX.Element;
 declare const HoverCardTrigger: React.ForwardRefExoticComponent<HoverCardTriggerProps & React.RefAttributes<import("@rn-primitives/hover-card").TriggerRef>>;
 declare const HoverCardContent: React.ForwardRefExoticComponent<HoverCardContentProps & React.RefAttributes<import("react-native").View>>;
 export { HoverCard, HoverCardTrigger, HoverCardContent };
-//# sourceMappingURL=hover-card.d.ts.map

package/dist/components/hover-card/hover-card.js

@@ -4,7 +4,9 @@ import { Platform, StyleSheet } from 'react-native';
 import * as HoverCardPrimitive from '@rn-primitives/hover-card';
 import { cn } from '../../lib/cn';
 import { useFrostedSurface } from '../../lib/frosted-surface';
-// ─── Components ──────────────────────────────────────────────
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { useThemeColors } from '../../lib/theme-colors';
+import { shadowStyle, surfacePadding, surfaceRadius } from '../../lib/recipes';
 function HoverCard({ onOpenChange, openDelay, closeDelay, children }) {
     return (_jsx(HoverCardPrimitive.Root, { onOpenChange: onOpenChange, openDelay: openDelay, closeDelay: closeDelay, children: children }));
 }
@@ -18,16 +20,23 @@ const HoverCardContent = React.forwardRef(({ className, align = 'center', sideOf
         defaultTintToken: 'popover',
         defaultBlurPreset: 'subtle',
     });
+    const visual = useVisualTokens();
+    const colors = useThemeColors();
     const resolvedStyle = StyleSheet.flatten([
         Platform.OS === 'web' ? undefined : contentStyles,
+        {
+            borderRadius: surfaceRadius(visual, 'lg'),
+            borderWidth: visual.borderWidthHairline,
+            padding: surfacePadding(visual, 'sm'),
+        },
+        shadowStyle(visual, colors, 'md'),
         frostedSurface.surfaceStyle,
         style,
     ]);
-    return (_jsx(HoverCardPrimitive.Portal, { hostName: portalHost, children: _jsx(HoverCardPrimitive.Overlay, { style: Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined, children: _jsxs(HoverCardPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, className: cn('z-50 w-64 rounded-lg border border-border p-4 shadow-lg relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-popover', 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), style: resolvedStyle, ...props, children: [frostedSurface.overlay, children] }) }) }));
+    return (_jsx(HoverCardPrimitive.Portal, { hostName: portalHost, children: _jsx(HoverCardPrimitive.Overlay, { style: Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined, children: _jsxs(HoverCardPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, className: cn('z-50 w-64 border-border relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-popover', 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), style: resolvedStyle, ...props, children: [frostedSurface.overlay, children] }) }) }));
 });
 HoverCardContent.displayName = 'HoverCardContent';
 const contentStyles = {
     position: 'absolute',
 };
 export { HoverCard, HoverCardTrigger, HoverCardContent };
-//# sourceMappingURL=hover-card.js.map

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

@@ -1,2 +1 @@
 export { HoverCard, HoverCardTrigger, HoverCardContent, type HoverCardProps, type HoverCardTriggerProps, type HoverCardContentProps, } from './hover-card';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/hover-card/index.js

@@ -1,2 +1 @@
 export { HoverCard, HoverCardTrigger, HoverCardContent, } from './hover-card';
-//# sourceMappingURL=index.js.map

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

@@ -1,2 +1 @@
 export { Input, inputVariants, type InputProps } from './input';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/input/index.js

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

package/dist/components/input/input.d.ts

@@ -6,7 +6,7 @@ declare const inputVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         error: string;
     };
-}, undefined, "min-h-10 w-full rounded-md border border-border bg-muted px-3 py-2 text-sm text-foreground", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "w-full border-border bg-muted text-foreground", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         error: string;
@@ -26,7 +26,7 @@ declare const inputVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         error: string;
     };
-}, undefined, "min-h-10 w-full rounded-md border border-border bg-muted px-3 py-2 text-sm text-foreground", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "w-full border-border bg-muted text-foreground", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         error: string;
@@ -45,4 +45,3 @@ export interface InputProps extends TextInputProps, VariantProps<typeof inputVar
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<TextInput>>;
 export { Input, inputVariants };
-//# sourceMappingURL=input.d.ts.map

package/dist/components/input/input.js

@@ -2,11 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { View, TextInput } from 'react-native';
 import { cn } from '../../lib/cn';
+import { focusRing } from '../../lib/focus-ring';
 import { tv } from '../../lib/tv';
 import { useThemeColors } from '../../lib/theme-colors';
 import { useInteractionTokens } from '../../lib/interaction-tokens';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { typographyStyle } from '../../lib/recipes';
 const inputVariants = tv({
-    base: 'min-h-10 w-full rounded-md border border-border bg-muted px-3 py-2 text-sm text-foreground',
+    base: 'w-full border-border bg-muted text-foreground',
     variants: {
         variant: {
             default: 'border-border',
@@ -20,8 +23,20 @@ const inputVariants = tv({
 const Input = React.forwardRef(({ className, prefix, suffix, inputClassName, variant, editable = true, placeholderTextColor, ...props }, ref) => {
     const colors = useThemeColors();
     const interaction = useInteractionTokens();
-    return (_jsxs(View, { className: cn('flex-row items-center rounded-md border border-border bg-muted', inputVariants({ variant }), className), style: !editable ? { opacity: interaction.disabledOpacity } : undefined, children: [prefix && _jsx(View, { className: "pl-3", children: prefix }), _jsx(TextInput, { ref: ref, className: cn('flex-1 py-2 text-sm text-foreground placeholder:text-muted-foreground outline-none', prefix && 'pl-2', suffix && 'pr-2', inputClassName), editable: editable, placeholderTextColor: placeholderTextColor ?? colors.placeholder, ...props }), suffix && _jsx(View, { className: "pr-3", children: suffix })] }));
+    const visual = useVisualTokens();
+    return (_jsxs(View, { className: cn('flex-row items-center border-border bg-muted', inputVariants({ variant }), className), style: [
+            {
+                minHeight: visual.controlHeightDefault,
+                borderWidth: visual.borderWidthControl,
+                borderRadius: visual.radiusLg,
+                paddingHorizontal: visual.controlPaddingXDefault,
+            },
+            !editable ? { opacity: interaction.disabledOpacity } : undefined,
+        ], children: [prefix && (_jsx(View, { style: { paddingRight: Math.max(8, Math.round(visual.controlPaddingXDefault * 0.5)) }, children: prefix })), _jsx(TextInput, { ref: ref, className: cn('flex-1 text-foreground placeholder:text-muted-foreground', focusRing, inputClassName), style: {
+                    ...typographyStyle(visual, 'label'),
+                    minHeight: visual.controlHeightDefault - 2,
+                    paddingVertical: visual.controlPaddingYDefault,
+                }, editable: editable, placeholderTextColor: placeholderTextColor ?? colors.placeholder, ...props }), suffix && (_jsx(View, { style: { paddingLeft: Math.max(8, Math.round(visual.controlPaddingXDefault * 0.5)) }, children: suffix }))] }));
 });
 Input.displayName = 'Input';
 export { Input, inputVariants };
-//# sourceMappingURL=input.js.map

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

@@ -1,2 +1 @@
 export { Label, type LabelProps } from './label';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/label/index.js

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

package/dist/components/label/label.d.ts

@@ -4,4 +4,3 @@ export interface LabelProps extends TextProps {
 }
 declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<Text>>;
 export { Label };
-//# sourceMappingURL=label.d.ts.map

package/dist/components/label/label.js

@@ -10,4 +10,3 @@ const Label = React.forwardRef(({ className, style, ...props }, ref) => {
 });
 Label.displayName = 'Label';
 export { Label };
-//# sourceMappingURL=label.js.map

package/dist/components/labeled-field/index.d.ts

@@ -1,2 +1 @@
 export { LabeledField, LabeledFieldControl, type LabeledFieldProps, type LabeledFieldControlProps, } from './labeled-field';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/labeled-field/index.js

@@ -1,2 +1 @@
 export { LabeledField, LabeledFieldControl, } from './labeled-field';
-//# sourceMappingURL=index.js.map

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

@@ -13,7 +13,6 @@ export interface LabeledFieldProps extends Omit<FormFieldProps, 'children'> {
 export interface LabeledFieldControlProps extends ViewProps {
     className?: string;
 }
-declare function LabeledField({ label, hint, error, leftSlot, rightSlot, children, controlWrapperClassName, required, disabled, invalid, ...props }: LabeledFieldProps): import("react/jsx-runtime").JSX.Element;
+declare function LabeledField({ label, hint, error, leftSlot, rightSlot, children, controlWrapperClassName, required, disabled, invalid, ...props }: LabeledFieldProps): React.JSX.Element;
 declare const LabeledFieldControl: React.ForwardRefExoticComponent<LabeledFieldControlProps & React.RefAttributes<View>>;
 export { LabeledField, LabeledFieldControl };
-//# sourceMappingURL=labeled-field.d.ts.map

package/dist/components/labeled-field/labeled-field.js

@@ -4,14 +4,22 @@ import { View } from 'react-native';
 import { FormControl, FormField, FormHint, FormLabel, FormMessage, } from '../form-field';
 import { cn } from '../../lib/cn';
 import { useInteractionTokens } from '../../lib/interaction-tokens';
+import { useVisualTokens } from '../../lib/visual-tokens';
 function LabeledField({ label, hint, error, leftSlot, rightSlot, children, controlWrapperClassName, required, disabled, invalid, ...props }) {
     const isInvalid = invalid ?? Boolean(error);
     const interaction = useInteractionTokens();
-    return (_jsxs(FormField, { required: required, disabled: disabled, invalid: isInvalid, ...props, children: [label ? _jsx(FormLabel, { children: label }) : null, _jsx(FormControl, { children: _jsxs(View, { className: cn('flex-row items-center gap-2 rounded-md border border-border bg-muted px-3', isInvalid && 'border-destructive', disabled && '', controlWrapperClassName), style: disabled ? { opacity: interaction.disabledOpacitySoft } : undefined, children: [leftSlot ? _jsx(View, { className: "shrink-0", children: leftSlot }) : null, _jsx(View, { className: "min-h-10 min-w-0 flex-1 justify-center", children: children }), rightSlot ? _jsx(View, { className: "shrink-0", children: rightSlot }) : null] }) }), error ? _jsx(FormMessage, { children: error }) : hint ? _jsx(FormHint, { children: hint }) : null] }));
+    const visual = useVisualTokens();
+    return (_jsxs(FormField, { required: required, disabled: disabled, invalid: isInvalid, ...props, children: [label ? _jsx(FormLabel, { children: label }) : null, _jsx(FormControl, { children: _jsxs(View, { className: cn('flex-row items-center gap-2 border border-border bg-muted', isInvalid && 'border-destructive', disabled && '', controlWrapperClassName), style: [
+                        {
+                            borderRadius: visual.radiusLg,
+                            borderWidth: visual.borderWidthControl,
+                            paddingHorizontal: visual.controlPaddingXDefault,
+                        },
+                        disabled ? { opacity: interaction.disabledOpacitySoft } : null,
+                    ], children: [leftSlot ? _jsx(View, { className: "shrink-0", children: leftSlot }) : null, _jsx(View, { className: "min-w-0 flex-1 justify-center", style: { minHeight: visual.controlHeightDefault }, children: children }), rightSlot ? _jsx(View, { className: "shrink-0", children: rightSlot }) : null] }) }), error ? _jsx(FormMessage, { children: error }) : hint ? _jsx(FormHint, { children: hint }) : null] }));
 }
 const LabeledFieldControl = React.forwardRef(({ className, ...props }, ref) => {
     return _jsx(View, { ref: ref, className: cn('min-w-0 flex-1', className), ...props });
 });
 LabeledFieldControl.displayName = 'LabeledFieldControl';
 export { LabeledField, LabeledFieldControl };
-//# sourceMappingURL=labeled-field.js.map

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

@@ -1,2 +1 @@
 export { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarLabel, MenubarSeparator, type MenubarProps, type MenubarMenuProps, type MenubarTriggerProps, type MenubarContentProps, type MenubarItemProps, type MenubarLabelProps, type MenubarSeparatorProps, } from './menubar';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/menubar/index.js

@@ -1,2 +1 @@
 export { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarLabel, MenubarSeparator, } from './menubar';
-//# sourceMappingURL=index.js.map

package/dist/components/menubar/menubar.d.ts

@@ -23,33 +23,32 @@ export interface MenubarLabelProps extends ViewProps {
 export interface MenubarSeparatorProps extends ViewProps {
     className?: string;
 }
-declare function Menubar({ className, ...props }: MenubarProps): import("react/jsx-runtime").JSX.Element;
+declare function Menubar({ className, style, ...props }: MenubarProps): React.JSX.Element;
 declare namespace Menubar {
     var displayName: string;
 }
-declare function MenubarMenu({ children }: MenubarMenuProps): import("react/jsx-runtime").JSX.Element;
+declare function MenubarMenu({ children }: MenubarMenuProps): React.JSX.Element;
 declare namespace MenubarMenu {
     var displayName: string;
 }
-declare function MenubarTrigger({ className, ...props }: MenubarTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function MenubarTrigger({ className, style, ...props }: MenubarTriggerProps): React.JSX.Element;
 declare namespace MenubarTrigger {
     var displayName: string;
 }
-declare function MenubarContent({ className, children, frosted, blurIntensity, blurTintToken, style, ...props }: MenubarContentProps): import("react/jsx-runtime").JSX.Element;
+declare function MenubarContent({ className, children, frosted, blurIntensity, blurTintToken, style, ...props }: MenubarContentProps): React.JSX.Element;
 declare namespace MenubarContent {
     var displayName: string;
 }
-declare function MenubarItem({ className, ...props }: MenubarItemProps): import("react/jsx-runtime").JSX.Element;
+declare function MenubarItem({ className, style, ...props }: MenubarItemProps): React.JSX.Element;
 declare namespace MenubarItem {
     var displayName: string;
 }
-declare function MenubarLabel({ className, children, ...props }: MenubarLabelProps): import("react/jsx-runtime").JSX.Element;
+declare function MenubarLabel({ className, children, ...props }: MenubarLabelProps): React.JSX.Element;
 declare namespace MenubarLabel {
     var displayName: string;
 }
-declare function MenubarSeparator({ className, ...props }: MenubarSeparatorProps): import("react/jsx-runtime").JSX.Element;
+declare function MenubarSeparator({ className, style, ...props }: MenubarSeparatorProps): React.JSX.Element;
 declare namespace MenubarSeparator {
     var displayName: string;
 }
 export { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarLabel, MenubarSeparator, };
-//# sourceMappingURL=menubar.d.ts.map

package/dist/components/menubar/menubar.js

@@ -1,26 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useState } from 'react';
+import { 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 { controlRecipe, shadowStyle, surfaceRadius, typographyStyle } from '../../lib/recipes';
 const MenubarMenuContext = createContext({
     open: false,
     setOpen: () => { },
 });
-// ─── Components ──────────────────────────────────────────────
-function Menubar({ className, ...props }) {
-    return (_jsx(View, { className: cn('flex flex-row items-center gap-1 rounded-lg border border-border bg-background p-1', className), ...props }));
+function Menubar({ className, style, ...props }) {
+    const visual = useVisualTokens();
+    return (_jsx(View, { className: cn('flex flex-row items-center gap-1 border-border bg-background p-1', className), style: [{ borderRadius: visual.radiusLg, borderWidth: visual.borderWidthHairline }, style], ...props }));
 }
 function MenubarMenu({ children }) {
     const [open, setOpen] = useState(false);
-    return (_jsx(MenubarMenuContext.Provider, { value: { open, setOpen }, children: children }));
+    const contextValue = useMemo(() => ({ open, setOpen }), [open]);
+    return _jsx(MenubarMenuContext.Provider, { value: contextValue, children: children });
 }
-function MenubarTrigger({ className, ...props }) {
+function MenubarTrigger({ className, style, ...props }) {
     const { setOpen } = useContext(MenubarMenuContext);
-    return (_jsx(Pressable, { className: cn('rounded-md px-3 py-1.5 active:bg-accent', className), onPress: () => setOpen(true), ...props }));
+    const visual = useVisualTokens();
+    const tokenStyle = controlRecipe(visual, 'sm');
+    return (_jsx(Pressable, { accessibilityRole: "button", className: cn('active:bg-accent', className), style: (state) => [tokenStyle, typeof style === 'function' ? style(state) : style], onPress: () => setOpen(true), ...props }));
 }
 function MenubarContent({ className, children, frosted = false, blurIntensity, blurTintToken, style, ...props }) {
     const { open, setOpen } = useContext(MenubarMenuContext);
+    const visual = useVisualTokens();
+    const colors = useThemeColors();
     const frostedSurface = useFrostedSurface({
         frosted,
         blurIntensity,
@@ -28,21 +36,47 @@ function MenubarContent({ className, children, frosted = false, blurIntensity, b
         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 MenubarItem({ className, ...props }) {
+function MenubarItem({ className, style, ...props }) {
     const { setOpen } = useContext(MenubarMenuContext);
-    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 MenubarLabel({ 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 MenubarSeparator({ className, ...props }) {
-    return _jsx(View, { className: cn('-mx-1 my-1 h-px bg-border', className), ...props });
+function MenubarSeparator({ className, style, ...props }) {
+    const visual = useVisualTokens();
+    return (_jsx(View, { className: cn('-mx-1 my-1 bg-border', className), style: [{ height: visual.borderWidthHairline }, style], ...props }));
 }
 Menubar.displayName = 'Menubar';
 MenubarMenu.displayName = 'MenubarMenu';
@@ -52,4 +86,3 @@ MenubarItem.displayName = 'MenubarItem';
 MenubarLabel.displayName = 'MenubarLabel';
 MenubarSeparator.displayName = 'MenubarSeparator';
 export { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarLabel, MenubarSeparator, };
-//# sourceMappingURL=menubar.js.map

package/dist/components/numeric-input/index.d.ts

@@ -1,2 +1 @@
 export { NumericInput, numericInputVariants, numericInputTextVariants, type NumericInputProps, } from './numeric-input';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/numeric-input/index.js

@@ -1,2 +1 @@
 export { NumericInput, numericInputVariants, numericInputTextVariants, } from './numeric-input';
-//# sourceMappingURL=index.js.map