@layers-app/shared 0.3.0 → 0.3.2

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

@@ -1,22 +1,30 @@
 import { ColorSwatchProps, FlexProps } from '@mantine/core';
+import { ColorPickerList } from './ColorPickerList';
+import type { ColorItem } from './types';
 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: import("react").ForwardRefExoticComponent<ColorCircleProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const ColorPicker: import("react").ForwardRefExoticComponent<{
     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"> & import("react").RefAttributes<HTMLDivElement>> & {
     ColorCircle: import("react").ForwardRefExoticComponent<ColorCircleProps & import("react").RefAttributes<HTMLDivElement>>;
+    List: typeof ColorPickerList;
+    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":"AAIA,OAAO,EAIL,gBAAgB,EAEhB,SAAS,EAKV,MAAM,eAAe,CAAC;AA+GvB,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,6GA2CvB,CAAC;AASF,eAAO,MAAM,WAAW;YAxKd,MAAM,GAAG,IAAI;eACV,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;uBACX,OAAO;aACjB,MAAM,EAAE;kBACH,QAAQ,GAAG,QAAQ;eACtB,OAAO;gBACN,OAAO;iBACN,MAAM;;;CAmKnB,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;AAgHzC,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,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;YAvLd,MAAM,GAAG,IAAI;eACV,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;uBACX,OAAO;aACjB,SAAS,EAAE;kBACN,QAAQ,GAAG,QAAQ;oBACjB,QAAQ,GAAG,SAAS;eACzB,OAAO;gBACN,OAAO;iBACN,MAAM;;;;;CAmLnB,CAAC"}

package/dist/components/ColorPicker/ColorPicker.js

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

@@ -1,11 +1,11 @@
 import { PropsWithChildren } from 'react';
-interface ColorPickerPopoverProps {
+import { PopoverProps } from '@mantine/core';
+type ColorPickerPopoverProps = {
     value?: string;
     onChange?: (v: string) => void;
-    defaultOpened?: boolean;
-    size?: number;
-    radius?: number;
-}
-export declare const ColorPickerPopover: ({ value, onChange, defaultOpened, size, radius, children, }: PropsWithChildren<ColorPickerPopoverProps>) => import("react/jsx-runtime").JSX.Element;
+    opened?: boolean;
+    setOpened?: (opened: boolean) => void;
+} & Pick<PopoverProps, 'withinPortal' | 'floatingStrategy'>;
+export declare const ColorPickerPopover: ({ value, onChange, opened, setOpened, children, withinPortal, floatingStrategy, }: PropsWithChildren<ColorPickerPopoverProps>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ColorPickerPopover.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerPopover.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPickerPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAMpD,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,kBAAkB,GAAI,6DAOhC,iBAAiB,CAAC,uBAAuB,CAAC,4CAgC5C,CAAC"}
+{"version":3,"file":"ColorPickerPopover.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPickerPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAQ,YAAY,EAAE,MAAM,eAAe,CAAC;AAInD,KAAK,uBAAuB,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC,GAAG,IAAI,CAAC,YAAY,EAAE,cAAc,GAAG,kBAAkB,CAAC,CAAC;AAE5D,eAAO,MAAM,kBAAkB,GAAI,mFAQhC,iBAAiB,CAAC,uBAAuB,CAAC,4CA0B5C,CAAC"}

package/dist/components/ColorPicker/ColorPickerPopover.js

@@ -1,42 +1,40 @@
-import { jsxs as f, jsx as o } from "react/jsx-runtime";
-import { useState as h } from "react";
-import { Popover as t } from "@mantine/core";
-import { ColorPicker as n } from "./ColorPicker.js";
-const w = ({
-  value: r,
-  onChange: i,
-  defaultOpened: c,
-  size: l = 18,
-  radius: d,
-  children: p
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { useTranslation as a } from "react-i18next";
+import { Menu as r } from "@mantine/core";
+import { ColorPicker as d } from "./ColorPicker.js";
+const x = ({
+  value: i,
+  onChange: t,
+  opened: c,
+  setOpened: e,
+  children: n,
+  withinPortal: m,
+  floatingStrategy: p
 }) => {
-  const [s, e] = h(c);
-  return /* @__PURE__ */ f(
-    t,
+  const { t: s } = a("ui");
+  return /* @__PURE__ */ l(
+    r,
     {
-      opened: s,
+      opened: c,
       onChange: e,
       position: "bottom-start",
-      withArrow: !0,
+      withinPortal: m,
+      floatingStrategy: p,
       children: [
-        /* @__PURE__ */ o(t.Target, { children: /* @__PURE__ */ o("div", { onClick: () => e((m) => !m), style: { cursor: "pointer" }, children: p || /* @__PURE__ */ o(
-          n.ColorCircle,
-          {
-            value: r,
-            size: l,
-            radius: d
-          }
-        ) }) }),
-        /* @__PURE__ */ o(t.Dropdown, { maw: 270, children: /* @__PURE__ */ o("div", { onClick: () => e(!1), children: /* @__PURE__ */ o(
-          n,
-          {
-            ...i ? { value: r, onChange: i } : { defaultValue: r ?? void 0 }
-          }
-        ) }) })
+        /* @__PURE__ */ o(r.Target, { children: n }),
+        /* @__PURE__ */ l(r.Dropdown, { children: [
+          /* @__PURE__ */ o(r.Label, { px: 4, py: 0, mih: 17, mb: 6, children: s("colorPicker.color") }),
+          /* @__PURE__ */ o("div", { onClick: () => e?.(!1), children: /* @__PURE__ */ o(
+            d,
+            {
+              ...t ? { value: i, onChange: t } : { defaultValue: i ?? void 0 }
+            }
+          ) })
+        ] })
       ]
     }
   );
 };
 export {
-  w as ColorPickerPopover
+  x as ColorPickerPopover
 };

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"}