@idealyst/components 1.1.7 → 1.1.9

package/src/Icon/Icon.native.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, useMemo } from 'react';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { IconProps } from './types';
-import { iconStyles, buildIconSize } from './Icon.styles';
+import { iconStyles } from './Icon.styles';
 import { useUnistyles } from 'react-native-unistyles';
 
 const Icon = forwardRef<any, IconProps>(({
@@ -14,18 +14,17 @@ const Icon = forwardRef<any, IconProps>(({
   accessibilityLabel,
   id,
 }: IconProps, ref) => {
+  const { theme } = useUnistyles();
 
-
-  // Call dynamic style with variants
+  // Call dynamic style with variants - includes theme-reactive color
   const iconStyle = (iconStyles.icon as any)({ color, intent, size });
 
-  const { theme } = useUnistyles();
-
   const iconSize = useMemo(() => {
-    return buildIconSize(theme, size).width;
-  }, [theme, size]);
+    return iconStyle.width;
+  }, [iconStyle]);
 
-  // Get fontSize from styles for numeric size prop
+  // Extract color from iconStyle for explicit color prop (RN vector icons need this)
+  const iconColor = iconStyle.color;
 
   return (
     <MaterialCommunityIcons
@@ -33,6 +32,7 @@ const Icon = forwardRef<any, IconProps>(({
       nativeID={id}
       size={iconSize}
       name={name}
+      color={iconColor}
       style={[iconStyle, style]}
       testID={testID}
       accessibilityLabel={accessibilityLabel}

package/src/Icon/Icon.styles.old.tsx

@@ -0,0 +1,81 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, Intent, Color, getColorFromString } from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { IconSizeVariant } from './types';
+import { applyExtensions } from '../extensions/applyExtension';
+
+type IconVariants = {
+    size: IconSizeVariant;
+    intent?: Intent;
+    color?: Color;
+}
+
+export type ExpandedIconStyles = StylesheetStyles<keyof IconVariants>;
+
+export type IconStylesheet = {
+    icon: ExpandedIconStyles;
+}
+
+/**
+ * Create color variants for icon
+ */
+function getIconColor(theme: Theme, color?: Color, intent?: Intent): string {
+    if (intent) {
+        return theme.intents[intent]?.primary
+    } else if (color) {
+        return getColorFromString(theme, color);
+    }
+    return theme.colors.text.primary;
+}
+
+export function buildIconSize(theme: Theme, size?: IconSizeVariant) {
+    // Handle direct numeric sizes
+    if (typeof size === 'number') {
+        return {
+            width: size,
+            height: size,
+        };
+    }
+
+    // Default to 'md' if size is undefined
+    const sizeKey = size || 'md';
+    const iconSize = theme.sizes.icon[sizeKey];
+
+    if (typeof iconSize === 'number') {
+        return {
+            width: iconSize,
+            height: iconSize,
+        };
+    }
+
+    return buildSizeVariants(theme, 'icon', (size) => ({
+        width: size.width,
+        height: size.height,
+    }))[sizeKey];
+}
+
+function createIconStyles(theme: Theme) {
+    return ({ color, intent, size }: Partial<IconVariants>) => {
+        const iconSize = buildIconSize(theme, size);
+        return {
+            width: iconSize.width,
+            height: iconSize.height,
+            color: getIconColor(theme, color, intent),
+            _web: {
+                display: 'inline-block',
+                verticalAlign: 'middle',
+                flexShrink: 0,
+                lineHeight: 0,
+            },
+        } as const;
+    }
+}
+
+// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel
+// transform on native cannot resolve function calls to extract variant structures.
+export const iconStyles = StyleSheet.create((theme: Theme) => {
+    // Apply extensions to main visual elements
+    return applyExtensions('Icon', theme, {
+        icon: createIconStyles(theme),
+    });
+});

package/src/Icon/Icon.styles.tsx

@@ -1,85 +1,71 @@
+/**
+ * Icon styles using defineStyle with dynamic functions.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, Intent, Color, getColorFromString } from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { defineStyle, ThemeStyleWrapper, getColorFromString } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent, Color } from '@idealyst/theme';
 import { IconSizeVariant } from './types';
-import { applyExtensions } from '../extensions/applyExtension';
 
-type IconVariants = {
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
+
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
+
+export type IconVariants = {
     size: IconSizeVariant;
     intent?: Intent;
     color?: Color;
-}
-
-export type ExpandedIconStyles = StylesheetStyles<keyof IconVariants>;
+};
 
-export type IconStylesheet = {
-    icon: ExpandedIconStyles;
-}
+export type IconDynamicProps = Partial<IconVariants>;
 
 /**
- * Create color variants for icon
+ * Icon styles with dynamic color/size handling.
  */
-function getIconColor(theme: Theme, color?: Color, intent?: Intent): string {
-    if (intent) {
-        return theme.intents[intent]?.primary
-    } else if (color) {
-        return getColorFromString(theme, color);
-    }
-    return theme.colors.text.primary;
-}
+export const iconStyles = defineStyle('Icon', (theme: Theme) => ({
+    icon: ({ color, intent, size = 'md' }: IconDynamicProps) => {
+        // Handle size - can be a named size or number
+        let iconWidth: number;
+        let iconHeight: number;
 
-export function buildIconSize(theme: Theme, size?: IconSizeVariant) {
-    // Handle direct numeric sizes
-    if (typeof size === 'number') {
-        return {
-            width: size,
-            height: size,
-        };
-    }
+        if (typeof size === 'number') {
+            iconWidth = size;
+            iconHeight = size;
+        } else {
+            const sizeKey = size || 'md';
+            const iconSize = theme.sizes.icon[sizeKey];
+            if (typeof iconSize === 'number') {
+                iconWidth = iconSize;
+                iconHeight = iconSize;
+            } else {
+                iconWidth = (iconSize?.width as number) ?? 24;
+                iconHeight = (iconSize?.height as number) ?? 24;
+            }
+        }
 
-    // Default to 'md' if size is undefined
-    const sizeKey = size || 'md';
-    const iconSize = theme.sizes.icon[sizeKey];
+        // Get color - intent takes priority, then color prop, then default
+        const iconColor = intent
+            ? theme.intents[intent]?.primary
+            : color
+                ? getColorFromString(theme as unknown as BaseTheme, color)
+                : theme.colors.text.primary;
 
-    if (typeof iconSize === 'number') {
         return {
-            width: iconSize,
-            height: iconSize,
-        };
-    }
-
-    return buildSizeVariants(theme, 'icon', (size) => ({
-        width: size.width,
-        height: size.height,
-    }))[sizeKey];
-}
-
-function createIconStyles(theme: Theme) {
-    return ({ color, intent, size }: Partial<IconVariants>) => {
-        const iconSize = buildIconSize(theme, size);
-        return {
-            width: iconSize.width,
-            height: iconSize.height,
-            color: getIconColor(theme, color, intent),
+            width: iconWidth,
+            height: iconHeight,
+            color: iconColor,
             _web: {
-                display: 'inline-block',
+                fontSize: iconWidth,
+                width: '1em',
+                height: '1em',
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
                 verticalAlign: 'middle',
                 flexShrink: 0,
-                lineHeight: 0,
+                lineHeight: 1,
             },
         } as const;
-    }
-}
-
-// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel
-// transform on native cannot resolve function calls to extract variant structures.
-export const iconStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-    const extended = applyExtensions('Icon', theme, {
-        icon: createIconStyles(theme),
-    });
-
-    return {
-        ...extended,
-    };
-});
+    },
+}));

package/src/Icon/Icon.web.tsx

@@ -3,14 +3,12 @@ import MdiIcon from '@mdi/react';
 import { IconProps } from './types';
 import { iconStyles } from './Icon.styles';
 import { getWebProps } from 'react-native-unistyles/web';
+import { useUnistyles } from 'react-native-unistyles';
 import useMergeRefs from '../hooks/useMergeRefs';
+import { getColorFromString, Intent, Color } from '@idealyst/theme';
+import { IconRegistry } from './IconRegistry';
 
-// Internal props that include the transformed path from Babel plugin
-interface InternalIconProps extends IconProps {
-  path?: string; // Added by Babel plugin transformation
-}
-
-const Icon = forwardRef<HTMLDivElement, IconProps>((props: InternalIconProps, ref) => {
+const Icon = forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
   const {
     name,
     size = 'md',
@@ -23,29 +21,72 @@ const Icon = forwardRef<HTMLDivElement, IconProps>((props: InternalIconProps, re
     ...restProps
   } = props;
 
-  // Check if we have a path prop (from Babel plugin transformation)
-  const { path } = restProps as { path?: string };
-  const iconProps = getWebProps(iconStyles.icon({ intent, color, size }));
+  const { theme } = useUnistyles();
+
+  // Look up the icon path from the registry
+  const path = IconRegistry.get(name);
+
+  // Warn in development if icon is not registered
+  if (!path && process.env.NODE_ENV !== 'production') {
+    console.warn(
+      `[Icon] Icon "${name}" is not registered. ` +
+      `Add it to the 'icons' array in your babel config, or ensure it's used in a way that static analysis can detect.`
+    );
+  }
+
+  // Compute size from theme
+  let iconSize: number;
+  if (typeof size === 'number') {
+    iconSize = size;
+  } else {
+    const themeSize = theme.sizes.icon[size as keyof typeof theme.sizes.icon];
+    iconSize = typeof themeSize === 'number' ? themeSize : (themeSize?.width ?? 24);
+  }
+
+  // Compute color from intent or color prop or default
+  const iconColor = intent
+    ? theme.intents[intent as Intent]?.primary
+    : color
+      ? getColorFromString(theme, color as Color)
+      : theme.colors.text.primary;
+
+  // Use getWebProps for className generation but override with computed values
+  const iconStyle = (iconStyles.icon as any)({ intent, color, size });
+  const iconProps = getWebProps([iconStyle, style]);
 
   const mergedRef = useMergeRefs(ref, iconProps.ref);
 
-  // Use MDI React icon when path is provided (transformed by Babel plugin)
   return (
-    <div
+    <span
       {...iconProps}
       ref={mergedRef}
-      id={id}>
-      <MdiIcon
-        path={path}
-        size={'100%'}
-        color={'currentColor'}
-        data-testid={testID}
-        aria-label={accessibilityLabel || name}
-      />
-    </div>
+      id={id}
+      style={{
+        ...iconProps.style,
+        fontSize: iconSize,
+        width: '1em',
+        height: '1em',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexShrink: 0,
+        lineHeight: 1,
+        color: iconColor,
+      }}
+    >
+      {path && (
+        <MdiIcon
+          path={path}
+          size="1em"
+          color="currentColor"
+          data-testid={testID}
+          aria-label={accessibilityLabel || name}
+        />
+      )}
+    </span>
   );
 });
 
 Icon.displayName = 'Icon';
 
-export default Icon; 
+export default Icon;

package/src/Icon/IconRegistry.native.ts

@@ -0,0 +1,41 @@
+/**
+ * Icon Registry stub for native platform
+ *
+ * On native, icons are handled by react-native-vector-icons which uses
+ * icon names directly. The registry is only used on web for SVG path lookup.
+ *
+ * This stub exists to prevent import errors when code is shared between platforms.
+ */
+
+class IconRegistryStub {
+  register(_name: string, _path: string): void {
+    // No-op on native
+  }
+
+  registerMany(_icons: Record<string, string>): void {
+    // No-op on native
+  }
+
+  get(_name: string): string | undefined {
+    return undefined;
+  }
+
+  has(_name: string): boolean {
+    return false;
+  }
+
+  getRegisteredNames(): string[] {
+    return [];
+  }
+
+  get size(): number {
+    return 0;
+  }
+
+  get isInitialized(): boolean {
+    return false;
+  }
+}
+
+export const IconRegistry = new IconRegistryStub();
+export { IconRegistryStub as IconRegistryClass };

package/src/Icon/IconRegistry.ts

@@ -0,0 +1,107 @@
+/**
+ * Icon Registry for web platform
+ *
+ * This registry stores SVG paths for icons that are populated at build time
+ * by the Babel plugin. At runtime, components look up icon paths by their
+ * canonical name (e.g., "home", "account-circle").
+ *
+ * The registry is populated by:
+ * 1. Static analysis - Babel plugin scans for icon names in JSX
+ * 2. Config icons - User specifies additional icons in babel config
+ *
+ * This approach:
+ * - Enables dynamic/variable icon names (if registered)
+ * - Tree-shakes unused icons (only registered icons are bundled)
+ * - Provides a single source of truth for icon resolution
+ */
+
+type IconPath = string;
+
+class IconRegistryClass {
+  private icons = new Map<string, IconPath>();
+  private initialized = false;
+
+  /**
+   * Register a single icon
+   * @internal Called by generated registration code
+   */
+  register(name: string, path: IconPath): void {
+    // Normalize the name (strip mdi: prefix, lowercase)
+    const normalizedName = this.normalizeName(name);
+    this.icons.set(normalizedName, path);
+  }
+
+  /**
+   * Register multiple icons at once
+   * @internal Called by generated registration code
+   */
+  registerMany(icons: Record<string, IconPath>): void {
+    Object.entries(icons).forEach(([name, path]) => {
+      this.register(name, path);
+    });
+    this.initialized = true;
+  }
+
+  /**
+   * Get an icon path by name
+   * Returns undefined if the icon is not registered
+   */
+  get(name: string): IconPath | undefined {
+    const normalizedName = this.normalizeName(name);
+    return this.icons.get(normalizedName);
+  }
+
+  /**
+   * Check if an icon is registered
+   */
+  has(name: string): boolean {
+    const normalizedName = this.normalizeName(name);
+    return this.icons.has(normalizedName);
+  }
+
+  /**
+   * Get all registered icon names
+   */
+  getRegisteredNames(): string[] {
+    return Array.from(this.icons.keys());
+  }
+
+  /**
+   * Get the count of registered icons
+   */
+  get size(): number {
+    return this.icons.size;
+  }
+
+  /**
+   * Check if the registry has been initialized
+   */
+  get isInitialized(): boolean {
+    return this.initialized;
+  }
+
+  /**
+   * Normalize icon name for consistent lookup
+   * - Strips "mdi:" prefix
+   * - Converts to lowercase for case-insensitive matching
+   */
+  private normalizeName(name: string): string {
+    if (!name || typeof name !== 'string') {
+      return '';
+    }
+
+    // Strip mdi: prefix if present
+    let normalized = name.startsWith('mdi:') ? name.slice(4) : name;
+
+    // Lowercase for consistent lookup
+    normalized = normalized.toLowerCase();
+
+    return normalized;
+  }
+}
+
+// Singleton instance
+export const IconRegistry = new IconRegistryClass();
+
+// Also export the class for testing purposes
+export { IconRegistryClass };

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

@@ -1,36 +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';