framepexls-ui-lib 2.0.0 → 2.2.0

package/dist/MediaLibraryLayout.d.ts

@@ -0,0 +1,89 @@
+import React__default from 'react';
+import Button from './Button.js';
+import { DataPageLayoutProps, DataPageKpiTickerItem, DataPagePaginationProps } from './DataPageLayout.js';
+import './DataTable.js';
+import './DataTableCardFooter.js';
+import './EmptyState.js';
+import './PageScaffold.js';
+import './Badge.js';
+import './Breadcrumb.js';
+import './FiltersMultiSelect.js';
+import './CheckboxPillsGroup.js';
+
+type MediaLibraryBaseItem = {
+    id: string | number;
+    name?: string;
+    url?: string | null;
+    meta?: React__default.ReactNode;
+    active?: boolean;
+};
+type MediaLibraryUploadItem = {
+    id: string | number;
+    name: string;
+    progress: number;
+    status?: "pending" | "uploading" | "done" | "error";
+    error?: React__default.ReactNode;
+};
+type MediaLibraryLabels = {
+    actions?: string;
+    uploadAction?: string;
+    clearSearch?: string;
+    uploadTitle?: string;
+    uploadSubtitle?: React__default.ReactNode;
+    uploadButton?: string;
+    uploadDropTitle?: React__default.ReactNode;
+    uploadDropHelp?: React__default.ReactNode;
+    noItemsTitle?: React__default.ReactNode;
+    noItemsSubtitle?: React__default.ReactNode;
+    noSearchResultsSubtitle?: React__default.ReactNode;
+    previewTitle?: React__default.ReactNode;
+    previewAction?: string;
+    copyAction?: string;
+    copiedAction?: string;
+    renameAction?: string;
+    replaceAction?: string;
+    deleteAction?: string;
+    brokenImage?: string;
+};
+type MediaLibraryUploadConfig = {
+    accept?: string;
+    multiple?: boolean;
+    buttonColor?: React__default.ComponentProps<typeof Button>["color"];
+    onFilesSelected: (files: FileList | null) => void | Promise<void>;
+};
+type DataLayoutBaseProps = Omit<DataPageLayoutProps<MediaLibraryBaseItem, string>, "actions" | "beforeTable" | "controlsRight" | "empty" | "emptyAction" | "emptyState" | "error" | "pagination" | "rows" | "columns" | "getRowId" | "search" | "table" | "tableContainerClassName" | "tickerItems">;
+type MediaLibraryLayoutProps<Item extends MediaLibraryBaseItem = MediaLibraryBaseItem> = DataLayoutBaseProps & {
+    items: Item[];
+    totalItems?: number;
+    tickerItems?: DataPageKpiTickerItem[];
+    query?: string;
+    onQueryChange?: (next: string) => void;
+    searchId?: string;
+    searchPlaceholder?: string;
+    upload?: MediaLibraryUploadConfig | false;
+    uploads?: MediaLibraryUploadItem[];
+    pagination?: DataPagePaginationProps;
+    error?: React__default.ReactNode;
+    labels?: MediaLibraryLabels;
+    actionMenuMaxHeight?: number;
+    controlsRight?: React__default.ReactNode;
+    beforeGallery?: React__default.ReactNode;
+    afterGallery?: React__default.ReactNode;
+    extraActions?: React__default.ReactNode;
+    overlays?: React__default.ReactNode;
+    tableContainerClassName?: string;
+    gridClassName?: string;
+    getItemId?: (item: Item) => string | number;
+    getItemName?: (item: Item) => string;
+    getItemUrl?: (item: Item) => string | null | undefined;
+    getItemMeta?: (item: Item) => React__default.ReactNode;
+    getItemActive?: (item: Item) => boolean;
+    onPreview?: (item: Item) => void;
+    onCopyUrl?: (item: Item) => void | Promise<void>;
+    onRename?: (item: Item) => void;
+    onReplace?: (item: Item) => void;
+    onDelete?: (item: Item) => void;
+};
+declare function MediaLibraryLayout<Item extends MediaLibraryBaseItem = MediaLibraryBaseItem>({ items, totalItems, tickerItems, query, onQueryChange, searchId, searchPlaceholder, upload, uploads, pagination, error, labels: labelsProp, actionMenuMaxHeight, controlsRight, beforeGallery, afterGallery, extraActions, overlays, tableContainerClassName, gridClassName, getItemId, getItemName, getItemUrl, getItemMeta, getItemActive, onPreview, onCopyUrl, onRename, onReplace, onDelete, ...pageProps }: MediaLibraryLayoutProps<Item>): React__default.JSX.Element;
+
+export { type MediaLibraryBaseItem, type MediaLibraryLabels, type MediaLibraryLayoutProps, type MediaLibraryUploadConfig, type MediaLibraryUploadItem, MediaLibraryLayout as default };

package/dist/MediaLibraryLayout.js

@@ -0,0 +1,369 @@
+"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 MediaLibraryLayout_exports = {};
+__export(MediaLibraryLayout_exports, {
+  default: () => MediaLibraryLayout
+});
+module.exports = __toCommonJS(MediaLibraryLayout_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_Button = __toESM(require("./Button"));
+var import_ChartCard = __toESM(require("./ChartCard"));
+var import_DataPageLayout = __toESM(require("./DataPageLayout"));
+var import_Dialog = __toESM(require("./Dialog"));
+var import_Dropdown = __toESM(require("./Dropdown"));
+var import_Input = __toESM(require("./Input"));
+var import_iconos = require("./iconos");
+function cx(...values) {
+  return values.filter(Boolean).join(" ");
+}
+const defaultLabels = {
+  actions: "Acciones",
+  uploadAction: "Subir archivos",
+  clearSearch: "Limpiar b\xFAsqueda",
+  uploadTitle: "Subir archivos",
+  uploadSubtitle: "Formatos permitidos: JPG, PNG, WEBP, GIF",
+  uploadButton: "Seleccionar",
+  uploadDropTitle: "Arrastra y suelta im\xE1genes aqu\xED o haz clic",
+  uploadDropHelp: "M\xE1ximo recomendado 16MB por archivo",
+  noItemsTitle: "No hay medios",
+  noItemsSubtitle: "Sube im\xE1genes para agregarlas al repositorio.",
+  noSearchResultsSubtitle: "Ajusta la b\xFAsqueda para ver resultados.",
+  previewTitle: "Vista previa",
+  previewAction: "Visualizar",
+  copyAction: "Copiar URL",
+  copiedAction: "Copiado",
+  renameAction: "Renombrar",
+  replaceAction: "Reemplazar",
+  deleteAction: "Eliminar",
+  brokenImage: "Imagen no disponible"
+};
+function MediaLibraryLayout({
+  items,
+  totalItems,
+  tickerItems,
+  query = "",
+  onQueryChange,
+  searchId = "media-library-search",
+  searchPlaceholder = "Buscar por nombre",
+  upload,
+  uploads = [],
+  pagination,
+  error,
+  labels: labelsProp,
+  actionMenuMaxHeight = 420,
+  controlsRight,
+  beforeGallery,
+  afterGallery,
+  extraActions,
+  overlays,
+  tableContainerClassName,
+  gridClassName,
+  getItemId = (item) => item.id,
+  getItemName = (item) => {
+    var _a;
+    return (_a = item.name) != null ? _a : "";
+  },
+  getItemUrl = (item) => item.url,
+  getItemMeta = (item) => item.meta,
+  getItemActive = (item) => {
+    var _a;
+    return (_a = item.active) != null ? _a : true;
+  },
+  onPreview,
+  onCopyUrl,
+  onRename,
+  onReplace,
+  onDelete,
+  ...pageProps
+}) {
+  var _a, _b;
+  const labels = { ...defaultLabels, ...labelsProp };
+  const inputRef = import_react.default.useRef(null);
+  const [previewItem, setPreviewItem] = import_react.default.useState(null);
+  const [previewImageError, setPreviewImageError] = import_react.default.useState(false);
+  const [copiedId, setCopiedId] = import_react.default.useState(null);
+  import_react.default.useEffect(() => {
+    setPreviewImageError(false);
+  }, [previewItem ? getItemUrl(previewItem) : null]);
+  const openUpload = import_react.default.useCallback(() => {
+    var _a2;
+    (_a2 = inputRef.current) == null ? void 0 : _a2.click();
+  }, []);
+  const openPreview = import_react.default.useCallback(
+    (item) => {
+      setPreviewItem(item);
+      onPreview == null ? void 0 : onPreview(item);
+    },
+    [onPreview]
+  );
+  const copyUrl = import_react.default.useCallback(
+    async (item) => {
+      if (onCopyUrl) {
+        await onCopyUrl(item);
+      } else {
+        const url = getItemUrl(item);
+        if (url) await navigator.clipboard.writeText(url);
+      }
+      const id = getItemId(item);
+      setCopiedId(id);
+      window.setTimeout(() => setCopiedId((current) => current === id ? null : current), 1200);
+    },
+    [getItemId, getItemUrl, onCopyUrl]
+  );
+  const uploader = upload === false ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_ChartCard.default,
+    {
+      title: labels.uploadTitle,
+      subtitle: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: labels.uploadSubtitle }),
+      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: (_a = upload == null ? void 0 : upload.accept) != null ? _a : "image/png,image/jpeg,image/jpg,image/webp,image/gif",
+            multiple: (_b = upload == null ? void 0 : upload.multiple) != null ? _b : true,
+            className: "hidden",
+            onChange: (event) => {
+              void (upload == null ? void 0 : upload.onFilesSelected(event.target.files));
+              event.currentTarget.value = "";
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { color: upload == null ? void 0 : upload.buttonColor, onClick: openUpload, children: labels.uploadButton })
+      ] }),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            onDragOver: (event) => {
+              event.preventDefault();
+              event.dataTransfer.dropEffect = "copy";
+            },
+            onDrop: (event) => {
+              event.preventDefault();
+              void (upload == null ? void 0 : upload.onFilesSelected(event.dataTransfer.files));
+            },
+            onClick: openUpload,
+            className: "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-[color-mix(in_oklab,var(--border)_78%,transparent)] bg-[color-mix(in_oklab,var(--surface)_84%,var(--card))] p-8 text-center transition hover:border-[color-mix(in_oklab,var(--border)_92%,var(--primary))] hover:bg-[color-mix(in_oklab,var(--surface)_78%,var(--card))]",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.ArrowUpFromBracketIcon, { className: "h-8 w-8 text-[color-mix(in_oklab,var(--muted)_78%,transparent)]" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-medium", children: labels.uploadDropTitle }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-[var(--muted)]", children: labels.uploadDropHelp })
+            ]
+          }
+        ),
+        uploads.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-4 space-y-2", children: uploads.map((uploadItem) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-3 rounded-xl border border-[color-mix(in_oklab,var(--border)_78%,transparent)] bg-[color-mix(in_oklab,var(--card)_74%,transparent)] p-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-sm font-medium", children: uploadItem.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-xs text-[var(--muted)]", children: [
+              uploadItem.progress,
+              "%"
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 h-2 w-full overflow-hidden rounded-full bg-[color-mix(in_oklab,var(--surface)_78%,transparent)]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: "h-full bg-[color-mix(in_oklab,var(--primary)_68%,transparent)]",
+              style: { width: `${Math.max(0, Math.min(100, uploadItem.progress))}%` }
+            }
+          ) }),
+          uploadItem.status === "error" && uploadItem.error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-xs text-[var(--primary)]", children: uploadItem.error }) : null
+        ] }) }, uploadItem.id)) }) : null
+      ]
+    }
+  );
+  const gallery = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    beforeGallery,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cx("grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5", gridClassName), children: items.map((item) => {
+      const id = getItemId(item);
+      const name = getItemName(item);
+      const url = getItemUrl(item);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        MediaLibraryCard,
+        {
+          name,
+          url,
+          meta: getItemMeta(item),
+          active: getItemActive(item),
+          copied: copiedId === id,
+          labels,
+          actionMenuMaxHeight,
+          onPreview: () => openPreview(item),
+          onCopy: () => void copyUrl(item),
+          onRename: onRename ? () => onRename(item) : void 0,
+          onReplace: onReplace ? () => onReplace(item) : void 0,
+          onDelete: onDelete ? () => onDelete(item) : void 0
+        },
+        id
+      );
+    }) }),
+    afterGallery
+  ] });
+  const previewName = previewItem ? getItemName(previewItem) : labels.previewTitle;
+  const previewUrl = previewItem ? getItemUrl(previewItem) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_DataPageLayout.default,
+    {
+      ...pageProps,
+      tickerItems,
+      search: onQueryChange ? {
+        id: searchId,
+        value: query,
+        onChange: onQueryChange,
+        placeholder: searchPlaceholder
+      } : void 0,
+      actions: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        upload !== false ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Dropdown.default, { align: "end", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Dropdown.default.Trigger, { className: "px-3 py-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm font-medium", children: labels.actions }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dropdown.default.MenuPuntosVerticalIcon, {})
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Dropdown.default.Content, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dropdown.default.Item, { onSelect: openUpload, icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.PlusIcon, { className: "h-4 w-4" }), children: labels.uploadAction }),
+            query.trim() && onQueryChange ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dropdown.default.Item, { onSelect: () => onQueryChange(""), children: labels.clearSearch }) : null
+          ] })
+        ] }) : null,
+        extraActions
+      ] }),
+      beforeTable: uploader,
+      controlsRight: controlsRight != null ? controlsRight : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-xs text-[var(--muted)]", children: [
+        totalItems != null ? totalItems : items.length,
+        " elemento(s)"
+      ] }),
+      table: gallery,
+      tableContainerClassName: cx("px-4 pt-4 pb-28 sm:px-5 sm:pt-5 sm:pb-32", tableContainerClassName),
+      empty: items.length === 0,
+      emptyState: {
+        title: labels.noItemsTitle,
+        subtitle: query.trim() ? labels.noSearchResultsSubtitle : labels.noItemsSubtitle
+      },
+      emptyAction: upload !== false ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { variant: "primary", onClick: openUpload, children: labels.uploadAction }) : null,
+      pagination,
+      error,
+      overlays: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Dialog.default, { open: Boolean(previewItem), onClose: () => setPreviewItem(null), title: previewName, size: "full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default.Header, { title: previewName, description: previewItem ? getItemMeta(previewItem) : void 0, onClose: () => setPreviewItem(null) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default.Body, { padded: false, noScroll: true, className: "min-h-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex h-full min-h-[60vh] items-center justify-center bg-[color-mix(in_oklab,var(--surface)_88%,var(--card))] p-4", children: previewUrl && !previewImageError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "img",
+            {
+              src: previewUrl,
+              alt: String(previewName),
+              className: "max-h-[calc(100vh-9rem)] max-w-full rounded-2xl object-contain shadow-2xl",
+              onError: () => setPreviewImageError(true)
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BrokenImageFallback, { label: labels.brokenImage, size: "lg" }) }) })
+        ] }),
+        overlays
+      ] })
+    }
+  );
+}
+function MediaLibraryCard({
+  name,
+  url,
+  meta,
+  active,
+  copied,
+  labels,
+  actionMenuMaxHeight,
+  onPreview,
+  onCopy,
+  onRename,
+  onReplace,
+  onDelete
+}) {
+  const [imageError, setImageError] = import_react.default.useState(false);
+  const showImage = Boolean(url) && !imageError;
+  import_react.default.useEffect(() => {
+    setImageError(false);
+  }, [url]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "group relative overflow-hidden rounded-2xl border border-[color-mix(in_oklab,var(--border)_78%,transparent)] bg-[color-mix(in_oklab,var(--card)_82%,transparent)] shadow-sm ring-1 ring-black/5 backdrop-blur transition hover:border-[color-mix(in_oklab,var(--border)_84%,var(--primary))]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: onPreview,
+        className: "block aspect-square w-full bg-[color-mix(in_oklab,var(--surface)_78%,transparent)] text-left focus:outline-none focus:ring-2 focus:ring-[color-mix(in_oklab,var(--ring)_55%,transparent)]",
+        "aria-label": `${labels.previewAction} ${name}`,
+        children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "img",
+          {
+            src: url != null ? url : void 0,
+            alt: name,
+            className: cx("h-full w-full object-cover", !active && "opacity-60"),
+            onError: () => setImageError(true)
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BrokenImageFallback, { label: labels.brokenImage })
+      }
+    ),
+    /* @__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: name }),
+        meta ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-xs text-[var(--muted)]", children: meta }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Dropdown.default, { align: "end", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dropdown.default.Trigger, { "aria-label": labels.actions, className: "px-2.5 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dropdown.default.MenuPuntosVerticalIcon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Dropdown.default.Content, { "aria-label": labels.actions, maxHeight: actionMenuMaxHeight, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dropdown.default.Item, { onSelect: onPreview, icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.EyeIcon, { className: "h-4 w-4" }), children: labels.previewAction }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dropdown.default.Item, { onSelect: onCopy, icon: copied ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.CheckIcon, { className: "h-4 w-4 text-emerald-600" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.CopyIcon, { className: "h-4 w-4" }), children: copied ? labels.copiedAction : labels.copyAction }),
+          onRename ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dropdown.default.Item, { onSelect: onRename, icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.PencilIcon, { className: "h-4 w-4" }), children: labels.renameAction }) : null,
+          onReplace ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dropdown.default.Item, { onSelect: onReplace, icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.PlusIcon, { className: "h-4 w-4" }), children: labels.replaceAction }) : null,
+          onDelete ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dropdown.default.Separator, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dropdown.default.Item, { danger: true, onSelect: onDelete, icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.TrashIcon, { className: "h-4 w-4" }), children: labels.deleteAction })
+          ] }) : null
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function BrokenImageFallback({ label, size = "md" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: "flex h-full w-full items-center justify-center bg-[color-mix(in_oklab,var(--surface)_84%,var(--card))]",
+      "aria-label": label,
+      role: "img",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "span",
+        {
+          className: cx(
+            "flex items-center justify-center rounded-2xl border border-[color-mix(in_oklab,var(--border)_86%,transparent)] bg-[var(--card)] text-[color-mix(in_oklab,var(--primary)_54%,var(--muted))] shadow-sm",
+            size === "lg" ? "h-40 w-40" : "h-16 w-16"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.ImageBrokenIcon, { className: size === "lg" ? "h-14 w-14" : "h-8 w-8" })
+        }
+      )
+    }
+  );
+}