@idealyst/components 1.1.6 → 1.1.7

package/src/Divider/Divider.native.tsx

@@ -16,21 +16,30 @@ const Divider = forwardRef<View, 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: type as any,
+    type,
     intent,
-    length: typeof length === 'number' ? 'auto' : length,
     spacing,
   });
 
-  // Get the current styles for color and dimensions
-  const dividerStyle = dividerStyles.divider;
-  
-  // Get thickness value
-  const getThickness = () => {
+  // Get dynamic line style
+  const lineStyle = (dividerStyles.line as any)({
+    orientation,
+    thickness,
+  });
+
+  // Get thickness value for dashed/dotted border handling on native
+  const getThicknessValue = () => {
     switch (thickness) {
       case 'thin': return 1;
       case 'md': return 2;
@@ -39,11 +48,11 @@ const Divider = forwardRef<View, DividerProps>(({
     }
   };
 
-  // For dashed/dotted variants, use border instead of background
-  const getDashedStyle = () => {
+  // For dashed/dotted variants on native, we need to use border instead of background
+  const getNativeDashedStyle = () => {
     if (type === 'dashed' || type === 'dotted') {
-      const actualThickness = getThickness();
-      
+      const actualThickness = getThicknessValue();
+
       return {
         backgroundColor: 'transparent',
         borderStyle: type,
@@ -53,15 +62,11 @@ const Divider = forwardRef<View, DividerProps>(({
           borderBottomWidth: 0,
           borderLeftWidth: 0,
           borderRightWidth: 0,
-          width: '100%',
-          height: actualThickness,
         } : {
           borderLeftWidth: actualThickness,
           borderTopWidth: 0,
           borderBottomWidth: 0,
           borderRightWidth: 0,
-          height: '100%',
-          width: actualThickness,
         }),
       };
     }
@@ -70,66 +75,48 @@ const Divider = forwardRef<View, DividerProps>(({
 
   // If no children, render simple divider
   if (!children) {
-    if (type === 'dashed' || type === 'dotted') {
-      return (
-        <View
-          ref={ref}
-          nativeID={id}
-          style={[
-            dividerStyle,
-            getDashedStyle(),
-            style,
-          ]}
-          testID={testID}
-          accessibilityLabel={accessibilityLabel || "divider"}
-        />
-      );
-    }
-
     return (
       <View
         ref={ref}
         nativeID={id}
-        style={[dividerStyles.divider, style]}
+        style={[dividerStyle, getNativeDashedStyle(), style]}
         testID={testID}
         accessibilityLabel={accessibilityLabel || "divider"}
       />
     );
   }
 
-  // For lines with content, create a simple dashed line
+  // For lines with content, create line segments
   const renderLineSegment = () => {
     if (type === 'dashed' || type === 'dotted') {
-      const actualThickness = getThickness();
-      
+      const actualThickness = getThicknessValue();
+
       return (
         <View
           style={[
-            dividerStyles.line,
+            lineStyle,
             {
               backgroundColor: 'transparent',
               borderStyle: type,
-              borderColor: dividerStyles.line.backgroundColor,
+              borderColor: lineStyle.backgroundColor,
               ...(orientation === 'horizontal' ? {
                 borderTopWidth: actualThickness,
                 borderBottomWidth: 0,
                 borderLeftWidth: 0,
                 borderRightWidth: 0,
-                height: actualThickness,
               } : {
                 borderLeftWidth: actualThickness,
                 borderTopWidth: 0,
                 borderBottomWidth: 0,
                 borderRightWidth: 0,
-                width: actualThickness,
               }),
             },
           ]}
         />
       );
     }
-    
-    return <View style={dividerStyles.line} />;
+
+    return <View style={lineStyle} />;
   };
 
   return (

package/src/Divider/Divider.styles.tsx

@@ -1,5 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, Intent, CompoundVariants} from '@idealyst/theme';
+import { Theme, Intent } from '@idealyst/theme';
+import { applyExtensions } from '../extensions/applyExtension';
 
 type DividerOrientation = 'horizontal' | 'vertical';
 type DividerThickness = 'thin' | 'md' | 'thick';
@@ -8,14 +9,18 @@ type DividerIntent = Intent | 'secondary' | 'neutral' | 'info';
 type DividerLength = 'full' | 'auto';
 type DividerSpacing = 'none' | 'sm' | 'md' | 'lg';
 
-type DividerVariants = {
-    orientation: DividerOrientation;
-    thickness: DividerThickness;
-    type: DividerType;
-    intent: DividerIntent;
-    length: DividerLength;
-    spacing: DividerSpacing;
-}
+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;
@@ -24,257 +29,148 @@ function getIntentColor(theme: Theme, intent: DividerIntent): string {
     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',
-                },
-            },
-        }
-    );
+function getThicknessValue(thickness: DividerThickness): number {
+    switch (thickness) {
+        case 'thin': return 1;
+        case 'md': return 2;
+        case 'thick': return 4;
+        default: return 1;
+    }
+}
 
-    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',
-                },
-            },
-        }
-    );
+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;
+    }
+}
 
-    const intents: DividerIntent[] = ['primary', 'success', 'error', 'warning', 'info'];
-    for (const intent of intents) {
+/**
+ * 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);
-
-        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}` },
+        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: {},
+                },
             },
-        });
-    }
-
-    return variants;
+            _web: webBorderStyles,
+        } as const;
+    };
 }
 
-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;
+/**
+ * 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) => {
-  return {
-    divider: {
-        backgroundColor: theme.colors.border.secondary,
-        variants: {
-            orientation: {
-                horizontal: {
-                    width: '100%',
-                    height: 1,
-                    flexDirection: 'row',
-                },
-                vertical: {
-                    width: 1,
-                    height: '100%',
-                    flexDirection: 'column',
-                },
-            },
-            thickness: {
-                thin: {},
-                md: {},
-                thick: {},
-            },
-            type: {
-                solid: {},
-                dashed: {
-                    backgroundColor: 'transparent',
-                    _web: {
-                        border: 'none',
-                        backgroundColor: 'transparent',
+    // 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%',
                     },
-                },
-                dotted: {
-                    backgroundColor: 'transparent',
-                    _web: {
-                        border: 'none',
-                        backgroundColor: 'transparent',
+                    vertical: {
+                        flexDirection: 'column',
+                        height: '100%',
                     },
                 },
-            },
-            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: {
-        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 },
                 },
             },
-            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,
+        content: {
+            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: {},
-            },
-        },
-        compoundVariants: createLineCompoundVariants(),
-    },
-  };
+        line: createLineStyles(theme),
+    };
 });

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 { iconStyles, buildIconSize } from './Icon.styles';
+import { useUnistyles } from 'react-native-unistyles';
 
 const Icon = forwardRef<any, IconProps>(({
   name,
@@ -16,7 +17,13 @@ const Icon = forwardRef<any, IconProps>(({
 
 
   // Call dynamic style with variants
-  const iconStyle = iconStyles.icon({ color, intent, size });
+  const iconStyle = (iconStyles.icon as any)({ color, intent, size });
+
+  const { theme } = useUnistyles();
+
+  const iconSize = useMemo(() => {
+    return buildIconSize(theme, size).width;
+  }, [theme, size]);
 
   // Get fontSize from styles for numeric size prop
 
@@ -24,6 +31,7 @@ const Icon = forwardRef<any, IconProps>(({
     <MaterialCommunityIcons
       ref={ref}
       nativeID={id}
+      size={iconSize}
       name={name}
       style={[iconStyle, style]}
       testID={testID}

package/src/Icon/Icon.styles.tsx

@@ -2,6 +2,7 @@ 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;
@@ -27,7 +28,7 @@ function getIconColor(theme: Theme, color?: Color, intent?: Intent): string {
     return theme.colors.text.primary;
 }
 
-function buildIconSize(theme: Theme, size?: IconSizeVariant) {
+export function buildIconSize(theme: Theme, size?: IconSizeVariant) {
     // Handle direct numeric sizes
     if (typeof size === 'number') {
         return {
@@ -73,7 +74,12 @@ function createIconStyles(theme: Theme) {
 // 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;
+    // Apply extensions to main visual elements
+    const extended = applyExtensions('Icon', theme, {
+        icon: createIconStyles(theme),
+    });
+
+    return {
+        ...extended,
+    };
 });