rnnovaui 0.3.1 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rnnovaui",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "",
   "main": "src/index.js",
   "react-native": "src/index.js",

package/src/components/Card/UICard.js

@@ -74,17 +74,33 @@ function UICardComponent({
 
   imageHeight = 190,
   imageResizeMode = "cover",
-
   imageStyle,
 
+  /*
+   * Example:
+   *
+   * badges={[
+   *   {
+   *     id: 'offer',
+   *     label: '20% OFF',
+   *     position: 'topLeft',
+   *     variant: 'danger',
+   *   },
+   *
+   *   {
+   *     id: 'rating',
+   *     label: '★ 4.8',
+   *     position: 'topRight',
+   *     variant: 'warning',
+   *   }
+   * ]}
+   */
   badges = [],
 
   badgeGap = 8,
 
   badgeStyle,
-
   badgeTextStyle,
-
   badgeContainerStyle,
 
   variant = "default",
@@ -96,19 +112,16 @@ function UICardComponent({
   gap = 12,
 
   style,
-
   headerStyle,
   contentStyle,
   footerStyle,
 
   imageOverlay = null,
-
   imageOverlayStyle,
 
   pressable = false,
 
   disabled = false,
-
   loading = false,
 
   onPress,
@@ -141,9 +154,9 @@ function UICardComponent({
 
   const safeVariant = CARD_VARIANTS[variant] ? variant : CARD_VARIANTS.default;
 
-  const resolvedRadius = CARD_RADIUS[radius] ? radius : CARD_RADIUS.lg;
+  const safeRadius = CARD_RADIUS[radius] ? radius : CARD_RADIUS.lg;
 
-  const radiusValue = getRadiusValue(resolvedRadius, theme);
+  const radiusValue = getRadiusValue(safeRadius, theme);
 
   const cardColors = useMemo(
     () => getCardColors(safeVariant, colors),
@@ -269,13 +282,17 @@ function UICardComponent({
     [cardColors, radiusValue, isDisabled, scale, style],
   );
 
-  const renderImage = Boolean(image || imageSource);
+  const hasImage = Boolean(image || imageSource);
 
-  const renderBody = Boolean(header || content || children || footer);
+  const hasBody = Boolean(header || content || children || footer);
 
   const cardContent = (
     <>
-      {renderImage ? (
+      {/* ------------------------------------------ */}
+      {/* IMAGE */}
+      {/* ------------------------------------------ */}
+
+      {hasImage ? (
         <View
           style={[
             styles.imageSection,
@@ -289,7 +306,9 @@ function UICardComponent({
             },
           ]}
         >
-          {image || (
+          {image ? (
+            image
+          ) : (
             <Image
               source={imageSource}
               resizeMode={imageResizeMode}
@@ -297,6 +316,10 @@ function UICardComponent({
             />
           )}
 
+          {/* -------------------------------------- */}
+          {/* IMAGE OVERLAY */}
+          {/* -------------------------------------- */}
+
           {imageOverlay ? (
             <View
               pointerEvents="none"
@@ -306,18 +329,18 @@ function UICardComponent({
             </View>
           ) : null}
 
-          {badges.length > 0 ? (
+          {/* -------------------------------------- */}
+          {/* BADGES */}
+          {/* -------------------------------------- */}
+
+          {Array.isArray(badges) && badges.length > 0 ? (
             <View pointerEvents="box-none" style={styles.badgeLayer}>
               {badges.map((badge, index) => (
                 <CardBadge
-                  key={
-                    badge.id ||
-                    badge.key ||
-                    `${badge.position || "topLeft"}-${index}`
-                  }
+                  key={badge?.id || badge?.key || `badge-${index}`}
                   badge={badge}
                   index={index}
-                  gap={badgeGap}
+                  badgeGap={badgeGap}
                   defaultStyle={badgeStyle}
                   defaultTextStyle={badgeTextStyle}
                   defaultContainerStyle={badgeContainerStyle}
@@ -329,7 +352,11 @@ function UICardComponent({
         </View>
       ) : null}
 
-      {renderBody ? (
+      {/* ------------------------------------------ */}
+      {/* BODY */}
+      {/* ------------------------------------------ */}
+
+      {hasBody ? (
         <View
           style={[
             styles.body,
@@ -340,41 +367,42 @@ function UICardComponent({
             },
           ]}
         >
+          {/* HEADER */}
+
           {header ? (
             <View style={[styles.header, headerStyle]}>{header}</View>
           ) : null}
 
+          {/* CONTENT */}
+
           {content ? (
             <View style={[styles.content, contentStyle]}>{content}</View>
           ) : null}
 
-          {children ? (
-            <View
-              style={[
-                styles.content,
-
-                contentStyle,
+          {/* CHILDREN */}
 
-                {
-                  marginTop: header || content ? 0 : undefined,
-                },
-              ]}
-            >
-              {children}
-            </View>
+          {children ? (
+            <View style={[styles.content, contentStyle]}>{children}</View>
           ) : null}
 
+          {/* FOOTER */}
+
           {footer ? (
             <View style={[styles.footer, footerStyle]}>{footer}</View>
           ) : null}
         </View>
       ) : null}
 
+      {/* ------------------------------------------ */}
+      {/* LOADING */}
+      {/* ------------------------------------------ */}
+
       {loading ? (
         <View
           pointerEvents="none"
           style={[
             styles.loadingOverlay,
+
             {
               borderRadius: radiusValue,
             },
@@ -389,6 +417,10 @@ function UICardComponent({
     </>
   );
 
+  /*
+   * Non-pressable card
+   */
+
   if (!pressable) {
     return (
       <Animated.View
@@ -402,6 +434,10 @@ function UICardComponent({
     );
   }
 
+  /*
+   * Pressable card
+   */
+
   return (
     <Animated.View {...props} testID={testID} style={cardStyle}>
       <Pressable
@@ -426,28 +462,34 @@ function UICardComponent({
   );
 }
 
-/*
- * --------------------------------------------------
- * CARD BADGE
- * --------------------------------------------------
- */
+/* ================================================= */
+/* CARD BADGE                                        */
+/* ================================================= */
 
 const CardBadge = memo(function CardBadge({
   badge,
   index,
-  gap,
+  badgeGap,
+
   defaultStyle,
   defaultTextStyle,
   defaultContainerStyle,
+
   colors,
 }) {
-  const position = BADGE_POSITIONS[badge.position] ? badge.position : "topLeft";
+  if (!badge) {
+    return null;
+  }
+
+  const position = BADGE_POSITIONS[badge.position]
+    ? badge.position
+    : BADGE_POSITIONS.topLeft;
 
   const badgeColors = getBadgeColors(badge, colors);
 
-  const positionStyle = getBadgePosition(position, index, gap);
+  const positionStyle = getBadgePosition(position, index, badgeGap);
 
-  const badgeContent = badge.content ?? badge.label ?? badge.text ?? "";
+  const label = badge.label ?? badge.text ?? badge.content ?? "";
 
   return (
     <View
@@ -458,11 +500,13 @@ const CardBadge = memo(function CardBadge({
         positionStyle,
 
         {
-          backgroundColor: badgeColors.background,
+          backgroundColor: badge.backgroundColor || badgeColors.background,
+
+          borderColor: badge.borderColor || badgeColors.border,
 
-          borderColor: badgeColors.border,
+          borderWidth: badge.borderWidth ?? badgeColors.borderWidth,
 
-          borderWidth: badgeColors.borderWidth,
+          borderRadius: badge.borderRadius ?? 999,
         },
 
         defaultStyle,
@@ -472,16 +516,29 @@ const CardBadge = memo(function CardBadge({
         defaultContainerStyle,
       ]}
     >
-      {badge.icon ? <View style={styles.badgeIcon}>{badge.icon}</View> : null}
+      {badge.icon ? (
+        <View
+          style={[
+            styles.badgeIcon,
 
-      {badgeContent ? (
+            {
+              marginRight: label ? 5 : 0,
+            },
+          ]}
+        >
+          {badge.icon}
+        </View>
+      ) : null}
+
+      {label !== "" ? (
         <Text
           numberOfLines={1}
+          ellipsizeMode="tail"
           style={[
             styles.badgeText,
 
             {
-              color: badgeColors.text,
+              color: badge.textColor || badgeColors.text,
 
               fontSize: badge.fontSize || 12,
 
@@ -495,7 +552,7 @@ const CardBadge = memo(function CardBadge({
             badge.textStyle,
           ]}
         >
-          {badgeContent}
+          {label}
         </Text>
       ) : null}
     </View>
@@ -504,135 +561,249 @@ const CardBadge = memo(function CardBadge({
 
 CardBadge.displayName = "CardBadge";
 
-/*
- * --------------------------------------------------
- * CARD COLORS
- * --------------------------------------------------
- */
+/* ================================================= */
+/* BADGE POSITIONING                                 */
+/* ================================================= */
 
-function getCardColors(variant, colors) {
-  const background = colors.card || colors.surface || FALLBACK_COLORS.card;
+function getBadgePosition(position, index, gap) {
+  /*
+   * IMPORTANT:
+   *
+   * Each position has a fixed anchor.
+   *
+   * index only creates an offset for
+   * multiple badges using THE SAME
+   * position.
+   */
+
+  const offset = index * (32 + gap);
 
-  const border = colors.border || FALLBACK_COLORS.border;
+  switch (position) {
+    /* -------------------------------------------- */
+    /* TOP LEFT                                     */
+    /* -------------------------------------------- */
 
-  switch (variant) {
-    case CARD_VARIANTS.elevated:
+    case BADGE_POSITIONS.topLeft:
       return {
-        background,
+        top: 12,
 
-        border: "transparent",
+        left: 12 + offset,
+      };
 
-        borderWidth: 0,
+    /* -------------------------------------------- */
+    /* TOP CENTER                                   */
+    /* -------------------------------------------- */
 
-        shadow: styles.elevated,
+    case BADGE_POSITIONS.topCenter:
+      return {
+        top: 12,
+
+        left: "50%",
+
+        transform: [
+          {
+            translateX: -50,
+          },
+        ],
       };
 
-    case CARD_VARIANTS.outlined:
+    /* -------------------------------------------- */
+    /* TOP RIGHT                                    */
+    /* -------------------------------------------- */
+
+    case BADGE_POSITIONS.topRight:
       return {
-        background,
+        top: 12,
 
-        border,
+        right: 12 + offset,
+      };
 
-        borderWidth: 1,
+    /* -------------------------------------------- */
+    /* CENTER LEFT                                  */
+    /* -------------------------------------------- */
 
-        shadow: styles.noShadow,
+    case BADGE_POSITIONS.centerLeft:
+      return {
+        left: 12,
+
+        top: "50%",
+
+        transform: [
+          {
+            translateY: -50,
+          },
+        ],
       };
 
-    case CARD_VARIANTS.filled:
+    /* -------------------------------------------- */
+    /* CENTER                                       */
+    /* -------------------------------------------- */
+
+    case BADGE_POSITIONS.center:
       return {
-        background: colors.surface || FALLBACK_COLORS.surface,
+        left: "50%",
 
-        border: "transparent",
+        top: "50%",
 
-        borderWidth: 0,
+        transform: [
+          {
+            translateX: -50,
+          },
 
-        shadow: styles.noShadow,
+          {
+            translateY: -50,
+          },
+        ],
       };
 
-    case CARD_VARIANTS.default:
-    default:
+    /* -------------------------------------------- */
+    /* CENTER RIGHT                                 */
+    /* -------------------------------------------- */
+
+    case BADGE_POSITIONS.centerRight:
       return {
-        background,
+        right: 12,
 
-        border: "transparent",
+        top: "50%",
 
-        borderWidth: 0,
+        transform: [
+          {
+            translateY: -50,
+          },
+        ],
+      };
 
-        shadow: styles.noShadow,
+    /* -------------------------------------------- */
+    /* BOTTOM LEFT                                  */
+    /* -------------------------------------------- */
+
+    case BADGE_POSITIONS.bottomLeft:
+      return {
+        bottom: 12,
+
+        left: 12 + offset,
+      };
+
+    /* -------------------------------------------- */
+    /* BOTTOM CENTER                                */
+    /* -------------------------------------------- */
+
+    case BADGE_POSITIONS.bottomCenter:
+      return {
+        bottom: 12,
+
+        left: "50%",
+
+        transform: [
+          {
+            translateX: -50,
+          },
+        ],
+      };
+
+    /* -------------------------------------------- */
+    /* BOTTOM RIGHT                                 */
+    /* -------------------------------------------- */
+
+    case BADGE_POSITIONS.bottomRight:
+      return {
+        bottom: 12,
+
+        right: 12 + offset,
+      };
+
+    default:
+      return {
+        top: 12,
+
+        left: 12,
       };
   }
 }
 
-/*
- * --------------------------------------------------
- * BADGE COLORS
- * --------------------------------------------------
- */
+/* ================================================= */
+/* BADGE COLORS                                     */
+/* ================================================= */
 
 function getBadgeColors(badge, colors) {
-  const type = badge.variant || badge.type || "primary";
+  const variant = badge.variant || badge.type || "primary";
 
-  switch (type) {
+  switch (variant) {
     case "success":
       return {
-        background:
-          badge.backgroundColor || colors.success || FALLBACK_COLORS.success,
+        background: colors.success || FALLBACK_COLORS.success,
 
-        border: badge.borderColor || colors.success || FALLBACK_COLORS.success,
+        border: colors.success || FALLBACK_COLORS.success,
 
-        borderWidth: badge.borderWidth ?? 0,
+        borderWidth: 0,
 
-        text: badge.textColor || colors.onSuccess || FALLBACK_COLORS.white,
+        text: colors.onSuccess || FALLBACK_COLORS.white,
       };
 
     case "danger":
       return {
-        background:
-          badge.backgroundColor || colors.danger || FALLBACK_COLORS.danger,
+        background: colors.danger || FALLBACK_COLORS.danger,
 
-        border: badge.borderColor || colors.danger || FALLBACK_COLORS.danger,
+        border: colors.danger || FALLBACK_COLORS.danger,
 
-        borderWidth: badge.borderWidth ?? 0,
+        borderWidth: 0,
 
-        text: badge.textColor || colors.onDanger || FALLBACK_COLORS.white,
+        text: colors.onDanger || FALLBACK_COLORS.white,
       };
 
     case "warning":
       return {
-        background:
-          badge.backgroundColor || colors.warning || FALLBACK_COLORS.warning,
+        background: colors.warning || FALLBACK_COLORS.warning,
 
-        border: badge.borderColor || colors.warning || FALLBACK_COLORS.warning,
+        border: colors.warning || FALLBACK_COLORS.warning,
 
-        borderWidth: badge.borderWidth ?? 0,
+        borderWidth: 0,
 
-        text: badge.textColor || colors.onWarning || FALLBACK_COLORS.white,
+        text: colors.onWarning || FALLBACK_COLORS.white,
       };
 
     case "info":
       return {
-        background:
-          badge.backgroundColor || colors.info || FALLBACK_COLORS.info,
+        background: colors.info || FALLBACK_COLORS.info,
 
-        border: badge.borderColor || colors.info || FALLBACK_COLORS.info,
+        border: colors.info || FALLBACK_COLORS.info,
 
-        borderWidth: badge.borderWidth ?? 0,
+        borderWidth: 0,
 
-        text: badge.textColor || colors.onInfo || FALLBACK_COLORS.white,
+        text: colors.onInfo || FALLBACK_COLORS.white,
       };
 
     case "soft":
       return {
-        background:
-          badge.backgroundColor ||
-          colors.primarySoft ||
-          FALLBACK_COLORS.primarySoft,
+        background: colors.primarySoft || FALLBACK_COLORS.primarySoft,
 
-        border: badge.borderColor || "transparent",
+        border: "transparent",
 
-        borderWidth: badge.borderWidth ?? 0,
+        borderWidth: 0,
+
+        text: colors.primary || FALLBACK_COLORS.primary,
+      };
+
+    case "secondary":
+      return {
+        background: colors.secondary || "#7CFF32",
+
+        border: colors.secondary || "#7CFF32",
+
+        borderWidth: 0,
+
+        text: colors.onSecondary || FALLBACK_COLORS.black,
+      };
+
+    case "neutral":
+      return {
+        background: colors.surface || FALLBACK_COLORS.surface,
+
+        border: colors.border || FALLBACK_COLORS.border,
 
-        text: badge.textColor || colors.primary || FALLBACK_COLORS.primary,
+        borderWidth: 1,
+
+        text: colors.textSecondary || FALLBACK_COLORS.textSecondary,
       };
 
     case "custom":
@@ -649,121 +820,77 @@ function getBadgeColors(badge, colors) {
     case "primary":
     default:
       return {
-        background:
-          badge.backgroundColor || colors.primary || FALLBACK_COLORS.primary,
+        background: colors.primary || FALLBACK_COLORS.primary,
 
-        border: badge.borderColor || colors.primary || FALLBACK_COLORS.primary,
+        border: colors.primary || FALLBACK_COLORS.primary,
 
-        borderWidth: badge.borderWidth ?? 0,
+        borderWidth: 0,
 
-        text: badge.textColor || colors.onPrimary || FALLBACK_COLORS.white,
+        text: colors.onPrimary || FALLBACK_COLORS.white,
       };
   }
 }
 
-/*
- * --------------------------------------------------
- * BADGE POSITION
- * --------------------------------------------------
- */
+/* ================================================= */
+/* CARD COLORS                                      */
+/* ================================================= */
 
-function getBadgePosition(position, index, gap) {
-  const offset = index * (28 + gap);
-
-  switch (position) {
-    case BADGE_POSITIONS.topCenter:
-      return {
-        top: 12 + offset,
+function getCardColors(variant, colors) {
+  const background = colors.card || colors.surface || FALLBACK_COLORS.card;
 
-        alignSelf: "center",
-      };
+  const border = colors.border || FALLBACK_COLORS.border;
 
-    case BADGE_POSITIONS.topRight:
+  switch (variant) {
+    case CARD_VARIANTS.elevated:
       return {
-        top: 12 + offset,
-
-        right: 12,
-      };
+        background,
 
-    case BADGE_POSITIONS.centerLeft:
-      return {
-        left: 12 + offset,
+        border: "transparent",
 
-        top: "50%",
+        borderWidth: 0,
 
-        transform: [
-          {
-            translateY: -12,
-          },
-        ],
+        shadow: styles.elevated,
       };
 
-    case BADGE_POSITIONS.center:
+    case CARD_VARIANTS.outlined:
       return {
-        top: "50%",
-
-        left: "50%",
-
-        transform: [
-          {
-            translateX: -50,
-          },
-
-          {
-            translateY: -12,
-          },
-        ],
-      };
+        background,
 
-    case BADGE_POSITIONS.centerRight:
-      return {
-        right: 12 + offset,
+        border,
 
-        top: "50%",
+        borderWidth: 1,
 
-        transform: [
-          {
-            translateY: -12,
-          },
-        ],
+        shadow: styles.noShadow,
       };
 
-    case BADGE_POSITIONS.bottomLeft:
+    case CARD_VARIANTS.filled:
       return {
-        bottom: 12,
+        background: colors.surface || FALLBACK_COLORS.surface,
 
-        left: 12 + offset,
-      };
+        border: "transparent",
 
-    case BADGE_POSITIONS.bottomCenter:
-      return {
-        bottom: 12 + offset,
+        borderWidth: 0,
 
-        alignSelf: "center",
+        shadow: styles.noShadow,
       };
 
-    case BADGE_POSITIONS.bottomRight:
+    case CARD_VARIANTS.default:
+    default:
       return {
-        bottom: 12,
+        background,
 
-        right: 12 + offset,
-      };
+        border: "transparent",
 
-    case BADGE_POSITIONS.topLeft:
-    default:
-      return {
-        top: 12 + offset,
+        borderWidth: 0,
 
-        left: 12,
+        shadow: styles.noShadow,
       };
   }
 }
 
-/*
- * --------------------------------------------------
- * RADIUS
- * --------------------------------------------------
- */
+/* ================================================= */
+/* RADIUS                                           */
+/* ================================================= */
 
 function getRadiusValue(radius, theme) {
   const themeRadius = theme?.radius || {};
@@ -787,6 +914,10 @@ function getRadiusValue(radius, theme) {
   }
 }
 
+/* ================================================= */
+/* STYLES                                           */
+/* ================================================= */
+
 const styles = StyleSheet.create({
   card: {
     width: "100%",
@@ -817,39 +948,46 @@ const styles = StyleSheet.create({
   imageOverlay: {
     ...StyleSheet.absoluteFillObject,
 
-    justifyContent: "center",
-
-    alignItems: "center",
+    zIndex: 5,
   },
 
+  /*
+   * This is the key fix.
+   *
+   * The badge layer fills the complete
+   * image section and does not participate
+   * in normal layout.
+   */
   badgeLayer: {
     ...StyleSheet.absoluteFillObject,
 
-    pointerEvents: "box-none",
+    zIndex: 20,
+
+    elevation: 20,
   },
 
   badge: {
     position: "absolute",
 
-    minHeight: 26,
+    minHeight: 28,
 
     paddingHorizontal: 10,
 
     paddingVertical: 5,
 
-    borderRadius: 999,
-
     flexDirection: "row",
 
     alignItems: "center",
 
     justifyContent: "center",
 
-    maxWidth: "80%",
+    maxWidth: "75%",
+
+    zIndex: 30,
 
-    zIndex: 10,
+    elevation: 30,
 
-    elevation: 3,
+    overflow: "hidden",
   },
 
   badgeText: {
@@ -861,11 +999,11 @@ const styles = StyleSheet.create({
   },
 
   badgeIcon: {
-    marginRight: 5,
-
     alignItems: "center",
 
     justifyContent: "center",
+
+    flexShrink: 0,
   },
 
   body: {
@@ -901,6 +1039,7 @@ const styles = StyleSheet.create({
 
     shadowOffset: {
       width: 0,
+
       height: 4,
     },
 

package/src/components/Divider/UIDivider.js

@@ -0,0 +1,401 @@
+import React, { memo, useMemo } from "react";
+
+import { StyleSheet, Text, View } from "react-native";
+
+import { useUITheme } from "../../theme";
+
+const DIVIDER_ORIENTATIONS = {
+  horizontal: "horizontal",
+  vertical: "vertical",
+};
+
+const DIVIDER_VARIANTS = {
+  solid: "solid",
+  dashed: "dashed",
+};
+
+const DIVIDER_TEXT_POSITIONS = {
+  left: "left",
+  center: "center",
+  right: "right",
+};
+
+const DIVIDER_ENDS = {
+  rounded: "rounded",
+  sharp: "sharp",
+  leftSharp: "leftSharp",
+  rightSharp: "rightSharp",
+};
+
+function UIDividerComponent({
+  orientation = "horizontal",
+
+  variant = "solid",
+
+  thickness = 1,
+
+  color,
+
+  length,
+
+  spacing = 0,
+
+  text = null,
+
+  textPosition = "center",
+
+  textStyle,
+
+  textContainerStyle,
+
+  lineStyle,
+
+  gap = 12,
+
+  ends = "rounded",
+
+  style,
+
+  testID,
+
+  ...props
+}) {
+  const { theme } = useUITheme();
+
+  const colors = theme?.colors || {};
+
+  const safeOrientation = DIVIDER_ORIENTATIONS[orientation]
+    ? orientation
+    : DIVIDER_ORIENTATIONS.horizontal;
+
+  const safeVariant = DIVIDER_VARIANTS[variant]
+    ? variant
+    : DIVIDER_VARIANTS.solid;
+
+  const safeTextPosition = DIVIDER_TEXT_POSITIONS[textPosition]
+    ? textPosition
+    : DIVIDER_TEXT_POSITIONS.center;
+
+  const safeEnds = DIVIDER_ENDS[ends] ? ends : DIVIDER_ENDS.rounded;
+
+  const resolvedColor = color || colors.divider || colors.border || "#E5E5E5";
+
+  const resolvedTextColor =
+    colors.textSecondary || colors.textMuted || "#737373";
+
+  const isHorizontal = safeOrientation === DIVIDER_ORIENTATIONS.horizontal;
+
+  const hasText = isHorizontal && text !== null && text !== undefined;
+
+  const lineBaseStyle = useMemo(
+    () => ({
+      backgroundColor:
+        safeVariant === DIVIDER_VARIANTS.solid ? resolvedColor : "transparent",
+
+      borderColor: resolvedColor,
+
+      borderStyle: safeVariant === DIVIDER_VARIANTS.dashed ? "dashed" : "solid",
+
+      borderWidth: safeVariant === DIVIDER_VARIANTS.dashed ? thickness : 0,
+
+      borderRadius: getEndRadius(safeEnds, thickness),
+    }),
+    [safeVariant, resolvedColor, thickness, safeEnds],
+  );
+
+  /*
+   * ------------------------------------------
+   * VERTICAL DIVIDER
+   * ------------------------------------------
+   */
+
+  if (!isHorizontal) {
+    return (
+      <View
+        {...props}
+        testID={testID}
+        pointerEvents="none"
+        style={[
+          styles.vertical,
+
+          {
+            width: thickness,
+
+            height: length || "100%",
+
+            marginHorizontal: spacing,
+
+            backgroundColor:
+              safeVariant === DIVIDER_VARIANTS.solid
+                ? resolvedColor
+                : "transparent",
+
+            borderColor: resolvedColor,
+
+            borderStyle:
+              safeVariant === DIVIDER_VARIANTS.dashed ? "dashed" : "solid",
+
+            borderWidth:
+              safeVariant === DIVIDER_VARIANTS.dashed ? thickness : 0,
+
+            borderRadius: getEndRadius(safeEnds, thickness),
+          },
+
+          style,
+        ]}
+      />
+    );
+  }
+
+  /*
+   * ------------------------------------------
+   * HORIZONTAL WITHOUT TEXT
+   * ------------------------------------------
+   */
+
+  if (!hasText) {
+    return (
+      <View
+        {...props}
+        testID={testID}
+        pointerEvents="none"
+        style={[
+          styles.horizontal,
+
+          {
+            width: length || "100%",
+
+            height: thickness,
+
+            marginVertical: spacing,
+          },
+
+          lineBaseStyle,
+
+          lineStyle,
+
+          style,
+        ]}
+      />
+    );
+  }
+
+  /*
+   * ------------------------------------------
+   * HORIZONTAL WITH TEXT
+   * ------------------------------------------
+   */
+
+  return (
+    <View
+      {...props}
+      testID={testID}
+      pointerEvents="none"
+      style={[
+        styles.textDivider,
+
+        {
+          width: length || "100%",
+
+          marginVertical: spacing,
+        },
+
+        style,
+      ]}
+    >
+      {safeTextPosition === DIVIDER_TEXT_POSITIONS.left ? (
+        <>
+          <View style={[styles.line, lineBaseStyle, lineStyle]} />
+
+          <View
+            style={[
+              styles.textContainer,
+
+              {
+                marginLeft: gap,
+              },
+
+              textContainerStyle,
+            ]}
+          >
+            <Text
+              style={[
+                styles.text,
+
+                {
+                  color: resolvedTextColor,
+                },
+
+                textStyle,
+              ]}
+            >
+              {text}
+            </Text>
+          </View>
+        </>
+      ) : null}
+
+      {safeTextPosition === DIVIDER_TEXT_POSITIONS.center ? (
+        <>
+          <View style={[styles.line, lineBaseStyle, lineStyle]} />
+
+          <View
+            style={[
+              styles.textContainer,
+
+              {
+                marginHorizontal: gap,
+              },
+
+              textContainerStyle,
+            ]}
+          >
+            <Text
+              style={[
+                styles.text,
+
+                {
+                  color: resolvedTextColor,
+                },
+
+                textStyle,
+              ]}
+            >
+              {text}
+            </Text>
+          </View>
+
+          <View style={[styles.line, lineBaseStyle, lineStyle]} />
+        </>
+      ) : null}
+
+      {safeTextPosition === DIVIDER_TEXT_POSITIONS.right ? (
+        <>
+          <View
+            style={[
+              styles.textContainer,
+
+              {
+                marginRight: gap,
+              },
+
+              textContainerStyle,
+            ]}
+          >
+            <Text
+              style={[
+                styles.text,
+
+                {
+                  color: resolvedTextColor,
+                },
+
+                textStyle,
+              ]}
+            >
+              {text}
+            </Text>
+          </View>
+
+          <View style={[styles.line, lineBaseStyle, lineStyle]} />
+        </>
+      ) : null}
+    </View>
+  );
+}
+
+/*
+ * ------------------------------------------
+ * END RADIUS
+ * ------------------------------------------
+ */
+
+function getEndRadius(ends, thickness) {
+  switch (ends) {
+    case DIVIDER_ENDS.sharp:
+      return 0;
+
+    case DIVIDER_ENDS.leftSharp:
+      return {
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0,
+
+        borderTopRightRadius: thickness,
+
+        borderBottomRightRadius: thickness,
+      };
+
+    case DIVIDER_ENDS.rightSharp:
+      return {
+        borderTopLeftRadius: thickness,
+
+        borderBottomLeftRadius: thickness,
+
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0,
+      };
+
+    case DIVIDER_ENDS.rounded:
+    default:
+      return thickness / 2;
+  }
+}
+
+const styles = StyleSheet.create({
+  horizontal: {
+    flexShrink: 0,
+  },
+
+  vertical: {
+    flexShrink: 0,
+  },
+
+  textDivider: {
+    flexDirection: "row",
+
+    alignItems: "center",
+
+    flexShrink: 0,
+  },
+
+  line: {
+    flex: 1,
+
+    minWidth: 0,
+
+    height: 1,
+  },
+
+  textContainer: {
+    flexShrink: 0,
+
+    alignItems: "center",
+
+    justifyContent: "center",
+  },
+
+  text: {
+    fontSize: 13,
+
+    lineHeight: 18,
+
+    fontWeight: "500",
+
+    includeFontPadding: false,
+
+    textAlign: "center",
+  },
+});
+
+export const UIDivider = memo(UIDividerComponent);
+
+UIDivider.displayName = "UIDivider";
+
+export {
+  DIVIDER_ORIENTATIONS as UIDividerOrientations,
+  DIVIDER_VARIANTS as UIDividerVariants,
+  DIVIDER_TEXT_POSITIONS as UIDividerTextPositions,
+  DIVIDER_ENDS as UIDividerEnds,
+};
+
+export default UIDivider;

package/src/components/Divider/index.js

@@ -0,0 +1,7 @@
+export {
+  UIDivider,
+  UIDividerOrientations,
+  UIDividerVariants,
+  UIDividerTextPositions,
+  UIDividerEnds,
+} from "./UIDivider";

package/src/components/index.js

@@ -12,3 +12,10 @@ export {
   UICardRadius,
   UICardBadgePositions,
 } from "./Card";
+export {
+  UIDivider,
+  UIDividerOrientations,
+  UIDividerVariants,
+  UIDividerTextPositions,
+  UIDividerEnds,
+} from "./Divider";

package/src/index.js

@@ -28,4 +28,9 @@ export {
   UICardVariants,
   UICardRadius,
   UICardBadgePositions,
+  UIDivider,
+  UIDividerOrientations,
+  UIDividerVariants,
+  UIDividerTextPositions,
+  UIDividerEnds,
 } from "./components";