@sudobility/subscription-components-rn 1.0.3 → 1.0.5

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 = {};
 /**
@@ -1190,6 +1190,24 @@ function SubscriptionTile({
     }
   );
 }
+const PLATFORM_ICONS = {
+  web: "🌐",
+  ios: "",
+  android: "🤖",
+  macos: ""
+};
+const PLATFORM_DISPLAY_NAMES = {
+  web: "Web",
+  ios: "iOS",
+  android: "Android",
+  macos: "macOS"
+};
+function PlatformIcon({ platform, className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className, children: PLATFORM_ICONS[platform] });
+}
+function platformDisplayName(platform) {
+  return PLATFORM_DISPLAY_NAMES[platform];
+}
 function SubscriptionLayout({
   title,
   children,
@@ -1208,7 +1226,7 @@ function SubscriptionLayout({
   trackingLabel,
   componentName = "SubscriptionLayout"
 }) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e;
   const showActionButtons = variant === "selection" && primaryAction;
   const shouldShowFreeTile = variant === "cta" && freeTileConfig;
   const handlePrimaryPress = () => {
@@ -1229,23 +1247,36 @@ function SubscriptionLayout({
         headerContent,
         currentStatus && /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "mb-6", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4", children: currentStatusLabel }),
-          currentStatus.isActive ? /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4", children: [
+          currentStatus.isActive ? /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "bg-gray-50 dark:bg-gray-800/30 border border-gray-200 dark:border-gray-700 rounded-lg p-4", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-row items-center mb-2", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "w-3 h-3 bg-green-500 rounded-full mr-3" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "font-semibold text-green-800 dark:text-green-300", children: ((_a = currentStatus.activeContent) == null ? void 0 : _a.title) || "Active Subscription" })
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "font-semibold text-gray-800 dark:text-gray-200", children: ((_a = currentStatus.activeContent) == null ? void 0 : _a.title) || "Active Subscription" })
             ] }),
             ((_b = currentStatus.activeContent) == null ? void 0 : _b.fields) && currentStatus.activeContent.fields.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "mt-4 gap-4", children: currentStatus.activeContent.fields.map(
               (field, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-sm text-green-600 dark:text-green-400", children: field.label }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "font-semibold text-green-800 dark:text-green-300", children: field.value })
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-sm text-gray-500 dark:text-gray-400", children: field.label }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "font-semibold text-gray-700 dark:text-gray-300", children: field.value })
               ] }, index)
-            ) })
+            ) }),
+            ((_c = currentStatus.activeContent) == null ? void 0 : _c.platform) && /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "mt-4", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-sm text-gray-500 dark:text-gray-400", children: currentStatus.activeContent.platform.label }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-row items-center gap-1.5 mt-0.5", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  PlatformIcon,
+                  {
+                    platform: currentStatus.activeContent.platform.value,
+                    className: "text-gray-600 dark:text-gray-300"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "font-semibold text-gray-700 dark:text-gray-300", children: platformDisplayName(currentStatus.activeContent.platform.value) })
+              ] })
+            ] })
           ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-row items-center mb-2", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "w-3 h-3 bg-yellow-500 rounded-full mr-3" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "font-semibold text-yellow-800 dark:text-yellow-300", children: ((_c = currentStatus.inactiveContent) == null ? void 0 : _c.title) || "No Active Subscription" })
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "font-semibold text-yellow-800 dark:text-yellow-300", children: ((_d = currentStatus.inactiveContent) == null ? void 0 : _d.title) || "No Active Subscription" })
             ] }),
-            ((_d = currentStatus.inactiveContent) == null ? void 0 : _d.message) && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-yellow-700 dark:text-yellow-400", children: currentStatus.inactiveContent.message })
+            ((_e = currentStatus.inactiveContent) == null ? void 0 : _e.message) && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-yellow-700 dark:text-yellow-400", children: currentStatus.inactiveContent.message })
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4", children: title }),
@@ -1355,26 +1386,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 +1396,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 +1423,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 +1502,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
 );