meticulous-ui 3.7.11 → 3.7.13

package/cjs/components/DatePicker/DatePicker.cjs

@@ -1,21 +1,7 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const PropTypes = require("prop-types");
-const colorMap = require("../../colors/colorMap.cjs");
-const blue = require("../../colors/blue.cjs");
-const constants = require("./constants.cjs");
-const utils = require("./utils.cjs");
-const styled = require("styled-components");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const PropTypes__default = /* @__PURE__ */ _interopDefault(PropTypes);
-const styled__default = /* @__PURE__ */ _interopDefault(styled);
-const fadeIn = /*@__PURE__*/styled.keyframes`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),f=require("react"),Me=require("prop-types"),Re=require("../../colors/colorMap.cjs"),Ne=require("../../colors/blue.cjs"),s=require("./constants.cjs"),g=require("./utils.cjs"),B=require("styled-components"),le=t=>t&&t.__esModule?t:{default:t},b=le(Me),i=le(B),we=B.keyframes`
   from { opacity: 0; transform: translateY(6px); }
   to   { opacity: 1; transform: translateY(0); }
-`;
-const Wrapper = styled__default.default.div`
+`,Oe=i.default.div`
   display: inline-flex;
   flex-direction: column;
   background: #ffffff;
@@ -26,24 +12,17 @@ const Wrapper = styled__default.default.div`
   padding: 20px;
   width: 320px;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  animation: ${fadeIn} 0.22s ease;
+  animation: ${we} 0.22s ease;
   user-select: none;
-`;
-const SelectedDisplay = styled__default.default.div`
+`,Le=i.default.div`
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 16px;
-`;
-const DateChip = styled__default.default.div`
+`,C=i.default.div`
   flex: 1;
-  background: ${({
-  $active,
-  $primary
-}) => $active ? $primary : "#f1f3f4"};
-  color: ${({
-  $active
-}) => $active ? "#fff" : "#5f6368"};
+  background: ${({$active:t,$primary:r})=>t?r:"#f1f3f4"};
+  color: ${({$active:t})=>t?"#fff":"#5f6368"};
   border-radius: 12px;
   padding: 10px 14px;
   font-size: 13px;
@@ -61,29 +40,21 @@ const DateChip = styled__default.default.div`
     opacity: 0.7;
     margin-bottom: 2px;
   }
-`;
-const RangeArrow = styled__default.default.div`
+`,Ge=i.default.div`
   color: #bdc1c6;
   font-size: 16px;
   flex-shrink: 0;
-`;
-const ModeToggle = styled__default.default.div`
+`,_e=i.default.div`
   display: flex;
   background: #f1f3f4;
   border-radius: 10px;
   padding: 3px;
   margin-bottom: 16px;
-`;
-const ModeBtn = styled__default.default.button`
+`,te=i.default.button`
   flex: 1;
   border: none;
-  background: ${({
-  $active
-}) => $active ? "#fff" : "transparent"};
-  color: ${({
-  $active,
-  $primary
-}) => $active ? $primary : "#5f6368"};
+  background: ${({$active:t})=>t?"#fff":"transparent"};
+  color: ${({$active:t,$primary:r})=>t?r:"#5f6368"};
   border-radius: 8px;
   padding: 6px 0;
   font-size: 12px;
@@ -92,24 +63,18 @@ const ModeBtn = styled__default.default.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:t})=>t?"0 1px 4px rgba(0,0,0,0.1)":"none"};
 
   &:focus-visible {
-    outline: 2px solid ${({
-  $primary
-}) => $primary};
+    outline: 2px solid ${({$primary:t})=>t};
     outline-offset: 2px;
   }
-`;
-const Nav = styled__default.default.div`
+`,Te=i.default.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 12px;
-`;
-const NavBtn = styled__default.default.button`
+`,ne=i.default.button`
   background: none;
   border: none;
   cursor: pointer;
@@ -126,18 +91,13 @@ const NavBtn = styled__default.default.button`
 
   &:hover {
     background: #f1f3f4;
-    color: ${({
-  $primary
-}) => $primary};
+    color: ${({$primary:t})=>t};
   }
 
   &:focus-visible {
-    outline: 2px solid ${({
-  $primary
-}) => $primary};
+    outline: 2px solid ${({$primary:t})=>t};
   }
-`;
-const MonthLabel = styled__default.default.button`
+`,re=i.default.button`
   background: none;
   border: none;
   cursor: pointer;
@@ -153,17 +113,13 @@ const MonthLabel = styled__default.default.button`
   }
 
   &:focus-visible {
-    outline: 2px solid ${({
-  $primary
-}) => $primary};
+    outline: 2px solid ${({$primary:t})=>t};
   }
-`;
-const Grid = styled__default.default.div`
+`,Ye=i.default.div`
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 0;
-`;
-const DayHeader = styled__default.default.div`
+`,Ie=i.default.div`
   text-align: center;
   font-size: 11px;
   font-weight: 600;
@@ -171,8 +127,7 @@ const DayHeader = styled__default.default.div`
   padding: 4px 0 8px;
   text-transform: uppercase;
   letter-spacing: 0.4px;
-`;
-const DayCell = styled__default.default.div`
+`,Pe=i.default.div`
   position: relative;
   display: flex;
   align-items: center;
@@ -183,22 +138,11 @@ const DayCell = styled__default.default.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:t,$primaryLight:r})=>t?r:"transparent"};
+    border-radius: ${({$rangeStart:t,$rangeEnd:r})=>t?"50% 0 0 50%":r?"0 50% 50% 0":"0"};
     pointer-events: none;
   }
-`;
-const DayBtn = styled__default.default.button`
+`,ze=i.default.button`
   position: relative;
   z-index: 1;
   width: 32px;
@@ -210,81 +154,36 @@ const DayBtn = styled__default.default.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:t,disabled:r})=>t||r?"default":"pointer"};
+  background: ${({$selected:t,$hovered:r,$primary:a,$primaryLight:u})=>t?a:r?u:"transparent"};
+  color: ${({$selected:t,$today:r,disabled:a,$primary:u})=>t?"#fff":a?"#dadce0":r?u:"#202124"};
+  outline: ${({$today:t,$selected:r,$primary:a})=>t&&!r?`2px solid ${a}`:"none"};
   outline-offset: -2px;
   transition:
     background 0.12s,
     color 0.12s;
-  pointer-events: ${({
-  $empty,
-  disabled
-}) => $empty || disabled ? "none" : "auto"};
+  pointer-events: ${({$empty:t,disabled:r})=>t||r?"none":"auto"};
 
-  ${({
-  $empty
-}) => $empty && /*@__PURE__*/styled.css`
+  ${({$empty:t})=>t&&B.css`
       visibility: hidden;
     `}
 
   &:hover {
-    background: ${({
-  $selected,
-  $primary,
-  $primaryDark,
-  $primaryLight
-}) => $selected ? $primaryDark : $primaryLight};
+    background: ${({$selected:t,$primary:r,$primaryDark:a,$primaryLight:u})=>t?a:u};
   }
 
   &:focus-visible {
-    outline: 2px solid ${({
-  $primary
-}) => $primary};
+    outline: 2px solid ${({$primary:t})=>t};
   }
-`;
-const PickerGrid = styled__default.default.div`
+`,He=i.default.div`
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 6px;
   padding: 4px 0;
-`;
-const PickerItem = styled__default.default.button`
+`,oe=i.default.button`
   border: none;
-  background: ${({
-  $active,
-  $primary
-}) => $active ? $primary : "transparent"};
-  color: ${({
-  $active
-}) => $active ? "#fff" : "#202124"};
+  background: ${({$active:t,$primary:r})=>t?r:"transparent"};
+  color: ${({$active:t})=>t?"#fff":"#202124"};
   border-radius: 10px;
   padding: 8px 4px;
   font-size: 13px;
@@ -295,19 +194,13 @@ const PickerItem = styled__default.default.button`
     color 0.13s;
 
   &:hover {
-    background: ${({
-  $active,
-  $primaryDark
-}) => $active ? $primaryDark : "#f1f3f4"};
+    background: ${({$active:t,$primaryDark:r})=>t?r:"#f1f3f4"};
   }
 
   &:focus-visible {
-    outline: 2px solid ${({
-  $primary
-}) => $primary};
+    outline: 2px solid ${({$primary:t})=>t};
   }
-`;
-const YearScroll = styled__default.default.div`
+`,qe=i.default.div`
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 6px;
@@ -315,25 +208,17 @@ const YearScroll = styled__default.default.div`
   overflow-y: auto;
   padding: 4px 0;
   scrollbar-width: thin;
-`;
-const Footer = styled__default.default.div`
+`,Ce=i.default.div`
   display: flex;
   justify-content: flex-end;
   gap: 8px;
   margin-top: 16px;
   padding-top: 12px;
   border-top: 1px solid #f1f3f4;
-`;
-const ActionBtn = styled__default.default.button`
+`,se=i.default.button`
   border: none;
-  background: ${({
-  $isPrimary,
-  $primary
-}) => $isPrimary ? $primary : "transparent"};
-  color: ${({
-  $isPrimary,
-  $primary
-}) => $isPrimary ? "#fff" : $primary};
+  background: ${({$isPrimary:t,$primary:r})=>t?r:"transparent"};
+  color: ${({$isPrimary:t,$primary:r})=>t?"#fff":r};
   border-radius: 8px;
   padding: 7px 16px;
   font-size: 13px;
@@ -344,11 +229,7 @@ const ActionBtn = styled__default.default.button`
     opacity 0.14s;
 
   &:hover {
-    background: ${({
-  $isPrimary,
-  $primaryDark,
-  $primaryLight
-}) => $isPrimary ? $primaryDark : $primaryLight};
+    background: ${({$isPrimary:t,$primaryDark:r,$primaryLight:a})=>t?r:a};
   }
 
   &:disabled {
@@ -357,212 +238,6 @@ const ActionBtn = styled__default.default.button`
   }
 
   &:focus-visible {
-    outline: 2px solid ${({
-  $primary
-}) => $primary};
+    outline: 2px solid ${({$primary:t})=>t};
   }
-`;
-const ChevronLeft = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "15 18 9 12 15 6" }) });
-const ChevronRight = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.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 = constants.MODE.SINGLE,
-  value,
-  rangeValue,
-  onChange,
-  minDate,
-  maxDate,
-  showModeToggle = true,
-  showFooter = true,
-  ...rest
-}) => {
-  var _a, _b;
-  const palette = react.useMemo(() => {
-    var _a2;
-    return (_a2 = colorMap.default[theme]) != null ? _a2 : blue.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] = react.useState(initialMode);
-  const [viewYear, setViewYear] = react.useState(today.getFullYear());
-  const [viewMonth, setViewMonth] = react.useState(today.getMonth());
-  const [panel, setPanel] = react.useState(PANEL.CALENDAR);
-  const [single, setSingle] = react.useState(value != null ? value : null);
-  const [rangeStart, setRangeStart] = react.useState((_a = rangeValue == null ? void 0 : rangeValue[0]) != null ? _a : null);
-  const [rangeEnd, setRangeEnd] = react.useState((_b = rangeValue == null ? void 0 : rangeValue[1]) != null ? _b : null);
-  const [hovered, setHovered] = react.useState(null);
-  const [picking, setPicking] = react.useState(false);
-  const grid = utils.buildCalendarGrid(viewYear, viewMonth);
-  const isDisabled = react.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 === constants.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]);
-    }
-  };
-  const switchMode = (m) => {
-    setMode(m);
-    setSingle(null);
-    setRangeStart(null);
-    setRangeEnd(null);
-    setPicking(false);
-    setHovered(null);
-  };
-  react.useEffect(() => {
-    switchMode(initialMode);
-  }, [initialMode]);
-  const handleApply = () => {
-    if (mode === constants.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]);
-    }
-  };
-  const handleClear = () => {
-    setSingle(null);
-    setRangeStart(null);
-    setRangeEnd(null);
-    setPicking(false);
-    setHovered(null);
-    onChange == null ? void 0 : onChange(mode === constants.MODE.SINGLE ? null : [null, null]);
-  };
-  const effectiveEnd = picking && hovered ? hovered : rangeEnd;
-  const isStart = (d) => mode === constants.MODE.RANGE && utils.isRangeStart(d, rangeStart, effectiveEnd);
-  const isEnd = (d) => mode === constants.MODE.RANGE && utils.isRangeEnd(d, rangeStart, effectiveEnd);
-  const inRange = (d) => mode === constants.MODE.RANGE && utils.isInRange(d, rangeStart, effectiveEnd);
-  const isSelected = (d) => mode === constants.MODE.SINGLE ? utils.isSameDay(d, single) : isStart(d) || isEnd(d);
-  const displayStart = mode === constants.MODE.SINGLE ? utils.formatDate(single) : utils.formatDate(rangeStart ? rangeStart <= (effectiveEnd != null ? effectiveEnd : rangeStart) ? rangeStart : effectiveEnd : null);
-  const displayEnd = mode === constants.MODE.RANGE ? utils.formatDate(effectiveEnd ? effectiveEnd >= rangeStart ? effectiveEnd : rangeStart : null) : null;
-  const applyDisabled = mode === constants.MODE.SINGLE ? !single : !rangeStart || !rangeEnd;
-  const renderMonthPicker = () => /* @__PURE__ */ jsxRuntime.jsx(PickerGrid, { children: constants.MONTHS.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx(PickerItem, { $active: i === viewMonth, ...themeProps, onClick: () => {
-    setViewMonth(i);
-    setPanel(PANEL.CALENDAR);
-  }, children: m.slice(0, 3) }, m)) });
-  const renderYearPicker = () => /* @__PURE__ */ jsxRuntime.jsx(YearScroll, { children: YEARS.map((y) => /* @__PURE__ */ jsxRuntime.jsx(PickerItem, { $active: y === viewYear, ...themeProps, onClick: () => {
-    setViewYear(y);
-    setPanel(PANEL.CALENDAR);
-  }, children: y }, y)) });
-  const renderCalendar = () => /* @__PURE__ */ jsxRuntime.jsxs(Grid, { children: [
-    constants.DAYS_SHORT.map((d) => /* @__PURE__ */ jsxRuntime.jsx(DayHeader, { children: d }, d)),
-    grid.map((date, idx) => {
-      const empty = !date;
-      const disabled = isDisabled(date);
-      const selected = !empty && isSelected(date);
-      const today_ = !empty && utils.isToday(date);
-      const rangeStart_ = !empty && isStart(date);
-      const rangeEnd_ = !empty && isEnd(date);
-      const inRange_ = !empty && inRange(date);
-      const isHovered = !empty && hovered && utils.isSameDay(date, hovered);
-      return /* @__PURE__ */ jsxRuntime.jsx(DayCell, { $inRange: inRange_ || rangeStart_ || rangeEnd_, $rangeStart: rangeStart_, $rangeEnd: rangeEnd_, $primaryLight, children: /* @__PURE__ */ jsxRuntime.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);
-    })
-  ] });
-  return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { ...rest, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SelectedDisplay, { children: mode === constants.MODE.RANGE ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(DateChip, { $active: picking || !rangeStart && !rangeEnd, $primary, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "From" }),
-        displayStart
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(RangeArrow, { children: "→" }),
-      /* @__PURE__ */ jsxRuntime.jsxs(DateChip, { $active: !picking && !!rangeEnd, $primary, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "To" }),
-        displayEnd
-      ] })
-    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(DateChip, { $active: !!single, $primary, style: {
-      flex: "none",
-      width: "100%"
-    }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Selected" }),
-      displayStart
-    ] }) }),
-    showModeToggle && /* @__PURE__ */ jsxRuntime.jsxs(ModeToggle, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ModeBtn, { $active: mode === constants.MODE.SINGLE, $primary, onClick: () => switchMode(constants.MODE.SINGLE), children: "Single" }),
-      /* @__PURE__ */ jsxRuntime.jsx(ModeBtn, { $active: mode === constants.MODE.RANGE, $primary, onClick: () => switchMode(constants.MODE.RANGE), children: "Range" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Nav, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(NavBtn, { $primary, onClick: prevMonth, "aria-label": "Previous month", children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft, {}) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
-        display: "flex",
-        gap: 4
-      }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(MonthLabel, { $primary, onClick: () => setPanel(panel === PANEL.MONTH ? PANEL.CALENDAR : PANEL.MONTH), children: constants.MONTHS[viewMonth] }),
-        /* @__PURE__ */ jsxRuntime.jsx(MonthLabel, { $primary, onClick: () => setPanel(panel === PANEL.YEAR ? PANEL.CALENDAR : PANEL.YEAR), children: viewYear })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(NavBtn, { $primary, onClick: nextMonth, "aria-label": "Next month", children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, {}) })
-    ] }),
-    panel === PANEL.CALENDAR && renderCalendar(),
-    panel === PANEL.MONTH && renderMonthPicker(),
-    panel === PANEL.YEAR && renderYearPicker(),
-    showFooter && panel === PANEL.CALENDAR && /* @__PURE__ */ jsxRuntime.jsxs(Footer, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ActionBtn, { $primary, $primaryDark, $primaryLight, onClick: handleClear, children: "Clear" }),
-      /* @__PURE__ */ jsxRuntime.jsx(ActionBtn, { $isPrimary: true, $primary, $primaryDark, $primaryLight, disabled: applyDisabled, onClick: handleApply, children: "Apply" })
-    ] })
-  ] });
-};
-DatePicker.propTypes = {
-  /** Color theme key from the meticulous-ui color map */
-  theme: PropTypes__default.default.string,
-  /** Initial selection mode. Can be switched via the built-in toggle unless `showModeToggle` is false. */
-  mode: /* @__PURE__ */ PropTypes__default.default.oneOf(["single", "range"]),
-  /** Controlled selected date for single mode */
-  value: /* @__PURE__ */ PropTypes__default.default.instanceOf(Date),
-  /** Controlled selected range for range mode — `[start, end]` */
-  rangeValue: /* @__PURE__ */ PropTypes__default.default.arrayOf(/* @__PURE__ */ PropTypes__default.default.instanceOf(Date)),
-  /** Called with a `Date` in single mode or `[Date, Date]` tuple in range mode */
-  onChange: PropTypes__default.default.func,
-  /** Dates before this value are disabled */
-  minDate: /* @__PURE__ */ PropTypes__default.default.instanceOf(Date),
-  /** Dates after this value are disabled */
-  maxDate: /* @__PURE__ */ PropTypes__default.default.instanceOf(Date),
-  /** Shows or hides the Single / Range mode toggle pill */
-  showModeToggle: PropTypes__default.default.bool,
-  /** Shows or hides the Clear / Apply footer. When false, `onChange` fires immediately on each click. */
-  showFooter: PropTypes__default.default.bool
-};
-exports.default = DatePicker;
+`,Be=()=>n.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:n.jsx("polyline",{points:"15 18 9 12 15 6"})}),Fe=()=>n.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:n.jsx("polyline",{points:"9 18 15 12 9 6"})}),d={CALENDAR:"calendar",MONTH:"month",YEAR:"year"},We=new Date,ie=1924,Ue=We.getFullYear()+20,Je=Array.from({length:Ue-ie+1},(t,r)=>ie+r),ae=({theme:t="blue",mode:r=s.MODE.SINGLE,value:a,rangeValue:u,onChange:l,minDate:w,maxDate:O,showModeToggle:ce=!0,showFooter:L=!0,...de})=>{var Q,X;const G=f.useMemo(()=>{var e;return(e=Re.default[t])!=null?e:Ne.blue},[t]),p=G.m500,_=G.m700,$=G.m100,T={$primary:p,$primaryDark:_,$primaryLight:$},F=new Date,[c,ue]=f.useState(r),[Y,I]=f.useState(F.getFullYear()),[k,v]=f.useState(F.getMonth()),[y,j]=f.useState(d.CALENDAR),[D,P]=f.useState(a!=null?a:null),[o,z]=f.useState((Q=u==null?void 0:u[0])!=null?Q:null),[m,S]=f.useState((X=u==null?void 0:u[1])!=null?X:null),[A,M]=f.useState(null),[R,N]=f.useState(!1),pe=g.buildCalendarGrid(Y,k),W=f.useCallback(e=>!!(!e||w&&e<w||O&&e>O),[w,O]),fe=()=>{k===0?(v(11),I(e=>e-1)):v(e=>e-1)},xe=()=>{k===11?(v(0),I(e=>e+1)):v(e=>e+1)},ge=e=>{if(!(!e||W(e))){if(c===s.MODE.SINGLE){P(e),L||l==null||l(e);return}!R||!o?(z(e),S(null),N(!0)):(S(e),N(!1),L||l==null||l([e<=o?e:o,e<=o?o:e]))}},H=e=>{ue(e),P(null),z(null),S(null),N(!1),M(null)};f.useEffect(()=>{H(r)},[r]);const be=()=>{if(c===s.MODE.SINGLE)l==null||l(D);else if(o&&m){const[e,E]=o<=m?[o,m]:[m,o];l==null||l([e,E])}},he=()=>{P(null),z(null),S(null),N(!1),M(null),l==null||l(c===s.MODE.SINGLE?null:[null,null])},x=R&&A?A:m,U=e=>c===s.MODE.RANGE&&g.isRangeStart(e,o,x),J=e=>c===s.MODE.RANGE&&g.isRangeEnd(e,o,x),me=e=>c===s.MODE.RANGE&&g.isInRange(e,o,x),ye=e=>c===s.MODE.SINGLE?g.isSameDay(e,D):U(e)||J(e),K=c===s.MODE.SINGLE?g.formatDate(D):g.formatDate(o?o<=(x!=null?x:o)?o:x:null),Ee=c===s.MODE.RANGE?g.formatDate(x?x>=o?x:o:null):null,ke=c===s.MODE.SINGLE?!D:!o||!m,ve=()=>n.jsx(He,{children:s.MONTHS.map((e,E)=>n.jsx(oe,{$active:E===k,...T,onClick:()=>{v(E),j(d.CALENDAR)},children:e.slice(0,3)},e))}),De=()=>n.jsx(qe,{children:Je.map(e=>n.jsx(oe,{$active:e===Y,...T,onClick:()=>{I(e),j(d.CALENDAR)},children:e},e))}),$e=()=>n.jsxs(Ye,{children:[s.DAYS_SHORT.map(e=>n.jsx(Ie,{children:e},e)),pe.map((e,E)=>{const h=!e,Z=W(e),q=!h&&ye(e),je=!h&&g.isToday(e),V=!h&&U(e),ee=!h&&J(e),Se=!h&&me(e),Ae=!h&&A&&g.isSameDay(e,A);return n.jsx(Pe,{$inRange:Se||V||ee,$rangeStart:V,$rangeEnd:ee,$primaryLight:$,children:n.jsx(ze,{$empty:h,$selected:q,$today:je,$hovered:Ae&&!q,disabled:Z,...T,onClick:()=>ge(e),onMouseEnter:()=>!h&&M(e),onMouseLeave:()=>M(null),"aria-label":e?e.toDateString():void 0,"aria-pressed":q,tabIndex:h||Z?-1:0,children:e==null?void 0:e.getDate()})},E)})]});return n.jsxs(Oe,{...de,children:[n.jsx(Le,{children:c===s.MODE.RANGE?n.jsxs(n.Fragment,{children:[n.jsxs(C,{$active:R||!o&&!m,$primary:p,children:[n.jsx("span",{children:"From"}),K]}),n.jsx(Ge,{children:"→"}),n.jsxs(C,{$active:!R&&!!m,$primary:p,children:[n.jsx("span",{children:"To"}),Ee]})]}):n.jsxs(C,{$active:!!D,$primary:p,style:{flex:"none",width:"100%"},children:[n.jsx("span",{children:"Selected"}),K]})}),ce&&n.jsxs(_e,{children:[n.jsx(te,{$active:c===s.MODE.SINGLE,$primary:p,onClick:()=>H(s.MODE.SINGLE),children:"Single"}),n.jsx(te,{$active:c===s.MODE.RANGE,$primary:p,onClick:()=>H(s.MODE.RANGE),children:"Range"})]}),n.jsxs(Te,{children:[n.jsx(ne,{$primary:p,onClick:fe,"aria-label":"Previous month",children:n.jsx(Be,{})}),n.jsxs("div",{style:{display:"flex",gap:4},children:[n.jsx(re,{$primary:p,onClick:()=>j(y===d.MONTH?d.CALENDAR:d.MONTH),children:s.MONTHS[k]}),n.jsx(re,{$primary:p,onClick:()=>j(y===d.YEAR?d.CALENDAR:d.YEAR),children:Y})]}),n.jsx(ne,{$primary:p,onClick:xe,"aria-label":"Next month",children:n.jsx(Fe,{})})]}),y===d.CALENDAR&&$e(),y===d.MONTH&&ve(),y===d.YEAR&&De(),L&&y===d.CALENDAR&&n.jsxs(Ce,{children:[n.jsx(se,{$primary:p,$primaryDark:_,$primaryLight:$,onClick:he,children:"Clear"}),n.jsx(se,{$isPrimary:!0,$primary:p,$primaryDark:_,$primaryLight:$,disabled:ke,onClick:be,children:"Apply"})]})]})};ae.propTypes={theme:b.default.string,mode:b.default.oneOf(["single","range"]),value:b.default.instanceOf(Date),rangeValue:b.default.arrayOf(b.default.instanceOf(Date)),onChange:b.default.func,minDate:b.default.instanceOf(Date),maxDate:b.default.instanceOf(Date),showModeToggle:b.default.bool,showFooter:b.default.bool};exports.default=ae;

package/cjs/components/DatePicker/constants.cjs

@@ -1,11 +1 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-const DAYS_SHORT = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-const MODE = {
-  SINGLE: "single",
-  RANGE: "range"
-};
-exports.DAYS_SHORT = DAYS_SHORT;
-exports.MODE = MODE;
-exports.MONTHS = MONTHS;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=["January","February","March","April","May","June","July","August","September","October","November","December"],r=["Su","Mo","Tu","We","Th","Fr","Sa"],t={SINGLE:"single",RANGE:"range"};exports.DAYS_SHORT=r;exports.MODE=t;exports.MONTHS=e;

package/cjs/components/DatePicker/index.cjs

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const DatePicker = require("./DatePicker.cjs");
-exports.default = DatePicker.default;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./DatePicker.cjs");exports.default=e.default;

package/cjs/components/DatePicker/utils.cjs

@@ -1,44 +1 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
-const getFirstDayOfMonth = (year, month) => new Date(year, month, 1).getDay();
-const isSameDay = (a, b) => a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-const isToday = (date) => isSameDay(date, /* @__PURE__ */ new Date());
-const isInRange = (date, start, end) => {
-  if (!start || !end) return false;
-  const [from, to] = start <= end ? [start, end] : [end, start];
-  return date > from && date < to;
-};
-const isRangeStart = (date, start, end) => {
-  if (!start || !end) return false;
-  return isSameDay(date, start <= end ? start : end);
-};
-const isRangeEnd = (date, start, end) => {
-  if (!start || !end) return false;
-  return isSameDay(date, start <= end ? end : start);
-};
-const formatDate = (date) => {
-  if (!date) return "—";
-  return date.toLocaleDateString("en-US", {
-    month: "short",
-    day: "numeric",
-    year: "numeric"
-  });
-};
-const buildCalendarGrid = (year, month) => {
-  const totalDays = getDaysInMonth(year, month);
-  const firstDay = getFirstDayOfMonth(year, month);
-  const grid = [];
-  for (let i = 0; i < firstDay; i++) grid.push(null);
-  for (let d = 1; d <= totalDays; d++) grid.push(new Date(year, month, d));
-  return grid;
-};
-exports.buildCalendarGrid = buildCalendarGrid;
-exports.formatDate = formatDate;
-exports.getDaysInMonth = getDaysInMonth;
-exports.getFirstDayOfMonth = getFirstDayOfMonth;
-exports.isInRange = isInRange;
-exports.isRangeEnd = isRangeEnd;
-exports.isRangeStart = isRangeStart;
-exports.isSameDay = isSameDay;
-exports.isToday = isToday;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=(e,t)=>new Date(e,t+1,0).getDate(),g=(e,t)=>new Date(e,t,1).getDay(),o=(e,t)=>e&&t&&e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate(),u=e=>o(e,new Date),l=(e,t,n)=>{if(!t||!n)return!1;const[s,a]=t<=n?[t,n]:[n,t];return e>s&&e<a},D=(e,t,n)=>!t||!n?!1:o(e,t<=n?t:n),c=(e,t,n)=>!t||!n?!1:o(e,t<=n?n:t),f=e=>e?e.toLocaleDateString("en-US",{month:"short",day:"numeric",year:"numeric"}):"—",y=(e,t)=>{const n=i(e,t),s=g(e,t),a=[];for(let r=0;r<s;r++)a.push(null);for(let r=1;r<=n;r++)a.push(new Date(e,t,r));return a};exports.buildCalendarGrid=y;exports.formatDate=f;exports.getDaysInMonth=i;exports.getFirstDayOfMonth=g;exports.isInRange=l;exports.isRangeEnd=c;exports.isRangeStart=D;exports.isSameDay=o;exports.isToday=u;