@primestyleai/tryon 1.1.0 → 1.2.0

package/README.md

@@ -87,8 +87,9 @@ That's it. No API key prop needed — the component reads it from your environme
 | `buttonText` | `string` | `"Virtual Try-On"` | Text on the trigger button |
 | `apiUrl` | `string` | `NEXT_PUBLIC_PRIMESTYLE_API_URL` or production | API endpoint override |
 | `showPoweredBy` | `boolean` | `true` | Show "Powered by PrimeStyle AI" in modal |
-| `buttonStyles` | `ButtonStyles` | `{}` | Customize button appearance |
-| `modalStyles` | `ModalStyles` | `{}` | Customize modal appearance |
+| `buttonStyles` | `ButtonStyles` | `{}` | Customize button via style props |
+| `modalStyles` | `ModalStyles` | `{}` | Customize modal via style props |
+| `classNames` | `PrimeStyleClassNames` | `{}` | Override element classes (Tailwind, CSS) |
 | `className` | `string` | — | Additional CSS class on wrapper |
 | `style` | `CSSProperties` | — | Inline styles on wrapper |
 | `onOpen` | `() => void` | — | Modal opened |
@@ -186,6 +187,104 @@ That's it. No API key prop needed — the component reads it from your environme
 | `loaderColor` | Loading spinner color |
 | `resultBorderRadius` | Result image corner rounding |
 
+### Tailwind CSS / Custom Classes
+
+Use the `classNames` prop to style any element with Tailwind utilities or your own CSS classes:
+
+```jsx
+<PrimeStyleTryon
+  productImage={product.image}
+  classNames={{
+    button: "bg-black text-white rounded-full px-8 py-4 hover:bg-gray-800",
+    modal: "bg-white rounded-2xl shadow-2xl",
+    header: "bg-gray-50 border-b border-gray-200",
+    title: "text-gray-900 text-lg",
+    closeButton: "text-gray-400 hover:text-gray-600",
+    body: "p-6",
+    uploadZone: "border-2 border-dashed border-gray-300 rounded-xl p-10 hover:border-blue-400",
+    uploadText: "text-gray-700",
+    submitButton: "bg-blue-600 text-white rounded-lg hover:bg-blue-700",
+    downloadButton: "bg-green-600 text-white rounded-lg",
+    retryButton: "bg-gray-100 text-gray-700 border border-gray-300",
+  }}
+/>
+```
+
+**All classNames keys:**
+
+| Key | Element |
+|-----|---------|
+| `root` | Root wrapper `<div>` |
+| `button` | Trigger button |
+| `overlay` | Modal backdrop overlay |
+| `modal` | Modal container |
+| `header` | Modal header bar |
+| `title` | Modal title text |
+| `closeButton` | Close (X) button |
+| `body` | Modal body area |
+| `uploadZone` | Upload drop zone |
+| `uploadText` | "Drop your photo..." text |
+| `uploadHint` | File type hint text |
+| `preview` | Preview image container |
+| `previewImage` | Preview `<img>` element |
+| `removeButton` | Remove preview button |
+| `submitButton` | "Try It On" / "Try Again" button |
+| `spinner` | Loading spinner |
+| `processingText` | "Generating..." text |
+| `processingSubText` | "This usually takes..." text |
+| `result` | Result container |
+| `resultImage` | Result `<img>` element |
+| `resultActions` | Download/retry button row |
+| `downloadButton` | Download button |
+| `retryButton` | "Try Another" button |
+| `error` | Error container |
+| `errorText` | Error message text |
+| `poweredBy` | Footer text |
+
+### Normal CSS
+
+All elements use `ps-tryon-*` class names that you can target directly in your CSS:
+
+```css
+/* Override the trigger button */
+.ps-tryon-btn {
+  background: #000;
+  color: #fff;
+  border-radius: 50px;
+  padding: 16px 32px;
+}
+
+/* Override the modal */
+.ps-tryon-modal {
+  background: #fff;
+  color: #111;
+  border-radius: 16px;
+}
+
+/* Override the submit button */
+.ps-tryon-submit {
+  background: #2563eb;
+  color: #fff;
+}
+```
+
+### Combining Approaches
+
+You can mix all three styling methods — they layer on top of each other:
+
+```jsx
+<PrimeStyleTryon
+  productImage={product.image}
+  // 1. Style props (CSS variables)
+  buttonStyles={{ width: '100%' }}
+  // 2. Tailwind classes
+  classNames={{ button: "rounded-full font-bold" }}
+  // 3. Normal CSS targets .ps-tryon-btn automatically
+/>
+```
+
+Priority: Tailwind/classNames classes > CSS variables (buttonStyles/modalStyles) > default styles.
+
 ---
 
 ## Callbacks

package/dist/react/index.d.ts

@@ -1,5 +1,5 @@
 import { type CSSProperties } from "react";
-import type { ButtonStyles, ModalStyles } from "../types";
+import type { ButtonStyles, ModalStyles, PrimeStyleClassNames } from "../types";
 export interface PrimeStyleTryonProps {
     /** Product image URL to try on */
     productImage: string;
@@ -9,10 +9,16 @@ export interface PrimeStyleTryonProps {
     apiUrl?: string;
     /** Show "Powered by PrimeStyle" in modal footer (defaults to true) */
     showPoweredBy?: boolean;
-    /** Button appearance customization */
+    /** Button appearance customization via CSS variables */
     buttonStyles?: ButtonStyles;
-    /** Modal appearance customization */
+    /** Modal appearance customization via CSS variables */
     modalStyles?: ModalStyles;
+    /**
+     * Override any element's className with Tailwind classes or custom CSS classes.
+     * These are appended to the default `ps-tryon-*` classes, so you can either
+     * add onto the defaults or fully replace them with your own styles.
+     */
+    classNames?: PrimeStyleClassNames;
     /** Additional className on the root wrapper */
     className?: string;
     /** Additional inline styles on the root wrapper */
@@ -30,4 +36,4 @@ export interface PrimeStyleTryonProps {
         code?: string;
     }) => void;
 }
-export declare function PrimeStyleTryon({ productImage, buttonText, apiUrl, showPoweredBy, buttonStyles: btnS, modalStyles: mdlS, className, style, onOpen, onClose, onUpload, onProcessing, onComplete, onError, }: PrimeStyleTryonProps): import("react/jsx-runtime").JSX.Element;
+export declare function PrimeStyleTryon({ productImage, buttonText, apiUrl, showPoweredBy, buttonStyles: btnS, modalStyles: mdlS, classNames: cn, className, style, onOpen, onClose, onUpload, onProcessing, onComplete, onError, }: PrimeStyleTryonProps): import("react/jsx-runtime").JSX.Element;

package/dist/react/index.js

@@ -2,6 +2,9 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useCallback } from "react";
 import { A as ApiClient, S as SseClient, i as isValidImageFile, c as compressImage, P as PrimeStyleError } from "../image-utils-usff6Qu8.js";
+function cx(base, override) {
+  return override ? `${base} ${override}` : base;
+}
 function CameraIcon({ size = 18 }) {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -100,6 +103,7 @@ function PrimeStyleTryon({
   showPoweredBy = true,
   buttonStyles: btnS = {},
   modalStyles: mdlS = {},
+  classNames: cn = {},
   className,
   style,
   onOpen,
@@ -322,108 +326,207 @@ function PrimeStyleTryon({
   const cssVars = Object.fromEntries(
     Object.entries(rootVars).filter(([, v]) => v !== void 0)
   );
-  return /* @__PURE__ */ jsxs("div", { className, style: { ...cssVars, ...style, display: "inline-block" }, children: [
-    /* @__PURE__ */ jsxs("button", { onClick: handleOpen, className: "ps-tryon-btn", children: [
-      /* @__PURE__ */ jsx(CameraIcon, { size: parseInt(btnS.iconSize || "18") }),
-      /* @__PURE__ */ jsx("span", { children: buttonText })
-    ] }),
-    view !== "idle" && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "ps-tryon-overlay",
-        onClick: (e) => {
-          if (e.target === e.currentTarget) handleClose();
-        },
-        children: /* @__PURE__ */ jsxs("div", { className: "ps-tryon-modal", onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-header", children: [
-            /* @__PURE__ */ jsx("span", { className: "ps-tryon-title", children: "Virtual Try-On" }),
-            /* @__PURE__ */ jsx("button", { onClick: handleClose, className: "ps-tryon-close", children: /* @__PURE__ */ jsx(XIcon, {}) })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-body", children: [
-            view === "upload" && /* @__PURE__ */ jsx(Fragment, { children: selectedFile && previewUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsxs("div", { className: "ps-tryon-preview", children: [
-                /* @__PURE__ */ jsx("img", { src: previewUrl, alt: "Your photo" }),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: handleRemovePreview,
-                    className: "ps-tryon-preview-remove",
-                    children: "×"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx("button", { onClick: handleSubmit, className: "ps-tryon-submit", children: "Try It On" })
-            ] }) : /* @__PURE__ */ jsxs(
+  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") }),
+          /* @__PURE__ */ jsx("span", { children: buttonText })
+        ] }),
+        view !== "idle" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx("ps-tryon-overlay", cn.overlay),
+            onClick: (e) => {
+              if (e.target === e.currentTarget) handleClose();
+            },
+            children: /* @__PURE__ */ jsxs(
               "div",
               {
-                className: `ps-tryon-upload ${dragOver ? "ps-tryon-drag-over" : ""}`,
-                onClick: () => fileInputRef.current?.click(),
-                onDragOver: (e) => {
-                  e.preventDefault();
-                  setDragOver(true);
-                },
-                onDragLeave: () => setDragOver(false),
-                onDrop: (e) => {
-                  e.preventDefault();
-                  setDragOver(false);
-                  const file = e.dataTransfer?.files?.[0];
-                  if (file) handleFileSelect(file);
-                },
+                className: cx("ps-tryon-modal", cn.modal),
+                onClick: (e) => e.stopPropagation(),
                 children: [
-                  /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      ref: fileInputRef,
-                      type: "file",
-                      accept: "image/jpeg,image/png,image/webp",
-                      style: { display: "none" },
-                      onChange: (e) => {
-                        const file = e.target.files?.[0];
-                        if (file) handleFileSelect(file);
+                  /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-header", cn.header), children: [
+                    /* @__PURE__ */ jsx("span", { className: cx("ps-tryon-title", cn.title), children: "Virtual Try-On" }),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: handleClose,
+                        className: cx("ps-tryon-close", cn.closeButton),
+                        children: /* @__PURE__ */ jsx(XIcon, {})
                       }
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(UploadIcon, {}),
-                  /* @__PURE__ */ jsx("p", { className: "ps-tryon-upload-text", children: "Drop your photo here or click to upload" }),
-                  /* @__PURE__ */ jsx("p", { className: "ps-tryon-upload-hint", children: "JPEG, PNG or WebP (max 10MB)" })
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-body", cn.body), children: [
+                    view === "upload" && /* @__PURE__ */ jsx(Fragment, { children: selectedFile && previewUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-preview", cn.preview), children: [
+                        /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            src: previewUrl,
+                            alt: "Your photo",
+                            className: cn.previewImage
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            onClick: handleRemovePreview,
+                            className: cx(
+                              "ps-tryon-preview-remove",
+                              cn.removeButton
+                            ),
+                            children: "×"
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: handleSubmit,
+                          className: cx("ps-tryon-submit", cn.submitButton),
+                          children: "Try It On"
+                        }
+                      )
+                    ] }) : /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: cx(
+                          `ps-tryon-upload${dragOver ? " ps-tryon-drag-over" : ""}`,
+                          cn.uploadZone
+                        ),
+                        onClick: () => fileInputRef.current?.click(),
+                        onDragOver: (e) => {
+                          e.preventDefault();
+                          setDragOver(true);
+                        },
+                        onDragLeave: () => setDragOver(false),
+                        onDrop: (e) => {
+                          e.preventDefault();
+                          setDragOver(false);
+                          const file = e.dataTransfer?.files?.[0];
+                          if (file) handleFileSelect(file);
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "input",
+                            {
+                              ref: fileInputRef,
+                              type: "file",
+                              accept: "image/jpeg,image/png,image/webp",
+                              style: { display: "none" },
+                              onChange: (e) => {
+                                const file = e.target.files?.[0];
+                                if (file) handleFileSelect(file);
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(UploadIcon, {}),
+                          /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-upload-text", cn.uploadText), children: "Drop your photo here or click to upload" }),
+                          /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-upload-hint", cn.uploadHint), children: "JPEG, PNG or WebP (max 10MB)" })
+                        ]
+                      }
+                    ) }),
+                    view === "processing" && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-processing", children: [
+                      /* @__PURE__ */ jsx("div", { className: cx("ps-tryon-spinner", cn.spinner) }),
+                      /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          className: cx(
+                            "ps-tryon-processing-text",
+                            cn.processingText
+                          ),
+                          children: "Generating your try-on..."
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          className: cx(
+                            "ps-tryon-processing-sub",
+                            cn.processingSubText
+                          ),
+                          children: "This usually takes 15-20 seconds"
+                        }
+                      )
+                    ] }),
+                    view === "result" && resultImageUrl && /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-result", cn.result), children: [
+                      /* @__PURE__ */ jsx(
+                        "img",
+                        {
+                          src: resultImageUrl,
+                          alt: "Try-on result",
+                          className: cn.resultImage
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          className: cx(
+                            "ps-tryon-result-actions",
+                            cn.resultActions
+                          ),
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "button",
+                              {
+                                onClick: handleDownload,
+                                className: cx("ps-tryon-btn-download", cn.downloadButton),
+                                children: "Download"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "button",
+                              {
+                                onClick: handleRetry,
+                                className: cx("ps-tryon-btn-retry", cn.retryButton),
+                                children: "Try Another"
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ] }),
+                    view === "error" && /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-error", cn.error), children: [
+                      /* @__PURE__ */ jsx(AlertIcon, {}),
+                      /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-error-text", cn.errorText), children: errorMessage || "Something went wrong" }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: handleRetry,
+                          className: cx("ps-tryon-submit", cn.submitButton),
+                          children: "Try Again"
+                        }
+                      )
+                    ] })
+                  ] }),
+                  showPoweredBy && /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-powered", cn.poweredBy), children: [
+                    "Powered by",
+                    " ",
+                    /* @__PURE__ */ jsx(
+                      "a",
+                      {
+                        href: "https://primestyleai.com",
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        children: "PrimeStyle AI"
+                      }
+                    )
+                  ] })
                 ]
               }
-            ) }),
-            view === "processing" && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-processing", children: [
-              /* @__PURE__ */ jsx("div", { className: "ps-tryon-spinner" }),
-              /* @__PURE__ */ jsx("p", { className: "ps-tryon-processing-text", children: "Generating your try-on..." }),
-              /* @__PURE__ */ jsx("p", { className: "ps-tryon-processing-sub", children: "This usually takes 15-20 seconds" })
-            ] }),
-            view === "result" && resultImageUrl && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-result", children: [
-              /* @__PURE__ */ jsx("img", { src: resultImageUrl, alt: "Try-on result" }),
-              /* @__PURE__ */ jsxs("div", { className: "ps-tryon-result-actions", children: [
-                /* @__PURE__ */ jsx("button", { onClick: handleDownload, className: "ps-tryon-btn-download", children: "Download" }),
-                /* @__PURE__ */ jsx("button", { onClick: handleRetry, className: "ps-tryon-btn-retry", children: "Try Another" })
-              ] })
-            ] }),
-            view === "error" && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-error", children: [
-              /* @__PURE__ */ jsx(AlertIcon, {}),
-              /* @__PURE__ */ jsx("p", { className: "ps-tryon-error-text", children: errorMessage || "Something went wrong" }),
-              /* @__PURE__ */ jsx("button", { onClick: handleRetry, className: "ps-tryon-submit", children: "Try Again" })
-            ] })
-          ] }),
-          showPoweredBy && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-powered", children: [
-            "Powered by",
-            " ",
-            /* @__PURE__ */ jsx(
-              "a",
-              {
-                href: "https://primestyleai.com",
-                target: "_blank",
-                rel: "noopener noreferrer",
-                children: "PrimeStyle AI"
-              }
             )
-          ] })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx("style", { children: `
+          }
+        ),
+        /* @__PURE__ */ jsx("style", { children: `
+        .ps-tryon-root {
+          display: inline-block;
+        }
+
         .ps-tryon-btn {
           display: inline-flex;
           align-items: center;
@@ -659,7 +762,9 @@ function PrimeStyleTryon({
         .ps-tryon-powered a { color: #bb945c; text-decoration: none; }
         .ps-tryon-powered a:hover { text-decoration: underline; }
       ` })
-  ] });
+      ]
+    }
+  );
 }
 export {
   PrimeStyleTryon

package/dist/types.d.ts

@@ -75,6 +75,61 @@ export interface TryOnStatus {
     imageUrl: string | null;
     message: string;
 }
+/** Class name overrides for styling with Tailwind or custom CSS */
+export interface PrimeStyleClassNames {
+    /** Root wrapper element */
+    root?: string;
+    /** Trigger button */
+    button?: string;
+    /** Modal overlay backdrop */
+    overlay?: string;
+    /** Modal container */
+    modal?: string;
+    /** Modal header bar */
+    header?: string;
+    /** Modal title text */
+    title?: string;
+    /** Close (X) button */
+    closeButton?: string;
+    /** Modal body area */
+    body?: string;
+    /** Upload drop zone */
+    uploadZone?: string;
+    /** Upload primary text */
+    uploadText?: string;
+    /** Upload hint text (file types) */
+    uploadHint?: string;
+    /** Preview image container */
+    preview?: string;
+    /** Preview image element */
+    previewImage?: string;
+    /** Remove preview button */
+    removeButton?: string;
+    /** Submit / "Try It On" button */
+    submitButton?: string;
+    /** Processing spinner element */
+    spinner?: string;
+    /** Processing main text */
+    processingText?: string;
+    /** Processing sub text */
+    processingSubText?: string;
+    /** Result container */
+    result?: string;
+    /** Result image element */
+    resultImage?: string;
+    /** Result actions container */
+    resultActions?: string;
+    /** Download button */
+    downloadButton?: string;
+    /** Retry / "Try Another" button */
+    retryButton?: string;
+    /** Error container */
+    error?: string;
+    /** Error text */
+    errorText?: string;
+    /** Powered by footer */
+    poweredBy?: 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": "1.1.0",
+  "version": "1.2.0",
   "description": "PrimeStyle Virtual Try-On SDK — React component & Web Component",
   "type": "module",
   "main": "dist/primestyle-tryon.js",