@forgedevstack/bear 1.1.8 → 1.1.9

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -1,37 +1,38 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { useState as p, useRef as Q, useEffect as O, useCallback as g } from "react";
-import { cn as E } from "../../utils/cn.js";
-import { getDefaultPresets as U, LABEL_CLASSES as X, SIZE_CLASSES as ee, TRIGGER_CLASSES as te, DROPDOWN_CLASSES as re, PRESET_BTN_CLASSES as P, ERROR_CLASSES as ae, HELPER_CLASSES as se, ROOT_CLASSES as ne, CALENDAR_HEADER_CLASSES as le, NAV_BTN_CLASSES as I, MONTH_LABELS as oe, DAY_LABELS as ce, DAY_TODAY_CLASSES as ie, DAY_IN_RANGE_CLASSES as de, DAY_SELECTED_CLASSES as be, DAY_DISABLED_CLASSES as me, DAY_HOVER_CLASSES as Se, DAY_BASE_CLASSES as ue } from "./DateRangePicker.const.js";
-import { formatDate as z, getCalendarDays as he, isSameDay as w, isInRange as pe } from "./DateRangePicker.utils.js";
-const H = ({ year: L, month: o, range: r, onDayClick: A, onNav: N, minDate: i, maxDate: f }) => {
-  const k = he(L, o), m = /* @__PURE__ */ new Date();
-  return m.setHours(0, 0, 0, 0), /* @__PURE__ */ c("div", { className: "bear-w-64", children: [
-    /* @__PURE__ */ c("div", { className: le, children: [
-      /* @__PURE__ */ e("button", { type: "button", onClick: () => N(-1), className: I, "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__ */ c("span", { className: "bear-text-sm bear-font-semibold bear-text-gray-900 dark:bear-text-white", children: [
-        oe[o],
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { useState as u, useRef as P, useEffect as T, useCallback as v } from "react";
+import { createPortal as se } from "react-dom";
+import { cn as p } from "../../utils/cn.js";
+import { getDefaultPresets as oe, LABEL_CLASSES as le, SIZE_CLASSES as ce, TRIGGER_CLASSES as ie, PRESET_BTN_CLASSES as $, ERROR_CLASSES as de, HELPER_CLASSES as be, ROOT_CLASSES as me, CALENDAR_HEADER_CLASSES as ue, NAV_BTN_CLASSES as G, MONTH_LABELS as pe, DAY_LABELS as he, DAY_TODAY_CLASSES as Se, DAY_IN_RANGE_CLASSES as fe, DAY_SELECTED_CLASSES as ge, DAY_DISABLED_CLASSES as Ee, DAY_HOVER_CLASSES as Le, DAY_BASE_CLASSES as ke } from "./DateRangePicker.const.js";
+import { formatDate as W, getCalendarDays as Ae, isSameDay as Y, isInRange as Ne } from "./DateRangePicker.utils.js";
+const F = ({ year: E, month: c, range: r, onDayClick: L, onNav: k, minDate: d, maxDate: A }) => {
+  const N = Ae(E, c), h = /* @__PURE__ */ new Date();
+  return h.setHours(0, 0, 0, 0), /* @__PURE__ */ i("div", { className: "bear-w-64", children: [
+    /* @__PURE__ */ i("div", { className: ue, children: [
+      /* @__PURE__ */ t("button", { type: "button", onClick: () => k(-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__ */ i("span", { className: "bear-text-sm bear-font-semibold bear-text-gray-900 dark:bear-text-white", children: [
+        pe[c],
         " ",
-        L
+        E
       ] }),
-      /* @__PURE__ */ e("button", { type: "button", onClick: () => N(1), className: I, "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("button", { type: "button", onClick: () => k(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("div", { className: "bear-grid bear-grid-cols-7 bear-gap-0.5 bear-mb-1", children: ce.map((a) => /* @__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: a }, a)) }),
-    /* @__PURE__ */ e("div", { className: "bear-grid bear-grid-cols-7 bear-gap-0.5", children: k.map((a, _) => {
-      if (!a) return /* @__PURE__ */ e("div", {}, `e-${_}`);
-      const S = i && a < i || f && a > f, l = w(a, r.start) || w(a, r.end), d = pe(a, r.start, r.end), D = w(a, m);
-      return /* @__PURE__ */ e(
+    /* @__PURE__ */ t("div", { className: "bear-grid bear-grid-cols-7 bear-gap-0.5 bear-mb-1", children: he.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: N.map((a, x) => {
+      if (!a) return /* @__PURE__ */ t("div", {}, `e-${x}`);
+      const S = d && a < d || A && a > A, l = Y(a, r.start) || Y(a, r.end), b = Ne(a, r.start, r.end), _ = Y(a, h);
+      return /* @__PURE__ */ t(
         "button",
         {
           type: "button",
           disabled: !!S,
-          onClick: () => A(a),
-          className: E(
-            ue,
-            S ? me : Se,
-            l && be,
-            !l && d && de,
-            !l && !d && D && ie,
-            !l && !d && !S && "bear-text-gray-700 dark:bear-text-zinc-300"
+          onClick: () => L(a),
+          className: p(
+            ke,
+            S ? Ee : Le,
+            l && ge,
+            !l && b && fe,
+            !l && !b && _ && Se,
+            !l && !b && !S && "bear-text-gray-700 dark:bear-text-zinc-300"
           ),
           children: a.getDate()
         },
@@ -39,77 +40,102 @@ const H = ({ year: L, month: o, range: r, onDayClick: A, onNav: N, minDate: i, m
       );
     }) })
   ] });
-}, ke = (L) => {
+}, Re = (E) => {
   const {
-    value: o,
+    value: c,
     onChange: r,
-    label: A,
-    placeholder: N = "Select date range",
-    disabled: i = !1,
-    clearable: f = !0,
-    minDate: k,
-    maxDate: m,
+    label: L,
+    placeholder: k = "Select date range",
+    disabled: d = !1,
+    clearable: A = !0,
+    minDate: N,
+    maxDate: h,
     presets: a,
-    showPresets: _ = !0,
+    showPresets: x = !0,
     size: S = "md",
     error: l,
-    helperText: d,
-    className: D,
-    testId: j,
-    ...V
-  } = L, [y, v] = p(!1), [s, u] = p(o ?? { start: null, end: null }), [T, C] = p("start"), x = Q(null), Y = /* @__PURE__ */ new Date(), [b, W] = p(Y.getMonth()), [h, $] = p(Y.getFullYear()), G = b === 11 ? 0 : b + 1, F = b === 11 ? h + 1 : h;
-  O(() => {
-    o && u(o);
-  }, [o]), O(() => {
-    const t = (n) => {
-      x.current && !x.current.contains(n.target) && v(!1);
+    helperText: b,
+    className: _,
+    testId: Z,
+    ...q
+  } = E, [w, D] = u(!1), [H, J] = u({ top: 0, left: 0 }), [s, f] = u(c ?? { start: null, end: null }), [M, C] = u("start"), z = P(null), R = P(null), O = P(null), I = /* @__PURE__ */ new Date(), [m, K] = u(I.getMonth()), [g, Q] = u(I.getFullYear()), U = m === 11 ? 0 : m + 1, X = m === 11 ? g + 1 : g;
+  T(() => {
+    c && f(c);
+  }, [c]), T(() => {
+    if (w && R.current) {
+      const e = R.current.getBoundingClientRect(), n = 8, o = 400, ne = window.innerHeight - e.bottom < o && e.top > o;
+      J({
+        top: ne ? e.top - o - n : e.bottom + n,
+        left: e.left
+      });
+    }
+  }, [w]), T(() => {
+    const e = (n) => {
+      var y, B;
+      const o = n.target;
+      (y = z.current) != null && y.contains(o) || (B = O.current) != null && B.contains(o) || D(!1);
     };
-    return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
   }, []);
-  const B = g((t) => {
-    if (T === "start")
-      u({ start: t, end: null }), C("end");
+  const j = v((e) => {
+    if (M === "start")
+      f({ start: e, end: null }), C("end");
     else {
-      const n = t >= (s.start ?? t) ? { start: s.start, end: t } : { start: t, end: s.start };
-      u(n), C("start"), r == null || r(n);
+      const n = e >= (s.start ?? e) ? { start: s.start, end: e } : { start: e, end: s.start };
+      f(n), C("start"), r == null || r(n);
     }
-  }, [T, s.start, r]), Z = g((t) => {
-    u(t), r == null || r(t), v(!1), C("start");
-  }, [r]), q = g(() => {
-    const t = { start: null, end: null };
-    u(t), r == null || r(t), C("start");
-  }, [r]), J = g((t) => {
-    let n = b + t, R = h;
-    n < 0 && (n = 11, R--), n > 11 && (n = 0, R++), W(n), $(R);
-  }, [b, h]), M = a ?? (_ ? U() : []), K = s.start ? `${z(s.start)}${s.end ? ` – ${z(s.end)}` : ""}` : N;
-  return /* @__PURE__ */ c("div", { ref: x, className: E(ne, D), "data-testid": j, ...V, children: [
-    A && /* @__PURE__ */ e("label", { className: X, children: A }),
-    /* @__PURE__ */ c(
+  }, [M, s.start, r]), ee = v((e) => {
+    f(e), r == null || r(e), D(!1), C("start");
+  }, [r]), te = v(() => {
+    const e = { start: null, end: null };
+    f(e), r == null || r(e), C("start");
+  }, [r]), re = v((e) => {
+    let n = m + e, o = g;
+    n < 0 && (n = 11, o--), n > 11 && (n = 0, o++), K(n), Q(o);
+  }, [m, g]), V = a ?? (x ? oe() : []), ae = s.start ? `${W(s.start)}${s.end ? ` – ${W(s.end)}` : ""}` : k;
+  return /* @__PURE__ */ i("div", { ref: z, className: p(me, _), "data-testid": Z, ...q, children: [
+    L && /* @__PURE__ */ t("label", { className: le, children: L }),
+    /* @__PURE__ */ i(
       "button",
       {
+        ref: R,
         type: "button",
-        disabled: i,
-        onClick: () => !i && v(!y),
-        className: E(te, ee[S], i && "bear-opacity-50 bear-cursor-not-allowed"),
+        disabled: d,
+        onClick: () => !d && D(!w),
+        className: p(ie, ce[S], d && "bear-opacity-50 bear-cursor-not-allowed"),
         children: [
-          /* @__PURE__ */ e("span", { className: E(!s.start && "bear-text-gray-400 dark:bear-text-zinc-500"), children: K }),
-          /* @__PURE__ */ e("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__ */ e("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__ */ t("span", { className: p(!s.start && "bear-text-gray-400 dark:bear-text-zinc-500"), children: ae }),
+          /* @__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" }) })
         ]
       }
     ),
-    y && /* @__PURE__ */ e("div", { className: re, children: /* @__PURE__ */ c("div", { className: "bear-flex bear-gap-4", children: [
-      M.length > 0 && /* @__PURE__ */ c("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: [
-        M.map((t) => /* @__PURE__ */ e("button", { type: "button", onClick: () => Z(t.range()), className: P, children: t.label }, t.label)),
-        f && s.start && /* @__PURE__ */ e("button", { type: "button", onClick: q, className: E(P, "bear-text-red-500"), children: "Clear" })
-      ] }),
-      /* @__PURE__ */ e(H, { year: h, month: b, range: s, onDayClick: B, onNav: J, minDate: k, maxDate: m }),
-      /* @__PURE__ */ e(H, { year: F, month: G, range: s, onDayClick: B, onNav: () => {
-      }, minDate: k, maxDate: m })
-    ] }) }),
-    l && /* @__PURE__ */ e("p", { className: ae, children: l }),
-    !l && d && /* @__PURE__ */ e("p", { className: se, children: d })
+    w && typeof document < "u" && se(
+      /* @__PURE__ */ t(
+        "div",
+        {
+          ref: O,
+          "data-bear-daterangepicker-dropdown": !0,
+          className: p(
+            "bear-fixed bear-z-[9999] 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"
+          ),
+          style: { top: H.top, left: H.left },
+          children: /* @__PURE__ */ i("div", { className: "bear-flex bear-gap-4", children: [
+            V.length > 0 && /* @__PURE__ */ i("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: () => ee(e.range()), className: $, children: e.label }, e.label)),
+              A && s.start && /* @__PURE__ */ t("button", { type: "button", onClick: te, className: p($, "bear-text-red-500"), children: "Clear" })
+            ] }),
+            /* @__PURE__ */ t(F, { year: g, month: m, range: s, onDayClick: j, onNav: re, minDate: N, maxDate: h }),
+            /* @__PURE__ */ t(F, { year: X, month: U, range: s, onDayClick: j, onNav: () => {
+            }, minDate: N, maxDate: h })
+          ] })
+        }
+      ),
+      document.body
+    ),
+    l && /* @__PURE__ */ t("p", { className: de, children: l }),
+    !l && b && /* @__PURE__ */ t("p", { className: be, children: b })
   ] });
 };
 export {
-  ke as DateRangePicker
+  Re as DateRangePicker
 };

package/dist/components/Dropdown/Dropdown.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react/jsx-runtime"),r=require("react"),y=require("../../utils/cn.cjs"),B=require("../../hooks/useClickOutside.cjs");require("../../context/BearProvider.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");const K={xs:"bear-text-xs bear-py-1 bear-px-2",sm:"bear-text-sm bear-py-1.5 bear-px-3",md:"bear-text-sm bear-py-2 bear-px-3",lg:"bear-text-base bear-py-2.5 bear-px-4",xl:"bear-text-lg bear-py-3 bear-px-5"},U={"bottom-start":"bear-top-full bear-left-0 bear-mt-1","bottom-end":"bear-top-full bear-right-0 bear-mt-1",bottom:"bear-top-full bear-left-1/2 -bear-translate-x-1/2 bear-mt-1","top-start":"bear-bottom-full bear-left-0 bear-mb-1","top-end":"bear-bottom-full bear-right-0 bear-mb-1",top:"bear-bottom-full bear-left-1/2 -bear-translate-x-1/2 bear-mb-1",left:"bear-right-full bear-top-0 bear-mr-1",right:"bear-left-full bear-top-0 bear-ml-1"},V=({trigger:x,items:i,open:k,defaultOpen:C=!1,placement:N="bottom-start",offset:Z=4,matchWidth:S=!1,minWidth:D=150,maxHeight:I=300,size:R="md",closeOnSelect:h=!0,closeOnClickOutside:m=!0,disabled:v=!1,onOpenChange:u,className:q,testId:A,...L})=>{var j;const[M,W]=r.useState(C),[o,d]=r.useState(-1),w=r.useRef(null),z=r.useRef(null),E=r.useRef(null),p=k!==void 0,t=p?k:M,f=r.useCallback(e=>{p||W(e),u==null||u(e)},[p,u]),F=r.useCallback(()=>{v||f(!t)},[v,t,f]),l=r.useCallback(()=>{f(!1),d(-1)},[f]),g=r.useCallback(e=>{var s;e.disabled||e.divider||e.header||((s=e.onClick)==null||s.call(e),h&&!e.items&&l())},[h,l]),P=r.useCallback(()=>{t&&m&&l()},[t,m,l]);B.useClickOutside(w,P),r.useEffect(()=>{if(!t)return;const e=i.filter(a=>!a.disabled&&!a.divider&&!a.header),s=a=>{switch(a.key){case"Escape":a.preventDefault(),l();break;case"ArrowDown":a.preventDefault(),d(c=>{const n=c+1;return n>=e.length?0:n});break;case"ArrowUp":a.preventDefault(),d(c=>{const n=c-1;return n<0?e.length-1:n});break;case"Enter":case" ":a.preventDefault(),o>=0&&o<e.length&&g(e[o]);break}};return document.addEventListener("keydown",s),()=>document.removeEventListener("keydown",s)},[t,i,o,l,g]),r.useEffect(()=>{t||d(-1)},[t]);const T=(e,s)=>{if(e.divider)return b.jsx("div",{className:"bear-my-1 bear-mx-2 bear-h-px bear-bg-gray-200 dark:bear-bg-gray-700",role:"separator"},e.key);if(e.header)return b.jsx("div",{className:"bear-px-3 bear-py-1.5 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider bear-text-gray-500 dark:bear-text-gray-400",children:e.label},e.key);const a=i.slice(0,s).filter(n=>!n.disabled&&!n.divider&&!n.header).length,c=o===a;return b.jsxs("button",{type:"button",role:"menuitem",disabled:e.disabled,onClick:()=>g(e),onMouseEnter:()=>d(a),className:y.cn("bear-w-full bear-flex bear-items-center bear-gap-2 bear-text-left bear-border-none bear-bg-transparent",K[R],"bear-transition-colors bear-cursor-pointer",c&&"bear-bg-gray-100 dark:bear-bg-gray-800",e.danger?"bear-text-red-600 dark:bear-text-red-400 hover:bear-bg-red-50 dark:hover:bear-bg-red-900/20":"bear-text-gray-700 dark:bear-text-gray-200 hover:bear-bg-gray-100 dark:hover:bear-bg-gray-800",e.disabled&&"bear-opacity-50 bear-cursor-not-allowed bear-pointer-events-none"),children:[e.icon&&b.jsx("span",{className:"bear-flex-shrink-0 bear-w-5 bear-h-5 bear-flex bear-items-center bear-justify-center",children:e.icon}),b.jsx("span",{className:"bear-flex-1",children:e.label}),e.trailing&&b.jsx("span",{className:"bear-flex-shrink-0 bear-text-gray-400",children:e.trailing}),e.items&&b.jsx("svg",{className:"bear-w-4 bear-h-4 bear-text-gray-400",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:b.jsx("polyline",{points:"9 18 15 12 9 6"})})]},e.key)},_=r.isValidElement(x)?r.cloneElement(x,{onClick:F,ref:E,"aria-expanded":t,"aria-haspopup":!0}):x;return b.jsxs("div",{ref:w,className:y.cn("bear-relative bear-inline-block",q),"data-testid":A,...L,children:[_,t&&b.jsx("div",{ref:z,role:"menu",className:y.cn("bear-absolute bear-z-50","bear-bg-white dark:bear-bg-gray-900","bear-border bear-border-gray-200 dark:bear-border-gray-700","bear-rounded-lg bear-shadow-lg","bear-py-1 bear-overflow-y-auto","bear-animate-in bear-fade-in-0 bear-zoom-in-95 bear-duration-100",U[N]),style:{minWidth:S?(j=E.current)==null?void 0:j.offsetWidth:D,maxHeight:I},children:i.map((e,s)=>T(e,s))})]})};exports.Dropdown=V;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),r=require("react"),h=require("../../utils/cn.cjs"),B=require("../../hooks/useClickOutside.cjs");require("../../context/BearProvider.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");const K={xs:"bear-text-xs bear-py-1 bear-px-2",sm:"bear-text-sm bear-py-1.5 bear-px-3",md:"bear-text-sm bear-py-2 bear-px-3",lg:"bear-text-base bear-py-2.5 bear-px-4",xl:"bear-text-lg bear-py-3 bear-px-5"},U={"bottom-start":"bear-top-full bear-left-0 bear-mt-1","bottom-end":"bear-top-full bear-right-0 bear-mt-1",bottom:"bear-top-full bear-left-1/2 -bear-translate-x-1/2 bear-mt-1","top-start":"bear-bottom-full bear-left-0 bear-mb-1","top-end":"bear-bottom-full bear-right-0 bear-mb-1",top:"bear-bottom-full bear-left-1/2 -bear-translate-x-1/2 bear-mb-1",left:"bear-right-full bear-top-0 bear-mr-1",right:"bear-left-full bear-top-0 bear-ml-1"},V=({trigger:x,items:i,open:k,defaultOpen:j=!1,placement:N="bottom-start",offset:Z=4,matchWidth:S=!1,minWidth:D=150,maxHeight:I=300,size:R="md",closeOnSelect:y=!0,closeOnClickOutside:g=!0,disabled:m=!1,onOpenChange:u,className:q,testId:A,...L})=>{var C;const[M,W]=r.useState(j),[o,d]=r.useState(-1),w=r.useRef(null),z=r.useRef(null),E=r.useRef(null),p=k!==void 0,t=p?k:M,f=r.useCallback(e=>{p||W(e),u==null||u(e)},[p,u]),F=r.useCallback(()=>{m||f(!t)},[m,t,f]),n=r.useCallback(()=>{f(!1),d(-1)},[f]),v=r.useCallback(e=>{var b;e.disabled||e.divider||e.header||((b=e.onClick)==null||b.call(e),y&&!e.items&&n())},[y,n]),P=r.useCallback(()=>{t&&g&&n()},[t,g,n]);B.useClickOutside(w,P),r.useEffect(()=>{if(!t)return;const e=i.filter(a=>!a.disabled&&!a.divider&&!a.header),b=a=>{switch(a.key){case"Escape":a.preventDefault(),n();break;case"ArrowDown":a.preventDefault(),d(c=>{const l=c+1;return l>=e.length?0:l});break;case"ArrowUp":a.preventDefault(),d(c=>{const l=c-1;return l<0?e.length-1:l});break;case"Enter":case" ":a.preventDefault(),o>=0&&o<e.length&&v(e[o]);break}};return document.addEventListener("keydown",b),()=>document.removeEventListener("keydown",b)},[t,i,o,n,v]),r.useEffect(()=>{t||d(-1)},[t]);const T=(e,b)=>{if(e.divider)return s.jsx("div",{className:"bear-my-1 bear-mx-2 bear-h-px",style:{backgroundColor:"var(--bear-border-default)"},role:"separator"},e.key);if(e.header)return s.jsx("div",{className:"bear-px-3 bear-py-1.5 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider",style:{color:"var(--bear-text-muted)"},children:e.label},e.key);const a=i.slice(0,b).filter(l=>!l.disabled&&!l.divider&&!l.header).length,c=o===a;return s.jsxs("button",{type:"button",role:"menuitem",disabled:e.disabled,onClick:()=>v(e),onMouseEnter:()=>d(a),className:h.cn("bear-w-full bear-flex bear-items-center bear-gap-2 bear-text-left bear-border-none bear-bg-transparent",K[R],"bear-transition-colors bear-cursor-pointer",c&&!e.danger&&"bear-bg-[var(--bear-bg-tertiary)]",e.danger&&"bear-text-red-600 dark:bear-text-red-400 hover:bear-bg-red-50 dark:hover:bear-bg-red-900/20",!e.danger&&!e.disabled&&"hover:bear-bg-[var(--bear-bg-tertiary)]",e.disabled&&"bear-opacity-50 bear-cursor-not-allowed bear-pointer-events-none"),style:e.disabled?{color:"var(--bear-text-muted)"}:e.danger?void 0:{color:"var(--bear-text-secondary)"},children:[e.icon&&s.jsx("span",{className:"bear-flex-shrink-0 bear-w-5 bear-h-5 bear-flex bear-items-center bear-justify-center",children:e.icon}),s.jsx("span",{className:"bear-flex-1",children:e.label}),e.trailing&&s.jsx("span",{className:"bear-flex-shrink-0",style:{color:"var(--bear-text-muted)"},children:e.trailing}),e.items&&s.jsx("svg",{className:"bear-w-4 bear-h-4 bear-flex-shrink-0",style:{color:"var(--bear-text-muted)"},viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:s.jsx("polyline",{points:"9 18 15 12 9 6"})})]},e.key)},_=r.isValidElement(x)?r.cloneElement(x,{onClick:F,ref:E,"aria-expanded":t,"aria-haspopup":!0}):x;return s.jsxs("div",{ref:w,className:h.cn("bear-relative bear-inline-block",q),"data-testid":A,...L,children:[_,t&&s.jsx("div",{ref:z,role:"menu",className:h.cn("bear-absolute bear-z-50","bear-border bear-rounded-lg bear-shadow-lg","bear-py-1 bear-overflow-y-auto","bear-animate-in bear-fade-in-0 bear-zoom-in-95 bear-duration-100",U[N]),style:{backgroundColor:"var(--bear-bg-primary)",borderColor:"var(--bear-border-default)",minWidth:S?(C=E.current)==null?void 0:C.offsetWidth:D,maxHeight:I},children:i.map((e,b)=>T(e,b))})]})};exports.Dropdown=V;

package/dist/components/Dropdown/Dropdown.js

@@ -1,6 +1,6 @@
-import { jsxs as D, jsx as n } from "react/jsx-runtime";
-import { useState as S, useRef as y, useCallback as i, useEffect as C, isValidElement as q, cloneElement as G } from "react";
-import { cn as m } from "../../utils/cn.js";
+import { jsxs as I, jsx as o } from "react/jsx-runtime";
+import { useState as D, useRef as v, useCallback as c, useEffect as S, isValidElement as q, cloneElement as G } from "react";
+import { cn as h } from "../../utils/cn.js";
 import { useClickOutside as H } from "../../hooks/useClickOutside.js";
 import "../../context/BearProvider.js";
 import "../../hooks/useBearComponent/useBearComponent.js";
@@ -21,8 +21,8 @@ const J = {
   right: "bear-left-full bear-top-0 bear-ml-1"
 }, te = ({
   trigger: p,
-  items: c,
-  open: h,
+  items: i,
+  open: y,
   defaultOpen: A = !1,
   placement: L = "bottom-start",
   offset: X = 4,
@@ -30,33 +30,33 @@ const J = {
   minWidth: j = 150,
   maxHeight: W = 300,
   size: z = "md",
-  closeOnSelect: k = !0,
-  closeOnClickOutside: v = !0,
+  closeOnSelect: g = !0,
+  closeOnClickOutside: k = !0,
   disabled: w = !1,
   onOpenChange: f,
   className: F,
   testId: M,
   ..._
 }) => {
-  var I;
-  const [B, K] = S(A), [l, s] = S(-1), E = y(null), P = y(null), N = y(null), x = h !== void 0, a = x ? h : B, u = i((e) => {
+  var C;
+  const [B, K] = D(A), [n, s] = D(-1), E = v(null), P = v(null), N = v(null), x = y !== void 0, a = x ? y : B, u = c((e) => {
     x || K(e), f == null || f(e);
-  }, [x, f]), T = i(() => {
+  }, [x, f]), T = c(() => {
     w || u(!a);
-  }, [w, a, u]), o = i(() => {
+  }, [w, a, u]), l = c(() => {
     u(!1), s(-1);
-  }, [u]), g = i((e) => {
+  }, [u]), m = c((e) => {
     var t;
-    e.disabled || e.divider || e.header || ((t = e.onClick) == null || t.call(e), k && !e.items && o());
-  }, [k, o]), U = i(() => {
-    a && v && o();
-  }, [a, v, o]);
-  H(E, U), C(() => {
+    e.disabled || e.divider || e.header || ((t = e.onClick) == null || t.call(e), g && !e.items && l());
+  }, [g, l]), U = c(() => {
+    a && k && l();
+  }, [a, k, l]);
+  H(E, U), S(() => {
     if (!a) return;
-    const e = c.filter((r) => !r.disabled && !r.divider && !r.header), t = (r) => {
+    const e = i.filter((r) => !r.disabled && !r.divider && !r.header), t = (r) => {
       switch (r.key) {
         case "Escape":
-          r.preventDefault(), o();
+          r.preventDefault(), l();
           break;
         case "ArrowDown":
           r.preventDefault(), s((d) => {
@@ -72,55 +72,59 @@ const J = {
           break;
         case "Enter":
         case " ":
-          r.preventDefault(), l >= 0 && l < e.length && g(e[l]);
+          r.preventDefault(), n >= 0 && n < e.length && m(e[n]);
           break;
       }
     };
     return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
-  }, [a, c, l, o, g]), C(() => {
+  }, [a, i, n, l, m]), S(() => {
     a || s(-1);
   }, [a]);
   const V = (e, t) => {
     if (e.divider)
-      return /* @__PURE__ */ n(
+      return /* @__PURE__ */ o(
         "div",
         {
-          className: "bear-my-1 bear-mx-2 bear-h-px bear-bg-gray-200 dark:bear-bg-gray-700",
+          className: "bear-my-1 bear-mx-2 bear-h-px",
+          style: { backgroundColor: "var(--bear-border-default)" },
           role: "separator"
         },
         e.key
       );
     if (e.header)
-      return /* @__PURE__ */ n(
+      return /* @__PURE__ */ o(
         "div",
         {
-          className: "bear-px-3 bear-py-1.5 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider bear-text-gray-500 dark:bear-text-gray-400",
+          className: "bear-px-3 bear-py-1.5 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider",
+          style: { color: "var(--bear-text-muted)" },
           children: e.label
         },
         e.key
       );
-    const r = c.slice(0, t).filter((b) => !b.disabled && !b.divider && !b.header).length, d = l === r;
-    return /* @__PURE__ */ D(
+    const r = i.slice(0, t).filter((b) => !b.disabled && !b.divider && !b.header).length, d = n === r;
+    return /* @__PURE__ */ I(
       "button",
       {
         type: "button",
         role: "menuitem",
         disabled: e.disabled,
-        onClick: () => g(e),
+        onClick: () => m(e),
         onMouseEnter: () => s(r),
-        className: m(
+        className: h(
           "bear-w-full bear-flex bear-items-center bear-gap-2 bear-text-left bear-border-none bear-bg-transparent",
           J[z],
           "bear-transition-colors bear-cursor-pointer",
-          d && "bear-bg-gray-100 dark:bear-bg-gray-800",
-          e.danger ? "bear-text-red-600 dark:bear-text-red-400 hover:bear-bg-red-50 dark:hover:bear-bg-red-900/20" : "bear-text-gray-700 dark:bear-text-gray-200 hover:bear-bg-gray-100 dark:hover:bear-bg-gray-800",
+          d && !e.danger && "bear-bg-[var(--bear-bg-tertiary)]",
+          e.danger && "bear-text-red-600 dark:bear-text-red-400 hover:bear-bg-red-50 dark:hover:bear-bg-red-900/20",
+          !e.danger && !e.disabled && "hover:bear-bg-[var(--bear-bg-tertiary)]",
           e.disabled && "bear-opacity-50 bear-cursor-not-allowed bear-pointer-events-none"
         ),
+        style: e.disabled ? { color: "var(--bear-text-muted)" } : e.danger ? void 0 : { color: "var(--bear-text-secondary)" },
         children: [
-          e.icon && /* @__PURE__ */ n("span", { className: "bear-flex-shrink-0 bear-w-5 bear-h-5 bear-flex bear-items-center bear-justify-center", children: e.icon }),
-          /* @__PURE__ */ n("span", { className: "bear-flex-1", children: e.label }),
-          e.trailing && /* @__PURE__ */ n("span", { className: "bear-flex-shrink-0 bear-text-gray-400", children: e.trailing }),
-          e.items && /* @__PURE__ */ n("svg", { className: "bear-w-4 bear-h-4 bear-text-gray-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ n("polyline", { points: "9 18 15 12 9 6" }) })
+          e.icon && /* @__PURE__ */ o("span", { className: "bear-flex-shrink-0 bear-w-5 bear-h-5 bear-flex bear-items-center bear-justify-center", children: e.icon }),
+          /* @__PURE__ */ o("span", { className: "bear-flex-1", children: e.label }),
+          e.trailing && /* @__PURE__ */ o("span", { className: "bear-flex-shrink-0", style: { color: "var(--bear-text-muted)" }, children: e.trailing }),
+          e.items && /* @__PURE__ */ o("svg", { className: "bear-w-4 bear-h-4 bear-flex-shrink-0", style: { color: "var(--bear-text-muted)" }, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ o("polyline", { points: "9 18 15 12 9 6" }) })
         ]
       },
       e.key
@@ -131,34 +135,34 @@ const J = {
     "aria-expanded": a,
     "aria-haspopup": !0
   }) : p;
-  return /* @__PURE__ */ D(
+  return /* @__PURE__ */ I(
     "div",
     {
       ref: E,
-      className: m("bear-relative bear-inline-block", F),
+      className: h("bear-relative bear-inline-block", F),
       "data-testid": M,
       ..._,
       children: [
         Z,
-        a && /* @__PURE__ */ n(
+        a && /* @__PURE__ */ o(
           "div",
           {
             ref: P,
             role: "menu",
-            className: m(
+            className: h(
               "bear-absolute bear-z-50",
-              "bear-bg-white dark:bear-bg-gray-900",
-              "bear-border bear-border-gray-200 dark:bear-border-gray-700",
-              "bear-rounded-lg bear-shadow-lg",
+              "bear-border bear-rounded-lg bear-shadow-lg",
               "bear-py-1 bear-overflow-y-auto",
               "bear-animate-in bear-fade-in-0 bear-zoom-in-95 bear-duration-100",
               Q[L]
             ),
             style: {
-              minWidth: R ? (I = N.current) == null ? void 0 : I.offsetWidth : j,
+              backgroundColor: "var(--bear-bg-primary)",
+              borderColor: "var(--bear-border-default)",
+              minWidth: R ? (C = N.current) == null ? void 0 : C.offsetWidth : j,
               maxHeight: W
             },
-            children: c.map((e, t) => V(e, t))
+            children: i.map((e, t) => V(e, t))
           }
         )
       ]

package/dist/components/Input/Input.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("react"),d=require("../../utils/cn.cjs"),ae=require("../../context/BearProvider.cjs"),L=require("./components/ClearIcon/ClearIcon.cjs"),te=require("./Input.utils.cjs"),se=require("../Form/Form.utils.cjs"),be={sm:"bear-h-8 bear-text-sm bear-px-3",md:"bear-h-10 bear-text-base bear-px-4",lg:"bear-h-12 bear-text-lg bear-px-5"},P=s.forwardRef(({label:B,helperText:T,error:f,success:j,size:V="md",leftAddon:x,rightAddon:b,fullWidth:D=!1,clearable:G=!1,onClear:m,showCharCount:N=!1,charCountMax:H,autoFormat:g,validation:t,validateOnBlur:J,validateOnChange:w=!1,className:K,disabled:p,value:_,defaultValue:y,maxLength:v,onChange:l,onBlur:n,...Q},U)=>{var F;const h=s.useContext(ae.BearContext),e=(F=h==null?void 0:h.components)==null?void 0:F.Input,W=e==null?void 0:e.root,X=e==null?void 0:e.input,Y=e==null?void 0:e.label,Z=e==null?void 0:e.helper,$=e==null?void 0:e.prefix,q=e==null?void 0:e.suffix,[S,C]=s.useState(null),E=s.useRef(!1),R=t?J??!0:!1,M=f||S,c=!!M,O=!!j&&!c,u=H??v,I=typeof _=="string"?_.length:typeof y=="string"?y.length:0,A=u!=null&&I>u,k=G&&!p&&I>0,z=M||j||T,i=s.useCallback(async a=>{if(!t)return;E.current=!0;const o=await se.validateFieldValue(a,t);E.current=!1,C(o)},[t]);s.useEffect(()=>{f&&C(null)},[f]);const ee=s.useCallback(a=>{if(g){const o=te.applyAutoFormat(a.target.value,g);o!==a.target.value&&(a.target.value=o)}l==null||l(a),w&&t&&i(a.target.value)},[g,l,w,t,i]),re=s.useCallback(a=>{n==null||n(a),R&&t&&i(a.target.value)},[n,R,t,i]);return r.jsxs("div",{className:d.cn("Bear-Input bear-flex bear-flex-col bear-gap-1.5",D&&"bear-w-full"),style:W,children:[B&&r.jsx("label",{className:"Bear-Input__label bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-300",style:Y,children:B}),r.jsxs("div",{className:"Bear-Input__wrapper bear-relative bear-flex bear-items-center",children:[x&&r.jsx("div",{className:"Bear-Input__addon Bear-Input__addon--left bear-absolute bear-left-3 bear-text-gray-500 dark:bear-text-gray-400",style:$,children:x}),r.jsx("input",{ref:U,disabled:p,value:_,defaultValue:y,maxLength:v,"aria-invalid":c||void 0,onChange:ee,onBlur:re,className:d.cn("Bear-Input__field","bear-w-full bear-rounded-lg bear-border bear-outline-none bear-transition-all bear-duration-200","bear-bg-white bear-text-gray-900 placeholder:bear-text-gray-400","bear-border-gray-300 focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-white","dark:bear-bg-gray-800 dark:bear-text-white dark:placeholder:bear-text-gray-500 dark:bear-border-gray-600 dark:focus:bear-ring-offset-gray-900",c?"Bear-Input__field--error bear-border-red-500 focus:bear-ring-red-500":O?"Bear-Input__field--success bear-border-green-500 focus:bear-ring-green-500":"focus:bear-border-bear-500 focus:bear-ring-bear-500 dark:focus:bear-border-bear-500 dark:focus:bear-ring-bear-500",p&&"Bear-Input__field--disabled bear-opacity-50 bear-cursor-not-allowed",x&&"bear-pl-10",(b||k)&&"bear-pr-10",be[V],K),style:X,...Q}),k&&!b&&r.jsx("div",{className:"Bear-Input__addon Bear-Input__addon--right bear-absolute bear-right-3 bear-text-gray-500 dark:bear-text-gray-400",style:q,children:r.jsx(L.ClearIcon,{onClick:m})}),b&&r.jsxs("div",{className:"Bear-Input__addon Bear-Input__addon--right bear-absolute bear-right-3 bear-flex bear-items-center bear-gap-1.5 bear-text-gray-500 dark:bear-text-gray-400",style:q,children:[k&&r.jsx(L.ClearIcon,{onClick:m}),b]})]}),r.jsxs("div",{className:"Bear-Input__footer bear-flex bear-items-center bear-justify-between bear-gap-2",children:[z?r.jsx("p",{className:d.cn("Bear-Input__helper bear-text-sm bear-flex-1",c?"Bear-Input__helper--error bear-text-red-500":O?"Bear-Input__helper--success bear-text-green-500":"bear-text-gray-500 dark:bear-text-gray-400"),style:Z,children:z}):N?r.jsx("span",{}):null,N&&u!=null&&r.jsxs("span",{className:d.cn("Bear-Input__char-count bear-text-xs bear-tabular-nums bear-shrink-0",A?"bear-text-red-500":"bear-text-gray-400 dark:bear-text-gray-500"),children:[I,"/",u]})]})]})});P.displayName="Input";exports.Input=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("react"),b=require("../../utils/cn.cjs"),se=require("../../context/BearProvider.cjs"),ne=require("./components/ClearIcon/ClearIcon.cjs"),le=require("./Input.utils.cjs"),be=require("../Form/Form.utils.cjs"),ce={sm:"bear-h-8",md:"bear-h-10",lg:"bear-h-12"},oe={sm:"bear-text-sm bear-px-3",md:"bear-text-base bear-px-4",lg:"bear-text-lg bear-px-5"},T=s.forwardRef(({label:y,helperText:F,error:x,success:w,size:B="md",InputProps:n,leftAddon:H,rightAddon:S,fullWidth:V=!1,clearable:D=!1,onClear:G,showCharCount:j=!1,charCountMax:J,autoFormat:h,validation:t,validateOnBlur:K,validateOnChange:I=!1,className:Q,disabled:p,value:g,defaultValue:m,maxLength:k,onChange:c,onBlur:o,...U},W)=>{var O;const _=s.useContext(se.BearContext),e=(O=_==null?void 0:_.components)==null?void 0:O.Input,X=e==null?void 0:e.root,Y=e==null?void 0:e.input,Z=e==null?void 0:e.label,$=e==null?void 0:e.helper,z=e==null?void 0:e.prefix,P=e==null?void 0:e.suffix,[ee,N]=s.useState(null),C=s.useRef(!1),q=t?K??!0:!1,R=x||ee,l=!!R,i=!!w&&!l,u=J??k,v=typeof g=="string"?g.length:typeof m=="string"?m.length:0,E=u!=null&&v>u,re=D&&!p&&v>0,A=(n==null?void 0:n.startAdornment)??H,M=(n==null?void 0:n.endAdornment)??S,L=R||w||F,d=s.useCallback(async a=>{if(!t)return;C.current=!0;const f=await be.validateFieldValue(a,t);C.current=!1,N(f)},[t]);s.useEffect(()=>{x&&N(null)},[x]);const ae=s.useCallback(a=>{if(h){const f=le.applyAutoFormat(a.target.value,h);f!==a.target.value&&(a.target.value=f)}c==null||c(a),I&&t&&d(a.target.value)},[h,c,I,t,d]),te=s.useCallback(a=>{o==null||o(a),q&&t&&d(a.target.value)},[o,q,t,d]);return r.jsxs("div",{className:b.cn("Bear-Input bear-flex bear-flex-col bear-gap-1.5",V&&"bear-w-full"),style:X,children:[y&&r.jsx("label",{className:"Bear-Input__label bear-text-sm bear-font-medium",style:{color:"var(--bear-text-secondary)",...Z},children:y}),r.jsxs("div",{className:b.cn("Bear-Input__wrapper bear-flex bear-items-center bear-rounded-lg bear-border bear-overflow-hidden bear-transition-all bear-duration-200","focus-within:bear-ring-2 focus-within:bear-ring-offset-2","focus-within:bear-ring-offset-[var(--bear-bg-primary)]",l?"Bear-Input__wrapper--error bear-border-red-500 focus-within:bear-ring-red-500":i?"Bear-Input__wrapper--success bear-border-green-500 focus-within:bear-ring-green-500":"focus-within:bear-border-bear-500 focus-within:bear-ring-bear-500 dark:focus-within:bear-border-bear-500 dark:focus-within:bear-ring-bear-500",p&&"bear-opacity-50 bear-cursor-not-allowed",ce[B]),style:{backgroundColor:"var(--bear-bg-primary)",borderColor:l||i?void 0:"var(--bear-border-default)"},children:[A&&r.jsx("div",{className:"Bear-Input__addon Bear-Input__addon--left bear-flex bear-items-center bear-self-stretch bear-shrink-0 bear-px-3 bear-text-sm bear-font-medium bear-select-none bear-pointer-events-none",style:{backgroundColor:"var(--bear-bg-tertiary)",borderRight:"1px solid var(--bear-border-default)",color:"var(--bear-text-secondary)",...z},children:A}),r.jsx("input",{ref:W,disabled:p,value:g,defaultValue:m,maxLength:k,"aria-invalid":l||void 0,onChange:ae,onBlur:te,className:b.cn("Bear-Input__field","bear-flex-1 bear-min-w-0 bear-h-full bear-border-0 bear-outline-none bear-bg-transparent","placeholder:opacity-100 placeholder:[color:var(--bear-text-muted)]",oe[B],Q),style:{color:"var(--bear-text-primary)",...Y},...U}),re&&r.jsx("div",{className:"Bear-Input__clear bear-flex bear-items-center bear-self-stretch bear-shrink-0 bear-px-2 bear-cursor-pointer",style:{color:"var(--bear-text-muted)"},children:r.jsx(ne.ClearIcon,{onClick:G})}),M&&r.jsx("div",{className:"Bear-Input__addon Bear-Input__addon--right bear-flex bear-items-center bear-self-stretch bear-shrink-0 bear-px-3 bear-gap-1.5",style:{backgroundColor:"var(--bear-bg-tertiary)",borderLeft:"1px solid var(--bear-border-default)",color:"var(--bear-text-secondary)",...P},children:M})]}),r.jsxs("div",{className:"Bear-Input__footer bear-flex bear-items-center bear-justify-between bear-gap-2",children:[L?r.jsx("p",{className:b.cn("Bear-Input__helper bear-text-sm bear-flex-1",l&&"Bear-Input__helper--error bear-text-red-500",i&&"Bear-Input__helper--success bear-text-green-500"),style:{...l||i?{}:{color:"var(--bear-text-muted)"},...$},children:L}):j?r.jsx("span",{}):null,j&&u!=null&&r.jsxs("span",{className:b.cn("Bear-Input__char-count bear-text-xs bear-tabular-nums bear-shrink-0",E&&"bear-text-red-500"),style:E?void 0:{color:"var(--bear-text-muted)"},children:[v,"/",u]})]})]})});T.displayName="Input";exports.Input=T;