@idealyst/components 1.2.29 → 1.2.30

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.30",
   "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.30",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -106,7 +106,7 @@
     }
   },
   "devDependencies": {
-    "@idealyst/theme": "^1.2.29",
+    "@idealyst/theme": "^1.2.30",
     "@idealyst/tooling": "^1.2.4",
     "@mdi/react": "^1.6.1",
     "@types/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/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',
@@ -55,7 +56,7 @@ const ActivityIndicator = forwardRef<View, ActivityIndicatorProps>(({
         },
         style
       ]}
-      ref={ref}
+      ref={ref as any}
       nativeID={id}
       testID={testID}
       {...nativeA11yProps}

package/src/ActivityIndicator/ActivityIndicator.styles.tsx

@@ -37,32 +37,31 @@ 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',
+            animating: {
+                true: {},
+                false: {},
+            },
+            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',

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
+  alertStyles.useVariants({ size });
+
   // 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,9 @@
 /**
- * Alert styles using defineStyle with dynamic intent/type handling.
+ * Alert styles using defineStyle with $iterator expansion for size variants.
  */
 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 +16,136 @@ type AlertType = 'filled' | 'outlined' | 'soft';
 export type AlertDynamicProps = {
     intent?: Intent;
     type?: AlertType;
+    size?: Size;
 };
 
 /**
- * Alert styles with intent/type combination handling.
+ * Alert styles with $iterator expansion for size variants.
+ *
+ * Intent/type combinations use dynamic functions with inlined theme accesses
+ * so Unistyles can trace all possible theme paths.
  */
 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: {
+            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,
+            },
+        },
+    }),
 
-        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: {
+            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,
+            },
+        },
+    }),
 
-    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: {
+            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,
+            },
+        },
+    }),
 
-        return {
-            fontSize: 14,
-            lineHeight: 20,
-            color,
-        } as const;
-    },
+    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,
+            },
+        },
+    }),
 
     content: (_props: AlertDynamicProps) => ({
         flex: 1,
         display: 'flex' as const,
         flexDirection: 'column' as const,
-        gap: 4,
+        variants: {
+            size: {
+                // Gap is half of the main gap
+                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 +164,43 @@ 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: {
+            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,
+            },
+        },
+    }),
 }));
+
+// 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 },
+};

package/src/Alert/Alert.web.tsx

@@ -5,6 +5,7 @@ import type { AlertProps } from './types';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import { isIconName } from '../Icon/icon-resolver';
 import useMergeRefs from '../hooks/useMergeRefs';
+import type { IdealystElement } from '../utils/refTypes';
 
 // Default icons for each intent
 const defaultIcons: Record<string, string> = {
@@ -20,12 +21,13 @@ const defaultIcons: Record<string, string> = {
  * Notification banner for displaying important messages, warnings, or status updates.
  * Supports multiple intents, dismissibility, and custom actions.
  */
-const Alert = forwardRef<HTMLDivElement, AlertProps>(({
+const Alert = forwardRef<IdealystElement, AlertProps>(({
   title,
   message,
   children,
   intent = 'neutral',
   type = 'soft',
+  size = 'md',
   icon,
   showIcon = true,
   dismissible = false,
@@ -35,14 +37,17 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(({
   testID,
   id,
 }, ref) => {
-  // Compute dynamic styles with intent and type
-  const dynamicProps = { intent, type };
+  // Apply variants for size
+  alertStyles.useVariants({ size });
+
+  // Compute dynamic styles with intent, type, and size
+  const dynamicProps = { intent, type, size };
   const containerProps = getWebProps([(alertStyles.container as any)(dynamicProps), style as any]);
   const iconContainerProps = getWebProps([(alertStyles.iconContainer as any)(dynamicProps)]);
-  const contentProps = getWebProps([(alertStyles.content as any)({})]);
+  const contentProps = getWebProps([(alertStyles.content as any)(dynamicProps)]);
   const titleProps = getWebProps([(alertStyles.title as any)(dynamicProps)]);
   const messageProps = getWebProps([(alertStyles.message as any)(dynamicProps)]);
-  const actionsProps = getWebProps([(alertStyles.actions as any)({})]);
+  const actionsProps = getWebProps([(alertStyles.actions as any)(dynamicProps)]);
   const closeButtonProps = getWebProps([(alertStyles.closeButton as any)(dynamicProps)]);
   const closeIconProps = getWebProps([(alertStyles.closeIcon as any)(dynamicProps)]);
 

package/src/Alert/types.ts

@@ -1,29 +1,79 @@
 import type { StyleProp, ViewStyle } from 'react-native';
-import type { Intent } from '@idealyst/theme';
+import type { Intent, Size } from '@idealyst/theme';
 import { BaseProps } from '../utils/viewStyleProps';
 
 // Component-specific type aliases for future extensibility
 export type AlertIntentVariant = Intent;
-export type AlertType= 'filled' | 'outlined' | 'soft';
+export type AlertSizeVariant = Size;
+export type AlertType = 'filled' | 'outlined' | 'soft';
 
 /**
  * Feedback message component for displaying important information to users.
- * Supports multiple intent colors, dismissible behavior, and custom actions.
+ * Supports multiple intent colors, sizes, dismissible behavior, and custom actions.
  */
 export interface AlertProps extends BaseProps {
   /**
    * The title of the alert
    */
   title?: string;
+
+  /**
+   * The message content of the alert
+   */
   message?: string;
+
+  /**
+   * Custom content to display in the alert
+   */
   children?: React.ReactNode;
+
+  /**
+   * The intent/color scheme of the alert
+   */
   intent?: AlertIntentVariant;
+
+  /**
+   * The visual style type of the alert
+   */
   type?: AlertType;
+
+  /**
+   * The size of the alert
+   */
+  size?: AlertSizeVariant;
+
+  /**
+   * Custom icon to display. Pass `null` to hide icon.
+   */
   icon?: React.ReactNode;
+
+  /**
+   * Whether to show the default intent icon
+   */
   showIcon?: boolean;
+
+  /**
+   * Whether the alert can be dismissed
+   */
   dismissible?: boolean;
+
+  /**
+   * Called when the alert is dismissed
+   */
   onDismiss?: () => void;
+
+  /**
+   * Action buttons to display at the bottom of the alert
+   */
   actions?: React.ReactNode;
+
+  /**
+   * Additional styles
+   */
   style?: StyleProp<ViewStyle>;
+
+  /**
+   * Test ID for testing
+   */
   testID?: string;
 }