sellmate-design-system-react 0.4.0 → 0.6.0

package/dist/components/SGnb/gnb.config.d.ts

@@ -1,3 +1,4 @@
+import type { SColor } from '../../lib/color';
 import type { SIconName } from '../SIcon';
 import type { STagColor } from '../STag';
 /** 메뉴 스타일: box = 라운드/좁은 들여쓰기, belt = 풀폭 행/넓은 들여쓰기 */
@@ -23,17 +24,13 @@ export interface SGnbMenuItem {
     /** 하위 아이템 (있으면 펼침/접힘 대상) */
     children?: SGnbMenuItem[];
 }
-/**
- * 상단바(header 축). fix → gnbBelt-top-* 토큰, full → gnbBox-* 토큰.
- * 배치까지 이 축이 정한다 — fix 는 GNB 컬럼 안, full 은 레이아웃 전폭.
- */
 export declare const GNB_HEADER: Record<SGnbHeader, {
     topHeight: string;
     topPaddingX: string;
     topGap: string;
     logoHeight: string;
 }>;
-/** 메뉴(type 축). box → --cmp-gnbBox-*, belt → --cmp-gnbBelt-* */
+/** 메뉴(type 축). box → --cmp-gnb-box-*, belt → --cmp-gnb-belt-* (공통 치수는 --cmp-gnb-*) */
 export declare const GNB_MENU: Record<SGnbType, {
     bodyPaddingY: string;
     itemMarginX: string;
@@ -53,8 +50,8 @@ export declare const GNB_MENU: Record<SGnbType, {
     itemLineHeight: number;
 }>;
 /**
- * 색상(color 축). light → --cmp-light-* 색, dark → --cmp-dark-* 색 (gnb colortype 토큰)
- * 상단바 아이콘 색(--cmp-*-top-icon)은 SGhostButton 이 자체 intent 토큰으로 칠한다:
+ * 색상(color 축). light → --cmp-gnb-light-* 색, dark → --cmp-gnb-dark-* 색
+ * 상단바 아이콘 색(--cmp-gnb-*-top-icon)은 SGhostButton 이 자체 intent 토큰으로 칠한다:
  * light → --cmp-ghostButton-default-content, dark → --cmp-ghostButton-inverse-content (값 동일).
  */
 export declare const GNB_COLORS: Record<SGnbColor, {
@@ -67,21 +64,58 @@ export declare const GNB_COLORS: Record<SGnbColor, {
     itemColorHover: string;
     itemColorActive: string;
     itemChevron: string;
+    /** depth1 아이콘 색. 대응 --cmp-gnb-*-item-icon 토큰이 없어 팔레트 키로 직접 지정한다. */
+    itemIcon: SColor;
+    /** 레일 아이템 기본 색(아이콘+라벨). 선택 시엔 itemColorActive 를 쓴다. */
+    railFgDefault: string;
 }>;
 /** 축과 무관한 공통 레이아웃. */
 export declare const GNB_COMMON: {
     /** 접힘 레일 폭. header="full" 은 접으면 메뉴만 사라져 레일이 없으므로 fix 전용. */
     foldWidth: string;
-    /**
-     * 상단바 아이콘 버튼 사이 간격. fix 레일(세로 스택)의 gap·상하 여백에 쓴다.
-     * 레일 전용 여백 토큰이 따로 없어 같은 값(8px)인 이 토큰으로 재해석했다.
-     */
-    buttonGap: string;
 };
+/**
+ * 좌측 레일(useRail) — items 의 첫 depth 를 아이콘+라벨 버튼으로 세우는 1차 내비게이션.
+ * 선택 색은 레일 전용 토큰이 없어 메뉴 아이템의 선택 색(item-bg-selected / item-fg-selected)을 함께 쓴다.
+ */
+export declare const GNB_RAIL: {
+    padding: string;
+    gap: string;
+    itemWidth: string;
+    itemPaddingTop: string;
+    itemPaddingBottom: string;
+    itemRadius: string;
+    itemIcon: string;
+    itemFontSize: number;
+    itemLineHeight: number;
+    itemFontWeight: number;
+    itemFontWeightSelected: number;
+};
+/**
+ * 레일 컬럼 폭 = rail-item-width(44) + rail-padding(12)*2.
+ * 토큰이 CSS 변수라 JS 에서 더할 수 없어 합을 상수로 둔다 (GNB_MENU_WIDTH 와 같은 이유).
+ */
+export declare const GNB_RAIL_WIDTH = 68;
+/**
+ * 접힘/펼침 전환 시간(ms). GNB 폭·메뉴 슬라이드·상단바 페이드와 SLayout 의 메뉴 열 폭이
+ * 이 값을 공유해야 한 덩어리로 미끄러진다.
+ */
+export declare const GNB_FOLD_MS = 200;
+/**
+ * 하위 메뉴 펼침/접힘 전환 시간(ms). 아이템을 눌러 children 이 열리고 닫힐 때
+ * 높이(grid-template-rows 0fr↔1fr)가 이 길이만큼 부드럽게 늘고 줄어든다.
+ * 폴드와 같은 값을 써서 두 모션이 한 언어로 읽히게 한다.
+ */
+export declare const GNB_EXPAND_MS = 200;
 /**
  * 메뉴 고정 폭. 두 header 모두 메뉴는 이 폭으로 좌측에 붙는다(토큰 없음 → 상수).
  * header="full" 에서 SLayout 이 "메뉴 오른쪽 = 페이지" 영역을 잡을 때도 이 값을 쓴다.
  */
 export declare const GNB_MENU_WIDTH = 240;
+/**
+ * useRail 에서 value 를 품은 첫 depth(레일) 아이템의 value.
+ * value 자체가 레일 아이템이면 그 값을, 어디에도 없으면 undefined 를 반환한다.
+ */
+export declare function findGnbRailValue(items: SGnbMenuItem[], value: string): string | undefined;
 /** value 로 선택된 아이템의 조상 value 목록(자기 자신 제외)을 반환 → 자동 펼침용 */
 export declare function findGnbAncestors(items: SGnbMenuItem[], value: string): string[];

package/dist/components/SGnb/index.d.ts

@@ -1,2 +1,2 @@
 export { SGnb, type SGnbProps } from './SGnb';
-export { GNB_HEADER, GNB_MENU, GNB_COLORS, GNB_COMMON, GNB_MENU_WIDTH, findGnbAncestors, type SGnbType, type SGnbHeader, type SGnbColor, type SGnbMenuItem, } from './gnb.config';
+export { GNB_HEADER, GNB_MENU, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, findGnbAncestors, findGnbRailValue, type SGnbType, type SGnbHeader, type SGnbColor, type SGnbMenuItem, } from './gnb.config';

package/dist/components/SKeyValueTable/SKeyValueTable.cjs

@@ -5424,25 +5424,45 @@ function SDatePicker({
     }
   );
 }
+function splitDateTime(v) {
+  if (!v) return { date: null, hour: "00", minute: "00" };
+  const [date = "", time = ""] = v.split(" ");
+  const [hour = "00", minute = "00"] = time.split(":");
+  return { date: date || null, hour, minute };
+}
 function RangeCalendar({
   value,
   selectable,
   maxRange,
+  useTimePicker = false,
   onSelect,
   onPendingStartChange,
   onViewChange
 }) {
   const today = todayStr();
-  const base = value?.[0] || today;
+  const initial = splitDateTime(value?.[0]);
+  const base = initial.date || today;
   const [y, setY] = react.useState(Number(base.split("-")[0]));
   const [m, setM] = react.useState(Number(base.split("-")[1]));
-  const [start, setStart] = react.useState(value?.[0] ?? null);
-  const [end, setEnd] = react.useState(value?.[1] ?? null);
+  const [start, setStart] = react.useState(initial.date);
+  const [end, setEnd] = react.useState(splitDateTime(value?.[1]).date);
   const [hover, setHover] = react.useState(null);
+  const [sH, setSH] = react.useState(initial.hour);
+  const [sM, setSM] = react.useState(initial.minute);
+  const [eH, setEH] = react.useState(splitDateTime(value?.[1]).hour);
+  const [eM, setEM] = react.useState(splitDateTime(value?.[1]).minute);
+  const lastEmitted = react.useRef("");
   react.useEffect(() => {
-    setStart(value?.[0] ?? null);
-    setEnd(value?.[1] ?? null);
-  }, [value]);
+    if (useTimePicker && JSON.stringify(value) === lastEmitted.current) return;
+    const s = splitDateTime(value?.[0]);
+    const e = splitDateTime(value?.[1]);
+    setStart(s.date);
+    setEnd(e.date);
+    setSH(s.hour);
+    setSM(s.minute);
+    setEH(e.hour);
+    setEM(e.minute);
+  }, [value, useTimePicker]);
   const setBase = (ny, nm) => {
     setY(ny);
     setM(nm);
@@ -5486,18 +5506,53 @@ function RangeCalendar({
   const hasRange = !!(rStart && rEnd && rStart !== rEnd);
   const inRange = (d) => !!(rStart && rEnd && d > rStart && d < rEnd);
   const RANGE_BG = "var(--cmp-datepicker-calendar-range-bg)";
+  const pad = (v) => String(Number(v) || 0).padStart(2, "0");
+  const emit = (dateStart, dateEnd, time) => {
+    const t = time ?? { sH, sM, eH, eM };
+    const range = useTimePicker ? [`${dateStart} ${pad(t.sH)}:${pad(t.sM)}`, `${dateEnd} ${pad(t.eH)}:${pad(t.eM)}`] : [dateStart, dateEnd];
+    lastEmitted.current = JSON.stringify(range);
+    onSelect(range);
+  };
   const click = (d) => {
     if (isDisabled(d)) return;
     if (!start || complete || d < start) {
       setStart(d);
       setEnd(null);
       setHover(null);
+      if (useTimePicker) {
+        setSH("00");
+        setSM("00");
+        setEH("23");
+        setEM("59");
+      }
       onPendingStartChange?.(d);
       return;
     }
     setEnd(d);
     onPendingStartChange?.(null);
-    onSelect([start, d]);
+    emit(start, d, useTimePicker ? { sH, sM, eH: "23", eM: "59" } : void 0);
+  };
+  const changeTime = (which, part, raw) => {
+    const digits = raw.replace(/\D/g, "").slice(0, 2);
+    const max = part === "h" ? 23 : 59;
+    const next = digits !== "" && Number(digits) > max ? String(max) : digits;
+    const nextTime = { sH, sM, eH, eM };
+    if (which === "start") nextTime[part === "h" ? "sH" : "sM"] = next;
+    else nextTime[part === "h" ? "eH" : "eM"] = next;
+    setSH(nextTime.sH);
+    setSM(nextTime.sM);
+    setEH(nextTime.eH);
+    setEM(nextTime.eM);
+    if (start && end) emit(start, end, nextTime);
+  };
+  const blurTime = (which, part) => {
+    if (which === "start") {
+      if (part === "h") setSH(pad(sH));
+      else setSM(pad(sM));
+    } else {
+      if (part === "h") setEH(pad(eH));
+      else setEM(pad(eM));
+    }
   };
   const GRID_COLS = "grid grid-cols-[repeat(7,var(--cmp-datepicker-calendar-day-width))]";
   const renderPanel = (gy, gm, isLeft) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--cmp-datepicker-calendar-gap)]", children: [
@@ -5572,35 +5627,120 @@ function RangeCalendar({
       );
     }) })
   ] });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex h-[364px] flex-col gap-[var(--cmp-datepicker-calendar-gap)] rounded-[var(--cmp-datepicker-calendar-radius)] bg-[var(--cmp-datepicker-calendar-bg)] p-[var(--cmp-datepicker-calendar-paddingXY)] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.2)] select-none", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-[var(--cmp-datepicker-calendar-gap)] text-[14px] font-medium leading-[24px]", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SGhostButton, { icon: "chevronLeft", size: "xxs", ariaLabel: "prevYear", onClick: goPrevYear }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex min-w-[40px] items-center justify-center text-center", children: y }),
-        /* @__PURE__ */ jsxRuntime.jsx(SGhostButton, { icon: "chevronRight", size: "xxs", ariaLabel: "nextYear", onClick: goNextYear })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: goToday,
-          className: "absolute right-0 h-[24px] min-w-[37px] cursor-pointer bg-transparent text-center text-[12px] font-medium leading-[24px] text-[color:var(--cmp-datepicker-calendar-day-default-text)] hover:underline",
-          children: "\uC624\uB298"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--cmp-datepicker-calendar-range-panelGap)]", children: [
-      renderPanel(y, m, true),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          className: "w-px shrink-0 self-stretch bg-[var(--cmp-datepicker-calendar-range-divider)]",
-          "aria-hidden": true
-        }
+  const renderTimeSection = (which, date, suffix) => {
+    const active = !!date;
+    const [yy = "", mm = "", dd = ""] = date ? date.split("-") : [];
+    const hour = which === "start" ? sH : eH;
+    const minute = which === "start" ? sM : eM;
+    const num = (n, strip) => active && n !== "" ? strip ? String(Number(n)) : n : "-";
+    const INPUT_CLS = "h-[var(--cmp-datepicker-sm-height)] w-[40px] rounded-[var(--cmp-datepicker-sm-radius)] border border-solid border-[color:var(--cmp-datepicker-border-default)] bg-[var(--cmp-datepicker-bg-default)] text-center text-[12px] font-medium leading-[20px] text-[color:var(--cmp-datepicker-text-default)] outline-none placeholder:text-[color:var(--cmp-datepicker-text-disabled)] focus:border-[color:var(--cmp-datepicker-border-focus)] disabled:cursor-not-allowed";
+    const LABEL = "text-[color:var(--cmp-datepicker-calendar-time-date-label)]";
+    const UNIT = "text-[color:var(--cmp-datepicker-calendar-time-date-unit)]";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "flex flex-1 items-center justify-center gap-[var(--cmp-datepicker-calendar-time-section-gap)] rounded-[var(--cmp-datepicker-calendar-time-radius)] px-[var(--cmp-datepicker-calendar-time-paddingX)] py-[var(--cmp-datepicker-calendar-time-paddingY)] text-[12px] font-medium leading-[20px]",
+          active ? "bg-[var(--cmp-datepicker-calendar-time-bg-selected)]" : "bg-[var(--cmp-datepicker-calendar-time-bg-default)]"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-[var(--cmp-datepicker-calendar-time-date-gap)]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: LABEL, children: num(yy, false) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: UNIT, children: "\uB144" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: LABEL, children: num(mm, true) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: UNIT, children: "\uC6D4" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: LABEL, children: num(dd, true) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: UNIT, children: "\uC77C" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-[var(--cmp-datepicker-calendar-time-unit-gap)]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "text",
+                inputMode: "numeric",
+                maxLength: 2,
+                "aria-label": `${suffix} \uC2DC`,
+                disabled: !active,
+                value: active ? hour : "",
+                placeholder: "--",
+                onChange: (e) => changeTime(which, "h", e.target.value),
+                onBlur: () => blurTime(which, "h"),
+                className: INPUT_CLS
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: LABEL, children: ":" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "text",
+                inputMode: "numeric",
+                maxLength: 2,
+                "aria-label": `${suffix} \uBD84`,
+                disabled: !active,
+                value: active ? minute : "",
+                placeholder: "--",
+                onChange: (e) => changeTime(which, "m", e.target.value),
+                onBlur: () => blurTime(which, "m"),
+                className: INPUT_CLS
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: UNIT, children: suffix })
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "inline-flex flex-col gap-[var(--cmp-datepicker-calendar-gap)] rounded-[var(--cmp-datepicker-calendar-radius)] bg-[var(--cmp-datepicker-calendar-bg)] p-[var(--cmp-datepicker-calendar-paddingXY)] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.2)] select-none",
+        useTimePicker ? "h-auto" : "h-[364px]"
       ),
-      renderPanel(nextMonthYM.year, nextMonthYM.month, false)
-    ] })
-  ] });
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-[var(--cmp-datepicker-calendar-gap)] text-[14px] font-medium leading-[24px]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SGhostButton, { icon: "chevronLeft", size: "xxs", ariaLabel: "prevYear", onClick: goPrevYear }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex min-w-[40px] items-center justify-center text-center", children: y }),
+            /* @__PURE__ */ jsxRuntime.jsx(SGhostButton, { icon: "chevronRight", size: "xxs", ariaLabel: "nextYear", onClick: goNextYear })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: goToday,
+              className: "absolute right-0 h-[24px] min-w-[37px] cursor-pointer bg-transparent text-center text-[12px] font-medium leading-[24px] text-[color:var(--cmp-datepicker-calendar-day-default-text)] hover:underline",
+              children: "\uC624\uB298"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--cmp-datepicker-calendar-range-panelGap)]", children: [
+          renderPanel(y, m, true),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "w-px shrink-0 self-stretch bg-[var(--cmp-datepicker-calendar-range-divider)]",
+              "aria-hidden": true
+            }
+          ),
+          renderPanel(nextMonthYM.year, nextMonthYM.month, false)
+        ] }),
+        useTimePicker && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "h-px w-full bg-[var(--cmp-datepicker-calendar-range-divider)]",
+              "aria-hidden": true
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--cmp-datepicker-calendar-time-gap)]", children: [
+            renderTimeSection("start", start, "\uBD80\uD130"),
+            renderTimeSection("end", end, "\uAE4C\uC9C0")
+          ] })
+        ] })
+      ]
+    }
+  );
 }
 function SDateRangePicker({
   value,
@@ -5610,6 +5750,7 @@ function SDateRangePicker({
   placeholder = "YYYY-MM-DD ~ YYYY-MM-DD",
   selectable,
   maxRange,
+  useTimePicker = false,
   disabled = false,
   width,
   name,
@@ -5653,8 +5794,9 @@ function SDateRangePicker({
     setPendingStart(null);
     onValueChange?.(r);
     if (rules && rules.length > 0) setRuleError(runRules(r, rules));
-    setOpen(false);
+    if (!useTimePicker) setOpen(false);
   };
+  const resolvedPlaceholder = useTimePicker && placeholder === "YYYY-MM-DD ~ YYYY-MM-DD" ? "YYYY-MM-DD HH:mm ~ YYYY-MM-DD HH:mm" : placeholder;
   return /* @__PURE__ */ jsxRuntime.jsx(
     SField,
     {
@@ -5721,7 +5863,7 @@ function SDateRangePicker({
                         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-right", children: startText }),
                         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-[4px]", children: "~" }),
                         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: endText })
-                      ] }) : placeholder
+                      ] }) : resolvedPlaceholder
                     }
                   )
                 ]
@@ -5740,6 +5882,7 @@ function SDateRangePicker({
                     value: value ?? null,
                     selectable,
                     maxRange,
+                    useTimePicker,
                     onSelect: select,
                     onPendingStartChange: setPendingStart,
                     onViewChange