@primestyleai/tryon 3.6.0 → 3.6.2

package/dist/react/index.d.ts

@@ -6,6 +6,10 @@ export interface PrimeStyleTryonProps {
     buttonText?: string;
     apiUrl?: string;
     showPoweredBy?: boolean;
+    /** Show the default camera icon in the button. Defaults to true. Set to false to hide it. */
+    showIcon?: boolean;
+    /** Custom icon element to replace the default camera icon. Pass any React node (e.g. an <svg> or <img>). */
+    buttonIcon?: React.ReactNode;
     buttonStyles?: ButtonStyles;
     modalStyles?: ModalStyles;
     classNames?: PrimeStyleClassNames;

package/dist/react/index.js

@@ -94,7 +94,7 @@ function SvgIcon({ d, size = 18, strokeWidth = 2 }) {
     }
   );
 }
-function CameraIcon({ size = 18 }) {
+function CameraIcon({ size }) {
   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" }),
     /* @__PURE__ */ jsx("circle", { cx: "12", cy: "13", r: "4" })
@@ -184,6 +184,8 @@ function PrimeStyleTryonInner({
   buttonText = "Virtual Try-On",
   apiUrl,
   showPoweredBy = true,
+  showIcon = true,
+  buttonIcon,
   buttonStyles: btnS = {},
   modalStyles: mdlS = {},
   classNames: cn = {},
@@ -1299,7 +1301,7 @@ function PrimeStyleTryonInner({
   }
   return /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-root", cn.root || className), style: { ...cssVars, ...style }, "data-ps-tryon": true, children: [
     /* @__PURE__ */ jsxs("button", { onClick: handleOpen, className: cx("ps-tryon-btn", cn.button), children: [
-      /* @__PURE__ */ jsx(CameraIcon, { size: parseInt(btnS.iconSize || "18") }),
+      showIcon !== false && (buttonIcon || /* @__PURE__ */ jsx(CameraIcon, {})),
       /* @__PURE__ */ jsx("span", { children: buttonText })
     ] }),
     view !== "idle" && /* @__PURE__ */ jsx("div", { className: cx("ps-tryon-overlay", cn.overlay), onClick: (e) => {
@@ -1331,16 +1333,17 @@ const STYLES = `
   .ps-tryon-root { display: inline-block; }
 
   .ps-tryon-btn {
-    display: inline-flex; align-items: center; gap: 8px;
-    padding: var(--ps-btn-padding, 12px 24px);
+    display: inline-flex; align-items: center; gap: clamp(5px, 0.42vw, 8px);
+    padding: var(--ps-btn-padding, clamp(8px, 0.63vw, 12px) clamp(14px, 1.25vw, 24px));
     background: var(--ps-btn-bg, #bb945c); color: var(--ps-btn-color, #111211);
     font-family: var(--ps-btn-font, system-ui, -apple-system, sans-serif);
-    font-size: var(--ps-btn-font-size, 14px); font-weight: var(--ps-btn-font-weight, 600);
-    border: var(--ps-btn-border, none); border-radius: var(--ps-btn-radius, 8px);
+    font-size: var(--ps-btn-font-size, clamp(10px, 0.73vw, 14px)); font-weight: var(--ps-btn-font-weight, 600);
+    border: var(--ps-btn-border, none); border-radius: var(--ps-btn-radius, clamp(5px, 0.42vw, 8px));
     cursor: pointer; transition: all 0.2s ease;
     width: var(--ps-btn-width, auto); height: var(--ps-btn-height, auto);
     box-shadow: var(--ps-btn-shadow, none); line-height: 1; white-space: nowrap;
   }
+  .ps-tryon-btn svg { width: var(--ps-btn-icon-size, clamp(14px, 0.94vw, 18px)); height: var(--ps-btn-icon-size, clamp(14px, 0.94vw, 18px)); flex-shrink: 0; }
   .ps-tryon-btn:hover { background: var(--ps-btn-hover-bg, #a07d4e); transform: translateY(-1px); }
   .ps-tryon-btn:active { transform: translateY(0); }
 

package/package.json

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