@forgedevstack/bear 1.1.4 → 1.1.9

package/dist/components/SignPad/SignPad.js

@@ -1,4 +1,4 @@
-import { jsxs as b, jsx as d } from "react/jsx-runtime";
+import { jsxs as T, jsx as d } from "react/jsx-runtime";
 import { useRef as p, useState as B, useEffect as D, useCallback as l } from "react";
 import { cn as _ } from "../../utils/cn.js";
 import { Button as M } from "../Button/Button.js";
@@ -19,12 +19,12 @@ const ge = (U) => {
     clearText: W = "Clear",
     saveText: z = "Save",
     outputFormat: f = te,
-    outputQuality: A = re,
+    outputQuality: v = re,
     className: X,
     testId: Y,
     id: V,
     ...j
-  } = U, a = p(null), I = p(null), v = p(null), P = p(!1), [h, G] = B(!1), [E, Q] = B(!1);
+  } = U, a = p(null), I = p(null), A = p(null), P = p(!1), [h, G] = B(!1), [E, Q] = B(!1);
   D(() => {
     const e = () => {
       Q(document.documentElement.classList.contains("dark"));
@@ -33,10 +33,10 @@ const ge = (U) => {
     const t = new MutationObserver(e);
     return t.observe(document.documentElement, { attributes: !0, attributeFilter: ["class"] }), () => t.disconnect();
   }, []);
-  const k = F || (E ? se : ae), N = H || (E ? ne : oe), u = l(() => {
+  const k = F || (E ? se : ae), b = H || (E ? ne : oe), u = l(() => {
     const e = a.current, t = e == null ? void 0 : e.getContext("2d");
-    !e || !t || (t.fillStyle = N === "transparent" ? "rgba(0,0,0,0)" : N, t.fillRect(0, 0, e.width, e.height));
-  }, [N]);
+    !e || !t || (t.fillStyle = b === "transparent" ? "rgba(0,0,0,0)" : b, t.fillRect(0, 0, e.width, e.height));
+  }, [b]);
   D(() => {
     const e = a.current, t = I.current;
     if (!e || !t) return;
@@ -75,32 +75,32 @@ const ge = (U) => {
   }, []), x = l((e) => {
     if (n || s) return;
     const t = g(e);
-    P.current = !0, v.current = t;
+    P.current = !0, A.current = t;
   }, [n, s, g]), O = l((e) => {
     if (!P.current || n || s) return;
-    const t = a.current, r = t == null ? void 0 : t.getContext("2d"), c = v.current;
+    const t = a.current, r = t == null ? void 0 : t.getContext("2d"), c = A.current;
     if (!t || !r || !c) return;
     const i = g(e);
-    r.beginPath(), r.moveTo(c.x, c.y), r.lineTo(i.x, i.y), r.strokeStyle = k, r.lineWidth = C, r.lineCap = "round", r.lineJoin = "round", r.stroke(), v.current = i, G(!0);
-  }, [n, s, k, C, g]), T = l(() => {
+    r.beginPath(), r.moveTo(c.x, c.y), r.lineTo(i.x, i.y), r.strokeStyle = k, r.lineWidth = C, r.lineCap = "round", r.lineJoin = "round", r.stroke(), A.current = i, G(!0);
+  }, [n, s, k, C, g]), N = l(() => {
     if (P.current) {
       const e = a.current;
       if (e && o) {
-        const t = e.toDataURL(f, A);
+        const t = e.toDataURL(f, v);
         o(t);
       }
     }
-    P.current = !1, v.current = null;
-  }, [o, f, A]), J = l(() => {
+    P.current = !1, A.current = null;
+  }, [o, f, v]), J = l(() => {
     const e = a.current, t = e == null ? void 0 : e.getContext("2d");
     !e || !t || (t.clearRect(0, 0, e.width, e.height), u(), G(!1), o == null || o(null));
   }, [u, o]), q = l(() => {
     const e = a.current;
     if (!e || !h) return;
-    const t = e.toDataURL(f, A);
+    const t = e.toDataURL(f, v);
     o == null || o(t);
-  }, [h, o, f, A]);
-  return /* @__PURE__ */ b(
+  }, [h, o, f, v]);
+  return /* @__PURE__ */ T(
     "div",
     {
       id: V,
@@ -114,13 +114,13 @@ const ge = (U) => {
       ),
       ...j,
       children: [
-        /* @__PURE__ */ b(
+        /* @__PURE__ */ T(
           "div",
           {
             ref: I,
             className: _(
               "Bear-SignPad__canvas-wrapper bear-w-full bear-overflow-hidden",
-              "touch-none",
+              "bear-touch-none",
               de,
               !n && !s && ue,
               n && "bear-cursor-not-allowed",
@@ -131,15 +131,15 @@ const ge = (U) => {
                 "canvas",
                 {
                   ref: a,
-                  className: "Bear-SignPad__canvas bear-block bear-rounded-lg bear-w-full touch-none",
-                  style: { height: m, touchAction: "none" },
+                  className: "Bear-SignPad__canvas bear-block bear-rounded-lg bear-w-full bear-touch-none",
+                  style: { height: m },
                   onMouseDown: x,
                   onMouseMove: O,
-                  onMouseUp: T,
-                  onMouseLeave: T,
+                  onMouseUp: N,
+                  onMouseLeave: N,
                   onTouchStart: x,
                   onTouchMove: O,
-                  onTouchEnd: T
+                  onTouchEnd: N
                 }
               ),
               !h && /* @__PURE__ */ d("div", { className: _("Bear-SignPad__placeholder", ce), children: K }),
@@ -148,7 +148,7 @@ const ge = (U) => {
             ]
           }
         ),
-        (L || R) && /* @__PURE__ */ b("div", { className: _("Bear-SignPad__actions", _e), children: [
+        (L || R) && /* @__PURE__ */ T("div", { className: _("Bear-SignPad__actions", _e), children: [
           L && /* @__PURE__ */ d(M, { size: "sm", variant: "ghost", onClick: J, disabled: n || !h, children: W }),
           R && /* @__PURE__ */ d(M, { size: "sm", variant: "primary", onClick: q, disabled: n || !h, children: z })
         ] })

package/dist/components/Skeleton/Skeleton.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("react"),T=require("../../utils/cn.cjs"),d=require("./Skeleton.const.cjs"),_=()=>{const e="bear-skeleton-styles";if(typeof document<"u"&&!document.getElementById(e)){const t=document.createElement("style");t.id=e,t.textContent=d.SKELETON_WAVE_STYLES,document.head.appendChild(t)}},a=c.forwardRef(({variant:e="text",animation:t="pulse",width:l,height:s,borderRadius:n,count:i=1,gap:E=8,className:o,style:f,testId:y,...h},p)=>{c.useEffect(()=>{t==="wave"&&_()},[t]);const x=S=>{if(S!==void 0)return typeof S=="number"?`${S}px`:S},N={width:x(l),height:x(s)||(e==="text"?d.SKELETON_TEXT_HEIGHT:void 0),borderRadius:n?x(n):void 0,...f},k=T.cn(d.SKELETON_BASE_CLASSES,d.SKELETON_VARIANT_CLASSES[e],d.SKELETON_ANIMATION_CLASSES[t],d.SKELETON_BG_CLASSES,o);return i>1?r.jsx("div",{className:"Bear-Skeleton__group flex flex-col",style:{gap:x(E)},"data-testid":y,children:Array.from({length:i}).map((S,g)=>r.jsx("div",{ref:g===0?p:void 0,className:k,style:N,...h},g))}):r.jsx("div",{ref:p,className:k,style:N,"data-testid":y,...h})});a.displayName="Skeleton";const u=c.forwardRef(({lines:e=3,lastLineWidth:t="80%",gap:l=8,animation:s="pulse",...n},i)=>{c.useEffect(()=>{s==="wave"&&_()},[s]);const E=o=>{if(o!==void 0)return typeof o=="number"?`${o}px`:o};return r.jsx("div",{ref:i,className:"Bear-SkeletonText flex flex-col",style:{gap:E(l)},children:Array.from({length:e}).map((o,f)=>r.jsx(a,{variant:"text",animation:s,width:f===e-1?t:"100%",...n},f))})});u.displayName="SkeletonText";const m=c.forwardRef(({size:e="md",animation:t="pulse",...l},s)=>{const n=typeof e=="number"?e:d.SKELETON_AVATAR_SIZES[e];return r.jsx(a,{ref:s,variant:"circular",animation:t,width:n,height:n,...l})});m.displayName="SkeletonAvatar";const A=c.forwardRef(({animation:e="pulse",className:t,...l},s)=>r.jsxs("div",{ref:s,className:T.cn("Bear-SkeletonCard p-4 rounded-lg border border-gray-200 dark:border-zinc-700 bg-white dark:bg-zinc-900",t),...l,children:[r.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[r.jsx(m,{animation:e}),r.jsxs("div",{className:"flex-1",children:[r.jsx(a,{animation:e,width:"60%",height:16,className:"mb-2"}),r.jsx(a,{animation:e,width:"40%",height:12})]})]}),r.jsx(u,{animation:e,lines:3})]}));A.displayName="SkeletonCard";exports.Skeleton=a;exports.SkeletonAvatar=m;exports.SkeletonCard=A;exports.SkeletonText=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),S=require("react"),_=require("../../utils/cn.cjs"),d=require("./Skeleton.const.cjs"),j=require("./Skeleton.utils.cjs"),a=S.forwardRef(({variant:e="text",animation:r="pulse",width:l,height:s,borderRadius:o,count:i=1,gap:u=8,className:n,style:f,testId:k,...N},m)=>{S.useEffect(()=>{r==="wave"&&j.injectStyles()},[r]);const x=c=>{if(c!==void 0)return typeof c=="number"?`${c}px`:c},p={width:x(l),height:x(s)||(e==="text"?d.SKELETON_TEXT_HEIGHT:void 0),borderRadius:o?x(o):void 0,...f},y=_.cn(d.SKELETON_BASE_CLASSES,d.SKELETON_VARIANT_CLASSES[e],d.SKELETON_ANIMATION_CLASSES[r],d.SKELETON_BG_CLASSES,n);return i>1?t.jsx("div",{className:"Bear-Skeleton__group flex flex-col",style:{gap:x(u)},"data-testid":k,children:Array.from({length:i}).map((c,g)=>t.jsx("div",{ref:g===0?m:void 0,className:y,style:p,...N},g))}):t.jsx("div",{ref:m,className:y,style:p,"data-testid":k,...N})});a.displayName="Skeleton";const E=S.forwardRef(({lines:e=3,lastLineWidth:r="80%",gap:l=8,animation:s="pulse",...o},i)=>{S.useEffect(()=>{s==="wave"&&j.injectStyles()},[s]);const u=n=>{if(n!==void 0)return typeof n=="number"?`${n}px`:n};return t.jsx("div",{ref:i,className:"Bear-SkeletonText flex flex-col",style:{gap:u(l)},children:Array.from({length:e}).map((n,f)=>t.jsx(a,{variant:"text",animation:s,width:f===e-1?r:"100%",...o},f))})});E.displayName="SkeletonText";const h=S.forwardRef(({size:e="md",animation:r="pulse",...l},s)=>{const o=typeof e=="number"?e:d.SKELETON_AVATAR_SIZES[e];return t.jsx(a,{ref:s,variant:"circular",animation:r,width:o,height:o,...l})});h.displayName="SkeletonAvatar";const A=S.forwardRef(({animation:e="pulse",className:r,...l},s)=>t.jsxs("div",{ref:s,className:_.cn("Bear-SkeletonCard p-4 rounded-lg border border-gray-200 dark:border-zinc-700 bg-white dark:bg-zinc-900",r),...l,children:[t.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[t.jsx(h,{animation:e}),t.jsxs("div",{className:"flex-1",children:[t.jsx(a,{animation:e,width:"60%",height:16,className:"mb-2"}),t.jsx(a,{animation:e,width:"40%",height:12})]})]}),t.jsx(E,{animation:e,lines:3})]}));A.displayName="SkeletonCard";exports.Skeleton=a;exports.SkeletonAvatar=h;exports.SkeletonCard=A;exports.SkeletonText=E;

package/dist/components/Skeleton/Skeleton.js

@@ -1,145 +1,140 @@
-import { jsx as r, jsxs as f } from "react/jsx-runtime";
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
 import { forwardRef as m, useEffect as _ } from "react";
-import { cn as A } from "../../utils/cn.js";
-import { SKELETON_BG_CLASSES as v, SKELETON_ANIMATION_CLASSES as L, SKELETON_VARIANT_CLASSES as b, SKELETON_BASE_CLASSES as C, SKELETON_TEXT_HEIGHT as w, SKELETON_AVATAR_SIZES as O, SKELETON_WAVE_STYLES as K } from "./Skeleton.const.js";
-const T = () => {
-  const e = "bear-skeleton-styles";
-  if (typeof document < "u" && !document.getElementById(e)) {
-    const t = document.createElement("style");
-    t.id = e, t.textContent = K, document.head.appendChild(t);
-  }
-}, i = m(
+import { cn as k } from "../../utils/cn.js";
+import { SKELETON_BG_CLASSES as v, SKELETON_ANIMATION_CLASSES as b, SKELETON_VARIANT_CLASSES as L, SKELETON_BASE_CLASSES as w, SKELETON_TEXT_HEIGHT as C, SKELETON_AVATAR_SIZES as O } from "./Skeleton.const.js";
+import { injectStyles as x } from "./Skeleton.utils.js";
+const S = m(
   ({
     variant: e = "text",
-    animation: t = "pulse",
-    width: l,
-    height: s,
-    borderRadius: d,
-    count: S = 1,
-    gap: E = 8,
-    className: o,
-    style: a,
-    testId: p,
-    ...h
-  }, y) => {
+    animation: r = "pulse",
+    width: s,
+    height: l,
+    borderRadius: o,
+    count: a = 1,
+    gap: p = 8,
+    className: d,
+    style: n,
+    testId: h,
+    ...E
+  }, N) => {
     _(() => {
-      t === "wave" && T();
-    }, [t]);
-    const c = (n) => {
-      if (n !== void 0)
-        return typeof n == "number" ? `${n}px` : n;
-    }, N = {
-      width: c(l),
-      height: c(s) || (e === "text" ? w : void 0),
-      borderRadius: d ? c(d) : void 0,
-      ...a
-    }, g = A(
-      C,
-      b[e],
-      L[t],
+      r === "wave" && x();
+    }, [r]);
+    const c = (i) => {
+      if (i !== void 0)
+        return typeof i == "number" ? `${i}px` : i;
+    }, g = {
+      width: c(s),
+      height: c(l) || (e === "text" ? C : void 0),
+      borderRadius: o ? c(o) : void 0,
+      ...n
+    }, y = k(
+      w,
+      L[e],
+      b[r],
       v,
-      o
+      d
     );
-    return S > 1 ? /* @__PURE__ */ r(
+    return a > 1 ? /* @__PURE__ */ t(
       "div",
       {
         className: "Bear-Skeleton__group flex flex-col",
-        style: { gap: c(E) },
-        "data-testid": p,
-        children: Array.from({ length: S }).map((n, u) => /* @__PURE__ */ r(
+        style: { gap: c(p) },
+        "data-testid": h,
+        children: Array.from({ length: a }).map((i, A) => /* @__PURE__ */ t(
           "div",
           {
-            ref: u === 0 ? y : void 0,
-            className: g,
-            style: N,
-            ...h
+            ref: A === 0 ? N : void 0,
+            className: y,
+            style: g,
+            ...E
           },
-          u
+          A
         ))
       }
-    ) : /* @__PURE__ */ r(
+    ) : /* @__PURE__ */ t(
       "div",
       {
-        ref: y,
-        className: g,
-        style: N,
-        "data-testid": p,
-        ...h
+        ref: N,
+        className: y,
+        style: g,
+        "data-testid": h,
+        ...E
       }
     );
   }
 );
-i.displayName = "Skeleton";
-const k = m(
-  ({ lines: e = 3, lastLineWidth: t = "80%", gap: l = 8, animation: s = "pulse", ...d }, S) => (_(() => {
-    s === "wave" && T();
-  }, [s]), /* @__PURE__ */ r(
+S.displayName = "Skeleton";
+const T = m(
+  ({ lines: e = 3, lastLineWidth: r = "80%", gap: s = 8, animation: l = "pulse", ...o }, a) => (_(() => {
+    l === "wave" && x();
+  }, [l]), /* @__PURE__ */ t(
     "div",
     {
-      ref: S,
+      ref: a,
       className: "Bear-SkeletonText flex flex-col",
-      style: { gap: ((o) => {
-        if (o !== void 0)
-          return typeof o == "number" ? `${o}px` : o;
-      })(l) },
-      children: Array.from({ length: e }).map((o, a) => /* @__PURE__ */ r(
-        i,
+      style: { gap: ((d) => {
+        if (d !== void 0)
+          return typeof d == "number" ? `${d}px` : d;
+      })(s) },
+      children: Array.from({ length: e }).map((d, n) => /* @__PURE__ */ t(
+        S,
         {
           variant: "text",
-          animation: s,
-          width: a === e - 1 ? t : "100%",
-          ...d
+          animation: l,
+          width: n === e - 1 ? r : "100%",
+          ...o
         },
-        a
+        n
       ))
     }
   ))
 );
-k.displayName = "SkeletonText";
-const x = m(
-  ({ size: e = "md", animation: t = "pulse", ...l }, s) => {
-    const d = typeof e == "number" ? e : O[e];
-    return /* @__PURE__ */ r(
-      i,
+T.displayName = "SkeletonText";
+const u = m(
+  ({ size: e = "md", animation: r = "pulse", ...s }, l) => {
+    const o = typeof e == "number" ? e : O[e];
+    return /* @__PURE__ */ t(
+      S,
       {
-        ref: s,
+        ref: l,
         variant: "circular",
-        animation: t,
-        width: d,
-        height: d,
-        ...l
+        animation: r,
+        width: o,
+        height: o,
+        ...s
       }
     );
   }
 );
-x.displayName = "SkeletonAvatar";
-const B = m(
-  ({ animation: e = "pulse", className: t, ...l }, s) => /* @__PURE__ */ f(
+u.displayName = "SkeletonAvatar";
+const K = m(
+  ({ animation: e = "pulse", className: r, ...s }, l) => /* @__PURE__ */ f(
     "div",
     {
-      ref: s,
-      className: A(
+      ref: l,
+      className: k(
         "Bear-SkeletonCard p-4 rounded-lg border border-gray-200 dark:border-zinc-700 bg-white dark:bg-zinc-900",
-        t
+        r
       ),
-      ...l,
+      ...s,
       children: [
         /* @__PURE__ */ f("div", { className: "flex items-center gap-3 mb-4", children: [
-          /* @__PURE__ */ r(x, { animation: e }),
+          /* @__PURE__ */ t(u, { animation: e }),
           /* @__PURE__ */ f("div", { className: "flex-1", children: [
-            /* @__PURE__ */ r(i, { animation: e, width: "60%", height: 16, className: "mb-2" }),
-            /* @__PURE__ */ r(i, { animation: e, width: "40%", height: 12 })
+            /* @__PURE__ */ t(S, { animation: e, width: "60%", height: 16, className: "mb-2" }),
+            /* @__PURE__ */ t(S, { animation: e, width: "40%", height: 12 })
           ] })
         ] }),
-        /* @__PURE__ */ r(k, { animation: e, lines: 3 })
+        /* @__PURE__ */ t(T, { animation: e, lines: 3 })
       ]
     }
   )
 );
-B.displayName = "SkeletonCard";
+K.displayName = "SkeletonCard";
 export {
-  i as Skeleton,
-  x as SkeletonAvatar,
-  B as SkeletonCard,
-  k as SkeletonText
+  S as Skeleton,
+  u as SkeletonAvatar,
+  K as SkeletonCard,
+  T as SkeletonText
 };

package/dist/components/Skeleton/Skeleton.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./Skeleton.const.cjs"),t="bear-skeleton-styles",o=()=>{if(typeof document<"u"&&!document.getElementById(t)){const e=document.createElement("style");e.id=t,e.textContent=n.SKELETON_WAVE_STYLES,document.head.appendChild(e)}};exports.injectStyles=o;

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

@@ -0,0 +1 @@
+export declare const injectStyles: () => void;

package/dist/components/Skeleton/Skeleton.utils.js

@@ -0,0 +1,10 @@
+import { SKELETON_WAVE_STYLES as n } from "./Skeleton.const.js";
+const t = "bear-skeleton-styles", d = () => {
+  if (typeof document < "u" && !document.getElementById(t)) {
+    const e = document.createElement("style");
+    e.id = t, e.textContent = n, document.head.appendChild(e);
+  }
+};
+export {
+  d as injectStyles
+};

package/dist/components/SliderRange/SliderRange.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),u=require("react"),d=require("../../utils/cn.cjs"),X={xs:{track:"bear-h-1",thumb:"bear-w-3 bear-h-3",height:"bear-h-6"},sm:{track:"bear-h-1.5",thumb:"bear-w-4 bear-h-4",height:"bear-h-8"},md:{track:"bear-h-2",thumb:"bear-w-5 bear-h-5",height:"bear-h-10"},lg:{track:"bear-h-2.5",thumb:"bear-w-6 bear-h-6",height:"bear-h-12"},xl:{track:"bear-h-3",thumb:"bear-w-7 bear-h-7",height:"bear-h-14"}},Y={primary:{track:"bear-bg-bear-500",thumb:"bear-bg-bear-500 bear-border-bear-600"},secondary:{track:"bear-bg-gray-500",thumb:"bear-bg-gray-500 bear-border-gray-600"},success:{track:"bear-bg-green-500",thumb:"bear-bg-green-500 bear-border-green-600"},warning:{track:"bear-bg-amber-500",thumb:"bear-bg-amber-500 bear-border-amber-600"},error:{track:"bear-bg-red-500",thumb:"bear-bg-red-500 bear-border-red-600"},danger:{track:"bear-bg-red-500",thumb:"bear-bg-red-500 bear-border-red-600"},info:{track:"bear-bg-blue-500",thumb:"bear-bg-blue-500 bear-border-blue-600"},ghost:{track:"bear-bg-gray-400",thumb:"bear-bg-gray-400 bear-border-gray-500"},outline:{track:"bear-bg-gray-600",thumb:"bear-bg-white dark:bear-bg-gray-200 bear-border-gray-600 dark:bear-border-gray-400"}},_=(c,f,e,r)=>{const l=Math.round(c/r)*r;return Math.max(f,Math.min(e,l))},A=({value:c,defaultValue:f=[20,80],min:e=0,max:r=100,step:l=1,size:$="md",color:q="primary",disabled:b=!1,onChange:s,onChangeCommitted:g,valueFormatter:B=w=>String(w),className:z,...O})=>{const[w,L]=u.useState(f),[t,E]=u.useState(null),y=u.useRef(null),k=c??w,[n,o]=k,x=(n-e)/(r-e)*100,j=(o-e)/(r-e)*100,m=X[$],M=Y[q],S=u.useCallback((a,v)=>{if(!y.current||b)return;const T=y.current.getBoundingClientRect(),P=Math.max(0,Math.min(1,(a-T.left)/T.width)),V=e+P*(r-e),D=_(V,e,r,l);if(v==="min"){const i=[Math.min(D,o-l),o];c===void 0&&L(i),s==null||s(i)}else{const I=Math.max(D,n+l),i=[n,I];c===void 0&&L(i),s==null||s(i)}},[e,r,l,n,o,b,c,s]),N=(a,v)=>{b||(a.preventDefault(),E(v),S(a.clientX,v))},p=u.useCallback(a=>{t&&S(a.clientX,t)},[t,S]),R=u.useCallback(()=>{t&&(E(null),g==null||g(k))},[t,k,g]);return u.useEffect(()=>{if(t)return document.addEventListener("mousemove",p),document.addEventListener("mouseup",R),()=>{document.removeEventListener("mousemove",p),document.removeEventListener("mouseup",R)}},[t,p,R]),h.jsx("div",{className:d.cn("bear-relative bear-w-full bear-flex bear-items-center",m.height,b&&"bear-opacity-50 bear-cursor-not-allowed",z),"data-testid":"slider-range",...O,children:h.jsxs("div",{ref:y,className:d.cn("bear-relative bear-w-full bear-rounded-full bear-bg-gray-200 dark:bear-bg-gray-700",m.track,!b&&"bear-cursor-pointer"),children:[h.jsx("div",{className:d.cn("bear-absolute bear-inset-y-0 bear-left-0 bear-rounded-full",M.track),style:{left:`${x}%`,width:`${j-x}%`}}),h.jsx("div",{role:"slider",tabIndex:b?-1:0,"aria-valuemin":e,"aria-valuemax":r,"aria-valuenow":n,"aria-label":"Range minimum",className:d.cn("bear-absolute bear-top-1/2 bear--translate-y-1/2 bear--translate-x-1/2 bear-rounded-full bear-border-2 bear-shadow-md",m.thumb,M.thumb,!b&&"bear-cursor-grab active:bear-cursor-grabbing hover:bear-scale-110",t==="min"&&"bear-scale-125 bear-z-10"),style:{left:`${x}%`},onMouseDown:a=>N(a,"min")}),h.jsx("div",{role:"slider",tabIndex:b?-1:0,"aria-valuemin":e,"aria-valuemax":r,"aria-valuenow":o,"aria-label":"Range maximum",className:d.cn("bear-absolute bear-top-1/2 bear--translate-y-1/2 bear--translate-x-1/2 bear-rounded-full bear-border-2 bear-shadow-md",m.thumb,M.thumb,!b&&"bear-cursor-grab active:bear-cursor-grabbing hover:bear-scale-110",t==="max"&&"bear-scale-125 bear-z-10"),style:{left:`${j}%`},onMouseDown:a=>N(a,"max")})]})})};exports.SliderRange=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),u=require("react"),i=require("../../utils/cn.cjs"),V=require("./SliderRange.utils.cjs"),X={xs:{track:"bear-h-1",thumb:"bear-w-3 bear-h-3",height:"bear-h-6"},sm:{track:"bear-h-1.5",thumb:"bear-w-4 bear-h-4",height:"bear-h-8"},md:{track:"bear-h-2",thumb:"bear-w-5 bear-h-5",height:"bear-h-10"},lg:{track:"bear-h-2.5",thumb:"bear-w-6 bear-h-6",height:"bear-h-12"},xl:{track:"bear-h-3",thumb:"bear-w-7 bear-h-7",height:"bear-h-14"}},Y={primary:{track:"bear-bg-bear-500",thumb:"bear-bg-bear-500 bear-border-bear-600"},secondary:{track:"bear-bg-gray-500",thumb:"bear-bg-gray-500 bear-border-gray-600"},success:{track:"bear-bg-green-500",thumb:"bear-bg-green-500 bear-border-green-600"},warning:{track:"bear-bg-amber-500",thumb:"bear-bg-amber-500 bear-border-amber-600"},error:{track:"bear-bg-red-500",thumb:"bear-bg-red-500 bear-border-red-600"},danger:{track:"bear-bg-red-500",thumb:"bear-bg-red-500 bear-border-red-600"},info:{track:"bear-bg-blue-500",thumb:"bear-bg-blue-500 bear-border-blue-600"},ghost:{track:"bear-bg-gray-400",thumb:"bear-bg-gray-400 bear-border-gray-500"},outline:{track:"bear-bg-gray-600",thumb:"bear-bg-white dark:bear-bg-gray-200 bear-border-gray-600 dark:bear-border-gray-400"}},A=({value:h,defaultValue:D=[20,80],min:e=0,max:t=100,step:d=1,size:I="md",color:$="primary",disabled:a=!1,onChange:s,onChangeCommitted:g,valueFormatter:B=f=>String(f),className:z,...O})=>{const[f,R]=u.useState(D),[b,L]=u.useState(null),w=u.useRef(null),y=h??f,[c,l]=y,k=(c-e)/(t-e)*100,E=(l-e)/(t-e)*100,m=X[I],x=Y[$],S=u.useCallback((r,v)=>{if(!w.current||a)return;const N=w.current.getBoundingClientRect(),P=Math.max(0,Math.min(1,(r-N.left)/N.width)),_=e+P*(t-e),T=V.stepValue(_,e,t,d);if(v==="min"){const n=[Math.min(T,l-d),l];h===void 0&&R(n),s==null||s(n)}else{const q=Math.max(T,c+d),n=[c,q];h===void 0&&R(n),s==null||s(n)}},[e,t,d,c,l,a,h,s]),j=(r,v)=>{a||(r.preventDefault(),L(v),S(r.clientX,v))},p=u.useCallback(r=>{b&&S(r.clientX,b)},[b,S]),M=u.useCallback(()=>{b&&(L(null),g==null||g(y))},[b,y,g]);return u.useEffect(()=>{if(b)return document.addEventListener("mousemove",p),document.addEventListener("mouseup",M),()=>{document.removeEventListener("mousemove",p),document.removeEventListener("mouseup",M)}},[b,p,M]),o.jsx("div",{className:i.cn("bear-relative bear-w-full bear-flex bear-items-center",m.height,a&&"bear-opacity-50 bear-cursor-not-allowed",z),"data-testid":"slider-range",...O,children:o.jsxs("div",{ref:w,className:i.cn("bear-relative bear-w-full bear-rounded-full bear-bg-gray-200 dark:bear-bg-gray-700",m.track,!a&&"bear-cursor-pointer"),children:[o.jsx("div",{className:i.cn("bear-absolute bear-inset-y-0 bear-left-0 bear-rounded-full",x.track),style:{left:`${k}%`,width:`${E-k}%`}}),o.jsx("div",{role:"slider",tabIndex:a?-1:0,"aria-valuemin":e,"aria-valuemax":t,"aria-valuenow":c,"aria-label":"Range minimum",className:i.cn("bear-absolute bear-top-1/2 bear--translate-y-1/2 bear--translate-x-1/2 bear-rounded-full bear-border-2 bear-shadow-md",m.thumb,x.thumb,!a&&"bear-cursor-grab active:bear-cursor-grabbing hover:bear-scale-110",b==="min"&&"bear-scale-125 bear-z-10"),style:{left:`${k}%`},onMouseDown:r=>j(r,"min")}),o.jsx("div",{role:"slider",tabIndex:a?-1:0,"aria-valuemin":e,"aria-valuemax":t,"aria-valuenow":l,"aria-label":"Range maximum",className:i.cn("bear-absolute bear-top-1/2 bear--translate-y-1/2 bear--translate-x-1/2 bear-rounded-full bear-border-2 bear-shadow-md",m.thumb,x.thumb,!a&&"bear-cursor-grab active:bear-cursor-grabbing hover:bear-scale-110",b==="max"&&"bear-scale-125 bear-z-10"),style:{left:`${E}%`},onMouseDown:r=>j(r,"max")})]})})};exports.SliderRange=A;

package/dist/components/SliderRange/SliderRange.js

@@ -1,13 +1,14 @@
 import { jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { useState as z, useRef as A, useCallback as L, useEffect as B } from "react";
-import { cn as i } from "../../utils/cn.js";
-const F = {
+import { useState as $, useRef as A, useCallback as S, useEffect as B } from "react";
+import { cn as l } from "../../utils/cn.js";
+import { stepValue as F } from "./SliderRange.utils.js";
+const H = {
   xs: { track: "bear-h-1", thumb: "bear-w-3 bear-h-3", height: "bear-h-6" },
   sm: { track: "bear-h-1.5", thumb: "bear-w-4 bear-h-4", height: "bear-h-8" },
   md: { track: "bear-h-2", thumb: "bear-w-5 bear-h-5", height: "bear-h-10" },
   lg: { track: "bear-h-2.5", thumb: "bear-w-6 bear-h-6", height: "bear-h-12" },
   xl: { track: "bear-h-3", thumb: "bear-w-7 bear-h-7", height: "bear-h-14" }
-}, H = {
+}, U = {
   primary: { track: "bear-bg-bear-500", thumb: "bear-bg-bear-500 bear-border-bear-600" },
   secondary: { track: "bear-bg-gray-500", thumb: "bear-bg-gray-500 bear-border-gray-600" },
   success: { track: "bear-bg-green-500", thumb: "bear-bg-green-500 bear-border-green-600" },
@@ -17,59 +18,56 @@ const F = {
   info: { track: "bear-bg-blue-500", thumb: "bear-bg-blue-500 bear-border-blue-600" },
   ghost: { track: "bear-bg-gray-400", thumb: "bear-bg-gray-400 bear-border-gray-500" },
   outline: { track: "bear-bg-gray-600", thumb: "bear-bg-white dark:bear-bg-gray-200 bear-border-gray-600 dark:bear-border-gray-400" }
-}, U = (s, v, e, r) => {
-  const o = Math.round(s / r) * r;
-  return Math.max(v, Math.min(e, o));
-}, K = ({
-  value: s,
-  defaultValue: v = [20, 80],
+}, Q = ({
+  value: n,
+  defaultValue: z = [20, 80],
   min: e = 0,
-  max: r = 100,
-  step: o = 1,
+  max: t = 100,
+  step: i = 1,
   size: j = "md",
   color: O = "primary",
-  disabled: b = !1,
-  onChange: u,
+  disabled: a = !1,
+  onChange: s,
   onChangeCommitted: h,
-  valueFormatter: Z = (f) => String(f),
+  valueFormatter: Z = (v) => String(v),
   className: P,
   ...V
 }) => {
-  const [f, E] = z(v), [t, R] = z(null), w = A(null), y = s ?? f, [c, l] = y, k = (c - e) / (r - e) * 100, N = (l - e) / (r - e) * 100, m = F[j], p = H[O], x = L(
-    (a, d) => {
-      if (!w.current || b) return;
-      const I = w.current.getBoundingClientRect(), X = Math.max(0, Math.min(1, (a - I.left) / I.width)), Y = e + X * (r - e), T = U(Y, e, r, o);
+  const [v, L] = $(z), [b, E] = $(null), f = A(null), w = n ?? v, [u, o] = w, y = (u - e) / (t - e) * 100, R = (o - e) / (t - e) * 100, m = H[j], k = U[O], p = S(
+    (r, d) => {
+      if (!f.current || a) return;
+      const D = f.current.getBoundingClientRect(), X = Math.max(0, Math.min(1, (r - D.left) / D.width)), Y = e + X * (t - e), I = F(Y, e, t, i);
       if (d === "min") {
-        const n = [Math.min(T, l - o), l];
-        s === void 0 && E(n), u == null || u(n);
+        const c = [Math.min(I, o - i), o];
+        n === void 0 && L(c), s == null || s(c);
       } else {
-        const $ = Math.max(T, c + o), n = [c, $];
-        s === void 0 && E(n), u == null || u(n);
+        const T = Math.max(I, u + i), c = [u, T];
+        n === void 0 && L(c), s == null || s(c);
       }
     },
-    [e, r, o, c, l, b, s, u]
-  ), D = (a, d) => {
-    b || (a.preventDefault(), R(d), x(a.clientX, d));
-  }, M = L(
-    (a) => {
-      t && x(a.clientX, t);
+    [e, t, i, u, o, a, n, s]
+  ), N = (r, d) => {
+    a || (r.preventDefault(), E(d), p(r.clientX, d));
+  }, x = S(
+    (r) => {
+      b && p(r.clientX, b);
     },
-    [t, x]
-  ), S = L(() => {
-    t && (R(null), h == null || h(y));
-  }, [t, y, h]);
+    [b, p]
+  ), M = S(() => {
+    b && (E(null), h == null || h(w));
+  }, [b, w, h]);
   return B(() => {
-    if (t)
-      return document.addEventListener("mousemove", M), document.addEventListener("mouseup", S), () => {
-        document.removeEventListener("mousemove", M), document.removeEventListener("mouseup", S);
+    if (b)
+      return document.addEventListener("mousemove", x), document.addEventListener("mouseup", M), () => {
+        document.removeEventListener("mousemove", x), document.removeEventListener("mouseup", M);
       };
-  }, [t, M, S]), /* @__PURE__ */ g(
+  }, [b, x, M]), /* @__PURE__ */ g(
     "div",
     {
-      className: i(
+      className: l(
         "bear-relative bear-w-full bear-flex bear-items-center",
         m.height,
-        b && "bear-opacity-50 bear-cursor-not-allowed",
+        a && "bear-opacity-50 bear-cursor-not-allowed",
         P
       ),
       "data-testid": "slider-range",
@@ -77,58 +75,58 @@ const F = {
       children: /* @__PURE__ */ _(
         "div",
         {
-          ref: w,
-          className: i(
+          ref: f,
+          className: l(
             "bear-relative bear-w-full bear-rounded-full bear-bg-gray-200 dark:bear-bg-gray-700",
             m.track,
-            !b && "bear-cursor-pointer"
+            !a && "bear-cursor-pointer"
           ),
           children: [
             /* @__PURE__ */ g(
               "div",
               {
-                className: i("bear-absolute bear-inset-y-0 bear-left-0 bear-rounded-full", p.track),
-                style: { left: `${k}%`, width: `${N - k}%` }
+                className: l("bear-absolute bear-inset-y-0 bear-left-0 bear-rounded-full", k.track),
+                style: { left: `${y}%`, width: `${R - y}%` }
               }
             ),
             /* @__PURE__ */ g(
               "div",
               {
                 role: "slider",
-                tabIndex: b ? -1 : 0,
+                tabIndex: a ? -1 : 0,
                 "aria-valuemin": e,
-                "aria-valuemax": r,
-                "aria-valuenow": c,
+                "aria-valuemax": t,
+                "aria-valuenow": u,
                 "aria-label": "Range minimum",
-                className: i(
+                className: l(
                   "bear-absolute bear-top-1/2 bear--translate-y-1/2 bear--translate-x-1/2 bear-rounded-full bear-border-2 bear-shadow-md",
                   m.thumb,
-                  p.thumb,
-                  !b && "bear-cursor-grab active:bear-cursor-grabbing hover:bear-scale-110",
-                  t === "min" && "bear-scale-125 bear-z-10"
+                  k.thumb,
+                  !a && "bear-cursor-grab active:bear-cursor-grabbing hover:bear-scale-110",
+                  b === "min" && "bear-scale-125 bear-z-10"
                 ),
-                style: { left: `${k}%` },
-                onMouseDown: (a) => D(a, "min")
+                style: { left: `${y}%` },
+                onMouseDown: (r) => N(r, "min")
               }
             ),
             /* @__PURE__ */ g(
               "div",
               {
                 role: "slider",
-                tabIndex: b ? -1 : 0,
+                tabIndex: a ? -1 : 0,
                 "aria-valuemin": e,
-                "aria-valuemax": r,
-                "aria-valuenow": l,
+                "aria-valuemax": t,
+                "aria-valuenow": o,
                 "aria-label": "Range maximum",
-                className: i(
+                className: l(
                   "bear-absolute bear-top-1/2 bear--translate-y-1/2 bear--translate-x-1/2 bear-rounded-full bear-border-2 bear-shadow-md",
                   m.thumb,
-                  p.thumb,
-                  !b && "bear-cursor-grab active:bear-cursor-grabbing hover:bear-scale-110",
-                  t === "max" && "bear-scale-125 bear-z-10"
+                  k.thumb,
+                  !a && "bear-cursor-grab active:bear-cursor-grabbing hover:bear-scale-110",
+                  b === "max" && "bear-scale-125 bear-z-10"
                 ),
-                style: { left: `${N}%` },
-                onMouseDown: (a) => D(a, "max")
+                style: { left: `${R}%` },
+                onMouseDown: (r) => N(r, "max")
               }
             )
           ]
@@ -138,5 +136,5 @@ const F = {
   );
 };
 export {
-  K as SliderRange
+  Q as SliderRange
 };

package/dist/components/SliderRange/SliderRange.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=(e,a,n,t)=>{const o=Math.round(e/t)*t;return Math.max(a,Math.min(n,o))};exports.stepValue=r;

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

@@ -0,0 +1 @@
+export declare const stepValue: (raw: number, min: number, max: number, step: number) => number;

package/dist/components/SliderRange/SliderRange.utils.js

@@ -0,0 +1,7 @@
+const e = (a, n, o, t) => {
+  const r = Math.round(a / t) * t;
+  return Math.max(n, Math.min(o, r));
+};
+export {
+  e as stepValue
+};