@armco/imageeditor 0.0.8 → 0.0.9

package/cjs/Control.js

@@ -1 +1 @@
-"use strict";const s=require("react/jsx-runtime"),r=require("@armco/types"),n=require("@armco/shared-components/Tooltip"),c=require("@armco/icon"),i=({icon:o,handler:e,tooltip:t})=>s.jsxs(n,{children:[s.jsx("span",{className:"mx-3 p-1 cursor-pointer",slot:r.ArPopoverSlots.ANCHOR,children:s.jsx(c,{icon:o,attributes:{colors:{fillColor:"#ffffff99"},classes:"cursor-pointer",size:"2rem"},events:{onClick:e}})}),s.jsx("span",{slot:r.ArPopoverSlots.POPOVER,children:t})]});module.exports=i;
+"use strict";const s=require("react/jsx-runtime"),r=require("@armco/shared-components/enums"),n=require("@armco/shared-components/Tooltip"),c=require("@armco/icon"),i=({icon:o,handler:e,tooltip:t})=>s.jsxs(n,{children:[s.jsx("span",{className:"mx-3 p-1 cursor-pointer",slot:r.ArPopoverSlots.ANCHOR,children:s.jsx(c,{icon:o,attributes:{colors:{fillColor:"#ffffff99"},classes:"cursor-pointer",size:"2rem"},events:{onClick:e}})}),s.jsx("span",{slot:r.ArPopoverSlots.POPOVER,children:t})]});module.exports=i;

package/cjs/ImageEditor.js

@@ -1,2 +1,2 @@
 (function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode(".ar-ImageEditor .ar-ImageEditor__image-container{max-width:60vw;max-height:75vh}.ar-ImageEditor .ar-ImageEditor__editor-controls{transition:background-color .5s,box-shadow .5s ease-in-out;background-color:var(--ar-bg-tertiary-faded-2);border-radius:2rem}.ar-ImageEditor .ar-ImageEditor__editor-controls:hover{background-color:var(--ar-bg-tertiary-faded)}.ar-ImageEditor .ar-ImageEditor__editor-controls .ar-ImageEditor__download-button{width:2rem;height:2rem;display:inline-block}.ar-ImageEditor .ar-ImageEditor__editor-controls .ar-ImageEditor__download-button:hover{background-color:var(--ar-bg-tertiary-faded-2)}.ar-ImageEditor .ar-ImageEditor__editor-controls .ar-ImageEditor__commit-button{width:2rem;height:2rem;display:inline-block}.ar-ImageEditor .ar-ImageEditor__editor-controls .ar-ImageEditor__commit-button.is-dirty:hover{background-color:var(--ar-bg-tertiary-faded-2)}.ar-ImageEditor .ar-ImageEditor__controls{bottom:0}.ar-ImageEditor .ar-ImageEditor__controls .ar-ImageEditor__controls-container{transition:background-color .5s,box-shadow .5s,max-height .5s ease-in-out;background-color:var(--ar-bg-tertiary-faded-2);max-height:3.2rem;overflow:hidden}.ar-ImageEditor .ar-ImageEditor__controls .ar-ImageEditor__controls-container:hover{background-color:var(--ar-bg-tertiary-faded)}.ar-ImageEditor .ar-ImageEditor__controls .ar-ImageEditor__controls-container.expanded{max-height:20rem}")),document.head.appendChild(r)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
-"use strict";const t=require("react/jsx-runtime"),n=require("react"),s=require("@armco/types"),y=require("@armco/icon"),q=require("@armco/shared-components/Image"),f=require("@armco/shared-components/Tooltip"),P=require("@armco/shared-components/Slider"),z=require("./Control.js"),F=require("./helper.js");let c={rotateBy:0,brightness:1,contrast:1,saturate:1,grayscale:0,blur:0,sepia:0,opacity:1,scale:1};const j=d=>(d%360+360)%360,C=22.5,H=d=>{const{demo:O,image:S,imageState:E,onChange:h,onCommit:x,viewOnly:m}=d;c={...c,...E};const v=n.useRef(null),[o,p]=n.useState({...c}),[r,I]=n.useState(),[l,R]=n.useState(),a=(e,i)=>{const u={...o,[e]:i},{rotateBy:g,...w}=u,{rotateBy:b,...B}=c;g!==void 0&&b!==void 0&&R(JSON.stringify(w)!==JSON.stringify(B)||j(g)!==j(b)),p(u),h&&h(u)},N=[{icon:"tb.TbFlipHorizontal",handler:()=>a("flipHorizontal",!o.flipHorizontal),tooltip:"Flip Horizontal"},{icon:"tb.TbFlipVertical",handler:()=>a("flipVertical",!o.flipVertical),tooltip:"Flip Vertical"},{icon:"ai.AiOutlineRotateLeft",handler:()=>a("rotateBy",o.rotateBy-C),tooltip:"Rotate Left"},{icon:"ai.AiOutlineRotateRight",handler:()=>a("rotateBy",o.rotateBy+C),tooltip:"Rotate Right"},{icon:"fi.FiZoomIn",handler:()=>a("scale",(o.scale+1)%10),tooltip:"Zoom In"},{icon:"fi.FiZoomOut",handler:()=>a("scale",(o.scale-1<0?0:o.scale-1)%10),tooltip:"Zoom Out"},{icon:r?"md.MdOutlineExpandLess":"md.MdOutlineExpandMore",handler:()=>I(!r),tooltip:r?"Hide Advanced Controls":"Show Advanced Controls"}],_=[{icon:"fi.FiZoomIn",handler:()=>p({...o,scale:(o.scale+1)%10}),tooltip:"Zoom In"},{icon:"fi.FiZoomOut",handler:()=>p({...o,scale:(o.scale-1<0?0:o.scale-1)%10}),tooltip:"Zoom Out"}],A=[[{label:"Brightness",min:0,max:5,precision:.1,handler:e=>a("brightness",+e.target.value)},{label:"Contrast",min:0,max:5,precision:.1,handler:e=>a("contrast",+e.target.value)}],[{label:"Saturation",min:0,max:10,precision:.2,handler:e=>a("saturate",+e.target.value)},{label:"Grayscale",min:0,max:1,precision:.05,handler:e=>a("grayscale",+e.target.value)}],[{label:"Blur",min:0,max:20,handler:e=>a("blur",+e.target.value)},{label:"Sepia",min:0,max:1,precision:.05,handler:e=>a("sepia",+e.target.value)}],[{label:"Opacity",min:0,max:1,precision:.05,handler:e=>a("opacity",+e.target.value)},{label:"Scale",min:0,max:10,precision:.2,handler:e=>a("scale",+e.target.value)}]];return t.jsxs("div",{className:"ar-ImageEditor d-flex flex-column h-100 overflow-auto flex-center position-relative",children:[!m&&t.jsxs("div",{className:"ar-ImageEditor__editor-controls position-absolute p-1 top-0 end-0 hover-shadow-dark",children:[t.jsxs(f,{children:[t.jsx("span",{className:"ar-ImageEditor__download-button cursor-pointer border-radius-50 p-1 me-2",slot:s.ArPopoverSlots.ANCHOR,children:t.jsx(y,{icon:"md/MdDownload",attributes:{colors:{fillColor:"#232323cc"},size:"1.5rem"},events:{onClick:()=>F.downloadEditedImage(v.current)}})}),t.jsx("span",{slot:s.ArPopoverSlots.POPOVER,children:"Download"})]}),t.jsxs(f,{children:[t.jsx("span",{className:`ar-ImageEditor__commit-button border-radius-50 p-1${l?" cursor-pointer is-dirty":""}`,slot:s.ArPopoverSlots.ANCHOR,children:t.jsx(y,{icon:"io5.IoCheckmarkCircleSharp",slot:s.ArPopoverSlots.ANCHOR,attributes:{colors:{fillColor:l?"#008000":"#00800077"},size:"1.5rem"},events:{onClick:()=>l&&x&&x(o)}})}),t.jsx("span",{slot:s.ArPopoverSlots.POPOVER,children:l?"Save":"Edit image to save"})]})]}),t.jsx("div",{className:"ar-ImageEditor__image-container mb-4",children:t.jsx(q,{ref:v,image:S,demo:O,fill:!0,preserveAspectRatio:!0,...o})}),t.jsx("div",{className:"ar-ImageEditor__controls py-3 flex-center z-1 position-absolute",children:t.jsxs("div",{className:`ar-ImageEditor__controls-container border-radius prominent hover-shadow-dark${r?" expanded":""}`,children:[t.jsx("div",{className:`ar-ImageEditor__basic-controls px-3 py-2 ${r?"border-bottom":""}`,children:(m?_:N).map(e=>t.jsx(z,{...e}))}),!m&&t.jsx("div",{className:"ar-ImageEditor__advanced-controls mt-2 px-3",children:A.map(e=>t.jsx("div",{className:"row pb-3 border-bottom",children:e.map(i=>t.jsx("div",{className:"col-6",children:t.jsx(P,{label:i.label,min:i.min,max:i.max,onChange:i.handler,precision:i.precision})}))}))})]})})]})};module.exports=H;
+"use strict";const t=require("react/jsx-runtime"),l=require("react"),f=require("@armco/icon"),s=require("@armco/shared-components"),w=require("@armco/shared-components/Image"),y=require("@armco/shared-components/Tooltip"),B=require("@armco/shared-components/Slider"),P=require("./Control.js"),z=require("./helper.js");require("@armco/shared-components/enums");require("@armco/utils/domHelper");let c={rotateBy:0,brightness:1,contrast:1,saturate:1,grayscale:0,blur:0,sepia:0,opacity:1,scale:1};const C=d=>(d%360+360)%360,j=22.5,F=d=>{const{image:O,imageState:E,onChange:h,onCommit:x,viewOnly:m}=d;c={...c,...E};const v=l.useRef(null),[o,p]=l.useState({...c}),[i,S]=l.useState(),[n,I]=l.useState(),a=(e,r)=>{const u={...o,[e]:r},{rotateBy:g,...A}=u,{rotateBy:b,...q}=c;g!==void 0&&b!==void 0&&I(JSON.stringify(A)!==JSON.stringify(q)||C(g)!==C(b)),p(u),h&&h(u)},R=[{icon:"tb.TbFlipHorizontal",handler:()=>a("flipHorizontal",!o.flipHorizontal),tooltip:"Flip Horizontal"},{icon:"tb.TbFlipVertical",handler:()=>a("flipVertical",!o.flipVertical),tooltip:"Flip Vertical"},{icon:"ai.AiOutlineRotateLeft",handler:()=>a("rotateBy",o.rotateBy-j),tooltip:"Rotate Left"},{icon:"ai.AiOutlineRotateRight",handler:()=>a("rotateBy",o.rotateBy+j),tooltip:"Rotate Right"},{icon:"fi.FiZoomIn",handler:()=>a("scale",(o.scale+1)%10),tooltip:"Zoom In"},{icon:"fi.FiZoomOut",handler:()=>a("scale",(o.scale-1<0?0:o.scale-1)%10),tooltip:"Zoom Out"},{icon:i?"md.MdOutlineExpandLess":"md.MdOutlineExpandMore",handler:()=>S(!i),tooltip:i?"Hide Advanced Controls":"Show Advanced Controls"}],_=[{icon:"fi.FiZoomIn",handler:()=>p({...o,scale:(o.scale+1)%10}),tooltip:"Zoom In"},{icon:"fi.FiZoomOut",handler:()=>p({...o,scale:(o.scale-1<0?0:o.scale-1)%10}),tooltip:"Zoom Out"}],N=[[{label:"Brightness",min:0,max:5,precision:.1,handler:e=>a("brightness",+e.target.value)},{label:"Contrast",min:0,max:5,precision:.1,handler:e=>a("contrast",+e.target.value)}],[{label:"Saturation",min:0,max:10,precision:.2,handler:e=>a("saturate",+e.target.value)},{label:"Grayscale",min:0,max:1,precision:.05,handler:e=>a("grayscale",+e.target.value)}],[{label:"Blur",min:0,max:20,handler:e=>a("blur",+e.target.value)},{label:"Sepia",min:0,max:1,precision:.05,handler:e=>a("sepia",+e.target.value)}],[{label:"Opacity",min:0,max:1,precision:.05,handler:e=>a("opacity",+e.target.value)},{label:"Scale",min:0,max:10,precision:.2,handler:e=>a("scale",+e.target.value)}]];return t.jsxs("div",{className:"ar-ImageEditor d-flex flex-column h-100 overflow-auto flex-center position-relative",children:[!m&&t.jsxs("div",{className:"ar-ImageEditor__editor-controls position-absolute p-1 top-0 end-0 hover-shadow-dark",children:[t.jsxs(y,{children:[t.jsx("span",{className:"ar-ImageEditor__download-button cursor-pointer border-radius-50 p-1 me-2",slot:s.ArPopoverSlots.ANCHOR,children:t.jsx(f,{icon:"md/MdDownload",attributes:{colors:{fillColor:"#232323cc"},size:"1.5rem"},events:{onClick:()=>z.downloadEditedImage(v.current)}})}),t.jsx("span",{slot:s.ArPopoverSlots.POPOVER,children:"Download"})]}),t.jsxs(y,{children:[t.jsx("span",{className:`ar-ImageEditor__commit-button border-radius-50 p-1${n?" cursor-pointer is-dirty":""}`,slot:s.ArPopoverSlots.ANCHOR,children:t.jsx(f,{icon:"io5.IoCheckmarkCircleSharp",slot:s.ArPopoverSlots.ANCHOR,attributes:{colors:{fillColor:n?"#008000":"#00800077"},size:"1.5rem"},events:{onClick:()=>n&&x&&x(o)}})}),t.jsx("span",{slot:s.ArPopoverSlots.POPOVER,children:n?"Save":"Edit image to save"})]})]}),t.jsx("div",{className:"ar-ImageEditor__image-container mb-4",children:t.jsx(w,{ref:v,image:O,fill:!0,preserveAspectRatio:!0,...o})}),t.jsx("div",{className:"ar-ImageEditor__controls py-3 flex-center z-1 position-absolute",children:t.jsxs("div",{className:`ar-ImageEditor__controls-container border-radius prominent hover-shadow-dark${i?" expanded":""}`,children:[t.jsx("div",{className:`ar-ImageEditor__basic-controls px-3 py-2 ${i?"border-bottom":""}`,children:(m?_:R).map(e=>t.jsx(P,{...e}))}),!m&&t.jsx("div",{className:"ar-ImageEditor__advanced-controls mt-2 px-3",children:N.map(e=>t.jsx("div",{className:"row pb-3 border-bottom",children:e.map(r=>t.jsx("div",{className:"col-6",children:t.jsx(B,{label:r.label,min:r.min,max:r.max,onChange:r.handler,precision:r.precision})}))}))})]})})]})};module.exports=F;

package/es/Control.js

@@ -1,5 +1,5 @@
 import { jsxs as l, jsx as o } from "react/jsx-runtime";
-import { ArPopoverSlots as r } from "@armco/types";
+import { ArPopoverSlots as r } from "@armco/shared-components/enums";
 import i from "@armco/shared-components/Tooltip";
 import n from "@armco/icon";
 const a = ({

package/es/ImageEditor.js

@@ -1,13 +1,15 @@
 (function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode(".ar-ImageEditor .ar-ImageEditor__image-container{max-width:60vw;max-height:75vh}.ar-ImageEditor .ar-ImageEditor__editor-controls{transition:background-color .5s,box-shadow .5s ease-in-out;background-color:var(--ar-bg-tertiary-faded-2);border-radius:2rem}.ar-ImageEditor .ar-ImageEditor__editor-controls:hover{background-color:var(--ar-bg-tertiary-faded)}.ar-ImageEditor .ar-ImageEditor__editor-controls .ar-ImageEditor__download-button{width:2rem;height:2rem;display:inline-block}.ar-ImageEditor .ar-ImageEditor__editor-controls .ar-ImageEditor__download-button:hover{background-color:var(--ar-bg-tertiary-faded-2)}.ar-ImageEditor .ar-ImageEditor__editor-controls .ar-ImageEditor__commit-button{width:2rem;height:2rem;display:inline-block}.ar-ImageEditor .ar-ImageEditor__editor-controls .ar-ImageEditor__commit-button.is-dirty:hover{background-color:var(--ar-bg-tertiary-faded-2)}.ar-ImageEditor .ar-ImageEditor__controls{bottom:0}.ar-ImageEditor .ar-ImageEditor__controls .ar-ImageEditor__controls-container{transition:background-color .5s,box-shadow .5s,max-height .5s ease-in-out;background-color:var(--ar-bg-tertiary-faded-2);max-height:3.2rem;overflow:hidden}.ar-ImageEditor .ar-ImageEditor__controls .ar-ImageEditor__controls-container:hover{background-color:var(--ar-bg-tertiary-faded)}.ar-ImageEditor .ar-ImageEditor__controls .ar-ImageEditor__controls-container.expanded{max-height:20rem}")),document.head.appendChild(r)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { useRef as H, useState as u } from "react";
-import { ArPopoverSlots as n } from "@armco/types";
+import { useRef as F, useState as u } from "react";
 import y from "@armco/icon";
-import Z from "@armco/shared-components/Image";
+import { ArPopoverSlots as n } from "@armco/shared-components";
+import H from "@armco/shared-components/Image";
 import C from "@armco/shared-components/Tooltip";
-import k from "@armco/shared-components/Slider";
-import V from "./Control.js";
-import { downloadEditedImage as P } from "./helper.js";
+import Z from "@armco/shared-components/Slider";
+import k from "./Control.js";
+import { downloadEditedImage as V } from "./helper.js";
+import "@armco/shared-components/enums";
+import "@armco/utils/domHelper";
 let c = {
   rotateBy: 0,
   brightness: 1,
@@ -19,48 +21,48 @@ let c = {
   opacity: 1,
   scale: 1
 };
-const O = (d) => (d % 360 + 360) % 360, E = 22.5, K = (d) => {
-  const { demo: I, image: R, imageState: N, onChange: g, onCommit: v, viewOnly: m } = d;
+const O = (d) => (d % 360 + 360) % 360, E = 22.5, Q = (d) => {
+  const { image: I, imageState: R, onChange: g, onCommit: v, viewOnly: m } = d;
   c = {
     ...c,
-    ...N
+    ...R
   };
-  const b = H(null), [o, p] = u({ ...c }), [r, _] = u(), [s, S] = u(), a = (e, i) => {
-    const h = { ...o, [e]: i }, { rotateBy: f, ...z } = h, { rotateBy: x, ...F } = c;
-    f !== void 0 && x !== void 0 && S(
-      JSON.stringify(z) !== JSON.stringify(F) || O(f) !== O(x)
+  const b = F(null), [e, p] = u({ ...c }), [r, _] = u(), [s, N] = u(), a = (o, i) => {
+    const h = { ...e, [o]: i }, { rotateBy: f, ...A } = h, { rotateBy: x, ...z } = c;
+    f !== void 0 && x !== void 0 && N(
+      JSON.stringify(A) !== JSON.stringify(z) || O(f) !== O(x)
     ), p(h), g && g(h);
-  }, w = [
+  }, S = [
     {
       icon: "tb.TbFlipHorizontal",
-      handler: () => a("flipHorizontal", !o.flipHorizontal),
+      handler: () => a("flipHorizontal", !e.flipHorizontal),
       tooltip: "Flip Horizontal"
     },
     {
       icon: "tb.TbFlipVertical",
-      handler: () => a("flipVertical", !o.flipVertical),
+      handler: () => a("flipVertical", !e.flipVertical),
       tooltip: "Flip Vertical"
     },
     {
       icon: "ai.AiOutlineRotateLeft",
-      handler: () => a("rotateBy", o.rotateBy - E),
+      handler: () => a("rotateBy", e.rotateBy - E),
       tooltip: "Rotate Left"
     },
     {
       icon: "ai.AiOutlineRotateRight",
-      handler: () => a("rotateBy", o.rotateBy + E),
+      handler: () => a("rotateBy", e.rotateBy + E),
       tooltip: "Rotate Right"
     },
     {
       icon: "fi.FiZoomIn",
-      handler: () => a("scale", (o.scale + 1) % 10),
+      handler: () => a("scale", (e.scale + 1) % 10),
       tooltip: "Zoom In"
     },
     {
       icon: "fi.FiZoomOut",
       handler: () => a(
         "scale",
-        (o.scale - 1 < 0 ? 0 : o.scale - 1) % 10
+        (e.scale - 1 < 0 ? 0 : e.scale - 1) % 10
       ),
       tooltip: "Zoom Out"
     },
@@ -69,35 +71,35 @@ const O = (d) => (d % 360 + 360) % 360, E = 22.5, K = (d) => {
       handler: () => _(!r),
       tooltip: r ? "Hide Advanced Controls" : "Show Advanced Controls"
     }
-  ], B = [
+  ], w = [
     {
       icon: "fi.FiZoomIn",
-      handler: () => p({ ...o, scale: (o.scale + 1) % 10 }),
+      handler: () => p({ ...e, scale: (e.scale + 1) % 10 }),
       tooltip: "Zoom In"
     },
     {
       icon: "fi.FiZoomOut",
       handler: () => p({
-        ...o,
-        scale: (o.scale - 1 < 0 ? 0 : o.scale - 1) % 10
+        ...e,
+        scale: (e.scale - 1 < 0 ? 0 : e.scale - 1) % 10
       }),
       tooltip: "Zoom Out"
     }
-  ], A = [
+  ], B = [
     [
       {
         label: "Brightness",
         min: 0,
         max: 5,
         precision: 0.1,
-        handler: (e) => a("brightness", +e.target.value)
+        handler: (o) => a("brightness", +o.target.value)
       },
       {
         label: "Contrast",
         min: 0,
         max: 5,
         precision: 0.1,
-        handler: (e) => a("contrast", +e.target.value)
+        handler: (o) => a("contrast", +o.target.value)
       }
     ],
     [
@@ -106,14 +108,14 @@ const O = (d) => (d % 360 + 360) % 360, E = 22.5, K = (d) => {
         min: 0,
         max: 10,
         precision: 0.2,
-        handler: (e) => a("saturate", +e.target.value)
+        handler: (o) => a("saturate", +o.target.value)
       },
       {
         label: "Grayscale",
         min: 0,
         max: 1,
         precision: 0.05,
-        handler: (e) => a("grayscale", +e.target.value)
+        handler: (o) => a("grayscale", +o.target.value)
       }
     ],
     [
@@ -121,14 +123,14 @@ const O = (d) => (d % 360 + 360) % 360, E = 22.5, K = (d) => {
         label: "Blur",
         min: 0,
         max: 20,
-        handler: (e) => a("blur", +e.target.value)
+        handler: (o) => a("blur", +o.target.value)
       },
       {
         label: "Sepia",
         min: 0,
         max: 1,
         precision: 0.05,
-        handler: (e) => a("sepia", +e.target.value)
+        handler: (o) => a("sepia", +o.target.value)
       }
     ],
     [
@@ -137,14 +139,14 @@ const O = (d) => (d % 360 + 360) % 360, E = 22.5, K = (d) => {
         min: 0,
         max: 1,
         precision: 0.05,
-        handler: (e) => a("opacity", +e.target.value)
+        handler: (o) => a("opacity", +o.target.value)
       },
       {
         label: "Scale",
         min: 0,
         max: 10,
         precision: 0.2,
-        handler: (e) => a("scale", +e.target.value)
+        handler: (o) => a("scale", +o.target.value)
       }
     ]
   ];
@@ -165,7 +167,7 @@ const O = (d) => (d % 360 + 360) % 360, E = 22.5, K = (d) => {
                   size: "1.5rem"
                 },
                 events: {
-                  onClick: () => P(b.current)
+                  onClick: () => V(b.current)
                 }
               }
             )
@@ -189,7 +191,7 @@ const O = (d) => (d % 360 + 360) % 360, E = 22.5, K = (d) => {
                   size: "1.5rem"
                 },
                 events: {
-                  onClick: () => s && v && v(o)
+                  onClick: () => s && v && v(e)
                 }
               }
             )
@@ -199,14 +201,13 @@ const O = (d) => (d % 360 + 360) % 360, E = 22.5, K = (d) => {
       ] })
     ] }),
     /* @__PURE__ */ t("div", { className: "ar-ImageEditor__image-container mb-4", children: /* @__PURE__ */ t(
-      Z,
+      H,
       {
         ref: b,
-        image: R,
-        demo: I,
+        image: I,
         fill: !0,
         preserveAspectRatio: !0,
-        ...o
+        ...e
       }
     ) }),
     /* @__PURE__ */ t("div", { className: "ar-ImageEditor__controls py-3 flex-center z-1 position-absolute", children: /* @__PURE__ */ l(
@@ -218,11 +219,11 @@ const O = (d) => (d % 360 + 360) % 360, E = 22.5, K = (d) => {
             "div",
             {
               className: `ar-ImageEditor__basic-controls px-3 py-2 ${r ? "border-bottom" : ""}`,
-              children: (m ? B : w).map((e) => /* @__PURE__ */ t(V, { ...e }))
+              children: (m ? w : S).map((o) => /* @__PURE__ */ t(k, { ...o }))
             }
           ),
-          !m && /* @__PURE__ */ t("div", { className: "ar-ImageEditor__advanced-controls mt-2 px-3", children: A.map((e) => /* @__PURE__ */ t("div", { className: "row pb-3 border-bottom", children: e.map((i) => /* @__PURE__ */ t("div", { className: "col-6", children: /* @__PURE__ */ t(
-            k,
+          !m && /* @__PURE__ */ t("div", { className: "ar-ImageEditor__advanced-controls mt-2 px-3", children: B.map((o) => /* @__PURE__ */ t("div", { className: "row pb-3 border-bottom", children: o.map((i) => /* @__PURE__ */ t("div", { className: "col-6", children: /* @__PURE__ */ t(
+            Z,
             {
               label: i.label,
               min: i.min,
@@ -237,5 +238,5 @@ const O = (d) => (d % 360 + 360) % 360, E = 22.5, K = (d) => {
   ] });
 };
 export {
-  K as default
+  Q as default
 };

package/es/helper.js

@@ -4,7 +4,8 @@ const i = (t) => {
     const e = document.createElement("canvas");
     e.width = t.naturalWidth, e.height = t.naturalHeight;
     const a = e.getContext("2d");
-    if (!a) return;
+    if (!a)
+      return;
     const o = t.style.filter, n = t.style.opacity, s = t.style.transform;
     a.filter = o !== "" ? o : "", a.globalAlpha = n !== "" ? parseFloat(n) : 1, s && s !== "none" && d(a, s, e), a.drawImage(t, 0, 0), c(e.toDataURL());
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@armco/imageeditor",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "type": "module",
   "main": "cjs/ImageEditor.js",
   "module": "es/ImageEditor.js",
@@ -13,13 +13,41 @@
     "publish:sh": "./publish.sh",
     "publish:local": "./publish-local.sh"
   },
+  "dependencies": {
+    "@armco/icon": "^0.0.13",
+    "@armco/shared-components": "^0.0.61",
+    "@armco/utils": "^0.0.31",
+    "@types/node": "^22.5.5",
+    "react": ">16.8.0",
+    "react-dom": ">16.8.0"
+  },
+  "devDependencies": {
+    "@armco/types": "^0.0.22",
+    "@testing-library/dom": "^9.2.0",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.2.5",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^8.0.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "jsdom": "^21.1.0",
+    "prettier": "^2.7.1",
+    "prettier-config-nick": "^1.0.2",
+    "sass": "^1.63.4",
+    "typescript": "^5.0.2",
+    "vite": "^4.0.0",
+    "vite-plugin-css-injected-by-js": "^3.5.1",
+    "vite-plugin-dts": "^4.2.2",
+    "vite-plugin-externalize-deps": "^0.8.0",
+    "vitest": "^0.30.1"
+  },
   "peerDependencies": {
-    "@armco/types": "^0.0.18",
-    "@armco/utils": "^0.0.29",
-    "@armco/shared-components": "^0.0.57",
-    "@armco/icon": "^0.0.10",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": ">16.8.0",
+    "react-dom": ">16.8.0"
   },
   "eslintConfig": {
     "extends": [

package/types/ImageEditor.d.ts

@@ -1,3 +1,11 @@
-import { ImageEditorProps } from '@armco/types';
+import { BaseProps, FunctionType } from '@armco/types';
+import { ImageProps } from '@armco/shared-components/types/Image';
+export interface ImageEditorProps extends BaseProps {
+    image: string;
+    imageState?: Partial<ImageProps>;
+    onChange?: FunctionType;
+    onCommit?: FunctionType;
+    viewOnly?: boolean;
+}
 declare const ImageEditor: (props: ImageEditorProps) => JSX.Element;
 export default ImageEditor;