@primestyleai/tryon 3.10.0 → 3.11.0

package/dist/react/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useMemo, useRef, useCallback } from "react";
-import { c as createT, A as ApiClient, S as SseClient, i as isValidImageFile, a as compressImage, P as PrimeStyleError, b as SUPPORTED_LOCALES, L as LOCALE_LABELS } from "../index-71-uiSXC.js";
+import { c as createT, A as ApiClient, S as SseClient, i as isValidImageFile, a as compressImage, P as PrimeStyleError, L as LOCALE_LABELS, b as SUPPORTED_LOCALES } from "../index-71-uiSXC.js";
 const HEADER_ALIASES = {
   // ── Size label columns (skipped during field derivation) ──
   size: "__size__",
@@ -1707,6 +1707,42 @@ function PrimeStyleTryonInner({
       ] })
     ] }) });
   }
+  function LangSwitcher({ activeLocale: current, onSelect }) {
+    const [open, setOpen] = useState(false);
+    const ref = useRef(null);
+    const currentLabel = LOCALE_LABELS[current] || "English";
+    useEffect(() => {
+      if (!open) return;
+      const handler = (e) => {
+        if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+      };
+      document.addEventListener("mousedown", handler);
+      return () => document.removeEventListener("mousedown", handler);
+    }, [open]);
+    return /* @__PURE__ */ jsxs("div", { ref, className: "ps-tryon-lang-wrap", children: [
+      /* @__PURE__ */ jsxs("button", { className: `ps-tryon-lang-trigger${open ? " ps-active" : ""}`, onClick: () => setOpen(!open), children: [
+        /* @__PURE__ */ jsx(GlobeIcon, { size: 15 }),
+        /* @__PURE__ */ jsx("span", { className: "ps-tryon-lang-current", children: currentLabel }),
+        /* @__PURE__ */ jsx("span", { className: `ps-tryon-lang-arrow${open ? " ps-open" : ""}`, children: "▾" })
+      ] }),
+      open && /* @__PURE__ */ jsx("div", { className: "ps-tryon-lang-dropdown", children: /* @__PURE__ */ jsx("div", { className: "ps-tryon-lang-list", children: SUPPORTED_LOCALES.map((code) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: `ps-tryon-lang-item${code === current ? " ps-selected" : ""}`,
+          onClick: () => {
+            onSelect(code);
+            setOpen(false);
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "ps-tryon-lang-name", children: LOCALE_LABELS[code] || code }),
+            /* @__PURE__ */ jsx("span", { className: "ps-tryon-lang-code", children: code.toUpperCase() }),
+            code === current && /* @__PURE__ */ jsx("span", { className: "ps-tryon-lang-check", children: /* @__PURE__ */ jsx(CheckIcon, { size: 12 }) })
+          ]
+        },
+        code
+      )) }) })
+    ] });
+  }
   function renderBody() {
     switch (view) {
       case "welcome":
@@ -1740,18 +1776,7 @@ function PrimeStyleTryonInner({
       /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-header", cn.header), children: [
         /* @__PURE__ */ jsx("span", { className: cx("ps-tryon-title", cn.title), children: t("Virtual Try-On") }),
         /* @__PURE__ */ jsxs("div", { className: "ps-tryon-header-actions", children: [
-          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-lang-switcher", children: [
-            /* @__PURE__ */ jsx(GlobeIcon, {}),
-            /* @__PURE__ */ jsx(
-              "select",
-              {
-                value: activeLocale,
-                onChange: (e) => setActiveLocale(e.target.value),
-                className: "ps-tryon-lang-select",
-                children: SUPPORTED_LOCALES.map((code) => /* @__PURE__ */ jsx("option", { value: code, children: LOCALE_LABELS[code] || code }, code))
-              }
-            )
-          ] }),
+          /* @__PURE__ */ jsx(LangSwitcher, { activeLocale, onSelect: setActiveLocale }),
           profiles.length > 0 && /* @__PURE__ */ jsx("button", { className: "ps-tryon-header-icon", title: t("Profiles"), onClick: () => setDrawer(drawer === "profiles" ? null : "profiles"), children: /* @__PURE__ */ jsx(UserIcon, {}) }),
           history.length > 0 && /* @__PURE__ */ jsx("button", { className: "ps-tryon-header-icon", title: t("History"), onClick: () => setDrawer(drawer === "history" ? null : "history"), children: /* @__PURE__ */ jsx(ClockIcon, {}) }),
           /* @__PURE__ */ jsx("button", { onClick: handleClose, className: cx("ps-tryon-close", cn.closeButton), children: /* @__PURE__ */ jsx(XIcon, {}) })
@@ -1837,21 +1862,63 @@ const STYLES = `
   .ps-tryon-close:hover { background: rgba(255,255,255,0.1); }
 
   /* Language switcher */
-  .ps-tryon-lang-switcher {
-    position: relative; display: flex; align-items: center; gap: clamp(3px, 0.21vw, 4px);
-    padding: clamp(3px, 0.26vw, 5px) clamp(6px, 0.52vw, 10px);
-    border: 1.5px solid #333; border-radius: clamp(6px, 0.52vw, 10px);
-    background: transparent; cursor: pointer; color: #999; transition: all 0.2s;
-  }
-  .ps-tryon-lang-switcher:hover { border-color: #bb945c; color: #bb945c; }
-  .ps-tryon-lang-switcher svg { stroke: currentColor; fill: none; flex-shrink: 0; }
-  .ps-tryon-lang-select {
-    appearance: none; -webkit-appearance: none; background: transparent; border: none;
-    color: inherit; font-size: clamp(9px, 0.57vw, 11px); font-family: inherit;
-    cursor: pointer; outline: none; padding-right: clamp(8px, 0.52vw, 10px);
-    max-width: clamp(70px, 5.2vw, 100px);
-  }
-  .ps-tryon-lang-select option { background: #1a1b1a; color: #fff; }
+  .ps-tryon-lang-wrap { position: relative; z-index: 10; }
+  .ps-tryon-lang-trigger {
+    display: flex; align-items: center; gap: clamp(5px, 0.36vw, 7px);
+    padding: clamp(5px, 0.36vw, 7px) clamp(10px, 0.73vw, 14px);
+    border: 1.5px solid #333; border-radius: clamp(8px, 0.57vw, 11px);
+    background: transparent; cursor: pointer; color: #999;
+    transition: all 0.25s ease; font-family: inherit; white-space: nowrap;
+  }
+  .ps-tryon-lang-trigger:hover, .ps-tryon-lang-trigger.ps-active {
+    border-color: #bb945c; color: #bb945c; background: rgba(187,148,92,0.06);
+  }
+  .ps-tryon-lang-trigger svg { stroke: currentColor; fill: none; flex-shrink: 0; }
+  .ps-tryon-lang-current {
+    font-size: clamp(11px, 0.68vw, 13px); font-weight: 500; letter-spacing: 0.01em;
+  }
+  .ps-tryon-lang-arrow {
+    font-size: clamp(10px, 0.57vw, 12px); transition: transform 0.25s ease; display: inline-block;
+  }
+  .ps-tryon-lang-arrow.ps-open { transform: rotate(180deg); }
+
+  .ps-tryon-lang-dropdown {
+    position: absolute; top: calc(100% + clamp(6px, 0.42vw, 8px)); right: 0;
+    min-width: clamp(180px, 13vw, 240px);
+    background: #1a1b1a; border: 1.5px solid #333;
+    border-radius: clamp(10px, 0.73vw, 14px);
+    box-shadow: 0 clamp(12px, 1vw, 20px) clamp(40px, 3vw, 60px) rgba(0,0,0,0.5),
+                0 0 0 1px rgba(255,255,255,0.03);
+    overflow: hidden;
+    animation: ps-lang-open 0.2s ease both;
+  }
+  @keyframes ps-lang-open {
+    from { opacity: 0; transform: translateY(clamp(-6px, -0.42vw, -8px)) scale(0.96); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+  }
+
+  .ps-tryon-lang-list {
+    max-height: clamp(240px, 18vw, 340px); overflow-y: auto; padding: clamp(4px, 0.31vw, 6px);
+    scrollbar-width: thin; scrollbar-color: #333 transparent;
+  }
+  .ps-tryon-lang-item {
+    display: flex; align-items: center; gap: clamp(8px, 0.57vw, 12px);
+    width: 100%; padding: clamp(8px, 0.57vw, 11px) clamp(12px, 0.83vw, 16px);
+    border: none; background: transparent; color: #ccc; cursor: pointer;
+    border-radius: clamp(6px, 0.47vw, 9px); transition: all 0.15s ease;
+    font-family: inherit; text-align: left;
+  }
+  .ps-tryon-lang-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
+  .ps-tryon-lang-item.ps-selected { background: rgba(187,148,92,0.1); color: #bb945c; }
+  .ps-tryon-lang-name {
+    flex: 1; font-size: clamp(12px, 0.73vw, 14px); font-weight: 500;
+  }
+  .ps-tryon-lang-code {
+    font-size: clamp(9px, 0.52vw, 11px); color: #666; font-weight: 600;
+    letter-spacing: 0.05em; font-family: ui-monospace, monospace;
+  }
+  .ps-tryon-lang-item.ps-selected .ps-tryon-lang-code { color: #bb945c; opacity: 0.7; }
+  .ps-tryon-lang-check { color: #bb945c; display: flex; align-items: center; }
 
   /* Stepper */
   .ps-tryon-stepper { padding: clamp(12px, 1.04vw, 20px) clamp(14px, 1.25vw, 24px) clamp(7px, 0.63vw, 12px); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primestyleai/tryon",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "description": "PrimeStyle Virtual Try-On SDK — React component & Web Component",
   "type": "module",
   "main": "dist/primestyle-tryon.js",