@primestyleai/tryon 2.0.5 → 2.1.0

package/dist/react/index.d.ts

@@ -1,5 +1,5 @@
 import { type CSSProperties } from "react";
-import type { ButtonStyles, ModalStyles, PrimeStyleClassNames } from "../types";
+import type { ButtonStyles, ModalStyles, PrimeStyleClassNames, SizeGuideData } from "../types";
 export interface PrimeStyleTryonProps {
     productImage: string;
     productTitle?: string;
@@ -23,5 +23,27 @@ export interface PrimeStyleTryonProps {
         message: string;
         code?: string;
     }) => void;
+    /** Pre-computed size guide — skips AI extraction if provided */
+    sizeGuide?: SizeGuideData;
+    /** Product description HTML for AI size guide extraction */
+    productDescription?: string;
+    /** Product vendor/brand for AI extraction */
+    productVendor?: string;
+    /** Product type (e.g. "T-Shirt", "Jacket") */
+    productType?: string;
+    /** Product tags for AI extraction */
+    productTags?: string[];
+    /** Product variants with size options */
+    productVariants?: Array<{
+        title: string;
+        option1?: string | null;
+        option2?: string | null;
+        option3?: string | null;
+    }>;
+    /** Product options (e.g. [{name: "Size", values: ["S","M","L"]}]) */
+    productOptions?: Array<{
+        name: string;
+        values?: string[];
+    }>;
 }
-export declare function PrimeStyleTryon({ productImage, productTitle, buttonText, apiUrl, showPoweredBy, buttonStyles: btnS, modalStyles: mdlS, classNames: cn, className, style, onOpen, onClose, onUpload, onProcessing, onComplete, onError, }: PrimeStyleTryonProps): import("react/jsx-runtime").JSX.Element;
+export declare function PrimeStyleTryon(props: PrimeStyleTryonProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/react/index.js

@@ -1,6 +1,6 @@
 "use client";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useState, useRef, useEffect, useMemo, useCallback } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useMemo, useCallback } from "react";
 import { A as ApiClient, S as SseClient, i as isValidImageFile, c as compressImage, P as PrimeStyleError } from "../image-utils-C9bJ1zKO.js";
 function cx(base, override) {
   return override ? `${base} ${override}` : base;
@@ -154,7 +154,15 @@ function getApiKey() {
 function getApiUrl(override) {
   return override || process.env.NEXT_PUBLIC_PRIMESTYLE_API_URL || "https://myaifitting.com";
 }
-function PrimeStyleTryon({
+function PrimeStyleTryon(props) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) return null;
+  return /* @__PURE__ */ jsx(PrimeStyleTryonInner, { ...props });
+}
+function PrimeStyleTryonInner({
   productImage,
   productTitle = "Product",
   buttonText = "Virtual Try-On",
@@ -170,7 +178,14 @@ function PrimeStyleTryon({
   onUpload,
   onProcessing,
   onComplete,
-  onError
+  onError,
+  sizeGuide: sizeGuideProp,
+  productDescription,
+  productVendor,
+  productType,
+  productTags,
+  productVariants,
+  productOptions
 }) {
   const [view, setView] = useState("idle");
   const [selectedFile, setSelectedFile] = useState(null);
@@ -275,18 +290,31 @@ function PrimeStyleTryon({
   useEffect(() => {
     if (view !== "sizing-choice" || sizeGuideFetchedRef.current || !apiRef.current) return;
     sizeGuideFetchedRef.current = true;
+    if (sizeGuideProp) {
+      setSizeGuide(sizeGuideProp);
+      return;
+    }
     setSizeGuideFetching(true);
     const baseUrl = getApiUrl(apiUrl);
     const key = getApiKey();
+    const productPayload = {
+      title: productTitle,
+      variants: productVariants || []
+    };
+    if (productDescription) productPayload.description = productDescription;
+    if (productVendor) productPayload.vendor = productVendor;
+    if (productType) productPayload.productType = productType;
+    if (productTags?.length) productPayload.tags = productTags;
+    if (productOptions?.length) productPayload.options = productOptions;
     fetch(`${baseUrl}/api/v1/sizing/sizeguide`, {
       method: "POST",
       headers: { "Content-Type": "application/json", Authorization: `Bearer ${key}` },
-      body: JSON.stringify({ product: { title: productTitle, variants: [] } })
+      body: JSON.stringify({ product: productPayload })
     }).then((r) => r.ok ? r.json() : null).then((data) => {
       if (data) setSizeGuide(data);
       else setSizeGuide({ found: false });
     }).catch(() => setSizeGuide({ found: false })).finally(() => setSizeGuideFetching(false));
-  }, [view, apiUrl, productTitle]);
+  }, [view, apiUrl, productTitle, sizeGuideProp]);
   const stepIndex = useMemo(() => {
     switch (view) {
       case "welcome":
@@ -394,7 +422,14 @@ function PrimeStyleTryon({
     const payload = {
       method: sizingMethod,
       locale: sizingCountry,
-      product: { title: productTitle, variants: [] }
+      product: {
+        title: productTitle,
+        description: productDescription || "",
+        variants: productVariants || [],
+        ...productVendor && { vendor: productVendor },
+        ...productType && { productType },
+        ...productTags?.length && { tags: productTags }
+      }
     };
     if (sizeGuide?.found) payload.sizeGuide = sizeGuide;
     if (sizingMethod === "exact") {

package/dist/types.d.ts

@@ -130,6 +130,13 @@ export interface PrimeStyleClassNames {
     /** Powered by footer */
     poweredBy?: string;
 }
+/** Pre-computed size guide data — pass directly to skip AI extraction */
+export interface SizeGuideData {
+    found: true;
+    title?: string;
+    headers: string[];
+    rows: string[][];
+}
 /** Custom events emitted by the component */
 export interface PrimeStyleEvents {
     "ps:open": CustomEvent<void>;

package/package.json

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