@windrun-huaiin/third-ui 6.2.0 → 6.2.1

package/dist/main/index.d.mts

@@ -131,4 +131,68 @@ type TagRenderers = Record<string, TagRenderer>;
 declare function createRichTextRenderer(customRenderers?: TagRenderers): (t: any, key: string) => any;
 declare const richText: (t: any, key: string) => any;
 
-export { AIPromptTextarea, AdsAlertDialog, GoToTop, Loading, NProgressBar, XButton, createRichTextRenderer, richText };
+interface FAQData {
+    title: string;
+    description: string;
+    items: Array<{
+        id: string;
+        question: string;
+        answer: string;
+    }>;
+}
+declare function FAQInteractive({ data }: {
+    data: FAQData;
+}): null;
+
+interface BillingOption {
+    key: string;
+    discount: number;
+}
+interface Prices {
+    [key: string]: number | string;
+}
+interface PricePlanAppConfig {
+    billingOptions: BillingOption[];
+    prices: Prices;
+    minPlanFeaturesCount: number;
+}
+interface PricePlanData {
+    title: string;
+    subtitle: string;
+    billingSwitch: {
+        options: Array<{
+            key: string;
+            name: string;
+            unit: string;
+            discountText: string;
+            subTitle?: string;
+        }>;
+        defaultKey: string;
+    };
+    plans: Array<any>;
+    currency: string;
+    pricePlanConfig: PricePlanAppConfig;
+}
+declare function PricePlanInteractive({ data }: {
+    data: PricePlanData;
+}): react_jsx_runtime.JSX.Element;
+
+interface GalleryItem {
+    id: string;
+    url: string;
+    altMsg: string;
+}
+interface GalleryData {
+    titleL: string;
+    eyesOn: string;
+    titleR: string;
+    description: string;
+    items: GalleryItem[];
+    defaultImgUrl: string;
+    downloadPrefix: string;
+}
+declare function GalleryInteractive({ data }: {
+    data: GalleryData;
+}): null;
+
+export { AIPromptTextarea, AdsAlertDialog, FAQInteractive, GalleryInteractive, GoToTop, Loading, NProgressBar, PricePlanInteractive, XButton, createRichTextRenderer, richText };

package/dist/main/index.d.ts

@@ -131,4 +131,68 @@ type TagRenderers = Record<string, TagRenderer>;
 declare function createRichTextRenderer(customRenderers?: TagRenderers): (t: any, key: string) => any;
 declare const richText: (t: any, key: string) => any;
 
-export { AIPromptTextarea, AdsAlertDialog, GoToTop, Loading, NProgressBar, XButton, createRichTextRenderer, richText };
+interface FAQData {
+    title: string;
+    description: string;
+    items: Array<{
+        id: string;
+        question: string;
+        answer: string;
+    }>;
+}
+declare function FAQInteractive({ data }: {
+    data: FAQData;
+}): null;
+
+interface BillingOption {
+    key: string;
+    discount: number;
+}
+interface Prices {
+    [key: string]: number | string;
+}
+interface PricePlanAppConfig {
+    billingOptions: BillingOption[];
+    prices: Prices;
+    minPlanFeaturesCount: number;
+}
+interface PricePlanData {
+    title: string;
+    subtitle: string;
+    billingSwitch: {
+        options: Array<{
+            key: string;
+            name: string;
+            unit: string;
+            discountText: string;
+            subTitle?: string;
+        }>;
+        defaultKey: string;
+    };
+    plans: Array<any>;
+    currency: string;
+    pricePlanConfig: PricePlanAppConfig;
+}
+declare function PricePlanInteractive({ data }: {
+    data: PricePlanData;
+}): react_jsx_runtime.JSX.Element;
+
+interface GalleryItem {
+    id: string;
+    url: string;
+    altMsg: string;
+}
+interface GalleryData {
+    titleL: string;
+    eyesOn: string;
+    titleR: string;
+    description: string;
+    items: GalleryItem[];
+    defaultImgUrl: string;
+    downloadPrefix: string;
+}
+declare function GalleryInteractive({ data }: {
+    data: GalleryData;
+}): null;
+
+export { AIPromptTextarea, AdsAlertDialog, FAQInteractive, GalleryInteractive, GoToTop, Loading, NProgressBar, PricePlanInteractive, XButton, createRichTextRenderer, richText };

package/dist/main/index.js

@@ -83,9 +83,12 @@ var main_exports = {};
 __export(main_exports, {
   AIPromptTextarea: () => AIPromptTextarea,
   AdsAlertDialog: () => AdsAlertDialog,
+  FAQInteractive: () => FAQInteractive,
+  GalleryInteractive: () => GalleryInteractive,
   GoToTop: () => GoToTop,
   Loading: () => Loading,
   NProgressBar: () => NProgressBar,
+  PricePlanInteractive: () => PricePlanInteractive,
   XButton: () => XButton,
   createRichTextRenderer: () => createRichTextRenderer,
   richText: () => richText
@@ -5737,13 +5740,374 @@ function createRichTextRenderer(customRenderers) {
   };
 }
 var richText = createRichTextRenderer();
+
+// src/main/faq-interactive.tsx
+var import_react41 = require("react");
+function FAQInteractive({ data }) {
+  const [openStates, setOpenStates] = (0, import_react41.useState)({});
+  (0, import_react41.useEffect)(() => {
+    data.items.forEach((item) => {
+      const toggleButton = document.querySelector(`[data-faq-toggle="${item.id}"]`);
+      const contentDiv = document.querySelector(`[data-faq-content="${item.id}"]`);
+      const iconSvg = document.querySelector(`[data-faq-icon="${item.id}"]`);
+      if (toggleButton && contentDiv && iconSvg) {
+        const handleClick = () => {
+          const isOpen = openStates[item.id] || false;
+          const newOpenState = !isOpen;
+          setOpenStates((prev) => __spreadProps(__spreadValues({}, prev), {
+            [item.id]: newOpenState
+          }));
+          if (newOpenState) {
+            contentDiv.classList.remove("hidden");
+            toggleButton.setAttribute("aria-expanded", "true");
+            iconSvg.style.transform = "rotate(90deg)";
+          } else {
+            contentDiv.classList.add("hidden");
+            toggleButton.setAttribute("aria-expanded", "false");
+            iconSvg.style.transform = "rotate(0deg)";
+          }
+        };
+        toggleButton.addEventListener("click", handleClick);
+      }
+    });
+    return () => {
+      data.items.forEach((item) => {
+        var _a;
+        const toggleButton = document.querySelector(`[data-faq-toggle="${item.id}"]`);
+        if (toggleButton) {
+          const newButton = toggleButton.cloneNode(true);
+          (_a = toggleButton.parentNode) == null ? void 0 : _a.replaceChild(newButton, toggleButton);
+        }
+      });
+    };
+  }, [data, openStates]);
+  return null;
+}
+
+// src/main/price-plan-interactive.tsx
+var import_react42 = require("react");
+var import_navigation2 = require("next/navigation");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+function PricePlanInteractive({ data }) {
+  const [billingKey, setBillingKey] = (0, import_react42.useState)(data.billingSwitch.defaultKey);
+  const [tooltip, setTooltip] = (0, import_react42.useState)({ show: false, content: "", x: 0, y: 0 });
+  const router = (0, import_navigation2.useRouter)();
+  (0, import_react42.useEffect)(() => {
+    const monthlyButton = document.querySelector('[data-billing-button="monthly"]');
+    const yearlyButton = document.querySelector('[data-billing-button="yearly"]');
+    const handleBillingSwitch = (newBillingKey) => {
+      setBillingKey(newBillingKey);
+      updatePrices(newBillingKey);
+      updateDiscountInfo(newBillingKey);
+      updateButtonStyles(newBillingKey);
+    };
+    if (monthlyButton) {
+      monthlyButton.addEventListener("click", () => handleBillingSwitch("monthly"));
+    }
+    if (yearlyButton) {
+      yearlyButton.addEventListener("click", () => handleBillingSwitch("yearly"));
+    }
+    data.plans.forEach((plan) => {
+      var _a;
+      (_a = plan.features) == null ? void 0 : _a.forEach((feature, i) => {
+        if (feature == null ? void 0 : feature.tooltip) {
+          const tooltipTrigger = document.querySelector(`[data-tooltip-trigger="${plan.key}-${i}"]`);
+          if (tooltipTrigger) {
+            const handleMouseEnter = (e) => {
+              setTooltip({
+                show: true,
+                content: feature.tooltip,
+                x: e.clientX,
+                y: e.clientY
+              });
+            };
+            const handleMouseMove = (e) => {
+              setTooltip((prev) => __spreadProps(__spreadValues({}, prev), { x: e.clientX, y: e.clientY }));
+            };
+            const handleMouseLeave = () => {
+              setTooltip((prev) => __spreadProps(__spreadValues({}, prev), { show: false }));
+            };
+            tooltipTrigger.addEventListener("mouseenter", handleMouseEnter);
+            tooltipTrigger.addEventListener("mousemove", handleMouseMove);
+            tooltipTrigger.addEventListener("mouseleave", handleMouseLeave);
+          }
+        }
+      });
+    });
+    data.plans.forEach((plan) => {
+      var _a;
+      const planButton = document.querySelector(`[data-plan-button="${plan.key}"]`);
+      if (planButton && !((_a = plan.button) == null ? void 0 : _a.disabled)) {
+        planButton.addEventListener("click", () => {
+          router.push("/");
+        });
+      }
+    });
+    return () => {
+      var _a, _b;
+      if (monthlyButton) {
+        const newButton = monthlyButton.cloneNode(true);
+        (_a = monthlyButton.parentNode) == null ? void 0 : _a.replaceChild(newButton, monthlyButton);
+      }
+      if (yearlyButton) {
+        const newButton = yearlyButton.cloneNode(true);
+        (_b = yearlyButton.parentNode) == null ? void 0 : _b.replaceChild(newButton, yearlyButton);
+      }
+      data.plans.forEach((plan) => {
+        var _a2;
+        (_a2 = plan.features) == null ? void 0 : _a2.forEach((_feature, i) => {
+          var _a3;
+          const tooltipTrigger = document.querySelector(`[data-tooltip-trigger="${plan.key}-${i}"]`);
+          if (tooltipTrigger) {
+            const newTrigger = tooltipTrigger.cloneNode(true);
+            (_a3 = tooltipTrigger.parentNode) == null ? void 0 : _a3.replaceChild(newTrigger, tooltipTrigger);
+          }
+        });
+      });
+    };
+  }, [data, router]);
+  const updatePrices = (newBillingKey) => {
+    const currentBilling = data.pricePlanConfig.billingOptions.find((opt) => opt.key === newBillingKey) || data.pricePlanConfig.billingOptions[0];
+    const currentBillingDisplay = data.billingSwitch.options.find((opt) => opt.key === newBillingKey) || data.billingSwitch.options[0];
+    data.plans.forEach((plan) => {
+      const priceContainer = document.querySelector(`[data-price-container="${plan.key}"]`);
+      const priceValue = data.pricePlanConfig.prices[plan.key];
+      if (priceContainer) {
+        const priceValueElement = document.querySelector(`[data-price-value="${plan.key}"]`);
+        const priceUnitElement = document.querySelector(`[data-price-unit="${plan.key}"]`);
+        const priceOriginalElement = document.querySelector(`[data-price-original="${plan.key}"]`);
+        const priceDiscountElement = document.querySelector(`[data-price-discount="${plan.key}"]`);
+        const priceSubtitleElement = document.querySelector(`[data-price-subtitle="${plan.key}"]`);
+        if (typeof priceValue !== "number" || isNaN(priceValue)) {
+          if (priceValueElement) priceValueElement.textContent = String(priceValue);
+          if (priceSubtitleElement) priceSubtitleElement.textContent = plan.showBillingSubTitle === false ? "" : (currentBillingDisplay == null ? void 0 : currentBillingDisplay.subTitle) || "";
+        } else {
+          const originValue = Number(priceValue);
+          const discount = currentBilling.discount;
+          const hasDiscount = discount !== 0;
+          const saleValue = originValue * (1 - discount);
+          const formatPrice = (v) => Number(v.toFixed(2)).toString();
+          const showNaN = saleValue < 0;
+          if (priceValueElement) {
+            priceValueElement.textContent = `${data.currency}${showNaN ? "NaN" : hasDiscount ? formatPrice(saleValue) : formatPrice(originValue)}`;
+          }
+          if (priceUnitElement) {
+            priceUnitElement.textContent = currentBillingDisplay.unit || "";
+          }
+          if (hasDiscount) {
+            if (priceOriginalElement) {
+              priceOriginalElement.textContent = `${data.currency}${showNaN ? "NaN" : formatPrice(originValue)}`;
+              priceOriginalElement.style.display = "inline";
+            }
+            if (priceDiscountElement && currentBillingDisplay.discountText) {
+              const discountText = currentBillingDisplay.discountText.replace("{percent}", String(Math.round(Math.abs(discount) * 100)));
+              priceDiscountElement.textContent = discountText;
+              priceDiscountElement.style.display = "inline";
+            }
+          } else {
+            if (priceOriginalElement) priceOriginalElement.style.display = "none";
+            if (priceDiscountElement) priceDiscountElement.style.display = "none";
+          }
+          if (priceSubtitleElement) {
+            priceSubtitleElement.textContent = plan.showBillingSubTitle === false ? "" : (currentBillingDisplay == null ? void 0 : currentBillingDisplay.subTitle) || "";
+          }
+        }
+      }
+    });
+  };
+  const updateDiscountInfo = (newBillingKey) => {
+    const discountInfoElement = document.querySelector("[data-discount-info]");
+    if (discountInfoElement) {
+      const opt = data.billingSwitch.options.find((opt2) => opt2.key === newBillingKey);
+      const bOpt = data.pricePlanConfig.billingOptions.find((opt2) => opt2.key === newBillingKey);
+      if (opt && bOpt && opt.discountText && bOpt.discount !== 0) {
+        const discountText = opt.discountText.replace("{percent}", String(Math.round(Math.abs(bOpt.discount) * 100)));
+        discountInfoElement.innerHTML = `
+          <span class="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">
+            ${discountText}
+          </span>
+        `;
+      } else {
+        discountInfoElement.innerHTML = "";
+      }
+    }
+  };
+  const updateButtonStyles = (newBillingKey) => {
+    const monthlyButton = document.querySelector('[data-billing-button="monthly"]');
+    const yearlyButton = document.querySelector('[data-billing-button="yearly"]');
+    if (monthlyButton) {
+      if (newBillingKey === "monthly") {
+        monthlyButton.className = cn(
+          "min-w-[120px] px-6 py-2 font-medium transition text-lg relative",
+          "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"
+        );
+      } else {
+        monthlyButton.className = cn(
+          "min-w-[120px] px-6 py-2 font-medium transition text-lg relative",
+          "text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full"
+        );
+      }
+    }
+    if (yearlyButton) {
+      if (newBillingKey === "yearly") {
+        yearlyButton.className = cn(
+          "min-w-[120px] px-6 py-2 font-medium transition text-lg relative",
+          "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"
+        );
+      } else {
+        yearlyButton.className = cn(
+          "min-w-[120px] px-6 py-2 font-medium transition text-lg relative",
+          "text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full"
+        );
+      }
+    }
+  };
+  const Tooltip = ({ show, content, x, y }) => {
+    if (!show) return null;
+    const style = {
+      position: "fixed",
+      left: Math.max(8, x),
+      top: Math.max(8, y),
+      zIndex: 9999,
+      maxWidth: 200,
+      transform: "translateY(-50%)",
+      pointerEvents: "none",
+      whiteSpace: "pre-line"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime49.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_runtime49.jsx)(Tooltip, __spreadValues({}, tooltip));
+}
+
+// src/main/gallery-interactive.tsx
+var import_react43 = require("react");
+function GalleryInteractive({ data }) {
+  const [imageErrors, setImageErrors] = (0, import_react43.useState)(/* @__PURE__ */ new Set());
+  const [downloadingItems, setDownloadingItems] = (0, import_react43.useState)(/* @__PURE__ */ new Set());
+  const cdnProxyUrl = process.env.NEXT_PUBLIC_STYLE_CDN_PROXY_URL;
+  (0, import_react43.useEffect)(() => {
+    data.items.forEach((item, index) => {
+      const downloadButton = document.querySelector(`[data-gallery-download="${item.id}"]`);
+      const imageElement = document.querySelector(`[data-gallery-image="${item.id}"]`);
+      if (downloadButton) {
+        const handleDownload = () => __async(null, null, function* () {
+          var _a;
+          if (downloadingItems.has(item.id)) {
+            return;
+          }
+          setDownloadingItems((prev) => new Set(prev).add(item.id));
+          try {
+            if (!cdnProxyUrl) {
+              throw new Error("CDN proxy URL not configured");
+            }
+            const originalUrl = new URL(item.url);
+            const filename = originalUrl.pathname.substring(1);
+            const proxyUrl = `${cdnProxyUrl}/${encodeURIComponent(filename)}`;
+            const urlExtension = (_a = item.url.split(".").pop()) == null ? void 0 : _a.toLowerCase();
+            let extension = ".webp";
+            if (urlExtension && ["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(urlExtension)) {
+              extension = `.${urlExtension}`;
+            }
+            const response = yield fetch(proxyUrl);
+            if (!response.ok) {
+              throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+            const blob = yield response.blob();
+            const blobUrl = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = blobUrl;
+            a.download = `${data.downloadPrefix}-${index + 1}${extension}`;
+            a.style.display = "none";
+            document.body.appendChild(a);
+            a.click();
+            setTimeout(() => {
+              document.body.removeChild(a);
+              URL.revokeObjectURL(blobUrl);
+            }, 100);
+          } catch (error) {
+            console.error("Download failed:", error);
+          } finally {
+            setDownloadingItems((prev) => {
+              const newSet = new Set(prev);
+              newSet.delete(item.id);
+              return newSet;
+            });
+          }
+        });
+        downloadButton.addEventListener("click", handleDownload);
+      }
+      if (imageElement) {
+        const handleImageError = () => {
+          setImageErrors((prev) => new Set(prev).add(item.id));
+          imageElement.src = data.defaultImgUrl;
+        };
+        imageElement.addEventListener("error", handleImageError);
+      }
+    });
+    const updateDownloadStates = () => {
+      data.items.forEach((item) => {
+        const downloadButton = document.querySelector(`[data-gallery-download="${item.id}"]`);
+        if (downloadButton) {
+          const isDownloading = downloadingItems.has(item.id);
+          if (isDownloading) {
+            downloadButton.disabled = true;
+            downloadButton.classList.add("bg-black/30", "text-white/50");
+            downloadButton.classList.remove("bg-black/50", "hover:bg-black/70", "text-white/80", "hover:text-white");
+            downloadButton.innerHTML = `
+              <svg class="h-5 w-5 text-white animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+            `;
+          } else {
+            downloadButton.disabled = false;
+            downloadButton.classList.remove("bg-black/30", "text-white/50");
+            downloadButton.classList.add("bg-black/50", "hover:bg-black/70", "text-white/80", "hover:text-white");
+            downloadButton.innerHTML = `
+              <svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+              </svg>
+            `;
+          }
+        }
+      });
+    };
+    updateDownloadStates();
+    return () => {
+      data.items.forEach((item) => {
+        var _a, _b;
+        const downloadButton = document.querySelector(`[data-gallery-download="${item.id}"]`);
+        const imageElement = document.querySelector(`[data-gallery-image="${item.id}"]`);
+        if (downloadButton) {
+          const newButton = downloadButton.cloneNode(true);
+          (_a = downloadButton.parentNode) == null ? void 0 : _a.replaceChild(newButton, downloadButton);
+        }
+        if (imageElement) {
+          const newImage = imageElement.cloneNode(true);
+          (_b = imageElement.parentNode) == null ? void 0 : _b.replaceChild(newImage, imageElement);
+        }
+      });
+    };
+  }, [data, downloadingItems, imageErrors, cdnProxyUrl]);
+  return null;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AIPromptTextarea,
   AdsAlertDialog,
+  FAQInteractive,
+  GalleryInteractive,
   GoToTop,
   Loading,
   NProgressBar,
+  PricePlanInteractive,
   XButton,
   createRichTextRenderer,
   richText