@layers-app/shared 0.4.6 → 0.4.7

package/dist/components/ColorPicker/ColorPicker.js

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

package/dist/components/ColorPicker/ColorPicker.module.css.js

@@ -1,37 +1,31 @@
-const i = "_section_1go5u_3", n = "_sectionLabel_1go5u_29", t = "_listItemCaption_1go5u_45", e = "_listItem_1go5u_45", o = "_listItemActive_1go5u_155", c = "_listItemLabel_1go5u_163", l = "_listItemSwatch_1go5u_179", _ = "_grid_1go5u_195", s = "_inlineSection_1go5u_335", a = "_inlineSectionLabel_1go5u_355", S = "_inlineSectionLabelRow_1go5u_371", u = "_inlineSectionCaption_1go5u_383", g = "_inlineRow_1go5u_395", w = "_inlineSwatch_1go5u_413", m = "_inlineSwatchActive_1go5u_465", I = "_inlineSwatchRound_1go5u_485", b = {
+const i = "_section_lidow_2", t = "_sectionLabel_lidow_15", n = "_listItem_lidow_46", e = "_listItemActive_lidow_72", l = "_listItemLabel_lidow_76", o = "_listItemSwatch_lidow_84", c = "_grid_lidow_92", _ = "_inlineSection_lidow_162", s = "_inlineSectionLabel_lidow_172", w = "_inlineRow_lidow_180", a = "_inlineSwatch_lidow_189", d = "_inlineSwatchActive_lidow_215", S = "_inlineSwatchRound_lidow_225", h = {
   section: i,
-  sectionLabel: n,
-  listItemCaption: t,
-  listItem: e,
-  listItemActive: o,
-  listItemLabel: c,
-  listItemSwatch: l,
-  grid: _,
-  inlineSection: s,
-  inlineSectionLabel: a,
-  inlineSectionLabelRow: S,
-  inlineSectionCaption: u,
-  inlineRow: g,
-  inlineSwatch: w,
-  inlineSwatchActive: m,
-  inlineSwatchRound: I
+  sectionLabel: t,
+  listItem: n,
+  listItemActive: e,
+  listItemLabel: l,
+  listItemSwatch: o,
+  grid: c,
+  inlineSection: _,
+  inlineSectionLabel: s,
+  inlineRow: w,
+  inlineSwatch: a,
+  inlineSwatchActive: d,
+  inlineSwatchRound: S
 };
 export {
-  b as default,
-  _ as grid,
-  g as inlineRow,
-  s as inlineSection,
-  u as inlineSectionCaption,
-  a as inlineSectionLabel,
-  S as inlineSectionLabelRow,
-  w as inlineSwatch,
-  m as inlineSwatchActive,
-  I as inlineSwatchRound,
-  e as listItem,
-  o as listItemActive,
-  t as listItemCaption,
-  c as listItemLabel,
-  l as listItemSwatch,
+  h as default,
+  c as grid,
+  w as inlineRow,
+  _ as inlineSection,
+  s as inlineSectionLabel,
+  a as inlineSwatch,
+  d as inlineSwatchActive,
+  S as inlineSwatchRound,
+  n as listItem,
+  e as listItemActive,
+  l as listItemLabel,
+  o as listItemSwatch,
   i as section,
-  n as sectionLabel
+  t as sectionLabel
 };

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":"AAaA,OAAO,KAAK,EAAE,oBAAoB,EAAgB,MAAM,SAAS,CAAC;AAiIlE;;oEAEoE;AACpE,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,MAAM,EACN,KAAK,EACL,QAAQ,EACR,OAAW,EACX,gBAAgB,GACjB,EAAE,oBAAoB,2CAkEtB"}
+{"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,2CA8CtB"}

package/dist/components/ColorPicker/ColorPickerList.js

@@ -1,32 +1,32 @@
-import { jsxs as C, jsx as r } from "react/jsx-runtime";
-import { useTranslation as x } from "react-i18next";
-import { Tick02Icon as L } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon as T } from "@hugeicons/react";
-import { useComputedColorScheme as S, Box as F, useMantineTheme as E, getThemeColor as O, ColorSwatch as R } from "@mantine/core";
-import { TextColorIcon as w } from "./icons.js";
-import { normalizeColorItem as I, RECENT_COLOR_HOTKEY as z, resolveRecentKind as D, colorsEqual as K, resolveColorLabel as $, isDefaultColor as N } from "./types.js";
-import { useRecentColors as M } from "./useRecentColors.js";
-import s from "./ColorPicker.module.css.js";
+import { jsxs as y, jsx as r } from "react/jsx-runtime";
+import { useTranslation as g } from "react-i18next";
+import { Tick02Icon as k } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as x } from "@hugeicons/react";
+import { useComputedColorScheme as L, Box as S, useMantineTheme as F, getThemeColor as N, 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 i from "./ColorPicker.module.css.js";
 function j({
   type: e,
-  colorValue: n,
-  resolvedColor: i,
-  border: c,
-  bg: m
+  colorValue: l,
+  resolvedColor: n,
+  border: s,
+  bg: c
 }) {
   if (e === "text")
-    return /* @__PURE__ */ r(w, { size: 16, color: i, showBorder: !0 });
-  const a = N(n);
+    return /* @__PURE__ */ r(z, { size: 16, color: n, showBorder: !0 });
+  const a = b(l);
   return /* @__PURE__ */ r(
-    R,
+    T,
     {
-      color: a ? "var(--mantine-color-body)" : m || c || n,
+      color: a ? "var(--mantine-color-body)" : c || s || l,
       size: 16,
       radius: "xl",
-      className: s.listItemSwatch,
+      className: i.listItemSwatch,
       styles: {
         root: {
-          border: `1.5px solid ${a ? "var(--mantine-color-default-border)" : c || i}`
+          border: `1.5px solid ${a ? "var(--mantine-color-default-border)" : s || n}`
         },
         alphaOverlay: { display: "none" },
         shadowOverlay: { display: "none" }
@@ -34,113 +34,102 @@ function j({
     }
   );
 }
-function g({
+function v({
   section: e,
-  columns: n,
-  onChange: i,
-  isDark: c,
-  itemCaption: m
+  columns: l,
+  onChange: n,
+  isDark: s
 }) {
-  const a = E(), { t: v } = x("ui"), y = n > 1;
-  return /* @__PURE__ */ C("div", { className: s.section, children: [
-    e.label && /* @__PURE__ */ r("div", { className: s.sectionLabel, children: e.label }),
+  const c = F(), { t: a } = g("ui"), p = l > 1;
+  return /* @__PURE__ */ y("div", { className: i.section, children: [
+    e.label && /* @__PURE__ */ r("div", { className: i.sectionLabel, children: e.label }),
     /* @__PURE__ */ r(
       "div",
       {
-        className: y ? s.grid : void 0,
-        style: y ? { gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` } : void 0,
-        children: e.colors.map((u) => {
+        className: p ? i.grid : void 0,
+        style: p ? { gridTemplateColumns: `repeat(${l}, minmax(0, 1fr))` } : void 0,
+        children: e.colors.map((d) => {
           const {
-            value: l,
-            label: b,
-            border: p,
-            bg: f
-          } = I(u), t = N(l), d = K(l, e.value), h = t ? c ? "#FFFFFF" : "#000000" : O(l, a), o = $(v, l, b);
-          return /* @__PURE__ */ C(
+            value: o,
+            label: f,
+            border: u,
+            bg: h
+          } = $(d), t = b(o), m = o === e.value, C = t ? s ? "#FFFFFF" : "#000000" : N(o, c), I = D(a, o, f);
+          return /* @__PURE__ */ y(
             "button",
             {
               type: "button",
-              className: `${s.listItem} ${d ? s.listItemActive : ""}`,
-              onClick: () => i(l, e.key),
+              className: `${i.listItem} ${m ? i.listItemActive : ""}`,
+              onClick: () => n(o, e.key),
               children: [
                 /* @__PURE__ */ r(
                   j,
                   {
                     type: e.type,
-                    colorValue: l,
-                    resolvedColor: h,
-                    border: p,
-                    bg: f
+                    colorValue: o,
+                    resolvedColor: C,
+                    border: u,
+                    bg: h
                   }
                 ),
-                /* @__PURE__ */ r("span", { className: s.listItemLabel, children: o }),
-                m && /* @__PURE__ */ r("span", { className: s.listItemCaption, children: m }),
-                d && /* @__PURE__ */ r(
-                  T,
+                /* @__PURE__ */ r("span", { className: i.listItemLabel, children: I }),
+                m && /* @__PURE__ */ r(
+                  x,
                   {
                     size: 16,
-                    icon: L,
+                    icon: k,
                     color: "var(--mantine-primary-color-filled)"
                   }
                 )
               ]
             },
-            l
+            o
           );
         })
       }
     )
   ] });
 }
-function J({
+function P({
   sections: e,
-  colors: n,
-  value: i,
-  onChange: c,
-  columns: m = 1,
+  colors: l,
+  value: n,
+  onChange: s,
+  columns: c = 1,
   withRecentColors: a
 }) {
-  const { t: v } = x("ui"), u = S("light", {
+  const d = L("light", {
     getInitialValueInEffect: !0
-  }) === "dark", { recentColors: l, addRecent: b } = M(), p = (o, k) => {
-    a && b(o, k), c?.(o, k);
-  }, f = e || (n ? [{ key: "default", label: "", colors: n, value: i }] : []), t = l[0], d = t ? f.find((o) => o.key === t.sectionKey)?.colors.find(
-    (o) => I(o).value === t.value
-  ) : void 0, h = d ? I(d) : void 0;
-  return /* @__PURE__ */ C(F, { w: "100%", children: [
-    a && t && /* @__PURE__ */ r(
-      g,
+  }) === "dark", { recentColors: o, addRecent: f } = w(), u = (t, m) => {
+    a && f(t, m), s?.(t, m);
+  }, h = e || (l ? [{ key: "default", label: "", colors: l, value: n }] : []);
+  return /* @__PURE__ */ y(S, { children: [
+    a && o.length > 0 && /* @__PURE__ */ r(
+      v,
       {
         section: {
-          key: t.sectionKey ?? "",
-          label: v("colorPicker.recentlyUsed"),
-          type: D(t.sectionKey),
-          colors: [
-            {
-              value: t.value,
-              label: h?.label,
-              border: t.border ?? h?.border
-            }
-          ]
+          key: "__recent",
+          label: "Recently used",
+          colors: o.map((t) => t.value),
+          value: n
         },
         columns: 1,
-        itemCaption: z,
-        onChange: p,
-        isDark: u
+        onChange: u,
+        isDark: d
       }
     ),
-    f.map((o) => /* @__PURE__ */ r(
-      g,
+    h.map((t) => /* @__PURE__ */ r(
+      v,
       {
-        section: o,
-        columns: m,
-        onChange: p,
-        isDark: u
+        section: t,
+        columns: c,
+        onChange: u,
+        isDark: d
       },
-      o.key
+      t.key
     ))
   ] });
 }
 export {
-  J as ColorPickerList
+  P 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":"AAYA,OAAO,KAAK,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAYjE;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,oHA0M9B,CAAC"}
+{"version":3,"file":"ColorPickerToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPickerToolbar.tsx"],"names":[],"mappings":"AAYA,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,oHAiM9B,CAAC"}