@gridui/date-picker 0.0.0-stage → 1.0.0

package/dist/index.js

@@ -0,0 +1,1004 @@
+// src/shared/date.ts
+var parseDate = (value) => {
+  const date = /* @__PURE__ */ new Date(`${value}T00:00:00Z`);
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(value) || !Number.isFinite(date.getTime()) || date.toISOString().slice(0, 10) !== value) {
+    throw new RangeError(`Invalid date-picker date: ${value}`);
+  }
+  return date;
+};
+var addDays = (value, amount) => {
+  const date = parseDate(value);
+  date.setUTCDate(date.getUTCDate() + amount);
+  return date.toISOString().slice(0, 10);
+};
+var monthStart = (value) => {
+  parseDate(value);
+  return `${value.slice(0, 7)}-01`;
+};
+var addMonths = (value, amount) => {
+  const date = parseDate(value);
+  const day = date.getUTCDate();
+  date.setUTCDate(1);
+  date.setUTCMonth(date.getUTCMonth() + amount);
+  const last = new Date(date);
+  last.setUTCMonth(last.getUTCMonth() + 1, 0);
+  date.setUTCDate(Math.min(day, last.getUTCDate()));
+  return date.toISOString().slice(0, 10);
+};
+var formatDate = (value, locale, options) => {
+  return new Intl.DateTimeFormat(locale, {
+    ...options,
+    timeZone: "UTC"
+  }).format(parseDate(value));
+};
+var validateConstraints = (constraints) => {
+  if (constraints.min) {
+    parseDate(constraints.min);
+  }
+  if (constraints.max) {
+    parseDate(constraints.max);
+  }
+  if (constraints.min && constraints.max && constraints.min > constraints.max) {
+    throw new RangeError("Date-picker min must not be after max.");
+  }
+};
+var isDisabled = (value, constraints) => {
+  return Boolean(constraints.min && value < constraints.min || constraints.max && value > constraints.max || constraints.isDateDisabled?.(value));
+};
+var validateRange = (range) => {
+  if (!range) {
+    return;
+  }
+  parseDate(range.start);
+  if (range.end) {
+    parseDate(range.end);
+    if (range.end < range.start) {
+      throw new RangeError("Date range end must not be before start.");
+    }
+  }
+};
+var rangeAllowed = (range, constraints) => {
+  if (isDisabled(range.start, constraints) || range.end && isDisabled(range.end, constraints)) {
+    return false;
+  }
+  if (constraints.isDateDisabled && range.end) {
+    for (let day = addDays(range.start, 1); day < range.end; day = addDays(day, 1)) {
+      if (constraints.isDateDisabled(day)) {
+        return false;
+      }
+    }
+  }
+  return true;
+};
+var selectRange = (current, day, constraints) => {
+  if (!current || current.end) {
+    return { start: day };
+  }
+  const next = day < current.start ? {
+    start: day,
+    end: current.start
+  } : {
+    start: current.start,
+    end: day
+  };
+  return rangeAllowed(next, constraints) ? next : { start: day };
+};
+var monthDays = (month, weekStartsOn) => {
+  if (!Number.isInteger(weekStartsOn) || weekStartsOn < 0 || weekStartsOn > 6) {
+    throw new RangeError("weekStartsOn must be an integer from 0 to 6.");
+  }
+  const first = monthStart(month);
+  const start = addDays(first, -((parseDate(first).getUTCDay() - weekStartsOn + 7) % 7));
+  return Array.from({ length: 42 }, (_, index) => {
+    return addDays(start, index);
+  });
+};
+var keyboardDate = (date, key, weekStartsOn, rtl, shift) => {
+  switch (key) {
+    case "ArrowLeft":
+      return addDays(date, rtl ? 1 : -1);
+    case "ArrowRight":
+      return addDays(date, rtl ? -1 : 1);
+    case "ArrowUp":
+      return addDays(date, -7);
+    case "ArrowDown":
+      return addDays(date, 7);
+    case "Home":
+      return addDays(date, -((parseDate(date).getUTCDay() - weekStartsOn + 7) % 7));
+    case "End":
+      return addDays(date, 6 - (parseDate(date).getUTCDay() - weekStartsOn + 7) % 7);
+    case "PageUp":
+      return addMonths(date, shift ? -12 : -1);
+    case "PageDown":
+      return addMonths(date, shift ? 12 : 1);
+    default:
+      return void 0;
+  }
+};
+
+// src/date-picker-panel/month.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Month = (props) => {
+  return /* @__PURE__ */ jsxs(
+    "table",
+    {
+      role: "grid",
+      className: "gridui-date-month",
+      "aria-label": props.label,
+      "aria-multiselectable": props.rangeMode || void 0,
+      children: [
+        props.showCaption && /* @__PURE__ */ jsx(
+          "caption",
+          {
+            className: "type-ui",
+            children: props.label
+          }
+        ),
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: props.weekdays.map((day, index) => {
+          return /* @__PURE__ */ jsx(
+            "th",
+            {
+              scope: "col",
+              className: "type-caption text-muted",
+              children: day
+            },
+            index
+          );
+        }) }) }),
+        /* @__PURE__ */ jsx("tbody", { children: Array.from({ length: 6 }, (_, row) => {
+          return /* @__PURE__ */ jsx(
+            "tr",
+            {
+              children: props.days.slice(row * 7, row * 7 + 7).map((day) => {
+                const inMonth = day.startsWith(props.month.slice(0, 7));
+                const selected = props.selected === day || Boolean(props.range && day >= props.range.start && day <= (props.range.end ?? props.range.start));
+                const endpoint = props.range?.start === day || props.range?.end === day;
+                const available = props.isAvailable(day);
+                return /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    "aria-selected": selected,
+                    "data-in-range": selected && props.range !== null || void 0,
+                    "data-range-start": props.range?.start === day || void 0,
+                    "data-range-end": props.range?.end === day || void 0,
+                    children: /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: "gridui-date-day gridui-focus-contained gridui-hover-surface",
+                        "data-date": day,
+                        "data-in-month": inMonth,
+                        "data-selected": props.selected === day || endpoint || void 0,
+                        "aria-label": props.getLabel(day),
+                        "aria-current": day === props.today ? "date" : void 0,
+                        "aria-disabled": !available || void 0,
+                        disabled: props.disabled,
+                        tabIndex: !props.disabled && inMonth && day === props.focused ? 0 : -1,
+                        onClick: () => {
+                          if (available) {
+                            props.onSelect(day);
+                          }
+                        },
+                        onFocus: () => {
+                          props.onFocus(day);
+                        },
+                        onPointerEnter: () => {
+                          if (available) {
+                            props.onHover(day);
+                          }
+                        },
+                        onKeyDown: (event) => {
+                          props.onKeyDown(event, day);
+                        },
+                        children: props.getDayNumber(day)
+                      }
+                    )
+                  },
+                  day
+                );
+              })
+            },
+            row
+          );
+        }) })
+      ]
+    }
+  );
+};
+
+// src/date-picker-panel/style.ts
+import { cva } from "class-variance-authority";
+var panelStyles = cva("gridui-date-panel min-w-0 bg-background text-foreground", {
+  variants: {
+    frame: {
+      none: "",
+      outline: "border border-solid border-border rounded-control"
+    },
+    size: {
+      standard: "gridui-date-panel-standard",
+      small: "gridui-date-panel-small"
+    }
+  },
+  defaultVariants: {
+    frame: "none",
+    size: "standard"
+  }
+});
+
+// src/date-picker-panel/use-panel.ts
+import { useEffect, useRef, useState } from "react";
+var usePanel = (props) => {
+  const { defaultMonth, month: controlledMonth, onMonthChange, months = 1, weekStartsOn = 1, disabled, min, max, isDateDisabled } = props;
+  validateConstraints(props);
+  parseDate(defaultMonth);
+  if (props.today) {
+    parseDate(props.today);
+  }
+  if (![
+    1,
+    2
+  ].includes(months)) {
+    throw new RangeError("DatePickerPanel supports one or two months.");
+  }
+  const [
+    localValue,
+    setLocalValue
+  ] = useState(props.defaultValue ?? null);
+  const value = props.value === void 0 ? localValue : props.value;
+  if (props.mode === "range") {
+    validateRange(value);
+  } else if (value !== null) {
+    parseDate(value);
+  }
+  const selected = typeof value === "string" ? value : value?.start;
+  const [
+    localMonth,
+    setLocalMonth
+  ] = useState(monthStart(defaultMonth));
+  const month = monthStart(controlledMonth ?? localMonth);
+  const [
+    focused,
+    setFocused
+  ] = useState(selected ?? props.today ?? month);
+  const [
+    hovered,
+    setHovered
+  ] = useState(null);
+  const pendingFocus = useRef(false);
+  const element = useRef(null);
+  const visibleDays = Array.from({ length: months }, (_, index) => {
+    return addMonths(month, index);
+  });
+  const cells = visibleDays.flatMap((visible) => {
+    return monthDays(visible, weekStartsOn).filter((day) => {
+      return day.startsWith(visible.slice(0, 7));
+    });
+  });
+  const eligible = (day) => {
+    return !disabled && !isDisabled(day, {
+      min,
+      max,
+      isDateDisabled
+    });
+  };
+  let focusDate = cells.find(eligible) ?? cells[0] ?? month;
+  if (props.today && cells.includes(props.today)) {
+    focusDate = props.today;
+  }
+  if (selected && cells.includes(selected)) {
+    focusDate = selected;
+  }
+  if (cells.includes(focused)) {
+    focusDate = focused;
+  }
+  useEffect(() => {
+    if (pendingFocus.current) {
+      const button = element.current?.querySelector(`button[data-date="${focusDate}"][data-in-month="true"]`);
+      if (button) {
+        button.focus();
+        pendingFocus.current = false;
+      }
+    }
+  }, [
+    focusDate,
+    month
+  ]);
+  const setMonth = (next) => {
+    const normalized = monthStart(next);
+    if (normalized === month) {
+      return;
+    }
+    if (controlledMonth === void 0) {
+      setLocalMonth(normalized);
+    }
+    onMonthChange?.(normalized);
+  };
+  const select = (day) => {
+    if (!eligible(day)) {
+      return;
+    }
+    if (props.mode === "range") {
+      const next = selectRange(value, day, props);
+      if (props.value === void 0) {
+        setLocalValue(next);
+      }
+      props.onValueChange(next);
+    } else {
+      if (props.value === void 0) {
+        setLocalValue(day);
+      }
+      props.onValueChange(day);
+    }
+    setHovered(null);
+    setFocused(day);
+    if (!cells.includes(day)) {
+      setMonth(day);
+    }
+    pendingFocus.current = true;
+  };
+  const onKeyDown = (event, day) => {
+    const target = keyboardDate(day, event.key, weekStartsOn, getComputedStyle(event.currentTarget).direction === "rtl", event.shiftKey);
+    if (!target) {
+      return;
+    }
+    event.preventDefault();
+    let next = target;
+    if (min && next < min) {
+      next = min;
+    }
+    if (max && next > max) {
+      next = max;
+    }
+    setFocused(next);
+    if (!cells.includes(next)) {
+      setMonth(next);
+    }
+    pendingFocus.current = true;
+    element.current?.querySelector(`button[data-date="${next}"][data-in-month="true"]`)?.focus();
+  };
+  const canPrevious = !disabled && (!min || addDays(month, -1) >= min);
+  const canNext = !disabled && (!max || addMonths(month, months) <= max);
+  return {
+    value,
+    month,
+    visibleDays,
+    focused: focusDate,
+    hovered,
+    setHovered,
+    setFocused,
+    element,
+    eligible,
+    select,
+    onKeyDown,
+    canPrevious,
+    canNext,
+    previous: () => {
+      setMonth(addMonths(month, -1));
+    },
+    next: () => {
+      setMonth(addMonths(month, 1));
+    }
+  };
+};
+
+// src/date-picker-panel/date-picker-panel.tsx
+import { Button } from "@gridui/button";
+import { cn } from "@gridui/style-utils";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useImperativeHandle } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var DatePickerPanel = (props) => {
+  const {
+    defaultMonth,
+    month,
+    onMonthChange,
+    months,
+    weekStartsOn = 1,
+    locale = "en-US",
+    today,
+    min,
+    max,
+    isDateDisabled,
+    labels,
+    mode,
+    value,
+    defaultValue,
+    onValueChange,
+    disabled,
+    size,
+    frame,
+    className,
+    ref,
+    ...restProps
+  } = props;
+  const state = usePanel({
+    defaultMonth,
+    month,
+    onMonthChange,
+    months,
+    weekStartsOn,
+    today,
+    min,
+    max,
+    isDateDisabled,
+    disabled,
+    mode,
+    value,
+    defaultValue,
+    onValueChange: (next) => {
+      if (mode === "range") {
+        onValueChange?.(next);
+      } else {
+        onValueChange?.(next);
+      }
+    }
+  });
+  useImperativeHandle(ref, () => {
+    return state.element.current;
+  });
+  const range = mode === "range" ? state.value : null;
+  let preview = range;
+  if (range && !range.end && state.hovered) {
+    const candidate = state.hovered < range.start ? {
+      start: state.hovered,
+      end: range.start
+    } : {
+      start: range.start,
+      end: state.hovered
+    };
+    if (rangeAllowed(candidate, props)) {
+      preview = candidate;
+    }
+  }
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ...restProps,
+      ref: state.element,
+      className: cn(panelStyles({
+        frame,
+        size
+      }), className),
+      "data-disabled": disabled || void 0,
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: "gridui-date-panel-navigation",
+            children: [
+              /* @__PURE__ */ jsx2(
+                Button,
+                {
+                  variant: "quiet",
+                  layout: "icon",
+                  size: "small",
+                  disabled: !state.canPrevious,
+                  "aria-label": labels?.previousMonth ?? "Previous month",
+                  onClick: state.previous,
+                  children: /* @__PURE__ */ jsx2(
+                    ChevronLeft,
+                    {
+                      "aria-hidden": "true"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs2(
+                "div",
+                {
+                  className: "type-ui",
+                  "aria-live": "polite",
+                  children: [
+                    formatDate(state.month, locale, {
+                      year: "numeric",
+                      month: "long"
+                    }),
+                    state.visibleDays.length === 2 && ` \u2013 ${formatDate(state.visibleDays[1], locale, {
+                      year: "numeric",
+                      month: "long"
+                    })}`
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                Button,
+                {
+                  variant: "quiet",
+                  layout: "icon",
+                  size: "small",
+                  disabled: !state.canNext,
+                  "aria-label": labels?.nextMonth ?? "Next month",
+                  onClick: state.next,
+                  children: /* @__PURE__ */ jsx2(
+                    ChevronRight,
+                    {
+                      "aria-hidden": "true"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: "gridui-date-panel-months",
+            "data-months": state.visibleDays.length,
+            onPointerLeave: () => {
+              state.setHovered(null);
+            },
+            children: state.visibleDays.map((visible) => {
+              return /* @__PURE__ */ jsx2(
+                Month,
+                {
+                  month: visible,
+                  label: formatDate(visible, locale, {
+                    year: "numeric",
+                    month: "long"
+                  }),
+                  days: monthDays(visible, weekStartsOn),
+                  weekdays: Array.from({ length: 7 }, (_, day) => {
+                    return formatDate(addDays("2024-01-07", weekStartsOn + day), locale, { weekday: "short" });
+                  }),
+                  getLabel: (day) => {
+                    return formatDate(day, locale, { dateStyle: "full" });
+                  },
+                  getDayNumber: (day) => {
+                    return parseDate(day).getUTCDate();
+                  },
+                  focused: state.focused,
+                  today,
+                  selected: typeof state.value === "string" ? state.value : null,
+                  range: preview,
+                  rangeMode: mode === "range",
+                  disabled: disabled === true,
+                  isAvailable: state.eligible,
+                  onSelect: state.select,
+                  onFocus: state.setFocused,
+                  onHover: state.setHovered,
+                  onKeyDown: state.onKeyDown,
+                  showCaption: state.visibleDays.length > 1
+                },
+                visible
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/shared/picker.tsx
+import { Button as Button2 } from "@gridui/button";
+import { useFormReset } from "@gridui/form";
+import { Popover, PopoverPanel, PopoverTrigger } from "@gridui/popover";
+import { cn as cn2 } from "@gridui/style-utils";
+import { CalendarDays, X } from "lucide-react";
+import { useEffect as useEffect2, useId, useRef as useRef2, useState as useState2 } from "react";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var Picker = (props) => {
+  const {
+    mode,
+    label,
+    name,
+    form,
+    readOnly = false,
+    open: controlledOpen,
+    defaultOpen = false,
+    onOpenChange,
+    value: controlledValue,
+    defaultValue = null,
+    onValueChange,
+    formatValue,
+    pickerLabels,
+    footer,
+    clearable = true,
+    defaultMonth,
+    month,
+    onMonthChange,
+    months = mode === "range" ? 2 : 1,
+    weekStartsOn,
+    locale = "en-US",
+    today,
+    min,
+    max,
+    isDateDisabled,
+    labels,
+    disabled = false,
+    size = "standard",
+    className,
+    dir,
+    ...restProps
+  } = props;
+  parseDate(defaultMonth);
+  validateConstraints(props);
+  if (today) {
+    parseDate(today);
+  }
+  const [
+    localValue,
+    setLocalValue
+  ] = useState2(defaultValue);
+  const value = controlledValue === void 0 ? localValue : controlledValue;
+  if (mode === "single" && value !== null) {
+    parseDate(value);
+  }
+  if (mode === "range") {
+    validateRange(value);
+  }
+  const [
+    localOpen,
+    setLocalOpen
+  ] = useState2(defaultOpen);
+  const open = !disabled && !readOnly && (controlledOpen ?? localOpen);
+  const [
+    draft,
+    setDraft
+  ] = useState2(mode === "range" ? value : null);
+  const id = useId();
+  const input = useRef2(null);
+  const control = useRef2(null);
+  const panel = useRef2(null);
+  const initial = useRef2(defaultValue);
+  const returnFocus = useRef2(false);
+  const rangeStart = typeof value === "object" ? value?.start : void 0;
+  const rangeEnd = typeof value === "object" ? value?.end : void 0;
+  useEffect2(() => {
+    if (open && mode === "range") {
+      setDraft(rangeStart ? {
+        start: rangeStart,
+        ...rangeEnd ? { end: rangeEnd } : {}
+      } : null);
+    }
+  }, [
+    open,
+    mode,
+    rangeStart,
+    rangeEnd
+  ]);
+  const text = {
+    placeholder: mode === "range" ? "Choose dates" : "Choose date",
+    clear: "Clear date",
+    today: "Today",
+    apply: "Apply",
+    cancel: "Cancel",
+    ...pickerLabels
+  };
+  useFormReset(input, () => {
+    if (controlledValue === void 0) {
+      setLocalValue(initial.current);
+    }
+    setDraft(mode === "range" ? initial.current : null);
+    if (controlledOpen === void 0) {
+      setLocalOpen(false);
+    }
+  }, form);
+  const changeOpen = (next) => {
+    if (next && (disabled || readOnly || control.current?.matches(":disabled"))) {
+      return;
+    }
+    if (controlledOpen === void 0) {
+      setLocalOpen(next);
+    }
+    onOpenChange?.(next);
+  };
+  const closeFromAction = () => {
+    returnFocus.current = true;
+    changeOpen(false);
+  };
+  const change = (next) => {
+    if (disabled || readOnly || control.current?.matches(":disabled")) {
+      return;
+    }
+    if (controlledValue === void 0) {
+      setLocalValue(next);
+    }
+    if (mode === "single") {
+      onValueChange?.(next);
+    } else {
+      onValueChange?.(next);
+    }
+  };
+  let display = text.placeholder;
+  if (value !== null) {
+    if (mode === "single") {
+      display = formatValue?.(value) ?? formatDate(value, locale, { dateStyle: "medium" });
+    } else {
+      const range2 = value;
+      display = formatValue?.(range2) ?? `${formatDate(range2.start, locale, { dateStyle: "medium" })}${range2.end ? ` \u2013 ${formatDate(range2.end, locale, { dateStyle: "medium" })}` : ""}`;
+    }
+  }
+  const options = {
+    defaultMonth: typeof value === "string" ? value : value?.start ?? defaultMonth,
+    month,
+    onMonthChange,
+    months,
+    weekStartsOn,
+    locale,
+    today,
+    min,
+    max,
+    isDateDisabled,
+    labels,
+    size
+  };
+  const range = mode === "range" ? value : null;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      ...restProps,
+      dir,
+      className: cn2("gridui-date-picker min-w-0", className),
+      children: [
+        /* @__PURE__ */ jsx3(
+          "span",
+          {
+            id: `${id}-label`,
+            className: "mb-gridui-4 block type-ui",
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsxs3(
+          Popover,
+          {
+            open,
+            onOpenChange: changeOpen,
+            hoverEnabled: false,
+            children: [
+              /* @__PURE__ */ jsxs3(
+                "div",
+                {
+                  className: "gridui-date-picker-field",
+                  children: [
+                    /* @__PURE__ */ jsxs3(
+                      PopoverTrigger,
+                      {
+                        ref: control,
+                        variant: "secondary",
+                        size,
+                        disabled: disabled || readOnly,
+                        className: "gridui-date-picker-trigger w-full justify-between text-left",
+                        "aria-labelledby": `${id}-label ${id}-value`,
+                        children: [
+                          /* @__PURE__ */ jsx3(
+                            "span",
+                            {
+                              id: `${id}-value`,
+                              className: cn2("min-w-0 flex-1 wrap-anywhere", value === null && "text-muted"),
+                              children: display
+                            }
+                          ),
+                          /* @__PURE__ */ jsx3(
+                            CalendarDays,
+                            {
+                              "aria-hidden": "true"
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    clearable && value !== null && /* @__PURE__ */ jsx3(
+                      Button2,
+                      {
+                        variant: "quiet",
+                        layout: "icon",
+                        size,
+                        disabled: disabled || readOnly,
+                        "aria-label": text.clear,
+                        onClick: () => {
+                          change(null);
+                          setDraft(null);
+                        },
+                        children: /* @__PURE__ */ jsx3(
+                          X,
+                          {
+                            "aria-hidden": "true"
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs3(
+                PopoverPanel,
+                {
+                  ref: panel,
+                  dir,
+                  "aria-labelledby": `${id}-label`,
+                  className: cn2("gridui-date-picker-popup flex flex-col overflow-y-hidden p-0", months === 2 ? "w-160" : "w-80"),
+                  onEscapeKeyDown: () => {
+                    returnFocus.current = true;
+                  },
+                  onCloseAutoFocus: (event) => {
+                    if (!returnFocus.current) {
+                      return;
+                    }
+                    event.preventDefault();
+                    const active = control.current?.ownerDocument.activeElement;
+                    if (active === control.current?.ownerDocument.body || active === control.current || active && panel.current?.contains(active)) {
+                      control.current?.focus();
+                    }
+                    returnFocus.current = false;
+                  },
+                  onOpenAutoFocus: (event) => {
+                    returnFocus.current = false;
+                    const day = panel.current?.querySelector('button[data-date][tabindex="0"]');
+                    if (day) {
+                      event.preventDefault();
+                      day.focus();
+                    }
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx3(
+                      "div",
+                      {
+                        className: "min-h-0 overflow-y-auto overscroll-contain",
+                        children: mode === "range" ? /* @__PURE__ */ jsx3(
+                          DatePickerPanel,
+                          {
+                            ...options,
+                            mode: "range",
+                            value: draft,
+                            onValueChange: setDraft
+                          }
+                        ) : /* @__PURE__ */ jsx3(
+                          DatePickerPanel,
+                          {
+                            ...options,
+                            value,
+                            onValueChange: (next) => {
+                              change(next);
+                              closeFromAction();
+                            }
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs3(
+                      "div",
+                      {
+                        className: "gridui-date-picker-footer",
+                        children: [
+                          footer,
+                          mode === "range" ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+                            /* @__PURE__ */ jsx3(
+                              "span",
+                              {
+                                className: "type-caption text-muted",
+                                "aria-live": "polite",
+                                children: draft ? `${formatDate(draft.start, locale, {
+                                  month: "short",
+                                  day: "numeric"
+                                })}${draft.end ? ` \u2013 ${formatDate(draft.end, locale, {
+                                  month: "short",
+                                  day: "numeric"
+                                })}` : ""}` : text.placeholder
+                              }
+                            ),
+                            /* @__PURE__ */ jsxs3(
+                              "div",
+                              {
+                                className: "flex flex-wrap gap-gridui-8",
+                                children: [
+                                  /* @__PURE__ */ jsx3(
+                                    Button2,
+                                    {
+                                      variant: "secondary",
+                                      size: "small",
+                                      onClick: () => {
+                                        closeFromAction();
+                                      },
+                                      children: text.cancel
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx3(
+                                    Button2,
+                                    {
+                                      size: "small",
+                                      disabled: !draft?.end || !rangeAllowed(draft, props),
+                                      onClick: () => {
+                                        if (draft?.end && rangeAllowed(draft, props)) {
+                                          change(draft);
+                                          closeFromAction();
+                                        }
+                                      },
+                                      children: text.apply
+                                    }
+                                  )
+                                ]
+                              }
+                            )
+                          ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+                            today && /* @__PURE__ */ jsx3(
+                              Button2,
+                              {
+                                variant: "quiet",
+                                size: "small",
+                                disabled: isDisabled(today, props),
+                                onClick: () => {
+                                  change(today);
+                                  closeFromAction();
+                                },
+                                children: text.today
+                              }
+                            ),
+                            clearable && /* @__PURE__ */ jsx3(
+                              Button2,
+                              {
+                                variant: "quiet",
+                                size: "small",
+                                onClick: () => {
+                                  change(null);
+                                  closeFromAction();
+                                },
+                                children: text.clear
+                              }
+                            )
+                          ] })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "input",
+          {
+            ref: input,
+            type: "hidden",
+            name: mode === "range" && name ? `${name}.start` : name,
+            form,
+            disabled,
+            value: mode === "range" ? range?.start ?? "" : value ?? ""
+          }
+        ),
+        mode === "range" && /* @__PURE__ */ jsx3(
+          "input",
+          {
+            type: "hidden",
+            name: name ? `${name}.end` : void 0,
+            form,
+            disabled,
+            value: range?.end ?? ""
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/date-picker/date-picker.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var DatePicker = (props) => {
+  return /* @__PURE__ */ jsx4(
+    Picker,
+    {
+      ...props,
+      mode: "single"
+    }
+  );
+};
+
+// src/date-range-picker/date-range-picker.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var DateRangePicker = (props) => {
+  return /* @__PURE__ */ jsx5(
+    Picker,
+    {
+      ...props,
+      mode: "range"
+    }
+  );
+};
+export {
+  DatePicker,
+  DatePickerPanel,
+  DateRangePicker
+};
+//# sourceMappingURL=index.js.map