@idealyst/components 1.0.83 → 1.0.84

package/src/Divider/Divider.web.tsx

@@ -1,51 +1,55 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { DividerProps } from './types';
 import { dividerStyles } from './Divider.styles';
+import useMergeRefs from '../hooks/useMergeRefs';
 
-const Divider: React.FC<DividerProps> = ({
+const Divider = forwardRef<HTMLDivElement, DividerProps>(({
   orientation = 'horizontal',
-  variant = 'solid',
+  type = 'solid',
   thickness = 'thin',
   intent = 'neutral',
   length = 'full',
-  spacing = 'medium',
+  spacing = 'md',
   children,
   style,
   testID,
   accessibilityLabel,
-}) => {
+}, ref) => {
   // Apply variants for main divider
   dividerStyles.useVariants({
     orientation,
     thickness,
-    variant: variant as any,
+    type,
     intent,
     length: typeof length === 'number' ? 'auto' : length,
     spacing,
   });
 
   // Create style arrays
-  const dividerStyleArray = [
-    dividerStyles.divider,
-    style,
-  ].filter(Boolean);
 
   const containerStyleArray = [dividerStyles.container];
   const contentStyleArray = [dividerStyles.content];
   const lineStyleArray = [dividerStyles.line];
 
   // Generate web props
-  const dividerProps = getWebProps(dividerStyleArray);
+  const dividerProps = getWebProps([
+    dividerStyles.divider,
+    style as any,
+  ]);
   const containerProps = getWebProps(containerStyleArray);
   const contentProps = getWebProps(contentStyleArray);
   const lineProps = getWebProps(lineStyleArray);
 
+  const mergedDividerRef = useMergeRefs(ref, dividerProps.ref);
+  const mergedContainerRef = useMergeRefs(ref, containerProps.ref);
+
   // If no children, render simple divider
   if (!children) {
     return (
       <div
         {...dividerProps}
+        ref={mergedDividerRef}
         data-testid={testID}
         aria-label={accessibilityLabel}
         role="separator"
@@ -57,6 +61,7 @@ const Divider: React.FC<DividerProps> = ({
   return (
     <div
       {...containerProps}
+      ref={mergedContainerRef}
       data-testid={testID}
       aria-label={accessibilityLabel}
       role="separator"
@@ -68,6 +73,8 @@ const Divider: React.FC<DividerProps> = ({
       <div {...lineProps} />
     </div>
   );
-};
+});
+
+Divider.displayName = 'Divider';
 
 export default Divider; 

package/src/Divider/index.ts

@@ -1,5 +1,5 @@
-// Platform-agnostic Divider export
-// Metro will resolve to index.native.ts for React Native
-// This file serves as fallback for web environments
-export { default } from './Divider.web';
-export * from './types'; 
+import DividerComponent from './Divider.web';
+
+export default DividerComponent;
+export { DividerComponent as Divider };
+export * from './types';

package/src/Divider/index.web.ts

@@ -1,3 +1,5 @@
-// Web-specific Divider export
-export { default } from './Divider.web';
-export * from './types'; 
+import DividerComponent from './Divider.web';
+
+export default DividerComponent;
+export { DividerComponent as Divider };
+export * from './types';

package/src/Divider/types.ts

@@ -1,52 +1,61 @@
-import { ReactNode } from 'react';
-import type { IntentVariant } from '../theme/variants';
+import { Intent, Size } from '@idealyst/theme';
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+// Component-specific type aliases for future extensibility
+export type DividerIntentVariant = Intent;
+export type DividerOrientationVariant = 'horizontal' | 'vertical';
+export type DividerType = 'solid' | 'dashed' | 'dotted';
+export type DividerThicknessVariant = 'thin' | 'md' | 'thick';
+export type DividerLengthVariant = 'full' | 'auto' | number;
+export type DividerSpacingVariant = 'none' | Size;
 
 export interface DividerProps {
   /**
    * The orientation of the divider
    */
-  orientation?: 'horizontal' | 'vertical';
-  
+  orientation?: DividerOrientationVariant;
+
   /**
-   * The visual style variant of the divider
+   * The visual style type of the divider
    */
-  variant?: 'solid' | 'dashed' | 'dotted';
-  
+  type?: DividerType;
+
   /**
    * The thickness of the divider
    */
-  thickness?: 'thin' | 'medium' | 'thick';
-  
+  thickness?: DividerThicknessVariant;
+
   /**
    * The color intent of the divider
    */
-  intent?: IntentVariant;
-  
+  intent?: DividerIntentVariant;
+
   /**
    * The length of the divider (percentage or fixed)
    */
-  length?: 'full' | 'auto' | number;
-  
+  length?: DividerLengthVariant;
+
   /**
    * Spacing around the divider
    */
-  spacing?: 'none' | 'small' | 'medium' | 'large';
-  
+  spacing?: DividerSpacingVariant;
+
   /**
    * Content to display in the center of the divider (for horizontal dividers)
    */
   children?: ReactNode;
-  
+
   /**
    * Additional styles (platform-specific)
    */
-  style?: any;
-  
+  style?: StyleProp<ViewStyle>;
+
   /**
    * Test ID for testing
    */
   testID?: string;
-  
+
   /**
    * Accessibility label
    */

package/src/Icon/Icon.native.tsx

@@ -1,42 +1,35 @@
-import React, { useMemo } from 'react';
+import { forwardRef } from 'react';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { IconProps } from './types';
-import iconStyles from './Icon.styles';
+import { iconStyles } from './Icon.styles';
 
-const Icon: React.FC<IconProps> = ({
+const Icon = forwardRef<any, IconProps>(({
   name,
   size = 'md',
   color,
+  intent,
   style,
   testID,
   accessibilityLabel,
-}: IconProps) => {
-  
-  // Use Unistyles v3 with color and size variants
-  const styles = iconStyles.useVariants({ color, size });
-  
-  // Map size variants to pixel values
-  const iconSize = useMemo(() => { 
-    if (typeof size === 'number') return size;
-    const sizeMap = {
-      xs: 12,
-      sm: 16,
-      md: 24,
-      lg: 32,
-      xl: 48,
-    };
-    return sizeMap[size];
-  }, [])
-  
+}: IconProps, ref) => {
+
+
+  // Call dynamic style with variants
+  const iconStyle = iconStyles.icon({ color, intent, size });
+
+  // Get fontSize from styles for numeric size prop
+
   return (
     <MaterialCommunityIcons
+      ref={ref}
       name={name}
-      size={iconSize}
-      style={[styles.icon, style]}
+      style={[iconStyle, style]}
       testID={testID}
       accessibilityLabel={accessibilityLabel}
     />
   );
-};
+});
+
+Icon.displayName = 'Icon';
 
 export default Icon; 

package/src/Icon/Icon.styles.tsx

@@ -1,51 +1,67 @@
 import { StyleSheet } from 'react-native-unistyles';
-import { generateColorVariants } from '../theme/variantHelpers';
+import { Theme, StylesheetStyles, Intent, Color, getColorFromString } from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { IconSizeVariant } from './types';
 
-const iconStyles = StyleSheet.create((theme) => ({
-  icon: {
-    // Default size (medium)
-    width: 24,
-    height: 24,
-    
-    // Default theme-based color
-    color: theme.colors?.text || '#000000',
-    
-    // Variants for different color schemes and sizes
-    variants: {
-      // Dynamically generated color variants using generateColorVariants helper
-      color: generateColorVariants(theme),
-      size: {
-        xs: {
-          width: 12,
-          height: 12,
-        },
-        sm: {
-          width: 16,
-          height: 16,
-        },
-        md: {
-          width: 24,
-          height: 24,
-        },
-        lg: {
-          width: 32,
-          height: 32,
-        },
-        xl: {
-          width: 48,
-          height: 48,
-        },
-      },
-    },
-    
-    // Web-specific styles
-    _web: {
-      display: 'inline-block',
-      verticalAlign: 'middle',
-      flexShrink: 0,
-      lineHeight: 0, // Remove extra space below the icon
-    },
-  },
-}));
+type IconVariants = {
+    size: IconSizeVariant;
+    intent?: Intent;
+    color?: Color;
+}
 
-export default iconStyles;
+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;
+}
+
+function buildIconSize(theme: Theme, size: IconSizeVariant) {
+    const iconSize = theme.sizes.icon[size];
+    if (typeof iconSize === 'number') {
+        return {
+            width: iconSize,
+            height: iconSize,
+        };
+    }
+    return buildSizeVariants(theme, 'icon', (size) => ({
+        width: size.width,
+        height: size.height,
+    }))[size];
+}
+
+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) => {
+  return {
+    icon: createIconStyles(theme),
+  } as const;
+});

package/src/Icon/Icon.web.tsx

@@ -1,36 +1,38 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import MdiIcon from '@mdi/react';
 import { IconProps } from './types';
-import iconStyles from './Icon.styles';
+import { iconStyles } from './Icon.styles';
 import { getWebProps } from 'react-native-unistyles/web';
+import useMergeRefs from '../hooks/useMergeRefs';
 
 // Internal props that include the transformed path from Babel plugin
 interface InternalIconProps extends IconProps {
   path?: string; // Added by Babel plugin transformation
 }
 
-const Icon: React.FC<IconProps> = (props: InternalIconProps) => {
+const Icon = forwardRef<HTMLDivElement, IconProps>((props: InternalIconProps, ref) => {
   const {
     name,
     size = 'md',
     color,
+    intent,
     style,
     testID,
     accessibilityLabel,
     ...restProps
   } = props;
 
-  // Use Unistyles v3 with color and size variants
-  const styles = iconStyles.useVariants({ color, size });
-  
   // Check if we have a path prop (from Babel plugin transformation)
   const { path } = restProps as { path?: string };
-  const iconProps = getWebProps(styles.icon);
-  
+  const iconProps = getWebProps(iconStyles.icon({ intent, color, size }));
+
+  const mergedRef = useMergeRefs(ref, iconProps.ref);
+
   // Use MDI React icon when path is provided (transformed by Babel plugin)
   return (
     <div
-      {...iconProps}>
+      {...iconProps}
+      ref={mergedRef}>
       <MdiIcon
         path={path}
         size={'100%'}
@@ -40,7 +42,8 @@ const Icon: React.FC<IconProps> = (props: InternalIconProps) => {
       />
     </div>
   );
-  
-};
+});
+
+Icon.displayName = 'Icon';
 
 export default Icon; 

package/src/Icon/IconSvg/IconSvg.native.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { View } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+
+/**
+ * Internal component for rendering SVG icons directly from MDI paths.
+ * 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.
+ */
+interface IconSvgProps {
+  path?: string; // MDI icon path, provided by Babel plugin
+  size?: string | number;
+  color?: string;
+  style?: any;
+  'aria-label'?: string;
+  'data-testid'?: string;
+}
+
+export const IconSvg = React.forwardRef<View, IconSvgProps>(({
+  path,
+  size = 24,
+  color = 'currentColor',
+  style,
+  'data-testid': testID,
+}, ref) => {
+  // Convert size to number if it's a string
+  const sizeNum = typeof size === 'string' ? parseFloat(size) : size;
+
+  return (
+    <View ref={ref} style={[{ width: sizeNum, height: sizeNum }, style]} testID={testID}>
+      <Svg viewBox="0 0 24 24" width={sizeNum} height={sizeNum}>
+        <Path d={path} fill={color} />
+      </Svg>
+    </View>
+  );
+});
+
+IconSvg.displayName = 'IconSvg';
+
+export default IconSvg;

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import MdiIcon from '@mdi/react';
+
+/**
+ * Internal component for rendering SVG icons directly from MDI paths.
+ * 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.
+ */
+interface IconSvgProps {
+  path?: string; // MDI icon path, provided by Babel plugin
+  size?: string | number;
+  color?: string;
+  style?: React.CSSProperties;
+  'aria-label'?: string;
+  'data-testid'?: string;
+}
+
+export const IconSvg: React.FC<IconSvgProps> = ({
+  path,
+  color = 'currentColor',
+  style,
+  'aria-label': ariaLabel,
+  'data-testid': testID,
+  ...rest
+}) => {
+  return (
+    <MdiIcon
+      style={style}
+      path={path}
+      color={color}
+      aria-label={ariaLabel}
+      data-testid={testID}
+      {...rest}
+    />
+  );
+};
+
+export default IconSvg;

package/src/Icon/IconSvg/index.native.ts

@@ -0,0 +1 @@
+export { IconSvg, default } from './IconSvg.native';

package/src/Icon/IconSvg/index.ts

@@ -0,0 +1 @@
+export { IconSvg, default } from './IconSvg.web';

package/src/Icon/icon-resolver.native.ts

@@ -0,0 +1,27 @@
+/**
+ * Native stub for icon-resolver.
+ * This file should not be used on React Native as we use react-native-vector-icons instead.
+ * If you're seeing this file being imported, check your import paths.
+ */
+
+/**
+ * Stub implementation for React Native.
+ * Always returns undefined as this utility is web-only.
+ */
+export function resolveIconPath(iconName: string): string | undefined {
+  if (__DEV__) {
+    console.warn(
+      `[icon-resolver.native] resolveIconPath("${iconName}") was called on React Native. ` +
+      `This is a web-only utility. Use react-native-vector-icons directly instead.`
+    );
+  }
+  return undefined;
+}
+
+/**
+ * Type guard to check if a value is an icon name string.
+ * This implementation works cross-platform.
+ */
+export function isIconName(icon: any): icon is string {
+  return typeof icon === 'string';
+}

package/src/Icon/icon-resolver.ts

@@ -0,0 +1,70 @@
+/**
+ * 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"
+ */
+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}`;
+}
+
+/**
+ * Resolves an icon name to its SVG path data.
+ * Returns undefined if the icon is not found.
+ *
+ * @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];
+
+  if (!iconPath) {
+    console.warn(
+      `[icon-resolver] Icon "${iconName}" (${mdiIconName}) not found in @mdi/js, using help-circle as fallback`
+    );
+    return (mdiIcons as any).mdiHelpCircle;
+  }
+
+  return iconPath;
+}
+
+/**
+ * Checks if a given value is an icon name (string) or a React component.
+ *
+ * @param icon - The icon value to check
+ * @returns true if the icon is a string (icon name), false otherwise
+ */
+export function isIconName(icon: any): icon is string {
+  return typeof icon === 'string';
+}

package/src/Icon/index.ts

@@ -1,5 +1,5 @@
-// Platform-agnostic Icon export
-// Metro will resolve to index.native.ts for React Native
-// This file serves as fallback for web environments
-export { default } from './Icon.web';
-export * from './types'; 
+import IconComponent from './Icon.web';
+
+export default IconComponent;
+export { IconComponent as Icon };
+export * from './types';

package/src/Icon/index.web.ts

@@ -1,3 +1,5 @@
-// Web-specific Icon export
-export { default } from './Icon.web';
-export * from './types'; 
+import IconComponent from './Icon.web';
+
+export default IconComponent;
+export { IconComponent as Icon };
+export * from './types';