limbo-component 2.0.3 → 2.1.0

package/dist/limbo.es.js

@@ -13338,7 +13338,7 @@ function ImageVariantsModal({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "limbo-modal-overlay",
+      className: "fixed inset-0 bg-black/70 flex items-center justify-center z-[1000] p-5",
       onClick: onClose,
       role: "dialog",
       "aria-modal": "true",
@@ -13346,18 +13346,18 @@ function ImageVariantsModal({
       children: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: "limbo-modal-content limbo-variants-modal",
+          className: "bg-white rounded-xl max-w-[90vw] max-h-[90vh] overflow-hidden shadow-2xl flex flex-col w-[900px] md:w-[95vw] md:max-h-[95vh]",
           onClick: (e) => e.stopPropagation(),
           children: [
-            /* @__PURE__ */ jsxs("div", { className: "limbo-modal-header", children: [
-              /* @__PURE__ */ jsxs("h2", { id: "variants-modal-title", children: [
+            /* @__PURE__ */ jsxs("div", { className: "p-6 md:p-4 border-b border-gray-200 flex justify-between items-center bg-gray-50", children: [
+              /* @__PURE__ */ jsxs("h2", { id: "variants-modal-title", className: "m-0 text-xl font-semibold text-gray-800", children: [
                 "Recortes de ",
                 image?.filename
               ] }),
               /* @__PURE__ */ jsx(
                 "button",
                 {
-                  className: "limbo-modal-close",
+                  className: "bg-transparent border-none text-2xl cursor-pointer text-gray-500 px-2 rounded-md transition-all hover:bg-gray-200 hover:text-gray-700",
                   onClick: onClose,
                   "aria-label": "Cerrar modal de recortes",
                   children: "✕"
@@ -13367,23 +13367,15 @@ function ImageVariantsModal({
             deleteMessage && /* @__PURE__ */ jsx(
               "div",
               {
-                className: `limbo-variants-message limbo-variants-message--${deleteMessageType} mt-1`,
+                className: `mx-5 mb-4 mt-0 p-3 rounded ${deleteMessageType === "success" ? "bg-green-100 text-green-800 border border-green-200" : "bg-red-100 text-red-800 border border-red-200"}`,
                 role: "alert",
-                style: {
-                  padding: "12px 20px",
-                  margin: "0 20px 15px 20px",
-                  borderRadius: "4px",
-                  backgroundColor: deleteMessageType === "success" ? "#d4edda" : "#f8d7da",
-                  color: deleteMessageType === "success" ? "#155724" : "#721c24",
-                  border: `1px solid ${deleteMessageType === "success" ? "#c3e6cb" : "#f5c6cb"}`
-                },
                 children: deleteMessage
               }
             ),
-            /* @__PURE__ */ jsx("div", { className: "limbo-modal-body", children: loading ? /* @__PURE__ */ jsxs("div", { className: "limbo-variants-loading", children: [
-              /* @__PURE__ */ jsx("div", { className: "limbo-loader" }),
+            /* @__PURE__ */ jsx("div", { className: "p-6 md:p-4 overflow-y-auto flex-1", children: loading ? /* @__PURE__ */ jsxs("div", { className: "text-center py-10 px-5 text-gray-500", children: [
+              /* @__PURE__ */ jsx("div", { className: "w-10 h-10 border-[3px] border-gray-200 border-t-blue-500 rounded-full animate-spin mx-auto mb-4" }),
               /* @__PURE__ */ jsx("p", { children: "Cargando recortes..." })
-            ] }) : error ? /* @__PURE__ */ jsxs("div", { className: "limbo-variants-error", children: [
+            ] }) : error ? /* @__PURE__ */ jsxs("div", { className: "text-center py-10 px-5 text-red-600", children: [
               /* @__PURE__ */ jsxs("p", { children: [
                 "Error al cargar recortes: ",
                 error
@@ -13392,42 +13384,50 @@ function ImageVariantsModal({
                 "button",
                 {
                   onClick: () => loadVariants(image.id),
-                  className: "btn btn-primary",
+                  className: "mt-3 text-xs px-3 py-1.5 rounded-md border cursor-pointer transition-all bg-[#001978] border-[#001978] text-white hover:bg-[#334793] hover:border-[#334793]",
                   children: "Reintentar"
                 }
               )
-            ] }) : variants.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "limbo-variants-empty", children: [
+            ] }) : variants.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-10 px-5 text-gray-500", children: [
               /* @__PURE__ */ jsx("p", { children: "Esta imagen no tiene recortes aún." }),
-              /* @__PURE__ */ jsx("small", { children: "Los recortes aparecerán aquí después de hacer recortes o redimensionados." })
+              /* @__PURE__ */ jsx("small", { className: "block mt-2 text-sm text-gray-400", children: "Los recortes aparecerán aquí después de hacer recortes o redimensionados." })
             ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsxs("div", { className: "limbo-variant-section", children: [
-                /* @__PURE__ */ jsx("h3", { children: "Imagen original" }),
+              /* @__PURE__ */ jsxs("div", { className: "mb-8 last:mb-0", children: [
+                /* @__PURE__ */ jsx("h3", { className: "m-0 mb-4 text-lg font-semibold text-gray-800 border-b-2 border-gray-200 pb-2", children: "Imagen original" }),
                 /* @__PURE__ */ jsxs(
                   "div",
                   {
                     onClick: handleViewOriginal,
-                    className: "limbo-variant-card limbo-variant-original cursor-pointer",
+                    className: "border border-sky-500 rounded-lg overflow-hidden bg-sky-50 transition-all hover:border-blue-500 hover:shadow-lg cursor-pointer",
                     children: [
-                      /* @__PURE__ */ jsx("div", { className: "limbo-variant-preview", children: /* @__PURE__ */ jsx("img", { src: image.url, alt: image.filename, loading: "lazy" }) }),
-                      /* @__PURE__ */ jsxs("div", { className: "limbo-variant-info", children: [
-                        /* @__PURE__ */ jsx("div", { className: "limbo-variant-name", children: image.filename }),
-                        /* @__PURE__ */ jsxs("div", { className: "limbo-variant-meta", children: [
-                          /* @__PURE__ */ jsxs("span", { children: [
+                      /* @__PURE__ */ jsx("div", { className: "relative h-40 md:h-[120px] bg-gray-100 flex items-center justify-center overflow-hidden py-1", children: /* @__PURE__ */ jsx(
+                        "img",
+                        {
+                          src: image.url,
+                          alt: image.filename,
+                          loading: "lazy",
+                          className: "max-w-full max-h-full object-contain rounded"
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxs("div", { className: "p-3", children: [
+                        /* @__PURE__ */ jsx("div", { className: "font-semibold text-gray-800 mb-1 text-sm break-words", children: image.filename }),
+                        /* @__PURE__ */ jsxs("div", { className: "flex gap-2 mb-2 text-xs text-gray-500 flex-wrap", children: [
+                          /* @__PURE__ */ jsxs("span", { className: "bg-gray-100 px-1.5 py-0.5 rounded whitespace-nowrap", children: [
                             image.width,
                             "×",
                             image.height
                           ] }),
-                          /* @__PURE__ */ jsxs("span", { children: [
+                          /* @__PURE__ */ jsxs("span", { className: "bg-gray-100 px-1.5 py-0.5 rounded whitespace-nowrap", children: [
                             Math.round(image.file_size / 1024),
                             " KB"
                           ] })
                         ] })
                       ] }),
-                      /* @__PURE__ */ jsxs("div", { className: "limbo-variant-actions", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "p-3 border-t border-gray-100 flex gap-2 flex-wrap", children: [
                         shouldShowSelectButton && /* @__PURE__ */ jsx(
                           "button",
                           {
-                            className: "btn btn-success btn-sm",
+                            className: "px-2 py-1 text-xs rounded-md border cursor-pointer transition-all no-underline inline-flex items-center justify-center min-w-auto bg-[#128851] border-[#128851] text-white hover:bg-[#41a074] hover:border-[#41a074]",
                             onClick: (e) => {
                               e.stopPropagation();
                               onSelect?.(image);
@@ -13440,7 +13440,7 @@ function ImageVariantsModal({
                         shouldShowCropButton && /* @__PURE__ */ jsx(
                           "button",
                           {
-                            className: "btn btn-crop btn-sm",
+                            className: "px-2 py-1 text-xs rounded-md border cursor-pointer transition-all no-underline inline-flex items-center justify-center min-w-auto bg-[#7581b1] border-[#7581b1] text-white hover:bg-[#9da6cc] hover:border-[#9da6cc]",
                             onClick: (e) => {
                               e.stopPropagation();
                               handleCropOriginal();
@@ -13452,7 +13452,7 @@ function ImageVariantsModal({
                         shouldShowCopyButton && /* @__PURE__ */ jsx(
                           "button",
                           {
-                            className: "btn btn-secondary btn-sm",
+                            className: "px-2 py-1 text-xs rounded-md border cursor-pointer transition-all no-underline inline-flex items-center justify-center min-w-auto bg-[#888a91] border-[#888a91] text-white hover:bg-[#b6b7bb] hover:border-[#b6b7bb]",
                             onClick: (e) => {
                               e.stopPropagation();
                               handleCopyOriginalUrl();
@@ -13464,7 +13464,7 @@ function ImageVariantsModal({
                         shouldShowDownloadButton && /* @__PURE__ */ jsx(
                           "button",
                           {
-                            className: "btn btn-primary btn-sm",
+                            className: "px-2 py-1 text-xs rounded-md border cursor-pointer transition-all no-underline inline-flex items-center justify-center min-w-auto bg-[#001978] border-[#001978] text-white hover:bg-[#334793] hover:border-[#334793]",
                             onClick: (e) => {
                               e.stopPropagation();
                               handleDownloadOriginal();
@@ -13476,7 +13476,7 @@ function ImageVariantsModal({
                         shouldShowDeleteButton && onDelete && /* @__PURE__ */ jsx(
                           "button",
                           {
-                            className: "btn btn-danger btn-sm",
+                            className: "px-2 py-1 text-xs rounded-md border cursor-pointer transition-all no-underline inline-flex items-center justify-center min-w-auto bg-red-600 border-red-600 text-white hover:bg-red-700 hover:border-red-700",
                             onClick: (e) => {
                               e.stopPropagation();
                               handleDeleteOriginal();
@@ -13490,21 +13490,21 @@ function ImageVariantsModal({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "limbo-variant-section", children: [
-                /* @__PURE__ */ jsxs("h3", { children: [
+              /* @__PURE__ */ jsxs("div", { className: "mb-8 last:mb-0", children: [
+                /* @__PURE__ */ jsxs("h3", { className: "m-0 mb-4 text-lg font-semibold text-gray-800 border-b-2 border-gray-200 pb-2", children: [
                   "Recortes (",
                   variants.length,
                   ")"
                 ] }),
-                /* @__PURE__ */ jsx("div", { className: "limbo-variants-grid", children: variants.map((variant) => {
+                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4 md:grid-cols-4 md:gap-3", children: variants.map((variant) => {
                   const hasImageError = failedVariants.has(variant.id);
                   return /* @__PURE__ */ jsxs(
                     "div",
                     {
-                      className: `limbo-variant-card ${!hasImageError ? "cursor-pointer" : ""}`,
+                      className: `border border-gray-200 rounded-lg overflow-hidden bg-white transition-all hover:border-blue-500 hover:shadow-lg ${!hasImageError ? "cursor-pointer" : ""}`,
                       onClick: !hasImageError ? () => handleViewVariant(variant) : void 0,
                       children: [
-                        /* @__PURE__ */ jsxs("div", { className: "limbo-variant-preview", children: [
+                        /* @__PURE__ */ jsxs("div", { className: "relative h-40 md:h-[120px] bg-gray-100 flex items-center justify-center overflow-hidden py-1", children: [
                           /* @__PURE__ */ jsx(
                             "img",
                             {
@@ -13512,52 +13512,39 @@ function ImageVariantsModal({
                               alt: variant.name || variant.filename || `Variante ${variant.id}`,
                               loading: "eager",
                               onError: () => handleVariantImageError(variant.id),
+                              className: "max-w-full max-h-full object-contain rounded",
                               style: {
                                 display: hasImageError ? "none" : "block"
                               }
                             }
                           ),
-                          hasImageError && /* @__PURE__ */ jsx(
-                            "div",
-                            {
-                              className: "limbo-variant-error",
-                              style: {
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "center",
-                                height: "100px",
-                                backgroundColor: "#f5f5f5",
-                                color: "#666"
-                              },
-                              children: /* @__PURE__ */ jsx("span", { children: "Error al cargar preview" })
-                            }
-                          )
+                          hasImageError && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[100px] bg-gray-100 text-gray-500", children: /* @__PURE__ */ jsx("span", { children: "Error al cargar preview" }) })
                         ] }),
-                        /* @__PURE__ */ jsxs("div", { className: "limbo-variant-info", children: [
-                          /* @__PURE__ */ jsx("div", { className: "limbo-variant-name", children: variant.name || variant.filename || `Variante ${variant.id}` }),
-                          /* @__PURE__ */ jsxs("div", { className: "limbo-variant-meta", children: [
-                            /* @__PURE__ */ jsxs("span", { children: [
+                        /* @__PURE__ */ jsxs("div", { className: "p-3", children: [
+                          /* @__PURE__ */ jsx("div", { className: "font-semibold text-gray-800 mb-1 text-[0.9rem] break-words", children: variant.name || variant.filename || `Variante ${variant.id}` }),
+                          /* @__PURE__ */ jsxs("div", { className: "flex gap-2 mb-2 text-xs text-gray-500 flex-wrap", children: [
+                            /* @__PURE__ */ jsxs("span", { className: "bg-gray-100 px-1.5 py-0.5 rounded whitespace-nowrap", children: [
                               variant.width,
                               "×",
                               variant.height
                             ] }),
-                            /* @__PURE__ */ jsx("span", { children: (variant.format || "jpg").toUpperCase() }),
-                            /* @__PURE__ */ jsxs("span", { children: [
+                            /* @__PURE__ */ jsx("span", { className: "bg-gray-100 px-1.5 py-0.5 rounded whitespace-nowrap", children: (variant.format || "jpg").toUpperCase() }),
+                            /* @__PURE__ */ jsxs("span", { className: "bg-gray-100 px-1.5 py-0.5 rounded whitespace-nowrap", children: [
                               Math.round((variant.file_size || 0) / 1024),
                               " KB"
                             ] })
                           ] }),
-                          variant.crop_params && /* @__PURE__ */ jsxs("div", { className: "limbo-variant-crop-badge", children: [
+                          variant.crop_params && /* @__PURE__ */ jsxs("div", { className: "inline-block bg-green-100 text-green-800 px-2 py-0.5 rounded text-xs font-medium", children: [
                             /* @__PURE__ */ jsx("span", { className: "icon icon-scissors icon--xs" }),
                             " ",
                             "Recortada"
                           ] })
                         ] }),
-                        /* @__PURE__ */ jsxs("div", { className: "limbo-variant-actions", children: [
+                        /* @__PURE__ */ jsxs("div", { className: "p-3 border-t border-gray-100 flex gap-2 flex-wrap", children: [
                           shouldShowSelectButton && /* @__PURE__ */ jsx(
                             "button",
                             {
-                              className: "btn btn-success btn-sm",
+                              className: "px-2 py-1 text-[0.75rem] rounded-md border cursor-pointer transition-all no-underline inline-flex items-center justify-center min-w-auto bg-[#128851] border-[#128851] text-white hover:bg-[#41a074] hover:border-[#41a074]",
                               onClick: (e) => {
                                 e.stopPropagation();
                                 handleSelectVariant(variant);
@@ -13569,7 +13556,7 @@ function ImageVariantsModal({
                           shouldShowCopyButton && /* @__PURE__ */ jsx(
                             "button",
                             {
-                              className: "btn btn-secondary btn-sm",
+                              className: "px-2 py-1 text-[0.75rem] rounded-md border cursor-pointer transition-all no-underline inline-flex items-center justify-center min-w-auto bg-[#888a91] border-[#888a91] text-white hover:bg-[#b6b7bb] hover:border-[#b6b7bb]",
                               onClick: (e) => {
                                 e.stopPropagation();
                                 handleCopyVariantUrl(variant);
@@ -13581,7 +13568,7 @@ function ImageVariantsModal({
                           shouldShowDownloadButton && /* @__PURE__ */ jsx(
                             "button",
                             {
-                              className: "btn btn-primary btn-sm",
+                              className: "px-2 py-1 text-[0.75rem] rounded-md border cursor-pointer transition-all no-underline inline-flex items-center justify-center min-w-auto bg-[#001978] border-[#001978] text-white hover:bg-[#334793] hover:border-[#334793]",
                               onClick: (e) => {
                                 e.stopPropagation();
                                 handleDownloadVariant(variant);
@@ -13593,7 +13580,7 @@ function ImageVariantsModal({
                           shouldShowDeleteButton && /* @__PURE__ */ jsx(
                             "button",
                             {
-                              className: "btn btn-danger btn-sm",
+                              className: "px-2 py-1 text-[0.75rem] rounded-md border cursor-pointer transition-all no-underline inline-flex items-center justify-center min-w-auto bg-red-600 border-red-600 text-white hover:bg-red-700 hover:border-red-700",
                               onClick: (e) => {
                                 e.stopPropagation();
                                 handleDeleteVariant(variant);