@idealyst/components 1.1.6 → 1.1.8

package/src/Menu/Menu.styles.old.tsx

@@ -0,0 +1,197 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, CompoundVariants, Intent, Size } from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { applyExtensions } from '../extensions/applyExtension';
+
+type MenuSize = Size;
+type MenuIntent = Intent;
+
+type MenuVariants = {
+    size: MenuSize;
+    intent: MenuIntent;
+    disabled: boolean;
+}
+
+export type ExpandedMenuStyles = StylesheetStyles<keyof MenuVariants>;
+
+export type MenuStylesheet = {
+    overlay: ExpandedMenuStyles;
+    menu: ExpandedMenuStyles;
+    separator: ExpandedMenuStyles;
+    item: ExpandedMenuStyles;
+    icon: ExpandedMenuStyles;
+    label: ExpandedMenuStyles;
+}
+
+/**
+ * Create size variants for menu item
+ */
+function createItemSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'menu', (size) => ({
+        paddingVertical: size.paddingVertical,
+        paddingHorizontal: size.paddingHorizontal,
+    }));
+}
+
+/**
+ * Get hover styles for menu item based on intent
+ */
+function getItemHoverStyles(theme: Theme, intent: MenuIntent) {
+    if (intent === 'neutral') {
+        return {};
+    }
+    const intentValue = theme.intents[intent];
+    return {
+        _web: {
+            _hover: {
+                backgroundColor: intentValue.light + '20',
+                color: intentValue.primary,
+            },
+        },
+    } as const;
+}
+
+/**
+ * Create compound variants for menu item
+ */
+function createItemCompoundVariants(theme: Theme): CompoundVariants<keyof MenuVariants> {
+    return [
+        {
+            disabled: true,
+            styles: {
+                _web: {
+                    _hover: {
+                        backgroundColor: 'transparent',
+                    },
+                },
+            },
+        },
+    ] as const;
+}
+
+/**
+ * Create size variants for icon
+ */
+function createIconSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'menu', (size) => ({
+        width: size.iconSize,
+        height: size.iconSize,
+        fontSize: size.iconSize,
+    }));
+}
+
+/**
+ * Create size variants for label
+ */
+function createLabelSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'menu', (size) => ({
+        fontSize: size.labelFontSize,
+    }));
+}
+
+// Main element style creators (for extension support)
+function createOverlayStyles(theme: Theme) {
+    return () => ({
+        backgroundColor: 'transparent',
+        _web: {
+            position: 'fixed' as const,
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 999,
+        },
+    });
+}
+
+function createMenuStyles(theme: Theme) {
+    return () => ({
+        position: 'absolute' as const,
+        zIndex: 1000,
+        backgroundColor: theme.colors.surface.primary,
+        borderWidth: 1,
+        borderStyle: 'solid' as const,
+        borderColor: theme.colors.border.primary,
+        borderRadius: 8,
+        minWidth: 120,
+        maxWidth: 400,
+        padding: 4,
+        display: 'flex' as const,
+        flexDirection: 'column' as const,
+        _web: {
+            border: `1px solid ${theme.colors.border.primary}`,
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+            width: 'fit-content',
+        },
+    });
+}
+
+function createItemStyles(theme: Theme) {
+    return ({ intent }: Partial<MenuVariants>) => {
+        const hoverStyles = getItemHoverStyles(theme, intent ?? 'neutral');
+        return {
+            flexDirection: 'row',
+            alignItems: 'center',
+            backgroundColor: 'transparent',
+            borderRadius: 4,
+            minHeight: 44,
+            variants: {
+                size: createItemSizeVariants(theme),
+                disabled: {
+                    true: {
+                        opacity: 0.5,
+                        _web: {
+                            cursor: 'not-allowed',
+                        },
+                    },
+                    false: {},
+                },
+            },
+            compoundVariants: createItemCompoundVariants(theme),
+            _web: {
+                cursor: 'pointer',
+                border: 'none',
+                outline: 'none',
+                transition: 'background-color 0.2s ease',
+                textAlign: 'left',
+                _hover: {
+                    backgroundColor: theme.colors.surface.secondary,
+                },
+            },
+            ...hoverStyles,
+        } as const;
+    };
+}
+
+// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel transform on native cannot resolve function calls to extract variant structures.
+export const menuStyles = StyleSheet.create((theme: Theme) => {
+    // Apply extensions to main visual elements
+
+    return applyExtensions('Menu', theme, {overlay: createOverlayStyles(theme),
+        menu: createMenuStyles(theme),
+        item: createItemStyles(theme),
+        // Additional styles (merged from return)
+        // Minor utility styles (not extended)
+        separator: {
+            height: 1,
+            backgroundColor: theme.colors.border.primary,
+            marginTop: 4,
+            marginBottom: 4,
+        },
+        icon: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+            marginRight: 8,
+            variants: {
+                size: createIconSizeVariants(theme),
+            } as const,
+        } as const,
+        label: {
+            flex: 1,
+            color: theme.colors.text.primary,
+            variants: {
+                size: createLabelSizeVariants(theme),
+            } as const,
+        } as const});
+});

package/src/Menu/Menu.styles.tsx

@@ -1,185 +1,119 @@
+/**
+ * Menu styles using defineStyle with dynamic props.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, CompoundVariants, Intent, Size} from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent, Size } from '@idealyst/theme';
 
-type MenuSize = Size;
-type MenuIntent = Intent;
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-type MenuVariants = {
-    size: MenuSize;
-    intent: MenuIntent;
-    disabled: boolean;
-}
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-export type ExpandedMenuStyles = StylesheetStyles<keyof MenuVariants>;
-
-export type MenuStylesheet = {
-    overlay: ExpandedMenuStyles;
-    menu: ExpandedMenuStyles;
-    separator: ExpandedMenuStyles;
-    item: ExpandedMenuStyles;
-    icon: ExpandedMenuStyles;
-    label: ExpandedMenuStyles;
-}
+export type MenuDynamicProps = {
+    size?: Size;
+    intent?: Intent;
+    disabled?: boolean;
+};
 
 /**
- * Create size variants for menu item
+ * Menu styles with intent/disabled handling.
  */
-function createItemSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'menu', (size) => ({
-        paddingVertical: size.paddingVertical,
-        paddingHorizontal: size.paddingHorizontal,
-    }));
-}
-
-/**
- * Get hover styles for menu item based on intent
- */
-function getItemHoverStyles(theme: Theme, intent: MenuIntent) {
-    if (intent === 'neutral') {
-        return {};
-    }
-    const intentValue = theme.intents[intent];
-    return {
+export const menuStyles = defineStyle('Menu', (theme: Theme) => ({
+    overlay: (_props: MenuDynamicProps) => ({
+        backgroundColor: 'transparent' as const,
         _web: {
-            _hover: {
-                backgroundColor: intentValue.light + '20',
-                color: intentValue.primary,
-            },
+            position: 'fixed' as const,
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 999,
         },
-    } as const;
-}
+    }),
 
-/**
- * Create compound variants for menu item
- */
-function createItemCompoundVariants(theme: Theme): CompoundVariants<keyof MenuVariants> {
-    return [
-        {
-            disabled: true,
-            styles: {
-                _web: {
-                    _hover: {
-                        backgroundColor: 'transparent',
-                    },
-                },
-            },
+    menu: (_props: MenuDynamicProps) => ({
+        position: 'absolute' as const,
+        zIndex: 1000,
+        backgroundColor: theme.colors.surface.primary,
+        borderWidth: 1,
+        borderStyle: 'solid' as const,
+        borderColor: theme.colors.border.primary,
+        borderRadius: 8,
+        minWidth: 120,
+        maxWidth: 400,
+        padding: 4,
+        display: 'flex' as const,
+        flexDirection: 'column' as const,
+        _web: {
+            border: `1px solid ${theme.colors.border.primary}`,
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+            width: 'fit-content',
         },
-    ] as const;
-}
-
-/**
- * Create size variants for icon
- */
-function createIconSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'menu', (size) => ({
-        width: size.iconSize,
-        height: size.iconSize,
-        fontSize: size.iconSize,
-    }));
-}
+    }),
 
-/**
- * Create size variants for label
- */
-function createLabelSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'menu', (size) => ({
-        fontSize: size.labelFontSize,
-    }));
-}
+    item: ({ intent = 'neutral', disabled = false }: MenuDynamicProps) => {
+        const intentValue = theme.intents[intent];
+        const hoverStyles = intent !== 'neutral' ? {
+            backgroundColor: intentValue.light + '20',
+            color: intentValue.primary,
+        } : {
+            backgroundColor: theme.colors.surface.secondary,
+        };
 
-const createItemStyles = (theme: Theme) => {
-    return ({ intent }: MenuVariants) => {
-        const hoverStyles = getItemHoverStyles(theme, intent);
         return {
-            flexDirection: 'row',
-            alignItems: 'center',
-            backgroundColor: 'transparent',
+            flexDirection: 'row' as const,
+            alignItems: 'center' as const,
+            backgroundColor: 'transparent' as const,
             borderRadius: 4,
             minHeight: 44,
+            opacity: disabled ? 0.5 : 1,
             variants: {
-                size: createItemSizeVariants(theme),
-                disabled: {
-                    true: {
-                        opacity: 0.5,
-                        _web: {
-                            cursor: 'not-allowed',
-                        },
-                    },
-                    false: {},
+                size: {
+                    paddingVertical: theme.sizes.$menu.paddingVertical,
+                    paddingHorizontal: theme.sizes.$menu.paddingHorizontal,
                 },
             },
-            compoundVariants: createItemCompoundVariants(theme),
             _web: {
-                cursor: 'pointer',
+                cursor: disabled ? 'not-allowed' : 'pointer',
                 border: 'none',
                 outline: 'none',
                 transition: 'background-color 0.2s ease',
                 textAlign: 'left',
-                _hover: {
-                    backgroundColor: theme.colors.surface.secondary,
-                },
+                _hover: disabled ? { backgroundColor: 'transparent' } : hoverStyles,
             },
-            ...hoverStyles,
         } as const;
-    }
-}
+    },
 
-// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel transform on native cannot resolve function calls to extract variant structures.
-export const menuStyles = StyleSheet.create((theme: Theme) => {
-    return {
-        overlay: {
-            backgroundColor: 'transparent',
-            _web: {
-                position: 'fixed' as const,
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: 999,
-            }
-        } as const,
-        menu: {
-            position: 'absolute',
-            zIndex: 1000,
-            backgroundColor: theme.colors.surface.primary,
-            borderWidth: 1,
-            borderStyle: 'solid',
-            borderColor: theme.colors.border.primary,
-            borderRadius: 8,
-            minWidth: 120,
-            maxWidth: 400,
-            padding: 4,
-            display: 'flex',
-            flexDirection: 'column',
-            _web: {
-                border: `1px solid ${theme.colors.border.primary}`,
-                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
-                width: 'fit-content',
+    separator: (_props: MenuDynamicProps) => ({
+        height: 1,
+        backgroundColor: theme.colors.border.primary,
+        marginTop: 4,
+        marginBottom: 4,
+    }),
+
+    icon: (_props: MenuDynamicProps) => ({
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        flexShrink: 0,
+        marginRight: 8,
+        variants: {
+            size: {
+                width: theme.sizes.$menu.iconSize,
+                height: theme.sizes.$menu.iconSize,
+                fontSize: theme.sizes.$menu.iconSize,
             },
-        } as const,
-        separator: {
-            height: 1,
-            backgroundColor: theme.colors.border.primary,
-            marginTop: 4,
-            marginBottom: 4,
         },
-        item: createItemStyles(theme),
-        icon: {
-            alignItems: 'center',
-            justifyContent: 'center',
-            flexShrink: 0,
-            marginRight: 8,
-            variants: {
-                size: createIconSizeVariants(theme),
-            } as const,
-        } as const,
-        label: {
-            flex: 1,
-            color: theme.colors.text.primary,
-            variants: {
-                size: createLabelSizeVariants(theme),
-            } as const,
-        } as const,
-    } as const;
-});
+    }),
+
+    label: (_props: MenuDynamicProps) => ({
+        flex: 1,
+        color: theme.colors.text.primary,
+        variants: {
+            size: {
+                fontSize: theme.sizes.$menu.labelFontSize,
+            },
+        },
+    }),
+}));

package/src/Menu/Menu.web.tsx

@@ -113,8 +113,8 @@ const Menu = forwardRef<HTMLDivElement, MenuProps>(({
     size,
   });
 
-  const overlayProps = getWebProps([menuStyles.overlay]);
-  const menuProps = getWebProps([menuStyles.menu, style as any]);
+  const overlayProps = getWebProps([(menuStyles.overlay as any)({})]);
+  const menuProps = getWebProps([(menuStyles.menu as any)({}), style as any]);
   const separatorProps = getWebProps([menuStyles.separator]);
 
   const handleTriggerClick = () => {

package/src/Menu/MenuItem.native.tsx

@@ -13,13 +13,17 @@ interface MenuItemProps {
 }
 
 const MenuItem = forwardRef<ComponentRef<typeof Pressable>, MenuItemProps>(({ item, onPress, size = 'md', testID }, ref) => {
-  // Initialize styles with useVariants
+  // Initialize styles with useVariants (for size and disabled)
   menuItemStyles.useVariants({
     size,
     disabled: Boolean(item.disabled),
-    intent: item.intent || 'neutral',
   });
 
+  // Call styles as functions to get theme-reactive styles
+  const itemStyle = (menuItemStyles.item as any)({ intent: item.intent || 'neutral' });
+  const iconStyle = (menuItemStyles.icon as any)({});
+  const labelStyle = (menuItemStyles.label as any)({});
+
   const renderIcon = () => {
     if (!item.icon) return null;
 
@@ -27,7 +31,7 @@ const MenuItem = forwardRef<ComponentRef<typeof Pressable>, MenuItemProps>(({ it
       return (
         <MaterialDesignIcons
           name={item.icon as any}
-          style={menuItemStyles.icon}
+          style={iconStyle}
         />
       );
     } else if (isValidElement(item.icon)) {
@@ -39,7 +43,7 @@ const MenuItem = forwardRef<ComponentRef<typeof Pressable>, MenuItemProps>(({ it
   return (
     <Pressable
       ref={ref}
-      style={menuItemStyles.item}
+      style={itemStyle}
       onPress={() => onPress(item)}
       disabled={item.disabled}
       accessibilityRole="menuitem"
@@ -54,7 +58,7 @@ const MenuItem = forwardRef<ComponentRef<typeof Pressable>, MenuItemProps>(({ it
           {renderIcon()}
         </View>
       )}
-      <Text style={menuItemStyles.label}>
+      <Text style={labelStyle}>
         {item.label}
       </Text>
     </Pressable>

package/src/Menu/MenuItem.styles.old.tsx

@@ -0,0 +1,114 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, Intent } from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { applyExtensions } from '../extensions/applyExtension';
+
+type MenuItemDynamicProps = {
+    intent?: Intent;
+};
+
+/**
+ * Get hover styles for menu item based on intent
+ */
+function getItemHoverStyles(theme: Theme, intent: Intent) {
+    if (intent === 'neutral') {
+        return {
+            _web: {
+                _hover: {
+                    backgroundColor: theme.colors.surface.secondary,
+                },
+            },
+        } as const;
+    }
+    const intentValue = theme.intents[intent];
+    return {
+        _web: {
+            _hover: {
+                backgroundColor: intentValue.light,
+                color: intentValue.primary,
+            },
+        },
+    } as const;
+}
+
+/**
+ * Create dynamic item styles
+ */
+function createItemStyles(theme: Theme) {
+    return ({ intent = 'neutral' }: MenuItemDynamicProps) => {
+        const hoverStyles = getItemHoverStyles(theme, intent);
+        return {
+            flexDirection: 'row',
+            alignItems: 'center',
+            backgroundColor: 'transparent',
+            borderRadius: 4,
+            minHeight: 44,
+            variants: {
+                size: buildSizeVariants(theme, 'menu', (size) => ({
+                    paddingVertical: size.paddingVertical,
+                    paddingHorizontal: size.paddingHorizontal,
+                })),
+                disabled: {
+                    true: {
+                        opacity: 0.5,
+                        _web: {
+                            cursor: 'not-allowed',
+                            _hover: {
+                                backgroundColor: 'transparent',
+                            },
+                        },
+                    },
+                    false: {},
+                },
+            },
+            _web: {
+                display: 'flex',
+                width: '100%',
+                cursor: 'pointer',
+                border: 'none',
+                borderWidth: 0,
+                outline: 'none',
+                transition: 'background-color 0.2s ease',
+                textAlign: 'left',
+                _hover: {
+                    backgroundColor: theme.colors.surface.secondary,
+                },
+            },
+            ...hoverStyles,
+        } as const;
+    };
+}
+
+// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel transform on native cannot resolve function calls to extract variant structures.
+export const menuItemStyles = StyleSheet.create((theme: Theme) => {
+    // Apply extensions to main visual elements
+
+    return applyExtensions('MenuItem', theme, {item: createItemStyles(theme),
+        // Additional styles (merged from return)
+        // Minor utility styles (not extended)
+        icon: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+            marginRight: 12,
+            variants: {
+                size: buildSizeVariants(theme, 'menu', (size) => ({
+                    width: size.iconSize,
+                    height: size.iconSize,
+                    fontSize: size.iconSize,
+                }))
+            },
+            _web: {
+                display: 'flex',
+            },
+        },
+        label: {
+            flex: 1,
+            color: theme.colors.text.primary,
+            variants: {
+                size: buildSizeVariants(theme, 'menu', (size) => ({
+                    fontSize: size.labelFontSize,
+                })),
+            },
+        }});
+});