@idealyst/components 1.2.29 → 1.2.31

package/README.md

@@ -198,15 +198,15 @@ The library includes a comprehensive theme system with light and dark mode suppo
 All components use a consistent intent-based color system:
 
 - `primary`: Main brand actions
-- `neutral`: Secondary actions  
+- `neutral`: Secondary actions
 - `success`: Positive actions (save, confirm)
-- `error`: Destructive actions (delete, cancel)
+- `danger`: Destructive actions (delete, cancel)
 - `warning`: Caution actions
 
 ```tsx
 <Button variant="contained" intent="primary">Primary Action</Button>
 <Button variant="contained" intent="success">Save</Button>
-<Button variant="contained" intent="error">Delete</Button>
+<Button variant="contained" intent="danger">Delete</Button>
 ```
 
 ### Theme Integration

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.29",
+  "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.29",
+    "@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.29",
-    "@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/__tests__/web.test.ts

@@ -468,12 +468,12 @@ describe('MDI Icon Registry Babel Plugin', () => {
 
     it('does not detect icon-like strings in other props', () => {
       const code = `
-        <Button title="home" aria-label="eye">Click me</Button>
+        <Button data-name="home" aria-label="eye">Click me</Button>
       `;
       const result = transform(code);
       const icons = getDetectedIcons(result?.code);
 
-      // title and aria-label are not icon props
+      // data-name and aria-label are not icon props
       expect(icons).not.toContain('home');
       expect(icons).not.toContain('eye');
     });

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/Accordion/Accordion.native.tsx

@@ -6,6 +6,7 @@ import { accordionStyles } from './Accordion.styles';
 import Text from '../Text';
 import type { AccordionProps, AccordionItem as AccordionItemType } from './types';
 import { getNativeAccessibilityProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
 interface AccordionItemProps {
   item: AccordionItemType;
@@ -135,7 +136,7 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
   );
 };
 
-const Accordion = forwardRef<View, AccordionProps>(({
+const Accordion = forwardRef<IdealystElement, AccordionProps>(({
   items,
   allowMultiple = false,
   defaultExpanded = [],
@@ -204,7 +205,7 @@ const Accordion = forwardRef<View, AccordionProps>(({
   const containerStyle = (accordionStyles.container as any)({});
 
   return (
-    <View ref={ref} nativeID={id} style={[containerStyle, style]} testID={testID} {...nativeA11yProps}>
+    <View ref={ref as any} nativeID={id} style={[containerStyle, style]} testID={testID} {...nativeA11yProps}>
       {items.map((item, index) => (
         <AccordionItem
           key={item.id}

package/src/ActivityIndicator/ActivityIndicator.native.tsx

@@ -3,8 +3,9 @@ import { ActivityIndicator as RNActivityIndicator, View } from 'react-native';
 import { ActivityIndicatorProps } from './types';
 import { activityIndicatorStyles } from './ActivityIndicator.styles';
 import { getNativeLiveRegionAccessibilityProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
-const ActivityIndicator = forwardRef<View, ActivityIndicatorProps>(({
+const ActivityIndicator = forwardRef<IdealystElement, ActivityIndicatorProps>(({
   animating = true,
   size = 'md',
   intent = 'primary',
@@ -36,6 +37,7 @@ const ActivityIndicator = forwardRef<View, ActivityIndicatorProps>(({
   activityIndicatorStyles.useVariants({
     size: sizeVariant,
     animating,
+    intent,
   });
 
   // Call dynamic style with intent variant
@@ -55,7 +57,7 @@ const ActivityIndicator = forwardRef<View, ActivityIndicatorProps>(({
         },
         style
       ]}
-      ref={ref}
+      ref={ref as any}
       nativeID={id}
       testID={testID}
       {...nativeA11yProps}

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,
@@ -37,32 +37,27 @@ export const activityIndicatorStyles = defineStyle('ActivityIndicator', (theme:
         },
     }),
 
-    spinner: ({ intent = 'primary' }: ActivityIndicatorDynamicProps) => {
-        // Inline color access for Unistyles to trace
-        const color = theme.intents[intent].primary;
-
-        return {
-            borderRadius: 9999,
-            borderStyle: 'solid' as const,
-            color,
-            variants: {
-                size: {
-                    width: theme.sizes.$activityIndicator.size,
-                    height: theme.sizes.$activityIndicator.size,
-                    borderWidth: theme.sizes.$activityIndicator.borderWidth,
-                },
-                animating: {
-                    true: {},
-                    false: {},
-                },
+    spinner: (_props: ActivityIndicatorDynamicProps) => ({
+        borderRadius: 9999,
+        borderStyle: 'solid' as const,
+        variants: {
+            size: {
+                width: theme.sizes.$activityIndicator.size,
+                height: theme.sizes.$activityIndicator.size,
+                borderWidth: theme.sizes.$activityIndicator.borderWidth,
             },
-            _web: {
-                borderColor: 'transparent',
-                borderTopColor: color,
-                borderRightColor: color,
-                animation: 'spin 1s linear infinite',
-                boxSizing: 'border-box',
+            intent: {
+                color: theme.$intents.primary,
+                _web: {
+                    borderColor: 'transparent',
+                    borderTopColor: theme.$intents.primary,
+                    borderRightColor: theme.$intents.primary,
+                },
             },
-        } as const;
-    },
+        },
+        _web: {
+            animation: 'spin 1s linear infinite',
+            boxSizing: 'border-box',
+        },
+    }),
 }));

package/src/ActivityIndicator/ActivityIndicator.web.tsx

@@ -4,12 +4,13 @@ import { ActivityIndicatorProps } from './types';
 import { activityIndicatorStyles } from './ActivityIndicator.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebLiveRegionAriaProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
 /**
  * Spinning loading indicator for async operations and content loading.
  * Supports intent-based coloring and automatic hiding when stopped.
  */
-const ActivityIndicator = forwardRef<HTMLDivElement, ActivityIndicatorProps>(({
+const ActivityIndicator = forwardRef<IdealystElement, ActivityIndicatorProps>(({
   animating = true,
   size = 'md',
   intent = 'primary',
@@ -41,8 +42,9 @@ const ActivityIndicator = forwardRef<HTMLDivElement, 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
@@ -50,35 +52,21 @@ const ActivityIndicator = forwardRef<HTMLDivElement, 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

@@ -1,9 +1,10 @@
-import { isValidElement, forwardRef, ComponentRef } from 'react';
+import { isValidElement, forwardRef } from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
 import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
-import { alertStyles } from './Alert.styles';
+import { alertStyles, alertSizeConfig } from './Alert.styles';
 import { isIconName } from '../Icon/icon-resolver';
 import type { AlertProps } from './types';
+import type { IdealystElement } from '../utils/refTypes';
 
 // Default icon names for each intent
 const defaultIcons: Record<string, string> = {
@@ -15,12 +16,13 @@ const defaultIcons: Record<string, string> = {
   neutral: 'circle',
 };
 
-const Alert = forwardRef<ComponentRef<typeof View>, AlertProps>(({
+const Alert = forwardRef<IdealystElement, AlertProps>(({
   title,
   message,
   children,
   intent = 'neutral',
   type = 'soft',
+  size = 'md',
   icon,
   showIcon = true,
   dismissible = false,
@@ -30,17 +32,25 @@ const Alert = forwardRef<ComponentRef<typeof View>, AlertProps>(({
   testID,
   id,
 }, ref) => {
+  // 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 };
+  const dynamicProps = { intent, type, size };
   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 contentStyle = (alertStyles.content as any)(dynamicProps);
+  const actionsStyle = (alertStyles.actions as any)(dynamicProps);
+  const closeButtonStyle = (alertStyles.closeButton as any)(dynamicProps);
   const closeIconStyle = (alertStyles.closeIcon as any)(dynamicProps);
 
+  // Get size-specific icon dimensions
+  const sizeConfig = alertSizeConfig[size];
+  const iconSize = sizeConfig.iconSize;
+  const closeIconSize = sizeConfig.closeIconSize;
+
   const displayIcon = icon !== undefined ? icon : (showIcon ? defaultIcons[intent] : null);
 
   // Helper to render icon
@@ -51,7 +61,7 @@ const Alert = forwardRef<ComponentRef<typeof View>, AlertProps>(({
       return (
         <MaterialDesignIcons
           name={displayIcon}
-          size={20}
+          size={iconSize}
           style={iconContainerStyle}
         />
       );
@@ -63,7 +73,7 @@ const Alert = forwardRef<ComponentRef<typeof View>, AlertProps>(({
 
   return (
     <View
-      ref={ref}
+      ref={ref as any}
       nativeID={id}
       style={[containerStyle, style]}
       testID={testID}
@@ -112,7 +122,7 @@ const Alert = forwardRef<ComponentRef<typeof View>, AlertProps>(({
         >
           <MaterialDesignIcons
             name="close"
-            size={16}
+            size={closeIconSize}
             style={closeIconStyle}
           />
         </TouchableOpacity>

package/src/Alert/Alert.styles.tsx

@@ -1,9 +1,12 @@
 /**
- * Alert styles using defineStyle with dynamic intent/type handling.
+ * 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';
-import type { Theme as BaseTheme, Intent } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent, Size } from '@idealyst/theme';
 
 // Required: Unistyles must see StyleSheet usage in original source to process this file
 void StyleSheet;
@@ -16,98 +19,154 @@ type AlertType = 'filled' | 'outlined' | 'soft';
 export type AlertDynamicProps = {
     intent?: Intent;
     type?: AlertType;
+    size?: Size;
 };
 
 /**
- * Alert styles with intent/type combination handling.
+ * Alert styles with variant expansion for size/intent/type.
+ *
+ * The intent variant is expanded via $intents iterator.
+ * CompoundVariants handle type+intent combinations for colors.
  */
 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,
-            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,
-            alignSelf: 'flex-start' as const,
-            flexShrink: 0,
-            width: 24,
-            height: 24,
-            marginTop: 2,
-            color,
-        } as const;
-    },
-
-    title: ({ intent = 'neutral', type = 'soft' }: AlertDynamicProps) => {
-        const intentValue = theme.intents[intent];
-        const color = type === 'filled' ? intentValue.contrast : intentValue.primary;
+    container: (_props: AlertDynamicProps) => ({
+        display: 'flex' as const,
+        flexDirection: 'row' as const,
+        alignItems: 'flex-start' as const,
+        borderWidth: 1,
+        borderStyle: 'solid' as const,
+        variants: {
+            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 } },
+        ],
+    }),
 
-        return {
-            fontSize: 16,
-            lineHeight: 24,
-            fontWeight: '600' as const,
-            color,
-        } as const;
-    },
+    iconContainer: (_props: AlertDynamicProps) => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        alignSelf: 'flex-start' as const,
+        flexShrink: 0,
+        marginTop: 2,
+        variants: {
+            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 } },
+        ],
+    }),
 
-    message: ({ intent = 'neutral', type = 'soft' }: AlertDynamicProps) => {
-        const intentValue = theme.intents[intent];
-        const color = type === 'filled' ? intentValue.contrast : theme.colors.text.primary;
+    title: (_props: AlertDynamicProps) => ({
+        fontWeight: '600' as const,
+        variants: {
+            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 } },
+        ],
+    }),
 
-        return {
-            fontSize: 14,
-            lineHeight: 20,
-            color,
-        } as const;
-    },
+    message: (_props: AlertDynamicProps) => ({
+        variants: {
+            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) => ({
         flex: 1,
         display: 'flex' as const,
         flexDirection: 'column' as const,
-        gap: 4,
+        variants: {
+            size: {
+                gap: theme.sizes.$alert.gap,
+            },
+        },
     }),
 
     actions: (_props: AlertDynamicProps) => ({
-        marginTop: 4,
         display: 'flex' as const,
         flexDirection: 'row' as const,
-        gap: 8,
+        variants: {
+            size: {
+                marginTop: theme.sizes.$alert.gap,
+                gap: theme.sizes.$alert.gap,
+            },
+        },
     }),
 
     closeButton: (_props: AlertDynamicProps) => ({
-        padding: 4,
-        borderRadius: 4,
         display: 'flex' as const,
         alignItems: 'center' as const,
         justifyContent: 'center' as const,
@@ -126,19 +185,47 @@ export const alertStyles = defineStyle('Alert', (theme: Theme) => ({
                 backgroundColor: 'rgba(0, 0, 0, 0.1)',
             },
         },
+        variants: {
+            size: {
+                padding: theme.sizes.$alert.padding,
+                borderRadius: theme.sizes.$alert.borderRadius,
+            },
+        },
     }),
 
-    closeIcon: ({ 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,
-            width: 16,
-            height: 16,
-            color,
-        } as const;
-    },
+    closeIcon: (_props: AlertDynamicProps) => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        variants: {
+            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 } },
+        ],
+    }),
 }));
+
+// Export theme sizes for use in components (for icon sizing in native)
+export const alertSizeConfig = {
+    xs: { padding: 8, gap: 6, borderRadius: 4, titleFontSize: 12, titleLineHeight: 16, messageFontSize: 11, messageLineHeight: 14, iconSize: 16, closeIconSize: 12 },
+    sm: { padding: 12, gap: 8, borderRadius: 6, titleFontSize: 14, titleLineHeight: 20, messageFontSize: 12, messageLineHeight: 16, iconSize: 20, closeIconSize: 14 },
+    md: { padding: 16, gap: 10, borderRadius: 8, titleFontSize: 16, titleLineHeight: 24, messageFontSize: 14, messageLineHeight: 20, iconSize: 24, closeIconSize: 16 },
+    lg: { padding: 20, gap: 12, borderRadius: 10, titleFontSize: 18, titleLineHeight: 28, messageFontSize: 16, messageLineHeight: 24, iconSize: 28, closeIconSize: 18 },
+    xl: { padding: 24, gap: 14, borderRadius: 12, titleFontSize: 20, titleLineHeight: 32, messageFontSize: 18, messageLineHeight: 28, iconSize: 32, closeIconSize: 20 },
+};