@idealyst/components 1.0.83 → 1.0.85

package/src/Divider/Divider.native.tsx

@@ -1,25 +1,25 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { View, Text } from 'react-native';
 import { DividerProps } from './types';
 import { dividerStyles } from './Divider.styles';
 
-const Divider: React.FC<DividerProps> = ({
+const Divider = forwardRef<View, DividerProps>(({
   orientation = 'horizontal',
-  variant = 'solid',
+  type = 'solid',
   thickness = 'thin',
   intent = 'neutral',
   length = 'full',
-  spacing = 'medium',
+  spacing = 'md',
   children,
   style,
   testID,
   accessibilityLabel,
-}) => {
+}, ref) => {
   // Apply variants for main divider
   dividerStyles.useVariants({
     orientation,
     thickness,
-    variant: variant as any,
+    type: type as any,
     intent,
     length: typeof length === 'number' ? 'auto' : length,
     spacing,
@@ -32,7 +32,7 @@ const Divider: React.FC<DividerProps> = ({
   const getThickness = () => {
     switch (thickness) {
       case 'thin': return 1;
-      case 'medium': return 2;
+      case 'md': return 2;
       case 'thick': return 4;
       default: return 1;
     }
@@ -40,12 +40,12 @@ const Divider: React.FC<DividerProps> = ({
 
   // For dashed/dotted variants, use border instead of background
   const getDashedStyle = () => {
-    if (variant === 'dashed' || variant === 'dotted') {
+    if (type === 'dashed' || type === 'dotted') {
       const actualThickness = getThickness();
       
       return {
         backgroundColor: 'transparent',
-        borderStyle: variant,
+        borderStyle: type,
         borderColor: dividerStyle.backgroundColor,
         ...(orientation === 'horizontal' ? {
           borderTopWidth: actualThickness,
@@ -69,9 +69,10 @@ const Divider: React.FC<DividerProps> = ({
 
   // If no children, render simple divider
   if (!children) {
-    if (variant === 'dashed' || variant === 'dotted') {
+    if (type === 'dashed' || type === 'dotted') {
       return (
         <View
+          ref={ref}
           style={[
             dividerStyle,
             getDashedStyle(),
@@ -82,9 +83,10 @@ const Divider: React.FC<DividerProps> = ({
         />
       );
     }
-    
+
     return (
       <View
+        ref={ref}
         style={[dividerStyles.divider, style]}
         testID={testID}
         accessibilityLabel={accessibilityLabel || "divider"}
@@ -94,7 +96,7 @@ const Divider: React.FC<DividerProps> = ({
 
   // For lines with content, create a simple dashed line
   const renderLineSegment = () => {
-    if (variant === 'dashed' || variant === 'dotted') {
+    if (type === 'dashed' || type === 'dotted') {
       const actualThickness = getThickness();
       
       return (
@@ -103,7 +105,7 @@ const Divider: React.FC<DividerProps> = ({
             dividerStyles.line,
             {
               backgroundColor: 'transparent',
-              borderStyle: variant,
+              borderStyle: type,
               borderColor: dividerStyles.line.backgroundColor,
               ...(orientation === 'horizontal' ? {
                 borderTopWidth: actualThickness,
@@ -129,6 +131,7 @@ const Divider: React.FC<DividerProps> = ({
 
   return (
     <View
+      ref={ref}
       style={dividerStyles.container}
       testID={testID}
       accessibilityLabel={accessibilityLabel || "divider with content"}
@@ -140,6 +143,8 @@ const Divider: React.FC<DividerProps> = ({
       {renderLineSegment()}
     </View>
   );
-};
+});
+
+Divider.displayName = 'Divider';
 
 export default Divider;