@idealyst/components 1.1.7 → 1.1.8

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,88 @@ export type ButtonDynamicProps = {
 };
 
 /**
- * Get button background 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 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
- */
-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',
+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
+            size: {
+                paddingVertical: theme.sizes.$button.paddingVertical,
+                paddingHorizontal: theme.sizes.$button.paddingHorizontal,
+                minHeight: theme.sizes.$button.minHeight,
             },
-            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 } } },
-                },
-                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%)' } },
-                },
+            disabled: {
+                true: { opacity: 0.6 },
+                false: { opacity: 1, _web: { cursor: 'pointer', _hover: { opacity: 0.90 }, _active: { opacity: 0.75 } } },
             },
-        } 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 },
-                },
+            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 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,
-                })),
+        },
+    }),
+    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;
-    };
-}
-
-/**
- * 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) => ({
+            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/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),
+  });
+});