@layers-app/shared 0.4.7 → 0.4.8

package/dist/components/ColorPicker/ColorPickerList.js

@@ -1,32 +1,32 @@
-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";
+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";
 function j({
   type: e,
-  colorValue: l,
-  resolvedColor: n,
-  border: s,
-  bg: c
+  colorValue: n,
+  resolvedColor: i,
+  border: c,
+  bg: m
 }) {
   if (e === "text")
-    return /* @__PURE__ */ r(z, { size: 16, color: n, showBorder: !0 });
-  const a = b(l);
+    return /* @__PURE__ */ r(w, { size: 16, color: i, showBorder: !0 });
+  const a = N(n);
   return /* @__PURE__ */ r(
-    T,
+    R,
     {
-      color: a ? "var(--mantine-color-body)" : c || s || l,
+      color: a ? "var(--mantine-color-body)" : m || c || n,
       size: 16,
       radius: "xl",
-      className: i.listItemSwatch,
+      className: s.listItemSwatch,
       styles: {
         root: {
-          border: `1.5px solid ${a ? "var(--mantine-color-default-border)" : s || n}`
+          border: `1.5px solid ${a ? "var(--mantine-color-default-border)" : c || i}`
         },
         alphaOverlay: { display: "none" },
         shadowOverlay: { display: "none" }
@@ -34,102 +34,113 @@ function j({
     }
   );
 }
-function v({
+function g({
   section: e,
-  columns: l,
-  onChange: n,
-  isDark: s
+  columns: n,
+  onChange: i,
+  isDark: c,
+  itemCaption: m
 }) {
-  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 }),
+  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 }),
     /* @__PURE__ */ r(
       "div",
       {
-        className: p ? i.grid : void 0,
-        style: p ? { gridTemplateColumns: `repeat(${l}, minmax(0, 1fr))` } : void 0,
-        children: e.colors.map((d) => {
+        className: y ? s.grid : void 0,
+        style: y ? { gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` } : void 0,
+        children: e.colors.map((u) => {
           const {
-            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(
+            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(
             "button",
             {
               type: "button",
-              className: `${i.listItem} ${m ? i.listItemActive : ""}`,
-              onClick: () => n(o, e.key),
+              className: `${s.listItem} ${d ? s.listItemActive : ""}`,
+              onClick: () => i(l, e.key),
               children: [
                 /* @__PURE__ */ r(
                   j,
                   {
                     type: e.type,
-                    colorValue: o,
-                    resolvedColor: C,
-                    border: u,
-                    bg: h
+                    colorValue: l,
+                    resolvedColor: h,
+                    border: p,
+                    bg: f
                   }
                 ),
-                /* @__PURE__ */ r("span", { className: i.listItemLabel, children: I }),
-                m && /* @__PURE__ */ r(
-                  x,
+                /* @__PURE__ */ r("span", { className: s.listItemLabel, children: o }),
+                m && /* @__PURE__ */ r("span", { className: s.listItemCaption, children: m }),
+                d && /* @__PURE__ */ r(
+                  T,
                   {
                     size: 16,
-                    icon: k,
+                    icon: L,
                     color: "var(--mantine-primary-color-filled)"
                   }
                 )
               ]
             },
-            o
+            l
           );
         })
       }
     )
   ] });
 }
-function P({
+function J({
   sections: e,
-  colors: l,
-  value: n,
-  onChange: s,
-  columns: c = 1,
+  colors: n,
+  value: i,
+  onChange: c,
+  columns: m = 1,
   withRecentColors: a
 }) {
-  const d = L("light", {
+  const { t: v } = x("ui"), u = S("light", {
     getInitialValueInEffect: !0
-  }) === "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,
+  }) === "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,
       {
         section: {
-          key: "__recent",
-          label: "Recently used",
-          colors: o.map((t) => t.value),
-          value: n
+          key: t.sectionKey ?? "",
+          label: v("colorPicker.recentlyUsed"),
+          type: D(t.sectionKey),
+          colors: [
+            {
+              value: t.value,
+              label: h?.label,
+              border: t.border ?? h?.border
+            }
+          ]
         },
         columns: 1,
-        onChange: u,
-        isDark: d
+        itemCaption: z,
+        onChange: p,
+        isDark: u
       }
     ),
-    h.map((t) => /* @__PURE__ */ r(
-      v,
+    f.map((o) => /* @__PURE__ */ r(
+      g,
       {
-        section: t,
-        columns: c,
-        onChange: u,
-        isDark: d
+        section: o,
+        columns: m,
+        onChange: p,
+        isDark: u
       },
-      t.key
+      o.key
     ))
   ] });
 }
 export {
-  P as ColorPickerList
+  J as ColorPickerList
 };

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

@@ -8,6 +8,7 @@ export interface ColorPickerToolbarProps {
     maxRecentColors?: number;
     disabled?: boolean;
     recentColorsLabel?: string;
+    tooltipZIndex?: number;
 }
 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

@@ -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;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"}
+{"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;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAwCD,eAAO,MAAM,kBAAkB,oHA+M9B,CAAC"}

package/dist/components/ColorPicker/ColorPickerToolbar.js

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

package/dist/components/ColorPicker/icons.js

@@ -1,10 +1,10 @@
-import { jsx as n, jsxs as c } from "react/jsx-runtime";
+import { jsx as n, jsxs as a } from "react/jsx-runtime";
 function s({
   size: t = 20,
   color: r = "var(--mantine-color-white)",
   showBorder: e
 }) {
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ a(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -21,7 +21,7 @@ function s({
             width: "19",
             height: "19",
             rx: "5.5",
-            stroke: "var(--mantine-color-gray-4)",
+            stroke: "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
             strokeWidth: "1",
             fill: "none"
           }
@@ -37,7 +37,7 @@ function s({
     }
   );
 }
-function w({
+function d({
   size: t = 24,
   bgColor: r,
   borderColor: e
@@ -66,6 +66,6 @@ function w({
   );
 }
 export {
-  w as HighlightSwatch,
+  d as HighlightSwatch,
   s as TextColorIcon
 };

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

@@ -18,6 +18,11 @@ export interface RecentColorEntry {
     sectionKey?: string;
     border?: string;
 }
+export type RecentColorKind = 'text' | 'highlight';
+export declare function isTextSectionKey(sectionKey?: string): boolean;
+export declare function resolveRecentKind(sectionKey?: string): RecentColorKind;
+export declare const IS_APPLE: boolean;
+export declare const RECENT_COLOR_HOTKEY: string;
 export type ColorPickerOnChange = (value: string, sectionKey?: string) => void;
 export interface ColorPickerBaseProps {
     colors?: ColorItem[];
@@ -47,5 +52,6 @@ export declare function normalizeColorItem(item: ColorItem): {
     bg?: string;
 };
 export declare function isDefaultColor(value: string): boolean;
+export declare function colorsEqual(a?: string | null, b?: string | null): boolean;
 export declare const resolveColorLabel: (t: TFunction, value: string | null | undefined, explicitLabel?: string) => string;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,SAAS,GACjB,MAAM,GACN;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEpE,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CAC7B;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,mBAAmB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;AAE/E,MAAM,WAAW,oBAAoB;IACnC,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,sBACf,SAAQ,oBAAoB,EAC1B,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC7B,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,oBAAqB,SAAQ,oBAAoB;IAChE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,uBACf,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,GAAG,kBAAkB,CAAC,EACjE,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC7B,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CACnC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,SAAS,GAAG;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAEA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAErD;AAED,eAAO,MAAM,iBAAiB,GAC5B,GAAG,SAAS,EACZ,OAAO,MAAM,GAAG,IAAI,GAAG,SAAS,EAChC,gBAAgB,MAAM,KACrB,MAIF,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,SAAS,GACjB,MAAM,GACN;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEpE,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CAC7B;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,WAAW,CAAC;AAEnD,wBAAgB,gBAAgB,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAE7D;AAED,wBAAgB,iBAAiB,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,eAAe,CAEtE;AAED,eAAO,MAAM,QAAQ,SAEoD,CAAC;AAE1E,eAAO,MAAM,mBAAmB,QAAoC,CAAC;AAErE,MAAM,MAAM,mBAAmB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;AAE/E,MAAM,WAAW,oBAAoB;IACnC,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,sBACf,SAAQ,oBAAoB,EAC1B,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC7B,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,oBAAqB,SAAQ,oBAAoB;IAChE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,uBACf,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,GAAG,kBAAkB,CAAC,EACjE,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC7B,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CACnC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,SAAS,GAAG;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAEA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAErD;AA0CD,wBAAgB,WAAW,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,OAAO,CAIzE;AAED,eAAO,MAAM,iBAAiB,GAC5B,GAAG,SAAS,EACZ,OAAO,MAAM,GAAG,IAAI,GAAG,SAAS,EAChC,gBAAgB,MAAM,KACrB,MAIF,CAAC"}

package/dist/components/ColorPicker/types.js

@@ -1,16 +1,58 @@
-function f(r) {
-  return typeof r == "string" ? { value: r } : r;
+function f(t) {
+  return t === "textColor" || t === "color";
 }
-function e(r) {
-  return r === "inherit" || r === "" || r === "default";
+function g(t) {
+  return f(t) ? "text" : "highlight";
 }
-const s = (r, o, n) => {
-  if (n) return n;
-  const t = !o || e(o) ? "standard" : o;
-  return r(`colorPicker.colors.${t}`, { defaultValue: o || "" });
+const h = typeof navigator < "u" && /Mac|iPhone|iPod|iPad/i.test(navigator.platform || navigator.userAgent), d = h ? "⌘⇧H" : "Ctrl+Shift+H";
+function $(t) {
+  return typeof t == "string" ? { value: t } : t;
+}
+function p(t) {
+  return t === "inherit" || t === "" || t === "default";
+}
+function c(t) {
+  if (!t) return null;
+  const r = t.trim().toLowerCase();
+  if (r === "" || r === "inherit" || r === "default" || r === "transparent")
+    return "default";
+  const o = r.match(/^#([0-9a-f]{3,8})$/);
+  if (o) {
+    let n = o[1];
+    if ((n.length === 3 || n.length === 4) && (n = n.split("").map((e) => e + e).join("")), n.length === 6 || n.length === 8) {
+      const e = parseInt(n.slice(0, 2), 16), a = parseInt(n.slice(2, 4), 16), i = parseInt(n.slice(4, 6), 16), l = n.length === 8 ? parseInt(n.slice(6, 8), 16) / 255 : 1;
+      return `${e},${a},${i},${Math.round(l * 1e3) / 1e3}`;
+    }
+  }
+  const s = r.match(/^rgba?\(([^)]+)\)$/);
+  if (s) {
+    const n = s[1].split(",").map((e) => e.trim());
+    if (n.length >= 3) {
+      const e = parseInt(n[0], 10), a = parseInt(n[1], 10), i = parseInt(n[2], 10), l = n[3] !== void 0 ? parseFloat(n[3]) : 1;
+      if (![e, a, i].some(Number.isNaN)) {
+        const u = Number.isNaN(l) ? 1 : l;
+        return `${e},${a},${i},${Math.round(u * 1e3) / 1e3}`;
+      }
+    }
+  }
+  return r;
+}
+function m(t, r) {
+  const o = c(t), s = c(r);
+  return o !== null && s !== null && o === s;
+}
+const C = (t, r, o) => {
+  if (o) return o;
+  const s = !r || p(r) ? "standard" : r;
+  return t(`colorPicker.colors.${s}`, { defaultValue: r || "" });
 };
 export {
-  e as isDefaultColor,
-  f as normalizeColorItem,
-  s as resolveColorLabel
+  h as IS_APPLE,
+  d as RECENT_COLOR_HOTKEY,
+  m as colorsEqual,
+  p as isDefaultColor,
+  f as isTextSectionKey,
+  $ as normalizeColorItem,
+  C as resolveColorLabel,
+  g as resolveRecentKind
 };

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

@@ -1,7 +1,9 @@
-import type { RecentColorEntry } from './types';
+import type { RecentColorEntry, RecentColorKind } from './types';
 interface UseRecentColorsOptions {
     storageKey?: string;
     maxItems?: number;
+    onApplyShortcut?: (color: string, kind: RecentColorKind) => void;
+    shortcutScoped?: boolean;
 }
 export declare function useRecentColors(options?: UseRecentColorsOptions): {
     recentColors: RecentColorEntry[];

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

@@ -1 +1 @@
-{"version":3,"file":"useRecentColors.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/useRecentColors.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAKhD,UAAU,sBAAsB;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAmBD,wBAAgB,eAAe,CAAC,OAAO,CAAC,EAAE,sBAAsB;;uBAYpD,MAAM,eAAe,MAAM,WAAW,MAAM;;;EAsBvD"}
+{"version":3,"file":"useRecentColors.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/useRecentColors.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAQjE,UAAU,sBAAsB;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IACjE,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AA2BD,wBAAgB,eAAe,CAAC,OAAO,CAAC,EAAE,sBAAsB;;uBAepD,MAAM,eAAe,MAAM,WAAW,MAAM;;;EAkDvD"}