@idealyst/components 1.2.30 → 1.2.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.30",
+  "version": "1.2.31",
   "description": "Shared component library for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/components#readme",
   "readme": "README.md",
@@ -56,7 +56,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.2.30",
+    "@idealyst/theme": "^1.2.31",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -106,8 +106,8 @@
     }
   },
   "devDependencies": {
-    "@idealyst/theme": "^1.2.30",
-    "@idealyst/tooling": "^1.2.4",
+    "@idealyst/theme": "^1.2.31",
+    "@idealyst/tooling": "^1.2.30",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",

package/plugin/web.js

@@ -248,6 +248,8 @@ module.exports = function ({ types: t }, options = {}) {
           'Alert': ['icon'],
           'Chip': ['icon', 'deleteIcon'],
           'Input': ['leftIcon', 'rightIcon'],
+          'TextInput': ['leftIcon', 'rightIcon'],
+          'IconButton': ['icon'],
         };
 
         const iconProps = iconPropMap[componentName];

package/src/ActivityIndicator/ActivityIndicator.native.tsx

@@ -37,6 +37,7 @@ const ActivityIndicator = forwardRef<IdealystElement, ActivityIndicatorProps>(({
   activityIndicatorStyles.useVariants({
     size: sizeVariant,
     animating,
+    intent,
   });
 
   // Call dynamic style with intent variant

package/src/ActivityIndicator/ActivityIndicator.styles.tsx

@@ -22,10 +22,10 @@ export type ActivityIndicatorDynamicProps = {
  */
 export const activityIndicatorStyles = defineStyle('ActivityIndicator', (theme: Theme) => ({
     container: (_props: ActivityIndicatorDynamicProps) => ({
+        display: 'flex' as const,
         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,
@@ -46,10 +46,6 @@ export const activityIndicatorStyles = defineStyle('ActivityIndicator', (theme:
                 height: theme.sizes.$activityIndicator.size,
                 borderWidth: theme.sizes.$activityIndicator.borderWidth,
             },
-            animating: {
-                true: {},
-                false: {},
-            },
             intent: {
                 color: theme.$intents.primary,
                 _web: {

package/src/ActivityIndicator/ActivityIndicator.web.tsx

@@ -42,8 +42,9 @@ const ActivityIndicator = forwardRef<IdealystElement, ActivityIndicatorProps>(({
 
   // Apply variants using the correct Unistyles 3.0 pattern
   activityIndicatorStyles.useVariants({
-    size: sizeVariant,
+    size: size,
     animating,
+    intent,
   });
 
   // Don't render if not animating and hidesWhenStopped is true
@@ -51,35 +52,21 @@ const ActivityIndicator = forwardRef<IdealystElement, ActivityIndicatorProps>(({
     return null;
   }
 
-  // Create the style array following the official documentation pattern
-  const containerStyleArray = [
-    (activityIndicatorStyles.container as any)({}),
-    customSize && {
-      width: customSize,
-      height: customSize,
-    },
-    style,
-  ];
+  // Dynamic props for style functions
+  const dynamicProps = { size: sizeVariant, animating, intent };
 
-  const spinnerStyleArray = [
-    (activityIndicatorStyles.spinner as any)({
-      intent,
-    }),
-    customSize ? {
-      width: customSize,
-      height: customSize,
-      borderWidth: Math.max(2, customSize / 10),
-    } : {},
-    color ? { borderTopColor: color, borderRightColor: color } : {},
-    // Add inline CSS animation
-    {
-      animation: animating ? 'spin 1s linear infinite' : undefined,
-    },
-  ];
+  // Use getWebProps - same pattern as Alert
+  const containerProps = getWebProps([
+    (activityIndicatorStyles.container as any)(dynamicProps),
+    customSize && { width: customSize, height: customSize },
+    style,
+  ]);
 
-  // Use getWebProps to generate className and ref for web
-  const containerProps = getWebProps(containerStyleArray);
-  const spinnerProps = getWebProps(spinnerStyleArray);
+  const spinnerProps = getWebProps([
+    (activityIndicatorStyles.spinner as any)(dynamicProps),
+    customSize && { width: customSize, height: customSize, borderWidth: Math.max(2, customSize / 10) },
+    color && { borderTopColor: color, borderRightColor: color },
+  ]);
 
   const mergedRef = useMergeRefs(ref, containerProps.ref);
 

package/src/Alert/Alert.native.tsx

@@ -32,8 +32,8 @@ const Alert = forwardRef<IdealystElement, AlertProps>(({
   testID,
   id,
 }, ref) => {
-  // Apply variants for size
-  alertStyles.useVariants({ size });
+  // Apply variants for size, intent, and type
+  alertStyles.useVariants({ size, intent, type });
 
   // Call all styles as functions to get theme-reactive styles
   const dynamicProps = { intent, type, size };

package/src/Alert/Alert.styles.tsx

@@ -1,5 +1,8 @@
 /**
- * Alert styles using defineStyle with $iterator expansion for size variants.
+ * Alert styles using defineStyle with variant expansion.
+ *
+ * Alert has compound logic between type+intent that's handled via compoundVariants.
+ * The $intents iterator in compoundVariants expands for all intent values.
  */
 import { StyleSheet } from 'react-native-unistyles';
 import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
@@ -20,10 +23,10 @@ export type AlertDynamicProps = {
 };
 
 /**
- * Alert styles with $iterator expansion for size variants.
+ * Alert styles with variant expansion for size/intent/type.
  *
- * Intent/type combinations use dynamic functions with inlined theme accesses
- * so Unistyles can trace all possible theme paths.
+ * The intent variant is expanded via $intents iterator.
+ * CompoundVariants handle type+intent combinations for colors.
  */
 export const alertStyles = defineStyle('Alert', (theme: Theme) => ({
     container: (_props: AlertDynamicProps) => ({
@@ -33,26 +36,33 @@ export const alertStyles = defineStyle('Alert', (theme: Theme) => ({
         borderWidth: 1,
         borderStyle: 'solid' as const,
         variants: {
-            type: {
-                filled: {
-                    backgroundColor: theme.$intents.primary,
-                    borderColor: theme.$intents.primary,
-                },
-                outlined: {
-                    backgroundColor: 'transparent',
-                    borderColor: theme.$intents.primary,
-                },
-                soft: {
-                    backgroundColor: theme.$intents.light,
-                    borderColor: theme.$intents.light,
-                },
-            },
             size: {
                 gap: theme.sizes.$alert.gap,
                 padding: theme.sizes.$alert.padding,
                 borderRadius: theme.sizes.$alert.borderRadius,
             },
+            // Intent variant - expands to primary, success, danger, etc.
+            intent: {
+                // Base styles per intent (overridden by type+intent compoundVariants)
+                backgroundColor: theme.$intents.primary,
+                borderColor: theme.$intents.primary,
+            },
+            type: {
+                filled: {},
+                outlined: {
+                    backgroundColor: 'transparent',
+                },
+                soft: {},
+            },
         },
+        compoundVariants: [
+            // filled: use intent primary for bg and border
+            { type: 'filled', styles: { backgroundColor: theme.$intents.primary, borderColor: theme.$intents.primary } },
+            // outlined: transparent bg, intent primary for border
+            { type: 'outlined', styles: { backgroundColor: 'transparent', borderColor: theme.$intents.primary } },
+            // soft: intent light for bg and border
+            { type: 'soft', styles: { backgroundColor: theme.$intents.light, borderColor: theme.$intents.light } },
+        ],
     }),
 
     iconContainer: (_props: AlertDynamicProps) => ({
@@ -63,63 +73,75 @@ export const alertStyles = defineStyle('Alert', (theme: Theme) => ({
         flexShrink: 0,
         marginTop: 2,
         variants: {
-            type: {
-                filled: {
-                    color: theme.$intents.contrast,
-                },
-                outlined: {
-                    color: theme.$intents.primary,
-                },
-                soft: {
-                    color: theme.$intents.primary,
-                },
-            },
             size: {
                 width: theme.sizes.$alert.iconSize,
                 height: theme.sizes.$alert.iconSize,
             },
+            intent: {
+                color: theme.$intents.primary,
+            },
+            type: {
+                filled: {},
+                outlined: {},
+                soft: {},
+            },
         },
+        compoundVariants: [
+            // filled: contrast color for icon
+            { type: 'filled', styles: { color: theme.$intents.contrast } },
+            // outlined/soft: primary color for icon
+            { type: 'outlined', styles: { color: theme.$intents.primary } },
+            { type: 'soft', styles: { color: theme.$intents.primary } },
+        ],
     }),
 
     title: (_props: AlertDynamicProps) => ({
         fontWeight: '600' as const,
         variants: {
-            type: {
-                filled: {
-                    color: theme.$intents.contrast,
-                },
-                outlined: {
-                    color: theme.$intents.primary,
-                },
-                soft: {
-                    color: theme.$intents.primary,
-                },
-            },
             size: {
                 fontSize: theme.sizes.$alert.titleFontSize,
                 lineHeight: theme.sizes.$alert.titleLineHeight,
             },
+            intent: {
+                color: theme.$intents.primary,
+            },
+            type: {
+                filled: {},
+                outlined: {},
+                soft: {},
+            },
         },
+        compoundVariants: [
+            // filled: contrast color for title
+            { type: 'filled', styles: { color: theme.$intents.contrast } },
+            // outlined/soft: primary color for title
+            { type: 'outlined', styles: { color: theme.$intents.primary } },
+            { type: 'soft', styles: { color: theme.$intents.primary } },
+        ],
     }),
 
     message: (_props: AlertDynamicProps) => ({
         variants: {
-            type: {
-                filled: {
-                    color: theme.$intents.contrast,
-                },
-                outlined: {
-                    color: theme.colors.text.primary,
-                },
-                soft: {
-                    color: theme.colors.text.primary,
-                },
-            },
             size: {
                 fontSize: theme.sizes.$alert.messageFontSize,
                 lineHeight: theme.sizes.$alert.messageLineHeight,
             },
+            intent: {
+                color: theme.colors.text.primary,
+            },
+            type: {
+                filled: {},
+                outlined: {},
+                soft: {},
+            },
         },
+        compoundVariants: [
+            // filled: contrast color for message
+            { type: 'filled', styles: { color: theme.$intents.contrast } },
+            // outlined/soft: use default text color (set in intent variant)
+            { type: 'outlined', styles: { color: theme.colors.text.primary } },
+            { type: 'soft', styles: { color: theme.colors.text.primary } },
+        ],
     }),
 
     content: (_props: AlertDynamicProps) => ({
@@ -128,7 +150,6 @@ export const alertStyles = defineStyle('Alert', (theme: Theme) => ({
         flexDirection: 'column' as const,
         variants: {
             size: {
-                // Gap is half of the main gap
                 gap: theme.sizes.$alert.gap,
             },
         },
@@ -177,22 +198,26 @@ export const alertStyles = defineStyle('Alert', (theme: Theme) => ({
         alignItems: 'center' as const,
         justifyContent: 'center' as const,
         variants: {
-            type: {
-                filled: {
-                    color: theme.$intents.contrast,
-                },
-                outlined: {
-                    color: theme.$intents.primary,
-                },
-                soft: {
-                    color: theme.$intents.primary,
-                },
-            },
             size: {
                 width: theme.sizes.$alert.closeIconSize,
                 height: theme.sizes.$alert.closeIconSize,
             },
+            intent: {
+                color: theme.$intents.primary,
+            },
+            type: {
+                filled: {},
+                outlined: {},
+                soft: {},
+            },
         },
+        compoundVariants: [
+            // filled: contrast color for close icon
+            { type: 'filled', styles: { color: theme.$intents.contrast } },
+            // outlined/soft: primary color for close icon
+            { type: 'outlined', styles: { color: theme.$intents.primary } },
+            { type: 'soft', styles: { color: theme.$intents.primary } },
+        ],
     }),
 }));
 

package/src/Alert/Alert.web.tsx

@@ -1,4 +1,4 @@
-import { isValidElement, forwardRef } from 'react';
+import { isValidElement, forwardRef, ElementType, useMemo } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { alertStyles } from './Alert.styles';
 import type { AlertProps } from './types';
@@ -8,13 +8,13 @@ import useMergeRefs from '../hooks/useMergeRefs';
 import type { IdealystElement } from '../utils/refTypes';
 
 // Default icons for each intent
-const defaultIcons: Record<string, string> = {
-  primary: 'information',
-  success: 'check-circle',
-  error: 'alert-circle',
-  warning: 'alert',
-  info: 'information',
-  neutral: 'record-circle',
+const defaultIcons: Record<string, React.ComponentType<any>> = {
+  primary: (props: any) => <IconSvg {...props} name="information" aria-label="information" />,
+  success: (props: any) => <IconSvg {...props} name="check-circle" aria-label="check-circle" />,
+  error: (props: any) => <IconSvg {...props} name="alert-circle" aria-label="alert-circle" />,
+  warning: (props: any) => <IconSvg {...props} name="alert" aria-label="alert" />,
+  info: (props: any) => <IconSvg {...props} name="information" aria-label="information" />,
+  neutral: (props: any) => <IconSvg {...props} name="record-circle" aria-label="record-circle" />,
 };
 
 /**
@@ -37,8 +37,8 @@ const Alert = forwardRef<IdealystElement, AlertProps>(({
   testID,
   id,
 }, ref) => {
-  // Apply variants for size
-  alertStyles.useVariants({ size });
+  // Apply variants for size, intent, and type
+  alertStyles.useVariants({ size, intent, type });
 
   // Compute dynamic styles with intent, type, and size
   const dynamicProps = { intent, type, size };
@@ -51,26 +51,25 @@ const Alert = forwardRef<IdealystElement, AlertProps>(({
   const closeButtonProps = getWebProps([(alertStyles.closeButton as any)(dynamicProps)]);
   const closeIconProps = getWebProps([(alertStyles.closeIcon as any)(dynamicProps)]);
 
-  const displayIcon = icon !== undefined ? icon : (showIcon ? defaultIcons[intent] : null);
-
-  // Helper to render icon
-  const renderIcon = (iconProp: typeof displayIcon) => {
-    if (!iconProp) return null;
-
-    if (isIconName(iconProp)) {
-      return (
-        <IconSvg
-          name={iconProp}
+  const Icon = useMemo(() => {
+    if (!showIcon) return null;
+    if (!icon) {
+      const Element = defaultIcons[intent];
+      if (Element) {
+        return <Element {...iconContainerProps} />;
+      }
+      return null
+    }  else if (typeof icon === 'string') {
+      return <IconSvg
+          name={icon}
           {...iconContainerProps}
-          aria-label={iconProp}
+          aria-label={icon}
         />
-      );
-    } else if (isValidElement(iconProp)) {
-      return iconProp;
+    } else if (isValidElement(icon)) {
+      return icon;
     }
-
     return null;
-  };
+  }, [icon, showIcon, intent]);
 
   const mergedRef = useMergeRefs(ref, containerProps.ref);
 
@@ -82,7 +81,7 @@ const Alert = forwardRef<IdealystElement, AlertProps>(({
       data-testid={testID}
       role="alert"
     >
-      {displayIcon && renderIcon(displayIcon)}
+      {Icon}
 
       <div {...contentProps}>
         {title && (