@sudobility/subscription-components-rn 1.0.2 → 1.0.4

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import require$$0, { createContext, useState, useCallback, useContext } from "react";
-import { Pressable, View, Text, ScrollView, ActivityIndicator } from "react-native";
+import { Pressable, View, Text, ScrollView, ActivityIndicator, StyleSheet } from "react-native";
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production_min = {};
 /**
@@ -1355,26 +1355,6 @@ function SubscriptionFooter({
     /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-xs text-gray-400 dark:text-gray-500 text-center px-4", children: "Subscriptions will automatically renew unless canceled at least 24 hours before the end of the current period." })
   ] });
 }
-const sizeClasses = {
-  sm: {
-    container: "p-1 rounded-lg",
-    segment: "px-3 py-1.5 rounded-md",
-    text: "text-xs",
-    badge: "text-xs px-1.5 py-0.5"
-  },
-  md: {
-    container: "p-1 rounded-lg",
-    segment: "px-4 py-2 rounded-md",
-    text: "text-sm",
-    badge: "text-xs px-2 py-0.5"
-  },
-  lg: {
-    container: "p-1 rounded-lg",
-    segment: "px-6 py-3 rounded-lg",
-    text: "text-base",
-    badge: "text-sm px-2 py-1"
-  }
-};
 function SegmentedControl({
   options,
   value,
@@ -1385,34 +1365,22 @@ function SegmentedControl({
   fullWidth = true,
   accessibilityLabel
 }) {
-  const sizes = sizeClasses[size];
-  const containerClasses = [
-    "flex-row bg-gray-100 dark:bg-gray-800",
-    sizes.container,
-    fullWidth ? "w-full" : "",
-    disabled ? "opacity-50" : "",
-    className
-  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     View,
     {
-      className: containerClasses,
+      style: [
+        styles.container,
+        fullWidth && styles.fullWidth,
+        disabled && styles.disabled,
+        size === "sm" && styles.containerSm,
+        size === "md" && styles.containerMd,
+        size === "lg" && styles.containerLg
+      ],
       accessibilityRole: "tablist",
       accessibilityLabel,
       children: options.map((option) => {
         const isSelected = value === option.value;
         const isDisabled = disabled || option.disabled;
-        const segmentClasses = [
-          sizes.segment,
-          "flex-1 items-center justify-center flex-row gap-2",
-          isSelected ? "bg-white dark:bg-gray-700 shadow-sm" : "bg-transparent",
-          isDisabled ? "opacity-50" : ""
-        ].filter(Boolean).join(" ");
-        const textClasses = [
-          sizes.text,
-          "font-medium",
-          isSelected ? "text-gray-900 dark:text-white" : "text-gray-600 dark:text-gray-400"
-        ].join(" ");
         return /* @__PURE__ */ jsxRuntimeExports.jsxs(
           Pressable,
           {
@@ -1424,24 +1392,45 @@ function SegmentedControl({
               disabled: isDisabled
             },
             accessibilityLabel: option.label + (option.badge ? ", " + option.badge : ""),
-            className: segmentClasses,
+            style: [
+              styles.segment,
+              size === "sm" && styles.segmentSm,
+              size === "md" && styles.segmentMd,
+              size === "lg" && styles.segmentLg,
+              isSelected && styles.segmentSelected,
+              isDisabled && styles.disabled
+            ],
             children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: textClasses, children: option.label }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Text,
+                {
+                  style: [
+                    styles.text,
+                    size === "sm" && styles.textSm,
+                    size === "md" && styles.textMd,
+                    size === "lg" && styles.textLg,
+                    isSelected ? styles.textSelected : styles.textUnselected
+                  ],
+                  children: option.label
+                }
+              ),
               option.badge && /* @__PURE__ */ jsxRuntimeExports.jsx(
                 View,
                 {
-                  className: [
-                    sizes.badge,
-                    "rounded-full",
-                    isSelected ? "bg-green-100 dark:bg-green-900" : "bg-gray-200 dark:bg-gray-700"
-                  ].join(" "),
+                  style: [
+                    styles.badge,
+                    size === "sm" && styles.badgeSm,
+                    size === "md" && styles.badgeMd,
+                    size === "lg" && styles.badgeLg,
+                    isSelected ? styles.badgeSelected : styles.badgeUnselected
+                  ],
                   children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                     Text,
                     {
-                      className: [
-                        "text-xs font-semibold",
-                        isSelected ? "text-green-700 dark:text-green-300" : "text-gray-600 dark:text-gray-400"
-                      ].join(" "),
+                      style: [
+                        styles.badgeText,
+                        isSelected ? styles.badgeTextSelected : styles.badgeTextUnselected
+                      ],
                       children: option.badge
                     }
                   )
@@ -1482,6 +1471,105 @@ function PeriodSelector({
     }
   );
 }
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    backgroundColor: "#f3f4f6",
+    borderRadius: 8,
+    padding: 4
+  },
+  fullWidth: {
+    width: "100%"
+  },
+  disabled: {
+    opacity: 0.5
+  },
+  containerSm: {
+    borderRadius: 8
+  },
+  containerMd: {
+    borderRadius: 8
+  },
+  containerLg: {
+    borderRadius: 12
+  },
+  segment: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "row"
+  },
+  segmentSm: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 6,
+    gap: 8
+  },
+  segmentMd: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 6,
+    gap: 8
+  },
+  segmentLg: {
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    borderRadius: 8,
+    gap: 8
+  },
+  segmentSelected: {
+    backgroundColor: "#ffffff"
+  },
+  text: {
+    fontWeight: "500"
+  },
+  textSm: {
+    fontSize: 12
+  },
+  textMd: {
+    fontSize: 14
+  },
+  textLg: {
+    fontSize: 16
+  },
+  textSelected: {
+    color: "#111827"
+  },
+  textUnselected: {
+    color: "#4b5563"
+  },
+  badge: {
+    borderRadius: 999
+  },
+  badgeSm: {
+    paddingHorizontal: 6,
+    paddingVertical: 2
+  },
+  badgeMd: {
+    paddingHorizontal: 8,
+    paddingVertical: 2
+  },
+  badgeLg: {
+    paddingHorizontal: 8,
+    paddingVertical: 4
+  },
+  badgeSelected: {
+    backgroundColor: "#dcfce7"
+  },
+  badgeUnselected: {
+    backgroundColor: "#e5e7eb"
+  },
+  badgeText: {
+    fontSize: 12,
+    fontWeight: "600"
+  },
+  badgeTextSelected: {
+    color: "#15803d"
+  },
+  badgeTextUnselected: {
+    color: "#4b5563"
+  }
+});
 const SubscriptionContext = createContext(
   void 0
 );