@primestyleai/tryon 2.0.1 → 2.0.2

package/dist/react/index.js

@@ -60,6 +60,22 @@ function lbsToKg(lbs) {
 function ftInToCm(ft, inch) {
   return +(ft * 30.48 + inch * 2.54).toFixed(1);
 }
+function SvgIcon({ d, size = 18, strokeWidth = 2 }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("path", { d })
+    }
+  );
+}
 function CameraIcon({ size = 18 }) {
   return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ jsx("path", { d: "M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" }),
@@ -160,7 +176,9 @@ function PrimeStyleTryon({
   const [resultImageUrl, setResultImageUrl] = useState(null);
   const [errorMessage, setErrorMessage] = useState(null);
   const [dragOver, setDragOver] = useState(false);
-  const [countdown, setCountdown] = useState(25);
+  const countdownRef = useRef(25);
+  const countdownElRef = useRef(null);
+  const countdownCircleRef = useRef(null);
   const [sizingMethod, setSizingMethod] = useState(null);
   const [sizingResult, setSizingResult] = useState(null);
   const [sizeGuide, setSizeGuide] = useState(null);
@@ -199,15 +217,12 @@ function PrimeStyleTryon({
   }, [apiUrl]);
   useEffect(() => {
     if (view === "processing") {
-      setCountdown(25);
+      countdownRef.current = 25;
       const interval = setInterval(() => {
-        setCountdown((p) => {
-          if (p <= 1) {
-            clearInterval(interval);
-            return 0;
-          }
-          return p - 1;
-        });
+        countdownRef.current -= 1;
+        if (countdownElRef.current) countdownElRef.current.textContent = String(Math.max(countdownRef.current, 0));
+        if (countdownCircleRef.current) countdownCircleRef.current.style.strokeDashoffset = `${Math.max(countdownRef.current, 0) / 25 * 326.73}`;
+        if (countdownRef.current <= 0) clearInterval(interval);
       }, 1e3);
       return () => clearInterval(interval);
     }
@@ -709,23 +724,33 @@ function PrimeStyleTryon({
           setView("sizing-form");
         }, children: [
           /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-icon", children: /* @__PURE__ */ jsx(RulerIcon, { size: 24 }) }),
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-title", children: "Exact Measurements" }),
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-desc", children: "Enter your body measurements for the most accurate fit" }),
-          /* @__PURE__ */ jsx("span", { className: "ps-tryon-choice-badge", children: "Most Accurate" })
+          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-choice-info", children: [
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-title", children: "Enter my measurements" }),
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-desc", children: "Chest, waist, hips, shoes & more" })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "ps-tryon-choice-badge", children: "Best accuracy" })
         ] }),
         /* @__PURE__ */ jsxs("button", { className: "ps-tryon-choice-card", onClick: () => {
           setSizingMethod("quick");
           setView("sizing-form");
         }, children: [
           /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-icon", children: /* @__PURE__ */ jsx(SparkleIcon, { size: 24 }) }),
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-title", children: "Quick Estimate" }),
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-desc", children: "Just height, weight & gender — fast but less precise" })
+          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-choice-info", children: [
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-title", children: "Just height & weight" }),
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-desc", children: "Quick estimate in seconds" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("button", { className: "ps-tryon-choice-card", onClick: () => {
+          setSizingMethod(null);
+          handleSubmit();
+        }, children: [
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-icon", children: /* @__PURE__ */ jsx(SvgIcon, { d: "M13 5H1M13 9H1M13 13H1M5 17l4 4 8-8", size: 24, strokeWidth: 1.5 }) }),
+          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-choice-info", children: [
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-title", children: "Skip sizing" }),
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-desc", children: "Just show me the try-on" })
+          ] })
         ] })
-      ] }),
-      /* @__PURE__ */ jsx("button", { className: "ps-tryon-skip-btn", onClick: () => {
-        setSizingMethod(null);
-        handleSubmit();
-      }, children: "Skip sizing — just try it on" })
+      ] })
     ] });
   }
   function SizingFormView() {
@@ -744,17 +769,19 @@ function PrimeStyleTryon({
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
         /* @__PURE__ */ jsx("label", { children: "Height" }),
-        /* @__PURE__ */ jsx(UnitToggle, { options: [{ label: "cm", value: "cm" }, { label: "ft/in", value: "ft" }], value: heightUnit, onChange: setHeightUnit })
+        heightUnit === "ft" ? /* @__PURE__ */ jsxs("div", { className: "ps-tryon-height-ft", children: [
+          /* @__PURE__ */ jsx("input", { type: "number", placeholder: "5", value: formData.heightFeet || "", onChange: (e) => updateField("heightFeet", e.target.value) }),
+          /* @__PURE__ */ jsx("span", { children: "ft" }),
+          /* @__PURE__ */ jsx("input", { type: "number", placeholder: "4", value: formData.heightInches || "", onChange: (e) => updateField("heightInches", e.target.value) }),
+          /* @__PURE__ */ jsx("span", { children: "in" })
+        ] }) : /* @__PURE__ */ jsx("input", { type: "number", placeholder: "e.g. 175", value: formData.height || "", onChange: (e) => updateField("height", e.target.value) }),
+        /* @__PURE__ */ jsx(UnitToggle, { options: [{ label: "cm", value: "cm" }, { label: "ft", value: "ft" }], value: heightUnit, onChange: setHeightUnit })
       ] }),
-      heightUnit === "ft" ? /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row ps-tryon-dual-input", children: [
-        /* @__PURE__ */ jsx("input", { type: "number", placeholder: "ft", value: formData.heightFeet || "", onChange: (e) => updateField("heightFeet", e.target.value) }),
-        /* @__PURE__ */ jsx("input", { type: "number", placeholder: "in", value: formData.heightInches || "", onChange: (e) => updateField("heightInches", e.target.value) })
-      ] }) : /* @__PURE__ */ jsx(InputRow, { label: "", fieldKey: "height", placeholder: "e.g. 175", type: "number", unit: "cm" }),
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
         /* @__PURE__ */ jsx("label", { children: "Weight" }),
+        /* @__PURE__ */ jsx("input", { type: "number", placeholder: weightUnit === "lbs" ? "e.g. 170" : "e.g. 75", value: formData.weight || "", onChange: (e) => updateField("weight", e.target.value) }),
         /* @__PURE__ */ jsx(UnitToggle, { options: [{ label: "kg", value: "kg" }, { label: "lbs", value: "lbs" }], value: weightUnit, onChange: setWeightUnit })
       ] }),
-      /* @__PURE__ */ jsx(InputRow, { label: "", fieldKey: "weight", placeholder: weightUnit === "lbs" ? "e.g. 170" : "e.g. 75", type: "number", unit: weightUnit }),
       sizingMethod === "exact" && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
           /* @__PURE__ */ jsx("label", { children: "Measurements" }),
@@ -799,15 +826,15 @@ function PrimeStyleTryon({
   }
   function ProcessingView() {
     return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-processing", children: [
-      countdown > 0 ? /* @__PURE__ */ jsxs("div", { className: "ps-tryon-countdown-ring", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-countdown-ring", children: [
         /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 120 120", children: [
           /* @__PURE__ */ jsx("circle", { className: "ps-tryon-countdown-track", cx: "60", cy: "60", r: "52" }),
-          /* @__PURE__ */ jsx("circle", { className: "ps-tryon-countdown-progress", cx: "60", cy: "60", r: "52", style: { strokeDashoffset: `${countdown / 25 * 326.73}` } })
+          /* @__PURE__ */ jsx("circle", { ref: countdownCircleRef, className: "ps-tryon-countdown-progress", cx: "60", cy: "60", r: "52", style: { strokeDashoffset: `${25 / 25 * 326.73}` } })
         ] }),
-        /* @__PURE__ */ jsx("span", { className: "ps-tryon-countdown-number", children: countdown })
-      ] }) : /* @__PURE__ */ jsx("div", { className: "ps-tryon-done-pulse", children: /* @__PURE__ */ jsx("div", { className: cx("ps-tryon-spinner", cn.spinner) }) }),
-      /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-processing-text", cn.processingText), children: countdown > 0 ? "Generating your try-on..." : "Almost there..." }),
-      /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-processing-sub", cn.processingSubText), children: countdown > 0 ? "This usually takes 15-25 seconds" : "Finishing up your look" })
+        /* @__PURE__ */ jsx("span", { ref: countdownElRef, className: "ps-tryon-countdown-number", children: "25" })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-processing-text", cn.processingText), children: "Generating your try-on..." }),
+      /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-processing-sub", cn.processingSubText), children: "This usually takes 15-25 seconds" })
     ] });
   }
   function ResultView() {
@@ -851,14 +878,17 @@ function PrimeStyleTryon({
           /* @__PURE__ */ jsx("button", { onClick: handleRetry, className: cx("ps-tryon-btn-retry", cn.retryButton), children: "Try Another" })
         ] }),
         sizingMethod && !profileSaved && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-save-prompt", children: [
-          /* @__PURE__ */ jsx("input", { type: "text", placeholder: "Profile name (e.g. Me)", value: profileName, onChange: (e) => setProfileName(e.target.value) }),
-          /* @__PURE__ */ jsx("button", { onClick: () => {
-            if (profileName.trim()) saveProfile(profileName.trim());
-          }, children: "Save" })
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-save-label", children: "Save your measurements for next time" }),
+          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-save-row", children: [
+            /* @__PURE__ */ jsx("input", { type: "text", placeholder: "Name this profile (e.g. John, Sarah)", value: profileName, onChange: (e) => setProfileName(e.target.value) }),
+            /* @__PURE__ */ jsx("button", { onClick: () => {
+              if (profileName.trim()) saveProfile(profileName.trim());
+            }, children: "Save" })
+          ] })
         ] }),
         profileSaved && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-save-done", children: [
           /* @__PURE__ */ jsx(CheckIcon, {}),
-          " Profile saved"
+          " Measurements saved to profile"
         ] })
       ] })
     ] });
@@ -1168,28 +1198,25 @@ const STYLES = `
 
   /* Sizing choice */
   .ps-tryon-sizing-choice { text-align: center; }
-  .ps-tryon-section-title { font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 20px; }
-  .ps-tryon-choice-cards { display: flex; flex-direction: column; gap: 12px; }
+  .ps-tryon-section-title { font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 16px; }
+  .ps-tryon-choice-cards { display: flex; flex-direction: column; gap: 10px; }
   .ps-tryon-choice-card {
-    padding: 20px; border: 1.5px solid #333; border-radius: 14px;
+    display: flex; align-items: center; gap: 14px; padding: 16px;
+    border: 1.5px solid #333; border-radius: 12px;
     background: #1a1b1a; cursor: pointer; transition: all 0.25s; text-align: left;
-    display: block; width: 100%; font-family: inherit;
+    width: 100%; font-family: inherit; position: relative; overflow: hidden;
   }
-  .ps-tryon-choice-card:hover { border-color: #bb945c; box-shadow: 0 4px 20px rgba(187,148,92,0.08); }
-  .ps-tryon-choice-icon { color: #bb945c; margin-bottom: 8px; }
+  .ps-tryon-choice-card:hover { border-color: #bb945c; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(187,148,92,0.08); }
+  .ps-tryon-choice-card:hover::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #bb945c; }
+  .ps-tryon-choice-icon { color: #bb945c; flex-shrink: 0; }
   .ps-tryon-choice-icon svg { stroke: currentColor; fill: none; }
-  .ps-tryon-choice-title { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 4px; }
-  .ps-tryon-choice-desc { font-size: 12px; color: #999; }
+  .ps-tryon-choice-info { flex: 1; min-width: 0; }
+  .ps-tryon-choice-title { font-size: 14px; font-weight: 600; color: #fff; }
+  .ps-tryon-choice-desc { font-size: 12px; color: #999; margin-top: 2px; }
   .ps-tryon-choice-badge {
-    display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 20px;
-    background: rgba(187,148,92,0.12); color: #bb945c; font-size: 11px; font-weight: 600;
-  }
-  .ps-tryon-skip-btn {
-    margin-top: 16px; padding: 10px; background: none; border: 1px solid #333;
-    border-radius: 10px; color: #999; font-size: 13px; cursor: pointer; transition: all 0.2s;
-    width: 100%; font-family: inherit;
+    padding: 3px 10px; border-radius: 20px; flex-shrink: 0;
+    background: rgba(187,148,92,0.12); color: #bb945c; font-size: 10px; font-weight: 600;
   }
-  .ps-tryon-skip-btn:hover { border-color: #666; color: #ccc; }
 
   /* Sizing form */
   .ps-tryon-sizing-form { display: flex; flex-direction: column; gap: 12px; }
@@ -1204,8 +1231,11 @@ const STYLES = `
   .ps-tryon-input-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
   .ps-tryon-input-row input:focus { border-color: #bb945c; }
   .ps-tryon-input-unit { font-size: 12px; color: #666; flex-shrink: 0; }
-  .ps-tryon-dual-input { gap: 8px; }
-  .ps-tryon-dual-input input { width: 50%; }
+  .ps-tryon-height-ft { display: flex; align-items: center; gap: 6px; flex: 1; }
+  .ps-tryon-height-ft input { width: 60px; padding: 10px 10px; border: 1.5px solid #333; border-radius: 10px; background: #1a1b1a; color: #fff; font-size: 14px; font-family: inherit; outline: none; text-align: center; -moz-appearance: textfield; }
+  .ps-tryon-height-ft input::-webkit-outer-spin-button, .ps-tryon-height-ft input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+  .ps-tryon-height-ft input:focus { border-color: #bb945c; }
+  .ps-tryon-height-ft span { font-size: 12px; color: #666; }
   .ps-tryon-country-select {
     flex: 1; padding: 10px 36px 10px 14px; border: 1.5px solid #333; border-radius: 10px;
     background: #1a1b1a; color: #fff; font-size: 13px; font-family: inherit;
@@ -1280,17 +1310,19 @@ const STYLES = `
   .ps-fit-good { color: #4ade80; } .ps-fit-tight { color: #f59e0b; } .ps-fit-loose { color: #60a5fa; }
 
   /* Save profile prompt */
-  .ps-tryon-save-prompt { display: flex; gap: 8px; margin-top: 14px; }
-  .ps-tryon-save-prompt input {
+  .ps-tryon-save-prompt { margin-top: 14px; padding: 14px; border: 1px solid #333; border-radius: 12px; background: #1a1b1a; }
+  .ps-tryon-save-label { font-size: 12px; color: #999; margin-bottom: 10px; }
+  .ps-tryon-save-row { display: flex; gap: 8px; }
+  .ps-tryon-save-row input {
     flex: 1; padding: 10px 14px; border: 1.5px solid #333; border-radius: 10px;
-    background: #1a1b1a; color: #fff; font-size: 13px; font-family: inherit; outline: none;
+    background: #111211; color: #fff; font-size: 13px; font-family: inherit; outline: none;
   }
-  .ps-tryon-save-prompt input:focus { border-color: #bb945c; }
-  .ps-tryon-save-prompt button {
+  .ps-tryon-save-row input:focus { border-color: #bb945c; }
+  .ps-tryon-save-row button {
     padding: 10px 20px; background: #bb945c; color: #111; border: none; border-radius: 10px;
     font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; font-family: inherit;
   }
-  .ps-tryon-save-prompt button:hover { opacity: 0.9; }
+  .ps-tryon-save-row button:hover { opacity: 0.9; }
   .ps-tryon-save-done { font-size: 12px; color: #4ade80; margin-top: 10px; display: flex; align-items: center; gap: 6px; justify-content: center; }
   .ps-tryon-save-done svg { stroke: currentColor; }
 

package/package.json

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