framepexls-ui-lib 0.3.1 → 0.3.2

package/dist/MediaSelector.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import React from "react";
 import ChartCard from "./ChartCard";
 import Button from "./Button";
 import Input from "./Input";
@@ -18,24 +18,24 @@ function MediaSelector({
   onClose
 }) {
   const { obtenerMedios, items, page, lastPage, setPage, subirMedio } = medios;
-  const [openPicker, setOpenPicker] = useState(false);
-  const [uploading, setUploading] = useState(false);
-  const [progress, setProgress] = useState(0);
-  const inputRef = useRef(null);
-  const [linkValue, setLinkValue] = useState(value != null ? value : "");
-  const [linkLoading, setLinkLoading] = useState(false);
-  const [linkError, setLinkError] = useState(null);
-  useEffect(() => {
+  const [openPicker, setOpenPicker] = React.useState(false);
+  const [uploading, setUploading] = React.useState(false);
+  const [progress, setProgress] = React.useState(0);
+  const inputRef = React.useRef(null);
+  const [linkValue, setLinkValue] = React.useState(value != null ? value : "");
+  const [linkLoading, setLinkLoading] = React.useState(false);
+  const [linkError, setLinkError] = React.useState(null);
+  React.useEffect(() => {
     if (openPicker) obtenerMedios({ page: page || 1 });
   }, [openPicker, page, obtenerMedios]);
-  useEffect(() => {
+  React.useEffect(() => {
     if (autoOpen) setOpenPicker(true);
   }, [autoOpen]);
-  useEffect(() => {
+  React.useEffect(() => {
     if (openPicker) setLinkValue(value != null ? value : "");
   }, [openPicker, value]);
   const onFiles = async (files) => {
-    var _a, _b, _c, _d;
+    var _a, _b;
     if (!(files == null ? void 0 : files.length)) return;
     const file = files[0];
     setUploading(true);
@@ -43,7 +43,8 @@ function MediaSelector({
     const res = await subirMedio(file, { onProgress: (p) => setProgress(p.porcentaje) });
     setUploading(false);
     if (res.ok) {
-      const url = (_d = (_c = (_a = res.data) == null ? void 0 : _a.url) != null ? _c : (_b = res.data) == null ? void 0 : _b.url) != null ? _d : null;
+      const anyData = (_a = res.data) != null ? _a : res;
+      const url = (_b = anyData == null ? void 0 : anyData.url) != null ? _b : null;
       onChange(url, res.data);
     }
   };
@@ -54,141 +55,240 @@ function MediaSelector({
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
     !dialogOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Input, { value: value != null ? value : "", onChange: (e) => onChange(e.target.value || null), placeholder: "URL de imagen", clearable: true, onClear: () => onChange(null) }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: value != null ? value : "",
+            onChange: (e) => onChange(e.target.value || null),
+            placeholder: "URL de imagen",
+            clearable: true,
+            onClear: () => onChange(null)
+          }
+        ),
         /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setOpenPicker(true), children: "Elegir" })
       ] }),
-      value && /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-2xl border border-slate-200 bg-white/60 p-2 dark:border-white/10 dark:bg-white/5", children: /* @__PURE__ */ jsx("div", { className: "aspect-video w-full overflow-hidden rounded-xl bg-slate-100", children: /* @__PURE__ */ jsx("img", { src: value, alt: "preview", className: "h-full w-full object-cover" }) }) })
+      value && /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-2xl border border-slate-200 bg-white/60 p-2 dark:border-white/10 dark:bg-[var(--fx-surface)]", children: /* @__PURE__ */ jsx("div", { className: "aspect-video w-full overflow-hidden rounded-xl bg-slate-100", children: /* @__PURE__ */ jsx("img", { src: value, alt: "preview", className: "h-full w-full object-cover" }) }) })
     ] }),
-    /* @__PURE__ */ jsxs(Dialog, { open: openPicker, onClose: () => {
-      setOpenPicker(false);
-      onClose == null ? void 0 : onClose();
-    }, size: "full", children: [
-      /* @__PURE__ */ jsx(Dialog.Header, { title: "Biblioteca de medios", description: "Selecciona una imagen o sube una nueva", onClose: () => {
-        setOpenPicker(false);
-        onClose == null ? void 0 : onClose();
-      } }),
-      /* @__PURE__ */ jsx(Dialog.Body, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-2", children: [
-        /* @__PURE__ */ jsx(ChartCard, { className: "lg:col-span-1", title: "Subir imagen", subtitle: /* @__PURE__ */ jsx("span", { children: "Arrastra una imagen o selecci\xF3nala" }), right: /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Input, { unstyled: true, ref: inputRef, type: "file", accept, className: "hidden", onChange: (e) => onFiles(e.target.files) }),
-          /* @__PURE__ */ jsx(Button, { onClick: () => {
-            var _a;
-            return (_a = inputRef.current) == null ? void 0 : _a.click();
-          }, disabled: uploading, children: "Seleccionar" })
-        ] }), children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            onDragOver: (e) => {
-              e.preventDefault();
-              e.dataTransfer.dropEffect = "copy";
-            },
-            onDrop: handleDrop,
-            onClick: () => {
-              var _a;
-              return (_a = inputRef.current) == null ? void 0 : _a.click();
-            },
-            className: "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-slate-300 bg-gradient-to-b from-white/90 to-white/60 p-8 text-center transition hover:border-slate-400 hover:bg-white/80 dark:border-white/10 dark:from-white/10 dark:to-white/5",
-            children: [
-              /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-8 w-8 text-slate-400", fill: "none", stroke: "currentColor", strokeWidth: "1.6", children: /* @__PURE__ */ jsx("path", { d: "M12 16V4M7 9l5-5 5 5M20 16v3a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-3" }) }),
-              /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: "Soltar imagen aqu\xED" }),
-              uploading && /* @__PURE__ */ jsxs("div", { className: "mt-3 w-full", children: [
-                /* @__PURE__ */ jsxs("div", { className: "mb-1 text-xs text-slate-500", children: [
-                  progress,
-                  "%"
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "h-2 overflow-hidden rounded-full bg-slate-100 dark:bg-white/10", children: /* @__PURE__ */ jsx(motion.div, { className: "h-full w-full origin-left bg-gradient-to-r from-emerald-500/70 to-emerald-500/20 will-change-transform", initial: { scaleX: 0 }, animate: { scaleX: progress / 100 }, transition: springSm }) })
-              ] })
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsxs(ChartCard, { className: "lg:col-span-1", title: "Desde enlace", subtitle: /* @__PURE__ */ jsx("span", { children: "Pega una URL http(s) v\xE1lida" }), compact: true, children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                type: "url",
-                placeholder: "https://\u2026",
-                value: linkValue,
-                onChange: (e) => {
-                  setLinkValue(e.target.value);
-                  setLinkError(null);
-                }
+    /* @__PURE__ */ jsxs(
+      Dialog,
+      {
+        open: openPicker,
+        onClose: () => {
+          setOpenPicker(false);
+          onClose == null ? void 0 : onClose();
+        },
+        size: "full",
+        children: [
+          /* @__PURE__ */ jsx(
+            Dialog.Header,
+            {
+              title: "Biblioteca de medios",
+              description: "Selecciona una imagen o sube una nueva",
+              onClose: () => {
+                setOpenPicker(false);
+                onClose == null ? void 0 : onClose();
               }
-            ),
+            }
+          ),
+          /* @__PURE__ */ jsx(Dialog.Body, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-2", children: [
             /* @__PURE__ */ jsx(
-              Button,
+              ChartCard,
               {
-                onClick: async () => {
-                  var _a, _b, _c, _d;
-                  if (!linkValue) return;
-                  setLinkError(null);
-                  const isHttp = /^https?:\/\//i.test(linkValue);
-                  if (!isHttp) {
-                    setLinkError("Ingresa un enlace v\xE1lido (http/https)");
-                    return;
-                  }
-                  const importer = (_a = medios.importFromUrl) != null ? _a : medios.importarMedioDesdeUrl;
-                  if (importer) {
-                    setLinkLoading(true);
-                    const res = await importer(linkValue);
-                    setLinkLoading(false);
-                    if (res && res.ok) {
-                      const d = (_b = res.data) != null ? _b : res;
-                      onChange((_c = d == null ? void 0 : d.url) != null ? _c : null, d != null ? d : null);
-                      setOpenPicker(false);
-                      onClose == null ? void 0 : onClose();
-                    } else {
-                      setLinkError(String((_d = res == null ? void 0 : res.error) != null ? _d : "No se pudo importar el enlace"));
+                className: "lg:col-span-1",
+                title: "Subir imagen",
+                subtitle: /* @__PURE__ */ jsx("span", { children: "Arrastra una imagen o selecci\xF3nala" }),
+                right: /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      unstyled: true,
+                      ref: inputRef,
+                      type: "file",
+                      accept,
+                      className: "hidden",
+                      onChange: (e) => onFiles(e.target.files)
                     }
-                  } else {
-                    onChange(linkValue || null, null);
-                    setOpenPicker(false);
-                    onClose == null ? void 0 : onClose();
+                  ),
+                  /* @__PURE__ */ jsx(Button, { onClick: () => {
+                    var _a;
+                    return (_a = inputRef.current) == null ? void 0 : _a.click();
+                  }, disabled: uploading, children: "Seleccionar" })
+                ] }),
+                children: /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    onDragOver: (e) => {
+                      e.preventDefault();
+                      e.dataTransfer.dropEffect = "copy";
+                    },
+                    onDrop: handleDrop,
+                    onClick: () => {
+                      var _a;
+                      return (_a = inputRef.current) == null ? void 0 : _a.click();
+                    },
+                    className: "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-slate-300 bg-gradient-to-b from-white/90 to-white/60 p-8 text-center transition hover:border-slate-400 hover:bg-white/80 dark:border-white/10 dark:from-white/10 dark:to-white/5",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          viewBox: "0 0 24 24",
+                          className: "h-8 w-8 text-slate-400",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "1.6",
+                          children: /* @__PURE__ */ jsx("path", { d: "M12 16V4M7 9l5-5 5 5M20 16v3a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-3" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: "Arrastra y suelta archivos aqu\xED o haz clic" }),
+                      /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500", children: "Formatos: JPG, PNG, WEBP, GIF" }),
+                      uploading && /* @__PURE__ */ jsxs("div", { className: "mt-3 w-full rounded-xl border border-slate-200 p-2 text-left text-sm dark:border-white/10", children: [
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+                          /* @__PURE__ */ jsx("span", { children: "Subiendo\u2026" }),
+                          /* @__PURE__ */ jsxs("span", { children: [
+                            progress,
+                            "%"
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ jsx("div", { className: "h-2 overflow-hidden rounded-full bg-slate-100 dark:bg-white/10", children: /* @__PURE__ */ jsx(
+                          motion.div,
+                          {
+                            className: "h-full w-full origin-left bg-gradient-to-r from-emerald-500/70 to-emerald-500/20 will-change-transform",
+                            initial: { scaleX: 0 },
+                            animate: { scaleX: progress / 100 },
+                            transition: springSm
+                          }
+                        ) })
+                      ] })
+                    ]
                   }
-                },
-                disabled: !linkValue || linkLoading,
-                children: linkLoading ? "Importando\u2026" : "Usar"
+                )
               }
-            )
-          ] }),
-          linkError && /* @__PURE__ */ jsx("div", { className: "mt-2 rounded-xl border border-rose-300/70 bg-rose-50 px-3 py-2 text-rose-900 text-xs", children: linkError })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "lg:col-span-2 space-y-3", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
-            /* @__PURE__ */ jsxs("div", { className: "text-sm text-slate-500 dark:text-slate-400", children: [
-              "P\xE1gina ",
-              page,
-              " de ",
-              Math.max(1, lastPage)
-            ] }),
-            lastPage > 1 && /* @__PURE__ */ jsx(Pagination, { page, totalPages: lastPage, onPageChange: setPage })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: items.map((m) => {
-            var _a;
-            return /* @__PURE__ */ jsx(motion.div, { layout: true, initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: 8 }, transition: springSm, children: /* @__PURE__ */ jsxs(
-              Button,
+            ),
+            /* @__PURE__ */ jsxs(
+              ChartCard,
               {
-                unstyled: true,
-                className: "group overflow-hidden rounded-2xl border border-slate-200 bg-white/70 p-1 text-left transition hover:shadow-md focus:outline-none focus:ring-2 focus:ring-slate-300 dark:border-white/10 dark:bg-white/5",
-                onClick: () => {
-                  var _a2;
-                  onChange((_a2 = m.url) != null ? _a2 : null, m);
-                  setOpenPicker(false);
-                  onClose == null ? void 0 : onClose();
-                },
+                className: "lg:col-span-1",
+                title: "Desde enlace",
+                subtitle: /* @__PURE__ */ jsx("span", { children: "Pega una URL http(s) v\xE1lida" }),
+                compact: true,
                 children: [
-                  /* @__PURE__ */ jsx("div", { className: "aspect-square w-full overflow-hidden rounded-xl bg-slate-100", children: /* @__PURE__ */ jsx("img", { src: (_a = m.url) != null ? _a : "", alt: m.nombre, className: "h-full w-full object-cover transition group-hover:scale-105" }) }),
-                  /* @__PURE__ */ jsx("div", { className: "truncate p-1 text-xs", children: m.nombre })
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx(
+                      Input,
+                      {
+                        type: "url",
+                        placeholder: "https://\u2026",
+                        value: linkValue,
+                        onChange: (e) => {
+                          setLinkValue(e.target.value);
+                          setLinkError(null);
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        onClick: async () => {
+                          var _a, _b, _c, _d;
+                          if (!linkValue) return;
+                          setLinkError(null);
+                          const isHttp = /^https?:\/\//i.test(linkValue);
+                          if (!isHttp) {
+                            setLinkError("Ingresa un enlace v\xE1lido (http/https)");
+                            return;
+                          }
+                          const importer = (_a = medios.importFromUrl) != null ? _a : medios.importarMedioDesdeUrl;
+                          if (importer) {
+                            setLinkLoading(true);
+                            const res = await importer(linkValue);
+                            setLinkLoading(false);
+                            if (res && res.ok) {
+                              const d = (_b = res.data) != null ? _b : res;
+                              onChange((_c = d == null ? void 0 : d.url) != null ? _c : null, d != null ? d : null);
+                              setOpenPicker(false);
+                              onClose == null ? void 0 : onClose();
+                            } else {
+                              setLinkError(String((_d = res == null ? void 0 : res.error) != null ? _d : "No se pudo importar el enlace"));
+                            }
+                          } else {
+                            onChange(linkValue || null, null);
+                            setOpenPicker(false);
+                            onClose == null ? void 0 : onClose();
+                          }
+                        },
+                        disabled: !linkValue || linkLoading,
+                        children: linkLoading ? "Importando\u2026" : "Usar"
+                      }
+                    )
+                  ] }),
+                  linkError && /* @__PURE__ */ jsx("div", { className: "mt-2 rounded-xl border border-rose-300/70 bg-rose-50 px-3 py-2 text-rose-900 text-xs", children: linkError })
                 ]
               }
-            ) }, m.id);
-          }) }) })
-        ] })
-      ] }) }),
-      /* @__PURE__ */ jsx(Dialog.Footer, { align: "end", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => {
-        setOpenPicker(false);
-        onClose == null ? void 0 : onClose();
-      }, children: "Cerrar" }) })
-    ] })
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "lg:col-span-2 space-y-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "text-sm text-slate-500 dark:text-slate-400", children: [
+                  "P\xE1gina ",
+                  page,
+                  " de ",
+                  Math.max(1, lastPage)
+                ] }),
+                lastPage > 1 && /* @__PURE__ */ jsx(Pagination, { page, totalPages: lastPage, onPageChange: setPage })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: items.map((m) => {
+                var _a;
+                return /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    layout: true,
+                    initial: { opacity: 0, y: 8 },
+                    animate: { opacity: 1, y: 0 },
+                    exit: { opacity: 0, y: 8 },
+                    transition: springSm,
+                    children: /* @__PURE__ */ jsxs(
+                      Button,
+                      {
+                        unstyled: true,
+                        className: "group overflow-hidden rounded-2xl border border-slate-200 bg-white/70 p-1 text-left transition hover:shadow-md focus:outline-none focus:ring-2 focus:ring-slate-300 dark:border-white/10 dark:bg-[var(--fx-surface)]",
+                        onClick: () => {
+                          var _a2;
+                          onChange((_a2 = m.url) != null ? _a2 : null, m);
+                          setOpenPicker(false);
+                          onClose == null ? void 0 : onClose();
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx("div", { className: "aspect-square w-full overflow-hidden rounded-xl bg-slate-100", children: /* @__PURE__ */ jsx(
+                            "img",
+                            {
+                              src: (_a = m.url) != null ? _a : "",
+                              alt: m.nombre,
+                              className: "h-full w-full object-cover transition group-hover:scale-105"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("div", { className: "truncate p-1 text-xs", children: m.nombre })
+                        ]
+                      }
+                    )
+                  },
+                  String(m.id)
+                );
+              }) }) })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx(Dialog.Footer, { align: "end", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              onClick: () => {
+                setOpenPicker(false);
+                onClose == null ? void 0 : onClose();
+              },
+              children: "Cerrar"
+            }
+          ) })
+        ]
+      }
+    )
   ] });
 }
 export {

package/dist/MediaTile.d.mts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type MediaTileProps = {
+    imageUrl?: string | null;
+    title: string;
+    subtitle?: string;
+    copyUrl?: string;
+    loading?: boolean;
+    onPreview?: () => void;
+    onRename?: () => void;
+    onReplace?: () => void;
+    onDelete?: () => void;
+    menuSize?: "sm" | "md" | "lg";
+    className?: string;
+};
+declare function MediaTile({ imageUrl, title, subtitle, copyUrl, onPreview, onRename, onReplace, onDelete, loading, menuSize, className, }: MediaTileProps): react_jsx_runtime.JSX.Element;
+
+export { type MediaTileProps, MediaTile as default };

package/dist/MediaTile.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type MediaTileProps = {
+    imageUrl?: string | null;
+    title: string;
+    subtitle?: string;
+    copyUrl?: string;
+    loading?: boolean;
+    onPreview?: () => void;
+    onRename?: () => void;
+    onReplace?: () => void;
+    onDelete?: () => void;
+    menuSize?: "sm" | "md" | "lg";
+    className?: string;
+};
+declare function MediaTile({ imageUrl, title, subtitle, copyUrl, onPreview, onRename, onReplace, onDelete, loading, menuSize, className, }: MediaTileProps): react_jsx_runtime.JSX.Element;
+
+export { type MediaTileProps, MediaTile as default };

package/dist/MediaTile.js

@@ -0,0 +1,146 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var MediaTile_exports = {};
+__export(MediaTile_exports, {
+  default: () => MediaTile
+});
+module.exports = __toCommonJS(MediaTile_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_image = __toESM(require("next/image"));
+var import_framer_motion = require("framer-motion");
+var import_animations = require("./animations");
+var import_Dropdown = __toESM(require("./Dropdown"));
+function MediaTile({
+  imageUrl,
+  title,
+  subtitle,
+  copyUrl,
+  onPreview,
+  onRename,
+  onReplace,
+  onDelete,
+  loading,
+  menuSize = "md",
+  className
+}) {
+  const [copied, setCopied] = (0, import_react.useState)(false);
+  const copy = async () => {
+    if (!copyUrl) return;
+    try {
+      await navigator.clipboard.writeText(copyUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1200);
+    } catch {
+    }
+  };
+  const btnSize = menuSize === "lg" ? "h-11 w-11" : menuSize === "sm" ? "h-8 w-8" : "h-9 w-9";
+  const iconSize = menuSize === "lg" ? "h-7 w-7" : menuSize === "sm" ? "h-5 w-5" : "h-6 w-6";
+  const ImgWrap = onPreview ? (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: onPreview, ...props }) : (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...props });
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: [
+          "overflow-hidden rounded-2xl border border-slate-200 bg-white/80 shadow-sm ring-1 ring-black/5 backdrop-blur dark:border-white/10 dark:bg-[var(--fx-surface)]",
+          className != null ? className : ""
+        ].join(" "),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "aspect-square w-full", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-full w-full animate-pulse bg-slate-200 dark:bg-white/10" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-2 space-y-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-3 w-3/4 animate-pulse rounded bg-slate-200 dark:bg-white/10" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-2 w-1/3 animate-pulse rounded bg-slate-200 dark:bg-white/10" })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_framer_motion.motion.div,
+    {
+      whileHover: { y: -2 },
+      transition: import_animations.microTransition,
+      className: [
+        "group relative overflow-hidden rounded-2xl border border-slate-200 bg-white/80 shadow-sm ring-1 ring-black/5 backdrop-blur dark:border-white/10 dark:bg-[var(--fx-surface)]",
+        className != null ? className : ""
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ImgWrap, { className: "aspect-square w-full bg-slate-100 relative text-left", children: [
+          imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_image.default,
+            {
+              src: imageUrl,
+              alt: title,
+              fill: true,
+              sizes: "(min-width:1024px) 20vw, (min-width:768px) 25vw, (min-width:640px) 33vw, 50vw",
+              className: "object-cover transition-transform duration-200 will-change-transform group-hover:scale-105"
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-full w-full" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pointer-events-none absolute inset-0 bg-gradient-to-t from-black/30 to-transparent opacity-0 transition-opacity duration-200 group-hover:opacity-100" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-2 p-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-sm font-medium", children: title }),
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-slate-500 dark:text-slate-400", children: subtitle })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Dropdown.default, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dropdown.default.Trigger, { "aria-label": "Acciones", className: [btnSize, "p-0 !gap-0"].join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: iconSize, fill: "currentColor", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "5", r: "2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "19", r: "2" })
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Dropdown.default.Content, { children: [
+              onPreview && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dropdown.default.Item, { onSelect: onPreview, icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "inline-flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "3" })
+              ] }) }), children: "Ver" }),
+              copyUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dropdown.default.Item, { onSelect: copy, icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "inline-flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+              ] }) }), children: copied ? "Copiado" : "Copiar URL" }),
+              (onRename || onReplace) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dropdown.default.Separator, {}),
+              onRename && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dropdown.default.Item, { onSelect: onRename, icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "inline-flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 21v-4l12-12 4 4-12 12z" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 7l4 4" })
+              ] }) }), children: "Renombrar" }),
+              onReplace && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dropdown.default.Item, { onSelect: onReplace, icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "inline-flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 5v14M5 12h14" }) }) }), children: "Reemplazar" }),
+              onDelete && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dropdown.default.Item, { danger: true, onSelect: onDelete, icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "inline-flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 6h18" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 6v14a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V6" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 11v6M14 11v6" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2" })
+              ] }) }), children: "Eliminar" })
+            ] })
+          ] }) })
+        ] })
+      ]
+    }
+  );
+}