@vesture/react 0.2.0 → 0.2.1

package/dist/index.js

@@ -1712,6 +1712,914 @@ function DataGrid({
   ] });
 }
 
+// src/components/Calendar/Calendar.tsx
+import { useEffect as useEffect2, useMemo as useMemo3, useRef as useRef4, useState as useState9 } from "react";
+
+// src/components/Calendar/Calendar.css.ts
+var dayButton = "Calendar_dayButton__1uy43my8";
+var dayCell = "Calendar_dayCell__1uy43my7";
+var grid = "Calendar_grid__1uy43my4";
+var header = "Calendar_header__1uy43my1";
+var monthLabel = "Calendar_monthLabel__1uy43my2";
+var navButton = "Calendar_navButton__1uy43my3";
+var root2 = "Calendar_root__1uy43my0";
+var weekRow = "Calendar_weekRow__1uy43my5";
+var weekdayCell = "Calendar_weekdayCell__1uy43my6";
+
+// src/components/Calendar/Calendar.tsx
+import { jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
+function startOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function endOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+}
+function addDays(date, amount) {
+  const next = new Date(date);
+  next.setDate(next.getDate() + amount);
+  return next;
+}
+function addMonths(date, amount) {
+  const next = new Date(date);
+  next.setMonth(next.getMonth() + amount);
+  return next;
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function isSameMonth(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+function clampToMidnight(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function startOfWeek(date, weekStartsOn) {
+  const diff = (date.getDay() - weekStartsOn + 7) % 7;
+  return addDays(date, -diff);
+}
+function endOfWeek(date, weekStartsOn) {
+  return addDays(startOfWeek(date, weekStartsOn), 6);
+}
+function dateKey(date) {
+  return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+}
+function getCalendarWeeks(month, weekStartsOn) {
+  const gridStart = startOfWeek(startOfMonth(month), weekStartsOn);
+  const gridEnd = endOfWeek(endOfMonth(month), weekStartsOn);
+  const weeks = [];
+  let cursor = gridStart;
+  while (cursor <= gridEnd) {
+    const week = [];
+    for (let i = 0; i < 7; i++) {
+      week.push(cursor);
+      cursor = addDays(cursor, 1);
+    }
+    weeks.push(week);
+  }
+  return weeks;
+}
+function isDateDisabledBy(date, minDate, maxDate, isDateDisabled) {
+  const target = clampToMidnight(date);
+  if (minDate && target < clampToMidnight(minDate)) return true;
+  if (maxDate && target > clampToMidnight(maxDate)) return true;
+  if (isDateDisabled?.(target)) return true;
+  return false;
+}
+function findEnabledDate(date, direction2, minDate, maxDate, isDateDisabled) {
+  let cursor = date;
+  for (let i = 0; i < 366; i++) {
+    if (!isDateDisabledBy(cursor, minDate, maxDate, isDateDisabled)) {
+      return cursor;
+    }
+    cursor = addDays(cursor, direction2);
+  }
+  return null;
+}
+function getFocusableDate(month, value, minDate, maxDate, isDateDisabled) {
+  if (value && isSameMonth(value, month) && !isDateDisabledBy(value, minDate, maxDate, isDateDisabled)) {
+    return clampToMidnight(value);
+  }
+  const today = clampToMidnight(/* @__PURE__ */ new Date());
+  if (isSameMonth(today, month) && !isDateDisabledBy(today, minDate, maxDate, isDateDisabled)) {
+    return today;
+  }
+  const firstEnabled = findEnabledDate(
+    startOfMonth(month),
+    1,
+    minDate,
+    maxDate,
+    isDateDisabled
+  );
+  if (firstEnabled && isSameMonth(firstEnabled, month)) {
+    return firstEnabled;
+  }
+  return startOfMonth(month);
+}
+function Calendar({
+  value: controlledValue,
+  defaultValue = null,
+  onChange,
+  month: controlledMonth,
+  onMonthChange,
+  minDate,
+  maxDate,
+  isDateDisabled,
+  weekStartsOn = 1,
+  locale = "en-US",
+  rangeEnd
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = useState9(
+    defaultValue
+  );
+  const value = controlledValue !== void 0 ? controlledValue : uncontrolledValue;
+  const setValue = (next) => {
+    if (controlledValue === void 0) {
+      setUncontrolledValue(next);
+    }
+    onChange?.(next);
+  };
+  const [uncontrolledMonth, setUncontrolledMonth] = useState9(
+    () => startOfMonth(controlledMonth ?? value ?? /* @__PURE__ */ new Date())
+  );
+  const month = controlledMonth !== void 0 ? startOfMonth(controlledMonth) : uncontrolledMonth;
+  const setMonth = (next) => {
+    const normalized = startOfMonth(next);
+    if (controlledMonth === void 0) {
+      setUncontrolledMonth(normalized);
+    }
+    onMonthChange?.(normalized);
+  };
+  const [rovingDate, setRovingDate] = useState9(
+    () => getFocusableDate(month, value, minDate, maxDate, isDateDisabled)
+  );
+  const shouldFocusRef = useRef4(false);
+  const dayRefs = useRef4(/* @__PURE__ */ new Map());
+  useEffect2(() => {
+    setRovingDate((prev) => {
+      if (isSameMonth(prev, month)) return prev;
+      return getFocusableDate(month, value, minDate, maxDate, isDateDisabled);
+    });
+  }, [month]);
+  useEffect2(() => {
+    if (!shouldFocusRef.current) return;
+    shouldFocusRef.current = false;
+    dayRefs.current.get(dateKey(rovingDate))?.focus();
+  }, [rovingDate, month]);
+  const weeks = useMemo3(
+    () => getCalendarWeeks(month, weekStartsOn),
+    [month, weekStartsOn]
+  );
+  const today = useMemo3(() => clampToMidnight(/* @__PURE__ */ new Date()), []);
+  const monthLabelFormatter = useMemo3(
+    () => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }),
+    [locale]
+  );
+  const weekdayFormatter = useMemo3(
+    () => new Intl.DateTimeFormat(locale, { weekday: "short" }),
+    [locale]
+  );
+  const handleDayClick = (date, disabled, inMonth) => {
+    if (disabled) return;
+    if (!inMonth) {
+      setMonth(startOfMonth(date));
+      return;
+    }
+    const normalized = clampToMidnight(date);
+    setValue(normalized);
+    setRovingDate(normalized);
+  };
+  const handleKeyDown = (event, date) => {
+    let targetRaw;
+    let direction2;
+    switch (event.key) {
+      case "ArrowLeft":
+        targetRaw = addDays(date, -1);
+        direction2 = -1;
+        break;
+      case "ArrowRight":
+        targetRaw = addDays(date, 1);
+        direction2 = 1;
+        break;
+      case "ArrowUp":
+        targetRaw = addDays(date, -7);
+        direction2 = -1;
+        break;
+      case "ArrowDown":
+        targetRaw = addDays(date, 7);
+        direction2 = 1;
+        break;
+      case "Home":
+        targetRaw = startOfWeek(date, weekStartsOn);
+        direction2 = -1;
+        break;
+      case "End":
+        targetRaw = endOfWeek(date, weekStartsOn);
+        direction2 = 1;
+        break;
+      case "PageUp":
+        targetRaw = addMonths(date, -1);
+        direction2 = -1;
+        break;
+      case "PageDown":
+        targetRaw = addMonths(date, 1);
+        direction2 = 1;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    const target = findEnabledDate(
+      targetRaw,
+      direction2,
+      minDate,
+      maxDate,
+      isDateDisabled
+    );
+    if (!target) return;
+    shouldFocusRef.current = true;
+    setRovingDate(target);
+    if (!isSameMonth(target, month)) {
+      setMonth(startOfMonth(target));
+    }
+  };
+  const monthLabelText = monthLabelFormatter.format(month);
+  const clampedValue = value ? clampToMidnight(value) : null;
+  const clampedRangeEnd = rangeEnd ? clampToMidnight(rangeEnd) : null;
+  return /* @__PURE__ */ jsxs18("div", { className: root2, role: "application", "aria-label": monthLabelText, children: [
+    /* @__PURE__ */ jsxs18("div", { className: header, children: [
+      /* @__PURE__ */ jsx35(
+        "button",
+        {
+          type: "button",
+          className: navButton,
+          onClick: () => setMonth(addMonths(month, -1)),
+          "aria-label": "Previous month",
+          children: "\u2039"
+        }
+      ),
+      /* @__PURE__ */ jsx35("span", { className: monthLabel, children: monthLabelText }),
+      /* @__PURE__ */ jsx35(
+        "button",
+        {
+          type: "button",
+          className: navButton,
+          onClick: () => setMonth(addMonths(month, 1)),
+          "aria-label": "Next month",
+          children: "\u203A"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs18("div", { className: grid, role: "grid", "aria-label": monthLabelText, children: [
+      /* @__PURE__ */ jsx35("div", { className: weekRow, role: "row", children: weeks[0].map((date) => /* @__PURE__ */ jsx35(
+        "div",
+        {
+          className: weekdayCell,
+          role: "columnheader",
+          children: weekdayFormatter.format(date)
+        },
+        dateKey(date)
+      )) }),
+      weeks.map((week, weekIndex) => /* @__PURE__ */ jsx35("div", { className: weekRow, role: "row", children: week.map((date) => {
+        const inMonth = isSameMonth(date, month);
+        const disabled = isDateDisabledBy(
+          date,
+          minDate,
+          maxDate,
+          isDateDisabled
+        );
+        const isRangeEndDay = clampedRangeEnd ? isSameDay(date, clampedRangeEnd) : false;
+        const selected = (clampedValue ? isSameDay(date, clampedValue) : false) || isRangeEndDay;
+        const inRange = Boolean(
+          clampedValue && clampedRangeEnd && date > clampedValue && date < clampedRangeEnd
+        );
+        const isToday = isSameDay(date, today);
+        const tabIndex = inMonth && !disabled && isSameDay(date, rovingDate) ? 0 : -1;
+        return /* @__PURE__ */ jsx35("div", { className: dayCell, role: "gridcell", children: /* @__PURE__ */ jsx35(
+          "button",
+          {
+            type: "button",
+            ref: (el) => {
+              if (el) {
+                dayRefs.current.set(dateKey(date), el);
+              } else {
+                dayRefs.current.delete(dateKey(date));
+              }
+            },
+            className: dayButton,
+            "data-outside": !inMonth || void 0,
+            "data-today": isToday || void 0,
+            "data-selected": selected || void 0,
+            "data-in-range": inRange || void 0,
+            disabled,
+            tabIndex,
+            "aria-selected": selected || void 0,
+            "aria-current": isToday ? "date" : void 0,
+            "aria-disabled": disabled || void 0,
+            "aria-label": date.toDateString(),
+            onClick: () => handleDayClick(date, disabled, inMonth),
+            onKeyDown: inMonth ? (e) => handleKeyDown(e, date) : void 0,
+            children: date.getDate()
+          }
+        ) }, dateKey(date));
+      }) }, weekIndex))
+    ] })
+  ] });
+}
+
+// src/components/DatePicker/DatePicker.tsx
+import { useEffect as useEffect3, useRef as useRef5, useState as useState10 } from "react";
+import {
+  FloatingFocusManager as FloatingFocusManager4,
+  FloatingPortal as FloatingPortal5,
+  autoUpdate as autoUpdate4,
+  flip as flip4,
+  offset as offset4,
+  shift as shift4,
+  useDismiss as useDismiss5,
+  useFloating as useFloating5,
+  useInteractions as useInteractions5,
+  useRole as useRole5
+} from "@floating-ui/react";
+
+// src/components/DatePicker/DatePicker.css.ts
+var dateInput = "DatePicker_dateInput__d7uy1a1";
+var iconButton2 = "DatePicker_iconButton__d7uy1a2";
+var popover2 = "DatePicker_popover__d7uy1a3";
+var wrapper6 = "DatePicker_wrapper__d7uy1a0";
+
+// src/components/DatePicker/DatePicker.tsx
+import { jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
+function startOfMonth2(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function clampToMidnight2(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function isDisabled(date, minDate, maxDate, isDateDisabled) {
+  const target = clampToMidnight2(date);
+  if (minDate && target < clampToMidnight2(minDate)) return true;
+  if (maxDate && target > clampToMidnight2(maxDate)) return true;
+  if (isDateDisabled?.(target)) return true;
+  return false;
+}
+function getDatePartOrder(locale) {
+  const parts = new Intl.DateTimeFormat(locale).formatToParts(
+    new Date(2e3, 0, 2)
+  );
+  return parts.filter(
+    (part) => part.type === "month" || part.type === "day" || part.type === "year"
+  ).map((part) => part.type);
+}
+function getDatePlaceholder(locale) {
+  const parts = new Intl.DateTimeFormat(locale).formatToParts(
+    new Date(2e3, 0, 2)
+  );
+  return parts.map((part) => {
+    switch (part.type) {
+      case "month":
+        return "MM";
+      case "day":
+        return "DD";
+      case "year":
+        return "YYYY";
+      default:
+        return part.value;
+    }
+  }).join("");
+}
+function formatDate(date, locale) {
+  return new Intl.DateTimeFormat(locale).format(date);
+}
+function parseDate(text, locale) {
+  const numbers = text.match(/\d+/g);
+  if (!numbers || numbers.length < 3) return null;
+  const order = getDatePartOrder(locale);
+  if (order.length < 3) return null;
+  const values = {};
+  order.forEach((type, i) => {
+    values[type] = Number.parseInt(numbers[i], 10);
+  });
+  const { month, day, year } = values;
+  if (!month || !day || !year) return null;
+  const fullYear = year < 100 ? 2e3 + year : year;
+  const date = new Date(fullYear, month - 1, day);
+  if (date.getFullYear() !== fullYear || date.getMonth() !== month - 1 || date.getDate() !== day) {
+    return null;
+  }
+  return date;
+}
+function DatePicker({
+  value: controlledValue,
+  defaultValue = null,
+  onChange,
+  minDate,
+  maxDate,
+  isDateDisabled,
+  weekStartsOn = 1,
+  locale = "en-US",
+  placeholder,
+  disabled = false,
+  open: controlledOpen,
+  onOpenChange
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = useState10(
+    defaultValue
+  );
+  const value = controlledValue !== void 0 ? controlledValue : uncontrolledValue;
+  const setValue = (next) => {
+    if (controlledValue === void 0) {
+      setUncontrolledValue(next);
+    }
+    onChange?.(next);
+  };
+  const [uncontrolledOpen, setUncontrolledOpen] = useState10(false);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = onOpenChange ?? setUncontrolledOpen;
+  const [month, setMonth] = useState10(
+    () => startOfMonth2(value ?? /* @__PURE__ */ new Date())
+  );
+  const [inputText, setInputText] = useState10(
+    () => value ? formatDate(value, locale) : ""
+  );
+  const inputRef = useRef5(null);
+  useEffect3(() => {
+    setInputText(value ? formatDate(value, locale) : "");
+  }, [value, locale]);
+  useEffect3(() => {
+    if (open && value) {
+      setMonth(startOfMonth2(value));
+    }
+  }, [open]);
+  const { refs, floatingStyles, context } = useFloating5({
+    open,
+    onOpenChange: setOpen,
+    placement: "bottom-start",
+    whileElementsMounted: autoUpdate4,
+    middleware: [offset4(8), flip4(), shift4({ padding: 8 })]
+  });
+  const { getReferenceProps, getFloatingProps } = useInteractions5([
+    useDismiss5(context),
+    useRole5(context, { role: "dialog" })
+  ]);
+  const revertInputText = () => {
+    setInputText(value ? formatDate(value, locale) : "");
+  };
+  const commitTypedValue = () => {
+    const trimmed = inputText.trim();
+    if (!trimmed) {
+      if (value !== null) {
+        setValue(null);
+      }
+      return;
+    }
+    const parsed = parseDate(trimmed, locale);
+    if (!parsed || isDisabled(parsed, minDate, maxDate, isDateDisabled)) {
+      revertInputText();
+      return;
+    }
+    setValue(parsed);
+    setMonth(startOfMonth2(parsed));
+    setInputText(formatDate(parsed, locale));
+  };
+  const handleInputKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      commitTypedValue();
+    }
+  };
+  const handleCalendarChange = (date) => {
+    setValue(date);
+    setMonth(startOfMonth2(date));
+    setOpen(false);
+  };
+  const placeholderText = placeholder ?? getDatePlaceholder(locale);
+  return /* @__PURE__ */ jsxs19("div", { className: wrapper6, ref: refs.setReference, children: [
+    /* @__PURE__ */ jsx36(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        className: dateInput,
+        value: inputText,
+        placeholder: placeholderText,
+        disabled,
+        onChange: (e) => setInputText(e.target.value),
+        onBlur: commitTypedValue,
+        onKeyDown: handleInputKeyDown,
+        "aria-label": "Date"
+      }
+    ),
+    /* @__PURE__ */ jsx36(
+      "button",
+      {
+        type: "button",
+        className: iconButton2,
+        disabled,
+        "aria-label": open ? "Close calendar" : "Open calendar",
+        ...getReferenceProps({
+          onClick: () => {
+            if (disabled) return;
+            setOpen(!open);
+          }
+        }),
+        children: /* @__PURE__ */ jsxs19(
+          "svg",
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx36(
+                "rect",
+                {
+                  x: "1.5",
+                  y: "2.5",
+                  width: "13",
+                  height: "12",
+                  rx: "1.5",
+                  stroke: "currentColor",
+                  strokeWidth: "1.3"
+                }
+              ),
+              /* @__PURE__ */ jsx36("path", { d: "M1.5 6h13", stroke: "currentColor", strokeWidth: "1.3" }),
+              /* @__PURE__ */ jsx36(
+                "path",
+                {
+                  d: "M4.5 1v3M11.5 1v3",
+                  stroke: "currentColor",
+                  strokeWidth: "1.3",
+                  strokeLinecap: "round"
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    open ? /* @__PURE__ */ jsx36(FloatingPortal5, { children: /* @__PURE__ */ jsx36(
+      FloatingFocusManager4,
+      {
+        context,
+        modal: false,
+        returnFocus: inputRef,
+        children: /* @__PURE__ */ jsx36(
+          "div",
+          {
+            ref: refs.setFloating,
+            className: popover2,
+            style: floatingStyles,
+            ...getFloatingProps(),
+            children: /* @__PURE__ */ jsx36(
+              Calendar,
+              {
+                value,
+                onChange: handleCalendarChange,
+                month,
+                onMonthChange: setMonth,
+                minDate,
+                maxDate,
+                isDateDisabled,
+                weekStartsOn,
+                locale
+              }
+            )
+          }
+        )
+      }
+    ) }) : null
+  ] });
+}
+
+// src/components/DateRangePicker/DateRangePicker.tsx
+import { useEffect as useEffect4, useState as useState11 } from "react";
+import {
+  FloatingFocusManager as FloatingFocusManager5,
+  FloatingPortal as FloatingPortal6,
+  autoUpdate as autoUpdate5,
+  flip as flip5,
+  offset as offset5,
+  shift as shift5,
+  useDismiss as useDismiss6,
+  useFloating as useFloating6,
+  useInteractions as useInteractions6,
+  useRole as useRole6
+} from "@floating-ui/react";
+
+// src/components/DateRangePicker/DateRangePicker.css.ts
+var dateInput2 = "DateRangePicker_dateInput__11t25r41";
+var iconButton3 = "DateRangePicker_iconButton__11t25r43";
+var popover3 = "DateRangePicker_popover__11t25r44";
+var separator2 = "DateRangePicker_separator__11t25r42";
+var wrapper7 = "DateRangePicker_wrapper__11t25r40";
+
+// src/components/DateRangePicker/DateRangePicker.tsx
+import { jsx as jsx37, jsxs as jsxs20 } from "react/jsx-runtime";
+function startOfMonth3(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function clampToMidnight3(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function compareDates(a, b) {
+  const x = clampToMidnight3(a).getTime();
+  const y = clampToMidnight3(b).getTime();
+  if (x < y) return -1;
+  if (x > y) return 1;
+  return 0;
+}
+function isDisabled2(date, minDate, maxDate, isDateDisabled) {
+  const target = clampToMidnight3(date);
+  if (minDate && target < clampToMidnight3(minDate)) return true;
+  if (maxDate && target > clampToMidnight3(maxDate)) return true;
+  if (isDateDisabled?.(target)) return true;
+  return false;
+}
+function getDatePartOrder2(locale) {
+  const parts = new Intl.DateTimeFormat(locale).formatToParts(
+    new Date(2e3, 0, 2)
+  );
+  return parts.filter(
+    (part) => part.type === "month" || part.type === "day" || part.type === "year"
+  ).map((part) => part.type);
+}
+function getDatePlaceholder2(locale) {
+  const parts = new Intl.DateTimeFormat(locale).formatToParts(
+    new Date(2e3, 0, 2)
+  );
+  return parts.map((part) => {
+    switch (part.type) {
+      case "month":
+        return "MM";
+      case "day":
+        return "DD";
+      case "year":
+        return "YYYY";
+      default:
+        return part.value;
+    }
+  }).join("");
+}
+function formatDate2(date, locale) {
+  return new Intl.DateTimeFormat(locale).format(date);
+}
+function parseDate2(text, locale) {
+  const numbers = text.match(/\d+/g);
+  if (!numbers || numbers.length < 3) return null;
+  const order = getDatePartOrder2(locale);
+  if (order.length < 3) return null;
+  const values = {};
+  order.forEach((type, i) => {
+    values[type] = Number.parseInt(numbers[i], 10);
+  });
+  const { month, day, year } = values;
+  if (!month || !day || !year) return null;
+  const fullYear = year < 100 ? 2e3 + year : year;
+  const date = new Date(fullYear, month - 1, day);
+  if (date.getFullYear() !== fullYear || date.getMonth() !== month - 1 || date.getDate() !== day) {
+    return null;
+  }
+  return date;
+}
+var EMPTY_RANGE = { start: null, end: null };
+function DateRangePicker({
+  value: controlledValue,
+  defaultValue = EMPTY_RANGE,
+  onChange,
+  minDate,
+  maxDate,
+  isDateDisabled,
+  weekStartsOn = 1,
+  locale = "en-US",
+  startPlaceholder,
+  endPlaceholder,
+  disabled = false,
+  open: controlledOpen,
+  onOpenChange
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = useState11(defaultValue);
+  const value = controlledValue !== void 0 ? controlledValue : uncontrolledValue;
+  const setValue = (next) => {
+    if (controlledValue === void 0) {
+      setUncontrolledValue(next);
+    }
+    onChange?.(next);
+  };
+  const [uncontrolledOpen, setUncontrolledOpen] = useState11(false);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = onOpenChange ?? setUncontrolledOpen;
+  const [month, setMonth] = useState11(
+    () => startOfMonth3(value.start ?? /* @__PURE__ */ new Date())
+  );
+  const [startText, setStartText] = useState11(
+    () => value.start ? formatDate2(value.start, locale) : ""
+  );
+  const [endText, setEndText] = useState11(
+    () => value.end ? formatDate2(value.end, locale) : ""
+  );
+  useEffect4(() => {
+    setStartText(value.start ? formatDate2(value.start, locale) : "");
+  }, [value.start, locale]);
+  useEffect4(() => {
+    setEndText(value.end ? formatDate2(value.end, locale) : "");
+  }, [value.end, locale]);
+  useEffect4(() => {
+    if (open && value.start) {
+      setMonth(startOfMonth3(value.start));
+    }
+  }, [open]);
+  const { refs, floatingStyles, context } = useFloating6({
+    open,
+    onOpenChange: setOpen,
+    placement: "bottom-start",
+    whileElementsMounted: autoUpdate5,
+    middleware: [offset5(8), flip5(), shift5({ padding: 8 })]
+  });
+  const { getReferenceProps, getFloatingProps } = useInteractions6([
+    useDismiss6(context),
+    useRole6(context, { role: "dialog" })
+  ]);
+  const revertStartText = () => {
+    setStartText(value.start ? formatDate2(value.start, locale) : "");
+  };
+  const revertEndText = () => {
+    setEndText(value.end ? formatDate2(value.end, locale) : "");
+  };
+  const commitStartText = () => {
+    const trimmed = startText.trim();
+    if (!trimmed) {
+      if (value.start !== null) {
+        setValue({ start: null, end: value.end });
+      }
+      return;
+    }
+    const parsed = parseDate2(trimmed, locale);
+    if (!parsed || isDisabled2(parsed, minDate, maxDate, isDateDisabled) || value.end && compareDates(parsed, value.end) > 0) {
+      revertStartText();
+      return;
+    }
+    setValue({ start: parsed, end: value.end });
+    setMonth(startOfMonth3(parsed));
+  };
+  const commitEndText = () => {
+    const trimmed = endText.trim();
+    if (!trimmed) {
+      if (value.end !== null) {
+        setValue({ start: value.start, end: null });
+      }
+      return;
+    }
+    const parsed = parseDate2(trimmed, locale);
+    if (!parsed || isDisabled2(parsed, minDate, maxDate, isDateDisabled) || value.start && compareDates(parsed, value.start) < 0) {
+      revertEndText();
+      return;
+    }
+    setValue({ start: value.start, end: parsed });
+    setMonth(startOfMonth3(parsed));
+  };
+  const handleStartKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      commitStartText();
+    }
+  };
+  const handleEndKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      commitEndText();
+    }
+  };
+  const handleCalendarChange = (date) => {
+    const { start, end } = value;
+    if (!start || start && end) {
+      setValue({ start: date, end: null });
+      setMonth(startOfMonth3(date));
+      return;
+    }
+    if (compareDates(date, start) < 0) {
+      setValue({ start: date, end: start });
+    } else {
+      setValue({ start, end: date });
+    }
+    setOpen(false);
+  };
+  const startPlaceholderText = startPlaceholder ?? getDatePlaceholder2(locale);
+  const endPlaceholderText = endPlaceholder ?? getDatePlaceholder2(locale);
+  return /* @__PURE__ */ jsxs20(
+    "div",
+    {
+      className: wrapper7,
+      "data-disabled": disabled || void 0,
+      ref: refs.setReference,
+      children: [
+        /* @__PURE__ */ jsx37(
+          "input",
+          {
+            type: "text",
+            className: dateInput2,
+            value: startText,
+            placeholder: startPlaceholderText,
+            disabled,
+            onChange: (e) => setStartText(e.target.value),
+            onBlur: commitStartText,
+            onKeyDown: handleStartKeyDown,
+            "aria-label": "Start date"
+          }
+        ),
+        /* @__PURE__ */ jsx37("span", { className: separator2, "aria-hidden": "true", children: "\u2013" }),
+        /* @__PURE__ */ jsx37(
+          "input",
+          {
+            type: "text",
+            className: dateInput2,
+            value: endText,
+            placeholder: endPlaceholderText,
+            disabled,
+            onChange: (e) => setEndText(e.target.value),
+            onBlur: commitEndText,
+            onKeyDown: handleEndKeyDown,
+            "aria-label": "End date"
+          }
+        ),
+        /* @__PURE__ */ jsx37(
+          "button",
+          {
+            type: "button",
+            className: iconButton3,
+            disabled,
+            "aria-label": open ? "Close calendar" : "Open calendar",
+            ...getReferenceProps({
+              onClick: () => {
+                if (disabled) return;
+                setOpen(!open);
+              }
+            }),
+            children: /* @__PURE__ */ jsxs20(
+              "svg",
+              {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 16 16",
+                fill: "none",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsx37(
+                    "rect",
+                    {
+                      x: "1.5",
+                      y: "2.5",
+                      width: "13",
+                      height: "12",
+                      rx: "1.5",
+                      stroke: "currentColor",
+                      strokeWidth: "1.3"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx37("path", { d: "M1.5 6h13", stroke: "currentColor", strokeWidth: "1.3" }),
+                  /* @__PURE__ */ jsx37(
+                    "path",
+                    {
+                      d: "M4.5 1v3M11.5 1v3",
+                      stroke: "currentColor",
+                      strokeWidth: "1.3",
+                      strokeLinecap: "round"
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        open ? /* @__PURE__ */ jsx37(FloatingPortal6, { children: /* @__PURE__ */ jsx37(FloatingFocusManager5, { context, modal: false, children: /* @__PURE__ */ jsx37(
+          "div",
+          {
+            ref: refs.setFloating,
+            className: popover3,
+            style: floatingStyles,
+            ...getFloatingProps(),
+            children: /* @__PURE__ */ jsx37(
+              Calendar,
+              {
+                value: value.start,
+                rangeEnd: value.end,
+                onChange: handleCalendarChange,
+                month,
+                onMonthChange: setMonth,
+                minDate,
+                maxDate,
+                isDateDisabled,
+                weekStartsOn,
+                locale
+              }
+            )
+          }
+        ) }) }) : null
+      ]
+    }
+  );
+}
+
 // src/index.ts
 import { vars as vars2, defaultThemeClass, defaultThemeVars } from "@vesture/tokens";
 export {
@@ -1725,9 +2633,12 @@ export {
   Breadcrumbs2 as Breadcrumbs,
   BreadcrumbsItem,
   Button,
+  Calendar,
   Card,
   Checkbox,
   DataGrid,
+  DatePicker,
+  DateRangePicker,
   Divider,
   DropdownMenu2 as DropdownMenu,
   DropdownMenuItem,