@idealyst/components 1.1.6 → 1.1.8

package/src/Alert/Alert.styles.tsx

@@ -1,304 +1,131 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, Intent, CompoundVariants} from '@idealyst/theme';
-
-type AlertType = 'filled' | 'outlined' | 'soft';
-type AlertIntent = Intent | 'info'; // Alert includes 'info' which maps to primary
-
-export type AlertVariants = {
-    type: AlertType;
-    intent: AlertIntent;
-}
-
-
-/**
- * Create type variants (structure only, colors handled by compound variants)
- */
-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;
-
-/**
- * Create compound variants for container (type + intent combinations)
- */
-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,
-            },
-        });
-    }
-
-    // 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;
-}
-
 /**
- * Create compound variants for icon/title colors (type + intent combinations)
+ * Alert styles using defineStyle with dynamic intent/type handling.
  */
-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,
-            },
-        });
+import { StyleSheet } from 'react-native-unistyles';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent } from '@idealyst/theme';
 
-        // Outlined type: use primary color
-        compoundVariants.push({
-            intent,
-            type: 'outlined',
-            styles: {
-                color: intentValue.primary,
-            },
-        });
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-        // Soft type: use primary color
-        compoundVariants.push({
-            intent,
-            type: 'soft',
-            styles: {
-                color: intentValue.primary,
-            },
-        });
-    }
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-    // 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,
-        },
-    });
+type AlertType = 'filled' | 'outlined' | 'soft';
 
-    return compoundVariants;
-}
+export type AlertDynamicProps = {
+    intent?: Intent;
+    type?: AlertType;
+};
 
 /**
- * Create compound variants for message colors (type + intent combinations)
+ * Alert styles with intent/type combination handling.
  */
-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,
-            },
-        });
-    }
-
-    // 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;
-}
-
-export const alertStyles = StyleSheet.create((theme: Theme) => {
-    return {
-        container: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'flex-start',
+export const alertStyles = defineStyle('Alert', (theme: Theme) => ({
+    container: ({ intent = 'neutral', type = 'soft' }: AlertDynamicProps) => {
+        const intentValue = theme.intents[intent];
+
+        // Background color based on type
+        const backgroundColor = type === 'filled'
+            ? intentValue.primary
+            : type === 'soft'
+                ? intentValue.light
+                : 'transparent';
+
+        // Border color based on type
+        const borderColor = (type === 'filled' || type === 'outlined')
+            ? intentValue.primary
+            : intentValue.light;
+
+        return {
+            display: 'flex' as const,
+            flexDirection: 'row' as const,
+            alignItems: 'flex-start' as const,
             gap: 8,
             padding: 16,
             borderRadius: 8,
             borderWidth: 1,
             borderStyle: 'solid' as const,
-            variants: {
-                type: TypeVariants,
-            } as const,
-            compoundVariants: createContainerCompoundVariants(theme),
-        } as const,
-        iconContainer: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
+            backgroundColor,
+            borderColor,
+        } as const;
+    },
+
+    iconContainer: ({ intent = 'neutral', type = 'soft' }: AlertDynamicProps) => {
+        const intentValue = theme.intents[intent];
+        const color = type === 'filled' ? intentValue.contrast : intentValue.primary;
+
+        return {
+            display: 'flex' as const,
+            alignItems: 'center' as const,
+            justifyContent: 'center' as const,
             flexShrink: 0,
             width: 24,
             height: 24,
-            compoundVariants: createIconTitleCompoundVariants(theme),
-        } as const,
-        content: {
-            flex: 1,
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 4,
-        },
-        title: {
+            color,
+        } as const;
+    },
+
+    title: ({ intent = 'neutral', type = 'soft' }: AlertDynamicProps) => {
+        const intentValue = theme.intents[intent];
+        const color = type === 'filled' ? intentValue.contrast : intentValue.primary;
+
+        return {
             fontSize: 16,
             lineHeight: 24,
-            fontWeight: '600',
-            compoundVariants: createIconTitleCompoundVariants(theme),
-        },
-        message: {
+            fontWeight: '600' as const,
+            color,
+        } as const;
+    },
+
+    message: ({ intent = 'neutral', type = 'soft' }: AlertDynamicProps) => {
+        const intentValue = theme.intents[intent];
+        const color = type === 'filled' ? intentValue.contrast : theme.colors.text.primary;
+
+        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,
+        } as const;
+    },
+
+    content: (_props: AlertDynamicProps) => ({
+        flex: 1,
+        display: 'flex' as const,
+        flexDirection: 'column' as const,
+        gap: 4,
+    }),
+
+    actions: (_props: AlertDynamicProps) => ({
+        marginTop: 4,
+        display: 'flex' as const,
+        flexDirection: 'row' as const,
+        gap: 8,
+    }),
+
+    closeButton: (_props: AlertDynamicProps) => ({
+        padding: 4,
+        backgroundColor: 'transparent' as const,
+        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;
-});
+    }),
+
+    closeIcon: (_props: AlertDynamicProps) => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        width: 16,
+        height: 16,
+    }),
+}));

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.old.tsx

@@ -0,0 +1,99 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, Size } from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { applyExtensions } from '../extensions/applyExtension';
+
+type AvatarSize = Size;
+type AvatarShape = 'circle' | 'square';
+
+type AvatarVariants = {
+    size: AvatarSize;
+    shape: AvatarShape;
+}
+
+export type ExpandedAvatarStyles = StylesheetStyles<keyof AvatarVariants>;
+
+export type AvatarStylesheet = {
+    avatar: ExpandedAvatarStyles;
+    image: ExpandedAvatarStyles;
+    fallback: ExpandedAvatarStyles;
+}
+
+function createAvatarSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'avatar', (size) => ({
+        width: size.width,
+        height: size.height,
+    }));
+}
+
+function createAvatarShapeVariants(theme: Theme) {
+    return {
+        circle: {
+            borderRadius: 9999,
+        },
+        square: {
+            borderRadius: 8,
+        },
+    } as const;
+}
+
+function createFallbackSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'avatar', (size) => ({
+        fontSize: size.fontSize,
+    }));
+}
+
+/**
+ * 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' as const,
+        variants: {
+            size: createAvatarSizeVariants(theme),
+            shape: createAvatarShapeVariants(theme),
+        },
+    });
+}
+
+/**
+ * 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' 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
+
+  return applyExtensions('Avatar', theme, {avatar: createContainerStyles(theme),
+    fallback: createFallbackStyles(theme),
+        // Additional styles (merged from return)
+        // Minor utility styles (not extended)
+    image: {
+        width: '100%',
+        height: '100%',
+    }});
+});

package/src/Avatar/Avatar.styles.tsx

@@ -1,73 +1,58 @@
+/**
+ * Avatar styles using defineStyle with $iterator expansion.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, Size} from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Size } from '@idealyst/theme';
 
-type AvatarSize = Size;
-type AvatarShape = 'circle' | 'square';
-
-type AvatarVariants = {
-    size: AvatarSize;
-    shape: AvatarShape;
-}
-
-export type ExpandedAvatarStyles = StylesheetStyles<keyof AvatarVariants>;
-
-export type AvatarStylesheet = {
-    avatar: ExpandedAvatarStyles;
-    image: ExpandedAvatarStyles;
-    fallback: ExpandedAvatarStyles;
-}
-
-function createAvatarSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'avatar', (size) => ({
-        width: size.width,
-        height: size.height,
-    }));
-}
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-function createAvatarShapeVariants(theme: Theme) {
-    return {
-        circle: {
-            borderRadius: 9999,
-        },
-        square: {
-            borderRadius: 8,
-        },
-    } as const;
-}
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-function createFallbackSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'avatar', (size) => ({
-        fontSize: size.fontSize,
-    }));
-}
+type AvatarShape = 'circle' | 'square';
 
-// 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',
+export type AvatarDynamicProps = {
+    size?: Size;
+    shape?: AvatarShape;
+};
+
+/**
+ * Avatar styles with size and shape variants.
+ */
+export const avatarStyles = defineStyle('Avatar', (theme: Theme) => ({
+    avatar: (_props: AvatarDynamicProps) => ({
+        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),
+            // $iterator expands for each avatar size
+            size: {
+                width: theme.sizes.$avatar.width,
+                height: theme.sizes.$avatar.height,
+            },
+            shape: {
+                circle: { borderRadius: 9999 },
+                square: { borderRadius: 8 },
+            },
         },
-    },
-    image: {
-        width: '100%',
-        height: '100%',
-    },
-    fallback: {
+    }),
+
+    image: (_props: AvatarDynamicProps) => ({
+        width: '100%' as const,
+        height: '100%' as const,
+    }),
+
+    fallback: (_props: AvatarDynamicProps) => ({
         color: theme.colors.text.primary,
-        fontWeight: '600',
+        fontWeight: '600' as const,
         variants: {
-            size: createFallbackSizeVariants(theme),
+            size: {
+                fontSize: theme.sizes.$avatar.fontSize,
+            },
         },
-    },
-  };
-});
+    }),
+}));