@forgedevstack/bear 1.2.0 → 1.2.2

package/dist/components/TreeSelect/TreeSelect.js

@@ -1,27 +1,28 @@
-import { jsxs as S, jsx as r, Fragment as W } from "react/jsx-runtime";
-import { useState as v, useRef as V, useMemo as w, useEffect as X, useCallback as y } from "react";
-import { cn as p } from "../../utils/cn.js";
-import { DEFAULT_MAX_HEIGHT as U, LABEL_CLASSES as Z, SIZE_CLASSES as q, TRIGGER_CLASSES as J, DROPDOWN_CLASSES as K, SEARCH_CLASSES as Q, ERROR_CLASSES as Y, HELPER_CLASSES as $, ROOT_CLASSES as ee, TAG_CLASSES as re, CHEVRON_CLASSES as ae, INDENT_PX as te, NODE_DISABLED_CLASSES as se, NODE_SELECTED_CLASSES as le, NODE_CLASSES as ne } from "./TreeSelect.const.js";
-import { collectAllIds as ce, filterNodes as oe, findNodeById as g } from "./TreeSelect.utils.js";
-const R = ({ node: a, depth: l, selected: c, expanded: t, multiple: n, onToggleExpand: u, onSelect: h }) => {
-  const o = a.children && a.children.length > 0, f = t.has(a.id), b = c.has(a.id);
-  return /* @__PURE__ */ S(W, { children: [
-    /* @__PURE__ */ S(
+import { jsxs as p, jsx as r, Fragment as Q } from "react/jsx-runtime";
+import { useState as N, useRef as C, useMemo as D, useEffect as P, useCallback as y } from "react";
+import { cn as m } from "../../utils/cn.js";
+import { Portal as Y } from "../Portal/Portal.js";
+import { DEFAULT_MAX_HEIGHT as $, LABEL_CLASSES as ee, SIZE_CLASSES as re, TRIGGER_CLASSES as te, SEARCH_CLASSES as ae, DROPDOWN_CLASSES as se, ERROR_CLASSES as ne, HELPER_CLASSES as le, ROOT_CLASSES as ie, TAG_CLASSES as oe, CHEVRON_CLASSES as ce, INDENT_PX as de, NODE_DISABLED_CLASSES as be, NODE_SELECTED_CLASSES as me, NODE_CLASSES as ue } from "./TreeSelect.const.js";
+import { collectAllIds as he, filterNodes as pe, findNodeById as z } from "./TreeSelect.utils.js";
+const Se = 1e4, M = ({ node: a, depth: l, selected: o, expanded: s, multiple: i, onToggleExpand: S, onSelect: f }) => {
+  const c = a.children && a.children.length > 0, E = s.has(a.id), u = o.has(a.id);
+  return /* @__PURE__ */ p(Q, { children: [
+    /* @__PURE__ */ p(
       "div",
       {
-        className: p(ne, b && le, a.disabled && se),
-        style: { paddingLeft: l * te + 12 },
-        onClick: () => !a.disabled && h(a.id),
+        className: m(ue, u && me, a.disabled && be),
+        style: { paddingLeft: l * de + 12 },
+        onClick: () => !a.disabled && f(a.id),
         role: "treeitem",
-        "aria-selected": b,
-        "aria-expanded": o ? f : void 0,
+        "aria-selected": u,
+        "aria-expanded": c ? E : void 0,
         children: [
-          o ? /* @__PURE__ */ r(
+          c ? /* @__PURE__ */ r(
             "svg",
             {
-              className: p(ae, f && "bear-rotate-90"),
-              onClick: (m) => {
-                m.stopPropagation(), u(a.id);
+              className: m(ce, E && "bear-rotate-90"),
+              onClick: (h) => {
+                h.stopPropagation(), S(a.id);
               },
               fill: "none",
               viewBox: "0 0 24 24",
@@ -29,100 +30,131 @@ const R = ({ node: a, depth: l, selected: c, expanded: t, multiple: n, onToggleE
               children: /* @__PURE__ */ r("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
             }
           ) : /* @__PURE__ */ r("span", { className: "bear-w-4 bear-mr-1" }),
-          n && /* @__PURE__ */ r("span", { className: p("bear-w-4 bear-h-4 bear-mr-2 bear-border bear-rounded bear-flex bear-items-center bear-justify-center bear-text-xs", b ? "bear-bg-pink-500 bear-border-pink-500 bear-text-white" : "bear-border-gray-300 dark:bear-border-zinc-600"), children: b && "✓" }),
+          i && /* @__PURE__ */ r("span", { className: m("bear-w-4 bear-h-4 bear-mr-2 bear-border bear-rounded bear-flex bear-items-center bear-justify-center bear-text-xs", u ? "bear-bg-pink-500 bear-border-pink-500 bear-text-white" : "bear-border-gray-300 dark:bear-border-zinc-600"), children: u && "✓" }),
           a.icon && /* @__PURE__ */ r("span", { className: "bear-mr-1.5", children: a.icon }),
           /* @__PURE__ */ r("span", { className: "bear-truncate", children: a.label })
         ]
       }
     ),
-    o && f && a.children.map((m) => /* @__PURE__ */ r(R, { node: m, depth: l + 1, selected: c, expanded: t, multiple: n, onToggleExpand: u, onSelect: h }, m.id))
+    c && E && a.children.map((h) => /* @__PURE__ */ r(M, { node: h, depth: l + 1, selected: o, expanded: s, multiple: i, onToggleExpand: S, onSelect: f }, h.id))
   ] });
-}, pe = (a) => {
+}, Ae = (a) => {
   const {
     nodes: l,
-    value: c,
-    onChange: t,
-    multiple: n = !1,
-    label: u,
-    placeholder: h = "Select…",
-    disabled: o = !1,
-    clearable: f = !0,
-    searchable: b = !0,
-    expandAll: m = !1,
-    size: O = "md",
-    error: E,
-    helperText: k,
-    maxHeight: D = U,
-    className: I,
-    testId: T,
-    ...H
-  } = a, [N, x] = v(!1), [A, L] = v(""), C = V(null), j = w(() => ce(l), [l]), [z, B] = v(() => m ? j : /* @__PURE__ */ new Set()), i = w(() => c ? new Set(Array.isArray(c) ? c : [c]) : /* @__PURE__ */ new Set(), [c]);
-  X(() => {
-    const e = (s) => {
-      C.current && !C.current.contains(s.target) && (x(!1), L(""));
+    value: o,
+    onChange: s,
+    multiple: i = !1,
+    label: S,
+    placeholder: f = "Select…",
+    disabled: c = !1,
+    clearable: E = !0,
+    searchable: u = !0,
+    expandAll: h = !1,
+    size: B = "md",
+    error: w,
+    helperText: _,
+    maxHeight: H = $,
+    className: j,
+    testId: G,
+    ...W
+  } = a, [d, x] = N(!1), [L, A] = N(""), g = C(null), k = C(null), R = C(null), [v, F] = N({ top: 0, left: 0, width: 0 }), V = D(() => he(l), [l]), [X, Z] = N(() => h ? V : /* @__PURE__ */ new Set()), b = D(() => o ? new Set(Array.isArray(o) ? o : [o]) : /* @__PURE__ */ new Set(), [o]);
+  P(() => {
+    if (!d) return;
+    const e = () => {
+      var n;
+      const t = (n = k.current) == null ? void 0 : n.getBoundingClientRect();
+      t && F({
+        top: t.bottom + 4,
+        left: Math.max(8, Math.min(t.left, window.innerWidth - t.width - 8)),
+        width: t.width
+      });
+    };
+    return e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
+      window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
+    };
+  }, [d]), P(() => {
+    if (!d) return;
+    const e = (t) => {
+      var I, O;
+      const n = t.target;
+      (I = g.current) != null && I.contains(n) || (O = R.current) != null && O.contains(n) || (x(!1), A(""));
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, []);
-  const P = y((e) => {
-    B((s) => {
-      const d = new Set(s);
-      return d.has(e) ? d.delete(e) : d.add(e), d;
+  }, [d]);
+  const U = y((e) => {
+    Z((t) => {
+      const n = new Set(t);
+      return n.has(e) ? n.delete(e) : n.add(e), n;
     });
-  }, []), G = y((e) => {
-    if (n) {
-      const s = new Set(i);
-      s.has(e) ? s.delete(e) : s.add(e), t == null || t(Array.from(s));
+  }, []), q = y((e) => {
+    if (i) {
+      const t = new Set(b);
+      t.has(e) ? t.delete(e) : t.add(e), s == null || s(Array.from(t));
     } else
-      t == null || t(e), x(!1), L("");
-  }, [n, i, t]), M = y(() => {
-    t == null || t(n ? [] : "");
-  }, [n, t]), _ = A ? oe(l, A) : l, F = () => {
-    if (i.size === 0) return /* @__PURE__ */ r("span", { className: "bear-text-gray-400 dark:bear-text-zinc-500", children: h });
-    if (n)
-      return /* @__PURE__ */ r("div", { className: "bear-flex bear-flex-wrap bear-gap-1", children: Array.from(i).map((s) => {
-        const d = g(l, s);
-        return d ? /* @__PURE__ */ r("span", { className: re, children: d.label }, s) : null;
+      s == null || s(e), x(!1), A("");
+  }, [i, b, s]), J = y(() => {
+    s == null || s(i ? [] : "");
+  }, [i, s]), T = L ? pe(l, L) : l, K = () => {
+    if (b.size === 0) return /* @__PURE__ */ r("span", { className: "bear-text-gray-400 dark:bear-text-zinc-500", children: f });
+    if (i)
+      return /* @__PURE__ */ r("div", { className: "bear-flex bear-flex-wrap bear-gap-1", children: Array.from(b).map((t) => {
+        const n = z(l, t);
+        return n ? /* @__PURE__ */ r("span", { className: oe, children: n.label }, t) : null;
       }) });
-    const e = g(l, Array.from(i)[0]);
-    return (e == null ? void 0 : e.label) ?? h;
+    const e = z(l, Array.from(b)[0]);
+    return (e == null ? void 0 : e.label) ?? f;
   };
-  return /* @__PURE__ */ S("div", { ref: C, className: p(ee, I), "data-testid": T, ...H, children: [
-    u && /* @__PURE__ */ r("label", { className: Z, children: u }),
-    /* @__PURE__ */ S(
+  return /* @__PURE__ */ p("div", { ref: g, className: m(ie, j), "data-testid": G, ...W, children: [
+    S && /* @__PURE__ */ r("label", { className: ee, children: S }),
+    /* @__PURE__ */ p(
       "button",
       {
+        ref: k,
         type: "button",
-        disabled: o,
-        onClick: () => !o && x(!N),
-        className: p(J, q[O], o && "bear-opacity-50 bear-cursor-not-allowed"),
+        disabled: c,
+        onClick: () => !c && x(!d),
+        className: m(te, re[B], c && "bear-opacity-50 bear-cursor-not-allowed"),
         children: [
-          /* @__PURE__ */ r("span", { className: "bear-flex-1 bear-text-left bear-truncate", children: F() }),
-          /* @__PURE__ */ S("div", { className: "bear-flex bear-items-center bear-gap-1", children: [
-            f && i.size > 0 && /* @__PURE__ */ r("span", { className: "bear-text-gray-400 hover:bear-text-gray-600 bear-cursor-pointer", onClick: (e) => {
-              e.stopPropagation(), M();
+          /* @__PURE__ */ r("span", { className: "bear-flex-1 bear-text-left bear-truncate", children: K() }),
+          /* @__PURE__ */ p("div", { className: "bear-flex bear-items-center bear-gap-1", children: [
+            E && b.size > 0 && /* @__PURE__ */ r("span", { className: "bear-text-gray-400 hover:bear-text-gray-600 bear-cursor-pointer", onClick: (e) => {
+              e.stopPropagation(), J();
             }, children: "✕" }),
-            /* @__PURE__ */ r("svg", { className: p("bear-w-4 bear-h-4 bear-text-gray-400 bear-transition-transform", N && "bear-rotate-180"), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ r("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
+            /* @__PURE__ */ r("svg", { className: m("bear-w-4 bear-h-4 bear-text-gray-400 bear-transition-transform", d && "bear-rotate-180"), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ r("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
           ] })
         ]
       }
     ),
-    N && /* @__PURE__ */ S("div", { className: K, children: [
-      b && /* @__PURE__ */ r(
-        "input",
-        {
-          className: Q,
-          placeholder: "Search…",
-          value: A,
-          onChange: (e) => L(e.target.value),
-          autoFocus: !0
-        }
-      ),
-      /* @__PURE__ */ r("div", { style: { maxHeight: D }, className: "bear-overflow-y-auto", role: "tree", children: _.length > 0 ? _.map((e) => /* @__PURE__ */ r(R, { node: e, depth: 0, selected: i, expanded: z, multiple: n, onToggleExpand: P, onSelect: G }, e.id)) : /* @__PURE__ */ r("div", { className: "bear-py-6 bear-text-center bear-text-sm bear-text-gray-400", children: "No results" }) })
-    ] }),
-    E && /* @__PURE__ */ r("p", { className: Y, children: E }),
-    !E && k && /* @__PURE__ */ r("p", { className: $, children: k })
+    d && /* @__PURE__ */ r(Y, { children: /* @__PURE__ */ p(
+      "div",
+      {
+        ref: R,
+        className: m(se, "bear-fixed"),
+        style: {
+          top: v.top,
+          left: v.left,
+          width: v.width,
+          zIndex: Se
+        },
+        children: [
+          u && /* @__PURE__ */ r(
+            "input",
+            {
+              className: ae,
+              placeholder: "Search…",
+              value: L,
+              onChange: (e) => A(e.target.value),
+              autoFocus: !0
+            }
+          ),
+          /* @__PURE__ */ r("div", { style: { maxHeight: H }, className: "bear-overflow-y-auto", role: "tree", children: T.length > 0 ? T.map((e) => /* @__PURE__ */ r(M, { node: e, depth: 0, selected: b, expanded: X, multiple: i, onToggleExpand: U, onSelect: q }, e.id)) : /* @__PURE__ */ r("div", { className: "bear-py-6 bear-text-center bear-text-sm bear-text-gray-400", children: "No results" }) })
+        ]
+      }
+    ) }),
+    w && /* @__PURE__ */ r("p", { className: ne, children: w }),
+    !w && _ && /* @__PURE__ */ r("p", { className: le, children: _ })
   ] });
 };
 export {
-  pe as TreeSelect
+  Ae as TreeSelect
 };

package/dist/components/Watermark/Watermark.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),a=require("react"),y=require("../../utils/cn.cjs"),t=require("./Watermark.const.cjs"),M=O=>{const{children:x,text:c,image:l,fontSize:u=t.DEFAULT_FONT_SIZE,color:d,rotate:E=t.DEFAULT_ROTATE,opacity:m=t.DEFAULT_OPACITY,gap:f=t.DEFAULT_GAP,offset:h=t.DEFAULT_OFFSET,zIndex:R=t.DEFAULT_Z_INDEX,fontFamily:A,fontWeight:L=t.DEFAULT_FONT_WEIGHT,visible:g=!0,className:H,style:U,testId:w}=O,i=a.useRef(null),T=a.useRef(null),[_,C]=a.useState(!1);a.useEffect(()=>{const r=window.matchMedia("(prefers-color-scheme: dark)"),e=()=>{const s=document.documentElement.classList.contains("dark");C(s||r.matches)};e();const n=new MutationObserver(e);return n.observe(document.documentElement,{attributes:!0,attributeFilter:["class"]}),r.addEventListener("change",e),()=>{n.disconnect(),r.removeEventListener("change",e)}},[]);const F=a.useMemo(()=>{if(A)return A;if(typeof window<"u"){const r=getComputedStyle(document.documentElement).getPropertyValue("--bear-font-family");if(r.trim())return r.trim()}return t.DEFAULT_FONT_FAMILY},[A]),b=a.useMemo(()=>d||(_?t.DEFAULT_COLOR_DARK:t.DEFAULT_COLOR_LIGHT),[d,_]),v=a.useCallback(()=>{if(!g||!c&&!l)return"";const r=document.createElement("canvas"),e=r.getContext("2d");if(!e)return"";const n=Array.isArray(c)?c:c?[c]:[],s=u*t.LINE_HEIGHT_MULTIPLIER,N=n.length*s,I=f[0]+t.CANVAS_WIDTH_OFFSET,k=f[1]+N+t.CANVAS_EXTRA_PADDING;if(r.width=I,r.height=k,e.translate(I/t.HALF,k/t.HALF),e.rotate(E*t.DEG_TO_RAD),l){const o=new Image;o.crossOrigin="anonymous",o.src=l,e.globalAlpha=m,e.drawImage(o,-o.width/t.HALF,-o.height/t.HALF)}else e.font=`${L} ${u}px ${F}`,e.fillStyle=b,e.globalAlpha=m,e.textAlign="center",e.textBaseline="middle",n.forEach((o,S)=>{const W=(S-(n.length-1)/t.HALF)*s;e.fillText(o,0,W)});return r.toDataURL()},[c,l,u,b,E,m,f,F,L,g]),D=a.useMemo(()=>v(),[v]);return a.useEffect(()=>{const r=T.current;if(!r)return;const e=new MutationObserver(()=>{var n,s;(n=i.current)!=null&&n.contains(r)||(s=i.current)==null||s.appendChild(r)});return i.current&&e.observe(i.current,{childList:!0}),()=>e.disconnect()},[]),p.jsxs("div",{ref:i,className:y.cn("Bear-Watermark","bear-relative",H),style:U,"data-testid":w,children:[x,g&&D&&p.jsx("div",{ref:T,className:y.cn("Bear-Watermark__overlay","bear-absolute bear-inset-0 bear-pointer-events-none bear-bg-repeat"),style:{backgroundImage:`url(${D})`,backgroundPosition:`${h[0]}px ${h[1]}px`,zIndex:R},"aria-hidden":"true"})]})};exports.Watermark=M;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("react/jsx-runtime"),s=require("react"),z=require("../../context/BearProvider.cjs"),C=require("../../utils/cn.cjs"),t=require("./Watermark.const.cjs"),Y=w=>{const{children:S,text:c,image:d,fontSize:E=t.DEFAULT_FONT_SIZE,color:T,rotate:g=t.DEFAULT_ROTATE,opacity:_=t.DEFAULT_OPACITY,patternRepeat:v=t.PATTERN_REPEAT_MIN,gap:F=t.DEFAULT_GAP,offset:D=t.DEFAULT_OFFSET,zIndex:U=t.DEFAULT_Z_INDEX,fontFamily:L,fontWeight:k=t.DEFAULT_FONT_WEIGHT,visible:b=!0,className:W,style:G,testId:q}=w,i=s.useRef(null),R=s.useRef(null),m=s.useContext(z.BearContext),[$,B]=s.useState(!1);s.useEffect(()=>{if(m)return;const r=window.matchMedia("(prefers-color-scheme: dark)"),e=()=>{const o=document.documentElement,h=o.classList.contains("dark")||o.classList.contains("bear-dark")||r.matches;B(h)};e();const n=new MutationObserver(e);return n.observe(document.documentElement,{attributes:!0,attributeFilter:["class"]}),r.addEventListener("change",e),()=>{n.disconnect(),r.removeEventListener("change",e)}},[m]);const I=m?m.mode==="dark":$,p=s.useMemo(()=>{if(L)return L;if(typeof window<"u"){const r=document.documentElement,e=getComputedStyle(r).getPropertyValue("--bear-font-sans");if(e.trim())return e.trim();const n=getComputedStyle(r).getPropertyValue("--bear-font-family");if(n.trim())return n.trim()}return t.DEFAULT_FONT_FAMILY},[L]),y=s.useMemo(()=>T||(I?t.DEFAULT_COLOR_DARK:t.DEFAULT_COLOR_LIGHT),[T,I]),x=s.useCallback(()=>{if(!b||!c&&!d)return"";const r=document.createElement("canvas"),e=r.getContext("2d");if(!e)return"";const n=Array.isArray(c)?c:c?[c]:[],o=E*t.LINE_HEIGHT_MULTIPLIER,h=n.length*o,A=F[0]+t.CANVAS_WIDTH_OFFSET,f=F[1]+h+t.CANVAS_EXTRA_PADDING;r.width=A,r.height=f;const l=Math.min(t.PATTERN_REPEAT_MAX,Math.max(t.PATTERN_REPEAT_MIN,Math.floor(v))),O=A/l,N=f/l,M=(a,u)=>{e.save(),e.translate(a,u),e.rotate(g*t.DEG_TO_RAD),e.font=`${k} ${E}px ${p}`,e.fillStyle=y,e.globalAlpha=_,e.textAlign="center",e.textBaseline="middle",n.forEach((j,V)=>{const X=(V-(n.length-1)/t.HALF)*o;e.fillText(j,0,X)}),e.restore()};if(d){e.save(),e.translate(A/t.HALF,f/t.HALF),e.rotate(g*t.DEG_TO_RAD);const a=new Image;a.crossOrigin="anonymous",a.src=d,e.globalAlpha=_,e.drawImage(a,-a.width/t.HALF,-a.height/t.HALF),e.restore()}else if(l<=1)M(A/t.HALF,f/t.HALF);else for(let a=0;a<l;a++)for(let u=0;u<l;u++)M(u*O+O/t.HALF,a*N+N/t.HALF);return r.toDataURL()},[c,d,E,y,g,_,F,p,k,b,v]),H=s.useMemo(()=>x(),[x]);return s.useEffect(()=>{const r=R.current;if(!r)return;const e=new MutationObserver(()=>{var n,o;(n=i.current)!=null&&n.contains(r)||(o=i.current)==null||o.appendChild(r)});return i.current&&e.observe(i.current,{childList:!0}),()=>e.disconnect()},[]),P.jsxs("div",{ref:i,className:C.cn("Bear-Watermark","bear-relative",W),style:G,"data-testid":q,children:[S,b&&H&&P.jsx("div",{ref:R,className:C.cn("Bear-Watermark__overlay","bear-absolute bear-inset-0 bear-pointer-events-none bear-bg-repeat"),style:{backgroundImage:`url(${H})`,backgroundPosition:`${D[0]}px ${D[1]}px`,zIndex:U},"aria-hidden":"true"})]})};exports.Watermark=Y;

package/dist/components/Watermark/Watermark.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=16,_=-22,A=.15,E=[100,100],F=[0,0],L=9,D=400,I="rgba(0, 0, 0, 0.15)",O="rgba(255, 255, 255, 0.12)",s="system-ui, -apple-system, sans-serif",t=1.5,U=40,o=200,n=2,c=Math.PI/180;exports.CANVAS_EXTRA_PADDING=U;exports.CANVAS_WIDTH_OFFSET=o;exports.DEFAULT_COLOR_DARK=O;exports.DEFAULT_COLOR_LIGHT=I;exports.DEFAULT_FONT_FAMILY=s;exports.DEFAULT_FONT_SIZE=T;exports.DEFAULT_FONT_WEIGHT=D;exports.DEFAULT_GAP=E;exports.DEFAULT_OFFSET=F;exports.DEFAULT_OPACITY=A;exports.DEFAULT_ROTATE=_;exports.DEFAULT_Z_INDEX=L;exports.DEG_TO_RAD=c;exports.HALF=n;exports.LINE_HEIGHT_MULTIPLIER=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=16,A=-22,_=.22,E=[100,100],F=[0,0],L=9,D=400,I="rgba(0, 0, 0, 0.28)",s="rgba(255, 255, 255, 0.22)",t="system-ui, -apple-system, sans-serif",O=1.5,N=40,R=200,U=2,o=Math.PI/180,n=1,c=4;exports.CANVAS_EXTRA_PADDING=N;exports.CANVAS_WIDTH_OFFSET=R;exports.DEFAULT_COLOR_DARK=s;exports.DEFAULT_COLOR_LIGHT=I;exports.DEFAULT_FONT_FAMILY=t;exports.DEFAULT_FONT_SIZE=T;exports.DEFAULT_FONT_WEIGHT=D;exports.DEFAULT_GAP=E;exports.DEFAULT_OFFSET=F;exports.DEFAULT_OPACITY=_;exports.DEFAULT_ROTATE=A;exports.DEFAULT_Z_INDEX=L;exports.DEG_TO_RAD=o;exports.HALF=U;exports.LINE_HEIGHT_MULTIPLIER=O;exports.PATTERN_REPEAT_MAX=c;exports.PATTERN_REPEAT_MIN=n;

package/dist/components/Watermark/Watermark.const.d.ts

@@ -3,7 +3,7 @@ export declare const DEFAULT_FONT_SIZE = 16;
 /** Default rotation in degrees */
 export declare const DEFAULT_ROTATE = -22;
 /** Default opacity */
-export declare const DEFAULT_OPACITY = 0.15;
+export declare const DEFAULT_OPACITY = 0.22;
 /** Default gap [horizontal, vertical] in pixels */
 export declare const DEFAULT_GAP: [number, number];
 /** Default offset [x, y] in pixels */
@@ -13,9 +13,9 @@ export declare const DEFAULT_Z_INDEX = 9;
 /** Default font weight */
 export declare const DEFAULT_FONT_WEIGHT = 400;
 /** Default light mode color */
-export declare const DEFAULT_COLOR_LIGHT = "rgba(0, 0, 0, 0.15)";
+export declare const DEFAULT_COLOR_LIGHT = "rgba(0, 0, 0, 0.28)";
 /** Default dark mode color */
-export declare const DEFAULT_COLOR_DARK = "rgba(255, 255, 255, 0.12)";
+export declare const DEFAULT_COLOR_DARK = "rgba(255, 255, 255, 0.22)";
 /** Default font family */
 export declare const DEFAULT_FONT_FAMILY = "system-ui, -apple-system, sans-serif";
 /** Line height multiplier */
@@ -28,3 +28,6 @@ export declare const CANVAS_WIDTH_OFFSET = 200;
 export declare const HALF = 2;
 /** Degrees to radians conversion */
 export declare const DEG_TO_RAD: number;
+/** Min / max pattern repeat per axis */
+export declare const PATTERN_REPEAT_MIN = 1;
+export declare const PATTERN_REPEAT_MAX = 4;

package/dist/components/Watermark/Watermark.const.js

@@ -1,18 +1,20 @@
-const T = 16, _ = -22, A = 0.15, s = [100, 100], E = [0, 0], t = 9, F = 400, L = "rgba(0, 0, 0, 0.15)", D = "rgba(255, 255, 255, 0.12)", n = "system-ui, -apple-system, sans-serif", o = 1.5, c = 40, I = 200, O = 2, U = Math.PI / 180;
+const T = 16, A = -22, _ = 0.22, E = [100, 100], s = [0, 0], t = 9, F = 400, n = "rgba(0, 0, 0, 0.28)", o = "rgba(255, 255, 255, 0.22)", L = "system-ui, -apple-system, sans-serif", c = 1.5, D = 40, I = 200, O = 2, N = Math.PI / 180, R = 1, U = 4;
 export {
-  c as CANVAS_EXTRA_PADDING,
+  D as CANVAS_EXTRA_PADDING,
   I as CANVAS_WIDTH_OFFSET,
-  D as DEFAULT_COLOR_DARK,
-  L as DEFAULT_COLOR_LIGHT,
-  n as DEFAULT_FONT_FAMILY,
+  o as DEFAULT_COLOR_DARK,
+  n as DEFAULT_COLOR_LIGHT,
+  L as DEFAULT_FONT_FAMILY,
   T as DEFAULT_FONT_SIZE,
   F as DEFAULT_FONT_WEIGHT,
-  s as DEFAULT_GAP,
-  E as DEFAULT_OFFSET,
-  A as DEFAULT_OPACITY,
-  _ as DEFAULT_ROTATE,
+  E as DEFAULT_GAP,
+  s as DEFAULT_OFFSET,
+  _ as DEFAULT_OPACITY,
+  A as DEFAULT_ROTATE,
   t as DEFAULT_Z_INDEX,
-  U as DEG_TO_RAD,
+  N as DEG_TO_RAD,
   O as HALF,
-  o as LINE_HEIGHT_MULTIPLIER
+  c as LINE_HEIGHT_MULTIPLIER,
+  U as PATTERN_REPEAT_MAX,
+  R as PATTERN_REPEAT_MIN
 };

package/dist/components/Watermark/Watermark.js

@@ -1,88 +1,114 @@
-import { jsxs as M, jsx as P } from "react/jsx-runtime";
-import { useRef as k, useState as $, useEffect as O, useMemo as E, useCallback as B } from "react";
-import { cn as x } from "../../utils/cn.js";
-import { DEFAULT_FONT_SIZE as V, DEFAULT_ROTATE as j, DEFAULT_OPACITY as z, DEFAULT_GAP as X, DEFAULT_OFFSET as Y, DEFAULT_Z_INDEX as Z, DEFAULT_FONT_WEIGHT as q, DEFAULT_FONT_FAMILY as K, DEFAULT_COLOR_DARK as J, DEFAULT_COLOR_LIGHT as Q, CANVAS_WIDTH_OFFSET as ee, CANVAS_EXTRA_PADDING as te, HALF as c, DEG_TO_RAD as re, LINE_HEIGHT_MULTIPLIER as ne } from "./Watermark.const.js";
-const ie = (y) => {
+import { jsxs as K, jsx as J } from "react/jsx-runtime";
+import { useRef as U, useContext as Q, useState as ee, useEffect as M, useMemo as F, useCallback as te } from "react";
+import { BearContext as re } from "../../context/BearProvider.js";
+import { cn as P } from "../../utils/cn.js";
+import { DEFAULT_FONT_SIZE as ne, DEFAULT_ROTATE as ae, DEFAULT_OPACITY as oe, PATTERN_REPEAT_MIN as H, DEFAULT_GAP as se, DEFAULT_OFFSET as ce, DEFAULT_Z_INDEX as ie, DEFAULT_FONT_WEIGHT as le, DEFAULT_FONT_FAMILY as me, DEFAULT_COLOR_DARK as ue, DEFAULT_COLOR_LIGHT as de, CANVAS_WIDTH_OFFSET as fe, CANVAS_EXTRA_PADDING as ge, HALF as a, DEG_TO_RAD as S, LINE_HEIGHT_MULTIPLIER as Ee, PATTERN_REPEAT_MAX as Ae } from "./Watermark.const.js";
+const Fe = (W) => {
   const {
-    children: U,
-    text: o,
-    image: i,
-    fontSize: l = V,
-    color: u,
-    rotate: h = j,
-    opacity: m = z,
-    gap: d = X,
-    offset: A = Y,
-    zIndex: w = Z,
-    fontFamily: f,
-    fontWeight: T = q,
-    visible: g = !0,
-    className: C,
-    style: N,
-    testId: R
-  } = y, s = k(null), _ = k(null), [b, H] = $(!1);
-  O(() => {
+    children: G,
+    text: s,
+    image: m,
+    fontSize: g = ne,
+    color: E,
+    rotate: A = ae,
+    opacity: T = oe,
+    patternRepeat: L = H,
+    gap: h = se,
+    offset: v = ce,
+    zIndex: $ = ie,
+    fontFamily: _,
+    fontWeight: D = le,
+    visible: b = !0,
+    className: B,
+    style: V,
+    testId: X
+  } = W, c = U(null), k = U(null), u = Q(re), [j, z] = ee(!1);
+  M(() => {
+    if (u) return;
     const t = window.matchMedia("(prefers-color-scheme: dark)"), e = () => {
-      const n = document.documentElement.classList.contains("dark");
-      H(n || t.matches);
+      const o = document.documentElement, p = o.classList.contains("dark") || o.classList.contains("bear-dark") || t.matches;
+      z(p);
     };
     e();
     const r = new MutationObserver(e);
     return r.observe(document.documentElement, { attributes: !0, attributeFilter: ["class"] }), t.addEventListener("change", e), () => {
       r.disconnect(), t.removeEventListener("change", e);
     };
-  }, []);
-  const L = E(() => {
-    if (f) return f;
+  }, [u]);
+  const I = u ? u.mode === "dark" : j, x = F(() => {
+    if (_) return _;
     if (typeof window < "u") {
-      const t = getComputedStyle(document.documentElement).getPropertyValue("--bear-font-family");
-      if (t.trim()) return t.trim();
+      const t = document.documentElement, e = getComputedStyle(t).getPropertyValue("--bear-font-sans");
+      if (e.trim()) return e.trim();
+      const r = getComputedStyle(t).getPropertyValue("--bear-font-family");
+      if (r.trim()) return r.trim();
     }
-    return K;
-  }, [f]), D = E(() => u || (b ? J : Q), [u, b]), F = B(() => {
-    if (!g || !o && !i) return "";
+    return me;
+  }, [_]), y = F(() => E || (I ? ue : de), [E, I]), R = te(() => {
+    if (!b || !s && !m) return "";
     const t = document.createElement("canvas"), e = t.getContext("2d");
     if (!e) return "";
-    const r = Array.isArray(o) ? o : o ? [o] : [], n = l * ne, S = r.length * n, v = d[0] + ee, I = d[1] + S + te;
-    if (t.width = v, t.height = I, e.translate(v / c, I / c), e.rotate(h * re), i) {
-      const a = new Image();
-      a.crossOrigin = "anonymous", a.src = i, e.globalAlpha = m, e.drawImage(a, -a.width / c, -a.height / c);
-    } else
-      e.font = `${T} ${l}px ${L}`, e.fillStyle = D, e.globalAlpha = m, e.textAlign = "center", e.textBaseline = "middle", r.forEach((a, W) => {
-        const G = (W - (r.length - 1) / c) * n;
-        e.fillText(a, 0, G);
-      });
+    const r = Array.isArray(s) ? s : s ? [s] : [], o = g * Ee, p = r.length * o, d = h[0] + fe, f = h[1] + p + ge;
+    t.width = d, t.height = f;
+    const i = Math.min(Ae, Math.max(H, Math.floor(L))), N = d / i, C = f / i, w = (n, l) => {
+      e.save(), e.translate(n, l), e.rotate(A * S), e.font = `${D} ${g}px ${x}`, e.fillStyle = y, e.globalAlpha = T, e.textAlign = "center", e.textBaseline = "middle", r.forEach((Y, Z) => {
+        const q = (Z - (r.length - 1) / a) * o;
+        e.fillText(Y, 0, q);
+      }), e.restore();
+    };
+    if (m) {
+      e.save(), e.translate(d / a, f / a), e.rotate(A * S);
+      const n = new Image();
+      n.crossOrigin = "anonymous", n.src = m, e.globalAlpha = T, e.drawImage(n, -n.width / a, -n.height / a), e.restore();
+    } else if (i <= 1)
+      w(d / a, f / a);
+    else
+      for (let n = 0; n < i; n++)
+        for (let l = 0; l < i; l++)
+          w(l * N + N / a, n * C + C / a);
     return t.toDataURL();
-  }, [o, i, l, D, h, m, d, L, T, g]), p = E(() => F(), [F]);
-  return O(() => {
-    const t = _.current;
+  }, [
+    s,
+    m,
+    g,
+    y,
+    A,
+    T,
+    h,
+    x,
+    D,
+    b,
+    L
+  ]), O = F(() => R(), [R]);
+  return M(() => {
+    const t = k.current;
     if (!t) return;
     const e = new MutationObserver(() => {
-      var r, n;
-      (r = s.current) != null && r.contains(t) || (n = s.current) == null || n.appendChild(t);
+      var r, o;
+      (r = c.current) != null && r.contains(t) || (o = c.current) == null || o.appendChild(t);
     });
-    return s.current && e.observe(s.current, { childList: !0 }), () => e.disconnect();
-  }, []), /* @__PURE__ */ M(
+    return c.current && e.observe(c.current, { childList: !0 }), () => e.disconnect();
+  }, []), /* @__PURE__ */ K(
     "div",
     {
-      ref: s,
-      className: x("Bear-Watermark", "bear-relative", C),
-      style: N,
-      "data-testid": R,
+      ref: c,
+      className: P("Bear-Watermark", "bear-relative", B),
+      style: V,
+      "data-testid": X,
       children: [
-        U,
-        g && p && /* @__PURE__ */ P(
+        G,
+        b && O && /* @__PURE__ */ J(
           "div",
           {
-            ref: _,
-            className: x(
+            ref: k,
+            className: P(
               "Bear-Watermark__overlay",
               "bear-absolute bear-inset-0 bear-pointer-events-none bear-bg-repeat"
             ),
             style: {
-              backgroundImage: `url(${p})`,
-              backgroundPosition: `${A[0]}px ${A[1]}px`,
-              zIndex: w
+              backgroundImage: `url(${O})`,
+              backgroundPosition: `${v[0]}px ${v[1]}px`,
+              zIndex: $
             },
             "aria-hidden": "true"
           }
@@ -92,5 +118,5 @@ const ie = (y) => {
   );
 };
 export {
-  ie as Watermark
+  Fe as Watermark
 };

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

@@ -14,6 +14,8 @@ export interface WatermarkProps {
     rotate?: number;
     /** Opacity (0-1) */
     opacity?: number;
+    /** How many staggered copies of the mark to paint inside each pattern tile (1–4 per axis). Higher = denser field. */
+    patternRepeat?: number;
     /** Gap between watermarks [horizontal, vertical] */
     gap?: [number, number];
     /** Offset from top-left [x, y] */