@syncsnap/react 1.0.0

package/README.md

@@ -0,0 +1,23 @@
+# @syncsnap/react
+
+Syncsnap client SDK for React — upload UI, QR code, and file-sync components.
+
+## Example
+
+```tsx
+import { SyncsnapUploadButton } from '@syncsnap/react';
+
+<SyncsnapUploadButton
+  buttonText="Scan to upload"
+  onJobCreated={(job) => {
+    console.log('Job created :', job);
+  }}
+  onCompleted={(job, result) => {
+    console.log('Job completed', job, result);
+  }}
+/>;
+```
+
+## Docs
+
+**[Documentation →](https://docs.syncsnap.xyz)**

package/dist/index.d.ts

@@ -0,0 +1,81 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type JobStatus = 'pending' | 'in_progress' | 'completed' | 'failed';
+interface Job {
+    id: string;
+    projectId: string;
+    status: JobStatus;
+    fileName?: string | null;
+    createdAt: string;
+    updatedAt: string;
+}
+interface CreateJobResponse {
+    id: string;
+    projectId: string;
+    status: JobStatus;
+    createdAt: string;
+    updatedAt: string;
+}
+/** Pre-signed download URL returned by the syncsnap API when a job is completed. */
+interface PresignedUrlResponse {
+    url: string;
+    fileName: string;
+    expiration: string;
+}
+/**
+ * Download URL response. When the server is configured with `onCompleted`,
+ * its return value is included as `completedPayload`.
+ */
+interface CompletedJobResponse<T = unknown> extends PresignedUrlResponse {
+    completedPayload?: T;
+}
+interface UseSyncsnapJobOptions {
+    createJobUrl?: string;
+    getJobUrl?: (jobId: string) => string;
+    /** URL for the server's wait-for-completion endpoint (server polls until job completes). Defaults to getJobUrl(jobId) + '/wait'. */
+    getWaitForCompletionUrl?: (jobId: string) => string;
+    /** Passed to the wait endpoint as query params. Default timeoutMs: 120000, intervalMs: 2000. */
+    waitTimeoutMs?: number;
+    waitIntervalMs?: number;
+    autoStart?: boolean;
+    onJobCreated?: (job: CreateJobResponse) => void;
+    /** Called when the job finishes. Result is whatever the server's onCompleted callback returned (when no callback is set, result is the presigned download URL). */
+    onCompleted?: (job: Job, result?: unknown) => void;
+    onError?: (error: Error) => void;
+}
+interface UseSyncsnapJobResult {
+    job: Job | null;
+    jobId: string | null;
+    status: JobStatus | null;
+    error: Error | null;
+    /** True while waiting for the server to complete the job (wait request in flight). */
+    isWaiting: boolean;
+    start: () => Promise<void>;
+    reset: () => void;
+}
+interface SyncsnapQrCodeProps {
+    jobId: string;
+    baseUrl?: string;
+    size?: number;
+    className?: string;
+    errorCorrectionLevel?: 'L' | 'M' | 'Q' | 'H';
+}
+interface SyncsnapUploadButtonProps extends UseSyncsnapJobOptions {
+    buttonText?: string;
+    className?: string;
+    qrSize?: number;
+    qrBaseUrl?: string;
+    errorCorrectionLevel?: 'L' | 'M' | 'Q' | 'H';
+}
+
+declare function SyncsnapQrCode({ jobId, baseUrl, size, className, errorCorrectionLevel, }: SyncsnapQrCodeProps): react_jsx_runtime.JSX.Element | null;
+
+declare function SyncsnapUploadButton({ buttonText, className, qrSize, qrBaseUrl, errorCorrectionLevel, onCompleted: userOnCompleted, onError: userOnError, ...options }: SyncsnapUploadButtonProps): react_jsx_runtime.JSX.Element;
+
+declare function useSyncsnapJob(options?: UseSyncsnapJobOptions): UseSyncsnapJobResult;
+
+declare function createUploadUrl(jobId: string, options?: {
+    baseUrl?: string;
+}): string;
+
+export { type CompletedJobResponse, type CreateJobResponse, type Job, type JobStatus, type PresignedUrlResponse, SyncsnapQrCode, type SyncsnapQrCodeProps, SyncsnapUploadButton, type SyncsnapUploadButtonProps, type UseSyncsnapJobOptions, type UseSyncsnapJobResult, createUploadUrl, useSyncsnapJob };

package/dist/index.js

@@ -0,0 +1,560 @@
+// src/components/SyncsnapQrCode.tsx
+import { useEffect, useState } from "react";
+import QRCode from "qrcode";
+
+// src/utils.ts
+function createUploadUrl(jobId, options) {
+  const baseUrl = options?.baseUrl ?? "https://upload.syncsnap.xyz/";
+  const url = new URL(baseUrl);
+  url.searchParams.set("job_id", jobId);
+  return url.toString();
+}
+async function fetchJson(url, init) {
+  const res = await fetch(url, init);
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) {
+    const message = typeof data === "object" && data && "error" in data && data.error ? String(data.error) : `Syncsnap request failed (${res.status})`;
+    throw new Error(message);
+  }
+  return data;
+}
+
+// src/components/SyncsnapQrCode.tsx
+import { jsx } from "react/jsx-runtime";
+function SyncsnapQrCode({
+  jobId,
+  baseUrl,
+  size = 240,
+  className,
+  errorCorrectionLevel = "M"
+}) {
+  const [dataUrl, setDataUrl] = useState(null);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    let mounted = true;
+    const url = createUploadUrl(jobId, { baseUrl });
+    QRCode.toDataURL(url, {
+      width: size,
+      errorCorrectionLevel
+    }).then((value) => {
+      if (!mounted) return;
+      setDataUrl(value);
+      setError(null);
+    }).catch((err) => {
+      if (!mounted) return;
+      setDataUrl(null);
+      setError(
+        err instanceof Error ? err : new Error("Failed to generate QR")
+      );
+    });
+    return () => {
+      mounted = false;
+    };
+  }, [jobId, baseUrl, size, errorCorrectionLevel]);
+  if (error) {
+    return null;
+  }
+  if (!dataUrl) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: dataUrl,
+      alt: "Syncsnap QR code",
+      width: size,
+      height: size,
+      className,
+      style: {
+        display: "block",
+        margin: "0 auto",
+        width: size,
+        height: size
+      }
+    }
+  );
+}
+
+// src/components/SyncsnapUploadButton.tsx
+import { useCallback as useCallback2, useEffect as useEffect3, useState as useState3 } from "react";
+
+// src/hooks/useSyncsnapJob.ts
+import { useCallback, useEffect as useEffect2, useRef, useState as useState2 } from "react";
+function defaultGetJobUrl(jobId) {
+  return `/api/syncsnap/job/${encodeURIComponent(jobId)}`;
+}
+function defaultGetWaitForCompletionUrl(getJobUrl) {
+  return (jobId) => {
+    const base = getJobUrl(jobId).replace(/\/$/, "");
+    return `${base}/wait`;
+  };
+}
+function useSyncsnapJob(options = {}) {
+  const getJobUrlFn = options.getJobUrl ?? defaultGetJobUrl;
+  const {
+    createJobUrl = "/api/syncsnap/job",
+    getWaitForCompletionUrl = defaultGetWaitForCompletionUrl(getJobUrlFn),
+    waitTimeoutMs = 12e4,
+    waitIntervalMs = 2e3,
+    autoStart = false,
+    onJobCreated,
+    onCompleted,
+    onError
+  } = options;
+  const [job, setJob] = useState2(null);
+  const [error, setError] = useState2(null);
+  const [isWaiting, setIsWaiting] = useState2(false);
+  const abortControllerRef = useRef(null);
+  const start = useCallback(async () => {
+    setError(null);
+    abortControllerRef.current?.abort();
+    abortControllerRef.current = new AbortController();
+    const signal = abortControllerRef.current.signal;
+    try {
+      const created = await fetchJson(createJobUrl, {
+        method: "POST"
+      });
+      const createdJob = {
+        ...created,
+        fileName: null
+      };
+      setJob(createdJob);
+      onJobCreated?.(created);
+      const waitUrl = getWaitForCompletionUrl(created.id);
+      const url = new URL(
+        waitUrl,
+        typeof window !== "undefined" ? window.location.origin : "http://localhost"
+      );
+      url.searchParams.set("timeoutMs", String(waitTimeoutMs));
+      url.searchParams.set("intervalMs", String(waitIntervalMs));
+      setIsWaiting(true);
+      const { job: finalJob, result } = await fetchJson(
+        url.toString(),
+        {
+          signal
+        }
+      );
+      setJob(null);
+      setIsWaiting(false);
+      onCompleted?.(finalJob, result);
+    } catch (err) {
+      setIsWaiting(false);
+      setJob(null);
+      if (signal.aborted) {
+        return;
+      }
+      const error2 = err instanceof Error ? err : new Error("Syncsnap job failed");
+      setError(error2);
+      onError?.(error2);
+    }
+  }, [
+    createJobUrl,
+    getWaitForCompletionUrl,
+    waitTimeoutMs,
+    waitIntervalMs,
+    onJobCreated,
+    onCompleted,
+    onError
+  ]);
+  const reset = useCallback(() => {
+    abortControllerRef.current?.abort();
+    abortControllerRef.current = null;
+    setJob(null);
+    setIsWaiting(false);
+    setError(null);
+  }, []);
+  useEffect2(() => {
+    if (autoStart) {
+      void start();
+    }
+  }, [autoStart, start]);
+  return {
+    job,
+    jobId: job?.id ?? null,
+    status: job?.status ?? null,
+    error,
+    isWaiting,
+    start,
+    reset
+  };
+}
+
+// src/components/ui/button.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/ui/button.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+        destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-8",
+        "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(function Button2({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}, ref) {
+  const Comp = asChild ? Slot.Root : "button";
+  return /* @__PURE__ */ jsx2(
+    Comp,
+    {
+      ref,
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+});
+Button.displayName = "Button";
+
+// src/components/ui/dialog.tsx
+import * as React2 from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+var DialogOverlay = React2.forwardRef(function DialogOverlay2({ className, style, ...props }, ref) {
+  return /* @__PURE__ */ jsx3(
+    DialogPrimitive.Overlay,
+    {
+      ref,
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50",
+        className
+      ),
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 50,
+        backgroundColor: "rgba(0,0,0,0.5)",
+        ...style
+      },
+      ...props
+    }
+  );
+});
+DialogOverlay.displayName = "DialogOverlay";
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx3(DialogOverlay, {}),
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 50,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "1rem",
+          pointerEvents: "none"
+        },
+        children: /* @__PURE__ */ jsxs(
+          DialogPrimitive.Content,
+          {
+            "data-slot": "dialog-content",
+            className: cn(
+              "bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm w-full outline-none",
+              className
+            ),
+            style: {
+              ...style,
+              position: "relative",
+              pointerEvents: "auto",
+              maxWidth: "24rem",
+              width: "100%",
+              padding: "1rem",
+              backgroundColor: "white",
+              borderRadius: "0.75rem",
+              boxShadow: "0 25px 50px -12px rgba(0,0,0,0.25)"
+            },
+            ...props,
+            children: [
+              children,
+              showCloseButton && /* @__PURE__ */ jsx3(DialogPrimitive.Close, { "data-slot": "dialog-close", asChild: true, children: /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "ghost",
+                  className: "absolute top-2 right-2",
+                  size: "icon-sm",
+                  children: [
+                    /* @__PURE__ */ jsx3(XIcon, {}),
+                    /* @__PURE__ */ jsx3("span", { className: "sr-only", children: "Close" })
+                  ]
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("gap-2 flex flex-col", className),
+      ...props
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-base leading-none font-medium", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn(
+        "text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/SyncsnapUploadButton.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function SyncsnapUploadButton({
+  buttonText = "Start upload",
+  className,
+  qrSize = 240,
+  qrBaseUrl,
+  errorCorrectionLevel = "M",
+  onCompleted: userOnCompleted,
+  onError: userOnError,
+  ...options
+}) {
+  const [dialogOpen, setDialogOpen] = useState3(false);
+  const [completedResult, setCompletedResult] = useState3(null);
+  const [completedError, setCompletedError] = useState3(null);
+  const handleCompleted = useCallback2(
+    (job, result) => {
+      setCompletedResult({ job, result });
+      setCompletedError(null);
+      setDialogOpen(false);
+      userOnCompleted?.(job, result);
+    },
+    [userOnCompleted]
+  );
+  const handleError = useCallback2(
+    (err) => {
+      setCompletedError(err);
+      setCompletedResult(null);
+      setDialogOpen(false);
+      userOnError?.(err);
+    },
+    [userOnError]
+  );
+  const { jobId, status, start, isWaiting, error, reset } = useSyncsnapJob({
+    ...options,
+    onCompleted: handleCompleted,
+    onError: handleError
+  });
+  useEffect3(() => {
+    if (jobId) setDialogOpen(true);
+  }, [jobId]);
+  const onClick = useCallback2(() => {
+    setCompletedResult(null);
+    setCompletedError(null);
+    setDialogOpen(true);
+    void start();
+  }, [start]);
+  const onOpenChange = useCallback2(
+    (open) => {
+      setDialogOpen(open);
+      if (!open) {
+        reset();
+      }
+    },
+    [reset]
+  );
+  const downloadUrl = completedResult?.result && typeof completedResult.result === "object" && completedResult.result !== null && "downloadUrl" in completedResult.result ? completedResult.result.downloadUrl : void 0;
+  return /* @__PURE__ */ jsxs2("div", { className, children: [
+    /* @__PURE__ */ jsx4(Button, { type: "button", onClick, disabled: isWaiting, children: isWaiting ? "Preparing..." : buttonText }),
+    error ? /* @__PURE__ */ jsx4("p", { style: { color: "#dc2626", marginTop: 8 }, children: error.message }) : null,
+    completedError ? /* @__PURE__ */ jsx4("p", { style: { color: "#dc2626", marginTop: 8 }, children: completedError.message }) : null,
+    downloadUrl ? /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        style: {
+          marginTop: 16,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center"
+        },
+        children: [
+          /* @__PURE__ */ jsx4("p", { style: { margin: "0 0 8px", fontSize: 14, color: "#555" }, children: "Upload complete" }),
+          /* @__PURE__ */ jsx4(
+            "img",
+            {
+              src: downloadUrl,
+              alt: "Uploaded",
+              style: {
+                maxWidth: "100%",
+                height: "auto",
+                borderRadius: 8,
+                border: "1px solid #e5e5e5"
+              }
+            }
+          )
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ jsx4(Dialog, { open: dialogOpen, onOpenChange, children: /* @__PURE__ */ jsxs2(
+      DialogContent,
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "1fr",
+          justifyItems: "center"
+        },
+        children: [
+          /* @__PURE__ */ jsxs2(DialogHeader, { children: [
+            /* @__PURE__ */ jsx4(DialogTitle, { children: "Scan to upload" }),
+            /* @__PURE__ */ jsx4(DialogDescription, { children: "Scan this QR code with your phone to upload files" })
+          ] }),
+          jobId ? /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              style: {
+                width: "100%",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                textAlign: "center",
+                marginTop: 16
+              },
+              children: [
+                /* @__PURE__ */ jsx4(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      justifyContent: "center",
+                      width: "100%"
+                    },
+                    children: /* @__PURE__ */ jsx4(
+                      SyncsnapQrCode,
+                      {
+                        jobId,
+                        baseUrl: qrBaseUrl,
+                        size: qrSize,
+                        errorCorrectionLevel
+                      }
+                    )
+                  }
+                ),
+                status ? /* @__PURE__ */ jsxs2("p", { style: { margin: "8px 0 0", fontSize: 14 }, children: [
+                  "Status: ",
+                  status
+                ] }) : null,
+                /* @__PURE__ */ jsxs2(
+                  "p",
+                  {
+                    style: {
+                      margin: "16px 0 0",
+                      fontSize: 13,
+                      color: "#64748b"
+                    },
+                    children: [
+                      "Powered by",
+                      " ",
+                      /* @__PURE__ */ jsx4(
+                        "a",
+                        {
+                          href: "https://syncsnap.com",
+                          target: "_blank",
+                          rel: "noopener noreferrer",
+                          children: "SyncSnap"
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          ) : null
+        ]
+      }
+    ) })
+  ] });
+}
+export {
+  SyncsnapQrCode,
+  SyncsnapUploadButton,
+  createUploadUrl,
+  useSyncsnapJob
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SyncsnapQrCode.tsx","../src/utils.ts","../src/components/SyncsnapUploadButton.tsx","../src/hooks/useSyncsnapJob.ts","../src/components/ui/button.tsx","../src/lib/utils.ts","../src/components/ui/dialog.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\nimport QRCode from 'qrcode';\nimport type { SyncsnapQrCodeProps } from '../types';\nimport { createUploadUrl } from '../utils';\n\nexport function SyncsnapQrCode({\n  jobId,\n  baseUrl,\n  size = 240,\n  className,\n  errorCorrectionLevel = 'M',\n}: SyncsnapQrCodeProps) {\n  const [dataUrl, setDataUrl] = useState<string | null>(null);\n  const [error, setError] = useState<Error | null>(null);\n\n  useEffect(() => {\n    let mounted = true;\n    const url = createUploadUrl(jobId, { baseUrl });\n\n    QRCode.toDataURL(url, {\n      width: size,\n      errorCorrectionLevel,\n    })\n      .then((value) => {\n        if (!mounted) return;\n        setDataUrl(value);\n        setError(null);\n      })\n      .catch((err) => {\n        if (!mounted) return;\n        setDataUrl(null);\n        setError(\n          err instanceof Error ? err : new Error('Failed to generate QR')\n        );\n      });\n\n    return () => {\n      mounted = false;\n    };\n  }, [jobId, baseUrl, size, errorCorrectionLevel]);\n\n  if (error) {\n    return null;\n  }\n\n  if (!dataUrl) {\n    return null;\n  }\n\n  return (\n    <img\n      src={dataUrl}\n      alt=\"Syncsnap QR code\"\n      width={size}\n      height={size}\n      className={className}\n      style={{\n        display: 'block',\n        margin: '0 auto',\n        width: size,\n        height: size,\n      }}\n    />\n  );\n}\n","export function createUploadUrl(\n  jobId: string,\n  options?: { baseUrl?: string }\n): string {\n  const baseUrl = options?.baseUrl ?? 'https://upload.syncsnap.xyz/';\n  const url = new URL(baseUrl);\n  url.searchParams.set('job_id', jobId);\n  return url.toString();\n}\n\nexport async function fetchJson<T>(\n  url: string,\n  init?: RequestInit\n): Promise<T> {\n  const res = await fetch(url, init);\n  const data = (await res.json().catch(() => ({}))) as T & {\n    error?: string;\n  };\n\n  if (!res.ok) {\n    const message =\n      typeof data === 'object' && data && 'error' in data && data.error\n        ? String(data.error)\n        : `Syncsnap request failed (${res.status})`;\n    throw new Error(message);\n  }\n\n  return data as T;\n}\n","'use client';\n\nimport { useCallback, useEffect, useState } from 'react';\nimport type { Job, SyncsnapUploadButtonProps } from '../types';\nimport { SyncsnapQrCode } from './SyncsnapQrCode';\nimport { useSyncsnapJob } from '../hooks/useSyncsnapJob';\nimport { Button } from './ui/button';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from './ui/dialog';\n\ntype CompletionResult = { job: Job; result?: unknown };\ntype ResultWithDownloadUrl = { downloadUrl?: string };\n\nexport function SyncsnapUploadButton({\n  buttonText = 'Start upload',\n  className,\n  qrSize = 240,\n  qrBaseUrl,\n  errorCorrectionLevel = 'M',\n  onCompleted: userOnCompleted,\n  onError: userOnError,\n  ...options\n}: SyncsnapUploadButtonProps) {\n  const [dialogOpen, setDialogOpen] = useState(false);\n  const [completedResult, setCompletedResult] =\n    useState<CompletionResult | null>(null);\n  const [completedError, setCompletedError] = useState<Error | null>(null);\n\n  const handleCompleted = useCallback(\n    (job: Job, result?: unknown) => {\n      setCompletedResult({ job, result });\n      setCompletedError(null);\n      setDialogOpen(false);\n      userOnCompleted?.(job, result);\n    },\n    [userOnCompleted]\n  );\n\n  const handleError = useCallback(\n    (err: Error) => {\n      setCompletedError(err);\n      setCompletedResult(null);\n      setDialogOpen(false);\n      userOnError?.(err);\n    },\n    [userOnError]\n  );\n\n  const { jobId, status, start, isWaiting, error, reset } = useSyncsnapJob({\n    ...options,\n    onCompleted: handleCompleted,\n    onError: handleError,\n  });\n\n  // Open dialog when we have a job id\n  useEffect(() => {\n    if (jobId) setDialogOpen(true);\n  }, [jobId]);\n\n  const onClick = useCallback(() => {\n    setCompletedResult(null);\n    setCompletedError(null);\n    setDialogOpen(true);\n    void start();\n  }, [start]);\n\n  const onOpenChange = useCallback(\n    (open: boolean) => {\n      setDialogOpen(open);\n      if (!open) {\n        reset();\n      }\n    },\n    [reset]\n  );\n\n  const downloadUrl =\n    completedResult?.result &&\n    typeof completedResult.result === 'object' &&\n    completedResult.result !== null &&\n    'downloadUrl' in completedResult.result\n      ? (completedResult.result as ResultWithDownloadUrl).downloadUrl\n      : undefined;\n\n  return (\n    <div className={className}>\n      <Button type=\"button\" onClick={onClick} disabled={isWaiting}>\n        {isWaiting ? 'Preparing...' : buttonText}\n      </Button>\n      {error ? (\n        <p style={{ color: '#dc2626', marginTop: 8 }}>{error.message}</p>\n      ) : null}\n      {completedError ? (\n        <p style={{ color: '#dc2626', marginTop: 8 }}>\n          {completedError.message}\n        </p>\n      ) : null}\n      {downloadUrl ? (\n        <div\n          style={{\n            marginTop: 16,\n            display: 'flex',\n            flexDirection: 'column',\n            alignItems: 'center',\n          }}\n        >\n          <p style={{ margin: '0 0 8px', fontSize: 14, color: '#555' }}>\n            Upload complete\n          </p>\n          <img\n            src={downloadUrl}\n            alt=\"Uploaded\"\n            style={{\n              maxWidth: '100%',\n              height: 'auto',\n              borderRadius: 8,\n              border: '1px solid #e5e5e5',\n            }}\n          />\n        </div>\n      ) : null}\n      <Dialog open={dialogOpen} onOpenChange={onOpenChange}>\n        <DialogContent\n          style={{\n            display: 'grid',\n            gridTemplateColumns: '1fr',\n            justifyItems: 'center',\n          }}\n        >\n          <DialogHeader>\n            <DialogTitle>Scan to upload</DialogTitle>\n            <DialogDescription>\n              Scan this QR code with your phone to upload files\n            </DialogDescription>\n          </DialogHeader>\n          {jobId ? (\n            <div\n              style={{\n                width: '100%',\n                display: 'flex',\n                flexDirection: 'column',\n                alignItems: 'center',\n                textAlign: 'center',\n                marginTop: 16,\n              }}\n            >\n              <div\n                style={{\n                  display: 'flex',\n                  justifyContent: 'center',\n                  width: '100%',\n                }}\n              >\n                <SyncsnapQrCode\n                  jobId={jobId}\n                  baseUrl={qrBaseUrl}\n                  size={qrSize}\n                  errorCorrectionLevel={errorCorrectionLevel}\n                />\n              </div>\n              {status ? (\n                <p style={{ margin: '8px 0 0', fontSize: 14 }}>\n                  Status: {status}\n                </p>\n              ) : null}\n              <p\n                style={{\n                  margin: '16px 0 0',\n                  fontSize: 13,\n                  color: '#64748b',\n                }}\n              >\n                Powered by{' '}\n                <a\n                  href=\"https://syncsnap.com\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                >\n                  SyncSnap\n                </a>\n              </p>\n            </div>\n          ) : null}\n        </DialogContent>\n      </Dialog>\n    </div>\n  );\n}\n","'use client';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport type {\n  CreateJobResponse,\n  Job,\n  UseSyncsnapJobOptions,\n  UseSyncsnapJobResult,\n} from '../types';\nimport { fetchJson } from '../utils';\n\nfunction defaultGetJobUrl(jobId: string): string {\n  return `/api/syncsnap/job/${encodeURIComponent(jobId)}`;\n}\n\nfunction defaultGetWaitForCompletionUrl(\n  getJobUrl: (jobId: string) => string\n): (jobId: string) => string {\n  return (jobId: string): string => {\n    const base = getJobUrl(jobId).replace(/\\/$/, '');\n    return `${base}/wait`;\n  };\n}\n\ninterface WaitCompletionResponse {\n  job: Job;\n  result?: unknown;\n}\n\nexport function useSyncsnapJob(\n  options: UseSyncsnapJobOptions = {}\n): UseSyncsnapJobResult {\n  const getJobUrlFn = options.getJobUrl ?? defaultGetJobUrl;\n  const {\n    createJobUrl = '/api/syncsnap/job',\n    getWaitForCompletionUrl = defaultGetWaitForCompletionUrl(getJobUrlFn),\n    waitTimeoutMs = 120000,\n    waitIntervalMs = 2000,\n    autoStart = false,\n    onJobCreated,\n    onCompleted,\n    onError,\n  } = options;\n\n  const [job, setJob] = useState<Job | null>(null);\n  const [error, setError] = useState<Error | null>(null);\n  const [isWaiting, setIsWaiting] = useState(false);\n  const abortControllerRef = useRef<AbortController | null>(null);\n\n  const start = useCallback(async () => {\n    setError(null);\n    abortControllerRef.current?.abort();\n    abortControllerRef.current = new AbortController();\n    const signal = abortControllerRef.current.signal;\n\n    try {\n      const created = await fetchJson<CreateJobResponse>(createJobUrl, {\n        method: 'POST',\n      });\n      const createdJob: Job = {\n        ...created,\n        fileName: null,\n      };\n      setJob(createdJob);\n      onJobCreated?.(created);\n\n      const waitUrl = getWaitForCompletionUrl(created.id);\n      const url = new URL(\n        waitUrl,\n        typeof window !== 'undefined'\n          ? window.location.origin\n          : 'http://localhost'\n      );\n      url.searchParams.set('timeoutMs', String(waitTimeoutMs));\n      url.searchParams.set('intervalMs', String(waitIntervalMs));\n\n      setIsWaiting(true);\n      const { job: finalJob, result } = await fetchJson<WaitCompletionResponse>(\n        url.toString(),\n        {\n          signal,\n        }\n      );\n      setJob(null);\n      setIsWaiting(false);\n      onCompleted?.(finalJob, result);\n    } catch (err) {\n      setIsWaiting(false);\n      setJob(null);\n      if (signal.aborted) {\n        return;\n      }\n      const error =\n        err instanceof Error ? err : new Error('Syncsnap job failed');\n      setError(error);\n      onError?.(error);\n    }\n  }, [\n    createJobUrl,\n    getWaitForCompletionUrl,\n    waitTimeoutMs,\n    waitIntervalMs,\n    onJobCreated,\n    onCompleted,\n    onError,\n  ]);\n\n  const reset = useCallback(() => {\n    abortControllerRef.current?.abort();\n    abortControllerRef.current = null;\n    setJob(null);\n    setIsWaiting(false);\n    setError(null);\n  }, []);\n\n  useEffect(() => {\n    if (autoStart) {\n      void start();\n    }\n  }, [autoStart, start]);\n\n  return {\n    job,\n    jobId: job?.id ?? null,\n    status: job?.status ?? null,\n    error,\n    isWaiting,\n    start,\n    reset,\n  };\n}\n","import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Slot } from 'radix-ui';\n\nimport { cn } from '../../lib/utils';\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',\n        outline:\n          'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',\n        ghost:\n          'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',\n        destructive:\n          'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default:\n          'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',\n        icon: 'size-8',\n        'icon-xs':\n          \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n        'icon-sm':\n          'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',\n        'icon-lg': 'size-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n);\n\nconst Button = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<'button'> &\n    VariantProps<typeof buttonVariants> & {\n      asChild?: boolean;\n    }\n>(function Button(\n  {\n    className,\n    variant = 'default',\n    size = 'default',\n    asChild = false,\n    ...props\n  },\n  ref\n) {\n  const Comp = asChild ? Slot.Root : 'button';\n\n  return (\n    <Comp\n      ref={ref}\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n});\nButton.displayName = 'Button';\n\nexport { Button, buttonVariants };\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import * as React from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\n\nimport { cn } from '../../lib/utils';\nimport { Button } from './button';\nimport { XIcon } from 'lucide-react';\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nconst DialogOverlay = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentProps<typeof DialogPrimitive.Overlay>\n>(function DialogOverlay({ className, style, ...props }, ref) {\n  return (\n    <DialogPrimitive.Overlay\n      ref={ref}\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50',\n        className\n      )}\n      style={{\n        position: 'fixed',\n        inset: 0,\n        zIndex: 50,\n        backgroundColor: 'rgba(0,0,0,0.5)',\n        ...style,\n      }}\n      {...props}\n    />\n  );\n});\nDialogOverlay.displayName = 'DialogOverlay';\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  style,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean;\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      {/* Wrapper ensures dialog is centered on screen (flexbox avoids transform/containing-block issues) */}\n      <div\n        style={{\n          position: 'fixed',\n          inset: 0,\n          zIndex: 50,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          padding: '1rem',\n          pointerEvents: 'none',\n        }}\n      >\n        <DialogPrimitive.Content\n          data-slot=\"dialog-content\"\n          className={cn(\n            'bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm w-full outline-none',\n            className\n          )}\n          style={{\n            ...style,\n            position: 'relative',\n            pointerEvents: 'auto',\n            maxWidth: '24rem',\n            width: '100%',\n            padding: '1rem',\n            backgroundColor: 'white',\n            borderRadius: '0.75rem',\n            boxShadow: '0 25px 50px -12px rgba(0,0,0,0.25)',\n          }}\n          {...props}\n        >\n          {children}\n          {showCloseButton && (\n            <DialogPrimitive.Close data-slot=\"dialog-close\" asChild>\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-2 right-2\"\n                size=\"icon-sm\"\n              >\n                <XIcon />\n                <span className=\"sr-only\">Close</span>\n              </Button>\n            </DialogPrimitive.Close>\n          )}\n        </DialogPrimitive.Content>\n      </div>\n    </DialogPortal>\n  );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn('gap-2 flex flex-col', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<'div'> & {\n  showCloseButton?: boolean;\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        'bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  );\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn('text-base leading-none font-medium', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        'text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n"],"mappings":"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","names":["useCallback","useEffect","useState","useEffect","useState","useState","error","useEffect","jsx","Button","React","jsx","jsx","DialogOverlay","jsx","jsx","jsx","jsxs","useState","useCallback","useEffect"]}

package/dist/styles/globals.css

@@ -0,0 +1,122 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@import 'shadcn/tailwind.css';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/dist/theme.css

@@ -0,0 +1,130 @@
+/**
+ * Theme variables and Tailwind mapping for @syncsnap/react components.
+ * Import this in your app's main CSS after Tailwind.
+ *
+ * Example (Tailwind v4) in app/globals.css:
+ *   @import "tailwindcss";
+ *   @import "tw-animate-css";
+ *   @import "shadcn/tailwind.css";
+ *   @import "@syncsnap/react/theme";
+ */
+@source "../**/*.{ts,tsx}";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@syncsnap/react",
+  "version": "1.0.0",
+  "description": "Syncsnap client SDK for React",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles": "./dist/styles/globals.css",
+    "./theme": "./dist/theme.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "lint": "eslint . --max-warnings 0",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "build": "tsup src/index.tsx --dts --format esm --out-dir dist --clean --sourcemap && node -e \"const fs=require('fs'); fs.mkdirSync('dist/styles',{recursive:true}); fs.copyFileSync('src/styles/globals.css','dist/styles/globals.css'); fs.copyFileSync('src/styles/theme.css','dist/theme.css');\"",
+    "publish": "npm publish --access public",
+    "publish:ci": "npm publish --provenance --access public",
+    "link": "npm run build && npm link",
+    "prepublishOnly": "npm run build",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/syncsnap/packages.git",
+    "directory": "react"
+  },
+  "homepage": "https://github.com/syncsnap/packages/react#readme",
+  "bugs": {
+    "url": "https://github.com/syncsnap/packages/react/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "syncsnap",
+    "react",
+    "sdk",
+    "upload",
+    "file-sync"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.15",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.575.0",
+    "qrcode": "^1.5.3",
+    "radix-ui": "^1.4.3",
+    "shadcn": "^3.8.5",
+    "tailwind-merge": "^2.6.1",
+    "tw-animate-css": "^1.4.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "tailwindcss": "^3.0.0 || ^4.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@types/qrcode": "^1.5.6",
+    "@types/react": "^19.2.13",
+    "@vitejs/plugin-react": "^4.3.4",
+    "jsdom": "^25.0.1",
+    "tsup": "^8.0.1",
+    "typescript": "^5.4.0",
+    "vitest": "^2.1.0",
+    "eslint-plugin-react": "^7.37.0",
+    "eslint-plugin-react-hooks": "^5.0.0"
+  }
+}