meticulous-ui 3.7.11 → 3.7.13

package/components/DatePicker/DatePicker.js

@@ -1,16 +1,15 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useMemo, useState, useCallback, useEffect } from "react";
-import PropTypes from "prop-types";
-import colors from "../../colors/colorMap.js";
-import { blue } from "../../colors/blue.js";
-import { MODE, MONTHS, DAYS_SHORT } from "./constants.js";
-import { buildCalendarGrid, formatDate, isToday, isSameDay, isRangeStart, isRangeEnd, isInRange } from "./utils.js";
-import styled, { keyframes, css } from "styled-components";
-const fadeIn = keyframes`
+import { jsxs as x, jsx as o, Fragment as Dn } from "react/jsx-runtime";
+import { useMemo as Ln, useState as m, useCallback as Gn, useEffect as Mn } from "react";
+import g from "prop-types";
+import Yn from "../../colors/colorMap.js";
+import { blue as In } from "../../colors/blue.js";
+import { MODE as s, MONTHS as en, DAYS_SHORT as Tn } from "./constants.js";
+import { buildCalendarGrid as On, formatDate as B, isToday as Pn, isSameDay as tn, isRangeStart as zn, isRangeEnd as _n, isInRange as jn } from "./utils.js";
+import i, { keyframes as Hn, css as Cn } from "styled-components";
+const Bn = Hn`
   from { opacity: 0; transform: translateY(6px); }
   to   { opacity: 1; transform: translateY(0); }
-`;
-const Wrapper = /*@__PURE__*/styled.div`
+`, Fn = i.div`
   display: inline-flex;
   flex-direction: column;
   background: #ffffff;
@@ -21,24 +20,17 @@ const Wrapper = /*@__PURE__*/styled.div`
   padding: 20px;
   width: 320px;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  animation: ${fadeIn} 0.22s ease;
+  animation: ${Bn} 0.22s ease;
   user-select: none;
-`;
-const SelectedDisplay = /*@__PURE__*/styled.div`
+`, Wn = i.div`
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 16px;
-`;
-const DateChip = /*@__PURE__*/styled.div`
+`, F = i.div`
   flex: 1;
-  background: ${({
-  $active,
-  $primary
-}) => $active ? $primary : "#f1f3f4"};
-  color: ${({
-  $active
-}) => $active ? "#fff" : "#5f6368"};
+  background: ${({ $active: e, $primary: t }) => e ? t : "#f1f3f4"};
+  color: ${({ $active: e }) => e ? "#fff" : "#5f6368"};
   border-radius: 12px;
   padding: 10px 14px;
   font-size: 13px;
@@ -56,29 +48,21 @@ const DateChip = /*@__PURE__*/styled.div`
     opacity: 0.7;
     margin-bottom: 2px;
   }
-`;
-const RangeArrow = /*@__PURE__*/styled.div`
+`, Un = i.div`
   color: #bdc1c6;
   font-size: 16px;
   flex-shrink: 0;
-`;
-const ModeToggle = /*@__PURE__*/styled.div`
+`, qn = i.div`
   display: flex;
   background: #f1f3f4;
   border-radius: 10px;
   padding: 3px;
   margin-bottom: 16px;
-`;
-const ModeBtn = /*@__PURE__*/styled.button`
+`, on = i.button`
   flex: 1;
   border: none;
-  background: ${({
-  $active
-}) => $active ? "#fff" : "transparent"};
-  color: ${({
-  $active,
-  $primary
-}) => $active ? $primary : "#5f6368"};
+  background: ${({ $active: e }) => e ? "#fff" : "transparent"};
+  color: ${({ $active: e, $primary: t }) => e ? t : "#5f6368"};
   border-radius: 8px;
   padding: 6px 0;
   font-size: 12px;
@@ -87,24 +71,18 @@ const ModeBtn = /*@__PURE__*/styled.button`
   transition:
     background 0.15s,
     color 0.15s;
-  box-shadow: ${({
-  $active
-}) => $active ? "0 1px 4px rgba(0,0,0,0.1)" : "none"};
+  box-shadow: ${({ $active: e }) => e ? "0 1px 4px rgba(0,0,0,0.1)" : "none"};
 
   &:focus-visible {
-    outline: 2px solid ${({
-  $primary
-}) => $primary};
+    outline: 2px solid ${({ $primary: e }) => e};
     outline-offset: 2px;
   }
-`;
-const Nav = /*@__PURE__*/styled.div`
+`, Jn = i.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 12px;
-`;
-const NavBtn = /*@__PURE__*/styled.button`
+`, rn = i.button`
   background: none;
   border: none;
   cursor: pointer;
@@ -121,18 +99,13 @@ const NavBtn = /*@__PURE__*/styled.button`
 
   &:hover {
     background: #f1f3f4;
-    color: ${({
-  $primary
-}) => $primary};
+    color: ${({ $primary: e }) => e};
   }
 
   &:focus-visible {
-    outline: 2px solid ${({
-  $primary
-}) => $primary};
+    outline: 2px solid ${({ $primary: e }) => e};
   }
-`;
-const MonthLabel = /*@__PURE__*/styled.button`
+`, sn = i.button`
   background: none;
   border: none;
   cursor: pointer;
@@ -148,17 +121,13 @@ const MonthLabel = /*@__PURE__*/styled.button`
   }
 
   &:focus-visible {
-    outline: 2px solid ${({
-  $primary
-}) => $primary};
+    outline: 2px solid ${({ $primary: e }) => e};
   }
-`;
-const Grid = /*@__PURE__*/styled.div`
+`, Kn = i.div`
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 0;
-`;
-const DayHeader = /*@__PURE__*/styled.div`
+`, Qn = i.div`
   text-align: center;
   font-size: 11px;
   font-weight: 600;
@@ -166,8 +135,7 @@ const DayHeader = /*@__PURE__*/styled.div`
   padding: 4px 0 8px;
   text-transform: uppercase;
   letter-spacing: 0.4px;
-`;
-const DayCell = /*@__PURE__*/styled.div`
+`, Xn = i.div`
   position: relative;
   display: flex;
   align-items: center;
@@ -178,22 +146,11 @@ const DayCell = /*@__PURE__*/styled.div`
     content: '';
     position: absolute;
     inset: 4px 0;
-    background: ${({
-  $inRange,
-  $primaryLight
-}) => $inRange ? $primaryLight : "transparent"};
-    border-radius: ${({
-  $rangeStart,
-  $rangeEnd
-}) => {
-  if ($rangeStart) return "50% 0 0 50%";
-  if ($rangeEnd) return "0 50% 50% 0";
-  return "0";
-}};
+    background: ${({ $inRange: e, $primaryLight: t }) => e ? t : "transparent"};
+    border-radius: ${({ $rangeStart: e, $rangeEnd: t }) => e ? "50% 0 0 50%" : t ? "0 50% 50% 0" : "0"};
     pointer-events: none;
   }
-`;
-const DayBtn = /*@__PURE__*/styled.button`
+`, Zn = i.button`
   position: relative;
   z-index: 1;
   width: 32px;
@@ -205,81 +162,36 @@ const DayBtn = /*@__PURE__*/styled.button`
   justify-content: center;
   font-size: 13px;
   font-weight: 500;
-  cursor: ${({
-  $empty,
-  disabled
-}) => $empty || disabled ? "default" : "pointer"};
-  background: ${({
-  $selected,
-  $hovered,
-  $primary,
-  $primaryLight
-}) => {
-  if ($selected) return $primary;
-  if ($hovered) return $primaryLight;
-  return "transparent";
-}};
-  color: ${({
-  $selected,
-  $today,
-  disabled,
-  $primary
-}) => {
-  if ($selected) return "#fff";
-  if (disabled) return "#dadce0";
-  if ($today) return $primary;
-  return "#202124";
-}};
-  outline: ${({
-  $today,
-  $selected,
-  $primary
-}) => $today && !$selected ? `2px solid ${$primary}` : "none"};
+  cursor: ${({ $empty: e, disabled: t }) => e || t ? "default" : "pointer"};
+  background: ${({ $selected: e, $hovered: t, $primary: c, $primaryLight: p }) => e ? c : t ? p : "transparent"};
+  color: ${({ $selected: e, $today: t, disabled: c, $primary: p }) => e ? "#fff" : c ? "#dadce0" : t ? p : "#202124"};
+  outline: ${({ $today: e, $selected: t, $primary: c }) => e && !t ? `2px solid ${c}` : "none"};
   outline-offset: -2px;
   transition:
     background 0.12s,
     color 0.12s;
-  pointer-events: ${({
-  $empty,
-  disabled
-}) => $empty || disabled ? "none" : "auto"};
+  pointer-events: ${({ $empty: e, disabled: t }) => e || t ? "none" : "auto"};
 
-  ${({
-  $empty
-}) => $empty && css`
+  ${({ $empty: e }) => e && Cn`
       visibility: hidden;
     `}
 
   &:hover {
-    background: ${({
-  $selected,
-  $primary,
-  $primaryDark,
-  $primaryLight
-}) => $selected ? $primaryDark : $primaryLight};
+    background: ${({ $selected: e, $primary: t, $primaryDark: c, $primaryLight: p }) => e ? c : p};
   }
 
   &:focus-visible {
-    outline: 2px solid ${({
-  $primary
-}) => $primary};
+    outline: 2px solid ${({ $primary: e }) => e};
   }
-`;
-const PickerGrid = /*@__PURE__*/styled.div`
+`, Vn = i.div`
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 6px;
   padding: 4px 0;
-`;
-const PickerItem = /*@__PURE__*/styled.button`
+`, ln = i.button`
   border: none;
-  background: ${({
-  $active,
-  $primary
-}) => $active ? $primary : "transparent"};
-  color: ${({
-  $active
-}) => $active ? "#fff" : "#202124"};
+  background: ${({ $active: e, $primary: t }) => e ? t : "transparent"};
+  color: ${({ $active: e }) => e ? "#fff" : "#202124"};
   border-radius: 10px;
   padding: 8px 4px;
   font-size: 13px;
@@ -290,19 +202,13 @@ const PickerItem = /*@__PURE__*/styled.button`
     color 0.13s;
 
   &:hover {
-    background: ${({
-  $active,
-  $primaryDark
-}) => $active ? $primaryDark : "#f1f3f4"};
+    background: ${({ $active: e, $primaryDark: t }) => e ? t : "#f1f3f4"};
   }
 
   &:focus-visible {
-    outline: 2px solid ${({
-  $primary
-}) => $primary};
+    outline: 2px solid ${({ $primary: e }) => e};
   }
-`;
-const YearScroll = /*@__PURE__*/styled.div`
+`, ne = i.div`
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 6px;
@@ -310,25 +216,17 @@ const YearScroll = /*@__PURE__*/styled.div`
   overflow-y: auto;
   padding: 4px 0;
   scrollbar-width: thin;
-`;
-const Footer = /*@__PURE__*/styled.div`
+`, ee = i.div`
   display: flex;
   justify-content: flex-end;
   gap: 8px;
   margin-top: 16px;
   padding-top: 12px;
   border-top: 1px solid #f1f3f4;
-`;
-const ActionBtn = /*@__PURE__*/styled.button`
+`, cn = i.button`
   border: none;
-  background: ${({
-  $isPrimary,
-  $primary
-}) => $isPrimary ? $primary : "transparent"};
-  color: ${({
-  $isPrimary,
-  $primary
-}) => $isPrimary ? "#fff" : $primary};
+  background: ${({ $isPrimary: e, $primary: t }) => e ? t : "transparent"};
+  color: ${({ $isPrimary: e, $primary: t }) => e ? "#fff" : t};
   border-radius: 8px;
   padding: 7px 16px;
   font-size: 13px;
@@ -339,11 +237,7 @@ const ActionBtn = /*@__PURE__*/styled.button`
     opacity 0.14s;
 
   &:hover {
-    background: ${({
-  $isPrimary,
-  $primaryDark,
-  $primaryLight
-}) => $isPrimary ? $primaryDark : $primaryLight};
+    background: ${({ $isPrimary: e, $primaryDark: t, $primaryLight: c }) => e ? t : c};
   }
 
   &:disabled {
@@ -352,214 +246,250 @@ const ActionBtn = /*@__PURE__*/styled.button`
   }
 
   &:focus-visible {
-    outline: 2px solid ${({
-  $primary
-}) => $primary};
+    outline: 2px solid ${({ $primary: e }) => e};
   }
-`;
-const ChevronLeft = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" }) });
-const ChevronRight = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" }) });
-const PANEL = {
-  CALENDAR: "calendar",
-  MONTH: "month",
-  YEAR: "year"
-};
-const now = /* @__PURE__ */ new Date();
-const YEAR_RANGE_START = 1924;
-const YEAR_RANGE_END = /* @__PURE__ */ now.getFullYear() + 20;
-const YEARS = /* @__PURE__ */ Array.from({
-  length: YEAR_RANGE_END - YEAR_RANGE_START + 1
-}, (_, i) => YEAR_RANGE_START + i);
-const DatePicker = ({
-  theme = "blue",
-  mode: initialMode = MODE.SINGLE,
-  value,
-  rangeValue,
-  onChange,
-  minDate,
-  maxDate,
-  showModeToggle = true,
-  showFooter = true,
-  ...rest
+`, te = () => /* @__PURE__ */ o(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ o("polyline", { points: "15 18 9 12 15 6" })
+  }
+), oe = () => /* @__PURE__ */ o(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ o("polyline", { points: "9 18 15 12 9 6" })
+  }
+), d = { CALENDAR: "calendar", MONTH: "month", YEAR: "year" }, re = /* @__PURE__ */ new Date(), an = 1924, ie = re.getFullYear() + 20, se = Array.from(
+  { length: ie - an + 1 },
+  (e, t) => an + t
+), le = ({
+  theme: e = "blue",
+  mode: t = s.SINGLE,
+  value: c,
+  rangeValue: p,
+  onChange: l,
+  minDate: G,
+  maxDate: M,
+  showModeToggle: dn = !0,
+  showFooter: Y = !0,
+  ...pn
 }) => {
-  var _a, _b;
-  const palette = useMemo(() => {
-    var _a2;
-    return (_a2 = colors[theme]) != null ? _a2 : blue;
-  }, [theme]);
-  const $primary = palette.m500;
-  const $primaryDark = palette.m700;
-  const $primaryLight = palette.m100;
-  const themeProps = {
-    $primary,
-    $primaryDark,
-    $primaryLight
-  };
-  const today = /* @__PURE__ */ new Date();
-  const [mode, setMode] = useState(initialMode);
-  const [viewYear, setViewYear] = useState(today.getFullYear());
-  const [viewMonth, setViewMonth] = useState(today.getMonth());
-  const [panel, setPanel] = useState(PANEL.CALENDAR);
-  const [single, setSingle] = useState(value != null ? value : null);
-  const [rangeStart, setRangeStart] = useState((_a = rangeValue == null ? void 0 : rangeValue[0]) != null ? _a : null);
-  const [rangeEnd, setRangeEnd] = useState((_b = rangeValue == null ? void 0 : rangeValue[1]) != null ? _b : null);
-  const [hovered, setHovered] = useState(null);
-  const [picking, setPicking] = useState(false);
-  const grid = buildCalendarGrid(viewYear, viewMonth);
-  const isDisabled = useCallback((date) => {
-    if (!date) return true;
-    if (minDate && date < minDate) return true;
-    if (maxDate && date > maxDate) return true;
-    return false;
-  }, [minDate, maxDate]);
-  const prevMonth = () => {
-    if (viewMonth === 0) {
-      setViewMonth(11);
-      setViewYear((y) => y - 1);
-    } else setViewMonth((m) => m - 1);
-  };
-  const nextMonth = () => {
-    if (viewMonth === 11) {
-      setViewMonth(0);
-      setViewYear((y) => y + 1);
-    } else setViewMonth((m) => m + 1);
-  };
-  const handleDayClick = (date) => {
-    if (!date || isDisabled(date)) return;
-    if (mode === MODE.SINGLE) {
-      setSingle(date);
-      if (!showFooter) onChange == null ? void 0 : onChange(date);
-      return;
-    }
-    if (!picking || !rangeStart) {
-      setRangeStart(date);
-      setRangeEnd(null);
-      setPicking(true);
-    } else {
-      setRangeEnd(date);
-      setPicking(false);
-      if (!showFooter) onChange == null ? void 0 : onChange([date <= rangeStart ? date : rangeStart, date <= rangeStart ? rangeStart : date]);
+  var Q, X;
+  const I = Ln(() => {
+    var n;
+    return (n = Yn[e]) != null ? n : In;
+  }, [e]), f = I.m500, T = I.m700, A = I.m100, O = { $primary: f, $primaryDark: T, $primaryLight: A }, W = /* @__PURE__ */ new Date(), [a, fn] = m(t), [P, z] = m(W.getFullYear()), [v, $] = m(W.getMonth()), [y, R] = m(d.CALENDAR), [E, _] = m(c != null ? c : null), [r, j] = m((Q = p == null ? void 0 : p[0]) != null ? Q : null), [h, N] = m((X = p == null ? void 0 : p[1]) != null ? X : null), [S, w] = m(null), [D, L] = m(!1), un = On(P, v), U = Gn(
+    (n) => !!(!n || G && n < G || M && n > M),
+    [G, M]
+  ), xn = () => {
+    v === 0 ? ($(11), z((n) => n - 1)) : $((n) => n - 1);
+  }, gn = () => {
+    v === 11 ? ($(0), z((n) => n + 1)) : $((n) => n + 1);
+  }, bn = (n) => {
+    if (!(!n || U(n))) {
+      if (a === s.SINGLE) {
+        _(n), Y || l == null || l(n);
+        return;
+      }
+      !D || !r ? (j(n), N(null), L(!0)) : (N(n), L(!1), Y || l == null || l([
+        n <= r ? n : r,
+        n <= r ? r : n
+      ]));
     }
+  }, H = (n) => {
+    fn(n), _(null), j(null), N(null), L(!1), w(null);
   };
-  const switchMode = (m) => {
-    setMode(m);
-    setSingle(null);
-    setRangeStart(null);
-    setRangeEnd(null);
-    setPicking(false);
-    setHovered(null);
-  };
-  useEffect(() => {
-    switchMode(initialMode);
-  }, [initialMode]);
-  const handleApply = () => {
-    if (mode === MODE.SINGLE) {
-      onChange == null ? void 0 : onChange(single);
-    } else if (rangeStart && rangeEnd) {
-      const [from, to] = rangeStart <= rangeEnd ? [rangeStart, rangeEnd] : [rangeEnd, rangeStart];
-      onChange == null ? void 0 : onChange([from, to]);
+  Mn(() => {
+    H(t);
+  }, [t]);
+  const mn = () => {
+    if (a === s.SINGLE)
+      l == null || l(E);
+    else if (r && h) {
+      const [n, k] = r <= h ? [r, h] : [h, r];
+      l == null || l([n, k]);
     }
-  };
-  const handleClear = () => {
-    setSingle(null);
-    setRangeStart(null);
-    setRangeEnd(null);
-    setPicking(false);
-    setHovered(null);
-    onChange == null ? void 0 : onChange(mode === MODE.SINGLE ? null : [null, null]);
-  };
-  const effectiveEnd = picking && hovered ? hovered : rangeEnd;
-  const isStart = (d) => mode === MODE.RANGE && isRangeStart(d, rangeStart, effectiveEnd);
-  const isEnd = (d) => mode === MODE.RANGE && isRangeEnd(d, rangeStart, effectiveEnd);
-  const inRange = (d) => mode === MODE.RANGE && isInRange(d, rangeStart, effectiveEnd);
-  const isSelected = (d) => mode === MODE.SINGLE ? isSameDay(d, single) : isStart(d) || isEnd(d);
-  const displayStart = mode === MODE.SINGLE ? formatDate(single) : formatDate(rangeStart ? rangeStart <= (effectiveEnd != null ? effectiveEnd : rangeStart) ? rangeStart : effectiveEnd : null);
-  const displayEnd = mode === MODE.RANGE ? formatDate(effectiveEnd ? effectiveEnd >= rangeStart ? effectiveEnd : rangeStart : null) : null;
-  const applyDisabled = mode === MODE.SINGLE ? !single : !rangeStart || !rangeEnd;
-  const renderMonthPicker = () => /* @__PURE__ */ jsx(PickerGrid, { children: MONTHS.map((m, i) => /* @__PURE__ */ jsx(PickerItem, { $active: i === viewMonth, ...themeProps, onClick: () => {
-    setViewMonth(i);
-    setPanel(PANEL.CALENDAR);
-  }, children: m.slice(0, 3) }, m)) });
-  const renderYearPicker = () => /* @__PURE__ */ jsx(YearScroll, { children: YEARS.map((y) => /* @__PURE__ */ jsx(PickerItem, { $active: y === viewYear, ...themeProps, onClick: () => {
-    setViewYear(y);
-    setPanel(PANEL.CALENDAR);
-  }, children: y }, y)) });
-  const renderCalendar = () => /* @__PURE__ */ jsxs(Grid, { children: [
-    DAYS_SHORT.map((d) => /* @__PURE__ */ jsx(DayHeader, { children: d }, d)),
-    grid.map((date, idx) => {
-      const empty = !date;
-      const disabled = isDisabled(date);
-      const selected = !empty && isSelected(date);
-      const today_ = !empty && isToday(date);
-      const rangeStart_ = !empty && isStart(date);
-      const rangeEnd_ = !empty && isEnd(date);
-      const inRange_ = !empty && inRange(date);
-      const isHovered = !empty && hovered && isSameDay(date, hovered);
-      return /* @__PURE__ */ jsx(DayCell, { $inRange: inRange_ || rangeStart_ || rangeEnd_, $rangeStart: rangeStart_, $rangeEnd: rangeEnd_, $primaryLight, children: /* @__PURE__ */ jsx(DayBtn, { $empty: empty, $selected: selected, $today: today_, $hovered: isHovered && !selected, disabled, ...themeProps, onClick: () => handleDayClick(date), onMouseEnter: () => !empty && setHovered(date), onMouseLeave: () => setHovered(null), "aria-label": date ? date.toDateString() : void 0, "aria-pressed": selected, tabIndex: empty || disabled ? -1 : 0, children: date == null ? void 0 : date.getDate() }) }, idx);
+  }, hn = () => {
+    _(null), j(null), N(null), L(!1), w(null), l == null || l(a === s.SINGLE ? null : [null, null]);
+  }, u = D && S ? S : h, q = (n) => a === s.RANGE && zn(n, r, u), J = (n) => a === s.RANGE && _n(n, r, u), yn = (n) => a === s.RANGE && jn(n, r, u), kn = (n) => a === s.SINGLE ? tn(n, E) : q(n) || J(n), K = a === s.SINGLE ? B(E) : B(
+    r ? r <= (u != null ? u : r) ? r : u : null
+  ), vn = a === s.RANGE ? B(u ? u >= r ? u : r : null) : null, $n = a === s.SINGLE ? !E : !r || !h, En = () => /* @__PURE__ */ o(Vn, { children: en.map((n, k) => /* @__PURE__ */ o(
+    ln,
+    {
+      $active: k === v,
+      ...O,
+      onClick: () => {
+        $(k), R(d.CALENDAR);
+      },
+      children: n.slice(0, 3)
+    },
+    n
+  )) }), An = () => /* @__PURE__ */ o(ne, { children: se.map((n) => /* @__PURE__ */ o(
+    ln,
+    {
+      $active: n === P,
+      ...O,
+      onClick: () => {
+        z(n), R(d.CALENDAR);
+      },
+      children: n
+    },
+    n
+  )) }), Rn = () => /* @__PURE__ */ x(Kn, { children: [
+    Tn.map((n) => /* @__PURE__ */ o(Qn, { children: n }, n)),
+    un.map((n, k) => {
+      const b = !n, Z = U(n), C = !b && kn(n), Nn = !b && Pn(n), V = !b && q(n), nn = !b && J(n), Sn = !b && yn(n), wn = !b && S && tn(n, S);
+      return /* @__PURE__ */ o(
+        Xn,
+        {
+          $inRange: Sn || V || nn,
+          $rangeStart: V,
+          $rangeEnd: nn,
+          $primaryLight: A,
+          children: /* @__PURE__ */ o(
+            Zn,
+            {
+              $empty: b,
+              $selected: C,
+              $today: Nn,
+              $hovered: wn && !C,
+              disabled: Z,
+              ...O,
+              onClick: () => bn(n),
+              onMouseEnter: () => !b && w(n),
+              onMouseLeave: () => w(null),
+              "aria-label": n ? n.toDateString() : void 0,
+              "aria-pressed": C,
+              tabIndex: b || Z ? -1 : 0,
+              children: n == null ? void 0 : n.getDate()
+            }
+          )
+        },
+        k
+      );
     })
   ] });
-  return /* @__PURE__ */ jsxs(Wrapper, { ...rest, children: [
-    /* @__PURE__ */ jsx(SelectedDisplay, { children: mode === MODE.RANGE ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(DateChip, { $active: picking || !rangeStart && !rangeEnd, $primary, children: [
-        /* @__PURE__ */ jsx("span", { children: "From" }),
-        displayStart
+  return /* @__PURE__ */ x(Fn, { ...pn, children: [
+    /* @__PURE__ */ o(Wn, { children: a === s.RANGE ? /* @__PURE__ */ x(Dn, { children: [
+      /* @__PURE__ */ x(F, { $active: D || !r && !h, $primary: f, children: [
+        /* @__PURE__ */ o("span", { children: "From" }),
+        K
       ] }),
-      /* @__PURE__ */ jsx(RangeArrow, { children: "→" }),
-      /* @__PURE__ */ jsxs(DateChip, { $active: !picking && !!rangeEnd, $primary, children: [
-        /* @__PURE__ */ jsx("span", { children: "To" }),
-        displayEnd
+      /* @__PURE__ */ o(Un, { children: "→" }),
+      /* @__PURE__ */ x(F, { $active: !D && !!h, $primary: f, children: [
+        /* @__PURE__ */ o("span", { children: "To" }),
+        vn
       ] })
-    ] }) : /* @__PURE__ */ jsxs(DateChip, { $active: !!single, $primary, style: {
-      flex: "none",
-      width: "100%"
-    }, children: [
-      /* @__PURE__ */ jsx("span", { children: "Selected" }),
-      displayStart
+    ] }) : /* @__PURE__ */ x(F, { $active: !!E, $primary: f, style: { flex: "none", width: "100%" }, children: [
+      /* @__PURE__ */ o("span", { children: "Selected" }),
+      K
     ] }) }),
-    showModeToggle && /* @__PURE__ */ jsxs(ModeToggle, { children: [
-      /* @__PURE__ */ jsx(ModeBtn, { $active: mode === MODE.SINGLE, $primary, onClick: () => switchMode(MODE.SINGLE), children: "Single" }),
-      /* @__PURE__ */ jsx(ModeBtn, { $active: mode === MODE.RANGE, $primary, onClick: () => switchMode(MODE.RANGE), children: "Range" })
+    dn && /* @__PURE__ */ x(qn, { children: [
+      /* @__PURE__ */ o(
+        on,
+        {
+          $active: a === s.SINGLE,
+          $primary: f,
+          onClick: () => H(s.SINGLE),
+          children: "Single"
+        }
+      ),
+      /* @__PURE__ */ o(
+        on,
+        {
+          $active: a === s.RANGE,
+          $primary: f,
+          onClick: () => H(s.RANGE),
+          children: "Range"
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsxs(Nav, { children: [
-      /* @__PURE__ */ jsx(NavBtn, { $primary, onClick: prevMonth, "aria-label": "Previous month", children: /* @__PURE__ */ jsx(ChevronLeft, {}) }),
-      /* @__PURE__ */ jsxs("div", { style: {
-        display: "flex",
-        gap: 4
-      }, children: [
-        /* @__PURE__ */ jsx(MonthLabel, { $primary, onClick: () => setPanel(panel === PANEL.MONTH ? PANEL.CALENDAR : PANEL.MONTH), children: MONTHS[viewMonth] }),
-        /* @__PURE__ */ jsx(MonthLabel, { $primary, onClick: () => setPanel(panel === PANEL.YEAR ? PANEL.CALENDAR : PANEL.YEAR), children: viewYear })
+    /* @__PURE__ */ x(Jn, { children: [
+      /* @__PURE__ */ o(rn, { $primary: f, onClick: xn, "aria-label": "Previous month", children: /* @__PURE__ */ o(te, {}) }),
+      /* @__PURE__ */ x("div", { style: { display: "flex", gap: 4 }, children: [
+        /* @__PURE__ */ o(
+          sn,
+          {
+            $primary: f,
+            onClick: () => R(y === d.MONTH ? d.CALENDAR : d.MONTH),
+            children: en[v]
+          }
+        ),
+        /* @__PURE__ */ o(
+          sn,
+          {
+            $primary: f,
+            onClick: () => R(y === d.YEAR ? d.CALENDAR : d.YEAR),
+            children: P
+          }
+        )
       ] }),
-      /* @__PURE__ */ jsx(NavBtn, { $primary, onClick: nextMonth, "aria-label": "Next month", children: /* @__PURE__ */ jsx(ChevronRight, {}) })
+      /* @__PURE__ */ o(rn, { $primary: f, onClick: gn, "aria-label": "Next month", children: /* @__PURE__ */ o(oe, {}) })
     ] }),
-    panel === PANEL.CALENDAR && renderCalendar(),
-    panel === PANEL.MONTH && renderMonthPicker(),
-    panel === PANEL.YEAR && renderYearPicker(),
-    showFooter && panel === PANEL.CALENDAR && /* @__PURE__ */ jsxs(Footer, { children: [
-      /* @__PURE__ */ jsx(ActionBtn, { $primary, $primaryDark, $primaryLight, onClick: handleClear, children: "Clear" }),
-      /* @__PURE__ */ jsx(ActionBtn, { $isPrimary: true, $primary, $primaryDark, $primaryLight, disabled: applyDisabled, onClick: handleApply, children: "Apply" })
+    y === d.CALENDAR && Rn(),
+    y === d.MONTH && En(),
+    y === d.YEAR && An(),
+    Y && y === d.CALENDAR && /* @__PURE__ */ x(ee, { children: [
+      /* @__PURE__ */ o(
+        cn,
+        {
+          $primary: f,
+          $primaryDark: T,
+          $primaryLight: A,
+          onClick: hn,
+          children: "Clear"
+        }
+      ),
+      /* @__PURE__ */ o(
+        cn,
+        {
+          $isPrimary: !0,
+          $primary: f,
+          $primaryDark: T,
+          $primaryLight: A,
+          disabled: $n,
+          onClick: mn,
+          children: "Apply"
+        }
+      )
     ] })
   ] });
 };
-DatePicker.propTypes = {
+le.propTypes = {
   /** Color theme key from the meticulous-ui color map */
-  theme: PropTypes.string,
+  theme: g.string,
   /** Initial selection mode. Can be switched via the built-in toggle unless `showModeToggle` is false. */
-  mode: /* @__PURE__ */ PropTypes.oneOf(["single", "range"]),
+  mode: g.oneOf(["single", "range"]),
   /** Controlled selected date for single mode */
-  value: /* @__PURE__ */ PropTypes.instanceOf(Date),
+  value: g.instanceOf(Date),
   /** Controlled selected range for range mode — `[start, end]` */
-  rangeValue: /* @__PURE__ */ PropTypes.arrayOf(/* @__PURE__ */ PropTypes.instanceOf(Date)),
+  rangeValue: g.arrayOf(g.instanceOf(Date)),
   /** Called with a `Date` in single mode or `[Date, Date]` tuple in range mode */
-  onChange: PropTypes.func,
+  onChange: g.func,
   /** Dates before this value are disabled */
-  minDate: /* @__PURE__ */ PropTypes.instanceOf(Date),
+  minDate: g.instanceOf(Date),
   /** Dates after this value are disabled */
-  maxDate: /* @__PURE__ */ PropTypes.instanceOf(Date),
+  maxDate: g.instanceOf(Date),
   /** Shows or hides the Single / Range mode toggle pill */
-  showModeToggle: PropTypes.bool,
+  showModeToggle: g.bool,
   /** Shows or hides the Clear / Apply footer. When false, `onChange` fires immediately on each click. */
-  showFooter: PropTypes.bool
+  showFooter: g.bool
 };
 export {
-  DatePicker as default
+  le as default
 };