@wipco/sdui 0.2.0 → 0.3.0

package/dist/chunk-YJMD6MOE.js

@@ -0,0 +1,404 @@
+import { Icon } from './chunk-ZUCI34QY.js';
+import { useState, useRef, useMemo, useCallback, useEffect, useLayoutEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function HoistedStyle({ id, css }) {
+  return /* @__PURE__ */ jsx("style", { href: id, precedence: "medium", children: css });
+}
+var YMD_RE = /^\d{4}-\d{2}-\d{2}$/;
+function parseYmd(value) {
+  if (typeof value !== "string" || !YMD_RE.test(value)) return void 0;
+  const y = Number(value.slice(0, 4));
+  const m = Number(value.slice(5, 7));
+  const d = Number(value.slice(8, 10));
+  const date = new Date(y, m - 1, d, 12, 0, 0, 0);
+  if (date.getFullYear() !== y || date.getMonth() !== m - 1 || date.getDate() !== d) return void 0;
+  return date;
+}
+function formatYmd(date) {
+  const y = String(date.getFullYear()).padStart(4, "0");
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+function addDays(date, days) {
+  const next = new Date(date);
+  next.setDate(next.getDate() + days);
+  return next;
+}
+function addMonths(date, months) {
+  const next = new Date(date.getFullYear(), date.getMonth() + months, 1, 12, 0, 0, 0);
+  const lastDay = new Date(next.getFullYear(), next.getMonth() + 1, 0).getDate();
+  next.setDate(Math.min(date.getDate(), lastDay));
+  return next;
+}
+function clampDate(date, min, max) {
+  if (min && date.getTime() < min.getTime()) return min;
+  if (max && date.getTime() > max.getTime()) return max;
+  return date;
+}
+function monthIndex(date) {
+  return date.getFullYear() * 12 + date.getMonth();
+}
+function monthStart(index) {
+  return new Date(Math.floor(index / 12), index % 12, 1, 12, 0, 0, 0);
+}
+function isSameDay(a, b) {
+  return a !== void 0 && b !== void 0 && formatYmd(a) === formatYmd(b);
+}
+var WEEKDAYS_KO = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
+var WEEKS_PER_MONTH = 6;
+function buildMonthCells(index, min, max) {
+  const first = monthStart(index);
+  const gridStart = addDays(first, -first.getDay());
+  const weeks = [];
+  for (let w = 0; w < WEEKS_PER_MONTH; w += 1) {
+    const row = [];
+    for (let d = 0; d < 7; d += 1) {
+      const date = addDays(gridStart, w * 7 + d);
+      row.push({
+        date,
+        ymd: formatYmd(date),
+        outside: monthIndex(date) !== index,
+        disabled: min !== void 0 && date.getTime() < min.getTime() || max !== void 0 && date.getTime() > max.getTime()
+      });
+    }
+    weeks.push(row);
+  }
+  return weeks;
+}
+function Calendar({
+  monthCount,
+  minDate,
+  maxDate,
+  dayState,
+  onPick,
+  focusDate,
+  onFocusDateChange
+}) {
+  const focusIdx = monthIndex(focusDate);
+  const [viewIdx, setViewIdx] = useState(focusIdx);
+  const gridRef = useRef(null);
+  const focusYmd = formatYmd(focusDate);
+  const visibleIdx = focusIdx < viewIdx ? focusIdx : focusIdx > viewIdx + monthCount - 1 ? focusIdx - monthCount + 1 : viewIdx;
+  if (visibleIdx !== viewIdx) setViewIdx(visibleIdx);
+  useLayoutEffect(() => {
+    gridRef.current?.querySelector('[tabindex="0"]')?.focus();
+  }, [focusYmd]);
+  const todayYmd = formatYmd(/* @__PURE__ */ new Date());
+  const minIdx = minDate ? monthIndex(minDate) : -Infinity;
+  const maxIdx = maxDate ? monthIndex(maxDate) : Infinity;
+  const prevDisabled = visibleIdx <= minIdx;
+  const nextDisabled = visibleIdx + monthCount - 1 >= maxIdx;
+  const moveFocus = (next) => {
+    onFocusDateChange(clampDate(next, minDate, maxDate));
+  };
+  const handleKeyDown = (event) => {
+    const deltaDays = event.key === "ArrowLeft" ? -1 : event.key === "ArrowRight" ? 1 : event.key === "ArrowUp" ? -7 : event.key === "ArrowDown" ? 7 : 0;
+    if (deltaDays !== 0) {
+      event.preventDefault();
+      moveFocus(addDays(focusDate, deltaDays));
+      return;
+    }
+    if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      const offset = event.key === "Home" ? -focusDate.getDay() : 6 - focusDate.getDay();
+      moveFocus(addDays(focusDate, offset));
+      return;
+    }
+    if (event.key === "PageUp" || event.key === "PageDown") {
+      event.preventDefault();
+      moveFocus(addMonths(focusDate, event.key === "PageUp" ? -1 : 1));
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: "wp-dp", children: /* @__PURE__ */ jsxs("div", { className: "wp-dp__months", ref: gridRef, onKeyDown: handleKeyDown, children: [
+    /* @__PURE__ */ jsxs("div", { className: "wp-dp__nav", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "wp-dp__navbtn",
+          "aria-label": "\uC774\uC804 \uB2EC",
+          "aria-disabled": prevDisabled || void 0,
+          disabled: prevDisabled,
+          onClick: () => setViewIdx(visibleIdx - 1),
+          children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 16 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "wp-dp__navbtn",
+          "aria-label": "\uB2E4\uC74C \uB2EC",
+          "aria-disabled": nextDisabled || void 0,
+          disabled: nextDisabled,
+          onClick: () => setViewIdx(visibleIdx + 1),
+          children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 16 })
+        }
+      )
+    ] }),
+    Array.from({ length: monthCount }, (_, offset) => {
+      const idx = visibleIdx + offset;
+      const first = monthStart(idx);
+      const weeks = buildMonthCells(idx, minDate, maxDate);
+      const caption = `${first.getFullYear()}\uB144 ${first.getMonth() + 1}\uC6D4`;
+      return /* @__PURE__ */ jsxs("div", { className: "wp-dp__month", children: [
+        /* @__PURE__ */ jsx("div", { className: "wp-dp__caption", children: /* @__PURE__ */ jsx("span", { className: "wp-dp__caption-label", children: caption }) }),
+        /* @__PURE__ */ jsxs("table", { className: "wp-dp__grid", role: "grid", "aria-label": caption, children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "wp-dp__weekdays", children: WEEKDAYS_KO.map((name) => /* @__PURE__ */ jsx("th", { scope: "col", className: "wp-dp__weekday", abbr: name, children: name }, name)) }) }),
+          /* @__PURE__ */ jsx("tbody", { className: "wp-dp__weeks", children: weeks.map((week, w) => /* @__PURE__ */ jsx("tr", { className: "wp-dp__week", children: week.map((cell) => {
+            const state = cell.disabled ? {} : dayState(cell.date);
+            const classes = ["wp-dp__day"];
+            if (cell.outside) classes.push("wp-dp__day--outside");
+            if (cell.disabled) classes.push("wp-dp__day--disabled");
+            if (cell.ymd === todayYmd) classes.push("wp-dp__day--today");
+            if (state.selected) classes.push("wp-dp__day--selected");
+            if (state.rangeStart) classes.push("wp-dp__day--range-start");
+            if (state.rangeMiddle) classes.push("wp-dp__day--range-middle");
+            if (state.rangeEnd) classes.push("wp-dp__day--range-end");
+            return /* @__PURE__ */ jsx("td", { className: classes.join(" "), children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "wp-dp__day-btn",
+                "data-ymd": cell.ymd,
+                tabIndex: cell.ymd === focusYmd && !cell.outside ? 0 : -1,
+                disabled: cell.disabled,
+                "aria-selected": state.selected || state.rangeStart || state.rangeEnd || void 0,
+                "aria-label": cell.ymd,
+                onClick: () => {
+                  onFocusDateChange(cell.date);
+                  onPick(cell.date);
+                },
+                children: cell.date.getDate()
+              }
+            ) }, cell.ymd);
+          }) }, w)) })
+        ] })
+      ] }, idx);
+    })
+  ] }) });
+}
+function useDismiss(open, hostRef, onDismiss) {
+  useEffect(() => {
+    if (!open) return;
+    const handlePointerDown = (event) => {
+      if (event.target instanceof Node && hostRef.current?.contains(event.target)) return;
+      onDismiss("outside");
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") onDismiss("escape");
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open, hostRef, onDismiss]);
+}
+function triggerClassName(size, invalid) {
+  const classes = ["wp-input", "wp-dp-trigger"];
+  if (size !== "md") classes.push(`wp-input--${size}`);
+  if (invalid) classes.push("wp-input--invalid");
+  return classes.join(" ");
+}
+function DatePicker({
+  value,
+  onChange,
+  min,
+  max,
+  placeholder,
+  invalid = false,
+  disabled = false,
+  size = "md"
+}) {
+  const [open, setOpen] = useState(false);
+  const [innerValue, setInnerValue] = useState("");
+  const hostRef = useRef(null);
+  const triggerRef = useRef(null);
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value : innerValue;
+  const selectedDate = useMemo(() => parseYmd(currentValue), [currentValue]);
+  const minDate = useMemo(() => parseYmd(min), [min]);
+  const maxDate = useMemo(() => parseYmd(max), [max]);
+  const [focusDate, setFocusDate] = useState(() => selectedDate ?? clampDate(/* @__PURE__ */ new Date(), minDate, maxDate));
+  const dismiss = useCallback((reason) => {
+    setOpen(false);
+    if (reason === "escape") triggerRef.current?.focus();
+  }, []);
+  useDismiss(open, hostRef, dismiss);
+  const openCalendar = () => {
+    setFocusDate(selectedDate ?? clampDate(/* @__PURE__ */ new Date(), minDate, maxDate));
+    setOpen(true);
+  };
+  const isInvalid = Boolean(invalid);
+  return /* @__PURE__ */ jsxs("div", { ref: hostRef, className: "wp-dp-host", children: [
+    /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-datepicker", css: DP_CSS }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        className: triggerClassName(size, isInvalid),
+        "aria-invalid": isInvalid || void 0,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        disabled,
+        onClick: () => open ? setOpen(false) : openCalendar(),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "wp-dp-trigger__icon", children: /* @__PURE__ */ jsx(Icon, { name: "calendar", size: size === "lg" ? 16 : 15 }) }),
+          currentValue ? /* @__PURE__ */ jsx("span", { className: "wp-dp-trigger__value", children: selectedDate ? formatYmd(selectedDate) : currentValue }) : /* @__PURE__ */ jsx("span", { className: "wp-dp-trigger__value wp-dp-trigger__value--placeholder", children: placeholder ?? "\uB0A0\uC9DC \uC120\uD0DD" })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx("div", { className: "wp-dp-pop", role: "dialog", "aria-label": "\uB0A0\uC9DC \uC120\uD0DD \uB2EC\uB825", children: /* @__PURE__ */ jsx("div", { className: "wp-dp-pop__body", children: /* @__PURE__ */ jsx(
+      Calendar,
+      {
+        monthCount: 1,
+        minDate,
+        maxDate,
+        focusDate,
+        onFocusDateChange: setFocusDate,
+        dayState: (date) => ({ selected: isSameDay(date, selectedDate) }),
+        onPick: (date) => {
+          const next = formatYmd(date);
+          if (!isControlled) setInnerValue(next);
+          onChange?.(next);
+          setOpen(false);
+          triggerRef.current?.focus();
+        }
+      }
+    ) }) }) : null
+  ] });
+}
+function DateRangePicker({
+  value,
+  onChange,
+  min,
+  max,
+  invalid = false,
+  disabled = false
+}) {
+  const [open, setOpen] = useState(false);
+  const [innerRange, setInnerRange] = useState({});
+  const hostRef = useRef(null);
+  const triggerRef = useRef(null);
+  const isControlled = value !== void 0;
+  const currentRange = (isControlled ? value : innerRange) ?? {};
+  const fromDate = useMemo(() => parseYmd(currentRange.from), [currentRange.from]);
+  const toDate = useMemo(() => parseYmd(currentRange.to), [currentRange.to]);
+  const minDate = useMemo(() => parseYmd(min), [min]);
+  const maxDate = useMemo(() => parseYmd(max), [max]);
+  const [focusDate, setFocusDate] = useState(() => fromDate ?? clampDate(/* @__PURE__ */ new Date(), minDate, maxDate));
+  const dismiss = useCallback((reason) => {
+    setOpen(false);
+    if (reason === "escape") triggerRef.current?.focus();
+  }, []);
+  useDismiss(open, hostRef, dismiss);
+  const hasValue = Boolean(currentRange.from || currentRange.to);
+  const label = hasValue ? `${currentRange.from ?? ""} ~ ${currentRange.to ?? ""}` : "\uAE30\uAC04 \uC120\uD0DD";
+  const isInvalid = Boolean(invalid);
+  const openCalendar = () => {
+    setFocusDate(fromDate ?? toDate ?? clampDate(/* @__PURE__ */ new Date(), minDate, maxDate));
+    setOpen(true);
+  };
+  const commit = (next) => {
+    if (!isControlled) setInnerRange(next);
+    onChange?.(next);
+  };
+  const pick = (date) => {
+    const ymd = formatYmd(date);
+    const startingOver = fromDate === void 0 || toDate !== void 0 || date.getTime() < fromDate.getTime();
+    if (startingOver) {
+      commit({ from: ymd, to: void 0 });
+      return;
+    }
+    commit({ from: currentRange.from, to: ymd });
+    setOpen(false);
+    triggerRef.current?.focus();
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: hostRef, className: "wp-dp-host", children: [
+    /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-datepicker", css: DP_CSS }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        className: triggerClassName("md", isInvalid),
+        "aria-invalid": isInvalid || void 0,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        disabled,
+        onClick: () => open ? setOpen(false) : openCalendar(),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "wp-dp-trigger__icon", children: /* @__PURE__ */ jsx(Icon, { name: "calendar", size: 15 }) }),
+          /* @__PURE__ */ jsx("span", { className: `wp-dp-trigger__value${hasValue ? "" : " wp-dp-trigger__value--placeholder"}`, children: label })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx("div", { className: "wp-dp-pop wp-dp-pop--wide", role: "dialog", "aria-label": "\uAE30\uAC04 \uC120\uD0DD \uB2EC\uB825", children: /* @__PURE__ */ jsx("div", { className: "wp-dp-pop__body", children: /* @__PURE__ */ jsx(
+      Calendar,
+      {
+        monthCount: 2,
+        minDate,
+        maxDate,
+        focusDate,
+        onFocusDateChange: setFocusDate,
+        dayState: (date) => {
+          const t = date.getTime();
+          const start = fromDate?.getTime();
+          const end = toDate?.getTime();
+          if (start !== void 0 && end !== void 0 && t > start && t < end) return { rangeMiddle: true };
+          return {
+            rangeStart: start !== void 0 && t === start && end !== void 0,
+            rangeEnd: end !== void 0 && t === end,
+            // 아직 시작만 고른 상태는 단일 선택처럼 보인다
+            selected: start !== void 0 && t === start && end === void 0 || void 0
+          };
+        },
+        onPick: pick
+      }
+    ) }) }) : null
+  ] });
+}
+var DP_CSS = `
+.wp-dp-host{position:relative}
+.wp-dp-pop{position:absolute;top:calc(100% + var(--wp-space-2));left:0;min-width:100%;width:max-content;background:var(--wp-surface-card);border:1px solid var(--wp-border-subtle);border-radius:var(--wp-radius-lg);box-shadow:var(--wp-shadow-lg);z-index:300}
+.wp-dp-pop--wide{max-width:min(640px,90vw)}
+.wp-dp-pop__body{padding:var(--wp-space-4);max-height:60vh;overflow:auto}
+.wp-dp-trigger{display:inline-flex;align-items:center;gap:var(--wp-space-2);text-align:left;cursor:pointer}
+.wp-dp-trigger:disabled{cursor:not-allowed}
+.wp-dp-trigger__icon{flex:none;display:inline-flex;color:var(--wp-text-muted)}
+.wp-dp-trigger:disabled .wp-dp-trigger__icon{color:var(--wp-text-disabled)}
+.wp-dp-trigger__value{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--wp-font-mono);font-size:12.5px;letter-spacing:-0.01em}
+.wp-dp-trigger__value--placeholder{font-family:inherit;font-size:13px;letter-spacing:normal;color:var(--wp-text-subtle)}
+.wp-dp{font-family:inherit;font-size:13px;color:var(--wp-text-default)}
+.wp-dp__months{position:relative;display:flex;flex-wrap:wrap;gap:var(--wp-space-5)}
+.wp-dp__nav{position:absolute;top:0;right:0;display:flex;gap:var(--wp-space-1);z-index:1}
+.wp-dp__navbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;background:transparent;border-radius:var(--wp-radius-sm);color:var(--wp-text-muted);cursor:pointer;transition:background 0.12s,color 0.12s}
+.wp-dp__navbtn:hover:not(:disabled){background:var(--wp-surface-hover);color:var(--wp-text-strong)}
+.wp-dp__navbtn:focus-visible{outline:2px solid var(--wp-border-focus);outline-offset:1px}
+.wp-dp__navbtn:disabled{color:var(--wp-text-disabled);cursor:default;background:transparent}
+.wp-dp__caption{display:flex;align-items:center;height:28px;margin-bottom:var(--wp-space-2);padding-left:var(--wp-space-1)}
+.wp-dp__caption-label{font-size:13px;font-weight:600;color:var(--wp-text-strong)}
+.wp-dp__grid{border-collapse:collapse}
+.wp-dp__weekday{width:32px;height:28px;padding:0;font-size:12px;font-weight:500;color:var(--wp-text-muted);text-align:center}
+.wp-dp__weekday:first-child{color:var(--wp-text-danger)}
+.wp-dp__day{padding:0;text-align:center}
+.wp-dp__day-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:30px;padding:0;border:none;background:transparent;border-radius:var(--wp-radius-sm);font:inherit;font-variant-numeric:tabular-nums;color:inherit;cursor:pointer;transition:background 0.12s,color 0.12s}
+.wp-dp__day:not(.wp-dp__day--selected):not(.wp-dp__day--disabled) .wp-dp__day-btn:hover{background:var(--wp-surface-hover)}
+.wp-dp__day-btn:focus-visible{outline:2px solid var(--wp-border-focus);outline-offset:-1px}
+.wp-dp__day--today .wp-dp__day-btn{box-shadow:inset 0 0 0 1px var(--wp-border-focus)}
+.wp-dp__day--outside{color:var(--wp-text-subtle)}
+.wp-dp__day--disabled{color:var(--wp-text-disabled)}
+.wp-dp__day--disabled .wp-dp__day-btn{cursor:default}
+.wp-dp__day--selected .wp-dp__day-btn{background:var(--wp-action-primary-bg);color:var(--wp-action-primary-fg);font-weight:500}
+.wp-dp__day--selected.wp-dp__day--today .wp-dp__day-btn{box-shadow:none}
+.wp-dp__day--range-middle .wp-dp__day-btn{background:var(--wp-surface-selected);color:var(--wp-text-default);border-radius:0;font-weight:400}
+.wp-dp__day--range-start .wp-dp__day-btn,.wp-dp__day--range-end .wp-dp__day-btn{background:var(--wp-action-primary-bg);color:var(--wp-action-primary-fg);font-weight:500}
+.wp-dp__day--range-start.wp-dp__day--today .wp-dp__day-btn,.wp-dp__day--range-end.wp-dp__day--today .wp-dp__day-btn{box-shadow:none}
+`;
+
+export { DatePicker, DateRangePicker, HoistedStyle };