@idealyst/components 1.1.5 → 1.1.7

package/src/ActivityIndicator/ActivityIndicator.web.tsx

@@ -48,7 +48,7 @@ const ActivityIndicator = forwardRef<HTMLDivElement, ActivityIndicatorProps>(({
 
   // Create the style array following the official documentation pattern
   const containerStyleArray = [
-    activityIndicatorStyles.container,
+    (activityIndicatorStyles.container as any)({}),
     customSize && {
       width: customSize,
       height: customSize,
@@ -57,7 +57,7 @@ const ActivityIndicator = forwardRef<HTMLDivElement, ActivityIndicatorProps>(({
   ];
 
   const spinnerStyleArray = [
-    activityIndicatorStyles.spinner({
+    (activityIndicatorStyles.spinner as any)({
       intent,
     }),
     customSize ? {

package/src/Alert/Alert.native.tsx

@@ -30,11 +30,12 @@ const Alert = forwardRef<ComponentRef<typeof View>, AlertProps>(({
   testID,
   id,
 }, ref) => {
-  // Apply variants to stylesheet
-  alertStyles.useVariants({
-    type,
-    intent,
-  });
+  // Compute dynamic styles with intent and type
+  const dynamicProps = { intent, type };
+  const containerStyle = (alertStyles.container as any)(dynamicProps);
+  const iconContainerStyle = (alertStyles.iconContainer as any)(dynamicProps);
+  const titleStyle = (alertStyles.title as any)(dynamicProps);
+  const messageStyle = (alertStyles.message as any)(dynamicProps);
 
   const displayIcon = icon !== undefined ? icon : (showIcon ? defaultIcons[intent] : null);
 
@@ -47,7 +48,7 @@ const Alert = forwardRef<ComponentRef<typeof View>, AlertProps>(({
         <MaterialCommunityIcons
           name={displayIcon}
           size={20}
-          style={alertStyles.iconContainer}
+          style={iconContainerStyle}
         />
       );
     } else if (isValidElement(displayIcon)) {
@@ -60,25 +61,25 @@ const Alert = forwardRef<ComponentRef<typeof View>, AlertProps>(({
     <View
       ref={ref}
       nativeID={id}
-      style={[alertStyles.container, style]}
+      style={[containerStyle, style]}
       testID={testID}
       accessibilityRole="alert"
     >
       {displayIcon && (
-        <View style={alertStyles.iconContainer}>
+        <View style={iconContainerStyle}>
           {renderIcon()}
         </View>
       )}
 
       <View style={alertStyles.content}>
         {title && (
-          <Text style={alertStyles.title}>
+          <Text style={titleStyle}>
             {title}
           </Text>
         )}
 
         {message && (
-          <Text style={alertStyles.message}>
+          <Text style={messageStyle}>
             {message}
           </Text>
         )}

package/src/Alert/Alert.styles.tsx

@@ -1,236 +1,80 @@
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, Intent, CompoundVariants} from '@idealyst/theme';
+import { Theme, Intent } from '@idealyst/theme';
+import { applyExtensions } from '../extensions/applyExtension';
 
 type AlertType = 'filled' | 'outlined' | 'soft';
-type AlertIntent = Intent | 'info'; // Alert includes 'info' which maps to primary
+type AlertIntent = Intent;
 
 export type AlertVariants = {
     type: AlertType;
     intent: AlertIntent;
 }
 
+type AlertDynamicProps = {
+    intent?: AlertIntent;
+    type?: AlertType;
+};
 
 /**
- * Create type variants (structure only, colors handled by compound variants)
+ * Get the intent value, mapping 'info' to 'primary' for backwards compatibility
  */
-const TypeVariants = {
-    filled: {
-        borderWidth: 1,
-        borderStyle: 'solid' as const,
-    },
-    outlined: {
-        backgroundColor: 'transparent',
-        borderWidth: 1,
-        borderStyle: 'solid' as const,
-    },
-    soft: {
-        borderWidth: 1,
-        borderStyle: 'solid' as const,
-    }
-} as const;
+function getIntentValue(theme: Theme, intent: AlertIntent) {
+    return theme.intents[intent];
+}
 
 /**
- * Create compound variants for container (type + intent combinations)
+ * Get container background color based on intent and type
  */
-function createContainerCompoundVariants(theme: Theme) {
-    const compoundVariants: CompoundVariants<keyof AlertVariants> = [];
-
-    // Process standard intents from theme
-    for (const intent in theme.intents) {
-        const intentValue = theme.intents[intent as Intent];
-
-        // Filled + intent
-        compoundVariants.push({
-            intent,
-            type: 'filled',
-            styles: {
-                backgroundColor: intentValue.primary,
-                borderColor: intentValue.primary,
-            },
-        });
-
-        // Outlined + intent
-        compoundVariants.push({
-            intent,
-            type: 'outlined',
-            styles: {
-                borderColor: intentValue.primary,
-            },
-        });
-
-        // Soft + intent
-        compoundVariants.push({
-            intent,
-            type: 'soft',
-            styles: {
-                backgroundColor: intentValue.light,
-                borderColor: intentValue.light,
-            },
-        });
+function getContainerBackgroundColor(theme: Theme, intent: AlertIntent, type: AlertType): string {
+    const intentValue = getIntentValue(theme, intent);
+    if (type === 'filled') {
+        return intentValue.primary;
     }
-
-    // Add 'info' intent (maps to primary)
-    const primaryIntent = theme.intents.primary;
-    compoundVariants.push({
-        intent: 'info',
-        type: 'filled',
-        styles: {
-            backgroundColor: primaryIntent.primary,
-            borderColor: primaryIntent.primary,
-        },
-    });
-    compoundVariants.push({
-        intent: 'info',
-        type: 'outlined',
-        styles: {
-            borderColor: primaryIntent.primary,
-        },
-    });
-    compoundVariants.push({
-        intent: 'info',
-        type: 'soft',
-        styles: {
-            backgroundColor: primaryIntent.light,
-            borderColor: primaryIntent.light,
-        },
-    });
-
-    return compoundVariants;
+    if (type === 'soft') {
+        return intentValue.light;
+    }
+    return 'transparent'; // outlined
 }
 
 /**
- * Create compound variants for icon/title colors (type + intent combinations)
+ * Get container border color based on intent and type
  */
-function createIconTitleCompoundVariants(theme: Theme) {
-    const compoundVariants: CompoundVariants<keyof AlertVariants> = [];
-
-    // Process standard intents from theme
-    for (const intent in theme.intents) {
-        const intentValue = theme.intents[intent as Intent];
-
-        // Filled type: use contrast color
-        compoundVariants.push({
-            intent,
-            type: 'filled',
-            styles: {
-                color: intentValue.contrast,
-            },
-        });
-
-        // Outlined type: use primary color
-        compoundVariants.push({
-            intent,
-            type: 'outlined',
-            styles: {
-                color: intentValue.primary,
-            },
-        });
-
-        // Soft type: use primary color
-        compoundVariants.push({
-            intent,
-            type: 'soft',
-            styles: {
-                color: intentValue.primary,
-            },
-        });
+function getContainerBorderColor(theme: Theme, intent: AlertIntent, type: AlertType): string {
+    const intentValue = getIntentValue(theme, intent);
+    if (type === 'filled' || type === 'outlined') {
+        return intentValue.primary;
     }
-
-    // Add 'info' intent (maps to primary)
-    const primaryIntent = theme.intents.primary;
-    compoundVariants.push({
-        intent: 'info',
-        type: 'filled',
-        styles: {
-            color: primaryIntent.contrast,
-        },
-    });
-    compoundVariants.push({
-        intent: 'info',
-        type: 'outlined',
-        styles: {
-            color: primaryIntent.primary,
-        },
-    });
-    compoundVariants.push({
-        intent: 'info',
-        type: 'soft',
-        styles: {
-            color: primaryIntent.primary,
-        },
-    });
-
-    return compoundVariants;
+    return intentValue.light; // soft
 }
 
 /**
- * Create compound variants for message colors (type + intent combinations)
+ * Get icon/title color based on intent and type
  */
-function createMessageCompoundVariants(theme: Theme): CompoundVariants<keyof AlertVariants> {
-    const compoundVariants: CompoundVariants<keyof AlertVariants> = [];
-
-    // Process standard intents from theme
-    for (const intent in theme.intents) {
-        const intentValue = theme.intents[intent as Intent];
-
-        // Filled type: use contrast color
-        compoundVariants.push({
-            intent,
-            type: 'filled',
-            styles: {
-                color: intentValue.contrast,
-            },
-        });
-
-        // Outlined type: use primary text color
-        compoundVariants.push({
-            intent,
-            type: 'outlined',
-            styles: {
-                color: theme.colors.text.primary,
-            },
-        });
-
-        // Soft type: use primary text color
-        compoundVariants.push({
-            intent,
-            type: 'soft',
-            styles: {
-                color: theme.colors.text.primary,
-            },
-        });
+function getIconTitleColor(theme: Theme, intent: AlertIntent, type: AlertType): string {
+    const intentValue = getIntentValue(theme, intent);
+    if (type === 'filled') {
+        return intentValue.contrast;
     }
+    return intentValue.primary; // outlined, soft
+}
 
-    // Add 'info' intent (maps to primary)
-    const primaryIntent = theme.intents.primary;
-    compoundVariants.push({
-        intent: 'info',
-        type: 'filled',
-        styles: {
-            color: primaryIntent.contrast,
-        },
-    });
-    compoundVariants.push({
-        intent: 'info',
-        type: 'outlined',
-        styles: {
-            color: theme.colors.text.primary,
-        },
-    });
-    compoundVariants.push({
-        intent: 'info',
-        type: 'soft',
-        styles: {
-            color: theme.colors.text.primary,
-        },
-    });
-
-    return compoundVariants;
+/**
+ * Get message color based on intent and type
+ */
+function getMessageColor(theme: Theme, intent: AlertIntent, type: AlertType): string {
+    const intentValue = getIntentValue(theme, intent);
+    if (type === 'filled') {
+        return intentValue.contrast;
+    }
+    return theme.colors.text.primary; // outlined, soft
 }
 
-export const alertStyles = StyleSheet.create((theme: Theme) => {
-    return {
-        container: {
+/**
+ * Create dynamic container styles
+ */
+function createContainerStyles(theme: Theme) {
+    return ({ intent = 'neutral', type = 'soft' }: AlertDynamicProps) => {
+        return {
             display: 'flex',
             flexDirection: 'row',
             alignItems: 'flex-start',
@@ -239,66 +83,131 @@ export const alertStyles = StyleSheet.create((theme: Theme) => {
             borderRadius: 8,
             borderWidth: 1,
             borderStyle: 'solid' as const,
-            variants: {
-                type: TypeVariants,
-            } as const,
-            compoundVariants: createContainerCompoundVariants(theme),
-        } as const,
-        iconContainer: {
+            backgroundColor: getContainerBackgroundColor(theme, intent, type),
+            borderColor: getContainerBorderColor(theme, intent, type),
+        } as const;
+    };
+}
+
+/**
+ * Create dynamic icon container styles
+ */
+function createIconContainerStyles(theme: Theme) {
+    return ({ intent = 'neutral', type = 'soft' }: AlertDynamicProps) => {
+        return {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
             flexShrink: 0,
             width: 24,
             height: 24,
-            compoundVariants: createIconTitleCompoundVariants(theme),
-        } as const,
-        content: {
-            flex: 1,
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 4,
-        },
-        title: {
+            color: getIconTitleColor(theme, intent, type),
+        } as const;
+    };
+}
+
+/**
+ * Create dynamic title styles
+ */
+function createTitleStyles(theme: Theme) {
+    return ({ intent = 'neutral', type = 'soft' }: AlertDynamicProps) => {
+        return {
             fontSize: 16,
             lineHeight: 24,
             fontWeight: '600',
-            compoundVariants: createIconTitleCompoundVariants(theme),
-        },
-        message: {
+            color: getIconTitleColor(theme, intent, type),
+        } as const;
+    };
+}
+
+/**
+ * Create dynamic message styles
+ */
+function createMessageStyles(theme: Theme) {
+    return ({ intent = 'neutral', type = 'soft' }: AlertDynamicProps) => {
+        return {
             fontSize: 14,
             lineHeight: 20,
-            compoundVariants: createMessageCompoundVariants(theme),
-        },
-        actions: {
-            marginTop: 4,
-            display: 'flex',
-            flexDirection: 'row',
-            gap: 8,
-        },
-        closeButton: {
-            padding: 4,
-            backgroundColor: 'transparent',
-            borderRadius: 4,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            flexShrink: 0,
-            _web: {
-                border: 'none',
-                cursor: 'pointer',
-                outline: 'none',
-                _hover: {
-                    backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                },
+            color: getMessageColor(theme, intent, type),
+        } as const;
+    };
+}
+
+/**
+ * Create content styles
+ */
+function createContentStyles() {
+    return () => ({
+        flex: 1,
+        display: 'flex' as const,
+        flexDirection: 'column' as const,
+        gap: 4,
+    });
+}
+
+/**
+ * Create actions styles
+ */
+function createActionsStyles() {
+    return () => ({
+        marginTop: 4,
+        display: 'flex' as const,
+        flexDirection: 'row' as const,
+        gap: 8,
+    });
+}
+
+/**
+ * Create close button styles
+ */
+function createCloseButtonStyles() {
+    return () => ({
+        padding: 4,
+        backgroundColor: 'transparent',
+        borderRadius: 4,
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        flexShrink: 0,
+        _web: {
+            border: 'none',
+            cursor: 'pointer',
+            outline: 'none',
+            _hover: {
+                backgroundColor: 'rgba(0, 0, 0, 0.1)',
             },
         },
-        closeIcon: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: 16,
-            height: 16,
-        },
-    } as const;
+    });
+}
+
+/**
+ * Create close icon styles
+ */
+function createCloseIconStyles() {
+    return () => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        width: 16,
+        height: 16,
+    });
+}
+
+export const alertStyles = StyleSheet.create((theme: Theme) => {
+    // Apply extensions to main visual elements
+    const extended = applyExtensions('Alert', theme, {
+        container: createContainerStyles(theme),
+        iconContainer: createIconContainerStyles(theme),
+        title: createTitleStyles(theme),
+        message: createMessageStyles(theme),
+    });
+
+    return {
+        ...extended,
+        // Minor utility styles (not extended)
+        content: createContentStyles()(),
+        actions: createActionsStyles()(),
+        closeButton: createCloseButtonStyles()(),
+        closeIcon: createCloseIconStyles()(),
+    };
 });

package/src/Alert/Alert.web.tsx

@@ -31,17 +31,13 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(({
   testID,
   id,
 }, ref) => {
-  // Apply variants to stylesheet
-  alertStyles.useVariants({
-    type,
-    intent,
-  });
-
-  const containerProps = getWebProps([alertStyles.container, style as any]);
-  const iconContainerProps = getWebProps([alertStyles.iconContainer]);
+  // Compute dynamic styles with intent and type
+  const dynamicProps = { intent, type };
+  const containerProps = getWebProps([(alertStyles.container as any)(dynamicProps), style as any]);
+  const iconContainerProps = getWebProps([(alertStyles.iconContainer as any)(dynamicProps)]);
   const contentProps = getWebProps([alertStyles.content]);
-  const titleProps = getWebProps([alertStyles.title]);
-  const messageProps = getWebProps([alertStyles.message]);
+  const titleProps = getWebProps([(alertStyles.title as any)(dynamicProps)]);
+  const messageProps = getWebProps([(alertStyles.message as any)(dynamicProps)]);
   const actionsProps = getWebProps([alertStyles.actions]);
   const closeButtonProps = getWebProps([alertStyles.closeButton]);
   const closeIconProps = getWebProps([alertStyles.closeIcon]);

package/src/Avatar/Avatar.native.tsx

@@ -41,8 +41,11 @@ const Avatar = forwardRef<View, AvatarProps>(({
     setHasError(true);
   };
 
+  const avatarStyle = (avatarStyles.avatar as any)({});
+  const fallbackStyle = (avatarStyles.fallback as any)({});
+
   return (
-    <View ref={ref} nativeID={id} style={[avatarStyles.avatar, style]} testID={testID} {...nativeA11yProps}>
+    <View ref={ref} nativeID={id} style={[avatarStyle, style]} testID={testID} {...nativeA11yProps}>
       {src && !hasError ? (
         <Image
           source={typeof src === 'string' ? { uri: src } : src}
@@ -51,7 +54,7 @@ const Avatar = forwardRef<View, AvatarProps>(({
           accessibilityLabel={alt}
         />
       ) : (
-        <Text style={avatarStyles.fallback}>
+        <Text style={fallbackStyle}>
           {fallback}
         </Text>
       )}

package/src/Avatar/Avatar.styles.tsx

@@ -1,6 +1,7 @@
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, Size} from '@idealyst/theme';
+import { Theme, StylesheetStyles, Size } from '@idealyst/theme';
 import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { applyExtensions } from '../extensions/applyExtension';
 
 type AvatarSize = Size;
 type AvatarShape = 'circle' | 'square';
@@ -42,32 +43,61 @@ function createFallbackSizeVariants(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.
-// @ts-ignore - TS language server needs restart to pick up theme structure changes
-export const avatarStyles = StyleSheet.create((theme: Theme) => {
-  return {
-    avatar: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+/**
+ * Create container styles
+ */
+function createContainerStyles(theme: Theme) {
+    return () => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
         backgroundColor: theme.colors.surface.secondary,
-        overflow: 'hidden',
+        overflow: 'hidden' as const,
         variants: {
             size: createAvatarSizeVariants(theme),
             shape: createAvatarShapeVariants(theme),
         },
-    },
-    image: {
-        width: '100%',
-        height: '100%',
-    },
-    fallback: {
+    });
+}
+
+/**
+ * Create image styles
+ */
+function createImageStyles() {
+    return () => ({
+        width: '100%' as const,
+        height: '100%' as const,
+    });
+}
+
+/**
+ * Create fallback styles
+ */
+function createFallbackStyles(theme: Theme) {
+    return () => ({
         color: theme.colors.text.primary,
-        fontWeight: '600',
+        fontWeight: '600' as const,
         variants: {
             size: createFallbackSizeVariants(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 avatarStyles = StyleSheet.create((theme: Theme) => {
+  // Apply extensions to main visual elements
+  const extended = applyExtensions('Avatar', theme, {
+    avatar: createContainerStyles(theme),
+    fallback: createFallbackStyles(theme),
+  });
+
+  return {
+    ...extended,
+    // Minor utility styles (not extended)
+    image: {
+        width: '100%',
+        height: '100%',
     },
   };
 });