@idealyst/components 1.1.8 → 1.2.0

package/src/Accordion/Accordion.web.tsx

@@ -3,7 +3,6 @@ import { getWebProps } from 'react-native-unistyles/web';
 import { accordionStyles } from './Accordion.styles';
 import type { AccordionProps, AccordionItem as AccordionItemType } from './types';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
-import { resolveIconPath } from '../Icon/icon-resolver';
 import { getWebAriaProps, generateAccessibilityId, ACCORDION_KEYS } from '../utils/accessibility';
 
 interface AccordionItemProps {
@@ -33,7 +32,6 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
 }) => {
   const contentInnerRef = useRef<HTMLDivElement>(null);
   const [contentHeight, setContentHeight] = useState(0);
-  const chevronIconPath = resolveIconPath('chevron-down');
 
   // Apply item-specific variants (for size, expanded, disabled)
   accordionStyles.useVariants({
@@ -86,7 +84,7 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
         <span {...iconProps}>
           <IconSvg
             style={{ width: 12, height: 12 }}
-            path={chevronIconPath}
+            name="chevron-down"
             aria-label="chevron-down"
           />
         </span>

package/src/Alert/Alert.web.tsx

@@ -3,7 +3,7 @@ import { getWebProps } from 'react-native-unistyles/web';
 import { alertStyles } from './Alert.styles';
 import type { AlertProps } 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';
 
 // Default icons for each intent
@@ -49,10 +49,9 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(({
     if (!iconProp) return null;
 
     if (isIconName(iconProp)) {
-      const iconPath = resolveIconPath(iconProp);
       return (
         <IconSvg
-          path={iconPath}
+          name={iconProp}
           {...iconContainerProps}
           aria-label={iconProp}
         />
@@ -106,7 +105,7 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(({
           type="button"
         >
           <IconSvg
-            path={resolveIconPath('close')}
+            name="close"
             {...closeIconProps}
             aria-label="close"
           />

package/src/Badge/Badge.web.tsx

@@ -5,19 +5,13 @@ import { badgeStyles } from './Badge.styles';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import useMergeRefs from '../hooks/useMergeRefs';
 
-// Extended props to include path props added by Babel plugin
-interface InternalBadgeProps extends BadgeProps {
-  iconPath?: string;
-}
-
-const Badge = forwardRef<HTMLSpanElement, BadgeProps>((props: InternalBadgeProps, ref) => {
+const Badge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
   const {
     children,
     size = 'md',
     type = 'filled',
     color = 'blue',
     icon,
-    iconPath,
     style,
     testID,
     id,
@@ -27,7 +21,7 @@ const Badge = forwardRef<HTMLSpanElement, BadgeProps>((props: InternalBadgeProps
     size,
     type,
   });
-  
+
   const badgeStyle = (badgeStyles.badge as any)({ color });
   const contentStyle = badgeStyles.content;
   const textStyle = (badgeStyles.text as any)({ color });
@@ -38,13 +32,12 @@ const Badge = forwardRef<HTMLSpanElement, BadgeProps>((props: InternalBadgeProps
   const iconProps = getWebProps([badgeStyles.icon, textStyle]);
 
   // Helper to render icon
-  const renderIcon = (iconProp: typeof icon, path?: string) => {
-    if (typeof iconProp === 'string' && path) {
-      // Render IconSvg directly with the path from Babel plugin
-      // Don't pass size prop - let the style control the dimensions entirely
+  const renderIcon = (iconProp: typeof icon) => {
+    if (typeof iconProp === 'string') {
+      // Render IconSvg with the icon name - registry lookup happens inside
       return (
         <IconSvg
-          path={path}
+          name={iconProp}
           {...iconProps}
           aria-label={iconProp}
         />
@@ -85,7 +78,7 @@ const Badge = forwardRef<HTMLSpanElement, BadgeProps>((props: InternalBadgeProps
     >
       {hasIcon ? (
         <span {...contentProps}>
-          {renderIcon(icon, iconPath)}
+          {renderIcon(icon)}
           <span {...textProps}>
             {children}
             </span>
@@ -101,4 +94,4 @@ const Badge = forwardRef<HTMLSpanElement, BadgeProps>((props: InternalBadgeProps
 
 Badge.displayName = 'Badge';
 
-export default Badge; 
+export default Badge;

package/src/Breadcrumb/Breadcrumb.web.tsx

@@ -3,7 +3,7 @@ import { getWebProps } from 'react-native-unistyles/web';
 import { breadcrumbStyles } from './Breadcrumb.styles';
 import type { BreadcrumbProps, BreadcrumbItem as BreadcrumbItemType } from './types';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
-import { resolveIconPath, isIconName } from '../Icon/icon-resolver';
+import { isIconName } from '../Icon/icon-resolver';
 import Menu from '../Menu/Menu.web';
 import type { MenuItem } from '../Menu/types';
 
@@ -48,11 +48,9 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ item, isLast, size, int
     if (!item.icon) return null;
 
     if (isIconName(item.icon)) {
-      const iconPath = resolveIconPath(item.icon);
-      // IconSvg uses size="1em" by default, sized by container's fontSize from styles
       return (
         <IconSvg
-          path={iconPath}
+          name={item.icon}
           aria-label={item.icon}
         />
       );
@@ -138,12 +136,11 @@ const BreadcrumbEllipsis: React.FC<BreadcrumbEllipsisProps> = ({ size, intent })
   const ellipsisIconStyle = (breadcrumbStyles.ellipsisIcon as any)({ intent });
   const ellipsisProps = getWebProps([ellipsisStyle]);
   const iconProps = getWebProps([ellipsisIconStyle]);
-  const ellipsisIconPath = resolveIconPath('dots-horizontal');
 
   return (
     <span {...ellipsisProps}>
       <IconSvg
-        path={ellipsisIconPath}
+        name="dots-horizontal"
         {...iconProps}
         aria-label="more items"
       />
@@ -173,7 +170,6 @@ const Breadcrumb: React.FC<BreadcrumbProps> = ({
   const menuButtonIconStyle = (breadcrumbStyles.menuButtonIcon as any)({ intent });
 
   const containerProps = getWebProps([containerStyle, style as any]);
-  const menuIconPath = resolveIconPath('dots-horizontal');
 
   // Apply variants for menu button
   breadcrumbStyles.useVariants({ size });
@@ -250,7 +246,7 @@ const Breadcrumb: React.FC<BreadcrumbProps> = ({
                     aria-label="Show more breadcrumb items"
                   >
                     <IconSvg
-                      path={menuIconPath}
+                      name="dots-horizontal"
                       {...menuIconProps}
                       aria-label="dots-horizontal"
                     />

package/src/Button/Button.native.tsx

@@ -5,6 +5,7 @@ import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
 import { buttonStyles } from './Button.styles';
 import { ButtonProps } from './types';
 import { getNativeInteractiveAccessibilityProps } from '../utils/accessibility';
+import { useUnistyles } from 'react-native-unistyles';
 
 const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((props, ref) => {
   const {
@@ -71,24 +72,6 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
   } as const;
   const iconSize = iconSizeMap[size];
 
-  // Helper to render icon - uses the icon styles from buttonStyles
-  const renderIcon = (icon: string | React.ReactNode) => {
-    if (typeof icon === 'string') {
-      // Render MaterialCommunityIcons with explicit size prop
-      // The icon styles provide the correct color based on dynamic styles
-      return (
-        <MaterialCommunityIcons
-          name={icon}
-          size={iconSize}
-          style={iconStyle}
-        />
-      );
-    } else if (isValidElement(icon)) {
-      // Render custom component as-is
-      return icon;
-    }
-    return null;
-  };
 
   // Use children if available, otherwise use title
   const buttonContent = children || title;
@@ -199,12 +182,22 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
     <TouchableOpacity {...touchableProps as any}>
       {renderGradientLayer()}
       {hasIcons ? (
-        <View style={iconContainerStyle}>
-          {leftIcon && renderIcon(leftIcon)}
+        <View  style={iconContainerStyle}>
+          {leftIcon && 
+          <MaterialCommunityIcons
+            name={leftIcon}
+            size={iconSize}
+            style={iconStyle}
+        />}
           <Text style={textStyle}>
             {buttonContent}
           </Text>
-          {rightIcon && renderIcon(rightIcon)}
+          {rightIcon &&    
+          <MaterialCommunityIcons
+            name={rightIcon}
+            size={iconSize}
+            style={iconStyle}
+        />}
         </View>
       ) : (
         <Text style={textStyle}>

package/src/Button/Button.styles.tsx

@@ -68,6 +68,21 @@ export const buttonStyles = defineStyle('Button', (theme: Theme) => ({
         },
         variants: {
             // $iterator expands for each button size
+            type: {
+                contained: {
+                    backgroundColor: theme.intents[intent].primary,
+                    borderColor: 'transparent',
+                },
+                outlined: {
+                    backgroundColor: 'transparent',
+                    borderColor: theme.intents[intent].primary,
+                },
+                text: {
+                    backgroundColor: 'transparent',
+                    borderColor: 'transparent',
+                    borderWidth: 0,
+                }
+            },
             size: {
                 paddingVertical: theme.sizes.$button.paddingVertical,
                 paddingHorizontal: theme.sizes.$button.paddingHorizontal,

package/src/Button/Button.web.tsx

@@ -6,14 +6,7 @@ import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebInteractiveAriaProps, generateAccessibilityId } from '../utils/accessibility';
 
-// Extended props to include path props added by Babel plugin
-interface InternalButtonProps extends ButtonProps {
-  leftIconPath?: string;
-  rightIconPath?: string;
-}
-
-const Button = forwardRef<HTMLButtonElement, ButtonProps>((props: InternalButtonProps, ref) => {
-
+const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const {
     title,
     children,
@@ -25,8 +18,6 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props: InternalButton
     gradient,
     leftIcon,
     rightIcon,
-    leftIconPath,
-    rightIconPath,
     style,
     testID,
     id,
@@ -124,14 +115,13 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props: InternalButton
   const iconStyleArray = [(buttonStyles.icon as any)(dynamicProps)];
   const iconProps = getWebProps(iconStyleArray);
 
-  // Helper to render icon
-  const renderIcon = (icon: string | React.ReactNode, iconPath?: string) => {
-    if (typeof icon === 'string' && iconPath) {
-      // Render IconSvg directly with the path from Babel plugin
-      // Don't pass size - let the style control the dimensions
+  // Helper to render icon - now uses icon name directly
+  const renderIcon = (icon: string | React.ReactNode) => {
+    if (typeof icon === 'string') {
+      // Render IconSvg with the icon name - registry lookup happens inside
       return (
         <IconSvg
-          path={iconPath}
+          name={icon}
           {...iconProps}
           aria-label={icon}
         />
@@ -164,9 +154,9 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props: InternalButton
     >
       {hasIcons ? (
         <div {...iconContainerProps}>
-          {leftIcon && renderIcon(leftIcon, leftIconPath)}
+          {leftIcon && renderIcon(leftIcon)}
           {buttonContent}
-          {rightIcon && renderIcon(rightIcon, rightIconPath)}
+          {rightIcon && renderIcon(rightIcon)}
         </div>
       ) : (
         buttonContent
@@ -177,4 +167,4 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props: InternalButton
 
 Button.displayName = 'Button';
 
-export default Button; 
+export default Button;

package/src/Checkbox/Checkbox.web.tsx

@@ -3,7 +3,6 @@ import { getWebProps } from 'react-native-unistyles/web';
 import { CheckboxProps } from './types';
 import { checkboxStyles } from './Checkbox.styles';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
-import { resolveIconPath } from '../Icon/icon-resolver';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebSelectionAriaProps, generateAccessibilityId, combineIds } from '../utils/accessibility';
 
@@ -177,7 +176,7 @@ const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(({
           <div {...checkboxProps}>
             {(internalChecked || indeterminate) && (
               <IconSvg
-                path={resolveIconPath(indeterminate ? 'minus' : 'check')}
+                name={indeterminate ? 'minus' : 'check'}
                 {...checkmarkProps}
                 aria-label={indeterminate ? 'minus' : 'check'}
               />

package/src/Chip/Chip.web.tsx

@@ -3,7 +3,7 @@ import { getWebProps } from 'react-native-unistyles/web';
 import { chipStyles } from './Chip.styles';
 import type { ChipProps } 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';
 
 const Chip = forwardRef<HTMLDivElement, ChipProps>(({
@@ -56,10 +56,9 @@ const Chip = forwardRef<HTMLDivElement, ChipProps>(({
     if (!icon) return null;
 
     if (isIconName(icon)) {
-      const iconPath = resolveIconPath(icon);
       return (
         <IconSvg
-          path={iconPath}
+          name={icon}
           {...iconProps}
           aria-label={icon}
         />
@@ -74,10 +73,9 @@ const Chip = forwardRef<HTMLDivElement, ChipProps>(({
   // Helper to render delete icon
   const renderDeleteIcon = () => {
     if (isIconName(deleteIcon)) {
-      const iconPath = resolveIconPath(deleteIcon);
       return (
         <IconSvg
-          path={iconPath}
+          name={deleteIcon}
           {...deleteIconProps}
           aria-label={deleteIcon}
         />

package/src/Dialog/Dialog.web.tsx

@@ -13,7 +13,7 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>(({
   title,
   children,
   size = 'md',
-  type = 'standard',
+  type = 'default',
   showCloseButton = true,
   closeOnBackdropClick = true,
   closeOnEscapeKey = true,
@@ -144,8 +144,8 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>(({
       : { opacity: 0, transform: 'scale(0.96) translateY(-4px)' }
   ]);
   const headerProps = getWebProps([(dialogStyles.header as any)({})]);
-  const titleProps = getWebProps([dialogStyles.title]);
-  const closeButtonProps = getWebProps([dialogStyles.closeButton]);
+  const titleProps = getWebProps([(dialogStyles.title as any)({})]);
+  const closeButtonProps = getWebProps([(dialogStyles.closeButton as any)({})]);
   const contentProps = getWebProps([(dialogStyles.content as any)({})]);
 
   const mergedBackdropRef = useMergeRefs(ref, backdropProps.ref);

package/src/Dialog/types.ts

@@ -5,7 +5,7 @@ import { InteractiveAccessibilityProps } from '../utils/accessibility';
 
 // Component-specific type aliases for future extensibility
 export type DialogSizeVariant = 'sm' | 'md' | 'lg' | 'fullscreen';
-export type DialogType = 'standard' | 'alert' | 'confirmation';
+export type DialogType = 'default' | 'alert' | 'confirmation';
 export type DialogAnimationType = 'slide' | 'fade' | 'none';
 
 export interface DialogProps extends BaseProps, InteractiveAccessibilityProps {

package/src/Icon/Icon.web.tsx

@@ -6,13 +6,9 @@ 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<HTMLSpanElement, IconProps>((props: InternalIconProps, ref) => {
+const Icon = forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
   const {
     name,
     size = 'md',
@@ -27,8 +23,16 @@ const Icon = forwardRef<HTMLSpanElement, IconProps>((props: InternalIconProps, r
 
   const { theme } = useUnistyles();
 
-  // Check if we have a path prop (from Babel plugin transformation)
-  const { path } = restProps as { path?: string };
+  // 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;
@@ -52,7 +56,6 @@ const Icon = forwardRef<HTMLSpanElement, IconProps>((props: InternalIconProps, r
 
   const mergedRef = useMergeRefs(ref, iconProps.ref);
 
-  // Use MDI React icon when path is provided (transformed by Babel plugin)
   return (
     <span
       {...iconProps}
@@ -71,17 +74,19 @@ const Icon = forwardRef<HTMLSpanElement, IconProps>((props: InternalIconProps, r
         color: iconColor,
       }}
     >
-      <MdiIcon
-        path={path}
-        size="1em"
-        color="currentColor"
-        data-testid={testID}
-        aria-label={accessibilityLabel || name}
-      />
+      {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 };