@wipco/sdui 1.6.0 → 1.7.0

package/dist/{DatePicker-DX9juElE.d.ts → DatePicker-BOOKdd5x.d.ts}

@@ -1,5 +1,6 @@
 import { S as SduiBoxProps } from './layout-DmRikwZb.js';
 import React__default from 'react';
+import { C as CalendarNavLocale } from './calendar-nav-BSGsgJc4.js';
 
 interface TimePickerProps {
     /** 선택된 시각 (HH:MM, 24시간제). 주어지면 controlled로 동작. */
@@ -24,16 +25,15 @@ interface TimePickerProps {
 /** 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다. 까닭은 {@link ./boxed.tsx}에 있다. */
 declare const TimePicker: React__default.FC<TimePickerProps & SduiBoxProps>;
 
-interface DatePickerLocale {
+/**
+ * 머리글·월·연도 보기의 글자(formatCaption·prevMonthLabel·prevYearLabel …)는 공용 부품의 로캘
+ * {@link CalendarNavLocale} 에서 온다 — 여기는 날짜 격자와 패널에만 있는 자리를 더한다.
+ */
+interface DatePickerLocale extends CalendarNavLocale {
     /** 요일 머리글 — **일요일부터** 7개. 주 시작이 달라도 이 순서로 주면 내부에서 돌린다. */
     weekdays?: readonly string[];
     /** 주 시작 요일 (0=일 … 6=토). */
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-    /** 달력 위 연월 캡션 (month는 1–12). */
-    formatCaption?: (year: number, month: number) => string;
-    /** 이전/다음 달 버튼의 낭독 라벨 */
-    prevMonthLabel?: string;
-    nextMonthLabel?: string;
     /** 달력 패널의 낭독 라벨 */
     calendarLabel?: string;
     /** 기간 달력에서 시작·종료 칸의 낭독 라벨 (DateRangePicker) */

package/dist/calendar-nav-BSGsgJc4.d.ts

@@ -0,0 +1,54 @@
+/**
+ * 달력 머리글 탐색과 월·연도 보기 — DatePicker(날짜·기간 팝업 달력)와 EventCalendar(일정 캘린더)가
+ * **같은 부품**을 쓴다.
+ *
+ * 머리글은 `<< < [제목] > >>` 한 줄이다 — 제목이 가운데, 왼쪽에 큰 걸음·작은 걸음 뒤로, 오른쪽에
+ * 작은 걸음·큰 걸음 앞으로. 예전에는 이전·다음 버튼이 오른쪽에 몰려 있어(기간 달력은 두 달 위에
+ * 한 쌍, 일정 캘린더는 '이전·오늘·다음'이 제목 왼쪽에) 어느 쪽으로 가는 버튼인지 한눈에 안 들어왔고,
+ * 연 단위 이동은 열두 번을 눌러야 했다(사용자 요청 2026-10-01).
+ *
+ * 제목을 누르면 한 단계 넓은 보기로 올라간다(윈도우 달력 방식): 일 → 월(그 해의 1~12월) →
+ * 연도(10년 + 앞뒤 회색 한 해씩). 고르면 한 단계 내려온다. 이 넓은 보기 둘이 `CalendarZoom` 이다 —
+ * 보는 달만 바꾸고 **선택 값은 건드리지 않는다**(값을 정하는 것은 언제나 일 보기의 날짜 칸이다).
+ *
+ * 걸음 폭은 보기 단위를 따른다: 월 보기(1~12월 격자)에서 `< >` 는 1년·`<< >>` 는 10년, 연도 보기에서
+ * `< >` 는 10년·`<< >>` 는 100년. 일 보기의 폭(한 달·한 해, 일정 캘린더의 주·일 보기는 그 단위)은
+ * 호출부가 정한다 — 이 파일은 머리글 모양과 월·연도 격자만 안다.
+ *
+ * 키보드(월·연도 격자): 화살표(좌우 1칸·상하 4칸), Home/End(그 해·그 10년의 처음·끝), PageUp/PageDown
+ * (한 단계 큰 걸음), Enter/Space 고르기, Escape 는 **한 단계 아래 보기로**(연도 → 월 → 호출부의 onExit).
+ * Escape 는 여기서 전파를 멈춘다 — 겹 스택(overlay)이 팝오버 자체를 닫아 버리지 않게.
+ */
+
+/** 머리글·월·연도 보기의 글자. 빠진 자리는 한국어 기본으로 메운다(`resolveCalendarNavLocale`). */
+interface CalendarNavLocale {
+    /** 달력 위 연월 캡션 (month는 1–12). */
+    formatCaption?: (year: number, month: number) => string;
+    /** 월 보기 제목 — '2026년'. */
+    formatYear?: (year: number) => string;
+    /** 월 보기의 칸 — '3월' (month는 1–12). */
+    formatMonth?: (month: number) => string;
+    /** 연도 보기 제목 — '2020~2029'(ERP 기간 구분자와 같은 물결). */
+    formatDecade?: (from: number, to: number) => string;
+    /** 이전/다음 달 버튼의 낭독 라벨 */
+    prevMonthLabel?: string;
+    nextMonthLabel?: string;
+    /** 이전/다음 해 — 일 보기의 `<< >>`, 월 보기의 `< >` */
+    prevYearLabel?: string;
+    nextYearLabel?: string;
+    /** 이전/다음 10년 — 월 보기의 `<< >>`, 연도 보기의 `< >` */
+    prevDecadeLabel?: string;
+    nextDecadeLabel?: string;
+    /** 이전/다음 100년 — 연도 보기의 `<< >>` */
+    prevCenturyLabel?: string;
+    nextCenturyLabel?: string;
+    /** 제목 버튼의 안내(title) — 누르면 넓은 보기로 간다는 뜻 */
+    zoomLabel?: string;
+    /** 월·연도 격자의 낭독 라벨 */
+    monthGridLabel?: string;
+    yearGridLabel?: string;
+}
+/** 네 버튼 — 큰 걸음 뒤·작은 걸음 뒤·작은 걸음 앞·큰 걸음 앞. */
+type CalendarNavStep = 'prevBig' | 'prev' | 'next' | 'nextBig';
+
+export type { CalendarNavLocale as C, CalendarNavStep as a };

package/dist/{chunk-53KS4E5N.js → chunk-27ILQUWE.js}

@@ -1,8 +1,10 @@
+import { useDismiss, usePopoverAnchor, usePortalTo, CalendarNav, KO_CALENDAR_NAV_LOCALE, CalendarZoom, anchorStyle, AnchoredPopoverStyles } from './chunk-MUXGTVEA.js';
+import { tabbablesIn } from './chunk-R2ORCOTG.js';
 import { HoistedStyle } from './chunk-RIZRM7OO.js';
-import { useIsMobile } from './chunk-GSM664TX.js';
-import { SegmentedControl, IconButton, Button, Tag, EmptyState, Icon, Badge } from './chunk-BLFJMMBW.js';
+import { useIsMobile } from './chunk-TAVKGYH5.js';
+import { SegmentedControl, Button, Tag, EmptyState, Icon, Badge } from './chunk-OWM7E55U.js';
 import { boxed } from './chunk-3JTBOABA.js';
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useRef, useCallback } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var DAY_MS = 864e5;
@@ -144,7 +146,6 @@ var EventBar = ({ segment, selected, tall = false, onSelect }) => {
     fontSize: tall ? 13 : 12,
     fontWeight: 600,
     lineHeight: 1,
-    overflow: "hidden",
     whiteSpace: "nowrap",
     cursor: "pointer",
     textAlign: "left",
@@ -155,6 +156,7 @@ var EventBar = ({ segment, selected, tall = false, onSelect }) => {
     "button",
     {
       type: "button",
+      className: "wp-evcal__bar",
       title: event.title,
       "aria-pressed": selected,
       style,
@@ -185,6 +187,20 @@ var VIEW_ITEMS = [
   { value: "agenda", label: "\uC77C\uC815" }
 ];
 var VIEW_VALUES = ["month", "week", "day", "agenda"];
+var VIEW_NAV = {
+  month: { small: "month", big: "year", keepDay: false, labels: { prevBig: "\uC774\uC804 \uD574", prev: "\uC774\uC804 \uB2EC", next: "\uB2E4\uC74C \uB2EC", nextBig: "\uB2E4\uC74C \uD574" } },
+  week: { small: "week", big: "month", keepDay: true, labels: { prevBig: "\uC774\uC804 \uB2EC", prev: "\uC774\uC804 \uC8FC", next: "\uB2E4\uC74C \uC8FC", nextBig: "\uB2E4\uC74C \uB2EC" } },
+  day: { small: "day", big: "week", keepDay: true, labels: { prevBig: "\uC774\uC804 \uC8FC", prev: "\uC774\uC804 \uB0A0", next: "\uB2E4\uC74C \uB0A0", nextBig: "\uB2E4\uC74C \uC8FC" } },
+  agenda: { small: "month", big: "year", keepDay: false, labels: { prevBig: "\uC774\uC804 \uD574", prev: "\uC774\uC804 \uB2EC", next: "\uB2E4\uC74C \uB2EC", nextBig: "\uB2E4\uC74C \uD574" } }
+};
+var addMonthsKeepDay = (ts, amount) => {
+  const d = new Date(ts);
+  const month = d.getMonth() + amount;
+  const lastDay = new Date(d.getFullYear(), month + 1, 0).getDate();
+  return new Date(d.getFullYear(), month, Math.min(d.getDate(), lastDay)).getTime();
+};
+var shiftBy = (ts, unit, dir, keepDay) => unit === "day" ? addDays(ts, dir) : unit === "week" ? addDays(ts, dir * 7) : (keepDay ? addMonthsKeepDay : addMonths)(ts, dir * (unit === "month" ? 1 : 12));
+var ZOOM_HEIGHT = 200;
 function normalizeViews(views) {
   if (!Array.isArray(views)) return VIEW_ITEMS;
   const seen = /* @__PURE__ */ new Set();
@@ -203,13 +219,27 @@ var cellBorder = "1px solid var(--wp-border-subtle)";
 var EVCAL_CSS = `
 .wp-evcal{display:flex;flex-direction:column;gap:var(--wp-space-3);min-width:0}
 .wp-evcal__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--wp-space-2)}
+.wp-evcal__tools{display:flex;align-items:center;gap:var(--wp-space-2);flex:none}
+.wp-evcal__nav{display:flex;align-items:center;justify-content:center;flex:1 1 auto;min-width:0}
+.wp-evcal__nav .wp-calnav{flex:0 1 auto}
+.wp-evcal__nav .wp-calnav__title{min-width:7.5em}
+.wp-evcal__zoom{padding:var(--wp-space-3)}
 .wp-evcal__types{display:flex;flex-wrap:wrap;align-items:center;gap:var(--wp-space-1);margin-left:auto}
 .wp-evcal__item{display:flex;align-items:center;gap:var(--wp-space-3);width:100%;padding:var(--wp-space-3) var(--wp-space-4);border-radius:var(--wp-radius-md);cursor:pointer;text-align:left;min-width:0;transition:background var(--wp-duration-fast),border-color var(--wp-duration-fast)}
 .wp-evcal__item-bar{width:4px;height:26px;flex:none;border-radius:var(--wp-radius-pill)}
 .wp-evcal__item-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;color:var(--wp-text-strong)}
 .wp-evcal__item-meta{display:contents}
 .wp-evcal__item-range{flex:none;font-size:13px;color:var(--wp-text-muted)}
+.wp-evcal__bar{overflow:hidden}
+@media (pointer:coarse){
+  .wp-evcal__lanes{z-index:0}
+  .wp-evcal--month .wp-evcal__bar{position:relative;overflow:visible}
+  .wp-evcal--month .wp-evcal__bar::before{content:"";position:absolute;left:0;right:0;top:50%;height:32px;margin-top:-16px;z-index:-1}
+}
 @media screen and (max-width:767.98px){
+  .wp-evcal__nav{order:-1;flex:1 1 100%}
+  .wp-evcal__nav .wp-calnav{flex:1 1 auto}
+  .wp-evcal__tools{flex:1 1 100%;justify-content:space-between}
   .wp-evcal__types{flex:1 1 100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:2px}
   .wp-evcal__types::-webkit-scrollbar{display:none}
   .wp-evcal__types>*{flex:none}
@@ -277,10 +307,30 @@ var EventCalendarImpl = ({
     () => dayEvents.filter((e) => !hiddenTypes.has(e.type)),
     [dayEvents, hiddenTypes]
   );
-  const move = (dir) => {
-    if (activeView === "week") setDate(addDays(anchor, dir * 7));
-    else if (activeView === "day") setDate(addDays(anchor, dir));
-    else setDate(addMonths(anchor, dir));
+  const nav = VIEW_NAV[activeView];
+  const step = (which) => {
+    const dir = which === "prev" || which === "prevBig" ? -1 : 1;
+    setDate(shiftBy(anchor, which === "prev" || which === "next" ? nav.small : nav.big, dir, nav.keepDay));
+  };
+  const titleRef = useRef(null);
+  const zoomPopRef = useRef(null);
+  const [zoomOpen, setZoomOpen] = useState(false);
+  const closeZoom = useCallback((refocus) => {
+    setZoomOpen(false);
+    if (refocus) titleRef.current?.focus();
+  }, []);
+  const dismissZoom = useCallback((reason) => closeZoom(reason === "escape"), [closeZoom]);
+  useDismiss(zoomOpen, titleRef, zoomPopRef, dismissZoom);
+  const zoomAnchor = usePopoverAnchor(zoomOpen, titleRef, zoomPopRef, ZOOM_HEIGHT);
+  const portal = usePortalTo();
+  const anchorDate = new Date(anchor);
+  const anchorMonthIdx = anchorDate.getFullYear() * 12 + anchorDate.getMonth();
+  const pickMonth = (idx) => {
+    const year = Math.floor(idx / 12);
+    const month = idx % 12;
+    const lastDay = new Date(year, month + 1, 0).getDate();
+    setDate(new Date(year, month, Math.min(anchorDate.getDate(), lastDay)).getTime());
+    closeZoom(true);
   };
   const headline = (() => {
     const d = new Date(anchor);
@@ -423,25 +473,30 @@ var EventCalendarImpl = ({
   };
   return /* @__PURE__ */ jsxs("div", { className: `wp-evcal wp-evcal--${activeView}`, children: [
     /* @__PURE__ */ jsxs("div", { className: "wp-evcal__toolbar", children: [
-      /* @__PURE__ */ jsx(
-        SegmentedControl,
-        {
-          items: [...viewItems],
-          value: activeView,
-          onChange: (v) => setView(v)
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "span",
+      /* @__PURE__ */ jsxs("div", { className: "wp-evcal__tools", children: [
+        /* @__PURE__ */ jsx(
+          SegmentedControl,
+          {
+            items: [...viewItems],
+            value: activeView,
+            onChange: (v) => setView(v)
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: () => setDate(today), children: "\uC624\uB298" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "wp-evcal__nav", children: /* @__PURE__ */ jsx(
+        CalendarNav,
         {
-          "aria-hidden": true,
-          style: { width: 1, height: 20, background: "var(--wp-border-subtle)" }
+          size: "md",
+          title: headline,
+          labels: nav.labels,
+          onStep: step,
+          onZoomOut: () => zoomOpen ? closeZoom(false) : setZoomOpen(true),
+          zoomLabel: KO_CALENDAR_NAV_LOCALE.zoomLabel,
+          titleRef,
+          titleProps: { "aria-haspopup": "dialog", "aria-expanded": zoomOpen }
         }
-      ),
-      /* @__PURE__ */ jsx(IconButton, { icon: "chevron-left", label: "\uC774\uC804", onClick: () => move(-1) }),
-      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: () => setDate(today), children: "\uC624\uB298" }),
-      /* @__PURE__ */ jsx(IconButton, { icon: "chevron-right", label: "\uB2E4\uC74C", onClick: () => move(1) }),
-      /* @__PURE__ */ jsx("h3", { className: "wp-h4", style: { margin: "0 0 0 var(--wp-space-2)" }, children: headline }),
+      ) }),
       types && types.length > 0 && /* @__PURE__ */ jsx("span", { className: "wp-evcal__types", role: "group", "aria-label": "\uC77C\uC815 \uC720\uD615", children: types.map((t) => {
         const off = hiddenTypes.has(t.value);
         const color = dayEvents.find((e) => e.type === t.value)?.color ?? t.color;
@@ -533,7 +588,7 @@ var EventCalendarImpl = ({
                       ))
                     }
                   ),
-                  /* @__PURE__ */ jsxs("div", { style: laneGridStyle(MONTH_BAR_TOP, MONTH_LANE_H), children: [
+                  /* @__PURE__ */ jsxs("div", { className: "wp-evcal__lanes", style: laneGridStyle(MONTH_BAR_TOP, MONTH_LANE_H), children: [
                     row.segments.map((seg) => /* @__PURE__ */ jsx(
                       EventBar,
                       {
@@ -726,9 +781,47 @@ var EventCalendarImpl = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-evcal", css: EVCAL_CSS })
+    portal(
+      zoomAnchor,
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: zoomPopRef,
+          className: "wp-anchored-pop wp-evcal__zoom",
+          style: anchorStyle(zoomAnchor),
+          role: "dialog",
+          "aria-label": KO_CALENDAR_NAV_LOCALE.monthGridLabel,
+          onBlur: (event) => {
+            const next = event.relatedTarget;
+            if (next instanceof Node && !zoomPopRef.current?.contains(next) && next !== titleRef.current) closeZoom(false);
+          },
+          onKeyDown: (event) => {
+            if (event.key !== "Tab" || !zoomPopRef.current) return;
+            const stops = tabbablesIn(zoomPopRef.current);
+            const at = stops.indexOf(document.activeElement);
+            const atEdge = event.shiftKey ? at <= 0 : at === stops.length - 1 || at < 0;
+            if (!atEdge) return;
+            event.preventDefault();
+            closeZoom(true);
+          },
+          children: /* @__PURE__ */ jsx(
+            CalendarZoom,
+            {
+              monthIndex: anchorMonthIdx,
+              selectedMonthIndexes: [anchorMonthIdx],
+              onPick: pickMonth,
+              onExit: () => closeZoom(true),
+              autoFocus: true,
+              locale: KO_CALENDAR_NAV_LOCALE
+            }
+          )
+        }
+      )
+    ),
+    /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-evcal", css: EVCAL_CSS }),
+    /* @__PURE__ */ jsx(AnchoredPopoverStyles, {})
   ] });
 };
 var EventCalendar = boxed(EventCalendarImpl, "EventCalendar");
 
-export { EventCalendar, statusToneOf };
+export { EventCalendar, VIEW_NAV, statusToneOf };

package/dist/{chunk-AY4GM6KQ.js → chunk-466W3XNK.js}

@@ -1,4 +1,4 @@
-import { Icon } from './chunk-BLFJMMBW.js';
+import { Icon } from './chunk-OWM7E55U.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useRef, useState, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';