@idealyst/components 1.1.6 → 1.1.8

package/src/Divider/Divider.styles.tsx

@@ -1,239 +1,119 @@
+/**
+ * Divider styles using defineStyle with dynamic functions.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, Intent, CompoundVariants} from '@idealyst/theme';
+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 DividerVariants = {
-    orientation: DividerOrientation;
-    thickness: DividerThickness;
-    type: DividerType;
-    intent: DividerIntent;
-    length: DividerLength;
-    spacing: DividerSpacing;
-}
-
-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 createDividerCompoundVariants(theme: Theme) {
-    const variants: CompoundVariants<keyof DividerVariants> = [];
-
-    variants.push(
-        { orientation: 'horizontal', thickness: 'thin', styles: { height: 1 } },
-        { orientation: 'horizontal', thickness: 'md', styles: { height: 2 } },
-        { orientation: 'horizontal', thickness: 'thick', styles: { height: 4 } }
-    );
-
-    variants.push(
-        { orientation: 'vertical', thickness: 'thin', styles: { width: 1 } },
-        { orientation: 'vertical', thickness: 'md', styles: { width: 2 } },
-        { orientation: 'vertical', thickness: 'thick', styles: { width: 4 } }
-    );
-
-    variants.push(
-        { orientation: 'horizontal', spacing: 'sm', styles: { marginVertical: 8 } },
-        { orientation: 'horizontal', spacing: 'md', styles: { marginVertical: 16 } },
-        { orientation: 'horizontal', spacing: 'lg', styles: { marginVertical: 24 } }
-    );
-
-    variants.push(
-        { orientation: 'vertical', spacing: 'sm', styles: { marginHorizontal: 8 } },
-        { orientation: 'vertical', spacing: 'md', styles: { marginHorizontal: 16 } },
-        { orientation: 'vertical', spacing: 'lg', styles: { marginHorizontal: 24 } }
-    );
-
-    const borderColor = theme.colors.border.secondary;
-    variants.push(
-        {
-            type: 'dashed',
-            orientation: 'horizontal',
-            styles: {
-                _web: {
-                    borderTop: `1px dashed ${borderColor}`,
-                    borderLeft: 'none',
-                },
-            },
-        },
-        {
-            type: 'dashed',
-            orientation: 'vertical',
-            styles: {
-                _web: {
-                    borderLeft: `1px dashed ${borderColor}`,
-                    borderTop: 'none',
-                },
-            },
-        }
-    );
-
-    variants.push(
-        {
-            type: 'dotted',
-            orientation: 'horizontal',
-            styles: {
-                _web: {
-                    borderTop: `1px dotted ${borderColor}`,
-                    borderLeft: 'none',
-                },
-            },
-        },
-        {
-            type: 'dotted',
-            orientation: 'vertical',
-            styles: {
-                _web: {
-                    borderLeft: `1px dotted ${borderColor}`,
-                    borderTop: 'none',
-                },
-            },
-        }
-    );
-
-    const intents: DividerIntent[] = ['primary', 'success', 'error', 'warning', 'info'];
-    for (const intent of intents) {
-        const color = getIntentColor(theme, intent);
-
-        variants.push({
-            type: 'dashed',
-            intent: intent,
-            orientation: 'horizontal',
-            styles: {
-                borderTopColor: color,
-                _web: { borderTop: `1px dashed ${color}` },
-            },
-        });
-
-        variants.push({
-            type: 'dashed',
-            intent: intent,
-            orientation: 'vertical',
-            styles: {
-                borderLeftColor: color,
-                _web: { borderLeft: `1px dashed ${color}` },
-            },
-        });
-
-        variants.push({
-            type: 'dotted',
-            intent: intent,
-            orientation: 'horizontal',
-            styles: {
-                borderTopColor: color,
-                _web: { borderTop: `1px dotted ${color}` },
-            },
-        });
-
-        variants.push({
-            type: 'dotted',
-            intent: intent,
-            orientation: 'vertical',
-            styles: {
-                borderLeftColor: color,
-                _web: { borderLeft: `1px dotted ${color}` },
-            },
-        });
+export type DividerDynamicProps = {
+    orientation?: DividerOrientation;
+    thickness?: DividerThickness;
+    type?: DividerType;
+    intent?: DividerIntent;
+    spacing?: DividerSpacing;
+};
+
+export type LineDynamicProps = {
+    orientation?: DividerOrientation;
+    thickness?: DividerThickness;
+};
+
+function getThicknessValue(thickness: DividerThickness): number {
+    switch (thickness) {
+        case 'thin': return 1;
+        case 'md': return 2;
+        case 'thick': return 4;
+        default: return 1;
     }
-
-    return variants;
 }
 
-function createLineCompoundVariants(): CompoundVariants<keyof DividerVariants> {
-    return [
-        { orientation: 'horizontal', thickness: 'thin', styles: { height: 1 } },
-        { orientation: 'horizontal', thickness: 'md', styles: { height: 2 } },
-        { orientation: 'horizontal', thickness: 'thick', styles: { height: 4 } },
-        { orientation: 'vertical', thickness: 'thin', styles: { width: 1 } },
-        { orientation: 'vertical', thickness: 'md', styles: { width: 2 } },
-        { orientation: 'vertical', thickness: 'thick', styles: { width: 4 } },
-    ] as const;
+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;
+    }
 }
 
-// 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) => {
-  return {
-    divider: {
-        backgroundColor: theme.colors.border.secondary,
-        variants: {
-            orientation: {
-                horizontal: {
-                    width: '100%',
-                    height: 1,
-                    flexDirection: 'row',
+/**
+ * Divider styles with dynamic functions for orientation/thickness/intent combinations.
+ */
+export const dividerStyles = defineStyle('Divider', (theme: Theme) => ({
+    divider: ({
+        orientation = 'horizontal',
+        thickness = 'thin',
+        type = 'solid',
+        intent = 'neutral',
+        spacing = 'md'
+    }: DividerDynamicProps) => {
+        const thicknessValue = getThicknessValue(thickness);
+        const spacingValue = getSpacingValue(spacing);
+        const isHorizontal = orientation === 'horizontal';
+        const isDashedOrDotted = type === 'dashed' || type === 'dotted';
+
+        // 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 };
+
+        const spacingStyles = isHorizontal
+            ? { marginVertical: spacingValue }
+            : { marginHorizontal: spacingValue };
+
+        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: {},
                 },
-                vertical: {
-                    width: 1,
-                    height: '100%',
-                    flexDirection: 'column',
-                },
-            },
-            thickness: {
-                thin: {},
-                md: {},
-                thick: {},
-            },
-            type: {
-                solid: {},
-                dashed: {
-                    backgroundColor: 'transparent',
-                    _web: {
-                        border: 'none',
-                        backgroundColor: 'transparent',
-                    },
-                },
-                dotted: {
-                    backgroundColor: 'transparent',
-                    _web: {
-                        border: 'none',
-                        backgroundColor: 'transparent',
-                    },
-                },
-            },
-            intent: {
-                primary: { backgroundColor: theme.intents.primary.primary },
-                secondary: { backgroundColor: theme.colors.border.primary },
-                neutral: { backgroundColor: theme.colors.border.secondary },
-                success: { backgroundColor: theme.intents.success.primary },
-                error: { backgroundColor: theme.intents.error.primary },
-                warning: { backgroundColor: theme.intents.warning.primary },
-                info: { backgroundColor: theme.intents.primary.primary },
-            },
-            length: {
-                full: {},
-                auto: {},
-            },
-            spacing: {
-                none: { margin: 0 },
-                sm: {},
-                md: {},
-                lg: {},
             },
-        },
-        compoundVariants: createDividerCompoundVariants(theme),
-    } as const,
-    container: {
+            _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%',
-                },
+                horizontal: { flexDirection: 'row', width: '100%' },
+                vertical: { flexDirection: 'column', height: '100%' },
             },
             spacing: {
                 none: { gap: 0 },
@@ -244,37 +124,31 @@ export const dividerStyles = StyleSheet.create((theme: Theme) => {
                 xl: { gap: 32 },
             },
         },
-    },
-    content: {
+    }),
+
+    content: (_props: { orientation?: DividerOrientation }) => ({
         backgroundColor: theme.colors.surface.primary,
         color: theme.colors.text.secondary,
         fontSize: 14,
         variants: {
             orientation: {
-                horizontal: {
-                    paddingHorizontal: 8,
-                },
-                vertical: {
-                    paddingVertical: 8,
-                },
-            },
-        },
-    },
-    line: {
-        backgroundColor: theme.colors.border.secondary,
-        flex: 1,
-        variants: {
-            orientation: {
-                horizontal: { height: 1 },
-                vertical: { width: 1 },
-            },
-            thickness: {
-                thin: {},
-                md: {},
-                thick: {},
+                horizontal: { paddingHorizontal: 8 },
+                vertical: { paddingVertical: 8 },
             },
         },
-        compoundVariants: createLineCompoundVariants(),
+    }),
+
+    line: ({ 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;
     },
-  };
-});
+}));

package/src/Divider/Divider.web.tsx

@@ -17,30 +17,33 @@ const Divider = forwardRef<HTMLDivElement, DividerProps>(({
   accessibilityLabel,
   id,
 }, ref) => {
-  // Apply variants for main divider
+  // Apply variants for container, content (orientation, spacing)
   dividerStyles.useVariants({
+    orientation,
+    spacing,
+    length: typeof length === 'number' ? 'auto' : length,
+  });
+
+  // Get dynamic divider style
+  const dividerStyle = (dividerStyles.divider as any)({
     orientation,
     thickness,
     type,
     intent,
-    length: typeof length === 'number' ? 'auto' : length,
     spacing,
   });
 
-  // Create style arrays
-
-  const containerStyleArray = [dividerStyles.container];
-  const contentStyleArray = [dividerStyles.content];
-  const lineStyleArray = [dividerStyles.line];
+  // Get dynamic line style
+  const lineStyle = (dividerStyles.line as any)({
+    orientation,
+    thickness,
+  });
 
   // Generate web props
-  const dividerProps = getWebProps([
-    dividerStyles.divider,
-    style as any,
-  ]);
-  const containerProps = getWebProps(containerStyleArray);
-  const contentProps = getWebProps(contentStyleArray);
-  const lineProps = getWebProps(lineStyleArray);
+  const dividerProps = getWebProps([dividerStyle, style as any]);
+  const containerProps = getWebProps([dividerStyles.container]);
+  const contentProps = getWebProps([dividerStyles.content]);
+  const lineProps = getWebProps([lineStyle]);
 
   const mergedDividerRef = useMergeRefs(ref, dividerProps.ref);
   const mergedContainerRef = useMergeRefs(ref, containerProps.ref);

package/src/Icon/Icon.native.tsx

@@ -1,7 +1,8 @@
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { IconProps } from './types';
 import { iconStyles } from './Icon.styles';
+import { useUnistyles } from 'react-native-unistyles';
 
 const Icon = forwardRef<any, IconProps>(({
   name,
@@ -13,18 +14,25 @@ const Icon = forwardRef<any, IconProps>(({
   accessibilityLabel,
   id,
 }: IconProps, ref) => {
+  const { theme } = useUnistyles();
 
+  // Call dynamic style with variants - includes theme-reactive color
+  const iconStyle = (iconStyles.icon as any)({ color, intent, size });
 
-  // Call dynamic style with variants
-  const iconStyle = iconStyles.icon({ color, intent, size });
+  const iconSize = useMemo(() => {
+    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
       ref={ref}
       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),
+    });
+});