@idealyst/components 1.1.6 → 1.1.8

package/src/Icon/Icon.styles.tsx

@@ -1,79 +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';
 
-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;
 
-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) => {
-  return {
-    icon: createIconStyles(theme),
-  } as const;
-});
+    },
+}));

package/src/Icon/Icon.web.tsx

@@ -3,14 +3,16 @@ 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';
 
 // 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: InternalIconProps, ref) => {
   const {
     name,
     size = 'md',
@@ -23,26 +25,60 @@ const Icon = forwardRef<HTMLDivElement, IconProps>((props: InternalIconProps, re
     ...restProps
   } = props;
 
+  const { theme } = useUnistyles();
+
   // 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 }));
+
+  // 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}>
+      id={id}
+      style={{
+        ...iconProps.style,
+        fontSize: iconSize,
+        width: '1em',
+        height: '1em',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexShrink: 0,
+        lineHeight: 1,
+        color: iconColor,
+      }}
+    >
       <MdiIcon
         path={path}
-        size={'100%'}
-        color={'currentColor'}
+        size="1em"
+        color="currentColor"
         data-testid={testID}
         aria-label={accessibilityLabel || name}
       />
-    </div>
+    </span>
   );
 });
 

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

@@ -19,6 +19,7 @@ interface IconSvgProps {
 
 export const IconSvg: React.FC<IconSvgProps> = ({
   path,
+  size = '1em',
   color = 'currentColor',
   style,
   'aria-label': ariaLabel,
@@ -29,6 +30,7 @@ export const IconSvg: React.FC<IconSvgProps> = ({
     <MdiIcon
       style={style}
       path={path}
+      size={size}
       color={color}
       aria-label={ariaLabel}
       data-testid={testID}

package/src/Image/Image.styles.old.tsx

@@ -0,0 +1,69 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles} from '@idealyst/theme';
+import { applyExtensions } from '../extensions/applyExtension';
+
+type ImageVariants = {}
+
+export type ExpandedImageStyles = StylesheetStyles<keyof ImageVariants>;
+
+export type ImageStylesheet = {
+    container: ExpandedImageStyles;
+    image: ExpandedImageStyles;
+    placeholder: ExpandedImageStyles;
+    fallback: ExpandedImageStyles;
+    loadingIndicator: ExpandedImageStyles;
+}
+
+// Style creators for extension support
+function createContainerStyles(theme: Theme) {
+    return () => ({
+        position: 'relative' as const,
+        overflow: 'hidden' as const,
+        backgroundColor: theme.colors['gray.200'],
+    });
+}
+
+function createImageStyles() {
+    return () => ({
+        width: '100%' as const,
+        height: '100%' 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.
+// @ts-ignore - TS language server needs restart to pick up theme structure changes
+export const imageStyles = StyleSheet.create((theme: Theme) => {
+    // Apply extensions to main visual elements
+
+    return applyExtensions('Image', theme, {container: createContainerStyles(theme),
+        image: createImageStyles(),
+        // Additional styles (merged from return)
+        // Minor utility styles (not extended)
+        placeholder: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: theme.colors['gray.200'],
+        },
+        fallback: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: theme.colors['gray.300'],
+            color: theme.colors['gray.600'],
+        },
+        loadingIndicator: {
+            color: theme.colors['gray.600'],
+        }});
+});

package/src/Image/Image.styles.tsx

@@ -1,57 +1,59 @@
+/**
+ * Image styles using defineStyle.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles} from '@idealyst/theme';
-
-type ImageVariants = {}
-
-export type ExpandedImageStyles = StylesheetStyles<keyof ImageVariants>;
-
-export type ImageStylesheet = {
-    container: ExpandedImageStyles;
-    image: ExpandedImageStyles;
-    placeholder: ExpandedImageStyles;
-    fallback: ExpandedImageStyles;
-    loadingIndicator: ExpandedImageStyles;
-}
-
-// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel
-// transform on native cannot resolve function calls to extract variant structures.
-// @ts-ignore - TS language server needs restart to pick up theme structure changes
-export const imageStyles = StyleSheet.create((theme: Theme) => {
-  return {
-    container: {
-        position: 'relative',
-        overflow: 'hidden',
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme } from '@idealyst/theme';
+
+// 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 ImageDynamicProps = {};
+
+/**
+ * Image styles - simple container and image styles.
+ */
+export const imageStyles = defineStyle('Image', (theme: Theme) => ({
+    container: (_props: ImageDynamicProps) => ({
+        position: 'relative' as const,
+        overflow: 'hidden' as const,
         backgroundColor: theme.colors['gray.200'],
-    },
-    image: {
-        width: '100%',
-        height: '100%',
-    },
-    placeholder: {
-        position: 'absolute',
+    }),
+
+    image: (_props: ImageDynamicProps) => ({
+        width: '100%' as const,
+        height: '100%' as const,
+    }),
+
+    placeholder: (_props: ImageDynamicProps) => ({
+        position: 'absolute' as const,
         top: 0,
         left: 0,
         right: 0,
         bottom: 0,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
         backgroundColor: theme.colors['gray.200'],
-    },
-    fallback: {
-        position: 'absolute',
+    }),
+
+    fallback: (_props: ImageDynamicProps) => ({
+        position: 'absolute' as const,
         top: 0,
         left: 0,
         right: 0,
         bottom: 0,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
         backgroundColor: theme.colors['gray.300'],
         color: theme.colors['gray.600'],
-    },
-    loadingIndicator: {
+    }),
+
+    loadingIndicator: (_props: ImageDynamicProps) => ({
         color: theme.colors['gray.600'],
-    },
-  };
-});
+    }),
+}));