@olundot/ui 0.23.1 → 0.25.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @olundot/ui
 
+## 0.25.0
+
+### Minor Changes
+
+- a848a56: DataTable `isRowSelectable`가 `'hidden'`을 돌려주면 그 행의 선택 칸을 비웁니다.
+
+  - 폴더처럼 처음부터 고를 대상이 아닌 행에 씁니다. 체크박스 없이 같은 폭의 빈 칸을 둬 열이 어긋나지 않습니다. 1024px 미만 카드도 제목이 같은 자리에서 시작합니다.
+  - 선택 규칙은 `false`(막힌 행)와 같습니다. 전체 선택, 선택 개수, `onSelectionChange`에서 빠지고 `selectedIds`에 들어 있어도 선택으로 그리지 않습니다.
+  - 반환 타입만 `boolean | 'hidden'`으로 넓혔습니다. `boolean`을 돌려주는 코드는 그대로 동작합니다.
+
+## 0.24.0
+
+### Minor Changes
+
+- 052cb2d: DatePicker 기간 고르기를 다듬고 기간 이동을 더했습니다.
+
+  - 1024px 이상 `day` 기간 팝오버는 두 달을 나란히 보입니다(폭 558px). 이전 달, 다음 달 버튼은 양 끝에 하나씩이고 한 달씩 넘깁니다. 키보드는 두 달 사이를 그대로 넘습니다.
+  - `day` 기간에도 끝 버튼 「시작일」「종료일」을 둡니다. 누른 끝만 고칩니다. 두 끝이 찬 뒤 시작을 고르면 종료는 그대로 두고 반영합니다. 1024px 미만 시트에도 보입니다.
+  - 시작을 고른 뒤 가리킨 날(마우스, 키보드 포커스)까지 범위를 옅게 미리 보입니다.
+  - 새 prop `lockStart`(시작 끝 잠금)와 `endMin`(종료 전용 하한)을 더했습니다.
+  - 새 prop `onStep`, `prevStepDisabled`, `nextStepDisabled`: 칸 양옆에 「이전 기간」「다음 기간」 버튼을 두고, 옮길 폭은 사용하는 쪽이 정합니다.
+
 ## 0.23.1
 
 ### Patch Changes

package/dist/index.d.ts

@@ -396,6 +396,15 @@ interface DatePickerBaseProps {
     className?: string;
     "aria-label"?: string;
     "aria-describedby"?: string;
+    /**
+     * Shows "이전 기간" and "다음 기간" buttons beside the field, for views and filters that page
+     * through periods. Called with -1 or 1; the caller moves the value by its own step.
+     */
+    onStep?: (direction: -1 | 1) => void;
+    /** Disables "이전 기간". */
+    prevStepDisabled?: boolean;
+    /** Disables "다음 기간" (the next period would pass `max`, for example). */
+    nextStepDisabled?: boolean;
 }
 interface DatePickerSingleProps extends DatePickerBaseProps {
     selectionMode?: "single";
@@ -403,6 +412,8 @@ interface DatePickerSingleProps extends DatePickerBaseProps {
     value: string;
     onChange: (value: string) => void;
     maxDays?: never;
+    lockStart?: never;
+    endMin?: never;
 }
 interface DatePickerRangeProps extends DatePickerBaseProps {
     selectionMode: "range";
@@ -412,6 +423,10 @@ interface DatePickerRangeProps extends DatePickerBaseProps {
     onChange: (value: DateRangeValue) => void;
     /** Most days the range spans, the start day included. */
     maxDays?: number;
+    /** Keeps the start as it is: its end button is disabled and only the end is picked. Give the reason in `description`. */
+    lockStart?: boolean;
+    /** Earliest end, in the value format. Unlike `min`, it leaves the start alone. With it, an earlier end day no longer swaps the ends. */
+    endMin?: string;
 }
 type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
 declare function DatePicker(props: DatePickerProps): react_jsx_runtime.JSX.Element;
@@ -1192,9 +1207,11 @@ interface DataTableBaseProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement
     /**
      * With `selectable`, `false` blocks a row's selection: its checkbox is disabled, it is never
      * drawn selected or passed to `onSelectionChange`, and select-all counts only the other rows.
+     * `'hidden'` blocks it the same way and draws no checkbox, for a row that is never selected (a
+     * folder among items); its slot stays empty at the checkbox width, so the columns line up.
      * Navigating, expanding and the row menu still work.
      */
-    isRowSelectable?: (row: T) => boolean;
+    isRowSelectable?: (row: T) => boolean | 'hidden';
     selectedIds?: Set<string>;
     onSelectionChange?: (ids: Set<string>) => void;
     /** Unit in the screen-reader selection message — `12명 선택됨`. Defaults to `개`. */

package/dist/index.js

@@ -1887,7 +1887,7 @@ Select.displayName = "Select";
 
 // src/components/ui/date-picker.tsx
 import * as React19 from "react";
-import { AlertCircle as AlertCircle4, Calendar as CalendarIcon, ChevronLeft, ChevronRight } from "lucide-react";
+import { AlertCircle as AlertCircle4, Calendar as CalendarIcon, ChevronLeft, ChevronRight, Lock } from "lucide-react";
 
 // src/components/ui/dialog.tsx
 import * as React17 from "react";
@@ -3704,7 +3704,7 @@ function formatRangeParts(value, granularity, now) {
 import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 var WEEKDAYS = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
 var HOURS = Array.from({ length: 24 }, (_, hour) => hour);
-var POPOVER_WIDTH = { day: 280, minute: 424 };
+var POPOVER_WIDTH = { day: 280, dayRange: 558, minute: 424 };
 var COLLISION_PADDING = 8;
 var pad22 = (n) => String(n).padStart(2, "0");
 var isoDay = (parts) => `${parts.year}-${pad22(parts.month)}-${pad22(parts.day)}`;
@@ -3742,11 +3742,17 @@ function DatePicker(props) {
     id,
     className,
     "aria-label": ariaLabel,
-    "aria-describedby": ariaDescribedBy
+    "aria-describedby": ariaDescribedBy,
+    onStep,
+    prevStepDisabled = false,
+    nextStepDisabled = false
   } = props;
   const range = props.selectionMode === "range";
   const minute = granularity === "minute";
   const maxDays = range ? props.maxDays : void 0;
+  const lockStart = range && Boolean(props.lockStart);
+  const endMinValue = range ? props.endMin : void 0;
+  const popoverKind = minute ? "minute" : range ? "dayRange" : "day";
   const field = useFormFieldControl();
   const generatedId = React19.useId();
   const baseId = `date-picker-${generatedId.replace(/:/g, "")}`;
@@ -3760,14 +3766,18 @@ function DatePicker(props) {
     const parts = parseValue(max, granularity);
     return parts && !minute ? { ...parts, hour: 23, minute: 59 } : parts;
   }, [max, granularity, minute]);
+  const endMinParts = React19.useMemo(() => parseValue(endMinValue, granularity), [endMinValue, granularity]);
+  const swapEnds = !minute && !lockStart && !endMinParts;
   const [open, setOpen] = React19.useState(false);
   const [layer, setLayer] = React19.useState("popover");
   const [align, setAlign] = React19.useState("start");
   const [draft, setDraft] = React19.useState({ from: "", to: "" });
-  const [activeEnd, setActiveEnd] = React19.useState("from");
+  const [pickedEnd, setActiveEnd] = React19.useState("from");
+  const activeEnd = lockStart ? "to" : pickedEnd;
   const [timeOpen, setTimeOpen] = React19.useState(false);
   const [view, setView] = React19.useState(() => ({ year: 2e3, month: 1 }));
   const [focusDay, setFocusDay] = React19.useState(() => todayParts(/* @__PURE__ */ new Date()));
+  const [pointDay, setPointDay] = React19.useState(null);
   const triggerRef = React19.useRef(null);
   const [outerLabel, setOuterLabel] = React19.useState(void 0);
   const [windowName, setWindowName] = React19.useState(void 0);
@@ -3807,7 +3817,7 @@ function DatePicker(props) {
     setOuterLabel(labelTextOf(triggerRef.current));
   }, [ariaLabel, label, field, triggerId]);
   function startView() {
-    const anchor = range ? parseValue(rangeValue.from, granularity) ?? parseValue(rangeValue.to, granularity) : parseValue(singleValue, granularity);
+    const anchor = range ? (lockStart ? parseValue(rangeValue.to, granularity) : null) ?? parseValue(rangeValue.from, granularity) ?? parseValue(rangeValue.to, granularity) : parseValue(singleValue, granularity);
     return anchor ?? parseValue(initialMonth, granularity) ?? todayParts(/* @__PURE__ */ new Date());
   }
   function handleOpenChange(next) {
@@ -3819,13 +3829,14 @@ function DatePicker(props) {
       setDraft(rangeValue);
       setActiveEnd(range && rangeValue.from && !rangeValue.to ? "to" : "from");
       setTimeOpen(false);
+      setPointDay(null);
       followed.current = rangeValue;
       lastEmitted.current = null;
       setWindowName(currentWindowName());
       const wide = isWideViewport();
       setLayer(wide ? "popover" : "sheet");
       const box = triggerRef.current?.getBoundingClientRect();
-      const width = POPOVER_WIDTH[granularity];
+      const width = POPOVER_WIDTH[popoverKind];
       setAlign(box && typeof window !== "undefined" && box.left + width > window.innerWidth - COLLISION_PADDING ? "end" : "start");
     }
     setOpen(next);
@@ -3834,13 +3845,25 @@ function DatePicker(props) {
   const toParts = parseValue(shownRange.to, granularity);
   const singleParts = parseValue(singleValue, granularity);
   const editing = range ? activeEnd === "from" ? fromParts : toParts : singleParts;
-  const editMin = range && activeEnd === "to" && fromParts && minute ? minParts && minuteKey(minParts) > minuteKey(fromParts) ? minParts : fromParts : minParts;
+  const editMin = range && activeEnd === "to" ? [minParts, minute ? fromParts : null, endMinParts].reduce(
+    (latest, parts) => parts && (!latest || minuteKey(parts) > minuteKey(latest)) ? parts : latest,
+    null
+  ) : minParts;
+  const editMax = (() => {
+    if (!range || activeEnd !== "to" || !fromParts || maxDays === void 0) return maxParts;
+    const last = { ...addDays(fromParts, maxDays - 1), hour: 23, minute: 59 };
+    return maxParts && minuteKey(maxParts) < minuteKey(last) ? maxParts : last;
+  })();
   function commitRange(next, edited) {
     const from = parseValue(next.from, granularity);
     const to = parseValue(next.to, granularity);
+    if (edited === "to" && to && (editMin && minuteKey(to) < minuteKey(editMin) || editMax && minuteKey(to) > minuteKey(editMax))) {
+      return draft;
+    }
     let value = next;
     if (from && to && (minuteKey(from) > minuteKey(to) || maxDays !== void 0 && daysBetween(from, to) > maxDays - 1)) {
       const cleared = edited === "from" ? "to" : "from";
+      if (lockStart && cleared === "from") return draft;
       value = cleared === "to" ? { from: next.from, to: "" } : { from: "", to: next.to };
       setActiveEnd(cleared);
     }
@@ -3859,16 +3882,11 @@ function DatePicker(props) {
   function dayDisabled(cell) {
     if (minParts && dayKey(cell) < dayKey(minParts)) return true;
     if (maxParts && dayKey(cell) > dayKey(maxParts)) return true;
-    if (!range) return false;
-    if (minute) {
-      if (activeEnd === "to" && fromParts) {
-        if (dayKey(cell) < dayKey(fromParts)) return true;
-        if (maxDays !== void 0 && daysBetween(fromParts, cell) > maxDays - 1) return true;
-      }
-      return false;
-    }
-    if (fromParts && !toParts && maxDays !== void 0) return daysBetween(fromParts, cell) > maxDays - 1;
-    return false;
+    if (!range || activeEnd !== "to") return false;
+    if (endMinParts && dayKey(cell) < dayKey(endMinParts)) return true;
+    if (!fromParts) return false;
+    if (!swapEnds && dayKey(cell) < dayKey(fromParts)) return true;
+    return maxDays !== void 0 && daysBetween(fromParts, cell) > maxDays - 1;
   }
   function selectDay(cell) {
     if (dayDisabled(cell)) return;
@@ -3879,13 +3897,16 @@ function DatePicker(props) {
       return;
     }
     if (!minute) {
-      if (!fromParts || toParts) {
-        setDraft({ from: formatValue(cell, granularity), to: "" });
+      const picked = formatValue(cell, granularity);
+      const filled = Boolean(fromParts && toParts);
+      const next = activeEnd === "from" ? { from: picked, to: draft.to } : swapEnds && fromParts && dayKey(cell) < dayKey(fromParts) ? { from: picked, to: draft.from } : { from: draft.from, to: picked };
+      const value = commitRange(next, activeEnd);
+      if (!value.from || !value.to) {
+        setActiveEnd(value.from ? "to" : "from");
         return;
       }
-      const picked = formatValue(cell, granularity);
-      commitRange(dayKey(cell) < dayKey(fromParts) ? { from: picked, to: draft.from } : { from: draft.from, to: picked }, "to");
-      setOpen(false);
+      if (activeEnd === "to" || !filled) setOpen(false);
+      else setActiveEnd("to");
       return;
     }
     if (activeEnd === "from") {
@@ -3893,7 +3914,7 @@ function DatePicker(props) {
       if (!commitRange({ from: formatValue(nextFrom, granularity), to: draft.to }, "from").to) setActiveEnd("to");
       return;
     }
-    const nextTo = clampParts({ ...baseFor("to"), year: cell.year, month: cell.month, day: cell.day }, editMin, maxParts);
+    const nextTo = clampParts({ ...baseFor("to"), year: cell.year, month: cell.month, day: cell.day }, editMin, editMax);
     commitRange({ from: draft.from, to: formatValue(nextTo, granularity) }, "to");
   }
   function changeTime(patch) {
@@ -3901,9 +3922,18 @@ function DatePicker(props) {
       props.onChange(formatValue(clampParts({ ...baseFor(null), ...patch }, minParts, maxParts), granularity));
       return;
     }
-    const next = formatValue(clampParts({ ...baseFor(activeEnd), ...patch }, editMin, maxParts), granularity);
+    const next = formatValue(clampParts({ ...baseFor(activeEnd), ...patch }, editMin, editMax), granularity);
     commitRange(activeEnd === "from" ? { from: next, to: draft.to } : { from: draft.from, to: next }, activeEnd);
   }
+  function activateEnd(end, kind) {
+    setActiveEnd(end);
+    const parts = end === "from" ? fromParts : toParts;
+    if (!parts) return;
+    const shown = kind === "popover" && popoverKind === "dayRange" ? 2 : 1;
+    const offset = (parts.year - view.year) * 12 + parts.month - view.month;
+    if (offset < 0 || offset >= shown) setView({ year: parts.year, month: parts.month });
+    setFocusDay({ ...parts, hour: 0, minute: 0 });
+  }
   const endPlaceholder = minute ? "\uC885\uB8CC \uC77C\uC2DC" : "\uC885\uB8CC\uC77C";
   let summary;
   let summaryText = "";
@@ -3995,11 +4025,25 @@ function DatePicker(props) {
     }
   );
   const today = todayParts(now);
+  const preview = (() => {
+    if (!range || !pointDay || dayDisabled(pointDay)) return null;
+    const edited = activeEnd === "from" ? fromParts : toParts;
+    if (edited && sameDay(pointDay, edited)) return null;
+    if (activeEnd === "to" && fromParts) {
+      return dayKey(pointDay) < dayKey(fromParts) ? { from: pointDay, to: fromParts, kept: fromParts } : { from: fromParts, to: pointDay, kept: fromParts };
+    }
+    if (activeEnd === "from" && toParts && dayKey(pointDay) <= dayKey(toParts) && (maxDays === void 0 || daysBetween(pointDay, toParts) <= maxDays - 1)) {
+      return { from: pointDay, to: toParts, kept: toParts };
+    }
+    return null;
+  })();
   const selectedFor = (cell) => {
     if (!range) return Boolean(singleParts && sameDay(cell, singleParts));
+    if (preview) return sameDay(cell, preview.kept);
     return Boolean(fromParts && sameDay(cell, fromParts) || toParts && sameDay(cell, toParts));
   };
-  const inRange = (cell) => Boolean(range && fromParts && toParts && dayKey(cell) > dayKey(fromParts) && dayKey(cell) < dayKey(toParts));
+  const inRange = (cell) => Boolean(range && !preview && fromParts && toParts && dayKey(cell) > dayKey(fromParts) && dayKey(cell) < dayKey(toParts));
+  const inPreview = (cell) => Boolean(preview && !sameDay(cell, preview.kept) && dayKey(cell) >= dayKey(preview.from) && dayKey(cell) <= dayKey(preview.to));
   const focusCalendar = React19.useRef(false);
   React19.useEffect(() => {
     const active = typeof document !== "undefined" ? document.activeElement : null;
@@ -4032,6 +4076,7 @@ function DatePicker(props) {
     {
       kind,
       baseId,
+      months: kind === "popover" && popoverKind === "dayRange" ? 2 : 1,
       view,
       onView: setView,
       focusDay,
@@ -4040,6 +4085,8 @@ function DatePicker(props) {
       isDisabled: dayDisabled,
       isSelected: selectedFor,
       isInRange: inRange,
+      isPreview: inPreview,
+      onPoint: setPointDay,
       onSelect: selectDay
     }
   );
@@ -4049,12 +4096,14 @@ function DatePicker(props) {
   const timeRowValue = editing ? `${pad22(editing.hour)}:${pad22(editing.minute)}` : "-";
   const panel = (kind) => /* @__PURE__ */ jsxs14("div", { "data-slot": "date-picker-panel", "data-layer": kind, "data-picker": baseId, className: "flex flex-col", children: [
     popoverHeader != null ? /* @__PURE__ */ jsx16("div", { className: "mb-[var(--space-3)]", children: popoverHeader }) : null,
-    range && minute ? /* @__PURE__ */ jsx16(
+    range ? /* @__PURE__ */ jsx16(
       EndTabs,
       {
         kind,
+        names: minute ? ["\uC2DC\uC791 \uC77C\uC2DC", "\uC885\uB8CC \uC77C\uC2DC"] : ["\uC2DC\uC791\uC77C", "\uC885\uB8CC\uC77C"],
+        locked: lockStart ? "from" : void 0,
         active: activeEnd,
-        onActivate: setActiveEnd,
+        onActivate: (end) => activateEnd(end, kind),
         from: fromParts ? formatSingle(shownRange.from, granularity, now) : "",
         to: toParts ? formatSingle(shownRange.to, granularity, now) : ""
       }
@@ -4093,7 +4142,7 @@ function DatePicker(props) {
       ) : null
     ] })
   ] });
-  const control = /* @__PURE__ */ jsxs14(Fragment3, { children: [
+  const picker = /* @__PURE__ */ jsxs14(Fragment3, { children: [
     /* @__PURE__ */ jsxs14(Popover, { open: open && layer === "popover", onOpenChange: handleOpenChange, children: [
       /* @__PURE__ */ jsx16(PopoverAnchor, { asChild: true, children: trigger }),
       /* @__PURE__ */ jsx16(
@@ -4102,7 +4151,7 @@ function DatePicker(props) {
           align,
           sideOffset: 4,
           collisionPadding: COLLISION_PADDING,
-          className: cn("p-[var(--space-3)]", minute ? "w-[424px]" : "w-[280px]"),
+          className: cn("p-[var(--space-3)]", { day: "w-[280px]", dayRange: "w-[558px]", minute: "w-[424px]" }[popoverKind]),
           "aria-label": titleText,
           onOpenAutoFocus: (event) => {
             event.preventDefault();
@@ -4125,6 +4174,34 @@ function DatePicker(props) {
     ] }),
     /* @__PURE__ */ jsx16(Dialog, { open: open && layer === "sheet", onOpenChange: handleOpenChange, title: titleText, size: "sm", children: /* @__PURE__ */ jsx16("div", { className: "mx-auto w-full max-w-[360px]", children: panel("sheet") }) })
   ] });
+  const stepSize = { sm: "sm", md: "md", lg: "lg" };
+  const control = onStep ? /* @__PURE__ */ jsxs14("div", { "data-slot": "date-picker-stepper", className: cn("flex items-center gap-[var(--space-1)]", fullWidth ? "w-full" : "w-fit"), children: [
+    /* @__PURE__ */ jsx16(
+      IconButton,
+      {
+        icon: ChevronLeft,
+        appearance: "outline",
+        tone: "neutral",
+        size: stepSize[size],
+        "aria-label": "\uC774\uC804 \uAE30\uAC04",
+        disabled: disabled || prevStepDisabled,
+        onClick: () => onStep(-1)
+      }
+    ),
+    /* @__PURE__ */ jsx16("div", { className: cn("min-w-0", fullWidth && "flex-1"), children: picker }),
+    /* @__PURE__ */ jsx16(
+      IconButton,
+      {
+        icon: ChevronRight,
+        appearance: "outline",
+        tone: "neutral",
+        size: stepSize[size],
+        "aria-label": "\uB2E4\uC74C \uAE30\uAC04",
+        disabled: disabled || nextStepDisabled,
+        onClick: () => onStep(1)
+      }
+    )
+  ] }) : picker;
   if (!topLabel && !showDescription && !showMessage) return control;
   return /* @__PURE__ */ jsxs14("div", { "data-slot": "date-picker-field", className: cn("flex flex-col gap-[var(--space-1)]", fullWidth ? "w-full" : "w-fit"), children: [
     topLabel ? /* @__PURE__ */ jsx16(
@@ -4148,51 +4225,69 @@ function DatePicker(props) {
 DatePicker.displayName = "DatePicker";
 function EndTabs({
   kind,
+  names,
+  locked,
   active,
   onActivate,
   from,
   to
 }) {
   const ends = [
-    { end: "from", name: "\uC2DC\uC791 \uC77C\uC2DC", value: from },
-    { end: "to", name: "\uC885\uB8CC \uC77C\uC2DC", value: to }
+    { end: "from", name: names[0], value: from },
+    { end: "to", name: names[1], value: to }
   ];
-  return /* @__PURE__ */ jsx16("div", { "data-slot": "date-picker-ends", className: cn("mb-[var(--space-3)] grid grid-cols-2 gap-[var(--space-2)]", kind === "sheet" && "mb-[var(--space-4)]"), children: ends.map(({ end, name, value }) => /* @__PURE__ */ jsxs14(
-    "button",
-    {
-      type: "button",
-      "data-slot": "date-picker-end",
-      "aria-pressed": active === end,
-      onClick: () => onActivate(end),
-      className: cn(
-        "flex min-w-0 flex-col items-start rounded-[var(--radius-md)] border px-[var(--space-3)] py-[var(--space-2)] text-left",
-        "outline-none focus-visible:shadow-[0_0_0_2px_var(--focus-ring)]",
-        active === end ? "border-[var(--border-strong)] bg-[var(--action-selected)]" : "border-[var(--border)] hover:bg-[var(--action-hover)]"
-      ),
-      children: [
-        /* @__PURE__ */ jsx16("span", { className: "text-[11px] leading-snug text-text-tertiary", children: name }),
-        /* @__PURE__ */ jsx16("span", { className: cn("w-full truncate text-[13px] font-semibold leading-snug font-numeric tabular-nums", value ? "text-foreground" : "text-text-tertiary"), children: value || "-" })
-      ]
-    },
-    end
-  )) });
+  return /* @__PURE__ */ jsx16("div", { "data-slot": "date-picker-ends", className: cn("mb-[var(--space-3)] grid grid-cols-2 gap-[var(--space-2)]", kind === "sheet" && "mb-[var(--space-4)]"), children: ends.map(({ end, name, value }) => {
+    const isLocked = locked === end;
+    return /* @__PURE__ */ jsxs14(
+      "button",
+      {
+        type: "button",
+        "data-slot": "date-picker-end",
+        "aria-pressed": active === end,
+        disabled: isLocked,
+        onClick: () => onActivate(end),
+        className: cn(
+          "flex min-w-0 flex-col items-start rounded-[var(--radius-md)] border px-[var(--space-3)] py-[var(--space-2)] text-left",
+          "outline-none focus-visible:shadow-[0_0_0_2px_var(--focus-ring)]",
+          isLocked ? "cursor-not-allowed border-[var(--border)] bg-[var(--action-disabled-bg)]" : active === end ? "border-[var(--border-strong)] bg-[var(--action-selected)]" : "border-[var(--border)] hover:bg-[var(--action-hover)]"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs14("span", { className: "flex w-full items-center justify-between gap-[var(--space-1)] text-[11px] leading-snug text-text-tertiary", children: [
+            /* @__PURE__ */ jsx16("span", { children: name }),
+            isLocked ? /* @__PURE__ */ jsx16(Lock, { "aria-hidden": "true", size: 12, strokeWidth: 2, className: "shrink-0" }) : null
+          ] }),
+          /* @__PURE__ */ jsx16(
+            "span",
+            {
+              className: cn(
+                "w-full truncate text-[13px] font-semibold leading-snug font-numeric tabular-nums",
+                isLocked ? "text-text-disabled" : value ? "text-foreground" : "text-text-tertiary"
+              ),
+              children: value || "-"
+            }
+          )
+        ]
+      },
+      end
+    );
+  }) });
 }
-function Calendar({ kind, baseId, view, onView, focusDay, onFocusDay, today, isDisabled, isSelected, isInRange, onSelect }) {
-  const gridRef = React19.useRef(null);
+function Calendar({ kind, baseId, months, view, onView, focusDay, onFocusDay, today, isDisabled, isSelected, isInRange, isPreview, onPoint, onSelect }) {
+  const rootRef = React19.useRef(null);
   const focusPending = React19.useRef(false);
-  const headingId = `${baseId}-month`;
-  const cells = buildCalendarCells(view.year, view.month).map((cell) => ({ ...cell, hour: 0, minute: 0 }));
-  const weeks = Array.from({ length: 6 }, (_, week) => cells.slice(week * 7, week * 7 + 7));
-  const tabbable = focusDay.year === view.year && focusDay.month === view.month ? focusDay : { ...focusDay, year: view.year, month: view.month, day: 1 };
+  const shown = Array.from({ length: months }, (_, index) => addMonths(view.year, view.month, index));
+  const inView = (day) => shown.some((month) => month.year === day.year && month.month === day.month);
+  const tabbable = inView(focusDay) ? focusDay : { ...focusDay, year: view.year, month: view.month, day: 1 };
   React19.useEffect(() => {
     if (!focusPending.current) return;
     focusPending.current = false;
-    gridRef.current?.querySelector(`[data-date="${isoDay(focusDay)}"]`)?.focus();
+    rootRef.current?.querySelector(`[data-date="${isoDay(focusDay)}"]`)?.focus();
   });
   function move(next) {
     focusPending.current = true;
     onFocusDay(next);
-    if (next.year !== view.year || next.month !== view.month) onView({ year: next.year, month: next.month });
+    if (inView(next)) return;
+    onView(dayKey(next) < dayKey({ ...view, day: 1 }) ? { year: next.year, month: next.month } : addMonths(next.year, next.month, 1 - months));
   }
   function moveMonth(delta) {
     onView(addMonths(view.year, view.month, delta));
@@ -4216,61 +4311,100 @@ function Calendar({ kind, baseId, view, onView, focusDay, onFocusDay, today, isD
     move(target());
   }
   const sheet = kind === "sheet";
-  return /* @__PURE__ */ jsxs14("div", { "data-slot": "date-picker-calendar", className: cn("flex flex-col", sheet ? "w-full" : "w-[256px] shrink-0"), children: [
-    /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx16(IconButton, { icon: ChevronLeft, appearance: "ghost", tone: "neutral", size: sheet ? "md" : "xs", "aria-label": "\uC774\uC804 \uB2EC", onClick: () => moveMonth(-1) }),
-      /* @__PURE__ */ jsxs14("span", { id: headingId, "aria-live": "polite", className: "text-[13px] font-semibold text-text-primary font-numeric tabular-nums", children: [
-        view.year,
-        "\uB144 ",
-        view.month,
-        "\uC6D4"
-      ] }),
-      /* @__PURE__ */ jsx16(IconButton, { icon: ChevronRight, appearance: "ghost", tone: "neutral", size: sheet ? "md" : "xs", "aria-label": "\uB2E4\uC74C \uB2EC", onClick: () => moveMonth(1) })
-    ] }),
-    /* @__PURE__ */ jsxs14("div", { ref: gridRef, role: "grid", "aria-labelledby": headingId, "data-slot": "date-picker-grid", className: "mt-[var(--space-1)] flex flex-col gap-[2px]", children: [
-      /* @__PURE__ */ jsx16("div", { role: "row", className: "grid grid-cols-7 gap-[2px]", children: WEEKDAYS.map((weekday) => /* @__PURE__ */ jsx16("span", { role: "columnheader", className: "py-[var(--space-1)] text-center text-[10px] font-semibold text-text-tertiary", children: weekday }, weekday)) }),
-      weeks.map((week, index) => /* @__PURE__ */ jsx16("div", { role: "row", className: "grid grid-cols-7 gap-[2px]", children: week.map((cell) => {
-        const outside = !cell.inMonth;
-        const disabled = isDisabled(cell);
-        const selected = !outside && isSelected(cell);
-        const between = !outside && !selected && isInRange(cell);
-        const isToday = !outside && sameDay(cell, today);
-        return /* @__PURE__ */ jsx16(
-          "button",
-          {
-            type: "button",
-            role: "gridcell",
-            "data-date": outside ? void 0 : isoDay(cell),
-            "data-selected": selected ? "" : void 0,
-            "data-in-range": between ? "" : void 0,
-            disabled: outside,
-            tabIndex: !outside && sameDay(cell, tabbable) ? 0 : -1,
-            "aria-label": `${cell.year}\uB144 ${cell.month}\uC6D4 ${cell.day}\uC77C`,
-            "aria-selected": outside ? void 0 : selected,
-            "aria-disabled": !outside && disabled ? true : void 0,
-            "aria-current": isToday ? "date" : void 0,
-            onClick: () => {
-              if (outside || disabled) return;
-              focusPending.current = false;
-              onFocusDay(cell);
-              onSelect(cell);
+  const navSize = sheet ? "md" : "xs";
+  const headingId = (index) => index === 0 ? `${baseId}-month` : `${baseId}-month-${index + 1}`;
+  const width = sheet ? "w-full" : "w-[256px]";
+  const blankOutside = months > 1;
+  return /* @__PURE__ */ jsxs14("div", { ref: rootRef, "data-slot": "date-picker-calendar", className: cn("flex flex-col", sheet ? "w-full" : "shrink-0"), children: [
+    /* @__PURE__ */ jsx16("div", { className: "flex gap-[var(--space-5)]", children: shown.map((month, index) => (
+      // Keyed by position, not month: the ‹ › pressed stays the same node and keeps focus.
+      /* @__PURE__ */ jsxs14("div", { className: cn("flex items-center justify-between", width), children: [
+        index === 0 ? /* @__PURE__ */ jsx16(IconButton, { icon: ChevronLeft, appearance: "ghost", tone: "neutral", size: navSize, "aria-label": "\uC774\uC804 \uB2EC", onClick: () => moveMonth(-1) }) : /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", className: "size-[28px]" }),
+        /* @__PURE__ */ jsxs14("span", { id: headingId(index), "aria-live": "polite", className: "text-[13px] font-semibold text-text-primary font-numeric tabular-nums", children: [
+          month.year,
+          "\uB144 ",
+          month.month,
+          "\uC6D4"
+        ] }),
+        index === months - 1 ? /* @__PURE__ */ jsx16(IconButton, { icon: ChevronRight, appearance: "ghost", tone: "neutral", size: navSize, "aria-label": "\uB2E4\uC74C \uB2EC", onClick: () => moveMonth(1) }) : /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", className: "size-[28px]" })
+      ] }, index)
+    )) }),
+    /* @__PURE__ */ jsx16(
+      "div",
+      {
+        className: "mt-[var(--space-1)] flex gap-[var(--space-5)]",
+        onMouseLeave: () => onPoint(null),
+        onBlur: (event) => {
+          if (!(event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget))) onPoint(null);
+        },
+        children: shown.map((month, index) => {
+          const cells = buildCalendarCells(month.year, month.month).map((cell) => ({ ...cell, hour: 0, minute: 0 }));
+          const weeks = Array.from({ length: 6 }, (_, week) => cells.slice(week * 7, week * 7 + 7));
+          return /* @__PURE__ */ jsxs14(
+            "div",
+            {
+              role: "grid",
+              "aria-labelledby": headingId(index),
+              "data-slot": "date-picker-grid",
+              className: cn("flex flex-col gap-[2px]", width),
+              children: [
+                /* @__PURE__ */ jsx16("div", { role: "row", className: "grid grid-cols-7 gap-[2px]", children: WEEKDAYS.map((weekday) => /* @__PURE__ */ jsx16("span", { role: "columnheader", className: "py-[var(--space-1)] text-center text-[10px] font-semibold text-text-tertiary", children: weekday }, weekday)) }),
+                weeks.map((week, row) => /* @__PURE__ */ jsx16("div", { role: "row", className: "grid grid-cols-7 gap-[2px]", children: week.map((cell) => {
+                  const outside = !cell.inMonth;
+                  if (outside && blankOutside) {
+                    return /* @__PURE__ */ jsx16("span", { role: "gridcell", "data-outside": "", className: "aspect-square" }, isoDay(cell));
+                  }
+                  const disabled = isDisabled(cell);
+                  const selected = !outside && isSelected(cell);
+                  const between = !outside && !selected && isInRange(cell);
+                  const previewed = !outside && !selected && isPreview(cell);
+                  const isToday = !outside && sameDay(cell, today);
+                  return /* @__PURE__ */ jsx16(
+                    "button",
+                    {
+                      type: "button",
+                      role: "gridcell",
+                      "data-date": outside ? void 0 : isoDay(cell),
+                      "data-selected": selected ? "" : void 0,
+                      "data-in-range": between ? "" : void 0,
+                      "data-preview": previewed ? "" : void 0,
+                      disabled: outside,
+                      tabIndex: !outside && sameDay(cell, tabbable) ? 0 : -1,
+                      "aria-label": `${cell.year}\uB144 ${cell.month}\uC6D4 ${cell.day}\uC77C`,
+                      "aria-selected": outside ? void 0 : selected,
+                      "aria-disabled": !outside && disabled ? true : void 0,
+                      "aria-current": isToday ? "date" : void 0,
+                      onClick: () => {
+                        if (outside || disabled) return;
+                        focusPending.current = false;
+                        onFocusDay(cell);
+                        onSelect(cell);
+                      },
+                      onKeyDown: (event) => onKeyDown(event, cell),
+                      onMouseEnter: () => onPoint(cell),
+                      onFocus: () => onPoint(cell),
+                      className: cn(
+                        "flex items-center justify-center rounded-[var(--radius-sm)] text-[12px] font-numeric tabular-nums outline-none",
+                        sheet ? "h-[40px] text-[14px]" : "aspect-square",
+                        "focus-visible:shadow-[0_0_0_2px_var(--focus-ring)]",
+                        outside || disabled ? "cursor-default text-text-disabled" : "cursor-pointer text-text-secondary hover:bg-[var(--action-hover)]",
+                        between && "bg-[var(--action-selected)] text-foreground",
+                        previewed && "bg-[var(--action-hover)] text-foreground shadow-[inset_0_1px_0_0_var(--border-strong),inset_0_-1px_0_0_var(--border-strong)]",
+                        isToday && !selected && "border border-[var(--border-strong)]",
+                        selected && "bg-[var(--primary)] font-bold text-[var(--primary-fg)] hover:bg-[var(--primary)]"
+                      ),
+                      children: cell.day
+                    },
+                    isoDay(cell)
+                  );
+                }) }, row))
+              ]
             },
-            onKeyDown: (event) => onKeyDown(event, cell),
-            className: cn(
-              "flex items-center justify-center rounded-[var(--radius-sm)] text-[12px] font-numeric tabular-nums outline-none",
-              sheet ? "h-[40px] text-[14px]" : "aspect-square",
-              "focus-visible:shadow-[0_0_0_2px_var(--focus-ring)]",
-              outside || disabled ? "cursor-default text-text-disabled" : "cursor-pointer text-text-secondary hover:bg-[var(--action-hover)]",
-              between && "bg-[var(--action-selected)] text-foreground",
-              isToday && !selected && "border border-[var(--border-strong)]",
-              selected && "bg-[var(--primary)] font-bold text-[var(--primary-fg)] hover:bg-[var(--primary)]"
-            ),
-            children: cell.day
-          },
-          isoDay(cell)
-        );
-      }) }, index))
-    ] })
+            `${month.year}-${month.month}`
+          );
+        })
+      }
+    )
   ] });
 }
 function TimeColumns({ kind, baseId, editing, hasValue, centerKey, minuteStep, min, max, onChange, onEnter, autoFocus = false }) {
@@ -4328,15 +4462,10 @@ function TimeColumn({ kind, id, name, options, selected, centerKey, onSelect, on
     if (!list || !item) return;
     list.scrollTop = item.offsetTop - list.offsetTop - (list.clientHeight - item.offsetHeight) / 2;
   }, [centerKey]);
-  const pendingFocus = React19.useRef(null);
+  const [focusAsk, setFocusAsk] = React19.useState(0);
   React19.useEffect(() => {
-    if (pendingFocus.current === null) return;
-    listRef.current?.querySelector(`[data-value="${pendingFocus.current}"]`)?.focus();
-    pendingFocus.current = null;
-  });
-  function focusValue(value) {
-    pendingFocus.current = value;
-  }
+    if (focusAsk) listRef.current?.querySelector('[aria-selected="true"]')?.focus();
+  }, [focusAsk]);
   function onKeyDown(event, value) {
     if (event.key === "Enter") {
       event.preventDefault();
@@ -4368,7 +4497,7 @@ function TimeColumn({ kind, id, name, options, selected, centerKey, onSelect, on
     const next = target();
     if (!next || next.value === value) return;
     onSelect(next.value);
-    focusValue(next.value);
+    setFocusAsk((count) => count + 1);
   }
   const sheet = kind === "sheet";
   return /* @__PURE__ */ jsxs14("div", { className: cn("flex flex-col", sheet ? "w-[88px]" : "h-full w-[56px]"), children: [
@@ -5621,7 +5750,7 @@ import * as React30 from "react";
 import * as React29 from "react";
 import { Tabs as TabsPrimitive } from "radix-ui";
 import { cva as cva10 } from "class-variance-authority";
-import { Lock } from "lucide-react";
+import { Lock as Lock2 } from "lucide-react";
 import { Fragment as Fragment10, jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
 var tabsRootVariants = cva10("w-full", {
   variants: {
@@ -5894,7 +6023,7 @@ var Tabs = React29.forwardRef(
                         /* @__PURE__ */ jsx26("span", { className: "sr-only", children: ` ${tab.badge}` })
                       ] }) : null,
                       tab.disabled ? /* @__PURE__ */ jsx26(
-                        Lock,
+                        Lock2,
                         {
                           "aria-hidden": "true",
                           "data-slot": "tabs-disabled-icon",
@@ -8524,8 +8653,19 @@ function RowCheckbox({
   columns,
   selected,
   selectionBlocked,
+  selectionHidden,
   onToggle
 }) {
+  if (selectionHidden) {
+    return /* @__PURE__ */ jsx39(
+      "span",
+      {
+        "aria-hidden": "true",
+        "data-slot": "data-table-row-checkbox-placeholder",
+        className: "block h-[calc(var(--space-4)+var(--space-1))] w-[calc(var(--space-4)+var(--space-1)+var(--space-3))] shrink-0"
+      }
+    );
+  }
   return /* @__PURE__ */ jsx39(
     Checkbox,
     {
@@ -8636,6 +8776,7 @@ function DataTableRowView({
   selectable,
   selected,
   selectionBlocked,
+  selectionHidden,
   visuallySelected,
   href,
   activatable,
@@ -8672,7 +8813,7 @@ function DataTableRowView({
       } : handlers.onClick,
       onKeyDown: handlers.onKeyDown,
       children: [
-        selectable ? /* @__PURE__ */ jsx39("div", { role: "cell", className: "px-[var(--space-4)]", children: /* @__PURE__ */ jsx39(RowCheckbox, { row, rowId, columns, selected, selectionBlocked, onToggle }) }) : null,
+        selectable ? /* @__PURE__ */ jsx39("div", { role: "cell", className: "px-[var(--space-4)]", children: /* @__PURE__ */ jsx39(RowCheckbox, { row, rowId, columns, selected, selectionBlocked, selectionHidden, onToggle }) }) : null,
         columns.map((column, columnIndex) => {
           const align = column.align ?? "left";
           const content = getRenderedCell(row, column);
@@ -8746,6 +8887,7 @@ function DataTableMobileCardView({
   selectable,
   selected,
   selectionBlocked,
+  selectionHidden,
   visuallySelected,
   href,
   activatable,
@@ -8772,7 +8914,7 @@ function DataTableMobileCardView({
   const navigable = linked || activatable;
   const opened = useOpenedOnce(expand?.expanded ?? false);
   const leading = selectable || content.leading != null ? /* @__PURE__ */ jsxs35("span", { className: "flex items-center gap-[var(--space-2)]", children: [
-    selectable ? /* @__PURE__ */ jsx39(RowCheckbox, { row, rowId, columns, selected, selectionBlocked, onToggle }) : null,
+    selectable ? /* @__PURE__ */ jsx39(RowCheckbox, { row, rowId, columns, selected, selectionBlocked, selectionHidden, onToggle }) : null,
     content.leading
   ] }) : void 0;
   let title = content.title;
@@ -9252,9 +9394,19 @@ function DataTableInner({
       mobile: () => mobileListRef.current ?? mobileRef.current
     }
   });
-  const blockedIds = new Set(
-    selectable && isRowSelectable ? data.filter((row) => !isRowSelectable(row)).map((row) => getRowId(row, keyField)) : []
-  );
+  const blockedIds = /* @__PURE__ */ new Set();
+  const hiddenIds = /* @__PURE__ */ new Set();
+  if (selectable && isRowSelectable) {
+    data.forEach((row) => {
+      const verdict = isRowSelectable(row);
+      if (verdict === "hidden") {
+        hiddenIds.add(getRowId(row, keyField));
+      }
+      if (!verdict || verdict === "hidden") {
+        blockedIds.add(getRowId(row, keyField));
+      }
+    });
+  }
   const selectableRowIds = rowIds.filter((id) => !blockedIds.has(id));
   const resolvedSelectedIds = selectedIds ?? /* @__PURE__ */ new Set();
   const selectedCount = selectableRowIds.filter((id) => resolvedSelectedIds.has(id)).length;
@@ -9377,6 +9529,7 @@ function DataTableInner({
   const getItemProps = (row, layout, index) => {
     const rowId = getRowId(row, keyField);
     const selectionBlocked = blockedIds.has(rowId);
+    const selectionHidden = hiddenIds.has(rowId);
     const selected = !selectionBlocked && resolvedSelectedIds.has(rowId);
     const href = rowHref?.(row);
     const linked = Boolean(linkComponent && href);
@@ -9387,6 +9540,7 @@ function DataTableInner({
       selectable,
       selected,
       selectionBlocked,
+      selectionHidden,
       visuallySelected: selected || rowId === activeRowId || rowId === contextMenu?.rowId,
       href,
       activatable: !linked && Boolean(href || onRowClick),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olundot/ui",
-  "version": "0.23.1",
+  "version": "0.25.0",
   "description": "OLUN. shared React UI components built on OLUN design tokens",
   "license": "MIT",
   "keywords": [