@k2b/ui 0.1.0-rc.0

package/dist/browser/inputs/DatePicker.js

@@ -0,0 +1,923 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { setProperty as _$setProperty } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class="k2b-date-trigger__clear k2b-input-clear-action"><i class="ti ti-x"aria-hidden=true>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<span class=k2b-date-popover__timezone><i class="ti ti-world"aria-hidden=true></i><!$><!/>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<footer class=k2b-date-popover__footer><span></span><!$><!/>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<div class=k2b-date-picker><button type=button class=k2b-date-trigger aria-haspopup=dialog><i aria-hidden=true></i><span class=k2b-date-trigger__value></span><i class="ti ti-chevron-down k2b-date-trigger__chevron"aria-hidden=true></i></button><!$><!/><div class=k2b-date-popover popover=auto role=dialog><!$><!/><!$><!/>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<aside class=k2b-date-presets>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<button type=button>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-date-weekdays aria-hidden=true>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<div class=k2b-date-grid role=grid>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<section class=k2b-date-calendar><header class=k2b-date-calendar__header><button type=button class=k2b-date-calendar__nav><i class="ti ti-chevron-left"aria-hidden=true></i></button><button type=button class=k2b-date-calendar__title></button><button type=button class=k2b-date-calendar__nav><i class="ti ti-chevron-right"aria-hidden=true></i></button></header><!$><!/>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<div class=k2b-date-months role=group>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<div class=k2b-date-week role=row>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<button type=button role=gridcell>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<label class=k2b-date-time><!$><!/><span class=k2b-date-time__control><input type=text inputmode=numeric placeholder=09:00><i class="ti ti-clock"aria-hidden=true>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<div class=k2b-date-popover__body><!$><!/><!$><!/>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<div class=k2b-date-actions><!$><!/><button type=button class=k2b-date-apply>Apply`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<span class=k2b-date-range-value><span></span><i class="ti ti-arrow-narrow-right"aria-hidden=true></i><span>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<span class=k2b-date-duration><i class="ti ti-hourglass-low"aria-hidden=true></i><!$><!/>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<div class=k2b-date-range-times><!$><!/><!$><!/>`),
+  _tmpl$18 = /*#__PURE__*/_$template(`<div class=k2b-date-durations role=group>`);
+import { dates } from "@k2b/stdlib";
+import { createEffect, createMemo, createSignal, For, onCleanup, onMount, Show } from "solid-js";
+import { createFieldMeta, Field, fieldControlAria } from "../internal/field";
+import { useDateConfigLocale } from "../intl/locale";
+import { useUiMessages } from "../intl/messages";
+import { dateKey, displayDate, filterTimeInput, formatDateOnlyRangeDuration, formatDateTimeValue, inRange, isCompleteTime, isRangeEdge, monthDate, monthNames, normalizeTimeInput, orderedRange, parseDateValue, pickerContext, previewRange, resolveFocusDay, splitDateTime, toDateTimeValue, yearMonth } from "./date-picker";
+import { commitFieldValue, resolveMaybeAccessor } from "./field-contract";
+const popoverIsOpen = popover => {
+  if (!popover) return false;
+  try {
+    return popover.matches(":popover-open");
+  } catch {
+    return false;
+  }
+};
+export const placeDatePopover = (trigger, popover, wide) => {
+  const margin = 8;
+  const gap = 4;
+  const rect = trigger.getBoundingClientRect();
+  // Keep the panel at its designed width instead of stretching to a full-width
+  // trigger; it only ever shrinks to fit a narrow viewport.
+  const preferredWidth = wide ? 440 : 336;
+  const width = Math.min(preferredWidth, window.innerWidth - margin * 2);
+  popover.style.width = `${width}px`;
+  const popoverRect = popover.getBoundingClientRect();
+  const left = Math.max(margin, Math.min(rect.left, window.innerWidth - width - margin));
+  const roomBelow = window.innerHeight - rect.bottom - gap - margin;
+  const roomAbove = rect.top - gap - margin;
+  const opensAbove = popoverRect.height > roomBelow && roomAbove > roomBelow;
+  const top = opensAbove ? Math.max(margin, rect.top - popoverRect.height - gap) : Math.min(rect.bottom + gap, window.innerHeight - popoverRect.height - margin);
+  popover.style.left = `${left}px`;
+  popover.style.top = `${Math.max(margin, top)}px`;
+};
+function PickerShell(props) {
+  const messages = useUiMessages();
+  const meta = createFieldMeta(props.owner.id);
+  const [open, setOpen] = createSignal(false);
+  const error = () => resolveMaybeAccessor(props.owner.error);
+  let trigger;
+  let popover;
+  const place = () => {
+    if (trigger && popover && open()) placeDatePopover(trigger, popover, props.wide ?? false);
+  };
+  const close = () => {
+    if (popoverIsOpen(popover)) popover?.hidePopover();
+    setOpen(false);
+  };
+  const show = () => {
+    if (props.owner.disabled || !popover || popoverIsOpen(popover)) return;
+    props.onOpen?.();
+    popover.showPopover();
+    setOpen(true);
+    queueMicrotask(() => {
+      place();
+      const initial = popover?.querySelector('[data-date-focus="true"]') ?? popover?.querySelector('[data-date-day]:not([data-outside="true"])');
+      initial?.focus();
+    });
+  };
+  const toggle = () => open() ? close() : show();
+  onMount(() => {
+    const syncOpenState = () => setOpen(popoverIsOpen(popover));
+    popover?.addEventListener("toggle", syncOpenState);
+    onCleanup(() => popover?.removeEventListener("toggle", syncOpenState));
+  });
+  createEffect(() => {
+    if (!open()) return;
+    window.addEventListener("resize", place);
+    window.addEventListener("scroll", place, true);
+    onCleanup(() => {
+      window.removeEventListener("resize", place);
+      window.removeEventListener("scroll", place, true);
+    });
+  });
+  onCleanup(close);
+  return _$createComponent(Field, {
+    get ["class"]() {
+      return props.owner.class;
+    },
+    get label() {
+      return props.owner.label;
+    },
+    get description() {
+      return props.owner.description;
+    },
+    get error() {
+      return error();
+    },
+    get required() {
+      return props.owner.required;
+    },
+    get disabled() {
+      return props.owner.disabled;
+    },
+    meta: meta,
+    get children() {
+      var _el$ = _$getNextElement(_tmpl$4),
+        _el$2 = _el$.firstChild,
+        _el$3 = _el$2.firstChild,
+        _el$4 = _el$3.nextSibling,
+        _el$17 = _el$2.nextSibling,
+        [_el$18, _co$5] = _$getNextMarker(_el$17.nextSibling),
+        _el$6 = _el$18.nextSibling,
+        _el$13 = _el$6.firstChild,
+        [_el$14, _co$3] = _$getNextMarker(_el$13.nextSibling),
+        _el$15 = _el$14.nextSibling,
+        [_el$16, _co$4] = _$getNextMarker(_el$15.nextSibling);
+      var _ref$ = trigger;
+      typeof _ref$ === "function" ? _$use(_ref$, _el$2) : trigger = _el$2;
+      _$spread(_el$2, _$mergeProps({
+        get id() {
+          return meta.controlId;
+        },
+        get ["data-placeholder"]() {
+          return props.valueLabel() ? undefined : "true";
+        },
+        get ["data-open"]() {
+          return open() ? "true" : undefined;
+        },
+        get disabled() {
+          return props.owner.disabled;
+        },
+        get ["aria-expanded"]() {
+          return open();
+        },
+        get ["aria-controls"]() {
+          return `${meta.controlId}-popover`;
+        }
+      }, () => fieldControlAria(meta, props.owner), {
+        "onClick": toggle,
+        "onKeyDown": event => {
+          if (event.key === "ArrowDown") {
+            event.preventDefault();
+            show();
+          }
+        }
+      }), false, true);
+      _$insert(_el$4, _$createComponent(Show, {
+        get when() {
+          return props.valueLabel();
+        },
+        get fallback() {
+          return props.owner.placeholder ?? messages().pickDate;
+        },
+        get children() {
+          return props.valueContent?.() ?? props.valueLabel();
+        }
+      }));
+      _$insert(_el$, _$createComponent(Show, {
+        get when() {
+          return _$memo(() => !!(props.owner.clearable && props.valueLabel()))() && !props.owner.disabled;
+        },
+        get children() {
+          var _el$5 = _$getNextElement(_tmpl$);
+          _el$5.$$click = event => {
+            event.stopPropagation();
+            close();
+            commitFieldValue(props.owner, props.clearValue);
+            trigger?.focus();
+          };
+          _$effect(() => _$setAttribute(_el$5, "aria-label", messages().clearDate));
+          _$runHydrationEvents();
+          return _el$5;
+        }
+      }), _el$18, _co$5);
+      _el$6.addEventListener("toggle", event => {
+        const nextOpen = event.newState === "open";
+        setOpen(nextOpen);
+        if (nextOpen) queueMicrotask(place);
+      });
+      var _ref$2 = popover;
+      typeof _ref$2 === "function" ? _$use(_ref$2, _el$6) : popover = _el$6;
+      _$insert(_el$6, () => props.children(close), _el$14, _co$3);
+      _$insert(_el$6, _$createComponent(Show, {
+        get when() {
+          return props.footerMeta || props.timezone;
+        },
+        get children() {
+          var _el$7 = _$getNextElement(_tmpl$3),
+            _el$8 = _el$7.firstChild,
+            _el$11 = _el$8.nextSibling,
+            [_el$12, _co$2] = _$getNextMarker(_el$11.nextSibling);
+          _$insert(_el$8, () => props.footerMeta?.());
+          _$insert(_el$7, _$createComponent(Show, {
+            get when() {
+              return props.timezone;
+            },
+            get children() {
+              var _el$9 = _$getNextElement(_tmpl$2),
+                _el$0 = _el$9.firstChild,
+                _el$1 = _el$0.nextSibling,
+                [_el$10, _co$] = _$getNextMarker(_el$1.nextSibling);
+              _$insert(_el$9, () => props.timezone, _el$10, _co$);
+              return _el$9;
+            }
+          }), _el$12, _co$2);
+          return _el$7;
+        }
+      }), _el$16, _co$4);
+      _$effect(_p$ => {
+        var _v$ = error() ? "true" : undefined,
+          _v$2 = `${props.icon} k2b-date-trigger__icon`,
+          _v$3 = `${meta.controlId}-popover`,
+          _v$4 = typeof props.owner.label === "string" ? props.owner.label : messages().datePicker;
+        _v$ !== _p$.e && _$setAttribute(_el$, "data-invalid", _p$.e = _v$);
+        _v$2 !== _p$.t && _$className(_el$3, _p$.t = _v$2);
+        _v$3 !== _p$.a && _$setAttribute(_el$6, "id", _p$.a = _v$3);
+        _v$4 !== _p$.o && _$setAttribute(_el$6, "aria-label", _p$.o = _v$4);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined,
+        o: undefined
+      });
+      _$runHydrationEvents();
+      return _el$;
+    }
+  });
+}
+function PresetRail(props) {
+  const messages = useUiMessages();
+  return _$createComponent(Show, {
+    get when() {
+      return props.presets?.length;
+    },
+    get children() {
+      var _el$19 = _$getNextElement(_tmpl$5);
+      _$insert(_el$19, _$createComponent(For, {
+        get each() {
+          return props.presets;
+        },
+        children: preset => (() => {
+          var _el$20 = _$getNextElement(_tmpl$6);
+          _el$20.$$click = () => props.onSelect(preset.value);
+          _$insert(_el$20, () => preset.label);
+          _$runHydrationEvents();
+          return _el$20;
+        })()
+      }));
+      _$effect(() => _$setAttribute(_el$19, "aria-label", messages().datePresets));
+      return _el$19;
+    }
+  });
+}
+function DatePickerPanel(props) {
+  const messages = useUiMessages();
+  const [view, setView] = createSignal("days");
+  const context = createMemo(() => pickerContext(props.dateConfig));
+  const month = createMemo(() => yearMonth(props.visibleMonth(), context()));
+  const weeks = createMemo(() => dates.getMonthGrid(month().year, month().month, context()));
+  const weekdays = createMemo(() => dates.weekdays(context()));
+  const months = createMemo(() => monthNames(context()));
+  const dayNameFormatter = createMemo(() => new Intl.DateTimeFormat(context().locale, {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    timeZone: context().timeZone
+  }));
+  const dayRows = createMemo(() => {
+    const visibleMonth = props.visibleMonth();
+    const dateContext = context();
+    const formatter = dayNameFormatter();
+    return weeks().map(week => week.map(day => ({
+      day,
+      key: dates.formatDateKey(day, dateContext),
+      outside: !dates.isSameMonth(day, visibleMonth, dateContext),
+      label: formatter.format(day),
+      number: dates.formatDayNumber(day, dateContext)
+    })));
+  });
+  let calendar;
+  // Days that belong to the visible month; the roving tabindex must land on one
+  // of them or the grid becomes unreachable by keyboard after month navigation.
+  const monthDayKeys = createMemo(() => dayRows().flat().filter(day => !day.outside).map(day => day.key));
+  // Remembers where arrow-key navigation left off so Tab returns to that day.
+  const [focusedKey, setFocusedKey] = createSignal();
+  const defaultFocus = createMemo(() => resolveFocusDay(monthDayKeys(), focusedKey() || props.focusDate?.() || props.selected?.() || dateKey(dates.today(context()), context())));
+  const moveMonth = delta => props.setVisibleMonth(dates.addMonths(props.visibleMonth(), delta, context()));
+  const moveYear = delta => props.setVisibleMonth(monthDate(month().year + delta, month().month, context()));
+  const previousLabel = () => view() === "days" ? messages().previousMonth : messages().previousYear;
+  const nextLabel = () => view() === "days" ? messages().nextMonth : messages().nextYear;
+  const focusDate = date => {
+    const targetKey = dateKey(date, context());
+    if (!dates.isSameMonth(date, props.visibleMonth(), context())) props.setVisibleMonth(date);
+    queueMicrotask(() => calendar?.querySelector(`[data-date-day="${targetKey}"]`)?.focus());
+  };
+  const handleDayKeyDown = (event, day) => {
+    const deltas = {
+      ArrowLeft: -1,
+      ArrowRight: 1,
+      ArrowUp: -7,
+      ArrowDown: 7
+    };
+    const delta = deltas[event.key];
+    if (delta !== undefined) {
+      event.preventDefault();
+      focusDate(dates.addDays(day, delta, context()));
+      return;
+    }
+    if (event.key === "PageUp" || event.key === "PageDown") {
+      event.preventDefault();
+      focusDate(dates.addMonths(day, event.key === "PageUp" ? -1 : 1, context()));
+      return;
+    }
+    if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      const buttons = Array.from(event.currentTarget.closest(".k2b-date-grid").querySelectorAll("[data-date-day]"));
+      const index = buttons.indexOf(event.currentTarget);
+      const offset = event.key === "Home" ? -(index % 7) : 6 - index % 7;
+      focusDate(dates.addDays(day, offset, context()));
+    }
+  };
+  return (() => {
+    var _el$21 = _$getNextElement(_tmpl$9),
+      _el$22 = _el$21.firstChild,
+      _el$23 = _el$22.firstChild,
+      _el$24 = _el$23.nextSibling,
+      _el$25 = _el$24.nextSibling,
+      _el$28 = _el$22.nextSibling,
+      [_el$29, _co$6] = _$getNextMarker(_el$28.nextSibling);
+    var _ref$3 = calendar;
+    typeof _ref$3 === "function" ? _$use(_ref$3, _el$21) : calendar = _el$21;
+    _el$23.$$click = () => view() === "days" ? moveMonth(-1) : moveYear(-1);
+    _el$24.$$click = () => setView(view() === "days" ? "months" : "days");
+    _$insert(_el$24, _$createComponent(Show, {
+      get when() {
+        return view() === "days";
+      },
+      get fallback() {
+        return month().year;
+      },
+      get children() {
+        return dates.formatMonthYear(props.visibleMonth(), context());
+      }
+    }));
+    _el$25.$$click = () => view() === "days" ? moveMonth(1) : moveYear(1);
+    _$insert(_el$21, _$createComponent(Show, {
+      get when() {
+        return view() === "days";
+      },
+      get fallback() {
+        return (() => {
+          var _el$30 = _$getNextElement(_tmpl$0);
+          _$insert(_el$30, _$createComponent(For, {
+            get each() {
+              return months();
+            },
+            children: (name, index) => (() => {
+              var _el$31 = _$getNextElement(_tmpl$6);
+              _el$31.$$click = () => {
+                props.setVisibleMonth(monthDate(month().year, index(), context()));
+                setView("days");
+              };
+              _$insert(_el$31, name);
+              _$effect(_p$ => {
+                var _v$8 = index() === month().month,
+                  _v$9 = index() === month().month ? "true" : undefined;
+                _v$8 !== _p$.e && _$setAttribute(_el$31, "aria-pressed", _p$.e = _v$8);
+                _v$9 !== _p$.t && _$setAttribute(_el$31, "data-selected", _p$.t = _v$9);
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined
+              });
+              _$runHydrationEvents();
+              return _el$31;
+            })()
+          }));
+          _$effect(() => _$setAttribute(_el$30, "aria-label", `Months in ${month().year}`));
+          return _el$30;
+        })();
+      },
+      get children() {
+        return [(() => {
+          var _el$26 = _$getNextElement(_tmpl$7);
+          _$insert(_el$26, _$createComponent(For, {
+            get each() {
+              return weekdays();
+            },
+            children: day => (() => {
+              var _el$32 = _$getNextElement(_tmpl$1);
+              _$insert(_el$32, day);
+              return _el$32;
+            })()
+          }));
+          return _el$26;
+        })(), (() => {
+          var _el$27 = _$getNextElement(_tmpl$8);
+          _$insert(_el$27, _$createComponent(For, {
+            get each() {
+              return dayRows();
+            },
+            children: week => (() => {
+              var _el$33 = _$getNextElement(_tmpl$10);
+              _$insert(_el$33, _$createComponent(For, {
+                each: week,
+                children: cell => {
+                  const selected = () => props.selected?.() === cell.key;
+                  const range = () => props.range?.() ?? {
+                    start: null,
+                    end: null
+                  };
+                  const active = () => selected() || isRangeEdge(cell.key, range());
+                  const focusable = () => cell.key === defaultFocus();
+                  return (() => {
+                    var _el$34 = _$getNextElement(_tmpl$11);
+                    _el$34.addEventListener("pointerleave", () => props.onDayPreview?.(null));
+                    _el$34.addEventListener("pointerenter", () => props.onDayPreview?.(cell.key));
+                    _el$34.addEventListener("focus", () => {
+                      setFocusedKey(cell.key);
+                      props.onDayPreview?.(cell.key);
+                    });
+                    _el$34.addEventListener("blur", () => props.onDayPreview?.(null));
+                    _el$34.$$keydown = event => handleDayKeyDown(event, cell.day);
+                    _el$34.$$click = () => props.onSelect(cell.key);
+                    _$insert(_el$34, () => cell.number);
+                    _$effect(_p$ => {
+                      var _v$0 = cell.key,
+                        _v$1 = focusable() ? "true" : undefined,
+                        _v$10 = cell.outside ? "true" : undefined,
+                        _v$11 = inRange(cell.key, range()) && !active() ? "true" : undefined,
+                        _v$12 = cell.label,
+                        _v$13 = active(),
+                        _v$14 = focusable() ? 0 : -1;
+                      _v$0 !== _p$.e && _$setAttribute(_el$34, "data-date-day", _p$.e = _v$0);
+                      _v$1 !== _p$.t && _$setAttribute(_el$34, "data-date-focus", _p$.t = _v$1);
+                      _v$10 !== _p$.a && _$setAttribute(_el$34, "data-outside", _p$.a = _v$10);
+                      _v$11 !== _p$.o && _$setAttribute(_el$34, "data-in-range", _p$.o = _v$11);
+                      _v$12 !== _p$.i && _$setAttribute(_el$34, "aria-label", _p$.i = _v$12);
+                      _v$13 !== _p$.n && _$setAttribute(_el$34, "aria-selected", _p$.n = _v$13);
+                      _v$14 !== _p$.s && _$setAttribute(_el$34, "tabindex", _p$.s = _v$14);
+                      return _p$;
+                    }, {
+                      e: undefined,
+                      t: undefined,
+                      a: undefined,
+                      o: undefined,
+                      i: undefined,
+                      n: undefined,
+                      s: undefined
+                    });
+                    _$runHydrationEvents();
+                    return _el$34;
+                  })();
+                }
+              }));
+              return _el$33;
+            })()
+          }));
+          return _el$27;
+        })()];
+      }
+    }), _el$29, _co$6);
+    _$effect(_p$ => {
+      var _v$5 = messages().calendar,
+        _v$6 = previousLabel(),
+        _v$7 = nextLabel();
+      _v$5 !== _p$.e && _$setAttribute(_el$21, "aria-label", _p$.e = _v$5);
+      _v$6 !== _p$.t && _$setAttribute(_el$23, "aria-label", _p$.t = _v$6);
+      _v$7 !== _p$.a && _$setAttribute(_el$25, "aria-label", _p$.a = _v$7);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    _$runHydrationEvents();
+    return _el$21;
+  })();
+}
+function TimeInput(props) {
+  const messages = useUiMessages();
+  return (() => {
+    var _el$35 = _$getNextElement(_tmpl$12),
+      _el$39 = _el$35.firstChild,
+      [_el$40, _co$7] = _$getNextMarker(_el$39.nextSibling),
+      _el$37 = _el$40.nextSibling,
+      _el$38 = _el$37.firstChild;
+    _$insert(_el$35, _$createComponent(Show, {
+      get when() {
+        return props.label;
+      },
+      get children() {
+        var _el$36 = _$getNextElement(_tmpl$1);
+        _$insert(_el$36, () => props.label);
+        return _el$36;
+      }
+    }), _el$40, _co$7);
+    _el$38.addEventListener("blur", () => props.onChange(normalizeTimeInput(props.time)));
+    _el$38.$$input = event => props.onChange(filterTimeInput(event.currentTarget.value));
+    _$effect(() => _$setAttribute(_el$38, "aria-label", props.label ? messages().timeLabel({
+      label: props.label
+    }) : messages().time));
+    _$effect(() => _$setProperty(_el$38, "value", props.time));
+    _$runHydrationEvents();
+    return _el$35;
+  })();
+}
+export function DatePicker(props) {
+  const value = () => resolveMaybeAccessor(props.value);
+  const dateConfig = useDateConfigLocale(() => props.dateConfig);
+  const [visibleMonth, setVisibleMonth] = createSignal(parseDateValue(value(), dateConfig()));
+  const valueLabel = () => displayDate(value(), dateConfig());
+  return _$createComponent(PickerShell, {
+    owner: props,
+    icon: "ti ti-calendar",
+    valueLabel: valueLabel,
+    clearValue: null,
+    onOpen: () => setVisibleMonth(parseDateValue(value(), dateConfig())),
+    get wide() {
+      return Boolean(props.presets?.length);
+    },
+    children: close => (() => {
+      var _el$41 = _$getNextElement(_tmpl$13),
+        _el$42 = _el$41.firstChild,
+        [_el$43, _co$8] = _$getNextMarker(_el$42.nextSibling),
+        _el$44 = _el$43.nextSibling,
+        [_el$45, _co$9] = _$getNextMarker(_el$44.nextSibling);
+      _$insert(_el$41, _$createComponent(PresetRail, {
+        get presets() {
+          return props.presets;
+        },
+        onSelect: value => {
+          close();
+          commitFieldValue(props, value);
+        }
+      }), _el$43, _co$8);
+      _$insert(_el$41, _$createComponent(DatePickerPanel, {
+        visibleMonth: visibleMonth,
+        setVisibleMonth: setVisibleMonth,
+        selected: value,
+        focusDate: value,
+        onSelect: value => {
+          close();
+          commitFieldValue(props, value);
+        },
+        get dateConfig() {
+          return dateConfig();
+        }
+      }), _el$45, _co$9);
+      return _el$41;
+    })()
+  });
+}
+export function DateTimePicker(props) {
+  const value = () => resolveMaybeAccessor(props.value);
+  const dateConfig = useDateConfigLocale(() => props.dateConfig);
+  const parts = () => splitDateTime(value(), dateConfig());
+  const [visibleMonth, setVisibleMonth] = createSignal(parseDateValue(parts().date, dateConfig()));
+  const [draftDate, setDraftDate] = createSignal(parts().date);
+  const [draftTime, setDraftTime] = createSignal(parts().time || "09:00");
+  const valueLabel = () => formatDateTimeValue(value(), dateConfig());
+  const syncDraft = () => {
+    const next = parts();
+    setDraftDate(next.date);
+    setDraftTime(next.time || "09:00");
+    setVisibleMonth(parseDateValue(next.date, dateConfig()));
+  };
+  return _$createComponent(PickerShell, {
+    owner: props,
+    icon: "ti ti-calendar-time",
+    valueLabel: valueLabel,
+    clearValue: null,
+    get timezone() {
+      return dateConfig().timeZone;
+    },
+    onOpen: syncDraft,
+    get wide() {
+      return Boolean(props.presets?.length);
+    },
+    children: close => [(() => {
+      var _el$46 = _$getNextElement(_tmpl$13),
+        _el$47 = _el$46.firstChild,
+        [_el$48, _co$0] = _$getNextMarker(_el$47.nextSibling),
+        _el$49 = _el$48.nextSibling,
+        [_el$50, _co$1] = _$getNextMarker(_el$49.nextSibling);
+      _$insert(_el$46, _$createComponent(PresetRail, {
+        get presets() {
+          return props.presets;
+        },
+        onSelect: value => {
+          close();
+          commitFieldValue(props, value);
+        }
+      }), _el$48, _co$0);
+      _$insert(_el$46, _$createComponent(DatePickerPanel, {
+        visibleMonth: visibleMonth,
+        setVisibleMonth: setVisibleMonth,
+        selected: draftDate,
+        focusDate: draftDate,
+        onSelect: value => {
+          setDraftDate(value);
+          setVisibleMonth(parseDateValue(value, dateConfig()));
+        },
+        get dateConfig() {
+          return dateConfig();
+        }
+      }), _el$50, _co$1);
+      return _el$46;
+    })(), (() => {
+      var _el$51 = _$getNextElement(_tmpl$14),
+        _el$53 = _el$51.firstChild,
+        [_el$54, _co$10] = _$getNextMarker(_el$53.nextSibling),
+        _el$52 = _el$54.nextSibling;
+      _$insert(_el$51, _$createComponent(TimeInput, {
+        get time() {
+          return draftTime();
+        },
+        onChange: setDraftTime
+      }), _el$54, _co$10);
+      _el$52.$$click = () => {
+        if (!draftDate() || !isCompleteTime(draftTime())) return;
+        const value = toDateTimeValue(draftDate(), draftTime(), dateConfig());
+        close();
+        commitFieldValue(props, value);
+      };
+      _$effect(() => _$setProperty(_el$52, "disabled", !draftDate() || !isCompleteTime(draftTime())));
+      _$runHydrationEvents();
+      return _el$51;
+    })()]
+  });
+}
+export function DateRangePicker(props) {
+  const messages = useUiMessages();
+  const withTime = () => props.withTime ?? false;
+  const value = () => resolveMaybeAccessor(props.value);
+  const dateConfig = useDateConfigLocale(() => props.dateConfig);
+  const parts = () => ({
+    start: withTime() ? splitDateTime(value().start, dateConfig()) : {
+      date: value().start ?? "",
+      time: "09:00"
+    },
+    end: withTime() ? splitDateTime(value().end, dateConfig()) : {
+      date: value().end ?? "",
+      time: "10:00"
+    }
+  });
+  const [visibleMonth, setVisibleMonth] = createSignal(parseDateValue(parts().start.date || parts().end.date, dateConfig()));
+  const [draftRange, setDraftRange] = createSignal({
+    start: parts().start.date || null,
+    end: parts().end.date || null
+  });
+  const [previewDate, setPreviewDate] = createSignal(null);
+  const [startTime, setStartTime] = createSignal(parts().start.time || "09:00");
+  const [endTime, setEndTime] = createSignal(parts().end.time || "10:00");
+  const displayRange = createMemo(() => previewRange(draftRange(), previewDate()));
+  const syncDraft = () => {
+    const next = parts();
+    setDraftRange({
+      start: next.start.date || null,
+      end: next.end.date || null
+    });
+    setPreviewDate(null);
+    setStartTime(next.start.time || "09:00");
+    setEndTime(next.end.time || "10:00");
+    setVisibleMonth(parseDateValue(next.start.date || next.end.date, dateConfig()));
+  };
+  const valueLabel = () => {
+    if (!value().start && !value().end) return "";
+    const format = withTime() ? formatDateTimeValue : displayDate;
+    return `${value().start ? format(value().start, dateConfig()) : "Start"} to ${value().end ? format(value().end, dateConfig()) : "End"}`;
+  };
+  const valueContent = () => {
+    const format = withTime() ? formatDateTimeValue : displayDate;
+    return (() => {
+      var _el$55 = _$getNextElement(_tmpl$15),
+        _el$56 = _el$55.firstChild,
+        _el$57 = _el$56.nextSibling,
+        _el$58 = _el$57.nextSibling;
+      _$insert(_el$56, (() => {
+        var _c$ = _$memo(() => !!value().start);
+        return () => _c$() ? format(value().start, dateConfig()) : messages().start;
+      })());
+      _$insert(_el$58, (() => {
+        var _c$2 = _$memo(() => !!value().end);
+        return () => _c$2() ? format(value().end, dateConfig()) : "End";
+      })());
+      return _el$55;
+    })();
+  };
+  const selectDate = value => {
+    const current = draftRange();
+    if (!current.start || current.end) {
+      setDraftRange({
+        start: value,
+        end: null
+      });
+    } else {
+      setDraftRange(orderedRange(current.start, value));
+    }
+    setPreviewDate(null);
+  };
+  const applyDuration = minutes => {
+    const current = draftRange();
+    if (!current.start || !isCompleteTime(startTime())) return;
+    const start = toDateTimeValue(current.start, startTime(), dateConfig());
+    if (!start) return;
+    const end = new Date(new Date(start).getTime() + minutes * 60_000).toISOString();
+    const next = splitDateTime(end, dateConfig());
+    setDraftRange({
+      start: current.start,
+      end: next.date || current.end || current.start
+    });
+    setEndTime(next.time || endTime());
+  };
+  const durationMinutes = createMemo(() => {
+    const current = displayRange();
+    if (!current.start || !current.end || !isCompleteTime(startTime()) || !isCompleteTime(endTime())) return null;
+    const start = toDateTimeValue(current.start, startTime(), dateConfig());
+    const end = toDateTimeValue(current.end, endTime(), dateConfig());
+    if (!start || !end) return null;
+    return Math.round((new Date(end).getTime() - new Date(start).getTime()) / 60_000);
+  });
+  const durationLabel = () => {
+    const current = displayRange();
+    if (!current.start || !current.end) return "";
+    if (!withTime()) return formatDateOnlyRangeDuration(current, dateConfig());
+    if (!isCompleteTime(startTime()) || !isCompleteTime(endTime())) return "";
+    const start = toDateTimeValue(current.start, startTime(), dateConfig());
+    const end = toDateTimeValue(current.end, endTime(), dateConfig());
+    return start && end ? dates.formatDuration(start, end, dateConfig()) : "";
+  };
+  const commit = close => {
+    const current = draftRange();
+    if (!withTime()) {
+      close();
+      commitFieldValue(props, current);
+      return;
+    }
+    if ((current.start || current.end) && (!isCompleteTime(startTime()) || !isCompleteTime(endTime()))) return;
+    const value = {
+      start: current.start ? toDateTimeValue(current.start, startTime(), dateConfig()) : null,
+      end: current.end ? toDateTimeValue(current.end, endTime(), dateConfig()) : null
+    };
+    close();
+    commitFieldValue(props, value);
+  };
+  return _$createComponent(PickerShell, {
+    owner: props,
+    icon: "ti ti-calendar-stats",
+    valueLabel: valueLabel,
+    valueContent: valueContent,
+    clearValue: {
+      start: null,
+      end: null
+    },
+    get timezone() {
+      return _$memo(() => !!withTime())() ? dateConfig().timeZone : undefined;
+    },
+    footerMeta: () => _$createComponent(Show, {
+      get when() {
+        return durationLabel();
+      },
+      get children() {
+        var _el$59 = _$getNextElement(_tmpl$16),
+          _el$60 = _el$59.firstChild,
+          _el$61 = _el$60.nextSibling,
+          [_el$62, _co$11] = _$getNextMarker(_el$61.nextSibling);
+        _$insert(_el$59, durationLabel, _el$62, _co$11);
+        return _el$59;
+      }
+    }),
+    onOpen: syncDraft,
+    get wide() {
+      return Boolean(props.datePresets?.length || props.presets?.length);
+    },
+    children: close => [(() => {
+      var _el$63 = _$getNextElement(_tmpl$13),
+        _el$64 = _el$63.firstChild,
+        [_el$65, _co$12] = _$getNextMarker(_el$64.nextSibling),
+        _el$66 = _el$65.nextSibling,
+        [_el$67, _co$13] = _$getNextMarker(_el$66.nextSibling);
+      _$insert(_el$63, _$createComponent(Show, {
+        get when() {
+          return props.datePresets?.length;
+        },
+        get fallback() {
+          return _$createComponent(PresetRail, {
+            get presets() {
+              return props.presets;
+            },
+            onSelect: value => {
+              close();
+              commitFieldValue(props, value);
+            }
+          });
+        },
+        get children() {
+          return _$createComponent(PresetRail, {
+            get presets() {
+              return props.datePresets;
+            },
+            onSelect: value => {
+              setDraftRange(value ? {
+                start: value,
+                end: value
+              } : {
+                start: null,
+                end: null
+              });
+              if (value) setVisibleMonth(parseDateValue(value, dateConfig()));
+            }
+          });
+        }
+      }), _el$65, _co$12);
+      _$insert(_el$63, _$createComponent(DatePickerPanel, {
+        visibleMonth: visibleMonth,
+        setVisibleMonth: setVisibleMonth,
+        range: displayRange,
+        focusDate: () => draftRange().start,
+        onSelect: selectDate,
+        onDayPreview: value => {
+          const current = draftRange();
+          setPreviewDate(current.start && !current.end ? value : null);
+        },
+        get dateConfig() {
+          return dateConfig();
+        }
+      }), _el$67, _co$13);
+      return _el$63;
+    })(), _$createComponent(Show, {
+      get when() {
+        return withTime();
+      },
+      get children() {
+        var _el$68 = _$getNextElement(_tmpl$17),
+          _el$69 = _el$68.firstChild,
+          [_el$70, _co$14] = _$getNextMarker(_el$69.nextSibling),
+          _el$71 = _el$70.nextSibling,
+          [_el$72, _co$15] = _$getNextMarker(_el$71.nextSibling);
+        _$insert(_el$68, _$createComponent(TimeInput, {
+          get label() {
+            return messages().start;
+          },
+          get time() {
+            return startTime();
+          },
+          onChange: setStartTime
+        }), _el$70, _co$14);
+        _$insert(_el$68, _$createComponent(TimeInput, {
+          get label() {
+            return messages().end;
+          },
+          get time() {
+            return endTime();
+          },
+          onChange: setEndTime
+        }), _el$72, _co$15);
+        return _el$68;
+      }
+    }), (() => {
+      var _el$73 = _$getNextElement(_tmpl$14),
+        _el$76 = _el$73.firstChild,
+        [_el$77, _co$16] = _$getNextMarker(_el$76.nextSibling),
+        _el$75 = _el$77.nextSibling;
+      _$insert(_el$73, _$createComponent(Show, {
+        get when() {
+          return _$memo(() => !!withTime())() && props.durationPresets?.length;
+        },
+        get children() {
+          var _el$74 = _$getNextElement(_tmpl$18);
+          _$insert(_el$74, _$createComponent(For, {
+            get each() {
+              return props.durationPresets;
+            },
+            children: preset => (() => {
+              var _el$78 = _$getNextElement(_tmpl$6);
+              _el$78.$$click = () => applyDuration(preset.minutes);
+              _$insert(_el$78, () => preset.label);
+              _$effect(() => _$setAttribute(_el$78, "aria-pressed", durationMinutes() === preset.minutes));
+              _$runHydrationEvents();
+              return _el$78;
+            })()
+          }));
+          _$effect(() => _$setAttribute(_el$74, "aria-label", messages().durationPresets));
+          return _el$74;
+        }
+      }), _el$77, _co$16);
+      _el$75.$$click = () => commit(close);
+      _$effect(() => _$setProperty(_el$75, "disabled", Boolean(draftRange().start) !== Boolean(draftRange().end) || Boolean(withTime() && draftRange().start && draftRange().end && (!isCompleteTime(startTime()) || !isCompleteTime(endTime())))));
+      _$runHydrationEvents();
+      return _el$73;
+    })()]
+  });
+}
+_$delegateEvents(["click", "keydown", "input"]);
+//# sourceMappingURL=DatePicker.js.map