@forgedevstack/bear 1.3.0 → 1.3.2

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -1,146 +1,155 @@
-import { jsxs as d, jsx as t } from "react/jsx-runtime";
-import { useState as h, useRef as P, useEffect as T, useCallback as _ } from "react";
-import { createPortal as le } from "react-dom";
-import { cn as p } from "../../utils/cn.js";
-import { getDefaultPresets as ie, LABEL_CLASSES as ce, SIZE_CLASSES as de, TRIGGER_CLASSES as be, PRESET_BTN_CLASSES as $, ERROR_CLASSES as me, HELPER_CLASSES as ue, ROOT_CLASSES as he, CALENDAR_HEADER_CLASSES as pe, NAV_BTN_CLASSES as G, MONTH_LABELS as Se, DAY_LABELS as fe, DAY_TODAY_CLASSES as we, DAY_IN_RANGE_CLASSES as Ee, DAY_SELECTED_CLASSES as ge, DAY_DISABLED_CLASSES as Le, DAY_HOVER_CLASSES as ve, DAY_BASE_CLASSES as Ae } from "./DateRangePicker.const.js";
-import { formatDate as F, getCalendarDays as ke, isSameDay as Y, isInRange as xe } from "./DateRangePicker.utils.js";
-const Z = ({ year: L, month: c, range: r, onDayClick: v, onNav: A, minDate: b, maxDate: k }) => {
-  const x = ke(L, c), S = /* @__PURE__ */ new Date();
-  return S.setHours(0, 0, 0, 0), /* @__PURE__ */ d("div", { className: "bear-w-64", children: [
-    /* @__PURE__ */ d("div", { className: pe, children: [
-      /* @__PURE__ */ t("button", { type: "button", onClick: () => A(-1), className: G, "aria-label": "Previous month", children: /* @__PURE__ */ t("svg", { className: "bear-w-4 bear-h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }),
-      /* @__PURE__ */ d("span", { className: "bear-text-sm bear-font-semibold bear-text-gray-900 dark:bear-text-white", children: [
-        Se[c],
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { useState as h, useRef as O, useEffect as le, useCallback as g } from "react";
+import { cn as R } from "../../utils/cn.js";
+import { useClickOutsideMultiple as ie } from "../../hooks/useClickOutside.js";
+import "../../context/BearProvider.js";
+import "../../hooks/useBearComponent/useBearComponent.js";
+import { ZERO as P, PRESET_SIDEBAR_MIN_WIDTH_PX as ce, HOURS_MIDNIGHT as D, NEGATIVE_ONE as de, ONE as I, LAST_MONTH_INDEX as Y } from "../../constants/numbers.const.js";
+import { PLACEHOLDER_SELECT_DATE_RANGE as me, BOOLEAN_FALSE as fe, BOOLEAN_TRUE as X, SIZE_MD as pe, PICKING_START as he, EMPTY_STRING as ge, LABEL_CLEAR as ue } from "../../constants/generals.const.js";
+import { useFixedAnchorPosition as xe } from "../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.js";
+import { resolveOverlayEffects as ye } from "../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.js";
+import "../FormControl/FormControl.context.js";
+import { CalendarIcon as ke } from "@forgedevstack/bear-icons";
+import { OverlayPortal as Ne } from "../OverlayPortal/OverlayPortal.js";
+import { DATERANGE_DROPDOWN_HEIGHT_PX as Ee, SIZE_CLASSES as ve, DATERANGE_DROPDOWN_Z_INDEX as _e, DATERANGE_DROPDOWN_ATTR as De, MONTH_LABELS as Re, DAY_LABELS as we } from "./DateRangePicker.const.js";
+import { getDefaultPresets as Ae, formatDate as Z, resolveRightMonth as Te, getCalendarDays as Le, isSameDay as z, isInRange as Oe } from "./DateRangePicker.utils.js";
+const $ = ({ year: d, month: b, range: r, onDayClick: u, onNav: x, minDate: i, maxDate: y }) => {
+  const k = Le(d, b), m = /* @__PURE__ */ new Date();
+  return m.setHours(D, D, D, D), /* @__PURE__ */ l("div", { className: "bear-w-64", children: [
+    /* @__PURE__ */ l("div", { className: "bear-flex bear-items-center bear-justify-between bear-mb-2", children: [
+      /* @__PURE__ */ e("button", { type: "button", onClick: () => x(de), className: "bear-p-1 bear-rounded hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700 bear-text-gray-500 dark:bear-text-zinc-400", "aria-label": "Previous month", children: /* @__PURE__ */ e("svg", { className: "bear-w-4 bear-h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }),
+      /* @__PURE__ */ l("span", { className: "bear-text-sm bear-font-semibold bear-text-gray-900 dark:bear-text-white", children: [
+        Re[b],
         " ",
-        L
+        d
       ] }),
-      /* @__PURE__ */ t("button", { type: "button", onClick: () => A(1), className: G, "aria-label": "Next month", children: /* @__PURE__ */ t("svg", { className: "bear-w-4 bear-h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }) })
+      /* @__PURE__ */ e("button", { type: "button", onClick: () => x(I), className: "bear-p-1 bear-rounded hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700 bear-text-gray-500 dark:bear-text-zinc-400", "aria-label": "Next month", children: /* @__PURE__ */ e("svg", { className: "bear-w-4 bear-h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }) })
     ] }),
-    /* @__PURE__ */ t("div", { className: "bear-grid bear-grid-cols-7 bear-gap-0.5 bear-mb-1", children: fe.map((a) => /* @__PURE__ */ t("div", { className: "bear-text-xs bear-text-center bear-font-medium bear-text-gray-400 dark:bear-text-zinc-500 bear-py-1", children: a }, a)) }),
-    /* @__PURE__ */ t("div", { className: "bear-grid bear-grid-cols-7 bear-gap-0.5", children: x.map((a, D) => {
-      if (!a) return /* @__PURE__ */ t("div", {}, `e-${D}`);
-      const f = b && a < b || k && a > k, l = Y(a, r.start) || Y(a, r.end), m = xe(a, r.start, r.end), R = Y(a, S);
-      return /* @__PURE__ */ t(
+    /* @__PURE__ */ e("div", { className: "bear-grid bear-grid-cols-7 bear-gap-0.5 bear-mb-1", children: we.map((t) => /* @__PURE__ */ e("div", { className: "bear-text-xs bear-text-center bear-font-medium bear-text-gray-400 dark:bear-text-zinc-500 bear-py-1", children: t }, t)) }),
+    /* @__PURE__ */ e("div", { className: "bear-grid bear-grid-cols-7 bear-gap-0.5", children: k.map((t, w) => {
+      if (!t) return /* @__PURE__ */ e("div", {}, `e-${w}`);
+      const f = i && t < i || y && t > y, o = z(t, r.start) || z(t, r.end), c = Oe(t, r.start, r.end), A = z(t, m);
+      return /* @__PURE__ */ e(
         "button",
         {
           type: "button",
           disabled: !!f,
-          onClick: () => v(a),
-          className: p(
-            Ae,
-            f ? Le : ve,
-            l && ge,
-            !l && m && Ee,
-            !l && !m && R && we,
-            !l && !m && !f && "bear-text-gray-700 dark:bear-text-zinc-300"
+          onClick: () => u(t),
+          className: R(
+            "bear-w-8 bear-h-8 bear-text-sm bear-rounded-full bear-transition-colors bear-cursor-pointer",
+            f ? "bear-text-gray-300 dark:bear-text-zinc-600 bear-cursor-not-allowed" : "hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700",
+            o && "bear-bg-primary-500 bear-text-white",
+            !o && c && "bear-bg-primary-100 dark:bear-bg-primary-900/30 bear-text-primary-800 dark:bear-text-primary-200",
+            !o && !c && A && "bear-ring-1 bear-ring-primary-400",
+            !o && !c && !f && "bear-text-gray-700 dark:bear-text-zinc-300"
           ),
-          children: a.getDate()
+          children: t.getDate()
         },
-        a.getTime()
+        t.getTime()
       );
     }) })
   ] });
-}, Pe = (L) => {
+}, Ke = (d) => {
   const {
-    value: c,
+    value: b,
     onChange: r,
-    label: v,
-    placeholder: A = "Select date range",
-    disabled: b = !1,
-    clearable: k = !0,
-    minDate: x,
-    maxDate: S,
-    presets: a,
-    showPresets: D = !0,
-    size: f = "md",
-    error: l,
-    helperText: m,
-    className: R,
-    testId: q,
-    ...J
-  } = L, [N, y] = h(!1), [z, K] = h({ top: 0, left: 0 }), [s, w] = h(c ?? { start: null, end: null }), [H, C] = h("start"), O = P(null), M = P(null), I = P(null), W = /* @__PURE__ */ new Date(), [u, Q] = h(W.getMonth()), [E, U] = h(W.getFullYear()), X = u === 11 ? 0 : u + 1, ee = u === 11 ? E + 1 : E;
-  T(() => {
-    c && w(c);
-  }, [c]), T(() => {
-    if (!N || !M.current) return;
-    const e = 8, n = 420, o = () => {
-      const i = M.current.getBoundingClientRect(), g = window.innerHeight;
-      let B = g - i.bottom < n && i.top > n ? i.top - n - e : i.bottom + e;
-      B = Math.max(8, Math.min(B, g - n - 8));
-      const se = Math.min(640, window.innerWidth - 16);
-      let oe = Math.max(8, Math.min(i.left, window.innerWidth - se - 8));
-      K({ top: B, left: oe });
-    };
-    return o(), window.addEventListener("resize", o), window.addEventListener("scroll", o, !0), () => {
-      window.removeEventListener("resize", o), window.removeEventListener("scroll", o, !0);
-    };
-  }, [N]), T(() => {
-    const e = (n) => {
-      var i, g;
-      const o = n.target;
-      (i = O.current) != null && i.contains(o) || (g = I.current) != null && g.contains(o) || y(!1);
-    };
-    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, []);
-  const j = _((e) => {
-    if (H === "start")
-      w({ start: e, end: null }), C("end");
+    label: u,
+    placeholder: x = me,
+    disabled: i = fe,
+    clearable: y = X,
+    minDate: k,
+    maxDate: m,
+    presets: t,
+    showPresets: w = X,
+    size: f = pe,
+    error: o,
+    helperText: c,
+    className: A,
+    testId: F,
+    openEffect: Pe,
+    closeEffect: ze,
+    effect: Ie,
+    ...U
+  } = d, { openEffect: V, closeEffect: K } = ye(d), [N, T] = h(!1), [n, p] = h(b ?? { start: null, end: null }), [S, E] = h(he), C = O(null), M = O(null), B = O(null), { style: q, ready: J } = xe({
+    anchorRef: M,
+    open: N,
+    estimatedHeightPx: Ee
+  }), H = /* @__PURE__ */ new Date(), [v, Q] = h(H.getMonth()), [_, ee] = h(H.getFullYear()), G = Te(v), re = G.month, ae = _ + G.yearDelta;
+  le(() => {
+    b && p(b);
+  }, [b]);
+  const te = g(() => T(!1), []);
+  ie([C, B], te, { enabled: N });
+  const W = g((a) => {
+    if (S === "start")
+      p({ start: a, end: null }), E("end");
     else {
-      const n = e >= (s.start ?? e) ? { start: s.start, end: e } : { start: e, end: s.start };
-      w(n), C("start"), r == null || r(n);
+      const s = a >= (n.start ?? a) ? { start: n.start, end: a } : { start: a, end: n.start };
+      p(s), E("start"), r == null || r(s);
     }
-  }, [H, s.start, r]), te = _((e) => {
-    w(e), r == null || r(e), y(!1), C("start");
-  }, [r]), re = _(() => {
-    const e = { start: null, end: null };
-    w(e), r == null || r(e), C("start");
-  }, [r]), ae = _((e) => {
-    let n = u + e, o = E;
-    n < 0 && (n = 11, o--), n > 11 && (n = 0, o++), Q(n), U(o);
-  }, [u, E]), V = a ?? (D ? ie() : []), ne = s.start ? `${F(s.start)}${s.end ? ` – ${F(s.end)}` : ""}` : A;
-  return /* @__PURE__ */ d("div", { ref: O, className: p(he, R), "data-testid": q, ...J, children: [
-    v && /* @__PURE__ */ t("label", { className: ce, children: v }),
-    /* @__PURE__ */ d(
+  }, [S, n.start, r]), ne = g((a) => {
+    p(a), r == null || r(a), T(!1), E("start");
+  }, [r]), oe = g(() => {
+    const a = { start: null, end: null };
+    p(a), r == null || r(a), E("start");
+  }, [r]), se = g((a) => {
+    let s = v + a, L = _;
+    s < P && (s = Y, L -= I), s > Y && (s = P, L += I), Q(s), ee(L);
+  }, [v, _]), j = t ?? (w ? Ae() : []), be = n.start ? `${Z(n.start)}${n.end ? ` – ${Z(n.end)}` : ""}` : x;
+  return /* @__PURE__ */ l("div", { ref: C, className: R("Bear-DateRangePicker bear-relative bear-inline-block", A), "data-testid": F, ...U, children: [
+    u && /* @__PURE__ */ e("label", { className: "Bear-DateRangePicker__label bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5", children: u }),
+    /* @__PURE__ */ l(
       "button",
       {
         ref: M,
         type: "button",
-        disabled: b,
-        onClick: () => !b && y(!N),
-        className: p(be, de[f], b && "bear-opacity-50 bear-cursor-not-allowed"),
+        disabled: i,
+        onClick: () => !i && T(!N),
+        className: R(
+          "bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-bg-white dark:bear-bg-zinc-800 bear-text-gray-900 dark:bear-text-white bear-transition-colors focus:bear-ring-2 focus:bear-ring-primary-500 bear-outline-none",
+          ve[f],
+          i && "bear-opacity-50 bear-cursor-not-allowed"
+        ),
         children: [
-          /* @__PURE__ */ t("span", { className: p(!s.start && "bear-text-gray-400 dark:bear-text-zinc-500"), children: ne }),
-          /* @__PURE__ */ t("svg", { className: "bear-w-4 bear-h-4 bear-ml-2 bear-text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) })
+          /* @__PURE__ */ e("span", { className: R(!n.start && "bear-text-gray-400 dark:bear-text-zinc-500"), children: be }),
+          /* @__PURE__ */ e(ke, { className: "bear-w-4 bear-h-4 bear-ml-2 bear-text-gray-400" })
         ]
       }
     ),
-    N && typeof document < "u" && le(
-      /* @__PURE__ */ t(
-        "div",
-        {
-          ref: I,
-          "data-bear-daterangepicker-dropdown": !0,
-          className: p(
-            "bear-fixed bear-z-[10000] bear-max-w-[calc(100vw-16px)] bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-xl bear-shadow-xl bear-p-4 bear-overflow-x-auto"
+    /* @__PURE__ */ e(
+      Ne,
+      {
+        open: N,
+        ready: J,
+        style: q,
+        zIndex: _e,
+        openEffect: V,
+        closeEffect: K,
+        panelRef: B,
+        className: "bear-max-w-[calc(100vw-16px)] bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-xl bear-shadow-xl bear-p-4 bear-overflow-x-auto",
+        attributes: { [De]: ge },
+        children: /* @__PURE__ */ l("div", { className: "bear-flex bear-gap-4", children: [
+          j.length > P && /* @__PURE__ */ l(
+            "div",
+            {
+              className: "bear-border-r bear-border-gray-200 dark:bear-border-zinc-700 bear-pr-3 bear-space-y-1",
+              style: { minWidth: ce },
+              children: [
+                j.map((a) => /* @__PURE__ */ e("button", { type: "button", onClick: () => ne(a.range()), className: "bear-w-full bear-text-left bear-px-3 bear-py-1.5 bear-text-sm bear-rounded bear-transition-colors hover:bear-bg-primary-50 dark:hover:bear-bg-primary-900/20 bear-text-gray-700 dark:bear-text-zinc-300", children: a.label }, a.label)),
+                y && n.start && /* @__PURE__ */ e("button", { type: "button", onClick: oe, className: "bear-w-full bear-text-left bear-px-3 bear-py-1.5 bear-text-sm bear-rounded bear-transition-colors hover:bear-bg-primary-50 dark:hover:bear-bg-primary-900/20 bear-text-red-500", children: ue })
+              ]
+            }
           ),
-          style: { top: z.top, left: z.left },
-          children: /* @__PURE__ */ d("div", { className: "bear-flex bear-gap-4", children: [
-            V.length > 0 && /* @__PURE__ */ d("div", { className: "bear-border-r bear-border-gray-200 dark:bear-border-zinc-700 bear-pr-3 bear-space-y-1 bear-min-w-[120px]", children: [
-              V.map((e) => /* @__PURE__ */ t("button", { type: "button", onClick: () => te(e.range()), className: $, children: e.label }, e.label)),
-              k && s.start && /* @__PURE__ */ t("button", { type: "button", onClick: re, className: p($, "bear-text-red-500"), children: "Clear" })
-            ] }),
-            /* @__PURE__ */ t(Z, { year: E, month: u, range: s, onDayClick: j, onNav: ae, minDate: x, maxDate: S }),
-            /* @__PURE__ */ t(Z, { year: ee, month: X, range: s, onDayClick: j, onNav: () => {
-            }, minDate: x, maxDate: S })
-          ] })
-        }
-      ),
-      document.body
+          /* @__PURE__ */ e($, { year: _, month: v, range: n, onDayClick: W, onNav: se, minDate: k, maxDate: m }),
+          /* @__PURE__ */ e($, { year: ae, month: re, range: n, onDayClick: W, onNav: () => {
+          }, minDate: k, maxDate: m })
+        ] })
+      }
     ),
-    l && /* @__PURE__ */ t("p", { className: me, children: l }),
-    !l && m && /* @__PURE__ */ t("p", { className: ue, children: m })
+    o && /* @__PURE__ */ e("p", { className: "bear-mt-1 bear-text-xs bear-text-red-500", children: o }),
+    !o && c && /* @__PURE__ */ e("p", { className: "bear-mt-1 bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500", children: c })
   ] });
 };
 export {
-  Pe as DateRangePicker
+  Ke as DateRangePicker
 };

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

@@ -1,4 +1,5 @@
 import { HTMLAttributes } from 'react';
+import { OverlayEffectProps } from '../../hooks';
 export interface DateRange {
     start: Date | null;
     end: Date | null;
@@ -7,7 +8,7 @@ export interface DateRangePreset {
     label: string;
     range: () => DateRange;
 }
-export interface DateRangePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+export interface DateRangePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>, OverlayEffectProps {
     id?: string;
     value?: DateRange;
     onChange?: (range: DateRange) => void;

package/dist/components/DateRangePicker/DateRangePicker.utils.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./DateRangePicker.const.cjs"),l=(t,e)=>!t||!e?!1:t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()&&t.getDate()===e.getDate(),i=(t,e,n)=>{if(!e||!n)return!1;const s=t.getTime();return s>e.getTime()&&s<n.getTime()},u=t=>{if(!t)return"";const e=(t.getMonth()+1).toString().padStart(2,"0"),n=t.getDate().toString().padStart(2,"0");return`${e}/${n}/${t.getFullYear()}`},D=(t,e)=>{const n=new Date(t,e,1).getDay(),s=new Date(t,e+1,0).getDate(),g=o.CALENDAR_ROWS*o.DAYS_IN_WEEK,r=[];for(let a=0;a<n;a++)r.push(null);for(let a=1;a<=s;a++)r.push(new Date(t,e,a));for(;r.length<g;)r.push(null);return r};exports.formatDate=u;exports.getCalendarDays=D;exports.isInRange=i;exports.isSameDay=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../constants/numbers.const.cjs"),a=require("../../constants/generals.const.cjs"),l=(e,n)=>!e||!n?!1:e.getFullYear()===n.getFullYear()&&e.getMonth()===n.getMonth()&&e.getDate()===n.getDate(),T=(e,n,r)=>{if(!n||!r)return!1;const E=e.getTime();return E>n.getTime()&&E<r.getTime()},_=e=>{if(!e)return a.EMPTY_STRING;const n=(e.getMonth()+t.ONE).toString().padStart(t.DATE_PAD_LENGTH,a.DATE_PAD_CHAR),r=e.getDate().toString().padStart(t.DATE_PAD_LENGTH,a.DATE_PAD_CHAR);return`${n}${a.DATE_PART_SEPARATOR}${r}${a.DATE_PART_SEPARATOR}${e.getFullYear()}`},g=(e,n)=>{const r=new Date(e,n,t.ONE).getDay(),E=new Date(e,n+t.ONE,t.ZERO).getDate(),o=t.CALENDAR_ROWS*t.DAYS_IN_WEEK,D=[];for(let s=t.ZERO;s<r;s+=t.ONE)D.push(null);for(let s=t.ONE;s<=E;s+=t.ONE)D.push(new Date(e,n,s));for(;D.length<o;)D.push(null);return D},A=()=>{const e=new Date;return e.setHours(t.HOURS_MIDNIGHT,t.HOURS_MIDNIGHT,t.HOURS_MIDNIGHT,t.HOURS_MIDNIGHT),e},S=()=>{const e=A();return[{label:a.PRESET_LABEL_TODAY,range:()=>({start:new Date(e),end:new Date(e)})},{label:a.PRESET_LABEL_LAST_SEVEN,range:()=>{const n=new Date(e);return n.setDate(n.getDate()-t.LAST_SEVEN_DAYS_OFFSET),{start:n,end:new Date(e)}}},{label:a.PRESET_LABEL_LAST_THIRTY,range:()=>{const n=new Date(e);return n.setDate(n.getDate()-t.LAST_THIRTY_DAYS_OFFSET),{start:n,end:new Date(e)}}},{label:a.PRESET_LABEL_THIS_MONTH,range:()=>({start:new Date(e.getFullYear(),e.getMonth(),t.ONE),end:new Date(e)})},{label:a.PRESET_LABEL_LAST_MONTH,range:()=>{const n=new Date(e.getFullYear(),e.getMonth()-t.ONE,t.ONE),r=new Date(e.getFullYear(),e.getMonth(),t.ZERO);return{start:n,end:r}}}]},u=e=>e===t.LAST_MONTH_INDEX?{month:t.ZERO,yearDelta:t.ONE}:{month:e+t.ONE,yearDelta:t.ZERO};exports.formatDate=_;exports.getCalendarDays=g;exports.getDefaultPresets=S;exports.isInRange=T;exports.isSameDay=l;exports.resolveRightMonth=u;

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

@@ -1,4 +1,10 @@
+import { DateRangePreset } from './DateRangePicker.types';
 export declare const isSameDay: (a: Date | null, b: Date | null) => boolean;
 export declare const isInRange: (day: Date, start: Date | null, end: Date | null) => boolean;
 export declare const formatDate: (d: Date | null) => string;
 export declare const getCalendarDays: (year: number, month: number) => (Date | null)[];
+export declare const getDefaultPresets: () => DateRangePreset[];
+export declare const resolveRightMonth: (leftMonth: number) => {
+    month: number;
+    yearDelta: number;
+};

package/dist/components/DateRangePicker/DateRangePicker.utils.js

@@ -1,22 +1,66 @@
-import { CALENDAR_ROWS as l, DAYS_IN_WEEK as g } from "./DateRangePicker.const.js";
-const i = (t, e) => !t || !e ? !1 : t.getFullYear() === e.getFullYear() && t.getMonth() === e.getMonth() && t.getDate() === e.getDate(), D = (t, e, n) => {
-  if (!e || !n) return !1;
-  const o = t.getTime();
-  return o > e.getTime() && o < n.getTime();
-}, c = (t) => {
-  if (!t) return "";
-  const e = (t.getMonth() + 1).toString().padStart(2, "0"), n = t.getDate().toString().padStart(2, "0");
-  return `${e}/${n}/${t.getFullYear()}`;
-}, f = (t, e) => {
-  const n = new Date(t, e, 1).getDay(), o = new Date(t, e + 1, 0).getDate(), s = l * g, a = [];
-  for (let r = 0; r < n; r++) a.push(null);
-  for (let r = 1; r <= o; r++) a.push(new Date(t, e, r));
-  for (; a.length < s; ) a.push(null);
-  return a;
-};
+import { LAST_SEVEN_DAYS_OFFSET as S, LAST_THIRTY_DAYS_OFFSET as u, ONE as n, ZERO as o, DATE_PAD_LENGTH as T, LAST_MONTH_INDEX as A, HOURS_MIDNIGHT as l, CALENDAR_ROWS as c, DAYS_IN_WEEK as L } from "../../constants/numbers.const.js";
+import { PRESET_LABEL_TODAY as R, PRESET_LABEL_LAST_SEVEN as i, PRESET_LABEL_LAST_THIRTY as w, PRESET_LABEL_THIS_MONTH as f, PRESET_LABEL_LAST_MONTH as h, EMPTY_STRING as Y, DATE_PAD_CHAR as g, DATE_PART_SEPARATOR as E } from "../../constants/generals.const.js";
+const O = (t, e) => !t || !e ? !1 : t.getFullYear() === e.getFullYear() && t.getMonth() === e.getMonth() && t.getDate() === e.getDate(), m = (t, e, a) => {
+  if (!e || !a)
+    return !1;
+  const D = t.getTime();
+  return D > e.getTime() && D < a.getTime();
+}, H = (t) => {
+  if (!t)
+    return Y;
+  const e = (t.getMonth() + n).toString().padStart(T, g), a = t.getDate().toString().padStart(T, g);
+  return `${e}${E}${a}${E}${t.getFullYear()}`;
+}, P = (t, e) => {
+  const a = new Date(t, e, n).getDay(), D = new Date(t, e + n, o).getDate(), _ = c * L, s = [];
+  for (let r = o; r < a; r += n)
+    s.push(null);
+  for (let r = n; r <= D; r += n)
+    s.push(new Date(t, e, r));
+  for (; s.length < _; )
+    s.push(null);
+  return s;
+}, d = () => {
+  const t = /* @__PURE__ */ new Date();
+  return t.setHours(l, l, l, l), t;
+}, F = () => {
+  const t = d();
+  return [
+    {
+      label: R,
+      range: () => ({ start: new Date(t), end: new Date(t) })
+    },
+    {
+      label: i,
+      range: () => {
+        const e = new Date(t);
+        return e.setDate(e.getDate() - S), { start: e, end: new Date(t) };
+      }
+    },
+    {
+      label: w,
+      range: () => {
+        const e = new Date(t);
+        return e.setDate(e.getDate() - u), { start: e, end: new Date(t) };
+      }
+    },
+    {
+      label: f,
+      range: () => ({ start: new Date(t.getFullYear(), t.getMonth(), n), end: new Date(t) })
+    },
+    {
+      label: h,
+      range: () => {
+        const e = new Date(t.getFullYear(), t.getMonth() - n, n), a = new Date(t.getFullYear(), t.getMonth(), o);
+        return { start: e, end: a };
+      }
+    }
+  ];
+}, I = (t) => t === A ? { month: o, yearDelta: n } : { month: t + n, yearDelta: o };
 export {
-  c as formatDate,
-  f as getCalendarDays,
-  D as isInRange,
-  i as isSameDay
+  H as formatDate,
+  P as getCalendarDays,
+  F as getDefaultPresets,
+  m as isInRange,
+  O as isSameDay,
+  I as resolveRightMonth
 };

package/dist/components/Drawer/Drawer.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("react"),M=require("react-dom"),O=require("../../context/BearProvider.cjs"),q=require("../../utils/cn.cjs"),j=require("../../utils/generateBearId.utils.cjs"),B=require("../../utils/useBearId.cjs"),T=require("../Icon/index.cjs"),L=require("../Backdrop/Backdrop.cjs"),e=require("./Drawer.const.cjs"),C=require("./Drawer.utils.cjs"),P=({isOpen:u,onClose:o,title:i,children:I,side:h="right",anchor:k,variant:W="temporary",size:D="md",showCloseButton:m=!0,closeOnBackdrop:A=!0,closeOnEscape:f=!0,className:N,container:R,id:w,testId:g})=>{const y=B.useBearId("Drawer"),c=j.resolveBearId(w,y),{direction:x}=O.useBearDirectionOptional(),l=k??h,n=x==="rtl"&&(l==="left"||l==="right")?l==="left"?"right":"left":l,[s,_]=a.useState(u),[S,b]=a.useState(!1),[v,E]=a.useState(!1);a.useEffect(()=>{if(u){_(!0),b(!1);const t=requestAnimationFrame(()=>E(!0));return()=>cancelAnimationFrame(t)}if(s){E(!1),b(!0);const t=setTimeout(()=>{_(!1),b(!1)},e.DRAWER_ANIMATION_MS);return()=>clearTimeout(t)}},[u,s]);const d=a.useCallback(t=>{f&&t.key==="Escape"&&o()},[f,o]);if(a.useEffect(()=>{if(s){document.addEventListener("keydown",d);const t=C.lockBodyScroll();return()=>{document.removeEventListener("keydown",d),t()}}return()=>{document.removeEventListener("keydown",d)}},[s,d]),!s)return null;const p=r.jsxs("div",{id:c,"data-testid":g,className:e.DRAWER_ROOT_CLASSES,style:{zIndex:e.DRAWER_Z_INDEX},children:[r.jsx(L.Backdrop,{open:v&&!S,keepMounted:!0,blur:!0,nested:!0,transitionDuration:e.DRAWER_ANIMATION_MS,className:"Bear-Drawer__backdrop",onClick:A?()=>o():void 0}),r.jsxs("div",{role:"dialog","aria-modal":"true","aria-labelledby":i?`${c}-title`:void 0,className:q.cn("Bear-Drawer__panel","bear-absolute bear-bg-white dark:bear-bg-neutral-900 bear-shadow-2xl","bear-border-neutral-200 dark:bear-border-neutral-700","bear-flex bear-flex-col bear-overflow-hidden","bear-transform bear-transition-transform",e.BORDER_SIDE_MAP[n],e.POSITION_CLASSES[n],e.SIZE_CLASSES[n][D],v&&!S?e.TRANSFORM_OPEN[n]:e.TRANSFORM_CLOSED[n],N),style:{transitionDuration:`${e.DRAWER_ANIMATION_MS}ms`,zIndex:e.DRAWER_PANEL_Z_INDEX},children:[(i||m)&&r.jsxs("div",{className:"bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3 bear-border-b bear-border-neutral-200 dark:bear-border-neutral-700 bear-shrink-0",dir:x,children:[i&&r.jsx("h2",{id:`${c}-title`,className:"bear-text-lg bear-font-semibold bear-text-neutral-900 dark:bear-text-white",children:i}),m&&r.jsx("button",{onClick:o,className:"bear-p-1 bear-rounded-lg bear-text-neutral-500 dark:bear-text-neutral-400 hover:bear-text-neutral-900 dark:hover:bear-text-white hover:bear-bg-neutral-100 dark:hover:bear-bg-neutral-700 bear-transition-colors","aria-label":"Close drawer",children:r.jsx(T.XIcon,{className:"bear-w-5 bear-h-5"})})]}),r.jsx("div",{className:"bear-flex-1 bear-min-h-0 bear-overflow-y-auto bear-overscroll-contain bear-p-4 bear-text-neutral-700 dark:bear-text-neutral-300",children:I})]})]});return M.createPortal(p,R??document.body)};exports.Drawer=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),L=require("react-dom"),P=require("../../context/BearProvider.cjs"),j=require("../../utils/cn.cjs");require("react");const C=require("../../utils/generateBearId.utils.cjs"),F=require("../../utils/useBearId.cjs"),r=require("../../constants/generals.const.cjs"),M=require("../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.const.cjs"),U=require("../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.cjs"),g=require("../Backdrop/Backdrop.cjs"),t=require("../Box/Box.cjs"),s=require("./Drawer.const.cjs"),S=require("./helpers/DrawerOptionalHeader.cjs"),W=require("./hooks/useDrawer.cjs"),$=c=>{const{isOpen:E,onClose:o,title:a,children:D,side:O=s.DRAWER_DEFAULT_SIDE,anchor:p,variant:H="temporary",size:w=s.DRAWER_DEFAULT_SIZE,showCloseButton:i=r.BOOLEAN_TRUE,closeOnBackdrop:A=r.BOOLEAN_TRUE,closeOnEscape:q=r.BOOLEAN_TRUE,className:N,container:R,id:f,testId:m}=c,{openEffect:l,closeEffect:d}=U.resolveOverlayEffects(c,M.OVERLAY_OPEN_EFFECT_DEFAULT),x=F.useBearId(r.COMPONENT_NAME_DRAWER),u=C.resolveBearId(f,x),{direction:I}=P.useBearDirectionOptional(),_=p??O,{isMounted:v,isPanelOpen:n}=W.useDrawer({isOpen:E,onClose:o,closeOnEscape:q,openEffect:l,closeEffect:d}),T=n?l:d;if(!v)return null;const b=!!a||i,B=`${u}-title`,h=A?()=>o():void 0,k=a?B:void 0,y=e.jsxs(t.Box,{id:u,testId:m,className:"Bear-Drawer",children:[e.jsx(g.Backdrop,{open:n,keepMounted:!0,blur:!0,nested:!0,transitionDuration:s.DRAWER_ANIMATION_MS,className:"Bear-Drawer__backdrop",onClick:h}),e.jsxs(t.Box,{role:"dialog","aria-modal":r.BOOLEAN_TRUE,"aria-labelledby":k,className:j.cn("Bear-Drawer__panel",`Bear-Drawer__panel--${_}`,`Bear-Drawer__panel--${w}`,`Bear-Drawer__panel--effect-${T}`,n&&"Bear-Drawer__panel--open",N),children:[e.jsx(S.DrawerOptionalHeader,{showHeader:b,side:_,title:a,titleId:B,showCloseButton:i,onClose:o,direction:I}),e.jsx(t.Box,{className:"Bear-Drawer__body",children:D})]})]});return L.createPortal(y,R??document.body)};exports.Drawer=$;

package/dist/components/Drawer/Drawer.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=300,a=11e3,r=1,b="Bear-Drawer bear-fixed bear-inset-0",l={left:{sm:"bear-w-full sm:bear-w-64 bear-max-w-full sm:bear-max-w-none",md:"bear-w-full sm:bear-w-80 bear-max-w-full sm:bear-max-w-none",lg:"bear-w-full sm:bear-w-96 bear-max-w-full sm:bear-max-w-none",xl:"bear-w-full sm:bear-w-[32rem] bear-max-w-full sm:bear-max-w-none"},right:{sm:"bear-w-full sm:bear-w-64 bear-max-w-full sm:bear-max-w-none",md:"bear-w-full sm:bear-w-80 bear-max-w-full sm:bear-max-w-none",lg:"bear-w-full sm:bear-w-96 bear-max-w-full sm:bear-max-w-none",xl:"bear-w-full sm:bear-w-[32rem] bear-max-w-full sm:bear-max-w-none"},top:{sm:"bear-h-32",md:"bear-h-48",lg:"bear-h-64",xl:"bear-h-96"},bottom:{sm:"bear-h-32",md:"bear-h-48",lg:"bear-h-64",xl:"bear-h-96"}},t={left:"bear-left-0 bear-top-0 bear-h-full",right:"bear-right-0 bear-top-0 bear-h-full",top:"bear-top-0 bear-left-0 bear-w-full",bottom:"bear-bottom-0 bear-left-0 bear-w-full"},m={left:"bear-translate-x-0",right:"bear-translate-x-0",top:"bear-translate-y-0",bottom:"bear-translate-y-0"},o={left:"-bear-translate-x-full",right:"bear-translate-x-full",top:"-bear-translate-y-full",bottom:"bear-translate-y-full"},s={left:"bear-border-r",right:"bear-border-l",top:"bear-border-b",bottom:"bear-border-t"};exports.BORDER_SIDE_MAP=s;exports.DRAWER_ANIMATION_MS=e;exports.DRAWER_PANEL_Z_INDEX=r;exports.DRAWER_ROOT_CLASSES=b;exports.DRAWER_Z_INDEX=a;exports.POSITION_CLASSES=t;exports.SIZE_CLASSES=l;exports.TRANSFORM_CLOSED=o;exports.TRANSFORM_OPEN=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("../../constants/numbers.const.cjs"),E=require("../../constants/generals.const.cjs"),D=_.THREE_HUNDRED,R=E.POSITION_RIGHT,e=E.SIZE_MD;exports.DRAWER_ANIMATION_MS=D;exports.DRAWER_DEFAULT_SIDE=R;exports.DRAWER_DEFAULT_SIZE=e;

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

@@ -1,13 +1,4 @@
 import { DrawerProps } from './Drawer.types';
-type DrawerSide = NonNullable<DrawerProps['side']>;
-type DrawerSize = NonNullable<DrawerProps['size']>;
 export declare const DRAWER_ANIMATION_MS = 300;
-export declare const DRAWER_Z_INDEX = 11000;
-export declare const DRAWER_PANEL_Z_INDEX = 1;
-export declare const DRAWER_ROOT_CLASSES = "Bear-Drawer bear-fixed bear-inset-0";
-export declare const SIZE_CLASSES: Record<DrawerSide, Record<DrawerSize, string>>;
-export declare const POSITION_CLASSES: Record<DrawerSide, string>;
-export declare const TRANSFORM_OPEN: Record<DrawerSide, string>;
-export declare const TRANSFORM_CLOSED: Record<DrawerSide, string>;
-export declare const BORDER_SIDE_MAP: Record<DrawerSide, string>;
-export {};
+export declare const DRAWER_DEFAULT_SIDE: NonNullable<DrawerProps['side']>;
+export declare const DRAWER_DEFAULT_SIZE: NonNullable<DrawerProps['size']>;

package/dist/components/Drawer/Drawer.const.js

@@ -1,57 +1,8 @@
-const e = 300, a = 11e3, r = 1, b = "Bear-Drawer bear-fixed bear-inset-0", l = {
-  left: {
-    sm: "bear-w-full sm:bear-w-64 bear-max-w-full sm:bear-max-w-none",
-    md: "bear-w-full sm:bear-w-80 bear-max-w-full sm:bear-max-w-none",
-    lg: "bear-w-full sm:bear-w-96 bear-max-w-full sm:bear-max-w-none",
-    xl: "bear-w-full sm:bear-w-[32rem] bear-max-w-full sm:bear-max-w-none"
-  },
-  right: {
-    sm: "bear-w-full sm:bear-w-64 bear-max-w-full sm:bear-max-w-none",
-    md: "bear-w-full sm:bear-w-80 bear-max-w-full sm:bear-max-w-none",
-    lg: "bear-w-full sm:bear-w-96 bear-max-w-full sm:bear-max-w-none",
-    xl: "bear-w-full sm:bear-w-[32rem] bear-max-w-full sm:bear-max-w-none"
-  },
-  top: {
-    sm: "bear-h-32",
-    md: "bear-h-48",
-    lg: "bear-h-64",
-    xl: "bear-h-96"
-  },
-  bottom: {
-    sm: "bear-h-32",
-    md: "bear-h-48",
-    lg: "bear-h-64",
-    xl: "bear-h-96"
-  }
-}, t = {
-  left: "bear-left-0 bear-top-0 bear-h-full",
-  right: "bear-right-0 bear-top-0 bear-h-full",
-  top: "bear-top-0 bear-left-0 bear-w-full",
-  bottom: "bear-bottom-0 bear-left-0 bear-w-full"
-}, m = {
-  left: "bear-translate-x-0",
-  right: "bear-translate-x-0",
-  top: "bear-translate-y-0",
-  bottom: "bear-translate-y-0"
-}, o = {
-  left: "-bear-translate-x-full",
-  right: "bear-translate-x-full",
-  top: "-bear-translate-y-full",
-  bottom: "bear-translate-y-full"
-}, s = {
-  left: "bear-border-r",
-  right: "bear-border-l",
-  top: "bear-border-b",
-  bottom: "bear-border-t"
-};
+import { THREE_HUNDRED as E } from "../../constants/numbers.const.js";
+import { POSITION_RIGHT as D, SIZE_MD as R } from "../../constants/generals.const.js";
+const I = E, A = D, t = R;
 export {
-  s as BORDER_SIDE_MAP,
-  e as DRAWER_ANIMATION_MS,
-  r as DRAWER_PANEL_Z_INDEX,
-  b as DRAWER_ROOT_CLASSES,
-  a as DRAWER_Z_INDEX,
-  t as POSITION_CLASSES,
-  l as SIZE_CLASSES,
-  o as TRANSFORM_CLOSED,
-  m as TRANSFORM_OPEN
+  I as DRAWER_ANIMATION_MS,
+  A as DRAWER_DEFAULT_SIDE,
+  t as DRAWER_DEFAULT_SIZE
 };

package/dist/components/Drawer/Drawer.d.ts

@@ -1,3 +1,2 @@
-import { FC } from 'react';
 import { DrawerProps } from './Drawer.types';
-export declare const Drawer: FC<DrawerProps>;
+export declare const Drawer: (props: DrawerProps) => import('react').ReactPortal | null;