@takeoff-ui/react-spar 0.4.0 → 0.5.0

package/dist/index.cjs

@@ -8,6 +8,10 @@ var chevronBottom = require('@takeoff-icons/react/chevron-bottom');
 var chevronTop = require('@takeoff-icons/react/chevron-top');
 var close = require('@takeoff-icons/react/close');
 var chevronRight = require('@takeoff-icons/react/chevron-right');
+var chevronLeft = require('@takeoff-icons/react/chevron-left');
+var doubleChevronLeft = require('@takeoff-icons/react/double-chevron-left');
+var doubleChevronRight = require('@takeoff-icons/react/double-chevron-right');
+var reactDayPicker = require('react-day-picker');
 var check = require('@takeoff-icons/react/check');
 var remove = require('@takeoff-icons/react/remove');
 var info = require('@takeoff-icons/react/info');
@@ -19,9 +23,6 @@ var arrowBottom = require('@takeoff-icons/react/arrow-bottom');
 var arrowTop = require('@takeoff-icons/react/arrow-top');
 var swap = require('@takeoff-icons/react/swap');
 var search = require('@takeoff-icons/react/search');
-var chevronLeft = require('@takeoff-icons/react/chevron-left');
-var doubleChevronLeft = require('@takeoff-icons/react/double-chevron-left');
-var doubleChevronRight = require('@takeoff-icons/react/double-chevron-right');
 var arrowDownload = require('@takeoff-icons/react/arrow-download');
 var checkCircle = require('@takeoff-icons/react/check-circle');
 var closeCircle = require('@takeoff-icons/react/close-circle');
@@ -258,6 +259,78 @@ function useControllableState(controlledValue, defaultValue, onChange) {
   );
   return [value, setValue, isControlled];
 }
+var pad = (value) => String(value).padStart(2, "0");
+var toISODate = (value) => `${value.getFullYear()}-${pad(value.getMonth() + 1)}-${pad(value.getDate())}`;
+var fromISODate = (iso) => {
+  const [year, month, day] = iso.split("-").map(Number);
+  if (!year || !month || !day) return void 0;
+  return new Date(year, month - 1, day);
+};
+function useDatePicker({ min, max, defaultValue, delimiter = "/", format, onValueChange } = {}) {
+  const formatDate = react.useMemo(
+    () => format ?? ((value2) => `${pad(value2.getDate())}${delimiter}${pad(value2.getMonth() + 1)}${delimiter}${value2.getFullYear()}`),
+    [format, delimiter]
+  );
+  const [value, setValueState] = react.useState(defaultValue);
+  const [text, setText] = react.useState(() => defaultValue ? formatDate(defaultValue) : "");
+  const [open, setOpen] = react.useState(false);
+  const mask = react.useMemo(
+    () => ({
+      date: true,
+      delimiter,
+      ...min ? { dateMin: toISODate(min) } : {},
+      ...max ? { dateMax: toISODate(max) } : {}
+    }),
+    [delimiter, min, max]
+  );
+  const commit = react.useCallback(
+    (next) => {
+      setValueState(next);
+      setText(next ? formatDate(next) : "");
+      onValueChange?.(next);
+    },
+    [formatDate, onValueChange]
+  );
+  const handleTyped = react.useCallback(
+    (next, meta) => {
+      setText(next);
+      if (next === "") {
+        setValueState(void 0);
+        onValueChange?.(void 0);
+        return;
+      }
+      if (!meta.completed || !meta.iso) {
+        setValueState(void 0);
+        return;
+      }
+      const parsed = fromISODate(meta.iso);
+      setValueState(parsed);
+      onValueChange?.(parsed);
+    },
+    [onValueChange]
+  );
+  const handleKeyDown = react.useCallback((event) => {
+    if (event.key !== "ArrowDown") return;
+    event.preventDefault();
+    setOpen(true);
+  }, []);
+  const handlePicked = react.useCallback(
+    (next) => {
+      commit(next);
+      setOpen(false);
+    },
+    [commit]
+  );
+  return {
+    value,
+    text,
+    open,
+    setValue: commit,
+    popoverProps: { open, onOpenChange: setOpen },
+    inputProps: { mask, value: text, onValueChange: handleTyped, onKeyDown: handleKeyDown },
+    calendarProps: { value, minDate: min, maxDate: max, onValueChange: handlePicked }
+  };
+}
 
 // src/components/accordion/context.ts
 var [AccordionProvider, useAccordionOwnContext] = createSafeContext("AccordionProvider");
@@ -719,6 +792,650 @@ var Button = (props) => {
 };
 Button.displayName = "Button";
 
+// src/components/calendar/base.ts
+var CalendarBase = createComponentBase({
+  name: "Calendar",
+  slots: [
+    "root",
+    "months",
+    "month",
+    "nav",
+    "previousMonthButton",
+    "nextMonthButton",
+    "previousYearButton",
+    "nextYearButton",
+    "chevron",
+    "monthCaption",
+    "captionLabel",
+    "captionTrigger",
+    "dropdowns",
+    "dropdownRoot",
+    "dropdown",
+    "monthGrid",
+    "monthYearGrid",
+    "monthYearCell",
+    "weekdays",
+    "weekday",
+    "weeks",
+    "week",
+    "weekNumber",
+    "weekNumberHeader",
+    "day",
+    "dayButton",
+    "footer"
+  ],
+  classes: {
+    root: "tk-calendar",
+    months: "tk-calendar-months",
+    month: "tk-calendar-month",
+    nav: "tk-calendar-nav",
+    previousMonthButton: "tk-calendar-nav-previous-month",
+    nextMonthButton: "tk-calendar-nav-next-month",
+    previousYearButton: "tk-calendar-nav-previous-year",
+    nextYearButton: "tk-calendar-nav-next-year",
+    chevron: "tk-calendar-chevron",
+    monthCaption: "tk-calendar-month-caption",
+    captionLabel: "tk-calendar-caption-label",
+    captionTrigger: "tk-calendar-caption-trigger",
+    dropdowns: "tk-calendar-dropdowns",
+    dropdownRoot: "tk-calendar-dropdown-root",
+    dropdown: "tk-calendar-dropdown",
+    monthGrid: "tk-calendar-month-grid",
+    monthYearGrid: "tk-calendar-month-year-grid",
+    monthYearCell: "tk-calendar-month-year-cell",
+    weekdays: "tk-calendar-weekdays",
+    weekday: "tk-calendar-weekday",
+    weeks: "tk-calendar-weeks",
+    week: "tk-calendar-week",
+    weekNumber: "tk-calendar-week-number",
+    weekNumberHeader: "tk-calendar-week-number-header",
+    day: "tk-calendar-day",
+    dayButton: "tk-calendar-day-button",
+    footer: "tk-calendar-footer"
+  }
+});
+var calendarRangeClassNames = {
+  range_start: "tk-calendar-day-range-start",
+  range_middle: "tk-calendar-day-range-middle",
+  range_end: "tk-calendar-day-range-end"
+};
+
+// src/components/calendar/defaults.ts
+var DEFAULT_MODE2 = "single";
+var DEFAULT_SIZE5 = "base";
+var DEFAULT_HEADER_TYPE = "basic";
+var DEFAULT_VIEW = "day";
+
+// src/components/calendar/helpers.ts
+var isSameCalendarDay = (left, right) => left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth() && left.getDate() === right.getDate();
+var isSameCalendarMonth = (left, right) => left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth();
+var selectionAnchor = (value) => {
+  if (!value) return void 0;
+  if (value instanceof Date) return value;
+  if (Array.isArray(value)) return value.length ? value[value.length - 1] : void 0;
+  return value.from;
+};
+var buildDisabledMatchers = ({ minDate, maxDate, disabledDates, allowedDates, disabledWeekDays }) => {
+  const matchers = [];
+  if (minDate) matchers.push({ before: minDate });
+  if (maxDate) matchers.push({ after: maxDate });
+  if (disabledDates?.length) matchers.push(disabledDates);
+  if (disabledWeekDays?.length) matchers.push({ dayOfWeek: disabledWeekDays });
+  if (allowedDates?.length) {
+    const allowed = allowedDates;
+    matchers.push((date) => !allowed.some((candidate) => isSameCalendarDay(candidate, date)));
+  }
+  return matchers.length ? matchers : void 0;
+};
+var assignRef = (ref, node) => {
+  if (typeof ref === "function") {
+    ref(node);
+  } else if (ref) {
+    ref.current = node;
+  }
+};
+var YEARS_PER_PAGE = 12;
+var yearPageStart = (year) => Math.floor(year / YEARS_PER_PAGE) * YEARS_PER_PAGE;
+var isMonthInBounds = (year, month, minDate, maxDate) => {
+  if (minDate && new Date(year, month + 1, 0, 23, 59, 59, 999) < minDate) return false;
+  if (maxDate && new Date(year, month, 1) > maxDate) return false;
+  return true;
+};
+var isYearInBounds = (year, minDate, maxDate) => {
+  if (minDate && year < minDate.getFullYear()) return false;
+  if (maxDate && year > maxDate.getFullYear()) return false;
+  return true;
+};
+var isYearPageInBounds = (year, minDate, maxDate) => {
+  const start = yearPageStart(year);
+  return isYearInBounds(start + YEARS_PER_PAGE - 1, minDate, void 0) && isYearInBounds(start, void 0, maxDate);
+};
+var SLOT_TO_UI = {
+  root: reactDayPicker.UI.Root,
+  months: reactDayPicker.UI.Months,
+  month: reactDayPicker.UI.Month,
+  nav: reactDayPicker.UI.Nav,
+  previousMonthButton: reactDayPicker.UI.PreviousMonthButton,
+  nextMonthButton: reactDayPicker.UI.NextMonthButton,
+  chevron: reactDayPicker.UI.Chevron,
+  monthCaption: reactDayPicker.UI.MonthCaption,
+  captionLabel: reactDayPicker.UI.CaptionLabel,
+  dropdowns: reactDayPicker.UI.Dropdowns,
+  dropdownRoot: reactDayPicker.UI.DropdownRoot,
+  dropdown: reactDayPicker.UI.Dropdown,
+  monthGrid: reactDayPicker.UI.MonthGrid,
+  weekdays: reactDayPicker.UI.Weekdays,
+  weekday: reactDayPicker.UI.Weekday,
+  weeks: reactDayPicker.UI.Weeks,
+  week: reactDayPicker.UI.Week,
+  weekNumber: reactDayPicker.UI.WeekNumber,
+  weekNumberHeader: reactDayPicker.UI.WeekNumberHeader,
+  day: reactDayPicker.UI.Day,
+  dayButton: reactDayPicker.UI.DayButton,
+  footer: reactDayPicker.UI.Footer
+};
+var ENGINE_CLASSNAME_RESET = Object.fromEntries(
+  [...Object.values(reactDayPicker.UI), ...Object.values(reactDayPicker.DayFlag), ...Object.values(reactDayPicker.SelectionState), ...Object.values(reactDayPicker.Animation)].map((key) => [key, ""])
+);
+var mergeSlotAttrs = (slotAttrs, engineProps) => {
+  const merged = { ...slotAttrs };
+  for (const key in engineProps) {
+    const value = engineProps[key];
+    if (value !== void 0) merged[key] = value;
+  }
+  return merged;
+};
+var CaptionMonthContext = react.createContext(null);
+var PANEL_COLUMNS = 4;
+var visuallyHidden = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  margin: -1,
+  padding: 0,
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+var displayContents = { display: "contents" };
+var createEngineComponents = (attrsRef, refRef, viewRef, renderDayRef) => {
+  const withSlot = (Component, slot) => {
+    const Slotted = (props) => /* @__PURE__ */ jsxRuntime.jsx(Component, { ...mergeSlotAttrs(attrsRef.current[slot], props) });
+    Slotted.displayName = `Calendar.${slot}`;
+    return Slotted;
+  };
+  const Root = ({ rootRef, ...engineProps }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...mergeSlotAttrs(attrsRef.current.root, engineProps),
+      ref: (node) => {
+        assignRef(refRef.current, node);
+        assignRef(rootRef, node);
+      }
+    }
+  );
+  Root.displayName = "Calendar.root";
+  const Chevron = ({ orientation = "left", size, ...engineProps }) => {
+    const Icon = orientation === "left" ? chevronLeft.ChevronLeftIconOutlinedRounded : orientation === "right" ? chevronRight.ChevronRightIconOutlinedRounded : orientation === "up" ? chevronTop.ChevronTopIconOutlinedRounded : chevronBottom.ChevronBottomIconOutlinedRounded;
+    const { disabled: _disabled, ...svgProps } = engineProps;
+    return /* @__PURE__ */ jsxRuntime.jsx(Icon, { "aria-hidden": "true", ...mergeSlotAttrs(attrsRef.current.chevron, { ...svgProps, width: size, height: size }) });
+  };
+  Chevron.displayName = "Calendar.chevron";
+  const useDisplayedMonth = () => {
+    const { months, dayPickerProps } = reactDayPicker.useDayPicker();
+    const first = dayPickerProps.reverseMonths ? months[months.length - 1] : months[0];
+    return first?.date ?? /* @__PURE__ */ new Date();
+  };
+  const useDateLib = () => {
+    const { locale, timeZone, numerals, dateLib } = reactDayPicker.useDayPicker().dayPickerProps;
+    return react.useMemo(
+      // The same merge the engine makes, so a partial `locale` still resolves
+      // against `en-US` rather than leaving fields undefined.
+      () => new reactDayPicker.DateLib({ locale: { ...reactDayPicker.defaultLocale, ...locale }, timeZone, numerals }, dateLib),
+      [locale, timeZone, numerals, dateLib]
+    );
+  };
+  const MonthCaption = ({ calendarMonth, displayIndex, ...engineProps }) => /* @__PURE__ */ jsxRuntime.jsx(CaptionMonthContext.Provider, { value: calendarMonth.date, children: /* @__PURE__ */ jsxRuntime.jsx(
+    reactDayPicker.MonthCaption,
+    {
+      calendarMonth,
+      displayIndex,
+      ...mergeSlotAttrs(attrsRef.current.monthCaption, engineProps)
+    }
+  ) });
+  MonthCaption.displayName = "Calendar.monthCaption";
+  const CaptionLabel = ({ children, ...engineProps }) => {
+    const { triggersEnabled, view, setView, navigationDisabled, panelId, pendingFocusRef, restoreRef } = viewRef.current;
+    const { formatters, labels } = reactDayPicker.useDayPicker();
+    const caption = react.useContext(CaptionMonthContext);
+    const anchor = useDisplayedMonth();
+    const dateLib = useDateLib();
+    const displayed = caption ?? anchor;
+    const slotProps = mergeSlotAttrs(attrsRef.current.captionLabel, engineProps);
+    if (!triggersEnabled || displayed.getTime() !== anchor.getTime())
+      return /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.CaptionLabel, { ...slotProps, children });
+    const trigger = (target, label, describe) => {
+      const opens = view !== target;
+      const disabled = navigationDisabled && opens;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          ...mergeSlotAttrs(attrsRef.current.captionTrigger, {
+            "data-view": target,
+            // The engine's own label, so `labels` translates the panel too; a
+            // per-instance override still wins through `slotProps`.
+            "aria-label": attrsRef.current.captionTrigger["aria-label"] ?? `${label}, ${describe}`,
+            "aria-expanded": view === target,
+            "aria-controls": view === target ? panelId : void 0,
+            "aria-disabled": disabled || void 0,
+            "onClick": (event) => {
+              if (disabled) return;
+              const next = opens ? target : "day";
+              restoreRef.current = next === "day" ? null : event.currentTarget;
+              pendingFocusRef.current = next !== "day";
+              setView(next);
+            }
+          }),
+          children: label
+        }
+      );
+    };
+    const monthLabel = formatters.formatMonthDropdown(displayed, dateLib);
+    const yearLabel = formatters.formatYearDropdown(displayed, dateLib);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      reactDayPicker.CaptionLabel,
+      {
+        ...slotProps,
+        role: void 0,
+        "aria-live": void 0,
+        children: [
+          trigger("month", monthLabel, labels.labelMonthDropdown()),
+          trigger("year", yearLabel, labels.labelYearDropdown()),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { role: "status", "aria-live": "polite", style: visuallyHidden, children: view === "day" ? `${monthLabel} ${yearLabel}` : view === "month" ? labels.labelMonthDropdown() : labels.labelYearDropdown() })
+        ]
+      }
+    );
+  };
+  CaptionLabel.displayName = "Calendar.captionLabel";
+  const MonthGrid = ({ children, ...engineProps }) => {
+    const { view, setView, navigationDisabled, minDate, maxDate, panelId, panelRef, pendingFocusRef, restoreRef } = viewRef.current;
+    const { dayPickerProps, formatters, goToMonth, labels } = reactDayPicker.useDayPicker();
+    const displayed = useDisplayedMonth();
+    const dateLib = useDateLib();
+    react.useEffect(() => {
+      if (view === "day" || !pendingFocusRef.current) return;
+      pendingFocusRef.current = false;
+      panelRef.current?.querySelector('[role="gridcell"][tabindex="0"]')?.focus();
+    }, [view, panelRef, pendingFocusRef]);
+    if (view === "day") {
+      return /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.MonthGrid, { ...mergeSlotAttrs(attrsRef.current.monthGrid, { ...engineProps, children }) });
+    }
+    const year = displayed.getFullYear();
+    const pageStart = yearPageStart(year);
+    const restoreFocus = () => {
+      const trigger = panelRef.current?.closest('[data-slot="root"]')?.querySelector(`[data-slot="caption-trigger"][data-view="${view}"]`);
+      (restoreRef.current ?? trigger)?.focus();
+    };
+    const items = view === "month" ? Array.from({ length: 12 }, (_, month) => {
+      const date = new Date(year, month, 1);
+      return {
+        key: String(month),
+        // No engine formatter abbreviates a month — the dropdown spells
+        // it out — so this is the one label built from a pattern; the
+        // date library is still the engine's, so locale and numerals
+        // hold.
+        label: dateLib.format(date, "LLL"),
+        name: formatters.formatCaption(date, dateLib.options, dateLib),
+        current: displayed.getMonth() === month,
+        // Picking a cell is navigation, so `disableNavigation` takes the
+        // whole board down with the arrows — `goToMonth` would no-op and
+        // leave an enabled-looking cell that does nothing.
+        enabled: !navigationDisabled && isMonthInBounds(year, month, minDate, maxDate),
+        select: () => {
+          goToMonth(date);
+          setView("day");
+          restoreFocus();
+        }
+      };
+    }) : Array.from({ length: YEARS_PER_PAGE }, (_, offset) => {
+      const candidate = pageStart + offset;
+      const label2 = formatters.formatYearDropdown(new Date(candidate, 0, 1), dateLib);
+      return {
+        key: String(candidate),
+        label: label2,
+        name: label2,
+        current: candidate === year,
+        enabled: !navigationDisabled && isYearInBounds(candidate, minDate, maxDate),
+        select: () => {
+          goToMonth(new Date(candidate, displayed.getMonth(), 1));
+          restoreRef.current = null;
+          pendingFocusRef.current = true;
+          setView("month");
+        }
+      };
+    });
+    const seek = (start, delta, min = 0, max = items.length - 1) => {
+      for (let index = start; index >= min && index <= max; index += delta) if (items[index]?.enabled) return index;
+      return void 0;
+    };
+    const current = items.findIndex((item) => item.current && item.enabled);
+    const activeIndex = current >= 0 ? current : seek(0, 1) ?? -1;
+    const inline = dayPickerProps.dir === "rtl" ? -1 : 1;
+    const move = (event, from) => {
+      const step = { ArrowLeft: -inline, ArrowRight: inline, ArrowUp: -PANEL_COLUMNS, ArrowDown: PANEL_COLUMNS }[event.key];
+      const rowStart = from - from % PANEL_COLUMNS;
+      const rowEnd = rowStart + PANEL_COLUMNS - 1;
+      let next;
+      if (step !== void 0) next = seek(from + step, step);
+      else if (event.key === "Home") next = seek(rowStart, 1, rowStart, rowEnd);
+      else if (event.key === "End") next = seek(rowEnd, -1, rowStart, rowEnd);
+      if (next === void 0) return;
+      event.preventDefault();
+      const cells = event.currentTarget.querySelectorAll('[role="gridcell"]');
+      cells[next]?.focus();
+    };
+    const label = view === "month" ? `${labels.labelMonthDropdown()}, ${formatters.formatYearDropdown(displayed, dateLib)}` : `${labels.labelYearDropdown()}, ${dateLib.formatNumber(pageStart)}\u2013${dateLib.formatNumber(pageStart + YEARS_PER_PAGE - 1)}`;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ...mergeSlotAttrs(attrsRef.current.monthYearGrid, {
+          "id": panelId,
+          "role": "grid",
+          "aria-label": attrsRef.current.monthYearGrid["aria-label"] ?? label,
+          "data-view": view,
+          "ref": panelRef,
+          "onKeyDown": (event) => {
+            if (event.key === "Escape") {
+              event.stopPropagation();
+              setView("day");
+              restoreFocus();
+              return;
+            }
+            const cells = [...event.currentTarget.querySelectorAll('[role="gridcell"]')];
+            const from = cells.indexOf(event.target);
+            if (from >= 0) move(event, from);
+          }
+        }),
+        children: Array.from({ length: items.length / PANEL_COLUMNS }, (_, row) => /* @__PURE__ */ jsxRuntime.jsx("div", { role: "row", style: displayContents, children: items.slice(row * PANEL_COLUMNS, row * PANEL_COLUMNS + PANEL_COLUMNS).map((item, column) => {
+          const index = row * PANEL_COLUMNS + column;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              disabled: !item.enabled,
+              ...mergeSlotAttrs(attrsRef.current.monthYearCell, {
+                "role": "gridcell",
+                "aria-label": item.name,
+                "aria-selected": item.current,
+                "data-selected": item.current || void 0,
+                "data-disabled": item.enabled ? void 0 : true,
+                "tabIndex": index === activeIndex ? 0 : -1,
+                "onClick": item.select
+              }),
+              children: item.label
+            },
+            item.key
+          );
+        }) }, row))
+      }
+    );
+  };
+  MonthGrid.displayName = "Calendar.monthGrid";
+  const aroundArrow = (slot) => {
+    const Engine = slot === "previousMonthButton" ? reactDayPicker.PreviousMonthButton : reactDayPicker.NextMonthButton;
+    const Arrow = ({ children, ...engineProps }) => {
+      const { view, navigationDisabled, minDate, maxDate } = viewRef.current;
+      const { formatters, goToMonth } = reactDayPicker.useDayPicker();
+      const displayed = useDisplayedMonth();
+      const dateLib = useDateLib();
+      const slotProps = mergeSlotAttrs(attrsRef.current[slot], engineProps);
+      if (view !== "year") return /* @__PURE__ */ jsxRuntime.jsx(Engine, { ...slotProps, children });
+      const target = new Date(displayed.getFullYear() + (slot === "previousMonthButton" ? -1 : 1), displayed.getMonth(), 1);
+      const disabled = navigationDisabled || !isYearInBounds(target.getFullYear(), minDate, maxDate);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Engine,
+        {
+          ...slotProps,
+          "aria-label": formatters.formatYearDropdown(target, dateLib),
+          "aria-disabled": disabled || void 0,
+          tabIndex: disabled ? -1 : void 0,
+          onClick: () => {
+            if (!disabled) goToMonth(target);
+          },
+          children
+        }
+      );
+    };
+    Arrow.displayName = `Calendar.${slot}`;
+    return Arrow;
+  };
+  const Nav = (engineProps) => {
+    const { triggersEnabled, view, navigationDisabled, minDate, maxDate } = viewRef.current;
+    const { classNames: engineClassNames, components, formatters, goToMonth, labels } = reactDayPicker.useDayPicker();
+    const displayed = useDisplayedMonth();
+    const dateLib = useDateLib();
+    const slotProps = mergeSlotAttrs(attrsRef.current.nav, engineProps);
+    const { onPreviousClick, onNextClick, previousMonth, nextMonth, ...navAttrs } = slotProps;
+    const singleStep = view === "year" ? 12 : 1;
+    const doubleStep = view === "year" ? YEARS_PER_PAGE * 12 : 12;
+    const singleGrain = view === "year" ? "year" : "month";
+    const doubleGrain = view === "year" ? "page" : "year";
+    const shift = (months) => new Date(displayed.getFullYear(), displayed.getMonth() + months, 1);
+    const reachable = (target, grain) => grain === "month" ? isMonthInBounds(target.getFullYear(), target.getMonth(), minDate, maxDate) : grain === "year" ? isYearInBounds(target.getFullYear(), minDate, maxDate) : isYearPageInBounds(target.getFullYear(), minDate, maxDate);
+    const formatYear = (target) => formatters.formatYearDropdown(target, dateLib);
+    const formatPage = (target) => {
+      const start = yearPageStart(target.getFullYear());
+      return `${dateLib.formatNumber(start)}\u2013${dateLib.formatNumber(start + YEARS_PER_PAGE - 1)}`;
+    };
+    const arrowLabel = (grain, target, previous) => grain === "month" ? previous ? labels.labelPrevious(target) : labels.labelNext(target) : grain === "year" ? formatYear(target) : formatPage(target);
+    const arrow = (slot, months, grain, icon) => {
+      const target = shift(months);
+      const label = arrowLabel(grain, target, months < 0);
+      const engineOwned = slot === "previousMonthButton" || slot === "nextMonthButton";
+      const delegated = engineOwned && view === "day";
+      const disabled = navigationDisabled || (delegated ? !(months < 0 ? previousMonth : nextMonth) : !reachable(target, grain));
+      const Button2 = slot.startsWith("previous") ? reactDayPicker.PreviousMonthButton : reactDayPicker.NextMonthButton;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Button2,
+        {
+          type: "button",
+          ...mergeSlotAttrs(attrsRef.current[slot], {
+            "className": engineOwned ? engineClassNames[slot === "previousMonthButton" ? reactDayPicker.UI.PreviousMonthButton : reactDayPicker.UI.NextMonthButton] : void 0,
+            "aria-label": label,
+            "aria-disabled": disabled || void 0,
+            "tabIndex": disabled ? -1 : void 0,
+            "onClick": (event) => {
+              if (disabled) return;
+              if (delegated) return months < 0 ? onPreviousClick?.(event) : onNextClick?.(event);
+              goToMonth(target);
+            }
+          }),
+          children: icon
+        }
+      );
+    };
+    const chevron = (orientation) => /* @__PURE__ */ jsxRuntime.jsx(components.Chevron, { orientation, className: engineClassNames[reactDayPicker.UI.Chevron] });
+    const doubleChevron = (Icon) => /* @__PURE__ */ jsxRuntime.jsx(Icon, { "aria-hidden": "true", ...mergeSlotAttrs(attrsRef.current.chevron, { className: engineClassNames[reactDayPicker.UI.Chevron] }) });
+    return /* @__PURE__ */ jsxRuntime.jsxs("nav", { ...navAttrs, children: [
+      triggersEnabled && arrow("previousYearButton", -doubleStep, doubleGrain, doubleChevron(doubleChevronLeft.DoubleChevronLeftIconOutlinedRounded)),
+      arrow("previousMonthButton", -singleStep, singleGrain, chevron("left")),
+      arrow("nextMonthButton", singleStep, singleGrain, chevron("right")),
+      triggersEnabled && arrow("nextYearButton", doubleStep, doubleGrain, doubleChevron(doubleChevronRight.DoubleChevronRightIconOutlinedRounded))
+    ] });
+  };
+  Nav.displayName = "Calendar.nav";
+  const DayButton = ({ day, modifiers, children, ...engineProps }) => {
+    const slotProps = mergeSlotAttrs(attrsRef.current.dayButton, engineProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.DayButton, { ...slotProps, day, modifiers, children: renderDayRef.current ? renderDayRef.current(day.date, modifiers) : children });
+  };
+  DayButton.displayName = "Calendar.dayButton";
+  return {
+    Root,
+    Chevron,
+    CaptionLabel,
+    MonthCaption,
+    MonthGrid,
+    Nav,
+    Months: withSlot(reactDayPicker.Months, "months"),
+    Month: withSlot(reactDayPicker.Month, "month"),
+    PreviousMonthButton: aroundArrow("previousMonthButton"),
+    NextMonthButton: aroundArrow("nextMonthButton"),
+    DropdownNav: withSlot(reactDayPicker.DropdownNav, "dropdowns"),
+    // The engine hands these props to its own `<select>`, so `dropdown` is the
+    // select's anchor. Its wrapping span (`dropdownRoot`) is class-only — see
+    // `base.ts`.
+    Dropdown: withSlot(reactDayPicker.Dropdown, "dropdown"),
+    Weekdays: withSlot(reactDayPicker.Weekdays, "weekdays"),
+    Weekday: withSlot(reactDayPicker.Weekday, "weekday"),
+    Weeks: withSlot(reactDayPicker.Weeks, "weeks"),
+    Week: withSlot(reactDayPicker.Week, "week"),
+    WeekNumber: withSlot(reactDayPicker.WeekNumber, "weekNumber"),
+    WeekNumberHeader: withSlot(reactDayPicker.WeekNumberHeader, "weekNumberHeader"),
+    Day: withSlot(reactDayPicker.Day, "day"),
+    DayButton,
+    Footer: withSlot(reactDayPicker.Footer, "footer")
+  };
+};
+var Calendar = (props) => {
+  const theme = useComponentTheme("Calendar");
+  const { rootAttrs, rest } = composeRootAttrs(CalendarBase, props, theme, {
+    // `data-size` is takeoff-v2's own visual vocabulary. The engine's root
+    // already emits `data-mode`, `data-multiple-months`, `data-week-numbers`
+    // and `data-nav-layout`, so those are not mirrored here (rule 7).
+    stateAttrs: ({ size = DEFAULT_SIZE5, headerType = DEFAULT_HEADER_TYPE }) => ({
+      "data-size": size,
+      "data-header-type": headerType
+    })
+  });
+  const {
+    mode = DEFAULT_MODE2,
+    value,
+    defaultValue,
+    onValueChange,
+    minDate,
+    maxDate,
+    disabledDates,
+    allowedDates,
+    disabledWeekDays,
+    firstDayOfWeekIndex,
+    size: _size,
+    headerType: _headerType,
+    view: viewProp,
+    defaultView = DEFAULT_VIEW,
+    onViewChange,
+    ref,
+    min,
+    max,
+    excludeDisabled,
+    renderDay,
+    ...engine
+  } = rest;
+  const isControlled = "value" in props;
+  const [uncontrolledValue, setUncontrolledValue] = react.useState(isControlled ? void 0 : value ?? defaultValue);
+  const selected = isControlled ? value : uncontrolledValue;
+  const setSelected = (next) => {
+    if (!isControlled) setUncontrolledValue(next);
+    onValueChange?.(next);
+  };
+  const isMonthControlled = engine.month !== void 0;
+  const anchor = selectionAnchor(selected);
+  const [followedMonth, setFollowedMonth] = react.useState(void 0);
+  const displayedMonthRef = react.useRef(void 0);
+  const anchorYear = anchor?.getFullYear();
+  const anchorMonth = anchor?.getMonth();
+  react.useEffect(() => {
+    if (isMonthControlled || anchorYear === void 0 || anchorMonth === void 0) return;
+    const displayed = displayedMonthRef.current;
+    const target = new Date(anchorYear, anchorMonth, 1);
+    if (displayed && isSameCalendarMonth(displayed, target)) return;
+    displayedMonthRef.current = target;
+    setFollowedMonth(target);
+  }, [isMonthControlled, anchorYear, anchorMonth]);
+  const handleMonthChange = (next) => {
+    displayedMonthRef.current = next;
+    setFollowedMonth(next);
+    engine.onMonthChange?.(next);
+  };
+  const triggersEnabled = !engine.captionLayout?.startsWith("dropdown");
+  const isViewControlled = props.view !== void 0;
+  const [uncontrolledView, setUncontrolledView] = react.useState(viewProp ?? defaultView);
+  const view = isViewControlled ? props.view : uncontrolledView;
+  const setView = (next) => {
+    if (!isViewControlled) setUncontrolledView(next);
+    onViewChange?.(next);
+  };
+  const panelId = react.useId();
+  const panelRef = react.useRef(null);
+  const restoreRef = react.useRef(null);
+  const pendingFocusRef = react.useRef(false);
+  const navigationDisabled = Boolean(engine.disableNavigation);
+  const viewState = { triggersEnabled, view, setView, navigationDisabled, minDate, maxDate, panelId, panelRef, restoreRef, pendingFocusRef };
+  const viewRef = react.useRef(viewState);
+  viewRef.current = viewState;
+  const slotAttrs = {};
+  const classNames = { ...ENGINE_CLASSNAME_RESET, ...calendarRangeClassNames };
+  for (const slot of CalendarBase.slots) {
+    const composed = slot === "root" ? (
+      // `data-view` is live state, not a resolved prop, so it is layered on
+      // here rather than through `stateAttrs`.
+      { ...rootAttrs, "data-view": view }
+    ) : buildSlotAttrs(CalendarBase.getSlotProps(slot), slot, {
+      themeSlotProps: theme?.slotProps,
+      themeClassNames: theme?.classNames,
+      instanceSlotProps: props.slotProps,
+      instanceClassNames: props.classNames
+    });
+    const uiKey = SLOT_TO_UI[slot];
+    if (uiKey === void 0) {
+      slotAttrs[slot] = composed;
+      continue;
+    }
+    const { className, ...attrs } = composed;
+    slotAttrs[slot] = attrs;
+    classNames[uiKey] = className ?? "";
+  }
+  const attrsRef = react.useRef(slotAttrs);
+  attrsRef.current = slotAttrs;
+  const refRef = react.useRef(ref);
+  refRef.current = ref;
+  const renderDayRef = react.useRef(renderDay);
+  renderDayRef.current = renderDay;
+  const components = react.useMemo(() => createEngineComponents(attrsRef, refRef, viewRef, renderDayRef), []);
+  const disabled = buildDisabledMatchers({ minDate, maxDate, disabledDates, allowedDates, disabledWeekDays });
+  const engineProps = {
+    ...engine,
+    // A board belongs to the calendar, not to a month, so only one month is
+    // displayed while one is open — the board would otherwise be repeated per
+    // month, `id` and all. Mapped on the prop rather than by dropping the extra
+    // months from the `Month` override, which would take the engine's
+    // navigation down with them: `navLayout="after"` and `"around"` render it
+    // inside a month.
+    numberOfMonths: view === "day" ? engine.numberOfMonths : 1,
+    // A passed `month` stays in charge; otherwise the month the grid follows is
+    // whatever it was last moved to — by the user's own navigation or by the
+    // selection above. `defaultMonth` still seeds the first render, because
+    // `followedMonth` is undefined until something moves.
+    month: isMonthControlled ? engine.month : followedMonth,
+    onMonthChange: handleMonthChange,
+    mode,
+    selected,
+    onSelect: setSelected,
+    disabled,
+    startMonth: minDate,
+    endMonth: maxDate,
+    weekStartsOn: firstDayOfWeekIndex,
+    min,
+    max,
+    excludeDisabled,
+    classNames,
+    components
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.DayPicker, { ...engineProps });
+};
+Calendar.displayName = "Calendar";
+
 // src/components/card/base.ts
 var CardBase = createComponentBase({
   name: "Card",
@@ -760,12 +1477,12 @@ var Card = (props) => {
 Card.displayName = "Card";
 
 // src/components/card/defaults.ts
-var DEFAULT_HEADER_TYPE = "basic";
+var DEFAULT_HEADER_TYPE2 = "basic";
 var DEFAULT_FOOTER_TYPE = "basic";
 var CardHeader = (props) => {
   const theme = useComponentTheme("CardHeader");
   const { rootAttrs, rest } = composeRootAttrs(CardHeaderBase, props, theme, {
-    stateAttrs: ({ headerType = DEFAULT_HEADER_TYPE }) => ({
+    stateAttrs: ({ headerType = DEFAULT_HEADER_TYPE2 }) => ({
       "data-header-type": headerType
     })
   });
@@ -843,11 +1560,11 @@ var CheckboxBase = createComponentBase({
 var [CheckboxProvider, useCheckboxOwnContext] = createSafeContext("CheckboxProvider");
 
 // src/components/checkbox/defaults.ts
-var DEFAULT_SIZE5 = "base";
+var DEFAULT_SIZE6 = "base";
 var Checkbox = (props) => {
   const theme = useComponentTheme("Checkbox");
   const { rootAttrs, rest } = composeRootAttrs(CheckboxBase, props, theme, {
-    stateAttrs: ({ size = DEFAULT_SIZE5 }) => ({
+    stateAttrs: ({ size = DEFAULT_SIZE6 }) => ({
       "data-size": size
     })
   });
@@ -939,13 +1656,13 @@ var ChipBase = createComponentBase({
 // src/components/chip/defaults.ts
 var DEFAULT_VARIANT4 = "primary";
 var DEFAULT_APPEARANCE4 = "filled";
-var DEFAULT_SIZE6 = "base";
+var DEFAULT_SIZE7 = "base";
 var DEFAULT_REMOVE_LABEL = "Remove";
 var Chip = (props) => {
   const theme = useComponentTheme("Chip");
   const [dismissed, setDismissed] = react.useState(false);
   const { rootAttrs, rest } = composeRootAttrs(ChipBase, props, theme, {
-    stateAttrs: ({ variant = DEFAULT_VARIANT4, appearance = DEFAULT_APPEARANCE4, size = DEFAULT_SIZE6, clickable: clickable2 = false, disabled: disabled2 = false, removable: removable2 = false }) => ({
+    stateAttrs: ({ variant = DEFAULT_VARIANT4, appearance = DEFAULT_APPEARANCE4, size = DEFAULT_SIZE7, clickable: clickable2 = false, disabled: disabled2 = false, removable: removable2 = false }) => ({
       "data-variant": variant,
       "data-type": appearance,
       "data-size": size,
@@ -1052,15 +1769,15 @@ var [DrawerProvider, useDrawerOwnContext] = createSafeContext("DrawerProvider");
 
 // src/components/drawer/defaults.ts
 var DEFAULT_PLACEMENT = "right";
-var DEFAULT_HEADER_TYPE2 = "basic";
+var DEFAULT_HEADER_TYPE3 = "basic";
 var DEFAULT_FOOTER_TYPE2 = "basic";
 var DEFAULT_INTENSITY = "base";
 var DEFAULT_CLOSE_LABEL2 = "Close";
 var Drawer = (props) => {
   const theme = useComponentTheme("Drawer");
   const merged = { ...theme?.defaultProps, ...props };
-  const { placement = DEFAULT_PLACEMENT, dismissible = true, disabled = false, children, ...sparProps } = merged;
-  return /* @__PURE__ */ jsxRuntime.jsx(DrawerProvider, { value: { placement, dismissible }, children: /* @__PURE__ */ jsxRuntime.jsx(spar.Dialog, { ...sparProps, disabled, forceMount: true, children }) });
+  const { placement = DEFAULT_PLACEMENT, dismissible = true, disabled = false, forceMount = true, children, ...sparProps } = merged;
+  return /* @__PURE__ */ jsxRuntime.jsx(DrawerProvider, { value: { placement, dismissible }, children: /* @__PURE__ */ jsxRuntime.jsx(spar.Dialog, { ...sparProps, disabled, forceMount, children }) });
 };
 Drawer.displayName = "Drawer";
 
@@ -1155,7 +1872,7 @@ DrawerPanel.displayName = "Drawer.Panel";
 var DrawerHeader = (props) => {
   const theme = useComponentTheme("DrawerHeader");
   const { rootAttrs, rest } = composeRootAttrs(DrawerHeaderBase, props, theme, {
-    stateAttrs: ({ headerType = DEFAULT_HEADER_TYPE2 }) => ({
+    stateAttrs: ({ headerType = DEFAULT_HEADER_TYPE3 }) => ({
       "data-header-type": headerType
     })
   });
@@ -1304,7 +2021,7 @@ DialogTrigger.displayName = "Dialog.Trigger";
 
 // src/components/dialog/defaults.ts
 var DEFAULT_INTENSITY2 = "base";
-var DEFAULT_HEADER_TYPE3 = "basic";
+var DEFAULT_HEADER_TYPE4 = "basic";
 var DEFAULT_FOOTER_TYPE3 = "basic";
 var DEFAULT_CLOSE_LABEL3 = "Close";
 var DialogOverlay = (props) => {
@@ -1336,7 +2053,7 @@ DialogPanel.displayName = "Dialog.Panel";
 var DialogHeader = (props) => {
   const theme = useComponentTheme("DialogHeader");
   const { rootAttrs, rest } = composeRootAttrs(DialogHeaderBase, props, theme, {
-    stateAttrs: ({ headerType = DEFAULT_HEADER_TYPE3 }) => ({
+    stateAttrs: ({ headerType = DEFAULT_HEADER_TYPE4 }) => ({
       "data-header-type": headerType
     })
   });
@@ -1443,12 +2160,12 @@ Divider.displayName = "Divider";
 var [DropdownProvider, useDropdownOwnContext] = createSafeContext("DropdownProvider");
 
 // src/components/dropdown/defaults.ts
-var DEFAULT_SIZE7 = "base";
+var DEFAULT_SIZE8 = "base";
 var DEFAULT_CONTENT_WIDTH = "content";
 var Dropdown = (props) => {
   const theme = useComponentTheme("Dropdown");
   const merged = { ...theme?.defaultProps, ...props };
-  const { size = DEFAULT_SIZE7, contentWidth = DEFAULT_CONTENT_WIDTH, children, ...sparProps } = merged;
+  const { size = DEFAULT_SIZE8, contentWidth = DEFAULT_CONTENT_WIDTH, children, ...sparProps } = merged;
   return /* @__PURE__ */ jsxRuntime.jsx(DropdownProvider, { value: { size, contentWidth }, children: /* @__PURE__ */ jsxRuntime.jsx(spar.DropdownMenu, { ...sparProps, children }) });
 };
 Dropdown.displayName = "Dropdown";
@@ -1740,7 +2457,7 @@ var InputChipsBase = createComponentBase({
 var [InputProvider, useInputOwnContext] = createSafeContext("InputProvider");
 
 // src/components/input/defaults.ts
-var DEFAULT_SIZE8 = "base";
+var DEFAULT_SIZE9 = "base";
 var SEGMENT_COUNT = 4;
 var computeStrength = (value) => {
   let strength = 0;
@@ -1792,11 +2509,11 @@ var Input = (props) => {
     for (const value of clearablesRef.current.values()) value.clear();
   }, []);
   const { rootAttrs, rest } = composeRootAttrs(InputBase, props, theme, {
-    stateAttrs: ({ size: size2 = DEFAULT_SIZE8 }) => ({
+    stateAttrs: ({ size: size2 = DEFAULT_SIZE9 }) => ({
       "data-size": size2
     })
   });
-  const { size = DEFAULT_SIZE8, children, ref, ...sparProps } = rest;
+  const { size = DEFAULT_SIZE9, children, ref, ...sparProps } = rest;
   const contextValue = react.useMemo(
     () => ({
       size,
@@ -2020,7 +2737,7 @@ var InputField = (props) => {
   const theme = useComponentTheme("InputField");
   const { fieldRef, setFieldNode, setFieldValue, revealed, setRevealed } = useInputOwnContext("Input.Field");
   const { rootAttrs, rest } = composeRootAttrs(InputFieldBase, props, theme);
-  const { as, ref, type, onInput, onChange, ...spar$1 } = rest;
+  const { as, ref, type, onInput, onChange, onValueChange, ...spar$1 } = rest;
   const effectiveType = type === "password" && revealed ? "text" : type;
   const renderedType = as === "textarea" ? void 0 : effectiveType;
   const setFieldRef = react.useCallback(
@@ -2049,6 +2766,10 @@ var InputField = (props) => {
     onChange?.(event);
     setFieldValue(event.currentTarget.value);
   };
+  const handleValueChange = (value, meta) => {
+    setFieldValue(value);
+    onValueChange?.(value, meta);
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     spar.InputField,
     {
@@ -2057,6 +2778,7 @@ var InputField = (props) => {
       type: renderedType,
       onInput: handleInput,
       onChange: handleChange,
+      onValueChange: handleValueChange,
       ref: setFieldRef,
       ...rootAttrs
     }
@@ -2189,8 +2911,6 @@ var InputTrailingIcon = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Component, { "aria-hidden": "true", ...rendered, ref, ...rootAttrs, children });
 };
 InputTrailingIcon.displayName = "Input.TrailingIcon";
-
-// src/components/input/index.ts
 var Input2 = Object.assign(Input, {
   Field: InputField,
   Prefix: InputPrefix,
@@ -2252,19 +2972,19 @@ var RADIO_ITEM_CONTEXT_VALUE = { inside: true };
 var [RadioItemProvider, useRadioItemOwnContext] = createSafeContext("RadioItemProvider");
 
 // src/components/radio/defaults.ts
-var DEFAULT_SIZE9 = "base";
+var DEFAULT_SIZE10 = "base";
 var DEFAULT_POSITION = "left";
 var Radio = (props) => {
   const theme = useComponentTheme("Radio");
   const { rootAttrs, rest } = composeRootAttrs(RadioBase, props, theme, {
-    stateAttrs: ({ size: size2 = DEFAULT_SIZE9, position: position2 = DEFAULT_POSITION, spread }) => ({
+    stateAttrs: ({ size: size2 = DEFAULT_SIZE10, position: position2 = DEFAULT_POSITION, spread }) => ({
       "data-size": size2,
       "data-position": position2,
       "data-spread": spread ? "" : void 0
     })
   });
   const {
-    size = DEFAULT_SIZE9,
+    size = DEFAULT_SIZE10,
     position = DEFAULT_POSITION,
     invalid,
     // `spread` is consumed only as a data-attr above; destructure to keep it
@@ -2462,7 +3182,7 @@ var [ProgressProvider, useProgressContext] = createSafeContext("ProgressProvider
 
 // src/components/progress/defaults.ts
 var DEFAULT_APPEARANCE6 = "linear";
-var DEFAULT_SIZE10 = "base";
+var DEFAULT_SIZE11 = "base";
 var DEFAULT_VARIANT6 = "primary";
 var DEFAULT_MIN = 0;
 var DEFAULT_MAX = 100;
@@ -2543,7 +3263,7 @@ var Progress = (props) => {
   const resolveState = ({
     indeterminate: indeterminate2 = false,
     appearance: appearance2 = DEFAULT_APPEARANCE6,
-    size: size2 = DEFAULT_SIZE10,
+    size: size2 = DEFAULT_SIZE11,
     variant: variant2 = DEFAULT_VARIANT6,
     disabled: disabled2 = field?.disabled ?? false
   }) => ({ indeterminate: indeterminate2, appearance: appearance2, size: size2, variant: variant2, disabled: disabled2 });
@@ -2687,17 +3407,17 @@ var SelectArrowBase = createComponentBase({
 var [SelectProvider, useSelectOwnContext] = createSafeContext("SelectProvider");
 
 // src/components/select/defaults.ts
-var DEFAULT_SIZE11 = "base";
+var DEFAULT_SIZE12 = "base";
 var DEFAULT_CONTENT_WIDTH2 = "trigger";
 var Select = (props) => {
   const theme = useComponentTheme("Select");
   const { rootAttrs, rest } = composeRootAttrs(SelectBase, props, theme, {
-    stateAttrs: ({ size: size2 = DEFAULT_SIZE11, invalid: invalid2 }) => ({
+    stateAttrs: ({ size: size2 = DEFAULT_SIZE12, invalid: invalid2 }) => ({
       "data-size": size2,
       "data-invalid": invalid2 ? "" : void 0
     })
   });
-  const { size = DEFAULT_SIZE11, invalid = false, contentWidth = DEFAULT_CONTENT_WIDTH2, children, ref, ...sparProps } = rest;
+  const { size = DEFAULT_SIZE12, invalid = false, contentWidth = DEFAULT_CONTENT_WIDTH2, children, ref, ...sparProps } = rest;
   return /* @__PURE__ */ jsxRuntime.jsx(SelectProvider, { value: { size, invalid, contentWidth }, children: /* @__PURE__ */ jsxRuntime.jsx(spar.Select, { ...sparProps, ref, ...rootAttrs, children }) });
 };
 Select.displayName = "Select";
@@ -2857,7 +3577,7 @@ var [SliderProvider, useSliderContext] = createSafeContext("SliderProvider");
 
 // src/components/slider/defaults.ts
 var DEFAULT_ORIENTATION2 = "horizontal";
-var DEFAULT_SIZE12 = "base";
+var DEFAULT_SIZE13 = "base";
 var DEFAULT_VARIANT7 = "primary";
 var DEFAULT_TOOLTIP = "auto";
 var DEFAULT_TRACK = "normal";
@@ -3157,7 +3877,7 @@ var Slider = (props) => {
   const { rootAttrs, rest } = composeRootAttrs(SliderBase, props, theme, {
     stateAttrs: (merged) => {
       const {
-        size = DEFAULT_SIZE12,
+        size = DEFAULT_SIZE13,
         variant = DEFAULT_VARIANT7,
         orientation: orientation2 = DEFAULT_ORIENTATION2,
         tooltip = DEFAULT_TOOLTIP,
@@ -3445,7 +4165,7 @@ var SpinnerBase = createComponentBase({
 
 // src/components/spinner/defaults.ts
 var DEFAULT_APPEARANCE7 = "rounded";
-var DEFAULT_SIZE13 = "base";
+var DEFAULT_SIZE14 = "base";
 var DEFAULT_VARIANT8 = "neutral";
 var DEFAULT_ARIA_LABEL2 = "Loading";
 var SPINNER_RADIAL_PARTS = 8;
@@ -3484,7 +4204,7 @@ var renderIndicatorContent = (appearance) => {
 var Spinner = (props) => {
   const theme = useComponentTheme("Spinner");
   const { rootAttrs, rest } = composeRootAttrs(SpinnerBase, props, theme, {
-    stateAttrs: ({ variant = DEFAULT_VARIANT8, size = DEFAULT_SIZE13, appearance: appearance2 = DEFAULT_APPEARANCE7 }) => ({
+    stateAttrs: ({ variant = DEFAULT_VARIANT8, size = DEFAULT_SIZE14, appearance: appearance2 = DEFAULT_APPEARANCE7 }) => ({
       "data-variant": variant,
       "data-size": size,
       "data-type": appearance2
@@ -3541,8 +4261,8 @@ var [StepperItemProvider, useStepperItem] = createSafeContext("Stepper.Item");
 
 // src/components/stepper/defaults.ts
 var DEFAULT_ORIENTATION3 = "horizontal";
-var DEFAULT_MODE2 = "default";
-var DEFAULT_SIZE14 = "base";
+var DEFAULT_MODE3 = "default";
+var DEFAULT_SIZE15 = "base";
 var DEFAULT_ACTIVE = 0;
 var DEFAULT_COMPLETED_LABEL = "completed";
 var DEFAULT_ERROR_LABEL = "error";
@@ -3550,7 +4270,7 @@ var FOCUSABLE_TRIGGER_SELECTOR = '.tk-stepper-trigger:not(:disabled):not([tabind
 var Stepper = (props) => {
   const theme = useComponentTheme("Stepper");
   const { rootAttrs, rest } = composeRootAttrs(StepperBase, props, theme, {
-    stateAttrs: ({ orientation: orientation2 = DEFAULT_ORIENTATION3, mode: mode2 = DEFAULT_MODE2, size = DEFAULT_SIZE14, linear: linear2 = false, reverse = false }) => ({
+    stateAttrs: ({ orientation: orientation2 = DEFAULT_ORIENTATION3, mode: mode2 = DEFAULT_MODE3, size = DEFAULT_SIZE15, linear: linear2 = false, reverse = false }) => ({
       "data-orientation": orientation2,
       "data-mode": mode2,
       "data-size": size,
@@ -3564,7 +4284,7 @@ var Stepper = (props) => {
     onActiveChange,
     onStepClick,
     orientation = DEFAULT_ORIENTATION3,
-    mode = DEFAULT_MODE2,
+    mode = DEFAULT_MODE3,
     // Consumed only as root data-* hooks above; destructured so the <ol>
     // doesn't receive unknown DOM attributes.
     size: _size,
@@ -3681,7 +4401,7 @@ var StepperTitle = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...nativeProps, ...rootAttrs, ref, children });
 };
 StepperTitle.displayName = "Stepper.Title";
-var visuallyHidden = {
+var visuallyHidden2 = {
   position: "absolute",
   width: 1,
   height: 1,
@@ -3767,7 +4487,7 @@ var StepperItem = (props) => {
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", ...indicatorAttrs, children: indicatorContent }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { ...contentAttrs, children }),
-          statusLabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: visuallyHidden, children: `, ${statusLabel}` }) : null
+          statusLabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: visuallyHidden2, children: `, ${statusLabel}` }) : null
         ]
       }
     )
@@ -3818,12 +4538,12 @@ var SwitchBase = createComponentBase({
 var [SwitchProvider, useSwitchOwnContext] = createSafeContext("SwitchProvider");
 
 // src/components/switch/defaults.ts
-var DEFAULT_SIZE15 = "base";
+var DEFAULT_SIZE16 = "base";
 var DEFAULT_VARIANT9 = "info";
 var Switch = (props) => {
   const theme = useComponentTheme("Switch");
   const { rootAttrs, rest } = composeRootAttrs(SwitchBase, props, theme, {
-    stateAttrs: ({ size = DEFAULT_SIZE15, variant = DEFAULT_VARIANT9 }) => ({
+    stateAttrs: ({ size = DEFAULT_SIZE16, variant = DEFAULT_VARIANT9 }) => ({
       "data-size": size,
       "data-variant": variant
     })
@@ -3950,7 +4670,7 @@ var TableBase = createComponentBase({
 var [TableProvider, useTableContext] = createSafeContext("Table");
 
 // src/components/table/defaults.ts
-var DEFAULT_SIZE16 = "base";
+var DEFAULT_SIZE17 = "base";
 var DEFAULT_PAGE_SIZE = 10;
 var DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
 var DEFAULT_COLUMN_WIDTH = 150;
@@ -4476,7 +5196,7 @@ var Table = (props) => {
     // Visual vocabulary lives on the root so recipes cascade
     // to the portal-free table descendants. `data-loading` mirrors the
     // boolean-presence convention (rule 5).
-    stateAttrs: ({ size: size2 = DEFAULT_SIZE16, striped: striped2, bordered: bordered2, stickyHeader: stickyHeader2, loading: loading2 }) => ({
+    stateAttrs: ({ size: size2 = DEFAULT_SIZE17, striped: striped2, bordered: bordered2, stickyHeader: stickyHeader2, loading: loading2 }) => ({
       "data-size": size2,
       "data-striped": striped2 ? "" : void 0,
       "data-bordered": bordered2 ? "" : void 0,
@@ -4490,7 +5210,7 @@ var Table = (props) => {
     getRowId,
     manual = false,
     loading = false,
-    size = DEFAULT_SIZE16,
+    size = DEFAULT_SIZE17,
     striped = false,
     bordered = false,
     stickyHeader = false,
@@ -4690,19 +5410,19 @@ var TabsContentBase = createComponentBase({
 var [TabsOwnProvider, useTabsOwnContext] = createSafeContext("Tabs");
 
 // src/components/tabs/defaults.ts
-var DEFAULT_SIZE17 = "base";
+var DEFAULT_SIZE18 = "base";
 var DEFAULT_VARIANT10 = "primary";
 var DEFAULT_APPEARANCE8 = "basic";
 var Tabs = (props) => {
   const theme = useComponentTheme("Tabs");
   const { rootAttrs, rest } = composeRootAttrs(TabsBase, props, theme, {
-    stateAttrs: ({ size: size2 = DEFAULT_SIZE17, variant: variant2 = DEFAULT_VARIANT10, appearance: appearance2 = DEFAULT_APPEARANCE8 }) => ({
+    stateAttrs: ({ size: size2 = DEFAULT_SIZE18, variant: variant2 = DEFAULT_VARIANT10, appearance: appearance2 = DEFAULT_APPEARANCE8 }) => ({
       "data-size": size2,
       "data-variant": variant2,
       "data-type": appearance2
     })
   });
-  const { size = DEFAULT_SIZE17, variant = DEFAULT_VARIANT10, appearance = DEFAULT_APPEARANCE8, children, ref, ...sparProps } = rest;
+  const { size = DEFAULT_SIZE18, variant = DEFAULT_VARIANT10, appearance = DEFAULT_APPEARANCE8, children, ref, ...sparProps } = rest;
   return /* @__PURE__ */ jsxRuntime.jsx(TabsOwnProvider, { value: { size, variant, appearance }, children: /* @__PURE__ */ jsxRuntime.jsx(spar.Tabs, { ...sparProps, ...rootAttrs, ref, children }) });
 };
 Tabs.displayName = "Tabs";
@@ -5991,6 +6711,18 @@ var Upload2 = Object.assign(Upload, {
   ItemAction: UploadItemAction
 });
 
+Object.defineProperty(exports, "createDateMask", {
+  enumerable: true,
+  get: function () { return spar.createDateMask; }
+});
+Object.defineProperty(exports, "createNumberMask", {
+  enumerable: true,
+  get: function () { return spar.createNumberMask; }
+});
+Object.defineProperty(exports, "createTimeMask", {
+  enumerable: true,
+  get: function () { return spar.createTimeMask; }
+});
 Object.defineProperty(exports, "createToaster", {
   enumerable: true,
   get: function () { return spar.createToaster; }
@@ -6000,6 +6732,7 @@ exports.Alert = Alert2;
 exports.Badge = Badge;
 exports.Breadcrumb = Breadcrumb2;
 exports.Button = Button;
+exports.Calendar = Calendar;
 exports.Card = Card2;
 exports.Checkbox = Checkbox2;
 exports.Chip = Chip;
@@ -6028,4 +6761,5 @@ exports.Tooltip = Tooltip2;
 exports.Upload = Upload2;
 exports.getExportRows = getExportRows;
 exports.useComponentTheme = useComponentTheme;
+exports.useDatePicker = useDatePicker;
 exports.useTheme = useTheme;