@primestyleai/tryon 3.13.0 → 3.14.0

package/dist/react/index.js

@@ -406,6 +406,20 @@ const FALLBACK_FIELDS_MALE = [
   { key: "inseam", label: "Inseam", required: false, unit: "cm", placeholder: "e.g. 81", category: "body" },
   { key: "footLengthCm", label: "Foot length", required: false, unit: "cm", placeholder: "e.g. 27", category: "shoe" }
 ];
+const SIZING_COUNTRIES = [
+  { code: "US", label: "United States" },
+  { code: "UK", label: "United Kingdom" },
+  { code: "EU", label: "Europe (EU)" },
+  { code: "FR", label: "France" },
+  { code: "IT", label: "Italy" },
+  { code: "DE", label: "Germany" },
+  { code: "ES", label: "Spain" },
+  { code: "JP", label: "Japan" },
+  { code: "CN", label: "China" },
+  { code: "KR", label: "South Korea" },
+  { code: "AU", label: "Australia" },
+  { code: "BR", label: "Brazil" }
+];
 const STEP_LABELS = ["", "Welcome", "Size", "Your Fit", "Try On"];
 const TOTAL_STEPS = 4;
 function detectLocale() {
@@ -1322,23 +1336,21 @@ function PrimeStyleTryonInner({
           ")"
         ] }, p.id))
       ] }) }),
-      sizingMethod === "exact" && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-unit-switch", children: [
-        /* @__PURE__ */ jsxs("button", { className: `ps-tryon-unit-switch-btn${isCm ? " ps-active" : ""}`, onClick: () => {
+      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
+        /* @__PURE__ */ jsx("label", { children: t("Sizing region") }),
+        /* @__PURE__ */ jsx("select", { className: "ps-tryon-country-select", value: sizingCountry, onChange: (e) => setSizingCountry(e.target.value), children: SIZING_COUNTRIES.map((c) => /* @__PURE__ */ jsx("option", { value: c.code, children: t(c.label) }, c.code)) })
+      ] }),
+      sizingMethod === "exact" && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-unit-tabs", children: [
+        /* @__PURE__ */ jsx("button", { className: `ps-tryon-unit-tab${isCm ? " ps-active" : ""}`, onClick: () => {
           setSizingUnit("cm");
           setHeightUnit("cm");
           setWeightUnit("kg");
-        }, children: [
-          /* @__PURE__ */ jsx("span", { className: "ps-tryon-unit-switch-label", children: t("cm") }),
-          /* @__PURE__ */ jsx("span", { className: "ps-tryon-unit-switch-sub", children: "cm / kg" })
-        ] }),
-        /* @__PURE__ */ jsxs("button", { className: `ps-tryon-unit-switch-btn${!isCm ? " ps-active" : ""}`, onClick: () => {
+        }, children: "CM" }),
+        /* @__PURE__ */ jsx("button", { className: `ps-tryon-unit-tab${!isCm ? " ps-active" : ""}`, onClick: () => {
           setSizingUnit("in");
           setHeightUnit("ft");
           setWeightUnit("lbs");
-        }, children: [
-          /* @__PURE__ */ jsx("span", { className: "ps-tryon-unit-switch-label", children: t("in") }),
-          /* @__PURE__ */ jsx("span", { className: "ps-tryon-unit-switch-sub", children: "in / lbs" })
-        ] })
+        }, children: "Inches" })
       ] }),
       sizingMethod === "exact" ? /* @__PURE__ */ jsx(Fragment, { children: (() => {
         const reqFields = dynamicFields.filter((f) => f.required);
@@ -1462,13 +1474,13 @@ function PrimeStyleTryonInner({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs("button", { className: "ps-tryon-submit", onClick: () => {
+      /* @__PURE__ */ jsxs("button", { className: "ps-tryon-submit", onClick: async () => {
         if (saveToggle && saveFormName.trim()) {
           saveProfile(saveFormName.trim());
         }
         setSizingLoading(true);
-        submitSizing();
         setView("size-result");
+        await submitSizing();
       }, children: [
         t("Get My Size"),
         " ",
@@ -2093,27 +2105,21 @@ const STYLES = `
   }
   .ps-tryon-unit-btn.ps-active { background: #bb945c; color: #111; }
 
-  /* Prominent unit switch (cm/in) */
-  .ps-tryon-unit-switch {
-    display: flex; gap: 0.42vw; margin-bottom: 0.83vw;
-  }
-  .ps-tryon-unit-switch-btn {
-    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.16vw;
-    padding: 0.73vw 0.57vw;
-    border: 2px solid #333; border-radius: 0.73vw;
-    background: transparent; color: #666; cursor: pointer;
-    transition: all 0.25s ease; font-family: inherit;
-  }
-  .ps-tryon-unit-switch-btn:hover { border-color: #555; color: #999; }
-  .ps-tryon-unit-switch-btn.ps-active {
-    border-color: #bb945c; background: rgba(187,148,92,0.08); color: #bb945c;
-    box-shadow: 0 0 0 0.21vw rgba(187,148,92,0.08);
-  }
-  .ps-tryon-unit-switch-label {
-    font-size: 1.04vw; font-weight: 700; letter-spacing: 0.02em;
-  }
-  .ps-tryon-unit-switch-sub {
-    font-size: 0.52vw; font-weight: 500; opacity: 0.6;
+  /* Unit tabs (cm / inches) */
+  .ps-tryon-unit-tabs {
+    display: flex; gap: 0; background: #1a1b1a; border: 1.5px solid #333;
+    border-radius: 0.63vw; overflow: hidden; margin-bottom: 0.83vw;
+  }
+  .ps-tryon-unit-tab {
+    flex: 1; padding: 0.57vw 0.83vw; background: transparent; border: none;
+    color: #666; font-size: 0.78vw; font-weight: 700; cursor: pointer;
+    transition: all 0.2s ease; font-family: inherit; letter-spacing: 0.04em;
+    position: relative;
+  }
+  .ps-tryon-unit-tab:first-child { border-right: 1px solid #333; }
+  .ps-tryon-unit-tab:hover { color: #999; background: rgba(255,255,255,0.03); }
+  .ps-tryon-unit-tab.ps-active {
+    background: #bb945c; color: #111;
   }
   .ps-tryon-section-label { font-size: 0.57vw; font-weight: 700; color: #bb945c; text-transform: uppercase; letter-spacing: 0.08em; margin: 0.21vw 0 0.1vw; }
   .ps-tryon-optional-section { border-top: 1px solid #333; padding-top: 0.52vw; margin-top: 0.31vw; }

package/package.json

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