@primestyleai/tryon 5.8.40 → 5.8.42

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/react/index.js +205 -37
  2. package/dist/storefront/primestyle-tryon.js +205 -37
  3. package/package.json +1 -1
package/dist/react/index.js CHANGED
@@ -10365,7 +10365,7 @@ function CreateProfileWizard({ onSave, onCancel, onPhotoPreview, onEstimate, t }
10365
10365
  setAgeConfirmed(true);
10366
10366
  setError("");
10367
10367
  },
10368
- children: t("Yes, 18 or older")
10368
+ children: t("Yes")
10369
10369
  }
10370
10370
  ),
10371
10371
  /* @__PURE__ */ jsx(
@@ -10374,7 +10374,7 @@ function CreateProfileWizard({ onSave, onCancel, onPhotoPreview, onEstimate, t }
10374
10374
  type: "button",
10375
10375
  className: "ps-cpw-age-gate-btn ps-cpw-age-gate-btn-secondary",
10376
10376
  onClick: () => setAgeConfirmed(false),
10377
- children: t("No, under 18")
10377
+ children: t("No")
10378
10378
  }
10379
10379
  )
10380
10380
  ] })
@@ -11324,8 +11324,8 @@ function PhotoStepMobile({
11324
11324
  /* @__PURE__ */ jsx("div", { className: "ps-pm-age-gate-eyebrow", children: t("AGE VERIFICATION") }),
11325
11325
  /* @__PURE__ */ jsx("div", { className: "ps-pm-age-gate-question", children: t("Is the person in this photo 18 years or older?") }),
11326
11326
  /* @__PURE__ */ jsxs("div", { className: "ps-pm-age-gate-actions", children: [
11327
- /* @__PURE__ */ jsx("button", { type: "button", className: "ps-pm-age-gate-btn ps-pm-age-gate-btn-primary", onClick: () => setAgeConfirmed(true), children: t("Yes, 18 or older") }),
11328
- /* @__PURE__ */ jsx("button", { type: "button", className: "ps-pm-age-gate-btn ps-pm-age-gate-btn-secondary", onClick: () => setAgeConfirmed(false), children: t("No, under 18") })
11327
+ /* @__PURE__ */ jsx("button", { type: "button", className: "ps-pm-age-gate-btn ps-pm-age-gate-btn-primary", onClick: () => setAgeConfirmed(true), children: t("Yes") }),
11328
+ /* @__PURE__ */ jsx("button", { type: "button", className: "ps-pm-age-gate-btn ps-pm-age-gate-btn-secondary", onClick: () => setAgeConfirmed(false), children: t("No") })
11329
11329
  ] })
11330
11330
  ] }) }),
11331
11331
  ageConfirmed === false && /* @__PURE__ */ jsx("div", { className: "ps-pm-age-gate", role: "alert", children: /* @__PURE__ */ jsxs("div", { className: "ps-pm-age-gate-card", children: [
@@ -11588,6 +11588,7 @@ function BodyProfileView({
11588
11588
  const [photoBase64, setPhotoBase64] = useState(null);
11589
11589
  const [photoProcessing, setPhotoProcessing] = useState(false);
11590
11590
  const fileInputRef = useRef(null);
11591
+ const [ageConfirmed, setAgeConfirmed] = useState(null);
11591
11592
  const [photoStepHeight, setPhotoStepHeight] = useState(() => {
11592
11593
  if (seedTotalIn != null) return String(Math.round(seedTotalIn * 2.54));
11593
11594
  return seedHeightCm;
@@ -11612,6 +11613,10 @@ function BodyProfileView({
11612
11613
  const handlePhotoSelect = useCallback(async (e) => {
11613
11614
  const file = e.target.files?.[0];
11614
11615
  if (!file) return;
11616
+ if (ageConfirmed !== true) {
11617
+ setError(t("Please confirm that the person in the photo is 18 or older before uploading."));
11618
+ return;
11619
+ }
11615
11620
  if (!file.type.startsWith("image/")) {
11616
11621
  setError(t("Please upload an image file"));
11617
11622
  return;
@@ -11634,7 +11639,7 @@ function BodyProfileView({
11634
11639
  } finally {
11635
11640
  setPhotoProcessing(false);
11636
11641
  }
11637
- }, [t]);
11642
+ }, [t, ageConfirmed]);
11638
11643
  const handleRemovePhoto = useCallback(() => {
11639
11644
  if (photoPreview) URL.revokeObjectURL(photoPreview);
11640
11645
  setPhotoFile(null);
@@ -11800,38 +11805,186 @@ function BodyProfileView({
11800
11805
  }
11801
11806
  return /* @__PURE__ */ jsxs("div", { className: "ps-bp-wrapper", children: [
11802
11807
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "1.2vw", padding: "1.5vw", width: "100%", height: "100%", minHeight: "20vw", alignItems: "stretch" }, children: [
11803
- /* @__PURE__ */ jsx(
11804
- "div",
11805
- {
11806
- onClick: () => !photoPreview && fileInputRef.current?.click(),
11807
- style: {
11808
- flex: 1,
11809
- display: "flex",
11810
- flexDirection: "column",
11811
- alignItems: "center",
11812
- justifyContent: "center",
11813
- border: photoPreview ? "2px solid var(--ps-accent)" : "2px dashed var(--ps-border-color)",
11814
- borderRadius: "0.5vw",
11815
- cursor: photoPreview ? "default" : "pointer",
11816
- position: "relative",
11817
- background: "var(--ps-bg-secondary)",
11818
- transition: "border-color 0.2s",
11819
- overflow: "hidden"
11820
- },
11821
- children: photoPreview ? /* @__PURE__ */ jsxs(Fragment, { children: [
11822
- /* @__PURE__ */ jsx("img", { src: photoPreview, alt: "preview", style: { width: "100%", height: "100%", objectFit: "contain" } }),
11823
- /* @__PURE__ */ jsx("button", { onClick: (e) => {
11824
- e.stopPropagation();
11825
- handleRemovePhoto();
11826
- }, style: { position: "absolute", top: "0.5vw", right: "0.5vw", width: "1.4vw", height: "1.4vw", borderRadius: "50%", background: "rgba(0,0,0,0.6)", border: "none", color: "#fff", fontSize: "0.7vw", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }, children: "×" })
11827
- ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
11828
- /* @__PURE__ */ jsx(UploadIcon, { size: 32 }),
11829
- /* @__PURE__ */ jsx("span", { style: { fontSize: "0.85vw", fontWeight: 600, color: "var(--ps-text-primary)", marginTop: "0.5vw" }, children: t("Upload your photo") }),
11830
- /* @__PURE__ */ jsx("span", { style: { fontSize: "0.6vw", color: "var(--ps-text-muted)", marginTop: "0.2vw" }, children: t("Click or drag a full-body photo") }),
11831
- /* @__PURE__ */ jsx("span", { style: { fontSize: "0.5vw", color: "var(--ps-text-dim)", marginTop: "0.4vw" }, children: "JPEG, PNG (max 10MB)" })
11832
- ] })
11833
- }
11834
- ),
11808
+ /* @__PURE__ */ jsxs("div", { style: { flex: 1, position: "relative", display: "flex" }, children: [
11809
+ /* @__PURE__ */ jsx(
11810
+ "div",
11811
+ {
11812
+ onClick: () => {
11813
+ if (!photoPreview && ageConfirmed === true) fileInputRef.current?.click();
11814
+ },
11815
+ style: {
11816
+ flex: 1,
11817
+ display: "flex",
11818
+ flexDirection: "column",
11819
+ alignItems: "center",
11820
+ justifyContent: "center",
11821
+ border: photoPreview ? "2px solid var(--ps-accent)" : "2px dashed var(--ps-border-color)",
11822
+ borderRadius: "0.5vw",
11823
+ cursor: photoPreview ? "default" : ageConfirmed === true ? "pointer" : "not-allowed",
11824
+ position: "relative",
11825
+ background: "var(--ps-bg-secondary)",
11826
+ transition: "border-color 0.2s, filter 0.25s",
11827
+ overflow: "hidden",
11828
+ filter: !photoPreview && ageConfirmed !== true ? "blur(6px) saturate(0.7)" : void 0,
11829
+ pointerEvents: !photoPreview && ageConfirmed !== true ? "none" : void 0,
11830
+ userSelect: !photoPreview && ageConfirmed !== true ? "none" : void 0
11831
+ },
11832
+ "aria-hidden": !photoPreview && ageConfirmed !== true,
11833
+ children: photoPreview ? /* @__PURE__ */ jsxs(Fragment, { children: [
11834
+ /* @__PURE__ */ jsx("img", { src: photoPreview, alt: "preview", style: { width: "100%", height: "100%", objectFit: "contain" } }),
11835
+ /* @__PURE__ */ jsx("button", { onClick: (e) => {
11836
+ e.stopPropagation();
11837
+ handleRemovePhoto();
11838
+ }, style: { position: "absolute", top: "0.5vw", right: "0.5vw", width: "1.4vw", height: "1.4vw", borderRadius: "50%", background: "rgba(0,0,0,0.6)", border: "none", color: "#fff", fontSize: "0.7vw", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }, children: "×" })
11839
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
11840
+ /* @__PURE__ */ jsx(UploadIcon, { size: 32 }),
11841
+ /* @__PURE__ */ jsx("span", { style: { fontSize: "0.85vw", fontWeight: 600, color: "var(--ps-text-primary)", marginTop: "0.5vw" }, children: t("Upload your photo") }),
11842
+ /* @__PURE__ */ jsx("span", { style: { fontSize: "0.6vw", color: "var(--ps-text-muted)", marginTop: "0.2vw" }, children: t("Click or drag a full-body photo") }),
11843
+ /* @__PURE__ */ jsx("span", { style: { fontSize: "0.5vw", color: "var(--ps-text-dim)", marginTop: "0.4vw" }, children: "JPEG, PNG (max 10MB)" })
11844
+ ] })
11845
+ }
11846
+ ),
11847
+ !photoPreview && ageConfirmed === null && /* @__PURE__ */ jsx(
11848
+ "div",
11849
+ {
11850
+ role: "dialog",
11851
+ "aria-labelledby": "ps-bp-age-q",
11852
+ style: {
11853
+ position: "absolute",
11854
+ inset: 0,
11855
+ display: "flex",
11856
+ alignItems: "center",
11857
+ justifyContent: "center",
11858
+ padding: "1vw",
11859
+ background: "rgba(255,255,255,0.55)",
11860
+ backdropFilter: "blur(8px)",
11861
+ WebkitBackdropFilter: "blur(8px)",
11862
+ borderRadius: "0.5vw",
11863
+ zIndex: 2,
11864
+ animation: "ps-cpw-age-gate-in 0.28s ease-out both"
11865
+ },
11866
+ children: /* @__PURE__ */ jsxs("div", { style: {
11867
+ width: "100%",
11868
+ maxWidth: "min(420px, 22vw)",
11869
+ padding: "1.4vw 1.6vw",
11870
+ background: "#FFFFFF",
11871
+ border: "1px solid var(--ps-border-subtle)",
11872
+ borderRadius: "0.9vw",
11873
+ boxShadow: "0 20px 40px -12px rgba(17,24,39,0.25), 0 8px 16px -8px rgba(17,24,39,0.15)",
11874
+ display: "flex",
11875
+ flexDirection: "column",
11876
+ alignItems: "center",
11877
+ textAlign: "center",
11878
+ gap: "0.75vw"
11879
+ }, children: [
11880
+ /* @__PURE__ */ jsx("div", { style: { fontSize: "0.62vw", fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ps-accent)" }, children: t("AGE VERIFICATION") }),
11881
+ /* @__PURE__ */ jsx("div", { id: "ps-bp-age-q", style: { fontSize: "0.95vw", fontWeight: 600, lineHeight: 1.35, color: "var(--ps-text-primary)" }, children: t("Is the person in this photo 18 years or older?") }),
11882
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.65vw", width: "100%", marginTop: "0.4vw" }, children: [
11883
+ /* @__PURE__ */ jsx(
11884
+ "button",
11885
+ {
11886
+ type: "button",
11887
+ onClick: () => {
11888
+ setAgeConfirmed(true);
11889
+ setError("");
11890
+ },
11891
+ style: {
11892
+ flex: 1,
11893
+ padding: "0.75vw 1vw",
11894
+ borderRadius: "999px",
11895
+ background: "var(--ps-accent)",
11896
+ color: "#FFFFFF",
11897
+ border: "1.5px solid var(--ps-accent)",
11898
+ fontFamily: "inherit",
11899
+ fontSize: "0.78vw",
11900
+ fontWeight: 700,
11901
+ cursor: "pointer",
11902
+ transition: "transform 0.18s, background 0.18s"
11903
+ },
11904
+ children: t("Yes")
11905
+ }
11906
+ ),
11907
+ /* @__PURE__ */ jsx(
11908
+ "button",
11909
+ {
11910
+ type: "button",
11911
+ onClick: () => setAgeConfirmed(false),
11912
+ style: {
11913
+ flex: 1,
11914
+ padding: "0.75vw 1vw",
11915
+ borderRadius: "999px",
11916
+ background: "transparent",
11917
+ color: "var(--ps-text-primary)",
11918
+ border: "1.5px solid var(--ps-border-color)",
11919
+ fontFamily: "inherit",
11920
+ fontSize: "0.78vw",
11921
+ fontWeight: 700,
11922
+ cursor: "pointer",
11923
+ transition: "background 0.18s, border-color 0.18s"
11924
+ },
11925
+ children: t("No")
11926
+ }
11927
+ )
11928
+ ] })
11929
+ ] })
11930
+ }
11931
+ ),
11932
+ !photoPreview && ageConfirmed === false && /* @__PURE__ */ jsx(
11933
+ "div",
11934
+ {
11935
+ role: "alert",
11936
+ style: {
11937
+ position: "absolute",
11938
+ inset: 0,
11939
+ display: "flex",
11940
+ alignItems: "center",
11941
+ justifyContent: "center",
11942
+ padding: "1vw",
11943
+ background: "rgba(255,255,255,0.55)",
11944
+ backdropFilter: "blur(8px)",
11945
+ WebkitBackdropFilter: "blur(8px)",
11946
+ borderRadius: "0.5vw",
11947
+ zIndex: 2
11948
+ },
11949
+ children: /* @__PURE__ */ jsxs("div", { style: {
11950
+ width: "100%",
11951
+ maxWidth: "min(420px, 22vw)",
11952
+ padding: "1.4vw 1.6vw",
11953
+ background: "#FFFFFF",
11954
+ border: "1px solid rgba(192,38,38,0.35)",
11955
+ borderRadius: "0.9vw",
11956
+ boxShadow: "0 20px 40px -12px rgba(17,24,39,0.25)",
11957
+ display: "flex",
11958
+ flexDirection: "column",
11959
+ alignItems: "center",
11960
+ textAlign: "center",
11961
+ gap: "0.75vw"
11962
+ }, children: [
11963
+ /* @__PURE__ */ jsx("div", { style: { fontSize: "0.62vw", fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: "#C02626" }, children: t("UPLOAD NOT ALLOWED") }),
11964
+ /* @__PURE__ */ jsx("div", { style: { fontSize: "0.95vw", fontWeight: 600, lineHeight: 1.35, color: "var(--ps-text-primary)" }, children: t("For your safety, we cannot process photos of people under 18.") }),
11965
+ /* @__PURE__ */ jsx(
11966
+ "button",
11967
+ {
11968
+ type: "button",
11969
+ onClick: () => setAgeConfirmed(null),
11970
+ style: {
11971
+ padding: "0.75vw 1.4vw",
11972
+ borderRadius: "999px",
11973
+ background: "transparent",
11974
+ color: "var(--ps-text-primary)",
11975
+ border: "1.5px solid var(--ps-border-color)",
11976
+ fontFamily: "inherit",
11977
+ fontSize: "0.78vw",
11978
+ fontWeight: 700,
11979
+ cursor: "pointer"
11980
+ },
11981
+ children: t("Go back")
11982
+ }
11983
+ )
11984
+ ] })
11985
+ }
11986
+ )
11987
+ ] }),
11835
11988
  /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "0.6vw", justifyContent: "center" }, children: [
11836
11989
  /* @__PURE__ */ jsx("div", { style: { fontSize: "0.85vw", fontWeight: 700, color: "var(--ps-text-primary)", marginBottom: "0.3vw" }, children: t("How to take the best photo") }),
11837
11990
  /* @__PURE__ */ jsxs("div", { style: { background: "#ddfbe7", borderRadius: "0.5vw", padding: "0.6vw 0.8vw" }, children: [
@@ -11874,6 +12027,21 @@ function BodyProfileView({
11874
12027
  /* @__PURE__ */ jsx("span", { style: { color: "#3267c3", fontSize: "0.65vw", fontWeight: 600 }, children: t("Quick Tip") })
11875
12028
  ] }),
11876
12029
  /* @__PURE__ */ jsx("div", { style: { fontSize: "0.58vw", color: "var(--ps-text-primary)", lineHeight: 1.6 }, children: t("The simpler your photo is, the more accurate your virtual try-on results will be.") })
12030
+ ] }),
12031
+ /* @__PURE__ */ jsxs("div", { style: {
12032
+ background: "rgba(33, 84, 239, 0.04)",
12033
+ border: "1px solid rgba(33, 84, 239, 0.16)",
12034
+ borderRadius: "0.5vw",
12035
+ padding: "0.6vw 0.8vw",
12036
+ display: "flex",
12037
+ flexDirection: "column",
12038
+ gap: "0.3vw"
12039
+ }, children: [
12040
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.35vw" }, children: [
12041
+ /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "0.75vw", height: "0.75vw", fill: "none", stroke: "#2154ef", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) }),
12042
+ /* @__PURE__ */ jsx("span", { style: { color: "#2154ef", fontSize: "0.62vw", fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase" }, children: t("Legal Notice") })
12043
+ ] }),
12044
+ /* @__PURE__ */ jsx("div", { style: { fontSize: "0.58vw", color: "var(--ps-text-secondary)", lineHeight: 1.55 }, children: t("Your image will be used to generate a virtual try-on preview showing how selected items may look and fit. Images are processed securely and are not stored after generation.") })
11877
12045
  ] })
11878
12046
  ] })
11879
12047
  ] }),
package/dist/storefront/primestyle-tryon.js CHANGED
@@ -19789,7 +19789,7 @@ function CreateProfileWizard({ onSave, onCancel, onPhotoPreview, onEstimate, t:
19789
19789
  setAgeConfirmed(true);
19790
19790
  setError("");
19791
19791
  },
19792
- children: t2("Yes, 18 or older")
19792
+ children: t2("Yes")
19793
19793
  }
19794
19794
  ),
19795
19795
  /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -19798,7 +19798,7 @@ function CreateProfileWizard({ onSave, onCancel, onPhotoPreview, onEstimate, t:
19798
19798
  type: "button",
19799
19799
  className: "ps-cpw-age-gate-btn ps-cpw-age-gate-btn-secondary",
19800
19800
  onClick: () => setAgeConfirmed(false),
19801
- children: t2("No, under 18")
19801
+ children: t2("No")
19802
19802
  }
19803
19803
  )
19804
19804
  ] })
@@ -20748,8 +20748,8 @@ function PhotoStepMobile({
20748
20748
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-pm-age-gate-eyebrow", children: t2("AGE VERIFICATION") }),
20749
20749
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-pm-age-gate-question", children: t2("Is the person in this photo 18 years or older?") }),
20750
20750
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-pm-age-gate-actions", children: [
20751
- /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-pm-age-gate-btn ps-pm-age-gate-btn-primary", onClick: () => setAgeConfirmed(true), children: t2("Yes, 18 or older") }),
20752
- /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-pm-age-gate-btn ps-pm-age-gate-btn-secondary", onClick: () => setAgeConfirmed(false), children: t2("No, under 18") })
20751
+ /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-pm-age-gate-btn ps-pm-age-gate-btn-primary", onClick: () => setAgeConfirmed(true), children: t2("Yes") }),
20752
+ /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-pm-age-gate-btn ps-pm-age-gate-btn-secondary", onClick: () => setAgeConfirmed(false), children: t2("No") })
20753
20753
  ] })
20754
20754
  ] }) }),
20755
20755
  ageConfirmed === false && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-pm-age-gate", role: "alert", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-pm-age-gate-card", children: [
@@ -21012,6 +21012,7 @@ function BodyProfileView({
21012
21012
  const [photoBase64, setPhotoBase64] = reactExports.useState(null);
21013
21013
  const [photoProcessing, setPhotoProcessing] = reactExports.useState(false);
21014
21014
  const fileInputRef = reactExports.useRef(null);
21015
+ const [ageConfirmed, setAgeConfirmed] = reactExports.useState(null);
21015
21016
  const [photoStepHeight, setPhotoStepHeight] = reactExports.useState(() => {
21016
21017
  if (seedTotalIn != null) return String(Math.round(seedTotalIn * 2.54));
21017
21018
  return seedHeightCm;
@@ -21036,6 +21037,10 @@ function BodyProfileView({
21036
21037
  const handlePhotoSelect = reactExports.useCallback(async (e) => {
21037
21038
  const file = e.target.files?.[0];
21038
21039
  if (!file) return;
21040
+ if (ageConfirmed !== true) {
21041
+ setError(t2("Please confirm that the person in the photo is 18 or older before uploading."));
21042
+ return;
21043
+ }
21039
21044
  if (!file.type.startsWith("image/")) {
21040
21045
  setError(t2("Please upload an image file"));
21041
21046
  return;
@@ -21058,7 +21063,7 @@ function BodyProfileView({
21058
21063
  } finally {
21059
21064
  setPhotoProcessing(false);
21060
21065
  }
21061
- }, [t2]);
21066
+ }, [t2, ageConfirmed]);
21062
21067
  const handleRemovePhoto = reactExports.useCallback(() => {
21063
21068
  if (photoPreview) URL.revokeObjectURL(photoPreview);
21064
21069
  setPhotoFile(null);
@@ -21224,38 +21229,186 @@ function BodyProfileView({
21224
21229
  }
21225
21230
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-bp-wrapper", children: [
21226
21231
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", gap: "1.2vw", padding: "1.5vw", width: "100%", height: "100%", minHeight: "20vw", alignItems: "stretch" }, children: [
21227
- /* @__PURE__ */ jsxRuntimeExports.jsx(
21228
- "div",
21229
- {
21230
- onClick: () => !photoPreview && fileInputRef.current?.click(),
21231
- style: {
21232
- flex: 1,
21233
- display: "flex",
21234
- flexDirection: "column",
21235
- alignItems: "center",
21236
- justifyContent: "center",
21237
- border: photoPreview ? "2px solid var(--ps-accent)" : "2px dashed var(--ps-border-color)",
21238
- borderRadius: "0.5vw",
21239
- cursor: photoPreview ? "default" : "pointer",
21240
- position: "relative",
21241
- background: "var(--ps-bg-secondary)",
21242
- transition: "border-color 0.2s",
21243
- overflow: "hidden"
21244
- },
21245
- children: photoPreview ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
21246
- /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: photoPreview, alt: "preview", style: { width: "100%", height: "100%", objectFit: "contain" } }),
21247
- /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: (e) => {
21248
- e.stopPropagation();
21249
- handleRemovePhoto();
21250
- }, style: { position: "absolute", top: "0.5vw", right: "0.5vw", width: "1.4vw", height: "1.4vw", borderRadius: "50%", background: "rgba(0,0,0,0.6)", border: "none", color: "#fff", fontSize: "0.7vw", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }, children: "×" })
21251
- ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
21252
- /* @__PURE__ */ jsxRuntimeExports.jsx(UploadIcon, { size: 32 }),
21253
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontSize: "0.85vw", fontWeight: 600, color: "var(--ps-text-primary)", marginTop: "0.5vw" }, children: t2("Upload your photo") }),
21254
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontSize: "0.6vw", color: "var(--ps-text-muted)", marginTop: "0.2vw" }, children: t2("Click or drag a full-body photo") }),
21255
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontSize: "0.5vw", color: "var(--ps-text-dim)", marginTop: "0.4vw" }, children: "JPEG, PNG (max 10MB)" })
21256
- ] })
21257
- }
21258
- ),
21232
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { flex: 1, position: "relative", display: "flex" }, children: [
21233
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
21234
+ "div",
21235
+ {
21236
+ onClick: () => {
21237
+ if (!photoPreview && ageConfirmed === true) fileInputRef.current?.click();
21238
+ },
21239
+ style: {
21240
+ flex: 1,
21241
+ display: "flex",
21242
+ flexDirection: "column",
21243
+ alignItems: "center",
21244
+ justifyContent: "center",
21245
+ border: photoPreview ? "2px solid var(--ps-accent)" : "2px dashed var(--ps-border-color)",
21246
+ borderRadius: "0.5vw",
21247
+ cursor: photoPreview ? "default" : ageConfirmed === true ? "pointer" : "not-allowed",
21248
+ position: "relative",
21249
+ background: "var(--ps-bg-secondary)",
21250
+ transition: "border-color 0.2s, filter 0.25s",
21251
+ overflow: "hidden",
21252
+ filter: !photoPreview && ageConfirmed !== true ? "blur(6px) saturate(0.7)" : void 0,
21253
+ pointerEvents: !photoPreview && ageConfirmed !== true ? "none" : void 0,
21254
+ userSelect: !photoPreview && ageConfirmed !== true ? "none" : void 0
21255
+ },
21256
+ "aria-hidden": !photoPreview && ageConfirmed !== true,
21257
+ children: photoPreview ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
21258
+ /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: photoPreview, alt: "preview", style: { width: "100%", height: "100%", objectFit: "contain" } }),
21259
+ /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: (e) => {
21260
+ e.stopPropagation();
21261
+ handleRemovePhoto();
21262
+ }, style: { position: "absolute", top: "0.5vw", right: "0.5vw", width: "1.4vw", height: "1.4vw", borderRadius: "50%", background: "rgba(0,0,0,0.6)", border: "none", color: "#fff", fontSize: "0.7vw", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }, children: "×" })
21263
+ ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
21264
+ /* @__PURE__ */ jsxRuntimeExports.jsx(UploadIcon, { size: 32 }),
21265
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontSize: "0.85vw", fontWeight: 600, color: "var(--ps-text-primary)", marginTop: "0.5vw" }, children: t2("Upload your photo") }),
21266
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontSize: "0.6vw", color: "var(--ps-text-muted)", marginTop: "0.2vw" }, children: t2("Click or drag a full-body photo") }),
21267
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontSize: "0.5vw", color: "var(--ps-text-dim)", marginTop: "0.4vw" }, children: "JPEG, PNG (max 10MB)" })
21268
+ ] })
21269
+ }
21270
+ ),
21271
+ !photoPreview && ageConfirmed === null && /* @__PURE__ */ jsxRuntimeExports.jsx(
21272
+ "div",
21273
+ {
21274
+ role: "dialog",
21275
+ "aria-labelledby": "ps-bp-age-q",
21276
+ style: {
21277
+ position: "absolute",
21278
+ inset: 0,
21279
+ display: "flex",
21280
+ alignItems: "center",
21281
+ justifyContent: "center",
21282
+ padding: "1vw",
21283
+ background: "rgba(255,255,255,0.55)",
21284
+ backdropFilter: "blur(8px)",
21285
+ WebkitBackdropFilter: "blur(8px)",
21286
+ borderRadius: "0.5vw",
21287
+ zIndex: 2,
21288
+ animation: "ps-cpw-age-gate-in 0.28s ease-out both"
21289
+ },
21290
+ children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
21291
+ width: "100%",
21292
+ maxWidth: "min(420px, 22vw)",
21293
+ padding: "1.4vw 1.6vw",
21294
+ background: "#FFFFFF",
21295
+ border: "1px solid var(--ps-border-subtle)",
21296
+ borderRadius: "0.9vw",
21297
+ boxShadow: "0 20px 40px -12px rgba(17,24,39,0.25), 0 8px 16px -8px rgba(17,24,39,0.15)",
21298
+ display: "flex",
21299
+ flexDirection: "column",
21300
+ alignItems: "center",
21301
+ textAlign: "center",
21302
+ gap: "0.75vw"
21303
+ }, children: [
21304
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { fontSize: "0.62vw", fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ps-accent)" }, children: t2("AGE VERIFICATION") }),
21305
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "ps-bp-age-q", style: { fontSize: "0.95vw", fontWeight: 600, lineHeight: 1.35, color: "var(--ps-text-primary)" }, children: t2("Is the person in this photo 18 years or older?") }),
21306
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", gap: "0.65vw", width: "100%", marginTop: "0.4vw" }, children: [
21307
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
21308
+ "button",
21309
+ {
21310
+ type: "button",
21311
+ onClick: () => {
21312
+ setAgeConfirmed(true);
21313
+ setError("");
21314
+ },
21315
+ style: {
21316
+ flex: 1,
21317
+ padding: "0.75vw 1vw",
21318
+ borderRadius: "999px",
21319
+ background: "var(--ps-accent)",
21320
+ color: "#FFFFFF",
21321
+ border: "1.5px solid var(--ps-accent)",
21322
+ fontFamily: "inherit",
21323
+ fontSize: "0.78vw",
21324
+ fontWeight: 700,
21325
+ cursor: "pointer",
21326
+ transition: "transform 0.18s, background 0.18s"
21327
+ },
21328
+ children: t2("Yes")
21329
+ }
21330
+ ),
21331
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
21332
+ "button",
21333
+ {
21334
+ type: "button",
21335
+ onClick: () => setAgeConfirmed(false),
21336
+ style: {
21337
+ flex: 1,
21338
+ padding: "0.75vw 1vw",
21339
+ borderRadius: "999px",
21340
+ background: "transparent",
21341
+ color: "var(--ps-text-primary)",
21342
+ border: "1.5px solid var(--ps-border-color)",
21343
+ fontFamily: "inherit",
21344
+ fontSize: "0.78vw",
21345
+ fontWeight: 700,
21346
+ cursor: "pointer",
21347
+ transition: "background 0.18s, border-color 0.18s"
21348
+ },
21349
+ children: t2("No")
21350
+ }
21351
+ )
21352
+ ] })
21353
+ ] })
21354
+ }
21355
+ ),
21356
+ !photoPreview && ageConfirmed === false && /* @__PURE__ */ jsxRuntimeExports.jsx(
21357
+ "div",
21358
+ {
21359
+ role: "alert",
21360
+ style: {
21361
+ position: "absolute",
21362
+ inset: 0,
21363
+ display: "flex",
21364
+ alignItems: "center",
21365
+ justifyContent: "center",
21366
+ padding: "1vw",
21367
+ background: "rgba(255,255,255,0.55)",
21368
+ backdropFilter: "blur(8px)",
21369
+ WebkitBackdropFilter: "blur(8px)",
21370
+ borderRadius: "0.5vw",
21371
+ zIndex: 2
21372
+ },
21373
+ children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
21374
+ width: "100%",
21375
+ maxWidth: "min(420px, 22vw)",
21376
+ padding: "1.4vw 1.6vw",
21377
+ background: "#FFFFFF",
21378
+ border: "1px solid rgba(192,38,38,0.35)",
21379
+ borderRadius: "0.9vw",
21380
+ boxShadow: "0 20px 40px -12px rgba(17,24,39,0.25)",
21381
+ display: "flex",
21382
+ flexDirection: "column",
21383
+ alignItems: "center",
21384
+ textAlign: "center",
21385
+ gap: "0.75vw"
21386
+ }, children: [
21387
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { fontSize: "0.62vw", fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: "#C02626" }, children: t2("UPLOAD NOT ALLOWED") }),
21388
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { fontSize: "0.95vw", fontWeight: 600, lineHeight: 1.35, color: "var(--ps-text-primary)" }, children: t2("For your safety, we cannot process photos of people under 18.") }),
21389
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
21390
+ "button",
21391
+ {
21392
+ type: "button",
21393
+ onClick: () => setAgeConfirmed(null),
21394
+ style: {
21395
+ padding: "0.75vw 1.4vw",
21396
+ borderRadius: "999px",
21397
+ background: "transparent",
21398
+ color: "var(--ps-text-primary)",
21399
+ border: "1.5px solid var(--ps-border-color)",
21400
+ fontFamily: "inherit",
21401
+ fontSize: "0.78vw",
21402
+ fontWeight: 700,
21403
+ cursor: "pointer"
21404
+ },
21405
+ children: t2("Go back")
21406
+ }
21407
+ )
21408
+ ] })
21409
+ }
21410
+ )
21411
+ ] }),
21259
21412
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "0.6vw", justifyContent: "center" }, children: [
21260
21413
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { fontSize: "0.85vw", fontWeight: 700, color: "var(--ps-text-primary)", marginBottom: "0.3vw" }, children: t2("How to take the best photo") }),
21261
21414
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { background: "#ddfbe7", borderRadius: "0.5vw", padding: "0.6vw 0.8vw" }, children: [
@@ -21298,6 +21451,21 @@ function BodyProfileView({
21298
21451
  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "#3267c3", fontSize: "0.65vw", fontWeight: 600 }, children: t2("Quick Tip") })
21299
21452
  ] }),
21300
21453
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { fontSize: "0.58vw", color: "var(--ps-text-primary)", lineHeight: 1.6 }, children: t2("The simpler your photo is, the more accurate your virtual try-on results will be.") })
21454
+ ] }),
21455
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
21456
+ background: "rgba(33, 84, 239, 0.04)",
21457
+ border: "1px solid rgba(33, 84, 239, 0.16)",
21458
+ borderRadius: "0.5vw",
21459
+ padding: "0.6vw 0.8vw",
21460
+ display: "flex",
21461
+ flexDirection: "column",
21462
+ gap: "0.3vw"
21463
+ }, children: [
21464
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.35vw" }, children: [
21465
+ /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", width: "0.75vw", height: "0.75vw", fill: "none", stroke: "#2154ef", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) }),
21466
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "#2154ef", fontSize: "0.62vw", fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase" }, children: t2("Legal Notice") })
21467
+ ] }),
21468
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { fontSize: "0.58vw", color: "var(--ps-text-secondary)", lineHeight: 1.55 }, children: t2("Your image will be used to generate a virtual try-on preview showing how selected items may look and fit. Images are processed securely and are not stored after generation.") })
21301
21469
  ] })
21302
21470
  ] })
21303
21471
  ] }),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primestyleai/tryon",
3
- "version": "5.8.40",
3
+ "version": "5.8.42",
4
4
  "description": "PrimeStyle Virtual Try-On SDK — React component & Web Component",
5
5
  "type": "module",
6
6
  "main": "dist/primestyle-tryon.js",