@idealyst/components 1.1.6 → 1.1.7

package/src/List/List.styles.tsx

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, CompoundVariants } from '@idealyst/theme';
+import { Theme } from '@idealyst/theme';
 import { buildSizeVariants } from '../utils/buildSizeVariants';
 import {
   buildGapVariants,
@@ -11,6 +11,7 @@ import {
   buildMarginHorizontalVariants,
 } from '../utils/buildViewStyleVariants';
 import { ListSizeVariant, ListType } from './types';
+import { applyExtensions } from '../extensions/applyExtension';
 
 type ListVariants = {
     type: ListType;
@@ -47,97 +48,76 @@ function createContainerTypeVariants(theme: Theme) {
 }
 
 
+type ItemDynamicProps = {
+    type?: ListType;
+    disabled?: boolean;
+    clickable?: boolean;
+};
+
 /**
- * Create compound variants for item
+ * Get item hover styles based on disabled and clickable state
  */
-function createItemCompoundVariants(theme: Theme): CompoundVariants<keyof ListVariants> {
-    return [
-        {
-            type: 'divided',
-            styles: {
-                _web: {
-                    ':last-child': {
-                        borderBottom: 'none',
-                    },
-                },
-            },
-        },
-        {
-            disabled: true,
-            styles: {
-                _web: {
-                    _hover: {
-                        backgroundColor: 'transparent',
-                        borderRadius: 0,
-                    },
-                },
-            },
-        },
-        {
-            clickable: false,
-            styles: {
-                _web: {
-                    _hover: {
-                        backgroundColor: 'transparent',
-                        borderRadius: 0,
-                    },
-                },
-            },
-        },
-    ];
+function getItemHoverStyles(theme: Theme, disabled: boolean, clickable: boolean) {
+    if (disabled || !clickable) {
+        return {
+            backgroundColor: 'transparent',
+            borderRadius: 0,
+        };
+    }
+    return {
+        backgroundColor: theme.colors.surface.secondary,
+        borderRadius: 4,
+    };
 }
 
 
-export const listStyles = StyleSheet.create((theme: Theme) => {
-    return {
-        container: {
-            display: 'flex',
-            flexDirection: 'column',
-            width: '100%',
-            variants: {
-                type: createContainerTypeVariants(theme),
-                scrollable: {
-                    true: {
-                        _web: {
-                            overflow: 'auto',
-                        },
+// 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',
                     },
-                    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),
+                false: {},
             },
-        },
-        item: {
+            // 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 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,
             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,
@@ -155,36 +135,30 @@ export const listStyles = StyleSheet.create((theme: Theme) => {
                     },
                     false: {},
                 },
-                disabled: {
-                    true: {
-                        opacity: 0.5,
-                        _web: {
-                            cursor: 'not-allowed',
-                        },
-                    },
-                    false: {},
-                },
-                clickable: {
-                    true: {},
-                    false: {
-                        _web: {
-                            cursor: 'default',
-                        },
-                    },
-                },
             } as const,
-            compoundVariants: createItemCompoundVariants(theme),
+            opacity: disabled ? 0.5 : 1,
             _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: {
-                    backgroundColor: theme.colors.surface.secondary,
-                    borderRadius: 4,
-                },
+                borderBottom: type === 'divided' ? `1px solid ${theme.colors.border.primary}` : undefined,
+                _hover: hoverStyles,
             },
-        } as const,
+        } 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',
@@ -222,17 +196,17 @@ export const listStyles = StyleSheet.create((theme: Theme) => {
                     true: {
                         color: theme.colors.text.secondary,
                     },
-                false: {},
-            },
-            selected: {
-                true: {
-                    color: theme.intents.primary.primary,
-                    fontWeight: '600',
+                    false: {},
+                },
+                selected: {
+                    true: {
+                        color: theme.intents.primary.primary,
+                        fontWeight: '600',
+                    },
+                    false: {},
                 },
-                false: {},
             },
         },
-        },
         trailing: {
             display: 'flex',
             alignItems: 'center',

package/src/List/ListItem.native.tsx

@@ -51,15 +51,17 @@ 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 item style with type, disabled, and clickable props
+  const itemStyle = (listStyles.item as any)({ type: effectiveVariant, disabled, clickable: isClickable });
+
   // Resolve icon color - check intents first, then color palette
   const resolvedIconColor = (() => {
     if (!iconColor) return undefined;
@@ -117,7 +119,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,16 +32,17 @@ 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]);
+  // Get dynamic item style with type, disabled, and clickable props
+  const itemStyle = (listStyles.item as any)({ type: effectiveVariant, disabled, clickable: isClickable });
+  const itemProps = getWebProps([itemStyle, style]);
   const labelProps = getWebProps([listStyles.label]);
   const leadingProps = getWebProps([listStyles.leading]);
   const trailingProps = getWebProps([listStyles.trailing]);

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 }
             ]}

package/src/Menu/Menu.styles.tsx

@@ -1,6 +1,7 @@
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, CompoundVariants, Intent, Size} from '@idealyst/theme';
+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;
@@ -88,9 +89,46 @@ function createLabelSizeVariants(theme: Theme) {
     }));
 }
 
-const createItemStyles = (theme: Theme) => {
-    return ({ intent }: MenuVariants) => {
-        const hoverStyles = getItemHoverStyles(theme, intent);
+// 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',
@@ -122,49 +160,27 @@ const createItemStyles = (theme: Theme) => {
             },
             ...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),
+    });
+
     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',
-            },
-        } as const,
+        ...extended,
+        // Minor utility styles (not extended)
         separator: {
             height: 1,
             backgroundColor: theme.colors.border.primary,
             marginTop: 4,
             marginBottom: 4,
         },
-        item: createItemStyles(theme),
         icon: {
             alignItems: 'center',
             justifyContent: 'center',
@@ -181,5 +197,5 @@ export const menuStyles = StyleSheet.create((theme: Theme) => {
                 size: createLabelSizeVariants(theme),
             } as const,
         } as const,
-    } as const;
+    };
 });

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,15 @@ 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',
   });
 
+  // Compute dynamic item style with intent
+  const itemStyle = (menuItemStyles.item as any)({ intent: item.intent || 'neutral' });
+
   const renderIcon = () => {
     if (!item.icon) return null;
 
@@ -39,7 +41,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"

package/src/Menu/MenuItem.styles.tsx

@@ -1,27 +1,48 @@
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme } from '@idealyst/theme';
+import { Theme, Intent } from '@idealyst/theme';
 import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { applyExtensions } from '../extensions/applyExtension';
 
-// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel transform on native cannot resolve function calls to extract variant structures.
-// @ts-ignore - TS language server needs restart to pick up theme structure changes
-export const menuItemStyles = StyleSheet.create((theme: Theme) => {
+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 {
-        item: {
+        _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,
-            _web: {
-                cursor: 'pointer',
-                border: 'none',
-                outline: 'none',
-                transition: 'background-color 0.2s ease',
-                textAlign: 'left',
-                _hover: {
-                    backgroundColor: theme.colors.surface.secondary,
-                },
-            },
             variants: {
                 size: buildSizeVariants(theme, 'menu', (size) => ({
                     paddingVertical: size.paddingVertical,
@@ -32,67 +53,42 @@ export const menuItemStyles = StyleSheet.create((theme: Theme) => {
                         opacity: 0.5,
                         _web: {
                             cursor: 'not-allowed',
-                        },
-                    },
-                    false: {},
-                },
-                intent: {
-                    primary: {
-                        _web: {
-                            _hover: {
-                                backgroundColor: theme.intents.primary.light,
-                                color: theme.intents.primary.primary,
-                            },
-                        },
-                    },
-                    neutral: {},
-                    success: {
-                        _web: {
-                            _hover: {
-                                backgroundColor: theme.intents.success.light,
-                                color: theme.intents.success.primary,
-                            },
-                        },
-                    },
-                    error: {
-                        _web: {
                             _hover: {
-                                backgroundColor: theme.intents.error.light,
-                                color: theme.intents.error.primary,
-                            },
-                        },
-                    },
-                    warning: {
-                        _web: {
-                            _hover: {
-                                backgroundColor: theme.intents.warning.light,
-                                color: theme.intents.warning.primary,
-                            },
-                        },
-                    },
-                    info: {
-                        _web: {
-                            _hover: {
-                                backgroundColor: theme.intents.info.light,
-                                color: theme.intents.info.primary,
+                                backgroundColor: 'transparent',
                             },
                         },
                     },
+                    false: {},
                 },
             },
-            compoundVariants: [
-                {
-                    disabled: true,
-                    styles: {
-                        _web: {
-                            _hover: {
-                                backgroundColor: 'transparent',
-                            },
-                        },
-                    },
+            _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
+    const extended = applyExtensions('MenuItem', theme, {
+        item: createItemStyles(theme),
+    });
+
+    return {
+        ...extended,
+        // Minor utility styles (not extended)
         icon: {
             alignItems: 'center',
             justifyContent: 'center',
@@ -105,6 +101,9 @@ export const menuItemStyles = StyleSheet.create((theme: Theme) => {
                     fontSize: size.iconSize,
                 }))
             },
+            _web: {
+                display: 'flex',
+            },
         },
         label: {
             flex: 1,

package/src/Menu/MenuItem.web.tsx

@@ -14,14 +14,15 @@ interface MenuItemProps {
 }
 
 const MenuItem = forwardRef<HTMLButtonElement, 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',
   });
 
-  const itemProps = getWebProps([menuItemStyles.item]);
+  // Compute dynamic item style with intent
+  const itemStyle = (menuItemStyles.item as any)({ intent: item.intent || 'neutral' });
+  const itemProps = getWebProps([itemStyle]);
   const iconProps = getWebProps([menuItemStyles.icon]);
   const labelProps = getWebProps([menuItemStyles.label]);
 
@@ -48,10 +49,22 @@ const MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(({ item, onPress,
   // Merge refs
   const mergedRef = useMergeRefs(ref, itemProps.ref);
 
+  // Button reset styles that must be applied directly
+  const buttonResetStyles: React.CSSProperties = {
+    display: 'flex',
+    width: '100%',
+    border: 'none',
+    outline: 'none',
+    cursor: item.disabled ? 'not-allowed' : 'pointer',
+    background: 'transparent',
+    textAlign: 'left',
+  };
+
   return (
     <button
       {...itemProps}
       ref={mergedRef}
+      style={{ ...buttonResetStyles, ...itemProps.style }}
       onClick={() => onPress(item)}
       disabled={item.disabled}
       role="menuitem"