@forgedevstack/bear 1.3.0 → 1.3.1

package/dist/components/TimePicker/TimePicker.js

@@ -1,13 +1,21 @@
-import { jsx as a, jsxs as U } from "react/jsx-runtime";
-import { useState as u, useRef as g, useEffect as z, useCallback as _, useMemo as ee } from "react";
-import { cn as B } from "../../utils/cn.js";
-import { useMediaQuery as te } from "../../hooks/useMediaQuery.js";
-import { formatTime as re } from "./TimePicker.utils.js";
-import { TIMEPICKER_DEFAULT_BREAKPOINT as ae, TIMEPICKER_VARIANT_COLUMNS as R, TIMEPICKER_FORMAT_12H as E, TIMEPICKER_HOURS_12H as oe, TIMEPICKER_HOURS_24H as ne, TIMEPICKER_MINUTES_DIVISOR as se, TIMEPICKER_VARIANT_DIAL as S, TIMEPICKER_LABEL_CLASSES as le, variantClasses as de, sizeClasses as ie, TIMEPICKER_BUTTON_CLASSES as ce, TIMEPICKER_ERROR_CLASSES as me, TIMEPICKER_HELPER_CLASSES as ue, TIMEPICKER_ROOT_CLASSES as Ee, TIMEPICKER_FORMAT_24H as fe, TIMEPICKER_VARIANT_AUTO as Ie } from "./TimePicker.constants.js";
-import { TimePickerColumnsDropdown as pe } from "./components/TimePickerColumnsDropdown/TimePickerColumnsDropdown.js";
-import { TimePickerDialDropdown as Ce } from "./components/TimePickerDialDropdown/TimePickerDialDropdown.js";
-const Te = /* @__PURE__ */ a("svg", { className: "bear-w-5 bear-h-5 bear-text-gray-400 dark:bear-text-zinc-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ a("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" }) }), ve = (e) => {
-  const F = {
+import { jsx as a, jsxs as B } from "react/jsx-runtime";
+import { useState as I, useRef as T, useEffect as ne, useCallback as m, useMemo as ce } from "react";
+import { cn as F } from "../../utils/cn.js";
+import { useMediaQuery as de } from "../../hooks/useMediaQuery.js";
+import { useClickOutsideMultiple as fe } from "../../hooks/useClickOutside.js";
+import "../../context/BearProvider.js";
+import "../../hooks/useBearComponent/useBearComponent.js";
+import { useFixedAnchorPosition as ie } from "../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.js";
+import { resolveOverlayEffects as Ee } from "../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.js";
+import "../FormControl/FormControl.context.js";
+import { ClockIcon as Ie } from "../Icon/index.js";
+import { OverlayPortal as me } from "../OverlayPortal/OverlayPortal.js";
+import { formatTime as pe } from "./TimePicker.utils.js";
+import { TIMEPICKER_DEFAULT_BREAKPOINT as ue, TIMEPICKER_VARIANT_COLUMNS as C, TIMEPICKER_FORMAT_12H as p, TIMEPICKER_DROPDOWN_HEIGHT_PX as Re, TIMEPICKER_HOURS_12H as _e, TIMEPICKER_HOURS_24H as Te, TIMEPICKER_MINUTES_DIVISOR as Ce, TIMEPICKER_VARIANT_DIAL as S, TIMEPICKER_LABEL_CLASSES as Se, TIMEPICKER_CLOCK_ICON_CLASS as Me, variantClasses as be, sizeClasses as he, TIMEPICKER_BUTTON_CLASSES as Ae, TIMEPICKER_ERROR_CLASSES as Oe, TIMEPICKER_HELPER_CLASSES as Ne, TIMEPICKER_DROPDOWN_Z_INDEX as Ke, TIMEPICKER_DROPDOWN_ATTR as ye, TIMEPICKER_ROOT_CLASSES as ve, TIMEPICKER_FORMAT_24H as we, TIMEPICKER_VARIANT_AUTO as xe } from "./TimePicker.constants.js";
+import { TimePickerColumnsDropdown as De } from "./components/TimePickerColumnsDropdown/TimePickerColumnsDropdown.js";
+import { TimePickerDialDropdown as Le } from "./components/TimePickerDialDropdown/TimePickerDialDropdown.js";
+const Je = (e) => {
+  const W = {
     value: e.value,
     onChange: e.onChange,
     disabled: e.disabled ?? !1,
@@ -15,98 +23,118 @@ const Te = /* @__PURE__ */ a("svg", { className: "bear-w-5 bear-h-5 bear-text-gr
     label: e.label,
     error: e.error,
     helperText: e.helperText,
-    format: e.format ?? E,
+    format: e.format ?? p,
     minuteStep: e.minuteStep ?? 5,
     clearable: e.clearable ?? !0,
     className: e.className,
     size: e.size ?? "md",
     variant: e.variant ?? "default",
-    dropdownVariant: e.dropdownVariant ?? R,
-    dropdownVariantBreakpoint: e.dropdownVariantBreakpoint ?? ae,
+    dropdownVariant: e.dropdownVariant ?? C,
+    dropdownVariantBreakpoint: e.dropdownVariantBreakpoint ?? ue,
     icon: e.icon,
-    translations: e.translations
-  }, {
-    value: P,
-    onChange: n,
-    disabled: f,
-    placeholder: j,
-    label: b,
-    error: l,
-    helperText: h,
+    translations: e.translations,
+    openEffect: e.openEffect,
+    closeEffect: e.closeEffect,
+    effect: e.effect,
+    testId: e.testId
+  }, { openEffect: j, closeEffect: X } = Ee(e), {
+    value: G,
+    onChange: o,
+    disabled: u,
+    placeholder: Q,
+    label: M,
+    error: n,
+    helperText: b,
     format: s,
-    minuteStep: I,
-    clearable: M,
-    className: W,
-    size: Q,
-    variant: $,
+    minuteStep: R,
+    clearable: h,
+    className: Z,
+    size: $,
+    variant: q,
     dropdownVariant: A,
-    dropdownVariantBreakpoint: q,
-    icon: G,
-    translations: N
-  } = F, J = te(`(min-width: ${q}px)`), v = A === Ie ? J ? S : R : A, w = v === S && s === fe ? R : v, r = P, [p, d] = u(!1), [i, L] = u(12), [c, O] = u(0), [m, k] = u("AM"), C = g(null);
-  z(() => {
-    if (r && typeof r == "string") {
-      const [o, t] = r.split(" "), [Y, Z] = o.split(":").map(Number);
-      L(Y), O(Z), t && k(t);
+    dropdownVariantBreakpoint: J,
+    icon: Y,
+    translations: O,
+    testId: g
+  } = W, ee = de(`(min-width: ${J}px)`), N = A === xe ? ee ? S : C : A, K = N === S && s === we ? C : N, t = G, [l, c] = I(!1), [d, y] = I(12), [f, v] = I(0), [i, w] = I("AM"), x = T(null), D = T(null), L = T(null), { style: te, ready: re } = ie({
+    anchorRef: D,
+    open: l,
+    estimatedHeightPx: Re
+  });
+  ne(() => {
+    if (t && typeof t == "string") {
+      const [E, r] = t.split(" "), [le, se] = E.split(":").map(Number);
+      y(le), v(se), r && w(r);
     }
-  }, [r]), z(() => {
-    const o = (t) => {
-      C.current && !C.current.contains(t.target) && d(!1);
-    };
-    return document.addEventListener("mousedown", o), () => document.removeEventListener("mousedown", o);
-  }, []);
-  const K = _(() => {
-    n == null || n(re(i, c, m, s ?? E)), d(!1);
-  }, [n, i, c, m, s]), x = s === E ? Array.from({ length: oe }, (o, t) => t + 1) : Array.from({ length: ne }, (o, t) => t), V = Array.from(
-    { length: se / (I ?? 5) },
-    (o, t) => t * (I ?? 5)
-  ), y = _(() => d(!1), []), H = s ?? E, D = I ?? 5, T = ee(
+  }, [t]);
+  const ae = m(() => c(!1), []);
+  fe([x, L], ae, { enabled: l });
+  const V = m(() => {
+    o == null || o(pe(d, f, i, s ?? p)), c(!1);
+  }, [o, d, f, i, s]), k = s === p ? Array.from({ length: _e }, (E, r) => r + 1) : Array.from({ length: Te }, (E, r) => r), H = Array.from(
+    { length: Ce / (R ?? 5) },
+    (E, r) => r * (R ?? 5)
+  ), P = m(() => c(!1), []), U = s ?? p, z = R ?? 5, _ = ce(
     () => ({
-      selectedHour: i,
-      setSelectedHour: L,
-      selectedMinute: c,
-      setSelectedMinute: O,
-      period: m,
-      setPeriod: k,
-      format: H,
-      hours: x,
-      minutes: V,
-      timeValue: r,
-      clearable: M ?? !0,
-      onChange: n,
-      onConfirm: K,
-      onClose: y,
-      translations: N
+      selectedHour: d,
+      setSelectedHour: y,
+      selectedMinute: f,
+      setSelectedMinute: v,
+      period: i,
+      setPeriod: w,
+      format: U,
+      hours: k,
+      minutes: H,
+      timeValue: t,
+      clearable: h ?? !0,
+      onChange: o,
+      onConfirm: V,
+      onClose: P,
+      translations: O
     }),
-    [i, c, m, H, x, V, r, M, n, K, y, N]
-  ), X = _(() => p ? w === S ? /* @__PURE__ */ a(Ce, { ...T, minuteStep: D }) : /* @__PURE__ */ a(pe, { ...T }) : null, [p, w, T, D]);
-  return /* @__PURE__ */ U("div", { ref: C, className: B(Ee, W), children: [
-    b && /* @__PURE__ */ a("label", { className: le, children: b }),
-    /* @__PURE__ */ U(
+    [d, f, i, U, k, H, t, h, o, V, P, O]
+  ), oe = m(() => l ? K === S ? /* @__PURE__ */ a(Le, { ..._, minuteStep: z }) : /* @__PURE__ */ a(De, { ..._ }) : null, [l, K, _, z]);
+  return /* @__PURE__ */ B("div", { ref: x, className: F(ve, Z), "data-testid": g, children: [
+    M && /* @__PURE__ */ a("label", { className: Se, children: M }),
+    /* @__PURE__ */ B(
       "button",
       {
+        ref: D,
         type: "button",
-        onClick: () => !f && d(!p),
-        disabled: f,
-        className: B(
-          ce,
-          ie[Q ?? "md"],
-          de[$ ?? "default"],
-          l ? "bear-border-red-500" : "focus:bear-border-primary-500",
-          f && "bear-opacity-50 bear-cursor-not-allowed",
-          r ? "bear-text-gray-900 dark:bear-text-white" : "bear-text-gray-400 dark:bear-text-zinc-500"
+        onClick: () => !u && c(!l),
+        disabled: u,
+        className: F(
+          Ae,
+          he[$ ?? "md"],
+          be[q ?? "default"],
+          n ? "bear-border-red-500" : "focus:bear-border-primary-500",
+          u && "bear-opacity-50 bear-cursor-not-allowed",
+          t ? "bear-text-gray-900 dark:bear-text-white" : "bear-text-gray-400 dark:bear-text-zinc-500"
         ),
         children: [
-          /* @__PURE__ */ a("span", { children: r || j }),
-          G ?? Te
+          /* @__PURE__ */ a("span", { children: t || Q }),
+          Y ?? /* @__PURE__ */ a(Ie, { className: Me })
         ]
       }
     ),
-    l && /* @__PURE__ */ a("p", { className: me, children: l }),
-    h && !l && /* @__PURE__ */ a("p", { className: ue, children: h }),
-    X()
+    n && /* @__PURE__ */ a("p", { className: Oe, children: n }),
+    b && !n && /* @__PURE__ */ a("p", { className: Ne, children: b }),
+    /* @__PURE__ */ a(
+      me,
+      {
+        open: l,
+        ready: re,
+        style: te,
+        zIndex: Ke,
+        openEffect: j,
+        closeEffect: X,
+        panelRef: L,
+        attributes: { [ye]: "" },
+        children: oe()
+      }
+    )
   ] });
 };
 export {
-  ve as TimePicker
+  Je as TimePicker
 };

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

@@ -1,4 +1,4 @@
-/** Dropdown variant: columns (scrollable lists), dial (clock face), auto (responsive). */
+import { OverlayEffectProps } from '../../hooks/useFixedAnchorPosition';
 export type TimePickerDropdownVariant = 'columns' | 'dial' | 'auto';
 /** Time format: 12-hour with AM/PM or 24-hour. */
 export type TimePickerFormat = '12h' | '24h';
@@ -35,7 +35,7 @@ export interface TimePickerColumnsProps {
 export interface TimePickerDialProps extends TimePickerColumnsProps {
     minuteStep: number;
 }
-export interface TimePickerProps {
+export interface TimePickerProps extends OverlayEffectProps {
     /** Time string (e.g. "02:30 PM") */
     value?: string | null;
     onChange?: (time: string | null) => void;
@@ -58,6 +58,7 @@ export interface TimePickerProps {
     dropdownVariantBreakpoint?: number;
     /** Custom icon to replace the default clock icon (ReactNode). */
     icon?: React.ReactNode;
-    /** Translation overrides for selectTime, hour, minute, period, cancel, ok. */
     translations?: TimePickerTranslations;
+    testId?: string;
+    id?: string;
 }

package/dist/components/Transition/Transition.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),x=require("../../utils/cn.cjs"),M=require("./Transition.const.cjs"),P=({show:a,name:y="fade",duration:i=M.DEFAULT_DURATION,delay:n=0,easing:I=M.DEFAULT_EASING,enterFrom:l,enterTo:o,leaveFrom:f,leaveTo:N,unmountOnHide:T=!0,onEnter:m,onEntered:d,onLeave:c,onLeft:S,children:v,className:R,as:A="div"})=>{const[q,F]=s.useState(a),[b,u]=s.useState(a?"idle":"exit-active"),e=s.useRef(null);if(s.useEffect(()=>(e.current&&clearTimeout(e.current),a?(F(!0),u("enter"),m==null||m(),requestAnimationFrame(()=>{requestAnimationFrame(()=>{u("enter-active"),e.current=setTimeout(()=>{u("idle"),d==null||d()},i+n)})})):(u("exit"),c==null||c(),requestAnimationFrame(()=>{requestAnimationFrame(()=>{u("exit-active"),e.current=setTimeout(()=>{T&&F(!1),S==null||S()},i+n)})})),()=>{e.current&&clearTimeout(e.current)}),[a]),!q&&T)return null;const t=M.TRANSITION_PRESETS[y];let r={transition:`all ${i}ms ${I} ${n}ms`};switch(b){case"enter":r={...r,...l??(t==null?void 0:t.enter)};break;case"enter-active":case"idle":r={...r,...o??(t==null?void 0:t.enterActive)};break;case"exit":r={...r,...f??(t==null?void 0:t.exit)};break;case"exit-active":r={...r,...N??(t==null?void 0:t.exitActive)};break}return s.createElement(A,{className:x.cn(R),style:r},v)},$=({children:a,initial:y,animate:i,exit:n,transition:I={},whileHover:l,whileTap:o,inView:f=!0,as:N="div",className:T,testId:m})=>{const[d,c]=s.useState(y??{}),[S,v]=s.useState(!1),[R,A]=s.useState(!1),q=s.useRef(!1),{duration:F=300,delay:b=0,easing:u=M.DEFAULT_EASING}=I;s.useEffect(()=>{q.current?f&&i?c(i):!f&&n&&c(n):(q.current=!0,requestAnimationFrame(()=>{f&&i&&c(i)}))},[f]);let e={...d,transition:`all ${F}ms ${u} ${b}ms`};return R&&o?e={...e,...o}:S&&l&&(e={...e,...l}),s.createElement(N,{className:x.cn(T),style:e,"data-testid":m,onMouseEnter:l?()=>v(!0):void 0,onMouseLeave:l?()=>{v(!1),A(!1)}:void 0,onMouseDown:o?()=>A(!0):void 0,onMouseUp:o?()=>A(!1):void 0},a)};exports.Motion=$;exports.Transition=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),P=require("../../utils/cn.cjs"),q=require("./Transition.const.cjs"),$=({show:u,name:F="fade",duration:i=q.DEFAULT_DURATION,delay:n=0,easing:y=q.DEFAULT_EASING,enterFrom:l,enterTo:o,leaveFrom:f,leaveTo:I,unmountOnHide:T=!0,onEnter:m,onEntered:d,onLeave:c,onLeft:S,children:v,className:N,as:A="div"})=>{const[M,R]=s.useState(u),[b,a]=s.useState(u?"idle":"exit-active"),e=s.useRef(null),x=s.useRef(!1);if(s.useEffect(()=>{if(e.current&&clearTimeout(e.current),!(!x.current&&(x.current=!0,!u)))return u?(R(!0),a("enter"),m==null||m(),requestAnimationFrame(()=>{requestAnimationFrame(()=>{a("enter-active"),e.current=setTimeout(()=>{a("idle"),d==null||d()},i+n)})})):(a("exit"),c==null||c(),requestAnimationFrame(()=>{requestAnimationFrame(()=>{a("exit-active"),e.current=setTimeout(()=>{T&&R(!1),S==null||S()},i+n)})})),()=>{e.current&&clearTimeout(e.current)}},[u]),!M&&T)return null;const t=q.TRANSITION_PRESETS[F];let r={transition:`all ${i}ms ${y} ${n}ms`};switch(b){case"enter":r={...r,...l??(t==null?void 0:t.enter)};break;case"enter-active":case"idle":r={...r,...o??(t==null?void 0:t.enterActive)};break;case"exit":r={...r,...f??(t==null?void 0:t.exit)};break;case"exit-active":r={...r,...I??(t==null?void 0:t.exitActive)};break}return s.createElement(A,{className:P.cn(N),style:r},v)},g=({children:u,initial:F,animate:i,exit:n,transition:y={},whileHover:l,whileTap:o,inView:f=!0,as:I="div",className:T,testId:m})=>{const[d,c]=s.useState(F??{}),[S,v]=s.useState(!1),[N,A]=s.useState(!1),M=s.useRef(!1),{duration:R=300,delay:b=0,easing:a=q.DEFAULT_EASING}=y;s.useEffect(()=>{M.current?f&&i?c(i):!f&&n&&c(n):(M.current=!0,requestAnimationFrame(()=>{f&&i&&c(i)}))},[f]);let e={...d,transition:`all ${R}ms ${a} ${b}ms`};return N&&o?e={...e,...o}:S&&l&&(e={...e,...l}),s.createElement(I,{className:P.cn(T),style:e,"data-testid":m,onMouseEnter:l?()=>v(!0):void 0,onMouseLeave:l?()=>{v(!1),A(!1)}:void 0,onMouseDown:o?()=>A(!0):void 0,onMouseUp:o?()=>A(!1):void 0},u)};exports.Motion=g;exports.Transition=$;

package/dist/components/Transition/Transition.js

@@ -1,48 +1,51 @@
-import { useState as v, useRef as y, useEffect as P, createElement as R } from "react";
-import { cn as b } from "../../utils/cn.js";
-import { DEFAULT_EASING as k, DEFAULT_DURATION as D, TRANSITION_PRESETS as U } from "./Transition.const.js";
-const G = ({
-  show: u,
-  name: I = "fade",
-  duration: r = D,
+import { useState as v, useRef as q, useEffect as P, createElement as b } from "react";
+import { cn as k } from "../../utils/cn.js";
+import { DEFAULT_DURATION as U, TRANSITION_PRESETS as g, DEFAULT_EASING as D } from "./Transition.const.js";
+const O = ({
+  show: i,
+  name: M = "fade",
+  duration: r = U,
   delay: a = 0,
-  easing: M = k,
+  easing: I = D,
   enterFrom: n,
   enterTo: l,
-  leaveFrom: m,
+  leaveFrom: o,
   leaveTo: N,
   unmountOnHide: S = !0,
-  onEnter: o,
+  onEnter: m,
   onEntered: f,
-  onLeave: i,
+  onLeave: c,
   onLeft: d,
   children: T,
-  className: $,
+  className: R,
   as: A = "div"
 }) => {
-  const [x, F] = v(u), [q, c] = v(
-    u ? "idle" : "exit-active"
-  ), e = y(null);
-  if (P(() => (e.current && clearTimeout(e.current), u ? (F(!0), c("enter"), o == null || o(), requestAnimationFrame(() => {
-    requestAnimationFrame(() => {
-      c("enter-active"), e.current = setTimeout(() => {
-        c("idle"), f == null || f();
-      }, r + a);
-    });
-  })) : (c("exit"), i == null || i(), requestAnimationFrame(() => {
-    requestAnimationFrame(() => {
-      c("exit-active"), e.current = setTimeout(() => {
-        S && F(!1), d == null || d();
-      }, r + a);
-    });
-  })), () => {
-    e.current && clearTimeout(e.current);
-  }), [u]), !x && S) return null;
-  const t = U[I];
+  const [x, F] = v(i), [$, u] = v(
+    i ? "idle" : "exit-active"
+  ), e = q(null), y = q(!1);
+  if (P(() => {
+    if (e.current && clearTimeout(e.current), !(!y.current && (y.current = !0, !i)))
+      return i ? (F(!0), u("enter"), m == null || m(), requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          u("enter-active"), e.current = setTimeout(() => {
+            u("idle"), f == null || f();
+          }, r + a);
+        });
+      })) : (u("exit"), c == null || c(), requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          u("exit-active"), e.current = setTimeout(() => {
+            S && F(!1), d == null || d();
+          }, r + a);
+        });
+      })), () => {
+        e.current && clearTimeout(e.current);
+      };
+  }, [i]), !x && S) return null;
+  const t = g[M];
   let s = {
-    transition: `all ${r}ms ${M} ${a}ms`
+    transition: `all ${r}ms ${I} ${a}ms`
   };
-  switch (q) {
+  switch ($) {
     case "enter":
       s = { ...s, ...n ?? (t == null ? void 0 : t.enter) };
       break;
@@ -51,46 +54,46 @@ const G = ({
       s = { ...s, ...l ?? (t == null ? void 0 : t.enterActive) };
       break;
     case "exit":
-      s = { ...s, ...m ?? (t == null ? void 0 : t.exit) };
+      s = { ...s, ...o ?? (t == null ? void 0 : t.exit) };
       break;
     case "exit-active":
       s = { ...s, ...N ?? (t == null ? void 0 : t.exitActive) };
       break;
   }
-  return R(
+  return b(
     A,
-    { className: b($), style: s },
+    { className: k(R), style: s },
     T
   );
-}, O = ({
-  children: u,
-  initial: I,
+}, j = ({
+  children: i,
+  initial: M,
   animate: r,
   exit: a,
-  transition: M = {},
+  transition: I = {},
   whileHover: n,
   whileTap: l,
-  inView: m = !0,
+  inView: o = !0,
   as: N = "div",
   className: S,
-  testId: o
+  testId: m
 }) => {
-  const [f, i] = v(I ?? {}), [d, T] = v(!1), [$, A] = v(!1), x = y(!1), { duration: F = 300, delay: q = 0, easing: c = k } = M;
+  const [f, c] = v(M ?? {}), [d, T] = v(!1), [R, A] = v(!1), x = q(!1), { duration: F = 300, delay: $ = 0, easing: u = D } = I;
   P(() => {
-    x.current ? m && r ? i(r) : !m && a && i(a) : (x.current = !0, requestAnimationFrame(() => {
-      m && r && i(r);
+    x.current ? o && r ? c(r) : !o && a && c(a) : (x.current = !0, requestAnimationFrame(() => {
+      o && r && c(r);
     }));
-  }, [m]);
+  }, [o]);
   let e = {
     ...f,
-    transition: `all ${F}ms ${c} ${q}ms`
+    transition: `all ${F}ms ${u} ${$}ms`
   };
-  return $ && l ? e = { ...e, ...l } : d && n && (e = { ...e, ...n }), R(
+  return R && l ? e = { ...e, ...l } : d && n && (e = { ...e, ...n }), b(
     N,
     {
-      className: b(S),
+      className: k(S),
       style: e,
-      "data-testid": o,
+      "data-testid": m,
       onMouseEnter: n ? () => T(!0) : void 0,
       onMouseLeave: n ? () => {
         T(!1), A(!1);
@@ -98,10 +101,10 @@ const G = ({
       onMouseDown: l ? () => A(!0) : void 0,
       onMouseUp: l ? () => A(!1) : void 0
     },
-    u
+    i
   );
 };
 export {
-  O as Motion,
-  G as Transition
+  j as Motion,
+  O as Transition
 };

package/dist/components/TreeSelect/TreeSelect.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),x=require("../../utils/cn.cjs"),Z=require("../Portal/Portal.cjs"),s=require("./TreeSelect.const.cjs"),N=require("./TreeSelect.utils.cjs"),U=1e4,I=({node:a,depth:i,selected:d,expanded:n,multiple:o,onToggleExpand:h,onSelect:p})=>{const u=a.children&&a.children.length>0,E=n.has(a.id),m=d.has(a.id);return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:x.cn(s.NODE_CLASSES,m&&s.NODE_SELECTED_CLASSES,a.disabled&&s.NODE_DISABLED_CLASSES),style:{paddingLeft:i*s.INDENT_PX+12},onClick:()=>!a.disabled&&p(a.id),role:"treeitem","aria-selected":m,"aria-expanded":u?E:void 0,children:[u?e.jsx("svg",{className:x.cn(s.CHEVRON_CLASSES,E&&"bear-rotate-90"),onClick:f=>{f.stopPropagation(),h(a.id)},fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M9 5l7 7-7 7"})}):e.jsx("span",{className:"bear-w-4 bear-mr-1"}),o&&e.jsx("span",{className:x.cn("bear-w-4 bear-h-4 bear-mr-2 bear-border bear-rounded bear-flex bear-items-center bear-justify-center bear-text-xs",m?"bear-bg-primary-500 bear-border-primary-500 bear-text-white":"bear-border-gray-300 dark:bear-border-zinc-600"),children:m&&"✓"}),a.icon&&e.jsx("span",{className:"bear-mr-1.5",children:a.icon}),e.jsx("span",{className:"bear-truncate",children:a.label})]}),u&&E&&a.children.map(f=>e.jsx(I,{node:f,depth:i+1,selected:d,expanded:n,multiple:o,onToggleExpand:h,onSelect:p},f.id))]})},J=a=>{const{nodes:i,value:d,onChange:n,multiple:o=!1,label:h,placeholder:p="Select…",disabled:u=!1,clearable:E=!0,searchable:m=!0,expandAll:f=!1,size:O="md",error:w,helperText:y,maxHeight:P=s.DEFAULT_MAX_HEIGHT,className:D,testId:M,...z}=a,[b,j]=l.useState(!1),[L,v]=l.useState(""),C=l.useRef(null),_=l.useRef(null),g=l.useRef(null),[A,B]=l.useState({top:0,left:0,width:0}),q=l.useMemo(()=>N.collectAllIds(i),[i]),[H,G]=l.useState(()=>f?q:new Set),S=l.useMemo(()=>d?new Set(Array.isArray(d)?d:[d]):new Set,[d]);l.useEffect(()=>{if(!b)return;const r=()=>{var c;const t=(c=_.current)==null?void 0:c.getBoundingClientRect();t&&B({top:t.bottom+4,left:Math.max(8,Math.min(t.left,window.innerWidth-t.width-8)),width:t.width})};return r(),window.addEventListener("resize",r),window.addEventListener("scroll",r,!0),()=>{window.removeEventListener("resize",r),window.removeEventListener("scroll",r,!0)}},[b]),l.useEffect(()=>{if(!b)return;const r=t=>{var k,T;const c=t.target;(k=C.current)!=null&&k.contains(c)||(T=g.current)!=null&&T.contains(c)||(j(!1),v(""))};return document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[b]);const W=l.useCallback(r=>{G(t=>{const c=new Set(t);return c.has(r)?c.delete(r):c.add(r),c})},[]),F=l.useCallback(r=>{if(o){const t=new Set(S);t.has(r)?t.delete(r):t.add(r),n==null||n(Array.from(t))}else n==null||n(r),j(!1),v("")},[o,S,n]),V=l.useCallback(()=>{n==null||n(o?[]:"")},[o,n]),R=L?N.filterNodes(i,L):i,X=()=>{if(S.size===0)return e.jsx("span",{className:"bear-text-gray-400 dark:bear-text-zinc-500",children:p});if(o)return e.jsx("div",{className:"bear-flex bear-flex-wrap bear-gap-1",children:Array.from(S).map(t=>{const c=N.findNodeById(i,t);return c?e.jsx("span",{className:s.TAG_CLASSES,children:c.label},t):null})});const r=N.findNodeById(i,Array.from(S)[0]);return(r==null?void 0:r.label)??p};return e.jsxs("div",{ref:C,className:x.cn(s.ROOT_CLASSES,D),"data-testid":M,...z,children:[h&&e.jsx("label",{className:s.LABEL_CLASSES,children:h}),e.jsxs("button",{ref:_,type:"button",disabled:u,onClick:()=>!u&&j(!b),className:x.cn(s.TRIGGER_CLASSES,s.SIZE_CLASSES[O],u&&"bear-opacity-50 bear-cursor-not-allowed"),children:[e.jsx("span",{className:"bear-flex-1 bear-text-left bear-truncate",children:X()}),e.jsxs("div",{className:"bear-flex bear-items-center bear-gap-1",children:[E&&S.size>0&&e.jsx("span",{className:"bear-text-gray-400 hover:bear-text-gray-600 bear-cursor-pointer",onClick:r=>{r.stopPropagation(),V()},children:"✕"}),e.jsx("svg",{className:x.cn("bear-w-4 bear-h-4 bear-text-gray-400 bear-transition-transform",b&&"bear-rotate-180"),fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]})]}),b&&e.jsx(Z.Portal,{children:e.jsxs("div",{ref:g,className:x.cn(s.DROPDOWN_CLASSES,"bear-fixed"),style:{top:A.top,left:A.left,width:A.width,zIndex:U},children:[m&&e.jsx("input",{className:s.SEARCH_CLASSES,placeholder:"Search…",value:L,onChange:r=>v(r.target.value),autoFocus:!0}),e.jsx("div",{style:{maxHeight:P},className:"bear-overflow-y-auto",role:"tree",children:R.length>0?R.map(r=>e.jsx(I,{node:r,depth:0,selected:S,expanded:H,multiple:o,onToggleExpand:W,onSelect:F},r.id)):e.jsx("div",{className:"bear-py-6 bear-text-center bear-text-sm bear-text-gray-400",children:"No results"})})]})}),w&&e.jsx("p",{className:s.ERROR_CLASSES,children:w}),!w&&y&&e.jsx("p",{className:s.HELPER_CLASSES,children:y})]})};exports.TreeSelect=J;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("react"),s=require("../../constants/numbers.const.cjs"),n=require("../../constants/generals.const.cjs"),T=require("../../utils/cn.cjs"),m=require("../Box/Box.cjs"),K=require("../Button/Button.cjs"),Q=require("../Icon/index.cjs"),I=require("../Flex/Flex.cjs"),$=require("../Portal/Portal.cjs"),b=require("../Typography/Typography.cjs"),ee=require("./components/TreeNodeRow/TreeNodeRow.cjs"),re=require("./TreeSelect.const.cjs"),h=require("./TreeSelect.utils.cjs"),te=q=>{const{nodes:d,value:x,onChange:l,multiple:c=n.BOOLEAN_FALSE,label:O,placeholder:R="Select…",disabled:f=n.BOOLEAN_FALSE,clearable:z=n.BOOLEAN_TRUE,searchable:M=n.BOOLEAN_TRUE,expandAll:P=n.BOOLEAN_FALSE,size:F=n.SIZE_MD,error:y,helperText:_,maxHeight:Z=s.TREE_SELECT_MAX_HEIGHT_PX,className:G,testId:C,...H}=q,[i,E]=a.useState(n.BOOLEAN_FALSE),[g,w]=a.useState(n.EMPTY_STRING),A=a.useRef(null),L=a.useRef(null),j=a.useRef(null),[S,Y]=a.useState({top:s.ZERO,left:s.ZERO,width:s.ZERO}),U=a.useMemo(()=>h.collectAllIds(d),[d]),[D,X]=a.useState(()=>P?U:new Set),u=a.useMemo(()=>x?new Set(Array.isArray(x)?x:[x]):new Set,[x]);a.useEffect(()=>{if(!i)return;const e=()=>{var o;const t=(o=L.current)==null?void 0:o.getBoundingClientRect();t&&Y({top:t.bottom+s.FOUR,left:Math.max(s.EIGHT,Math.min(t.left,window.innerWidth-t.width-s.EIGHT)),width:t.width})};return e(),window.addEventListener("resize",e),window.addEventListener("scroll",e,!0),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",e,!0)}},[i]),a.useEffect(()=>{if(!i)return;const e=t=>{var B,v;const o=t.target;(B=A.current)!=null&&B.contains(o)||(v=j.current)!=null&&v.contains(o)||(E(n.BOOLEAN_FALSE),w(n.EMPTY_STRING))};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[i]);const V=a.useCallback(e=>{X(t=>{const o=new Set(t);return o.has(e)?o.delete(e):o.add(e),o})},[]),W=a.useCallback(e=>{if(c){const t=new Set(u);t.has(e)?t.delete(e):t.add(e),l==null||l(Array.from(t));return}l==null||l(e),E(n.BOOLEAN_FALSE),w(n.EMPTY_STRING)},[c,u,l]),J=a.useCallback(()=>{l==null||l(c?[]:n.EMPTY_STRING)},[c,l]),k=g?h.filterNodes(d,g):d,N=h.findNodeById(d,Array.from(u)[s.ZERO]??n.EMPTY_STRING),p=u.size>s.ZERO;return r.jsxs(m.Box,{ref:A,className:T.cn("Bear-TreeSelect bear-relative bear-inline-block bear-w-full",G),"data-testid":C,...H,children:[O?r.jsx(b.Typography,{className:"Bear-TreeSelect__label bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5",children:O}):null,r.jsxs(K.Button,{ref:L,type:"button",disabled:f,onClick:()=>!f&&E(!i),className:T.cn("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",re.SIZE_CLASSES[F],f&&"bear-opacity-50 bear-cursor-not-allowed"),children:[r.jsxs(b.Typography,{className:"bear-flex-1 bear-text-left bear-truncate",children:[p&&c?r.jsx(I.Flex,{className:"bear-flex-wrap bear-gap-1",children:Array.from(u).map(e=>{const t=h.findNodeById(d,e);return t?r.jsx(b.Typography,{className:"bear-inline-flex bear-items-center bear-gap-1 bear-bg-primary-100 dark:bear-bg-primary-900/30 bear-text-primary-700 dark:bear-text-primary-300 bear-rounded bear-px-1.5 bear-py-0.5 bear-text-xs",children:t.label},e):null})}):null,p&&!c?(N==null?void 0:N.label)??R:null,p?null:r.jsx(b.Typography,{className:"bear-text-gray-400 dark:bear-text-zinc-500",children:R})]}),r.jsxs(I.Flex,{align:"center",className:"bear-gap-1",children:[z&&p?r.jsx(m.Box,{className:"bear-text-gray-400 hover:bear-text-gray-600 bear-cursor-pointer",onClick:e=>{e.stopPropagation(),J()},children:"✕"}):null,r.jsx(Q.ChevronDownIcon,{className:T.cn("bear-w-4 bear-h-4 bear-text-gray-400 bear-transition-transform",i&&"bear-rotate-180")})]})]}),i?r.jsx($.Portal,{children:r.jsxs(m.Box,{ref:j,className:"bear-fixed 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-overflow-hidden",style:{top:S.top,left:S.left,width:S.width,zIndex:s.ELEVEN_THOUSAND},children:[M?r.jsx("input",{className:"bear-w-full bear-px-3 bear-py-2 bear-text-sm bear-bg-transparent bear-border-b bear-border-gray-200 dark:bear-border-zinc-700 bear-outline-none bear-text-gray-900 dark:bear-text-white",placeholder:"Search…",value:g,onChange:e=>w(e.target.value),autoFocus:!0}):null,r.jsx(m.Box,{style:{maxHeight:Z},className:"bear-overflow-y-auto",role:"tree",children:k.length>s.ZERO?k.map(e=>r.jsx(ee.TreeNodeRow,{node:e,depth:s.ZERO,selected:u,expanded:D,multiple:c,onToggleExpand:V,onSelect:W},e.id)):r.jsx(b.Typography,{className:"bear-py-6 bear-text-center bear-text-sm bear-text-gray-400",children:"No results"})})]})}):null,y?r.jsx(b.Typography,{className:"bear-mt-1 bear-text-xs bear-text-red-500",children:y}):null,!y&&_?r.jsx(b.Typography,{className:"bear-mt-1 bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500",children:_}):null]})};exports.TreeSelect=te;

package/dist/components/TreeSelect/TreeSelect.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=280,e=20,a={sm:"bear-py-1.5 bear-px-3 bear-text-sm",md:"bear-py-2 bear-px-4 bear-text-base",lg:"bear-py-2.5 bear-px-5 bear-text-lg"},b="Bear-TreeSelect bear-relative bear-inline-block bear-w-full",t="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",S="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-overflow-hidden",E="bear-w-full bear-px-3 bear-py-2 bear-text-sm bear-bg-transparent bear-border-b bear-border-gray-200 dark:bear-border-zinc-700 bear-outline-none bear-text-gray-900 dark:bear-text-white",o="bear-flex bear-items-center bear-py-1.5 bear-px-3 bear-cursor-pointer bear-transition-colors hover:bear-bg-gray-50 dark:hover:bear-bg-zinc-700 bear-text-sm bear-text-gray-700 dark:bear-text-zinc-300",n="bear-bg-primary-50 dark:bear-bg-primary-900/20 bear-text-primary-700 dark:bear-text-primary-300",i="bear-opacity-40 bear-cursor-not-allowed",s="bear-w-4 bear-h-4 bear-mr-1 bear-text-gray-400 dark:bear-text-zinc-500 bear-transition-transform bear-cursor-pointer",c="bear-inline-flex bear-items-center bear-gap-1 bear-bg-primary-100 dark:bear-bg-primary-900/30 bear-text-primary-700 dark:bear-text-primary-300 bear-rounded bear-px-1.5 bear-py-0.5 bear-text-xs",d="Bear-TreeSelect__label bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5",x="bear-mt-1 bear-text-xs bear-text-red-500",A="bear-mt-1 bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500";exports.CHEVRON_CLASSES=s;exports.DEFAULT_MAX_HEIGHT=r;exports.DROPDOWN_CLASSES=S;exports.ERROR_CLASSES=x;exports.HELPER_CLASSES=A;exports.INDENT_PX=e;exports.LABEL_CLASSES=d;exports.NODE_CLASSES=o;exports.NODE_DISABLED_CLASSES=i;exports.NODE_SELECTED_CLASSES=n;exports.ROOT_CLASSES=b;exports.SEARCH_CLASSES=E;exports.SIZE_CLASSES=a;exports.TAG_CLASSES=c;exports.TRIGGER_CLASSES=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={sm:"bear-py-1.5 bear-px-3 bear-text-sm",md:"bear-py-2 bear-px-4 bear-text-base",lg:"bear-py-2.5 bear-px-5 bear-text-lg"};exports.SIZE_CLASSES=e;

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

@@ -1,19 +1,5 @@
-export declare const DEFAULT_MAX_HEIGHT = 280;
-export declare const INDENT_PX = 20;
 export declare const SIZE_CLASSES: {
-    readonly sm: "bear-py-1.5 bear-px-3 bear-text-sm";
-    readonly md: "bear-py-2 bear-px-4 bear-text-base";
-    readonly lg: "bear-py-2.5 bear-px-5 bear-text-lg";
+    sm: string;
+    md: string;
+    lg: string;
 };
-export declare const ROOT_CLASSES = "Bear-TreeSelect bear-relative bear-inline-block bear-w-full";
-export declare const TRIGGER_CLASSES = "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";
-export declare const DROPDOWN_CLASSES = "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-overflow-hidden";
-export declare const SEARCH_CLASSES = "bear-w-full bear-px-3 bear-py-2 bear-text-sm bear-bg-transparent bear-border-b bear-border-gray-200 dark:bear-border-zinc-700 bear-outline-none bear-text-gray-900 dark:bear-text-white";
-export declare const NODE_CLASSES = "bear-flex bear-items-center bear-py-1.5 bear-px-3 bear-cursor-pointer bear-transition-colors hover:bear-bg-gray-50 dark:hover:bear-bg-zinc-700 bear-text-sm bear-text-gray-700 dark:bear-text-zinc-300";
-export declare const NODE_SELECTED_CLASSES = "bear-bg-primary-50 dark:bear-bg-primary-900/20 bear-text-primary-700 dark:bear-text-primary-300";
-export declare const NODE_DISABLED_CLASSES = "bear-opacity-40 bear-cursor-not-allowed";
-export declare const CHEVRON_CLASSES = "bear-w-4 bear-h-4 bear-mr-1 bear-text-gray-400 dark:bear-text-zinc-500 bear-transition-transform bear-cursor-pointer";
-export declare const TAG_CLASSES = "bear-inline-flex bear-items-center bear-gap-1 bear-bg-primary-100 dark:bear-bg-primary-900/30 bear-text-primary-700 dark:bear-text-primary-300 bear-rounded bear-px-1.5 bear-py-0.5 bear-text-xs";
-export declare const LABEL_CLASSES = "Bear-TreeSelect__label bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5";
-export declare const ERROR_CLASSES = "bear-mt-1 bear-text-xs bear-text-red-500";
-export declare const HELPER_CLASSES = "bear-mt-1 bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500";

package/dist/components/TreeSelect/TreeSelect.const.js

@@ -1,22 +1,8 @@
-const r = 280, e = 20, a = {
+const e = {
   sm: "bear-py-1.5 bear-px-3 bear-text-sm",
   md: "bear-py-2 bear-px-4 bear-text-base",
   lg: "bear-py-2.5 bear-px-5 bear-text-lg"
-}, b = "Bear-TreeSelect bear-relative bear-inline-block bear-w-full", t = "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", n = "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-overflow-hidden", o = "bear-w-full bear-px-3 bear-py-2 bear-text-sm bear-bg-transparent bear-border-b bear-border-gray-200 dark:bear-border-zinc-700 bear-outline-none bear-text-gray-900 dark:bear-text-white", i = "bear-flex bear-items-center bear-py-1.5 bear-px-3 bear-cursor-pointer bear-transition-colors hover:bear-bg-gray-50 dark:hover:bear-bg-zinc-700 bear-text-sm bear-text-gray-700 dark:bear-text-zinc-300", S = "bear-bg-primary-50 dark:bear-bg-primary-900/20 bear-text-primary-700 dark:bear-text-primary-300", s = "bear-opacity-40 bear-cursor-not-allowed", x = "bear-w-4 bear-h-4 bear-mr-1 bear-text-gray-400 dark:bear-text-zinc-500 bear-transition-transform bear-cursor-pointer", c = "bear-inline-flex bear-items-center bear-gap-1 bear-bg-primary-100 dark:bear-bg-primary-900/30 bear-text-primary-700 dark:bear-text-primary-300 bear-rounded bear-px-1.5 bear-py-0.5 bear-text-xs", d = "Bear-TreeSelect__label bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5", E = "bear-mt-1 bear-text-xs bear-text-red-500", l = "bear-mt-1 bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500";
+};
 export {
-  x as CHEVRON_CLASSES,
-  r as DEFAULT_MAX_HEIGHT,
-  n as DROPDOWN_CLASSES,
-  E as ERROR_CLASSES,
-  l as HELPER_CLASSES,
-  e as INDENT_PX,
-  d as LABEL_CLASSES,
-  i as NODE_CLASSES,
-  s as NODE_DISABLED_CLASSES,
-  S as NODE_SELECTED_CLASSES,
-  b as ROOT_CLASSES,
-  o as SEARCH_CLASSES,
-  a as SIZE_CLASSES,
-  c as TAG_CLASSES,
-  t as TRIGGER_CLASSES
+  e as SIZE_CLASSES
 };

package/dist/components/TreeSelect/TreeSelect.d.ts

@@ -1,4 +1,2 @@
-import { FC } from 'react';
 import { TreeSelectProps } from './TreeSelect.types';
-export declare const TreeSelect: FC<TreeSelectProps>;
-export default TreeSelect;
+export declare const TreeSelect: (props: TreeSelectProps) => import("react/jsx-runtime").JSX.Element;