@forgedevstack/bear 1.2.9 → 1.3.1

package/dist/components/Snackbar/Snackbar.js

@@ -1,63 +1,63 @@
-import { jsxs as n, Fragment as z, jsx as r } from "react/jsx-runtime";
-import { createPortal as L } from "react-dom";
+import { jsxs as n, Fragment as w, jsx as r } from "react/jsx-runtime";
+import { createPortal as z } from "react-dom";
 import { cn as U } from "../../utils/cn.js";
 import "react";
 import { resolveBearId as X } from "../../utils/generateBearId.utils.js";
 import { useBearId as Z } from "../../utils/useBearId.js";
 import { getBearLiveRegionProps as j } from "../../utils/liveRegion.utils.js";
-import { Paper as H } from "../Paper/Paper.js";
-import { Flex as d } from "../Flex/Flex.js";
-import { Typography as A } from "../Typography/Typography.js";
-import { Progress as G } from "../Progress/Progress.js";
+import { Paper as G } from "../Paper/Paper.js";
+import { Flex as m } from "../Flex/Flex.js";
+import { Typography as g } from "../Typography/Typography.js";
+import { Progress as H } from "../Progress/Progress.js";
 import { CloseButton as M } from "../CloseButton/CloseButton.js";
-import { SNACKBAR_DEFAULT_AUTO_HIDE_MS as V, SNACKBAR_DEFAULT_OFFSET_X as Y, SNACKBAR_DEFAULT_OFFSET_Y as q, SNACKBAR_BACKDROP_Z_INDEX as J, SNACKBAR_SIZE_PADDING as Q, SNACKBAR_SURFACE_CLASSES as W, SNACKBAR_ROOT_CLASS as $, SNACKBAR_Z_INDEX as ee } from "./Snackbar.const.js";
-import { useSnackbar as re } from "./hooks/useSnackbar.js";
-const oe = (i, o, a, t) => {
-  const e = { zIndex: ee };
+import { SNACKBAR_DEFAULT_AUTO_HIDE_MS as V, SNACKBAR_DEFAULT_OFFSET_X as Y, SNACKBAR_DEFAULT_OFFSET_Y as q, SNACKBAR_BACKDROP_Z_INDEX as J, SNACKBAR_PAPER_BACKGROUND as Q, SNACKBAR_DESCRIPTION_COLOR as W, SNACKBAR_SIZE_PADDING as $, SNACKBAR_BORDER_CLASSES as ee, SNACKBAR_SURFACE_CLASSES as re, SNACKBAR_SEVERITY_MODIFIER as oe, SNACKBAR_ROOT_CLASS as ae, SNACKBAR_Z_INDEX as te } from "./Snackbar.const.js";
+import { useSnackbar as se } from "./hooks/useSnackbar.js";
+const ne = (i, o, a, t) => {
+  const e = { zIndex: te };
   return i === "top" ? e.top = t : e.bottom = t, o === "left" ? (e.left = a, e.right = "auto") : o === "right" ? (e.right = a, e.left = "auto") : (e.left = "50%", e.right = "auto", e.transform = "translateX(-50%)"), e;
-}, ge = (i) => {
+}, Ce = (i) => {
   const {
     open: o,
     message: a,
     description: t,
     severity: e = "default",
-    action: m,
-    autoHideDuration: h = V,
+    action: d,
+    autoHideDuration: B = V,
     onClose: l,
-    anchorOrigin: f = { vertical: "bottom", horizontal: "center" },
-    offsetX: B = Y,
+    anchorOrigin: _ = { vertical: "bottom", horizontal: "center" },
+    offsetX: C = Y,
     offsetY: N = q,
-    size: C = "md",
-    progress: k = null,
-    progressPosition: p = "bottom",
-    progressColor: v = "default",
-    countdownProgress: R = !1,
-    showCloseButton: O,
-    closeOnClickOutside: x,
+    size: R = "md",
+    progress: h = null,
+    progressPosition: S = "bottom",
+    progressColor: O = "default",
+    countdownProgress: k = !1,
+    showCloseButton: E,
+    closeOnClickOutside: I,
     container: D,
-    id: I,
-    testId: y,
-    className: E
-  } = i, F = Z("Snackbar"), P = X(I, F), u = D ?? (typeof document < "u" ? document.body : null), s = !!l, K = O ?? s, b = x ?? s, { surfaceRef: T, progressValue: _ } = re({
+    id: v,
+    testId: K,
+    className: P
+  } = i, x = Z("Snackbar"), y = X(v, x), f = D ?? (typeof document < "u" ? document.body : null), s = !!l, F = E ?? s, p = I ?? s, { surfaceRef: T, progressValue: u } = se({
     open: o,
-    autoHideDuration: h,
+    autoHideDuration: B,
     onClose: l,
-    countdownProgress: R,
-    staticProgress: k,
-    closeOnClickOutside: b
+    countdownProgress: k,
+    staticProgress: h,
+    closeOnClickOutside: p
   });
-  if (!o || !u)
+  if (!o || !f)
     return null;
-  const g = j(e), c = typeof _ == "number", S = c ? /* @__PURE__ */ r(
-    G,
+  const A = j(e), c = typeof u == "number", b = c ? /* @__PURE__ */ r(
+    H,
     {
-      value: _,
+      value: u,
       size: "sm",
-      color: v,
+      color: O,
       className: "Bear-Snackbar__progress"
     }
-  ) : null, w = /* @__PURE__ */ n(z, { children: [
-    b && s && /* @__PURE__ */ r(
+  ) : null, L = /* @__PURE__ */ n(w, { children: [
+    p && s && /* @__PURE__ */ r(
       "div",
       {
         className: "Bear-Snackbar__backdrop bear-fixed bear-inset-0",
@@ -66,35 +66,36 @@ const oe = (i, o, a, t) => {
       }
     ),
     /* @__PURE__ */ n(
-      H,
+      G,
       {
         ref: T,
-        id: P,
-        "data-testid": y,
-        role: g.role,
-        "aria-live": g["aria-live"],
+        id: y,
+        "data-testid": K,
+        role: A.role,
+        "aria-live": A["aria-live"],
         elevation: 4,
         rounded: "lg",
         padding: "none",
-        background: "transparent",
+        background: Q,
         className: U(
-          $,
-          W,
+          ae,
+          oe[e],
+          re,
+          ee,
           "bear-fixed bear-flex bear-flex-col bear-overflow-hidden",
-          "bear-border bear-border-[var(--bear-border-default)]",
-          Q[C],
-          E
+          $[R],
+          P
         ),
-        style: oe(f.vertical, f.horizontal, B, N),
+        style: ne(_.vertical, _.horizontal, C, N),
         children: [
-          c && p === "top" && S,
-          /* @__PURE__ */ n(d, { className: "Bear-Snackbar__content bear-w-full", align: "center", gap: 3, children: [
-            /* @__PURE__ */ n(d, { direction: "column", className: "Bear-Snackbar__text bear-flex-1 bear-min-w-0", gap: 1, children: [
-              a && /* @__PURE__ */ r(A, { variant: "body2", className: "Bear-Snackbar__message", children: a }),
-              t && /* @__PURE__ */ r(A, { variant: "caption", color: "muted", className: "Bear-Snackbar__description", children: t })
+          c && S === "top" && b,
+          /* @__PURE__ */ n(m, { className: "Bear-Snackbar__content bear-w-full", align: "center", gap: 3, children: [
+            /* @__PURE__ */ n(m, { direction: "column", className: "Bear-Snackbar__text bear-flex-1 bear-min-w-0", gap: 1, children: [
+              a && /* @__PURE__ */ r(g, { variant: "body2", className: "Bear-Snackbar__message", children: a }),
+              t && /* @__PURE__ */ r(g, { variant: "caption", color: W, className: "Bear-Snackbar__description", children: t })
             ] }),
-            m && /* @__PURE__ */ r(d, { className: "Bear-Snackbar__action bear-shrink-0", align: "center", children: m }),
-            K && s && /* @__PURE__ */ r(
+            d && /* @__PURE__ */ r(m, { className: "Bear-Snackbar__action bear-shrink-0", align: "center", children: d }),
+            F && s && /* @__PURE__ */ r(
               M,
               {
                 size: "sm",
@@ -104,13 +105,13 @@ const oe = (i, o, a, t) => {
               }
             )
           ] }),
-          c && p === "bottom" && S
+          c && S === "bottom" && b
         ]
       }
     )
   ] });
-  return L(w, u);
+  return z(L, f);
 };
 export {
-  ge as Snackbar
+  Ce as Snackbar
 };

package/dist/components/TimePicker/TimePicker.cjs

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

package/dist/components/TimePicker/TimePicker.constants.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=12,r=24,a=60,E=768,_="12h",I="24h",b="auto",t="dial",T="columns",C=80,S=100,R=[12,1,2,3,4,5,6,7,8,9,10,11],o={selectTime:"SELECT TIME",hour:"Hour",minute:"Minute",period:"Period",cancel:"CANCEL",ok:"OK"},n={sm:"bear-py-1.5 bear-px-3 bear-text-sm",md:"bear-py-2 bear-px-4",lg:"bear-py-2.5 bear-px-5 bear-text-lg"},P={default:"bear-bg-white dark:bear-bg-zinc-800 bear-border-gray-300 dark:bear-border-zinc-600",filled:"bear-bg-gray-100 dark:bear-bg-zinc-700 bear-border-transparent",outline:"bear-bg-transparent bear-border-gray-400 dark:bear-border-zinc-500"},i="Bear-TimePicker bear-relative",c="Bear-TimePicker__label bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5",A="Bear-TimePicker__trigger bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors",s="Bear-TimePicker__dropdown bear-absolute bear-z-[9999] bear-mt-1 bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3 bear-w-64",O="Bear-TimePicker__column-header bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500 bear-mb-1 bear-text-center",M="Bear-TimePicker__column bear-h-32 bear-overflow-y-auto bear-space-y-1",L="Bear-TimePicker__option bear-w-full bear-py-1 bear-rounded bear-text-sm bear-transition-colors",K="bear-bg-primary-500 bear-text-white",d="bear-text-gray-700 dark:bear-text-zinc-300 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700",l="Bear-TimePicker__footer bear-flex bear-gap-2 bear-pt-2 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700",N="Bear-TimePicker__clear bear-flex-1 bear-py-1.5 bear-text-sm bear-text-gray-500 dark:bear-text-zinc-400 hover:bear-text-gray-700 dark:hover:bear-text-white bear-rounded bear-border bear-border-gray-300 dark:bear-border-zinc-600",m="Bear-TimePicker__confirm bear-flex-1 bear-py-1.5 bear-text-sm bear-bg-primary-500 bear-text-white bear-rounded hover:bear-bg-primary-600",x="Bear-TimePicker__error bear-mt-1 bear-text-xs bear-text-red-500",g="Bear-TimePicker__helper bear-mt-1 bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500";exports.CLOCK_CENTER=S;exports.CLOCK_HOURS_12=R;exports.CLOCK_RADIUS=C;exports.TIMEPICKER_BUTTON_CLASSES=A;exports.TIMEPICKER_CLEAR_BUTTON_CLASSES=N;exports.TIMEPICKER_COLUMN_CLASSES=M;exports.TIMEPICKER_COLUMN_HEADER_CLASSES=O;exports.TIMEPICKER_CONFIRM_BUTTON_CLASSES=m;exports.TIMEPICKER_DEFAULT_BREAKPOINT=E;exports.TIMEPICKER_DEFAULT_TRANSLATIONS=o;exports.TIMEPICKER_DROPDOWN_CLASSES=s;exports.TIMEPICKER_ERROR_CLASSES=x;exports.TIMEPICKER_FOOTER_CLASSES=l;exports.TIMEPICKER_FORMAT_12H=_;exports.TIMEPICKER_FORMAT_24H=I;exports.TIMEPICKER_HELPER_CLASSES=g;exports.TIMEPICKER_HOURS_12H=e;exports.TIMEPICKER_HOURS_24H=r;exports.TIMEPICKER_LABEL_CLASSES=c;exports.TIMEPICKER_MINUTES_DIVISOR=a;exports.TIMEPICKER_OPTION_ACTIVE_CLASSES=K;exports.TIMEPICKER_OPTION_CLASSES=L;exports.TIMEPICKER_OPTION_INACTIVE_CLASSES=d;exports.TIMEPICKER_ROOT_CLASSES=i;exports.TIMEPICKER_VARIANT_AUTO=b;exports.TIMEPICKER_VARIANT_COLUMNS=T;exports.TIMEPICKER_VARIANT_DIAL=t;exports.sizeClasses=n;exports.variantClasses=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=12,r=24,E=60,a=768,_="12h",I="24h",t="auto",b="dial",T="columns",C=80,R=100,S=[12,1,2,3,4,5,6,7,8,9,10,11],o={selectTime:"SELECT TIME",hour:"Hour",minute:"Minute",period:"Period",cancel:"CANCEL",ok:"OK"},P={sm:"bear-py-1.5 bear-px-3 bear-text-sm",md:"bear-py-2 bear-px-4",lg:"bear-py-2.5 bear-px-5 bear-text-lg"},O={default:"bear-bg-white dark:bear-bg-zinc-800 bear-border-gray-300 dark:bear-border-zinc-600",filled:"bear-bg-gray-100 dark:bear-bg-zinc-700 bear-border-transparent",outline:"bear-bg-transparent bear-border-gray-400 dark:bear-border-zinc-500"},n="Bear-TimePicker bear-relative",c="Bear-TimePicker__label bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5",i="Bear-TimePicker__trigger bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors",A=360,M=11e3,s="data-bear-timepicker-dropdown",K="Bear-TimePicker__dropdown bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3 bear-w-64",L="Bear-TimePicker__column-header bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500 bear-mb-1 bear-text-center",d="Bear-TimePicker__column bear-h-32 bear-overflow-y-auto bear-space-y-1",N="Bear-TimePicker__option bear-w-full bear-py-1 bear-rounded bear-text-sm bear-transition-colors",l="bear-bg-primary-500 bear-text-white",x="bear-text-gray-700 dark:bear-text-zinc-300 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700",m="Bear-TimePicker__footer bear-flex bear-gap-2 bear-pt-2 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700",g="Bear-TimePicker__clear bear-flex-1 bear-py-1.5 bear-text-sm bear-text-gray-500 dark:bear-text-zinc-400 hover:bear-text-gray-700 dark:hover:bear-text-white bear-rounded bear-border bear-border-gray-300 dark:bear-border-zinc-600",k="Bear-TimePicker__confirm bear-flex-1 bear-py-1.5 bear-text-sm bear-bg-primary-500 bear-text-white bear-rounded hover:bear-bg-primary-600",D="Bear-TimePicker__error bear-mt-1 bear-text-xs bear-text-red-500",y="Bear-TimePicker__helper bear-mt-1 bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500",U="bear-w-5 bear-h-5 bear-text-gray-400 dark:bear-text-zinc-400";exports.CLOCK_CENTER=R;exports.CLOCK_HOURS_12=S;exports.CLOCK_RADIUS=C;exports.TIMEPICKER_BUTTON_CLASSES=i;exports.TIMEPICKER_CLEAR_BUTTON_CLASSES=g;exports.TIMEPICKER_CLOCK_ICON_CLASS=U;exports.TIMEPICKER_COLUMN_CLASSES=d;exports.TIMEPICKER_COLUMN_HEADER_CLASSES=L;exports.TIMEPICKER_CONFIRM_BUTTON_CLASSES=k;exports.TIMEPICKER_DEFAULT_BREAKPOINT=a;exports.TIMEPICKER_DEFAULT_TRANSLATIONS=o;exports.TIMEPICKER_DROPDOWN_ATTR=s;exports.TIMEPICKER_DROPDOWN_CLASSES=K;exports.TIMEPICKER_DROPDOWN_HEIGHT_PX=A;exports.TIMEPICKER_DROPDOWN_Z_INDEX=M;exports.TIMEPICKER_ERROR_CLASSES=D;exports.TIMEPICKER_FOOTER_CLASSES=m;exports.TIMEPICKER_FORMAT_12H=_;exports.TIMEPICKER_FORMAT_24H=I;exports.TIMEPICKER_HELPER_CLASSES=y;exports.TIMEPICKER_HOURS_12H=e;exports.TIMEPICKER_HOURS_24H=r;exports.TIMEPICKER_LABEL_CLASSES=c;exports.TIMEPICKER_MINUTES_DIVISOR=E;exports.TIMEPICKER_OPTION_ACTIVE_CLASSES=l;exports.TIMEPICKER_OPTION_CLASSES=N;exports.TIMEPICKER_OPTION_INACTIVE_CLASSES=x;exports.TIMEPICKER_ROOT_CLASSES=n;exports.TIMEPICKER_VARIANT_AUTO=t;exports.TIMEPICKER_VARIANT_COLUMNS=T;exports.TIMEPICKER_VARIANT_DIAL=b;exports.sizeClasses=P;exports.variantClasses=O;

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

@@ -27,7 +27,10 @@ export declare const variantClasses: Record<'default' | 'filled' | 'outline', st
 export declare const TIMEPICKER_ROOT_CLASSES = "Bear-TimePicker bear-relative";
 export declare const TIMEPICKER_LABEL_CLASSES = "Bear-TimePicker__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 TIMEPICKER_BUTTON_CLASSES = "Bear-TimePicker__trigger bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors";
-export declare const TIMEPICKER_DROPDOWN_CLASSES = "Bear-TimePicker__dropdown bear-absolute bear-z-[9999] bear-mt-1 bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3 bear-w-64";
+export declare const TIMEPICKER_DROPDOWN_HEIGHT_PX = 360;
+export declare const TIMEPICKER_DROPDOWN_Z_INDEX = 11000;
+export declare const TIMEPICKER_DROPDOWN_ATTR = "data-bear-timepicker-dropdown";
+export declare const TIMEPICKER_DROPDOWN_CLASSES = "Bear-TimePicker__dropdown bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3 bear-w-64";
 export declare const TIMEPICKER_COLUMN_HEADER_CLASSES = "Bear-TimePicker__column-header bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500 bear-mb-1 bear-text-center";
 export declare const TIMEPICKER_COLUMN_CLASSES = "Bear-TimePicker__column bear-h-32 bear-overflow-y-auto bear-space-y-1";
 export declare const TIMEPICKER_OPTION_CLASSES = "Bear-TimePicker__option bear-w-full bear-py-1 bear-rounded bear-text-sm bear-transition-colors";
@@ -38,3 +41,4 @@ export declare const TIMEPICKER_CLEAR_BUTTON_CLASSES = "Bear-TimePicker__clear b
 export declare const TIMEPICKER_CONFIRM_BUTTON_CLASSES = "Bear-TimePicker__confirm bear-flex-1 bear-py-1.5 bear-text-sm bear-bg-primary-500 bear-text-white bear-rounded hover:bear-bg-primary-600";
 export declare const TIMEPICKER_ERROR_CLASSES = "Bear-TimePicker__error bear-mt-1 bear-text-xs bear-text-red-500";
 export declare const TIMEPICKER_HELPER_CLASSES = "Bear-TimePicker__helper bear-mt-1 bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500";
+export declare const TIMEPICKER_CLOCK_ICON_CLASS = "bear-w-5 bear-h-5 bear-text-gray-400 dark:bear-text-zinc-400";

package/dist/components/TimePicker/TimePicker.constants.js

@@ -1,47 +1,51 @@
-const e = 12, r = 24, a = 60, b = 768, t = "12h", o = "24h", E = "auto", _ = "dial", n = "columns", c = 80, i = 100, I = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], T = {
+const e = 12, r = 24, a = 60, b = 768, t = "12h", E = "24h", o = "auto", _ = "dial", n = "columns", I = 80, c = 100, T = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], i = {
   selectTime: "SELECT TIME",
   hour: "Hour",
   minute: "Minute",
   period: "Period",
   cancel: "CANCEL",
   ok: "OK"
-}, s = {
+}, C = {
   sm: "bear-py-1.5 bear-px-3 bear-text-sm",
   md: "bear-py-2 bear-px-4",
   lg: "bear-py-2.5 bear-px-5 bear-text-lg"
-}, C = {
+}, s = {
   default: "bear-bg-white dark:bear-bg-zinc-800 bear-border-gray-300 dark:bear-border-zinc-600",
   filled: "bear-bg-gray-100 dark:bear-bg-zinc-700 bear-border-transparent",
   outline: "bear-bg-transparent bear-border-gray-400 dark:bear-border-zinc-500"
-}, d = "Bear-TimePicker bear-relative", S = "Bear-TimePicker__label bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5", R = "Bear-TimePicker__trigger bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors", P = "Bear-TimePicker__dropdown bear-absolute bear-z-[9999] bear-mt-1 bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3 bear-w-64", x = "Bear-TimePicker__column-header bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500 bear-mb-1 bear-text-center", l = "Bear-TimePicker__column bear-h-32 bear-overflow-y-auto bear-space-y-1", m = "Bear-TimePicker__option bear-w-full bear-py-1 bear-rounded bear-text-sm bear-transition-colors", A = "bear-bg-primary-500 bear-text-white", M = "bear-text-gray-700 dark:bear-text-zinc-300 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700", O = "Bear-TimePicker__footer bear-flex bear-gap-2 bear-pt-2 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700", g = "Bear-TimePicker__clear bear-flex-1 bear-py-1.5 bear-text-sm bear-text-gray-500 dark:bear-text-zinc-400 hover:bear-text-gray-700 dark:hover:bear-text-white bear-rounded bear-border bear-border-gray-300 dark:bear-border-zinc-600", L = "Bear-TimePicker__confirm bear-flex-1 bear-py-1.5 bear-text-sm bear-bg-primary-500 bear-text-white bear-rounded hover:bear-bg-primary-600", k = "Bear-TimePicker__error bear-mt-1 bear-text-xs bear-text-red-500", K = "Bear-TimePicker__helper bear-mt-1 bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500";
+}, d = "Bear-TimePicker bear-relative", R = "Bear-TimePicker__label bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5", S = "Bear-TimePicker__trigger bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors", P = 360, O = 11e3, x = "data-bear-timepicker-dropdown", A = "Bear-TimePicker__dropdown bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3 bear-w-64", M = "Bear-TimePicker__column-header bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500 bear-mb-1 bear-text-center", m = "Bear-TimePicker__column bear-h-32 bear-overflow-y-auto bear-space-y-1", l = "Bear-TimePicker__option bear-w-full bear-py-1 bear-rounded bear-text-sm bear-transition-colors", K = "bear-bg-primary-500 bear-text-white", g = "bear-text-gray-700 dark:bear-text-zinc-300 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700", L = "Bear-TimePicker__footer bear-flex bear-gap-2 bear-pt-2 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700", k = "Bear-TimePicker__clear bear-flex-1 bear-py-1.5 bear-text-sm bear-text-gray-500 dark:bear-text-zinc-400 hover:bear-text-gray-700 dark:hover:bear-text-white bear-rounded bear-border bear-border-gray-300 dark:bear-border-zinc-600", y = "Bear-TimePicker__confirm bear-flex-1 bear-py-1.5 bear-text-sm bear-bg-primary-500 bear-text-white bear-rounded hover:bear-bg-primary-600", N = "Bear-TimePicker__error bear-mt-1 bear-text-xs bear-text-red-500", p = "Bear-TimePicker__helper bear-mt-1 bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500", u = "bear-w-5 bear-h-5 bear-text-gray-400 dark:bear-text-zinc-400";
 export {
-  i as CLOCK_CENTER,
-  I as CLOCK_HOURS_12,
-  c as CLOCK_RADIUS,
-  R as TIMEPICKER_BUTTON_CLASSES,
-  g as TIMEPICKER_CLEAR_BUTTON_CLASSES,
-  l as TIMEPICKER_COLUMN_CLASSES,
-  x as TIMEPICKER_COLUMN_HEADER_CLASSES,
-  L as TIMEPICKER_CONFIRM_BUTTON_CLASSES,
+  c as CLOCK_CENTER,
+  T as CLOCK_HOURS_12,
+  I as CLOCK_RADIUS,
+  S as TIMEPICKER_BUTTON_CLASSES,
+  k as TIMEPICKER_CLEAR_BUTTON_CLASSES,
+  u as TIMEPICKER_CLOCK_ICON_CLASS,
+  m as TIMEPICKER_COLUMN_CLASSES,
+  M as TIMEPICKER_COLUMN_HEADER_CLASSES,
+  y as TIMEPICKER_CONFIRM_BUTTON_CLASSES,
   b as TIMEPICKER_DEFAULT_BREAKPOINT,
-  T as TIMEPICKER_DEFAULT_TRANSLATIONS,
-  P as TIMEPICKER_DROPDOWN_CLASSES,
-  k as TIMEPICKER_ERROR_CLASSES,
-  O as TIMEPICKER_FOOTER_CLASSES,
+  i as TIMEPICKER_DEFAULT_TRANSLATIONS,
+  x as TIMEPICKER_DROPDOWN_ATTR,
+  A as TIMEPICKER_DROPDOWN_CLASSES,
+  P as TIMEPICKER_DROPDOWN_HEIGHT_PX,
+  O as TIMEPICKER_DROPDOWN_Z_INDEX,
+  N as TIMEPICKER_ERROR_CLASSES,
+  L as TIMEPICKER_FOOTER_CLASSES,
   t as TIMEPICKER_FORMAT_12H,
-  o as TIMEPICKER_FORMAT_24H,
-  K as TIMEPICKER_HELPER_CLASSES,
+  E as TIMEPICKER_FORMAT_24H,
+  p as TIMEPICKER_HELPER_CLASSES,
   e as TIMEPICKER_HOURS_12H,
   r as TIMEPICKER_HOURS_24H,
-  S as TIMEPICKER_LABEL_CLASSES,
+  R as TIMEPICKER_LABEL_CLASSES,
   a as TIMEPICKER_MINUTES_DIVISOR,
-  A as TIMEPICKER_OPTION_ACTIVE_CLASSES,
-  m as TIMEPICKER_OPTION_CLASSES,
-  M as TIMEPICKER_OPTION_INACTIVE_CLASSES,
+  K as TIMEPICKER_OPTION_ACTIVE_CLASSES,
+  l as TIMEPICKER_OPTION_CLASSES,
+  g as TIMEPICKER_OPTION_INACTIVE_CLASSES,
   d as TIMEPICKER_ROOT_CLASSES,
-  E as TIMEPICKER_VARIANT_AUTO,
+  o as TIMEPICKER_VARIANT_AUTO,
   n as TIMEPICKER_VARIANT_COLUMNS,
   _ as TIMEPICKER_VARIANT_DIAL,
-  s as sizeClasses,
-  C as variantClasses
+  C as sizeClasses,
+  s as variantClasses
 };

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/Toast/Toast.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),T=require("./Toast.const.cjs"),S=require("../../utils/cn.cjs"),O=require("../../utils/generateBearId.utils.cjs"),P=require("../../utils/liveRegion.utils.cjs"),N={success:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("path",{d:"M22 11.08V12a10 10 0 1 1-5.93-9.14"}),e.jsx("polyline",{points:"22 4 12 14.01 9 11.01"})]}),info:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("circle",{cx:"12",cy:"12",r:"10"}),e.jsx("line",{x1:"12",y1:"16",x2:"12",y2:"12"}),e.jsx("line",{x1:"12",y1:"8",x2:"12.01",y2:"8"})]}),warning:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("path",{d:"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"}),e.jsx("line",{x1:"12",y1:"9",x2:"12",y2:"13"}),e.jsx("line",{x1:"12",y1:"17",x2:"12.01",y2:"17"})]}),error:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("circle",{cx:"12",cy:"12",r:"10"}),e.jsx("line",{x1:"15",y1:"9",x2:"9",y2:"15"}),e.jsx("line",{x1:"9",y1:"9",x2:"15",y2:"15"})]})},A=()=>e.jsxs("svg",{width:16,height:16,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),B={success:"bear-bg-green-500 bear-text-white",info:"bear-bg-blue-500 bear-text-white",warning:"bear-bg-amber-500 bear-text-white",error:"bear-bg-red-500 bear-text-white"},L={"top-left":"bear-top-4 bear-left-4","top-center":"bear-top-4 bear-left-1/2 bear-transform bear--translate-x-1/2","top-right":"bear-top-4 bear-right-4","bottom-left":"bear-bottom-4 bear-left-4","bottom-center":"bear-bottom-4 bear-left-1/2 bear-transform bear--translate-x-1/2","bottom-right":"bear-bottom-4 bear-right-4"},_=t.createContext(null),M=()=>{const l=t.useContext(_);if(!l)throw new Error("useToast must be used within a ToastProvider");return l},q=({id:l,testId:x,message:d,title:b,severity:n="info",duration:o=5e3,closable:a=!0,icon:i,action:f,onClose:c,onRemove:h,className:v,autoScroll:m=!1,pauseOnHover:g=!1})=>{const[j,r]=t.useState(!1),[s,u]=t.useState(!1),w=t.useRef(null),y=t.useRef(o),p=t.useRef(0);t.useEffect(()=>{m&&w.current&&w.current.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})},[m]),t.useEffect(()=>{if(o<=0||s)return;p.current=Date.now();const E=setTimeout(()=>{r(!0),setTimeout(()=>{h(),c==null||c()},T.TOAST_EXIT_MS)},y.current);return()=>{clearTimeout(E),y.current=Math.max(0,y.current-(Date.now()-p.current))}},[o,s,h,c]);const I=()=>{r(!0),setTimeout(()=>{h(),c==null||c()},T.TOAST_EXIT_MS)},k=()=>i===!1?null:i||N[n],R=P.getBearLiveRegionProps(n);return e.jsxs("div",{ref:w,id:l,"data-testid":x,...R,"aria-atomic":"true",onMouseEnter:g?()=>u(!0):void 0,onMouseLeave:g?()=>u(!1):void 0,className:S.cn(T.T_O_A_S_T_ROOT_CLASS,"bear-flex bear-items-start bear-gap-3 bear-p-4 bear-rounded-lg bear-shadow-lg bear-min-w-[300px] bear-max-w-[400px]","bear-transition-all bear-duration-200",j?"bear-opacity-0 bear-translate-x-2":"bear-opacity-100 bear-translate-x-0",B[n],v),children:[k()&&e.jsx("span",{className:"bear-flex-shrink-0 bear-mt-0.5",children:k()}),e.jsxs("div",{className:"bear-flex-1 bear-min-w-0",children:[b&&e.jsx("div",{className:"bear-font-semibold bear-mb-0.5",children:b}),e.jsx("div",{className:"bear-text-sm bear-opacity-90",children:d})]}),f&&e.jsx("div",{className:"bear-flex-shrink-0",children:f}),a&&e.jsx("button",{type:"button",onClick:I,className:"bear-flex-shrink-0 bear-p-1 bear-rounded hover:bear-bg-white/20 bear-transition-colors bear-bg-transparent bear-border-none bear-cursor-pointer","aria-label":"Close",children:e.jsx(A,{})})]})},C=({position:l="top-right",maxToasts:x=5,className:d})=>{const b=t.useContext(_);if(!b)return null;const{_toasts:n,_removeToast:o}=b,a=n.slice(0,x);return e.jsx("div",{className:S.cn(`${T.T_O_A_S_T_ROOT_CLASS}__container`,"bear-fixed bear-z-[11000] bear-flex bear-flex-col bear-gap-2",L[l],d),"aria-relevant":"additions",children:a.map(i=>e.jsx(q,{...i,onRemove:()=>o(i.id)},i.id))})},W=({children:l,position:x="top-right",maxToasts:d})=>{const[b,n]=t.useState([]),o=t.useCallback(r=>{n(s=>s.filter(u=>u.id!==r))},[]),a=t.useCallback(r=>{const s=r.id||O.generateBearId("Toast");return n(u=>[...u,{...r,id:s}]),s},[]),i=t.useCallback(r=>a(r),[a]),f=t.useCallback((r,s)=>a({message:r,severity:"success",...s}),[a]),c=t.useCallback((r,s)=>a({message:r,severity:"info",...s}),[a]),h=t.useCallback((r,s)=>a({message:r,severity:"warning",...s}),[a]),v=t.useCallback((r,s)=>a({message:r,severity:"error",...s}),[a]),m=t.useCallback(r=>o(r),[o]),g=t.useCallback(()=>n([]),[]),j={toast:i,success:f,info:c,warning:h,error:v,dismiss:m,dismissAll:g,_toasts:b,_removeToast:o};return e.jsxs(_.Provider,{value:j,children:[l,e.jsx(C,{position:x,maxToasts:d})]})};exports.ToastContainer=C;exports.ToastProvider=W;exports.useToast=M;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),x=require("./Toast.const.cjs"),I=require("../../utils/cn.cjs"),R=require("../../utils/generateBearId.utils.cjs"),A=require("../../utils/liveRegion.utils.cjs"),P={success:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("path",{d:"M22 11.08V12a10 10 0 1 1-5.93-9.14"}),e.jsx("polyline",{points:"22 4 12 14.01 9 11.01"})]}),info:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("circle",{cx:"12",cy:"12",r:"10"}),e.jsx("line",{x1:"12",y1:"16",x2:"12",y2:"12"}),e.jsx("line",{x1:"12",y1:"8",x2:"12.01",y2:"8"})]}),warning:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("path",{d:"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"}),e.jsx("line",{x1:"12",y1:"9",x2:"12",y2:"13"}),e.jsx("line",{x1:"12",y1:"17",x2:"12.01",y2:"17"})]}),error:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("circle",{cx:"12",cy:"12",r:"10"}),e.jsx("line",{x1:"15",y1:"9",x2:"9",y2:"15"}),e.jsx("line",{x1:"9",y1:"9",x2:"15",y2:"15"})]})},L=()=>e.jsxs("svg",{width:16,height:16,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),M=x.TOAST_SEVERITY_MODIFIER,N=x.TOAST_POSITION_CLASSES,y=s.createContext(null),B=()=>{const l=s.useContext(y);if(!l)throw new Error("useToast must be used within a ToastProvider");return l},q=({id:l,testId:b,message:h,title:u,severity:a="info",duration:i=5e3,closable:n=!0,icon:o,action:f,onClose:c,onRemove:T,className:j,autoScroll:v=!1,pauseOnHover:_=!1})=>{const[m,t]=s.useState(!1),[r,d]=s.useState(!1),S=s.useRef(null),g=s.useRef(i),k=s.useRef(0);s.useEffect(()=>{v&&S.current&&S.current.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})},[v]),s.useEffect(()=>{if(i<=0||r)return;k.current=Date.now();const O=setTimeout(()=>{t(!0),setTimeout(()=>{T(),c==null||c()},x.TOAST_EXIT_MS)},g.current);return()=>{clearTimeout(O),g.current=Math.max(0,g.current-(Date.now()-k.current))}},[i,r,T,c]);const E=()=>{t(!0),setTimeout(()=>{T(),c==null||c()},x.TOAST_EXIT_MS)},w=()=>o===!1?null:o||P[a],p=A.getBearLiveRegionProps(a);return e.jsxs("div",{ref:S,id:l,"data-testid":b,...p,"aria-atomic":"true",onMouseEnter:_?()=>d(!0):void 0,onMouseLeave:_?()=>d(!1):void 0,className:I.cn(x.T_O_A_S_T_ROOT_CLASS,x.TOAST_ITEM_CLASSES,m?"bear-opacity-0 bear-translate-x-2":"bear-opacity-100 bear-translate-x-0",M[a],j),children:[w()&&e.jsx("span",{className:"bear-flex-shrink-0 bear-mt-0.5",children:w()}),e.jsxs("div",{className:"bear-flex-1 bear-min-w-0",children:[u&&e.jsx("div",{className:"bear-font-semibold bear-mb-0.5",children:u}),e.jsx("div",{className:"bear-text-sm bear-opacity-90",children:h})]}),f&&e.jsx("div",{className:"bear-flex-shrink-0",children:f}),n&&e.jsx("button",{type:"button",onClick:E,className:"bear-flex-shrink-0 bear-p-1 bear-rounded hover:bear-bg-black/10 dark:hover:bear-bg-white/20 bear-transition-colors bear-bg-transparent bear-border-none bear-cursor-pointer","aria-label":"Close",children:e.jsx(L,{})})]})},C=({position:l="top-right",maxToasts:b=5,className:h})=>{const u=s.useContext(y);if(!u)return null;const{_toasts:a,_removeToast:i}=u,n=a.slice(0,b);return e.jsx("div",{className:I.cn(`${x.T_O_A_S_T_ROOT_CLASS}__container`,"bear-fixed bear-z-[11000] bear-flex bear-flex-col bear-gap-2",N[l],h),"aria-relevant":"additions",children:n.map(o=>e.jsx(q,{...o,onRemove:()=>i(o.id)},o.id))})},V=({children:l,position:b="top-right",maxToasts:h})=>{const[u,a]=s.useState([]),i=s.useCallback(t=>{a(r=>r.filter(d=>d.id!==t))},[]),n=s.useCallback(t=>{const r=t.id||R.generateBearId("Toast");return a(d=>[...d,{...t,id:r}]),r},[]),o=s.useCallback(t=>n(t),[n]),f=s.useCallback((t,r)=>n({message:t,severity:"success",...r}),[n]),c=s.useCallback((t,r)=>n({message:t,severity:"info",...r}),[n]),T=s.useCallback((t,r)=>n({message:t,severity:"warning",...r}),[n]),j=s.useCallback((t,r)=>n({message:t,severity:"error",...r}),[n]),v=s.useCallback(t=>i(t),[i]),_=s.useCallback(()=>a([]),[]),m={toast:o,success:f,info:c,warning:T,error:j,dismiss:v,dismissAll:_,_toasts:u,_removeToast:i};return e.jsxs(y.Provider,{value:m,children:[l,e.jsx(C,{position:b,maxToasts:h})]})};exports.ToastContainer=C;exports.ToastProvider=V;exports.useToast=B;