@layers-app/shared 0.3.8 → 0.3.9

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

@@ -1,29 +1,36 @@
 import React from 'react';
 import { ColorSwatchProps, FlexProps } from '@mantine/core';
-type ColorPickerProps = {
+import { ColorPickerList } from './ColorPickerList';
+import { ColorItem } from './types';
+export type ColorPickerProps = {
     ref?: React.Ref<HTMLDivElement>;
     value?: string | null;
     onChange?: (v: string) => void;
     allowCustomColor?: boolean;
-    colors?: string[];
+    colors?: ColorItem[];
     swatchShape?: 'circle' | 'square';
+    swatchVariant?: 'filled' | 'outline';
     withTick?: boolean;
     fullWidth?: boolean;
     swatchSize?: number;
 } & Omit<FlexProps, 'onChange'>;
-interface ColorCircleProps extends Omit<ColorSwatchProps, 'color'>, Omit<React.ComponentPropsWithoutRef<'div'>, keyof Omit<ColorSwatchProps, 'color'>> {
+export interface ColorCircleProps extends Omit<ColorSwatchProps, 'color'>, Omit<React.ComponentPropsWithoutRef<'div'>, keyof Omit<ColorSwatchProps, 'color'>> {
     value?: string | null;
     isActive?: boolean;
     swatchShape?: 'circle' | 'square';
+    swatchVariant?: 'filled' | 'outline';
     withTick?: boolean;
+    borderColor?: string;
+    bgColor?: string;
 }
-export declare const ColorCircle: ({ value, isActive, swatchShape, withTick, ref, ...props }: ColorCircleProps & {
+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, withTick, fullWidth, swatchSize, ref, ...props }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element) & {
-    ColorCircle: ({ value, isActive, swatchShape, withTick, ref, ...props }: ColorCircleProps & {
+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;
+    List: typeof ColorPickerList;
+    Toolbar: React.ForwardRefExoticComponent<import("./ColorPickerToolbar").ColorPickerToolbarProps & 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;AAMvB,KAAK,gBAAgB,GAAG;IACtB,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,MAAM,EAAE,CAAC;IAClB,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAClC,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;AA4FhC,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,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,GAAI,2DAOzB,gBAAgB,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,4CAgDxD,CAAC;AASF,eAAO,MAAM,WAAW,gHA3JrB,gBAAgB;6EAkGhB,gBAAgB,GAAG;QAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;KAAE;CA2DvD,CAAC"}
+{"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"}

package/dist/components/ColorPicker/ColorPicker.js

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

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

@@ -0,0 +1,31 @@
+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 = {
+  section: t,
+  sectionLabel: i,
+  listItem: n,
+  listItemActive: e,
+  listItemLabel: c,
+  listItemSwatch: l,
+  grid: _,
+  inlineSection: s,
+  inlineSectionLabel: o,
+  inlineRow: w,
+  inlineSwatch: a,
+  inlineSwatchActive: S,
+  inlineSwatchRound: u
+};
+export {
+  x as default,
+  _ as grid,
+  w as inlineRow,
+  s as inlineSection,
+  o as inlineSectionLabel,
+  a as inlineSwatch,
+  S as inlineSwatchActive,
+  u as inlineSwatchRound,
+  n as listItem,
+  e as listItemActive,
+  c as listItemLabel,
+  l as listItemSwatch,
+  t as section,
+  i as sectionLabel
+};

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

@@ -0,0 +1,6 @@
+import type { ColorPickerListProps } from './types';
+/** Vertical list or multi-column grid with sections.
+ * Use in drawers, mobile menus, slash-menu dropdowns.
+ * columns=1 (default) = vertical list, columns=2+ = grid layout. */
+export declare function ColorPickerList({ sections, colors, value, onChange, columns, withRecentColors, }: ColorPickerListProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ColorPickerList.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/ColorPicker/ColorPickerList.js

@@ -0,0 +1,134 @@
+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({
+  type: e,
+  colorValue: l,
+  resolvedColor: a,
+  border: s,
+  bg: c
+}) {
+  if (e === "text")
+    return /* @__PURE__ */ t(
+      S,
+      {
+        size: 16,
+        color: a,
+        showBorder: !0
+      }
+    );
+  const n = b(l);
+  return /* @__PURE__ */ t(
+    N,
+    {
+      color: n ? "var(--mantine-color-body)" : c || s || l,
+      size: 16,
+      radius: "xl",
+      className: i.listItemSwatch,
+      styles: {
+        root: {
+          border: `1.5px solid ${n ? "var(--mantine-color-default-border)" : s || a}`
+        },
+        alphaOverlay: { display: "none" },
+        shadowOverlay: { display: "none" }
+      }
+    }
+  );
+}
+function v({
+  section: e,
+  columns: l,
+  onChange: a,
+  isDark: s
+}) {
+  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 }),
+    /* @__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);
+          return /* @__PURE__ */ y(
+            "button",
+            {
+              type: "button",
+              className: `${i.listItem} ${o ? i.listItemActive : ""}`,
+              onClick: () => a(r, e.key),
+              children: [
+                /* @__PURE__ */ t(
+                  z,
+                  {
+                    type: e.type,
+                    colorValue: r,
+                    resolvedColor: u,
+                    border: f,
+                    bg: d
+                  }
+                ),
+                /* @__PURE__ */ t("span", { className: i.listItemLabel, children: m }),
+                o && /* @__PURE__ */ t(
+                  I,
+                  {
+                    size: 16,
+                    icon: C,
+                    color: "var(--mantine-primary-color-filled)"
+                  }
+                )
+              ]
+            },
+            r
+          );
+        })
+      }
+    )
+  ] });
+}
+function R({
+  sections: e,
+  colors: l,
+  value: a,
+  onChange: s,
+  columns: c = 1,
+  withRecentColors: n
+}) {
+  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(
+      v,
+      {
+        section: {
+          key: "__recent",
+          label: "Recently used",
+          colors: m.map((o) => o.value),
+          value: a
+        },
+        columns: 1,
+        onChange: d,
+        isDark: r
+      }
+    ),
+    h.map((o) => /* @__PURE__ */ t(
+      v,
+      {
+        section: o,
+        columns: c,
+        onChange: d,
+        isDark: r
+      },
+      o.key
+    ))
+  ] });
+}
+export {
+  R as ColorPickerList
+};

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

@@ -0,0 +1,13 @@
+import type { ColorPickerOnChange, ColorSection } from './types';
+/** Toolbar dropdown with text colors (A icons) + highlights (circles) + recently used.
+ * Use inside Menu.Dropdown, Popover, or floating toolbar. */
+export interface ColorPickerToolbarProps {
+    sections: ColorSection[];
+    onChange: ColorPickerOnChange;
+    withRecentColors?: boolean;
+    maxRecentColors?: number;
+    disabled?: boolean;
+    recentColorsLabel?: string;
+}
+export declare const ColorPickerToolbar: import("react").ForwardRefExoticComponent<ColorPickerToolbarProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ColorPickerToolbar.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/ColorPicker/ColorPickerToolbar.js

@@ -0,0 +1,132 @@
+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";
+function k({
+  isActive: i,
+  round: m,
+  disabled: a,
+  onClick: h,
+  children: c
+}) {
+  return /* @__PURE__ */ o(
+    H,
+    {
+      type: "button",
+      className: `${t.inlineSwatch}${m ? ` ${t.inlineSwatchRound}` : ""}${i ? ` ${t.inlineSwatchActive}` : ""}`,
+      onMouseDown: (p) => p.preventDefault(),
+      onClick: h,
+      disabled: a,
+      children: c
+    }
+  );
+}
+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)
+        );
+        return [{ value: e, sectionKey: r, border: n }, ...f].slice(0, h);
+      })), m(e, r);
+    },
+    [m, a, g]
+  ), A = T(() => {
+    const e = {};
+    for (const r of i) e[r.key] = r;
+    return e;
+  }, [i]), b = w(
+    (e) => I(e) ? S ? "#FFFFFF" : "#000000" : e,
+    [S]
+  );
+  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(
+          k,
+          {
+            isActive: !1,
+            disabled: c,
+            onClick: () => d(e.value, e.sectionKey ?? ""),
+            children: /* @__PURE__ */ o(
+              F,
+              {
+                size: 20,
+                color: b(e.value),
+                showBorder: !0
+              }
+            )
+          },
+          `${e.sectionKey}-${e.value}-${r}`
+        ) : /* @__PURE__ */ o(
+          k,
+          {
+            isActive: !1,
+            round: !0,
+            disabled: c,
+            onClick: () => d(e.value, e.sectionKey ?? ""),
+            children: /* @__PURE__ */ o(
+              N,
+              {
+                bgColor: e.value,
+                borderColor: e.border || "var(--mantine-color-default-border)"
+              }
+            )
+          },
+          `${e.sectionKey}-${e.value}-${r}`
+        );
+      }) })
+    ] }),
+    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(
+            k,
+            {
+              isActive: s,
+              round: !0,
+              disabled: c,
+              onClick: () => d(l, e.key, f),
+              children: /* @__PURE__ */ o(
+                N,
+                {
+                  bgColor: l,
+                  borderColor: f || $
+                }
+              )
+            },
+            l
+          ) : /* @__PURE__ */ o(
+            k,
+            {
+              isActive: s,
+              disabled: c,
+              onClick: () => d(l, e.key),
+              children: /* @__PURE__ */ o(
+                F,
+                {
+                  size: 20,
+                  color: $,
+                  showBorder: !0
+                }
+              )
+            },
+            l
+          );
+        }) })
+      ] }, e.key);
+    })
+  ] });
+});
+export {
+  Q as ColorPickerToolbar
+};

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

@@ -0,0 +1,11 @@
+export declare function TextColorIcon({ size, color, showBorder, }: {
+    size?: number;
+    color?: string;
+    showBorder?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function HighlightSwatch({ size, bgColor, borderColor, }: {
+    size?: number;
+    bgColor: string;
+    borderColor: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=icons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/icons.tsx"],"names":[],"mappings":"AAAA,wBAAgB,aAAa,CAAC,EAC5B,IAAS,EACT,KAAoC,EACpC,UAAU,GACX,EAAE;IACD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,2CAgCA;AAED,wBAAgB,eAAe,CAAC,EAC9B,IAAS,EACT,OAAO,EACP,WAAW,GACZ,EAAE;IACD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;CACrB,2CA4BA"}