@takeoff-ui/react-spar 0.4.0 → 0.5.0

package/dist/index.mjs

@@ -1,12 +1,16 @@
 import { createContext, Children, isValidElement, useMemo, useRef, useState, useCallback, useEffect, useId, createElement, useContext, Fragment as Fragment$1 } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Accordion as Accordion$1, AccordionContent as AccordionContent$1, useAccordionItemContext, AccordionTrigger as AccordionTrigger$1, AccordionHeader as AccordionHeader$1, AccordionItem as AccordionItem$1, Breadcrumb as Breadcrumb$1, BreadcrumbSeparator as BreadcrumbSeparator$1, BreadcrumbPage as BreadcrumbPage$1, BreadcrumbLink as BreadcrumbLink$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbList as BreadcrumbList$1, Checkbox as Checkbox$1, Dialog as Dialog$1, DialogClose as DialogClose$1, DialogDescription as DialogDescription$1, DialogTitle as DialogTitle$1, DialogContent, DialogOverlay as DialogOverlay$1, DialogTrigger as DialogTrigger$1, DropdownMenu, DropdownMenuArrow, DropdownMenuSeparator, DropdownMenuLabel, DropdownMenuGroup, DropdownMenuItem, DropdownMenuViewport, useDropdownMenuContext, DropdownMenuContent, DropdownMenuTrigger, Field as Field$1, FieldErrorMessage as FieldErrorMessage$1, FieldDescription as FieldDescription$1, useFieldContext, FieldLabel as FieldLabel$1, Input as Input$1, useInputContext, InputField as InputField$1, Radio as Radio$1, RadioItem as RadioItem$1, Popover as Popover$1, PopoverClose as PopoverClose$1, PopoverArrow as PopoverArrow$1, PopoverContent as PopoverContent$1, PopoverTrigger as PopoverTrigger$1, useOptionalFieldContext, Select as Select$1, SelectArrow as SelectArrow$1, SelectSeparator as SelectSeparator$1, SelectLabel as SelectLabel$1, SelectGroup as SelectGroup$1, SelectItem as SelectItem$1, SelectViewport as SelectViewport$1, useSelectContext, SelectContent as SelectContent$1, SelectTrigger as SelectTrigger$1, Switch as Switch$1, Tabs as Tabs$1, TabsContent as TabsContent$1, TabsTrigger as TabsTrigger$1, TabsList as TabsList$1, Tooltip as Tooltip$1, TooltipArrow as TooltipArrow$1, TooltipContent as TooltipContent$1, TooltipTrigger as TooltipTrigger$1, TooltipProvider as TooltipProvider$1, Button as Button$1, Label as Label$1, Toast as Toast$1, Toaster as Toaster$1 } from '@turkish-technology/spar';
-export { createToaster } from '@turkish-technology/spar';
+export { createDateMask, createNumberMask, createTimeMask, createToaster } from '@turkish-technology/spar';
 import { clsx } from 'clsx';
 import { ChevronBottomIconOutlinedRounded } from '@takeoff-icons/react/chevron-bottom';
 import { ChevronTopIconOutlinedRounded } from '@takeoff-icons/react/chevron-top';
 import { CloseIconOutlinedRounded } from '@takeoff-icons/react/close';
 import { ChevronRightIconOutlinedRounded } from '@takeoff-icons/react/chevron-right';
+import { ChevronLeftIconOutlinedRounded } from '@takeoff-icons/react/chevron-left';
+import { DoubleChevronLeftIconOutlinedRounded } from '@takeoff-icons/react/double-chevron-left';
+import { DoubleChevronRightIconOutlinedRounded } from '@takeoff-icons/react/double-chevron-right';
+import { UI, DayFlag, SelectionState, Animation, DayPicker, MonthCaption, useDayPicker, CaptionLabel, MonthGrid, DayButton, DateLib, defaultLocale, PreviousMonthButton, NextMonthButton, Footer, Day, WeekNumberHeader, WeekNumber, Week, Weeks, Weekday, Weekdays, Dropdown as Dropdown$1, DropdownNav, Month, Months } from 'react-day-picker';
 import { CheckIconOutlinedRounded } from '@takeoff-icons/react/check';
 import { RemoveIconOutlinedRounded } from '@takeoff-icons/react/remove';
 import { InfoIconFilledRounded } from '@takeoff-icons/react/info';
@@ -18,9 +22,6 @@ import { ArrowBottomIconOutlinedRounded } from '@takeoff-icons/react/arrow-botto
 import { ArrowTopIconOutlinedRounded } from '@takeoff-icons/react/arrow-top';
 import { SwapIconOutlinedRounded } from '@takeoff-icons/react/swap';
 import { SearchIconOutlinedRounded } from '@takeoff-icons/react/search';
-import { ChevronLeftIconOutlinedRounded } from '@takeoff-icons/react/chevron-left';
-import { DoubleChevronLeftIconOutlinedRounded } from '@takeoff-icons/react/double-chevron-left';
-import { DoubleChevronRightIconOutlinedRounded } from '@takeoff-icons/react/double-chevron-right';
 import { ArrowDownloadIconOutlinedRounded } from '@takeoff-icons/react/arrow-download';
 import { CheckCircleIconFilledRounded } from '@takeoff-icons/react/check-circle';
 import { CloseCircleIconFilledRounded } from '@takeoff-icons/react/close-circle';
@@ -257,6 +258,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 = useMemo(
+    () => format ?? ((value2) => `${pad(value2.getDate())}${delimiter}${pad(value2.getMonth() + 1)}${delimiter}${value2.getFullYear()}`),
+    [format, delimiter]
+  );
+  const [value, setValueState] = useState(defaultValue);
+  const [text, setText] = useState(() => defaultValue ? formatDate(defaultValue) : "");
+  const [open, setOpen] = useState(false);
+  const mask = useMemo(
+    () => ({
+      date: true,
+      delimiter,
+      ...min ? { dateMin: toISODate(min) } : {},
+      ...max ? { dateMax: toISODate(max) } : {}
+    }),
+    [delimiter, min, max]
+  );
+  const commit = useCallback(
+    (next) => {
+      setValueState(next);
+      setText(next ? formatDate(next) : "");
+      onValueChange?.(next);
+    },
+    [formatDate, onValueChange]
+  );
+  const handleTyped = 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 = useCallback((event) => {
+    if (event.key !== "ArrowDown") return;
+    event.preventDefault();
+    setOpen(true);
+  }, []);
+  const handlePicked = 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");
@@ -718,6 +791,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: UI.Root,
+  months: UI.Months,
+  month: UI.Month,
+  nav: UI.Nav,
+  previousMonthButton: UI.PreviousMonthButton,
+  nextMonthButton: UI.NextMonthButton,
+  chevron: UI.Chevron,
+  monthCaption: UI.MonthCaption,
+  captionLabel: UI.CaptionLabel,
+  dropdowns: UI.Dropdowns,
+  dropdownRoot: UI.DropdownRoot,
+  dropdown: UI.Dropdown,
+  monthGrid: UI.MonthGrid,
+  weekdays: UI.Weekdays,
+  weekday: UI.Weekday,
+  weeks: UI.Weeks,
+  week: UI.Week,
+  weekNumber: UI.WeekNumber,
+  weekNumberHeader: UI.WeekNumberHeader,
+  day: UI.Day,
+  dayButton: UI.DayButton,
+  footer: UI.Footer
+};
+var ENGINE_CLASSNAME_RESET = Object.fromEntries(
+  [...Object.values(UI), ...Object.values(DayFlag), ...Object.values(SelectionState), ...Object.values(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 = 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__ */ jsx(Component, { ...mergeSlotAttrs(attrsRef.current[slot], props) });
+    Slotted.displayName = `Calendar.${slot}`;
+    return Slotted;
+  };
+  const Root = ({ rootRef, ...engineProps }) => /* @__PURE__ */ 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" ? ChevronLeftIconOutlinedRounded : orientation === "right" ? ChevronRightIconOutlinedRounded : orientation === "up" ? ChevronTopIconOutlinedRounded : ChevronBottomIconOutlinedRounded;
+    const { disabled: _disabled, ...svgProps } = engineProps;
+    return /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", ...mergeSlotAttrs(attrsRef.current.chevron, { ...svgProps, width: size, height: size }) });
+  };
+  Chevron.displayName = "Calendar.chevron";
+  const useDisplayedMonth = () => {
+    const { months, dayPickerProps } = useDayPicker();
+    const first = dayPickerProps.reverseMonths ? months[months.length - 1] : months[0];
+    return first?.date ?? /* @__PURE__ */ new Date();
+  };
+  const useDateLib = () => {
+    const { locale, timeZone, numerals, dateLib } = useDayPicker().dayPickerProps;
+    return useMemo(
+      // The same merge the engine makes, so a partial `locale` still resolves
+      // against `en-US` rather than leaving fields undefined.
+      () => new DateLib({ locale: { ...defaultLocale, ...locale }, timeZone, numerals }, dateLib),
+      [locale, timeZone, numerals, dateLib]
+    );
+  };
+  const MonthCaption$1 = ({ calendarMonth, displayIndex, ...engineProps }) => /* @__PURE__ */ jsx(CaptionMonthContext.Provider, { value: calendarMonth.date, children: /* @__PURE__ */ jsx(
+    MonthCaption,
+    {
+      calendarMonth,
+      displayIndex,
+      ...mergeSlotAttrs(attrsRef.current.monthCaption, engineProps)
+    }
+  ) });
+  MonthCaption$1.displayName = "Calendar.monthCaption";
+  const CaptionLabel$1 = ({ children, ...engineProps }) => {
+    const { triggersEnabled, view, setView, navigationDisabled, panelId, pendingFocusRef, restoreRef } = viewRef.current;
+    const { formatters, labels } = useDayPicker();
+    const caption = 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__ */ jsx(CaptionLabel, { ...slotProps, children });
+    const trigger = (target, label, describe) => {
+      const opens = view !== target;
+      const disabled = navigationDisabled && opens;
+      return /* @__PURE__ */ 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__ */ jsxs(
+      CaptionLabel,
+      {
+        ...slotProps,
+        role: void 0,
+        "aria-live": void 0,
+        children: [
+          trigger("month", monthLabel, labels.labelMonthDropdown()),
+          trigger("year", yearLabel, labels.labelYearDropdown()),
+          /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", style: visuallyHidden, children: view === "day" ? `${monthLabel} ${yearLabel}` : view === "month" ? labels.labelMonthDropdown() : labels.labelYearDropdown() })
+        ]
+      }
+    );
+  };
+  CaptionLabel$1.displayName = "Calendar.captionLabel";
+  const MonthGrid$1 = ({ children, ...engineProps }) => {
+    const { view, setView, navigationDisabled, minDate, maxDate, panelId, panelRef, pendingFocusRef, restoreRef } = viewRef.current;
+    const { dayPickerProps, formatters, goToMonth, labels } = useDayPicker();
+    const displayed = useDisplayedMonth();
+    const dateLib = useDateLib();
+    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__ */ jsx(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__ */ 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__ */ 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__ */ 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$1.displayName = "Calendar.monthGrid";
+  const aroundArrow = (slot) => {
+    const Engine = slot === "previousMonthButton" ? PreviousMonthButton : NextMonthButton;
+    const Arrow = ({ children, ...engineProps }) => {
+      const { view, navigationDisabled, minDate, maxDate } = viewRef.current;
+      const { formatters, goToMonth } = useDayPicker();
+      const displayed = useDisplayedMonth();
+      const dateLib = useDateLib();
+      const slotProps = mergeSlotAttrs(attrsRef.current[slot], engineProps);
+      if (view !== "year") return /* @__PURE__ */ 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__ */ 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 } = 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") ? PreviousMonthButton : NextMonthButton;
+      return /* @__PURE__ */ jsx(
+        Button2,
+        {
+          type: "button",
+          ...mergeSlotAttrs(attrsRef.current[slot], {
+            "className": engineOwned ? engineClassNames[slot === "previousMonthButton" ? UI.PreviousMonthButton : 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__ */ jsx(components.Chevron, { orientation, className: engineClassNames[UI.Chevron] });
+    const doubleChevron = (Icon) => /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", ...mergeSlotAttrs(attrsRef.current.chevron, { className: engineClassNames[UI.Chevron] }) });
+    return /* @__PURE__ */ jsxs("nav", { ...navAttrs, children: [
+      triggersEnabled && arrow("previousYearButton", -doubleStep, doubleGrain, doubleChevron(DoubleChevronLeftIconOutlinedRounded)),
+      arrow("previousMonthButton", -singleStep, singleGrain, chevron("left")),
+      arrow("nextMonthButton", singleStep, singleGrain, chevron("right")),
+      triggersEnabled && arrow("nextYearButton", doubleStep, doubleGrain, doubleChevron(DoubleChevronRightIconOutlinedRounded))
+    ] });
+  };
+  Nav.displayName = "Calendar.nav";
+  const DayButton$1 = ({ day, modifiers, children, ...engineProps }) => {
+    const slotProps = mergeSlotAttrs(attrsRef.current.dayButton, engineProps);
+    return /* @__PURE__ */ jsx(DayButton, { ...slotProps, day, modifiers, children: renderDayRef.current ? renderDayRef.current(day.date, modifiers) : children });
+  };
+  DayButton$1.displayName = "Calendar.dayButton";
+  return {
+    Root,
+    Chevron,
+    CaptionLabel: CaptionLabel$1,
+    MonthCaption: MonthCaption$1,
+    MonthGrid: MonthGrid$1,
+    Nav,
+    Months: withSlot(Months, "months"),
+    Month: withSlot(Month, "month"),
+    PreviousMonthButton: aroundArrow("previousMonthButton"),
+    NextMonthButton: aroundArrow("nextMonthButton"),
+    DropdownNav: withSlot(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(Dropdown$1, "dropdown"),
+    Weekdays: withSlot(Weekdays, "weekdays"),
+    Weekday: withSlot(Weekday, "weekday"),
+    Weeks: withSlot(Weeks, "weeks"),
+    Week: withSlot(Week, "week"),
+    WeekNumber: withSlot(WeekNumber, "weekNumber"),
+    WeekNumberHeader: withSlot(WeekNumberHeader, "weekNumberHeader"),
+    Day: withSlot(Day, "day"),
+    DayButton: DayButton$1,
+    Footer: withSlot(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] = 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] = useState(void 0);
+  const displayedMonthRef = useRef(void 0);
+  const anchorYear = anchor?.getFullYear();
+  const anchorMonth = anchor?.getMonth();
+  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] = useState(viewProp ?? defaultView);
+  const view = isViewControlled ? props.view : uncontrolledView;
+  const setView = (next) => {
+    if (!isViewControlled) setUncontrolledView(next);
+    onViewChange?.(next);
+  };
+  const panelId = useId();
+  const panelRef = useRef(null);
+  const restoreRef = useRef(null);
+  const pendingFocusRef = useRef(false);
+  const navigationDisabled = Boolean(engine.disableNavigation);
+  const viewState = { triggersEnabled, view, setView, navigationDisabled, minDate, maxDate, panelId, panelRef, restoreRef, pendingFocusRef };
+  const viewRef = 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 = useRef(slotAttrs);
+  attrsRef.current = slotAttrs;
+  const refRef = useRef(ref);
+  refRef.current = ref;
+  const renderDayRef = useRef(renderDay);
+  renderDayRef.current = renderDay;
+  const components = 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__ */ jsx(DayPicker, { ...engineProps });
+};
+Calendar.displayName = "Calendar";
+
 // src/components/card/base.ts
 var CardBase = createComponentBase({
   name: "Card",
@@ -759,12 +1476,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
     })
   });
@@ -842,11 +1559,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
     })
   });
@@ -938,13 +1655,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] = 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,
@@ -1051,15 +1768,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__ */ jsx(DrawerProvider, { value: { placement, dismissible }, children: /* @__PURE__ */ jsx(Dialog$1, { ...sparProps, disabled, forceMount: true, children }) });
+  const { placement = DEFAULT_PLACEMENT, dismissible = true, disabled = false, forceMount = true, children, ...sparProps } = merged;
+  return /* @__PURE__ */ jsx(DrawerProvider, { value: { placement, dismissible }, children: /* @__PURE__ */ jsx(Dialog$1, { ...sparProps, disabled, forceMount, children }) });
 };
 Drawer.displayName = "Drawer";
 
@@ -1154,7 +1871,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
     })
   });
@@ -1303,7 +2020,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) => {
@@ -1335,7 +2052,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
     })
   });
@@ -1442,12 +2159,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__ */ jsx(DropdownProvider, { value: { size, contentWidth }, children: /* @__PURE__ */ jsx(DropdownMenu, { ...sparProps, children }) });
 };
 Dropdown.displayName = "Dropdown";
@@ -1739,7 +2456,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;
@@ -1791,11 +2508,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 = useMemo(
     () => ({
       size,
@@ -2019,7 +2736,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 } = rest;
+  const { as, ref, type, onInput, onChange, onValueChange, ...spar } = rest;
   const effectiveType = type === "password" && revealed ? "text" : type;
   const renderedType = as === "textarea" ? void 0 : effectiveType;
   const setFieldRef = useCallback(
@@ -2048,6 +2765,10 @@ var InputField = (props) => {
     onChange?.(event);
     setFieldValue(event.currentTarget.value);
   };
+  const handleValueChange = (value, meta) => {
+    setFieldValue(value);
+    onValueChange?.(value, meta);
+  };
   return /* @__PURE__ */ jsx(
     InputField$1,
     {
@@ -2056,6 +2777,7 @@ var InputField = (props) => {
       type: renderedType,
       onInput: handleInput,
       onChange: handleChange,
+      onValueChange: handleValueChange,
       ref: setFieldRef,
       ...rootAttrs
     }
@@ -2188,8 +2910,6 @@ var InputTrailingIcon = (props) => {
   return /* @__PURE__ */ 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,
@@ -2251,19 +2971,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
@@ -2461,7 +3181,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;
@@ -2542,7 +3262,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 });
@@ -2686,17 +3406,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__ */ jsx(SelectProvider, { value: { size, invalid, contentWidth }, children: /* @__PURE__ */ jsx(Select$1, { ...sparProps, ref, ...rootAttrs, children }) });
 };
 Select.displayName = "Select";
@@ -2856,7 +3576,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";
@@ -3156,7 +3876,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,
@@ -3444,7 +4164,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;
@@ -3483,7 +4203,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
@@ -3540,8 +4260,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";
@@ -3549,7 +4269,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,
@@ -3563,7 +4283,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,
@@ -3680,7 +4400,7 @@ var StepperTitle = (props) => {
   return /* @__PURE__ */ jsx(Component, { ...nativeProps, ...rootAttrs, ref, children });
 };
 StepperTitle.displayName = "Stepper.Title";
-var visuallyHidden = {
+var visuallyHidden2 = {
   position: "absolute",
   width: 1,
   height: 1,
@@ -3766,7 +4486,7 @@ var StepperItem = (props) => {
         children: [
           /* @__PURE__ */ jsx("span", { "aria-hidden": "true", ...indicatorAttrs, children: indicatorContent }),
           /* @__PURE__ */ jsx("span", { ...contentAttrs, children }),
-          statusLabel ? /* @__PURE__ */ jsx("span", { style: visuallyHidden, children: `, ${statusLabel}` }) : null
+          statusLabel ? /* @__PURE__ */ jsx("span", { style: visuallyHidden2, children: `, ${statusLabel}` }) : null
         ]
       }
     )
@@ -3817,12 +4537,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
     })
@@ -3949,7 +4669,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;
@@ -4475,7 +5195,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,
@@ -4489,7 +5209,7 @@ var Table = (props) => {
     getRowId,
     manual = false,
     loading = false,
-    size = DEFAULT_SIZE16,
+    size = DEFAULT_SIZE17,
     striped = false,
     bordered = false,
     stickyHeader = false,
@@ -4689,19 +5409,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__ */ jsx(TabsOwnProvider, { value: { size, variant, appearance }, children: /* @__PURE__ */ jsx(Tabs$1, { ...sparProps, ...rootAttrs, ref, children }) });
 };
 Tabs.displayName = "Tabs";
@@ -5990,4 +6710,4 @@ var Upload2 = Object.assign(Upload, {
   ItemAction: UploadItemAction
 });
 
-export { Accordion2 as Accordion, Alert2 as Alert, Badge, Breadcrumb2 as Breadcrumb, Button, Card2 as Card, Checkbox2 as Checkbox, Chip, Dialog2 as Dialog, Divider, Drawer2 as Drawer, Dropdown2 as Dropdown, Field2 as Field, Input2 as Input, Label, Popover2 as Popover, Progress2 as Progress, Radio2 as Radio, Select2 as Select, Skeleton, Slider2 as Slider, Spinner, Stepper2 as Stepper, Switch2 as Switch, Table, Tabs2 as Tabs, TakeoffSparProvider, Toast, Toaster, Tooltip2 as Tooltip, Upload2 as Upload, getExportRows, useComponentTheme, useTheme };
+export { Accordion2 as Accordion, Alert2 as Alert, Badge, Breadcrumb2 as Breadcrumb, Button, Calendar, Card2 as Card, Checkbox2 as Checkbox, Chip, Dialog2 as Dialog, Divider, Drawer2 as Drawer, Dropdown2 as Dropdown, Field2 as Field, Input2 as Input, Label, Popover2 as Popover, Progress2 as Progress, Radio2 as Radio, Select2 as Select, Skeleton, Slider2 as Slider, Spinner, Stepper2 as Stepper, Switch2 as Switch, Table, Tabs2 as Tabs, TakeoffSparProvider, Toast, Toaster, Tooltip2 as Tooltip, Upload2 as Upload, getExportRows, useComponentTheme, useDatePicker, useTheme };