@idealyst/components 1.1.6 → 1.1.8

package/src/Menu/MenuItem.styles.tsx

@@ -1,119 +1,86 @@
+/**
+ * MenuItem styles using defineStyle with dynamic props.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme } from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent, Size } from '@idealyst/theme';
 
-// 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) => {
-    return {
-        item: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            backgroundColor: 'transparent',
+// 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 type MenuItemDynamicProps = {
+    size?: Size;
+    intent?: Intent;
+    disabled?: boolean;
+};
+
+/**
+ * MenuItem styles with intent/disabled handling.
+ */
+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,
+        };
+
+        return {
+            flexDirection: 'row' as const,
+            alignItems: 'center' as const,
+            backgroundColor: 'transparent' as const,
             borderRadius: 4,
             minHeight: 44,
+            opacity: disabled ? 0.5 : 1,
+            variants: {
+                size: {
+                    paddingVertical: theme.sizes.$menu.paddingVertical,
+                    paddingHorizontal: theme.sizes.$menu.paddingHorizontal,
+                },
+            },
             _web: {
-                cursor: 'pointer',
+                display: 'flex',
+                width: '100%',
+                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,
             },
-            variants: {
-                size: buildSizeVariants(theme, 'menu', (size) => ({
-                    paddingVertical: size.paddingVertical,
-                    paddingHorizontal: size.paddingHorizontal,
-                })),
-                disabled: {
-                    true: {
-                        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,
-                            },
-                        },
-                    },
-                },
+        } as const;
+    },
+
+    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,
             },
-            compoundVariants: [
-                {
-                    disabled: true,
-                    styles: {
-                        _web: {
-                            _hover: {
-                                backgroundColor: 'transparent',
-                            },
-                        },
-                    },
-                },
-            ],
         },
-        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',
         },
-        label: {
-            flex: 1,
-            color: theme.colors.text.primary,
-            variants: {
-                size: buildSizeVariants(theme, 'menu', (size) => ({
-                    fontSize: size.labelFontSize,
-                })),
+    }),
+
+    label: (_props: MenuItemDynamicProps) => ({
+        flex: 1,
+        color: theme.colors.text.primary,
+        variants: {
+            size: {
+                fontSize: theme.sizes.$menu.labelFontSize,
             },
         },
-    };
-});
+    }),
+}));

package/src/Menu/MenuItem.web.tsx

@@ -14,16 +14,20 @@ 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]);
-  const iconProps = getWebProps([menuItemStyles.icon]);
-  const labelProps = getWebProps([menuItemStyles.label]);
+  // 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([iconStyle]);
+  const labelProps = getWebProps([labelStyle]);
 
   const renderIcon = () => {
     if (!item.icon) return null;
@@ -31,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}
         />
       );
@@ -48,10 +54,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"

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, 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,97 +1,32 @@
+/**
+ * Popover styles using defineStyle.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles} from '@idealyst/theme';
+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';
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-type PopoverVariants = {
-    placement: PopoverPlacement;
-}
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-export type ExpandedPopoverStyles = StylesheetStyles<keyof PopoverVariants>;
+type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
 
-export type PopoverStylesheet = {
-    container: ExpandedPopoverStyles;
-    content: ExpandedPopoverStyles;
-    arrow: ExpandedPopoverStyles;
-    backdrop: ExpandedPopoverStyles;
-}
+export type PopoverDynamicProps = {
+    placement?: PopoverPlacement;
+};
 
-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,
-        },
-    };
-}
-
-// 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 popoverStyles = StyleSheet.create((theme: Theme) => {
-  return {
-    container: {
+/**
+ * Popover styles with placement variants.
+ */
+export const popoverStyles = defineStyle('Popover', (theme: Theme) => ({
+    container: (_props: PopoverDynamicProps) => ({
         backgroundColor: theme.colors.surface.primary,
         borderRadius: 8,
         borderWidth: 1,
         borderColor: theme.colors.border.primary,
-        borderStyle: 'solid',
+        borderStyle: 'solid' as const,
         shadowColor: '#000',
         shadowOffset: { width: 0, height: 4 },
         shadowOpacity: 0.1,
@@ -103,26 +38,41 @@ export const popoverStyles = StyleSheet.create((theme: Theme) => {
             transition: 'opacity 150ms ease-out, transform 150ms ease-out',
             transformOrigin: 'center center',
         },
-    },
-    content: {
+    }),
+
+    content: (_props: PopoverDynamicProps) => ({
         padding: 16,
-    },
-    arrow: {
-        position: 'absolute',
+    }),
+
+    arrow: (_props: PopoverDynamicProps) => ({
+        position: 'absolute' as const,
         width: 12,
         height: 12,
         backgroundColor: theme.colors.surface.primary,
         variants: {
-            placement: createArrowPlacementVariants(theme),
+            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 },
+            },
         },
         _web: {
             transform: 'rotate(45deg)',
             boxShadow: '-2px 2px 4px rgba(0, 0, 0, 0.1)',
         },
-    },
-    backdrop: {
+    }),
+
+    backdrop: (_props: PopoverDynamicProps) => ({
         flex: 1,
-        backgroundColor: 'transparent',
-    },
-  };
-});
+        backgroundColor: 'transparent' as const,
+    }),
+}));

package/src/Popover/Popover.web.tsx

@@ -44,7 +44,7 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(({
 
   popoverStyles.useVariants({});
 
-  const containerProps = getWebProps([popoverStyles.container]);
+  const containerProps = getWebProps([(popoverStyles.container as any)({})]);
   const contentProps = getWebProps([popoverStyles.content]);
 
   const mergedPopoverRef = useMergeRefs(ref, popoverRef);

package/src/Pressable/Pressable.native.tsx

@@ -26,6 +26,8 @@ const Pressable = forwardRef<View, PressableProps>(({
     paddingHorizontal,
   });
 
+  const pressableStyle = (pressableStyles.pressable as any)({});
+
   return (
     <TouchableWithoutFeedback
       onPress={disabled ? undefined : onPress}
@@ -35,7 +37,7 @@ const Pressable = forwardRef<View, PressableProps>(({
       testID={testID}
       accessibilityLabel={accessibilityLabel}
     >
-      <View ref={ref} nativeID={id} style={[pressableStyles.pressable, style]}>
+      <View ref={ref} nativeID={id} style={[pressableStyle, style]}>
         {children}
       </View>
     </TouchableWithoutFeedback>

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),
+    });
+});