geoiq-frontend-ui-kit 2.0.0 → 2.0.2

package/dist/index.es175.js

@@ -0,0 +1,118 @@
+import { Typography as m } from "./index.es19.js";
+import { Spinner as v } from "./index.es64.js";
+import { Upload as A, X as $, Pen as x } from "lucide-react";
+import e, { useState as M, useRef as P } from "react";
+import { useFormValues as R } from "./index.es160.js";
+import { useToast as T } from "./index.es87.js";
+const L = ({
+  id: f,
+  onChange: o,
+  value: l = [],
+  accept: h = "image/*",
+  error: d,
+  maxImages: r = 20
+}) => {
+  const { onAssetUpload: g, onToggleImageEditor: p } = R(), { toast: s } = T(), [a, u] = M(!1), c = P(null), y = async (i) => {
+    const t = i.target.files;
+    if (!(!t?.length || a)) {
+      if (l.length + t.length > r) {
+        s({
+          title: "Alert!",
+          description: `Maximum ${r} images allowed.`,
+          icon: "warning"
+        });
+        return;
+      }
+      if (g) {
+        u(!0);
+        try {
+          const n = Array.from(t).map((k) => g(k)), w = await Promise.all(n);
+          o([...l, ...w]), s({
+            title: "Alert!",
+            description: `${t.length} ${t.length === 1 ? "image" : "images"} uploaded successfully.`,
+            icon: "success"
+          });
+        } catch {
+          s({
+            title: "Alert!",
+            description: "Error uploading images",
+            icon: "warning"
+          });
+        } finally {
+          u(!1), c.current && (c.current.value = "");
+        }
+      }
+    }
+  }, b = () => {
+    !a && l.length < r ? c.current?.click() : l.length >= r && s({
+      title: "Alert!",
+      description: `Maximum ${r} images allowed.`,
+      icon: "warning"
+    });
+  }, E = (i) => {
+    if (!a) {
+      const t = [...l];
+      t.splice(i, 1), o(t);
+    }
+  };
+  function N(i, t) {
+    const n = [...l];
+    n.splice(t, 1, i), o(n);
+  }
+  return /* @__PURE__ */ e.createElement("div", { className: "relative" }, a && /* @__PURE__ */ e.createElement("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-70" }, /* @__PURE__ */ e.createElement(v, { className: "w-8 h-8 text-primary-1" })), /* @__PURE__ */ e.createElement("div", { className: "relative p-8 border-2 border-dashed rounded-lg border-primary-1 bg-primary-1" }, /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      className: "w-full",
+      onClick: b,
+      type: "button",
+      disabled: a || l.length >= r
+    },
+    /* @__PURE__ */ e.createElement("div", { className: "flex flex-col items-center gap-3 text-center" }, /* @__PURE__ */ e.createElement("div", { className: "bg-gray-100 rounded-full" }, /* @__PURE__ */ e.createElement(A, { className: "w-6 h-6 text-gray-500" })), /* @__PURE__ */ e.createElement(m, { variant: "body1", className: "text-gray-600" }, a ? "Uploading..." : l.length >= r ? `Maximum ${r} images reached` : "Add Images"), l.length > 0 && /* @__PURE__ */ e.createElement(m, { variant: "body1", className: "text-gray-500" }, l.length, " of ", r, " images"))
+  ), /* @__PURE__ */ e.createElement(
+    "input",
+    {
+      ref: c,
+      id: `${f}-gallery`,
+      type: "file",
+      accept: h,
+      disabled: a || l.length >= r,
+      onChange: y,
+      className: "hidden",
+      multiple: !0
+    }
+  ), d && /* @__PURE__ */ e.createElement(m, { variant: "body1", className: "mt-1 text-danger-1" }, d)), l.length > 0 && /* @__PURE__ */ e.createElement("div", { className: "grid grid-cols-2 gap-4 mt-4 sm:grid-cols-3 md:grid-cols-4" }, l.map((i, t) => /* @__PURE__ */ e.createElement("div", { key: t, className: "relative flex rounded" }, /* @__PURE__ */ e.createElement(
+    "img",
+    {
+      src: i.public_url,
+      alt: `Preview ${t + 1}`,
+      className: "object-cover w-full h-24 rounded"
+    }
+  ), /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      onClick: () => E(t),
+      className: "absolute p-1 text-white bg-white rounded-full right-2 top-2 opacity-70 hover:opacity-100",
+      type: "button",
+      disabled: a
+    },
+    /* @__PURE__ */ e.createElement($, { size: 16, className: "stroke-danger" })
+  ), p && /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: (n) => {
+        n.currentTarget.blur(), p({
+          imageUrl: i.public_url,
+          index: t,
+          onReplaceImage: N
+        });
+      },
+      className: "absolute p-1 text-white bg-white rounded-full left-2 top-2 opacity-70 hover:opacity-100"
+    },
+    /* @__PURE__ */ e.createElement(x, { size: 16, className: "stroke-danger" })
+  )))));
+};
+export {
+  L as MultiImagePicker
+};
+//# sourceMappingURL=index.es175.js.map

package/dist/index.es175.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es175.js","sources":["../src/components/ui/form-renderer/components/form-fields/components/multi-image-picker/index.tsx"],"sourcesContent":["import { Typography } from '@/components/atoms/typography'\nimport { useToast } from '@/components/molecules/toast'\nimport { Spinner } from '@/components/unstyled/spinner'\nimport { Upload, X, Pen } from 'lucide-react'\nimport React, { useRef, useState } from 'react'\nimport { useFormValues } from '../../../../context/form-values'\nimport { AssetValue } from '../../../../form.types'\n\ninterface MultiImagePickerProps {\n  id: string\n  onChange: (data: AssetValue[]) => void\n  value?: AssetValue[]\n  accept?: string\n  error?: string\n  maxImages?: number\n}\n\nconst MultiImagePicker: React.FC<MultiImagePickerProps> = ({\n  id,\n  onChange,\n  value = [],\n  accept = 'image/*',\n  error,\n  maxImages = 20,\n}) => {\n  const { onAssetUpload, onToggleImageEditor } = useFormValues()\n  const { toast } = useToast()\n\n  const [isLoading, setIsLoading] = useState(false)\n  const fileInputRef = useRef<HTMLInputElement>(null)\n\n  const handleImageSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {\n    const files = e.target.files\n    if (!files?.length || isLoading) return\n\n    if (value.length + files.length > maxImages) {\n      toast({\n        title: 'Alert!',\n        description: `Maximum ${maxImages} images allowed.`,\n        icon: 'warning',\n      })\n      return\n    }\n\n    if (onAssetUpload) {\n      setIsLoading(true)\n\n      try {\n        const uploads = Array.from(files).map((file) => onAssetUpload(file))\n        const results = await Promise.all(uploads)\n\n        onChange([...value, ...results])\n\n        toast({\n          title: 'Alert!',\n          description: `${files.length} ${files.length === 1 ? 'image' : 'images'} uploaded successfully.`,\n          icon: 'success',\n        })\n      } catch (error) {\n        toast({\n          title: 'Alert!',\n          description: `Error uploading images`,\n          icon: 'warning',\n        })\n      } finally {\n        setIsLoading(false)\n        // Reset the file input so the same files can be selected again\n        if (fileInputRef.current) {\n          fileInputRef.current.value = ''\n        }\n      }\n    }\n  }\n\n  const handleClick = () => {\n    if (!isLoading && value.length < maxImages) {\n      fileInputRef.current?.click()\n    } else if (value.length >= maxImages) {\n      toast({\n        title: 'Alert!',\n        description: `Maximum ${maxImages} images allowed.`,\n        icon: 'warning',\n      })\n    }\n  }\n\n  const removeImage = (index: number) => {\n    if (!isLoading) {\n      const newImages = [...value]\n      newImages.splice(index, 1)\n      onChange(newImages)\n    }\n  }\n\n  function onReplaceImage(data: AssetValue, index: number) {\n    const newValue = [...value]\n    newValue.splice(index, 1, data)\n    onChange(newValue)\n  }\n\n  return (\n    <div className=\"relative\">\n      {isLoading && (\n        <div className=\"absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-70\">\n          <Spinner className=\"w-8 h-8 text-primary-1\" />\n        </div>\n      )}\n      <div className=\"relative p-8 border-2 border-dashed rounded-lg border-primary-1 bg-primary-1\">\n        <button\n          className=\"w-full\"\n          onClick={handleClick}\n          type=\"button\"\n          disabled={isLoading || value.length >= maxImages}\n        >\n          <div className=\"flex flex-col items-center gap-3 text-center\">\n            <div className=\"bg-gray-100 rounded-full\">\n              <Upload className=\"w-6 h-6 text-gray-500\" />\n            </div>\n            <Typography variant=\"body1\" className=\"text-gray-600\">\n              {isLoading\n                ? 'Uploading...'\n                : value.length >= maxImages\n                  ? `Maximum ${maxImages} images reached`\n                  : 'Add Images'}\n            </Typography>\n            {value.length > 0 && (\n              <Typography variant=\"body1\" className=\"text-gray-500\">\n                {value.length} of {maxImages} images\n              </Typography>\n            )}\n          </div>\n        </button>\n        <input\n          ref={fileInputRef}\n          id={`${id}-gallery`}\n          type=\"file\"\n          accept={accept}\n          disabled={isLoading || value.length >= maxImages}\n          onChange={handleImageSelect}\n          className=\"hidden\"\n          multiple\n        />\n\n        {error && (\n          <Typography variant=\"body1\" className=\"mt-1 text-danger-1\">\n            {error}\n          </Typography>\n        )}\n      </div>\n\n      {value.length > 0 && (\n        <div className=\"grid grid-cols-2 gap-4 mt-4 sm:grid-cols-3 md:grid-cols-4\">\n          {value.map((image, index) => (\n            <div key={index} className=\"relative flex rounded\">\n              <img\n                src={image.public_url}\n                alt={`Preview ${index + 1}`}\n                className=\"object-cover w-full h-24 rounded\"\n              />\n              <button\n                onClick={() => removeImage(index)}\n                className=\"absolute p-1 text-white bg-white rounded-full right-2 top-2 opacity-70 hover:opacity-100\"\n                type=\"button\"\n                disabled={isLoading}\n              >\n                <X size={16} className=\"stroke-danger\" />\n              </button>\n              {onToggleImageEditor && (\n                <button\n                  type=\"button\"\n                  onClick={(e) => {\n                    e.currentTarget.blur()\n                    onToggleImageEditor({\n                      imageUrl: image.public_url,\n                      index,\n                      onReplaceImage,\n                    })\n                  }}\n                  className=\"absolute p-1 text-white bg-white rounded-full left-2 top-2 opacity-70 hover:opacity-100\"\n                >\n                  <Pen size={16} className=\"stroke-danger\" />\n                </button>\n              )}\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { MultiImagePicker }\n"],"names":["MultiImagePicker","id","onChange","value","accept","error","maxImages","onAssetUpload","onToggleImageEditor","useFormValues","toast","useToast","isLoading","setIsLoading","useState","fileInputRef","useRef","handleImageSelect","e","files","uploads","file","results","handleClick","removeImage","index","newImages","onReplaceImage","data","newValue","React","Spinner","Upload","Typography","image","X","Pen"],"mappings":"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"}

package/dist/index.es176.js

@@ -0,0 +1,112 @@
+import { Video as v, X as w } from "lucide-react";
+import e, { useState as k, useRef as A } from "react";
+import { Typography as o } from "./index.es19.js";
+import { Spinner as $ } from "./index.es64.js";
+import { useFormValues as x } from "./index.es160.js";
+import { useToast as L } from "./index.es87.js";
+const z = ({
+  id: u,
+  onChange: c,
+  value: t = [],
+  accept: f = "video/*",
+  error: d,
+  maxVideos: l = 10
+}) => {
+  const { onAssetUpload: m } = x(), { toast: i } = L(), [a, g] = k(!1), s = A(null), h = async (n) => {
+    const r = n.target.files;
+    if (!(!r?.length || a)) {
+      if (t.length + r.length > l) {
+        i({
+          title: "Alert!",
+          description: `Maximum ${l} videos allowed.`,
+          icon: "warning"
+        });
+        return;
+      }
+      if (m) {
+        g(!0);
+        try {
+          const p = Array.from(r).map((N) => m(N)), E = await Promise.all(p);
+          c([...t, ...E]), i({
+            title: "Alert!",
+            description: `${r.length} ${r.length === 1 ? "video" : "videos"} uploaded successfully.`,
+            icon: "success"
+          });
+        } catch {
+          i({
+            title: "Alert!",
+            description: "Error uploading videos",
+            icon: "warning"
+          });
+        } finally {
+          g(!1), s.current && (s.current.value = "");
+        }
+      }
+    }
+  }, y = () => {
+    !a && t.length < l ? s.current?.click() : t.length >= l && i({
+      title: "Alert!",
+      description: `Maximum ${l} videos allowed.`,
+      icon: "warning"
+    });
+  }, b = (n) => {
+    if (!a) {
+      const r = [...t];
+      r.splice(n, 1), c(r);
+    }
+  };
+  return /* @__PURE__ */ e.createElement("div", { className: "relative" }, a && /* @__PURE__ */ e.createElement("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-70" }, /* @__PURE__ */ e.createElement($, { className: "w-12 h-12 animate-spin text-primary-1" })), /* @__PURE__ */ e.createElement("div", { className: "relative p-8 border-2 border-dashed rounded-lg border-primary-1 bg-primary-1" }, /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      className: "w-full",
+      onClick: y,
+      type: "button",
+      disabled: a || t.length >= l
+    },
+    /* @__PURE__ */ e.createElement("div", { className: "flex flex-col items-center gap-3 text-center" }, /* @__PURE__ */ e.createElement("div", { className: "bg-gray-100 rounded-full" }, /* @__PURE__ */ e.createElement(v, { className: "w-6 h-6 text-gray-500" })), /* @__PURE__ */ e.createElement(o, { variant: "body1", className: "text-gray-600" }, a ? "Uploading..." : t.length >= l ? `Maximum ${l} videos reached` : "Add Videos"), t.length > 0 && /* @__PURE__ */ e.createElement(o, { variant: "body1", className: "text-gray-500" }, t.length, " of ", l, " videos"))
+  ), /* @__PURE__ */ e.createElement(
+    "input",
+    {
+      ref: s,
+      id: `${u}-gallery`,
+      type: "file",
+      accept: f,
+      disabled: a || t.length >= l,
+      onChange: h,
+      className: "hidden",
+      multiple: !0
+    }
+  ), d && /* @__PURE__ */ e.createElement(o, { variant: "body1", className: "mt-1 text-danger-1" }, d)), t.length > 0 && /* @__PURE__ */ e.createElement("div", { className: "grid grid-cols-2 gap-4 mt-4 sm:grid-cols-2 md:grid-cols-2" }, t.map((n, r) => /* @__PURE__ */ e.createElement("div", { key: r, className: "relative flex rounded" }, /* @__PURE__ */ e.createElement(
+    "video",
+    {
+      src: n.public_url,
+      className: "object-cover w-full h-32 rounded",
+      controls: !0,
+      controlsList: "nodownload",
+      preload: "metadata"
+    },
+    /* @__PURE__ */ e.createElement(
+      "track",
+      {
+        kind: "captions",
+        label: "English captions",
+        srcLang: "en",
+        src: "",
+        default: !0
+      }
+    )
+  ), /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      onClick: () => b(r),
+      className: "absolute p-1 text-white bg-white rounded-full right-2 top-2 opacity-70 hover:opacity-100",
+      type: "button",
+      disabled: a
+    },
+    /* @__PURE__ */ e.createElement(w, { size: 16, className: "stroke-danger" })
+  )))));
+};
+export {
+  z as MultiVideoPicker
+};
+//# sourceMappingURL=index.es176.js.map

package/dist/index.es176.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es176.js","sources":["../src/components/ui/form-renderer/components/form-fields/components/multi-video-picker/index.tsx"],"sourcesContent":["import { X, Video } from 'lucide-react'\nimport React, { useRef, useState } from 'react'\nimport { useFormValues } from '../../../../context/form-values'\nimport { AssetValue } from '../../../../form.types'\nimport { Typography } from '@/components/atoms/typography'\nimport { useToast } from '@/components/molecules/toast'\nimport { Spinner } from '@/components/unstyled/spinner'\n\ninterface MultiVideoPickerProps {\n  id: string\n  onChange: (data: AssetValue[]) => void\n  value?: AssetValue[]\n  accept?: string\n  error?: string\n  maxVideos?: number\n}\n\nconst MultiVideoPicker: React.FC<MultiVideoPickerProps> = ({\n  id,\n  onChange,\n  value = [],\n  accept = 'video/*',\n  error,\n  maxVideos = 10,\n}) => {\n  const { onAssetUpload } = useFormValues()\n  const { toast } = useToast()\n\n  const [isLoading, setIsLoading] = useState(false)\n  const fileInputRef = useRef<HTMLInputElement>(null)\n\n  const handleVideoSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {\n    const files = e.target.files\n    if (!files?.length || isLoading) return\n\n    if (value.length + files.length > maxVideos) {\n      toast({\n        title: 'Alert!',\n        description: `Maximum ${maxVideos} videos allowed.`,\n        icon: 'warning',\n      })\n      return\n    }\n\n    if (onAssetUpload) {\n      setIsLoading(true)\n\n      try {\n        const uploads = Array.from(files).map((file) => onAssetUpload(file))\n        const results = await Promise.all(uploads)\n\n        onChange([...value, ...results])\n\n        toast({\n          title: 'Alert!',\n          description: `${files.length} ${files.length === 1 ? 'video' : 'videos'} uploaded successfully.`,\n          icon: 'success',\n        })\n      } catch (error) {\n        toast({\n          title: 'Alert!',\n          description: `Error uploading videos`,\n          icon: 'warning',\n        })\n      } finally {\n        setIsLoading(false)\n        // Reset the file input so the same files can be selected again\n        if (fileInputRef.current) {\n          fileInputRef.current.value = ''\n        }\n      }\n    }\n  }\n\n  const handleClick = () => {\n    if (!isLoading && value.length < maxVideos) {\n      fileInputRef.current?.click()\n    } else if (value.length >= maxVideos) {\n      toast({\n        title: 'Alert!',\n        description: `Maximum ${maxVideos} videos allowed.`,\n        icon: 'warning',\n      })\n    }\n  }\n\n  const removeVideo = (index: number) => {\n    if (!isLoading) {\n      const newVideos = [...value]\n      newVideos.splice(index, 1)\n      onChange(newVideos)\n    }\n  }\n\n  return (\n    <div className=\"relative\">\n      {isLoading && (\n        <div className=\"absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-70\">\n          <Spinner className=\"w-12 h-12 animate-spin text-primary-1\" />\n        </div>\n      )}\n\n      <div className=\"relative p-8 border-2 border-dashed rounded-lg border-primary-1 bg-primary-1\">\n        <button\n          className=\"w-full\"\n          onClick={handleClick}\n          type=\"button\"\n          disabled={isLoading || value.length >= maxVideos}\n        >\n          <div className=\"flex flex-col items-center gap-3 text-center\">\n            <div className=\"bg-gray-100 rounded-full\">\n              <Video className=\"w-6 h-6 text-gray-500\" />\n            </div>\n            <Typography variant=\"body1\" className=\"text-gray-600\">\n              {isLoading\n                ? 'Uploading...'\n                : value.length >= maxVideos\n                  ? `Maximum ${maxVideos} videos reached`\n                  : 'Add Videos'}\n            </Typography>\n            {value.length > 0 && (\n              <Typography variant=\"body1\" className=\"text-gray-500\">\n                {value.length} of {maxVideos} videos\n              </Typography>\n            )}\n          </div>\n        </button>\n        <input\n          ref={fileInputRef}\n          id={`${id}-gallery`}\n          type=\"file\"\n          accept={accept}\n          disabled={isLoading || value.length >= maxVideos}\n          onChange={handleVideoSelect}\n          className=\"hidden\"\n          multiple\n        />\n\n        {error && (\n          <Typography variant=\"body1\" className=\"mt-1 text-danger-1\">\n            {error}\n          </Typography>\n        )}\n      </div>\n\n      {value.length > 0 && (\n        <div className=\"grid grid-cols-2 gap-4 mt-4 sm:grid-cols-2 md:grid-cols-2\">\n          {value.map((video, index) => (\n            <div key={index} className=\"relative flex rounded\">\n              <video\n                src={video.public_url}\n                className=\"object-cover w-full h-32 rounded\"\n                controls={true}\n                controlsList=\"nodownload\"\n                preload=\"metadata\"\n              >\n                <track\n                  kind=\"captions\"\n                  label=\"English captions\"\n                  srcLang=\"en\"\n                  src=\"\"\n                  default\n                />\n              </video>\n              <button\n                onClick={() => removeVideo(index)}\n                className=\"absolute p-1 text-white bg-white rounded-full right-2 top-2 opacity-70 hover:opacity-100\"\n                type=\"button\"\n                disabled={isLoading}\n              >\n                <X size={16} className=\"stroke-danger\" />\n              </button>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { MultiVideoPicker }\n"],"names":["MultiVideoPicker","id","onChange","value","accept","error","maxVideos","onAssetUpload","useFormValues","toast","useToast","isLoading","setIsLoading","useState","fileInputRef","useRef","handleVideoSelect","e","files","uploads","file","results","handleClick","removeVideo","index","newVideos","React","Spinner","Video","Typography","video","X"],"mappings":"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"}

package/dist/index.es177.js

@@ -0,0 +1,90 @@
+import t from "react";
+import { Typography as u } from "./index.es19.js";
+import { Button as p } from "./index.es9.js";
+import { FormField as x } from "./index.es170.js";
+import { Plus as E } from "lucide-react";
+import { useFormValues as v } from "./index.es160.js";
+const R = ({ field: n }) => {
+  const { values: i, setValue: h, setFormValues: y } = v(), m = (() => {
+    const r = [], s = `${n.id}||`, o = /* @__PURE__ */ new Set();
+    Object.keys(i).forEach((e) => {
+      if (e.startsWith(s)) {
+        const a = e.match(new RegExp(`^${n.id}\\|\\|(\\d+)\\|\\|`));
+        a && a[1] && o.add(parseInt(a[1]));
+      }
+    });
+    const l = Array.from(o).sort((e, a) => e - a);
+    for (const e of l) {
+      const a = {};
+      for (const c of n.options) {
+        const d = `${n.id}||${e}||${c.id}`;
+        d in i && (a[c.id] = i[d]);
+      }
+      r.push(a);
+    }
+    return r;
+  })(), f = () => {
+    const r = m.length;
+    n.options.forEach((s) => {
+      h(`${n.id}||${r}||${s.id}`, void 0);
+    });
+  }, $ = (r) => {
+    const s = { ...i }, o = `${n.id}||`;
+    Object.keys(i).filter(
+      (e) => e.startsWith(o)
+    ).forEach((e) => {
+      const a = e.match(new RegExp(`^${n.id}\\|\\|(\\d+)\\|\\|`));
+      if (a && a[1]) {
+        const c = parseInt(a[1]);
+        if (c === r)
+          delete s[e];
+        else if (c > r) {
+          const d = e.substring(
+            e.indexOf("||", o.length)
+          ), g = `${n.id}||${c - 1}${d}`;
+          s[g] = i[e], delete s[e];
+        }
+      }
+    }), y(s);
+  };
+  return /* @__PURE__ */ t.createElement("div", { className: "flex flex-col gap-4" }, m.length === 0 && /* @__PURE__ */ t.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ t.createElement(u, { variant: "body1", className: "text-light-4" }, "No entry added yet."), /* @__PURE__ */ t.createElement(
+    p,
+    {
+      size: "sm",
+      prefixIcon: /* @__PURE__ */ t.createElement(E, { size: 20 }),
+      variant: "secondary",
+      onClick: f,
+      className: "capitalize w-fit",
+      title: "Add "
+    }
+  )), m.map((r, s) => /* @__PURE__ */ t.createElement("div", { key: `${n.id}-entry-${s}` }, /* @__PURE__ */ t.createElement("div", { className: "flex items-center justify-between mb-3" }, /* @__PURE__ */ t.createElement(u, { variant: "body2", className: "text-light-4" }, "Entry ", s + 1), /* @__PURE__ */ t.createElement(
+    p,
+    {
+      size: "sm",
+      variant: "link-secondary",
+      onClick: () => $(s),
+      className: "w-fit text-danger-1"
+    },
+    "Remove"
+  )), /* @__PURE__ */ t.createElement("div", { className: "flex flex-col gap-3" }, n.options.map((o) => {
+    const l = `${n.id}||${s}||${o.id}`, e = {
+      ...o,
+      id: l
+    };
+    return /* @__PURE__ */ t.createElement(x, { key: l, field: e });
+  })))), m.length ? /* @__PURE__ */ t.createElement("div", { className: "flex justify-end" }, /* @__PURE__ */ t.createElement(
+    p,
+    {
+      size: "sm",
+      prefixIcon: /* @__PURE__ */ t.createElement(E, { size: 20 }),
+      variant: "secondary",
+      onClick: f,
+      className: "mt-2 capitalize w-fit",
+      title: `Add more ${n.name}`
+    }
+  )) : null);
+};
+export {
+  R as RepeatableGroup
+};
+//# sourceMappingURL=index.es177.js.map

package/dist/index.es177.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es177.js","sources":["../src/components/ui/form-renderer/components/form-fields/components/repeatable-group/index.tsx"],"sourcesContent":["// components/form-fields/RepeatableGroup.tsx\nimport React from 'react'\nimport { Typography } from '@/components/atoms/typography'\nimport { Button } from '@/components/atoms/button'\n\nimport { FormField } from '../../index' // Import your existing FormField component\nimport { useFormValues } from '../../../../context/form-values'\nimport { FormValues, RepeatableGroupField } from '../../../../form.types'\nimport { Plus } from 'lucide-react'\n\ninterface FormFieldProps {\n  field: RepeatableGroupField\n}\n\nexport const RepeatableGroup: React.FC<FormFieldProps> = ({ field }) => {\n  const { values, setValue, setFormValues } = useFormValues()\n\n  // Get all entries for this repeatable group\n  const getEntries = () => {\n    const entries: FormValues[] = []\n    const prefix = `${field.id}||`\n\n    // Find all entry indices in one pass\n    const entryIndices = new Set<number>()\n    Object.keys(values).forEach((key) => {\n      if (key.startsWith(prefix)) {\n        const match = key.match(new RegExp(`^${field.id}\\\\|\\\\|(\\\\d+)\\\\|\\\\|`))\n        if (match && match[1]) {\n          entryIndices.add(parseInt(match[1]))\n        }\n      }\n    })\n\n    // Sort indices numerically\n    const sortedIndices = Array.from(entryIndices).sort((a, b) => a - b)\n\n    // Build entry objects\n    for (const index of sortedIndices) {\n      const entryObject: FormValues = {}\n\n      // Collect all subfields for this entry\n      for (const subField of field.options) {\n        const key = `${field.id}||${index}||${subField.id}`\n        if (key in values) {\n          entryObject[subField.id] = values[key]\n        }\n      }\n\n      entries.push(entryObject)\n    }\n\n    return entries\n  }\n\n  const entries = getEntries()\n\n  const handleAddEntry = () => {\n    const newIndex = entries.length\n    // Initialize new entry by setting values for each subfield\n    field.options.forEach((subField) => {\n      setValue(`${field.id}||${newIndex}||${subField.id}`, undefined)\n    })\n  }\n\n  const handleRemoveEntry = (indexToRemove: number) => {\n    const newValues = { ...values }\n\n    // Step 1: Find all keys associated with all entries of this repeatable group\n    const groupPrefix = `${field.id}||`\n    const allGroupKeys = Object.keys(values).filter((key) =>\n      key.startsWith(groupPrefix)\n    )\n\n    // Step 2: Process each key - either remove it or reindex it\n    allGroupKeys.forEach((key) => {\n      // Extract entry index from the key\n      const match = key.match(new RegExp(`^${field.id}\\\\|\\\\|(\\\\d+)\\\\|\\\\|`))\n      if (match && match[1]) {\n        const entryIndex = parseInt(match[1])\n\n        if (entryIndex === indexToRemove) {\n          // Delete keys for the entry being removed\n          delete newValues[key]\n        } else if (entryIndex > indexToRemove) {\n          // Reindex entries that come after the removed one\n          const remainingPart = key.substring(\n            key.indexOf('||', groupPrefix.length)\n          )\n\n          const newKey = `${field.id}||${entryIndex - 1}${remainingPart}`\n\n          // Copy the value to the new index\n          newValues[newKey] = values[key]\n\n          // Remove the old key\n          delete newValues[key]\n        }\n      }\n    })\n\n    // Update form values with a single call\n    setFormValues(newValues)\n  }\n\n  // Rest of your component remains largely the same\n  return (\n    <div className=\"flex flex-col gap-4\">\n      {entries.length === 0 && (\n        <div className=\"flex items-center justify-between\">\n          <Typography variant={'body1'} className=\"text-light-4\">\n            No entry added yet.\n          </Typography>\n          <Button\n            size=\"sm\"\n            prefixIcon={<Plus size={20} />}\n            variant=\"secondary\"\n            onClick={handleAddEntry}\n            className=\"capitalize w-fit\"\n            title={`Add `}\n          />\n        </div>\n      )}\n\n      {entries.map((_, entryIndex) => (\n        <div key={`${field.id}-entry-${entryIndex}`}>\n          <div className=\"flex items-center justify-between mb-3\">\n            <Typography variant=\"body2\" className=\"text-light-4\">\n              Entry {entryIndex + 1}\n            </Typography>\n            <Button\n              size=\"sm\"\n              variant=\"link-secondary\"\n              onClick={() => handleRemoveEntry(entryIndex)}\n              className=\"w-fit text-danger-1\"\n            >\n              Remove\n            </Button>\n          </div>\n\n          <div className=\"flex flex-col gap-3\">\n            {field.options.map((subField) => {\n              const uniqueId = `${field.id}||${entryIndex}||${subField.id}`\n              const modifiedField = {\n                ...subField,\n                id: uniqueId,\n              }\n              return <FormField key={uniqueId} field={modifiedField} />\n            })}\n          </div>\n        </div>\n      ))}\n      {entries.length ? (\n        <div className=\"flex justify-end\">\n          <Button\n            size=\"sm\"\n            prefixIcon={<Plus size={20} />}\n            variant=\"secondary\"\n            onClick={handleAddEntry}\n            className=\"mt-2 capitalize w-fit\"\n            title={`Add more ${field.name}`}\n          />\n        </div>\n      ) : null}\n    </div>\n  )\n}\n"],"names":["RepeatableGroup","field","values","setValue","setFormValues","useFormValues","entries","prefix","entryIndices","key","match","sortedIndices","a","b","index","entryObject","subField","handleAddEntry","newIndex","handleRemoveEntry","indexToRemove","newValues","groupPrefix","entryIndex","remainingPart","newKey","React","Typography","Button","Plus","_","uniqueId","modifiedField","FormField"],"mappings":"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"}

package/dist/index.es178.js

@@ -0,0 +1,133 @@
+import { Typography as g } from "./index.es19.js";
+import { Spinner as $ } from "./index.es64.js";
+import { SingleCombobox as x } from "./index.es27.js";
+import { Upload as T, Pen as R, X as S } from "lucide-react";
+import e, { useState as _, useRef as C } from "react";
+import { useFormValues as M } from "./index.es160.js";
+import { useToast as P } from "./index.es87.js";
+const X = ({
+  id: h,
+  onChange: c,
+  value: l = [],
+  accept: y = "image/*",
+  error: p,
+  maxImages: a = 20,
+  options: E
+}) => {
+  const { onAssetUpload: u, onToggleImageEditor: f } = M(), { toast: o } = P(), [n, b] = _(!1), m = C(null), N = async (s) => {
+    const t = s.target.files;
+    if (!(!t?.length || n)) {
+      if (l.length + t.length > a) {
+        o({
+          title: "Alert!",
+          description: `Maximum ${a} images allowed.`,
+          icon: "warning"
+        });
+        return;
+      }
+      if (u) {
+        b(!0);
+        try {
+          const r = Array.from(t).map((d) => u(d)), A = (await Promise.all(r)).map((d) => ({ ...d, tag: "" }));
+          c([...l, ...A]), o({
+            title: "Alert!",
+            description: `${t.length} ${t.length === 1 ? "image" : "images"} uploaded successfully.`,
+            icon: "success"
+          });
+        } catch {
+          o({
+            title: "Alert!",
+            description: "Error uploading images",
+            icon: "warning"
+          });
+        } finally {
+          b(!1), m.current && (m.current.value = "");
+        }
+      }
+    }
+  }, w = () => {
+    !n && l.length < a ? m.current?.click() : l.length >= a && o({
+      title: "Alert!",
+      description: `Maximum ${a} images allowed.`,
+      icon: "warning"
+    });
+  }, k = (s) => {
+    if (!n) {
+      const t = [...l];
+      t.splice(s, 1), c(t);
+    }
+  }, v = (s, t) => {
+    const r = [...l], i = r[t];
+    r.splice(t, 1, { ...i, ...s }), c(r);
+  };
+  return /* @__PURE__ */ e.createElement("div", { className: "relative" }, n && /* @__PURE__ */ e.createElement("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-70" }, /* @__PURE__ */ e.createElement($, { className: "w-8 h-8 text-primary-1" })), /* @__PURE__ */ e.createElement("div", { className: "relative p-8 border-2 border-dashed rounded-lg border-primary-1 bg-primary-1" }, /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      className: "w-full",
+      onClick: w,
+      type: "button",
+      disabled: n || l.length >= a
+    },
+    /* @__PURE__ */ e.createElement("div", { className: "flex flex-col items-center gap-3 text-center" }, /* @__PURE__ */ e.createElement("div", { className: "bg-gray-100 rounded-full" }, /* @__PURE__ */ e.createElement(T, { className: "w-6 h-6 text-gray-500" })), /* @__PURE__ */ e.createElement(g, { variant: "body1", className: "text-gray-600" }, n ? "Uploading..." : l.length >= a ? `Maximum ${a} images reached` : "Add Images"), l.length > 0 && /* @__PURE__ */ e.createElement(g, { variant: "body1", className: "text-gray-500" }, l.length, " of ", a, " images"))
+  ), /* @__PURE__ */ e.createElement(
+    "input",
+    {
+      ref: m,
+      id: `${h}-gallery`,
+      type: "file",
+      accept: y,
+      disabled: n || l.length >= a,
+      onChange: N,
+      className: "hidden",
+      multiple: !0
+    }
+  ), p && /* @__PURE__ */ e.createElement(g, { variant: "body1", className: "mt-1 text-danger-1" }, p)), l.length > 0 && /* @__PURE__ */ e.createElement("div", { className: "grid grid-cols-2 gap-4 mt-4 sm:grid-cols-3 md:grid-cols-4" }, l.map((s, t) => /* @__PURE__ */ e.createElement("div", { key: s.private_url, className: "flex flex-col gap-2" }, /* @__PURE__ */ e.createElement("div", { key: t, className: "relative flex rounded" }, /* @__PURE__ */ e.createElement(
+    "img",
+    {
+      src: s.public_url,
+      alt: `Preview ${t + 1}`,
+      className: "object-cover w-full h-24 rounded"
+    }
+  ), f && /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: (r) => {
+        r.currentTarget.blur(), f({
+          imageUrl: s.public_url,
+          index: t,
+          onReplaceImage: v
+        });
+      },
+      className: "absolute p-1 text-white bg-white rounded-full left-2 top-2 opacity-70 hover:opacity-100"
+    },
+    /* @__PURE__ */ e.createElement(R, { size: 16, className: "stroke-danger" })
+  ), /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      onClick: () => k(t),
+      className: "absolute p-1 text-white bg-white rounded-full right-2 top-2 opacity-70 hover:opacity-100",
+      type: "button",
+      disabled: n
+    },
+    /* @__PURE__ */ e.createElement(S, { size: 16, className: "stroke-danger" })
+  )), /* @__PURE__ */ e.createElement(
+    x,
+    {
+      options: E.map((r) => ({
+        id: r,
+        name: r
+      })),
+      value: s.tag,
+      onChange: (r) => {
+        const i = [...l];
+        i[t].tag = r, c(i);
+      },
+      placeholder: "Select "
+    }
+  )))));
+};
+export {
+  X as TaggableMultiImagePicker
+};
+//# sourceMappingURL=index.es178.js.map

package/dist/index.es178.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es178.js","sources":["../src/components/ui/form-renderer/components/form-fields/components/taggable-multi-image-picker/index.tsx"],"sourcesContent":["import { Typography } from '@/components/atoms/typography'\nimport { useToast } from '@/components/molecules/toast'\nimport { Spinner } from '@/components/unstyled/spinner'\nimport { SingleCombobox } from '@/components/molecules/single-combobox'\n\nimport { Upload, X, Pen } from 'lucide-react'\nimport React, { useRef, useState } from 'react'\nimport { useFormValues } from '../../../../context/form-values'\nimport { AssetValue, TaggableAssetValue } from '../../../../form.types'\n\ninterface TaggableMultiImagePickerProps {\n  id: string\n  onChange: (data: TaggableAssetValue[]) => void\n  value?: TaggableAssetValue[]\n  accept?: string\n  error?: string\n  maxImages?: number\n  options: string[]\n}\n\nconst TaggableMultiImagePicker: React.FC<TaggableMultiImagePickerProps> = ({\n  id,\n  onChange,\n  value = [],\n  accept = 'image/*',\n  error,\n  maxImages = 20,\n  options,\n}) => {\n  const { onAssetUpload, onToggleImageEditor } = useFormValues()\n  const { toast } = useToast()\n\n  const [isLoading, setIsLoading] = useState(false)\n  const fileInputRef = useRef<HTMLInputElement>(null)\n\n  const handleImageSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {\n    const files = e.target.files\n    if (!files?.length || isLoading) return\n\n    if (value.length + files.length > maxImages) {\n      toast({\n        title: 'Alert!',\n        description: `Maximum ${maxImages} images allowed.`,\n        icon: 'warning',\n      })\n      return\n    }\n\n    if (onAssetUpload) {\n      setIsLoading(true)\n\n      try {\n        const uploads = Array.from(files).map((file) => onAssetUpload(file))\n        const results = await Promise.all(uploads)\n\n        const TaggedResults = results.map((result) => ({ ...result, tag: '' }))\n\n        onChange([...value, ...TaggedResults])\n\n        toast({\n          title: 'Alert!',\n          description: `${files.length} ${files.length === 1 ? 'image' : 'images'} uploaded successfully.`,\n          icon: 'success',\n        })\n      } catch (error) {\n        toast({\n          title: 'Alert!',\n          description: `Error uploading images`,\n          icon: 'warning',\n        })\n      } finally {\n        setIsLoading(false)\n        // Reset the file input so the same files can be selected again\n        if (fileInputRef.current) {\n          fileInputRef.current.value = ''\n        }\n      }\n    }\n  }\n\n  const handleClick = () => {\n    if (!isLoading && value.length < maxImages) {\n      fileInputRef.current?.click()\n    } else if (value.length >= maxImages) {\n      toast({\n        title: 'Alert!',\n        description: `Maximum ${maxImages} images allowed.`,\n        icon: 'warning',\n      })\n    }\n  }\n\n  const removeImage = (index: number) => {\n    if (!isLoading) {\n      const newImages = [...value]\n      newImages.splice(index, 1)\n      onChange(newImages)\n    }\n  }\n\n  const onReplaceImage = (data: AssetValue, index: number) => {\n    const newValue = [...value]\n    const existingImage = newValue[index]\n\n    newValue.splice(index, 1, { ...existingImage, ...data })\n    onChange(newValue)\n  }\n\n  return (\n    <div className=\"relative\">\n      {isLoading && (\n        <div className=\"absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-70\">\n          <Spinner className=\"w-8 h-8 text-primary-1\" />\n        </div>\n      )}\n      <div className=\"relative p-8 border-2 border-dashed rounded-lg border-primary-1 bg-primary-1\">\n        <button\n          className=\"w-full\"\n          onClick={handleClick}\n          type=\"button\"\n          disabled={isLoading || value.length >= maxImages}\n        >\n          <div className=\"flex flex-col items-center gap-3 text-center\">\n            <div className=\"bg-gray-100 rounded-full\">\n              <Upload className=\"w-6 h-6 text-gray-500\" />\n            </div>\n            <Typography variant=\"body1\" className=\"text-gray-600\">\n              {isLoading\n                ? 'Uploading...'\n                : value.length >= maxImages\n                  ? `Maximum ${maxImages} images reached`\n                  : 'Add Images'}\n            </Typography>\n            {value.length > 0 && (\n              <Typography variant=\"body1\" className=\"text-gray-500\">\n                {value.length} of {maxImages} images\n              </Typography>\n            )}\n          </div>\n        </button>\n        <input\n          ref={fileInputRef}\n          id={`${id}-gallery`}\n          type=\"file\"\n          accept={accept}\n          disabled={isLoading || value.length >= maxImages}\n          onChange={handleImageSelect}\n          className=\"hidden\"\n          multiple\n        />\n\n        {error && (\n          <Typography variant=\"body1\" className=\"mt-1 text-danger-1\">\n            {error}\n          </Typography>\n        )}\n      </div>\n\n      {value.length > 0 && (\n        <div className=\"grid grid-cols-2 gap-4 mt-4 sm:grid-cols-3 md:grid-cols-4\">\n          {value.map((image, index) => (\n            <div key={image.private_url} className=\"flex flex-col gap-2\">\n              <div key={index} className=\"relative flex rounded\">\n                <img\n                  src={image.public_url}\n                  alt={`Preview ${index + 1}`}\n                  className=\"object-cover w-full h-24 rounded\"\n                />\n                {onToggleImageEditor && (\n                  <button\n                    type=\"button\"\n                    onClick={(e) => {\n                      e.currentTarget.blur()\n                      onToggleImageEditor({\n                        imageUrl: image.public_url,\n                        index,\n                        onReplaceImage,\n                      })\n                    }}\n                    className=\"absolute p-1 text-white bg-white rounded-full left-2 top-2 opacity-70 hover:opacity-100\"\n                  >\n                    <Pen size={16} className=\"stroke-danger\" />\n                  </button>\n                )}\n                <button\n                  onClick={() => removeImage(index)}\n                  className=\"absolute p-1 text-white bg-white rounded-full right-2 top-2 opacity-70 hover:opacity-100\"\n                  type=\"button\"\n                  disabled={isLoading}\n                >\n                  <X size={16} className=\"stroke-danger\" />\n                </button>\n              </div>\n              <SingleCombobox\n                options={options.map((option) => ({\n                  id: option,\n                  name: option,\n                }))}\n                value={image.tag}\n                onChange={(data) => {\n                  const newImages = [...value]\n                  newImages[index].tag = data\n                  onChange(newImages)\n                }}\n                placeholder={'Select '}\n              />\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { TaggableMultiImagePicker }\n"],"names":["TaggableMultiImagePicker","id","onChange","value","accept","error","maxImages","options","onAssetUpload","onToggleImageEditor","useFormValues","toast","useToast","isLoading","setIsLoading","useState","fileInputRef","useRef","handleImageSelect","e","files","uploads","file","TaggedResults","result","handleClick","removeImage","index","newImages","onReplaceImage","data","newValue","existingImage","React","Spinner","Upload","Typography","image","Pen","X","SingleCombobox","option"],"mappings":"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"}