@idealyst/components 1.2.9 → 1.2.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.9",
+  "version": "1.2.12",
   "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.9",
+    "@idealyst/theme": "^1.2.12",
     "@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.9",
+    "@idealyst/theme": "^1.2.12",
     "@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/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/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/Platform/Platform.native.ts

@@ -0,0 +1,35 @@
+import { Platform as RNPlatform } from 'react-native';
+import type { PlatformAPI, PlatformSelectSpec, PlatformSystem } from './types';
+
+const system: PlatformSystem = RNPlatform.OS === 'ios' ? 'ios' : 'android';
+
+/**
+ * Platform utility for React Native (iOS and Android)
+ */
+const Platform: PlatformAPI = {
+    system,
+    isWeb: false,
+    isNative: true,
+    isIOS: RNPlatform.OS === 'ios',
+    isAndroid: RNPlatform.OS === 'android',
+
+    select<T>(spec: PlatformSelectSpec<T>): T | undefined {
+        // First check for specific platform
+        if (system === 'ios' && spec.ios !== undefined) {
+            return spec.ios;
+        }
+        if (system === 'android' && spec.android !== undefined) {
+            return spec.android;
+        }
+
+        // Then check for native fallback
+        if (spec.native !== undefined) {
+            return spec.native;
+        }
+
+        // Finally check for default
+        return spec.default;
+    },
+};
+
+export default Platform;

package/src/Platform/Platform.web.ts

@@ -0,0 +1,21 @@
+import type { PlatformAPI, PlatformSelectSpec, PlatformSystem } from './types';
+
+/**
+ * Platform utility for web
+ */
+const Platform: PlatformAPI = {
+    system: 'web' as PlatformSystem,
+    isWeb: true,
+    isNative: false,
+    isIOS: false,
+    isAndroid: false,
+
+    select<T>(spec: PlatformSelectSpec<T>): T | undefined {
+        if (spec.web !== undefined) {
+            return spec.web;
+        }
+        return spec.default;
+    },
+};
+
+export default Platform;

package/src/Platform/index.native.ts

@@ -0,0 +1,2 @@
+export { default } from './Platform.native';
+export * from './types';

package/src/Platform/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Platform.web';
+export * from './types';

package/src/Platform/types.ts

@@ -0,0 +1,65 @@
+/**
+ * Platform system types
+ */
+export type PlatformSystem = 'web' | 'ios' | 'android';
+
+/**
+ * Platform select specification
+ * Allows selecting a value based on the current platform
+ */
+export type PlatformSelectSpec<T> = {
+    web?: T;
+    ios?: T;
+    android?: T;
+    native?: T;  // Fallback for ios and android
+    default?: T; // Fallback for any platform
+};
+
+/**
+ * Platform API interface
+ */
+export interface PlatformAPI {
+    /**
+     * The current platform system: 'web', 'ios', or 'android'
+     */
+    system: PlatformSystem;
+
+    /**
+     * Whether the current platform is web
+     */
+    isWeb: boolean;
+
+    /**
+     * Whether the current platform is native (ios or android)
+     */
+    isNative: boolean;
+
+    /**
+     * Whether the current platform is iOS
+     */
+    isIOS: boolean;
+
+    /**
+     * Whether the current platform is Android
+     */
+    isAndroid: boolean;
+
+    /**
+     * Select a value based on the current platform
+     *
+     * @example
+     * const padding = Platform.select({
+     *   web: 20,
+     *   ios: 16,
+     *   android: 14,
+     *   default: 12,
+     * });
+     *
+     * @example
+     * const fontFamily = Platform.select({
+     *   web: 'Inter',
+     *   native: 'System',
+     * });
+     */
+    select<T>(spec: PlatformSelectSpec<T>): T | undefined;
+}

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}

package/src/index.native.ts

@@ -101,8 +101,11 @@ export * from './Chip/types';
 export { default as Breadcrumb } from './Breadcrumb';
 export * from './Breadcrumb/types';
 
-export { default as Link } from './Link';                                                               
-export * from './Link/types';  
+export { default as Link } from './Link';
+export * from './Link/types';
+
+export { default as Platform } from './Platform';
+export * from './Platform/types';
 
 export type { ButtonProps } from './Button/types';
 export type { TextProps } from './Text/types';
@@ -137,6 +140,7 @@ export type { SkeletonProps, SkeletonGroupProps, SkeletonShape, SkeletonAnimatio
 export type { ChipProps, ChipSize, ChipIntent } from './Chip/types';
 export type { BreadcrumbProps, BreadcrumbItem } from './Breadcrumb/types';
 export type { LinkProps } from './Link/types';
+export type { PlatformAPI, PlatformSystem, PlatformSelectSpec } from './Platform/types';
 
 // Event utilities
 export * from './utils/events';

package/src/index.ts

@@ -109,6 +109,9 @@ export * from './Chip/types';
 export { default as Breadcrumb } from './Breadcrumb';
 export * from './Breadcrumb/types';
 
+export { default as Platform } from './Platform';
+export * from './Platform/types';
+
 export type { ButtonProps } from './Button/types';
 export type { TextProps } from './Text/types';
 export type { ViewProps } from './View/types';
@@ -142,6 +145,7 @@ export type { AlertProps } from './Alert/types';
 export type { SkeletonProps, SkeletonGroupProps, SkeletonShape, SkeletonAnimation } from './Skeleton/types';
 export type { ChipProps, ChipSize, ChipIntent } from './Chip/types';
 export type { BreadcrumbProps, BreadcrumbItem } from './Breadcrumb/types';
+export type { PlatformAPI, PlatformSystem, PlatformSelectSpec } from './Platform/types';
 
 export { useMergeRefs };