@idealyst/components 1.0.83 → 1.0.84

package/src/Card/Card.native.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
+import React, { forwardRef, ComponentRef } from 'react';
 import { View, Pressable } from 'react-native';
 import { CardProps } from './types';
 import { cardStyles } from './Card.styles';
 
-const Card: React.FC<CardProps> = ({
+const Card = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pressable>, CardProps>(({
   children,
-  variant = 'default',
-  padding = 'medium',
-  radius = 'medium',
+  type = 'default',
+  padding = 'md',
+  radius = 'md',
   intent = 'neutral',
   clickable = false,
   onPress,
@@ -15,21 +15,22 @@ const Card: React.FC<CardProps> = ({
   style,
   testID,
   accessibilityLabel,
-}) => {
+}, ref) => {
   // Apply variants
   cardStyles.useVariants({
-    variant: variant as any,
-    padding,
+    clickable,
     radius,
+    type,
+    padding,
     intent,
-    clickable,
     disabled,
   });
-
+  
   // Use appropriate component based on clickable state
   const Component = clickable ? Pressable : View;
 
   const componentProps = {
+    ref,
     style: [cardStyles.card, style],
     testID,
     accessibilityLabel,
@@ -47,6 +48,8 @@ const Card: React.FC<CardProps> = ({
       {children}
     </Component>
   );
-};
+});
+
+Card.displayName = 'Card';
 
 export default Card; 

package/src/Card/Card.styles.tsx

@@ -1,240 +1,166 @@
 import { StyleSheet } from 'react-native-unistyles';
+import { Theme, Intent, CompoundVariants } from '@idealyst/theme';
 
-export const cardStyles = StyleSheet.create((theme) => ({
-  card: {
-    backgroundColor: theme.colors?.surface?.primary || '#ffffff',
-    position: 'relative',
-    overflow: 'hidden',
-    
-    variants: {
-      variant: {
+type CardType = 'default' | 'outlined' | 'elevated' | 'filled';
+type CardPadding = 'none' | 'sm' | 'md' | 'lg';
+type CardRadius = 'none' | 'sm' | 'md' | 'lg';
+type CardIntent = Intent | 'info' | 'neutral';
+
+export type CardVariants = {
+    type: CardType;
+    padding: CardPadding;
+    radius: CardRadius;
+    intent: CardIntent;
+    clickable: boolean;
+    disabled: boolean;
+}
+
+/**
+ * Create type variants (structure only, colors handled by compound variants)
+ */
+function createTypeVariants(theme: Theme) {
+    return {
         default: {
-          backgroundColor: theme.colors?.surface?.primary || '#ffffff',
-          // React Native border properties
-          borderWidth: 1,
-          borderColor: theme.colors?.border?.primary || theme.palettes?.gray?.[200] || '#e5e7eb',
-          // Web-specific border override
-          _web: {
-            border: `1px solid ${theme.colors?.border?.primary || theme.palettes?.gray?.[200] || '#e5e7eb'}`,
-          },
+            backgroundColor: theme.colors.surface.primary,
+            borderWidth: 1,
+            borderStyle: 'solid' as const,
         },
         outlined: {
-          backgroundColor: 'transparent',
-          // React Native border properties
-          borderWidth: 1,
-          borderColor: theme.colors?.border?.primary || theme.palettes?.gray?.[300] || '#d1d5db',
-          // Web-specific border override
-          _web: {
-            border: `1px solid ${theme.colors?.border?.primary || theme.palettes?.gray?.[300] || '#d1d5db'}`,
-          },
+            backgroundColor: 'transparent',
+            borderWidth: 1,
+            borderStyle: 'solid' as const,
         },
         elevated: {
-          backgroundColor: theme.colors?.surface?.primary || '#ffffff',
-          borderWidth: 0,
-          _web: {
-            border: 'none',
-          },
+            backgroundColor: theme.colors.surface.primary,
+            borderWidth: 0,
+            ...theme.shadows.md,
         },
         filled: {
-          backgroundColor: theme.colors?.surface?.secondary || theme.palettes?.gray?.[50] || '#f9fafb',
-          borderWidth: 0,
-          _web: {
-            border: 'none',
-          },
-        },
-      },
-      padding: {
-        none: {
-          padding: 0,
-        },
-        small: {
-          padding: theme.spacing?.sm || 8,
-        },
-        medium: {
-          padding: theme.spacing?.md || 12,
-        },
-        large: {
-          padding: theme.spacing?.lg || 16,
-        },
-      },
-      radius: {
-        none: {
-          borderRadius: 0,
-        },
-        small: {
-          borderRadius: theme.borderRadius?.sm || 4,
-        },
-        medium: {
-          borderRadius: theme.borderRadius?.md || 8,
-        },
-        large: {
-          borderRadius: theme.borderRadius?.lg || 12,
-        },
-      },
-      intent: {
-        neutral: {
-          // Default colors handled by variant
-        },
-        primary: {
-          // Intent colors applied via compound variants
-        },
-        success: {
-          // Intent colors applied via compound variants  
-        },
-        error: {
-          // Intent colors applied via compound variants
-        },
-        warning: {
-          // Intent colors applied via compound variants
-        },
-        info: {
-          // Intent colors applied via compound variants
-        },
-      },
-      clickable: {
-        true: {
-          cursor: 'pointer',
-          transition: 'all 0.2s ease',
-        },
-        false: {
-          cursor: 'default',
-        },
-      },
-      disabled: {
-        true: {
-          opacity: 0.6,
-          cursor: 'not-allowed',
-        },
-        false: {
-          opacity: 1,
-        },
-      },
-    },
-    
-    compoundVariants: [
-      // Elevated variant with shadows
-      {
-        variant: 'elevated',
-        styles: {
-          shadowColor: theme.shadows?.md?.shadowColor || '#000',
-          shadowOffset: theme.shadows?.md?.shadowOffset || { width: 0, height: 4 },
-          shadowOpacity: theme.shadows?.md?.shadowOpacity || 0.1,
-          shadowRadius: theme.shadows?.md?.shadowRadius || 8,
-          elevation: theme.shadows?.md?.elevation || 4,
-          // More subtle shadow for web
-          _web: {
-            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04)',
-          },
-        },
-      },
-      // Intent color combinations for outlined variant
-      {
-        variant: 'outlined',
-        intent: 'primary',
-        styles: {
-          borderColor: theme.intents?.primary?.main || '#3b82f6',
-          _web: {
-            border: `1px solid ${theme.intents?.primary?.main || '#3b82f6'}`,
-          },
+            backgroundColor: theme.colors.surface.secondary,
+            borderWidth: 0,
         },
-      },
-      {
-        variant: 'outlined',
-        intent: 'success',
-        styles: {
-          borderColor: theme.intents?.success?.main || '#22c55e',
-          _web: {
-            border: `1px solid ${theme.intents?.success?.main || '#22c55e'}`,
-          },
-        },
-      },
-      {
-        variant: 'outlined',
-        intent: 'error',
-        styles: {
-          borderColor: theme.intents?.error?.main || '#ef4444',
-          _web: {
-            border: `1px solid ${theme.intents?.error?.main || '#ef4444'}`,
-          },
-        },
-      },
-      {
-        variant: 'outlined',
-        intent: 'warning',
-        styles: {
-          borderColor: theme.intents?.warning?.main || '#f59e0b',
-          _web: {
-            border: `1px solid ${theme.intents?.warning?.main || '#f59e0b'}`,
-          },
-        },
-      },
-      {
-        variant: 'outlined',
+    } as const;
+}
+
+/**
+ * Create compound variants for type + intent combinations
+ */
+function createCardCompoundVariants(theme: Theme) {
+    const compoundVariants: CompoundVariants<keyof CardVariants> = [];
+
+    // Add intent-based border colors for default and outlined types
+    for (const intent in theme.intents) {
+        const intentValue = theme.intents[intent as Intent];
+
+        // Default + intent
+        compoundVariants.push({
+            intent,
+            type: 'default',
+            styles: {
+                borderColor: intentValue.primary,
+            },
+        });
+
+        // Outlined + intent
+        compoundVariants.push({
+            intent,
+            type: 'outlined',
+            styles: {
+                borderColor: intentValue.primary,
+            },
+        });
+    }
+
+    // Add special intents (info, neutral)
+    compoundVariants.push({
         intent: 'info',
+        type: 'default',
         styles: {
-          borderColor: theme.intents?.info?.main || '#06b6d4',
-          _web: {
-            border: `1px solid ${theme.intents?.info?.main || '#06b6d4'}`,
-          },
-        },
-      },
-      // Intent color combinations for filled variant
-      {
-        variant: 'filled',
-        intent: 'primary',
-        styles: {
-          backgroundColor: theme.intents?.primary?.container || theme.palettes?.blue?.[50] || '#eff6ff',
+            borderColor: theme.colors.border.secondary,
         },
-      },
-      {
-        variant: 'filled',
-        intent: 'success',
+    });
+    compoundVariants.push({
+        intent: 'info',
+        type: 'outlined',
         styles: {
-          backgroundColor: theme.intents?.success?.container || theme.palettes?.green?.[50] || '#f0fdf4',
+            borderColor: theme.colors.border.secondary,
         },
-      },
-      {
-        variant: 'filled',
-        intent: 'error',
+    });
+    compoundVariants.push({
+        intent: 'neutral',
+        type: 'default',
         styles: {
-          backgroundColor: theme.intents?.error?.container || theme.palettes?.red?.[50] || '#fef2f2',
+            borderColor: theme.colors.border.secondary,
         },
-      },
-      {
-        variant: 'filled',
-        intent: 'warning',
+    });
+    compoundVariants.push({
+        intent: 'neutral',
+        type: 'outlined',
         styles: {
-          backgroundColor: theme.intents?.warning?.container || theme.palettes?.amber?.[50] || '#fffbeb',
+            borderColor: theme.colors.border.secondary,
         },
-      },
-      {
-        variant: 'filled',
-        intent: 'info',
-        styles: {
-          backgroundColor: theme.intents?.info?.container || theme.palettes?.cyan?.[50] || '#ecfeff',
-        },
-      },
-    ],
-    
-    _web: {
-      display: 'flex',
-      flexDirection: 'column',
-      boxSizing: 'border-box',
-      _hover: {
-        // Hover effects for clickable cards
-      },
-    },
-  },
-}));
+    });
+
+    return compoundVariants;
+}
 
-// Add hover effects for clickable cards
-export const cardHoverStyles = StyleSheet.create((theme) => ({
-  clickableHover: {
-    _web: {
-      _hover: {
-        transform: 'translateY(-2px)',
-        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06)',
-      },
-    },
-  },
-})); 
+// 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 {
+    card: {
+        backgroundColor: theme.colors.surface.primary,
+        position: 'relative',
+        overflow: 'hidden',
+        variants: {
+            type: createTypeVariants(theme),
+            padding: {
+                none: { padding: 0 },
+                sm: { padding: 8 },
+                md: { padding: 16 },
+                lg: { padding: 24 },
+            },
+            radius: {
+                none: { borderRadius: 0 },
+                sm: { borderRadius: 4 },
+                md: { borderRadius: 8 },
+                lg: { borderRadius: 12 },
+            },
+            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,
+                },
+            },
+        },
+        compoundVariants: createCardCompoundVariants(theme),
+        _web: {
+            display: 'flex',
+            flexDirection: 'column',
+            boxSizing: 'border-box',
+        },
+    } as const,
+  };
+});

package/src/Card/Card.web.tsx

@@ -1,21 +1,22 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { CardProps } from './types';
-import { cardStyles, cardHoverStyles } from './Card.styles';
+import { cardStyles } from './Card.styles';
+import useMergeRefs from '../hooks/useMergeRefs';
 
-const Card: React.FC<CardProps> = ({
+const Card = forwardRef<HTMLDivElement | HTMLButtonElement, CardProps>(({
   children,
-  variant = 'default',
-  padding = 'medium',
-  radius = 'medium',
-  intent = 'neutral',
+  type = 'default',
+  padding = 'md',
+  radius = 'md',
+  intent,
   clickable = false,
   onPress,
   disabled = false,
   style,
   testID,
   accessibilityLabel,
-}) => {
+}, ref) => {
   const handleClick = () => {
     if (!disabled && clickable && onPress) {
       onPress();
@@ -24,30 +25,26 @@ const Card: React.FC<CardProps> = ({
 
   // Apply variants
   cardStyles.useVariants({
-    variant: variant as any,
-    padding,
+    clickable,
     radius,
+    type,
+    padding,
     intent,
-    clickable,
     disabled,
   });
 
-  // Create style arrays
-  const cardStyleArray = [
-    cardStyles.card,
-    clickable && !disabled && cardHoverStyles.clickableHover,
-    style,
-  ].filter(Boolean);
-
   // Generate web props
-  const webProps = getWebProps(cardStyleArray);
+  const webProps = getWebProps([cardStyles.card, style as any]);
+
+  const mergedRef = useMergeRefs(ref, webProps.ref);
 
   // Use appropriate HTML element based on clickable state
-  const Component = clickable ? 'button' : 'div';
+  const Component: any = clickable ? 'button' : 'div';
 
   return (
     <Component
       {...webProps}
+      ref={mergedRef as any}
       onClick={clickable ? handleClick : undefined}
       disabled={clickable && disabled}
       data-testid={testID}
@@ -57,6 +54,8 @@ const Card: React.FC<CardProps> = ({
       {children}
     </Component>
   );
-};
+});
+
+Card.displayName = 'Card';
 
 export default Card; 

package/src/Card/index.ts

@@ -1,5 +1,5 @@
-// Platform-agnostic Card export
-// Metro will resolve to index.native.ts for React Native
-// This file serves as fallback for web environments
-export { default } from './Card.web';
-export * from './types'; 
+import CardComponent from './Card.web';
+
+export default CardComponent;
+export { CardComponent as Card };
+export * from './types';

package/src/Card/index.web.ts

@@ -1,3 +1,5 @@
-// Web-specific Card export
-export { default } from './Card.web';
-export * from './types'; 
+import CardComponent from './Card.web';
+
+export default CardComponent;
+export { CardComponent as Card };
+export * from './types';

package/src/Card/types.ts

@@ -1,57 +1,64 @@
-import { ReactNode } from 'react';
-import type { IntentVariant } from '../theme/variants';
+import { Intent, Size } from '@idealyst/theme';
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+// Component-specific type aliases for future extensibility
+export type CardIntentVariant = Intent;
+export type CardType = 'default' | 'outlined' | 'elevated' | 'filled';
+export type CardPaddingVariant = 'none' | Size;
+export type CardRadiusVariant = 'none' | Size;
 
 export interface CardProps {
   /**
    * The content to display inside the card
    */
   children?: ReactNode;
-  
+
   /**
    * The visual style variant of the card
    */
-  variant?: 'default' | 'outlined' | 'elevated' | 'filled';
-  
+  type?: CardType;
+
   /**
    * The padding size inside the card
    */
-  padding?: 'none' | 'small' | 'medium' | 'large';
-  
+  padding?: CardPaddingVariant;
+
   /**
    * The border radius of the card
    */
-  radius?: 'none' | 'small' | 'medium' | 'large';
-  
+  radius?: CardRadiusVariant;
+
   /**
    * The intent/color scheme of the card
    */
-  intent?: IntentVariant;
-  
+  intent?: CardIntentVariant;
+
   /**
    * Whether the card is clickable
    */
   clickable?: boolean;
-  
+
   /**
    * Called when the card is pressed (if clickable)
    */
   onPress?: () => void;
-  
+
   /**
    * Whether the card is disabled
    */
   disabled?: boolean;
-  
+
   /**
    * Additional styles (platform-specific)
    */
-  style?: any;
-  
+  style?: StyleProp<ViewStyle>;
+
   /**
    * Test ID for testing
    */
   testID?: string;
-  
+
   /**
    * Accessibility label
    */