@ikas/core 1.0.6 → 1.0.8

package/dist/index42.js

@@ -1,398 +1,54 @@
-var I = Object.defineProperty;
-var L = (f, e, t) => e in f ? I(f, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : f[e] = t;
-var o = (f, e, t) => L(f, typeof e != "symbol" ? e + "" : e, t);
-import { jsxs as E, Fragment as j, jsx as T } from "react/jsx-runtime";
-/* empty css         */
-import O from "react";
-import { observer as R } from "mobx-react";
-import { makeObservable as P, action as x, observable as y, computed as S } from "mobx";
-import w from "lodash/debounce";
-import { Modal as k } from "@ikas/ui";
-import { StyledEditor as D } from "./index101.js";
-import V from "jquery";
-import "./index102.js";
-import "./index103.js";
-import "./index104.js";
-import z from "./index105.js";
-import F from "./index106.js";
-import N from "./index107.js";
-import { coreTranslations as C } from "./index5.js";
-var H = Object.defineProperty, B = Object.getOwnPropertyDescriptor, r = (f, e, t, s) => {
-  for (var l = s > 1 ? void 0 : s ? B(e, t) : e, d = f.length - 1, c; d >= 0; d--)
-    (c = f[d]) && (l = (s ? c(e, t, l) : c(l)) || l);
-  return s && l && H(e, t, l), l;
-};
-window.jQuery = V;
-window.$ = V;
-let i = class extends O.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", w((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", "‌");
-    });
-    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 = O.createRef(), P(this);
-  }
-  async componentDidMount() {
-    window.addEventListener("paste", this.handlePaste), await import("./index99.js").then((e) => e.b), 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, s;
-      (s = (t = this.props) == null ? void 0 : t.onInitialize) == null || s.call(t);
-    }, 0);
-  }
-  componentWillUnmount() {
-    window.removeEventListener("paste", this.handlePaste);
-  }
-  handlePaste(e) {
-    this.isPasted = !0;
-  }
-  onChange(e) {
-    var s, l, d, c;
-    if (this.props.disabled || this.props.previewMode)
-      return;
-    if (this.summernoteObj.summernote("isEmpty")) {
-      this.props.onChange(""), this.isTyping = !1, (l = (s = this.props).onTypingStatusChange) == null || l.call(s, !1);
-      return;
-    }
-    try {
-      const b = '<table class="table table-bordered">';
-      if (e.includes(b)) {
-        const n = e.replaceAll(b, '<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(n);
-      } else {
-        let h = e;
-        if (h.includes("<iframe") || h.includes("<img")) {
-          const p = document.createElement("div");
-          p.innerHTML = e;
-          const m = p.getElementsByTagName("iframe");
-          for (let a = 0; a < m.length; a++) {
-            const n = m[a];
-            n.className.includes("note-video-clip") && (n.style.maxWidth = "100% !important", n.width = "100%");
-          }
-          if (this.insertedImageSrc) {
-            const a = p.getElementsByTagName("img");
-            if (a && a.length)
-              for (let n = 0; n < a.length; n++) {
-                const u = a[n];
-                u.src === this.insertedImageSrc && (u.style.maxWidth = "100% !important", this.insertedImageSrc = null);
-              }
-          }
-          h = p.innerHTML;
-        }
-        if (this.isPasted) {
-          const p = document.createElement("div");
-          p.innerHTML = h;
-          const m = p.getElementsByTagName("*");
-          let a = !1;
-          for (let n = 0; n < m.length; n++) {
-            const u = m[n].getAttribute("style"), g = u == null ? void 0 : u.split(";").filter((M) => !!M);
-            if (u && (g != null && g.length) && g.find(
-              (M) => !this.notRemovableStyleKeys.some(
-                (v) => M.includes(v)
-              )
-            )) {
-              a = !0;
-              break;
-            }
-          }
-          a ? (this.copiedTextForModal = e, this.isCopyModalVisible = !0) : this.props.onChange(h);
-        } else {
-          const p = document.createElement("div");
-          p.innerHTML = h;
-          const m = p.getElementsByTagName("*");
-          for (let a = 0; a < m.length; a++) {
-            const n = m[a].getAttribute("style");
-            if (n && !this.notRemovableStyleKeys.some((u) => n.includes(u)))
-              m[a].removeAttribute("style");
-            else if (n && this.notRemovableStyleKeys.some((u) => n.includes(u))) {
-              const M = n.split(";").filter((v) => !!v).filter(
-                (v) => this.notRemovableStyleKeys.some((A) => v.includes(A))
-              ).join(";");
-              m[a].setAttribute("style", M);
-            }
-          }
-          this.props.onChange(h);
-        }
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { useState as p } from "react";
+import { ColorPicker as g } from "./index43.js";
+import { SingleImageUpload as h } from "./index41.js";
+import { coreTranslations as a } from "./index5.js";
+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",
+      {
+        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: r.label
+      },
+      r.value
+    )) }) }),
+    l === "color" ? /* @__PURE__ */ e(
+      g,
+      {
+        disableAlpha: i,
+        color: c,
+        onChangeComplete: n
       }
-    } catch (b) {
-      console.log("rich text onchange error", b);
-    }
-    this.isTyping = !1, (c = (d = this.props).onTypingStatusChange) == null || c.call(d, this.isTyping);
-  }
-  onCopyModalClose() {
-    const e = document.createElement("div");
-    e.innerHTML = this.copiedTextForModal;
-    const t = e.getElementsByTagName("*");
-    for (let s = 0; s < t.length; s++) {
-      const l = t[s].getAttribute("style");
-      if (l && !this.notRemovableStyleKeys.some((d) => l.includes(d)))
-        t[s].removeAttribute("style");
-      else if (l && this.notRemovableStyleKeys.some((d) => l.includes(d))) {
-        const b = l.split(";").filter(
-          (h) => this.notRemovableStyleKeys.some((p) => h.includes(p))
-        ).join(";");
-        t[s].setAttribute("style", b);
+    ) : /* @__PURE__ */ e(
+      h,
+      {
+        block: !0,
+        imageUrl: o,
+        onImageChange: s
       }
-    }
-    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 s, l;
-    const { toolbar: e, saveImage: t } = this.props;
-    return this.isInitialized ? /* @__PURE__ */ E(j, { children: [
-      /* @__PURE__ */ T(
-        D,
-        {
-          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: ((s = this.props.insertTableMaxSize) == null ? void 0 : s.row) || 10,
-              col: ((l = this.props.insertTableMaxSize) == null ? void 0 : l.col) || 10
-            },
-            buttons: {
-              aiButton: (d) => {
-                var h, p;
-                const c = $.summernote.ui;
-                return $(
-                  c.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="${(h = this.props.aiPopoverProps) == null ? void 0 : h.id}" class="ai-toolbar-btn">${((p = this.props.aiPopoverProps) == null ? void 0 : p.buttonText) || C.richText.aiButtonText}</span>`,
-                    click: () => {
-                      var m;
-                      this.summernoteObj.summernote("editor.saveRange"), (m = this.props.aiPopoverProps) == null || m.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: (d) => {
-            var c, b;
-            this.isTyping = !0, (b = (c = this.props).onTypingStatusChange) == null || b.call(c, this.isTyping), this.searchDebouncer(d);
-          },
-          onInit: this.onInit
-        }
-      ),
-      this.aiPopover,
-      /* @__PURE__ */ T(
-        k,
-        {
-          title: C.richText.pasteWarningModalTitle,
-          open: this.isCopyModalVisible,
-          cancelText: C.common.field.no,
-          okText: C.common.field.yes,
-          onCancel: this.onCopyModalClose,
-          onOk: this.onCopyModalOk,
-          children: C.richText.pasteWarningText
-        }
-      ),
-      t && /* @__PURE__ */ T(
-        z,
-        {
-          open: this.isImageModalVisible,
-          onImageUpload: t,
-          onClose: this.onImageModalClose,
-          summernoteObj: this.summernoteObj
-        }
-      ),
-      /* @__PURE__ */ T(
-        F,
-        {
-          open: this.isVideoModalVisible,
-          onClose: this.onVideoModalClose,
-          summernoteObj: this.summernoteObj
-        }
-      ),
-      /* @__PURE__ */ T(
-        N,
-        {
-          open: this.isLinkModalVisible,
-          onClose: this.onLinkModalClose,
-          summernoteObj: this.summernoteObj
-        }
-      )
-    ] }) : null;
-  }
-};
-r([
-  y
-], i.prototype, "isImageModalVisible", 2);
-r([
-  y
-], i.prototype, "isVideoModalVisible", 2);
-r([
-  y
-], i.prototype, "isLinkModalVisible", 2);
-r([
-  y
-], i.prototype, "isTyping", 2);
-r([
-  y
-], i.prototype, "isFirstMount", 2);
-r([
-  y
-], i.prototype, "isPasted", 2);
-r([
-  y
-], i.prototype, "insertedImageSrc", 2);
-r([
-  y
-], i.prototype, "isCopyModalVisible", 2);
-r([
-  y
-], i.prototype, "copiedTextForModal", 2);
-r([
-  y
-], i.prototype, "isInitialized", 2);
-r([
-  x.bound
-], i.prototype, "onInit", 1);
-r([
-  x.bound
-], i.prototype, "handlePaste", 1);
-r([
-  x.bound
-], i.prototype, "onChange", 1);
-r([
-  x.bound
-], i.prototype, "onCopyModalClose", 1);
-r([
-  x.bound
-], i.prototype, "onCopyModalOk", 1);
-r([
-  S
-], i.prototype, "lang", 1);
-r([
-  S
-], i.prototype, "aiPopover", 1);
-r([
-  S
-], i.prototype, "toolbarOptions", 1);
-i = r([
-  R
-], i);
-const ne = i;
+    )
+  ] });
+}
 export {
-  ne as default
+  C as SwatchPicker
 };

package/dist/index43.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),L=require("mobx-react-lite"),c=require("@ikas/ui"),u=require("./index3.cjs"),T=require("./index108.cjs"),U=require("./index109.cjs"),p=require("./index110.cjs"),B=require("./index111.cjs"),K=require("./index112.cjs"),O=require("./index113.cjs"),y=L.observer(function(o){var f,M,v;const{sidebarViewModel:n,onNavigate:i,clearExpandedMenu:r,extraTopContent:g,expandedMenuTopContent:x,extraFooterContent:h,logoRightSideContent:I,logo:N,collapsedLogo:k,onLogoSectionClick:S,className:j,style:m,theme:s="dark",verticalOffset:d,expandedMenuItem:C}=o,e=T.useNavigation({sidebarViewModel:n,onNavigate:i}),E=t=>{n.setSidebarCollapsed(t)},b=r??e.clearExpandedMenu,w=!!!r&&e.isSelectedExpandedMenuVisible;return a.jsx(c.SidebarProvider,{open:!n.sidebarCollapsed,onOpenChange:t=>n.setSidebarCollapsed(!t),children:a.jsxs(c.Sidebar,{collapsible:"icon",side:"left",className:u.cn(s==="dark"&&"dark border-r-0 shadow-[0px_2px_8px_rgba(0,0,0,0.15)]",j),style:{top:d,height:d?`calc(100dvh - ${d}px)`:"100dvh",...m},children:[a.jsxs("div",{className:u.cn("flex h-full min-h-0 w-full flex-col transition-transform duration-300",w?"-translate-x-full":"translate-x-0"),children:[a.jsx(U.NavigationHeader,{theme:s,isExpandedMenu:n.isExpandedMenu,menuItems:n.menuItems,logoRightSideContent:I,logo:N,collapsedLogo:k,onLogoSectionClick:S,clearExpandedMenu:b,expandedMenuItem:C,getSalesChannelIconBackgroundColor:e.getSalesChannelIconBackgroundColor,onCollapse:E,salesChannelMenuUUID:(f=n.salesChannelMenu)==null?void 0:f.uuid,setSalesChannelOpenKey:e.setSalesChannelOpenKey}),n.isExpandedMenu&&x&&a.jsx("div",{className:"bg-sidebar text-sidebar-foreground",children:x}),a.jsxs(c.SidebarContent,{className:s==="light"?"sidebar-light-scrollbar":"sidebar-scrollbar",children:[g&&a.jsx("div",{className:"text-sidebar-foreground",children:g}),a.jsx(c.SidebarGroup,{className:n.isExpandedMenu?"mt-4":void 0,children:a.jsx(p.NavigationMenu,{items:n.isExpandedMenu?((M=n.menuItems[0])==null?void 0:M.childItems)??[]:n.menuItems.filter(t=>!t.hideInSidebarUntilMenuExpanded),selectedUUIDList:e.selectedUUIDList,openKeys:e.openKeys,onOpenKeysChange:e.onOpenKeysChange,onItemClick:e.onItemClick,onLeafClick:e.onLeafClick,isExpandedMenu:n.isExpandedMenu,showTypographyText:e.showTypographyText,getSalesChannelIconBackgroundColor:e.getSalesChannelIconBackgroundColor,theme:s})}),n.salesChannelMenu&&a.jsx(K.SalesChannelMenu,{salesChannelMenu:n.salesChannelMenu,selectedUUIDList:[],openKeys:e.salesChannelOpenKey,onOpenKeysChange:e.setSalesChannelOpenKey,onItemClick:e.onItemClick,onLeafClick:e.onLeafClick,showTypographyText:e.showTypographyText,getSalesChannelIconBackgroundColor:e.getSalesChannelIconBackgroundColor,theme:s})]}),!!((v=n.bottomMenuItems)!=null&&v.length)&&a.jsx("div",{className:"flex h-20 shrink-0 flex-col justify-center bg-sidebar pl-4 group-data-[collapsible=icon]:pl-4.5",children:a.jsx(p.NavigationMenu,{items:n.bottomMenuItems,selectedUUIDList:e.selectedUUIDList,openKeys:e.openKeys,onOpenKeysChange:e.onOpenKeysChange,onItemClick:e.onItemClick,onLeafClick:e.onLeafClick,showTypographyText:e.showTypographyText,getSalesChannelIconBackgroundColor:e.getSalesChannelIconBackgroundColor,theme:s})}),h&&a.jsx("div",{className:"text-sidebar-foreground bg-sidebar",children:h}),a.jsx(B.NavigationFooter,{footerMenu:n.footerMenu,footerTopMenu:n.footerTopMenu,showAvatarBorder:e.showAvatarBorder,setShowAvatarBorder:e.setShowAvatarBorder,selectedUUIDList:e.selectedUUIDList,onItemClick:e.onItemClick,onLeafClick:e.onLeafClick,theme:s,isExpandedFooterVisible:e.isExpandedFooterVisible,clearExpandedMenu:b})]}),n.sidebarModal,a.jsx(O.ExpandedOverlay,{isVisible:e.isSelectedExpandedMenuVisible,sidebarModel:e.salesChannelsSidebarModel,sidebarViewModel:n,onNavigate:i,clearExpandedMenu:e.clearExpandedMenu,theme:s,style:m,verticalOffset:d,expandedMenuItem:C,selectedExpandedMenu:e.selectedExpandedMenu,menuItems:n.menuItems,expandedMenuTopContent:x,NavigationComponent:y})]})})});function q({title:l,description:o,isNew:n,onClick:i,className:r}){return a.jsxs("button",{onClick:i,className:u.cn("flex h-full w-full select-none flex-col rounded-md bg-gray-blue-1 px-4 py-3 text-left transition-colors duration-300 hover:bg-purple-1",n&&"border border-purple",r),children:[a.jsxs("div",{className:"flex w-full items-center justify-between",children:[a.jsxs("div",{className:"flex min-w-0 items-center",children:[a.jsx("span",{className:"mr-2 h-1.5 w-1.5 shrink-0 rounded-full bg-purple"}),a.jsx("span",{className:"truncate text-base font-medium text-gray-blue-9",children:l})]}),n&&a.jsx(p.NewFeatureTag,{})]}),o&&a.jsx("span",{className:"mt-1 pl-3.5 text-xs leading-5 text-gray-blue-5",children:o})]})}function D({title:l,children:o,className:n}){return a.jsxs("div",{className:u.cn("mx-auto mt-6 flex w-full max-w-[1000px] flex-col gap-3",n),children:[l&&a.jsx("h3",{className:"text-sm font-medium text-gray-blue-9",children:l}),a.jsx("div",{className:"grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3",children:o})]})}exports.Navigation=y;exports.NavigationBox=q;exports.NavigationSection=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react");require("./index83.cjs");require("./index84.cjs");require("./index85.cjs");const v=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");require("./index95.cjs");require("./index96.cjs");require("./index97.cjs");const f=require("@ikas/ui"),d=require("./index6.cjs"),m=require("./index5.cjs");;/* empty css          */const y=require("./index99.cjs"),k=require("./index100.cjs"),T=require("./index101.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;