@layers-app/shared 0.4.1 → 0.4.3

package/dist/components/ColorPicker/ColorPicker.js

@@ -1,34 +1,35 @@
-import { jsx as e, jsxs as h } from "react/jsx-runtime";
-import { forwardRef as y, useState as x } from "react";
-import { Tick02Icon as j } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon as A } from "@hugeicons/react";
-import { useMantineTheme as w, getThemeColor as E, Flex as C, Tooltip as R, ColorSwatch as D, parseThemeColor as F, ColorInput as H, ActionIcon as v } from "@mantine/core";
-import { IconPalette as M, IconPencil as U } from "@tabler/icons-react";
-import V from "styled-components";
-import { DEFAULT_VALUES as g } from "../../constants.js";
-import { ColorPickerToolbar as q } from "./ColorPickerToolbar.js";
+import { jsx as e, jsxs as b } from "react/jsx-runtime";
+import { forwardRef as k, useState as g } from "react";
+import { useTranslation as j } from "react-i18next";
+import { Tick02Icon as A } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as E } from "@hugeicons/react";
+import { useMantineTheme as z, getThemeColor as R, Flex as x, Tooltip as D, ColorSwatch as F, parseThemeColor as H, ColorInput as M, ActionIcon as y } from "@mantine/core";
+import { IconPalette as U, IconPencil as V } from "@tabler/icons-react";
+import q from "styled-components";
+import { DEFAULT_VALUES as w } from "../../constants.js";
 import { ColorPickerList as _ } from "./ColorPickerList.js";
-import { normalizeColorItem as B } from "./types.js";
-const G = y(
+import { ColorPickerToolbar as B } from "./ColorPickerToolbar.js";
+import { resolveColorLabel as G, normalizeColorItem as J } from "./types.js";
+const K = k(
   ({
     value: o,
     onChange: l,
     allowCustomColor: n,
     colors: s,
-    swatchShape: a = "circle",
+    swatchShape: c = "circle",
     swatchVariant: m = "filled",
     withTick: d = !1,
     fullWidth: p = !1,
     swatchSize: i = 30,
     ...u
   }, f) => {
-    const r = w(), t = F({
-      color: o || g.COLORS[0],
-      theme: r
-    }), [z, I] = x(t.value), [O, b] = x(!1);
-    return O ? /* @__PURE__ */ h(C, { align: "center", mih: 30, children: [
+    const h = z(), r = H({
+      color: o || w.COLORS[0],
+      theme: h
+    }), [t, C] = g(r.value), [L, v] = g(!1);
+    return L ? /* @__PURE__ */ b(x, { align: "center", mih: 30, children: [
       /* @__PURE__ */ e(
-        H,
+        M,
         {
           w: "100%",
           popoverProps: {
@@ -38,57 +39,62 @@ const G = y(
           maxLength: 7,
           withEyeDropper: !1,
           size: "xs",
-          value: z,
-          onChange: I,
+          value: t,
+          onChange: C,
           onChangeEnd: l,
           placeholder: "Select custom color"
         }
       ),
       /* @__PURE__ */ e(
-        v,
+        y,
         {
           radius: "xl",
           variant: "default",
           color: "gray",
-          onClick: () => b(!1),
-          children: /* @__PURE__ */ e(M, { size: 16 })
+          onClick: () => v(!1),
+          children: /* @__PURE__ */ e(U, { size: 16 })
         }
       )
-    ] }, 1) : /* @__PURE__ */ h(
-      C,
+    ] }, 1) : /* @__PURE__ */ b(
+      x,
       {
         ref: f,
         ...u,
         justify: p ? "space-between" : "flex-start",
         align: "center",
         children: [
-          (s || g.COLORS).map((P, S) => {
-            const { value: c, border: T, bg: L, label: $ } = B(P);
+          (s || w.COLORS).map((O, T) => {
+            const {
+              value: a,
+              border: P,
+              bg: S,
+              label: $
+            } = J(O);
             return /* @__PURE__ */ e(
-              J,
+              N,
               {
-                value: c,
+                value: a,
                 label: $,
-                isActive: c === o,
+                isActive: a === o,
                 size: i - 4,
-                swatchShape: a,
+                swatchShape: c,
                 swatchVariant: m,
                 withTick: d,
-                borderColor: T,
-                bgColor: L,
-                onClick: () => l?.(c)
+                borderColor: P,
+                bgColor: S,
+                onClick: () => l?.(a)
               },
-              c || S
+              a || T
             );
           }),
           n && /* @__PURE__ */ e(
-            v,
+            y,
             {
               radius: "xl",
               variant: "default",
               color: "gray",
-              onClick: () => b(!0),
-              children: /* @__PURE__ */ e(U, { size: 16 })
+              onClick: () => v(!0),
+              children: /* @__PURE__ */ e(V, { size: 16 })
             }
           )
         ]
@@ -96,58 +102,78 @@ const G = y(
       2
     );
   }
-), k = y(
-  ({ value: o, label: l, isActive: n, swatchShape: s, swatchVariant: a = "filled", withTick: m, borderColor: d, bgColor: p, ...i }, u) => {
-    const f = w(), r = o ? E(o, f) : "", t = a === "outline";
-    return /* @__PURE__ */ e(C, { w: i.size || 24, h: i.size || 24, justify: "center", align: "center", style: { position: "relative" }, children: /* @__PURE__ */ e(R, { label: l || o || "", withArrow: !0, zIndex: 300, children: /* @__PURE__ */ h(
-      D,
+), I = k(
+  ({
+    value: o,
+    label: l,
+    isActive: n,
+    swatchShape: s,
+    swatchVariant: c = "filled",
+    withTick: m,
+    borderColor: d,
+    bgColor: p,
+    ...i
+  }, u) => {
+    const f = z(), { t: h } = j("ui"), r = o ? R(o, f) : "", t = c === "outline", C = G(h, o, l);
+    return /* @__PURE__ */ e(
+      x,
       {
-        ref: u,
-        color: t ? "transparent" : r,
-        radius: s === "circle" ? "xl" : "sm",
-        styles: t ? {
-          alphaOverlay: { display: "none" },
-          shadowOverlay: { display: "none" }
-        } : void 0,
-        style: {
-          cursor: "pointer",
-          color: "var(--mantine-color-white)",
-          background: t ? p || `var(--mantine-color-${o}-light, ${r}20)` : void 0,
-          border: t ? `2px solid ${d || `var(--mantine-color-${o}-outline, ${r})`}` : void 0
-        },
-        ...i,
-        children: [
-          n && /* @__PURE__ */ e(
-            "span",
-            {
-              style: {
-                position: "absolute",
-                top: -4,
-                left: -4,
-                right: -4,
-                bottom: -4,
-                border: `2px solid ${r}`,
-                borderRadius: s === "circle" ? "var(--mantine-radius-xl)" : "var(--mantine-radius-sm)",
-                pointerEvents: "none",
-                boxSizing: "border-box"
-              }
-            }
-          ),
-          m && n && /* @__PURE__ */ e(A, { size: 20, icon: j })
-        ]
+        w: i.size || 24,
+        h: i.size || 24,
+        justify: "center",
+        align: "center",
+        style: { position: "relative" },
+        children: /* @__PURE__ */ e(D, { label: C, withArrow: !0, zIndex: 300, children: /* @__PURE__ */ b(
+          F,
+          {
+            ref: u,
+            color: t ? "transparent" : r,
+            radius: s === "circle" ? "xl" : "sm",
+            styles: t ? {
+              alphaOverlay: { display: "none" },
+              shadowOverlay: { display: "none" }
+            } : void 0,
+            style: {
+              cursor: "pointer",
+              color: "var(--mantine-color-white)",
+              background: t ? p || `var(--mantine-color-${o}-light, ${r}20)` : void 0,
+              border: t ? `2px solid ${d || `var(--mantine-color-${o}-outline, ${r})`}` : void 0
+            },
+            ...i,
+            children: [
+              n && /* @__PURE__ */ e(
+                "span",
+                {
+                  style: {
+                    position: "absolute",
+                    top: -4,
+                    left: -4,
+                    right: -4,
+                    bottom: -4,
+                    border: `2px solid ${r}`,
+                    borderRadius: s === "circle" ? "var(--mantine-radius-xl)" : "var(--mantine-radius-sm)",
+                    pointerEvents: "none",
+                    boxSizing: "border-box"
+                  }
+                }
+              ),
+              m && n && /* @__PURE__ */ e(E, { size: 20, icon: A })
+            ]
+          }
+        ) })
       }
-    ) }) });
+    );
   }
-), J = V(k)`
+), N = q(I)`
   .mantine-ColorSwatch-colorOverlay {
     border-radius: ${({ swatchShape: o }) => o === "square" ? "3px" : "50%"};
   }
-`, lo = Object.assign(G, {
-  ColorCircle: k,
+`, ao = Object.assign(K, {
+  ColorCircle: I,
   List: _,
-  Toolbar: q
+  Toolbar: B
 });
 export {
-  k as ColorCircle,
-  lo as ColorPicker
+  I as ColorCircle,
+  ao as ColorPicker
 };

package/dist/components/ColorPicker/ColorPickerList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerList.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPickerList.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,oBAAoB,EAAgB,MAAM,SAAS,CAAC;AA8GlE;;oEAEoE;AACpE,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,MAAM,EACN,KAAK,EACL,QAAQ,EACR,OAAW,EACX,gBAAgB,GACjB,EAAE,oBAAoB,2CA4CtB"}
+{"version":3,"file":"ColorPickerList.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPickerList.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,oBAAoB,EAAgB,MAAM,SAAS,CAAC;AAqHlE;;oEAEoE;AACpE,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,MAAM,EACN,KAAK,EACL,QAAQ,EACR,OAAW,EACX,gBAAgB,GACjB,EAAE,oBAAoB,2CA4CtB"}

package/dist/components/ColorPicker/ColorPickerList.js

@@ -1,38 +1,32 @@
 import { jsxs as y, jsx as t } from "react/jsx-runtime";
-import { Tick02Icon as C } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon as I } from "@hugeicons/react";
-import { useMantineColorScheme as g, Box as k, useMantineTheme as x, getThemeColor as F, ColorSwatch as N } from "@mantine/core";
-import { TextColorIcon as S } from "./icons.js";
-import { isDefaultColor as b, normalizeColorItem as L } from "./types.js";
-import { useRecentColors as T } from "./useRecentColors.js";
-import i from "./ColorPicker.module.css.js";
-function z({
+import { useTranslation as g } from "react-i18next";
+import { Tick02Icon as k } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as x } from "@hugeicons/react";
+import { useMantineColorScheme as L, Box as F, useMantineTheme as N, getThemeColor as S, ColorSwatch as T } from "@mantine/core";
+import { TextColorIcon as z } from "./icons.js";
+import { resolveColorLabel as D, isDefaultColor as b, normalizeColorItem as $ } from "./types.js";
+import { useRecentColors as w } from "./useRecentColors.js";
+import a from "./ColorPicker.module.css.js";
+function j({
   type: e,
   colorValue: l,
-  resolvedColor: a,
-  border: s,
+  resolvedColor: n,
+  border: i,
   bg: c
 }) {
   if (e === "text")
-    return /* @__PURE__ */ t(
-      S,
-      {
-        size: 16,
-        color: a,
-        showBorder: !0
-      }
-    );
-  const n = b(l);
+    return /* @__PURE__ */ t(z, { size: 16, color: n, showBorder: !0 });
+  const s = b(l);
   return /* @__PURE__ */ t(
-    N,
+    T,
     {
-      color: n ? "var(--mantine-color-body)" : c || s || l,
+      color: s ? "var(--mantine-color-body)" : c || i || l,
       size: 16,
       radius: "xl",
-      className: i.listItemSwatch,
+      className: a.listItemSwatch,
       styles: {
         root: {
-          border: `1.5px solid ${n ? "var(--mantine-color-default-border)" : s || a}`
+          border: `1.5px solid ${s ? "var(--mantine-color-default-border)" : i || n}`
         },
         alphaOverlay: { display: "none" },
         shadowOverlay: { display: "none" }
@@ -43,92 +37,97 @@ function z({
 function v({
   section: e,
   columns: l,
-  onChange: a,
-  isDark: s
+  onChange: n,
+  isDark: i
 }) {
-  const c = x(), n = l > 1;
-  return /* @__PURE__ */ y("div", { className: i.section, children: [
-    e.label && /* @__PURE__ */ t("div", { className: i.sectionLabel, children: e.label }),
+  const c = N(), { t: s } = g("ui"), d = l > 1;
+  return /* @__PURE__ */ y("div", { className: a.section, children: [
+    e.label && /* @__PURE__ */ t("div", { className: a.sectionLabel, children: e.label }),
     /* @__PURE__ */ t(
       "div",
       {
-        className: n ? i.grid : void 0,
-        style: n ? { gridTemplateColumns: `repeat(${l}, minmax(0, 1fr))` } : void 0,
-        children: e.colors.map((p) => {
-          const { value: r, label: m, border: f, bg: d } = L(p), h = b(r), o = r === e.value, u = h ? s ? "#FFFFFF" : "#000000" : F(r, c);
+        className: d ? a.grid : void 0,
+        style: d ? { gridTemplateColumns: `repeat(${l}, minmax(0, 1fr))` } : void 0,
+        children: e.colors.map((u) => {
+          const {
+            value: o,
+            label: f,
+            border: p,
+            bg: h
+          } = $(u), r = b(o), m = o === e.value, C = r ? i ? "#FFFFFF" : "#000000" : S(o, c), I = D(s, o, f);
           return /* @__PURE__ */ y(
             "button",
             {
               type: "button",
-              className: `${i.listItem} ${o ? i.listItemActive : ""}`,
-              onClick: () => a(r, e.key),
+              className: `${a.listItem} ${m ? a.listItemActive : ""}`,
+              onClick: () => n(o, e.key),
               children: [
                 /* @__PURE__ */ t(
-                  z,
+                  j,
                   {
                     type: e.type,
-                    colorValue: r,
-                    resolvedColor: u,
-                    border: f,
-                    bg: d
+                    colorValue: o,
+                    resolvedColor: C,
+                    border: p,
+                    bg: h
                   }
                 ),
-                /* @__PURE__ */ t("span", { className: i.listItemLabel, children: m }),
-                o && /* @__PURE__ */ t(
-                  I,
+                /* @__PURE__ */ t("span", { className: a.listItemLabel, children: I }),
+                m && /* @__PURE__ */ t(
+                  x,
                   {
                     size: 16,
-                    icon: C,
+                    icon: k,
                     color: "var(--mantine-primary-color-filled)"
                   }
                 )
               ]
             },
-            r
+            o
           );
         })
       }
     )
   ] });
 }
-function R({
+function q({
   sections: e,
   colors: l,
-  value: a,
-  onChange: s,
+  value: n,
+  onChange: i,
   columns: c = 1,
-  withRecentColors: n
+  withRecentColors: s
 }) {
-  const { colorScheme: p } = g(), r = p === "dark", { recentColors: m, addRecent: f } = T(), d = (o, u) => {
-    n && f(o, u), s?.(o, u);
-  }, h = e || (l ? [{ key: "default", label: "", colors: l, value: a }] : []);
-  return /* @__PURE__ */ y(k, { children: [
-    n && m.length > 0 && /* @__PURE__ */ t(
+  const { colorScheme: d } = L(), u = d === "dark", { recentColors: o, addRecent: f } = w(), p = (r, m) => {
+    s && f(r, m), i?.(r, m);
+  }, h = e || (l ? [{ key: "default", label: "", colors: l, value: n }] : []);
+  return /* @__PURE__ */ y(F, { children: [
+    s && o.length > 0 && /* @__PURE__ */ t(
       v,
       {
         section: {
           key: "__recent",
           label: "Recently used",
-          colors: m.map((o) => o.value),
-          value: a
+          colors: o.map((r) => r.value),
+          value: n
         },
         columns: 1,
-        onChange: d,
-        isDark: r
+        onChange: p,
+        isDark: u
       }
     ),
-    h.map((o) => /* @__PURE__ */ t(
+    h.map((r) => /* @__PURE__ */ t(
       v,
       {
-        section: o,
+        section: r,
         columns: c,
-        onChange: d,
-        isDark: r
+        onChange: p,
+        isDark: u
       },
-      o.key
+      r.key
     ))
   ] });
 }
 export {
-  R as ColorPickerList
+  q as ColorPickerList
 };

package/dist/components/ColorPicker/ColorPickerToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPickerToolbar.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAMjE;6DAC6D;AAC7D,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAsCD,eAAO,MAAM,kBAAkB,oHA2K7B,CAAC"}
+{"version":3,"file":"ColorPickerToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPickerToolbar.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAMjE;6DAC6D;AAC7D,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAsCD,eAAO,MAAM,kBAAkB,oHA+L9B,CAAC"}