@idealyst/components 1.1.7 → 1.1.8

package/src/Menu/MenuItem.styles.tsx

@@ -1,118 +1,86 @@
+/**
+ * MenuItem styles using defineStyle with dynamic props.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, Intent } from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-import { applyExtensions } from '../extensions/applyExtension';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent, Size } from '@idealyst/theme';
+
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-type MenuItemDynamicProps = {
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
+
+export type MenuItemDynamicProps = {
+    size?: Size;
     intent?: Intent;
+    disabled?: boolean;
 };
 
 /**
- * Get hover styles for menu item based on intent
+ * MenuItem styles with intent/disabled handling.
  */
-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;
-}
+export const menuItemStyles = defineStyle('MenuItem', (theme: Theme) => ({
+    item: ({ intent = 'neutral', disabled = false }: MenuItemDynamicProps) => {
+        const intentValue = theme.intents[intent];
+        const hoverStyles = intent !== 'neutral' ? {
+            backgroundColor: intentValue.light,
+            color: intentValue.primary,
+        } : {
+            backgroundColor: theme.colors.surface.secondary,
+        };
 
-/**
- * Create dynamic item styles
- */
-function createItemStyles(theme: Theme) {
-    return ({ intent = 'neutral' }: MenuItemDynamicProps) => {
-        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: buildSizeVariants(theme, 'menu', (size) => ({
-                    paddingVertical: size.paddingVertical,
-                    paddingHorizontal: size.paddingHorizontal,
-                })),
-                disabled: {
-                    true: {
-                        opacity: 0.5,
-                        _web: {
-                            cursor: 'not-allowed',
-                            _hover: {
-                                backgroundColor: 'transparent',
-                            },
-                        },
-                    },
-                    false: {},
+                size: {
+                    paddingVertical: theme.sizes.$menu.paddingVertical,
+                    paddingHorizontal: theme.sizes.$menu.paddingHorizontal,
                 },
             },
             _web: {
                 display: 'flex',
                 width: '100%',
-                cursor: 'pointer',
+                cursor: disabled ? 'not-allowed' : 'pointer',
                 border: 'none',
                 borderWidth: 0,
                 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 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',
-            flexShrink: 0,
-            marginRight: 12,
-            variants: {
-                size: buildSizeVariants(theme, 'menu', (size) => ({
-                    width: size.iconSize,
-                    height: size.iconSize,
-                    fontSize: size.iconSize,
-                }))
-            },
-            _web: {
-                display: 'flex',
+    icon: (_props: MenuItemDynamicProps) => ({
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        flexShrink: 0,
+        marginRight: 12,
+        variants: {
+            size: {
+                width: theme.sizes.$menu.iconSize,
+                height: theme.sizes.$menu.iconSize,
+                fontSize: theme.sizes.$menu.iconSize,
             },
         },
-        label: {
-            flex: 1,
-            color: theme.colors.text.primary,
-            variants: {
-                size: buildSizeVariants(theme, 'menu', (size) => ({
-                    fontSize: size.labelFontSize,
-                })),
+        _web: {
+            display: 'flex',
+        },
+    }),
+
+    label: (_props: MenuItemDynamicProps) => ({
+        flex: 1,
+        color: theme.colors.text.primary,
+        variants: {
+            size: {
+                fontSize: theme.sizes.$menu.labelFontSize,
             },
         },
-    };
-});
+    }),
+}));

package/src/Menu/MenuItem.web.tsx

@@ -20,11 +20,14 @@ const MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(({ item, onPress,
     disabled: Boolean(item.disabled),
   });
 
-  // Compute dynamic item style with intent
+  // Compute dynamic styles - call as functions for theme reactivity
   const itemStyle = (menuItemStyles.item as any)({ intent: item.intent || 'neutral' });
+  const iconStyle = (menuItemStyles.icon as any)({});
+  const labelStyle = (menuItemStyles.label as any)({});
+
   const itemProps = getWebProps([itemStyle]);
-  const iconProps = getWebProps([menuItemStyles.icon]);
-  const labelProps = getWebProps([menuItemStyles.label]);
+  const iconProps = getWebProps([iconStyle]);
+  const labelProps = getWebProps([labelStyle]);
 
   const renderIcon = () => {
     if (!item.icon) return null;
@@ -32,9 +35,11 @@ const MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(({ item, onPress,
     if (isIconName(item.icon)) {
       // Resolve icon name to path and render with IconSvg
       const iconPath = resolveIconPath(item.icon);
+      // IconSvg uses size="1em" by default, sized by container's fontSize from styles
       return (
         <IconSvg
           path={iconPath}
+          color="currentColor"
           aria-label={item.icon}
         />
       );

package/src/Popover/Popover.native.tsx

@@ -43,6 +43,12 @@ const Popover = forwardRef<View, PopoverProps>(({
   // Apply variants
   popoverStyles.useVariants({});
 
+  // Get dynamic styles - call as functions for theme reactivity
+  const backdropStyle = (popoverStyles.backdrop as any)({});
+  const containerStyle = (popoverStyles.container as any)({});
+  const arrowStyle = (popoverStyles.arrow as any)({});
+  const contentStyle = (popoverStyles.content as any)({});
+
   // Determine if anchor is a ref object
   const anchorRefToUse = React.useMemo(() => {
     if (!anchor || typeof anchor !== 'object') return null;
@@ -147,19 +153,19 @@ const Popover = forwardRef<View, PopoverProps>(({
       nativeID={id}
     >
       <TouchableWithoutFeedback onPress={handleBackdropPress}>
-        <View style={popoverStyles.backdrop}>
+        <View style={backdropStyle}>
           <TouchableWithoutFeedback>
             <BoundedModalContent
               top={popoverPosition.top}
               left={popoverPosition.left}
               width={Math.min(popoverPosition.width || 200, maxPopoverWidth)}
               maxHeight={500}
-              style={[(popoverStyles.container as any)({}), style]}
+              style={[containerStyle, style]}
               onLayout={handlePopoverLayout}
               {...nativeA11yProps}
             >
-              {showArrow && <View style={popoverStyles.arrow} />}
-              <View style={popoverStyles.content}>
+              {showArrow && <View style={arrowStyle} />}
+              <View style={contentStyle}>
                 {children}
               </View>
             </BoundedModalContent>

package/src/Popover/Popover.styles.old.tsx

@@ -0,0 +1,135 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles } from '@idealyst/theme';
+import { applyExtensions } from '../extensions/applyExtension';
+
+type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+
+type PopoverVariants = {
+    placement: PopoverPlacement;
+}
+
+export type ExpandedPopoverStyles = StylesheetStyles<keyof PopoverVariants>;
+
+export type PopoverStylesheet = {
+    container: ExpandedPopoverStyles;
+    content: ExpandedPopoverStyles;
+    arrow: ExpandedPopoverStyles;
+    backdrop: ExpandedPopoverStyles;
+}
+
+function createArrowPlacementVariants(theme: Theme) {
+    return {
+        top: {
+            bottom: -6,
+            _web: {
+                left: '50%',
+                marginLeft: -6,
+            },
+        },
+        'top-start': {
+            bottom: -6,
+            left: 16,
+        },
+        'top-end': {
+            bottom: -6,
+            right: 16,
+        },
+        bottom: {
+            top: -6,
+            _web: {
+                left: '50%',
+                marginLeft: -6,
+            },
+        },
+        'bottom-start': {
+            top: -6,
+            left: 16,
+        },
+        'bottom-end': {
+            top: -6,
+            right: 16,
+        },
+        left: {
+            right: -6,
+            _web: {
+                top: '50%',
+                marginTop: -6,
+            },
+        },
+        'left-start': {
+            right: -6,
+            top: 16,
+        },
+        'left-end': {
+            right: -6,
+            bottom: 16,
+        },
+        right: {
+            left: -6,
+            _web: {
+                top: '50%',
+                marginTop: -6,
+            },
+        },
+        'right-start': {
+            left: -6,
+            top: 16,
+        },
+        'right-end': {
+            left: -6,
+            bottom: 16,
+        },
+    };
+}
+
+// Style creators for extension support
+function createContainerStyles(theme: Theme) {
+    return () => ({
+        backgroundColor: theme.colors.surface.primary,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: theme.colors.border.primary,
+        borderStyle: 'solid' as const,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.1,
+        shadowRadius: 12,
+        elevation: 8,
+        _web: {
+            border: `1px solid ${theme.colors.border.primary}`,
+            boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+            transition: 'opacity 150ms ease-out, transform 150ms ease-out',
+            transformOrigin: 'center center',
+        },
+    });
+}
+
+// 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 popoverStyles = StyleSheet.create((theme: Theme) => {
+    // Apply extensions to main visual elements
+
+    return applyExtensions('Popover', theme, {container: createContainerStyles(theme),
+        // Additional styles (merged from return)
+        // Minor utility styles (not extended)
+        content: {
+            padding: 16,
+        },
+        arrow: {
+            position: 'absolute',
+            width: 12,
+            height: 12,
+            backgroundColor: theme.colors.surface.primary,
+            variants: {
+                placement: createArrowPlacementVariants(theme),
+            },
+            _web: {
+                transform: 'rotate(45deg)',
+                boxShadow: '-2px 2px 4px rgba(0, 0, 0, 0.1)',
+            },
+        },
+        backdrop: {
+            flex: 1,
+            backgroundColor: 'transparent',
+        }});
+});

package/src/Popover/Popover.styles.tsx

@@ -1,90 +1,27 @@
+/**
+ * Popover styles using defineStyle.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles } from '@idealyst/theme';
-import { applyExtensions } from '../extensions/applyExtension';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme } from '@idealyst/theme';
 
-type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
-
-type PopoverVariants = {
-    placement: PopoverPlacement;
-}
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-export type ExpandedPopoverStyles = StylesheetStyles<keyof PopoverVariants>;
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-export type PopoverStylesheet = {
-    container: ExpandedPopoverStyles;
-    content: ExpandedPopoverStyles;
-    arrow: ExpandedPopoverStyles;
-    backdrop: ExpandedPopoverStyles;
-}
+type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
 
-function createArrowPlacementVariants(theme: Theme) {
-    return {
-        top: {
-            bottom: -6,
-            _web: {
-                left: '50%',
-                marginLeft: -6,
-            },
-        },
-        'top-start': {
-            bottom: -6,
-            left: 16,
-        },
-        'top-end': {
-            bottom: -6,
-            right: 16,
-        },
-        bottom: {
-            top: -6,
-            _web: {
-                left: '50%',
-                marginLeft: -6,
-            },
-        },
-        'bottom-start': {
-            top: -6,
-            left: 16,
-        },
-        'bottom-end': {
-            top: -6,
-            right: 16,
-        },
-        left: {
-            right: -6,
-            _web: {
-                top: '50%',
-                marginTop: -6,
-            },
-        },
-        'left-start': {
-            right: -6,
-            top: 16,
-        },
-        'left-end': {
-            right: -6,
-            bottom: 16,
-        },
-        right: {
-            left: -6,
-            _web: {
-                top: '50%',
-                marginTop: -6,
-            },
-        },
-        'right-start': {
-            left: -6,
-            top: 16,
-        },
-        'right-end': {
-            left: -6,
-            bottom: 16,
-        },
-    };
-}
+export type PopoverDynamicProps = {
+    placement?: PopoverPlacement;
+};
 
-// Style creators for extension support
-function createContainerStyles(theme: Theme) {
-    return () => ({
+/**
+ * Popover styles with placement variants.
+ */
+export const popoverStyles = defineStyle('Popover', (theme: Theme) => ({
+    container: (_props: PopoverDynamicProps) => ({
         backgroundColor: theme.colors.surface.primary,
         borderRadius: 8,
         borderWidth: 1,
@@ -101,39 +38,41 @@ function createContainerStyles(theme: Theme) {
             transition: 'opacity 150ms ease-out, transform 150ms ease-out',
             transformOrigin: 'center center',
         },
-    });
-}
+    }),
 
-// 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 popoverStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-    const extended = applyExtensions('Popover', theme, {
-        container: createContainerStyles(theme),
-    });
+    content: (_props: PopoverDynamicProps) => ({
+        padding: 16,
+    }),
 
-    return {
-        ...extended,
-        // Minor utility styles (not extended)
-        content: {
-            padding: 16,
-        },
-        arrow: {
-            position: 'absolute',
-            width: 12,
-            height: 12,
-            backgroundColor: theme.colors.surface.primary,
-            variants: {
-                placement: createArrowPlacementVariants(theme),
-            },
-            _web: {
-                transform: 'rotate(45deg)',
-                boxShadow: '-2px 2px 4px rgba(0, 0, 0, 0.1)',
+    arrow: (_props: PopoverDynamicProps) => ({
+        position: 'absolute' as const,
+        width: 12,
+        height: 12,
+        backgroundColor: theme.colors.surface.primary,
+        variants: {
+            placement: {
+                top: { bottom: -6, _web: { left: '50%', marginLeft: -6 } },
+                'top-start': { bottom: -6, left: 16 },
+                'top-end': { bottom: -6, right: 16 },
+                bottom: { top: -6, _web: { left: '50%', marginLeft: -6 } },
+                'bottom-start': { top: -6, left: 16 },
+                'bottom-end': { top: -6, right: 16 },
+                left: { right: -6, _web: { top: '50%', marginTop: -6 } },
+                'left-start': { right: -6, top: 16 },
+                'left-end': { right: -6, bottom: 16 },
+                right: { left: -6, _web: { top: '50%', marginTop: -6 } },
+                'right-start': { left: -6, top: 16 },
+                'right-end': { left: -6, bottom: 16 },
             },
         },
-        backdrop: {
-            flex: 1,
-            backgroundColor: 'transparent',
+        _web: {
+            transform: 'rotate(45deg)',
+            boxShadow: '-2px 2px 4px rgba(0, 0, 0, 0.1)',
         },
-    };
-});
+    }),
+
+    backdrop: (_props: PopoverDynamicProps) => ({
+        flex: 1,
+        backgroundColor: 'transparent' as const,
+    }),
+}));

package/src/Pressable/Pressable.styles.old.tsx

@@ -0,0 +1,27 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme } from '@idealyst/theme';
+import {
+  buildPaddingVariants,
+  buildPaddingVerticalVariants,
+  buildPaddingHorizontalVariants,
+} from '../utils/buildViewStyleVariants';
+import { applyExtensions } from '../extensions/applyExtension';
+
+// Style creators for extension support
+function createPressableStyles(theme: Theme) {
+    return () => ({
+        variants: {
+            // Spacing variants from PressableSpacingStyleProps
+            padding: buildPaddingVariants(theme),
+            paddingVertical: buildPaddingVerticalVariants(theme),
+            paddingHorizontal: buildPaddingHorizontalVariants(theme),
+        },
+    });
+}
+
+export const pressableStyles = StyleSheet.create((theme: Theme) => {
+    // Apply extensions to main visual elements
+    return applyExtensions('Pressable', theme, {
+        pressable: createPressableStyles(theme),
+    });
+});

package/src/Pressable/Pressable.styles.tsx

@@ -1,31 +1,39 @@
+/**
+ * Pressable styles using defineStyle with $iterator expansion.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme } from '@idealyst/theme';
-import {
-  buildPaddingVariants,
-  buildPaddingVerticalVariants,
-  buildPaddingHorizontalVariants,
-} from '../utils/buildViewStyleVariants';
-import { applyExtensions } from '../extensions/applyExtension';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme } from '@idealyst/theme';
+import { ViewStyleSize } from '../utils/viewStyleProps';
 
-// Style creators for extension support
-function createPressableStyles(theme: Theme) {
-    return () => ({
-        variants: {
-            // Spacing variants from PressableSpacingStyleProps
-            padding: buildPaddingVariants(theme),
-            paddingVertical: buildPaddingVerticalVariants(theme),
-            paddingHorizontal: buildPaddingHorizontalVariants(theme),
-        },
-    });
-}
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
+
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-export const pressableStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-    const extended = applyExtensions('Pressable', theme, {
-        pressable: createPressableStyles(theme),
-    });
+export type PressableDynamicProps = {
+    padding?: ViewStyleSize;
+    paddingVertical?: ViewStyleSize;
+    paddingHorizontal?: ViewStyleSize;
+};
 
-    return {
-        ...extended,
-    };
-});
+/**
+ * Pressable styles with spacing variants.
+ */
+export const pressableStyles = defineStyle('Pressable', (theme: Theme) => ({
+    pressable: (_props: PressableDynamicProps) => ({
+        variants: {
+            // $iterator expands for each view size
+            padding: {
+                padding: theme.sizes.$view.padding,
+            },
+            paddingVertical: {
+                paddingVertical: theme.sizes.$view.padding,
+            },
+            paddingHorizontal: {
+                paddingHorizontal: theme.sizes.$view.padding,
+            },
+        },
+    }),
+}));