@idealyst/components 1.2.8 → 1.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.8",
+  "version": "1.2.11",
   "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.8",
+    "@idealyst/theme": "^1.2.11",
     "@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.8",
+    "@idealyst/theme": "^1.2.11",
     "@idealyst/tooling": "^1.2.4",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",

package/src/Accordion/Accordion.native.tsx

@@ -1,7 +1,7 @@
 import React, { useState, forwardRef, useEffect, useMemo } from 'react';
 import { View, TouchableOpacity, LayoutChangeEvent } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
 import { accordionStyles } from './Accordion.styles';
 import Text from '../Text';
 import type { AccordionProps, AccordionItem as AccordionItemType } from './types';
@@ -96,7 +96,7 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
           </Text>
         </View>
         <Animated.View style={[iconStyle, animatedIconStyle]}>
-          <MaterialCommunityIcons
+          <MaterialDesignIcons
             name="chevron-down"
             size={20}
             style={iconStyle}

package/src/Alert/Alert.native.tsx

@@ -1,6 +1,6 @@
 import React, { isValidElement, forwardRef, ComponentRef } from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
 import { alertStyles } from './Alert.styles';
 import { isIconName } from '../Icon/icon-resolver';
 import type { AlertProps } from './types';
@@ -49,7 +49,7 @@ const Alert = forwardRef<ComponentRef<typeof View>, AlertProps>(({
 
     if (typeof displayIcon === 'string' && isIconName(displayIcon)) {
       return (
-        <MaterialCommunityIcons
+        <MaterialDesignIcons
           name={displayIcon}
           size={20}
           style={iconContainerStyle}
@@ -110,7 +110,7 @@ const Alert = forwardRef<ComponentRef<typeof View>, AlertProps>(({
           accessibilityLabel="Dismiss alert"
           accessibilityRole="button"
         >
-          <MaterialCommunityIcons
+          <MaterialDesignIcons
             name="close"
             size={16}
             style={closeIconStyle}

package/src/Badge/Badge.native.tsx

@@ -1,6 +1,6 @@
 import React, { isValidElement, forwardRef } from 'react';
 import { View, Text } from 'react-native';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
 import { BadgeProps } from './types';
 import { badgeStyles } from './Badge.styles';
 import { isIconName } from '../Icon/icon-resolver';
@@ -33,7 +33,7 @@ const Badge = forwardRef<View, BadgeProps>(({
 
     if (typeof icon === 'string' && isIconName(icon)) {
       return (
-        <MaterialCommunityIcons
+        <MaterialDesignIcons
           name={icon}
           size={iconSize}
           color={textStyle.color}

package/src/Button/Button.native.tsx

@@ -1,6 +1,6 @@
 import React, { ComponentRef, forwardRef, isValidElement, useMemo } from 'react';
 import { ActivityIndicator, StyleSheet as RNStyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
 import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
 import { buttonStyles } from './Button.styles';
 import { ButtonProps } from './types';
@@ -208,7 +208,7 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
       {hasIcons ? (
         <View style={[iconContainerStyle, { opacity: contentOpacity }]}>
           {leftIcon && (
-            <MaterialCommunityIcons
+            <MaterialDesignIcons
               name={leftIcon}
               size={iconSize}
               style={iconStyle}
@@ -218,7 +218,7 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
             {buttonContent}
           </Text>
           {rightIcon && (
-            <MaterialCommunityIcons
+            <MaterialDesignIcons
               name={rightIcon}
               size={iconSize}
               style={iconStyle}

package/src/Checkbox/Checkbox.native.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, forwardRef, useMemo } from 'react';
 import { View, Text, Pressable } from 'react-native';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
 import { CheckboxProps } from './types';
 import { checkboxStyles } from './Checkbox.styles';
 import { getNativeSelectionAccessibilityProps } from '../utils/accessibility';
@@ -118,7 +118,7 @@ const Checkbox = forwardRef<View, CheckboxProps>(({
       >
         <View style={checkboxStyle}>
           {(internalChecked || indeterminate) && (
-            <MaterialCommunityIcons
+            <MaterialDesignIcons
               name={indeterminate ? 'minus' : 'check'}
               size={14}
               color="#ffffff"

package/src/Chip/Chip.native.tsx

@@ -1,6 +1,6 @@
 import React, { isValidElement, forwardRef, ComponentRef } from 'react';
 import { Pressable, Text, View } from 'react-native';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
 import { chipStyles } from './Chip.styles';
 import { isIconName } from '../Icon/icon-resolver';
 import type { ChipProps } from './types';
@@ -59,7 +59,7 @@ const Chip = forwardRef<ComponentRef<typeof Pressable>, ChipProps>(({
     if (typeof icon === 'string' && isIconName(icon)) {
       return (
         <View style={iconStyle}>
-          <MaterialCommunityIcons
+          <MaterialDesignIcons
             name={icon}
             size={iconSize}
             style={iconStyle}
@@ -89,7 +89,7 @@ const Chip = forwardRef<ComponentRef<typeof Pressable>, ChipProps>(({
           accessibilityLabel="Delete"
           accessibilityRole="button"
         >
-          <MaterialCommunityIcons
+          <MaterialDesignIcons
             name="close"
             size={deleteIconSize}
             style={deleteIconStyle}

package/src/Icon/Icon.native.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, useMemo } from 'react';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
 import { IconProps } from './types';
 import { iconStyles } from './Icon.styles';
 import { useUnistyles } from 'react-native-unistyles';
@@ -28,7 +28,7 @@ const Icon = forwardRef<any, IconProps>(({
   const iconColor = iconStyle.color;
 
   return (
-    <MaterialCommunityIcons
+    <MaterialDesignIcons
       ref={ref}
       nativeID={id}
       size={iconSize}

package/src/Icon/Icon.styles.tsx

@@ -45,8 +45,8 @@ export const iconStyles = defineStyle('Icon', (theme: Theme) => ({
             }
         }
 
-        // Get color - priority: intent > color > textColor > default
-        // color takes precedence over textColor (as per design)
+        // Get color - priority: intent > color > textColor > default (textColor="primary")
+        // When no color prop is specified, defaults to theme's primary text color
         const iconColor = intent
             ? theme.intents[intent]?.primary
             : color

package/src/Icon/types.ts

@@ -65,6 +65,9 @@ interface IconWithTextColor extends IconBaseProps {
 }
 
 /**
- * Icon component props - accepts either `color` (palette) or `textColor` (text colors), but not both
+ * Icon component props - accepts either `color` (palette) or `textColor` (text colors), but not both.
+ *
+ * Color priority: intent > color > textColor > default (textColor="primary")
+ * When no color prop is specified, the icon defaults to the theme's primary text color.
  */
 export type IconProps = IconWithColor | IconWithTextColor;

package/src/Input/Input.native.tsx

@@ -1,6 +1,6 @@
 import React, { useState, isValidElement, useMemo, useEffect, useRef, useCallback } from 'react';
 import { View, TextInput, TouchableOpacity, Platform, TextInputProps } from 'react-native';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
 import { useUnistyles } from 'react-native-unistyles';
 import { InputProps } from './types';
 import { inputStyles } from './Input.styles';
@@ -220,7 +220,7 @@ const Input = React.forwardRef<TextInput, InputProps>(({
 
     if (typeof leftIcon === 'string') {
       return (
-        <MaterialCommunityIcons
+        <MaterialDesignIcons
           name={leftIcon}
           size={iconSize}
           color={iconColor}
@@ -239,7 +239,7 @@ const Input = React.forwardRef<TextInput, InputProps>(({
 
     if (typeof rightIcon === 'string') {
       return (
-        <MaterialCommunityIcons
+        <MaterialDesignIcons
           name={rightIcon}
           size={iconSize}
           color={iconColor}
@@ -279,7 +279,7 @@ const Input = React.forwardRef<TextInput, InputProps>(({
           disabled={disabled}
           accessibilityLabel={isPasswordVisible ? 'Hide password' : 'Show password'}
         >
-          <MaterialCommunityIcons
+          <MaterialDesignIcons
             name={isPasswordVisible ? 'eye-off' : 'eye'}
             size={iconSize}
             color={iconColor}

package/src/Input/Input.styles.tsx

@@ -168,6 +168,8 @@ export const inputStyles = defineStyle('Input', (theme: Theme) => ({
         variants: {
             size: {
                 marginLeft: theme.sizes.$input.iconMargin,
+                width: theme.sizes.$input.iconSize,
+                height: theme.sizes.$input.iconSize,
             },
         },
         _web: {

package/src/List/ListItem.native.tsx

@@ -1,7 +1,7 @@
 import React, { isValidElement, forwardRef, ComponentRef, useMemo } from 'react';
 import { View, Pressable, Text } from 'react-native';
 import { useUnistyles } from 'react-native-unistyles';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
 import { getColorFromString, Intent, Theme, Color } from '@idealyst/theme';
 import { listStyles } from './List.styles';
 import type { ListItemProps } from './types';
@@ -87,7 +87,7 @@ const ListItem = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pres
     if (typeof element === 'string') {
       const iconSize = styleKey === 'leading' ? leadingStyle.width : trailingIconStyle.width;
       return (
-        <MaterialCommunityIcons
+        <MaterialDesignIcons
           name={element}
           size={iconSize}
           color={resolvedIconColor}

package/src/Screen/Screen.styles.tsx

@@ -75,7 +75,6 @@ export const screenStyles = defineStyle('Screen', (theme: Theme) => ({
         _web: {
             display: 'flex',
             flexDirection: 'column',
-            minHeight: '100%',
             boxSizing: 'border-box',
         },
     }),

package/src/Select/Select.native.tsx

@@ -10,7 +10,7 @@ import {
   Platform,
   Animated,
 } from 'react-native';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
 import { SelectProps, SelectOption } from './types';
 import { selectStyles } from './Select.styles';
 import { BoundedModalContent } from '../internal/BoundedModalContent.native';
@@ -180,7 +180,7 @@ const Select = forwardRef<View, SelectProps>(({
   const renderChevron = () => {
     return (
       <View style={chevronStyle}>
-        <MaterialCommunityIcons
+        <MaterialDesignIcons
           name="chevron-down"
           style={chevronStyle}
         />
@@ -195,7 +195,7 @@ const Select = forwardRef<View, SelectProps>(({
     if (typeof icon === 'string') {
       return (
         <View style={iconStyle}>
-          <MaterialCommunityIcons
+          <MaterialDesignIcons
             style={iconStyle}
             name={icon}
           />
@@ -214,7 +214,7 @@ const Select = forwardRef<View, SelectProps>(({
     if (typeof icon === 'string') {
       return (
         <View style={optionIconStyle}>
-          <MaterialCommunityIcons
+          <MaterialDesignIcons
             style={optionIconStyle}
             name={icon}
           />

package/src/Slider/Slider.native.tsx

@@ -2,7 +2,7 @@ import React, { useState, useCallback, forwardRef, useMemo } from 'react';
 import { View } from 'react-native';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import Animated, { useSharedValue, useAnimatedStyle, runOnJS, withSpring } from 'react-native-reanimated';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
 import { sliderStyles } from './Slider.styles';
 import Text from '../Text';
 import type { SliderProps } from './types';
@@ -195,7 +195,7 @@ const Slider = forwardRef<View, SliderProps>(({
     if (typeof icon === 'string' && isIconName(icon)) {
       const iconStyle = (sliderStyles.thumbIcon as any)({ intent });
       return (
-        <MaterialCommunityIcons
+        <MaterialDesignIcons
           name={icon}
           size={iconStyle.width || 16}
           color={iconStyle.color}