@layers-app/shared 0.3.9 → 0.4.1

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

@@ -1,9 +1,7 @@
-import React from 'react';
 import { ColorSwatchProps, FlexProps } from '@mantine/core';
 import { ColorPickerList } from './ColorPickerList';
-import { ColorItem } from './types';
-export type ColorPickerProps = {
-    ref?: React.Ref<HTMLDivElement>;
+import type { ColorItem } from './types';
+type ColorPickerProps = {
     value?: string | null;
     onChange?: (v: string) => void;
     allowCustomColor?: boolean;
@@ -14,8 +12,9 @@ export type ColorPickerProps = {
     fullWidth?: boolean;
     swatchSize?: number;
 } & Omit<FlexProps, 'onChange'>;
-export interface ColorCircleProps extends Omit<ColorSwatchProps, 'color'>, Omit<React.ComponentPropsWithoutRef<'div'>, keyof Omit<ColorSwatchProps, 'color'>> {
+interface ColorCircleProps extends Omit<ColorSwatchProps, 'color'>, Omit<React.ComponentPropsWithoutRef<'div'>, keyof Omit<ColorSwatchProps, 'color'>> {
     value?: string | null;
+    label?: string;
     isActive?: boolean;
     swatchShape?: 'circle' | 'square';
     swatchVariant?: 'filled' | 'outline';
@@ -23,14 +22,11 @@ export interface ColorCircleProps extends Omit<ColorSwatchProps, 'color'>, Omit<
     borderColor?: string;
     bgColor?: string;
 }
-export declare const ColorCircle: ({ value, isActive, swatchShape, swatchVariant, withTick, borderColor, bgColor, ref, ...props }: ColorCircleProps & {
-    ref?: React.Ref<HTMLDivElement>;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const ColorPicker: (({ value, onChange, allowCustomColor, colors, swatchShape, swatchVariant, withTick, fullWidth, swatchSize, ref, ...props }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element) & {
-    ColorCircle: ({ value, isActive, swatchShape, swatchVariant, withTick, borderColor, bgColor, ref, ...props }: ColorCircleProps & {
-        ref?: React.Ref<HTMLDivElement>;
-    }) => import("react/jsx-runtime").JSX.Element;
+export declare const ColorCircle: import("react").ForwardRefExoticComponent<ColorCircleProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ColorPicker: import("react").ForwardRefExoticComponent<Omit<ColorPickerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    ColorCircle: import("react").ForwardRefExoticComponent<ColorCircleProps & import("react").RefAttributes<HTMLDivElement>>;
     List: typeof ColorPickerList;
-    Toolbar: React.ForwardRefExoticComponent<import("./ColorPickerToolbar").ColorPickerToolbarProps & React.RefAttributes<HTMLDivElement>>;
+    Toolbar: import("react").ForwardRefExoticComponent<import("./ColorPickerToolbar").ColorPickerToolbarProps & import("react").RefAttributes<HTMLDivElement>>;
 };
+export {};
 //# sourceMappingURL=ColorPicker.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,EAIL,gBAAgB,EAEhB,SAAS,EAKV,MAAM,eAAe,CAAC;AAKvB,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAsB,MAAM,SAAS,CAAC;AAExD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAClC,aAAa,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;AAkGhC,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,EACrC,IAAI,CACF,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EACrC,MAAM,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,CACtC;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAClC,aAAa,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,WAAW,GAAI,gGAUzB,gBAAgB,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,4CA4DxD,CAAC;AASF,eAAO,MAAM,WAAW,+HAlLrB,gBAAgB;kHA6GhB,gBAAgB,GAAG;QAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;KAAE;;;CAyEvD,CAAC"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,EAIL,gBAAgB,EAEhB,SAAS,EAKV,MAAM,eAAe,CAAC;AAMvB,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAClC,aAAa,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;AAoGhC,UAAU,gBACR,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,EACrC,IAAI,CACF,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EACrC,MAAM,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,CACtC;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAClC,aAAa,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,WAAW,6GAmDvB,CAAC;AASF,eAAO,MAAM,WAAW;;;;CAItB,CAAC"}

package/dist/components/ColorPicker/ColorPicker.js

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

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

@@ -1,4 +1,4 @@
-const t = "_section_ux1w4_2", i = "_sectionLabel_ux1w4_15", n = "_listItem_ux1w4_46", e = "_listItemActive_ux1w4_72", c = "_listItemLabel_ux1w4_76", l = "_listItemSwatch_ux1w4_84", _ = "_grid_ux1w4_92", s = "_inlineSection_ux1w4_162", o = "_inlineSectionLabel_ux1w4_172", w = "_inlineRow_ux1w4_180", a = "_inlineSwatch_ux1w4_189", S = "_inlineSwatchActive_ux1w4_214", u = "_inlineSwatchRound_ux1w4_220", x = {
+const t = "_section_tyqb8_3", i = "_sectionLabel_tyqb8_29", n = "_listItem_tyqb8_91", e = "_listItemActive_tyqb8_143", c = "_listItemLabel_tyqb8_151", l = "_listItemSwatch_tyqb8_167", _ = "_grid_tyqb8_183", s = "_inlineSection_tyqb8_323", o = "_inlineSectionLabel_tyqb8_343", a = "_inlineRow_tyqb8_359", b = "_inlineSwatch_tyqb8_377", S = "_inlineSwatchActive_tyqb8_429", w = "_inlineSwatchRound_tyqb8_449", y = {
   section: t,
   sectionLabel: i,
   listItem: n,
@@ -8,20 +8,20 @@ const t = "_section_ux1w4_2", i = "_sectionLabel_ux1w4_15", n = "_listItem_ux1w4
   grid: _,
   inlineSection: s,
   inlineSectionLabel: o,
-  inlineRow: w,
-  inlineSwatch: a,
+  inlineRow: a,
+  inlineSwatch: b,
   inlineSwatchActive: S,
-  inlineSwatchRound: u
+  inlineSwatchRound: w
 };
 export {
-  x as default,
+  y as default,
   _ as grid,
-  w as inlineRow,
+  a as inlineRow,
   s as inlineSection,
   o as inlineSectionLabel,
-  a as inlineSwatch,
+  b as inlineSwatch,
   S as inlineSwatchActive,
-  u as inlineSwatchRound,
+  w as inlineSwatchRound,
   n as listItem,
   e as listItemActive,
   c as listItemLabel,

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;AA4BD,eAAO,MAAM,kBAAkB,oHAuJ7B,CAAC"}
+{"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"}

package/dist/components/ColorPicker/ColorPickerToolbar.js

@@ -1,121 +1,138 @@
-import { jsxs as C, jsx as o } from "react/jsx-runtime";
-import { forwardRef as D, useState as M, useCallback as w, useMemo as T } from "react";
-import { useMantineColorScheme as z, Box as u, Flex as x, UnstyledButton as H } from "@mantine/core";
-import { TextColorIcon as F, HighlightSwatch as N } from "./icons.js";
-import { isDefaultColor as I, normalizeColorItem as L } from "./types.js";
-import { useRecentColors as j } from "./useRecentColors.js";
-import t from "./ColorPicker.module.css.js";
+import { jsxs as S, jsx as r } from "react/jsx-runtime";
+import { forwardRef as T, useState as y, useCallback as w, useMemo as H } from "react";
+import { useMantineColorScheme as j, Box as h, Flex as B, Tooltip as P, UnstyledButton as U } from "@mantine/core";
+import { TextColorIcon as K, HighlightSwatch as z } from "./icons.js";
+import { normalizeColorItem as $, isDefaultColor as q } from "./types.js";
+import { useRecentColors as E } from "./useRecentColors.js";
+import c from "./ColorPicker.module.css.js";
 function k({
-  isActive: i,
+  isActive: s,
   round: m,
-  disabled: a,
-  onClick: h,
-  children: c
+  disabled: u,
+  onClick: d,
+  children: i,
+  tooltipLabel: f
 }) {
-  return /* @__PURE__ */ o(
-    H,
+  const v = /* @__PURE__ */ r(
+    U,
     {
       type: "button",
-      className: `${t.inlineSwatch}${m ? ` ${t.inlineSwatchRound}` : ""}${i ? ` ${t.inlineSwatchActive}` : ""}`,
-      onMouseDown: (p) => p.preventDefault(),
-      onClick: h,
-      disabled: a,
-      children: c
+      className: `${c.inlineSwatch}${m ? ` ${c.inlineSwatchRound}` : ""}${s ? ` ${c.inlineSwatchActive}` : ""}`,
+      onMouseDown: (C) => C.preventDefault(),
+      onClick: d,
+      disabled: u,
+      children: i
     }
   );
+  return f ? /* @__PURE__ */ r(P, { label: f, withArrow: !0, zIndex: 300, children: v }) : v;
 }
-const Q = D(({ sections: i, onChange: m, withRecentColors: a, maxRecentColors: h = 9, disabled: c, recentColorsLabel: p = "Recently used" }, R) => {
-  const { colorScheme: y } = z(), S = y === "dark", { recentColors: B, addRecent: g } = j({ maxItems: h }), [v, K] = M(B), d = w(
-    (e, r, n) => {
-      a && (g(e, r, n), K((l) => {
-        const f = l.filter(
-          (s) => !(s.value === e && s.sectionKey === r)
+const Y = T(({ sections: s, onChange: m, withRecentColors: u, maxRecentColors: d = 9, disabled: i, recentColorsLabel: f = "Recently used" }, v) => {
+  const { colorScheme: C } = j(), x = C === "dark", { recentColors: D, addRecent: F } = E({ maxItems: d }), [L, I] = y(D), p = w(
+    (e, o, t) => {
+      u && (F(e, o, t), I((l) => {
+        const n = l.filter(
+          (a) => !(a.value === e && a.sectionKey === o)
         );
-        return [{ value: e, sectionKey: r, border: n }, ...f].slice(0, h);
-      })), m(e, r);
+        return [{ value: e, sectionKey: o, border: t }, ...n].slice(0, d);
+      })), m(e, o);
     },
-    [m, a, g]
-  ), A = T(() => {
+    [m, u, F]
+  ), g = H(() => {
     const e = {};
-    for (const r of i) e[r.key] = r;
+    for (const o of s) e[o.key] = o;
     return e;
-  }, [i]), b = w(
-    (e) => I(e) ? S ? "#FFFFFF" : "#000000" : e,
-    [S]
+  }, [s]), M = w(
+    (e, o) => {
+      if (!o) return;
+      const t = g[o];
+      if (!t) return;
+      const l = t.colors.find((b) => $(b).value === e);
+      if (!l) return;
+      const { label: n, value: a } = $(l);
+      return n || a;
+    },
+    [g]
+  ), N = w(
+    (e) => q(e) ? x ? "#FFFFFF" : "#000000" : e,
+    [x]
   );
-  return /* @__PURE__ */ C(u, { ref: R, children: [
-    a && v.length > 0 && /* @__PURE__ */ C(u, { className: t.inlineSection, children: [
-      /* @__PURE__ */ o(u, { className: t.inlineSectionLabel, children: p }),
-      /* @__PURE__ */ o(x, { className: t.inlineRow, gap: 2, children: v.map((e, r) => {
-        const n = e.sectionKey ? A[e.sectionKey] : void 0;
-        return n?.key === "textColor" || n?.key === "color" || e.sectionKey === "color" ? /* @__PURE__ */ o(
+  return /* @__PURE__ */ S(h, { ref: v, children: [
+    u && L.length > 0 && /* @__PURE__ */ S(h, { className: c.inlineSection, children: [
+      /* @__PURE__ */ r(h, { className: c.inlineSectionLabel, children: f }),
+      /* @__PURE__ */ r(B, { className: c.inlineRow, gap: 2, children: L.map((e, o) => {
+        const t = e.sectionKey ? g[e.sectionKey] : void 0, l = t?.key === "textColor" || t?.key === "color" || e.sectionKey === "color", n = M(e.value, e.sectionKey);
+        return l ? /* @__PURE__ */ r(
           k,
           {
             isActive: !1,
-            disabled: c,
-            onClick: () => d(e.value, e.sectionKey ?? ""),
-            children: /* @__PURE__ */ o(
-              F,
+            disabled: i,
+            tooltipLabel: n,
+            onClick: () => p(e.value, e.sectionKey ?? ""),
+            children: /* @__PURE__ */ r(
+              K,
               {
                 size: 20,
-                color: b(e.value),
+                color: N(e.value),
                 showBorder: !0
               }
             )
           },
-          `${e.sectionKey}-${e.value}-${r}`
-        ) : /* @__PURE__ */ o(
+          `${e.sectionKey}-${e.value}-${o}`
+        ) : /* @__PURE__ */ r(
           k,
           {
             isActive: !1,
             round: !0,
-            disabled: c,
-            onClick: () => d(e.value, e.sectionKey ?? ""),
-            children: /* @__PURE__ */ o(
-              N,
+            disabled: i,
+            tooltipLabel: n,
+            onClick: () => p(e.value, e.sectionKey ?? ""),
+            children: /* @__PURE__ */ r(
+              z,
               {
                 bgColor: e.value,
                 borderColor: e.border || "var(--mantine-color-default-border)"
               }
             )
           },
-          `${e.sectionKey}-${e.value}-${r}`
+          `${e.sectionKey}-${e.value}-${o}`
         );
       }) })
     ] }),
-    i.map((e) => {
-      const r = e.key === "highlight" || e.key === "background" || e.key === "textHighlight";
-      return /* @__PURE__ */ C(u, { className: t.inlineSection, children: [
-        e.label && /* @__PURE__ */ o(u, { className: t.inlineSectionLabel, children: e.label }),
-        /* @__PURE__ */ o(x, { className: t.inlineRow, gap: 2, children: e.colors.map((n) => {
-          const { value: l, border: f } = L(n), s = l === e.value, $ = b(l);
-          return r ? /* @__PURE__ */ o(
+    s.map((e) => {
+      const o = e.key === "highlight" || e.key === "background" || e.key === "textHighlight";
+      return /* @__PURE__ */ S(h, { className: c.inlineSection, children: [
+        e.label && /* @__PURE__ */ r(h, { className: c.inlineSectionLabel, children: e.label }),
+        /* @__PURE__ */ r(B, { className: c.inlineRow, gap: 2, children: e.colors.map((t) => {
+          const { value: l, border: n, label: a } = $(t), b = l === e.value, R = N(l), A = a || l;
+          return o ? /* @__PURE__ */ r(
             k,
             {
-              isActive: s,
+              isActive: b,
               round: !0,
-              disabled: c,
-              onClick: () => d(l, e.key, f),
-              children: /* @__PURE__ */ o(
-                N,
+              disabled: i,
+              tooltipLabel: A,
+              onClick: () => p(l, e.key, n),
+              children: /* @__PURE__ */ r(
+                z,
                 {
                   bgColor: l,
-                  borderColor: f || $
+                  borderColor: n || R
                 }
               )
             },
             l
-          ) : /* @__PURE__ */ o(
+          ) : /* @__PURE__ */ r(
             k,
             {
-              isActive: s,
-              disabled: c,
-              onClick: () => d(l, e.key),
-              children: /* @__PURE__ */ o(
-                F,
+              isActive: b,
+              disabled: i,
+              tooltipLabel: A,
+              onClick: () => p(l, e.key),
+              children: /* @__PURE__ */ r(
+                K,
                 {
                   size: 20,
-                  color: $,
+                  color: R,
                   showBorder: !0
                 }
               )
@@ -128,5 +145,5 @@ const Q = D(({ sections: i, onChange: m, withRecentColors: a, maxRecentColors: h
   ] });
 });
 export {
-  Q as ColorPickerToolbar
+  Y as ColorPickerToolbar
 };

package/dist/components/ColorPicker/icons.js

@@ -1,4 +1,4 @@
-import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import { jsx as n, jsxs as c } from "react/jsx-runtime";
 function s({
   size: t = 20,
   color: r = "var(--mantine-color-white)",
@@ -26,7 +26,7 @@ function s({
             fill: "none"
           }
         ),
-        /* @__PURE__ */ n("g", { transform: "translate(4.3, 2.85) scale(0.95)", children: /* @__PURE__ */ n(
+        /* @__PURE__ */ n("g", { transform: "translate(4.54, 4.2) scale(0.95)", children: /* @__PURE__ */ n(
           "path",
           {
             d: "M5.74945 0C6.57421 0 7.09678 0.678265 7.50336 1.43555C7.93323 2.23628 8.38332 3.42022 8.95843 4.92676L11.4623 11.4873C11.5716 11.7742 11.4279 12.0955 11.1411 12.2051C10.8541 12.3144 10.5329 12.1706 10.4233 11.8838L8.5766 7.04883H2.9223L1.07562 11.8838C0.965974 12.1707 0.644849 12.3146 0.357848 12.2051C0.0710441 12.0955 -0.0726477 11.7742 0.0365593 11.4873L2.54047 4.92676C3.11563 3.42012 3.56662 2.23629 3.99652 1.43555C4.40306 0.678393 4.92485 8.51363e-05 5.74945 0ZM5.74945 1.11328C5.62925 1.11335 5.38778 1.19685 4.97699 1.96191C4.5893 2.68404 4.16803 3.7852 3.5805 5.32422L3.34711 5.93555H8.15179L7.9184 5.32422C7.33089 3.78522 6.9096 2.68403 6.52191 1.96191C6.11099 1.19664 5.86959 1.11328 5.74945 1.11328Z",
@@ -42,7 +42,7 @@ function d({
   bgColor: r,
   borderColor: e
 }) {
-  const o = r === "inherit" || r === "" || r === "default", i = t * 0.375, l = o ? "var(--mantine-color-body)" : r, h = o ? "var(--mantine-color-default-border)" : e;
+  const o = r === "inherit" || r === "" || r === "default", i = t / 2 - 2, l = o ? "var(--mantine-color-body)" : r, h = o ? "var(--mantine-color-default-border)" : e;
   return /* @__PURE__ */ n(
     "svg",
     {
@@ -59,7 +59,7 @@ function d({
           r: i,
           fill: l,
           stroke: h,
-          strokeWidth: "1.5"
+          strokeWidth: "1"
         }
       )
     }