@sudobility/subscription-components-rn 1.0.3 → 1.0.4

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/index.js

@@ -1357,26 +1357,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 +1367,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 +1394,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 +1473,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
 );