@forgedevstack/bear 1.3.0 → 1.3.2

package/dist/components/Typography/Typography.js

@@ -1,89 +1,84 @@
-import { jsx as c } from "react/jsx-runtime";
-import { useContext as k, useMemo as m } from "react";
-import { BearContext as v } from "../../context/BearProvider.js";
-import { GradientText as F } from "../GradientText/GradientText.js";
-import { Typewriter as G } from "../Typewriter/Typewriter.js";
-import { DEFAULT_VARIANT as O, DEFAULT_COLOR as V, VARIANT_MAP as U, WEIGHT_VALUES as z, LINE_HEIGHT_CLASSES as D, COLOR_CLASSES as T, ALIGN_CLASSES as M, WEIGHT_CLASSES as j, VARIANT_CLASSES as P, BUILT_IN_VARIANTS as $ } from "./Typography.const.js";
-import { cn as q } from "../../utils/cn.js";
-const re = (A) => {
+import { jsx as S } from "react/jsx-runtime";
+import { useContext as G } from "react";
+import { BearContext as H } from "../../context/BearProvider.js";
+import { BOOLEAN_FALSE as r, BOOLEAN_TRUE as u } from "../../constants/generals.const.js";
+import { Typewriter as U } from "../Typewriter/Typewriter.js";
+import { DEFAULT_VARIANT as V, DEFAULT_COLOR as W, VARIANT_MAP as F, LINE_HEIGHT_CLASSES as D, COLOR_CLASSES as A, ALIGN_CLASSES as P, WEIGHT_CLASSES as j, VARIANT_CLASSES as M, BUILT_IN_VARIANTS as $ } from "./Typography.const.js";
+import { resolveCustomTypographyStyles as q, wrapTypographyGradient as z, resolveGradientPair as J } from "./Typography.utils.js";
+import { cn as K } from "../../utils/cn.js";
+const ae = (T) => {
+  var d;
   const {
-    variant: r = O,
-    component: l,
-    align: h,
-    weight: u,
-    color: i = V,
-    truncate: f = !1,
-    maxLines: s,
-    italic: C = !1,
-    underline: b = !1,
-    strikethrough: L = !1,
-    noWrap: I = !1,
-    inline: y = !1,
-    paragraph: E = !1,
-    lineHeight: g,
-    gradient: p,
-    typewriter: t,
-    children: _,
-    className: x,
-    style: B,
-    testId: N,
-    ...W
-  } = A, n = k(v), a = $.includes(r), e = m(() => {
-    if (!(a || !(n != null && n.customTypography)))
-      return n.customTypography[r];
-  }, [a, n == null ? void 0 : n.customTypography, r]), w = m(() => l || (e != null && e.component ? e.component : a ? U[r] : "span"), [l, e, a, r]), S = i && !(i in T), H = m(() => {
-    if (!e) return {};
-    const o = {};
-    return e.fontSize && (o.fontSize = e.fontSize), e.lineHeight && (o.lineHeight = e.lineHeight), e.letterSpacing && (o.letterSpacing = e.letterSpacing), e.textTransform && (o.textTransform = e.textTransform), e.fontFamily && (o.fontFamily = e.fontFamily), e.fontWeight && (o.fontWeight = typeof e.fontWeight == "number" ? e.fontWeight : z[e.fontWeight] || 400), o;
-  }, [e]), d = t ? /* @__PURE__ */ c(
-    G,
+    variant: t = V,
+    component: g,
+    align: l,
+    weight: c,
+    color: o = W,
+    truncate: i = r,
+    maxLines: a,
+    italic: C = r,
+    underline: L = r,
+    strikethrough: E = r,
+    noWrap: b = r,
+    inline: m = r,
+    paragraph: B = r,
+    lineHeight: y,
+    gradient: _,
+    typewriter: e,
+    children: I,
+    className: N,
+    style: f,
+    testId: w,
+    ...O
+  } = T, p = G(H), s = $.includes(t), n = s || (d = p == null ? void 0 : p.customTypography) == null ? void 0 : d[t], x = g ?? (n == null ? void 0 : n.component) ?? (s ? F[t] : "span"), h = !!(o && !(o in A)), R = q(n), v = e ? /* @__PURE__ */ S(
+    U,
     {
-      text: t.texts,
-      loop: t.loop ?? !0,
-      speed: t.speed,
-      deleteSpeed: t.deleteSpeed,
-      cursor: t.cursor ?? !0,
-      cursorChar: t.cursorChar,
+      text: e.texts,
+      loop: e.loop ?? u,
+      speed: e.speed,
+      deleteSpeed: e.deleteSpeed,
+      cursor: e.cursor ?? u,
+      cursorChar: e.cursorChar,
       as: "span"
     }
-  ) : _, R = p && Array.isArray(p) && p.length >= 2 ? /* @__PURE__ */ c(F, { colors: p, className: y ? "bear-inline" : void 0, children: d }) : d;
-  return /* @__PURE__ */ c(
-    w,
+  ) : I, k = z(v, J(_), m);
+  return /* @__PURE__ */ S(
+    x,
     {
-      className: q(
+      className: K(
         "Bear-Typography",
-        `Bear-Typography--${r}`,
-        a && P[r],
-        u && j[u],
-        h && M[h],
-        !S && i && T[i],
-        g && D[g],
+        `Bear-Typography--${t}`,
+        s && M[t],
+        c && j[c],
+        l && P[l],
+        !h && o && A[o],
+        y && D[y],
         C && "Bear-Typography--italic bear-italic",
-        b && "Bear-Typography--underline bear-underline",
-        L && "Bear-Typography--strikethrough bear-line-through",
-        I && "bear-whitespace-nowrap",
-        y && "bear-inline",
-        E && "bear-mb-4",
-        f && !s && "Bear-Typography--truncate bear-truncate",
-        f && s && "bear-overflow-hidden",
-        x
+        L && "Bear-Typography--underline bear-underline",
+        E && "Bear-Typography--strikethrough bear-line-through",
+        b && "bear-whitespace-nowrap",
+        m && "bear-inline",
+        B && "bear-mb-4",
+        i && !a && "Bear-Typography--truncate bear-truncate",
+        i && a && "bear-overflow-hidden",
+        N
       ),
       style: {
-        ...H,
-        ...B,
-        ...S && { color: i },
-        ...f && s && {
+        ...R,
+        ...f,
+        ...h ? { color: o } : {},
+        ...i && a ? {
           display: "-webkit-box",
-          WebkitLineClamp: s,
+          WebkitLineClamp: a,
           WebkitBoxOrient: "vertical"
-        }
+        } : {}
       },
-      "data-testid": N,
-      ...W,
-      children: R
+      "data-testid": w,
+      ...O,
+      children: k
     }
   );
 };
 export {
-  re as Typography
+  ae as Typography
 };

package/dist/components/Typography/Typography.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),n=require("../../constants/numbers.const.cjs"),l=require("../GradientText/GradientText.cjs"),s=require("./Typography.const.cjs"),f=["fontSize","lineHeight","letterSpacing","textTransform","fontFamily"],u=e=>{if(!e)return{};const r=f.reduce((t,i)=>{const o=e[i];return o&&(t[i]=o),t},{});return e.fontWeight===void 0||(r.fontWeight=typeof e.fontWeight=="number"?e.fontWeight:s.WEIGHT_VALUES[e.fontWeight]??s.WEIGHT_VALUES.normal),r},h=e=>{if(!(!Array.isArray(e)||e.length<n.TWO))return[e[n.ZERO],e[n.ONE]]},y=(e,r,t)=>r?a.jsx(l.GradientText,{colors:r,className:t?"bear-inline":void 0,children:e}):e;exports.resolveCustomTypographyStyles=u;exports.resolveGradientPair=h;exports.wrapTypographyGradient=y;

package/dist/components/Typography/Typography.utils.d.ts

@@ -0,0 +1,5 @@
+import { CSSProperties, ReactNode } from 'react';
+import { CustomTypography } from './Typography.types';
+export declare const resolveCustomTypographyStyles: (customTypo?: CustomTypography) => CSSProperties;
+export declare const resolveGradientPair: (gradient?: string[]) => [string, string] | undefined;
+export declare const wrapTypographyGradient: (content: ReactNode, gradient: [string, string] | undefined, inline: boolean) => ReactNode;

package/dist/components/Typography/Typography.utils.js

@@ -0,0 +1,26 @@
+import { jsx as f } from "react/jsx-runtime";
+import { TWO as l, ZERO as s, ONE as a } from "../../constants/numbers.const.js";
+import { GradientText as h } from "../GradientText/GradientText.js";
+import { WEIGHT_VALUES as o } from "./Typography.const.js";
+const m = [
+  "fontSize",
+  "lineHeight",
+  "letterSpacing",
+  "textTransform",
+  "fontFamily"
+], v = (r) => {
+  if (!r) return {};
+  const e = m.reduce((t, n) => {
+    const i = r[n];
+    return i && (t[n] = i), t;
+  }, {});
+  return r.fontWeight === void 0 || (e.fontWeight = typeof r.fontWeight == "number" ? r.fontWeight : o[r.fontWeight] ?? o.normal), e;
+}, E = (r) => {
+  if (!(!Array.isArray(r) || r.length < l))
+    return [r[s], r[a]];
+}, u = (r, e, t) => e ? /* @__PURE__ */ f(h, { colors: e, className: t ? "bear-inline" : void 0, children: r }) : r;
+export {
+  v as resolveCustomTypographyStyles,
+  E as resolveGradientPair,
+  u as wrapTypographyGradient
+};

package/dist/components/VirtualList/VirtualList.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),a=require("react"),T=require("../../utils/cn.cjs"),g=require("../../hooks/useResizeObserver/useResizeObserver.cjs");require("../../context/BearProvider.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");require("../FormControl/FormControl.context.cjs");const j=require("./VirtualList.const.cjs");function I({items:n,itemHeight:r,overscan:i=3,height:e,renderItem:f,keyExtractor:x=(o,l)=>l,className:p}){const[o,l]=a.useState(0),t=a.useRef(null),{height:u}=g.useResizeObserver(t,{enabled:typeof e=="string"}),v=typeof e=="number"?e:u>0?u:j.VIRTUAL_LIST_FALLBACK_HEIGHT,h=n.length*r,c=Math.max(0,Math.floor(o/r)-i),y=Math.min(n.length-1,Math.ceil((o+v)/r)+i),q=n.slice(c,y+1),L=c*r,R=a.useCallback(()=>{t.current&&l(t.current.scrollTop)},[]);return s.jsx("div",{ref:t,className:T.cn("Bear-VirtualList bear-overflow-auto bear-bg-white dark:bear-bg-zinc-900 bear-rounded-lg",p),style:{height:typeof e=="number"?`${e}px`:e},onScroll:R,children:s.jsx("div",{className:"bear-relative",style:{height:`${h}px`},children:s.jsx("div",{style:{transform:`translateY(${L}px)`},children:q.map((d,S)=>{const b=c+S;return s.jsx("div",{style:{height:`${r}px`},children:f(d,b)},x(d,b))})})})})}exports.VirtualList=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),a=require("react"),r=require("../../constants/numbers.const.cjs"),S=require("../../utils/cn.cjs"),T=require("../../hooks/useResizeObserver/useResizeObserver.cjs");require("../../context/BearProvider.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");require("../FormControl/FormControl.context.cjs");const g=require("./VirtualList.const.cjs");function E(m){const{items:i,itemHeight:t,overscan:u=g.VIRTUAL_LIST_OVERSCAN,height:e,renderItem:f,keyExtractor:x=(c,l)=>l,className:p}=m,[h,v]=a.useState(r.ZERO),s=a.useRef(null),{height:d}=T.useResizeObserver(s,{enabled:typeof e=="string"}),R=typeof e=="number"?e:d>r.ZERO?d:g.VIRTUAL_LIST_FALLBACK_HEIGHT,y=i.length*t,o=Math.max(r.ZERO,Math.floor(h/t)-u),L=Math.min(i.length-r.ONE,Math.ceil((h+R)/t)+u),q=i.slice(o,L+r.ONE),I=o*t,O=a.useCallback(()=>{s.current&&v(s.current.scrollTop)},[]);return n.jsx("div",{ref:s,className:S.cn("Bear-VirtualList bear-overflow-auto bear-bg-white dark:bear-bg-zinc-900 bear-rounded-lg",p),style:{height:typeof e=="number"?`${e}px`:e},onScroll:O,children:n.jsx("div",{className:"bear-relative",style:{height:`${y}px`},children:n.jsx("div",{style:{transform:`translateY(${I}px)`},children:q.map((c,l)=>{const b=o+l;return n.jsx("div",{style:{height:`${t}px`},children:f(c,b)},x(c,b))})})})})}exports.VirtualList=E;

package/dist/components/VirtualList/VirtualList.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const L=300;exports.VIRTUAL_LIST_FALLBACK_HEIGHT=L;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("../../constants/numbers.const.cjs"),L=T.THREE,_=T.THREE_HUNDRED;exports.VIRTUAL_LIST_FALLBACK_HEIGHT=_;exports.VIRTUAL_LIST_OVERSCAN=L;

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

@@ -1,2 +1,2 @@
-export declare const V_I_R_T_U_A_L_L_I_S_T_ROOT_CLASS = "Bear-VirtualList";
+export declare const VIRTUAL_LIST_OVERSCAN = 3;
 export declare const VIRTUAL_LIST_FALLBACK_HEIGHT = 300;

package/dist/components/VirtualList/VirtualList.const.js

@@ -1,4 +1,6 @@
-const L = 300;
+import { THREE as E, THREE_HUNDRED as T } from "../../constants/numbers.const.js";
+const R = E, _ = T;
 export {
-  L as VIRTUAL_LIST_FALLBACK_HEIGHT
+  _ as VIRTUAL_LIST_FALLBACK_HEIGHT,
+  R as VIRTUAL_LIST_OVERSCAN
 };

package/dist/components/VirtualList/VirtualList.d.ts

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
 import { VirtualListProps } from './VirtualList.types';
-export declare function VirtualList<T>({ items, itemHeight, overscan, height, renderItem, keyExtractor, className, }: VirtualListProps<T>): ReactElement;
+export declare function VirtualList<T>(props: VirtualListProps<T>): ReactElement;

package/dist/components/VirtualList/VirtualList.js

@@ -1,42 +1,43 @@
 import { jsx as o } from "react/jsx-runtime";
-import { useState as T, useRef as S, useCallback as g } from "react";
-import { cn as M } from "../../utils/cn.js";
-import { useResizeObserver as R } from "../../hooks/useResizeObserver/useResizeObserver.js";
+import { useState as S, useRef as H, useCallback as _ } from "react";
+import { ZERO as a, ONE as d } from "../../constants/numbers.const.js";
+import { cn as A } from "../../utils/cn.js";
+import { useResizeObserver as E } from "../../hooks/useResizeObserver/useResizeObserver.js";
 import "../../context/BearProvider.js";
 import "../../hooks/useBearComponent/useBearComponent.js";
 import "../FormControl/FormControl.context.js";
-import { VIRTUAL_LIST_FALLBACK_HEIGHT as _ } from "./VirtualList.const.js";
-function N({
-  items: n,
-  itemHeight: e,
-  overscan: c = 3,
-  height: r,
-  renderItem: f,
-  keyExtractor: u = (l, s) => s,
-  className: m
-}) {
-  const [l, s] = T(0), t = S(null), { height: i } = R(t, {
-    enabled: typeof r == "string"
-  }), b = typeof r == "number" ? r : i > 0 ? i : _, x = n.length * e, a = Math.max(0, Math.floor(l / e) - c), h = Math.min(
-    n.length - 1,
-    Math.ceil((l + b) / e) + c
-  ), v = n.slice(a, h + 1), y = a * e, I = g(() => {
-    t.current && s(t.current.scrollTop);
+import { VIRTUAL_LIST_OVERSCAN as N, VIRTUAL_LIST_FALLBACK_HEIGHT as V } from "./VirtualList.const.js";
+function Y(f) {
+  const {
+    items: n,
+    itemHeight: t,
+    overscan: c = N,
+    height: e,
+    renderItem: u,
+    keyExtractor: g = (s, l) => l,
+    className: b
+  } = f, [m, x] = S(a), r = H(null), { height: h } = E(r, {
+    enabled: typeof e == "string"
+  }), v = typeof e == "number" ? e : h > a ? h : V, I = n.length * t, i = Math.max(a, Math.floor(m / t) - c), y = Math.min(
+    n.length - d,
+    Math.ceil((m + v) / t) + c
+  ), L = n.slice(i, y + d), T = i * t, R = _(() => {
+    r.current && x(r.current.scrollTop);
   }, []);
   return /* @__PURE__ */ o(
     "div",
     {
-      ref: t,
-      className: M("Bear-VirtualList bear-overflow-auto bear-bg-white dark:bear-bg-zinc-900 bear-rounded-lg", m),
-      style: { height: typeof r == "number" ? `${r}px` : r },
-      onScroll: I,
-      children: /* @__PURE__ */ o("div", { className: "bear-relative", style: { height: `${x}px` }, children: /* @__PURE__ */ o("div", { style: { transform: `translateY(${y}px)` }, children: v.map((p, L) => {
-        const d = a + L;
-        return /* @__PURE__ */ o("div", { style: { height: `${e}px` }, children: f(p, d) }, u(p, d));
+      ref: r,
+      className: A("Bear-VirtualList bear-overflow-auto bear-bg-white dark:bear-bg-zinc-900 bear-rounded-lg", b),
+      style: { height: typeof e == "number" ? `${e}px` : e },
+      onScroll: R,
+      children: /* @__PURE__ */ o("div", { className: "bear-relative", style: { height: `${I}px` }, children: /* @__PURE__ */ o("div", { style: { transform: `translateY(${T}px)` }, children: L.map((s, l) => {
+        const p = i + l;
+        return /* @__PURE__ */ o("div", { style: { height: `${t}px` }, children: u(s, p) }, g(s, p));
       }) }) })
     }
   );
 }
 export {
-  N as VirtualList
+  Y as VirtualList
 };

package/dist/components/Watermark/Watermark.cjs

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

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

@@ -1,7 +1,6 @@
-import { FC } from 'react';
 import { WatermarkProps } from './Watermark.types';
 /**
  * Watermark - Overlay watermark text or image on content.
  * Auto-adapts to dark mode and uses BearProvider theme font.
  */
-export declare const Watermark: FC<WatermarkProps>;
+export declare const Watermark: (props: WatermarkProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Watermark/Watermark.js

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