@gspa/ui 0.1.4 → 0.3.0

package/dist/DatePicker.vue_vue_type_script_setup_true_lang-Dx_9f8DO.js

@@ -0,0 +1,557 @@
+import { defineComponent as et, ref as h, computed as g, watch as se, onMounted as tt, onBeforeUnmount as at, createElementBlock as f, openBlock as d, createElementVNode as o, createBlock as rt, createCommentVNode as Z, normalizeClass as V, withModifiers as Ae, Teleport as lt, createVNode as nt, Transition as it, withCtx as ut, normalizeStyle as ot, toDisplayString as F, Fragment as C, renderList as A, unref as de, nextTick as R } from "vue";
+const st = { class: "relative w-full rounded-md bg-(--ui-surface)" }, dt = { class: "relative" }, ct = ["id", "value", "disabled", "placeholder", "required", "aria-describedby", "aria-expanded"], ft = { class: "min-w-0" }, vt = { class: "mb-3 flex items-center justify-between gap-2" }, gt = ["disabled", "aria-disabled", "aria-label"], mt = ["aria-label"], bt = ["disabled", "aria-disabled", "aria-label"], pt = {
+  class: "mb-1 grid grid-cols-7 gap-1",
+  "aria-hidden": "true"
+}, yt = ["aria-label"], ht = ["data-day", "data-focus-preferred", "disabled", "aria-disabled", "aria-selected", "aria-label", "onClick", "onKeydown"], xt = ["aria-label"], wt = ["data-focus-preferred", "disabled", "aria-disabled", "aria-selected", "aria-label", "onClick"], Dt = ["aria-label"], kt = ["data-focus-preferred", "disabled", "aria-disabled", "aria-selected", "aria-label", "onClick"], Mt = {
+  key: 3,
+  class: "mt-3 border-t pt-2 ui-border"
+}, St = ["disabled", "aria-disabled"], Nt = {
+  key: 0,
+  class: "border-t pt-3 ui-border sm:border-l sm:border-t-0 sm:pl-3 sm:pt-0"
+}, Yt = { class: "max-h-64 space-y-1 overflow-y-auto pr-1" }, Tt = ["aria-selected", "onClick"], M = 12, Ft = /* @__PURE__ */ et({
+  __name: "DatePicker",
+  props: {
+    id: String,
+    modelValue: { type: [String, Date], default: "" },
+    disabled: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    min: [String, Date],
+    max: [String, Date],
+    minDate: [String, Date],
+    maxDate: [String, Date],
+    yearRange: Array,
+    initialView: {
+      type: String,
+      default: "day",
+      validator: (m) => ["day", "month", "year"].includes(m)
+    },
+    placeholder: { type: String, default: "Select date" },
+    format: { type: String, default: "DD/MM/YYYY" },
+    clearable: { type: Boolean, default: !0 },
+    showToday: { type: Boolean, default: !0 },
+    calendarPosition: { type: String, default: "left-0 bottom-full" },
+    ariaDescribedby: String,
+    customValidation: { type: Function, default: null },
+    disabledDates: { type: [Array, Function], default: null },
+    enableTime: { type: Boolean, default: !1 },
+    minuteInterval: { type: Number, default: 1 }
+  },
+  emits: ["update:modelValue", "validation-error"],
+  setup(m, { emit: Ie }) {
+    const i = m, I = Ie, x = h(!1), s = h("day"), P = h(null), J = h(null), ce = h({}), b = O(/* @__PURE__ */ new Date()), v = h(b.getMonth()), l = h(b.getFullYear()), z = h(b.getDate()), w = h(Math.floor(b.getFullYear() / M) * M), u = h(null), H = h(!1), Y = h("00:00"), Ee = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], fe = Array.from(
+      { length: 12 },
+      (e, t) => new Date(2e3, t, 1).toLocaleString("default", { month: "long" })
+    ), S = g(() => U(i.minDate ?? i.min)), N = g(() => U(i.maxDate ?? i.max)), p = g(() => {
+      if (!i.yearRange || i.yearRange.length !== 2) return null;
+      const e = Math.trunc(Number(i.yearRange[0])), t = Math.trunc(Number(i.yearRange[1]));
+      return !Number.isFinite(e) || !Number.isFinite(t) ? null : e <= t ? [e, t] : [t, e];
+    }), E = g(() => Math.max(
+      p.value?.[0] ?? Number.NEGATIVE_INFINITY,
+      S.value?.getFullYear() ?? Number.NEGATIVE_INFINITY
+    )), L = g(() => Math.min(
+      p.value?.[1] ?? Number.POSITIVE_INFINITY,
+      N.value?.getFullYear() ?? Number.POSITIVE_INFINITY
+    )), Q = g(() => fe[v.value]), ve = g(() => _(l.value, v.value)), ge = g(() => c(l.value, v.value, 1).getDay()), me = g(() => {
+      const e = _(l.value, v.value - 1);
+      return Array.from(
+        { length: ge.value },
+        (t, a) => e - ge.value + a + 1
+      );
+    }), _e = g(() => {
+      const e = me.value.length + ve.value, t = e % 7 === 0 ? 0 : 7 - e % 7;
+      return Array.from({ length: t }, (a, r) => r + 1);
+    }), be = g(
+      () => Array.from({ length: M }, (e, t) => w.value + t).filter((e) => e >= E.value && e <= L.value)
+    ), pe = g(() => w.value + M - 1), K = g(() => {
+      if (s.value === "day") return `${Q.value} ${l.value}`;
+      if (s.value === "month") return String(l.value);
+      const e = be.value;
+      return e.length ? `${e[0]}–${e[e.length - 1]}` : `${w.value}–${pe.value}`;
+    }), Be = g(() => s.value === "day" ? `Select the month. Currently ${K.value}` : s.value === "month" ? `Select the year. Currently ${l.value}` : `Return to day selection. Showing years ${K.value}`), Re = g(() => s.value === "day" ? "Previous month" : s.value === "month" ? "Previous year" : "Previous year range"), Pe = g(() => s.value === "day" ? "Next month" : s.value === "month" ? "Next year" : "Next year range"), X = g(() => s.value === "day" ? re(l.value, v.value - 1) : s.value === "month" ? l.value - 1 >= E.value : w.value > E.value), ee = g(() => s.value === "day" ? re(l.value, v.value + 1) : s.value === "month" ? l.value + 1 <= L.value : pe.value < L.value), ye = g(() => u.value ? i.enableTime ? Le(u.value) : he(u.value) : ""), He = g(() => {
+      const e = Math.min(60, Math.max(1, Number(i.minuteInterval) || 1)), t = [];
+      for (let a = 0; a < 24; a++)
+        for (let r = 0; r < 60; r += e)
+          t.push(`${String(a).padStart(2, "0")}:${String(r).padStart(2, "0")}`);
+      return t;
+    });
+    function c(e, t, a, r = 0, n = 0) {
+      const D = /* @__PURE__ */ new Date(0);
+      return D.setFullYear(e, t, a), D.setHours(r, n, 0, 0), D;
+    }
+    function O(e) {
+      return c(e.getFullYear(), e.getMonth(), e.getDate());
+    }
+    function _(e, t) {
+      return c(e, t + 1, 0).getDate();
+    }
+    function U(e) {
+      if (!e) return null;
+      if (e instanceof Date)
+        return Number.isNaN(e.getTime()) ? null : c(e.getFullYear(), e.getMonth(), e.getDate(), e.getHours(), e.getMinutes());
+      const t = e.match(/^(\d{4,})-(\d{2})-(\d{2})(?:T(\d{2}):(\d{2}))?/);
+      if (t) {
+        const [, r, n, D, k = "0", B = "0"] = t, Fe = Number(r), Ce = Number(n) - 1, Ve = Number(D), G = c(Fe, Ce, Ve, Number(k), Number(B));
+        return G.getFullYear() === Fe && G.getMonth() === Ce && G.getDate() === Ve ? G : null;
+      }
+      const a = new Date(e);
+      return Number.isNaN(a.getTime()) ? null : a;
+    }
+    function y(e) {
+      return c(e.getFullYear(), e.getMonth(), e.getDate()).getTime();
+    }
+    function he(e) {
+      const t = String(e.getMonth() + 1).padStart(2, "0"), a = String(e.getDate()).padStart(2, "0");
+      return i.format.replace("MM", t).replace("DD", a).replace("YYYY", String(e.getFullYear()));
+    }
+    function Le(e) {
+      const t = String(e.getHours()).padStart(2, "0"), a = String(e.getMinutes()).padStart(2, "0");
+      return `${he(e)} ${t}:${a}`;
+    }
+    function ze(e) {
+      const t = String(e.getFullYear()).padStart(4, "0"), a = String(e.getMonth() + 1).padStart(2, "0"), r = String(e.getDate()).padStart(2, "0");
+      return `${t}-${a}-${r}`;
+    }
+    function te(e) {
+      const t = y(e);
+      return !(S.value && t < y(S.value) || N.value && t > y(N.value) || p.value && (e.getFullYear() < p.value[0] || e.getFullYear() > p.value[1]));
+    }
+    function T(e) {
+      return !te(e) || i.disabledDates && (typeof i.disabledDates == "function" && i.disabledDates(new Date(e)) || Array.isArray(i.disabledDates) && i.disabledDates.some((t) => {
+        const a = U(t);
+        return a ? y(a) === y(e) : !1;
+      })) ? !0 : !!i.customValidation?.(new Date(e));
+    }
+    function ae(e) {
+      return T(c(l.value, v.value, e));
+    }
+    function j(e) {
+      for (let t = 1; t <= _(l.value, e); t++)
+        if (!T(c(l.value, e, t))) return !1;
+      return !0;
+    }
+    function q(e) {
+      if (e < E.value || e > L.value) return !0;
+      for (let t = 0; t < 12; t++)
+        for (let a = 1; a <= _(e, t); a++)
+          if (!T(c(e, t, a))) return !1;
+      return !0;
+    }
+    function re(e, t) {
+      const a = c(e, t, 1), r = c(a.getFullYear(), a.getMonth() + 1, 0);
+      return !(a.getFullYear() < E.value || a.getFullYear() > L.value || S.value && y(r) < y(S.value) || N.value && y(a) > y(N.value));
+    }
+    function le(e) {
+      const t = p.value?.[0];
+      return t !== void 0 ? t + Math.floor((e - t) / M) * M : Math.floor(e / M) * M;
+    }
+    function xe(e) {
+      let t = O(e);
+      return p.value && t.getFullYear() < p.value[0] && (t = c(p.value[0], 0, 1)), p.value && t.getFullYear() > p.value[1] && (t = c(p.value[1], 11, 31)), S.value && y(t) < y(S.value) && (t = O(S.value)), N.value && y(t) > y(N.value) && (t = O(N.value)), t;
+    }
+    function Ke(e) {
+      return b.getDate() === e && b.getMonth() === v.value && b.getFullYear() === l.value;
+    }
+    function ne(e) {
+      return !!(u.value && u.value.getDate() === e && u.value.getMonth() === v.value && u.value.getFullYear() === l.value);
+    }
+    function we(e) {
+      if (!e)
+        return H.value = !1, I("validation-error", null), !0;
+      const t = i.customValidation?.(new Date(e)) || null;
+      return H.value = !!t, I("validation-error", t), !t;
+    }
+    async function ie() {
+      await R();
+      const e = J.value || (i.id ? document.getElementById(i.id) : null);
+      if (!e || !P.value) return;
+      const t = e.getBoundingClientRect(), a = P.value.offsetHeight || 360, r = P.value.offsetWidth || (i.enableTime ? 448 : 320), n = window.innerHeight - t.bottom, D = n >= a || n > t.top ? t.bottom + 8 : Math.max(8, t.top - a - 8), k = Math.min(Math.max(16, t.left), Math.max(16, window.innerWidth - r - 16));
+      ce.value = { top: `${D}px`, left: `${k}px` };
+    }
+    function $(e) {
+      z.value = e.getDate(), v.value = e.getMonth(), l.value = e.getFullYear(), w.value = le(e.getFullYear());
+    }
+    async function De() {
+      i.disabled || x.value || ((!u.value || !te(u.value)) && $(xe(b)), s.value = i.initialView, w.value = le(l.value), x.value = !0, await ie(), await Se());
+    }
+    function Oe() {
+      x.value ? W() : De();
+    }
+    function W(e = !1) {
+      x.value = !1, e && R(() => J.value?.focus());
+    }
+    async function ue(e) {
+      s.value = e, e === "year" && (w.value = le(l.value)), await R(), await ie(), await Se();
+    }
+    function Ue() {
+      ue({ day: "month", month: "year", year: "day" }[s.value]);
+    }
+    function je() {
+      X.value && (s.value === "day" ? $(c(l.value, v.value - 1, 1)) : s.value === "month" ? l.value-- : w.value = Math.max(w.value - M, E.value));
+    }
+    function qe() {
+      ee.value && (s.value === "day" ? $(c(l.value, v.value + 1, 1)) : s.value === "month" ? l.value++ : w.value += M);
+    }
+    function We(e) {
+      q(e) || (l.value = e, ue("month"));
+    }
+    function Ge(e) {
+      j(e) || (v.value = e, z.value = Math.min(z.value, _(l.value, e)), ue("day"));
+    }
+    function ke(e) {
+      const t = c(l.value, v.value, e);
+      if (T(t) || !we(t)) return;
+      const [a = "0", r = "0"] = Y.value.split(":");
+      t.setHours(Number(a), Number(r), 0, 0), u.value = t, Me(t), i.enableTime || window.setTimeout(() => W(), 150);
+    }
+    function Me(e) {
+      const t = ze(e);
+      i.enableTime ? I("update:modelValue", `${t}T${Y.value}`) : I("update:modelValue", t);
+    }
+    function Ze() {
+      T(b) || ($(b), ke(b.getDate()));
+    }
+    function Je() {
+      u.value = null, Y.value = "00:00", H.value = !1, I("update:modelValue", ""), I("validation-error", null);
+    }
+    function oe() {
+      return Array.from(P.value?.querySelectorAll("[data-picker-option]:not(:disabled)") || []);
+    }
+    async function Se() {
+      await R();
+      const e = oe(), t = e.find((r) => r.getAttribute("aria-selected") === "true"), a = e.find((r) => r.dataset.focusPreferred === "true");
+      (t || a || e[0])?.focus();
+    }
+    function Ne(e, t) {
+      const a = oe(), r = a.indexOf(e.currentTarget);
+      if (r < 0) return;
+      let n = r;
+      if (e.key === "ArrowRight") n = Math.min(a.length - 1, r + 1);
+      else if (e.key === "ArrowLeft") n = Math.max(0, r - 1);
+      else if (e.key === "ArrowDown") n = Math.min(a.length - 1, r + t);
+      else if (e.key === "ArrowUp") n = Math.max(0, r - t);
+      else if (e.key === "Home") n = r - r % t;
+      else if (e.key === "End") n = Math.min(a.length - 1, r + t - 1 - r % t);
+      else return;
+      e.preventDefault(), a[n]?.focus();
+    }
+    function Qe(e, t) {
+      if (e.key === "PageUp" || e.key === "PageDown") {
+        e.preventDefault();
+        const k = e.key === "PageUp" ? -1 : 1, B = c(l.value, v.value + k, Math.min(t, _(l.value, v.value + k)));
+        re(B.getFullYear(), B.getMonth()) && ($(B), R(() => Ye(B.getDate(), k)));
+        return;
+      }
+      if (!["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp", "Home", "End"].includes(e.key)) return;
+      e.preventDefault();
+      let r = { ArrowRight: 1, ArrowLeft: -1, ArrowDown: 7, ArrowUp: -7 }[e.key];
+      e.key === "Home" && (r = -c(l.value, v.value, t).getDay()), e.key === "End" && (r = 6 - c(l.value, v.value, t).getDay());
+      let n = c(l.value, v.value, t + r);
+      const D = r < 0 ? -1 : 1;
+      for (let k = 0; k < 3660; k++) {
+        if (!te(n)) return;
+        if (!T(n)) {
+          $(n), R(() => Ye(n.getDate(), D));
+          return;
+        }
+        n = c(n.getFullYear(), n.getMonth(), n.getDate() + D);
+      }
+    }
+    function Ye(e, t) {
+      const a = oe();
+      (a.find((n) => Number(n.dataset.day) === e) || (t < 0 ? a.at(-1) : a[0]))?.focus();
+    }
+    function Xe(e) {
+      ["Enter", " ", "ArrowDown"].includes(e.key) ? (e.preventDefault(), De()) : e.key === "Escape" && x.value && (e.preventDefault(), W(!0));
+    }
+    function Te(e) {
+      e.key === "Escape" && x.value && (e.preventDefault(), W(!0));
+    }
+    function $e() {
+      x.value && ie();
+    }
+    return se(() => i.modelValue, (e) => {
+      const t = U(e);
+      if (!t) {
+        u.value = null, H.value = !1;
+        return;
+      }
+      u.value = t, Y.value = `${String(t.getHours()).padStart(2, "0")}:${String(t.getMinutes()).padStart(2, "0")}`, $(t), we(t);
+    }, { immediate: !0 }), se([p, S, N], () => {
+      !u.value && !x.value && $(xe(b));
+    }), se(Y, (e) => {
+      if (!i.enableTime || !u.value) return;
+      const [t = "0", a = "0"] = e.split(":");
+      u.value.setHours(Number(t), Number(a), 0, 0), Me(u.value);
+    }), tt(() => {
+      document.addEventListener("keydown", Te), window.addEventListener("resize", $e);
+    }), at(() => {
+      document.removeEventListener("keydown", Te), window.removeEventListener("resize", $e);
+    }), (e, t) => (d(), f("div", st, [
+      o("div", dt, [
+        o("input", {
+          id: m.id,
+          ref_key: "inputRef",
+          ref: J,
+          type: "text",
+          value: ye.value,
+          readonly: "",
+          disabled: m.disabled,
+          placeholder: m.placeholder,
+          required: m.required,
+          "aria-describedby": m.ariaDescribedby,
+          "aria-haspopup": "dialog",
+          "aria-expanded": x.value,
+          class: V([
+            "w-full cursor-pointer rounded-md border px-3 py-2 pr-10 text-sm ui-surface ui-text placeholder:text-(--ui-text-muted) transition-colors",
+            "focus:border-(--ui-primary) focus:outline-none focus:ring-2 focus:ring-(--ui-ring)",
+            "disabled:cursor-not-allowed disabled:bg-(--ui-surface-muted) disabled:text-(--ui-text-muted)",
+            H.value ? "border-(--ui-danger) focus:border-(--ui-danger) focus:ring-(--ui-danger)" : "ui-border"
+          ]),
+          onClick: Oe,
+          onKeydown: Xe
+        }, null, 42, ct),
+        t[4] || (t[4] = o("div", { class: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2" }, [
+          o("svg", {
+            class: "h-4 w-4 ui-text-muted",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            "aria-hidden": "true"
+          }, [
+            o("path", {
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              "stroke-width": "2",
+              d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+            })
+          ])
+        ], -1)),
+        m.clearable && ye.value && !m.disabled ? (d(), f("button", {
+          key: 0,
+          type: "button",
+          class: "absolute right-9 top-1/2 -translate-y-1/2 rounded p-1 ui-text-muted transition-colors hover:bg-(--ui-surface-muted) hover:text-(--ui-text) focus-visible:ring-2 focus-visible:ring-(--ui-ring)",
+          "aria-label": "Clear date",
+          onClick: Ae(Je, ["stop"])
+        }, [...t[3] || (t[3] = [
+          o("svg", {
+            class: "h-3.5 w-3.5",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            "aria-hidden": "true"
+          }, [
+            o("path", {
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              "stroke-width": "2",
+              d: "M6 18L18 6M6 6l12 12"
+            })
+          ], -1)
+        ])])) : Z("", !0)
+      ]),
+      (d(), rt(lt, { to: "body" }, [
+        nt(it, {
+          "enter-active-class": "transition duration-100 ease-out",
+          "enter-from-class": "scale-95 opacity-0",
+          "enter-to-class": "scale-100 opacity-100",
+          "leave-active-class": "transition duration-75 ease-in",
+          "leave-from-class": "scale-100 opacity-100",
+          "leave-to-class": "scale-95 opacity-0"
+        }, {
+          default: ut(() => [
+            x.value ? (d(), f("div", {
+              key: 0,
+              ref_key: "calendarRef",
+              ref: P,
+              style: ot(ce.value),
+              role: "dialog",
+              "aria-label": "Choose date",
+              "aria-modal": "false",
+              class: V(["fixed z-10000 max-w-[calc(100vw-2rem)] rounded-lg border p-3 shadow-xl ui-surface ui-border-strong", m.enableTime ? "w-[28rem]" : "w-80"]),
+              onClick: t[2] || (t[2] = Ae(() => {
+              }, ["stop"]))
+            }, [
+              o("div", {
+                class: V(m.enableTime ? "grid grid-cols-1 gap-3 sm:grid-cols-[1fr_7.75rem]" : "block")
+              }, [
+                o("div", ft, [
+                  o("div", vt, [
+                    o("button", {
+                      type: "button",
+                      class: "rounded p-1.5 ui-text-muted transition-colors hover:bg-(--ui-surface-muted) hover:text-(--ui-text) focus-visible:ring-2 focus-visible:ring-(--ui-ring) disabled:cursor-not-allowed disabled:opacity-40",
+                      disabled: !X.value,
+                      "aria-disabled": !X.value,
+                      "aria-label": Re.value,
+                      onClick: je
+                    }, [...t[5] || (t[5] = [
+                      o("svg", {
+                        class: "h-4 w-4",
+                        fill: "none",
+                        stroke: "currentColor",
+                        viewBox: "0 0 24 24",
+                        "aria-hidden": "true"
+                      }, [
+                        o("path", {
+                          "stroke-linecap": "round",
+                          "stroke-linejoin": "round",
+                          "stroke-width": "2",
+                          d: "M15 18l-6-6 6-6"
+                        })
+                      ], -1)
+                    ])], 8, gt),
+                    o("button", {
+                      type: "button",
+                      class: "min-w-0 flex-1 rounded px-2 py-1 text-sm font-semibold ui-text transition-colors hover:bg-(--ui-surface-muted) focus-visible:ring-2 focus-visible:ring-(--ui-ring)",
+                      "aria-label": Be.value,
+                      onClick: Ue
+                    }, F(K.value), 9, mt),
+                    o("button", {
+                      type: "button",
+                      class: "rounded p-1.5 ui-text-muted transition-colors hover:bg-(--ui-surface-muted) hover:text-(--ui-text) focus-visible:ring-2 focus-visible:ring-(--ui-ring) disabled:cursor-not-allowed disabled:opacity-40",
+                      disabled: !ee.value,
+                      "aria-disabled": !ee.value,
+                      "aria-label": Pe.value,
+                      onClick: qe
+                    }, [...t[6] || (t[6] = [
+                      o("svg", {
+                        class: "h-4 w-4",
+                        fill: "none",
+                        stroke: "currentColor",
+                        viewBox: "0 0 24 24",
+                        "aria-hidden": "true"
+                      }, [
+                        o("path", {
+                          "stroke-linecap": "round",
+                          "stroke-linejoin": "round",
+                          "stroke-width": "2",
+                          d: "M9 18l6-6-6-6"
+                        })
+                      ], -1)
+                    ])], 8, bt)
+                  ]),
+                  s.value === "day" ? (d(), f(C, { key: 0 }, [
+                    o("div", pt, [
+                      (d(), f(C, null, A(Ee, (a) => o("div", {
+                        key: a,
+                        class: "py-1 text-center text-xs font-medium ui-text-muted"
+                      }, F(a), 1)), 64))
+                    ]),
+                    o("div", {
+                      class: "grid grid-cols-7 gap-1",
+                      role: "grid",
+                      "aria-label": `${Q.value} ${l.value}`
+                    }, [
+                      (d(!0), f(C, null, A(me.value, (a, r) => (d(), f("div", {
+                        key: `prev-${r}`,
+                        class: "py-1.5 text-center text-xs ui-text-soft",
+                        "aria-hidden": "true"
+                      }, F(a), 1))), 128)),
+                      (d(!0), f(C, null, A(ve.value, (a) => (d(), f("button", {
+                        key: a,
+                        type: "button",
+                        role: "gridcell",
+                        "data-picker-option": "",
+                        "data-day": a,
+                        "data-focus-preferred": a === z.value,
+                        disabled: ae(a),
+                        "aria-disabled": ae(a),
+                        "aria-selected": ne(a),
+                        "aria-label": `${Q.value} ${a}, ${l.value}`,
+                        class: V([
+                          "h-8 w-full min-w-0 rounded text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-(--ui-ring)",
+                          Ke(a) && !ne(a) ? "ui-primary-soft ring-1 ring-(--ui-primary)" : "",
+                          ne(a) ? "ui-primary-bg" : "ui-text hover:bg-(--ui-surface-muted)",
+                          ae(a) ? "cursor-not-allowed text-(--ui-text-soft) opacity-45 line-through hover:bg-transparent" : "cursor-pointer"
+                        ]),
+                        onClick: (r) => ke(a),
+                        onKeydown: (r) => Qe(r, a)
+                      }, F(a), 43, ht))), 128)),
+                      (d(!0), f(C, null, A(_e.value, (a, r) => (d(), f("div", {
+                        key: `next-${r}`,
+                        class: "py-1.5 text-center text-xs ui-text-soft",
+                        "aria-hidden": "true"
+                      }, F(a), 1))), 128))
+                    ], 8, yt)
+                  ], 64)) : s.value === "month" ? (d(), f("div", {
+                    key: 1,
+                    class: "grid grid-cols-3 gap-2",
+                    role: "grid",
+                    "aria-label": `Select a month in ${l.value}`
+                  }, [
+                    (d(!0), f(C, null, A(de(fe), (a, r) => (d(), f("button", {
+                      key: a,
+                      type: "button",
+                      role: "gridcell",
+                      "data-picker-option": "",
+                      "data-focus-preferred": r === v.value,
+                      disabled: j(r),
+                      "aria-disabled": j(r),
+                      "aria-selected": u.value?.getFullYear() === l.value && u.value?.getMonth() === r,
+                      "aria-label": `Select ${a} ${l.value}`,
+                      class: V([
+                        "min-h-11 rounded px-2 py-2 text-sm transition-colors focus-visible:ring-2 focus-visible:ring-(--ui-ring)",
+                        u.value?.getFullYear() === l.value && u.value?.getMonth() === r ? "ui-primary-bg" : "ui-text hover:bg-(--ui-surface-muted)",
+                        j(r) ? "cursor-not-allowed text-(--ui-text-soft) opacity-45 hover:bg-transparent" : ""
+                      ]),
+                      onClick: (n) => Ge(r),
+                      onKeydown: t[0] || (t[0] = (n) => Ne(n, 3))
+                    }, F(a.slice(0, 3)), 43, wt))), 128))
+                  ], 8, xt)) : (d(), f("div", {
+                    key: 2,
+                    class: "grid grid-cols-3 gap-2 sm:grid-cols-4",
+                    role: "grid",
+                    "aria-label": `Select a year from ${K.value}`
+                  }, [
+                    (d(!0), f(C, null, A(be.value, (a) => (d(), f("button", {
+                      key: a,
+                      type: "button",
+                      role: "gridcell",
+                      "data-picker-option": "",
+                      "data-focus-preferred": a === l.value,
+                      disabled: q(a),
+                      "aria-disabled": q(a),
+                      "aria-selected": u.value?.getFullYear() === a,
+                      "aria-label": `Select year ${a}`,
+                      class: V([
+                        "min-h-11 rounded px-1 py-2 text-sm transition-colors focus-visible:ring-2 focus-visible:ring-(--ui-ring)",
+                        u.value?.getFullYear() === a ? "ui-primary-bg" : "ui-text hover:bg-(--ui-surface-muted)",
+                        q(a) ? "cursor-not-allowed text-(--ui-text-soft) opacity-45 hover:bg-transparent" : ""
+                      ]),
+                      onClick: (r) => We(a),
+                      onKeydown: t[1] || (t[1] = (r) => Ne(r, 3))
+                    }, F(a), 43, kt))), 128))
+                  ], 8, Dt)),
+                  m.showToday && s.value === "day" ? (d(), f("div", Mt, [
+                    o("button", {
+                      type: "button",
+                      class: "w-full rounded px-3 py-1.5 text-xs font-medium ui-primary transition-colors hover:bg-(--ui-primary-soft) focus-visible:ring-2 focus-visible:ring-(--ui-ring) disabled:cursor-not-allowed disabled:opacity-40",
+                      disabled: T(de(b)),
+                      "aria-disabled": T(de(b)),
+                      onClick: Ze
+                    }, " Today ", 8, St)
+                  ])) : Z("", !0)
+                ]),
+                m.enableTime ? (d(), f("div", Nt, [
+                  t[7] || (t[7] = o("div", { class: "mb-2 text-xs font-semibold ui-text" }, " Time ", -1)),
+                  o("div", Yt, [
+                    (d(!0), f(C, null, A(He.value, (a) => (d(), f("button", {
+                      key: a,
+                      type: "button",
+                      class: V(["w-full rounded px-2 py-1.5 text-left text-sm transition-colors focus-visible:ring-2 focus-visible:ring-(--ui-ring)", a === Y.value ? "ui-primary-bg" : "ui-text hover:bg-(--ui-surface-muted)"]),
+                      "aria-selected": a === Y.value,
+                      onClick: (r) => Y.value = a
+                    }, F(a), 11, Tt))), 128))
+                  ])
+                ])) : Z("", !0)
+              ], 2)
+            ], 6)) : Z("", !0)
+          ]),
+          _: 1
+        })
+      ]))
+    ]));
+  }
+});
+export {
+  Ft as _
+};