@idealyst/components 1.1.6 → 1.1.7

package/src/Button/Button.styles.tsx

@@ -1,198 +1,123 @@
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, Intent, Size, CompoundVariants} from '@idealyst/theme';
+import { Theme, Intent, Size } from '@idealyst/theme';
 import { buildSizeVariants } from '../utils/buildSizeVariants';
 import { ButtonGradient } from './types';
+import { applyExtensions } from '../extensions/applyExtension';
 
 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.
+ * Every style function receives all props for maximum flexibility
+ * when using extensions or replacements.
  */
-function createIntentVariants(theme: Theme) {
-    const variants: any = {};
-    for (const intent in theme.intents) {
-        variants[intent] = {};
-    }
-    return variants;
-}
-
-/**
- * Create type variants (structure only, colors handled by compound variants)
- */
-function createButtonTypeVariants(theme: Theme) {
-    return {
-        contained: {
-            borderWidth: 0,
-        },
-        outlined: {
-            borderWidth: 1,
-            borderStyle: 'solid' ,
-            backgroundColor: theme.colors.surface.primary,
-        },
-        text: {
-            borderWidth: 0,
-            backgroundColor: 'transparent',
-        },
-    } 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,
-            },
-        });
-
-        // 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;
-}
+export type ButtonDynamicProps = {
+    intent?: Intent;
+    type?: ButtonType;
+    size?: Size;
+    disabled?: boolean;
+    gradient?: ButtonGradient;
+};
 
 /**
- * Create gradient variant styles for web
- * Applies a transparent overlay gradient over the intent background color
+ * Get button background color based on intent and type
  */
-function createGradientVariants() {
-    return {
-        '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;
+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';
 }
 
 /**
- * Create icon compound variants for intent+type combinations
+ * Get button border color based on intent and type
  */
-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 },
-        });
+function getButtonBorderColor(theme: Theme, intent: Intent, type: ButtonType): string {
+    if (type === 'outlined') {
+        return theme.intents[intent].primary;
     }
-
-    return compoundVariants;
+    return 'transparent';
 }
 
 /**
- * Create icon color variants dynamically based on theme, intent, and type
+ * Get text/icon color based on 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;
+function getTextColor(theme: Theme, intent: Intent, type: ButtonType): string {
+    if (type === 'contained') {
+        return theme.intents[intent].contrast;
+    }
+    return theme.intents[intent].primary;
 }
 
 /**
- * Generate button icon styles
+ * Create dynamic button styles
+ * Receives all ButtonDynamicProps for flexibility in extensions/replacements
  */
-const createButtonIconStyles = (theme: Theme) => {
-    return ({ intent }: Partial<ButtonVariants>) => {
+function createButtonStyles(theme: Theme) {
+    return (props: ButtonDynamicProps) => {
+        const { intent = 'primary', type = 'contained' } = props;
         return {
-            display: 'flex',
+            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 => ({
-                    width: size.iconSize,
-                    height: size.iconSize,
+                    paddingVertical: size.paddingVertical,
+                    paddingHorizontal: size.paddingHorizontal,
+                    minHeight: size.minHeight,
                 })),
-                type: createIconColorVariants(theme, intent),
+                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%)' } },
+                },
             },
         } as const;
     };
 }
 
 /**
- * Generate button text styles
+ * Create dynamic text styles
+ * Receives all ButtonDynamicProps for flexibility in extensions/replacements
  */
-const createButtonTextStyles = (theme: Theme) => {
-    return ({ intent }: Partial<ButtonVariants>) => {
+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,
                 })),
-                type: createIconColorVariants(theme, intent), // Text uses same colors as icons
                 disabled: {
                     true: { opacity: 0.6 },
                     false: { opacity: 1 },
@@ -202,78 +127,51 @@ const createButtonTextStyles = (theme: Theme) => {
     };
 }
 
-// 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',
-            },
-            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: {
+/**
+ * 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,
                 })),
-                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 },
-                },
             },
-            compoundVariants: createIconCompoundVariants(theme), // Text uses same colors as icons
-        } as const,
+        } 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) => ({
+        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

@@ -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,7 +1,8 @@
 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 { cardStyles, getCardBorderRadius } from './Card.styles';
 import { getNativeInteractiveAccessibilityProps } from '../utils/accessibility';
 
 const Card = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pressable>, CardProps>(({
@@ -42,12 +43,13 @@ const Card = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pressabl
       accessibilityPressed,
     });
   }, [accessibilityLabel, accessibilityHint, accessibilityDisabled, disabled, accessibilityHidden, accessibilityRole, clickable, accessibilityPressed]);
-  // Apply variants
+
+  // Get theme for radii values
+  const { theme } = useUnistyles();
+
+  // Apply variants (for spacing only - radius is applied directly below)
   cardStyles.useVariants({
     clickable,
-    radius,
-    type,
-    intent,
     disabled,
     gap,
     padding,
@@ -58,13 +60,19 @@ 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);
+
   // Use appropriate component based on clickable state
   const Component = clickable ? Pressable : View;
 
   const componentProps = {
     ref,
     nativeID: id,
-    style: [cardStyles.card, style],
+    style: [cardStyle, { borderRadius }, style],
     testID,
     ...nativeA11yProps,
     ...(clickable && {

package/src/Card/Card.styles.tsx

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, Intent, CompoundVariants } from '@idealyst/theme';
+import { Theme, Intent, Radius } from '@idealyst/theme';
 import {
   buildGapVariants,
   buildPaddingVariants,
@@ -10,11 +10,19 @@ import {
   buildMarginHorizontalVariants,
 } from '../utils/buildViewStyleVariants';
 import { ViewStyleSize } from '../utils/viewStyleProps';
+import { applyExtensions } from '../extensions/applyExtension';
 
 type CardType = 'outlined' | 'elevated' | 'filled';
-type CardRadius = 'none' | 'sm' | 'md' | 'lg' | 'xs' | 'xl';
+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;
@@ -31,76 +39,63 @@ export type CardVariants = {
   marginHorizontal: ViewStyleSize;
 };
 
+type CardDynamicProps = {
+  intent?: CardIntent;
+  type?: CardType;
+};
+
 /**
- * Create type variants (structure only, colors handled by compound variants)
+ * Get the border color based on intent (only used for outlined type)
  */
-function createTypeVariants(theme: Theme) {
-  return {
-    outlined: {
-      backgroundColor: 'transparent',
-      borderWidth: 1,
-      borderStyle: 'solid' as const,
-    },
-    elevated: {
-      backgroundColor: theme.colors.surface.primary,
-      borderWidth: 0,
-      ...theme.shadows.md,
-    },
-    filled: {
-      backgroundColor: theme.colors.surface.secondary,
-      borderWidth: 0,
-    },
-  } as const;
+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;
 }
 
 /**
- * Create compound variants for type + intent combinations
+ * Get type-specific styles
  */
-function createCardCompoundVariants(theme: Theme) {
-  const compoundVariants: CompoundVariants<keyof CardVariants> = [];
-
-  // Add intent-based border colors for outlined type
-  for (const intent in theme.intents) {
-    const intentValue = theme.intents[intent as Intent];
-
-    compoundVariants.push({
-      intent,
-      type: 'outlined',
-      styles: {
-        borderColor: intentValue.primary,
-      },
-    });
+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 {};
   }
-
-  // Add special intents (info, neutral) for outlined type
-  compoundVariants.push({
-    intent: 'info',
-    type: 'outlined',
-    styles: {
-      borderColor: theme.colors.border.secondary,
-    },
-  });
-  compoundVariants.push({
-    intent: 'neutral',
-    type: 'outlined',
-    styles: {
-      borderColor: theme.colors.border.secondary,
-    },
-  });
-
-  return compoundVariants;
 }
 
-// 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,
+/**
+ * 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: {
-        type: createTypeVariants(theme),
         radius: {
           none: { borderRadius: 0 },
           xs: { borderRadius: 2 },
@@ -147,12 +142,19 @@ export const cardStyles = StyleSheet.create((theme: Theme) => {
         marginVertical: buildMarginVerticalVariants(theme),
         marginHorizontal: buildMarginHorizontalVariants(theme),
       },
-      compoundVariants: createCardCompoundVariants(theme),
       _web: {
         display: 'flex',
         flexDirection: 'column',
         boxSizing: 'border-box',
       },
-    } as const,
+    } 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),
+  });
 });

package/src/Card/Card.web.tsx

@@ -49,12 +49,10 @@ const Card = forwardRef<HTMLDivElement | HTMLButtonElement, CardProps>(({
     }
   };
 
-  // Apply variants
+  // Apply variants (for radius, clickable, disabled, and spacing)
   cardStyles.useVariants({
     clickable,
     radius,
-    type,
-    intent,
     disabled,
     gap,
     padding,
@@ -65,8 +63,11 @@ const Card = forwardRef<HTMLDivElement | HTMLButtonElement, CardProps>(({
     marginHorizontal,
   });
 
+  // Get dynamic card style with type and intent props
+  const cardStyle = (cardStyles.card as any)({ type, intent });
+
   // Generate web props
-  const webProps = getWebProps([cardStyles.card, style as any]);
+  const webProps = getWebProps([cardStyle, style as any]);
 
   const mergedRef = useMergeRefs(ref, webProps.ref);