@plugable-io/react 0.0.8 → 0.0.10

package/dist/index.d.mts

@@ -111,7 +111,7 @@ interface FilePreviewProps {
     showExtension?: boolean;
     renderNonImage?: (file: FileObject) => React.ReactNode;
 }
-declare function FilePreview({ file: initialFile, width, height, className, style, objectFit, showExtension, renderNonImage, }: FilePreviewProps): react_jsx_runtime.JSX.Element;
+declare function FilePreview({ file: initialFile, width, height, className, style, objectFit, renderNonImage, }: FilePreviewProps): react_jsx_runtime.JSX.Element;
 
 interface UseFilesOptions {
     metadata?: Record<string, any>;

package/dist/index.d.ts

@@ -111,7 +111,7 @@ interface FilePreviewProps {
     showExtension?: boolean;
     renderNonImage?: (file: FileObject) => React.ReactNode;
 }
-declare function FilePreview({ file: initialFile, width, height, className, style, objectFit, showExtension, renderNonImage, }: FilePreviewProps): react_jsx_runtime.JSX.Element;
+declare function FilePreview({ file: initialFile, width, height, className, style, objectFit, renderNonImage, }: FilePreviewProps): react_jsx_runtime.JSX.Element;
 
 interface UseFilesOptions {
     metadata?: Record<string, any>;

package/dist/index.js

@@ -886,7 +886,7 @@ function FileImage({
           ...imageStyle,
           position: "relative",
           overflow: "hidden",
-          backgroundColor: "var(--plugable-base-surface)"
+          backgroundColor: "rgba(0, 0, 0, 0.02)"
         },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -894,19 +894,17 @@ function FileImage({
             {
               style: {
                 position: "absolute",
-                top: 0,
-                left: "-100%",
-                width: "100%",
-                height: "100%",
-                background: "linear-gradient(90deg, transparent, var(--plugable-overlay), transparent)",
-                animation: "shimmer 1.5s infinite"
+                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__ */ (0, import_jsx_runtime4.jsx)("style", { children: `
-            @keyframes shimmer {
-              0% { left: -100%; }
-              100% { left: 100%; }
+            @keyframes shimmer-pulse {
+              0% { background-position: 200% 0; }
+              100% { background-position: -200% 0; }
             }
           ` })
         ]
@@ -935,31 +933,8 @@ function clearImageCache() {
 }
 
 // src/components/FilePreview.tsx
-var import_react5 = require("react");
+var import_react5 = __toESM(require("react"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var fileTypeColors = {
-  pdf: { bg: "transparent", text: "#94a3b8" },
-  // Slate-400
-  doc: { bg: "transparent", text: "#94a3b8" },
-  docx: { bg: "transparent", text: "#94a3b8" },
-  xls: { bg: "transparent", text: "#94a3b8" },
-  xlsx: { bg: "transparent", text: "#94a3b8" },
-  csv: { bg: "transparent", text: "#94a3b8" },
-  txt: { bg: "transparent", text: "#94a3b8" },
-  zip: { bg: "transparent", text: "#94a3b8" },
-  rar: { bg: "transparent", text: "#94a3b8" },
-  mp4: { bg: "transparent", text: "#94a3b8" },
-  mov: { bg: "transparent", text: "#94a3b8" },
-  avi: { bg: "transparent", text: "#94a3b8" },
-  mp3: { bg: "transparent", text: "#94a3b8" },
-  wav: { bg: "transparent", text: "#94a3b8" },
-  default: { bg: "transparent", text: "#64748b" }
-  // Slate-500
-};
-function getFileTypeColor(filename) {
-  const ext = filename.split(".").pop()?.toLowerCase() || "";
-  return fileTypeColors[ext] || fileTypeColors.default;
-}
 function FilePreview({
   file: initialFile,
   width = 120,
@@ -967,13 +942,26 @@ function FilePreview({
   className,
   style,
   objectFit = "cover",
-  showExtension = true,
   renderNonImage
 }) {
   const { client } = usePlugable();
   const [file, setFile] = (0, import_react5.useState)(initialFile);
   const [isRefetching, setIsRefetching] = (0, import_react5.useState)(false);
-  const [isHovered, setIsHovered] = (0, import_react5.useState)(false);
+  const [containerSize, setContainerSize] = (0, import_react5.useState)({ width: 0, height: 0 });
+  const containerRef = import_react5.default.useRef(null);
+  (0, import_react5.useEffect)(() => {
+    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();
+  }, []);
   (0, import_react5.useEffect)(() => {
     setFile(initialFile);
   }, [initialFile.id, initialFile.download_url]);
@@ -990,30 +978,26 @@ function FilePreview({
     }
   }, [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: "8px",
+    borderRadius: isSmall ? "4px" : "8px",
     overflow: "hidden",
     position: "relative",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    border: isHovered ? "1px solid var(--plugable-accent-primary)" : "1px solid var(--plugable-base-border)",
     background: "var(--plugable-base-surface)",
-    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-    boxShadow: "0 2px 4px rgba(0, 0, 0, 0.05)",
-    cursor: "pointer",
     ...style
   };
   if (isImage) {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "div",
       {
+        ref: containerRef,
         style: containerStyle,
         className,
-        onMouseEnter: () => setIsHovered(true),
-        onMouseLeave: () => setIsHovered(false),
         children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           FileImage,
           {
@@ -1021,7 +1005,7 @@ function FilePreview({
             width,
             height,
             objectFit,
-            style: { borderRadius: "8px" },
+            style: { borderRadius: isSmall ? "4px" : "8px" },
             onRefetchNeeded: handleRefetch
           }
         )
@@ -1032,59 +1016,28 @@ function FilePreview({
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "div",
       {
+        ref: containerRef,
         className,
         style: containerStyle,
-        onMouseEnter: () => setIsHovered(true),
-        onMouseLeave: () => setIsHovered(false),
         children: renderNonImage(file)
       }
     );
   }
   const extension = file.name.split(".").pop()?.toUpperCase() || "FILE";
-  const colors = getFileTypeColor(file.name);
-  const badgeStyle = {
-    padding: "2px 8px",
-    borderRadius: "4px",
-    border: "1px solid var(--plugable-base-border)",
-    backgroundColor: "var(--plugable-overlay)",
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center"
-  };
   const extensionStyle = {
-    fontSize: "11px",
-    fontWeight: 600,
+    fontSize: isSmall ? "9px" : "12px",
+    fontWeight: 700,
     color: "var(--plugable-text-secondary)",
     textTransform: "uppercase",
-    letterSpacing: "0.05em"
-  };
-  const iconStyle = {
-    width: "28px",
-    height: "28px",
-    marginBottom: "6px",
-    color: colors.text
-  };
-  const wrapperStyle = {
-    textAlign: "center",
-    padding: "12px",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    width: "100%",
-    height: "100%"
+    letterSpacing: "0.5px"
   };
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
+      ref: containerRef,
       className,
       style: containerStyle,
-      onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false),
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: wrapperStyle, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { style: iconStyle, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) }),
-        showExtension && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: badgeStyle, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: extensionStyle, children: extension }) })
-      ] })
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: extensionStyle, children: extension })
     }
   );
 }

package/dist/index.mjs

@@ -840,7 +840,7 @@ function FileImage({
           ...imageStyle,
           position: "relative",
           overflow: "hidden",
-          backgroundColor: "var(--plugable-base-surface)"
+          backgroundColor: "rgba(0, 0, 0, 0.02)"
         },
         children: [
           /* @__PURE__ */ jsx4(
@@ -848,19 +848,17 @@ function FileImage({
             {
               style: {
                 position: "absolute",
-                top: 0,
-                left: "-100%",
-                width: "100%",
-                height: "100%",
-                background: "linear-gradient(90deg, transparent, var(--plugable-overlay), transparent)",
-                animation: "shimmer 1.5s infinite"
+                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 shimmer {
-              0% { left: -100%; }
-              100% { left: 100%; }
+            @keyframes shimmer-pulse {
+              0% { background-position: 200% 0; }
+              100% { background-position: -200% 0; }
             }
           ` })
         ]
@@ -889,31 +887,8 @@ function clearImageCache() {
 }
 
 // src/components/FilePreview.tsx
-import { useState as useState5, useCallback as useCallback4, useEffect as useEffect4 } from "react";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var fileTypeColors = {
-  pdf: { bg: "transparent", text: "#94a3b8" },
-  // Slate-400
-  doc: { bg: "transparent", text: "#94a3b8" },
-  docx: { bg: "transparent", text: "#94a3b8" },
-  xls: { bg: "transparent", text: "#94a3b8" },
-  xlsx: { bg: "transparent", text: "#94a3b8" },
-  csv: { bg: "transparent", text: "#94a3b8" },
-  txt: { bg: "transparent", text: "#94a3b8" },
-  zip: { bg: "transparent", text: "#94a3b8" },
-  rar: { bg: "transparent", text: "#94a3b8" },
-  mp4: { bg: "transparent", text: "#94a3b8" },
-  mov: { bg: "transparent", text: "#94a3b8" },
-  avi: { bg: "transparent", text: "#94a3b8" },
-  mp3: { bg: "transparent", text: "#94a3b8" },
-  wav: { bg: "transparent", text: "#94a3b8" },
-  default: { bg: "transparent", text: "#64748b" }
-  // Slate-500
-};
-function getFileTypeColor(filename) {
-  const ext = filename.split(".").pop()?.toLowerCase() || "";
-  return fileTypeColors[ext] || fileTypeColors.default;
-}
+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 = 120,
@@ -921,13 +896,26 @@ function FilePreview({
   className,
   style,
   objectFit = "cover",
-  showExtension = true,
   renderNonImage
 }) {
   const { client } = usePlugable();
   const [file, setFile] = useState5(initialFile);
   const [isRefetching, setIsRefetching] = useState5(false);
-  const [isHovered, setIsHovered] = useState5(false);
+  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]);
@@ -944,30 +932,26 @@ function FilePreview({
     }
   }, [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: "8px",
+    borderRadius: isSmall ? "4px" : "8px",
     overflow: "hidden",
     position: "relative",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    border: isHovered ? "1px solid var(--plugable-accent-primary)" : "1px solid var(--plugable-base-border)",
     background: "var(--plugable-base-surface)",
-    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-    boxShadow: "0 2px 4px rgba(0, 0, 0, 0.05)",
-    cursor: "pointer",
     ...style
   };
   if (isImage) {
     return /* @__PURE__ */ jsx5(
       "div",
       {
+        ref: containerRef,
         style: containerStyle,
         className,
-        onMouseEnter: () => setIsHovered(true),
-        onMouseLeave: () => setIsHovered(false),
         children: /* @__PURE__ */ jsx5(
           FileImage,
           {
@@ -975,7 +959,7 @@ function FilePreview({
             width,
             height,
             objectFit,
-            style: { borderRadius: "8px" },
+            style: { borderRadius: isSmall ? "4px" : "8px" },
             onRefetchNeeded: handleRefetch
           }
         )
@@ -986,59 +970,28 @@ function FilePreview({
     return /* @__PURE__ */ jsx5(
       "div",
       {
+        ref: containerRef,
         className,
         style: containerStyle,
-        onMouseEnter: () => setIsHovered(true),
-        onMouseLeave: () => setIsHovered(false),
         children: renderNonImage(file)
       }
     );
   }
   const extension = file.name.split(".").pop()?.toUpperCase() || "FILE";
-  const colors = getFileTypeColor(file.name);
-  const badgeStyle = {
-    padding: "2px 8px",
-    borderRadius: "4px",
-    border: "1px solid var(--plugable-base-border)",
-    backgroundColor: "var(--plugable-overlay)",
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center"
-  };
   const extensionStyle = {
-    fontSize: "11px",
-    fontWeight: 600,
+    fontSize: isSmall ? "9px" : "12px",
+    fontWeight: 700,
     color: "var(--plugable-text-secondary)",
     textTransform: "uppercase",
-    letterSpacing: "0.05em"
-  };
-  const iconStyle = {
-    width: "28px",
-    height: "28px",
-    marginBottom: "6px",
-    color: colors.text
-  };
-  const wrapperStyle = {
-    textAlign: "center",
-    padding: "12px",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    width: "100%",
-    height: "100%"
+    letterSpacing: "0.5px"
   };
   return /* @__PURE__ */ jsx5(
     "div",
     {
+      ref: containerRef,
       className,
       style: containerStyle,
-      onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false),
-      children: /* @__PURE__ */ jsxs3("div", { style: wrapperStyle, children: [
-        /* @__PURE__ */ jsx5("svg", { style: iconStyle, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) }),
-        showExtension && /* @__PURE__ */ jsx5("div", { style: badgeStyle, children: /* @__PURE__ */ jsx5("span", { style: extensionStyle, children: extension }) })
-      ] })
+      children: /* @__PURE__ */ jsx5("span", { style: extensionStyle, children: extension })
     }
   );
 }

package/package.json

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