@brunoalz/smartgesti-site-editor 0.2.2 → 1.1.0

package/dist/editor/PropertyEditor/inputs/CarouselImagesInput.js

@@ -0,0 +1,170 @@
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import { useRef as y } from "react";
+import { cn as m } from "../../../utils/cn.js";
+const x = 2, f = 5;
+function k({
+  index: t,
+  src: a,
+  onChange: c,
+  onRemove: d,
+  canRemove: i
+}) {
+  const n = y(null), u = (l) => {
+    const e = l.target.files?.[0];
+    if (!e || !e.type.startsWith("image/") || e.size > 10 * 1024 * 1024) return;
+    const o = new FileReader();
+    o.onload = (b) => {
+      const p = b.target?.result;
+      c(p);
+    }, o.readAsDataURL(e);
+  }, h = () => {
+    n.current && (n.current.value = "", n.current.click());
+  }, g = !!a && !a.includes("placehold.co");
+  return /* @__PURE__ */ s("div", { className: "relative group", children: [
+    /* @__PURE__ */ r(
+      "input",
+      {
+        ref: n,
+        type: "file",
+        accept: "image/*",
+        onChange: u,
+        className: "hidden"
+      }
+    ),
+    /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        onClick: h,
+        className: m(
+          "w-20 h-12 rounded-lg overflow-hidden border-2 transition-all",
+          "flex items-center justify-center",
+          "bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700",
+          g ? "border-blue-400 dark:border-blue-500" : "border-dashed border-gray-300 dark:border-gray-600 hover:border-blue-400"
+        ),
+        children: a ? /* @__PURE__ */ r(
+          "img",
+          {
+            src: a,
+            alt: `Slide ${t + 1}`,
+            className: "w-full h-full object-cover"
+          }
+        ) : /* @__PURE__ */ r(
+          "svg",
+          {
+            className: "w-5 h-5 text-gray-400",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ r(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+              }
+            )
+          }
+        )
+      }
+    ),
+    i && /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        onClick: d,
+        className: m(
+          "absolute -top-1 -right-1 w-5 h-5 rounded-full",
+          "bg-red-500 text-white",
+          "flex items-center justify-center",
+          "opacity-0 group-hover:opacity-100 transition-opacity",
+          "text-xs font-bold"
+        ),
+        children: "×"
+      }
+    ),
+    /* @__PURE__ */ r("div", { className: "absolute bottom-0 left-0 right-0 bg-black/50 text-white text-[10px] text-center py-0.5", children: t + 1 })
+  ] });
+}
+function C({
+  images: t,
+  onImagesChange: a,
+  label: c,
+  description: d
+}) {
+  const i = t.length < f, n = t.length > x, u = (l, e) => {
+    const o = [...t];
+    o[l] = e, a(o);
+  }, h = (l) => {
+    if (!n) return;
+    const e = t.filter((o, b) => b !== l);
+    a(e);
+  }, g = () => {
+    i && a([...t, ""]);
+  };
+  return /* @__PURE__ */ s("div", { className: "space-y-2", children: [
+    c && /* @__PURE__ */ s("label", { className: "block text-xs font-medium text-gray-800 dark:text-gray-100", children: [
+      c,
+      d && /* @__PURE__ */ r("span", { className: "text-gray-500 dark:text-gray-400 text-xs font-normal ml-1", children: d })
+    ] }),
+    /* @__PURE__ */ s("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ s("span", { className: "text-[10px] text-gray-500 dark:text-gray-400 uppercase tracking-wide", children: [
+        "Slides (",
+        t.length,
+        "/",
+        f,
+        ")"
+      ] }),
+      /* @__PURE__ */ s("div", { className: "flex flex-wrap gap-2 items-center", children: [
+        t.map((l, e) => /* @__PURE__ */ r(
+          k,
+          {
+            index: e,
+            src: l,
+            onChange: (o) => u(e, o),
+            onRemove: () => h(e),
+            canRemove: n
+          },
+          e
+        )),
+        i && /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            onClick: g,
+            className: m(
+              "w-20 h-12 rounded-lg border-2 border-dashed",
+              "border-gray-300 dark:border-gray-600",
+              "hover:border-blue-400 dark:hover:border-blue-500",
+              "flex items-center justify-center transition-colors",
+              "bg-gray-50 dark:bg-gray-800"
+            ),
+            children: /* @__PURE__ */ r(
+              "svg",
+              {
+                className: "w-5 h-5 text-gray-400",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ r(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M12 4v16m8-8H4"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  C as CarouselImagesInput
+};
+//# sourceMappingURL=CarouselImagesInput.js.map

package/dist/editor/PropertyEditor/inputs/CarouselImagesInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselImagesInput.js","sources":["../../../../src/editor/PropertyEditor/inputs/CarouselImagesInput.tsx"],"sourcesContent":["/**\n * CarouselImagesInput\n * Componente para editar array de imagens do carrossel hero (2-5 imagens)\n */\n\nimport { useRef } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport type { UploadConfig } from \"../../LandingPageEditor\";\n\ninterface CarouselImagesInputProps {\n  /** Array de URLs de imagens */\n  images: string[];\n  /** Callback ao atualizar imagens */\n  onImagesChange: (images: string[]) => void;\n  /** Label do componente */\n  label?: string;\n  /** Descrição */\n  description?: string;\n  /** Configuração de upload */\n  uploadConfig?: UploadConfig;\n}\n\nconst MIN_IMAGES = 2;\nconst MAX_IMAGES = 5;\n\n/**\n * Slot individual de imagem do carrossel\n */\nfunction CarouselSlot({\n  index,\n  src,\n  onChange,\n  onRemove,\n  canRemove,\n}: {\n  index: number;\n  src: string;\n  onChange: (src: string) => void;\n  onRemove: () => void;\n  canRemove: boolean;\n}) {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const file = e.target.files?.[0];\n    if (!file) return;\n\n    if (!file.type.startsWith(\"image/\")) return;\n    if (file.size > 10 * 1024 * 1024) return;\n\n    const reader = new FileReader();\n    reader.onload = (evt) => {\n      const dataUrl = evt.target?.result as string;\n      onChange(dataUrl);\n    };\n    reader.readAsDataURL(file);\n  };\n\n  const handleClick = () => {\n    if (inputRef.current) {\n      inputRef.current.value = \"\";\n      inputRef.current.click();\n    }\n  };\n\n  const hasImage = !!src && !src.includes(\"placehold.co\");\n\n  return (\n    <div className=\"relative group\">\n      <input\n        ref={inputRef}\n        type=\"file\"\n        accept=\"image/*\"\n        onChange={handleFileChange}\n        className=\"hidden\"\n      />\n\n      <button\n        type=\"button\"\n        onClick={handleClick}\n        className={cn(\n          \"w-20 h-12 rounded-lg overflow-hidden border-2 transition-all\",\n          \"flex items-center justify-center\",\n          \"bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700\",\n          hasImage\n            ? \"border-blue-400 dark:border-blue-500\"\n            : \"border-dashed border-gray-300 dark:border-gray-600 hover:border-blue-400\"\n        )}\n      >\n        {src ? (\n          <img\n            src={src}\n            alt={`Slide ${index + 1}`}\n            className=\"w-full h-full object-cover\"\n          />\n        ) : (\n          <svg\n            className=\"w-5 h-5 text-gray-400\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\n            />\n          </svg>\n        )}\n      </button>\n\n      {/* Botão de remover */}\n      {canRemove && (\n        <button\n          type=\"button\"\n          onClick={onRemove}\n          className={cn(\n            \"absolute -top-1 -right-1 w-5 h-5 rounded-full\",\n            \"bg-red-500 text-white\",\n            \"flex items-center justify-center\",\n            \"opacity-0 group-hover:opacity-100 transition-opacity\",\n            \"text-xs font-bold\"\n          )}\n        >\n          ×\n        </button>\n      )}\n\n      {/* Número do slide */}\n      <div className=\"absolute bottom-0 left-0 right-0 bg-black/50 text-white text-[10px] text-center py-0.5\">\n        {index + 1}\n      </div>\n    </div>\n  );\n}\n\nexport function CarouselImagesInput({\n  images,\n  onImagesChange,\n  label,\n  description,\n}: CarouselImagesInputProps) {\n  const canAdd = images.length < MAX_IMAGES;\n  const canRemove = images.length > MIN_IMAGES;\n\n  const handleImageChange = (index: number, src: string) => {\n    const newImages = [...images];\n    newImages[index] = src;\n    onImagesChange(newImages);\n  };\n\n  const handleImageRemove = (index: number) => {\n    if (!canRemove) return;\n    const newImages = images.filter((_, i) => i !== index);\n    onImagesChange(newImages);\n  };\n\n  const handleAddImage = () => {\n    if (!canAdd) return;\n    onImagesChange([...images, \"\"]);\n  };\n\n  return (\n    <div className=\"space-y-2\">\n      {label && (\n        <label className=\"block text-xs font-medium text-gray-800 dark:text-gray-100\">\n          {label}\n          {description && (\n            <span className=\"text-gray-500 dark:text-gray-400 text-xs font-normal ml-1\">\n              {description}\n            </span>\n          )}\n        </label>\n      )}\n\n      <div className=\"space-y-1\">\n        <span className=\"text-[10px] text-gray-500 dark:text-gray-400 uppercase tracking-wide\">\n          Slides ({images.length}/{MAX_IMAGES})\n        </span>\n        <div className=\"flex flex-wrap gap-2 items-center\">\n          {images.map((src, index) => (\n            <CarouselSlot\n              key={index}\n              index={index}\n              src={src}\n              onChange={(newSrc) => handleImageChange(index, newSrc)}\n              onRemove={() => handleImageRemove(index)}\n              canRemove={canRemove}\n            />\n          ))}\n          {canAdd && (\n            <button\n              type=\"button\"\n              onClick={handleAddImage}\n              className={cn(\n                \"w-20 h-12 rounded-lg border-2 border-dashed\",\n                \"border-gray-300 dark:border-gray-600\",\n                \"hover:border-blue-400 dark:hover:border-blue-500\",\n                \"flex items-center justify-center transition-colors\",\n                \"bg-gray-50 dark:bg-gray-800\"\n              )}\n            >\n              <svg\n                className=\"w-5 h-5 text-gray-400\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                viewBox=\"0 0 24 24\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M12 4v16m8-8H4\"\n                />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["MIN_IMAGES","MAX_IMAGES","CarouselSlot","index","src","onChange","onRemove","canRemove","inputRef","useRef","handleFileChange","e","file","reader","evt","dataUrl","handleClick","hasImage","jsxs","jsx","cn","CarouselImagesInput","images","onImagesChange","label","description","canAdd","handleImageChange","newImages","handleImageRemove","_","i","handleAddImage","newSrc"],"mappings":"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"}

package/dist/editor/PropertyEditor/inputs/ImageGridInput.d.ts

@@ -1,5 +1,5 @@
 import { ImageGridItem, ImageGridPreset } from '../../../engine/shared/imageGrid';
-import { UploadConfig } from '../../LandingPageEditorV2';
+import { UploadConfig } from '../../LandingPageEditor';
 interface ImageGridInputProps {
     /** Preset atual */
     preset?: ImageGridPreset;

package/dist/editor/PropertyEditor/inputs/ImageGridInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageGridInput.d.ts","sourceRoot":"","sources":["../../../../src/editor/PropertyEditor/inputs/ImageGridInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,eAAe,EAGrB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAE9D,UAAU,mBAAmB;IAC3B,mBAAmB;IACnB,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,uBAAuB;IACvB,MAAM,CAAC,EAAE,aAAa,EAAE,CAAC;IACzB,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qCAAqC;IACrC,cAAc,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IAClD,sCAAsC;IACtC,cAAc,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IAClD,kCAAkC;IAClC,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wDAAwD;IACxD,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAqMD,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EAAE,UAAU,EAClB,MAAM,EAAE,UAAU,EAClB,GAAG,EAAE,OAAO,EACZ,cAAc,EACd,cAAc,EACd,WAAW,EACX,KAAK,EACL,WAAW,GACZ,EAAE,mBAAmB,2CAkHrB"}
+{"version":3,"file":"ImageGridInput.d.ts","sourceRoot":"","sources":["../../../../src/editor/PropertyEditor/inputs/ImageGridInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,eAAe,EAGrB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D,UAAU,mBAAmB;IAC3B,mBAAmB;IACnB,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,uBAAuB;IACvB,MAAM,CAAC,EAAE,aAAa,EAAE,CAAC;IACzB,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qCAAqC;IACrC,cAAc,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IAClD,sCAAsC;IACtC,cAAc,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IAClD,kCAAkC;IAClC,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wDAAwD;IACxD,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAiOD,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EAAE,UAAU,EAClB,MAAM,EAAE,UAAU,EAClB,GAAG,EAAE,OAAO,EACZ,cAAc,EACd,cAAc,EACd,WAAW,EACX,KAAK,EACL,WAAW,GACZ,EAAE,mBAAmB,2CA6HrB"}

package/dist/editor/PropertyEditor/inputs/ImageGridInput.js

@@ -1,9 +1,9 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { useRef as k } from "react";
-import { cn as h } from "../../../utils/cn.js";
-import { gridPresetMap as f, imageGridPresetIds as C } from "../../../engine/shared/imageGrid/presets.js";
-function I({ preset: d, isActive: s }) {
-  const o = f[d], g = () => {
+import { useRef as C } from "react";
+import { cn as v } from "../../../utils/cn.js";
+import { gridPresetMap as y, imageGridPresetIds as I } from "../../../engine/shared/imageGrid/presets.js";
+function j({ preset: d, isActive: n }) {
+  const u = y[d], m = () => {
     switch (d) {
       case "single":
         return /* @__PURE__ */ e("div", { className: "w-full h-full bg-current rounded-sm" });
@@ -49,146 +49,172 @@ function I({ preset: d, isActive: s }) {
   return /* @__PURE__ */ e(
     "div",
     {
-      className: h(
+      className: v(
         "w-8 h-8 p-1",
-        s ? "text-blue-500" : "text-gray-400 dark:text-gray-500"
+        n ? "text-blue-500" : "text-gray-400 dark:text-gray-500"
       ),
-      title: o.name,
-      children: g()
+      title: u.name,
+      children: m()
     }
   );
 }
-function j({
+function R({
   index: d,
-  image: s,
-  onChange: o,
-  onRemove: g
+  image: n,
+  onChange: u,
+  onRemove: m,
+  onScaleChange: i
 }) {
-  const n = k(null);
-  return /* @__PURE__ */ a("div", { className: "relative group", children: [
+  const o = C(null), f = async (g) => {
+    const h = g.target.files?.[0];
+    if (!h) return;
+    if (!h.type.startsWith("image/")) {
+      alert("Apenas imagens são permitidas");
+      return;
+    }
+    if (h.size > 10 * 1024 * 1024) {
+      alert("Arquivo muito grande. Máximo: 10MB");
+      return;
+    }
+    const p = new FileReader();
+    p.onload = (x) => {
+      const N = x.target?.result;
+      u({ src: N, alt: n?.alt || "", scale: n?.scale });
+    }, p.readAsDataURL(h);
+  }, b = () => {
+    o.current && (o.current.value = "", o.current.click());
+  }, c = !!n?.src, l = n?.scale ?? 1;
+  return /* @__PURE__ */ a("div", { className: "flex items-center gap-3 group", children: [
     /* @__PURE__ */ e(
       "input",
       {
-        ref: n,
+        ref: o,
         type: "file",
         accept: "image/*",
-        onChange: async (u) => {
-          const c = u.target.files?.[0];
-          if (!c) return;
-          if (!c.type.startsWith("image/")) {
-            alert("Apenas imagens são permitidas");
-            return;
-          }
-          if (c.size > 10 * 1024 * 1024) {
-            alert("Arquivo muito grande. Máximo: 10MB");
-            return;
-          }
-          const l = new FileReader();
-          l.onload = (m) => {
-            const v = m.target?.result;
-            o({ src: v, alt: s?.alt || "" });
-          }, l.readAsDataURL(c);
-        },
+        onChange: f,
         className: "hidden"
       }
     ),
-    /* @__PURE__ */ e(
-      "button",
-      {
-        type: "button",
-        onClick: () => {
-          n.current && (n.current.value = "", n.current.click());
-        },
-        className: h(
-          "w-16 h-16 rounded-lg overflow-hidden border-2 transition-all",
-          "flex items-center justify-center",
-          "bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700",
-          s?.src ? "border-blue-400 dark:border-blue-500" : "border-dashed border-gray-300 dark:border-gray-600 hover:border-blue-400"
-        ),
-        children: s?.src ? /* @__PURE__ */ e(
-          "img",
-          {
-            src: s.src,
-            alt: s.alt || `Imagem ${d + 1}`,
-            className: "w-full h-full object-cover"
-          }
-        ) : /* @__PURE__ */ e(
-          "svg",
-          {
-            className: "w-6 h-6 text-gray-400",
-            fill: "none",
-            stroke: "currentColor",
-            viewBox: "0 0 24 24",
-            children: /* @__PURE__ */ e(
-              "path",
-              {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                strokeWidth: 2,
-                d: "M12 4v16m8-8H4"
-              }
-            )
-          }
-        )
-      }
-    ),
-    s?.src && /* @__PURE__ */ e(
-      "button",
-      {
-        type: "button",
-        onClick: g,
-        className: h(
-          "absolute -top-1 -right-1 w-5 h-5 rounded-full",
-          "bg-red-500 text-white",
-          "flex items-center justify-center",
-          "opacity-0 group-hover:opacity-100 transition-opacity",
-          "text-xs font-bold"
-        ),
-        children: "×"
-      }
-    ),
-    /* @__PURE__ */ e("div", { className: "absolute bottom-0 left-0 right-0 bg-black/50 text-white text-[10px] text-center py-0.5", children: d + 1 })
+    /* @__PURE__ */ a("div", { className: "relative flex-shrink-0", children: [
+      /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          onClick: b,
+          className: v(
+            "w-12 h-12 rounded-lg overflow-hidden border-2 transition-all",
+            "flex items-center justify-center",
+            "bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700",
+            c ? "border-blue-400 dark:border-blue-500" : "border-dashed border-gray-300 dark:border-gray-600 hover:border-blue-400"
+          ),
+          children: c ? /* @__PURE__ */ e(
+            "img",
+            {
+              src: n.src,
+              alt: n.alt || `Imagem ${d + 1}`,
+              className: "w-full h-full object-cover"
+            }
+          ) : /* @__PURE__ */ e(
+            "svg",
+            {
+              className: "w-5 h-5 text-gray-400",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ e(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M12 4v16m8-8H4"
+                }
+              )
+            }
+          )
+        }
+      ),
+      c && /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          onClick: m,
+          className: v(
+            "absolute -top-1 -right-1 w-4 h-4 rounded-full",
+            "bg-red-500 text-white",
+            "flex items-center justify-center",
+            "opacity-0 group-hover:opacity-100 transition-opacity",
+            "text-[10px] font-bold leading-none"
+          ),
+          children: "×"
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "absolute bottom-0 left-0 right-0 bg-black/50 text-white text-[8px] text-center", children: d + 1 })
+    ] }),
+    c && /* @__PURE__ */ a("div", { className: "flex-1 flex items-center gap-2 min-w-0", children: [
+      /* @__PURE__ */ e(
+        "input",
+        {
+          type: "range",
+          value: l,
+          onChange: (g) => i(Number(g.target.value)),
+          min: 1,
+          max: 3,
+          step: 0.1,
+          className: "flex-1 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer"
+        }
+      ),
+      /* @__PURE__ */ a("span", { className: "text-[10px] text-gray-500 dark:text-gray-400 w-8 text-right tabular-nums flex-shrink-0", children: [
+        Math.round(l * 100),
+        "%"
+      ] })
+    ] })
   ] });
 }
-function P({
+function q({
   preset: d,
-  images: s,
-  gap: o,
-  onPresetChange: g,
-  onImagesChange: n,
-  onGapChange: b,
-  label: p,
-  description: u
+  images: n,
+  gap: u,
+  onPresetChange: m,
+  onImagesChange: i,
+  onGapChange: o,
+  label: f,
+  description: b
 }) {
-  const c = d || "four-equal", l = s || [], m = o ?? 8, N = f[c].maxImages, x = (r) => {
-    const t = f[r];
-    l.length > t.maxImages && n(l.slice(0, t.maxImages)), g(r);
-  }, y = (r, t) => {
-    const i = [...l];
-    for (; i.length <= r; )
-      i.push({ src: "", alt: "" });
-    i[r] = t, n(i);
+  const c = d || "four-equal", l = n || [], g = u ?? 8, p = y[c].maxImages, x = (r) => {
+    const t = y[r];
+    l.length > t.maxImages && i(l.slice(0, t.maxImages)), m(r);
+  }, N = (r, t) => {
+    const s = [...l];
+    for (; s.length <= r; )
+      s.push({ src: "", alt: "" });
+    s[r] = t, i(s);
   }, w = (r) => {
     const t = [...l];
-    t[r] = { src: "", alt: "" }, n(t);
+    t[r] = { src: "", alt: "" }, i(t);
+  }, k = (r, t) => {
+    const s = [...l];
+    for (; s.length <= r; )
+      s.push({ src: "", alt: "" });
+    s[r] = { ...s[r], scale: t }, i(s);
   };
   return /* @__PURE__ */ a("div", { className: "space-y-3", children: [
-    p && /* @__PURE__ */ a("label", { className: "block text-xs font-medium text-gray-800 dark:text-gray-100", children: [
-      p,
-      u && /* @__PURE__ */ e("span", { className: "text-gray-500 dark:text-gray-400 text-xs font-normal ml-1", children: u })
+    f && /* @__PURE__ */ a("label", { className: "block text-xs font-medium text-gray-800 dark:text-gray-100", children: [
+      f,
+      b && /* @__PURE__ */ e("span", { className: "text-gray-500 dark:text-gray-400 text-xs font-normal ml-1", children: b })
     ] }),
     /* @__PURE__ */ a("div", { className: "space-y-1", children: [
       /* @__PURE__ */ e("span", { className: "text-[10px] text-gray-500 dark:text-gray-400 uppercase tracking-wide", children: "Layout" }),
-      /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1 p-1 bg-gray-100 dark:bg-gray-800 rounded-lg", children: C.map((r) => /* @__PURE__ */ e(
+      /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1 p-1 bg-gray-100 dark:bg-gray-800 rounded-lg", children: I.map((r) => /* @__PURE__ */ e(
         "button",
         {
           type: "button",
           onClick: () => x(r),
-          className: h(
+          className: v(
             "rounded-md transition-all",
             c === r ? "bg-white dark:bg-gray-700 shadow-sm" : "hover:bg-white/50 dark:hover:bg-gray-700/50"
           ),
-          children: /* @__PURE__ */ e(I, { preset: r, isActive: c === r })
+          children: /* @__PURE__ */ e(j, { preset: r, isActive: c === r })
         },
         r
       )) })
@@ -198,16 +224,17 @@ function P({
         "Imagens (",
         l.filter((r) => r?.src).length,
         "/",
-        N,
+        p,
         ")"
       ] }),
-      /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: Array.from({ length: N }).map((r, t) => /* @__PURE__ */ e(
-        j,
+      /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: Array.from({ length: p }).map((r, t) => /* @__PURE__ */ e(
+        R,
         {
           index: t,
           image: l[t],
-          onChange: (i) => y(t, i),
-          onRemove: () => w(t)
+          onChange: (s) => N(t, s),
+          onRemove: () => w(t),
+          onScaleChange: (s) => k(t, s)
         },
         t
       )) })
@@ -216,7 +243,7 @@ function P({
       /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ e("span", { className: "text-[10px] text-gray-500 dark:text-gray-400 uppercase tracking-wide", children: "Espaçamento" }),
         /* @__PURE__ */ a("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: [
-          m,
+          g,
           "px"
         ] })
       ] }),
@@ -224,8 +251,8 @@ function P({
         "input",
         {
           type: "range",
-          value: m,
-          onChange: (r) => b(Number(r.target.value)),
+          value: g,
+          onChange: (r) => o(Number(r.target.value)),
           min: 0,
           max: 24,
           step: 2,
@@ -236,6 +263,6 @@ function P({
   ] });
 }
 export {
-  P as ImageGridInput
+  q as ImageGridInput
 };
 //# sourceMappingURL=ImageGridInput.js.map