@prokodo/ui 0.1.14 → 1.0.0

package/dist/components/datePicker/DatePicker.module.scss.js

@@ -0,0 +1,62 @@
+const dpBorderShift = "dpBorderShift";
+const dpDialogIn = "dpDialogIn";
+const dpSlideUp = "dpSlideUp";
+const styles = {
+  "prokodo-DatePicker": "prokodo-DatePicker",
+  "prokodo-DatePicker--primary": "prokodo-DatePicker--primary",
+  "prokodo-DatePicker--secondary": "prokodo-DatePicker--secondary",
+  "prokodo-DatePicker--success": "prokodo-DatePicker--success",
+  "prokodo-DatePicker--warning": "prokodo-DatePicker--warning",
+  "prokodo-DatePicker--error": "prokodo-DatePicker--error",
+  "prokodo-DatePicker--info": "prokodo-DatePicker--info",
+  "prokodo-DatePicker--inherit": "prokodo-DatePicker--inherit",
+  "prokodo-DatePicker--white": "prokodo-DatePicker--white",
+  "prokodo-DatePicker__trigger": "prokodo-DatePicker__trigger",
+  "prokodo-DatePicker__trigger--open": "prokodo-DatePicker__trigger--open",
+  dpBorderShift,
+  "prokodo-DatePicker__trigger__label": "prokodo-DatePicker__trigger__label",
+  "prokodo-DatePicker__trigger__label--float": "prokodo-DatePicker__trigger__label--float",
+  "prokodo-DatePicker__trigger__value": "prokodo-DatePicker__trigger__value",
+  "prokodo-DatePicker__trigger__value--empty": "prokodo-DatePicker__trigger__value--empty",
+  "prokodo-DatePicker__trigger__icon": "prokodo-DatePicker__trigger__icon",
+  "prokodo-DatePicker__dialog": "prokodo-DatePicker__dialog",
+  dpDialogIn,
+  dpSlideUp,
+  "prokodo-DatePicker__dialog__backdrop": "prokodo-DatePicker__dialog__backdrop",
+  "prokodo-DatePicker__dialog__close": "prokodo-DatePicker__dialog__close",
+  "prokodo-DatePicker__dialog__header": "prokodo-DatePicker__dialog__header",
+  "prokodo-DatePicker__month__label": "prokodo-DatePicker__month__label",
+  "prokodo-DatePicker__header-btn": "prokodo-DatePicker__header-btn",
+  "prokodo-DatePicker__header-range": "prokodo-DatePicker__header-range",
+  "prokodo-DatePicker__picker-grid": "prokodo-DatePicker__picker-grid",
+  "prokodo-DatePicker__picker-cell": "prokodo-DatePicker__picker-cell",
+  "prokodo-DatePicker__picker-cell--today": "prokodo-DatePicker__picker-cell--today",
+  "prokodo-DatePicker__picker-cell--selected": "prokodo-DatePicker__picker-cell--selected",
+  "prokodo-DatePicker__picker-cell--disabled": "prokodo-DatePicker__picker-cell--disabled",
+  "prokodo-DatePicker__nav__btn": "prokodo-DatePicker__nav__btn",
+  "prokodo-DatePicker__nav__btn--prev": "prokodo-DatePicker__nav__btn--prev",
+  "prokodo-DatePicker__weekdays": "prokodo-DatePicker__weekdays",
+  "prokodo-DatePicker__weekday": "prokodo-DatePicker__weekday",
+  "prokodo-DatePicker__days": "prokodo-DatePicker__days",
+  "prokodo-DatePicker__day": "prokodo-DatePicker__day",
+  "prokodo-DatePicker__day--disabled": "prokodo-DatePicker__day--disabled",
+  "prokodo-DatePicker__day--today": "prokodo-DatePicker__day--today",
+  "prokodo-DatePicker__day--selected": "prokodo-DatePicker__day--selected",
+  "prokodo-DatePicker__day--outside": "prokodo-DatePicker__day--outside",
+  "prokodo-DatePicker__time__row": "prokodo-DatePicker__time__row",
+  "prokodo-DatePicker__time__label": "prokodo-DatePicker__time__label",
+  "prokodo-DatePicker__time__select": "prokodo-DatePicker__time__select",
+  "prokodo-DatePicker__time__sep": "prokodo-DatePicker__time__sep",
+  "prokodo-DatePicker__footer": "prokodo-DatePicker__footer",
+  "prokodo-DatePicker__footer__btn": "prokodo-DatePicker__footer__btn",
+  "prokodo-DatePicker__footer__btn--ghost": "prokodo-DatePicker__footer__btn--ghost",
+  "prokodo-DatePicker__footer__btn--filled": "prokodo-DatePicker__footer__btn--filled",
+  "prokodo-DatePicker__helper": "prokodo-DatePicker__helper",
+  "prokodo-DatePicker__error": "prokodo-DatePicker__error"
+};
+export {
+  styles as default,
+  dpBorderShift,
+  dpDialogIn,
+  dpSlideUp
+};

package/dist/components/datePicker/DatePicker.server.js

@@ -1,8 +1,38 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsx } from "react/jsx-runtime";
+import dayjs from "dayjs";
 import { DatePickerView } from "./DatePicker.view.js";
-const DatePickerServer = /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(DatePickerView, { ...props, readOnly: true, onChange: void 0 }), "DatePickerServer");
+const noop = /* @__PURE__ */ __name(() => void 0, "noop");
+const DatePickerServer = /* @__PURE__ */ __name(({
+  onChange: _onChange,
+  value,
+  ...props
+}) => {
+  const selectedDate = value ? dayjs(value) : null;
+  return /* @__PURE__ */ jsx(
+    DatePickerView,
+    {
+      ...props,
+      readOnly: true,
+      isOpen: false,
+      selectedDate,
+      viewingMonth: selectedDate ?? dayjs(),
+      viewMode: "days",
+      onApply: noop,
+      onClear: noop,
+      onDayClick: noop,
+      onMonthSelect: noop,
+      onNextMonth: noop,
+      onPrevMonth: noop,
+      onTimeChange: noop,
+      onToday: noop,
+      onToggle: noop,
+      onViewModeChange: noop,
+      onYearSelect: noop
+    }
+  );
+}, "DatePickerServer");
 export {
   DatePickerServer as default
 };

package/dist/components/datePicker/DatePicker.utils.js

@@ -0,0 +1,103 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import dayjs from "dayjs";
+import { isNull } from "../../helpers/validations.js";
+const WEEKDAYS = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+const MONTHS_SHORT = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+function buildCalendarGrid(viewingMonth, minDate, maxDate) {
+  const today = dayjs();
+  const firstOfMonth = viewingMonth.startOf("month");
+  const totalDays = viewingMonth.daysInMonth();
+  const startOffset = (firstOfMonth.day() + 6) % 7;
+  const min = !isNull(minDate) ? dayjs(minDate).startOf("day") : null;
+  const max = !isNull(maxDate) ? dayjs(maxDate).startOf("day") : null;
+  const cells = [];
+  for (let i = startOffset - 1; i >= 0; i--) {
+    cells.push({
+      date: firstOfMonth.subtract(i + 1, "day"),
+      isCurrentMonth: false,
+      isToday: false,
+      isDisabled: true
+    });
+  }
+  for (let d = 1; d <= totalDays; d++) {
+    const date = firstOfMonth.date(d);
+    const start = date.startOf("day");
+    cells.push({
+      date,
+      isCurrentMonth: true,
+      isToday: date.isSame(today, "day"),
+      isDisabled: min !== null && start.isBefore(min) || max !== null && start.isAfter(max)
+    });
+  }
+  const trailing = (7 - cells.length % 7) % 7;
+  const lastOfMonth = firstOfMonth.endOf("month");
+  for (let i = 1; i <= trailing; i++) {
+    cells.push({
+      date: lastOfMonth.add(i, "day"),
+      isCurrentMonth: false,
+      isToday: false,
+      isDisabled: true
+    });
+  }
+  return cells;
+}
+__name(buildCalendarGrid, "buildCalendarGrid");
+function buildHours() {
+  return Array.from({ length: 24 }, (_, i) => i);
+}
+__name(buildHours, "buildHours");
+function buildMinutes(step) {
+  const s = Math.max(1, step);
+  const out = [];
+  for (let m = 0; m < 60; m += s) out.push(m);
+  return out;
+}
+__name(buildMinutes, "buildMinutes");
+function pad2(n) {
+  return String(n).padStart(2, "0");
+}
+__name(pad2, "pad2");
+function isMonthDisabled(month, year, minDate, maxDate) {
+  const firstDay = dayjs(new Date(year, month, 1));
+  const lastDay = firstDay.endOf("month");
+  const min = !isNull(minDate) ? dayjs(minDate).startOf("day") : null;
+  const max = !isNull(maxDate) ? dayjs(maxDate).startOf("day") : null;
+  if (min && lastDay.isBefore(min, "day")) return true;
+  if (max && firstDay.isAfter(max, "day")) return true;
+  return false;
+}
+__name(isMonthDisabled, "isMonthDisabled");
+function isYearDisabled(year, minDate, maxDate) {
+  const firstDay = dayjs(new Date(year, 0, 1));
+  const lastDay = dayjs(new Date(year, 11, 31));
+  const min = !isNull(minDate) ? dayjs(minDate).startOf("day") : null;
+  const max = !isNull(maxDate) ? dayjs(maxDate).startOf("day") : null;
+  if (min && lastDay.isBefore(min, "day")) return true;
+  if (max && firstDay.isAfter(max, "day")) return true;
+  return false;
+}
+__name(isYearDisabled, "isYearDisabled");
+export {
+  MONTHS_SHORT,
+  WEEKDAYS,
+  buildCalendarGrid,
+  buildHours,
+  buildMinutes,
+  isMonthDisabled,
+  isYearDisabled,
+  pad2
+};

package/dist/components/datePicker/DatePicker.view.js

@@ -1,13 +1,15 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { jsx } from "react/jsx-runtime";
-import dayjs from "dayjs";
-import { isNull } from "../../helpers/validations.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
 import { InputView } from "../input/Input.view.js";
+import { create } from "../../helpers/bem.js";
+import styles from "./DatePicker.module.scss.js";
+import { DatePickerDialog } from "./DatePickerDialog.view.js";
+const bem = create(styles, "DatePicker");
 function DatePickerView({
   name,
   label,
-  value,
   helperText,
   errorText,
   format,
@@ -16,45 +18,115 @@ function DatePickerView({
   maxDate,
   withTime = false,
   minuteStep = 1,
-  onChangeInput,
-  // <- string-based adapter
-  ...rest
+  color = "primary",
+  required,
+  prevIcon,
+  nextIcon,
+  prevAriaLabel,
+  nextAriaLabel,
+  weekdays,
+  monthFormat,
+  dayAriaFormat,
+  todayLabel,
+  clearLabel,
+  applyLabel,
+  timeLabel,
+  closeIcon,
+  closeLabel,
+  dialogColor,
+  isOpen,
+  /** When provided, the calendar dialog is portaled into this element (e.g. document.body on mobile). */
+  dialogPortalTarget,
+  viewingMonth,
+  selectedDate,
+  onToggle,
+  onPrevMonth,
+  onNextMonth,
+  onDayClick,
+  onToday,
+  onClear,
+  onApply,
+  onTimeChange,
+  onDialogTouchStart,
+  onDialogTouchEnd,
+  viewMode,
+  onViewModeChange,
+  onMonthSelect,
+  onYearSelect
 }) {
   const effectiveFormat = format ?? (withTime ? "YYYY-MM-DDTHH:mm" : "YYYY-MM-DD");
-  const inputType = withTime ? "datetime-local" : "date";
-  const htmlMinMaxFormat = withTime ? "YYYY-MM-DDTHH:mm" : "YYYY-MM-DD";
-  const displayValue = !isNull(value) ? dayjs(value).format(effectiveFormat) : "";
-  const min = !isNull(minDate) ? dayjs(minDate).format(htmlMinMaxFormat) : void 0;
-  const max = !isNull(maxDate) ? dayjs(maxDate).format(htmlMinMaxFormat) : void 0;
-  const computedStep = withTime ? Math.max(1, minuteStep) * 60 : void 0;
-  const { step: _ignored, ...restWithoutStep } = rest;
-  const handleInput = /* @__PURE__ */ __name((e) => {
-    onChangeInput == null ? void 0 : onChangeInput(
-      e.currentTarget.value
-    );
-  }, "handleInput");
-  const handleChange = /* @__PURE__ */ __name((e) => {
-    onChangeInput == null ? void 0 : onChangeInput(e.currentTarget.value);
-  }, "handleChange");
-  return /* @__PURE__ */ jsx(
-    InputView,
-    {
-      ...restWithoutStep,
-      errorText,
-      helperText,
-      isFocused: true,
-      label,
-      max,
-      min,
-      name,
-      placeholder,
-      type: inputType,
-      value: displayValue,
-      onChange: handleChange,
-      onInput: handleInput,
-      ...withTime && computedStep !== void 0 ? { step: computedStep } : {}
-    }
-  );
+  const displayValue = (selectedDate == null ? void 0 : selectedDate.format(effectiveFormat)) ?? "";
+  return /* @__PURE__ */ jsxs("div", { className: bem(void 0, { [color]: true }), children: [
+    /* @__PURE__ */ jsx(
+      InputView,
+      {
+        readOnly: true,
+        color,
+        errorText,
+        helperText,
+        isFocused: isOpen,
+        label,
+        name,
+        placeholder,
+        required,
+        trailingIcon: "Calendar01Icon",
+        trailingIconLabel: isOpen ? "Close calendar" : "Open calendar",
+        type: "text",
+        value: displayValue,
+        trailingIconButtonProps: {
+          "aria-haspopup": "dialog",
+          "aria-expanded": isOpen,
+          "aria-controls": isOpen ? `${name}-dialog` : void 0
+        },
+        onClick: onToggle,
+        onTrailingIconClick: onToggle
+      }
+    ),
+    isOpen && (() => {
+      const dialog = /* @__PURE__ */ jsx(
+        DatePickerDialog,
+        {
+          applyLabel,
+          clearLabel,
+          closeIcon,
+          closeLabel,
+          dayAriaFormat,
+          dialogColor: dialogColor ?? color,
+          label,
+          maxDate,
+          minDate,
+          minuteStep,
+          monthFormat,
+          name,
+          nextAriaLabel,
+          nextIcon,
+          prevAriaLabel,
+          prevIcon,
+          selectedDate,
+          timeLabel,
+          todayLabel,
+          viewingMonth,
+          viewMode,
+          weekdays,
+          withTime,
+          onApply,
+          onClear,
+          onClose: onToggle,
+          onDayClick,
+          onDialogTouchEnd,
+          onDialogTouchStart,
+          onMonthSelect,
+          onNextMonth,
+          onPrevMonth,
+          onTimeChange,
+          onToday,
+          onViewModeChange,
+          onYearSelect
+        }
+      );
+      return dialogPortalTarget ? createPortal(dialog, dialogPortalTarget) : dialog;
+    })()
+  ] });
 }
 __name(DatePickerView, "DatePickerView");
 export {

package/dist/components/datePicker/DatePickerDialog.view.js

@@ -0,0 +1,291 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { create } from "../../helpers/bem.js";
+import styles from "./DatePicker.module.scss.js";
+import { buildCalendarGrid, buildHours, WEEKDAYS, MONTHS_SHORT, isMonthDisabled, isYearDisabled, pad2, buildMinutes } from "./DatePicker.utils.js";
+import { Icon } from "../icon/Icon.js";
+const bem = create(styles, "DatePicker");
+function DatePickerDialog({
+  name,
+  label,
+  withTime = false,
+  minuteStep = 1,
+  selectedDate,
+  viewingMonth,
+  minDate,
+  maxDate,
+  prevIcon = "ArrowLeft01Icon",
+  nextIcon = "ArrowRight01Icon",
+  prevAriaLabel = "Previous month",
+  nextAriaLabel = "Next month",
+  weekdays = WEEKDAYS,
+  monthFormat: _monthFormat,
+  dayAriaFormat = "D MMMM YYYY",
+  todayLabel = "Today",
+  clearLabel = "Clear",
+  applyLabel = "Apply",
+  timeLabel = "Time",
+  closeIcon = "Cancel01Icon",
+  closeLabel = "Close",
+  dialogColor,
+  onPrevMonth,
+  onNextMonth,
+  onDayClick,
+  onToday,
+  onClear,
+  onApply,
+  onTimeChange,
+  onClose,
+  onDialogTouchStart,
+  onDialogTouchEnd,
+  viewMode = "days",
+  onViewModeChange,
+  onMonthSelect,
+  onYearSelect
+}) {
+  const calendarDays = buildCalendarGrid(viewingMonth, minDate, maxDate);
+  const hours = buildHours();
+  const minutes = buildMinutes(minuteStep);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: bem("dialog__backdrop"),
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": `Choose ${label}`,
+        "aria-modal": "true",
+        id: `${name}-dialog`,
+        role: "dialog",
+        className: [
+          bem("dialog"),
+          dialogColor ? bem(void 0, { [dialogColor]: true }) : ""
+        ].filter(Boolean).join(" "),
+        onTouchEnd: onDialogTouchEnd,
+        onTouchStart: onDialogTouchStart,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: bem("dialog__header"), children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                "aria-label": prevAriaLabel,
+                className: bem("nav__btn", { prev: true }),
+                type: "button",
+                onClick: onPrevMonth,
+                children: /* @__PURE__ */ jsx(Icon, { name: prevIcon, size: "sm" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: bem("month__label"), children: [
+              viewMode === "days" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: bem("header-btn"),
+                    type: "button",
+                    onClick: /* @__PURE__ */ __name(() => onViewModeChange == null ? void 0 : onViewModeChange("months"), "onClick"),
+                    children: viewingMonth.format("MMMM")
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: bem("header-btn"),
+                    type: "button",
+                    onClick: /* @__PURE__ */ __name(() => onViewModeChange == null ? void 0 : onViewModeChange("years"), "onClick"),
+                    children: viewingMonth.format("YYYY")
+                  }
+                )
+              ] }),
+              viewMode === "months" && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: bem("header-btn"),
+                  type: "button",
+                  onClick: /* @__PURE__ */ __name(() => onViewModeChange == null ? void 0 : onViewModeChange("years"), "onClick"),
+                  children: viewingMonth.format("YYYY")
+                }
+              ),
+              viewMode === "years" && (() => {
+                const startYear = Math.floor(viewingMonth.year() / 10) * 10;
+                return /* @__PURE__ */ jsxs("span", { className: bem("header-range"), children: [
+                  startYear,
+                  "–",
+                  startYear + 11
+                ] });
+              })()
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                "aria-label": nextAriaLabel,
+                className: bem("nav__btn", { next: true }),
+                type: "button",
+                onClick: onNextMonth,
+                children: /* @__PURE__ */ jsx(Icon, { name: nextIcon, size: "sm" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                "aria-label": closeLabel,
+                className: bem("dialog__close"),
+                type: "button",
+                onClick: onClose,
+                children: /* @__PURE__ */ jsx(Icon, { name: closeIcon, size: "sm" })
+              }
+            )
+          ] }),
+          viewMode === "days" && /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: bem("weekdays"), children: weekdays.map((wd) => /* @__PURE__ */ jsx("span", { className: bem("weekday"), children: wd }, wd)) }),
+          viewMode === "days" && /* @__PURE__ */ jsx("div", { className: bem("days"), role: "grid", children: Array.from(
+            { length: Math.ceil(calendarDays.length / 7) },
+            (_, weekIdx) => /* @__PURE__ */ jsx("div", { role: "row", children: calendarDays.slice(weekIdx * 7, weekIdx * 7 + 7).map((cell) => {
+              const isSelected = Boolean(
+                selectedDate && cell.isCurrentMonth && cell.date.isSame(selectedDate, "day")
+              );
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  "aria-label": cell.date.format(dayAriaFormat),
+                  "aria-selected": isSelected,
+                  disabled: cell.isDisabled,
+                  role: "gridcell",
+                  type: "button",
+                  className: bem("day", {
+                    today: cell.isToday,
+                    selected: isSelected,
+                    outside: !cell.isCurrentMonth,
+                    disabled: cell.isDisabled
+                  }),
+                  tabIndex: cell.isCurrentMonth && !cell.isDisabled ? 0 : -1,
+                  onClick: /* @__PURE__ */ __name(() => {
+                    if (!cell.isDisabled && cell.isCurrentMonth) {
+                      onDayClick(cell.date);
+                    }
+                  }, "onClick"),
+                  children: cell.date.date()
+                },
+                cell.date.format("YYYY-MM-DD")
+              );
+            }) }, weekIdx)
+          ) }),
+          viewMode === "months" && /* @__PURE__ */ jsx("div", { className: bem("picker-grid"), children: MONTHS_SHORT.map((monthName, idx) => {
+            const disabled = isMonthDisabled(
+              idx,
+              viewingMonth.year(),
+              minDate,
+              maxDate
+            );
+            const isSelected = (selectedDate == null ? void 0 : selectedDate.month()) === idx && (selectedDate == null ? void 0 : selectedDate.year()) === viewingMonth.year();
+            const isCurrent = (/* @__PURE__ */ new Date()).getMonth() === idx && (/* @__PURE__ */ new Date()).getFullYear() === viewingMonth.year();
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                "aria-disabled": disabled,
+                disabled,
+                type: "button",
+                className: bem("picker-cell", {
+                  selected: isSelected,
+                  today: isCurrent,
+                  disabled
+                }),
+                onClick: /* @__PURE__ */ __name(() => !disabled && (onMonthSelect == null ? void 0 : onMonthSelect(idx)), "onClick"),
+                children: monthName
+              },
+              monthName
+            );
+          }) }),
+          viewMode === "years" && (() => {
+            const startYear = Math.floor(viewingMonth.year() / 10) * 10;
+            const years = Array.from({ length: 12 }, (_, i) => startYear + i);
+            return /* @__PURE__ */ jsx("div", { className: bem("picker-grid"), children: years.map((y) => {
+              const disabled = isYearDisabled(y, minDate, maxDate);
+              const isSelected = (selectedDate == null ? void 0 : selectedDate.year()) === y;
+              const isCurrent = (/* @__PURE__ */ new Date()).getFullYear() === y;
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  "aria-disabled": disabled,
+                  disabled,
+                  type: "button",
+                  className: bem("picker-cell", {
+                    selected: isSelected,
+                    today: isCurrent,
+                    disabled
+                  }),
+                  onClick: /* @__PURE__ */ __name(() => !disabled && (onYearSelect == null ? void 0 : onYearSelect(y)), "onClick"),
+                  children: y
+                },
+                y
+              );
+            }) });
+          })(),
+          withTime && /* @__PURE__ */ jsxs("div", { className: bem("time__row"), children: [
+            /* @__PURE__ */ jsx("span", { className: bem("time__label"), children: timeLabel }),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                "aria-label": "Hour",
+                className: bem("time__select"),
+                value: (selectedDate == null ? void 0 : selectedDate.hour()) ?? 0,
+                onChange: /* @__PURE__ */ __name((e) => onTimeChange(parseInt(e.target.value, 10), "hour"), "onChange"),
+                children: hours.map((h) => /* @__PURE__ */ jsx("option", { value: h, children: pad2(h) }, h))
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: bem("time__sep"), children: ":" }),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                "aria-label": "Minute",
+                className: bem("time__select"),
+                value: selectedDate ? Math.round(
+                  selectedDate.minute() / Math.max(1, minuteStep)
+                ) * Math.max(1, minuteStep) : 0,
+                onChange: /* @__PURE__ */ __name((e) => onTimeChange(parseInt(e.target.value, 10), "minute"), "onChange"),
+                children: minutes.map((m) => /* @__PURE__ */ jsx("option", { value: m, children: pad2(m) }, m))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: bem("footer"), children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: bem("footer__btn", { ghost: true }),
+                type: "button",
+                onClick: onToday,
+                children: todayLabel
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: bem("footer__btn", { ghost: true }),
+                type: "button",
+                onClick: onClear,
+                children: clearLabel
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: bem("footer__btn", { filled: true }),
+                type: "button",
+                onClick: onApply,
+                children: applyLabel
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+__name(DatePickerDialog, "DatePickerDialog");
+export {
+  DatePickerDialog
+};