@primestyleai/tryon 5.0.5 → 5.0.6

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 (2) hide show
  1. package/dist/react/index.js +70 -45
  2. package/package.json +1 -1
package/dist/react/index.js CHANGED
@@ -4945,11 +4945,11 @@ function SizeResultView({
4945
4945
  ] })
4946
4946
  ] })
4947
4947
  ),
4948
- showPhotoGuide && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-chart-overlay", children: /* @__PURE__ */ jsxs("div", { className: "ps-tryon-v2", style: { height: "100%", padding: "1vw" }, children: [
4949
- /* @__PURE__ */ jsx("div", { className: "ps-tryon-v2-bg", style: { background: "#0a0a0a", display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxs(
4948
+ showPhotoGuide && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-chart-overlay", children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "1.2vw", padding: "2vw", width: "100%", height: "100%", alignItems: "stretch", background: "var(--ps-bg-primary)", borderRadius: "0.8vw" }, children: [
4949
+ /* @__PURE__ */ jsxs(
4950
4950
  "div",
4951
4951
  {
4952
- className: `ps-tryon-guide-drop-v2${guideDragOver ? " ps-drag" : ""}${guideFile ? " ps-has" : ""}`,
4952
+ onClick: () => !guideFile && guideInputRef.current?.click(),
4953
4953
  onDragOver: (e) => {
4954
4954
  e.preventDefault();
4955
4955
  setGuideDragOver(true);
@@ -4961,18 +4961,30 @@ function SizeResultView({
4961
4961
  const f = e.dataTransfer.files[0];
4962
4962
  if (f) setGuideFile(f);
4963
4963
  },
4964
- onClick: () => !guideFile && guideInputRef.current?.click(),
4964
+ style: {
4965
+ flex: 1,
4966
+ display: "flex",
4967
+ flexDirection: "column",
4968
+ alignItems: "center",
4969
+ justifyContent: "center",
4970
+ border: guideFile ? "2px solid var(--ps-accent)" : "2px dashed var(--ps-border-color)",
4971
+ borderRadius: "0.5vw",
4972
+ cursor: guideFile ? "default" : "pointer",
4973
+ position: "relative",
4974
+ background: "var(--ps-bg-secondary)",
4975
+ overflow: "hidden"
4976
+ },
4965
4977
  children: [
4966
4978
  guideFile && guidePreviewUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
4967
- /* @__PURE__ */ jsx("img", { src: guidePreviewUrl, alt: "preview", className: "ps-tryon-guide-drop-v2-img" }),
4968
- /* @__PURE__ */ jsx("button", { className: "ps-tryon-guide-drop-v2-remove", onClick: (e) => {
4979
+ /* @__PURE__ */ jsx("img", { src: guidePreviewUrl, alt: "preview", style: { width: "100%", height: "100%", objectFit: "contain" } }),
4980
+ /* @__PURE__ */ jsx("button", { onClick: (e) => {
4969
4981
  e.stopPropagation();
4970
4982
  setGuideFile(null);
4971
- }, children: "✕" })
4983
+ }, 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: "×" })
4972
4984
  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
4973
- /* @__PURE__ */ jsx(UploadIcon, { size: 28 }),
4974
- /* @__PURE__ */ jsx("span", { className: "ps-tryon-guide-drop-v2-text", children: t("Upload your photo") }),
4975
- /* @__PURE__ */ jsx("span", { className: "ps-tryon-guide-drop-v2-hint", children: t("Click or drag — JPG, PNG, WebP") })
4985
+ /* @__PURE__ */ jsx(UploadIcon, { size: 32 }),
4986
+ /* @__PURE__ */ jsx("span", { style: { fontSize: "0.85vw", fontWeight: 600, color: "var(--ps-text-primary)", marginTop: "0.5vw" }, children: t("Upload your photo") }),
4987
+ /* @__PURE__ */ jsx("span", { style: { fontSize: "0.6vw", color: "var(--ps-text-muted)", marginTop: "0.2vw" }, children: t("Click or drag a full-body photo") })
4976
4988
  ] }),
4977
4989
  /* @__PURE__ */ jsx(
4978
4990
  "input",
@@ -4989,45 +5001,58 @@ function SizeResultView({
4989
5001
  )
4990
5002
  ]
4991
5003
  }
4992
- ) }),
4993
- /* @__PURE__ */ jsxs("div", { className: "ps-tryon-v2-panel", children: [
4994
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
4995
- /* @__PURE__ */ jsx("h3", { className: "ps-tryon-v2-title", children: t("Virtual Try-On") }),
4996
- /* @__PURE__ */ jsx("button", { style: { background: "none", border: "none", color: "rgba(0,0,0,0.3)", cursor: "pointer", fontSize: "1.2vw" }, onClick: () => setShowPhotoGuide(false), children: "✕" })
4997
- ] }),
4998
- /* @__PURE__ */ jsx("p", { className: "ps-tryon-v2-subtitle", children: t("Upload a full-body photo to see how it looks on you") }),
4999
- /* @__PURE__ */ jsx("div", { className: "ps-tryon-v2-sep" }),
5000
- /* @__PURE__ */ jsxs("div", { className: "ps-tryon-guide-v2-tips", children: [
5001
- /* @__PURE__ */ jsxs("div", { className: "ps-tryon-guide-v2-tip", children: [
5002
- /* @__PURE__ */ jsx("span", { className: "ps-tryon-guide-v2-tip-icon", children: "✓" }),
5003
- /* @__PURE__ */ jsx("span", { children: t("Full body, facing camera") })
5004
- ] }),
5005
- /* @__PURE__ */ jsxs("div", { className: "ps-tryon-guide-v2-tip", children: [
5006
- /* @__PURE__ */ jsx("span", { className: "ps-tryon-guide-v2-tip-icon", children: "✓" }),
5007
- /* @__PURE__ */ jsx("span", { children: t("Good lighting, plain background") })
5008
- ] }),
5009
- /* @__PURE__ */ jsxs("div", { className: "ps-tryon-guide-v2-tip", children: [
5010
- /* @__PURE__ */ jsx("span", { className: "ps-tryon-guide-v2-tip-icon", children: "✓" }),
5011
- /* @__PURE__ */ jsx("span", { children: t("Fitted clothes, arms at sides") })
5004
+ ),
5005
+ /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", gap: "0.6vw" }, children: [
5006
+ /* @__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") }),
5007
+ /* @__PURE__ */ jsxs("div", { style: { background: "#ddfbe7", borderRadius: "0.5vw", padding: "0.6vw 0.8vw" }, children: [
5008
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.3vw", marginBottom: "0.3vw" }, children: [
5009
+ /* @__PURE__ */ jsx("span", { style: { color: "#1c9d4c", fontSize: "0.75vw", fontWeight: 700 }, children: "✓" }),
5010
+ /* @__PURE__ */ jsx("span", { style: { color: "#1c9d4c", fontSize: "0.65vw", fontWeight: 600 }, children: t("Do") })
5012
5011
  ] }),
5013
- /* @__PURE__ */ jsxs("div", { className: "ps-tryon-guide-v2-tip ps-dont", children: [
5014
- /* @__PURE__ */ jsx("span", { className: "ps-tryon-guide-v2-tip-icon", children: "✕" }),
5015
- /* @__PURE__ */ jsx("span", { children: t("No selfies, mirrors, or filters") })
5012
+ /* @__PURE__ */ jsxs("div", { style: { fontSize: "0.58vw", color: "var(--ps-text-primary)", lineHeight: 1.8 }, children: [
5013
+ t("Stand facing the camera with your full body in frame"),
5014
+ /* @__PURE__ */ jsx("br", {}),
5015
+ t("Use natural or even lighting"),
5016
+ /* @__PURE__ */ jsx("br", {}),
5017
+ t("Wear fitted, simple clothing"),
5018
+ /* @__PURE__ */ jsx("br", {}),
5019
+ t("Stand straight and still, arms relaxed")
5016
5020
  ] })
5017
5021
  ] }),
5018
- /* @__PURE__ */ jsxs("button", { className: "ps-tryon-v2-cta", style: { marginTop: "auto" }, disabled: !guideFile, onClick: () => {
5019
- if (!guideFile) return;
5020
- handleFileSelect(guideFile);
5021
- handleTryOnSubmit();
5022
- setShowPhotoGuide(false);
5023
- setGuideFile(null);
5024
- }, children: [
5025
- /* @__PURE__ */ jsx(CameraIcon, { size: 14 }),
5026
- " ",
5027
- t("Start Try-On")
5022
+ /* @__PURE__ */ jsxs("div", { style: { background: "#ffe2e2", borderRadius: "0.5vw", padding: "0.6vw 0.8vw" }, children: [
5023
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.3vw", marginBottom: "0.3vw" }, children: [
5024
+ /* @__PURE__ */ jsx("span", { style: { color: "#e7000b", fontSize: "0.75vw", fontWeight: 700 }, children: "✗" }),
5025
+ /* @__PURE__ */ jsx("span", { style: { color: "#e7000b", fontSize: "0.65vw", fontWeight: 600 }, children: t("Don't") })
5026
+ ] }),
5027
+ /* @__PURE__ */ jsxs("div", { style: { fontSize: "0.58vw", color: "var(--ps-text-primary)", lineHeight: 1.8 }, children: [
5028
+ t("Don't wear loose or baggy clothing"),
5029
+ /* @__PURE__ */ jsx("br", {}),
5030
+ t("Don't sit, pose, or bend"),
5031
+ /* @__PURE__ */ jsx("br", {}),
5032
+ t("Don't take mirror photos or selfies"),
5033
+ /* @__PURE__ */ jsx("br", {}),
5034
+ t("Don't apply filters or edits")
5035
+ ] })
5028
5036
  ] }),
5029
- /* @__PURE__ */ jsx("p", { style: { fontSize: "0.5vw", color: "rgba(0,0,0,0.25)", textAlign: "center", marginTop: "0.3vw" }, children: t("Your photo is private and never shared") })
5030
- ] }, "panel-guide")
5037
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: "0.5vw", gap: "0.5vw" }, children: [
5038
+ /* @__PURE__ */ jsxs("button", { className: "ps-bp-back-btn", onClick: () => setShowPhotoGuide(false), type: "button", children: [
5039
+ /* @__PURE__ */ jsx("span", { className: "ps-bp-back-arrow", children: "←" }),
5040
+ " ",
5041
+ t("Back")
5042
+ ] }),
5043
+ /* @__PURE__ */ jsxs("button", { className: "ps-tryon-v2-cta", style: { marginTop: 0 }, disabled: !guideFile, onClick: () => {
5044
+ if (!guideFile) return;
5045
+ handleFileSelect(guideFile);
5046
+ handleTryOnSubmit();
5047
+ setShowPhotoGuide(false);
5048
+ setGuideFile(null);
5049
+ }, children: [
5050
+ /* @__PURE__ */ jsx(CameraIcon, { size: 14 }),
5051
+ " ",
5052
+ t("Start Try-On")
5053
+ ] })
5054
+ ] })
5055
+ ] })
5031
5056
  ] }) }),
5032
5057
  showFullChart && sizeGuide && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-chart-overlay", children: /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-chart-modal", children: [
5033
5058
  /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-chart-header", children: [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primestyleai/tryon",
3
- "version": "5.0.5",
3
+ "version": "5.0.6",
4
4
  "description": "PrimeStyle Virtual Try-On SDK — React component & Web Component",
5
5
  "type": "module",
6
6
  "main": "dist/primestyle-tryon.js",