@idealyst/components 1.1.7 → 1.1.9

package/src/Button/Button.native.tsx

@@ -5,6 +5,7 @@ import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
 import { buttonStyles } from './Button.styles';
 import { ButtonProps } from './types';
 import { getNativeInteractiveAccessibilityProps } from '../utils/accessibility';
+import { useUnistyles } from 'react-native-unistyles';
 
 const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((props, ref) => {
   const {
@@ -71,24 +72,6 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
   } as const;
   const iconSize = iconSizeMap[size];
 
-  // Helper to render icon - uses the icon styles from buttonStyles
-  const renderIcon = (icon: string | React.ReactNode) => {
-    if (typeof icon === 'string') {
-      // Render MaterialCommunityIcons with explicit size prop
-      // The icon styles provide the correct color based on dynamic styles
-      return (
-        <MaterialCommunityIcons
-          name={icon}
-          size={iconSize}
-          style={iconStyle}
-        />
-      );
-    } else if (isValidElement(icon)) {
-      // Render custom component as-is
-      return icon;
-    }
-    return null;
-  };
 
   // Use children if available, otherwise use title
   const buttonContent = children || title;
@@ -199,12 +182,22 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
     <TouchableOpacity {...touchableProps as any}>
       {renderGradientLayer()}
       {hasIcons ? (
-        <View style={iconContainerStyle}>
-          {leftIcon && renderIcon(leftIcon)}
+        <View  style={iconContainerStyle}>
+          {leftIcon && 
+          <MaterialCommunityIcons
+            name={leftIcon}
+            size={iconSize}
+            style={iconStyle}
+        />}
           <Text style={textStyle}>
             {buttonContent}
           </Text>
-          {rightIcon && renderIcon(rightIcon)}
+          {rightIcon &&    
+          <MaterialCommunityIcons
+            name={rightIcon}
+            size={iconSize}
+            style={iconStyle}
+        />}
         </View>
       ) : (
         <Text style={textStyle}>

package/src/Button/Button.styles.tsx

@@ -1,8 +1,19 @@
+/**
+ * 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 } 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';
-import { applyExtensions } from '../extensions/applyExtension';
+
+// 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 ButtonType = 'contained' | 'outlined' | 'text';
@@ -17,8 +28,6 @@ export type ButtonVariants = {
 
 /**
  * All dynamic props passed to button style functions.
- * Every style function receives all props for maximum flexibility
- * when using extensions or replacements.
  */
 export type ButtonDynamicProps = {
     intent?: Intent;
@@ -29,149 +38,103 @@ export type ButtonDynamicProps = {
 };
 
 /**
- * Get button background color based on intent and type
- */
-function getButtonBackgroundColor(theme: Theme, intent: Intent, type: ButtonType): string {
-    if (type === 'contained') {
-        return theme.intents[intent].primary;
-    }
-    if (type === 'outlined') {
-        return theme.colors.surface.primary;
-    }
-    return 'transparent';
-}
-
-/**
- * Get button border color based on intent and type
+ * 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 getButtonBorderColor(theme: Theme, intent: Intent, type: ButtonType): string {
-    if (type === 'outlined') {
-        return theme.intents[intent].primary;
-    }
-    return 'transparent';
-}
-
-/**
- * Get text/icon color based on intent and type
- */
-function getTextColor(theme: Theme, intent: Intent, type: ButtonType): string {
-    if (type === 'contained') {
-        return theme.intents[intent].contrast;
-    }
-    return theme.intents[intent].primary;
-}
-
-/**
- * Create dynamic button styles
- * Receives all ButtonDynamicProps for flexibility in extensions/replacements
- */
-function createButtonStyles(theme: Theme) {
-    return (props: ButtonDynamicProps) => {
-        const { intent = 'primary', type = 'contained' } = props;
-        return {
-            boxSizing: 'border-box',
-            alignItems: 'center',
-            justifyContent: 'center',
-            borderRadius: 8,
-            fontWeight: '600',
-            textAlign: 'center',
-            backgroundColor: getButtonBackgroundColor(theme, intent, type),
-            borderColor: getButtonBorderColor(theme, intent, type),
-            borderWidth: type === 'outlined' ? 1 : 0,
-            borderStyle: type === 'outlined' ? 'solid' as const : undefined,
-            _web: {
-                display: 'flex',
-                transition: 'all 0.1s ease',
-            },
-            variants: {
-                size: buildSizeVariants(theme, 'button', size => ({
-                    paddingVertical: size.paddingVertical,
-                    paddingHorizontal: size.paddingHorizontal,
-                    minHeight: size.minHeight,
-                })),
-                disabled: {
-                    true: { opacity: 0.6 },
-                    false: { opacity: 1, _web: { cursor: 'pointer', _hover: { opacity: 0.90 }, _active: { opacity: 0.75 } } },
+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',
+        },
+        variants: {
+            // $iterator expands for each button size
+            type: {
+                contained: {
+                    backgroundColor: theme.intents[intent].primary,
+                    borderColor: 'transparent',
                 },
-                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%)' } },
+                outlined: {
+                    backgroundColor: 'transparent',
+                    borderColor: theme.intents[intent].primary,
                 },
+                text: {
+                    backgroundColor: 'transparent',
+                    borderColor: 'transparent',
+                    borderWidth: 0,
+                }
             },
-        } as const;
-    };
-}
-
-/**
- * Create dynamic text styles
- * Receives all ButtonDynamicProps for flexibility in extensions/replacements
- */
-function createTextStyles(theme: Theme) {
-    return (props: ButtonDynamicProps) => {
-        const { intent = 'primary', type = 'contained' } = props;
-        return {
-            fontWeight: '600',
-            textAlign: 'center',
-            color: getTextColor(theme, intent, type),
-            variants: {
-                size: buildSizeVariants(theme, 'button', size => ({
-                    fontSize: size.fontSize,
-                    lineHeight: size.fontSize,
-                })),
-                disabled: {
-                    true: { opacity: 0.6 },
-                    false: { opacity: 1 },
-                },
+            size: {
+                paddingVertical: theme.sizes.$button.paddingVertical,
+                paddingHorizontal: theme.sizes.$button.paddingHorizontal,
+                minHeight: theme.sizes.$button.minHeight,
             },
-        } as const;
-    };
-}
-
-/**
- * Create dynamic icon styles
- * Receives all ButtonDynamicProps for flexibility in extensions/replacements
- */
-function createIconStyles(theme: Theme) {
-    return (props: ButtonDynamicProps) => {
-        const { intent = 'primary', type = 'contained' } = props;
-        return {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            color: getTextColor(theme, intent, type),
-            variants: {
-                size: buildSizeVariants(theme, 'button', size => ({
-                    width: size.iconSize,
-                    height: size.iconSize,
-                })),
+            disabled: {
+                true: { opacity: 0.6 },
+                false: { opacity: 1, _web: { cursor: 'pointer', _hover: { opacity: 0.90 }, _active: { opacity: 0.75 } } },
             },
-        } as const;
-    };
-}
-
-/**
- * Create icon container styles.
- * Receives all ButtonDynamicProps for flexibility in extensions/replacements.
- * NOTE: All styles must be dynamic functions (not static objects) to avoid
- * Babel transform issues with Unistyles on native.
- */
-function createIconContainerStyles() {
-    return (_props: ButtonDynamicProps) => ({
+            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%)' } },
+            },
+        },
+    }),
+    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,
+            },
+            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,
+            },
+        },
+    }),
+    iconContainer: (_props: ButtonDynamicProps) => ({
         display: 'flex' as const,
         flexDirection: 'row' as const,
         alignItems: 'center' as const,
         justifyContent: 'center' as const,
         gap: 4,
-    });
-}
-
-// Styles use dynamic functions for intent/type to support theme extensions
-// applyExtensions handles both replacements and extensions automatically
-export const buttonStyles = StyleSheet.create((theme: Theme) => {
-    return applyExtensions('Button', theme, {
-        button: createButtonStyles(theme),
-        text: createTextStyles(theme),
-        icon: createIconStyles(theme),
-        iconContainer: createIconContainerStyles(),
-    });
-});
+    }),
+}));

package/src/Button/Button.web.tsx

@@ -6,14 +6,7 @@ import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebInteractiveAriaProps, generateAccessibilityId } from '../utils/accessibility';
 
-// Extended props to include path props added by Babel plugin
-interface InternalButtonProps extends ButtonProps {
-  leftIconPath?: string;
-  rightIconPath?: string;
-}
-
-const Button = forwardRef<HTMLButtonElement, ButtonProps>((props: InternalButtonProps, ref) => {
-
+const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const {
     title,
     children,
@@ -25,8 +18,6 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props: InternalButton
     gradient,
     leftIcon,
     rightIcon,
-    leftIconPath,
-    rightIconPath,
     style,
     testID,
     id,
@@ -124,14 +115,13 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props: InternalButton
   const iconStyleArray = [(buttonStyles.icon as any)(dynamicProps)];
   const iconProps = getWebProps(iconStyleArray);
 
-  // Helper to render icon
-  const renderIcon = (icon: string | React.ReactNode, iconPath?: string) => {
-    if (typeof icon === 'string' && iconPath) {
-      // Render IconSvg directly with the path from Babel plugin
-      // Don't pass size - let the style control the dimensions
+  // Helper to render icon - now uses icon name directly
+  const renderIcon = (icon: string | React.ReactNode) => {
+    if (typeof icon === 'string') {
+      // Render IconSvg with the icon name - registry lookup happens inside
       return (
         <IconSvg
-          path={iconPath}
+          name={icon}
           {...iconProps}
           aria-label={icon}
         />
@@ -164,9 +154,9 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props: InternalButton
     >
       {hasIcons ? (
         <div {...iconContainerProps}>
-          {leftIcon && renderIcon(leftIcon, leftIconPath)}
+          {leftIcon && renderIcon(leftIcon)}
           {buttonContent}
-          {rightIcon && renderIcon(rightIcon, rightIconPath)}
+          {rightIcon && renderIcon(rightIcon)}
         </div>
       ) : (
         buttonContent
@@ -177,4 +167,4 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props: InternalButton
 
 Button.displayName = 'Button';
 
-export default Button; 
+export default Button;

package/src/Card/Card.native.tsx

@@ -2,7 +2,7 @@ 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, getCardBorderRadius } from './Card.styles';
+import { cardStyles } from './Card.styles';
 import { getNativeInteractiveAccessibilityProps } from '../utils/accessibility';
 
 const Card = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pressable>, CardProps>(({
@@ -44,11 +44,10 @@ const Card = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pressabl
     });
   }, [accessibilityLabel, accessibilityHint, accessibilityDisabled, disabled, accessibilityHidden, accessibilityRole, clickable, accessibilityPressed]);
 
-  // Get theme for radii values
-  const { theme } = useUnistyles();
-
-  // Apply variants (for spacing only - radius is applied directly below)
+  // Apply variants
   cardStyles.useVariants({
+    type,
+    radius,
     clickable,
     disabled,
     gap,
@@ -60,11 +59,8 @@ const Card = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pressabl
     marginHorizontal,
   });
 
-  // Get dynamic card style with type and intent props
-  const cardStyle = (cardStyles.card as any)({ type, intent });
-
-  // Get border radius from theme - variants don't work with dynamic styles on iOS
-  const borderRadius = getCardBorderRadius(theme, radius);
+  // Get card style
+  const cardStyle = (cardStyles.card as any)({});
 
   // Use appropriate component based on clickable state
   const Component = clickable ? Pressable : View;
@@ -72,7 +68,7 @@ const Card = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pressabl
   const componentProps = {
     ref,
     nativeID: id,
-    style: [cardStyle, { borderRadius }, 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),
+  });
+});