framepexls-ui-lib 0.1.13 → 0.1.15

package/dist/Input.js

@@ -34,13 +34,26 @@ __export(Input_exports, {
 module.exports = __toCommonJS(Input_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
+var import_Button = __toESM(require("./Button"));
 function cx(...a) {
   return a.filter(Boolean).join(" ");
 }
 const baseControl = "w-full rounded-2xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-slate-900 placeholder:text-slate-400 shadow-sm outline-none transition focus:ring-4 focus:ring-slate-900/5 focus:border-slate-300 disabled:opacity-60 disabled:cursor-not-allowed dark:border-white/10 dark:bg-white/10 dark:text-slate-100 dark:placeholder:text-slate-400 dark:focus:ring-white/10";
 const errorControl = "border-blue-300 focus:border-blue-300 focus:ring-blue-500/15";
 const Input = import_react.default.forwardRef(
-  ({ className, error, leftSlot, rightSlot, clearable, onClear, tone = "default", value, onChange, ...props }, ref) => {
+  ({ className, error, leftSlot, rightSlot, clearable, onClear, tone = "default", value, onChange, unstyled, ...props }, ref) => {
+    if (unstyled) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "input",
+        {
+          ref,
+          value,
+          onChange,
+          className,
+          ...props
+        }
+      );
+    }
     const showClear = clearable && !!value && !props.disabled;
     const readOnly = !onChange;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative content-center", children: [
@@ -63,12 +76,14 @@ const Input = import_react.default.forwardRef(
           ...props
         }
       ),
-      showClear ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
+      rightSlot && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-slate-400", children: rightSlot }),
+      showClear && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Button.default,
         {
+          unstyled: true,
           type: "button",
           title: "Limpiar",
-          className: "absolute right-2.5 top-1/2 -translate-y-1/2 inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/5",
+          className: `absolute ${rightSlot ? "right-9" : "right-2.5"} top-1/2 -translate-y-1/2 inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/5`,
           onClick: (e) => {
             e.preventDefault();
             onClear == null ? void 0 : onClear();
@@ -79,7 +94,7 @@ const Input = import_react.default.forwardRef(
           },
           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: "M18 6L6 18M6 6l12 12" }) })
         }
-      ) : rightSlot && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-slate-400", children: rightSlot })
+      )
     ] });
   }
 );

package/dist/Input.mjs

@@ -1,13 +1,26 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
+import Button from "./Button";
 function cx(...a) {
   return a.filter(Boolean).join(" ");
 }
 const baseControl = "w-full rounded-2xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-slate-900 placeholder:text-slate-400 shadow-sm outline-none transition focus:ring-4 focus:ring-slate-900/5 focus:border-slate-300 disabled:opacity-60 disabled:cursor-not-allowed dark:border-white/10 dark:bg-white/10 dark:text-slate-100 dark:placeholder:text-slate-400 dark:focus:ring-white/10";
 const errorControl = "border-blue-300 focus:border-blue-300 focus:ring-blue-500/15";
 const Input = React.forwardRef(
-  ({ className, error, leftSlot, rightSlot, clearable, onClear, tone = "default", value, onChange, ...props }, ref) => {
+  ({ className, error, leftSlot, rightSlot, clearable, onClear, tone = "default", value, onChange, unstyled, ...props }, ref) => {
+    if (unstyled) {
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          value,
+          onChange,
+          className,
+          ...props
+        }
+      );
+    }
     const showClear = clearable && !!value && !props.disabled;
     const readOnly = !onChange;
     return /* @__PURE__ */ jsxs("div", { className: "relative content-center", children: [
@@ -30,12 +43,14 @@ const Input = React.forwardRef(
           ...props
         }
       ),
-      showClear ? /* @__PURE__ */ jsx(
-        "button",
+      rightSlot && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-slate-400", children: rightSlot }),
+      showClear && /* @__PURE__ */ jsx(
+        Button,
         {
+          unstyled: true,
           type: "button",
           title: "Limpiar",
-          className: "absolute right-2.5 top-1/2 -translate-y-1/2 inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/5",
+          className: `absolute ${rightSlot ? "right-9" : "right-2.5"} top-1/2 -translate-y-1/2 inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/5`,
           onClick: (e) => {
             e.preventDefault();
             onClear == null ? void 0 : onClear();
@@ -46,7 +61,7 @@ const Input = React.forwardRef(
           },
           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: "M18 6L6 18M6 6l12 12" }) })
         }
-      ) : rightSlot && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-slate-400", children: rightSlot })
+      )
     ] });
   }
 );

package/dist/Link.d.mts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type Size = "sm" | "md";
+type LinkProps = Omit<React__default.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> & {
+    href: string;
+    showAnchorIcon?: boolean;
+    underline?: "hover" | "always" | "none";
+    size?: Size;
+    external?: boolean;
+    color?: "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
+};
+declare function Link({ href, children, className, showAnchorIcon, underline, size, external, color, ...rest }: LinkProps): react_jsx_runtime.JSX.Element;
+
+export { type LinkProps, Link as default };

package/dist/Link.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type Size = "sm" | "md";
+type LinkProps = Omit<React__default.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> & {
+    href: string;
+    showAnchorIcon?: boolean;
+    underline?: "hover" | "always" | "none";
+    size?: Size;
+    external?: boolean;
+    color?: "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
+};
+declare function Link({ href, children, className, showAnchorIcon, underline, size, external, color, ...rest }: LinkProps): react_jsx_runtime.JSX.Element;
+
+export { type LinkProps, Link as default };

package/dist/Link.js

@@ -0,0 +1,93 @@
+"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 Link_exports = {};
+__export(Link_exports, {
+  default: () => Link
+});
+module.exports = __toCommonJS(Link_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_link = __toESM(require("next/link"));
+function Link({
+  href,
+  children,
+  className,
+  showAnchorIcon,
+  underline = "hover",
+  size = "md",
+  external,
+  color = "rose",
+  ...rest
+}) {
+  const base = "inline-flex items-center gap-1 font-medium transition";
+  const sizeCls = size === "sm" ? "text-sm" : "text-[15px]";
+  const COLORS = {
+    slate: "text-slate-600 hover:text-slate-700 dark:text-slate-300 dark:hover:text-slate-200",
+    gray: "text-gray-600 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200",
+    zinc: "text-zinc-600 hover:text-zinc-700 dark:text-zinc-300 dark:hover:text-zinc-200",
+    neutral: "text-neutral-600 hover:text-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200",
+    stone: "text-stone-600 hover:text-stone-700 dark:text-stone-300 dark:hover:text-stone-200",
+    red: "text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300",
+    orange: "text-orange-600 hover:text-orange-700 dark:text-orange-400 dark:hover:text-orange-300",
+    amber: "text-amber-600 hover:text-amber-700 dark:text-amber-400 dark:hover:text-amber-300",
+    yellow: "text-yellow-600 hover:text-yellow-700 dark:text-yellow-400 dark:hover:text-yellow-300",
+    lime: "text-lime-600 hover:text-lime-700 dark:text-lime-400 dark:hover:text-lime-300",
+    green: "text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300",
+    emerald: "text-emerald-600 hover:text-emerald-700 dark:text-emerald-400 dark:hover:text-emerald-300",
+    teal: "text-teal-600 hover:text-teal-700 dark:text-teal-400 dark:hover:text-teal-300",
+    cyan: "text-cyan-600 hover:text-cyan-700 dark:text-cyan-400 dark:hover:text-cyan-300",
+    sky: "text-sky-600 hover:text-sky-700 dark:text-sky-400 dark:hover:text-sky-300",
+    blue: "text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300",
+    indigo: "text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300",
+    violet: "text-violet-600 hover:text-violet-700 dark:text-violet-400 dark:hover:text-violet-300",
+    purple: "text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300",
+    fuchsia: "text-fuchsia-600 hover:text-fuchsia-700 dark:text-fuchsia-400 dark:hover:text-fuchsia-300",
+    pink: "text-pink-600 hover:text-pink-700 dark:text-pink-400 dark:hover:text-pink-300",
+    rose: "text-rose-600 hover:text-rose-700 dark:text-rose-400 dark:hover:text-rose-300"
+  };
+  const deco = underline === "always" ? "underline decoration-dotted underline-offset-4" : underline === "hover" ? "hover:underline decoration-dotted underline-offset-4" : "";
+  const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "span",
+    {
+      className: [base, sizeCls, COLORS[color], deco, className != null ? className : ""].join(" "),
+      ...rest,
+      children: [
+        children,
+        showAnchorIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "h-[15px] w-[15px] opacity-80", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 3h7v7" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 14L21 3" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 14v7h-7" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 10l11 11" })
+        ] })
+      ]
+    }
+  );
+  const isExternal = external != null ? external : /^https?:\/\//i.test(href);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.default, { href, target: isExternal ? "_blank" : rest.target, rel: isExternal ? "noopener noreferrer" : rest.rel, children: content });
+}

package/dist/Link.mjs

@@ -0,0 +1,63 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import NextLink from "next/link";
+function Link({
+  href,
+  children,
+  className,
+  showAnchorIcon,
+  underline = "hover",
+  size = "md",
+  external,
+  color = "rose",
+  ...rest
+}) {
+  const base = "inline-flex items-center gap-1 font-medium transition";
+  const sizeCls = size === "sm" ? "text-sm" : "text-[15px]";
+  const COLORS = {
+    slate: "text-slate-600 hover:text-slate-700 dark:text-slate-300 dark:hover:text-slate-200",
+    gray: "text-gray-600 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200",
+    zinc: "text-zinc-600 hover:text-zinc-700 dark:text-zinc-300 dark:hover:text-zinc-200",
+    neutral: "text-neutral-600 hover:text-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200",
+    stone: "text-stone-600 hover:text-stone-700 dark:text-stone-300 dark:hover:text-stone-200",
+    red: "text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300",
+    orange: "text-orange-600 hover:text-orange-700 dark:text-orange-400 dark:hover:text-orange-300",
+    amber: "text-amber-600 hover:text-amber-700 dark:text-amber-400 dark:hover:text-amber-300",
+    yellow: "text-yellow-600 hover:text-yellow-700 dark:text-yellow-400 dark:hover:text-yellow-300",
+    lime: "text-lime-600 hover:text-lime-700 dark:text-lime-400 dark:hover:text-lime-300",
+    green: "text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300",
+    emerald: "text-emerald-600 hover:text-emerald-700 dark:text-emerald-400 dark:hover:text-emerald-300",
+    teal: "text-teal-600 hover:text-teal-700 dark:text-teal-400 dark:hover:text-teal-300",
+    cyan: "text-cyan-600 hover:text-cyan-700 dark:text-cyan-400 dark:hover:text-cyan-300",
+    sky: "text-sky-600 hover:text-sky-700 dark:text-sky-400 dark:hover:text-sky-300",
+    blue: "text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300",
+    indigo: "text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300",
+    violet: "text-violet-600 hover:text-violet-700 dark:text-violet-400 dark:hover:text-violet-300",
+    purple: "text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300",
+    fuchsia: "text-fuchsia-600 hover:text-fuchsia-700 dark:text-fuchsia-400 dark:hover:text-fuchsia-300",
+    pink: "text-pink-600 hover:text-pink-700 dark:text-pink-400 dark:hover:text-pink-300",
+    rose: "text-rose-600 hover:text-rose-700 dark:text-rose-400 dark:hover:text-rose-300"
+  };
+  const deco = underline === "always" ? "underline decoration-dotted underline-offset-4" : underline === "hover" ? "hover:underline decoration-dotted underline-offset-4" : "";
+  const content = /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: [base, sizeCls, COLORS[color], deco, className != null ? className : ""].join(" "),
+      ...rest,
+      children: [
+        children,
+        showAnchorIcon && /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "h-[15px] w-[15px] opacity-80", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx("path", { d: "M14 3h7v7" }),
+          /* @__PURE__ */ jsx("path", { d: "M10 14L21 3" }),
+          /* @__PURE__ */ jsx("path", { d: "M21 14v7h-7" }),
+          /* @__PURE__ */ jsx("path", { d: "M3 10l11 11" })
+        ] })
+      ]
+    }
+  );
+  const isExternal = external != null ? external : /^https?:\/\//i.test(href);
+  return /* @__PURE__ */ jsx(NextLink, { href, target: isExternal ? "_blank" : rest.target, rel: isExternal ? "noopener noreferrer" : rest.rel, children: content });
+}
+export {
+  Link as default
+};

package/dist/MediaCard.d.mts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type MediaCardProps = {
+    imageUrl?: string | null;
+    title: string;
+    subtitle?: string;
+    copyUrl?: string;
+    onRename?: () => void;
+    onReplace?: () => void;
+    onDelete?: () => void;
+    className?: string;
+};
+declare function MediaCard({ imageUrl, title, subtitle, copyUrl, onRename, onReplace, onDelete, className, }: MediaCardProps): react_jsx_runtime.JSX.Element;
+
+export { type MediaCardProps, MediaCard as default };

package/dist/MediaCard.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type MediaCardProps = {
+    imageUrl?: string | null;
+    title: string;
+    subtitle?: string;
+    copyUrl?: string;
+    onRename?: () => void;
+    onReplace?: () => void;
+    onDelete?: () => void;
+    className?: string;
+};
+declare function MediaCard({ imageUrl, title, subtitle, copyUrl, onRename, onReplace, onDelete, className, }: MediaCardProps): react_jsx_runtime.JSX.Element;
+
+export { type MediaCardProps, MediaCard as default };

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 };