@sudobility/subscription-components-rn 1.0.3 → 1.0.5

package/dist/PlatformIcon.d.ts

@@ -0,0 +1,9 @@
+type PlatformType = 'web' | 'ios' | 'android' | 'macos';
+interface PlatformIconProps {
+    platform: PlatformType;
+    className?: string;
+}
+export declare function PlatformIcon({ platform, className }: PlatformIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function platformDisplayName(platform: PlatformType): string;
+export {};
+//# sourceMappingURL=PlatformIcon.d.ts.map

package/dist/PlatformIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlatformIcon.d.ts","sourceRoot":"","sources":["../src/PlatformIcon.tsx"],"names":[],"mappings":"AAEA,KAAK,YAAY,GAAG,KAAK,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,CAAC;AAExD,UAAU,iBAAiB;IACzB,QAAQ,EAAE,YAAY,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgBD,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,iBAAiB,2CAMtE;AAED,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,YAAY,GAAG,MAAM,CAElE"}

package/dist/SegmentedControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../src/SegmentedControl.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC/D,4BAA4B;IAC5B,KAAK,EAAE,CAAC,CAAC;IACT,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC9D,wBAAwB;IACxB,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAC;IACrC,+BAA+B;IAC/B,KAAK,EAAE,CAAC,CAAC;IACT,+BAA+B;IAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0BAA0B;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AA0BD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EAC1D,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAc,EACd,QAAgB,EAChB,IAAW,EACX,SAAgB,EAChB,kBAAkB,GACnB,EAAE,qBAAqB,CAAC,CAAC,CAAC,2CAqF1B;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,qBAAqB;IACrB,MAAM,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC7B,iCAAiC;IACjC,cAAc,EAAE,CAAC,MAAM,EAAE,SAAS,GAAG,QAAQ,KAAK,IAAI,CAAC;IACvD,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2BAA2B;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,cAAc,EACd,YAAwB,EACxB,WAAsB,EACtB,aAAa,EACb,IAAW,EACX,SAAc,EACd,QAAgB,GACjB,EAAE,mBAAmB,2CAiBrB;AAED,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../src/SegmentedControl.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC/D,4BAA4B;IAC5B,KAAK,EAAE,CAAC,CAAC;IACT,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC9D,wBAAwB;IACxB,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAC;IACrC,+BAA+B;IAC/B,KAAK,EAAE,CAAC,CAAC;IACT,+BAA+B;IAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0BAA0B;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EAC1D,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAc,EACd,QAAgB,EAChB,IAAW,EACX,SAAgB,EAChB,kBAAkB,GACnB,EAAE,qBAAqB,CAAC,CAAC,CAAC,2CAkF1B;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,qBAAqB;IACrB,MAAM,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC7B,iCAAiC;IACjC,cAAc,EAAE,CAAC,MAAM,EAAE,SAAS,GAAG,QAAQ,KAAK,IAAI,CAAC;IACvD,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2BAA2B;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,cAAc,EACd,YAAwB,EACxB,WAAsB,EACtB,aAAa,EACb,IAAW,EACX,SAAc,EACd,QAAgB,GACjB,EAAE,mBAAmB,2CAiBrB;AAED,eAAe,gBAAgB,CAAC"}

package/dist/SubscriptionLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SubscriptionLayout.d.ts","sourceRoot":"","sources":["../src/SubscriptionLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,OAAO,KAAK,EACV,cAAc,EACd,8BAA8B,EAC9B,wBAAwB,EACxB,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAEjB;;;;GAIG;AACH,MAAM,MAAM,yBAAyB,GAAG,WAAW,GAAG,KAAK,CAAC;AAE5D,MAAM,WAAW,uBAAuB;IACtC,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEtB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,yBAAyB,CAAC;IAEpC,gDAAgD;IAChD,aAAa,CAAC,EAAE,wBAAwB,CAAC;IAEzC,wFAAwF;IACxF,aAAa,CAAC,EAAE,kBAAkB,CAAC;IAEnC,6FAA6F;IAC7F,eAAe,CAAC,EAAE,kBAAkB,CAAC;IAErC,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,4BAA4B;IAC5B,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B,gFAAgF;IAChF,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B,4DAA4D;IAC5D,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B,4DAA4D;IAC5D,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAEhC,iCAAiC;IACjC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,8BAA8B,KAAK,IAAI,CAAC;IACzD,8BAA8B;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,OAAqB,EACrB,aAAa,EACb,aAAa,EACb,eAAe,EACf,SAAc,EACd,aAAa,EACb,aAAa,EACb,aAAa,EACb,kBAAqC,EACrC,cAAc,EACd,OAAO,EACP,aAAa,EACb,aAAoC,GACrC,EAAE,uBAAuB,2CAsKzB;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,SAAc,GACf,EAAE,wBAAwB,2CAgB1B;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,qCAAqC;IACrC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,SAA8B,EAC9B,WAA8B,EAC9B,WAAiC,EACjC,SAAS,EACT,YAAY,EACZ,cAAc,EACd,SAAc,GACf,EAAE,uBAAuB,2CA2CzB;AAED,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"SubscriptionLayout.d.ts","sourceRoot":"","sources":["../src/SubscriptionLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUvC,OAAO,KAAK,EACV,cAAc,EACd,8BAA8B,EAC9B,wBAAwB,EACxB,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAEjB;;;;GAIG;AACH,MAAM,MAAM,yBAAyB,GAAG,WAAW,GAAG,KAAK,CAAC;AAE5D,MAAM,WAAW,uBAAuB;IACtC,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEtB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,yBAAyB,CAAC;IAEpC,gDAAgD;IAChD,aAAa,CAAC,EAAE,wBAAwB,CAAC;IAEzC,wFAAwF;IACxF,aAAa,CAAC,EAAE,kBAAkB,CAAC;IAEnC,6FAA6F;IAC7F,eAAe,CAAC,EAAE,kBAAkB,CAAC;IAErC,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,4BAA4B;IAC5B,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B,gFAAgF;IAChF,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B,4DAA4D;IAC5D,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B,4DAA4D;IAC5D,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAEhC,iCAAiC;IACjC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,8BAA8B,KAAK,IAAI,CAAC;IACzD,8BAA8B;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,OAAqB,EACrB,aAAa,EACb,aAAa,EACb,eAAe,EACf,SAAc,EACd,aAAa,EACb,aAAa,EACb,aAAa,EACb,kBAAqC,EACrC,cAAc,EACd,OAAO,EACP,aAAa,EACb,aAAoC,GACrC,EAAE,uBAAuB,2CAsLzB;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,SAAc,GACf,EAAE,wBAAwB,2CAgB1B;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,qCAAqC;IACrC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,SAA8B,EAC9B,WAA8B,EAC9B,WAAiC,EACjC,SAAS,EACT,YAAY,EACZ,cAAc,EACd,SAAc,GACf,EAAE,uBAAuB,2CA2CzB;AAED,eAAe,kBAAkB,CAAC"}

package/dist/index.js

@@ -1192,6 +1192,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(reactNative.Text, { className, children: PLATFORM_ICONS[platform] });
+}
+function platformDisplayName(platform) {
+  return PLATFORM_DISPLAY_NAMES[platform];
+}
 function SubscriptionLayout({
   title,
   children,
@@ -1210,7 +1228,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 = () => {
@@ -1231,23 +1249,36 @@ function SubscriptionLayout({
         headerContent,
         currentStatus && /* @__PURE__ */ jsxRuntimeExports.jsxs(reactNative.View, { className: "mb-6", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4", children: currentStatusLabel }),
-          currentStatus.isActive ? /* @__PURE__ */ jsxRuntimeExports.jsxs(reactNative.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(reactNative.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(reactNative.View, { className: "flex-row items-center mb-2", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "w-3 h-3 bg-green-500 rounded-full mr-3" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.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(reactNative.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(reactNative.View, { className: "mt-4 gap-4", children: currentStatus.activeContent.fields.map(
               (field, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(reactNative.View, { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-sm text-green-600 dark:text-green-400", children: field.label }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "font-semibold text-green-800 dark:text-green-300", children: field.value })
+                /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-sm text-gray-500 dark:text-gray-400", children: field.label }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.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(reactNative.View, { className: "mt-4", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-sm text-gray-500 dark:text-gray-400", children: currentStatus.activeContent.platform.label }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(reactNative.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(reactNative.Text, { className: "font-semibold text-gray-700 dark:text-gray-300", children: platformDisplayName(currentStatus.activeContent.platform.value) })
+              ] })
+            ] })
           ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(reactNative.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(reactNative.View, { className: "flex-row items-center mb-2", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { className: "w-3 h-3 bg-yellow-500 rounded-full mr-3" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.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(reactNative.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(reactNative.Text, { className: "text-yellow-700 dark:text-yellow-400", children: currentStatus.inactiveContent.message })
+            ((_e = currentStatus.inactiveContent) == null ? void 0 : _e.message) && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-yellow-700 dark:text-yellow-400", children: currentStatus.inactiveContent.message })
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4", children: title }),
@@ -1357,26 +1388,6 @@ function SubscriptionFooter({
     /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.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,
@@ -1387,34 +1398,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(
     reactNative.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(
           reactNative.Pressable,
           {
@@ -1426,24 +1425,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(reactNative.Text, { className: textClasses, children: option.label }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                reactNative.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(
                 reactNative.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(
                     reactNative.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
                     }
                   )
@@ -1484,6 +1504,105 @@ function PeriodSelector({
     }
   );
 }
+const styles = reactNative.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 = require$$0.createContext(
   void 0
 );