@frosted-ui/react-native 0.0.1-canary.100

package/dist/components/dialog.js

@@ -0,0 +1,141 @@
+import { Heading } from '../components/heading';
+import { Text } from '../components/text';
+import { getDialogBackdropStyle, getDialogContentStyle, getDialogDescriptionSize, getDialogOverlayStyle, getDialogSizeStyles, getDialogTitleSize, } from '../lib/dialog-styles';
+import { useThemeTokens } from '../lib/use-theme-tokens';
+import * as DialogPrimitive from '@rn-primitives/dialog';
+import * as React from 'react';
+import { Platform, Pressable, StyleSheet, useWindowDimensions, View, } from 'react-native';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+import { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';
+const DialogContentContext = React.createContext({
+    size: '3',
+});
+// ============================================================================
+// Components
+// ============================================================================
+const FullWindowOverlay = Platform.OS === 'ios' ? RNFullWindowOverlay : React.Fragment;
+const DialogRoot = (props) => <DialogPrimitive.Root {...props}/>;
+DialogRoot.displayName = 'Dialog.Root';
+const DialogTrigger = (props) => <DialogPrimitive.Trigger {...props} asChild/>;
+DialogTrigger.displayName = 'Dialog.Trigger';
+const DialogClose = (props) => <DialogPrimitive.Close {...props} asChild/>;
+DialogClose.displayName = 'Dialog.Close';
+// Overlay
+function DialogOverlay({ children, ...props }) {
+    const overlayStyle = getDialogOverlayStyle();
+    const backdropStyle = getDialogBackdropStyle();
+    if (Platform.OS === 'web') {
+        return (<FullWindowOverlay>
+        <DialogPrimitive.Overlay style={overlayStyle} {...props}>
+          <View style={backdropStyle} pointerEvents="none"/>
+          {children}
+        </DialogPrimitive.Overlay>
+      </FullWindowOverlay>);
+    }
+    // Native: Use Pressable as direct child with asChild to handle onPress for dismissal
+    // The Pressable receives onPress from the primitive to close the dialog when backdrop is tapped
+    const nativeBackdropStyle = getDialogBackdropStyle();
+    return (<FullWindowOverlay>
+      <DialogPrimitive.Overlay {...props} asChild>
+        <Pressable style={overlayStyle}>
+          {/* Animated backdrop */}
+          <Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(150)} style={nativeBackdropStyle} pointerEvents="none"/>
+          {/* Animated content */}
+          <Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(150)}>
+            {children}
+          </Animated.View>
+        </Pressable>
+      </DialogPrimitive.Overlay>
+    </FullWindowOverlay>);
+}
+DialogOverlay.displayName = 'Dialog.Overlay';
+function DialogContent({ size = '3', portalHost, children, style, ...props }) {
+    const { colors, isDark } = useThemeTokens();
+    const { width: windowWidth } = useWindowDimensions();
+    const contentStyle = getDialogContentStyle(size, colors, isDark, windowWidth, style);
+    const contextValue = React.useMemo(() => ({ size }), [size]);
+    // On web, flatten styles to avoid "indexed property setter" error
+    const finalStyle = Platform.OS === 'web'
+        ? StyleSheet.flatten([
+            contentStyle,
+            { animation: 'fui-dialog-content-show 400ms cubic-bezier(0.16, 1, 0.3, 1)' },
+            style,
+        ])
+        : [contentStyle, style];
+    return (<DialogPrimitive.Portal hostName={portalHost}>
+      <DialogOverlay>
+        <DialogPrimitive.Content style={finalStyle} {...props}>
+          <DialogContentContext.Provider value={contextValue}>
+            {children}
+          </DialogContentContext.Provider>
+        </DialogPrimitive.Content>
+      </DialogOverlay>
+    </DialogPrimitive.Portal>);
+}
+DialogContent.displayName = 'Dialog.Content';
+function DialogTitle({ size: sizeProp, style, ...props }) {
+    const { size: contextSize } = React.useContext(DialogContentContext);
+    const size = sizeProp ?? getDialogTitleSize(contextSize);
+    const sizeStyles = getDialogSizeStyles(contextSize);
+    return (<View style={{ marginBottom: sizeStyles.titleMarginBottom }}>
+      <DialogPrimitive.Title asChild>
+        <Heading size={size} style={style} {...props}/>
+      </DialogPrimitive.Title>
+    </View>);
+}
+DialogTitle.displayName = 'Dialog.Title';
+function DialogDescription({ size: sizeProp, style, ...props }) {
+    const { size: contextSize } = React.useContext(DialogContentContext);
+    const size = sizeProp ?? getDialogDescriptionSize(contextSize);
+    const sizeStyles = getDialogSizeStyles(contextSize);
+    return (<View style={{ marginBottom: sizeStyles.descriptionMarginBottom }}>
+      <DialogPrimitive.Description asChild>
+        <Text size={size} style={style} {...props}/>
+      </DialogPrimitive.Description>
+    </View>);
+}
+DialogDescription.displayName = 'Dialog.Description';
+// Inject CSS keyframes for web animations
+if (Platform.OS === 'web' && typeof document !== 'undefined') {
+    const styleId = 'frosted-ui-dialog-keyframes';
+    if (!document.getElementById(styleId)) {
+        const styleEl = document.createElement('style');
+        styleEl.id = styleId;
+        styleEl.textContent = `
+      @keyframes fui-dialog-content-show {
+        from {
+          opacity: 0;
+          transform: translateY(5px) scale(0.97);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0px) scale(1);
+        }
+      }
+      @keyframes fui-dialog-content-hide {
+        from {
+          opacity: 1;
+          transform: translateY(0px) scale(1);
+        }
+        to {
+          opacity: 0;
+          transform: translateY(5px) scale(0.99);
+        }
+      }
+    `;
+        document.head.appendChild(styleEl);
+    }
+}
+// ============================================================================
+// Exports
+// ============================================================================
+const Dialog = Object.assign(DialogRoot, {
+    Root: DialogRoot,
+    Trigger: DialogTrigger,
+    Content: DialogContent,
+    Title: DialogTitle,
+    Description: DialogDescription,
+    Close: DialogClose,
+});
+export { Dialog };
+//# sourceMappingURL=dialog.js.map

package/dist/components/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/components/dialog.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,65 @@
+import type { Color } from '../lib/types';
+import * as DropdownMenuPrimitive from '@rn-primitives/dropdown-menu';
+import * as React from 'react';
+type DropdownMenuSize = '1' | '2' | '3';
+type DropdownMenuVariant = 'solid' | 'soft';
+type DropdownMenuRootProps = DropdownMenuPrimitive.RootProps & {
+    size?: DropdownMenuSize;
+    variant?: DropdownMenuVariant;
+    color?: Color;
+};
+declare function DropdownMenuRoot({ size, variant, color, ...props }: DropdownMenuRootProps): React.JSX.Element;
+type DropdownMenuTriggerProps = DropdownMenuPrimitive.TriggerProps;
+declare function DropdownMenuTrigger(props: DropdownMenuTriggerProps): React.JSX.Element;
+type DropdownMenuContentProps = Omit<DropdownMenuPrimitive.ContentProps, 'children'> & {
+    portalHost?: string;
+    children?: React.ReactNode;
+};
+declare function DropdownMenuContent({ portalHost, children, ...props }: DropdownMenuContentProps): React.JSX.Element;
+type DropdownMenuItemProps = Omit<DropdownMenuPrimitive.ItemProps, 'children'> & {
+    color?: Color;
+    children?: React.ReactNode;
+};
+declare function DropdownMenuItem({ children, disabled, color, ...props }: DropdownMenuItemProps): React.JSX.Element;
+type DropdownMenuCheckboxItemProps = Omit<DropdownMenuPrimitive.CheckboxItemProps, 'children'> & {
+    children?: React.ReactNode;
+};
+declare function DropdownMenuCheckboxItem({ children, disabled, ...props }: DropdownMenuCheckboxItemProps): React.JSX.Element;
+type DropdownMenuRadioGroupProps = DropdownMenuPrimitive.RadioGroupProps;
+declare function DropdownMenuRadioGroup(props: DropdownMenuRadioGroupProps): React.JSX.Element;
+type DropdownMenuRadioItemProps = Omit<DropdownMenuPrimitive.RadioItemProps, 'children'> & {
+    children?: React.ReactNode;
+};
+declare function DropdownMenuRadioItem({ children, disabled, ...props }: DropdownMenuRadioItemProps): React.JSX.Element;
+type DropdownMenuLabelProps = DropdownMenuPrimitive.LabelProps;
+declare function DropdownMenuLabel({ children, ...props }: DropdownMenuLabelProps): React.JSX.Element;
+type DropdownMenuSeparatorProps = DropdownMenuPrimitive.SeparatorProps;
+declare function DropdownMenuSeparator(props: DropdownMenuSeparatorProps): React.JSX.Element;
+type DropdownMenuGroupProps = DropdownMenuPrimitive.GroupProps;
+declare function DropdownMenuGroup(props: DropdownMenuGroupProps): React.JSX.Element;
+type DropdownMenuSubProps = DropdownMenuPrimitive.SubProps;
+declare function DropdownMenuSub(props: DropdownMenuSubProps): React.JSX.Element;
+type DropdownMenuSubTriggerProps = Omit<DropdownMenuPrimitive.SubTriggerProps, 'children'> & {
+    children?: React.ReactNode;
+};
+declare function DropdownMenuSubTrigger({ children, disabled, ...props }: DropdownMenuSubTriggerProps): React.JSX.Element;
+type DropdownMenuSubContentProps = DropdownMenuPrimitive.SubContentProps;
+declare function DropdownMenuSubContent(props: DropdownMenuSubContentProps): React.JSX.Element;
+declare const DropdownMenu: {
+    Root: typeof DropdownMenuRoot;
+    Trigger: typeof DropdownMenuTrigger;
+    Content: typeof DropdownMenuContent;
+    Item: typeof DropdownMenuItem;
+    CheckboxItem: typeof DropdownMenuCheckboxItem;
+    RadioGroup: typeof DropdownMenuRadioGroup;
+    RadioItem: typeof DropdownMenuRadioItem;
+    Label: typeof DropdownMenuLabel;
+    Separator: typeof DropdownMenuSeparator;
+    Group: typeof DropdownMenuGroup;
+    Sub: typeof DropdownMenuSub;
+    SubTrigger: typeof DropdownMenuSubTrigger;
+    SubContent: typeof DropdownMenuSubContent;
+};
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, };
+export type { DropdownMenuCheckboxItemProps, DropdownMenuContentProps, DropdownMenuGroupProps, DropdownMenuItemProps, DropdownMenuLabelProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuRootProps, DropdownMenuSeparatorProps, DropdownMenuSize, DropdownMenuSubContentProps, DropdownMenuSubProps, DropdownMenuSubTriggerProps, DropdownMenuTriggerProps, DropdownMenuVariant, };
+//# sourceMappingURL=dropdown-menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../src/components/dropdown-menu.tsx"],"names":[],"mappings":"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"}

package/dist/components/dropdown-menu.js

@@ -0,0 +1,441 @@
+import { NativeOnlyAnimatedView } from '../components/native-only-animated-view';
+import { Text, TextStyleContext } from '../components/text';
+import { useThemeTokens } from '../lib/use-theme-tokens';
+import * as DropdownMenuPrimitive from '@rn-primitives/dropdown-menu';
+import * as React from 'react';
+import { Platform, ScrollView, StyleSheet, useWindowDimensions, View, } from 'react-native';
+import { FadeIn, FadeOut } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';
+import Svg, { Path } from 'react-native-svg';
+// ============================================================================
+// Custom icons matching web version
+// ============================================================================
+function DropdownMenuCheckIcon({ size, color }) {
+    return (<Svg width={size} height={size} viewBox="0 0 9 9" fill={color}>
+      <Path fillRule="evenodd" clipRule="evenodd" d="M8.53547 0.62293C8.88226 0.849446 8.97976 1.3142 8.75325 1.66099L4.5083 8.1599C4.38833 8.34356 4.19397 8.4655 3.9764 8.49358C3.75883 8.52167 3.53987 8.45309 3.3772 8.30591L0.616113 5.80777C0.308959 5.52987 0.285246 5.05559 0.563148 4.74844C0.84105 4.44128 1.31533 4.41757 1.62249 4.69547L3.73256 6.60459L7.49741 0.840706C7.72393 0.493916 8.18868 0.396414 8.53547 0.62293Z"/>
+    </Svg>);
+}
+function DropdownMenuChevronRightIcon({ size, color }) {
+    return (<Svg width={size} height={size} viewBox="0 0 9 9" fill="none" stroke={color} strokeWidth={1.5}>
+      <Path d="M3 1.5L6 4.5L3 7.5"/>
+    </Svg>);
+}
+const DropdownMenuContext = React.createContext({
+    size: '2',
+    variant: 'solid',
+    hasIndicators: false,
+});
+// ============================================================================
+// Size/Style helpers (similar to Select)
+// ============================================================================
+function getMenuSizeStyles(size) {
+    return {
+        contentPadding: 4, // --space-1
+        contentBorderRadius: size === '1' ? 8 : size === '2' ? 10 : 12,
+        itemHeight: size === '1' ? 24 : size === '2' ? 32 : 40,
+        itemPaddingLeft: size === '1' ? 8 : size === '2' ? 10 : 12,
+        itemPaddingRight: size === '1' ? 8 : size === '2' ? 10 : 12,
+        itemBorderRadius: size === '1' ? 4 : size === '2' ? 6 : 8,
+        // For checkbox/radio items, use larger left padding
+        itemIndicatorPaddingLeft: size === '1' ? 24 : size === '2' ? 26 : 28,
+        iconSize: size === '1' ? 8 : size === '2' ? 10 : 12,
+        itemFontSize: size === '1' ? '1' : size === '2' ? '2' : '3',
+        labelFontSize: size === '1' ? '0' : size === '2' ? '1' : '2',
+    };
+}
+function DropdownMenuRoot({ size = '2', variant = 'solid', color, ...props }) {
+    const contextValue = React.useMemo(() => ({ size, variant, color }), [size, variant, color]);
+    return (<DropdownMenuContext.Provider value={contextValue}>
+      <DropdownMenuPrimitive.Root {...props}/>
+    </DropdownMenuContext.Provider>);
+}
+function DropdownMenuTrigger(props) {
+    return <DropdownMenuPrimitive.Trigger {...props}/>;
+}
+// ============================================================================
+// DropdownMenu.Content
+// ============================================================================
+const FullWindowOverlay = Platform.OS === 'ios' ? RNFullWindowOverlay : React.Fragment;
+function DropdownMenuContent({ portalHost, children, ...props }) {
+    const { size, variant, color } = React.useContext(DropdownMenuContext);
+    const { colors, isDark } = useThemeTokens();
+    const { height: windowHeight } = useWindowDimensions();
+    const safeAreaInsets = useSafeAreaInsets();
+    const sizeStyles = getMenuSizeStyles(size);
+    // Calculate available height for native
+    const nativeMaxHeight = Math.max(150, windowHeight - safeAreaInsets.top - safeAreaInsets.bottom - 100);
+    // Insets for collision detection
+    const contentInsets = {
+        top: safeAreaInsets.top + 8,
+        bottom: safeAreaInsets.bottom + 8,
+        left: safeAreaInsets.left + 8,
+        right: safeAreaInsets.right + 8,
+    };
+    // Detect if content has checkbox or radio items to adjust padding for all items
+    const hasIndicators = React.useMemo(() => {
+        let found = false;
+        React.Children.forEach(children, (child) => {
+            if (React.isValidElement(child)) {
+                if (child.type === DropdownMenuCheckboxItem ||
+                    child.type === DropdownMenuRadioItem ||
+                    child.type === DropdownMenuRadioGroup) {
+                    found = true;
+                }
+            }
+        });
+        return found;
+    }, [children]);
+    // Re-provide context inside portal with hasIndicators
+    const contextValue = React.useMemo(() => ({ size, variant, color, hasIndicators }), [size, variant, color, hasIndicators]);
+    const backgroundColor = variant === 'solid' ? colors.panelSolid : colors.panelTranslucent;
+    return (<DropdownMenuPrimitive.Portal hostName={portalHost}>
+      <FullWindowOverlay>
+        <DropdownMenuPrimitive.Overlay style={Platform.select({ native: StyleSheet.absoluteFill })}>
+          <DropdownMenuContext.Provider value={contextValue}>
+            <TextStyleContext.Provider value={{ size: '2', weight: 'regular', color: 'gray' }}>
+              <NativeOnlyAnimatedView entering={FadeIn} exiting={FadeOut}>
+                <DropdownMenuPrimitive.Content align="start" sideOffset={4} insets={Platform.OS !== 'web' ? contentInsets : undefined} style={{
+            backgroundColor,
+            borderRadius: sizeStyles.contentBorderRadius,
+            minWidth: 128,
+            ...Platform.select({
+                web: {
+                    boxShadow: isDark
+                        ? `0 0 0 1px ${colors.palettes.gray.a6}, 0 12px 60px ${colors.palettes.black.a5}, 0 12px 32px -16px ${colors.palettes.black.a7}`
+                        : `0 0 0 1px ${colors.palettes.gray.a5}, 0 12px 60px ${colors.palettes.black.a3}, 0 12px 32px -16px ${colors.palettes.gray.a5}`,
+                    backdropFilter: variant === 'soft'
+                        ? 'saturate(1.8) blur(20px) contrast(1.05) brightness(1.05)'
+                        : undefined,
+                    overflow: 'hidden',
+                },
+                default: {
+                    maxHeight: nativeMaxHeight,
+                    borderWidth: 1,
+                    borderColor: isDark ? colors.palettes.gray.a6 : colors.palettes.gray.a5,
+                    shadowColor: '#000000',
+                    shadowOpacity: isDark ? 0.3 : 0.15,
+                    shadowOffset: { width: 0, height: 12 },
+                    shadowRadius: 30,
+                    elevation: 12,
+                },
+            }),
+        }} {...props}>
+                  {Platform.OS === 'web' ? (<View style={{
+                padding: sizeStyles.contentPadding,
+                maxHeight: 'var(--radix-dropdown-menu-content-available-height)',
+                overflow: 'auto',
+            }}>
+                      {children}
+                    </View>) : (<ScrollView style={{ maxHeight: nativeMaxHeight - sizeStyles.contentPadding * 2 - 2 }} contentContainerStyle={{ padding: sizeStyles.contentPadding }} showsVerticalScrollIndicator bounces={false}>
+                      {children}
+                    </ScrollView>)}
+                </DropdownMenuPrimitive.Content>
+              </NativeOnlyAnimatedView>
+            </TextStyleContext.Provider>
+          </DropdownMenuContext.Provider>
+        </DropdownMenuPrimitive.Overlay>
+      </FullWindowOverlay>
+    </DropdownMenuPrimitive.Portal>);
+}
+function DropdownMenuItem({ children, disabled, color, ...props }) {
+    const { size, hasIndicators } = React.useContext(DropdownMenuContext);
+    const { colors } = useThemeTokens();
+    const [hovered, setHovered] = React.useState(false);
+    const [pressed, setPressed] = React.useState(false);
+    const sizeStyles = getMenuSizeStyles(size);
+    // Resolve accent color for colored items (like danger -> red)
+    const resolvedColor = color === 'danger'
+        ? 'red'
+        : color === 'success'
+            ? 'green'
+            : color === 'warning'
+                ? 'yellow'
+                : color === 'info'
+                    ? 'blue'
+                    : color;
+    const accentPalette = resolvedColor
+        ? colors.palettes[resolvedColor] || colors.palettes.gray
+        : null;
+    const isHighlighted = hovered || pressed;
+    // Background color on highlight
+    const highlightBg = accentPalette ? accentPalette.a5 : colors.palettes.gray.a4;
+    // Text color
+    const textColor = disabled
+        ? colors.palettes.gray.a8
+        : accentPalette
+            ? isHighlighted
+                ? (accentPalette['12'] ?? accentPalette.a11)
+                : accentPalette.a11
+            : colors.palettes.gray['12'];
+    // Use indicator padding when menu has checkbox/radio items
+    const paddingLeft = hasIndicators
+        ? sizeStyles.itemIndicatorPaddingLeft
+        : sizeStyles.itemPaddingLeft;
+    const itemStyle = React.useMemo(() => ({
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        height: sizeStyles.itemHeight,
+        paddingLeft,
+        paddingRight: sizeStyles.itemPaddingRight,
+        borderRadius: sizeStyles.itemBorderRadius,
+        backgroundColor: isHighlighted ? highlightBg : undefined,
+        ...Platform.select({
+            web: {
+                cursor: disabled ? 'not-allowed' : 'default',
+                userSelect: 'none',
+                outline: 'none',
+            },
+        }),
+    }), [sizeStyles, paddingLeft, isHighlighted, highlightBg, disabled]);
+    // Web-specific hover handlers
+    const webHoverProps = Platform.OS === 'web'
+        ? {
+            onMouseEnter: () => setHovered(true),
+            onMouseLeave: () => setHovered(false),
+        }
+        : {};
+    return (<DropdownMenuPrimitive.Item disabled={disabled} onHoverIn={Platform.OS !== 'web' ? () => setHovered(true) : undefined} onHoverOut={Platform.OS !== 'web' ? () => setHovered(false) : undefined} onPressIn={() => setPressed(true)} onPressOut={() => setPressed(false)} style={itemStyle} {...webHoverProps} {...props}>
+      <Text size={sizeStyles.itemFontSize} style={{ color: textColor }}>
+        {children}
+      </Text>
+    </DropdownMenuPrimitive.Item>);
+}
+function DropdownMenuCheckboxItem({ children, disabled, ...props }) {
+    const { size } = React.useContext(DropdownMenuContext);
+    const { colors } = useThemeTokens();
+    const [hovered, setHovered] = React.useState(false);
+    const [pressed, setPressed] = React.useState(false);
+    const sizeStyles = getMenuSizeStyles(size);
+    const isHighlighted = hovered || pressed;
+    const highlightBg = colors.palettes.gray.a4;
+    const textColor = disabled ? colors.palettes.gray.a8 : colors.palettes.gray['12'];
+    const itemStyle = React.useMemo(() => ({
+        flexDirection: 'row',
+        alignItems: 'center',
+        height: sizeStyles.itemHeight,
+        paddingLeft: sizeStyles.itemIndicatorPaddingLeft,
+        paddingRight: sizeStyles.itemPaddingRight,
+        borderRadius: sizeStyles.itemBorderRadius,
+        backgroundColor: isHighlighted ? highlightBg : undefined,
+        position: 'relative',
+        ...Platform.select({
+            web: {
+                cursor: disabled ? 'not-allowed' : 'default',
+                userSelect: 'none',
+                outline: 'none',
+            },
+        }),
+    }), [sizeStyles, isHighlighted, highlightBg, disabled]);
+    const webHoverProps = Platform.OS === 'web'
+        ? {
+            onMouseEnter: () => setHovered(true),
+            onMouseLeave: () => setHovered(false),
+        }
+        : {};
+    return (<DropdownMenuPrimitive.CheckboxItem disabled={disabled} onHoverIn={Platform.OS !== 'web' ? () => setHovered(true) : undefined} onHoverOut={Platform.OS !== 'web' ? () => setHovered(false) : undefined} onPressIn={() => setPressed(true)} onPressOut={() => setPressed(false)} style={itemStyle} {...webHoverProps} {...props}>
+      <DropdownMenuPrimitive.ItemIndicator style={{
+            position: 'absolute',
+            left: 0,
+            width: sizeStyles.itemIndicatorPaddingLeft,
+            alignItems: 'center',
+            justifyContent: 'center',
+        }}>
+        <DropdownMenuCheckIcon size={sizeStyles.iconSize} color={textColor}/>
+      </DropdownMenuPrimitive.ItemIndicator>
+      <Text size={sizeStyles.itemFontSize} style={{ color: textColor }}>
+        {children}
+      </Text>
+    </DropdownMenuPrimitive.CheckboxItem>);
+}
+function DropdownMenuRadioGroup(props) {
+    return <DropdownMenuPrimitive.RadioGroup {...props}/>;
+}
+function DropdownMenuRadioItem({ children, disabled, ...props }) {
+    const { size } = React.useContext(DropdownMenuContext);
+    const { colors } = useThemeTokens();
+    const [hovered, setHovered] = React.useState(false);
+    const [pressed, setPressed] = React.useState(false);
+    const sizeStyles = getMenuSizeStyles(size);
+    const isHighlighted = hovered || pressed;
+    const highlightBg = colors.palettes.gray.a4;
+    const textColor = disabled ? colors.palettes.gray.a8 : colors.palettes.gray['12'];
+    const itemStyle = React.useMemo(() => ({
+        flexDirection: 'row',
+        alignItems: 'center',
+        height: sizeStyles.itemHeight,
+        paddingLeft: sizeStyles.itemIndicatorPaddingLeft,
+        paddingRight: sizeStyles.itemPaddingRight,
+        borderRadius: sizeStyles.itemBorderRadius,
+        backgroundColor: isHighlighted ? highlightBg : undefined,
+        position: 'relative',
+        ...Platform.select({
+            web: {
+                cursor: disabled ? 'not-allowed' : 'default',
+                userSelect: 'none',
+                outline: 'none',
+            },
+        }),
+    }), [sizeStyles, isHighlighted, highlightBg, disabled]);
+    const webHoverProps = Platform.OS === 'web'
+        ? {
+            onMouseEnter: () => setHovered(true),
+            onMouseLeave: () => setHovered(false),
+        }
+        : {};
+    return (<DropdownMenuPrimitive.RadioItem disabled={disabled} onHoverIn={Platform.OS !== 'web' ? () => setHovered(true) : undefined} onHoverOut={Platform.OS !== 'web' ? () => setHovered(false) : undefined} onPressIn={() => setPressed(true)} onPressOut={() => setPressed(false)} style={itemStyle} {...webHoverProps} {...props}>
+      <DropdownMenuPrimitive.ItemIndicator style={{
+            position: 'absolute',
+            left: 0,
+            width: sizeStyles.itemIndicatorPaddingLeft,
+            alignItems: 'center',
+            justifyContent: 'center',
+        }}>
+        <DropdownMenuCheckIcon size={sizeStyles.iconSize} color={textColor}/>
+      </DropdownMenuPrimitive.ItemIndicator>
+      <Text size={sizeStyles.itemFontSize} style={{ color: textColor }}>
+        {children}
+      </Text>
+    </DropdownMenuPrimitive.RadioItem>);
+}
+function DropdownMenuLabel({ children, ...props }) {
+    const { size, hasIndicators } = React.useContext(DropdownMenuContext);
+    const { colors } = useThemeTokens();
+    const sizeStyles = getMenuSizeStyles(size);
+    // Use indicator padding when menu has checkbox/radio items
+    const paddingLeft = hasIndicators
+        ? sizeStyles.itemIndicatorPaddingLeft
+        : sizeStyles.itemPaddingLeft;
+    return (<View style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            height: sizeStyles.itemHeight,
+            paddingLeft,
+            paddingRight: sizeStyles.itemPaddingRight,
+            ...Platform.select({
+                web: {
+                    cursor: 'default',
+                    userSelect: 'none',
+                },
+            }),
+        }}>
+      <Text size={sizeStyles.labelFontSize} weight="semi-bold" style={{ color: colors.palettes.gray.a10 }} {...props}>
+        {children}
+      </Text>
+    </View>);
+}
+function DropdownMenuSeparator(props) {
+    const { size } = React.useContext(DropdownMenuContext);
+    const { colors } = useThemeTokens();
+    const sizeStyles = getMenuSizeStyles(size);
+    return (<DropdownMenuPrimitive.Separator style={{
+            height: 1,
+            backgroundColor: colors.palettes.gray.a6,
+            marginVertical: 4,
+            marginHorizontal: -sizeStyles.contentPadding + 1,
+        }} {...props}/>);
+}
+function DropdownMenuGroup(props) {
+    return <DropdownMenuPrimitive.Group {...props}/>;
+}
+function DropdownMenuSub(props) {
+    return <DropdownMenuPrimitive.Sub {...props}/>;
+}
+function DropdownMenuSubTrigger({ children, disabled, ...props }) {
+    const { size, hasIndicators } = React.useContext(DropdownMenuContext);
+    const { colors } = useThemeTokens();
+    const [hovered, setHovered] = React.useState(false);
+    const [pressed, setPressed] = React.useState(false);
+    const sizeStyles = getMenuSizeStyles(size);
+    const isHighlighted = hovered || pressed;
+    const highlightBg = colors.palettes.gray.a4;
+    const textColor = disabled ? colors.palettes.gray.a8 : colors.palettes.gray['12'];
+    // Use indicator padding when menu has checkbox/radio items
+    const paddingLeft = hasIndicators
+        ? sizeStyles.itemIndicatorPaddingLeft
+        : sizeStyles.itemPaddingLeft;
+    const itemStyle = React.useMemo(() => ({
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        height: sizeStyles.itemHeight,
+        paddingLeft,
+        paddingRight: sizeStyles.itemPaddingRight,
+        borderRadius: sizeStyles.itemBorderRadius,
+        backgroundColor: isHighlighted ? highlightBg : undefined,
+        ...Platform.select({
+            web: {
+                cursor: disabled ? 'not-allowed' : 'default',
+                userSelect: 'none',
+                outline: 'none',
+            },
+        }),
+    }), [sizeStyles, paddingLeft, isHighlighted, highlightBg, disabled]);
+    const webHoverProps = Platform.OS === 'web'
+        ? {
+            onMouseEnter: () => setHovered(true),
+            onMouseLeave: () => setHovered(false),
+        }
+        : {};
+    return (<DropdownMenuPrimitive.SubTrigger disabled={disabled} onHoverIn={Platform.OS !== 'web' ? () => setHovered(true) : undefined} onHoverOut={Platform.OS !== 'web' ? () => setHovered(false) : undefined} onPressIn={() => setPressed(true)} onPressOut={() => setPressed(false)} style={itemStyle} {...webHoverProps} {...props}>
+      <Text size={sizeStyles.itemFontSize} style={{ color: textColor }}>
+        {children}
+      </Text>
+      <DropdownMenuChevronRightIcon size={sizeStyles.iconSize} color={textColor}/>
+    </DropdownMenuPrimitive.SubTrigger>);
+}
+function DropdownMenuSubContent(props) {
+    const { size, variant } = React.useContext(DropdownMenuContext);
+    const { colors, isDark } = useThemeTokens();
+    const sizeStyles = getMenuSizeStyles(size);
+    const backgroundColor = variant === 'solid' ? colors.panelSolid : colors.panelTranslucent;
+    return (<NativeOnlyAnimatedView entering={FadeIn} exiting={FadeOut}>
+      <DropdownMenuPrimitive.SubContent style={{
+            backgroundColor,
+            borderRadius: sizeStyles.contentBorderRadius,
+            minWidth: 128,
+            padding: sizeStyles.contentPadding,
+            ...Platform.select({
+                web: {
+                    boxShadow: isDark
+                        ? `0 0 0 1px ${colors.palettes.gray.a6}, 0 12px 60px ${colors.palettes.black.a5}, 0 12px 32px -16px ${colors.palettes.black.a7}`
+                        : `0 0 0 1px ${colors.palettes.gray.a5}, 0 12px 60px ${colors.palettes.black.a3}, 0 12px 32px -16px ${colors.palettes.gray.a5}`,
+                    backdropFilter: variant === 'soft'
+                        ? 'saturate(1.8) blur(20px) contrast(1.05) brightness(1.05)'
+                        : undefined,
+                    overflow: 'hidden',
+                },
+                default: {
+                    borderWidth: 1,
+                    borderColor: isDark ? colors.palettes.gray.a6 : colors.palettes.gray.a5,
+                    shadowColor: '#000000',
+                    shadowOpacity: isDark ? 0.3 : 0.15,
+                    shadowOffset: { width: 0, height: 12 },
+                    shadowRadius: 30,
+                    elevation: 12,
+                },
+            }),
+        }} {...props}/>
+    </NativeOnlyAnimatedView>);
+}
+// ============================================================================
+// Exports
+// ============================================================================
+const DropdownMenu = {
+    Root: DropdownMenuRoot,
+    Trigger: DropdownMenuTrigger,
+    Content: DropdownMenuContent,
+    Item: DropdownMenuItem,
+    CheckboxItem: DropdownMenuCheckboxItem,
+    RadioGroup: DropdownMenuRadioGroup,
+    RadioItem: DropdownMenuRadioItem,
+    Label: DropdownMenuLabel,
+    Separator: DropdownMenuSeparator,
+    Group: DropdownMenuGroup,
+    Sub: DropdownMenuSub,
+    SubTrigger: DropdownMenuSubTrigger,
+    SubContent: DropdownMenuSubContent,
+};
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, };
+//# sourceMappingURL=dropdown-menu.js.map