@plugable-io/react 0.0.7 → 0.0.10

package/dist/index.mjs

@@ -1,6 +1,112 @@
 // src/PlugableProvider.tsx
-import { createContext, useContext, useMemo, useCallback, useRef, useState } from "react";
+import { createContext, useContext, useMemo, useCallback, useRef, useState, useEffect } from "react";
 import { BucketClient } from "@plugable-io/js";
+
+// src/utils/theme.ts
+var defaultLightTheme = {
+  // Purple to blue accent gradient
+  accentPrimary: "#9333ea",
+  // purple-600
+  accentSecondary: "#2563eb",
+  // blue-600
+  accentHover: "#7c3aed",
+  // purple-700
+  // Light backgrounds
+  baseBg: "#ffffff",
+  baseSurface: "#f8fafc",
+  // slate-50
+  baseBorder: "#e2e8f0",
+  // slate-200
+  // Dark text on light
+  textPrimary: "#0f172a",
+  // slate-900
+  textSecondary: "#475569",
+  // slate-600
+  textMuted: "#94a3b8",
+  // slate-400
+  // State colors
+  success: "#10b981",
+  // green-500
+  error: "#ef4444",
+  // red-500
+  warning: "#f59e0b",
+  // amber-500
+  // Overlay
+  overlay: "rgba(0, 0, 0, 0.05)",
+  backdropBlur: "blur(12px)"
+};
+var defaultDarkTheme = {
+  // Purple to blue accent gradient (same as light)
+  accentPrimary: "#9333ea",
+  accentSecondary: "#2563eb",
+  accentHover: "#a855f7",
+  // purple-500 (lighter for dark mode)
+  // Dark backgrounds
+  baseBg: "#0f172a",
+  // slate-900
+  baseSurface: "rgba(30, 41, 59, 0.5)",
+  // slate-800/50 with transparency
+  baseBorder: "rgba(255, 255, 255, 0.1)",
+  // Light text on dark
+  textPrimary: "#f1f5f9",
+  // slate-100
+  textSecondary: "#cbd5e1",
+  // slate-300
+  textMuted: "#64748b",
+  // slate-500
+  // State colors (slightly adjusted for dark mode)
+  success: "#34d399",
+  // green-400
+  error: "#f87171",
+  // red-400
+  warning: "#fbbf24",
+  // amber-400
+  // Overlay
+  overlay: "rgba(0, 0, 0, 0.3)",
+  backdropBlur: "blur(24px)"
+};
+function getThemeColors(config = {}) {
+  const { theme = "dark", accentColor, baseColor } = config;
+  const isDark = theme === "dark" || theme === "auto" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+  const colors = isDark ? { ...defaultDarkTheme } : { ...defaultLightTheme };
+  if (accentColor) {
+    colors.accentPrimary = accentColor;
+    colors.accentSecondary = accentColor;
+    colors.accentHover = accentColor;
+  }
+  if (baseColor) {
+    colors.baseBg = baseColor;
+    colors.baseSurface = baseColor;
+  }
+  return colors;
+}
+function generateCSSVariables(colors) {
+  return {
+    "--plugable-accent-primary": colors.accentPrimary,
+    "--plugable-accent-secondary": colors.accentSecondary,
+    "--plugable-accent-hover": colors.accentHover,
+    "--plugable-base-bg": colors.baseBg,
+    "--plugable-base-surface": colors.baseSurface,
+    "--plugable-base-border": colors.baseBorder,
+    "--plugable-text-primary": colors.textPrimary,
+    "--plugable-text-secondary": colors.textSecondary,
+    "--plugable-text-muted": colors.textMuted,
+    "--plugable-success": colors.success,
+    "--plugable-error": colors.error,
+    "--plugable-warning": colors.warning,
+    "--plugable-overlay": colors.overlay,
+    "--plugable-backdrop-blur": colors.backdropBlur
+  };
+}
+function applyCSSVariables(element, config = {}) {
+  const colors = getThemeColors(config);
+  const variables = generateCSSVariables(colors);
+  Object.entries(variables).forEach(([key, value]) => {
+    element.style.setProperty(key, value);
+  });
+}
+
+// src/PlugableProvider.tsx
 import { jsx } from "react/jsx-runtime";
 var PlugableContext = createContext(null);
 function createAuthTokenGetter(authProvider, clerkJWTTemplate) {
@@ -45,6 +151,13 @@ function createAuthTokenGetter(authProvider, clerkJWTTemplate) {
           "Firebase not found. Please ensure firebase is installed and initialized, or provide a custom getToken function."
         );
       };
+    case "generic_jwks":
+    case "generic_jwt":
+      return async () => {
+        throw new Error(
+          `Manual token required for ${authProvider}. Please provide a custom getToken function.`
+        );
+      };
     default:
       throw new Error(
         `Unknown auth provider: ${authProvider}. Please provide either a valid authProvider or a custom getToken function.`
@@ -58,11 +171,15 @@ function PlugableProvider({
   authProvider,
   clerkJWTTemplate,
   baseUrl,
-  staleTime = 5 * 60 * 1e3
+  staleTime = 5 * 60 * 1e3,
   // Default 5 minutes
+  accentColor,
+  baseColor,
+  theme = "dark"
 }) {
   const listenersRef = useRef({});
   const [cache, setCacheState] = useState(/* @__PURE__ */ new Map());
+  const containerRef = useRef(null);
   const client = useMemo(() => {
     if (!getToken && !authProvider) {
       throw new Error(
@@ -132,7 +249,12 @@ function PlugableProvider({
     }),
     [client, bucketId, on, emit, baseUrl, staleTime, getCache, setCache, invalidateCache]
   );
-  return /* @__PURE__ */ jsx(PlugableContext.Provider, { value, children });
+  useEffect(() => {
+    if (containerRef.current) {
+      applyCSSVariables(containerRef.current, { accentColor, baseColor, theme });
+    }
+  }, [accentColor, baseColor, theme]);
+  return /* @__PURE__ */ jsx(PlugableContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { ref: containerRef, className: "plugable-root", children }) });
 }
 function usePlugable() {
   const context = useContext(PlugableContext);
@@ -277,6 +399,74 @@ function Dropzone({
       }
     );
   }
+  const containerStyle = {
+    position: "relative",
+    border: `2px dashed ${isDragActive ? "var(--plugable-accent-primary)" : "var(--plugable-base-border)"}`,
+    borderRadius: "12px",
+    padding: "48px 24px",
+    textAlign: "center",
+    cursor: "pointer",
+    background: isDragActive ? "var(--plugable-accent-primary)10" : "var(--plugable-base-surface)",
+    backdropFilter: "var(--plugable-backdrop-blur)",
+    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+    ...style
+  };
+  const iconContainerStyle = {
+    width: "48px",
+    height: "48px",
+    margin: "0 auto 16px",
+    borderRadius: "50%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: isDragActive ? `linear-gradient(135deg, var(--plugable-accent-primary), var(--plugable-accent-secondary))` : "var(--plugable-overlay)",
+    transition: "all 0.3s ease",
+    transform: isDragActive ? "scale(1.1)" : "scale(1)"
+  };
+  const cloudIconStyle = {
+    width: "24px",
+    height: "24px",
+    color: isDragActive ? "#fff" : "var(--plugable-accent-primary)"
+  };
+  const titleStyle = {
+    margin: 0,
+    fontWeight: 600,
+    fontSize: "16px",
+    color: "var(--plugable-text-primary)",
+    marginBottom: "8px"
+  };
+  const subtitleStyle = {
+    margin: 0,
+    fontSize: "14px",
+    color: "var(--plugable-text-secondary)"
+  };
+  const maxFilesStyle = {
+    margin: "4px 0 0 0",
+    fontSize: "12px",
+    color: "var(--plugable-text-muted)"
+  };
+  const progressContainerStyle = {
+    marginTop: "16px"
+  };
+  const progressItemStyle = {
+    marginBottom: "12px",
+    textAlign: "left"
+  };
+  const progressLabelStyle = {
+    fontSize: "14px",
+    color: "var(--plugable-text-secondary)",
+    marginBottom: "6px",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center"
+  };
+  const progressBarBgStyle = {
+    width: "100%",
+    height: "6px",
+    backgroundColor: "var(--plugable-overlay)",
+    borderRadius: "3px",
+    overflow: "hidden"
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -285,16 +475,7 @@ function Dropzone({
       onDragLeave: handleDragLeave,
       onClick: openFileDialog,
       className,
-      style: {
-        border: `2px dashed ${isDragActive ? "#0070f3" : "#ccc"}`,
-        borderRadius: "8px",
-        padding: "40px 20px",
-        textAlign: "center",
-        cursor: "pointer",
-        backgroundColor: isDragActive ? "#f0f8ff" : "#fafafa",
-        transition: "all 0.2s ease",
-        ...style
-      },
+      style: containerStyle,
       children: [
         /* @__PURE__ */ jsx2(
           "input",
@@ -308,42 +489,34 @@ function Dropzone({
           }
         ),
         isUploading ? /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx2("p", { style: { margin: 0, fontWeight: "bold", color: "#333" }, children: "Uploading..." }),
-          /* @__PURE__ */ jsx2("div", { style: { marginTop: "16px" }, children: Object.entries(uploadProgress).map(([fileName, progress]) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: "8px" }, children: [
-            /* @__PURE__ */ jsxs("div", { style: { fontSize: "14px", color: "#666", marginBottom: "4px" }, children: [
-              fileName,
-              ": ",
-              progress,
-              "%"
+          /* @__PURE__ */ jsx2("div", { style: iconContainerStyle, children: /* @__PURE__ */ jsx2("svg", { style: cloudIconStyle, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" }) }) }),
+          /* @__PURE__ */ jsx2("p", { style: titleStyle, children: "Uploading..." }),
+          /* @__PURE__ */ jsx2("div", { style: progressContainerStyle, children: Object.entries(uploadProgress).map(([fileName, progress]) => /* @__PURE__ */ jsxs("div", { style: progressItemStyle, children: [
+            /* @__PURE__ */ jsxs("div", { style: progressLabelStyle, children: [
+              /* @__PURE__ */ jsx2("span", { children: fileName }),
+              /* @__PURE__ */ jsxs("span", { style: { fontWeight: 600 }, children: [
+                progress,
+                "%"
+              ] })
             ] }),
-            /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsx2("div", { style: progressBarBgStyle, children: /* @__PURE__ */ jsx2(
               "div",
               {
                 style: {
-                  width: "100%",
-                  height: "8px",
-                  backgroundColor: "#e0e0e0",
-                  borderRadius: "4px",
-                  overflow: "hidden"
-                },
-                children: /* @__PURE__ */ jsx2(
-                  "div",
-                  {
-                    style: {
-                      width: `${progress}%`,
-                      height: "100%",
-                      backgroundColor: "#0070f3",
-                      transition: "width 0.3s ease"
-                    }
-                  }
-                )
+                  width: `${progress}%`,
+                  height: "100%",
+                  background: `linear-gradient(90deg, var(--plugable-accent-primary), var(--plugable-accent-secondary))`,
+                  transition: "width 0.3s ease",
+                  borderRadius: "3px"
+                }
               }
-            )
+            ) })
           ] }, fileName)) })
         ] }) : /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx2("p", { style: { margin: 0, fontWeight: "bold", fontSize: "16px", color: "#333" }, children: isDragActive ? "Drop files here" : "Drag and drop files here" }),
-          /* @__PURE__ */ jsx2("p", { style: { margin: "8px 0 0 0", fontSize: "14px", color: "#666" }, children: "or click to select files" }),
-          maxFiles && maxFiles > 1 && /* @__PURE__ */ jsxs("p", { style: { margin: "4px 0 0 0", fontSize: "12px", color: "#999" }, children: [
+          /* @__PURE__ */ jsx2("div", { style: iconContainerStyle, children: /* @__PURE__ */ jsx2("svg", { style: cloudIconStyle, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" }) }) }),
+          /* @__PURE__ */ jsx2("p", { style: titleStyle, children: isDragActive ? "Drop files here" : "Click to upload or drag and drop" }),
+          /* @__PURE__ */ jsx2("p", { style: subtitleStyle, children: accept ? `Accepted: ${accept}` : "Any file type" }),
+          maxFiles && maxFiles > 1 && /* @__PURE__ */ jsxs("p", { style: maxFilesStyle, children: [
             "(Maximum ",
             maxFiles,
             " files)"
@@ -355,7 +528,7 @@ function Dropzone({
 }
 
 // src/hooks/useFiles.ts
-import { useState as useState3, useCallback as useCallback3, useEffect, useMemo as useMemo2, useRef as useRef2 } from "react";
+import { useState as useState3, useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2 } from "react";
 function useFiles({
   metadata,
   startPage = 1,
@@ -440,7 +613,7 @@ function useFiles({
       setIsLoading(false);
     }
   }, [client, stableMetadata, mediaType, perPage, orderBy, orderDirection, getCache, setCache, effectiveStaleTime]);
-  useEffect(() => {
+  useEffect2(() => {
     const paramsChanged = previousParamsRef.current !== null && previousParamsRef.current !== paramsKeyWithPage;
     const isInitialMount = isInitialMountRef.current;
     previousParamsRef.current = paramsKeyWithPage;
@@ -461,7 +634,7 @@ function useFiles({
       fetchFiles(page, true);
     }
   }, [paramsKeyWithPage, autoLoad, getCache, effectiveStaleTime, fetchFiles, page]);
-  useEffect(() => {
+  useEffect2(() => {
     const unsubscribe = on("file.uploaded", () => {
       fetchFiles(page, true);
     });
@@ -523,7 +696,7 @@ function FileList({
 }
 
 // src/components/FileImage.tsx
-import { useEffect as useEffect2, useState as useState4, useRef as useRef3 } from "react";
+import { useEffect as useEffect3, useState as useState4, useRef as useRef3 } from "react";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var imageCache = /* @__PURE__ */ new Map();
 function FileImage({
@@ -543,7 +716,7 @@ function FileImage({
   const [isLoading, setIsLoading] = useState4(true);
   const [error, setError] = useState4(null);
   const refetchAttemptedRef = useRef3(null);
-  useEffect2(() => {
+  useEffect3(() => {
     let isMounted = true;
     let objectUrl = null;
     const loadImage = async () => {
@@ -636,20 +809,25 @@ function FileImage({
     ...style
   };
   if (error) {
-    return /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsxs2(
       "div",
       {
         className,
         style: {
           ...imageStyle,
           display: "flex",
+          flexDirection: "column",
           alignItems: "center",
           justifyContent: "center",
-          backgroundColor: "#f0f0f0",
-          color: "#999",
-          fontSize: "14px"
+          backgroundColor: "var(--plugable-base-surface)",
+          color: "var(--plugable-text-muted)",
+          fontSize: "14px",
+          gap: "8px"
         },
-        children: "Failed to load image"
+        children: [
+          /* @__PURE__ */ jsx4("svg", { style: { width: "32px", height: "32px" }, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }),
+          /* @__PURE__ */ jsx4("span", { children: "Failed to load" })
+        ]
       }
     );
   }
@@ -660,29 +838,27 @@ function FileImage({
         className,
         style: {
           ...imageStyle,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          backgroundColor: "#f0f0f0"
+          position: "relative",
+          overflow: "hidden",
+          backgroundColor: "rgba(0, 0, 0, 0.02)"
         },
         children: [
           /* @__PURE__ */ jsx4(
             "div",
             {
               style: {
-                width: "40px",
-                height: "40px",
-                border: "3px solid #e0e0e0",
-                borderTop: "3px solid #0070f3",
-                borderRadius: "50%",
-                animation: "spin 1s linear infinite"
+                position: "absolute",
+                inset: 0,
+                background: "linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.3) 50%, transparent 60%)",
+                backgroundSize: "200% 100%",
+                animation: "shimmer-pulse 1.5s ease-in-out infinite"
               }
             }
           ),
           /* @__PURE__ */ jsx4("style", { children: `
-            @keyframes spin {
-              0% { transform: rotate(0deg); }
-              100% { transform: rotate(360deg); }
+            @keyframes shimmer-pulse {
+              0% { background-position: 200% 0; }
+              100% { background-position: -200% 0; }
             }
           ` })
         ]
@@ -695,7 +871,11 @@ function FileImage({
       src: imageSrc,
       alt: alt || file.name,
       className,
-      style: imageStyle,
+      style: {
+        ...imageStyle,
+        opacity: isLoading ? 0 : 1,
+        transition: "opacity 0.3s ease-in"
+      },
       onLoad: handleLoad,
       onError: handleError
     }
@@ -707,22 +887,36 @@ function clearImageCache() {
 }
 
 // src/components/FilePreview.tsx
-import { useState as useState5, useCallback as useCallback4, useEffect as useEffect3 } from "react";
+import React2, { useState as useState5, useCallback as useCallback4, useEffect as useEffect4 } from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
 function FilePreview({
   file: initialFile,
-  width = 80,
-  height = 80,
+  width = 120,
+  height = 120,
   className,
   style,
   objectFit = "cover",
-  showExtension = true,
   renderNonImage
 }) {
   const { client } = usePlugable();
   const [file, setFile] = useState5(initialFile);
   const [isRefetching, setIsRefetching] = useState5(false);
-  useEffect3(() => {
+  const [containerSize, setContainerSize] = useState5({ width: 0, height: 0 });
+  const containerRef = React2.useRef(null);
+  useEffect4(() => {
+    if (!containerRef.current) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerSize({
+          width: entry.contentRect.width,
+          height: entry.contentRect.height
+        });
+      }
+    });
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, []);
+  useEffect4(() => {
     setFile(initialFile);
   }, [initialFile.id, initialFile.download_url]);
   const handleRefetch = useCallback4(async () => {
@@ -736,45 +930,70 @@ function FilePreview({
     } finally {
       setIsRefetching(false);
     }
-  }, [file.id, client]);
+  }, [file.id, client, isRefetching]);
   const isImage = file.content_type.startsWith("image/");
+  const isSmall = containerSize.width > 0 && containerSize.width <= 80 || containerSize.height > 0 && containerSize.height <= 80;
   const containerStyle = {
     width,
     height,
-    borderRadius: 4,
+    borderRadius: isSmall ? "4px" : "8px",
     overflow: "hidden",
-    backgroundColor: "#f5f5f5",
+    position: "relative",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    border: "1px solid #eee",
+    background: "var(--plugable-base-surface)",
     ...style
   };
   if (isImage) {
     return /* @__PURE__ */ jsx5(
-      FileImage,
+      "div",
       {
-        file,
-        width,
-        height,
-        objectFit,
+        ref: containerRef,
+        style: containerStyle,
         className,
-        style,
-        borderRadius: 4,
-        onRefetchNeeded: handleRefetch
+        children: /* @__PURE__ */ jsx5(
+          FileImage,
+          {
+            file,
+            width,
+            height,
+            objectFit,
+            style: { borderRadius: isSmall ? "4px" : "8px" },
+            onRefetchNeeded: handleRefetch
+          }
+        )
       }
     );
   }
   if (renderNonImage) {
-    return /* @__PURE__ */ jsx5("div", { className, style: containerStyle, children: renderNonImage(file) });
+    return /* @__PURE__ */ jsx5(
+      "div",
+      {
+        ref: containerRef,
+        className,
+        style: containerStyle,
+        children: renderNonImage(file)
+      }
+    );
   }
   const extension = file.name.split(".").pop()?.toUpperCase() || "FILE";
-  return /* @__PURE__ */ jsx5("div", { className, style: containerStyle, children: showExtension && /* @__PURE__ */ jsx5("span", { style: {
-    fontSize: "12px",
-    fontWeight: "bold",
-    color: "#666",
-    textTransform: "uppercase"
-  }, children: extension }) });
+  const extensionStyle = {
+    fontSize: isSmall ? "9px" : "12px",
+    fontWeight: 700,
+    color: "var(--plugable-text-secondary)",
+    textTransform: "uppercase",
+    letterSpacing: "0.5px"
+  };
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: containerStyle,
+      children: /* @__PURE__ */ jsx5("span", { style: extensionStyle, children: extension })
+    }
+  );
 }
 export {
   Dropzone,
@@ -782,7 +1001,10 @@ export {
   FileList,
   FilePreview,
   PlugableProvider,
+  applyCSSVariables,
   clearImageCache,
+  generateCSSVariables,
+  getThemeColors,
   useFiles,
   usePlugable
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@plugable-io/react",
-    "version": "0.0.7",
+    "version": "0.0.10",
     "description": "React components and hooks for Plugable File Management API",
     "main": "dist/index.js",
     "module": "dist/index.mjs",