@windrun-huaiin/third-ui 5.12.2 → 5.12.3

package/dist/main/index.js

@@ -3643,77 +3643,58 @@ function PricePlan({ currency = "$", pricePlanConfig, sectionClassName }) {
       top: Math.max(8, y),
       zIndex: 9999,
       maxWidth: 200,
-      background: "#222",
-      color: "#fff",
-      borderRadius: 10,
-      padding: "16px",
-      boxShadow: "0 4px 24px 0 rgba(0,0,0,0.25)",
-      fontSize: 15,
-      lineHeight: 1.6,
+      transform: "translateY(-50%)",
       pointerEvents: "none",
-      whiteSpace: "pre-line",
-      transform: "translateY(-50%)"
+      whiteSpace: "pre-line"
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { style, children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      "div",
+      {
+        style,
+        className: "bg-gray-700 dark:bg-gray-200 text-gray-100 dark:text-gray-800 text-xs leading-relaxed px-3 py-2 rounded-lg shadow-lg border border-gray-300 dark:border-gray-600 backdrop-blur-sm",
+        children: content
+      }
+    );
   };
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("section", { id: "pricing", className: cn("px-4 py-10 md:px-16 md:py-16 mx-auto max-w-7xl scroll-mt-10", sectionClassName), children: [
     /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-3", children: t("title") }),
     /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-8 text-base md:text-lg mx-auto", children: t("subtitle") }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex justify-center items-center gap-8 mb-12", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex flex-row-reverse items-center gap-2 w-[180px] justify-end", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex flex-col items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex items-center relative mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-full p-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           "button",
           {
             className: cn(
-              "min-w-[120px] px-6 py-2 rounded-full font-medium border transition text-lg",
-              billingKey === "monthly" ? "text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600" : "bg-white dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-gray-800 dark:text-gray-200 hover:border-purple-400",
-              "mr-4"
+              "min-w-[120px] px-6 py-2 font-medium transition text-lg relative",
+              billingKey === "monthly" ? "text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm" : "text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full"
             ),
             onClick: () => setBillingKey("monthly"),
             type: "button",
             children: ((_a = billingSwitch.options.find((opt) => opt.key === "monthly")) == null ? void 0 : _a.name) || "Monthly"
           }
         ),
-        (() => {
-          const opt = billingSwitch.options.find((opt2) => opt2.key === "monthly");
-          const bOpt = billingOptions.find((opt2) => opt2.key === "monthly");
-          if (!(opt && bOpt && opt.discountText && bOpt.discount !== 0)) return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "min-w-[80px] px-2 py-1 text-xs rounded invisible" });
-          return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: cn(
-            "min-w-[80px] px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-800 font-semibold align-middle text-center inline-flex items-center justify-center whitespace-nowrap",
-            billingKey !== "monthly" && "invisible"
-          ), children: opt.discountText.replace(
-            "{percent}",
-            String(Math.round(Math.abs(bOpt.discount) * 100))
-          ) });
-        })()
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-2 w-[180px] justify-start", children: [
         /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           "button",
           {
             className: cn(
-              "min-w-[120px] px-6 py-2 rounded-full font-medium border transition text-lg",
-              billingKey === "yearly" ? "text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600" : "bg-white dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-gray-800 dark:text-gray-200 hover:border-purple-400",
-              "ml-4"
+              "min-w-[120px] px-6 py-2 font-medium transition text-lg relative",
+              billingKey === "yearly" ? "text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm" : "text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full"
             ),
             onClick: () => setBillingKey("yearly"),
             type: "button",
             children: ((_b = billingSwitch.options.find((opt) => opt.key === "yearly")) == null ? void 0 : _b.name) || "Yearly"
           }
-        ),
-        (() => {
-          const opt = billingSwitch.options.find((opt2) => opt2.key === "yearly");
-          const bOpt = billingOptions.find((opt2) => opt2.key === "yearly");
-          if (!(opt && bOpt && opt.discountText && bOpt.discount !== 0)) return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "min-w-[80px] px-2 py-1 text-xs rounded invisible" });
-          return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: cn(
-            "min-w-[80px] px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-800 font-semibold align-middle text-center inline-flex items-center justify-center whitespace-nowrap",
-            billingKey !== "yearly" && "invisible"
-          ), children: opt.discountText.replace(
-            "{percent}",
-            String(Math.round(Math.abs(bOpt.discount) * 100))
-          ) });
-        })()
-      ] })
+        )
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "h-8 flex items-center justify-center mb-3", children: (() => {
+        const opt = billingSwitch.options.find((opt2) => opt2.key === billingKey);
+        const bOpt = billingOptions.find((opt2) => opt2.key === billingKey);
+        if (!(opt && bOpt && opt.discountText && bOpt.discount !== 0)) return null;
+        return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-800 font-semibold align-middle text-center inline-flex items-center justify-center whitespace-nowrap", children: opt.discountText.replace(
+          "{percent}",
+          String(Math.round(Math.abs(bOpt.discount) * 100))
+        ) });
+      })() })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: plans.map((plan, _idx) => {
       var _a2, _b2, _c;