@ikas/core 1.0.8 → 1.0.9

package/dist/index40.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),q=require("react"),c=require("@ikas/ui"),i=require("./index5.cjs"),C=require("./index35.cjs"),W=require("./index77.cjs"),F=require("./index78.cjs"),L=require("./index79.cjs"),k=require("./index80.cjs"),w=require("./index81.cjs");function z(r){var h,f;const o=!!((h=r.images)!=null&&h.length),{fileList:l,imageLimit:b,onRemove:y,handleDragEnd:v,triggerFileInput:d,handleFileChange:u,fileInputRef:m}=L.useImageSelect(r),{draggable:g,isLoading:I,allowVideoUpload:x,customOverlayModalProps:N,accept:a}=r,p=q.useMemo(()=>{if(a)return a},[a]);if(o&&!r.renderWithoutImageList){const S=l.length>=b?null:e.jsxs("div",{onClick:d,className:c.cn("flex h-[104px] w-[104px] shrink-0 cursor-pointer flex-col items-center justify-center","rounded-lg border border-dashed border-gray-blue-2","text-gray-blue-4 transition-colors hover:border-purple-5 hover:text-purple-5"),children:[e.jsx(k.default,{className:"mb-1 size-5"}),e.jsx("span",{className:"text-xs",children:x?i.coreTranslations.imageSelect.selectMedia:i.coreTranslations.imageSelect.selectImage})]});return e.jsxs(e.Fragment,{children:[e.jsx("input",{ref:m,type:"file",multiple:!0,accept:p,onChange:u,className:"hidden"}),e.jsx(W.UploadWrapper,{draggable:g,images:r.images,fileList:l,handleDragEnd:v,children:e.jsxs("div",{className:"flex flex-wrap gap-3",children:[r.images.map((n,s)=>{var j;return e.jsx(F.BoxWrapper,{draggable:!!g,id:((j=l[s])==null?void 0:j.id)||String(s),children:e.jsx("div",{className:"size-[104px]",children:e.jsx(C.DrawerImage,{isOverlayEnabled:!0,images:r.images,image:n,onDelete:()=>y(n.id||String(s)),customOverlayModalProps:N})})},n.id||s)}),S]})})]})}const t=!o&&!!((f=r.renderWithoutImageList)!=null&&f.emptyContent);return e.jsxs(e.Fragment,{children:[e.jsx("input",{ref:m,type:"file",multiple:!0,accept:p,onChange:t?void 0:u,className:"hidden"}),e.jsx("div",{onClick:t?void 0:d,className:c.cn("flex w-full cursor-pointer flex-col items-center justify-center","rounded-lg border border-dashed border-gray-blue-2","transition-colors hover:border-purple-5",t?"h-[300px] cursor-default":"py-6"),children:t?e.jsx("div",{className:"flex size-full flex-col items-center justify-center",children:r.renderWithoutImageList.emptyContent}):e.jsxs("div",{className:"flex flex-col items-center justify-center py-3",children:[I?e.jsx(c.Spinner,{className:"mb-1 size-9 text-purple-5"}):e.jsx(w.default,{className:"mb-1 size-9 text-purple-5"}),e.jsx("span",{className:"text-sm text-gray-blue-6",children:x?i.coreTranslations.imageSelect.clickFileMedia:i.coreTranslations.imageSelect.clickFileImage})]})})]})}exports.ImageSelect=z;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),x=require("./index41.cjs"),m=require("./index39.cjs"),a=require("./index5.cjs"),l=require("./index3.cjs");function h({disableAlpha:s,color:c,onColorChangeComplete:n,imageUrl:t,onImageChange:i,className:u}){const[o,b]=g.useState(t?"image":"color"),d=[{value:"color",label:a.coreTranslations.swatchPicker.color},{value:"image",label:a.coreTranslations.swatchPicker.image}];return e.jsxs("div",{className:l.cn("inline-block w-[328px]",u),children:[e.jsx("div",{className:"border-b border-gray-blue-1 bg-white px-2.5 py-3",children:e.jsx("div",{className:"flex rounded border border-gray-blue-1 bg-gray-blue-0 p-1",children:d.map(r=>e.jsx("button",{type:"button",onClick:()=>b(r.value),className:l.cn("flex-1 rounded py-1.5 text-sm font-medium transition-colors",o===r.value?"bg-white text-gray-blue-9 shadow-sm":"bg-transparent text-gray-blue-6"),children:r.label},r.value))})}),o==="color"?e.jsx(x.ColorPicker,{disableAlpha:s,color:c,onChangeComplete:n}):e.jsx(m.SingleImageUpload,{block:!0,imageUrl:t,onImageChange:i})]})}exports.SwatchPicker=h;

package/dist/index40.js

@@ -1,126 +1,54 @@
-import { jsxs as t, jsx as e, Fragment as y } from "react/jsx-runtime";
-import { useMemo as k } from "react";
-import { cn as v, Spinner as w } from "@ikas/ui";
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { useState as p } from "react";
+import { ColorPicker as g } from "./index41.js";
+import { SingleImageUpload as h } from "./index39.js";
 import { coreTranslations as a } from "./index5.js";
-import { DrawerImage as z } from "./index35.js";
-import { UploadWrapper as F } from "./index77.js";
-import { BoxWrapper as W } from "./index78.js";
-import { useImageSelect as M } from "./index79.js";
-import D from "./index80.js";
-import E from "./index81.js";
-function H(r) {
-  var h, x;
-  const c = !!((h = r.images) != null && h.length), {
-    fileList: n,
-    imageLimit: N,
-    onRemove: I,
-    handleDragEnd: C,
-    triggerFileInput: m,
-    handleFileChange: d,
-    fileInputRef: u
-  } = M(r), {
-    draggable: p,
-    isLoading: S,
-    allowVideoUpload: g,
-    customOverlayModalProps: j,
-    accept: o
-  } = r, f = k(() => {
-    if (o) return o;
-  }, [o]);
-  if (c && !r.renderWithoutImageList) {
-    const L = n.length >= N ? null : /* @__PURE__ */ t(
-      "div",
+import { cn as t } from "./index3.js";
+function C({
+  disableAlpha: i,
+  color: c,
+  onColorChangeComplete: n,
+  imageUrl: o,
+  onImageChange: s,
+  className: m
+}) {
+  const [l, b] = p(
+    o ? "image" : "color"
+  ), u = [
+    { value: "color", label: a.swatchPicker.color },
+    { value: "image", label: a.swatchPicker.image }
+  ];
+  return /* @__PURE__ */ d("div", { className: t("inline-block w-[328px]", m), children: [
+    /* @__PURE__ */ e("div", { className: "border-b border-gray-blue-1 bg-white px-2.5 py-3", children: /* @__PURE__ */ e("div", { className: "flex rounded border border-gray-blue-1 bg-gray-blue-0 p-1", children: u.map((r) => /* @__PURE__ */ e(
+      "button",
       {
-        onClick: m,
-        className: v(
-          "flex h-[104px] w-[104px] shrink-0 cursor-pointer flex-col items-center justify-center",
-          "rounded-lg border border-dashed border-gray-blue-2",
-          "text-gray-blue-4 transition-colors hover:border-purple-5 hover:text-purple-5"
+        type: "button",
+        onClick: () => b(r.value),
+        className: t(
+          "flex-1 rounded py-1.5 text-sm font-medium transition-colors",
+          l === r.value ? "bg-white text-gray-blue-9 shadow-sm" : "bg-transparent text-gray-blue-6"
         ),
-        children: [
-          /* @__PURE__ */ e(D, { className: "mb-1 size-5" }),
-          /* @__PURE__ */ e("span", { className: "text-xs", children: g ? a.imageSelect.selectMedia : a.imageSelect.selectImage })
-        ]
-      }
-    );
-    return /* @__PURE__ */ t(y, { children: [
-      /* @__PURE__ */ e(
-        "input",
-        {
-          ref: u,
-          type: "file",
-          multiple: !0,
-          accept: f,
-          onChange: d,
-          className: "hidden"
-        }
-      ),
-      /* @__PURE__ */ e(
-        F,
-        {
-          draggable: p,
-          images: r.images,
-          fileList: n,
-          handleDragEnd: C,
-          children: /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-3", children: [
-            r.images.map((s, l) => {
-              var b;
-              return /* @__PURE__ */ e(
-                W,
-                {
-                  draggable: !!p,
-                  id: ((b = n[l]) == null ? void 0 : b.id) || String(l),
-                  children: /* @__PURE__ */ e("div", { className: "size-[104px]", children: /* @__PURE__ */ e(
-                    z,
-                    {
-                      isOverlayEnabled: !0,
-                      images: r.images,
-                      image: s,
-                      onDelete: () => I(s.id || String(l)),
-                      customOverlayModalProps: j
-                    }
-                  ) })
-                },
-                s.id || l
-              );
-            }),
-            L
-          ] })
-        }
-      )
-    ] });
-  }
-  const i = !c && !!((x = r.renderWithoutImageList) != null && x.emptyContent);
-  return /* @__PURE__ */ t(y, { children: [
-    /* @__PURE__ */ e(
-      "input",
+        children: r.label
+      },
+      r.value
+    )) }) }),
+    l === "color" ? /* @__PURE__ */ e(
+      g,
       {
-        ref: u,
-        type: "file",
-        multiple: !0,
-        accept: f,
-        onChange: i ? void 0 : d,
-        className: "hidden"
+        disableAlpha: i,
+        color: c,
+        onChangeComplete: n
       }
-    ),
-    /* @__PURE__ */ e(
-      "div",
+    ) : /* @__PURE__ */ e(
+      h,
       {
-        onClick: i ? void 0 : m,
-        className: v(
-          "flex w-full cursor-pointer flex-col items-center justify-center",
-          "rounded-lg border border-dashed border-gray-blue-2",
-          "transition-colors hover:border-purple-5",
-          i ? "h-[300px] cursor-default" : "py-6"
-        ),
-        children: i ? /* @__PURE__ */ e("div", { className: "flex size-full flex-col items-center justify-center", children: r.renderWithoutImageList.emptyContent }) : /* @__PURE__ */ t("div", { className: "flex flex-col items-center justify-center py-3", children: [
-          S ? /* @__PURE__ */ e(w, { className: "mb-1 size-9 text-purple-5" }) : /* @__PURE__ */ e(E, { className: "mb-1 size-9 text-purple-5" }),
-          /* @__PURE__ */ e("span", { className: "text-sm text-gray-blue-6", children: g ? a.imageSelect.clickFileMedia : a.imageSelect.clickFileImage })
-        ] })
+        block: !0,
+        imageUrl: o,
+        onImageChange: s
       }
     )
   ] });
 }
 export {
-  H as ImageSelect
+  C as SwatchPicker
 };

package/dist/index41.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("react"),t=require("@ikas/ui"),p=require("./index39.cjs"),a=require("./index38.cjs"),l=require("./index5.cjs"),x=require("./index82.cjs");function b({block:g,imageUrl:n,onImageChange:c,className:I}){const o=i.useRef(null),m=i.useCallback(()=>{var e;(e=o.current)==null||e.click()},[]),f=i.useCallback(async e=>{var d;const s=(d=e.target.files)==null?void 0:d[0];if(!s)return;if(!a.VALID_IMAGE_TYPES.includes(s.type)){t.message.error(l.coreTranslations.drawerImage.fileTypeError(a.VALID_IMAGE_TYPES_LABELS_STRING)),e.target.value="";return}if(s.size/1024/1024>=a.IMAGE_UPLOAD_LIMIT_SIZE){t.message.error(l.coreTranslations.drawerImage.imageUploadLimitSize(a.IMAGE_UPLOAD_LIMIT_SIZE)),e.target.value="";return}const u=await p.getImageBase64(s);u&&c(u),e.target.value=""},[c]),_=a.VALID_IMAGE_TYPES.join(",");return r.jsxs("div",{onClick:m,className:t.cn("relative flex cursor-pointer items-center justify-center overflow-hidden rounded border bg-gray-blue-0",n?"border-solid border-gray-blue-2":"border-dashed border-gray-blue-2",g?"aspect-square w-full":"h-[296px] w-[296px]",I),children:[r.jsx("input",{ref:o,type:"file",accept:_,onChange:f,className:"hidden"}),n?r.jsx("img",{src:n,className:"h-full w-full object-cover",alt:""}):r.jsxs("div",{className:"flex flex-col items-center gap-1",children:[r.jsx(x.default,{className:"h-5 w-5 text-gray-blue-6"}),r.jsx("span",{className:"text-center text-sm leading-5 text-gray-blue-6",children:l.coreTranslations.singleImageUpload.selectImage(a.VALID_IMAGE_TYPES_LABELS_STRING,a.IMAGE_UPLOAD_LIMIT_SIZE)}),r.jsx(t.Button,{variant:"link",className:"mx-auto",children:l.coreTranslations.singleImageUpload.addImage})]})]})}exports.SingleImageUpload=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react");require("./index80.cjs");require("./index81.cjs");require("./index82.cjs");const v=require("./index83.cjs");require("./index84.cjs");require("./index85.cjs");require("./index86.cjs");require("./index87.cjs");require("./index88.cjs");require("./index89.cjs");require("./index90.cjs");require("./index91.cjs");require("./index92.cjs");require("./index93.cjs");require("./index94.cjs");const f=require("@ikas/ui"),d=require("./index6.cjs"),m=require("./index5.cjs");;/* empty css          */const y=require("./index96.cjs"),k=require("./index97.cjs"),T=require("./index98.cjs"),p="#000000",C=({r:o,g:r,b:a,a:s=1})=>`rgba(${o}, ${r}, ${a}, ${s})`,j=i.createContext(void 0),q=o=>{const r=i.useState("hex"),a=!!o.disableAlpha,s=()=>{const n=o.color||p,b=typeof n=="string";return{hex:b?n:a||n.a===1?d.rgbToHex(n):d.rgbaToHex(n),rgb:b?d.hexToRGBA(n)||d.hexToRGBA(p):n}},[c,t]=i.useState(()=>s());i.useEffect(()=>{t(()=>s())},[o.color]);const u=n=>{var b;(b=o.onChangeComplete)==null||b.call(o,n)};return e.jsx(j.Provider,{value:{disableAlpha:a,color:c,currentType:r},children:e.jsxs("div",{className:o.className,children:[e.jsx("div",{className:"ikas-color-picker",children:e.jsx(v.default,{color:c.rgb,disableAlpha:a,onChange:n=>{const l={hex:a?n.hex:n.rgb.a===1||n.rgb.a===0?d.rgbToHex(n.rgb):d.rgbaToHex(n.rgb),rgb:n.rgb};t(l)},onChangeComplete:()=>{t(n=>(u(n),n))}})}),e.jsxs("div",{className:"flex w-[296px] items-end",children:[e.jsxs("div",{className:"flex w-[296px] items-end",children:[r[0]==="hex"&&e.jsx(A,{onChangeComplete:u}),r[0]==="rgb"&&e.jsx(B,{onChangeComplete:u}),e.jsx(w,{})]}),e.jsx(N,{})]})]})})},g=()=>{const o=i.useContext(j);if(!o)throw Error("ColorPickerContext value should exist.");return o},w=()=>{const[o,r]=i.useState(!1),{currentType:a,color:s}=g(),c=()=>{if(o)return;const u=a[0]==="hex"?s.hex:C(s.rgb);navigator.clipboard.writeText(u),r(!0),setTimeout(()=>r(!1),1e3)},t=o?m.coreTranslations.colorPicker.copiedToClipboard:m.coreTranslations.colorPicker.copyToClipboard;return e.jsx(f.Tooltip,{title:t,children:e.jsxs("button",{type:"button","aria-label":t,onClick:c,className:`relative ml-2 flex h-9 w-9 cursor-pointer items-center justify-center rounded border outline-none ${o?"border-[var(--success)] bg-[var(--success)] text-white":"border-[var(--gray-blue-2)] bg-white text-[var(--gray-blue-6)]"}`,children:[e.jsx(y.default,{size:16,strokeWidth:1.4,className:"block"}),o&&e.jsx(k.default,{size:16,strokeWidth:1.4,className:"absolute inset-0 z-[1] m-auto block"})]})})},N=()=>{const{currentType:o}=g(),r=m.coreTranslations.colorPicker.changeColorInputType,a=()=>{o[1](o[0]==="hex"?"rgb":"hex")};return e.jsx(f.Tooltip,{title:r,children:e.jsx("button",{type:"button","aria-label":r,onClick:a,className:"flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded border border-[var(--gray-blue-2)] bg-white text-[var(--gray-blue-6)] outline-none",children:e.jsx(T.default,{size:16,strokeWidth:1.4,className:"block"})})})},A=o=>{const{color:r}=g(),[a,s]=i.useState("");i.useEffect(()=>{s(r.hex)},[r.rgb,r.hex]);const c=()=>{let t=a;t.charAt(0)!=="#"&&(t="#"+t),d.isValidHexColor(t)?(o.onChangeComplete({hex:t,rgb:d.hexToRGBA(t)||r.rgb}),s(t)):s(r.hex)};return e.jsxs("label",{children:[e.jsx("span",{className:"mb-1.5 block text-sm font-normal leading-5 text-[var(--gray-blue-6)]",children:"HEX"}),e.jsxs("div",{className:"relative",children:[e.jsx("input",{className:"box-border h-9 w-[136px] rounded border border-[var(--gray-blue-2)] bg-white py-2 pl-9 pr-2.5 text-sm outline-none",defaultValue:r.hex,value:a||void 0,onChange:t=>{s(t.target.value)},onBlur:c,onKeyDown:t=>t.key==="Enter"&&c()}),e.jsx("span",{className:"absolute left-2.5 top-1/2 h-[18px] w-[18px] -translate-y-1/2 rounded",title:r.hex,style:{backgroundColor:C(r.rgb)}})]})]})},h=({label:o,alpha:r,field:a,value:s,onCommit:c})=>{const t=i.useRef(!1),[u,n]=i.useState(s);i.useEffect(()=>{n(s)},[s]);const b=x=>{n(+x.target.value),t.current=!0},l=()=>{let x;r?x=Math.min(1,Math.max(0,u)):x=Math.min(255,Math.max(0,u)),x!==u&&n(x),t.current&&(c(a,x),t.current=!1)};return e.jsxs("label",{children:[e.jsx("span",{className:"mb-1.5 block text-sm font-normal leading-5 text-[var(--gray-blue-6)]",children:o}),e.jsx("input",{type:"number",value:u,min:0,step:r?"0.01":1,max:r?1:255,onChange:b,onBlur:l,onKeyDown:x=>x.key==="Enter"&&l(),className:"box-border h-9 w-[41px] border border-[var(--gray-blue-2)] px-0 py-2 text-center text-sm text-[var(--gray-blue-9)] outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"})]})},B=o=>{const{color:r,disableAlpha:a}=g(),[s,c]=i.useState(r.rgb);i.useEffect(()=>{c(r.rgb)},[r.rgb,r.hex]);const t=(u,n)=>{c(b=>{const l={...b,[u]:n},x=typeof l.a=="number"&&l.a<1&&l.a>0?d.rgbaToHex(l):d.rgbToHex(l);return o.onChangeComplete({hex:x,rgb:l}),l})};return e.jsx("div",{className:"flex items-end gap-2",children:e.jsxs("div",{className:"inline-flex overflow-hidden rounded [&_label:first-child_input]:rounded-l [&_label:last-child_input]:rounded-r [&_label:not(:last-child)_input]:border-r-0",children:[e.jsx(h,{field:"r",label:"R",value:s.r??0,onCommit:t}),e.jsx(h,{field:"g",label:"G",value:s.g??0,onCommit:t}),e.jsx(h,{field:"b",label:"B",value:s.b??0,onCommit:t}),!a&&e.jsx(h,{field:"a",label:"A",alpha:!0,value:s.a??1,onCommit:t})]})})};exports.ColorPicker=q;

package/dist/index41.js

@@ -1,78 +1,207 @@
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import { useRef as y, useCallback as d } from "react";
-import { message as u, Button as v, cn as _ } from "@ikas/ui";
-import { getImageBase64 as w } from "./index39.js";
-import { VALID_IMAGE_TYPES as f, VALID_IMAGE_TYPES_LABELS_STRING as g, IMAGE_UPLOAD_LIMIT_SIZE as i } from "./index38.js";
-import { coreTranslations as t } from "./index5.js";
-import E from "./index82.js";
-function C({
-  block: p,
-  imageUrl: l,
-  onImageChange: o,
-  className: I
-}) {
-  const s = y(null), b = d(() => {
-    var e;
-    (e = s.current) == null || e.click();
-  }, []), h = d(
-    async (e) => {
-      var c;
-      const a = (c = e.target.files) == null ? void 0 : c[0];
-      if (!a) return;
-      if (!f.includes(a.type)) {
-        u.error(
-          t.drawerImage.fileTypeError(
-            g
-          )
-        ), e.target.value = "";
-        return;
-      }
-      if (a.size / 1024 / 1024 >= i) {
-        u.error(
-          t.drawerImage.imageUploadLimitSize(
-            i
-          )
-        ), e.target.value = "";
-        return;
-      }
-      const n = await w(a);
-      n && o(n), e.target.value = "";
-    },
-    [o]
-  ), x = f.join(",");
-  return /* @__PURE__ */ m(
-    "div",
+import { jsx as n, jsxs as d } from "react/jsx-runtime";
+import { createContext as T, useState as m, useEffect as h, useContext as A, useRef as B } from "react";
+import "./index80.js";
+import "./index81.js";
+import "./index82.js";
+import P from "./index83.js";
+import "./index84.js";
+import "./index85.js";
+import "./index86.js";
+import "./index87.js";
+import "./index88.js";
+import "./index89.js";
+import "./index90.js";
+import "./index91.js";
+import "./index92.js";
+import "./index93.js";
+import "./index94.js";
+import { Tooltip as k } from "@ikas/ui";
+import { rgbToHex as g, rgbaToHex as f, hexToRGBA as C, isValidHexColor as E } from "./index6.js";
+import { coreTranslations as v } from "./index5.js";
+/* empty css        */
+import _ from "./index96.js";
+import H from "./index97.js";
+import I from "./index98.js";
+const y = "#000000", w = ({ r: t, g: e, b: a, a: l = 1 }) => `rgba(${t}, ${e}, ${a}, ${l})`, N = T(void 0), ie = (t) => {
+  const e = m("hex"), a = !!t.disableAlpha, l = () => {
+    const o = t.color || y, b = typeof o == "string";
+    return {
+      hex: b ? o : a || o.a === 1 ? g(o) : f(o),
+      rgb: b ? C(o) || C(y) : o
+    };
+  }, [s, r] = m(() => l());
+  h(() => {
+    r(() => l());
+  }, [t.color]);
+  const c = (o) => {
+    var b;
+    (b = t.onChangeComplete) == null || b.call(t, o);
+  };
+  return /* @__PURE__ */ n(
+    N.Provider,
     {
-      onClick: b,
-      className: _(
-        "relative flex cursor-pointer items-center justify-center overflow-hidden rounded border bg-gray-blue-0",
-        l ? "border-solid border-gray-blue-2" : "border-dashed border-gray-blue-2",
-        p ? "aspect-square w-full" : "h-[296px] w-[296px]",
-        I
-      ),
-      children: [
-        /* @__PURE__ */ r(
-          "input",
+      value: {
+        disableAlpha: a,
+        color: s,
+        currentType: e
+      },
+      children: /* @__PURE__ */ d("div", { className: t.className, children: [
+        /* @__PURE__ */ n("div", { className: "ikas-color-picker", children: /* @__PURE__ */ n(
+          P,
           {
-            ref: s,
-            type: "file",
-            accept: x,
-            onChange: h,
-            className: "hidden"
+            color: s.rgb,
+            disableAlpha: a,
+            onChange: (o) => {
+              const i = {
+                hex: a ? o.hex : o.rgb.a === 1 || o.rgb.a === 0 ? g(o.rgb) : f(o.rgb),
+                rgb: o.rgb
+              };
+              r(i);
+            },
+            onChangeComplete: () => {
+              r((o) => (c(o), o));
+            }
           }
-        ),
-        l ? /* @__PURE__ */ r("img", { src: l, className: "h-full w-full object-cover", alt: "" }) : /* @__PURE__ */ m("div", { className: "flex flex-col items-center gap-1", children: [
-          /* @__PURE__ */ r(E, { className: "h-5 w-5 text-gray-blue-6" }),
-          /* @__PURE__ */ r("span", { className: "text-center text-sm leading-5 text-gray-blue-6", children: t.singleImageUpload.selectImage(
-            g,
-            i
-          ) }),
-          /* @__PURE__ */ r(v, { variant: "link", className: "mx-auto", children: t.singleImageUpload.addImage })
+        ) }),
+        /* @__PURE__ */ d("div", { className: "flex w-[296px] items-end", children: [
+          /* @__PURE__ */ d("div", { className: "flex w-[296px] items-end", children: [
+            e[0] === "hex" && /* @__PURE__ */ n(G, { onChangeComplete: c }),
+            e[0] === "rgb" && /* @__PURE__ */ n(D, { onChangeComplete: c }),
+            /* @__PURE__ */ n(R, {})
+          ] }),
+          /* @__PURE__ */ n(V, {})
         ] })
-      ]
+      ] })
     }
   );
-}
+}, x = () => {
+  const t = A(N);
+  if (!t) throw Error("ColorPickerContext value should exist.");
+  return t;
+}, R = () => {
+  const [t, e] = m(!1), { currentType: a, color: l } = x(), s = () => {
+    if (t) return;
+    const c = a[0] === "hex" ? l.hex : w(l.rgb);
+    navigator.clipboard.writeText(c), e(!0), setTimeout(() => e(!1), 1e3);
+  }, r = t ? v.colorPicker.copiedToClipboard : v.colorPicker.copyToClipboard;
+  return /* @__PURE__ */ n(k, { title: r, children: /* @__PURE__ */ d(
+    "button",
+    {
+      type: "button",
+      "aria-label": r,
+      onClick: s,
+      className: `relative ml-2 flex h-9 w-9 cursor-pointer items-center justify-center rounded border outline-none ${t ? "border-[var(--success)] bg-[var(--success)] text-white" : "border-[var(--gray-blue-2)] bg-white text-[var(--gray-blue-6)]"}`,
+      children: [
+        /* @__PURE__ */ n(_, { size: 16, strokeWidth: 1.4, className: "block" }),
+        t && /* @__PURE__ */ n(
+          H,
+          {
+            size: 16,
+            strokeWidth: 1.4,
+            className: "absolute inset-0 z-[1] m-auto block"
+          }
+        )
+      ]
+    }
+  ) });
+}, V = () => {
+  const { currentType: t } = x(), e = v.colorPicker.changeColorInputType;
+  return /* @__PURE__ */ n(k, { title: e, children: /* @__PURE__ */ n(
+    "button",
+    {
+      type: "button",
+      "aria-label": e,
+      onClick: () => {
+        t[1](t[0] === "hex" ? "rgb" : "hex");
+      },
+      className: "flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded border border-[var(--gray-blue-2)] bg-white text-[var(--gray-blue-6)] outline-none",
+      children: /* @__PURE__ */ n(I, { size: 16, strokeWidth: 1.4, className: "block" })
+    }
+  ) });
+}, G = (t) => {
+  const { color: e } = x(), [a, l] = m("");
+  h(() => {
+    l(e.hex);
+  }, [e.rgb, e.hex]);
+  const s = () => {
+    let r = a;
+    r.charAt(0) !== "#" && (r = "#" + r), E(r) ? (t.onChangeComplete({
+      hex: r,
+      rgb: C(r) || e.rgb
+    }), l(r)) : l(e.hex);
+  };
+  return /* @__PURE__ */ d("label", { children: [
+    /* @__PURE__ */ n("span", { className: "mb-1.5 block text-sm font-normal leading-5 text-[var(--gray-blue-6)]", children: "HEX" }),
+    /* @__PURE__ */ d("div", { className: "relative", children: [
+      /* @__PURE__ */ n(
+        "input",
+        {
+          className: "box-border h-9 w-[136px] rounded border border-[var(--gray-blue-2)] bg-white py-2 pl-9 pr-2.5 text-sm outline-none",
+          defaultValue: e.hex,
+          value: a || void 0,
+          onChange: (r) => {
+            l(r.target.value);
+          },
+          onBlur: s,
+          onKeyDown: (r) => r.key === "Enter" && s()
+        }
+      ),
+      /* @__PURE__ */ n(
+        "span",
+        {
+          className: "absolute left-2.5 top-1/2 h-[18px] w-[18px] -translate-y-1/2 rounded",
+          title: e.hex,
+          style: { backgroundColor: w(e.rgb) }
+        }
+      )
+    ] })
+  ] });
+}, p = ({ label: t, alpha: e, field: a, value: l, onCommit: s }) => {
+  const r = B(!1), [c, o] = m(l);
+  h(() => {
+    o(l);
+  }, [l]);
+  const b = (u) => {
+    o(+u.target.value), r.current = !0;
+  }, i = () => {
+    let u;
+    e ? u = Math.min(1, Math.max(0, c)) : u = Math.min(255, Math.max(0, c)), u !== c && o(u), r.current && (s(a, u), r.current = !1);
+  };
+  return /* @__PURE__ */ d("label", { children: [
+    /* @__PURE__ */ n("span", { className: "mb-1.5 block text-sm font-normal leading-5 text-[var(--gray-blue-6)]", children: t }),
+    /* @__PURE__ */ n(
+      "input",
+      {
+        type: "number",
+        value: c,
+        min: 0,
+        step: e ? "0.01" : 1,
+        max: e ? 1 : 255,
+        onChange: b,
+        onBlur: i,
+        onKeyDown: (u) => u.key === "Enter" && i(),
+        className: "box-border h-9 w-[41px] border border-[var(--gray-blue-2)] px-0 py-2 text-center text-sm text-[var(--gray-blue-9)] outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+      }
+    )
+  ] });
+}, D = (t) => {
+  const { color: e, disableAlpha: a } = x(), [l, s] = m(e.rgb);
+  h(() => {
+    s(e.rgb);
+  }, [e.rgb, e.hex]);
+  const r = (c, o) => {
+    s((b) => {
+      const i = { ...b, [c]: o }, u = typeof i.a == "number" && i.a < 1 && i.a > 0 ? f(i) : g(i);
+      return t.onChangeComplete({ hex: u, rgb: i }), i;
+    });
+  };
+  return /* @__PURE__ */ n("div", { className: "flex items-end gap-2", children: /* @__PURE__ */ d("div", { className: "inline-flex overflow-hidden rounded [&_label:first-child_input]:rounded-l [&_label:last-child_input]:rounded-r [&_label:not(:last-child)_input]:border-r-0", children: [
+    /* @__PURE__ */ n(p, { field: "r", label: "R", value: l.r ?? 0, onCommit: r }),
+    /* @__PURE__ */ n(p, { field: "g", label: "G", value: l.g ?? 0, onCommit: r }),
+    /* @__PURE__ */ n(p, { field: "b", label: "B", value: l.b ?? 0, onCommit: r }),
+    !a && /* @__PURE__ */ n(p, { field: "a", label: "A", alpha: !0, value: l.a ?? 1, onCommit: r })
+  ] }) });
+};
 export {
-  C as SingleImageUpload
+  ie as ColorPicker
 };

package/dist/index42.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),x=require("./index43.cjs"),m=require("./index41.cjs"),a=require("./index5.cjs"),l=require("./index3.cjs");function h({disableAlpha:s,color:c,onColorChangeComplete:n,imageUrl:t,onImageChange:i,className:u}){const[o,b]=g.useState(t?"image":"color"),d=[{value:"color",label:a.coreTranslations.swatchPicker.color},{value:"image",label:a.coreTranslations.swatchPicker.image}];return e.jsxs("div",{className:l.cn("inline-block w-[328px]",u),children:[e.jsx("div",{className:"border-b border-gray-blue-1 bg-white px-2.5 py-3",children:e.jsx("div",{className:"flex rounded border border-gray-blue-1 bg-gray-blue-0 p-1",children:d.map(r=>e.jsx("button",{type:"button",onClick:()=>b(r.value),className:l.cn("flex-1 rounded py-1.5 text-sm font-medium transition-colors",o===r.value?"bg-white text-gray-blue-9 shadow-sm":"bg-transparent text-gray-blue-6"),children:r.label},r.value))})}),o==="color"?e.jsx(x.ColorPicker,{disableAlpha:s,color:c,onChangeComplete:n}):e.jsx(m.SingleImageUpload,{block:!0,imageUrl:t,onImageChange:i})]})}exports.SwatchPicker=h;
+"use strict";var j=Object.defineProperty;var A=(g,e,t)=>e in g?j(g,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):g[e]=t;var o=(g,e,t)=>A(g,typeof e!="symbol"?e+"":e,t);const f=require("react/jsx-runtime");;/* empty css           */const C=require("react"),V=require("mobx-react"),l=require("mobx"),E=require("lodash/debounce"),I=require("@ikas/ui"),L=require("./index101.cjs"),S=require("jquery");require("./index102.cjs");require("./index103.cjs");require("./index104.cjs");const R=require("./index105.cjs"),P=require("./index106.cjs"),w=require("./index107.cjs"),x=require("./index5.cjs");var k=Object.defineProperty,D=Object.getOwnPropertyDescriptor,a=(g,e,t,i)=>{for(var n=i>1?void 0:i?D(e,t):e,m=g.length-1,h;m>=0;m--)(h=g[m])&&(n=(i?h(e,t,n):h(n))||n);return i&&n&&k(e,t,n),n};window.jQuery=S;window.$=S;let s=class extends C.Component{constructor(e){super(e);o(this,"isImageModalVisible",!1);o(this,"isVideoModalVisible",!1);o(this,"isLinkModalVisible",!1);o(this,"isTyping",!1);o(this,"summernoteObj");o(this,"modalRef");o(this,"isFirstMount",!0);o(this,"isPasted",!1);o(this,"insertedImageSrc",null);o(this,"isCopyModalVisible",!1);o(this,"copiedTextForModal","");o(this,"isInitialized",!1);o(this,"notRemovableStyleKeys",["background-color","color","font-weight","font-size","text-decoration-line",'font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"']);o(this,"searchDebouncer",E(e=>{this.onChange(e)},1e3));o(this,"addTemplateVariable",e=>{this.props.value.length&&(this.summernoteObj.summernote("editor.saveRange"),this.summernoteObj.summernote("editor.restoreRange")),this.summernoteObj.summernote("editor.focus");const t=document.createElement("span");t.innerHTML=e.value,t.classList.add("template-wrapper"),t.setAttribute("contenteditable","false"),t.setAttribute("data-label",e.label),t.setAttribute("style","display: inline-block;"),this.summernoteObj.summernote("editor.insertNode",t),this.summernoteObj.summernote("editor.pasteHTML","&zwnj;")});o(this,"onImageModalOpen",()=>{this.isImageModalVisible=!0});o(this,"onImageModalClose",()=>{this.isImageModalVisible=!1});o(this,"onVideoModalOpen",()=>{this.isVideoModalVisible=!0});o(this,"onVideoModalClose",()=>{this.isVideoModalVisible=!1});o(this,"onLinkModalOpen",()=>{this.isLinkModalVisible=!0});o(this,"onLinkModalClose",()=>{this.isLinkModalVisible=!1});this.modalRef=C.createRef(),l.makeObservable(this)}async componentDidMount(){window.addEventListener("paste",this.handlePaste),await Promise.resolve().then(()=>require("./index99.cjs")).then(e=>e.bootstrap_bundle),this.isInitialized=!0}async onInit(e){this.summernoteObj=e;try{const t=document.createElement("div");t.innerHTML=this.props.value,this.summernoteObj.noteEditable[0].innerHTML=t.innerHTML,(this.props.disabled||this.props.previewMode)&&this.summernoteObj.disable()}catch(t){console.log("rich text error",t)}this.props.onInitialize&&setTimeout(()=>{var t,i;(i=(t=this.props)==null?void 0:t.onInitialize)==null||i.call(t)},0)}componentWillUnmount(){window.removeEventListener("paste",this.handlePaste)}handlePaste(e){this.isPasted=!0}onChange(e){var i,n,m,h;if(this.props.disabled||this.props.previewMode)return;if(this.summernoteObj.summernote("isEmpty")){this.props.onChange(""),this.isTyping=!1,(n=(i=this.props).onTypingStatusChange)==null||n.call(i,!1);return}try{const y='<table class="table table-bordered">';if(e.includes(y)){const r=e.replaceAll(y,'<table style="display: table; border-collapse: collapse; border-spacing: 2px; width: 100%; margin-bottom: 1rem; color: #212529; border: 1px solid #dee2e6" >').replaceAll("<td>",'<td style="border: 1px solid #dee2e6; padding: 0.75rem; vertical-align: top;">');this.props.onChange(r)}else{let u=e;if(u.includes("<iframe")||u.includes("<img")){const d=document.createElement("div");d.innerHTML=e;const c=d.getElementsByTagName("iframe");for(let p=0;p<c.length;p++){const r=c[p];r.className.includes("note-video-clip")&&(r.style.maxWidth="100% !important",r.width="100%")}if(this.insertedImageSrc){const p=d.getElementsByTagName("img");if(p&&p.length)for(let r=0;r<p.length;r++){const b=p[r];b.src===this.insertedImageSrc&&(b.style.maxWidth="100% !important",this.insertedImageSrc=null)}}u=d.innerHTML}if(this.isPasted){const d=document.createElement("div");d.innerHTML=u;const c=d.getElementsByTagName("*");let p=!1;for(let r=0;r<c.length;r++){const b=c[r].getAttribute("style"),M=b==null?void 0:b.split(";").filter(v=>!!v);if(b&&(M!=null&&M.length)&&M.find(v=>!this.notRemovableStyleKeys.some(T=>v.includes(T)))){p=!0;break}}p?(this.copiedTextForModal=e,this.isCopyModalVisible=!0):this.props.onChange(u)}else{const d=document.createElement("div");d.innerHTML=u;const c=d.getElementsByTagName("*");for(let p=0;p<c.length;p++){const r=c[p].getAttribute("style");if(r&&!this.notRemovableStyleKeys.some(b=>r.includes(b)))c[p].removeAttribute("style");else if(r&&this.notRemovableStyleKeys.some(b=>r.includes(b))){const v=r.split(";").filter(T=>!!T).filter(T=>this.notRemovableStyleKeys.some(O=>T.includes(O))).join(";");c[p].setAttribute("style",v)}}this.props.onChange(u)}}}catch(y){console.log("rich text onchange error",y)}this.isTyping=!1,(h=(m=this.props).onTypingStatusChange)==null||h.call(m,this.isTyping)}onCopyModalClose(){const e=document.createElement("div");e.innerHTML=this.copiedTextForModal;const t=e.getElementsByTagName("*");for(let i=0;i<t.length;i++){const n=t[i].getAttribute("style");if(n&&!this.notRemovableStyleKeys.some(m=>n.includes(m)))t[i].removeAttribute("style");else if(n&&this.notRemovableStyleKeys.some(m=>n.includes(m))){const y=n.split(";").filter(u=>this.notRemovableStyleKeys.some(d=>u.includes(d))).join(";");t[i].setAttribute("style",y)}}this.copiedTextForModal=e.innerHTML,this.props.onChange(this.copiedTextForModal,!0),this.isPasted=!1,this.copiedTextForModal="",this.isCopyModalVisible=!1}onCopyModalOk(){this.props.onChange(this.copiedTextForModal,!0),this.isPasted=!1,this.copiedTextForModal="",this.isCopyModalVisible=!1}get lang(){const{locale:e}=this.props;switch(e){case"tr":return"tr-TR";case"en":return"en-EN";case"de":return"de-DE";case"fr":return"fr-FR"}return"tr-TR"}get aiPopover(){var e;return(e=this.props.aiPopoverProps)==null?void 0:e.popover}get toolbarOptions(){var t;const e=[];return(t=this.props.aiPopoverProps)!=null&&t.id&&e.push(["aiButton",["aiButton"]]),e.push(["style",["style"]]),e.push(["font",["bold","italic","underline","clear"]]),e.push(["color",["color","#ffffff"]]),e.push(["para",["ul","ol","paragraph"]]),e.push(["table",["table"]]),e.push(["insert",["link","picture","video"]]),e.push(["view",["codeview","fullscreen"]]),e}render(){var i,n;const{toolbar:e,saveImage:t}=this.props;return this.isInitialized?f.jsxs(f.Fragment,{children:[f.jsx(L.StyledEditor,{className:"local-bootstrap",value:this.props.value,$toolbarOffsetTop:this.props.toolbarOffsetTop||"0px",$isResizeDisabled:!!this.props.disableResize,$isPreviewMode:!!this.props.previewMode,options:{codemirror:{mode:"text/html",htmlMode:!0,lineNumbers:!0},codeviewFilter:!1,openLinkModal:this.onLinkModalOpen,openImageModal:this.onImageModalOpen,openVideoModal:this.onVideoModalOpen,lang:this.lang,height:350,dialogsInBody:!1,disableResizeEditor:!!this.props.disableResize,toolbar:e||this.toolbarOptions,insertTableMaxSize:{row:((i=this.props.insertTableMaxSize)==null?void 0:i.row)||10,col:((n=this.props.insertTableMaxSize)==null?void 0:n.col)||10},buttons:{aiButton:m=>{var u,d;const h=$.summernote.ui;return $(h.button({contents:`<span style="display: flex; align-items: center; justify-content: center; gap: 6px; color: #000;font-size: 14px;font-style: normal;font-weight: 400;line-height: 20px;" id="${(u=this.props.aiPopoverProps)==null?void 0:u.id}" class="ai-toolbar-btn">${((d=this.props.aiPopoverProps)==null?void 0:d.buttonText)||x.coreTranslations.richText.aiButtonText}</span>`,click:()=>{var c;this.summernoteObj.summernote("editor.saveRange"),(c=this.props.aiPopoverProps)==null||c.onAiButtonClick(this.summernoteObj)}}).render())}},imageAttributesIcon:'<i class="note-icon-pencil"/>',imageAttributesRemoveEmpty:!1,imageAttributesDisableUpload:!1,imageAttributesDisableLink:!1,imageAttributesDisableLinkUrl:!1,imageAttributesDisableLinkTarget:!0,imageAttributesDisableLinkClass:!0,imageAttributesDisableLinkStyle:!0,imageAttributesDisableLinkRel:!0,imageAttributesDisableLinkRole:!0,popover:{image:[["image",["resizeFull","resizeHalf","resizeQuarter","resizeNone"]],["float",["floatLeft","floatRight","floatNone"]],["remove",["removeMedia"]],["custom",["imageAttributes"]]]},disableDragAndDrop:!0},onChange:m=>{var h,y;this.isTyping=!0,(y=(h=this.props).onTypingStatusChange)==null||y.call(h,this.isTyping),this.searchDebouncer(m)},onInit:this.onInit}),this.aiPopover,f.jsx(I.Modal,{title:x.coreTranslations.richText.pasteWarningModalTitle,open:this.isCopyModalVisible,cancelText:x.coreTranslations.common.field.no,okText:x.coreTranslations.common.field.yes,onCancel:this.onCopyModalClose,onOk:this.onCopyModalOk,children:x.coreTranslations.richText.pasteWarningText}),t&&f.jsx(R,{open:this.isImageModalVisible,onImageUpload:t,onClose:this.onImageModalClose,summernoteObj:this.summernoteObj}),f.jsx(P,{open:this.isVideoModalVisible,onClose:this.onVideoModalClose,summernoteObj:this.summernoteObj}),f.jsx(w,{open:this.isLinkModalVisible,onClose:this.onLinkModalClose,summernoteObj:this.summernoteObj})]}):null}};a([l.observable],s.prototype,"isImageModalVisible",2);a([l.observable],s.prototype,"isVideoModalVisible",2);a([l.observable],s.prototype,"isLinkModalVisible",2);a([l.observable],s.prototype,"isTyping",2);a([l.observable],s.prototype,"isFirstMount",2);a([l.observable],s.prototype,"isPasted",2);a([l.observable],s.prototype,"insertedImageSrc",2);a([l.observable],s.prototype,"isCopyModalVisible",2);a([l.observable],s.prototype,"copiedTextForModal",2);a([l.observable],s.prototype,"isInitialized",2);a([l.action.bound],s.prototype,"onInit",1);a([l.action.bound],s.prototype,"handlePaste",1);a([l.action.bound],s.prototype,"onChange",1);a([l.action.bound],s.prototype,"onCopyModalClose",1);a([l.action.bound],s.prototype,"onCopyModalOk",1);a([l.computed],s.prototype,"lang",1);a([l.computed],s.prototype,"aiPopover",1);a([l.computed],s.prototype,"toolbarOptions",1);s=a([V.observer],s);const z=s;module.exports=z;