@primestyleai/tryon 4.2.0 → 4.2.1

package/dist/react/index.js

@@ -1195,12 +1195,12 @@ function PrimeStyleTryonInner({
           /* @__PURE__ */ jsx("img", { src: productImage, alt: "Product", className: "ps-tryon-welcome-product" }),
           /* @__PURE__ */ jsx("div", { className: "ps-tryon-welcome-sparkle", children: /* @__PURE__ */ jsx(SparkleIcon, { size: 20 }) })
         ] }),
-        /* @__PURE__ */ jsx("h2", { className: "ps-tryon-welcome-title", children: t("Find Your Perfect Size") }),
-        /* @__PURE__ */ jsx("p", { className: "ps-tryon-welcome-sub", children: t("Get your size instantly, then try it on") })
+        /* @__PURE__ */ jsx("h2", { className: "ps-tryon-welcome-title", children: t("Find Your Size & See It On You") }),
+        /* @__PURE__ */ jsx("p", { className: "ps-tryon-welcome-sub", children: t("Get the perfect fit, then try it on virtually") })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "ps-tryon-features", children: [
-        { icon: /* @__PURE__ */ jsx(RulerIcon, {}), title: t("Get Your Size"), desc: t("Instant fit recommendation") },
-        { icon: /* @__PURE__ */ jsx(CameraIcon, {}), title: t("Try It On"), desc: t("See how it looks on you") }
+        { icon: /* @__PURE__ */ jsx(RulerIcon, { size: 22 }), title: t("Get Your Size"), desc: t("Instant fit recommendation") },
+        { icon: /* @__PURE__ */ jsx(CameraIcon, { size: 22 }), title: t("Try It On"), desc: t("See how it looks on you") }
       ].map((f, i) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-feature", children: [
         /* @__PURE__ */ jsx("div", { className: "ps-tryon-feature-icon", children: f.icon }),
         /* @__PURE__ */ jsx("div", { className: "ps-tryon-feature-title", children: f.title }),
@@ -2046,30 +2046,31 @@ const STYLES = `
   .ps-tryon-view-enter { animation: ps-fade-up 0.35s ease both; }
 
   /* Welcome */
-  .ps-tryon-welcome { text-align: center; }
-  .ps-tryon-welcome-hero { margin-bottom: 1.04vw; }
+  .ps-tryon-welcome { text-align: center; padding: clamp(8px, 0.5vw, 12px) 0; }
+  .ps-tryon-welcome-hero { margin-bottom: clamp(16px, 1.3vw, 24px); }
   .ps-tryon-welcome-img-wrap { position: relative; display: inline-block; }
-  .ps-tryon-welcome-product { width: 6.25vw; height: 7.3vw; object-fit: cover; border-radius: 0.73vw; border: 2px solid #333; }
-  .ps-tryon-welcome-sparkle { position: absolute; top: -0.42vw; right: -0.42vw; width: 1.46vw; height: 1.46vw; background: #bb945c; border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: ps-float 3s ease-in-out infinite; }
-  .ps-tryon-welcome-sparkle svg { stroke: #111; width: 0.73vw; height: 0.73vw; }
-  @keyframes ps-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-0.31vw); } }
-  .ps-tryon-welcome-title { font-size: 1.04vw; font-weight: 700; color: #fff; margin: 0.73vw 0 0.21vw; }
-  .ps-tryon-welcome-sub { font-size: 0.68vw; color: #999; margin: 0; }
-  .ps-tryon-features { display: flex; gap: 0.52vw; margin: 1.04vw 0; }
-  .ps-tryon-feature { flex: 1; padding: 0.73vw 0.52vw; border: 1px solid #333; border-radius: 0.63vw; text-align: center; }
-  .ps-tryon-feature-icon { margin-bottom: 0.31vw; color: #bb945c; display: flex; justify-content: center; }
-  .ps-tryon-feature-icon svg { stroke: currentColor; fill: none; }
-  .ps-tryon-feature-title { font-size: 0.63vw; font-weight: 600; color: #fff; margin-bottom: 2px; }
-  .ps-tryon-feature-desc { font-size: 0.52vw; color: #999; }
+  .ps-tryon-welcome-product { width: clamp(100px, 9vw, 160px); height: clamp(120px, 10.5vw, 190px); object-fit: cover; border-radius: clamp(10px, 0.9vw, 16px); border: 2px solid #333; box-shadow: 0 8px 30px rgba(0,0,0,0.4); }
+  .ps-tryon-welcome-sparkle { position: absolute; top: clamp(-6px, -0.5vw, -4px); right: clamp(-6px, -0.5vw, -4px); width: clamp(22px, 1.8vw, 30px); height: clamp(22px, 1.8vw, 30px); background: #bb945c; border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: ps-float 3s ease-in-out infinite; }
+  .ps-tryon-welcome-sparkle svg { stroke: #111; width: clamp(10px, 0.9vw, 14px); height: clamp(10px, 0.9vw, 14px); }
+  @keyframes ps-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
+  .ps-tryon-welcome-title { font-size: clamp(18px, 1.4vw, 24px); font-weight: 700; color: #fff; margin: clamp(12px, 1vw, 18px) 0 clamp(4px, 0.3vw, 6px); letter-spacing: -0.01em; }
+  .ps-tryon-welcome-sub { font-size: clamp(13px, 0.9vw, 16px); color: #999; margin: 0; }
+  .ps-tryon-features { display: flex; gap: clamp(8px, 0.7vw, 12px); margin: clamp(16px, 1.3vw, 24px) 0; }
+  .ps-tryon-feature { flex: 1; padding: clamp(14px, 1vw, 18px) clamp(10px, 0.7vw, 14px); border: 1px solid #333; border-radius: clamp(10px, 0.8vw, 14px); text-align: center; transition: border-color 0.2s; }
+  .ps-tryon-feature:hover { border-color: #555; }
+  .ps-tryon-feature-icon { margin-bottom: clamp(6px, 0.4vw, 8px); color: #bb945c; display: flex; justify-content: center; }
+  .ps-tryon-feature-icon svg { stroke: currentColor; fill: none; width: clamp(18px, 1.2vw, 22px); height: clamp(18px, 1.2vw, 22px); }
+  .ps-tryon-feature-title { font-size: clamp(13px, 0.85vw, 15px); font-weight: 600; color: #fff; margin-bottom: 2px; }
+  .ps-tryon-feature-desc { font-size: clamp(11px, 0.7vw, 13px); color: #999; }
   .ps-tryon-cta {
-    width: 100%; padding: 0.73vw; background: #bb945c; color: #111; border: none;
-    border-radius: 0.63vw; font-size: 0.78vw; font-weight: 700; cursor: pointer;
-    display: flex; align-items: center; justify-content: center; gap: 0.42vw; transition: all 0.2s;
+    width: 100%; padding: clamp(14px, 1vw, 18px); background: #bb945c; color: #111; border: none;
+    border-radius: clamp(10px, 0.8vw, 14px); font-size: clamp(14px, 1vw, 17px); font-weight: 700; cursor: pointer;
+    display: flex; align-items: center; justify-content: center; gap: clamp(6px, 0.5vw, 10px); transition: all 0.2s;
     font-family: var(--ps-modal-font, system-ui, sans-serif);
   }
   .ps-tryon-cta:hover { background: #a07d4e; transform: translateY(-1px); }
   .ps-tryon-cta svg { stroke: #111; }
-  .ps-tryon-welcome-note { font-size: 0.57vw; color: #666; margin-top: 0.63vw; }
+  .ps-tryon-welcome-note { font-size: clamp(11px, 0.7vw, 13px); color: #666; margin-top: clamp(10px, 0.7vw, 14px); }
 
   /* Upload */
   .ps-tryon-upload {

package/package.json

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