@idealyst/components 1.1.7 → 1.1.8

package/src/Divider/Divider.styles.old.tsx

@@ -0,0 +1,172 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, Intent } from '@idealyst/theme';
+import { applyExtensions } from '../extensions/applyExtension';
+
+type DividerOrientation = 'horizontal' | 'vertical';
+type DividerThickness = 'thin' | 'md' | 'thick';
+type DividerType = 'solid' | 'dashed' | 'dotted';
+type DividerIntent = Intent | 'secondary' | 'neutral' | 'info';
+type DividerLength = 'full' | 'auto';
+type DividerSpacing = 'none' | 'sm' | 'md' | 'lg';
+
+type DividerDynamicProps = {
+    orientation?: DividerOrientation;
+    thickness?: DividerThickness;
+    type?: DividerType;
+    intent?: DividerIntent;
+    spacing?: DividerSpacing;
+};
+
+type LineDynamicProps = {
+    orientation?: DividerOrientation;
+    thickness?: DividerThickness;
+};
+
+function getIntentColor(theme: Theme, intent: DividerIntent): string {
+    if (intent === 'secondary') return theme.colors.border.primary;
+    if (intent === 'neutral') return theme.colors.border.secondary;
+    if (intent === 'info') return theme.intents.primary.primary;
+    return theme.intents[intent as Intent].primary;
+}
+
+function getThicknessValue(thickness: DividerThickness): number {
+    switch (thickness) {
+        case 'thin': return 1;
+        case 'md': return 2;
+        case 'thick': return 4;
+        default: return 1;
+    }
+}
+
+function getSpacingValue(spacing: DividerSpacing): number {
+    switch (spacing) {
+        case 'none': return 0;
+        case 'sm': return 8;
+        case 'md': return 16;
+        case 'lg': return 24;
+        default: return 0;
+    }
+}
+
+/**
+ * Create dynamic divider styles
+ */
+function createDividerStyles(theme: Theme) {
+    return ({
+        orientation = 'horizontal',
+        thickness = 'thin',
+        type = 'solid',
+        intent = 'neutral',
+        spacing = 'md'
+    }: DividerDynamicProps) => {
+        const color = getIntentColor(theme, intent);
+        const thicknessValue = getThicknessValue(thickness);
+        const spacingValue = getSpacingValue(spacing);
+
+        const isHorizontal = orientation === 'horizontal';
+        const isDashedOrDotted = type === 'dashed' || type === 'dotted';
+
+        // Base dimension styles based on orientation and thickness
+        const dimensionStyles = isHorizontal
+            ? { width: '100%', height: thicknessValue, flexDirection: 'row' as const }
+            : { width: thicknessValue, height: '100%', flexDirection: 'column' as const };
+
+        // Spacing styles based on orientation
+        const spacingStyles = isHorizontal
+            ? { marginVertical: spacingValue }
+            : { marginHorizontal: spacingValue };
+
+        // Web-specific border styles for dashed/dotted
+        const webBorderStyles = isDashedOrDotted ? {
+            border: 'none',
+            backgroundColor: 'transparent',
+            ...(isHorizontal
+                ? { borderTop: `${thicknessValue}px ${type} ${color}` }
+                : { borderLeft: `${thicknessValue}px ${type} ${color}` }
+            ),
+        } : {};
+
+        return {
+            backgroundColor: isDashedOrDotted ? 'transparent' : color,
+            ...dimensionStyles,
+            ...spacingStyles,
+            variants: {
+                length: {
+                    full: {},
+                    auto: {},
+                },
+            },
+            _web: webBorderStyles,
+        } as const;
+    };
+}
+
+/**
+ * Create dynamic line styles (for dividers with content)
+ */
+function createLineStyles(theme: Theme) {
+    return ({ orientation = 'horizontal', thickness = 'thin' }: LineDynamicProps) => {
+        const thicknessValue = getThicknessValue(thickness);
+        const isHorizontal = orientation === 'horizontal';
+
+        return {
+            backgroundColor: theme.colors.border.secondary,
+            flex: 1,
+            ...(isHorizontal
+                ? { height: thicknessValue }
+                : { width: thicknessValue }
+            ),
+        } 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 dividerStyles = StyleSheet.create((theme: Theme) => {
+    // Apply extensions to main visual elements
+
+    return applyExtensions('Divider', theme, {divider: createDividerStyles(theme),
+        // Additional styles (merged from return)
+        // Minor utility styles (not extended)
+        container: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            display: 'flex',
+            variants: {
+                orientation: {
+                    horizontal: {
+                        flexDirection: 'row',
+                        width: '100%',
+                    },
+                    vertical: {
+                        flexDirection: 'column',
+                        height: '100%',
+                    },
+                },
+                spacing: {
+                    none: { gap: 0 },
+                    xs: { gap: 4 },
+                    sm: { gap: 8 },
+                    md: { gap: 16 },
+                    lg: { gap: 24 },
+                    xl: { gap: 32 },
+                },
+            },
+        },
+        content: {
+            backgroundColor: theme.colors.surface.primary,
+            color: theme.colors.text.secondary,
+            fontSize: 14,
+            variants: {
+                orientation: {
+                    horizontal: {
+                        paddingHorizontal: 8,
+                    },
+                    vertical: {
+                        paddingVertical: 8,
+                    },
+                },
+            },
+        },
+        line: createLineStyles(theme)});
+});

package/src/Divider/Divider.styles.tsx

@@ -1,15 +1,24 @@
+/**
+ * Divider styles using defineStyle with dynamic functions.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, Intent } from '@idealyst/theme';
-import { applyExtensions } from '../extensions/applyExtension';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent } 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>;
 
 type DividerOrientation = 'horizontal' | 'vertical';
 type DividerThickness = 'thin' | 'md' | 'thick';
 type DividerType = 'solid' | 'dashed' | 'dotted';
 type DividerIntent = Intent | 'secondary' | 'neutral' | 'info';
-type DividerLength = 'full' | 'auto';
 type DividerSpacing = 'none' | 'sm' | 'md' | 'lg';
+type DividerLength = 'full' | 'auto';
 
-type DividerDynamicProps = {
+export type DividerDynamicProps = {
     orientation?: DividerOrientation;
     thickness?: DividerThickness;
     type?: DividerType;
@@ -17,18 +26,11 @@ type DividerDynamicProps = {
     spacing?: DividerSpacing;
 };
 
-type LineDynamicProps = {
+export type LineDynamicProps = {
     orientation?: DividerOrientation;
     thickness?: DividerThickness;
 };
 
-function getIntentColor(theme: Theme, intent: DividerIntent): string {
-    if (intent === 'secondary') return theme.colors.border.primary;
-    if (intent === 'neutral') return theme.colors.border.secondary;
-    if (intent === 'info') return theme.intents.primary.primary;
-    return theme.intents[intent as Intent].primary;
-}
-
 function getThicknessValue(thickness: DividerThickness): number {
     switch (thickness) {
         case 'thin': return 1;
@@ -49,34 +51,38 @@ function getSpacingValue(spacing: DividerSpacing): number {
 }
 
 /**
- * Create dynamic divider styles
+ * Divider styles with dynamic functions for orientation/thickness/intent combinations.
  */
-function createDividerStyles(theme: Theme) {
-    return ({
+export const dividerStyles = defineStyle('Divider', (theme: Theme) => ({
+    divider: ({
         orientation = 'horizontal',
         thickness = 'thin',
         type = 'solid',
         intent = 'neutral',
         spacing = 'md'
     }: DividerDynamicProps) => {
-        const color = getIntentColor(theme, intent);
         const thicknessValue = getThicknessValue(thickness);
         const spacingValue = getSpacingValue(spacing);
-
         const isHorizontal = orientation === 'horizontal';
         const isDashedOrDotted = type === 'dashed' || type === 'dotted';
 
-        // Base dimension styles based on orientation and thickness
+        // Get color based on intent - inline for Unistyles to trace
+        const color = intent === 'secondary'
+            ? theme.colors.border.primary
+            : intent === 'neutral'
+                ? theme.colors.border.secondary
+                : intent === 'info'
+                    ? theme.intents.primary.primary
+                    : theme.intents[intent as Intent].primary;
+
         const dimensionStyles = isHorizontal
             ? { width: '100%', height: thicknessValue, flexDirection: 'row' as const }
             : { width: thicknessValue, height: '100%', flexDirection: 'column' as const };
 
-        // Spacing styles based on orientation
         const spacingStyles = isHorizontal
             ? { marginVertical: spacingValue }
             : { marginHorizontal: spacingValue };
 
-        // Web-specific border styles for dashed/dotted
         const webBorderStyles = isDashedOrDotted ? {
             border: 'none',
             backgroundColor: 'transparent',
@@ -98,14 +104,41 @@ function createDividerStyles(theme: Theme) {
             },
             _web: webBorderStyles,
         } as const;
-    };
-}
+    },
+
+    container: (_props: { orientation?: DividerOrientation; spacing?: DividerSpacing }) => ({
+        alignItems: 'center',
+        justifyContent: 'center',
+        display: 'flex',
+        variants: {
+            orientation: {
+                horizontal: { flexDirection: 'row', width: '100%' },
+                vertical: { flexDirection: 'column', height: '100%' },
+            },
+            spacing: {
+                none: { gap: 0 },
+                xs: { gap: 4 },
+                sm: { gap: 8 },
+                md: { gap: 16 },
+                lg: { gap: 24 },
+                xl: { gap: 32 },
+            },
+        },
+    }),
+
+    content: (_props: { orientation?: DividerOrientation }) => ({
+        backgroundColor: theme.colors.surface.primary,
+        color: theme.colors.text.secondary,
+        fontSize: 14,
+        variants: {
+            orientation: {
+                horizontal: { paddingHorizontal: 8 },
+                vertical: { paddingVertical: 8 },
+            },
+        },
+    }),
 
-/**
- * Create dynamic line styles (for dividers with content)
- */
-function createLineStyles(theme: Theme) {
-    return ({ orientation = 'horizontal', thickness = 'thin' }: LineDynamicProps) => {
+    line: ({ orientation = 'horizontal', thickness = 'thin' }: LineDynamicProps) => {
         const thicknessValue = getThicknessValue(thickness);
         const isHorizontal = orientation === 'horizontal';
 
@@ -117,60 +150,5 @@ function createLineStyles(theme: Theme) {
                 : { width: thicknessValue }
             ),
         } 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 dividerStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-    const extended = applyExtensions('Divider', theme, {
-        divider: createDividerStyles(theme),
-    });
-
-    return {
-        ...extended,
-        // Minor utility styles (not extended)
-        container: {
-            alignItems: 'center',
-            justifyContent: 'center',
-            display: 'flex',
-            variants: {
-                orientation: {
-                    horizontal: {
-                        flexDirection: 'row',
-                        width: '100%',
-                    },
-                    vertical: {
-                        flexDirection: 'column',
-                        height: '100%',
-                    },
-                },
-                spacing: {
-                    none: { gap: 0 },
-                    xs: { gap: 4 },
-                    sm: { gap: 8 },
-                    md: { gap: 16 },
-                    lg: { gap: 24 },
-                    xl: { gap: 32 },
-                },
-            },
-        },
-        content: {
-            backgroundColor: theme.colors.surface.primary,
-            color: theme.colors.text.secondary,
-            fontSize: 14,
-            variants: {
-                orientation: {
-                    horizontal: {
-                        paddingHorizontal: 8,
-                    },
-                    vertical: {
-                        paddingVertical: 8,
-                    },
-                },
-            },
-        },
-        line: createLineStyles(theme),
-    };
-});
+    },
+}));

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,
-    };
-});
+    },
+}));