@idealyst/components 1.1.7 → 1.1.9

package/src/List/ListItem.native.tsx

@@ -59,19 +59,24 @@ const ListItem = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pres
     disabled,
   });
 
-  // Get dynamic item style with type, disabled, and clickable props
+  // Get dynamic styles - call as functions to get theme-reactive styles
   const itemStyle = (listStyles.item as any)({ type: effectiveVariant, disabled, clickable: isClickable });
+  const labelStyle = (listStyles.label as any)({ disabled, selected });
+  const leadingStyle = (listStyles.leading as any)({});
+  const trailingStyle = (listStyles.trailing as any)({});
+  const trailingIconStyle = (listStyles.trailingIcon as any)({});
+  const labelContainerStyle = (listStyles.labelContainer as any)({});
 
   // Resolve icon color - check intents first, then color palette
-  const resolvedIconColor = (() => {
-    if (!iconColor) return undefined;
+  const resolvedIconColor = useMemo(() => {
+    if (!iconColor) return trailingIconStyle.color || leadingStyle.color;
     // Check if it's an intent name
     if (iconColor in theme.intents) {
       return theme.intents[iconColor as Intent]?.primary;
     }
     // Otherwise try color palette
     return getColorFromString(theme, iconColor as Color);
-  })();
+  }, [iconColor, theme, trailingIconStyle.color, leadingStyle.color]);
 
   // Helper to render leading/trailing icons
   const renderElement = (element: typeof leading | typeof trailing, styleKey: 'leading' | 'trailingIcon') => {
@@ -79,12 +84,12 @@ const ListItem = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pres
 
     // If it's a string, treat it as an icon name
     if (typeof element === 'string') {
-      const iconStyle = styleKey === 'leading' ? listStyles.leading : listStyles.trailingIcon;
+      const iconSize = styleKey === 'leading' ? leadingStyle.width : trailingIconStyle.width;
       return (
         <MaterialCommunityIcons
           name={element}
-          size={iconStyle.width}
-          color={resolvedIconColor ?? iconStyle.color}
+          size={iconSize}
+          color={resolvedIconColor}
         />
       );
     } else if (isValidElement(element)) {
@@ -98,20 +103,20 @@ const ListItem = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pres
   const content = (
     <>
       {leading && (
-        <View style={listStyles.leading}>
+        <View style={leadingStyle}>
           {renderElement(leading, 'leading')}
         </View>
       )}
 
-      <View style={listStyles.labelContainer}>
+      <View style={labelContainerStyle}>
         {label && (
-          <Text style={listStyles.label}>{label}</Text>
+          <Text style={labelStyle}>{label}</Text>
         )}
         {children}
       </View>
 
       {trailing && (
-        <View style={listStyles.trailing}>
+        <View style={trailingStyle}>
           {renderElement(trailing, 'trailingIcon')}
         </View>
       )}

package/src/List/ListItem.web.tsx

@@ -5,7 +5,7 @@ import { getColorFromString, Intent, Theme, Color } from '@idealyst/theme';
 import { listStyles } from './List.styles';
 import type { ListItemProps } from './types';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
-import { resolveIconPath, isIconName } from '../Icon/icon-resolver';
+import { isIconName } from '../Icon/icon-resolver';
 import { useListContext } from './ListContext';
 
 const ListItem: React.FC<ListItemProps> = ({
@@ -40,13 +40,19 @@ const ListItem: React.FC<ListItemProps> = ({
     disabled,
   });
 
-  // Get dynamic item style with type, disabled, and clickable props
+  // Get dynamic styles - call as functions for theme reactivity
   const itemStyle = (listStyles.item as any)({ type: effectiveVariant, disabled, clickable: isClickable });
+  const labelStyle = (listStyles.label as any)({ disabled, selected });
+  const leadingStyle = (listStyles.leading as any)({});
+  const trailingStyle = (listStyles.trailing as any)({});
+  const trailingIconStyle = (listStyles.trailingIcon as any)({});
+  const labelContainerStyle = (listStyles.labelContainer as any)({});
+
   const itemProps = getWebProps([itemStyle, style]);
-  const labelProps = getWebProps([listStyles.label]);
-  const leadingProps = getWebProps([listStyles.leading]);
-  const trailingProps = getWebProps([listStyles.trailing]);
-  const trailingIconProps = getWebProps([listStyles.trailing, listStyles.trailingIcon]);
+  const labelProps = getWebProps([labelStyle]);
+  const leadingProps = getWebProps([leadingStyle]);
+  const trailingProps = getWebProps([trailingStyle]);
+  const trailingIconProps = getWebProps([trailingStyle, trailingIconStyle]);
 
   const handleClick = () => {
     if (!disabled && onPress) {
@@ -66,18 +72,16 @@ const ListItem: React.FC<ListItemProps> = ({
   })();
 
   // Helper to render leading/trailing icons
-  const renderElement = (element: typeof leading | typeof trailing, props: any, isTrailing = false) => {
+  // IconSvg uses size="1em" by default, sized by container's fontSize from styles
+  const renderElement = (element: typeof leading | typeof trailing, isTrailing = false) => {
     if (!element) return null;
 
     if (isIconName(element)) {
-      const iconPath = resolveIconPath(element);
-      // Use trailingIconProps for trailing icons to apply size constraints
-      const iconPropsToUse = isTrailing ? trailingIconProps : props;
+      // Use IconSvg with name - registry lookup happens inside
       return (
         <IconSvg
-          path={iconPath}
-          {...iconPropsToUse}
-          color={resolvedIconColor}
+          name={element}
+          color={resolvedIconColor || 'currentColor'}
           aria-label={element}
         />
       );
@@ -88,11 +92,17 @@ const ListItem: React.FC<ListItemProps> = ({
     return null;
   };
 
+  const labelContainerProps = getWebProps([labelContainerStyle]);
+
   const content = (
     <>
-      {leading && renderElement(leading, leadingProps)}
+      {leading && (
+        <span {...leadingProps}>
+          {renderElement(leading)}
+        </span>
+      )}
 
-      <div {...getWebProps([listStyles.labelContainer])}>
+      <div {...labelContainerProps}>
         {label && (
           <span {...labelProps}>{label}</span>
         )}
@@ -101,7 +111,7 @@ const ListItem: React.FC<ListItemProps> = ({
 
       {trailing && (
         <div {...trailingProps}>
-          {renderElement(trailing, trailingIconProps, true)}
+          {renderElement(trailing, true)}
         </div>
       )}
     </>

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,98 +1,28 @@
-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
+ * Menu styles using defineStyle with dynamic props.
  */
-function createItemSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'menu', (size) => ({
-        paddingVertical: size.paddingVertical,
-        paddingHorizontal: size.paddingHorizontal,
-    }));
-}
+import { StyleSheet } from 'react-native-unistyles';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent, Size } from '@idealyst/theme';
 
-/**
- * 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;
-}
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-/**
- * Create compound variants for menu item
- */
-function createItemCompoundVariants(theme: Theme): CompoundVariants<keyof MenuVariants> {
-    return [
-        {
-            disabled: true,
-            styles: {
-                _web: {
-                    _hover: {
-                        backgroundColor: 'transparent',
-                    },
-                },
-            },
-        },
-    ] as const;
-}
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-/**
- * Create size variants for icon
- */
-function createIconSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'menu', (size) => ({
-        width: size.iconSize,
-        height: size.iconSize,
-        fontSize: size.iconSize,
-    }));
-}
+export type MenuDynamicProps = {
+    size?: Size;
+    intent?: Intent;
+    disabled?: boolean;
+};
 
 /**
- * Create size variants for label
+ * Menu styles with intent/disabled handling.
  */
-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',
+export const menuStyles = defineStyle('Menu', (theme: Theme) => ({
+    overlay: (_props: MenuDynamicProps) => ({
+        backgroundColor: 'transparent' as const,
         _web: {
             position: 'fixed' as const,
             top: 0,
@@ -101,11 +31,9 @@ function createOverlayStyles(theme: Theme) {
             bottom: 0,
             zIndex: 999,
         },
-    });
-}
+    }),
 
-function createMenuStyles(theme: Theme) {
-    return () => ({
+    menu: (_props: MenuDynamicProps) => ({
         position: 'absolute' as const,
         zIndex: 1000,
         backgroundColor: theme.colors.surface.primary,
@@ -123,79 +51,69 @@ function createMenuStyles(theme: Theme) {
             boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
             width: 'fit-content',
         },
-    });
-}
+    }),
+
+    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,
+        };
 
-function createItemStyles(theme: Theme) {
-    return ({ intent }: Partial<MenuVariants>) => {
-        const hoverStyles = getItemHoverStyles(theme, intent ?? 'neutral');
         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) => {
-    // Apply extensions to main visual elements
-    const extended = applyExtensions('Menu', theme, {
-        overlay: createOverlayStyles(theme),
-        menu: createMenuStyles(theme),
-        item: createItemStyles(theme),
-    });
+    separator: (_props: MenuDynamicProps) => ({
+        height: 1,
+        backgroundColor: theme.colors.border.primary,
+        marginTop: 4,
+        marginBottom: 4,
+    }),
 
-    return {
-        ...extended,
-        // Minor utility styles (not extended)
-        separator: {
-            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,
+            },
         },
-        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,
-    };
-});
+    }),
+
+    label: (_props: MenuDynamicProps) => ({
+        flex: 1,
+        color: theme.colors.text.primary,
+        variants: {
+            size: {
+                fontSize: theme.sizes.$menu.labelFontSize,
+            },
+        },
+    }),
+}));

package/src/Menu/MenuItem.native.tsx

@@ -19,8 +19,10 @@ const MenuItem = forwardRef<ComponentRef<typeof Pressable>, MenuItemProps>(({ it
     disabled: Boolean(item.disabled),
   });
 
-  // Compute dynamic item style with intent
+  // 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;
@@ -29,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)) {
@@ -56,7 +58,7 @@ const MenuItem = forwardRef<ComponentRef<typeof Pressable>, MenuItemProps>(({ it
           {renderIcon()}
         </View>
       )}
-      <Text style={menuItemStyles.label}>
+      <Text style={labelStyle}>
         {item.label}
       </Text>
     </Pressable>