@idealyst/components 1.0.83 → 1.0.84

package/src/Divider/Divider.styles.tsx

@@ -1,602 +1,280 @@
 import { StyleSheet } from 'react-native-unistyles';
+import { Theme, Intent, CompoundVariants} from '@idealyst/theme';
 
-export const dividerStyles = StyleSheet.create((theme) => ({
-  divider: {
-    backgroundColor: theme.colors?.border?.secondary || theme.palettes?.gray?.[300] || '#d1d5db',
-    
-    variants: {
-      orientation: {
-        horizontal: {
-          width: '100%',
-          height: 1,
-          flexDirection: 'row',
-        },
-        vertical: {
-          width: 1,
-          height: '100%',
-          flexDirection: 'column',
-        },
-      },
-      thickness: {
-        thin: {
-          // Handled by orientation compound variants
-        },
-        medium: {
-          // Handled by orientation compound variants
-        },
-        thick: {
-          // Handled by orientation compound variants
-        },
-      },
-      variant: {
-        solid: {
-          // Default solid style
-        },
-        dashed: {
-          // React Native: handled by component logic with segments
-          backgroundColor: 'transparent',
-          
-          _web: {
-            border: 'none',
-            backgroundColor: 'transparent',
-          },
-        },
-        dotted: {
-          // React Native: handled by component logic with segments
-          backgroundColor: 'transparent',
-          
-          _web: {
-            border: 'none',
-            backgroundColor: 'transparent',
-          },
-        },
-      },
-      intent: {
-        primary: {
-          backgroundColor: theme.intents?.primary?.main || '#3b82f6',
-        },
-        secondary: {
-          backgroundColor: theme.colors?.border?.primary || theme.palettes?.gray?.[200] || '#e5e7eb',
-        },
-        neutral: {
-          backgroundColor: theme.colors?.border?.secondary || theme.palettes?.gray?.[300] || '#d1d5db',
-        },
-        success: {
-          backgroundColor: theme.intents?.success?.main || '#22c55e',
-        },
-        error: {
-          backgroundColor: theme.intents?.error?.main || '#ef4444',
-        },
-        warning: {
-          backgroundColor: theme.intents?.warning?.main || '#f59e0b',
-        },
-        info: {
-          backgroundColor: theme.intents?.info?.main || '#06b6d4',
-        },
-      },
-      length: {
-        full: {
-          // Default full length
-        },
-        auto: {
-          // Auto length handled by parent container
-        },
-      },
-      spacing: {
-        none: {
-          margin: 0,
-        },
-        small: {
-          // Handled by orientation compound variants
-        },
-        medium: {
-          // Handled by orientation compound variants
-        },
-        large: {
-          // Handled by orientation compound variants
-        },
-      },
-    },
-    
-    compoundVariants: [
-      // Horizontal thickness variants
-      {
-        orientation: 'horizontal',
-        thickness: 'thin',
-        styles: {
-          height: 1,
-        },
-      },
-      {
-        orientation: 'horizontal',
-        thickness: 'medium',
-        styles: {
-          height: 2,
-        },
-      },
-      {
-        orientation: 'horizontal',
-        thickness: 'thick',
-        styles: {
-          height: 4,
-        },
-      },
-      // Vertical thickness variants
-      {
-        orientation: 'vertical',
-        thickness: 'thin',
-        styles: {
-          width: 1,
-        },
-      },
-      {
-        orientation: 'vertical',
-        thickness: 'medium',
-        styles: {
-          width: 2,
-        },
-      },
-      {
-        orientation: 'vertical',
-        thickness: 'thick',
-        styles: {
-          width: 4,
-        },
-      },
-      // Horizontal spacing variants
-      {
-        orientation: 'horizontal',
-        spacing: 'small',
-        styles: {
-          marginVertical: theme.spacing?.sm || 8,
-        },
-      },
-      {
-        orientation: 'horizontal',
-        spacing: 'medium',
-        styles: {
-          marginVertical: theme.spacing?.md || 12,
-        },
-      },
-      {
-        orientation: 'horizontal',
-        spacing: 'large',
-        styles: {
-          marginVertical: theme.spacing?.lg || 16,
-        },
-      },
-      // Vertical spacing variants
-      {
-        orientation: 'vertical',
-        spacing: 'small',
-        styles: {
-          marginHorizontal: theme.spacing?.sm || 8,
-        },
-      },
-      {
-        orientation: 'vertical',
-        spacing: 'medium',
-        styles: {
-          marginHorizontal: theme.spacing?.md || 12,
-        },
-      },
-      {
-        orientation: 'vertical',
-        spacing: 'large',
-        styles: {
-          marginHorizontal: theme.spacing?.lg || 16,
-        },
-      },
-      // Dashed variant compound styles (web-only, RN handled by component)
-      {
-        variant: 'dashed',
-        orientation: 'horizontal',
-        styles: {
-          _web: {
-            borderTop: `1px dashed ${theme.colors?.border?.secondary || theme.palettes?.gray?.[300] || '#d1d5db'}`,
-            borderLeft: 'none',
-          },
-        },
-      },
-      {
-        variant: 'dashed',
-        orientation: 'vertical',
-        styles: {
-          _web: {
-            borderLeft: `1px dashed ${theme.colors?.border?.secondary || theme.palettes?.gray?.[300] || '#d1d5db'}`,
-            borderTop: 'none',
-          },
-        },
-      },
-      // Dotted variant compound styles (web-only, RN handled by component)
-      {
-        variant: 'dotted',
-        orientation: 'horizontal',
-        styles: {
-          _web: {
-            borderTop: `1px dotted ${theme.colors?.border?.secondary || theme.palettes?.gray?.[300] || '#d1d5db'}`,
-            borderLeft: 'none',
-          },
-        },
-      },
-      {
-        variant: 'dotted',
-        orientation: 'vertical',
-        styles: {
-          _web: {
-            borderLeft: `1px dotted ${theme.colors?.border?.secondary || theme.palettes?.gray?.[300] || '#d1d5db'}`,
-            borderTop: 'none',
-          },
-        },
-      },
-      // Intent color compounds for dashed variant
-      {
-        variant: 'dashed',
-        intent: 'primary',
-        orientation: 'horizontal',
-        styles: {
-          borderTopColor: theme.intents?.primary?.main || '#3b82f6',
-          
-          _web: {
-            borderTop: `1px dashed ${theme.intents?.primary?.main || '#3b82f6'}`,
-          },
-        },
-      },
-      {
-        variant: 'dashed',
-        intent: 'primary',
-        orientation: 'vertical',
-        styles: {
-          borderLeftColor: theme.intents?.primary?.main || '#3b82f6',
-          
-          _web: {
-            borderLeft: `1px dashed ${theme.intents?.primary?.main || '#3b82f6'}`,
-          },
-        },
-      },
-      {
-        variant: 'dashed',
-        intent: 'success',
-        orientation: 'horizontal',
-        styles: {
-          borderTopColor: theme.intents?.success?.main || '#22c55e',
-          
-          _web: {
-            borderTop: `1px dashed ${theme.intents?.success?.main || '#22c55e'}`,
-          },
-        },
-      },
-      {
-        variant: 'dashed',
-        intent: 'success',
-        orientation: 'vertical',
-        styles: {
-          borderLeftColor: theme.intents?.success?.main || '#22c55e',
-          
-          _web: {
-            borderLeft: `1px dashed ${theme.intents?.success?.main || '#22c55e'}`,
-          },
-        },
-      },
-      {
-        variant: 'dashed',
-        intent: 'error',
-        orientation: 'horizontal',
-        styles: {
-          borderTopColor: theme.intents?.error?.main || '#ef4444',
-          
-          _web: {
-            borderTop: `1px dashed ${theme.intents?.error?.main || '#ef4444'}`,
-          },
-        },
-      },
-      {
-        variant: 'dashed',
-        intent: 'error',
-        orientation: 'vertical',
-        styles: {
-          borderLeftColor: theme.intents?.error?.main || '#ef4444',
-          
-          _web: {
-            borderLeft: `1px dashed ${theme.intents?.error?.main || '#ef4444'}`,
-          },
-        },
-      },
-      {
-        variant: 'dashed',
-        intent: 'warning',
-        orientation: 'horizontal',
-        styles: {
-          borderTopColor: theme.intents?.warning?.main || '#f59e0b',
-          
-          _web: {
-            borderTop: `1px dashed ${theme.intents?.warning?.main || '#f59e0b'}`,
-          },
-        },
-      },
-      {
-        variant: 'dashed',
-        intent: 'warning',
-        orientation: 'vertical',
-        styles: {
-          borderLeftColor: theme.intents?.warning?.main || '#f59e0b',
-          
-          _web: {
-            borderLeft: `1px dashed ${theme.intents?.warning?.main || '#f59e0b'}`,
-          },
-        },
-      },
-      {
-        variant: 'dashed',
-        intent: 'info',
-        orientation: 'horizontal',
-        styles: {
-          borderTopColor: theme.intents?.info?.main || '#06b6d4',
-          
-          _web: {
-            borderTop: `1px dashed ${theme.intents?.info?.main || '#06b6d4'}`,
-          },
-        },
-      },
-      {
-        variant: 'dashed',
-        intent: 'info',
-        orientation: 'vertical',
-        styles: {
-          borderLeftColor: theme.intents?.info?.main || '#06b6d4',
-          
-          _web: {
-            borderLeft: `1px dashed ${theme.intents?.info?.main || '#06b6d4'}`,
-          },
-        },
-      },
-      // Intent color compounds for dotted variant
-      {
-        variant: 'dotted',
-        intent: 'primary',
-        orientation: 'horizontal',
-        styles: {
-          borderTopColor: theme.intents?.primary?.main || '#3b82f6',
-          
-          _web: {
-            borderTop: `1px dotted ${theme.intents?.primary?.main || '#3b82f6'}`,
-          },
-        },
-      },
-      {
-        variant: 'dotted',
-        intent: 'primary',
-        orientation: 'vertical',
-        styles: {
-          borderLeftColor: theme.intents?.primary?.main || '#3b82f6',
-          
-          _web: {
-            borderLeft: `1px dotted ${theme.intents?.primary?.main || '#3b82f6'}`,
-          },
-        },
-      },
-      {
-        variant: 'dotted',
-        intent: 'success',
-        orientation: 'horizontal',
-        styles: {
-          borderTopColor: theme.intents?.success?.main || '#22c55e',
-          
-          _web: {
-            borderTop: `1px dotted ${theme.intents?.success?.main || '#22c55e'}`,
-          },
-        },
-      },
-      {
-        variant: 'dotted',
-        intent: 'success',
-        orientation: 'vertical',
-        styles: {
-          borderLeftColor: theme.intents?.success?.main || '#22c55e',
-          
-          _web: {
-            borderLeft: `1px dotted ${theme.intents?.success?.main || '#22c55e'}`,
-          },
-        },
-      },
-      {
-        variant: 'dotted',
-        intent: 'error',
-        orientation: 'horizontal',
-        styles: {
-          borderTopColor: theme.intents?.error?.main || '#ef4444',
-          
-          _web: {
-            borderTop: `1px dotted ${theme.intents?.error?.main || '#ef4444'}`,
-          },
-        },
-      },
-      {
-        variant: 'dotted',
-        intent: 'error',
-        orientation: 'vertical',
-        styles: {
-          borderLeftColor: theme.intents?.error?.main || '#ef4444',
-          
-          _web: {
-            borderLeft: `1px dotted ${theme.intents?.error?.main || '#ef4444'}`,
-          },
-        },
-      },
-      {
-        variant: 'dotted',
-        intent: 'warning',
-        orientation: 'horizontal',
-        styles: {
-          borderTopColor: theme.intents?.warning?.main || '#f59e0b',
-          
-          _web: {
-            borderTop: `1px dotted ${theme.intents?.warning?.main || '#f59e0b'}`,
-          },
-        },
-      },
-      {
-        variant: 'dotted',
-        intent: 'warning',
-        orientation: 'vertical',
-        styles: {
-          borderLeftColor: theme.intents?.warning?.main || '#f59e0b',
-          
-          _web: {
-            borderLeft: `1px dotted ${theme.intents?.warning?.main || '#f59e0b'}`,
-          },
-        },
-      },
-      {
-        variant: 'dotted',
-        intent: 'info',
-        orientation: 'horizontal',
-        styles: {
-          borderTopColor: theme.intents?.info?.main || '#06b6d4',
-          
-          _web: {
-            borderTop: `1px dotted ${theme.intents?.info?.main || '#06b6d4'}`,
-          },
-        },
-      },
-      {
-        variant: 'dotted',
-        intent: 'info',
-        orientation: 'vertical',
-        styles: {
-          borderLeftColor: theme.intents?.info?.main || '#06b6d4',
-          
-          _web: {
-            borderLeft: `1px dotted ${theme.intents?.info?.main || '#06b6d4'}`,
-          },
-        },
-      },
-    ],
-  },
-  
-  // Container for dividers with content
-  container: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    
-    variants: {
-      orientation: {
-        horizontal: {
-          flexDirection: 'row',
-          width: '100%',
-        },
-        vertical: {
-          flexDirection: 'column',
-          height: '100%',
-        },
-      },
-      spacing: {
-        none: {
-          gap: 0,
-        },
-        small: {
-          gap: theme.spacing?.sm || 8,
-        },
-        medium: {
-          gap: theme.spacing?.md || 12,
-        },
-        large: {
-          gap: theme.spacing?.lg || 16,
+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 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}` },
+            },
+        });
+    }
+
+    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;
+}
+
+// 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',
+                    },
+                },
+                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: {
+        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 styling for dividers with children
-  content: {
-    backgroundColor: theme.colors?.surface?.primary || '#ffffff',
-    color: theme.colors?.text?.secondary || theme.palettes?.gray?.[600] || '#4b5563',
-    fontSize: theme.typography?.fontSize?.sm || 14,
-    
-    variants: {
-      orientation: {
-        horizontal: {
-          paddingHorizontal: theme.spacing?.sm || 8,
-        },
-        vertical: {
-          paddingVertical: theme.spacing?.sm || 8,
+    content: {
+        backgroundColor: theme.colors.surface.primary,
+        color: theme.colors.text.secondary,
+        fontSize: 14,
+        variants: {
+            orientation: {
+                horizontal: {
+                    paddingHorizontal: 8,
+                },
+                vertical: {
+                    paddingVertical: 8,
+                },
+            },
         },
-      },
     },
-  },
-  
-  // Line segments for dividers with content
-  line: {
-    backgroundColor: theme.colors?.border?.secondary || theme.palettes?.gray?.[300] || '#d1d5db',
-    flex: 1,
-    
-    variants: {
-      orientation: {
-        horizontal: {
-          height: 1,
-        },
-        vertical: {
-          width: 1,
-        },
-      },
-      thickness: {
-        thin: {
-          // Handled by orientation compound variants
-        },
-        medium: {
-          // Handled by orientation compound variants
-        },
-        thick: {
-          // Handled by orientation compound variants
-        },
-      },
+    line: {
+        backgroundColor: theme.colors.border.secondary,
+        flex: 1,
+        variants: {
+            orientation: {
+                horizontal: { height: 1 },
+                vertical: { width: 1 },
+            },
+            thickness: {
+                thin: {},
+                md: {},
+                thick: {},
+            },
+        },
+        compoundVariants: createLineCompoundVariants(),
     },
-    
-    compoundVariants: [
-      // Horizontal thickness for line segments
-      {
-        orientation: 'horizontal',
-        thickness: 'thin',
-        styles: {
-          height: 1,
-        },
-      },
-      {
-        orientation: 'horizontal',
-        thickness: 'medium',
-        styles: {
-          height: 2,
-        },
-      },
-      {
-        orientation: 'horizontal',
-        thickness: 'thick',
-        styles: {
-          height: 4,
-        },
-      },
-      // Vertical thickness for line segments
-      {
-        orientation: 'vertical',
-        thickness: 'thin',
-        styles: {
-          width: 1,
-        },
-      },
-      {
-        orientation: 'vertical',
-        thickness: 'medium',
-        styles: {
-          width: 2,
-        },
-      },
-      {
-        orientation: 'vertical',
-        thickness: 'thick',
-        styles: {
-          width: 4,
-        },
-      },
-    ],
-  },
-})); 
+  };
+});