@idealyst/components 1.1.7 → 1.1.8

package/src/List/List.styles.tsx

@@ -1,248 +1,212 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme } 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 { applyExtensions } from '../extensions/applyExtension';
-
-type ListVariants = {
-    type: ListType;
-    size: ListSizeVariant;
-    scrollable: boolean;
-    active: boolean;
-    selected: boolean;
-    disabled: boolean;
-    clickable: boolean;
-};
-
 /**
- * Create type variants for container
+ * List styles using defineStyle with dynamic props.
  */
-function createContainerTypeVariants(theme: Theme) {
-    return {
-        default: {
-            backgroundColor: 'transparent',
-        },
-        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',
-        },
-    };
-}
+import { StyleSheet } from 'react-native-unistyles';
+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 ItemDynamicProps = {
+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;
 };
 
 /**
- * Get item hover styles based on disabled and clickable state
+ * List styles with type/state handling.
  */
-function getItemHoverStyles(theme: Theme, disabled: boolean, clickable: boolean) {
-    if (disabled || !clickable) {
-        return {
+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,
+        } : {
             backgroundColor: 'transparent',
-            borderRadius: 0,
         };
-    }
-    return {
-        backgroundColor: theme.colors.surface.secondary,
-        borderRadius: 4,
-    };
-}
-
 
-// Container style creator for extension support
-function createContainerStyles(theme: Theme) {
-    return () => ({
-        display: 'flex' as const,
-        flexDirection: 'column' as const,
-        width: '100%',
-        variants: {
-            type: createContainerTypeVariants(theme),
-            scrollable: {
-                true: {
-                    _web: {
-                        overflow: 'auto',
-                    },
+        return {
+            display: 'flex' as const,
+            flexDirection: 'column' as const,
+            width: '100%',
+            ...typeStyles,
+            variants: {
+                gap: {
+                    gap: theme.sizes.$view.padding,
+                },
+                padding: {
+                    padding: theme.sizes.$view.padding,
+                },
+                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,
                 },
-                false: {},
             },
-            // 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),
-        },
-    });
-}
+            _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,
+        };
+
+        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,
+        } : {};
 
-// Item style creator for extension support
-function createItemStyles(theme: Theme) {
-    return ({ type = 'default', disabled = false, clickable = true }: ItemDynamicProps) => {
-        const hoverStyles = getItemHoverStyles(theme, disabled, clickable);
         return {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            backgroundColor: 'transparent',
-            textAlign: 'left',
-            borderBottomWidth: type === 'divided' ? 1 : 0,
-            borderBottomStyle: type === 'divided' ? 'solid' as const : undefined,
-            borderBottomColor: type === 'divided' ? theme.colors.border.primary : undefined,
+            ...baseStyles,
+            ...dividerStyles,
+            ...selectedStyles,
             variants: {
-                size: buildSizeVariants(theme, 'list', (size) => ({
-                    paddingVertical: size.paddingVertical,
-                    paddingHorizontal: size.paddingHorizontal,
-                    minHeight: size.minHeight,
-                })),
-                active: {
-                    true: {
-                        backgroundColor: theme.colors.surface.secondary,
-                    },
-                    false: {},
+                size: {
+                    paddingVertical: theme.sizes.$list.paddingVertical,
+                    paddingHorizontal: theme.sizes.$list.paddingHorizontal,
+                    minHeight: theme.sizes.$list.minHeight,
                 },
-                selected: {
-                    true: {
-                        backgroundColor: theme.intents.primary.light + '20',
-                        borderLeftWidth: 3,
-                        borderLeftColor: theme.intents.primary.primary,
-                        _web: {
-                            borderLeft: `3px solid ${theme.intents.primary.primary}`,
-                        },
-                    },
-                    false: {},
-                },
-            } as const,
-            opacity: disabled ? 0.5 : 1,
+            },
             _web: {
                 border: 'none',
                 cursor: disabled ? 'not-allowed' : (clickable ? 'pointer' : 'default'),
                 outline: 'none',
                 transition: 'background-color 0.2s ease, border-color 0.2s ease',
                 borderBottom: type === 'divided' ? `1px solid ${theme.colors.border.primary}` : undefined,
-                _hover: hoverStyles,
+                borderLeft: selected ? `3px solid ${theme.intents.primary.primary}` : undefined,
+                _hover: (disabled || !clickable) ? {} : {
+                    backgroundColor: theme.colors.surface.secondary,
+                    borderRadius: 4,
+                },
             },
         } as const;
-    };
-}
-
-export const listStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-    const extended = applyExtensions('List', theme, {
-        container: createContainerStyles(theme),
-        item: createItemStyles(theme),
-    });
-
-    return {
-        ...extended,
-        // Minor utility styles (not extended)
-        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: {},
-                },
+    },
+
+    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

@@ -59,8 +59,14 @@ 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)({});
+  const itemContentStyle = (listStyles.itemContent as any)({});
 
   // Resolve icon color - check intents first, then color palette
   const resolvedIconColor = (() => {
@@ -79,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}
@@ -98,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>
       )}

package/src/List/ListItem.web.tsx

@@ -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;
       return (
         <IconSvg
           path={iconPath}
-          {...iconPropsToUse}
-          color={resolvedIconColor}
+          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>
       )}
     </>