@stackone/malachite 2.68.0 → 2.69.0

package/COMPONENTS.md

@@ -44,6 +44,7 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
 - **`UsageCard`** — A small metered card: a title (optionally a link via `titleLink`, drawn with a trailing arrow), a right-aligned `detail` such as "700/1,000", and a body, usually a `Progress`. Used by `Sidebar.Usage`, and fine on its own, e.g. on a billing page. _Key props:_ `title`, `titleLink`, `detail`, `children`, `aria-label` (required; names the group), `busy` (sets `aria-busy` only).
 - **`Progress`** — Progress bar.
 - **`LoadingBar`** — Indeterminate full-width loading line; the variant colour sweeps across a pale track for work of unknown duration. Toggle `active` rather than unmounting, so the reserved height prevents layout shift. _Key props:_ `active`, `LoadingBarVariant` (`default` | `warning` | `error`), `LoadingBarSize` (`small` | `medium` | `large`), `aria-label`, `aria-labelledby`, `className`, `style`.
+- **`ToastProvider`** — Transient top-centre toasts for the outcome of an action. Wrap the app once in `ToastProvider` and call `useToast().show({ message, variant })` anywhere beneath it. Each toast auto-dismisses, pauses while hovered and dismisses on click; at most three show at once. Toasts are announced through always-mounted live regions (`status` for success, `alert` for error), and the pills themselves are hidden from assistive tech and never take focus, so they cannot fight a dialog's focus trap. The host mounts on the first toast and joins the top layer, so toasts paint above elevated side panels. _Key props:_ `ToastProvider`: `children`, `duration` (ms, default 3000). `useToast()` → `show({ message, variant })`, `ToastVariant` (`success` | `error`, default `success`).
 - **`Spinner`** — Loading spinner.
 - **`Skeleton`** — Loading placeholders. Includes `Skeleton.Avatar` and `Skeleton.Input`. The shimmer stops under `prefers-reduced-motion`, leaving the plain placeholder.
 - **`Tooltip`** — Hover/focus tooltip; also works on disabled controls (see CLAUDE.md). It describes its trigger once shown, so `describesTrigger={false}` where the same sentence is already on screen and referenced — otherwise a screen reader reads it twice. _Key props:_ `text`, `placement`, `delay`, `maxWidth`, `shouldShow`, `triggerAs`, `describesTrigger`, `isShrinkable`, `fill`, `wrapChildren`, `suppressed` (holds the tooltip back, e.g. while the popup its trigger opens is up), `showOnFocus` (false where script can move focus onto the trigger, e.g. an option a panel focuses on open), `focusableTrigger` (makes a trigger that cannot take focus — text, a static `Tag` — a tab stop, so the tooltip is not mouse-only; not for focusable children).

package/dist/components/DatePickerPanel.js

@@ -1,190 +1,205 @@
-import { jsxs as b, jsx as e, Fragment as H } from "react/jsx-runtime";
-import { useId as J, useRef as P, useEffect as Q, useLayoutEffect as ee } from "react";
+import { jsxs as b, jsx as n, Fragment as H } from "react/jsx-runtime";
+import { useId as J, useRef as M, useEffect as Q, useLayoutEffect as ee } from "react";
 import { Button as te } from "./Button.js";
 import ne from "./CustomIcons/CaretDoubleLeftIcon.js";
-import re from "./CustomIcons/CaretDoubleRightIcon.js";
-import le from "./CustomIcons/CaretLeftIcon.js";
-import ae from "./CustomIcons/CaretRightIcon.js";
+import ae from "./CustomIcons/CaretDoubleRightIcon.js";
+import re from "./CustomIcons/CaretLeftIcon.js";
+import le from "./CustomIcons/CaretRightIcon.js";
 import { SegmentedControl as se } from "./SegmentedControl.js";
-import { monthLabel as oe, monthWeeks as ie, dayKeyOf as K, sameDay as y, dayKeyString as _, weekdayLabels as ce, spokenDay as de, partsOf as ue, formatTimeReadout as me, addMonths as fe, compareDays as D, addMonthsToDay as U, addDays as $, startOfWeek as j } from "./dateMath.js";
-import { DIVIDER_V as B, DIVIDER_H as S, LINK_BUTTON as he, LINK_HOVER as pe, PRESET_BUTTON as be, PRESET_HOVER as Ne, NAV_BUTTON as C, HEADING_TEXT as M, RANGE_BAND as ge, RANGE_BAND_SPAN as xe, CELL_CLASS as G, dayToneClass as z } from "./datePickerStyles.js";
+import { monthLabel as oe, monthWeeks as ie, dayKeyOf as K, sameDay as x, dayKeyString as A, weekdayLabels as ce, spokenDay as de, partsOf as ue, formatTimeReadout as me, addMonths as fe, compareDays as _, daysInMonth as he, addMonthsToDay as U, addDays as D, startOfWeek as j } from "./dateMath.js";
+import { DIVIDER_V as B, DIVIDER_H as P, LINK_BUTTON as pe, LINK_HOVER as be, PRESET_BUTTON as ye, PRESET_HOVER as Ne, NAV_BUTTON as I, HEADING_TEXT as S, RANGE_BAND as ge, RANGE_BAND_SPAN as xe, CELL_CLASS as G, dayToneClass as z } from "./datePickerStyles.js";
 import { FOCUS_RING as v } from "./focusRing.js";
-const ye = 40, ve = 240, R = (n, r = 1) => Array.from({ length: Math.ceil(n / r) }, (t, s) => s * r), we = (n, r, t, s) => {
-  switch (n) {
+const ve = 40, we = 240, R = (e, a = 1) => Array.from({ length: Math.ceil(e / a) }, (t, r) => r * a), De = (e, a, t, r) => {
+  switch (e) {
     case "ArrowLeft":
-      return $(t, -1);
+      return D(t, -1);
     case "ArrowRight":
-      return $(t, 1);
+      return D(t, 1);
     case "ArrowUp":
-      return $(t, -7);
+      return D(t, -7);
     case "ArrowDown":
-      return $(t, 7);
+      return D(t, 7);
     case "Home":
-      return j(t, s);
+      return j(t, r);
     case "End":
-      return $(j(t, s), 6);
+      return D(j(t, r), 6);
     case "PageUp":
-      return U(t, r ? -12 : -1);
+      return U(t, a ? -12 : -1);
     case "PageDown":
-      return U(t, r ? 12 : 1);
+      return U(t, a ? 12 : 1);
     default:
       return null;
   }
-}, $e = ({ view: n, labelId: r, onViewChange: t, isMonthReachable: s }) => {
-  const p = (g) => {
-    const l = fe(n, g);
-    return { target: l, disabled: !s(l) };
-  }, d = p(-1), u = p(-12), h = p(1), N = p(12), m = ({ target: g, disabled: l }) => {
-    l || t(g);
+}, $e = (e, a, t) => {
+  const r = he(e), h = Math.min(a, r);
+  for (let c = 0; c < r; c++)
+    for (const d of [h - c, h + c])
+      if (d >= 1 && d <= r && !t({ ...e, day: d }))
+        return { ...e, day: d };
+  return { ...e, day: h };
+}, Ce = ({
+  view: e,
+  labelId: a,
+  onViewChange: t,
+  focusDay: r,
+  onFocusDayChange: h,
+  isDayDisabled: c,
+  isMonthReachable: d
+}) => {
+  const f = (i) => {
+    const o = fe(e, i);
+    return { target: o, disabled: !d(o) };
+  }, y = f(-1), p = f(-12), N = f(1), l = f(12), u = ({ target: i, disabled: o }) => {
+    o || (t(i), h($e(i, r.day, c)));
   };
   return /* @__PURE__ */ b("div", { className: "flex items-center justify-between p-2", children: [
     /* @__PURE__ */ b("div", { className: "flex items-center gap-0.5", children: [
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ n(
         "button",
         {
           type: "button",
-          "aria-label": "Previous month",
-          className: `${C} ${v}`,
-          "aria-disabled": d.disabled || void 0,
-          onClick: () => m(d),
-          children: /* @__PURE__ */ e(le, { size: 14 })
+          "aria-label": "Previous year",
+          className: `${I} ${v}`,
+          "aria-disabled": p.disabled || void 0,
+          onClick: () => u(p),
+          children: /* @__PURE__ */ n(ne, { size: 14 })
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ n(
         "button",
         {
           type: "button",
-          "aria-label": "Previous year",
-          className: `${C} ${v}`,
-          "aria-disabled": u.disabled || void 0,
-          onClick: () => m(u),
-          children: /* @__PURE__ */ e(ne, { size: 14 })
+          "aria-label": "Previous month",
+          className: `${I} ${v}`,
+          "aria-disabled": y.disabled || void 0,
+          onClick: () => u(y),
+          children: /* @__PURE__ */ n(re, { size: 14 })
         }
       )
     ] }),
-    /* @__PURE__ */ e("span", { id: r, "aria-live": "polite", className: M, children: oe(n) }),
+    /* @__PURE__ */ n("span", { id: a, "aria-live": "polite", className: S, children: oe(e) }),
     /* @__PURE__ */ b("div", { className: "flex items-center gap-0.5", children: [
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ n(
         "button",
         {
           type: "button",
           "aria-label": "Next month",
-          className: `${C} ${v}`,
-          "aria-disabled": h.disabled || void 0,
-          onClick: () => m(h),
-          children: /* @__PURE__ */ e(ae, { size: 14 })
+          className: `${I} ${v}`,
+          "aria-disabled": N.disabled || void 0,
+          onClick: () => u(N),
+          children: /* @__PURE__ */ n(le, { size: 14 })
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ n(
         "button",
         {
           type: "button",
           "aria-label": "Next year",
-          className: `${C} ${v}`,
-          "aria-disabled": N.disabled || void 0,
-          onClick: () => m(N),
-          children: /* @__PURE__ */ e(re, { size: 14 })
+          className: `${I} ${v}`,
+          "aria-disabled": l.disabled || void 0,
+          onClick: () => u(l),
+          children: /* @__PURE__ */ n(ae, { size: 14 })
         }
       )
     ] })
   ] });
-}, Ie = (n, r, t) => !r || !t || D(r, t) === 0 ? null : y(n, r) ? "start" : y(n, t) ? "end" : D(n, r) > 0 && D(n, t) < 0 ? "middle" : null, ke = ({
-  mode: n,
-  zone: r,
+}, Ie = (e, a, t) => !a || !t || _(a, t) === 0 ? null : x(e, a) ? "start" : x(e, t) ? "end" : _(e, a) > 0 && _(e, t) < 0 ? "middle" : null, ke = ({
+  mode: e,
+  zone: a,
   weekStart: t,
-  view: s,
-  onViewChange: p,
-  focusDay: d,
-  onFocusDayChange: u,
-  draft: h,
-  today: N,
-  isDayDisabled: m,
-  isMonthReachable: g,
+  view: r,
+  onViewChange: h,
+  focusDay: c,
+  onFocusDayChange: d,
+  draft: f,
+  today: y,
+  isDayDisabled: p,
+  isMonthReachable: N,
   onPickDay: l,
-  initialFocusRef: f,
+  initialFocusRef: u,
   labelId: i
 }) => {
-  const o = P(null), x = P(!1), L = ie(s, t), T = h.start ? K(h.start, r) : null, E = n === "range" && h.end ? K(h.end, r) : null, I = L.some((c) => c.some((a) => y(a, d))) ? d : { ...s, day: 1 };
+  const o = M(null), g = M(!1), L = ie(r, t), k = f.start ? K(f.start, a) : null, T = e === "range" && f.end ? K(f.end, a) : null, $ = L.some((m) => m.some((s) => x(s, c))) ? c : { ...r, day: 1 };
   Q(() => {
-    var c, a;
-    x.current && (x.current = !1, (a = (c = o.current) == null ? void 0 : c.querySelector(`[data-day="${_(d)}"]`)) == null || a.focus({ preventScroll: !0 }));
-  }, [d]);
-  const W = (c) => {
-    if (c.key === "Enter" || c.key === " ") {
-      c.preventDefault(), m(I) || l(I);
+    var m, s;
+    g.current && (g.current = !1, (s = (m = o.current) == null ? void 0 : m.querySelector(`[data-day="${A(c)}"]`)) == null || s.focus({ preventScroll: !0 }));
+  }, [c]);
+  const F = (m) => {
+    if (m.key === "Enter" || m.key === " ") {
+      m.preventDefault(), p($) || l($);
       return;
     }
-    const a = we(c.key, c.shiftKey, I, t);
-    if (!a)
+    const s = De(m.key, m.shiftKey, $, t);
+    if (!s)
       return;
-    c.preventDefault();
-    const w = a.month !== s.month || a.year !== s.year;
-    w && !g(a) || (w && p({ year: a.year, month: a.month }), x.current = !0, u(a));
-  }, X = ce(t);
+    m.preventDefault();
+    const w = s.month !== r.month || s.year !== r.year;
+    w && !N(s) || (w && h({ year: s.year, month: s.month }), g.current = !0, d(s));
+  }, W = ce(t);
   return /* @__PURE__ */ b(
     "div",
     {
       ref: o,
       role: "grid",
       "aria-labelledby": i,
-      "aria-multiselectable": n === "range" || void 0,
+      "aria-multiselectable": e === "range" || void 0,
       className: "flex w-[276px] flex-col",
-      onKeyDown: W,
+      onKeyDown: F,
       children: [
-        /* @__PURE__ */ e("div", { role: "row", className: "grid grid-cols-7 px-[14px] py-2", children: X.map((c) => /* @__PURE__ */ e(
+        /* @__PURE__ */ n("div", { role: "row", className: "grid grid-cols-7 px-[14px] py-2", children: W.map((m) => /* @__PURE__ */ n(
           "span",
           {
             role: "columnheader",
-            "aria-label": c.long,
-            className: `flex h-6 items-center justify-center ${M}`,
-            children: c.short
+            "aria-label": m.long,
+            className: `flex h-6 items-center justify-center ${S}`,
+            children: m.short
           },
-          c.short
+          m.short
         )) }),
-        L.map((c) => /* @__PURE__ */ e(
+        L.map((m) => /* @__PURE__ */ n(
           "div",
           {
             role: "row",
             className: "grid grid-cols-7 px-[14px] py-2",
-            children: c.map((a) => {
-              const w = _(a), k = m(a), A = n === "range" ? Ie(a, T, E) : null, q = y(a, T) || y(a, E) || A === "middle", F = y(a, T) || y(a, E), O = y(a, N), Y = a.month !== s.month, V = y(a, I);
+            children: m.map((s) => {
+              const w = A(s), C = p(s), E = e === "range" ? Ie(s, k, T) : null, X = x(s, k) || x(s, T) || E === "middle", q = x(s, k) || x(s, T), O = x(s, y), Y = s.month !== r.month, V = x(s, $);
               return /* @__PURE__ */ b(
                 "div",
                 {
                   role: "presentation",
                   className: "relative flex h-6 items-center justify-center",
                   children: [
-                    A && /* @__PURE__ */ e(
+                    E && /* @__PURE__ */ n(
                       "span",
                       {
                         "aria-hidden": "true",
-                        className: `${ge} ${xe[A]}`
+                        className: `${ge} ${xe[E]}`
                       }
                     ),
-                    /* @__PURE__ */ e(
+                    /* @__PURE__ */ n(
                       "button",
                       {
                         ref: V ? (Z) => {
-                          f.current = Z;
+                          u.current = Z;
                         } : void 0,
                         type: "button",
                         role: "gridcell",
-                        "aria-selected": q,
+                        "aria-selected": X,
                         "data-day": w,
                         tabIndex: V ? 0 : -1,
-                        "aria-label": de(a),
+                        "aria-label": de(s),
                         "aria-current": O ? "date" : void 0,
-                        "aria-disabled": k || void 0,
-                        className: `${G(k)} ${z({
-                          selected: F,
+                        "aria-disabled": C || void 0,
+                        className: `${G(C)} ${z({
+                          selected: q,
                           today: O,
                           outside: Y,
-                          disabled: k
+                          disabled: C
                         })}`,
                         onClick: () => {
-                          u(a), k || l(a);
+                          d(s), C || l(s);
                         },
-                        children: a.day
+                        children: s.day
                       }
                     )
                   ]
@@ -193,34 +208,34 @@ const ye = 40, ve = 240, R = (n, r = 1) => Array.from({ length: Math.ceil(n / r)
               );
             })
           },
-          _(c[0])
+          A(m[0])
         ))
       ]
     }
   );
-}, Ce = ({ label: n, values: r, selected: t, isDisabled: s, onPick: p }) => {
-  const d = P(null), u = t === null ? -1 : r.filter((l) => l <= t).length - 1;
+}, Te = ({ label: e, values: a, selected: t, isDisabled: r, onPick: h }) => {
+  const c = M(null), d = t === null ? -1 : a.filter((l) => l <= t).length - 1;
   ee(() => {
-    d.current && u >= 0 && (d.current.scrollTop = u * ye);
-  }, [u]);
-  const h = Math.max(
+    c.current && d >= 0 && (c.current.scrollTop = d * ve);
+  }, [d]);
+  const f = Math.max(
     0,
-    r.findIndex((l) => !s(l))
-  ), N = (l) => l === (u >= 0 ? u : h) ? 0 : -1, m = (l, f) => {
-    var o, x;
-    const i = r[l];
-    i === void 0 || s(i) || (p(i), f && ((x = (o = d.current) == null ? void 0 : o.querySelector(`[data-value="${i}"]`)) == null || x.focus({ preventScroll: !0 })));
+    a.findIndex((l) => !r(l))
+  ), y = (l) => l === (d >= 0 ? d : f) ? 0 : -1, p = (l, u) => {
+    var o, g;
+    const i = a[l];
+    i === void 0 || r(i) || (h(i), u && ((g = (o = c.current) == null ? void 0 : o.querySelector(`[data-value="${i}"]`)) == null || g.focus({ preventScroll: !0 })));
   };
-  return /* @__PURE__ */ e(
+  return /* @__PURE__ */ n(
     "div",
     {
-      ref: d,
+      ref: c,
       role: "listbox",
-      "aria-label": n,
+      "aria-label": e,
       className: "flex flex-col items-center overflow-y-auto overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-      style: { height: ve },
+      style: { height: we },
       onKeyDown: (l) => {
-        const f = u >= 0 ? u : -1, i = {
+        const u = d >= 0 ? d : -1, i = {
           ArrowDown: 1,
           ArrowUp: -1,
           PageDown: 5,
@@ -228,20 +243,20 @@ const ye = 40, ve = 240, R = (n, r = 1) => Array.from({ length: Math.ceil(n / r)
         };
         let o = null;
         if (l.key in i) {
-          o = f < 0 ? h : f + i[l.key];
-          const x = Math.sign(i[l.key]);
-          for (; o >= 0 && o < r.length && s(r[o]); )
-            o += x;
+          o = u < 0 ? f : u + i[l.key];
+          const g = Math.sign(i[l.key]);
+          for (; o >= 0 && o < a.length && r(a[o]); )
+            o += g;
         } else if (l.key === "Home")
-          o = r.findIndex((x) => !s(x));
+          o = a.findIndex((g) => !r(g));
         else if (l.key === "End")
-          for (o = r.length - 1; o >= 0 && s(r[o]); )
+          for (o = a.length - 1; o >= 0 && r(a[o]); )
             o -= 1;
-        o !== null && (l.preventDefault(), m(o, !0));
+        o !== null && (l.preventDefault(), p(o, !0));
       },
-      children: r.map((l, f) => {
-        const i = s(l), o = l === t;
-        return /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center py-2", children: /* @__PURE__ */ e(
+      children: a.map((l, u) => {
+        const i = r(l), o = l === t;
+        return /* @__PURE__ */ n("div", { className: "flex shrink-0 items-center py-2", children: /* @__PURE__ */ n(
           "button",
           {
             type: "button",
@@ -249,142 +264,145 @@ const ye = 40, ve = 240, R = (n, r = 1) => Array.from({ length: Math.ceil(n / r)
             "data-value": l,
             "aria-selected": o,
             "aria-disabled": i || void 0,
-            tabIndex: N(f),
+            tabIndex: y(u),
             className: `${G(i)} ${z({
               selected: o,
               today: !1,
               outside: !1,
               disabled: i
             })}`,
-            onClick: () => m(f, !1),
+            onClick: () => p(u, !1),
             children: String(l).padStart(2, "0")
           }
         ) }, l);
       })
     }
   );
-}, Te = ({
-  mode: n,
-  zone: r,
+}, Ee = ({
+  mode: e,
+  zone: a,
   precision: t,
-  minuteStep: s,
-  draft: p,
-  active: d,
-  onActiveChange: u,
-  isTimeDisabled: h,
-  onPickTime: N
+  minuteStep: r,
+  draft: h,
+  active: c,
+  onActiveChange: d,
+  isTimeDisabled: f,
+  onPickTime: y
 }) => {
-  const m = n === "range" ? p[d] : p.start, g = m ? ue(m, r) : null, l = [
+  const p = e === "range" ? h[c] : h.start, N = p ? ue(p, a) : null, l = [
     { unit: "hours", label: "Hours", values: R(24) },
-    { unit: "minutes", label: "Minutes", values: R(60, s) },
+    { unit: "minutes", label: "Minutes", values: R(60, r) },
     ...t === "second" ? [{ unit: "seconds", label: "Seconds", values: R(60) }] : []
   ];
   return /* @__PURE__ */ b("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ e("div", { className: "flex min-h-8 items-center justify-center p-2", children: n === "range" ? /* @__PURE__ */ e(
+    /* @__PURE__ */ n("div", { className: "flex min-h-8 items-center justify-center p-2", children: e === "range" ? /* @__PURE__ */ n(
       se,
       {
         size: "small",
         "aria-label": "Time for",
-        value: d,
-        onChange: u,
+        value: c,
+        onChange: d,
         options: [
           { value: "start", label: "Start" },
           { value: "end", label: "End" }
         ]
       }
-    ) : /* @__PURE__ */ e("span", { className: `${M} whitespace-nowrap`, children: me(m, r, t) }) }),
-    /* @__PURE__ */ e("div", { className: S }),
-    /* @__PURE__ */ e(
+    ) : /* @__PURE__ */ n("span", { className: `${S} whitespace-nowrap`, children: me(p, a, t) }) }),
+    /* @__PURE__ */ n("div", { className: P }),
+    /* @__PURE__ */ n(
       "div",
       {
         className: "grid px-[14px]",
         style: { gridTemplateColumns: `repeat(${l.length}, 35.67px)` },
-        children: l.map((f) => /* @__PURE__ */ e(
-          Ce,
+        children: l.map((u) => /* @__PURE__ */ n(
+          Te,
           {
-            label: f.label,
-            values: f.values,
-            selected: g ? g[f.unit] : null,
-            isDisabled: (i) => h(f.unit, i),
-            onPick: (i) => N(f.unit, i)
+            label: u.label,
+            values: u.values,
+            selected: N ? N[u.unit] : null,
+            isDisabled: (i) => f(u.unit, i),
+            onPick: (i) => y(u.unit, i)
           },
-          f.unit
+          u.unit
         ))
       }
     )
   ] });
-}, Ee = ({
-  presets: n,
-  onPreset: r
-}) => /* @__PURE__ */ e("div", { className: "flex w-36 flex-col gap-0.5 p-1", role: "group", "aria-label": "Presets", children: n.map((t, s) => /* @__PURE__ */ e(
+}, Ae = ({
+  presets: e,
+  onPreset: a
+}) => /* @__PURE__ */ n("div", { className: "flex w-36 flex-col gap-0.5 p-1", role: "group", "aria-label": "Presets", children: e.map((t, r) => /* @__PURE__ */ n(
   "button",
   {
     type: "button",
-    className: `${be} ${Ne} ${v}`,
-    onClick: () => r(s),
+    className: `${ye} ${Ne} ${v}`,
+    onClick: () => a(r),
     children: t
   },
   t
-)) }), Ue = (n) => {
-  const r = `${J().replace(/[^a-zA-Z0-9_-]/g, "")}-month`, {
+)) }), Be = (e) => {
+  const a = `${J().replace(/[^a-zA-Z0-9_-]/g, "")}-month`, {
     presets: t,
-    onPreset: s,
-    precision: p,
-    todayLabel: d,
-    todayDisabled: u,
-    onToday: h,
-    showApply: N,
-    applyDisabled: m,
-    onApply: g
-  } = n;
+    onPreset: r,
+    precision: h,
+    todayLabel: c,
+    todayDisabled: d,
+    onToday: f,
+    showApply: y,
+    applyDisabled: p,
+    onApply: N
+  } = e;
   return /* @__PURE__ */ b("div", { className: "flex flex-col gap-1 p-1.5", children: [
-    n.mode === "range" && /* @__PURE__ */ e("span", { className: "sr-only", "aria-live": "polite", children: n.active === "end" && n.draft.start && !n.draft.end ? "Choose the end date" : "" }),
+    e.mode === "range" && /* @__PURE__ */ n("span", { className: "sr-only", "aria-live": "polite", children: e.active === "end" && e.draft.start && !e.draft.end ? "Choose the end date" : "" }),
     /* @__PURE__ */ b("div", { className: "flex", children: [
       t && t.length > 0 && /* @__PURE__ */ b(H, { children: [
-        /* @__PURE__ */ e(Ee, { presets: t, onPreset: s }),
-        /* @__PURE__ */ e("div", { className: `${B} mx-1` })
+        /* @__PURE__ */ n(Ae, { presets: t, onPreset: r }),
+        /* @__PURE__ */ n("div", { className: `${B} mx-1` })
       ] }),
       /* @__PURE__ */ b("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ e(
-          $e,
+        /* @__PURE__ */ n(
+          Ce,
           {
-            view: n.view,
-            labelId: r,
-            onViewChange: n.onViewChange,
-            isMonthReachable: n.isMonthReachable
+            view: e.view,
+            labelId: a,
+            onViewChange: e.onViewChange,
+            focusDay: e.focusDay,
+            onFocusDayChange: e.onFocusDayChange,
+            isDayDisabled: e.isDayDisabled,
+            isMonthReachable: e.isMonthReachable
           }
         ),
-        /* @__PURE__ */ e("div", { className: S }),
-        /* @__PURE__ */ e(ke, { ...n, labelId: r })
+        /* @__PURE__ */ n("div", { className: P }),
+        /* @__PURE__ */ n(ke, { ...e, labelId: a })
       ] }),
-      p !== "day" && /* @__PURE__ */ b(H, { children: [
-        /* @__PURE__ */ e("div", { className: B }),
-        /* @__PURE__ */ e(Te, { ...n })
+      h !== "day" && /* @__PURE__ */ b(H, { children: [
+        /* @__PURE__ */ n("div", { className: B }),
+        /* @__PURE__ */ n(Ee, { ...e })
       ] })
     ] }),
-    /* @__PURE__ */ e("div", { className: S }),
+    /* @__PURE__ */ n("div", { className: P }),
     /* @__PURE__ */ b(
       "div",
       {
-        className: `flex items-center p-2 ${N ? "justify-between" : "justify-center"}`,
+        className: `flex items-center p-2 ${y ? "justify-between" : "justify-center"}`,
         children: [
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ n(
             "button",
             {
               type: "button",
-              className: `${he} ${pe} ${v}`,
-              disabled: u,
-              onClick: h,
-              children: d
+              className: `${pe} ${be} ${v}`,
+              disabled: d,
+              onClick: f,
+              children: c
             }
           ),
-          N && /* @__PURE__ */ e(
+          y && /* @__PURE__ */ n(
             te,
             {
               size: "small",
               variant: "filled",
-              disabled: m,
-              onClick: g,
+              disabled: p,
+              onClick: N,
               children: "Apply"
             }
           )
@@ -394,6 +412,6 @@ const ye = 40, ve = 240, R = (n, r = 1) => Array.from({ length: Math.ceil(n / r)
   ] });
 };
 export {
-  Ue as default
+  Be as default
 };
 //# sourceMappingURL=DatePickerPanel.js.map