@idealyst/components 1.1.8 → 1.2.0

package/src/Icon/IconSvg/IconSvg.web.tsx

@@ -1,38 +1,59 @@
 import React from 'react';
 import MdiIcon from '@mdi/react';
+import { IconRegistry } from '../IconRegistry';
 
 /**
- * Internal component for rendering SVG icons directly from MDI paths.
+ * Internal component for rendering SVG icons from the icon registry.
  * This is used internally by components like Button, Badge, etc. to render icons
  * without going through the full Icon component.
  *
- * The path prop should be provided by the Babel plugin transformation.
+ * Icons are looked up from the registry by name. The registry is populated
+ * at build time by the Babel plugin.
  */
 interface IconSvgProps {
-  path?: string; // MDI icon path, provided by Babel plugin
+  /** Icon name in canonical format (e.g., "home", "account-circle") */
+  name: string;
   size?: string | number;
   color?: string;
   style?: React.CSSProperties;
+  className?: string;
   'aria-label'?: string;
   'data-testid'?: string;
 }
 
 export const IconSvg: React.FC<IconSvgProps> = ({
-  path,
+  name,
   size = '1em',
   color = 'currentColor',
   style,
+  className,
   'aria-label': ariaLabel,
   'data-testid': testID,
   ...rest
 }) => {
+  // Look up path from registry
+  const path = IconRegistry.get(name);
+
+  // Warn in development if icon is not registered
+  if (!path && process.env.NODE_ENV !== 'production') {
+    console.warn(
+      `[IconSvg] Icon "${name}" is not registered. ` +
+      `Add it to the 'icons' array in your babel config.`
+    );
+  }
+
+  if (!path) {
+    return null;
+  }
+
   return (
     <MdiIcon
       style={style}
+      className={className}
       path={path}
       size={size}
       color={color}
-      aria-label={ariaLabel}
+      aria-label={ariaLabel || name}
       data-testid={testID}
       {...rest}
     />

package/src/Icon/icon-resolver.ts

@@ -1,62 +1,31 @@
 /**
  * Runtime utility for resolving MDI icon names to their SVG paths.
- * This is used when icon names are passed dynamically (e.g., in arrays)
- * and cannot be transformed by the Babel plugin at build time.
- */
-
-import * as mdiIcons from '@mdi/js';
-
-/**
- * Formats an icon name from kebab-case to the MDI export name format.
- * Examples:
- *   "home" -> "mdiHome"
- *   "account-circle" -> "mdiAccountCircle"
- *   "star-outline" -> "mdiStarOutline"
+ *
+ * Icons are looked up from the IconRegistry, which is populated at build time
+ * by the Babel plugin. This replaces the previous approach of importing all
+ * 7,447 icons from @mdi/js.
  */
-function formatIconName(name: string): string {
-  if (!name || typeof name !== 'string') {
-    return 'mdiHelpCircle';
-  }
-
-  // Remove mdi: prefix if present
-  const cleanName = name.startsWith('mdi:') ? name.substring(4) : name;
 
-  // Check if the name contains only valid characters
-  if (!/^[a-zA-Z0-9-_]+$/.test(cleanName)) {
-    console.warn(
-      `[icon-resolver] Invalid icon name "${name}" (contains special characters), using "help-circle" as fallback`
-    );
-    return 'mdiHelpCircle';
-  }
-
-  // Convert kebab-case to PascalCase
-  const pascalCase = cleanName
-    .split('-')
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-    .join('');
-
-  return `mdi${pascalCase}`;
-}
+import { IconRegistry } from './IconRegistry';
 
 /**
- * Resolves an icon name to its SVG path data.
- * Returns undefined if the icon is not found.
+ * Resolves an icon name to its SVG path data from the registry.
+ * Returns undefined if the icon is not registered.
  *
  * @param iconName - The icon name in kebab-case (e.g., "home", "account-circle")
  * @returns The SVG path string or undefined if not found
  */
 export function resolveIconPath(iconName: string): string | undefined {
-  const mdiIconName = formatIconName(iconName);
-  const iconPath = (mdiIcons as any)[mdiIconName];
+  const path = IconRegistry.get(iconName);
 
-  if (!iconPath) {
+  if (!path && process.env.NODE_ENV !== 'production') {
     console.warn(
-      `[icon-resolver] Icon "${iconName}" (${mdiIconName}) not found in @mdi/js, using help-circle as fallback`
+      `[icon-resolver] Icon "${iconName}" is not registered. ` +
+      `Add it to the 'icons' array in your babel config.`
     );
-    return (mdiIcons as any).mdiHelpCircle;
   }
 
-  return iconPath;
+  return path;
 }
 
 /**

package/src/Icon/index.native.ts

@@ -1,3 +1,4 @@
 // React Native-specific Icon export
 export { default } from './Icon.native';
-export * from './types'; 
+export * from './types';
+export { IconRegistry } from './IconRegistry.native'; 

package/src/Icon/index.ts

@@ -3,3 +3,4 @@ import IconComponent from './Icon.web';
 export default IconComponent;
 export { IconComponent as Icon };
 export * from './types';
+export { IconRegistry } from './IconRegistry';

package/src/Icon/index.web.ts

@@ -3,3 +3,4 @@ import IconComponent from './Icon.web';
 export default IconComponent;
 export { IconComponent as Icon };
 export * from './types';
+export { IconRegistry } from './IconRegistry';

package/src/Input/Input.styles.tsx

@@ -28,95 +28,68 @@ export type InputDynamicProps = {
  * Input styles with type/state handling.
  */
 export const inputStyles = defineStyle('Input', (theme: Theme) => ({
-    container: ({ type = 'outlined', focused = false, hasError = false, disabled = false }: InputDynamicProps) => {
-        const focusColor = theme.intents.primary.primary;
-        const errorColor = theme.intents.error.primary;
-
-        // Base styles by type
-        let backgroundColor = 'transparent';
-        let borderWidth = 1;
-        let borderColor = theme.colors.border.primary;
-
-        if (type === 'filled') {
-            backgroundColor = theme.colors.surface.secondary;
-            borderWidth = 0;
-        } else if (type === 'bare') {
-            backgroundColor = 'transparent';
-            borderWidth = 0;
-        }
-
-        // Error state takes precedence
-        if (hasError) {
-            borderColor = errorColor;
-            borderWidth = 1;
-        }
-
-        // Focus state (error still takes precedence for color)
-        if (focused && !hasError) {
-            borderColor = focusColor;
-            borderWidth = 1;
-        }
-
-        // Disabled state
-        if (disabled) {
-            backgroundColor = theme.colors.surface.secondary;
-        }
-
-        // Web-specific border and shadow
-        let webBorder = `1px solid ${borderColor}`;
-        let webBoxShadow = 'none';
-
-        if (type === 'filled' || type === 'bare') {
-            webBorder = 'none';
-        }
-
-        if (hasError) {
-            webBorder = `1px solid ${errorColor}`;
-            if (focused) {
-                webBoxShadow = `0 0 0 2px ${errorColor}20`;
-            }
-        } else if (focused) {
-            webBorder = `1px solid ${focusColor}`;
-            webBoxShadow = `0 0 0 2px ${focusColor}20`;
-        }
-
-        return {
-            display: 'flex' as const,
-            flexDirection: 'row' as const,
-            alignItems: 'center' as const,
-            width: '100%',
-            minWidth: 0,
-            borderRadius: 8,
-            backgroundColor,
-            borderWidth,
-            borderColor,
-            borderStyle: 'solid' as const,
-            opacity: disabled ? 0.6 : 1,
-            variants: {
-                // $iterator expands for each input size
-                size: {
-                    height: theme.sizes.$input.height,
-                    paddingHorizontal: theme.sizes.$input.paddingHorizontal,
+    container: ({ type = 'outlined', focused = false, hasError = false, disabled = false }: InputDynamicProps) => ({
+        display: 'flex' as const,
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        width: '100%',
+        minWidth: 0,
+        borderRadius: theme.radii.md,
+        borderWidth: 1,
+        borderStyle: 'solid' as const,
+        borderColor: theme.colors.border.primary,
+        variants: {
+            type: {
+                outlined: {
+                    backgroundColor: theme.colors.surface.primary,
+                    borderColor: theme.colors.border.primary,
+                },
+                filled: {
+                    backgroundColor: theme.colors.surface.secondary,
+                    borderColor: 'transparent',
                 },
-                margin: {
-                    margin: theme.sizes.$view.padding,
+                bare: {
+                    backgroundColor: 'transparent',
+                    borderWidth: 0,
+                    borderColor: 'transparent',
                 },
-                marginVertical: {
-                    marginVertical: theme.sizes.$view.padding,
+            },
+            focused: {
+                true: {
+                    borderColor: theme.intents.primary.primary,
                 },
-                marginHorizontal: {
-                    marginHorizontal: theme.sizes.$view.padding,
+                false: {
+                    
                 },
             },
-            _web: {
-                boxSizing: 'border-box',
-                transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
-                border: webBorder,
-                boxShadow: webBoxShadow,
-                cursor: disabled ? 'not-allowed' : 'text',
+            disabled: {
+                true: { opacity: 0.8, _web: { cursor: 'not-allowed' } },
+                false: { opacity: 1 }
+            },
+            hasError: {
+                true: { borderColor: theme.intents.error.primary },
+                false: { borderColor: theme.colors.border.primary },
+            },
+            // $iterator expands for each input size
+            size: {
+                height: theme.sizes.$input.height,
+                paddingHorizontal: theme.sizes.$input.paddingHorizontal,
             },
-        } as const;
-    },
+            margin: {
+                margin: theme.sizes.$view.padding,
+            },
+            marginVertical: {
+                marginVertical: theme.sizes.$view.padding,
+            },
+            marginHorizontal: {
+                marginHorizontal: theme.sizes.$view.padding,
+            },
+        },
+        _web: {
+            boxSizing: 'border-box',
+            transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
+        }
+    }),
 
     input: (_props: InputDynamicProps) => ({
         flex: 1,

package/src/Input/Input.web.tsx

@@ -1,7 +1,7 @@
 import React, { isValidElement, useState, useMemo, useRef } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
-import { isIconName, resolveIconPath } from '../Icon/icon-resolver';
+import { isIconName } from '../Icon/icon-resolver';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { inputStyles } from './Input.styles';
 import { InputProps } from './types';
@@ -184,10 +184,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
     if (!leftIcon) return null;
 
     if (isIconName(leftIcon)) {
-      const iconPath = resolveIconPath(leftIcon);
       return (
         <IconSvg
-          path={iconPath}
+          name={leftIcon}
           {...leftIconProps}
           aria-label={leftIcon}
         />
@@ -204,10 +203,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
     if (!rightIcon) return null;
 
     if (isIconName(rightIcon)) {
-      const iconPath = resolveIconPath(rightIcon);
       return (
         <IconSvg
-          path={iconPath}
+          name={rightIcon}
           {...rightIconProps}
           aria-label={rightIcon}
         />
@@ -222,10 +220,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
   // Helper to render password toggle icon
   const renderPasswordToggleIcon = () => {
     const iconName = isPasswordVisible ? 'eye-off' : 'eye';
-    const iconPath = resolveIconPath(iconName);
     return (
       <IconSvg
-        path={iconPath}
+        name={iconName}
         {...passwordToggleIconProps}
         aria-label={iconName}
       />
@@ -290,4 +287,4 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
 
 Input.displayName = 'Input';
 
-export default Input; 
+export default Input;

package/src/List/ListItem.native.tsx

@@ -66,18 +66,17 @@ const ListItem = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pres
   const trailingStyle = (listStyles.trailing as any)({});
   const trailingIconStyle = (listStyles.trailingIcon as any)({});
   const labelContainerStyle = (listStyles.labelContainer as any)({});
-  const itemContentStyle = (listStyles.itemContent as any)({});
 
   // Resolve icon color - check intents first, then color palette
-  const resolvedIconColor = (() => {
-    if (!iconColor) return undefined;
+  const resolvedIconColor = useMemo(() => {
+    if (!iconColor) return trailingIconStyle.color || leadingStyle.color;
     // Check if it's an intent name
     if (iconColor in theme.intents) {
       return theme.intents[iconColor as Intent]?.primary;
     }
     // Otherwise try color palette
     return getColorFromString(theme, iconColor as Color);
-  })();
+  }, [iconColor, theme, trailingIconStyle.color, leadingStyle.color]);
 
   // Helper to render leading/trailing icons
   const renderElement = (element: typeof leading | typeof trailing, styleKey: 'leading' | 'trailingIcon') => {
@@ -85,12 +84,12 @@ const ListItem = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pres
 
     // If it's a string, treat it as an icon name
     if (typeof element === 'string') {
-      const iconStyle = styleKey === 'leading' ? leadingStyle : trailingIconStyle;
+      const iconSize = styleKey === 'leading' ? leadingStyle.width : trailingIconStyle.width;
       return (
         <MaterialCommunityIcons
           name={element}
-          size={iconStyle.width}
-          color={resolvedIconColor ?? iconStyle.color}
+          size={iconSize}
+          color={resolvedIconColor}
         />
       );
     } else if (isValidElement(element)) {

package/src/List/ListItem.web.tsx

@@ -5,7 +5,7 @@ import { getColorFromString, Intent, Theme, Color } from '@idealyst/theme';
 import { listStyles } from './List.styles';
 import type { ListItemProps } from './types';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
-import { resolveIconPath, isIconName } from '../Icon/icon-resolver';
+import { isIconName } from '../Icon/icon-resolver';
 import { useListContext } from './ListContext';
 
 const ListItem: React.FC<ListItemProps> = ({
@@ -77,10 +77,10 @@ const ListItem: React.FC<ListItemProps> = ({
     if (!element) return null;
 
     if (isIconName(element)) {
-      const iconPath = resolveIconPath(element);
+      // Use IconSvg with name - registry lookup happens inside
       return (
         <IconSvg
-          path={iconPath}
+          name={element}
           color={resolvedIconColor || 'currentColor'}
           aria-label={element}
         />

package/src/Menu/MenuItem.web.tsx

@@ -3,7 +3,7 @@ import { getWebProps } from 'react-native-unistyles/web';
 import { menuItemStyles } from './MenuItem.styles';
 import type { MenuItem as MenuItemType, MenuSizeVariant } from './types';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
-import { resolveIconPath, isIconName } from '../Icon/icon-resolver';
+import { isIconName } from '../Icon/icon-resolver';
 import useMergeRefs from '../hooks/useMergeRefs';
 
 interface MenuItemProps {
@@ -33,12 +33,10 @@ const MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(({ item, onPress,
     if (!item.icon) return null;
 
     if (isIconName(item.icon)) {
-      // Resolve icon name to path and render with IconSvg
-      const iconPath = resolveIconPath(item.icon);
-      // IconSvg uses size="1em" by default, sized by container's fontSize from styles
+      // Use IconSvg with name - registry lookup happens inside
       return (
         <IconSvg
-          path={iconPath}
+          name={item.icon}
           color="currentColor"
           aria-label={item.icon}
         />

package/src/Screen/Screen.native.tsx

@@ -6,7 +6,7 @@ import { screenStyles } from './Screen.styles';
 
 const Screen = forwardRef<RNView | RNScrollView, ScreenProps>(({
   children,
-  background = 'primary',
+  background = 'screen',
   safeArea = true,
   scrollable = true,
   contentInset,

package/src/Screen/Screen.styles.tsx

@@ -12,7 +12,7 @@ void StyleSheet;
 // Wrap theme for $iterator support
 type Theme = ThemeStyleWrapper<BaseTheme>;
 
-type ScreenBackground = 'primary' | 'secondary' | 'tertiary' | 'inverse' | 'inverse-secondary' | 'inverse-tertiary' | 'transparent';
+type ScreenBackground = 'screen' | 'primary' | 'secondary' | 'tertiary' | 'inverse' | 'inverse-secondary' | 'inverse-tertiary' | 'transparent';
 
 export type ScreenDynamicProps = {
     background?: ScreenBackground;
@@ -34,10 +34,9 @@ export type ScreenDynamicProps = {
 export const screenStyles = defineStyle('Screen', (theme: Theme) => ({
     screen: (_props: ScreenDynamicProps) => ({
         flex: 1,
-        // Theme marker for Unistyles reactivity
-        backgroundColor: theme.colors.surface.primary,
         variants: {
             background: {
+                screen: { backgroundColor: theme.colors.surface.screen },
                 primary: { backgroundColor: theme.colors.surface.primary },
                 secondary: { backgroundColor: theme.colors.surface.secondary },
                 tertiary: { backgroundColor: theme.colors.surface.tertiary },
@@ -74,7 +73,6 @@ export const screenStyles = defineStyle('Screen', (theme: Theme) => ({
             },
         },
         _web: {
-            overflow: 'auto',
             display: 'flex',
             flexDirection: 'column',
             minHeight: '100%',
@@ -83,10 +81,9 @@ export const screenStyles = defineStyle('Screen', (theme: Theme) => ({
     }),
 
     screenContent: (_props: ScreenDynamicProps) => ({
-        // Theme marker for Unistyles reactivity
-        backgroundColor: theme.colors.surface.primary,
         variants: {
             background: {
+                screen: { backgroundColor: theme.colors.surface.screen },
                 primary: { backgroundColor: theme.colors.surface.primary },
                 secondary: { backgroundColor: theme.colors.surface.secondary },
                 tertiary: { backgroundColor: theme.colors.surface.tertiary },

package/src/Screen/Screen.web.tsx

@@ -6,7 +6,7 @@ import useMergeRefs from '../hooks/useMergeRefs';
 
 const Screen = forwardRef<HTMLDivElement, ScreenProps>(({
   children,
-  background = 'primary',
+  background = 'screen',
   safeArea = false,
   // Spacing variants from ContainerStyleProps
   gap,

package/src/Select/Select.styles.tsx

@@ -52,56 +52,39 @@ export const selectStyles = defineStyle('Select', (theme: Theme) => ({
         marginBottom: 4,
     }),
 
-    trigger: ({ type = 'outlined', intent = 'neutral', disabled = false, error = false, focused = false }: SelectDynamicProps) => {
-        const intentValue = theme.intents[intent];
-        const primaryIntent = theme.intents.primary;
-        const errorColor = theme.intents.error.primary;
-
-        // Background based on type
-        const backgroundColor = type === 'filled'
-            ? theme.colors.surface.secondary
-            : theme.colors.surface.primary;
-
-        // Border color based on state
-        let borderColor = type === 'filled' ? 'transparent' : theme.colors.border.primary;
-        if (error) {
-            borderColor = errorColor;
-        } else if (focused) {
-            borderColor = primaryIntent.primary;
-        } else if (intent !== 'neutral') {
-            borderColor = intentValue.primary;
-        }
-
-        return {
-            position: 'relative' as const,
-            flexDirection: 'row' as const,
-            alignItems: 'center' as const,
-            justifyContent: 'space-between' as const,
-            borderRadius: 8,
-            borderWidth: 1,
-            borderStyle: 'solid' as const,
-            backgroundColor,
-            borderColor,
-            opacity: disabled ? 0.6 : 1,
-            variants: {
-                size: {
-                    paddingHorizontal: theme.sizes.$select.paddingHorizontal,
-                    minHeight: theme.sizes.$select.minHeight,
+    trigger: ({ type = 'outlined', intent = 'neutral', disabled = false, error = false, focused = false }: SelectDynamicProps) => ({
+        position: 'relative' as const,
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'space-between' as const,
+        borderWidth: 1,
+        borderStyle: 'solid' as const,
+        opacity: disabled ? 0.6 : 1,
+        variants: {
+            type: {
+                filled: {
+                    backgroundColor: theme.colors.surface.secondary,
+                    borderColor: 'transparent',
                 },
+                outlined: {
+                    backgroundColor: theme.colors.surface.primary,
+                    borderWidth: 1,
+                    borderColor: theme.colors.border.primary,
+                }
             },
-            _web: {
-                display: 'flex',
-                boxSizing: 'border-box',
-                cursor: disabled ? 'not-allowed' : 'pointer',
-                border: `1px solid ${borderColor}`,
-                boxShadow: focused ? `0 0 0 2px ${primaryIntent.primary}20` : 'none',
-                transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
-                _hover: disabled ? {} : { opacity: 0.9 },
-                _active: disabled ? {} : { opacity: 0.8 },
-                _focus: { outline: 'none' },
-            },
-        } as const;
-    },
+            size: theme.sizes.$select,
+        },
+        _web: {
+            display: 'flex',
+            boxSizing: 'border-box',
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            border: `1px solid`,
+            transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
+            _hover: disabled ? {} : { opacity: 0.9 },
+            _active: disabled ? {} : { opacity: 0.8 },
+            _focus: { outline: 'none' },
+        },
+    }),
 
     triggerContent: (_props: SelectDynamicProps) => ({
         flex: 1,