@idealyst/components 1.1.6 → 1.1.8

package/src/Dialog/Dialog.web.tsx

@@ -133,20 +133,20 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>(({
   });
 
   const backdropProps = getWebProps([
-    dialogStyles.backdrop,
+    (dialogStyles.backdrop as any)({}),
     { opacity: isVisible ? 1 : 0 }
   ]);
   const containerProps = getWebProps([
-    dialogStyles.container,
+    (dialogStyles.container as any)({}),
     style as any,
     isVisible
       ? { opacity: 1, transform: 'scale(1) translateY(0px)' }
       : { opacity: 0, transform: 'scale(0.96) translateY(-4px)' }
   ]);
-  const headerProps = getWebProps([dialogStyles.header]);
+  const headerProps = getWebProps([(dialogStyles.header as any)({})]);
   const titleProps = getWebProps([dialogStyles.title]);
   const closeButtonProps = getWebProps([dialogStyles.closeButton]);
-  const contentProps = getWebProps([dialogStyles.content]);
+  const contentProps = getWebProps([(dialogStyles.content as any)({})]);
 
   const mergedBackdropRef = useMergeRefs(ref, backdropProps.ref);
 

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