@layers-app/shared 0.3.0 → 0.3.2

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

package/dist/components/ColorPicker/icons.js

@@ -0,0 +1,71 @@
+import { jsx as n, jsxs as c } from "react/jsx-runtime";
+function s({
+  size: t = 20,
+  color: r = "var(--mantine-color-white)",
+  showBorder: e
+}) {
+  return /* @__PURE__ */ c(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: t,
+      height: t,
+      viewBox: "0 0 20 20",
+      fill: "none",
+      children: [
+        e && /* @__PURE__ */ n(
+          "rect",
+          {
+            x: "0.5",
+            y: "0.5",
+            width: "19",
+            height: "19",
+            rx: "5.5",
+            stroke: "var(--mantine-color-default-border)",
+            strokeWidth: "1",
+            fill: "none"
+          }
+        ),
+        /* @__PURE__ */ n("g", { transform: "translate(4.3, 2.85) 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",
+            fill: r === "inherit" || r === "currentColor" ? "var(--mantine-color-white)" : r
+          }
+        ) })
+      ]
+    }
+  );
+}
+function d({
+  size: t = 24,
+  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;
+  return /* @__PURE__ */ n(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: t,
+      height: t,
+      viewBox: `0 0 ${t} ${t}`,
+      fill: "none",
+      children: /* @__PURE__ */ n(
+        "circle",
+        {
+          cx: t / 2,
+          cy: t / 2,
+          r: i,
+          fill: l,
+          stroke: h,
+          strokeWidth: "1.5"
+        }
+      )
+    }
+  );
+}
+export {
+  d as HighlightSwatch,
+  s as TextColorIcon
+};

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

@@ -0,0 +1,49 @@
+import type { FlexProps } from '@mantine/core';
+export type ColorItem = string | {
+    value: string;
+    label?: string;
+    border?: string;
+    bg?: string;
+};
+export interface ColorSection {
+    key: string;
+    label: string;
+    colors: ColorItem[];
+    value?: string;
+    type?: 'text' | 'highlight';
+}
+export interface RecentColorEntry {
+    value: string;
+    sectionKey?: string;
+    border?: string;
+}
+export type ColorPickerOnChange = (value: string, sectionKey?: string) => void;
+export interface ColorPickerBaseProps {
+    colors?: ColorItem[];
+    sections?: ColorSection[];
+    value?: string;
+    onChange?: ColorPickerOnChange;
+    withRecentColors?: boolean;
+    maxRecentColors?: number;
+    swatchSize?: number;
+    withTick?: boolean;
+}
+export interface ColorPickerInlineProps extends ColorPickerBaseProps, Omit<FlexProps, 'onChange'> {
+    swatchShape?: 'circle' | 'square';
+    fullWidth?: boolean;
+    allowCustomColor?: boolean;
+}
+export interface ColorPickerListProps extends ColorPickerBaseProps {
+    columns?: number;
+}
+export interface ColorPickerCompactProps extends Omit<ColorPickerBaseProps, 'sections' | 'withRecentColors'>, Omit<FlexProps, 'onChange'> {
+    swatchShape?: 'circle' | 'square';
+}
+export declare function normalizeColorItem(item: ColorItem): {
+    value: string;
+    label: string;
+    border?: string;
+    bg?: string;
+};
+export declare function isDefaultColor(value: string): boolean;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +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;AAE/C,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG;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;AAEjG,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,CAChC,KAAK,EAAE,MAAM,EACb,UAAU,CAAC,EAAE,MAAM,KAChB,IAAI,CAAC;AAEV,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,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAKA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAErD"}

package/dist/components/ColorPicker/types.js

@@ -0,0 +1,10 @@
+function n(r) {
+  return typeof r == "string" ? { value: r, label: r } : { label: r.value, ...r };
+}
+function l(r) {
+  return r === "inherit" || r === "" || r === "default";
+}
+export {
+  l as isDefaultColor,
+  n as normalizeColorItem
+};

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

@@ -0,0 +1,13 @@
+import type { RecentColorEntry } from './types';
+interface UseRecentColorsOptions {
+    storageKey?: string;
+    maxItems?: number;
+}
+export declare function useRecentColors(options?: UseRecentColorsOptions): {
+    recentColors: RecentColorEntry[];
+    addRecent: (value: string, sectionKey?: string, border?: string) => void;
+    clearRecent: () => void;
+    reload: () => void;
+};
+export {};
+//# sourceMappingURL=useRecentColors.d.ts.map

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

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

package/dist/components/ColorPicker/useRecentColors.js

@@ -0,0 +1,39 @@
+import { useState as I, useCallback as c } from "react";
+const d = "color-picker-recent", p = 11;
+function n(e) {
+  try {
+    const t = localStorage.getItem(e);
+    return t ? JSON.parse(t) : [];
+  } catch {
+    return [];
+  }
+}
+function E(e, t, o) {
+  try {
+    localStorage.setItem(e, JSON.stringify(t.slice(0, o)));
+  } catch {
+  }
+}
+function v(e) {
+  const t = e?.storageKey ?? d, o = e?.maxItems ?? p, [i, r] = I(() => n(t)), S = c(() => {
+    r(n(t));
+  }, [t]), g = c(
+    (s, a, f) => {
+      const y = n(t).filter(
+        (m) => !(m.value === s && m.sectionKey === a)
+      ), l = [{ value: s, sectionKey: a, border: f }, ...y].slice(0, o);
+      E(t, l, o), r(l);
+    },
+    [t, o]
+  ), u = c(() => {
+    try {
+      localStorage.removeItem(t);
+    } catch {
+    }
+    r([]);
+  }, [t]);
+  return { recentColors: i, addRecent: g, clearRecent: u, reload: S };
+}
+export {
+  v as useRecentColors
+};

package/dist/components/CommentComposer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CommentComposer/index.tsx"],"names":[],"mappings":"AA2BA,OAAO,EAAE,oBAAoB,EAAwB,MAAM,SAAS,CAAC;AA0CrE,eAAO,MAAM,eAAe,GAAI,4EAQ7B,oBAAoB,4CAoctB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CommentComposer/index.tsx"],"names":[],"mappings":"AA4BA,OAAO,EAAE,oBAAoB,EAAwB,MAAM,SAAS,CAAC;AA0CrE,eAAO,MAAM,eAAe,GAAI,4EAQ7B,oBAAoB,4CAuctB,CAAC"}