@idealyst/components 1.2.41 → 1.2.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.41",
+  "version": "1.2.43",
   "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.41",
+    "@idealyst/theme": "^1.2.43",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -107,7 +107,7 @@
   },
   "devDependencies": {
     "@idealyst/blur": "^1.2.40",
-    "@idealyst/theme": "^1.2.41",
+    "@idealyst/theme": "^1.2.43",
     "@idealyst/tooling": "^1.2.30",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",

package/src/Avatar/Avatar.native.tsx

@@ -11,6 +11,7 @@ const Avatar = forwardRef<IdealystElement, AvatarProps>(({
   fallback,
   size = 'md',
   shape = 'circle',
+  color,
   style,
   testID,
   id,
@@ -42,8 +43,8 @@ const Avatar = forwardRef<IdealystElement, AvatarProps>(({
     setHasError(true);
   };
 
-  const avatarStyle = (avatarStyles.avatar as any)({});
-  const fallbackStyle = (avatarStyles.fallback as any)({});
+  const avatarStyle = (avatarStyles.avatar as any)({ color });
+  const fallbackStyle = (avatarStyles.fallback as any)({ color });
 
   return (
     <View ref={ref as any} nativeID={id} style={[avatarStyle, style]} testID={testID} {...nativeA11yProps}>

package/src/Avatar/Avatar.styles.tsx

@@ -3,7 +3,7 @@
  */
 import { StyleSheet } from 'react-native-unistyles';
 import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
-import type { Theme as BaseTheme, Size } from '@idealyst/theme';
+import type { Theme as BaseTheme, Size, Color } from '@idealyst/theme';
 
 // Required: Unistyles must see StyleSheet usage in original source to process this file
 void StyleSheet;
@@ -16,38 +16,71 @@ type AvatarShape = 'circle' | 'square';
 export type AvatarDynamicProps = {
     size?: Size;
     shape?: AvatarShape;
+    color?: Color;
 };
 
+/**
+ * Resolve a color string to an actual color value from the theme.
+ * Supports formats: 'blue', 'blue.500', etc.
+ */
+function resolveColor(theme: BaseTheme, color?: Color): string | undefined {
+    if (!color) return undefined;
+
+    const pallet = theme.colors.pallet;
+    if (!pallet) return undefined;
+
+    // Check if it's a pallet.shade format (e.g., 'blue.500')
+    if (color.includes('.')) {
+        const [palletName, shade] = color.split('.') as [string, string];
+        const palletColors = pallet[palletName as keyof typeof pallet];
+        if (palletColors && typeof palletColors === 'object') {
+            return (palletColors as Record<string, string>)[shade];
+        }
+    } else {
+        // Just a pallet name (e.g., 'blue') - use the 500 shade as default
+        const palletColors = pallet[color as keyof typeof pallet];
+        if (palletColors && typeof palletColors === 'object') {
+            return (palletColors as Record<string, string>)['500'];
+        }
+    }
+
+    return undefined;
+}
+
 /**
  * Avatar styles with size and shape variants.
  */
 export const avatarStyles = defineStyle('Avatar', (theme: Theme) => ({
-    avatar: (_props: AvatarDynamicProps) => ({
-        display: 'flex' as const,
-        alignItems: 'center' as const,
-        justifyContent: 'center' as const,
-        backgroundColor: theme.colors.surface.secondary,
-        overflow: 'hidden' as const,
-        variants: {
-            // $iterator expands for each avatar size
-            size: {
-                width: theme.sizes.$avatar.width,
-                height: theme.sizes.$avatar.height,
-            },
-            shape: {
-                circle: { borderRadius: 9999 },
-                square: { borderRadius: 8 },
+    avatar: ({ color }: AvatarDynamicProps) => {
+        const resolvedColor = resolveColor(theme as unknown as BaseTheme, color);
+        return {
+            display: 'flex' as const,
+            alignItems: 'center' as const,
+            justifyContent: 'center' as const,
+            backgroundColor: resolvedColor ?? theme.colors.surface.secondary,
+            overflow: 'hidden' as const,
+            variants: {
+                // $iterator expands for each avatar size
+                size: {
+                    width: theme.sizes.$avatar.width,
+                    height: theme.sizes.$avatar.height,
+                },
+                shape: {
+                    circle: { borderRadius: 9999 },
+                    square: { borderRadius: 8 },
+                },
             },
-        },
-    }),
+        };
+    },
 
     image: (_props: AvatarDynamicProps) => ({
         width: '100%' as const,
         height: '100%' as const,
     }),
 
-    fallback: (_props: AvatarDynamicProps) => ({
-        color: theme.colors.text.primary,
+    fallback: ({ color }: AvatarDynamicProps) => ({
+        // Use white text for colored backgrounds, primary text otherwise
+        color: color ? '#ffffff' : theme.colors.text.primary,
         fontWeight: '600' as const,
         variants: {
             size: {

package/src/Avatar/Avatar.web.tsx

@@ -16,6 +16,7 @@ const Avatar = forwardRef<IdealystElement, AvatarProps>(({
   fallback,
   size = 'md',
   shape = 'circle',
+  color,
   style,
   testID,
   id,
@@ -43,11 +44,11 @@ const Avatar = forwardRef<IdealystElement, AvatarProps>(({
     shape,
   });
 
-  const avatarStyleArray = [(avatarStyles.avatar as any)({}), style];
+  const avatarStyleArray = [(avatarStyles.avatar as any)({ color }), style];
   const avatarProps = getWebProps(avatarStyleArray);
 
   // Generate fallback text styles with proper theming and size
-  const fallbackStyleArray = [(avatarStyles.fallback as any)({})];
+  const fallbackStyleArray = [(avatarStyles.fallback as any)({ color })];
   const fallbackProps = getWebProps(fallbackStyleArray);
 
   const handleImageError = () => {

package/src/Card/Card.native.tsx

@@ -26,6 +26,7 @@ const Card = forwardRef<IdealystElement, CardProps>(({
   margin,
   marginVertical,
   marginHorizontal,
+  background,
   style,
   testID,
   id,
@@ -71,6 +72,7 @@ const Card = forwardRef<IdealystElement, CardProps>(({
     radius,
     clickable,
     disabled,
+    background,
     gap,
     padding,
     paddingVertical,

package/src/Card/Card.styles.tsx

@@ -3,7 +3,7 @@
  */
 import { StyleSheet } from 'react-native-unistyles';
 import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
-import type { Theme as BaseTheme, Intent, Radius } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent, Radius, Surface } from '@idealyst/theme';
 import { ViewStyleSize } from '../utils/viewStyleProps';
 
 // Required: Unistyles must see StyleSheet usage in original source to process this file
@@ -14,6 +14,7 @@ type Theme = ThemeStyleWrapper<BaseTheme>;
 
 type CardType = 'outlined' | 'elevated' | 'filled';
 type CardIntent = Intent | 'info' | 'neutral';
+type CardPadding = ViewStyleSize | 'none';
 
 export type CardVariants = {
     type: CardType;
@@ -21,13 +22,14 @@ export type CardVariants = {
     intent: CardIntent;
     clickable: boolean;
     disabled: boolean;
-    gap: ViewStyleSize;
-    padding: ViewStyleSize;
-    paddingVertical: ViewStyleSize;
-    paddingHorizontal: ViewStyleSize;
-    margin: ViewStyleSize;
-    marginVertical: ViewStyleSize;
-    marginHorizontal: ViewStyleSize;
+    background: Surface;
+    gap: CardPadding;
+    padding: CardPadding;
+    paddingVertical: CardPadding;
+    paddingHorizontal: CardPadding;
+    margin: CardPadding;
+    marginVertical: CardPadding;
+    marginHorizontal: CardPadding;
 };
 
 export type CardDynamicProps = {
@@ -65,59 +67,98 @@ export const cardStyles = defineStyle('Card', (theme: Theme) => ({
                 },
             },
             radius: {
-                    none: { borderRadius: 0 },
-                    xs: { borderRadius: 2 },
-                    sm: { borderRadius: 4 },
-                    md: { borderRadius: 8 },
-                    lg: { borderRadius: 12 },
-                    xl: { borderRadius: 16 },
-                },
-                clickable: {
-                    true: {
-                        _web: {
-                            cursor: 'pointer',
-                            transition: 'all 0.2s ease',
-                            _hover: {
-                                transform: 'translateY(-2px)',
-                                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06)',
-                            },
+                none: { borderRadius: 0 },
+                xs: { borderRadius: 2 },
+                sm: { borderRadius: 4 },
+                md: { borderRadius: 8 },
+                lg: { borderRadius: 12 },
+                xl: { borderRadius: 16 },
+            },
+            // $iterator expands for each surface color
+            background: {
+                backgroundColor: theme.colors.$surface,
+            },
+            clickable: {
+                true: {
+                    _web: {
+                        cursor: 'pointer',
+                        transition: 'all 0.2s ease',
+                        _hover: {
+                            transform: 'translateY(-2px)',
+                            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06)',
                         },
                     },
-                    false: {
-                        _web: { cursor: 'default' },
-                    },
-                },
-                disabled: {
-                    true: { opacity: 0.6, _web: { cursor: 'not-allowed' } },
-                    false: { opacity: 1 },
-                },
-                // $iterator expands for each view size
-                gap: {
-                    gap: theme.sizes.$view.spacing,
-                },
-                padding: {
-                    padding: theme.sizes.$view.padding,
-                },
-                paddingVertical: {
-                    paddingVertical: theme.sizes.$view.padding,
-                },
-                paddingHorizontal: {
-                    paddingHorizontal: theme.sizes.$view.padding,
                 },
-                margin: {
-                    margin: theme.sizes.$view.padding,
-                },
-                marginVertical: {
-                    marginVertical: theme.sizes.$view.padding,
-                },
-                marginHorizontal: {
-                    marginHorizontal: theme.sizes.$view.padding,
+                false: {
+                    _web: { cursor: 'default' },
                 },
             },
-            _web: {
-                display: 'flex',
-                flexDirection: 'column',
-                boxSizing: 'border-box',
+            disabled: {
+                true: { opacity: 0.6, _web: { cursor: 'not-allowed' } },
+                false: { opacity: 1 },
+            },
+            // $iterator expands for each view size, plus 'none'
+            gap: {
+                none: { gap: 0 },
+                xs: { gap: theme.sizes.view.xs.spacing },
+                sm: { gap: theme.sizes.view.sm.spacing },
+                md: { gap: theme.sizes.view.md.spacing },
+                lg: { gap: theme.sizes.view.lg.spacing },
+                xl: { gap: theme.sizes.view.xl.spacing },
+            },
+            padding: {
+                none: { padding: 0 },
+                xs: { padding: theme.sizes.view.xs.padding },
+                sm: { padding: theme.sizes.view.sm.padding },
+                md: { padding: theme.sizes.view.md.padding },
+                lg: { padding: theme.sizes.view.lg.padding },
+                xl: { padding: theme.sizes.view.xl.padding },
+            },
+            paddingVertical: {
+                none: { paddingVertical: 0 },
+                xs: { paddingVertical: theme.sizes.view.xs.padding },
+                sm: { paddingVertical: theme.sizes.view.sm.padding },
+                md: { paddingVertical: theme.sizes.view.md.padding },
+                lg: { paddingVertical: theme.sizes.view.lg.padding },
+                xl: { paddingVertical: theme.sizes.view.xl.padding },
+            },
+            paddingHorizontal: {
+                none: { paddingHorizontal: 0 },
+                xs: { paddingHorizontal: theme.sizes.view.xs.padding },
+                sm: { paddingHorizontal: theme.sizes.view.sm.padding },
+                md: { paddingHorizontal: theme.sizes.view.md.padding },
+                lg: { paddingHorizontal: theme.sizes.view.lg.padding },
+                xl: { paddingHorizontal: theme.sizes.view.xl.padding },
+            },
+            margin: {
+                none: { margin: 0 },
+                xs: { margin: theme.sizes.view.xs.padding },
+                sm: { margin: theme.sizes.view.sm.padding },
+                md: { margin: theme.sizes.view.md.padding },
+                lg: { margin: theme.sizes.view.lg.padding },
+                xl: { margin: theme.sizes.view.xl.padding },
+            },
+            marginVertical: {
+                none: { marginVertical: 0 },
+                xs: { marginVertical: theme.sizes.view.xs.padding },
+                sm: { marginVertical: theme.sizes.view.sm.padding },
+                md: { marginVertical: theme.sizes.view.md.padding },
+                lg: { marginVertical: theme.sizes.view.lg.padding },
+                xl: { marginVertical: theme.sizes.view.xl.padding },
+            },
+            marginHorizontal: {
+                none: { marginHorizontal: 0 },
+                xs: { marginHorizontal: theme.sizes.view.xs.padding },
+                sm: { marginHorizontal: theme.sizes.view.sm.padding },
+                md: { marginHorizontal: theme.sizes.view.md.padding },
+                lg: { marginHorizontal: theme.sizes.view.lg.padding },
+                xl: { marginHorizontal: theme.sizes.view.xl.padding },
             },
+        },
+        _web: {
+            display: 'flex',
+            flexDirection: 'column',
+            boxSizing: 'border-box',
+        },
     }),
 }));

package/src/Card/Card.web.tsx

@@ -20,6 +20,7 @@ const Card = forwardRef<IdealystElement, CardProps>(({
   variant,
   radius = 'md',
   intent: _intent,
+  background,
   clickable = false,
   onPress,
   onClick,
@@ -93,6 +94,7 @@ const Card = forwardRef<IdealystElement, CardProps>(({
     radius,
     clickable,
     disabled,
+    background,
     gap,
     padding,
     paddingVertical,

package/src/Card/types.ts

@@ -1,4 +1,4 @@
-import { Intent, Size } from '@idealyst/theme';
+import { Intent, Size, Surface } from '@idealyst/theme';
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { ContainerStyleProps } from '../utils/viewStyleProps';
@@ -9,6 +9,7 @@ import type { LayoutChangeEvent } from '../hooks/useWebLayout';
 export type CardIntentVariant = Intent;
 export type CardType = 'default' | 'outlined' | 'elevated' | 'filled';
 export type CardRadiusVariant = 'none' | Size;
+export type CardBackgroundVariant = Surface;
 
 /**
  * Container component for grouping related content with visual separation.
@@ -40,6 +41,11 @@ export interface CardProps extends ContainerStyleProps, InteractiveAccessibility
    */
   intent?: CardIntentVariant;
 
+  /**
+   * The background color from the surface palette (screen, primary, secondary, tertiary, inverse, etc.)
+   */
+  background?: CardBackgroundVariant;
+
   /**
    * Whether the card is clickable
    */

package/src/Select/Select.styles.tsx

@@ -104,6 +104,12 @@ export const selectStyles = defineStyle('Select', (theme: Theme) => ({
     triggerText: (_props: SelectDynamicProps) => ({
         color: theme.colors.text.primary,
         flex: 1,
+        textAlign: 'left' as const,
+        overflow: 'hidden' as const,
+        _web: {
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis',
+        },
         variants: {
             size: {
                 fontSize: theme.sizes.$select.fontSize,
@@ -113,6 +119,12 @@ export const selectStyles = defineStyle('Select', (theme: Theme) => ({
 
     placeholder: (_props: SelectDynamicProps) => ({
         color: theme.colors.text.secondary,
+        textAlign: 'left' as const,
+        overflow: 'hidden' as const,
+        _web: {
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis',
+        },
         variants: {
             size: {
                 fontSize: theme.sizes.$select.fontSize,

package/src/TextArea/TextArea.styles.tsx

@@ -37,13 +37,10 @@ function _createIntentVariants(theme: Theme) {
  * TextArea styles with static styles and variants.
  */
 export const textAreaStyles = defineStyle('TextArea', (theme: Theme) => ({
-    container: {
+    container: (_props: TextAreaVariants) => ({
         display: 'flex' as const,
         flexDirection: 'column' as const,
         gap: 4,
-        borderWidth: 1,
-        borderColor: theme.colors.border.primary,
-        borderRadius: theme.radii.md,
         variants: {
             margin: {
                 margin: theme.sizes.$view.padding,
@@ -55,9 +52,9 @@ export const textAreaStyles = defineStyle('TextArea', (theme: Theme) => ({
                 marginHorizontal: theme.sizes.$view.padding,
             },
         },
-    },
+    }),
 
-    label: {
+    label: (_props: TextAreaVariants) => ({
         fontSize: 14,
         fontWeight: '500' as const,
         color: theme.colors.text.primary,
@@ -67,21 +64,31 @@ export const textAreaStyles = defineStyle('TextArea', (theme: Theme) => ({
                 false: { opacity: 1 },
             },
         },
-    },
+    }),
 
-    textareaContainer: {
+    textareaContainer: (_props: TextAreaVariants) => ({
         position: 'relative' as const,
+        borderWidth: 1,
+        borderColor: theme.colors.border.primary,
+        borderRadius: theme.radii.md,
+        backgroundColor: theme.colors.surface.primary,
+        overflow: 'hidden' as const,
         variants: {
             disabled: {
                 true: { opacity: 0.8 },
                 false: { opacity: 1 },
             },
         },
-    },
+        _web: {
+            border: `1px solid ${theme.colors.border.primary}`,
+        },
+    }),
 
-    textarea: {
+    textarea: (_props: TextAreaVariants) => ({
         width: '100%',
         color: theme.colors.text.primary,
+        backgroundColor: 'transparent',
+        borderWidth: 0,
         variants: {
             size: {
                 fontSize: theme.sizes.$textarea.fontSize,
@@ -107,13 +114,15 @@ export const textAreaStyles = defineStyle('TextArea', (theme: Theme) => ({
         _web: {
             fontFamily: 'inherit',
             outline: 'none',
+            border: 'none',
             transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
             boxSizing: 'border-box',
             overflowY: 'hidden',
+            resize: 'none',
         },
-    },
+    }),
 
-    helperText: {
+    helperText: (_props: TextAreaVariants) => ({
         fontSize: 12,
         variants: {
             hasError: {
@@ -121,17 +130,17 @@ export const textAreaStyles = defineStyle('TextArea', (theme: Theme) => ({
                 false: { color: theme.colors.text.secondary },
             },
         },
-    },
+    }),
 
-    footer: {
+    footer: (_props: TextAreaVariants) => ({
         display: 'flex' as const,
         flexDirection: 'row' as const,
         justifyContent: 'space-between' as const,
         alignItems: 'center' as const,
         gap: 4,
-    },
+    }),
 
-    characterCount: {
+    characterCount: (_props: TextAreaVariants) => ({
         fontSize: 12,
         color: theme.colors.text.secondary,
         variants: {
@@ -153,5 +162,5 @@ export const textAreaStyles = defineStyle('TextArea', (theme: Theme) => ({
                 },
             },
         ] as CompoundVariants<keyof TextAreaVariants>,
-    },
+    }),
 }));