fix: refactor divider component and add extra prop to style the divider line

Author: crstnmac

example/src/modules/primitives/DividerScreen.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { ScrollView } from "react-native-gesture-handler";
-import { Box, Divider, useTheme } from "@adaptui/react-native-tailwind";
+import { Box, Divider, Tag, useTheme } from "@adaptui/react-native-tailwind";
 
 export const DividerScreen = () => {
   const tailwind = useTheme();
@@ -28,14 +28,30 @@ export const DividerScreen = () => {
             label="Continue"
           />
         </Box>
+        <Box style={tailwind.style("h-15 px-2 justify-center")}>
+          <Divider
+            orientation="horizontal"
+            labelPosition="center"
+            slot={
+              <Tag
+                style={tailwind.style("rounded-full")}
+                variant="subtle"
+                themeColor="primary"
+              >
+                New Messages
+              </Tag>
+            }
+            dividerStyle={tailwind.style(" border-blue-300")}
+          />
+        </Box>
         <Box style={tailwind.style("h-50 py-4  justify-center")}>
           <Divider
             orientation="vertical"
             labelPosition="start"
             label="Continue"
           />
         </Box>
-        <Box style={tailwind.style("h-50 py-4  justify-center")}>
+        <Box style={tailwind.style("h-50 py-4 w-full justify-center")}>
           <Divider
             orientation="vertical"
             labelPosition="center"

src/components/divider/Divider.tsx

@@ -1,38 +1,67 @@
 import { ReactElement } from "react";
+import { StyleProp, ViewStyle } from "react-native";
 import { Box, useTheme } from "@adaptui/react-native-tailwind";
 
-import { createComponent, cx } from "../../utils";
+import { createComponent, cx, styleAdapter } from "../../utils";
 import { Button, ButtonProps } from "../button";
 
 interface DividerProps {
-  label?: string;
-  orientation?: "horizontal" | "vertical";
-  slot?: ReactElement;
+  /**
+   * Label name
+   */
+  label: string;
+  /**
+   * The orientation of the divider
+   * @default horizontal
+   */
+  orientation: "horizontal" | "vertical";
+  /**
+   * Pass custom component instead of deafult component.
+   */
+  slot: ReactElement;
+  /**
+   * The position of the label/slot
+   * @default start
+   */
   labelPosition: "start" | "center" | "end";
+  /**
+   * A prop that is passed for the button component
+   */
   buttonProps: ButtonProps;
+  /**
+   * A style prop that is passed for the divider line
+   */
+  dividerStyle: StyleProp<ViewStyle>;
 }
 
-const RNDivider = ({
-  label,
-  orientation = "horizontal",
-  slot,
-  labelPosition = "start",
-  buttonProps,
-}: Partial<DividerProps>) => {
+const RNDivider = (props: Partial<DividerProps>) => {
+  const {
+    label,
+    orientation = "horizontal",
+    slot,
+    labelPosition = "start",
+    buttonProps,
+    dividerStyle,
+  } = props;
   const tailwind = useTheme();
   const dividerTheme = useTheme("divider");
   return (
     <Box
       style={tailwind.style(
-        cx(dividerTheme.orientation[orientation]),
+        cx(dividerTheme[orientation].orientaion),
         orientation === "vertical" ? "overflow-hidden" : {},
       )}
     >
-      <Box style={tailwind.style(cx(dividerTheme.lines[orientation]))} />
+      <Box
+        style={[
+          tailwind.style(cx(dividerTheme[orientation].lines)),
+          styleAdapter(dividerStyle),
+        ]}
+      />
 
       <Box
         style={tailwind.style(
-          cx(dividerTheme.label[orientation]?.[labelPosition]),
+          cx(dividerTheme[orientation]?.label[labelPosition]),
         )}
       >
         {label ? (
@@ -43,8 +72,6 @@ const RNDivider = ({
           slot
         ) : null}
       </Box>
-
-      <Box style={tailwind.style(cx(dividerTheme.lines[orientation]))} />
     </Box>
   );
 };

src/theme/defaultTheme/divider.ts

@@ -1,20 +1,17 @@
 export const divider = {
-  base: "border-gray-300",
-  orientation: {
-    horizontal: "w-full items-center justify-center",
-    vertical: "justify-center h-full items-center",
-  },
-  lines: {
-    horizontal: "border-b border-gray-400 w-full",
-    vertical: "border-r border-gray-400 h-full",
-  },
-  label: {
-    horizontal: {
+  horizontal: {
+    orientaion: "w-full items-center justify-center",
+    lines: "border-b border-gray-400 w-full",
+    label: {
       start: "z-1 absolute left-4",
       center: "z-1 absolute",
       end: "z-1 absolute right-4",
     },
-    vertical: {
+  },
+  vertical: {
+    orientaion: "h-full items-center justify-center",
+    lines: "border-r border-gray-400 h-full",
+    label: {
       start: "z-1 absolute top-4",
       center: "z-1 absolute",
       end: "z-1 absolute bottom-4",