framepexls-ui-lib 0.1.13 → 0.1.14

package/dist/MediaCard.js

@@ -0,0 +1,153 @@
+"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 MediaCard_exports = {};
+__export(MediaCard_exports, {
+  default: () => MediaCard
+});
+module.exports = __toCommonJS(MediaCard_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_image = __toESM(require("next/image"));
+var import_ActionIconButton = __toESM(require("./ActionIconButton"));
+function MediaCard({
+  imageUrl,
+  title,
+  subtitle,
+  copyUrl,
+  onRename,
+  onReplace,
+  onDelete,
+  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 {
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      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-white/5",
+        className != null ? className : ""
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "aspect-square w-full bg-slate-100 relative", 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"
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-full w-full" }) }),
+        /* @__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", children: subtitle })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1", children: [
+            copyUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ActionIconButton.default, { title: copied ? "Copiado" : "Copiar URL", onClick: copy, children: copied ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                className: "h-4.5 w-4.5 text-emerald-600",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 13l4 4L19 7" })
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                className: "h-4.5 w-4.5",
+                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" })
+                ]
+              }
+            ) }),
+            onRename && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ActionIconButton.default, { title: "Renombrar", onClick: onRename, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                className: "h-4.5 w-4.5",
+                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" })
+                ]
+              }
+            ) }),
+            onReplace && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ActionIconButton.default, { title: "Reemplazar", onClick: onReplace, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                className: "h-4.5 w-4.5",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 5v14M5 12h14" })
+              }
+            ) }),
+            onDelete && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ActionIconButton.default, { title: "Eliminar", danger: true, onClick: onDelete, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                className: "h-4.5 w-4.5",
+                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" })
+                ]
+              }
+            ) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}

package/dist/MediaCard.mjs

@@ -0,0 +1,123 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Image from "next/image";
+import ActionIconButton from "./ActionIconButton";
+function MediaCard({
+  imageUrl,
+  title,
+  subtitle,
+  copyUrl,
+  onRename,
+  onReplace,
+  onDelete,
+  className
+}) {
+  const [copied, setCopied] = useState(false);
+  const copy = async () => {
+    if (!copyUrl) return;
+    try {
+      await navigator.clipboard.writeText(copyUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1200);
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      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-white/5",
+        className != null ? className : ""
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "aspect-square w-full bg-slate-100 relative", children: imageUrl ? /* @__PURE__ */ jsx(
+          Image,
+          {
+            src: imageUrl,
+            alt: title,
+            fill: true,
+            sizes: "(min-width:1024px) 20vw, (min-width:768px) 25vw, (min-width:640px) 33vw, 50vw",
+            className: "object-cover"
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "h-full w-full" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 p-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium", children: title }),
+            subtitle && /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500", children: subtitle })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            copyUrl && /* @__PURE__ */ jsx(ActionIconButton, { title: copied ? "Copiado" : "Copiar URL", onClick: copy, children: copied ? /* @__PURE__ */ jsx(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                className: "h-4.5 w-4.5 text-emerald-600",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" })
+              }
+            ) : /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                className: "h-4.5 w-4.5",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                children: [
+                  /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
+                  /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+                ]
+              }
+            ) }),
+            onRename && /* @__PURE__ */ jsx(ActionIconButton, { title: "Renombrar", onClick: onRename, children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                className: "h-4.5 w-4.5",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                children: [
+                  /* @__PURE__ */ jsx("path", { d: "M3 21v-4l12-12 4 4-12 12z" }),
+                  /* @__PURE__ */ jsx("path", { d: "M14 7l4 4" })
+                ]
+              }
+            ) }),
+            onReplace && /* @__PURE__ */ jsx(ActionIconButton, { title: "Reemplazar", onClick: onReplace, children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                className: "h-4.5 w-4.5",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14" })
+              }
+            ) }),
+            onDelete && /* @__PURE__ */ jsx(ActionIconButton, { title: "Eliminar", danger: true, onClick: onDelete, children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                className: "h-4.5 w-4.5",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                children: [
+                  /* @__PURE__ */ jsx("path", { d: "M3 6h18" }),
+                  /* @__PURE__ */ jsx("path", { d: "M8 6v14a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V6" }),
+                  /* @__PURE__ */ jsx("path", { d: "M10 11v6M14 11v6" }),
+                  /* @__PURE__ */ jsx("path", { d: "M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2" })
+                ]
+              }
+            ) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  MediaCard as default
+};

package/dist/MediaSelector.d.mts

@@ -0,0 +1,48 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type MediaSelectorItem = {
+    id: number | string;
+    nombre: string;
+    url?: string | null;
+};
+type MediosAdapter = {
+    items: MediaSelectorItem[];
+    page: number;
+    lastPage: number;
+    setPage: (p: number) => void;
+    obtenerMedios: (opts?: {
+        page?: number;
+        per_page?: number;
+    }) => Promise<any>;
+    subirMedio: (file: File, opts?: {
+        onProgress?: (p: {
+            porcentaje: number;
+        }) => void;
+    }) => Promise<{
+        ok: boolean;
+        data?: any;
+        error?: any;
+    }>;
+    importFromUrl?: (url: string) => Promise<{
+        ok: boolean;
+        data?: any;
+        error?: any;
+    }>;
+    importarMedioDesdeUrl?: (url: string) => Promise<{
+        ok: boolean;
+        data?: any;
+        error?: any;
+    }>;
+};
+declare function MediaSelector({ value, onChange, medios, accept, autoOpen, dialogOnly, onClose, }: {
+    value?: string | null;
+    onChange: (url: string | null, picked?: MediaSelectorItem | null) => void;
+    medios: MediosAdapter;
+    label?: string;
+    accept?: string;
+    autoOpen?: boolean;
+    dialogOnly?: boolean;
+    onClose?: () => void;
+}): react_jsx_runtime.JSX.Element;
+
+export { type MediaSelectorItem, type MediosAdapter, MediaSelector as default };

package/dist/MediaSelector.d.ts

@@ -0,0 +1,48 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type MediaSelectorItem = {
+    id: number | string;
+    nombre: string;
+    url?: string | null;
+};
+type MediosAdapter = {
+    items: MediaSelectorItem[];
+    page: number;
+    lastPage: number;
+    setPage: (p: number) => void;
+    obtenerMedios: (opts?: {
+        page?: number;
+        per_page?: number;
+    }) => Promise<any>;
+    subirMedio: (file: File, opts?: {
+        onProgress?: (p: {
+            porcentaje: number;
+        }) => void;
+    }) => Promise<{
+        ok: boolean;
+        data?: any;
+        error?: any;
+    }>;
+    importFromUrl?: (url: string) => Promise<{
+        ok: boolean;
+        data?: any;
+        error?: any;
+    }>;
+    importarMedioDesdeUrl?: (url: string) => Promise<{
+        ok: boolean;
+        data?: any;
+        error?: any;
+    }>;
+};
+declare function MediaSelector({ value, onChange, medios, accept, autoOpen, dialogOnly, onClose, }: {
+    value?: string | null;
+    onChange: (url: string | null, picked?: MediaSelectorItem | null) => void;
+    medios: MediosAdapter;
+    label?: string;
+    accept?: string;
+    autoOpen?: boolean;
+    dialogOnly?: boolean;
+    onClose?: () => void;
+}): react_jsx_runtime.JSX.Element;
+
+export { type MediaSelectorItem, type MediosAdapter, MediaSelector as default };

package/dist/MediaSelector.js

@@ -0,0 +1,225 @@
+"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 MediaSelector_exports = {};
+__export(MediaSelector_exports, {
+  default: () => MediaSelector
+});
+module.exports = __toCommonJS(MediaSelector_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ChartCard = __toESM(require("./ChartCard"));
+var import_Button = __toESM(require("./Button"));
+var import_Input = __toESM(require("./Input"));
+var import_Dialog = __toESM(require("./Dialog"));
+var import_Pagination = __toESM(require("./Pagination"));
+function MediaSelector({
+  value,
+  onChange,
+  medios,
+  accept = "image/png,image/jpeg,image/jpg,image/webp,image/gif",
+  autoOpen,
+  dialogOnly,
+  onClose
+}) {
+  const { obtenerMedios, items, page, lastPage, setPage, subirMedio } = medios;
+  const [openPicker, setOpenPicker] = (0, import_react.useState)(false);
+  const [uploading, setUploading] = (0, import_react.useState)(false);
+  const [progress, setProgress] = (0, import_react.useState)(0);
+  const inputRef = (0, import_react.useRef)(null);
+  const [linkValue, setLinkValue] = (0, import_react.useState)(value != null ? value : "");
+  const [linkLoading, setLinkLoading] = (0, import_react.useState)(false);
+  const [linkError, setLinkError] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    if (openPicker) obtenerMedios({ page: page || 1 });
+  }, [openPicker, page, obtenerMedios]);
+  (0, import_react.useEffect)(() => {
+    if (autoOpen) setOpenPicker(true);
+  }, [autoOpen]);
+  (0, import_react.useEffect)(() => {
+    if (openPicker) setLinkValue(value != null ? value : "");
+  }, [openPicker, value]);
+  const onFiles = async (files) => {
+    var _a, _b, _c, _d;
+    if (!(files == null ? void 0 : files.length)) return;
+    const file = files[0];
+    setUploading(true);
+    setProgress(0);
+    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;
+      onChange(url, res.data);
+    }
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    onFiles(e.dataTransfer.files);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-2", children: [
+    !dialogOnly && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Input.default, { value: value != null ? value : "", onChange: (e) => onChange(e.target.value || null), placeholder: "URL de imagen", clearable: true, onClear: () => onChange(null) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { variant: "secondary", onClick: () => setOpenPicker(true), children: "Elegir" })
+      ] }),
+      value && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { className: "aspect-video w-full overflow-hidden rounded-xl bg-slate-100", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: value, alt: "preview", className: "h-full w-full object-cover" }) }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Dialog.default, { open: openPicker, onClose: () => {
+      setOpenPicker(false);
+      onClose == null ? void 0 : onClose();
+    }, size: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default.Header, { title: "Biblioteca de medios", description: "Selecciona una imagen o sube una nueva", onClose: () => {
+        setOpenPicker(false);
+        onClose == null ? void 0 : onClose();
+      } }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartCard.default, { className: "lg:col-span-1", title: "Subir imagen", subtitle: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Arrastra una imagen o selecci\xF3nala" }), right: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Input.default, { unstyled: true, ref: inputRef, type: "file", accept, className: "hidden", onChange: (e) => onFiles(e.target.files) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { onClick: () => {
+            var _a;
+            return (_a = inputRef.current) == null ? void 0 : _a.click();
+          }, disabled: uploading, children: "Seleccionar" })
+        ] }), children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-8 w-8 text-slate-400", fill: "none", stroke: "currentColor", strokeWidth: "1.6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 16V4M7 9l5-5 5 5M20 16v3a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-3" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-medium", children: "Soltar imagen aqu\xED" }),
+              uploading && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-3 w-full", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-1 text-xs text-slate-500", children: [
+                  progress,
+                  "%"
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-2 overflow-hidden rounded-full bg-slate-100 dark:bg-white/10", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-full bg-gradient-to-r from-emerald-500/70 to-emerald-500/20", style: { width: `${progress}%` } }) })
+              ] })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ChartCard.default, { className: "lg:col-span-1", title: "Desde enlace", subtitle: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Pega una URL http(s) v\xE1lida" }), compact: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_Input.default,
+              {
+                type: "url",
+                placeholder: "https://\u2026",
+                value: linkValue,
+                onChange: (e) => {
+                  setLinkValue(e.target.value);
+                  setLinkError(null);
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_Button.default,
+              {
+                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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "lg:col-span-2 space-y-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-sm text-slate-500", children: [
+              "P\xE1gina ",
+              page,
+              " de ",
+              Math.max(1, lastPage)
+            ] }),
+            lastPage > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pagination.default, { page, totalPages: lastPage, onPageChange: setPage })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4", children: items.map((m) => {
+            var _a;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_Button.default,
+              {
+                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();
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "aspect-square w-full overflow-hidden rounded-xl bg-slate-100", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: (_a = m.url) != null ? _a : "", alt: m.nombre, className: "h-full w-full object-cover transition group-hover:scale-[1.01]" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate p-1 text-xs", children: m.nombre })
+                ]
+              },
+              m.id
+            );
+          }) })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default.Footer, { align: "end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { variant: "secondary", onClick: () => {
+        setOpenPicker(false);
+        onClose == null ? void 0 : onClose();
+      }, children: "Cerrar" }) })
+    ] })
+  ] });
+}