rnnovaui 0.3.0 → 0.4.0

package/package.json

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

package/src/components/Card/UICard.js

@@ -1,11 +1,13 @@
 import React, { memo, useCallback, useMemo, useRef } from "react";
 
 import {
+  ActivityIndicator,
   Animated,
   Easing,
   Image,
   Pressable,
   StyleSheet,
+  Text,
   View,
 } from "react-native";
 
@@ -19,35 +21,87 @@ const CARD_VARIANTS = {
 };
 
 const CARD_RADIUS = {
-  none: 0,
-  sm: 8,
-  md: 12,
-  lg: 16,
-  xl: 20,
+  none: "none",
+  sm: "sm",
+  md: "md",
+  lg: "lg",
+  xl: "xl",
+};
+
+const BADGE_POSITIONS = {
+  topLeft: "topLeft",
+  topCenter: "topCenter",
+  topRight: "topRight",
+
+  centerLeft: "centerLeft",
+  center: "center",
+  centerRight: "centerRight",
+
+  bottomLeft: "bottomLeft",
+  bottomCenter: "bottomCenter",
+  bottomRight: "bottomRight",
 };
 
 const FALLBACK_COLORS = {
-  background: "#FFFFFF",
-  surface: "#F8F8F8",
   card: "#FFFFFF",
+  surface: "#F8F8F8",
   border: "#E5E5E5",
-  shadow: "#000000",
+
+  primary: "#FF5A1F",
+  primarySoft: "#FFF0EA",
+
+  success: "#16A34A",
+  danger: "#DC2626",
+  warning: "#D97706",
+  info: "#2563EB",
+
+  white: "#FFFFFF",
+  black: "#111111",
+
+  text: "#111111",
+  textSecondary: "#525252",
 };
 
 function UICardComponent({
   children,
 
   header = null,
-
   content = null,
-
   footer = null,
 
   image = null,
-
   imageSource = null,
 
-  imageHeight = 180,
+  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",
 
@@ -58,27 +112,21 @@ function UICardComponent({
   gap = 12,
 
   style,
-
   headerStyle,
-
-  imageStyle,
-
   contentStyle,
-
   footerStyle,
 
-  disabled = false,
-
-  loading = false,
+  imageOverlay = null,
+  imageOverlayStyle,
 
   pressable = false,
 
-  onPress,
+  disabled = false,
+  loading = false,
 
+  onPress,
   onLongPress,
-
   onPressIn,
-
   onPressOut,
 
   pressAnimation = true,
@@ -90,7 +138,6 @@ function UICardComponent({
   testID,
 
   accessibilityLabel,
-
   accessibilityHint,
 
   ...props
@@ -107,7 +154,9 @@ function UICardComponent({
 
   const safeVariant = CARD_VARIANTS[variant] ? variant : CARD_VARIANTS.default;
 
-  const resolvedRadius = CARD_RADIUS[radius] ?? CARD_RADIUS.lg;
+  const safeRadius = CARD_RADIUS[radius] ? radius : CARD_RADIUS.lg;
+
+  const radiusValue = getRadiusValue(safeRadius, theme);
 
   const cardColors = useMemo(
     () => getCardColors(safeVariant, colors),
@@ -215,14 +264,8 @@ function UICardComponent({
 
         borderWidth: cardColors.borderWidth,
 
-        borderRadius: resolvedRadius,
+        borderRadius: radiusValue,
 
-        padding,
-      },
-
-      cardColors.shadow,
-
-      {
         opacity: isDisabled ? 0.55 : 1,
 
         transform: [
@@ -232,94 +275,152 @@ function UICardComponent({
         ],
       },
 
+      cardColors.shadow,
+
       style,
     ],
-    [cardColors, resolvedRadius, padding, isDisabled, scale, style],
+    [cardColors, radiusValue, isDisabled, scale, style],
   );
 
+  const hasImage = Boolean(image || imageSource);
+
+  const hasBody = Boolean(header || content || children || footer);
+
   const cardContent = (
     <>
-      {image || imageSource ? (
+      {/* ------------------------------------------ */}
+      {/* IMAGE */}
+      {/* ------------------------------------------ */}
+
+      {hasImage ? (
         <View
           style={[
-            styles.imageWrapper,
+            styles.imageSection,
+
             {
               height: imageHeight,
 
-              borderTopLeftRadius: resolvedRadius,
+              borderTopLeftRadius: radiusValue,
 
-              borderTopRightRadius: resolvedRadius,
+              borderTopRightRadius: radiusValue,
             },
           ]}
         >
-          {image || (
+          {image ? (
+            image
+          ) : (
             <Image
               source={imageSource}
-              resizeMode="cover"
+              resizeMode={imageResizeMode}
               style={[styles.image, imageStyle]}
             />
           )}
-        </View>
-      ) : null}
 
-      {header ? (
-        <View
-          style={[
-            styles.header,
-            {
-              marginTop: image || imageSource ? gap : 0,
-            },
-            headerStyle,
-          ]}
-        >
-          {header}
+          {/* -------------------------------------- */}
+          {/* IMAGE OVERLAY */}
+          {/* -------------------------------------- */}
+
+          {imageOverlay ? (
+            <View
+              pointerEvents="none"
+              style={[styles.imageOverlay, imageOverlayStyle]}
+            >
+              {imageOverlay}
+            </View>
+          ) : null}
+
+          {/* -------------------------------------- */}
+          {/* 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-${index}`}
+                  badge={badge}
+                  index={index}
+                  badgeGap={badgeGap}
+                  defaultStyle={badgeStyle}
+                  defaultTextStyle={badgeTextStyle}
+                  defaultContainerStyle={badgeContainerStyle}
+                  colors={colors}
+                />
+              ))}
+            </View>
+          ) : null}
         </View>
       ) : null}
 
-      {content ? (
-        <View
-          style={[
-            styles.content,
-            {
-              marginTop: header ? gap : 0,
-            },
-            contentStyle,
-          ]}
-        >
-          {content}
-        </View>
-      ) : null}
+      {/* ------------------------------------------ */}
+      {/* BODY */}
+      {/* ------------------------------------------ */}
 
-      {children ? (
+      {hasBody ? (
         <View
           style={[
-            styles.content,
+            styles.body,
+
             {
-              marginTop: header || content ? gap : 0,
+              padding,
+              gap,
             },
-            contentStyle,
           ]}
         >
-          {children}
+          {/* HEADER */}
+
+          {header ? (
+            <View style={[styles.header, headerStyle]}>{header}</View>
+          ) : null}
+
+          {/* CONTENT */}
+
+          {content ? (
+            <View style={[styles.content, contentStyle]}>{content}</View>
+          ) : null}
+
+          {/* CHILDREN */}
+
+          {children ? (
+            <View style={[styles.content, contentStyle]}>{children}</View>
+          ) : null}
+
+          {/* FOOTER */}
+
+          {footer ? (
+            <View style={[styles.footer, footerStyle]}>{footer}</View>
+          ) : null}
         </View>
       ) : null}
 
-      {footer ? (
+      {/* ------------------------------------------ */}
+      {/* LOADING */}
+      {/* ------------------------------------------ */}
+
+      {loading ? (
         <View
+          pointerEvents="none"
           style={[
-            styles.footer,
+            styles.loadingOverlay,
+
             {
-              marginTop: header || content || children ? gap : 0,
+              borderRadius: radiusValue,
             },
-            footerStyle,
           ]}
         >
-          {footer}
+          <ActivityIndicator
+            size="small"
+            color={colors.primary || FALLBACK_COLORS.primary}
+          />
         </View>
       ) : null}
     </>
   );
 
+  /*
+   * Non-pressable card
+   */
+
   if (!pressable) {
     return (
       <Animated.View
@@ -333,6 +434,10 @@ function UICardComponent({
     );
   }
 
+  /*
+   * Pressable card
+   */
+
   return (
     <Animated.View {...props} testID={testID} style={cardStyle}>
       <Pressable
@@ -357,6 +462,379 @@ function UICardComponent({
   );
 }
 
+/* ================================================= */
+/* CARD BADGE                                        */
+/* ================================================= */
+
+const CardBadge = memo(function CardBadge({
+  badge,
+  index,
+  badgeGap,
+
+  defaultStyle,
+  defaultTextStyle,
+  defaultContainerStyle,
+
+  colors,
+}) {
+  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, badgeGap);
+
+  const label = badge.label ?? badge.text ?? badge.content ?? "";
+
+  return (
+    <View
+      pointerEvents="none"
+      style={[
+        styles.badge,
+
+        positionStyle,
+
+        {
+          backgroundColor: badge.backgroundColor || badgeColors.background,
+
+          borderColor: badge.borderColor || badgeColors.border,
+
+          borderWidth: badge.borderWidth ?? badgeColors.borderWidth,
+
+          borderRadius: badge.borderRadius ?? 999,
+        },
+
+        defaultStyle,
+
+        badge.style,
+
+        defaultContainerStyle,
+      ]}
+    >
+      {badge.icon ? (
+        <View
+          style={[
+            styles.badgeIcon,
+
+            {
+              marginRight: label ? 5 : 0,
+            },
+          ]}
+        >
+          {badge.icon}
+        </View>
+      ) : null}
+
+      {label !== "" ? (
+        <Text
+          numberOfLines={1}
+          ellipsizeMode="tail"
+          style={[
+            styles.badgeText,
+
+            {
+              color: badge.textColor || badgeColors.text,
+
+              fontSize: badge.fontSize || 12,
+
+              lineHeight: badge.lineHeight || 16,
+
+              fontWeight: badge.fontWeight || "600",
+            },
+
+            defaultTextStyle,
+
+            badge.textStyle,
+          ]}
+        >
+          {label}
+        </Text>
+      ) : null}
+    </View>
+  );
+});
+
+CardBadge.displayName = "CardBadge";
+
+/* ================================================= */
+/* BADGE POSITIONING                                 */
+/* ================================================= */
+
+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);
+
+  switch (position) {
+    /* -------------------------------------------- */
+    /* TOP LEFT                                     */
+    /* -------------------------------------------- */
+
+    case BADGE_POSITIONS.topLeft:
+      return {
+        top: 12,
+
+        left: 12 + offset,
+      };
+
+    /* -------------------------------------------- */
+    /* TOP CENTER                                   */
+    /* -------------------------------------------- */
+
+    case BADGE_POSITIONS.topCenter:
+      return {
+        top: 12,
+
+        left: "50%",
+
+        transform: [
+          {
+            translateX: -50,
+          },
+        ],
+      };
+
+    /* -------------------------------------------- */
+    /* TOP RIGHT                                    */
+    /* -------------------------------------------- */
+
+    case BADGE_POSITIONS.topRight:
+      return {
+        top: 12,
+
+        right: 12 + offset,
+      };
+
+    /* -------------------------------------------- */
+    /* CENTER LEFT                                  */
+    /* -------------------------------------------- */
+
+    case BADGE_POSITIONS.centerLeft:
+      return {
+        left: 12,
+
+        top: "50%",
+
+        transform: [
+          {
+            translateY: -50,
+          },
+        ],
+      };
+
+    /* -------------------------------------------- */
+    /* CENTER                                       */
+    /* -------------------------------------------- */
+
+    case BADGE_POSITIONS.center:
+      return {
+        left: "50%",
+
+        top: "50%",
+
+        transform: [
+          {
+            translateX: -50,
+          },
+
+          {
+            translateY: -50,
+          },
+        ],
+      };
+
+    /* -------------------------------------------- */
+    /* CENTER RIGHT                                 */
+    /* -------------------------------------------- */
+
+    case BADGE_POSITIONS.centerRight:
+      return {
+        right: 12,
+
+        top: "50%",
+
+        transform: [
+          {
+            translateY: -50,
+          },
+        ],
+      };
+
+    /* -------------------------------------------- */
+    /* 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                                     */
+/* ================================================= */
+
+function getBadgeColors(badge, colors) {
+  const variant = badge.variant || badge.type || "primary";
+
+  switch (variant) {
+    case "success":
+      return {
+        background: colors.success || FALLBACK_COLORS.success,
+
+        border: colors.success || FALLBACK_COLORS.success,
+
+        borderWidth: 0,
+
+        text: colors.onSuccess || FALLBACK_COLORS.white,
+      };
+
+    case "danger":
+      return {
+        background: colors.danger || FALLBACK_COLORS.danger,
+
+        border: colors.danger || FALLBACK_COLORS.danger,
+
+        borderWidth: 0,
+
+        text: colors.onDanger || FALLBACK_COLORS.white,
+      };
+
+    case "warning":
+      return {
+        background: colors.warning || FALLBACK_COLORS.warning,
+
+        border: colors.warning || FALLBACK_COLORS.warning,
+
+        borderWidth: 0,
+
+        text: colors.onWarning || FALLBACK_COLORS.white,
+      };
+
+    case "info":
+      return {
+        background: colors.info || FALLBACK_COLORS.info,
+
+        border: colors.info || FALLBACK_COLORS.info,
+
+        borderWidth: 0,
+
+        text: colors.onInfo || FALLBACK_COLORS.white,
+      };
+
+    case "soft":
+      return {
+        background: colors.primarySoft || FALLBACK_COLORS.primarySoft,
+
+        border: "transparent",
+
+        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,
+
+        borderWidth: 1,
+
+        text: colors.textSecondary || FALLBACK_COLORS.textSecondary,
+      };
+
+    case "custom":
+      return {
+        background: badge.backgroundColor || FALLBACK_COLORS.primary,
+
+        border: badge.borderColor || "transparent",
+
+        borderWidth: badge.borderWidth ?? 0,
+
+        text: badge.textColor || FALLBACK_COLORS.white,
+      };
+
+    case "primary":
+    default:
+      return {
+        background: colors.primary || FALLBACK_COLORS.primary,
+
+        border: colors.primary || FALLBACK_COLORS.primary,
+
+        borderWidth: 0,
+
+        text: colors.onPrimary || FALLBACK_COLORS.white,
+      };
+  }
+}
+
+/* ================================================= */
+/* CARD COLORS                                      */
+/* ================================================= */
+
 function getCardColors(variant, colors) {
   const background = colors.card || colors.surface || FALLBACK_COLORS.card;
 
@@ -389,7 +867,7 @@ function getCardColors(variant, colors) {
       return {
         background: colors.surface || FALLBACK_COLORS.surface,
 
-        border,
+        border: "transparent",
 
         borderWidth: 0,
 
@@ -401,7 +879,7 @@ function getCardColors(variant, colors) {
       return {
         background,
 
-        border,
+        border: "transparent",
 
         borderWidth: 0,
 
@@ -410,27 +888,55 @@ function getCardColors(variant, colors) {
   }
 }
 
+/* ================================================= */
+/* RADIUS                                           */
+/* ================================================= */
+
+function getRadiusValue(radius, theme) {
+  const themeRadius = theme?.radius || {};
+
+  switch (radius) {
+    case CARD_RADIUS.none:
+      return 0;
+
+    case CARD_RADIUS.sm:
+      return themeRadius.sm ?? 8;
+
+    case CARD_RADIUS.md:
+      return themeRadius.md ?? 12;
+
+    case CARD_RADIUS.xl:
+      return themeRadius.xl ?? 20;
+
+    case CARD_RADIUS.lg:
+    default:
+      return themeRadius.lg ?? 16;
+  }
+}
+
+/* ================================================= */
+/* STYLES                                           */
+/* ================================================= */
+
 const styles = StyleSheet.create({
   card: {
     width: "100%",
 
     overflow: "hidden",
+
+    position: "relative",
   },
 
   pressable: {
     width: "100%",
   },
 
-  imageWrapper: {
+  imageSection: {
     width: "100%",
 
-    overflow: "hidden",
-
-    marginHorizontal: -16,
+    position: "relative",
 
-    marginTop: -16,
-
-    width: "calc(100% + 32px)",
+    overflow: "hidden",
   },
 
   image: {
@@ -439,6 +945,71 @@ const styles = StyleSheet.create({
     height: "100%",
   },
 
+  imageOverlay: {
+    ...StyleSheet.absoluteFillObject,
+
+    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,
+
+    zIndex: 20,
+
+    elevation: 20,
+  },
+
+  badge: {
+    position: "absolute",
+
+    minHeight: 28,
+
+    paddingHorizontal: 10,
+
+    paddingVertical: 5,
+
+    flexDirection: "row",
+
+    alignItems: "center",
+
+    justifyContent: "center",
+
+    maxWidth: "75%",
+
+    zIndex: 30,
+
+    elevation: 30,
+
+    overflow: "hidden",
+  },
+
+  badgeText: {
+    includeFontPadding: false,
+
+    textAlign: "center",
+
+    flexShrink: 1,
+  },
+
+  badgeIcon: {
+    alignItems: "center",
+
+    justifyContent: "center",
+
+    flexShrink: 0,
+  },
+
+  body: {
+    width: "100%",
+  },
+
   header: {
     width: "100%",
   },
@@ -451,11 +1022,24 @@ const styles = StyleSheet.create({
     width: "100%",
   },
 
+  loadingOverlay: {
+    ...StyleSheet.absoluteFillObject,
+
+    alignItems: "center",
+
+    justifyContent: "center",
+
+    backgroundColor: "rgba(0,0,0,0.08)",
+
+    zIndex: 100,
+  },
+
   elevated: {
-    shadowColor: FALLBACK_COLORS.shadow,
+    shadowColor: "#000000",
 
     shadowOffset: {
       width: 0,
+
       height: 4,
     },
 
@@ -477,6 +1061,10 @@ export const UICard = memo(UICardComponent);
 
 UICard.displayName = "UICard";
 
-export { CARD_VARIANTS as UICardVariants, CARD_RADIUS as UICardRadius };
+export {
+  CARD_VARIANTS as UICardVariants,
+  CARD_RADIUS as UICardRadius,
+  BADGE_POSITIONS as UICardBadgePositions,
+};
 
 export default UICard;

package/src/components/Card/index.js

@@ -1 +1,6 @@
-export { UICard, UICardVariants, UICardRadius } from "./UICard";
+export {
+  UICard,
+  UICardVariants,
+  UICardRadius,
+  UICardBadgePositions,
+} from "./UICard";

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

@@ -6,4 +6,16 @@ export {
   UIIconButtonSizes,
   UIIconButtonShapes,
 } from "./IconButton";
-export { UICard, UICardVariants, UICardRadius } from "./Card";
+export {
+  UICard,
+  UICardVariants,
+  UICardRadius,
+  UICardBadgePositions,
+} from "./Card";
+export {
+  UIDivider,
+  UIDividerOrientations,
+  UIDividerVariants,
+  UIDividerTextPositions,
+  UIDividerEnds,
+} from "./Divider";

package/src/index.js

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