@idealyst/components 1.1.6 → 1.1.8

package/src/List/List.styles.tsx

@@ -1,274 +1,212 @@
+/**
+ * List styles using defineStyle with dynamic props.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, CompoundVariants } from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-import {
-  buildGapVariants,
-  buildPaddingVariants,
-  buildPaddingVerticalVariants,
-  buildPaddingHorizontalVariants,
-  buildMarginVariants,
-  buildMarginVerticalVariants,
-  buildMarginHorizontalVariants,
-} from '../utils/buildViewStyleVariants';
-import { ListSizeVariant, ListType } from './types';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Size } from '@idealyst/theme';
+import { ViewStyleSize } from '../utils/viewStyleProps';
+
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
+
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-type ListVariants = {
-    type: ListType;
-    size: ListSizeVariant;
-    scrollable: boolean;
-    active: boolean;
-    selected: boolean;
-    disabled: boolean;
-    clickable: boolean;
+type ListType = 'default' | 'bordered' | 'divided';
+
+export type ListDynamicProps = {
+    size?: Size;
+    type?: ListType;
+    scrollable?: boolean;
+    active?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    clickable?: boolean;
+    gap?: ViewStyleSize;
+    padding?: ViewStyleSize;
+    paddingVertical?: ViewStyleSize;
+    paddingHorizontal?: ViewStyleSize;
+    margin?: ViewStyleSize;
+    marginVertical?: ViewStyleSize;
+    marginHorizontal?: ViewStyleSize;
 };
 
 /**
- * Create type variants for container
+ * List styles with type/state handling.
  */
-function createContainerTypeVariants(theme: Theme) {
-    return {
-        default: {
-            backgroundColor: 'transparent',
-        },
-        bordered: {
+export const listStyles = defineStyle('List', (theme: Theme) => ({
+    container: ({ type = 'default', scrollable = false }: ListDynamicProps) => {
+        const typeStyles = type === 'bordered' ? {
             backgroundColor: theme.colors.surface.primary,
             borderWidth: 1,
             borderColor: theme.colors.border.primary,
             borderRadius: 8,
-            _web: {
-                overflow: 'hidden',
-                border: `1px solid ${theme.colors.border.primary}`,
-            },
-        },
-        divided: {
+        } : {
             backgroundColor: 'transparent',
-        },
-    };
-}
-
+        };
 
-/**
- * Create compound variants for item
- */
-function createItemCompoundVariants(theme: Theme): CompoundVariants<keyof ListVariants> {
-    return [
-        {
-            type: 'divided',
-            styles: {
-                _web: {
-                    ':last-child': {
-                        borderBottom: 'none',
-                    },
+        return {
+            display: 'flex' as const,
+            flexDirection: 'column' as const,
+            width: '100%',
+            ...typeStyles,
+            variants: {
+                gap: {
+                    gap: theme.sizes.$view.padding,
                 },
-            },
-        },
-        {
-            disabled: true,
-            styles: {
-                _web: {
-                    _hover: {
-                        backgroundColor: 'transparent',
-                        borderRadius: 0,
-                    },
+                padding: {
+                    padding: theme.sizes.$view.padding,
                 },
-            },
-        },
-        {
-            clickable: false,
-            styles: {
-                _web: {
-                    _hover: {
-                        backgroundColor: 'transparent',
-                        borderRadius: 0,
-                    },
+                paddingVertical: {
+                    paddingVertical: theme.sizes.$view.padding,
+                },
+                paddingHorizontal: {
+                    paddingHorizontal: theme.sizes.$view.padding,
+                },
+                margin: {
+                    margin: theme.sizes.$view.padding,
+                },
+                marginVertical: {
+                    marginVertical: theme.sizes.$view.padding,
+                },
+                marginHorizontal: {
+                    marginHorizontal: theme.sizes.$view.padding,
                 },
             },
-        },
-    ];
-}
+            _web: {
+                overflow: type === 'bordered' ? 'hidden' : (scrollable ? 'auto' : undefined),
+                border: type === 'bordered' ? `1px solid ${theme.colors.border.primary}` : undefined,
+            },
+        } as const;
+    },
 
+    item: ({ type = 'default', active = false, selected = false, disabled = false, clickable = true }: ListDynamicProps) => {
+        const baseStyles = {
+            display: 'flex' as const,
+            flexDirection: 'row' as const,
+            alignItems: 'center' as const,
+            backgroundColor: active ? theme.colors.surface.secondary : 'transparent',
+            textAlign: 'left' as const,
+            opacity: disabled ? 0.5 : 1,
+        };
 
-export const listStyles = StyleSheet.create((theme: Theme) => {
-    return {
-        container: {
-            display: 'flex',
-            flexDirection: 'column',
-            width: '100%',
+        const dividerStyles = type === 'divided' ? {
+            borderBottomWidth: 1,
+            borderBottomColor: theme.colors.border.primary,
+        } : {};
+
+        const selectedStyles = selected ? {
+            backgroundColor: theme.intents.primary.light + '20',
+            borderLeftWidth: 3,
+            borderLeftColor: theme.intents.primary.primary,
+        } : {};
+
+        return {
+            ...baseStyles,
+            ...dividerStyles,
+            ...selectedStyles,
             variants: {
-                type: createContainerTypeVariants(theme),
-                scrollable: {
-                    true: {
-                        _web: {
-                            overflow: 'auto',
-                        },
-                    },
-                    false: {},
+                size: {
+                    paddingVertical: theme.sizes.$list.paddingVertical,
+                    paddingHorizontal: theme.sizes.$list.paddingHorizontal,
+                    minHeight: theme.sizes.$list.minHeight,
                 },
-                // Spacing variants from ContainerStyleProps
-                gap: buildGapVariants(theme),
-                padding: buildPaddingVariants(theme),
-                paddingVertical: buildPaddingVerticalVariants(theme),
-                paddingHorizontal: buildPaddingHorizontalVariants(theme),
-                margin: buildMarginVariants(theme),
-                marginVertical: buildMarginVerticalVariants(theme),
-                marginHorizontal: buildMarginHorizontalVariants(theme),
             },
-        },
-        item: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            backgroundColor: 'transparent',
-            textAlign: 'left',
-            variants: {
-                size: buildSizeVariants(theme, 'list', (size) => ({
-                    paddingVertical: size.paddingVertical,
-                    paddingHorizontal: size.paddingHorizontal,
-                    minHeight: size.minHeight,
-                })),
-                type: {
-                    default: {},
-                    bordered: {},
-                    divided: {
-                        borderBottomWidth: 1,
-                        borderBottomStyle: 'solid',
-                        borderBottomColor: theme.colors.border.primary,
-                        _web: {
-                            borderBottom: `1px solid ${theme.colors.border.primary}`,
-                        },
-                    },
-                },
-                active: {
-                    true: {
-                        backgroundColor: theme.colors.surface.secondary,
-                    },
-                    false: {},
-                },
-                selected: {
-                    true: {
-                        backgroundColor: theme.intents.primary.light + '20',
-                        borderLeftWidth: 3,
-                        borderLeftColor: theme.intents.primary.primary,
-                        _web: {
-                            borderLeft: `3px solid ${theme.intents.primary.primary}`,
-                        },
-                    },
-                    false: {},
-                },
-                disabled: {
-                    true: {
-                        opacity: 0.5,
-                        _web: {
-                            cursor: 'not-allowed',
-                        },
-                    },
-                    false: {},
-                },
-                clickable: {
-                    true: {},
-                    false: {
-                        _web: {
-                            cursor: 'default',
-                        },
-                    },
-                },
-            } as const,
-            compoundVariants: createItemCompoundVariants(theme),
             _web: {
                 border: 'none',
-                cursor: 'pointer',
+                cursor: disabled ? 'not-allowed' : (clickable ? 'pointer' : 'default'),
                 outline: 'none',
                 transition: 'background-color 0.2s ease, border-color 0.2s ease',
-                _hover: {
+                borderBottom: type === 'divided' ? `1px solid ${theme.colors.border.primary}` : undefined,
+                borderLeft: selected ? `3px solid ${theme.intents.primary.primary}` : undefined,
+                _hover: (disabled || !clickable) ? {} : {
                     backgroundColor: theme.colors.surface.secondary,
                     borderRadius: 4,
                 },
             },
-        } as const,
-        itemContent: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            flex: 1,
-            gap: 8,
-        },
-        leading: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginRight: 8,
-            color: theme.colors.text.secondary,
-            variants: {
-                size: buildSizeVariants(theme, 'list', (size) => ({
-                    width: size.iconSize,
-                    height: size.iconSize,
-                })),
-            } as const,
-        } as const,
-        labelContainer: {
-            flex: 1,
-            display: 'flex',
-            flexDirection: 'column',
-        },
-        label: {
-            fontWeight: '500',
-            color: theme.colors.text.primary,
-            variants: {
-                size: buildSizeVariants(theme, 'list', (size) => ({
-                    fontSize: size.labelFontSize,
-                    lineHeight: size.labelLineHeight,
-                })),
-                disabled: {
-                    true: {
-                        color: theme.colors.text.secondary,
-                    },
-                false: {},
-            },
-            selected: {
-                true: {
-                    color: theme.intents.primary.primary,
-                    fontWeight: '600',
-                },
-                false: {},
+        } as const;
+    },
+
+    itemContent: (_props: ListDynamicProps) => ({
+        display: 'flex' as const,
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        flex: 1,
+        gap: 8,
+    }),
+
+    leading: (_props: ListDynamicProps) => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        marginRight: 8,
+        color: theme.colors.text.secondary,
+        variants: {
+            size: {
+                width: theme.sizes.$list.iconSize,
+                height: theme.sizes.$list.iconSize,
+                fontSize: theme.sizes.$list.iconSize,
             },
         },
-        },
-        trailing: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginLeft: 8,
-            color: theme.colors.text.secondary,
-            flexShrink: 0,
-        },
-        trailingIcon: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            variants: {
-                size: buildSizeVariants(theme, 'list', (size) => ({
-                    width: size.iconSize,
-                    height: size.iconSize,
-                })),
+    }),
+
+    labelContainer: (_props: ListDynamicProps) => ({
+        flex: 1,
+        display: 'flex' as const,
+        flexDirection: 'column' as const,
+    }),
+
+    label: ({ disabled = false, selected = false }: ListDynamicProps) => ({
+        fontWeight: selected ? ('600' as const) : ('500' as const),
+        color: selected ? theme.intents.primary.primary : (disabled ? theme.colors.text.secondary : theme.colors.text.primary),
+        variants: {
+            size: {
+                fontSize: theme.sizes.$list.labelFontSize,
+                lineHeight: theme.sizes.$list.labelLineHeight,
             },
         },
-        section: {
-            display: 'flex',
-            flexDirection: 'column',
-        },
-        sectionTitle: {
-            fontWeight: '600',
-            fontSize: 12,
-            lineHeight: 16,
-            textTransform: 'uppercase',
-            letterSpacing: 0.5,
-            color: theme.colors.text.secondary,
-            padding: 8,
-            paddingBottom: 4,
-        },
-        sectionContent: {
-            display: 'flex',
-            flexDirection: 'column',
+    }),
+
+    trailing: (_props: ListDynamicProps) => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        marginLeft: 8,
+        color: theme.colors.text.secondary,
+        flexShrink: 0,
+    }),
+
+    trailingIcon: (_props: ListDynamicProps) => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        variants: {
+            size: {
+                width: theme.sizes.$list.iconSize,
+                height: theme.sizes.$list.iconSize,
+                fontSize: theme.sizes.$list.iconSize,
+            },
         },
-    };
-});
+    }),
+
+    section: (_props: ListDynamicProps) => ({
+        display: 'flex' as const,
+        flexDirection: 'column' as const,
+    }),
+
+    sectionTitle: (_props: ListDynamicProps) => ({
+        fontWeight: '600' as const,
+        fontSize: 12,
+        lineHeight: 16,
+        textTransform: 'uppercase' as const,
+        letterSpacing: 0.5,
+        color: theme.colors.text.secondary,
+        padding: 8,
+        paddingBottom: 4,
+    }),
+
+    sectionContent: (_props: ListDynamicProps) => ({
+        display: 'flex' as const,
+        flexDirection: 'column' as const,
+    }),
+}));

package/src/List/ListItem.native.tsx

@@ -51,15 +51,23 @@ const ListItem = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pres
   const effectiveSize = size ?? listContext.size ?? 'md';
   const effectiveVariant = listContext.type ?? 'default';
 
-  // Apply types
+  // Apply variants (for size, active, selected, disabled on label)
   listStyles.useVariants({
     size: effectiveSize,
     active,
     selected,
     disabled,
-    clickable: isClickable,
   });
 
+  // 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)({});
+  const itemContentStyle = (listStyles.itemContent as any)({});
+
   // Resolve icon color - check intents first, then color palette
   const resolvedIconColor = (() => {
     if (!iconColor) return undefined;
@@ -77,7 +85,7 @@ 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 iconStyle = styleKey === 'leading' ? leadingStyle : trailingIconStyle;
       return (
         <MaterialCommunityIcons
           name={element}
@@ -96,20 +104,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>
       )}
@@ -117,7 +125,7 @@ const ListItem = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pres
   );
 
   const indentStyle = indent > 0 ? { paddingLeft: indent * 16 } : {};
-  const combinedStyle = [listStyles.item, indentStyle, style];
+  const combinedStyle = [itemStyle, indentStyle, style];
 
   if (isClickable) {
     return (

package/src/List/ListItem.web.tsx

@@ -32,20 +32,27 @@ const ListItem: React.FC<ListItemProps> = ({
   const effectiveSize = size ?? listContext.size ?? 'md';
   const effectiveVariant = listContext.type ?? 'default';
 
-  // Apply types
+  // Apply variants (for size, active, selected, disabled on label)
   listStyles.useVariants({
     size: effectiveSize,
     active,
     selected,
     disabled,
-    clickable: isClickable,
   });
 
-  const itemProps = getWebProps([listStyles.item, style]);
-  const labelProps = getWebProps([listStyles.label]);
-  const leadingProps = getWebProps([listStyles.leading]);
-  const trailingProps = getWebProps([listStyles.trailing]);
-  const trailingIconProps = getWebProps([listStyles.trailing, listStyles.trailingIcon]);
+  // 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([labelStyle]);
+  const leadingProps = getWebProps([leadingStyle]);
+  const trailingProps = getWebProps([trailingStyle]);
+  const trailingIconProps = getWebProps([trailingStyle, trailingIconStyle]);
 
   const handleClick = () => {
     if (!disabled && onPress) {
@@ -65,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;
       return (
         <IconSvg
           path={iconPath}
-          {...iconPropsToUse}
-          color={resolvedIconColor}
+          color={resolvedIconColor || 'currentColor'}
           aria-label={element}
         />
       );
@@ -87,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>
         )}
@@ -100,7 +111,7 @@ const ListItem: React.FC<ListItemProps> = ({
 
       {trailing && (
         <div {...trailingProps}>
-          {renderElement(trailing, trailingIconProps, true)}
+          {renderElement(trailing, true)}
         </div>
       )}
     </>

package/src/Menu/Menu.native.tsx

@@ -113,7 +113,7 @@ const Menu = forwardRef<View, MenuProps>(({
             width={menuPosition.width}
             maxHeight={300}
             style={[
-              menuStyles.menu,
+              (menuStyles.menu as any)({}),
               style,
               { opacity: shouldShow ? 1 : 0 }
             ]}