@forgedevstack/bear 1.3.0 → 1.3.2

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 "@forgedevstack/bear-icons";
+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/TimelineChart/TimelineChart.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),b=require("react"),C=require("../../utils/cn.cjs"),f=require("../Typography/Typography.cjs"),a=require("./TimelineChart.const.cjs"),L=({items:n,min:d,max:h,barHeight:m=a.DEFAULT_BAR_HEIGHT,barGap:y=a.DEFAULT_BAR_GAP,showAxis:T=!0,axisTicks:s=a.DEFAULT_AXIS_TICKS,formatTick:_,onItemClick:l,testId:g,className:p,...v})=>{const{min:u,max:B,ticks:j}=b.useMemo(()=>{let e=d??1/0,t=h??-1/0;for(const i of n)i.start<e&&(e=i.start),i.end>t&&(t=i.end);isFinite(e)||(e=0),isFinite(t)||(t=100);const c=(t-e)/(s-1),o=Array.from({length:s},(i,A)=>e+c*A);return{min:e,max:t,ticks:o}},[n,d,h,s]),x=B-u||1;return r.jsxs("div",{className:C.cn("Bear-TimelineChart w-full",p),"data-testid":g,...v,children:[r.jsxs("div",{className:"Bear-TimelineChart__header flex",children:[r.jsx("div",{style:{width:a.LABEL_WIDTH},className:"flex-shrink-0"}),T&&r.jsx("div",{className:"Bear-TimelineChart__axis flex-1 flex justify-between mb-2",children:j.map((e,t)=>r.jsx(f.Typography,{variant:"caption",className:"Bear-TimelineChart__tick text-gray-400 dark:text-gray-500 text-[10px]",children:_?_(e):Math.round(e)},t))})]}),n.map((e,t)=>{const c=(e.start-u)/x*100,o=(e.end-e.start)/x*100,i=e.color??a.DEFAULT_COLORS[t%a.DEFAULT_COLORS.length];return r.jsxs("div",{className:"Bear-TimelineChart__row flex items-center",style:{height:m,marginBottom:y},children:[r.jsx("div",{style:{width:a.LABEL_WIDTH},className:"Bear-TimelineChart__label flex-shrink-0 pr-3 overflow-hidden",children:r.jsx(f.Typography,{variant:"caption",className:"truncate text-gray-700 dark:text-gray-300",children:e.label})}),r.jsx("div",{className:"Bear-TimelineChart__track flex-1 relative h-full bg-gray-100 dark:bg-zinc-800 rounded",children:r.jsx("div",{className:"Bear-TimelineChart__bar absolute top-0 h-full rounded cursor-pointer transition-opacity hover:opacity-80",style:{left:`${c}%`,width:`${o}%`,backgroundColor:i,minWidth:a.MIN_BAR_WIDTH},title:e.tooltip??`${e.label}: ${e.start} - ${e.end}`,onClick:()=>l==null?void 0:l(e,t)})})]},t)})]})};exports.TimelineChart=L;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),b=require("react"),j=require("../../utils/cn.cjs"),y=require("../Typography/Typography.cjs"),r=require("./TimelineChart.const.cjs"),R=({items:l,min:d,max:h,barHeight:x=r.DEFAULT_BAR_HEIGHT,barGap:f=r.DEFAULT_BAR_GAP,showAxis:p=!0,axisTicks:o=r.DEFAULT_AXIS_TICKS,formatTick:_,onItemClick:n,variant:g=r.TIMELINE_VARIANT_BARS,testId:A,className:N,...m})=>{const{min:u,max:v,ticks:B}=b.useMemo(()=>{let e=d??1/0,t=h??-1/0;for(const i of l)i.start<e&&(e=i.start),i.end>t&&(t=i.end);isFinite(e)||(e=0),isFinite(t)||(t=100);const s=(t-e)/(o-1),c=Array.from({length:o},(i,E)=>e+s*E);return{min:e,max:t,ticks:c}},[l,d,h,o]),T=v-u||1;return a.jsxs("div",{className:j.cn("Bear-TimelineChart w-full",N),"data-testid":A,...m,children:[a.jsxs("div",{className:"Bear-TimelineChart__header flex",children:[a.jsx("div",{style:{width:r.LABEL_WIDTH},className:"flex-shrink-0"}),p&&a.jsx("div",{className:"Bear-TimelineChart__axis flex-1 flex justify-between mb-2",children:B.map((e,t)=>a.jsx(y.Typography,{variant:"caption",className:"Bear-TimelineChart__tick text-gray-400 dark:text-gray-500 text-[10px]",children:_?_(e):Math.round(e)},t))})]}),l.map((e,t)=>{const s=(e.start-u)/T*100,c=(e.end-e.start)/T*100,i=e.color??r.DEFAULT_COLORS[t%r.DEFAULT_COLORS.length];return a.jsxs("div",{className:"Bear-TimelineChart__row flex items-center",style:{height:x,marginBottom:f},children:[a.jsx("div",{style:{width:r.LABEL_WIDTH},className:"Bear-TimelineChart__label flex-shrink-0 pr-3 overflow-hidden",children:a.jsx(y.Typography,{variant:"caption",className:"truncate text-gray-700 dark:text-gray-300",children:e.label})}),a.jsx("div",{className:"Bear-TimelineChart__track flex-1 relative h-full bg-gray-100 dark:bg-zinc-800 rounded",children:g===r.TIMELINE_VARIANT_POINTS?a.jsx("div",{className:"Bear-TimelineChart__point absolute top-1/2 -translate-y-1/2 rounded-full cursor-pointer transition-opacity hover:opacity-80",style:{left:`${s}%`,width:r.POINT_MARKER_SIZE,height:r.POINT_MARKER_SIZE,backgroundColor:i},title:e.tooltip??`${e.label}: ${e.start}`,onClick:()=>n==null?void 0:n(e,t)}):a.jsx("div",{className:"Bear-TimelineChart__bar absolute top-0 h-full rounded cursor-pointer transition-opacity hover:opacity-80",style:{left:`${s}%`,width:`${c}%`,backgroundColor:i,minWidth:r.MIN_BAR_WIDTH},title:e.tooltip??`${e.label}: ${e.start} - ${e.end}`,onClick:()=>n==null?void 0:n(e,t)})})]},t)})]})};exports.TimelineChart=R;

package/dist/components/TimelineChart/TimelineChart.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=28,_=6,T=6,L=120,t=4,D=["#ec4899","#8b5cf6","#3b82f6","#10b981","#f59e0b","#ef4444","#06b6d4"];exports.DEFAULT_AXIS_TICKS=T;exports.DEFAULT_BAR_GAP=_;exports.DEFAULT_BAR_HEIGHT=A;exports.DEFAULT_COLORS=D;exports.LABEL_WIDTH=L;exports.MIN_BAR_WIDTH=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=28,_=6,I=6,T=120,E=4,L=["#ec4899","#8b5cf6","#3b82f6","#10b981","#f59e0b","#ef4444","#06b6d4"],R="bars",t="points",o=10;exports.DEFAULT_AXIS_TICKS=I;exports.DEFAULT_BAR_GAP=_;exports.DEFAULT_BAR_HEIGHT=A;exports.DEFAULT_COLORS=L;exports.LABEL_WIDTH=T;exports.MIN_BAR_WIDTH=E;exports.POINT_MARKER_SIZE=o;exports.TIMELINE_VARIANT_BARS=R;exports.TIMELINE_VARIANT_POINTS=t;

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

@@ -4,3 +4,6 @@ export declare const DEFAULT_AXIS_TICKS = 6;
 export declare const LABEL_WIDTH = 120;
 export declare const MIN_BAR_WIDTH = 4;
 export declare const DEFAULT_COLORS: string[];
+export declare const TIMELINE_VARIANT_BARS = "bars";
+export declare const TIMELINE_VARIANT_POINTS = "points";
+export declare const POINT_MARKER_SIZE = 10;

package/dist/components/TimelineChart/TimelineChart.const.js

@@ -1,9 +1,12 @@
-const A = 28, _ = 6, c = 6, T = 120, o = 4, t = ["#ec4899", "#8b5cf6", "#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#06b6d4"];
+const A = 28, _ = 6, I = 6, T = 120, E = 4, c = ["#ec4899", "#8b5cf6", "#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#06b6d4"], o = "bars", s = "points", t = 10;
 export {
-  c as DEFAULT_AXIS_TICKS,
+  I as DEFAULT_AXIS_TICKS,
   _ as DEFAULT_BAR_GAP,
   A as DEFAULT_BAR_HEIGHT,
-  t as DEFAULT_COLORS,
+  c as DEFAULT_COLORS,
   T as LABEL_WIDTH,
-  o as MIN_BAR_WIDTH
+  E as MIN_BAR_WIDTH,
+  t as POINT_MARKER_SIZE,
+  o as TIMELINE_VARIANT_BARS,
+  s as TIMELINE_VARIANT_POINTS
 };

package/dist/components/TimelineChart/TimelineChart.js

@@ -1,65 +1,79 @@
-import { jsxs as c, jsx as a } from "react/jsx-runtime";
-import { useMemo as w } from "react";
-import { cn as L } from "../../utils/cn.js";
-import { Typography as x } from "../Typography/Typography.js";
-import { DEFAULT_AXIS_TICKS as D, LABEL_WIDTH as y, DEFAULT_COLORS as p, DEFAULT_BAR_GAP as E, DEFAULT_BAR_HEIGHT as F, MIN_BAR_WIDTH as $ } from "./TimelineChart.const.js";
-const j = ({
-  items: i,
-  min: d,
-  max: h,
-  barHeight: u = F,
-  barGap: T = E,
-  showAxis: g = !0,
-  axisTicks: l = D,
-  formatTick: m,
-  onItemClick: n,
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import { useMemo as R } from "react";
+import { cn as I } from "../../utils/cn.js";
+import { Typography as p } from "../Typography/Typography.js";
+import { DEFAULT_AXIS_TICKS as $, LABEL_WIDTH as T, DEFAULT_COLORS as u, DEFAULT_BAR_GAP as C, DEFAULT_BAR_HEIGHT as D, TIMELINE_VARIANT_BARS as F, TIMELINE_VARIANT_POINTS as S, POINT_MARKER_SIZE as y, MIN_BAR_WIDTH as P } from "./TimelineChart.const.js";
+const W = ({
+  items: n,
+  min: h,
+  max: c,
+  barHeight: N = D,
+  barGap: x = C,
+  showAxis: A = !0,
+  axisTicks: o = $,
+  formatTick: _,
+  onItemClick: i,
+  variant: g = F,
   testId: v,
   className: B,
-  ...A
+  ...b
 }) => {
-  const { min: f, max: N, ticks: b } = w(() => {
-    let e = d ?? 1 / 0, t = h ?? -1 / 0;
-    for (const r of i)
-      r.start < e && (e = r.start), r.end > t && (t = r.end);
-    isFinite(e) || (e = 0), isFinite(t) || (t = 100);
-    const s = (t - e) / (l - 1), o = Array.from({ length: l }, (r, C) => e + s * C);
-    return { min: e, max: t, ticks: o };
-  }, [i, d, h, l]), _ = N - f || 1;
-  return /* @__PURE__ */ c("div", { className: L("Bear-TimelineChart w-full", B), "data-testid": v, ...A, children: [
-    /* @__PURE__ */ c("div", { className: "Bear-TimelineChart__header flex", children: [
-      /* @__PURE__ */ a("div", { style: { width: y }, className: "flex-shrink-0" }),
-      g && /* @__PURE__ */ a("div", { className: "Bear-TimelineChart__axis flex-1 flex justify-between mb-2", children: b.map((e, t) => /* @__PURE__ */ a(x, { variant: "caption", className: "Bear-TimelineChart__tick text-gray-400 dark:text-gray-500 text-[10px]", children: m ? m(e) : Math.round(e) }, t)) })
+  const { min: f, max: E, ticks: w } = R(() => {
+    let t = h ?? 1 / 0, r = c ?? -1 / 0;
+    for (const e of n)
+      e.start < t && (t = e.start), e.end > r && (r = e.end);
+    isFinite(t) || (t = 0), isFinite(r) || (r = 100);
+    const l = (r - t) / (o - 1), s = Array.from({ length: o }, (e, L) => t + l * L);
+    return { min: t, max: r, ticks: s };
+  }, [n, h, c, o]), m = E - f || 1;
+  return /* @__PURE__ */ d("div", { className: I("Bear-TimelineChart w-full", B), "data-testid": v, ...b, children: [
+    /* @__PURE__ */ d("div", { className: "Bear-TimelineChart__header flex", children: [
+      /* @__PURE__ */ a("div", { style: { width: T }, className: "flex-shrink-0" }),
+      A && /* @__PURE__ */ a("div", { className: "Bear-TimelineChart__axis flex-1 flex justify-between mb-2", children: w.map((t, r) => /* @__PURE__ */ a(p, { variant: "caption", className: "Bear-TimelineChart__tick text-gray-400 dark:text-gray-500 text-[10px]", children: _ ? _(t) : Math.round(t) }, r)) })
     ] }),
-    i.map((e, t) => {
-      const s = (e.start - f) / _ * 100, o = (e.end - e.start) / _ * 100, r = e.color ?? p[t % p.length];
-      return /* @__PURE__ */ c(
+    n.map((t, r) => {
+      const l = (t.start - f) / m * 100, s = (t.end - t.start) / m * 100, e = t.color ?? u[r % u.length];
+      return /* @__PURE__ */ d(
         "div",
         {
           className: "Bear-TimelineChart__row flex items-center",
-          style: { height: u, marginBottom: T },
+          style: { height: N, marginBottom: x },
           children: [
-            /* @__PURE__ */ a("div", { style: { width: y }, className: "Bear-TimelineChart__label flex-shrink-0 pr-3 overflow-hidden", children: /* @__PURE__ */ a(x, { variant: "caption", className: "truncate text-gray-700 dark:text-gray-300", children: e.label }) }),
-            /* @__PURE__ */ a("div", { className: "Bear-TimelineChart__track flex-1 relative h-full bg-gray-100 dark:bg-zinc-800 rounded", children: /* @__PURE__ */ a(
+            /* @__PURE__ */ a("div", { style: { width: T }, className: "Bear-TimelineChart__label flex-shrink-0 pr-3 overflow-hidden", children: /* @__PURE__ */ a(p, { variant: "caption", className: "truncate text-gray-700 dark:text-gray-300", children: t.label }) }),
+            /* @__PURE__ */ a("div", { className: "Bear-TimelineChart__track flex-1 relative h-full bg-gray-100 dark:bg-zinc-800 rounded", children: g === S ? /* @__PURE__ */ a(
+              "div",
+              {
+                className: "Bear-TimelineChart__point absolute top-1/2 -translate-y-1/2 rounded-full cursor-pointer transition-opacity hover:opacity-80",
+                style: {
+                  left: `${l}%`,
+                  width: y,
+                  height: y,
+                  backgroundColor: e
+                },
+                title: t.tooltip ?? `${t.label}: ${t.start}`,
+                onClick: () => i == null ? void 0 : i(t, r)
+              }
+            ) : /* @__PURE__ */ a(
               "div",
               {
                 className: "Bear-TimelineChart__bar absolute top-0 h-full rounded cursor-pointer transition-opacity hover:opacity-80",
                 style: {
-                  left: `${s}%`,
-                  width: `${o}%`,
-                  backgroundColor: r,
-                  minWidth: $
+                  left: `${l}%`,
+                  width: `${s}%`,
+                  backgroundColor: e,
+                  minWidth: P
                 },
-                title: e.tooltip ?? `${e.label}: ${e.start} - ${e.end}`,
-                onClick: () => n == null ? void 0 : n(e, t)
+                title: t.tooltip ?? `${t.label}: ${t.start} - ${t.end}`,
+                onClick: () => i == null ? void 0 : i(t, r)
               }
             ) })
           ]
         },
-        t
+        r
       );
     })
   ] });
 };
 export {
-  j as TimelineChart
+  W as TimelineChart
 };

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

@@ -27,6 +27,6 @@ export interface TimelineChartProps extends Omit<HTMLAttributes<HTMLDivElement>,
     formatTick?: (value: number) => string;
     /** Callback when an item bar is clicked */
     onItemClick?: (item: TimelineChartItem, index: number) => void;
-    /** Test ID */
+    variant?: 'bars' | 'points';
     testId?: 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=$;