@dotss/ui 0.0.11 → 1.0.0

package/DatePicker/DatePicker.es.js

@@ -1,18 +1,20 @@
-import { jsxs as H, jsx as u } from "@emotion/react/jsx-runtime";
-import { forwardRef as Pt, useState as Y, useRef as v, useCallback as te, useLayoutEffect as Yt, useEffect as Z } from "react";
-import ct from "../IconButton/IconButton.es.js";
-import ee from "../Menu/Menu.es.js";
-import ne from "../Menu/MenuBlock/MenuBlock.es.js";
-import "../Menu/MenuButton/MenuButton.es.js";
-import re from "../core/useTheme.es.js";
+import { jsxs as S, jsx as f, Fragment as fe } from "@emotion/react/jsx-runtime";
+import { forwardRef as de, useState as X, useRef as R, useCallback as he, useLayoutEffect as Bt, useEffect as nt } from "react";
+import me from "../Flexbox/Flexbox.es.js";
+import _t from "../Icon/Icon.es.js";
+import Kt from "../IconButton/IconButton.es.js";
+import pe from "../Menu/Menu.es.js";
+import ge from "../Menu/MenuBlock/MenuBlock.es.js";
+import qt from "../Menu/MenuButton/MenuButton.es.js";
+import ye from "../core/useTheme.es.js";
 import x from "@emotion/styled";
-import P from "../utils/getContrastingTextColor/getContrastingTextColor.es.js";
-const ie = x.div`
+import it from "../utils/getContrastingTextColor/getContrastingTextColor.es.js";
+const De = x.div`
   position: relative;
   display: flex;
   flex-direction: column;
   gap: ${({ theme: { spacing: t } }) => t.content(2)}px;
-`, se = x.div`
+`, Ut = x.div`
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
@@ -30,7 +32,7 @@ const ie = x.div`
   lineHeight: t.lineHeight,
   letterSpacing: t.letterSpacing
 })};
-`, oe = x.div`
+`, $e = x.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -46,7 +48,7 @@ const ie = x.div`
   lineHeight: t.lineHeight,
   letterSpacing: t.letterSpacing
 })};
-`, ce = x.div`
+`, we = x.div`
   display: flex;
   align-items: center;
   padding: 0 ${({ theme: { spacing: t }, edgeSpacing: n }) => t.content(n || 0)}px;
@@ -68,22 +70,22 @@ const ie = x.div`
   color: t[50]
 })};
   }
-`, ae = x.div`
+`, be = x.div`
   overflow: hidden;
-`, le = x.div`
+`, xe = x.div`
   display: flex;
   transform: translate3d(0, 0, 0);
-`, Ft = x.div`
+`, Gt = x.div`
   display: flex;
   flex-direction: column;
   min-width: 100%;
   gap: ${({ theme: { spacing: t } }) => t.content(2)}px;
   padding: ${({ theme: { spacing: t } }) => t.content(2)}px
     ${({ theme: { spacing: t }, edgeSpacing: n }) => t.content(n || 0)}px;
-`, jt = x.div`
+`, Vt = x.div`
   display: flex;
   width: 100%;
-`, Ot = x.div`
+`, Jt = x.div`
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -91,10 +93,20 @@ const ie = x.div`
   flex-direction: column;
   gap: ${({ theme: { spacing: t } }) => t.content(1)}px;
   flex: 1;
-  cursor: ${({ disabled: t }) => t ? "not-allowed" : "pointer"};
-  pointer-events: ${({ disabled: t }) => t ? "none" : "auto"};
+  cursor: pointer;
+  pointer-events: auto;
   min-width: 30px;
 
+  &:focus-visible {
+    outline: 2px solid ${({ theme: { palette: t } }) => t.grey.black};
+    z-index: 10;
+  }
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+    color: ${({ theme: { palette: t } }) => t.grey[30]};
+  }
+
   & > div:nth-of-type(1) {
     position: relative;
     display: inline-flex;
@@ -125,14 +137,13 @@ const ie = x.div`
     palette: { brand: t, grey: n }
   },
   variant: r,
-  today: i,
-  selected: o,
-  disabled: l
+  today: a,
+  selected: c
 }) => {
-  if (o) {
-    let s = {
+  if (c) {
+    let h = {
       fontWeight: 700,
-      color: P(t.primary.main, [n.white, n[100]]),
+      color: it(t.primary.main, [n.white, n[100]]),
       "& > div:nth-of-type(1):before": {
         content: '""',
         position: "absolute",
@@ -141,13 +152,16 @@ const ie = x.div`
         width: 30,
         height: 30,
         transform: "translate(-50%, -50%)",
-        backgroundColor: l ? t.primary.disable : t.primary.main,
+        backgroundColor: t.primary.main,
         borderRadius: "50%"
+      },
+      '&[aria-disabled="true"] > div:nth-of-type(1):before': {
+        backgroundColor: t.primary.disable
       }
     };
-    return r === "start" && (s = {
+    return r === "start" && (h = {
       fontWeight: 700,
-      color: P(t.primary.main, [n.white, n[100]]),
+      color: it(t.primary.main, [n.white, n[100]]),
       overflow: "hidden",
       "& > div:nth-of-type(1):before": {
         content: '""',
@@ -157,23 +171,29 @@ const ie = x.div`
         width: 30,
         height: 30,
         transform: "translate(-50%, -50%)",
-        backgroundColor: l ? t.primary.disable : t.primary.main,
+        backgroundColor: t.primary.main,
         borderTopLeftRadius: 100,
         borderBottomLeftRadius: 100
       },
+      '&[aria-disabled="true"] > div:nth-of-type(1):before': {
+        backgroundColor: t.primary.disable
+      },
       "& > div:nth-of-type(1):after": {
         content: '""',
         position: "absolute",
         top: "50%",
-        left: 30,
+        left: "50%",
         width: "100%",
         height: 30,
         transform: "translateY(-50%)",
-        backgroundColor: l ? t.primary.disable : t.primary.main
+        backgroundColor: t.primary.main
+      },
+      '&[aria-disabled="true"] > div:nth-of-type(1):after': {
+        backgroundColor: t.primary.disable
       }
-    }), r === "end" && (s = {
+    }), r === "end" && (h = {
       fontWeight: 700,
-      color: P(t.primary.main, [n.white, n[100]]),
+      color: it(t.primary.main, [n.white, n[100]]),
       overflow: "hidden",
       "& > div:nth-of-type(1):before": {
         content: '""',
@@ -183,10 +203,13 @@ const ie = x.div`
         width: 30,
         height: 30,
         transform: "translate(-50%, -50%)",
-        backgroundColor: l ? t.primary.disable : t.primary.main,
+        backgroundColor: t.primary.main,
         borderTopRightRadius: 100,
         borderBottomRightRadius: 100
       },
+      '&[aria-disabled="true"] > div:nth-of-type(1):before': {
+        backgroundColor: t.primary.disable
+      },
       "& > div:nth-of-type(1):after": {
         content: '""',
         position: "absolute",
@@ -195,11 +218,14 @@ const ie = x.div`
         width: "100%",
         height: 30,
         transform: "translateY(-50%)",
-        backgroundColor: l ? t.primary.disable : t.primary.main
+        backgroundColor: t.primary.main
+      },
+      '&[aria-disabled="true"] > div:nth-of-type(1):after': {
+        backgroundColor: t.primary.disable
       }
-    }), r === "middle" && (s = {
+    }), r === "middle" && (h = {
       fontWeight: 700,
-      color: P(t.primary.main, [n.white, n[100]]),
+      color: it(t.primary.main, [n.white, n[100]]),
       overflow: "hidden",
       "& > div:nth-of-type(1):after": {
         content: '""',
@@ -209,11 +235,14 @@ const ie = x.div`
         width: "calc(100% + 1px)",
         height: 30,
         transform: "translate(-50%, -50%)",
-        backgroundColor: l ? t.primary.disable : t.primary.main
+        backgroundColor: t.primary.main
+      },
+      '&[aria-disabled="true"] > div:nth-of-type(1):after': {
+        backgroundColor: t.primary.disable
       }
-    }), s;
+    }), h;
   }
-  return i ? {
+  return a ? {
     "& > div:nth-of-type(1):after": {
       content: '""',
       position: "absolute",
@@ -230,395 +259,542 @@ const ie = x.div`
 
   ${({
   theme: {
-    palette: { grey: t, pink: n, brand: r }
+    palette: { pink: t, brand: n }
   },
-  holiday: i,
-  disabled: o,
-  selected: l
+  holiday: r,
+  selected: a
 }) => {
-  let s = null;
-  return i && (s = {
-    color: P(l ? r.primary.main : "transparent", [
-      n[30],
-      n[100]
-    ])
-  }), o && (s = {
-    color: t[30]
-  }), o && i && (s = {
-    color: n[30]
-  }), s;
+  let c = null;
+  return r && (c = {
+    color: it(a ? n.primary.main : "transparent", [
+      t[30],
+      t[100]
+    ]),
+    '&[aria-disabled="true"]': {
+      color: t[30]
+    }
+  }), c;
 }}
-`, fe = x.div`
+`, Pt = x.div`
   display: flex;
   align-items: center;
   justify-content: center;
 
   cursor: ${({ clickable: t }) => t ? "pointer" : "default"};
-`, Xt = x.span`
+`, Qt = x.span`
   width: 100%;
   min-width: 100%;
   height: 6px;
   min-height: 6px;
-`, ue = 30, xe = Pt(function({
+`, ke = 30, Le = de(function({
   children: n,
   onChange: r,
-  value: i,
-  date: o,
-  minDate: l,
-  maxDate: s,
-  holidayDates: h,
-  disableDates: K,
-  showWeekHead: at = !1,
+  value: a,
+  date: c,
+  minDate: h,
+  maxDate: d,
+  holidayDates: p,
+  disableDates: P,
+  showWeekHead: gt = !1,
   multiple: T = !1,
-  period: tt = !1,
-  enableMonthSelect: b = !1,
-  showToday: At = !1,
-  edgeSpacing: lt = 0,
-  renderEvent: z,
-  inlineCSS: Et,
-  ...Nt
-}, qt) {
-  const { spacing: St } = re(), [O, ft] = Y(
-    (typeof o == "string" || typeof o == "number" ? new Date(o) : o) || /* @__PURE__ */ new Date()
-  ), [g, U] = Y(() => Array.isArray(i) && i.length > 0 ? $(i[0]) : $(i)), [I, et] = Y(() => Array.isArray(i) && i.length > 1 ? $(i[i.length - 1]) : null), [M, vt] = Y(0), [w, X] = Y(1), [kt, Rt] = Y(!1), [ut, Wt] = Y(!1), dt = v(null), m = v(null), nt = v(0), R = v(0), A = v(!1), V = v(w), ht = v(), mt = v(null), pt = v(null), W = O.getFullYear(), rt = O.getMonth(), Ht = Tt(W, rt), C = j(rt), _ = $(i), B = $(h), E = $(K), yt = q(O, l) || _t(O, l), gt = F(O, s) || _t(O, s), it = new Date(W, rt - 1), st = new Date(W, rt + 1), J = `${W}. ${C}`, N = tt && !!g && !!I, bt = [
+  period: ot = !1,
+  enableMonthSelect: Q = !1,
+  showToday: Wt = !1,
+  edgeSpacing: yt = 0,
+  renderEvent: Y,
+  inlineCSS: ee,
+  monthProps: st,
+  ...re
+}, ne) {
+  const { spacing: Ht } = ye(), [H, Dt] = X(
+    (typeof c == "string" || typeof c == "number" ? new Date(c) : c) || /* @__PURE__ */ new Date()
+  ), [$, Z] = X(() => Array.isArray(a) && a.length > 0 ? y(a[0]) : y(a)), [L, at] = X(() => Array.isArray(a) && a.length > 1 ? y(a[a.length - 1]) : null), [k, Ft] = X(0), [w, B] = X(1), [zt, Yt] = X(!1), [$t, wt] = X(!1), tt = R(null), g = R(null), ct = R(0), F = R(0), v = R(!1), et = R(w), bt = R(), lt = R(null), xt = R(null), M = H.getFullYear(), ut = H.getMonth(), Lt = Rt(M, ut), I = N(ut), _ = y(a), K = y(p), q = y(P), kt = V(H, h) || pt(H, h), Mt = C(H, d) || pt(H, d), ft = new Date(M, ut - 1), dt = new Date(M, ut + 1), O = `${M}. ${I}`, j = `${M}년 ${I}월`, U = ot && !!$ && !!L, It = [
     {
-      year: it.getFullYear(),
-      month: j(it.getMonth()),
-      weeks: Tt(it.getFullYear(), it.getMonth())
+      year: ft.getFullYear(),
+      month: N(ft.getMonth()),
+      weeks: Rt(ft.getFullYear(), ft.getMonth())
     },
     {
-      year: W,
-      month: C,
-      weeks: Ht
+      year: M,
+      month: I,
+      weeks: Lt
     },
     {
-      year: st.getFullYear(),
-      month: j(st.getMonth()),
-      weeks: Tt(st.getFullYear(), st.getMonth())
+      year: dt.getFullYear(),
+      month: N(dt.getMonth()),
+      weeks: Rt(dt.getFullYear(), dt.getMonth())
     }
-  ], Dt = typeof z == "function", Gt = bt[1].weeks.length * (ue + (Dt ? 10 : 0) + St.content(2)) + St.content(2), zt = (e) => () => {
-    T && (m.current && (m.current.style.transition = "none", m.current.style.cursor = "grabbing"), nt.current = e, A.current = !0);
-  }, L = te(() => {
-    if (!A.current) return;
-    const e = M - R.current, f = Math.abs(M - e), a = M * 0.1;
-    m.current && (m.current.style.transform = `translate3d(-${M * w}px, 0, 0)`, m.current.style.cursor = "grab", m.current.style.transition = "transform 0.2s"), nt.current = 0, R.current = 0, A.current = !1, !(f <= a) && (M < e ? X((p) => p + 1) : M > e && X((p) => p - 1));
-  }, [M, w]), It = (e) => () => {
-    if (!(A.current || w !== 1)) {
-      if (!tt) {
-        r == null || r(e, $);
+  ], At = typeof Y == "function", ie = It[1].weeks.length * (ke + (At ? 10 : 0) + Ht.content(2)) + Ht.content(2), Ot = (e) => () => {
+    T && (g.current && (g.current.style.transition = "none", g.current.style.cursor = "grabbing"), ct.current = e, v.current = !0);
+  }, E = he(() => {
+    if (!v.current) return;
+    const e = k - F.current, u = Math.abs(k - e), o = k * 0.1;
+    g.current && (g.current.style.transform = `translate3d(-${k * w}px, 0, 0)`, g.current.style.cursor = "grab", g.current.style.transition = "transform 0.2s"), ct.current = 0, F.current = 0, v.current = !1, !(u <= o) && (k < e ? B((s) => s + 1) : k > e && B((s) => s - 1));
+  }, [k, w]), St = (e, u) => () => {
+    if (!(v.current || w !== 1) && !u) {
+      if (!ot) {
+        r == null || r(e, y);
         return;
       }
-      if (k(e, g) && Array.isArray(i) && i.length === 1) {
-        U(null), et(null), r == null || r([], $);
+      if (W(e, $) && Array.isArray(a) && a.length === 1) {
+        Z(null), at(null), r == null || r([], y);
         return;
-      } else if (k(e, g) && !Array.isArray(i) && k(e, i)) {
-        U(null), et(null), r == null || r([], $);
+      } else if (W(e, $) && !Array.isArray(a) && W(e, a)) {
+        Z(null), at(null), r == null || r([], y);
         return;
       }
-      if (!g) {
-        U(e), r == null || r(e, $);
+      if (!$) {
+        Z(e), r == null || r(e, y);
         return;
       }
-      if (!I && g) {
-        const [f, a] = F(e, g) ? [g, e] : [e, g];
-        U(f), et(a);
-        const p = Bt([f, a], K);
-        r == null || r(p, $);
+      if (!L && $) {
+        const [o, s] = C(e, $) ? [$, e] : [e, $];
+        Z(o), at(s);
+        const i = te([o, s], P);
+        r == null || r(i, y);
         return;
       }
-      g && I && (U(e), et(null), r == null || r(e, $));
+      $ && L && (Z(e), at(null), r == null || r(e, y));
     }
-  }, Kt = (e) => zt(e.clientX)(), Ut = (e) => zt(e.touches[0].clientX)(), Vt = () => {
-    kt || (m.current && (m.current.style.transition = "transform 0.2s"), X((e) => e - 1));
-  }, Ct = () => {
-    kt || (m.current && (m.current.style.transition = "transform 0.2s"), X((e) => e + 1));
-  }, $t = () => Wt((e) => !e), Jt = (e) => {
+  }, oe = (e) => Ot(e.clientX)(), se = (e) => Ot(e.touches[0].clientX)(), jt = () => {
+    zt || (g.current && (g.current.style.transition = "transform 0.2s"), B((e) => e - 1));
+  }, Et = () => {
+    zt || (g.current && (g.current.style.transition = "transform 0.2s"), B((e) => e + 1));
+  }, ht = (e) => {
+    e.stopPropagation(), wt((u) => !u);
+  }, ae = () => wt(!1), ce = (e) => {
     if (!e) return;
-    const [f, a] = e.toString().split(".").map(Number);
-    ft(new Date(f, a - 1)), Wt(!1);
+    const [u, o] = e.toString().split(".").map(Number);
+    Dt(new Date(u, o - 1)), wt(!1);
+  }, Xt = (e, u) => (o) => {
+    const s = new Date(e);
+    let i = null;
+    if (o.stopPropagation(), o.key === "ArrowRight")
+      i = new Date(s), i.setDate(s.getDate() + 1);
+    else if (o.key === "ArrowLeft")
+      i = new Date(s), i.setDate(s.getDate() - 1);
+    else if (o.key === "ArrowDown")
+      i = new Date(s), i.setDate(s.getDate() + 7);
+    else if (o.key === "ArrowUp")
+      i = new Date(s), i.setDate(s.getDate() - 7);
+    else if (o.key === "Home")
+      i = new Date(s), i.setDate(s.getDate() - s.getDay());
+    else if (o.key === "End")
+      i = new Date(s), i.setDate(s.getDate() + (6 - s.getDay()));
+    else if (o.key === "PageUp")
+      i = new Date(s), i.setMonth(s.getMonth() - 1);
+    else if (o.key === "PageDown")
+      i = new Date(s), i.setMonth(s.getMonth() + 1);
+    else if (o.key === "Enter" || o.key === " ") {
+      o.preventDefault(), St(e, u)();
+      return;
+    } else if (o.key === "Escape") {
+      o.preventDefault(), r == null || r([], y);
+      return;
+    }
+    if (i && tt.current) {
+      const D = s.getMonth(), m = s.getFullYear(), b = i.getMonth(), l = i.getFullYear(), A = y(i), z = tt.current.querySelector(
+        `[data-date="${A}"]`
+      );
+      if (z) {
+        if (D !== b || m !== l) {
+          i > s ? (Et(), setTimeout(() => {
+            z.focus();
+          }, 0)) : (jt(), setTimeout(() => {
+            z.focus();
+          }, 0));
+          return;
+        }
+        z.focus();
+      }
+    }
   };
-  return Yt(() => {
+  return Bt(() => {
     var e;
-    vt(((e = dt.current) == null ? void 0 : e.clientWidth) || 0);
-  }, [T]), Z(() => {
+    Ft(((e = tt.current) == null ? void 0 : e.clientWidth) || 0);
+  }, [T]), nt(() => {
     const e = () => {
-      var f;
-      vt(((f = dt.current) == null ? void 0 : f.clientWidth) || 0);
+      var u;
+      Ft(((u = tt.current) == null ? void 0 : u.clientWidth) || 0);
     };
     return window.addEventListener("resize", e), window.addEventListener("scroll", e), () => {
       window.removeEventListener("resize", e), window.removeEventListener("scroll", e);
     };
-  }, [T]), Z(() => {
-    const e = m.current, f = (c, y, D) => {
-      if (!e || !A.current) return;
-      R.current = c - nt.current;
-      const d = y - nt.current, S = 5;
-      if (A.current = A.current || Math.abs(R.current) > S && Math.abs(d) < S * 2, D.cancelable && D.preventDefault(), A.current) {
-        if (yt && R.current > 0) {
-          L();
+  }, [T]), nt(() => {
+    const e = g.current, u = (i, D, m) => {
+      if (!e || !v.current) return;
+      F.current = i - ct.current;
+      const b = D - ct.current, l = 5;
+      if (v.current = v.current || Math.abs(F.current) > l && Math.abs(b) < l * 2, m.cancelable && m.preventDefault(), v.current) {
+        if (kt && F.current > 0) {
+          E();
           return;
         }
-        if (gt && R.current < 0) {
-          L();
+        if (Mt && F.current < 0) {
+          E();
           return;
         }
-        Math.abs(R.current) >= 10 && (e.style.transform = `translate3d(${R.current - M * w}px, 0, 0)`, e.style.cursor = "grabbing");
+        Math.abs(F.current) >= 10 && (e.style.transform = `translate3d(${F.current - k * w}px, 0, 0)`, e.style.cursor = "grabbing");
       }
-    }, a = (c) => f(c.touches[0].clientX, c.touches[0].clientY, c), p = (c) => {
-      A.current && f(c.clientX, c.clientY, c);
+    }, o = (i) => u(i.touches[0].clientX, i.touches[0].clientY, i), s = (i) => {
+      v.current && u(i.clientX, i.clientY, i);
     };
-    return e == null || e.addEventListener("mousemove", p), e == null || e.addEventListener("touchmove", a), () => {
-      e == null || e.removeEventListener("mousemove", p), e == null || e.removeEventListener("touchmove", a);
+    return e == null || e.addEventListener("mousemove", s), e == null || e.addEventListener("touchmove", o), () => {
+      e == null || e.removeEventListener("mousemove", s), e == null || e.removeEventListener("touchmove", o);
     };
-  }, [M, w, L, gt, yt]), Z(() => {
-    Rt(!0), ht.current = setTimeout(() => {
-      m.current && (m.current.style.transition = "none"), w > V.current ? (X(1), ft((e) => new Date(e.setMonth(e.getMonth() + 1))), V.current = 1) : w < V.current ? (ft((e) => new Date(e.setMonth(e.getMonth() - 1))), X(1), V.current = 1) : V.current = w, Rt(!1);
+  }, [k, w, E, Mt, kt]), nt(() => {
+    Yt(!0), bt.current = setTimeout(() => {
+      g.current && (g.current.style.transition = "none"), w > et.current ? (B(1), Dt((e) => new Date(e.setMonth(e.getMonth() + 1))), et.current = 1) : w < et.current ? (Dt((e) => new Date(e.setMonth(e.getMonth() - 1))), B(1), et.current = 1) : et.current = w, Yt(!1);
     }, 200);
-  }, [w]), Yt(() => {
-    if (!tt || !Array.isArray(i)) return;
-    const e = Bt(i, K);
-    i.length < e.length && (r == null || r(e, $));
-  }, [tt, i, r, K]), Z(() => {
+  }, [w]), Bt(() => {
+    if (!ot || !Array.isArray(a)) return;
+    const e = te(a, P);
+    a.length < e.length && (r == null || r(e, y));
+  }, [ot, a, r, P]), nt(() => {
     let e;
-    return ut && (e = setTimeout(() => {
-      if (pt.current) {
-        const f = pt.current.querySelector("ul"), a = f == null ? void 0 : f.querySelector(`[data-value="${J}"]`);
-        a == null || a.scrollIntoView({
+    return $t && (e = setTimeout(() => {
+      if (xt.current) {
+        const u = xt.current.querySelector("ul"), o = u == null ? void 0 : u.querySelector(`[data-value="${O}"]`);
+        o == null || o.scrollIntoView({
           block: "start"
         });
       }
     }, 200)), () => {
       clearTimeout(e);
     };
-  }, [ut, J]), Z(() => () => {
-    ht.current && clearTimeout(ht.current);
-  }, []), /* @__PURE__ */ H(ie, { ref: qt, ...Nt, css: Et, children: [
-    T ? /* @__PURE__ */ H(oe, { children: [
-      /* @__PURE__ */ u(
-        ct,
+  }, [$t, O]), nt(() => () => {
+    bt.current && clearTimeout(bt.current);
+  }, []), /* @__PURE__ */ S(De, { ref: ne, "aria-label": "달력", role: "application", ...re, css: ee, children: [
+    T ? /* @__PURE__ */ S($e, { children: [
+      /* @__PURE__ */ f(
+        Kt,
         {
           name: "ChevronLeftLine",
           size: "small",
-          onClick: Vt,
-          disabled: yt
+          onClick: jt,
+          disabled: kt,
+          "aria-label": `이전 달로 이동, 현재 ${j}`
         }
       ),
-      /* @__PURE__ */ H(
-        fe,
+      Q && /* @__PURE__ */ S(
+        Pt,
         {
-          ref: mt,
-          clickable: !!b,
-          onClick: b ? $t : void 0,
+          ref: lt,
+          clickable: !0,
+          onClick: ht,
+          "aria-label": j,
+          ...st,
           children: [
-            J,
-            b && /* @__PURE__ */ u(ct, { name: "ArrowDownFill", size: "xSmall" })
+            O,
+            /* @__PURE__ */ f(
+              qt,
+              {
+                iconOnly: !0,
+                isMenuOpen: !1,
+                size: "xSmall",
+                variant: "text",
+                menuId: "date-picker-month-menu",
+                onClick: ht,
+                "aria-label": `달 변경, 현재 ${j}`,
+                startAdornment: /* @__PURE__ */ f(_t, { name: "ArrowDownFill", size: "xSmall" })
+              }
+            )
           ]
         }
       ),
-      /* @__PURE__ */ u(
-        ct,
+      !Q && /* @__PURE__ */ f(
+        Pt,
+        {
+          ref: lt,
+          id: "date-picker-title",
+          clickable: !1,
+          "aria-label": j,
+          ...st,
+          children: O
+        }
+      ),
+      /* @__PURE__ */ f(
+        Kt,
         {
           name: "ChevronRightLine",
           size: "small",
-          onClick: Ct,
-          disabled: gt
+          onClick: Et,
+          disabled: Mt,
+          "aria-label": `다음 달로 이동, 현재 ${j}`
         }
       )
-    ] }) : /* @__PURE__ */ H(
-      se,
-      {
-        ref: mt,
-        clickable: !!b,
-        onClick: b ? $t : void 0,
-        children: [
-          J,
-          b && /* @__PURE__ */ u(ct, { name: "ArrowDownFill", size: "xSmall" })
-        ]
-      }
-    ),
-    b && /* @__PURE__ */ u(
-      ee,
+    ] }) : /* @__PURE__ */ S(fe, { children: [
+      Q && /* @__PURE__ */ S(
+        Ut,
+        {
+          ref: lt,
+          clickable: !0,
+          onClick: ht,
+          "aria-label": j,
+          ...st,
+          children: [
+            O,
+            /* @__PURE__ */ f(
+              qt,
+              {
+                iconOnly: !0,
+                isMenuOpen: !1,
+                size: "xSmall",
+                variant: "text",
+                menuId: "date-picker-month-menu",
+                onClick: ht,
+                "aria-label": `달 변경, 현재 ${j}`,
+                startAdornment: /* @__PURE__ */ f(_t, { name: "ArrowDownFill", size: "xSmall" })
+              }
+            )
+          ]
+        }
+      ),
+      !Q && /* @__PURE__ */ f(Ut, { id: "date-picker-title", clickable: !1, ...st, children: O })
+    ] }),
+    Q && /* @__PURE__ */ f(
+      pe,
       {
-        anchorRef: mt,
-        ref: pt,
-        open: ut,
-        onClose: $t,
-        onChange: Jt,
-        value: J,
+        id: "date-picker-month-menu",
+        anchorRef: lt,
+        ref: xt,
+        open: $t,
+        onClose: ae,
+        onChange: ce,
+        value: O,
         placement: T ? "bottom-center" : "bottom-left",
         width: 160,
         fitToAnchorWidth: !1,
         maxHeight: 368,
-        children: Array.from({ length: 130 }, (e, f) => {
-          const a = 1970 + f;
-          return Array.from({ length: 12 }, (p, c) => {
-            const y = c + 1, D = y < 10 ? `0${y}` : y, d = new Date(a, c + 1, 0).getDate(), S = `${a}-${D}-${d}`, Q = `${a}-${D}-01`;
-            return q(S, l) || F(Q, s) ? null : /* @__PURE__ */ u(ne, { value: `${a}. ${D}`, children: `${a}. ${D}` }, `${a}-${D}`);
+        children: Array.from({ length: 130 }, (e, u) => {
+          const o = 1970 + u;
+          return Array.from({ length: 12 }, (s, i) => {
+            const D = i + 1, m = D < 10 ? `0${D}` : D, b = new Date(o, i + 1, 0).getDate(), l = `${o}-${m}-${b}`, A = `${o}-${m}-01`;
+            return V(l, h) || C(A, d) ? null : /* @__PURE__ */ f(
+              ge,
+              {
+                value: `${o}. ${m}`,
+                "aria-label": `${o}년 ${m}월 선택`,
+                children: `${o}. ${m}`
+              },
+              `${o}-${m}`
+            );
           });
         })
       }
     ),
-    at && /* @__PURE__ */ H(ce, { edgeSpacing: lt, children: [
-      /* @__PURE__ */ u("span", { children: "일" }),
-      /* @__PURE__ */ u("span", { children: "월" }),
-      /* @__PURE__ */ u("span", { children: "화" }),
-      /* @__PURE__ */ u("span", { children: "수" }),
-      /* @__PURE__ */ u("span", { children: "목" }),
-      /* @__PURE__ */ u("span", { children: "금" }),
-      /* @__PURE__ */ u("span", { children: "토" })
-    ] }),
-    /* @__PURE__ */ u(ae, { ref: dt, children: /* @__PURE__ */ H(
-      le,
+    /* @__PURE__ */ S(
+      me,
       {
-        ref: m,
-        onMouseDown: Kt,
-        onMouseUp: L,
-        onMouseLeave: L,
-        onTouchStart: Ut,
-        onTouchEnd: L,
-        onTouchCancel: L,
-        style: {
-          transform: T ? `translate3d(-${M * w}px, 0, 0)` : void 0,
-          cursor: T ? "grab" : void 0,
-          maxHeight: Gt
-        },
+        flexDirection: "column",
+        role: "grid",
+        "aria-label": `${M}년 ${I}월 달력`,
         children: [
-          T && bt.map(({ year: e, month: f, weeks: a }) => /* @__PURE__ */ u(
-            Ft,
+          gt && /* @__PURE__ */ S(we, { id: "date-picker-week-head", role: "row", edgeSpacing: yt, children: [
+            /* @__PURE__ */ f("span", { role: "columnheader", children: "일" }),
+            /* @__PURE__ */ f("span", { role: "columnheader", children: "월" }),
+            /* @__PURE__ */ f("span", { role: "columnheader", children: "화" }),
+            /* @__PURE__ */ f("span", { role: "columnheader", children: "수" }),
+            /* @__PURE__ */ f("span", { role: "columnheader", children: "목" }),
+            /* @__PURE__ */ f("span", { role: "columnheader", children: "금" }),
+            /* @__PURE__ */ f("span", { role: "columnheader", children: "토" })
+          ] }),
+          /* @__PURE__ */ f(be, { ref: tt, role: "presentation", children: /* @__PURE__ */ S(
+            xe,
             {
-              edgeSpacing: lt,
-              children: a.map((p, c) => /* @__PURE__ */ u(jt, { children: p.map((y, D) => {
-                const d = `${e}-${f}-${G(y || 0)}`, S = !y, Q = k(d, /* @__PURE__ */ new Date()), wt = Array.isArray(B) ? B.includes(d) : B === d, xt = Array.isArray(_) ? _.includes(d) : _ === d, Mt = !y || (Array.isArray(E) ? E.includes(d) : E === d) || F(d, s) || q(d, l), ot = N && k(d, g), Qt = N && k(d, I), Zt = N && F(d, g) && q(d, I), Lt = z == null ? void 0 : z(d);
-                return /* @__PURE__ */ H(
-                  Ot,
+              role: "presentation",
+              ref: g,
+              onMouseDown: oe,
+              onMouseUp: E,
+              onMouseLeave: E,
+              onTouchStart: se,
+              onTouchEnd: E,
+              onTouchCancel: E,
+              style: {
+                transform: T ? `translate3d(-${k * w}px, 0, 0)` : void 0,
+                cursor: T ? "grab" : void 0,
+                maxHeight: ie
+              },
+              children: [
+                T && It.map(
+                  ({ year: e, month: u, weeks: o }, s) => /* @__PURE__ */ f(
+                    Gt,
+                    {
+                      role: "rowgroup",
+                      edgeSpacing: yt,
+                      className: s === 1 ? "week-body-current" : "",
+                      children: o.map((i, D) => /* @__PURE__ */ f(
+                        Vt,
+                        {
+                          role: "row",
+                          children: i.map((m, b) => {
+                            const l = `${e}-${u}-${J(m || 0)}`, A = !m, z = W(l, /* @__PURE__ */ new Date()), Tt = Array.isArray(K) ? K.includes(l) : K === l, rt = Array.isArray(_) ? _.includes(l) : _ === l, G = !m || (Array.isArray(q) ? q.includes(l) : q === l) || C(l, d) || V(l, h), vt = U && W(l, $), mt = U && W(l, L), le = U && C(l, $) && V(l, L), Ct = pt(l, H), ue = Ct && D === 0 && m === 1 || Ct && rt, Nt = Y == null ? void 0 : Y(l);
+                            return /* @__PURE__ */ S(
+                              Jt,
+                              {
+                                as: "button",
+                                role: "gridcell",
+                                variant: vt ? "start" : mt ? "end" : le ? "middle" : void 0,
+                                onClick: St(l, G),
+                                today: Wt && z,
+                                holiday: Tt,
+                                tabIndex: ue ? 0 : -1,
+                                "aria-rowindex": D + 1,
+                                "aria-colindex": b + 1,
+                                selected: rt,
+                                "aria-selected": rt,
+                                "aria-disabled": G,
+                                "aria-hidden": m === null,
+                                "data-date": l,
+                                onKeyDown: Xt(l, G),
+                                children: [
+                                  /* @__PURE__ */ f("div", { "aria-label": `${Zt(l)}`, children: /* @__PURE__ */ f("span", { children: m }) }),
+                                  !A && Nt,
+                                  !A && At && !Nt && /* @__PURE__ */ f(Qt, {})
+                                ]
+                              },
+                              `${e}-${u}-week-row-${b}-${m ? l : `${D}-${b}`}`
+                            );
+                          })
+                        },
+                        `${e}-${u}-week-row-${String(i)}`
+                      ))
+                    },
+                    `week-body-${e}-${u}`
+                  )
+                ),
+                !T && /* @__PURE__ */ f(Gt, { role: "rowgroup", edgeSpacing: yt, children: Lt.map((e, u) => /* @__PURE__ */ f(
+                  Vt,
                   {
-                    variant: ot ? "start" : Qt ? "end" : Zt ? "middle" : void 0,
-                    onClick: It(d),
-                    today: At && Q,
-                    holiday: wt,
-                    selected: xt,
-                    disabled: Mt,
-                    children: [
-                      /* @__PURE__ */ u("div", { children: /* @__PURE__ */ u("span", { children: y }) }),
-                      !S && Lt,
-                      !S && Dt && !Lt && /* @__PURE__ */ u(Xt, {})
-                    ]
+                    role: "row",
+                    children: e.map((o, s) => {
+                      const i = `${M}-${I}-${J(o || 0)}`, D = !o, m = W(i, /* @__PURE__ */ new Date()), b = Array.isArray(K) ? K.includes(i) : K === i, l = Array.isArray(_) ? _.includes(i) : _ === i, A = !o || (Array.isArray(q) ? q.includes(i) : q === i) || C(i, d) || V(i, h), z = U && W(i, $), Tt = U && W(i, L), rt = U && C(i, $) && V(i, L), G = pt(i, H), vt = G && u === 0 && o === 1 || G && l, mt = Y == null ? void 0 : Y(i);
+                      return /* @__PURE__ */ S(
+                        Jt,
+                        {
+                          as: "button",
+                          variant: z ? "start" : Tt ? "end" : rt ? "middle" : void 0,
+                          role: "gridcell",
+                          onClick: St(i, A),
+                          today: Wt && m,
+                          holiday: b,
+                          "aria-rowindex": u + 1,
+                          "aria-colindex": s + 1,
+                          selected: l,
+                          "aria-selected": l,
+                          "aria-disabled": A,
+                          "aria-hidden": o === null,
+                          tabIndex: vt ? 0 : -1,
+                          "data-date": i,
+                          onKeyDown: Xt(i, A),
+                          children: [
+                            /* @__PURE__ */ f("div", { "aria-label": `${Zt(i)}`, children: /* @__PURE__ */ f("span", { children: o }) }),
+                            !D && mt,
+                            !D && At && !mt && /* @__PURE__ */ f(Qt, {})
+                          ]
+                        },
+                        `${M}-${I}-week-row-${e}-${o ? i : `${u}-${s}`}`
+                      );
+                    })
                   },
-                  `${e}-${f}-week-row-${D}-${y ? d : `${c}-${D}`}`
-                );
-              }) }, `${e}-${f}-week-row-${String(p)}`))
-            },
-            `week-body-${e}-${f}`
-          )),
-          !T && /* @__PURE__ */ u(Ft, { edgeSpacing: lt, children: Ht.map((e, f) => /* @__PURE__ */ u(jt, { children: e.map((a, p) => {
-            const c = `${W}-${C}-${G(a || 0)}`, y = !a, D = k(c, /* @__PURE__ */ new Date()), d = Array.isArray(B) ? B.includes(c) : B === c, S = Array.isArray(_) ? _.includes(c) : _ === c, Q = !a || (Array.isArray(E) ? E.includes(c) : E === c) || F(c, s) || q(c, l), wt = N && k(c, g), xt = N && k(c, I), Mt = N && F(c, g) && q(c, I), ot = z == null ? void 0 : z(c);
-            return /* @__PURE__ */ H(
-              Ot,
-              {
-                variant: wt ? "start" : xt ? "end" : Mt ? "middle" : void 0,
-                onClick: It(c),
-                today: At && D,
-                holiday: d,
-                selected: S,
-                disabled: Q,
-                children: [
-                  /* @__PURE__ */ u("div", { children: /* @__PURE__ */ u("span", { children: a }) }),
-                  !y && ot,
-                  !y && Dt && !ot && /* @__PURE__ */ u(Xt, {})
-                ]
-              },
-              `${W}-${C}-week-row-${e}-${a ? c : `${f}-${p}`}`
-            );
-          }) }, `${W}-${C}-week-row-${String(e)}`)) })
+                  `${M}-${I}-week-row-${String(e)}`
+                )) })
+              ]
+            }
+          ) })
         ]
       }
-    ) }),
+    ),
     n
   ] });
 });
-function Tt(t, n) {
+function Rt(t, n) {
   let r = [];
-  const i = new Date(t, n, 1), o = new Date(t, n + 1, 0).getDate(), l = i.getDay();
-  let s = Array.from({ length: l }).fill(null);
-  for (let h = 1; h <= o; h += 1)
-    s.push(h), (s.length === 7 || h === o) && (r.push(s), s = []);
+  const a = new Date(t, n, 1), c = new Date(t, n + 1, 0).getDate(), h = a.getDay();
+  let d = Array.from({ length: h }).fill(null);
+  for (let p = 1; p <= c; p += 1)
+    d.push(p), (d.length === 7 || p === c) && (r.push(d), d = []);
   return r = r.map(
-    (h) => Array.from({ length: 7 }).map((K, at) => h[at] || null)
+    (p) => Array.from({ length: 7 }).map((P, gt) => p[gt] || null)
   ), r;
 }
-function j(t) {
+function N(t) {
   return String(t + 1).length === 1 ? `0${t + 1}` : t + 1;
 }
-function G(t) {
+function J(t) {
   return String(t).length === 1 ? `0${t}` : t;
 }
-function $(t) {
+function y(t) {
   if (Array.isArray(t))
-    return t.map((n) => n instanceof Date ? `${n.getFullYear()}-${j(n.getMonth())}-${G(n.getDate())}` : n);
+    return t.map((n) => n instanceof Date ? `${n.getFullYear()}-${N(n.getMonth())}-${J(n.getDate())}` : n);
   if (t instanceof Date)
-    return `${t.getFullYear()}-${j(t.getMonth())}-${G(t.getDate())}`;
+    return `${t.getFullYear()}-${N(t.getMonth())}-${J(t.getDate())}`;
   if (typeof t == "number") {
     const n = new Date(t);
-    return `${n.getFullYear()}-${j(n.getMonth())}-${G(n.getDate())}`;
+    return `${n.getFullYear()}-${N(n.getMonth())}-${J(n.getDate())}`;
   }
   return t;
 }
-function F(t, n) {
+function Zt(t) {
+  const [n, r, a] = t.split("-");
+  return `${n}년 ${Number(r)}월 ${Number(a)}일`;
+}
+function C(t, n) {
   if (!t || !n)
     return !1;
   const r = t instanceof Date ? t : new Date(t);
   r.setHours(0), r.setMinutes(0), r.setSeconds(0), r.setMilliseconds(0);
-  const i = r.getTime(), o = n instanceof Date ? n : new Date(n);
-  o.setHours(0), o.setMinutes(0), o.setSeconds(0), o.setMilliseconds(0);
-  const l = o.getTime();
-  return i > l;
+  const a = r.getTime(), c = n instanceof Date ? n : new Date(n);
+  c.setHours(0), c.setMinutes(0), c.setSeconds(0), c.setMilliseconds(0);
+  const h = c.getTime();
+  return a > h;
 }
-function q(t, n) {
+function V(t, n) {
   if (!t || !n)
     return !1;
   const r = t instanceof Date ? t : new Date(t);
   r.setHours(0), r.setMinutes(0), r.setSeconds(0), r.setMilliseconds(0);
-  const i = r.getTime(), o = n instanceof Date ? n : new Date(n);
-  o.setHours(0), o.setMinutes(0), o.setSeconds(0), o.setMilliseconds(0);
-  const l = o.getTime();
-  return i < l;
+  const a = r.getTime(), c = n instanceof Date ? n : new Date(n);
+  c.setHours(0), c.setMinutes(0), c.setSeconds(0), c.setMilliseconds(0);
+  const h = c.getTime();
+  return a < h;
 }
-function _t(t, n) {
+function pt(t, n) {
   if (!t || !n)
     return !1;
-  const r = t instanceof Date ? t : new Date(t), i = n instanceof Date ? n : new Date(n);
-  return `${r.getFullYear()}-${r.getMonth()}` == `${i.getFullYear()}-${i.getMonth()}`;
+  const r = t instanceof Date ? t : new Date(t), a = n instanceof Date ? n : new Date(n);
+  return `${r.getFullYear()}-${r.getMonth()}` == `${a.getFullYear()}-${a.getMonth()}`;
 }
-function k(t, n) {
+function W(t, n) {
   if (!t || !n)
     return !1;
   const r = t instanceof Date ? t : new Date(t);
   r.setHours(0), r.setMinutes(0), r.setSeconds(0), r.setMilliseconds(0);
-  const i = r.getTime(), o = n instanceof Date ? n : new Date(n);
-  o.setHours(0), o.setMinutes(0), o.setSeconds(0), o.setMilliseconds(0);
-  const l = o.getTime();
-  return i === l;
+  const a = r.getTime(), c = n instanceof Date ? n : new Date(n);
+  c.setHours(0), c.setMinutes(0), c.setSeconds(0), c.setMilliseconds(0);
+  const h = c.getTime();
+  return a === h;
 }
-function Bt(t, n) {
+function te(t, n) {
   if (!t || !Array.isArray(t) || t.length === 0)
     return [];
-  const r = t.map((h) => h instanceof Date ? h : h === null ? /* @__PURE__ */ new Date() : new Date(h)), i = new Date(Math.min(...r.map((h) => h.getTime()))), o = new Date(Math.max(...r.map((h) => h.getTime()))), l = [], s = new Date(i);
-  for (; s <= o; ) {
-    if (Array.isArray(n) && n.includes(s)) {
-      s.setDate(s.getDate() + 1);
+  const r = t.map((p) => p instanceof Date ? p : p === null ? /* @__PURE__ */ new Date() : new Date(p)), a = new Date(Math.min(...r.map((p) => p.getTime()))), c = new Date(Math.max(...r.map((p) => p.getTime()))), h = [], d = new Date(a);
+  for (; d <= c; ) {
+    if (Array.isArray(n) && n.includes(d)) {
+      d.setDate(d.getDate() + 1);
       continue;
-    } else if (n === s) {
-      s.setDate(s.getDate() + 1);
+    } else if (n === d) {
+      d.setDate(d.getDate() + 1);
       continue;
     }
-    l.push(
-      `${s.getFullYear()}-${j(s.getMonth())}-${G(
-        s.getDate()
+    h.push(
+      `${d.getFullYear()}-${N(d.getMonth())}-${J(
+        d.getDate()
       )}`
-    ), s.setDate(s.getDate() + 1);
+    ), d.setDate(d.getDate() + 1);
   }
-  return l;
+  return h;
 }
 export {
-  xe as default
+  Le as default
 };