@idealyst/components 1.1.6 → 1.1.8

package/src/ActivityIndicator/ActivityIndicator.styles.tsx

@@ -1,51 +1,56 @@
+/**
+ * ActivityIndicator styles using defineStyle with $iterator expansion.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, Intent, Size} from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent, Size } from '@idealyst/theme';
 
-type ActivityIndicatorSize = Size;
-type ActivityIndicatorIntent = Intent;
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-type ActivityIndicatorVariants = {
-    size: ActivityIndicatorSize;
-    intent: ActivityIndicatorIntent;
-    animating: boolean;
-}
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-export type ExpandedActivityIndicatorStyles = StylesheetStyles<keyof ActivityIndicatorVariants>;
+export type ActivityIndicatorDynamicProps = {
+    size?: Size;
+    intent?: Intent;
+    animating?: boolean;
+};
 
-export type ActivityIndicatorStylesheet = {
-    container: ExpandedActivityIndicatorStyles;
-    spinner: ExpandedActivityIndicatorStyles;
-}
-
-function createContainerSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'activityIndicator', (size) => ({
-        width: size.size,
-        height: size.size,
-    }));
-}
-
-function createSpinnerSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'activityIndicator', (size) => ({
-        width: size.size,
-        height: size.size,
-        borderWidth: size.borderWidth,
-    }));
-}
+/**
+ * ActivityIndicator styles with size and intent handling.
+ */
+export const activityIndicatorStyles = defineStyle('ActivityIndicator', (theme: Theme) => ({
+    container: (_props: ActivityIndicatorDynamicProps) => ({
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        variants: {
+            // $iterator expands for each activityIndicator size
+            size: {
+                width: theme.sizes.$activityIndicator.size,
+                height: theme.sizes.$activityIndicator.size,
+            },
+            animating: {
+                true: { opacity: 1 },
+                false: { opacity: 0 },
+            },
+        },
+    }),
 
-function getSpinnerColor(theme: Theme, intent: ActivityIndicatorIntent) {
-    return theme.intents[intent].primary;
-}
+    spinner: ({ intent = 'primary' }: ActivityIndicatorDynamicProps) => {
+        // Inline color access for Unistyles to trace
+        const color = theme.intents[intent].primary;
 
-function createSpinnerStyles(theme: Theme) {
-    return ({ intent }: Partial<ActivityIndicatorVariants>) => {
-        const color = getSpinnerColor(theme, intent);
         return {
             borderRadius: 9999,
-            borderStyle: 'solid',
+            borderStyle: 'solid' as const,
             color,
             variants: {
-                size: createSpinnerSizeVariants(theme),
+                size: {
+                    width: theme.sizes.$activityIndicator.size,
+                    height: theme.sizes.$activityIndicator.size,
+                    borderWidth: theme.sizes.$activityIndicator.borderWidth,
+                },
                 animating: {
                     true: {},
                     false: {},
@@ -59,29 +64,5 @@ function createSpinnerStyles(theme: Theme) {
                 boxSizing: 'border-box',
             },
         } 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.
-// @ts-ignore - TS language server needs restart to pick up theme structure changes
-export const activityIndicatorStyles = StyleSheet.create((theme: Theme) => {
-  return {
-    container: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        variants: {
-            size: createContainerSizeVariants(theme),
-            animating: {
-                true: {
-                    opacity: 1,
-                },
-                false: {
-                    opacity: 0,
-                },
-            },
-        },
     },
-    spinner: createSpinnerStyles(theme),
-  };
-});
+}));

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,16 @@ const Alert = forwardRef<ComponentRef<typeof View>, AlertProps>(({
   testID,
   id,
 }, ref) => {
-  // Apply variants to stylesheet
-  alertStyles.useVariants({
-    type,
-    intent,
-  });
+  // 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);
 
@@ -47,7 +52,7 @@ const Alert = forwardRef<ComponentRef<typeof View>, AlertProps>(({
         <MaterialCommunityIcons
           name={displayIcon}
           size={20}
-          style={alertStyles.iconContainer}
+          style={iconContainerStyle}
         />
       );
     } else if (isValidElement(displayIcon)) {
@@ -60,33 +65,39 @@ 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}>
+      <View style={contentStyle}>
         {title && (
-          <Text style={alertStyles.title}>
+          <Text style={titleStyle}>
             {title}
           </Text>
         )}
 
         {message && (
-          <Text style={alertStyles.message}>
+          <Text style={messageStyle}>
             {message}
           </Text>
         )}
 
-        {children}
+        {children && (
+          typeof children === 'string' ? (
+            <Text style={messageStyle}>{children}</Text>
+          ) : (
+            children
+          )
+        )}
 
         {actions && (
-          <View style={alertStyles.actions}>
+          <View style={actionsStyle}>
             {actions}
           </View>
         )}
@@ -94,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"
@@ -102,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()()});
+});