@idealyst/components 1.1.7 → 1.1.8

package/src/Alert/Alert.native.tsx

@@ -30,12 +30,16 @@ const Alert = forwardRef<ComponentRef<typeof View>, AlertProps>(({
   testID,
   id,
 }, ref) => {
-  // Compute dynamic styles with intent and type
+  // Call all styles as functions to get theme-reactive styles
   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 contentStyle = (alertStyles.content as any)({});
+  const actionsStyle = (alertStyles.actions as any)({});
+  const closeButtonStyle = (alertStyles.closeButton as any)({});
+  const closeIconStyle = (alertStyles.closeIcon as any)(dynamicProps);
 
   const displayIcon = icon !== undefined ? icon : (showIcon ? defaultIcons[intent] : null);
 
@@ -71,7 +75,7 @@ const Alert = forwardRef<ComponentRef<typeof View>, AlertProps>(({
         </View>
       )}
 
-      <View style={alertStyles.content}>
+      <View style={contentStyle}>
         {title && (
           <Text style={titleStyle}>
             {title}
@@ -84,10 +88,16 @@ const Alert = forwardRef<ComponentRef<typeof View>, AlertProps>(({
           </Text>
         )}
 
-        {children}
+        {children && (
+          typeof children === 'string' ? (
+            <Text style={messageStyle}>{children}</Text>
+          ) : (
+            children
+          )
+        )}
 
         {actions && (
-          <View style={alertStyles.actions}>
+          <View style={actionsStyle}>
             {actions}
           </View>
         )}
@@ -95,7 +105,7 @@ const Alert = forwardRef<ComponentRef<typeof View>, AlertProps>(({
 
       {dismissible && onDismiss && (
         <TouchableOpacity
-          style={alertStyles.closeButton}
+          style={closeButtonStyle}
           onPress={onDismiss}
           accessibilityLabel="Dismiss alert"
           accessibilityRole="button"
@@ -103,7 +113,7 @@ const Alert = forwardRef<ComponentRef<typeof View>, AlertProps>(({
           <MaterialCommunityIcons
             name="close"
             size={16}
-            style={alertStyles.closeIcon}
+            style={closeIconStyle}
           />
         </TouchableOpacity>
       )}

package/src/Alert/Alert.styles.old.tsx

@@ -0,0 +1,209 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, Intent } from '@idealyst/theme';
+import { applyExtensions } from '../extensions/applyExtension';
+
+type AlertType = 'filled' | 'outlined' | 'soft';
+type AlertIntent = Intent;
+
+export type AlertVariants = {
+    type: AlertType;
+    intent: AlertIntent;
+}
+
+type AlertDynamicProps = {
+    intent?: AlertIntent;
+    type?: AlertType;
+};
+
+/**
+ * Get the intent value, mapping 'info' to 'primary' for backwards compatibility
+ */
+function getIntentValue(theme: Theme, intent: AlertIntent) {
+    return theme.intents[intent];
+}
+
+/**
+ * Get container background color based on intent and type
+ */
+function getContainerBackgroundColor(theme: Theme, intent: AlertIntent, type: AlertType): string {
+    const intentValue = getIntentValue(theme, intent);
+    if (type === 'filled') {
+        return intentValue.primary;
+    }
+    if (type === 'soft') {
+        return intentValue.light;
+    }
+    return 'transparent'; // outlined
+}
+
+/**
+ * Get container border color based on intent and type
+ */
+function getContainerBorderColor(theme: Theme, intent: AlertIntent, type: AlertType): string {
+    const intentValue = getIntentValue(theme, intent);
+    if (type === 'filled' || type === 'outlined') {
+        return intentValue.primary;
+    }
+    return intentValue.light; // soft
+}
+
+/**
+ * Get icon/title color based on intent and type
+ */
+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
+}
+
+/**
+ * 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
+}
+
+/**
+ * Create dynamic container styles
+ */
+function createContainerStyles(theme: Theme) {
+    return ({ intent = 'neutral', type = 'soft' }: AlertDynamicProps) => {
+        return {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            gap: 8,
+            padding: 16,
+            borderRadius: 8,
+            borderWidth: 1,
+            borderStyle: 'solid' as const,
+            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,
+            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',
+            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,
+            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)',
+            },
+        },
+    });
+}
+
+/**
+ * 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
+
+    return applyExtensions('Alert', theme, {container: createContainerStyles(theme),
+        iconContainer: createIconContainerStyles(theme),
+        title: createTitleStyles(theme),
+        message: createMessageStyles(theme),
+        // Additional styles (merged from return)
+        // Minor utility styles (not extended)
+        content: createContentStyles()(),
+        actions: createActionsStyles()(),
+        closeButton: createCloseButtonStyles()(),
+        closeIcon: createCloseIconStyles()()});
+});

package/src/Alert/Alert.styles.tsx

@@ -1,169 +1,111 @@
+/**
+ * Alert styles using defineStyle with dynamic intent/type handling.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, Intent } from '@idealyst/theme';
-import { applyExtensions } from '../extensions/applyExtension';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent } from '@idealyst/theme';
 
-type AlertType = 'filled' | 'outlined' | 'soft';
-type AlertIntent = Intent;
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-export type AlertVariants = {
-    type: AlertType;
-    intent: AlertIntent;
-}
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
+
+type AlertType = 'filled' | 'outlined' | 'soft';
 
-type AlertDynamicProps = {
-    intent?: AlertIntent;
+export type AlertDynamicProps = {
+    intent?: Intent;
     type?: AlertType;
 };
 
 /**
- * Get the intent value, mapping 'info' to 'primary' for backwards compatibility
- */
-function getIntentValue(theme: Theme, intent: AlertIntent) {
-    return theme.intents[intent];
-}
-
-/**
- * Get container background color based on intent and type
- */
-function getContainerBackgroundColor(theme: Theme, intent: AlertIntent, type: AlertType): string {
-    const intentValue = getIntentValue(theme, intent);
-    if (type === 'filled') {
-        return intentValue.primary;
-    }
-    if (type === 'soft') {
-        return intentValue.light;
-    }
-    return 'transparent'; // outlined
-}
-
-/**
- * Get container border color based on intent and type
- */
-function getContainerBorderColor(theme: Theme, intent: AlertIntent, type: AlertType): string {
-    const intentValue = getIntentValue(theme, intent);
-    if (type === 'filled' || type === 'outlined') {
-        return intentValue.primary;
-    }
-    return intentValue.light; // soft
-}
-
-/**
- * Get icon/title color based on intent and type
+ * Alert styles with intent/type combination handling.
  */
-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
-}
+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;
 
-/**
- * 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
-}
-
-/**
- * Create dynamic container styles
- */
-function createContainerStyles(theme: Theme) {
-    return ({ intent = 'neutral', type = 'soft' }: AlertDynamicProps) => {
         return {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'flex-start',
+            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,
-            backgroundColor: getContainerBackgroundColor(theme, intent, type),
-            borderColor: getContainerBorderColor(theme, intent, type),
+            backgroundColor,
+            borderColor,
         } as const;
-    };
-}
+    },
+
+    iconContainer: ({ intent = 'neutral', type = 'soft' }: AlertDynamicProps) => {
+        const intentValue = theme.intents[intent];
+        const color = type === 'filled' ? intentValue.contrast : intentValue.primary;
 
-/**
- * Create dynamic icon container styles
- */
-function createIconContainerStyles(theme: Theme) {
-    return ({ intent = 'neutral', type = 'soft' }: AlertDynamicProps) => {
         return {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
+            display: 'flex' as const,
+            alignItems: 'center' as const,
+            justifyContent: 'center' as const,
             flexShrink: 0,
             width: 24,
             height: 24,
-            color: getIconTitleColor(theme, intent, type),
+            color,
         } as const;
-    };
-}
+    },
+
+    title: ({ intent = 'neutral', type = 'soft' }: AlertDynamicProps) => {
+        const intentValue = theme.intents[intent];
+        const color = type === 'filled' ? intentValue.contrast : intentValue.primary;
 
-/**
- * Create dynamic title styles
- */
-function createTitleStyles(theme: Theme) {
-    return ({ intent = 'neutral', type = 'soft' }: AlertDynamicProps) => {
         return {
             fontSize: 16,
             lineHeight: 24,
-            fontWeight: '600',
-            color: getIconTitleColor(theme, intent, type),
+            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;
 
-/**
- * Create dynamic message styles
- */
-function createMessageStyles(theme: Theme) {
-    return ({ intent = 'neutral', type = 'soft' }: AlertDynamicProps) => {
         return {
             fontSize: 14,
             lineHeight: 20,
-            color: getMessageColor(theme, intent, type),
+            color,
         } as const;
-    };
-}
+    },
 
-/**
- * Create content styles
- */
-function createContentStyles() {
-    return () => ({
+    content: (_props: AlertDynamicProps) => ({
         flex: 1,
         display: 'flex' as const,
         flexDirection: 'column' as const,
         gap: 4,
-    });
-}
+    }),
 
-/**
- * Create actions styles
- */
-function createActionsStyles() {
-    return () => ({
+    actions: (_props: AlertDynamicProps) => ({
         marginTop: 4,
         display: 'flex' as const,
         flexDirection: 'row' as const,
         gap: 8,
-    });
-}
+    }),
 
-/**
- * Create close button styles
- */
-function createCloseButtonStyles() {
-    return () => ({
+    closeButton: (_props: AlertDynamicProps) => ({
         padding: 4,
-        backgroundColor: 'transparent',
+        backgroundColor: 'transparent' as const,
         borderRadius: 4,
         display: 'flex' as const,
         alignItems: 'center' as const,
@@ -177,37 +119,13 @@ function createCloseButtonStyles() {
                 backgroundColor: 'rgba(0, 0, 0, 0.1)',
             },
         },
-    });
-}
+    }),
 
-/**
- * Create close icon styles
- */
-function createCloseIconStyles() {
-    return () => ({
+    closeIcon: (_props: AlertDynamicProps) => ({
         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/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%',
+    }});
+});