@idealyst/components 1.1.6 → 1.1.8

package/src/Button/Button.styles.tsx

@@ -1,279 +1,125 @@
+/**
+ * Button styles using defineStyle with $iterator expansion.
+ *
+ * Dynamic style functions are used for intent/type combinations since
+ * the color depends on both values (compound logic).
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, Intent, Size, CompoundVariants} from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent, Size } from '@idealyst/theme';
 import { ButtonGradient } from './types';
 
+// 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 ButtonSize = Size;
-type ButtonIntent = Intent;
 type ButtonType = 'contained' | 'outlined' | 'text';
 
 export type ButtonVariants = {
     size: ButtonSize;
-    intent: ButtonIntent;
+    intent: Intent;
     type: ButtonType;
     disabled: boolean;
     gradient?: ButtonGradient;
 }
 
 /**
- * Create intent variants (placeholder, colors handled by compound variants)
+ * All dynamic props passed to button style functions.
  */
-function createIntentVariants(theme: Theme) {
-    const variants: any = {};
-    for (const intent in theme.intents) {
-        variants[intent] = {};
-    }
-    return variants;
-}
+export type ButtonDynamicProps = {
+    intent?: Intent;
+    type?: ButtonType;
+    size?: Size;
+    disabled?: boolean;
+    gradient?: ButtonGradient;
+};
 
 /**
- * Create type variants (structure only, colors handled by compound variants)
+ * Button styles with $iterator expansion for size variants.
+ *
+ * Intent/type combinations use dynamic functions with inlined theme accesses
+ * so Unistyles can trace all possible theme paths.
  */
-function createButtonTypeVariants(theme: Theme) {
-    return {
-        contained: {
-            borderWidth: 0,
-        },
-        outlined: {
-            borderWidth: 1,
-            borderStyle: 'solid' ,
-            backgroundColor: theme.colors.surface.primary,
-        },
-        text: {
-            borderWidth: 0,
-            backgroundColor: 'transparent',
+export const buttonStyles = defineStyle('Button', (theme: Theme) => ({
+    button: ({ intent = 'primary', type = 'contained' }: ButtonDynamicProps) => ({
+        boxSizing: 'border-box',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 8,
+        fontWeight: '600',
+        textAlign: 'center',
+        // Inline theme accesses so Unistyles can trace them
+        backgroundColor: type === 'contained'
+            ? theme.intents[intent].primary
+            : type === 'outlined'
+                ? theme.colors.surface.primary
+                : 'transparent',
+        borderColor: type === 'outlined'
+            ? theme.intents[intent].primary
+            : 'transparent',
+        borderWidth: type === 'outlined' ? 1 : 0,
+        borderStyle: type === 'outlined' ? 'solid' as const : undefined,
+        _web: {
+            display: 'flex',
+            transition: 'all 0.1s ease',
         },
-    } as const;
-}
-
-/**
- * Create compound variants for intent+type combinations
- */
-function createButtonCompoundVariants(theme: Theme): CompoundVariants<keyof ButtonVariants> {
-    const compoundVariants: CompoundVariants<keyof ButtonVariants> = [];
-
-    for (const intent in theme.intents) {
-        const intentValue = theme.intents[intent];
-
-        // Contained + intent
-        compoundVariants.push({
-            intent,
-            type: 'contained',
-            styles: {
-                backgroundColor: intentValue.primary,
-                color: intentValue.contrast,
+        variants: {
+            // $iterator expands for each button size
+            size: {
+                paddingVertical: theme.sizes.$button.paddingVertical,
+                paddingHorizontal: theme.sizes.$button.paddingHorizontal,
+                minHeight: theme.sizes.$button.minHeight,
             },
-        });
-
-        // Outlined + intent
-        compoundVariants.push({
-            intent,
-            type: 'outlined',
-            styles: {
-                color: intentValue.primary,
-                borderColor: intentValue.primary,
-            },
-        });
-
-        // Text + intent
-        compoundVariants.push({
-            intent,
-            type: 'text',
-            styles: {
-                color: intentValue.primary,
-            },
-        });
-    };
-
-    return compoundVariants;
-}
-
-/**
- * Create gradient variant styles for web
- * Applies a transparent overlay gradient over the intent background color
- */
-function createGradientVariants() {
-    return {
-        'darken': {
-            _web: {
-                backgroundImage: 'linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 0.15) 100%)',
+            disabled: {
+                true: { opacity: 0.6 },
+                false: { opacity: 1, _web: { cursor: 'pointer', _hover: { opacity: 0.90 }, _active: { opacity: 0.75 } } },
             },
-        },
-        'lighten': {
-            _web: {
-                backgroundImage: 'linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.2) 100%)',
+            gradient: {
+                darken: { _web: { backgroundImage: 'linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 0.15) 100%)' } },
+                lighten: { _web: { backgroundImage: 'linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.2) 100%)' } },
             },
         },
-    } as const;
-}
-
-/**
- * Create icon compound variants for intent+type combinations
- */
-function createIconCompoundVariants(theme: Theme): CompoundVariants<keyof ButtonVariants> {
-    const compoundVariants: CompoundVariants<keyof ButtonVariants> = [];
-
-    for (const intent in theme.intents) {
-        const intentValue = theme.intents[intent as Intent];
-
-        // Contained + intent
-        compoundVariants.push({
-            intent,
-            type: 'contained',
-            styles: { color: intentValue.contrast },
-        });
-
-        // Outlined + intent
-        compoundVariants.push({
-            intent,
-            type: 'outlined',
-            styles: { color: intentValue.primary },
-        });
-
-        // Text + intent
-        compoundVariants.push({
-            intent,
-            type: 'text',
-            styles: { color: intentValue.primary },
-        });
-    }
-
-    return compoundVariants;
-}
-
-/**
- * Create icon color variants dynamically based on theme, intent, and type
- */
-function createIconColorVariants(theme: Theme, intent: Intent) {
-    const intentValue = theme.intents[intent];
-
-    return {
-        contained: {
-            color: intentValue.contrast,
-        },
-        outlined: {
-            color: intentValue.primary,
-        },
-        text: {
-            color: intentValue.primary,
-        },
-    } as const;
-}
-
-/**
- * Generate button icon styles
- */
-const createButtonIconStyles = (theme: Theme) => {
-    return ({ intent }: Partial<ButtonVariants>) => {
-        return {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            variants: {
-                size: buildSizeVariants(theme, 'button', size => ({
-                    width: size.iconSize,
-                    height: size.iconSize,
-                })),
-                type: createIconColorVariants(theme, intent),
-            },
-        } as const;
-    };
-}
-
-/**
- * Generate button text styles
- */
-const createButtonTextStyles = (theme: Theme) => {
-    return ({ intent }: Partial<ButtonVariants>) => {
-        return {
-            fontWeight: '600',
-            textAlign: 'center',
-            variants: {
-                size: buildSizeVariants(theme, 'button', size => ({
-                    fontSize: size.fontSize,
-                })),
-                type: createIconColorVariants(theme, intent), // Text uses same colors as icons
-                disabled: {
-                    true: { opacity: 0.6 },
-                    false: { opacity: 1 },
-                },
+    }),
+    text: ({ intent = 'primary', type = 'contained' }: ButtonDynamicProps) => ({
+        fontWeight: '600',
+        textAlign: 'center',
+        // Inline: contained uses contrast, others use primary
+        color: type === 'contained'
+            ? theme.intents[intent].contrast
+            : theme.intents[intent].primary,
+        variants: {
+            size: {
+                fontSize: theme.sizes.$button.fontSize,
+                lineHeight: theme.sizes.$button.fontSize,
             },
-        } 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 buttonStyles = StyleSheet.create((theme: Theme) => {
-    return {
-        button: {
-            boxSizing: 'border-box',
-            alignItems: 'center',
-            justifyContent: 'center',
-            borderRadius: 8,
-            fontWeight: '600',
-            textAlign: 'center',
-            _web: {
-                display: 'flex',
-                transition: 'all 0.1s ease',
+            disabled: {
+                true: { opacity: 0.6 },
+                false: { opacity: 1 },
             },
-            variants: {
-                size: buildSizeVariants(theme, 'button', size => ({
-                    paddingVertical: size.paddingVertical,
-                    paddingHorizontal: size.paddingHorizontal,
-                    minHeight: size.minHeight,
-                })),
-                type: createButtonTypeVariants(theme),
-                disabled: {
-                    true: { opacity: 0.6 },
-                    false: { opacity: 1, _web: {
-                        cursor: 'pointer',
-                        _hover: {
-                            opacity: 0.90,
-                        },
-                        _active: {
-                            opacity: 0.75,
-                        },
-                    } },
-                } as const,
-                gradient: createGradientVariants(),
-            } as const,
-            compoundVariants: createButtonCompoundVariants(theme),
-        } as const,
-        icon: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            variants: {
-                size: buildSizeVariants(theme, 'button', size => ({
-                    width: size.iconSize,
-                    height: size.iconSize,
-                })),
-                intent: createIntentVariants(theme),
-            } as const,
-            compoundVariants: createIconCompoundVariants(theme),
-        } as const,
-        iconContainer: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: 4,
-        } as const,
-        text: {
-            fontWeight: '600',
-            textAlign: 'center',
-            variants: {
-                size: buildSizeVariants(theme, 'button', size => ({
-                    fontSize: size.fontSize,
-                })),
-                intent: createIntentVariants(theme),
-                disabled: {
-                    true: { opacity: 0.6 },
-                    false: { opacity: 1 },
-                },
+        },
+    }),
+    icon: ({ intent = 'primary', type = 'contained' }: ButtonDynamicProps) => ({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: type === 'contained'
+            ? theme.intents[intent].contrast
+            : theme.intents[intent].primary,
+        variants: {
+            size: {
+                width: theme.sizes.$button.iconSize,
+                height: theme.sizes.$button.iconSize,
             },
-            compoundVariants: createIconCompoundVariants(theme), // Text uses same colors as icons
-        } as const,
-    };
-});
+        },
+    }),
+    iconContainer: (_props: ButtonDynamicProps) => ({
+        display: 'flex' as const,
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        gap: 4,
+    }),
+}));

package/src/Button/Button.web.tsx

@@ -45,9 +45,8 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props: InternalButton
     accessibilityHasPopup,
   } = props;
 
+  // Apply variants for size, disabled, gradient
   buttonStyles.useVariants({
-    type,
-    intent,
     size,
     disabled,
     gradient,
@@ -55,8 +54,10 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props: InternalButton
 
   const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
-    e.stopPropagation();
+    // Only stop propagation if we have an onPress handler
+    // Otherwise, let clicks bubble up to parent handlers (e.g., Menu triggers)
     if (!disabled && onPress) {
+      e.stopPropagation();
       onPress();
     }
   };
@@ -105,10 +106,11 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props: InternalButton
     accessibilityHasPopup,
   ]);
 
-  // Compute dynamic styles
+  // Compute dynamic styles with all props for full flexibility
+  const dynamicProps = { intent, type, size, disabled, gradient };
   const buttonStyleArray = [
-    buttonStyles.button,
-    buttonStyles.text,
+    (buttonStyles.button as any)(dynamicProps),
+    (buttonStyles.text as any)(dynamicProps),
     style as any,
   ];
 
@@ -116,10 +118,10 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props: InternalButton
   const webProps = getWebProps(buttonStyleArray);
 
   // Icon container styles
-  const iconContainerProps = getWebProps([buttonStyles.iconContainer]);
+  const iconContainerProps = getWebProps([(buttonStyles.iconContainer as any)(dynamicProps)]);
 
   // Icon styles with dynamic function
-  const iconStyleArray = [buttonStyles.icon];
+  const iconStyleArray = [(buttonStyles.icon as any)(dynamicProps)];
   const iconProps = getWebProps(iconStyleArray);
 
   // Helper to render icon

package/src/Card/Card.native.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef, ComponentRef, useMemo } from 'react';
 import { View, Pressable } from 'react-native';
+import { useUnistyles } from 'react-native-unistyles';
 import { CardProps } from './types';
 import { cardStyles } from './Card.styles';
 import { getNativeInteractiveAccessibilityProps } from '../utils/accessibility';
@@ -42,12 +43,12 @@ const Card = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pressabl
       accessibilityPressed,
     });
   }, [accessibilityLabel, accessibilityHint, accessibilityDisabled, disabled, accessibilityHidden, accessibilityRole, clickable, accessibilityPressed]);
+
   // Apply variants
   cardStyles.useVariants({
-    clickable,
-    radius,
     type,
-    intent,
+    radius,
+    clickable,
     disabled,
     gap,
     padding,
@@ -58,13 +59,16 @@ const Card = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pressabl
     marginHorizontal,
   });
 
+  // Get card style
+  const cardStyle = (cardStyles.card as any)({});
+
   // Use appropriate component based on clickable state
   const Component = clickable ? Pressable : View;
 
   const componentProps = {
     ref,
     nativeID: id,
-    style: [cardStyles.card, style],
+    style: [cardStyle, style],
     testID,
     ...nativeA11yProps,
     ...(clickable && {

package/src/Card/Card.styles.old.tsx

@@ -0,0 +1,160 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, Intent, Radius } from '@idealyst/theme';
+import {
+  buildGapVariants,
+  buildPaddingVariants,
+  buildPaddingVerticalVariants,
+  buildPaddingHorizontalVariants,
+  buildMarginVariants,
+  buildMarginVerticalVariants,
+  buildMarginHorizontalVariants,
+} from '../utils/buildViewStyleVariants';
+import { ViewStyleSize } from '../utils/viewStyleProps';
+import { applyExtensions } from '../extensions/applyExtension';
+
+type CardType = 'outlined' | 'elevated' | 'filled';
+type CardRadius = Radius;
+type CardIntent = Intent | 'info' | 'neutral';
+
+/**
+ * Get border radius value from theme
+ */
+export function getCardBorderRadius(theme: Theme, radius: CardRadius): number {
+  return theme.radii[radius];
+}
+
+export type CardVariants = {
+  type: CardType;
+  radius: CardRadius;
+  intent: CardIntent;
+  clickable: boolean;
+  disabled: boolean;
+  // Spacing variants from ContainerStyleProps
+  gap: ViewStyleSize;
+  padding: ViewStyleSize;
+  paddingVertical: ViewStyleSize;
+  paddingHorizontal: ViewStyleSize;
+  margin: ViewStyleSize;
+  marginVertical: ViewStyleSize;
+  marginHorizontal: ViewStyleSize;
+};
+
+type CardDynamicProps = {
+  intent?: CardIntent;
+  type?: CardType;
+};
+
+/**
+ * Get the border color based on intent (only used for outlined type)
+ */
+function getBorderColor(theme: Theme, intent: CardIntent): string {
+  if (intent === 'info' || intent === 'neutral') {
+    return theme.colors.border.secondary;
+  }
+  if (intent in theme.intents) {
+    return theme.intents[intent as Intent].primary;
+  }
+  return theme.colors.border.secondary;
+}
+
+/**
+ * Get type-specific styles
+ */
+function getTypeStyles(theme: Theme, type: CardType, intent: CardIntent) {
+  switch (type) {
+    case 'outlined':
+      return {
+        backgroundColor: 'transparent',
+        borderWidth: 1,
+        borderStyle: 'solid' as const,
+        borderColor: getBorderColor(theme, intent),
+      };
+    case 'elevated':
+      return {
+        backgroundColor: theme.colors.surface.primary,
+        borderWidth: 0,
+        ...theme.shadows.md,
+      };
+    case 'filled':
+      return {
+        backgroundColor: theme.colors.surface.secondary,
+        borderWidth: 0,
+      };
+    default:
+      return {};
+  }
+}
+
+/**
+ * Create dynamic card styles
+ */
+function createCardStyles(theme: Theme) {
+  return ({ intent = 'neutral', type = 'elevated' }: CardDynamicProps) => {
+    const typeStyles = getTypeStyles(theme, type, intent);
+    return {
+      ...typeStyles,
+      position: 'relative',
+      overflow: 'hidden',
+      variants: {
+        radius: {
+          none: { borderRadius: 0 },
+          xs: { borderRadius: 2 },
+          sm: { borderRadius: 4 },
+          md: { borderRadius: 8 },
+          lg: { borderRadius: 12 },
+          xl: { borderRadius: 16 },
+        },
+        clickable: {
+          true: {
+            _web: {
+              cursor: 'pointer',
+              transition: 'all 0.2s ease',
+              _hover: {
+                transform: 'translateY(-2px)',
+                boxShadow:
+                  '0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06)',
+              },
+            },
+          },
+          false: {
+            _web: {
+              cursor: 'default',
+            },
+          },
+        },
+        disabled: {
+          true: {
+            opacity: 0.6,
+            _web: {
+              cursor: 'not-allowed',
+            },
+          },
+          false: {
+            opacity: 1,
+          },
+        },
+        // 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: {
+        display: 'flex',
+        flexDirection: 'column',
+        boxSizing: 'border-box',
+      },
+    } 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 cardStyles = StyleSheet.create((theme: Theme) => {
+  return applyExtensions('Card', theme, {
+    card: createCardStyles(theme),
+  });
+});