sellmate-design-system-react 9.0.0-beta.25 → 9.0.0-beta.26

package/dist/index.cjs

@@ -11506,6 +11506,7 @@ var colWidthFromDef = (c) => {
 };
 var STable = /* @__PURE__ */ react.forwardRef(function STable2({
   columns = [],
+  headerGroups,
   rows = [],
   rowKey = "id",
   selectable = false,
@@ -11553,6 +11554,49 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
     onDenseChange?.(next);
   };
   const visibleCols = react.useMemo(() => columns.filter((c) => c.visible !== false), [columns]);
+  const headerGroupInfo = react.useMemo(() => {
+    if (!headerGroups || headerGroups.length === 0) return null;
+    const indexByName = new Map(visibleCols.map((col, index) => [col.name, index]));
+    const covered = /* @__PURE__ */ new Set();
+    let previousLast = -1;
+    const cells = headerGroups.map((group) => {
+      if (group.columnNames.length === 0) {
+        throw new Error("[STable] headerGroups\uC758 columnNames\uB294 \uBE44\uC5B4 \uC788\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.");
+      }
+      const indexes = group.columnNames.map((name) => {
+        const index = indexByName.get(name);
+        if (index == null) {
+          throw new Error(`[STable] headerGroups\uC5D0 \uC874\uC7AC\uD558\uC9C0 \uC54A\uB294 \uCEEC\uB7FC\uC774 \uC9C0\uC815\uB418\uC5C8\uC2B5\uB2C8\uB2E4: ${name}`);
+        }
+        if (covered.has(name)) {
+          throw new Error(`[STable] headerGroups\uC5D0\uC11C \uCEEC\uB7FC\uC774 \uC911\uBCF5 \uC9C0\uC815\uB418\uC5C8\uC2B5\uB2C8\uB2E4: ${name}`);
+        }
+        covered.add(name);
+        return index;
+      });
+      const first = indexes[0];
+      const last = indexes[indexes.length - 1];
+      if (last - first + 1 !== indexes.length || indexes.some((index, i) => index !== first + i)) {
+        throw new Error(
+          "[STable] headerGroups\uC758 columnNames\uB294 \uC778\uC811\uD55C \uCEEC\uB7FC \uC21C\uC11C\uB85C \uC9C0\uC815\uD574\uC57C \uD569\uB2C8\uB2E4."
+        );
+      }
+      if (first <= previousLast) {
+        throw new Error("[STable] headerGroups\uB294 \uCEEC\uB7FC \uC21C\uC11C\uB300\uB85C \uC9C0\uC815\uD574\uC57C \uD569\uB2C8\uB2E4.");
+      }
+      previousLast = last;
+      return { ...group, firstIndex: first, colSpan: indexes.length };
+    });
+    if (covered.size !== visibleCols.length) {
+      throw new Error("[STable] headerGroups\uC758 columnNames\uAC00 \uBAA8\uB4E0 visible \uCEEC\uB7FC\uC744 \uD3EC\uD568\uD574\uC57C \uD569\uB2C8\uB2E4.");
+    }
+    return {
+      cells,
+      rowSpanNames: new Set(
+        cells.filter((cell) => cell.rowSpan === 2).flatMap((cell) => cell.columnNames)
+      )
+    };
+  }, [headerGroups, visibleCols]);
   const stickyLeft = stickyColumn?.left ?? 0;
   const stickyRight = stickyColumn?.right ?? 0;
   const effectiveRowHeight = rowHeight ?? (innerDense ? DENSE_ROW_HEIGHT : DEFAULT_ROW_HEIGHT);
@@ -11815,6 +11859,35 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
       isRightEdge && scrolledRight && "shadow-[-5px_0_8px_0_rgba(34,34,34,0.1)]"
     );
   };
+  const headerResizeHitArea = (i, key) => {
+    const col = visibleCols[i];
+    if (!headerGroupInfo || !resizable || !col || col.autoWidth || i >= visibleCols.length - 1) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        onMouseDown: (e) => startResize(i, e),
+        className: "absolute inset-y-0 right-0 z-[5] w-[9px] cursor-col-resize",
+        "aria-hidden": true
+      },
+      key
+    );
+  };
+  const headerResizer = (i, key) => {
+    const col = visibleCols[i];
+    if (!resizable || !col || col.autoWidth || i >= visibleCols.length - 1) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        onMouseDown: (e) => startResize(i, e),
+        className: "absolute right-0 top-1/2 z-[5] flex h-[16px] w-[9px] -translate-y-1/2 cursor-col-resize items-center justify-end",
+        "aria-hidden": true,
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-full w-[4px] border-x border-solid border-[color:var(--cmp-table-header-resizingBar-color)]" })
+      },
+      key
+    );
+  };
   const bodyScrollClass = cn(
     "min-h-0 flex-1 overflow-auto border-t border-solid border-[color:var(--cmp-table-border-color)]",
     SCROLLBAR_CLASS,
@@ -11879,145 +11952,179 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                       style: { fontSize: 12 },
                       children: [
                         colgroup,
-                        /* @__PURE__ */ jsxRuntime.jsx("thead", { className: cn(isNoData && "opacity-40"), children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "h-[var(--cmp-table-header-height)] bg-[var(--cmp-table-header-bg)]", children: [
-                          selectable && /* @__PURE__ */ jsxRuntime.jsxs(
-                            "th",
-                            {
-                              className: cn(
-                                // 원본 .th--selected: 48px 고정폭, 항상 left sticky, 체크박스 중앙정렬
-                                // 하단 border는 헤더 래퍼가 연속으로 그리므로 셀에는 두지 않는다.
-                                "sticky left-0 z-[7] bg-[var(--cmp-table-header-bg)] text-center align-middle",
-                                stickyLeft === 0 && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]"
-                              ),
-                              style: {
-                                width: SELECTABLE_COLUMN_WIDTH,
-                                minWidth: SELECTABLE_COLUMN_WIDTH,
-                                maxWidth: SELECTABLE_COLUMN_WIDTH
+                        /* @__PURE__ */ jsxRuntime.jsxs("thead", { className: cn(isNoData && "opacity-40"), children: [
+                          headerGroupInfo && /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "h-[var(--cmp-table-header-height)] bg-[var(--cmp-table-header-bg)]", children: [
+                            selectable && /* @__PURE__ */ jsxRuntime.jsx(
+                              "th",
+                              {
+                                rowSpan: 2,
+                                className: cn(
+                                  "sticky left-0 z-[7] bg-[var(--cmp-table-header-bg)] text-center align-middle",
+                                  stickyLeft === 0 && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]"
+                                ),
+                                style: {
+                                  width: SELECTABLE_COLUMN_WIDTH,
+                                  minWidth: SELECTABLE_COLUMN_WIDTH,
+                                  maxWidth: SELECTABLE_COLUMN_WIDTH
+                                },
+                                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SCheckbox, { value: headerCheck, onValueChange: toggleAll }) })
+                              }
+                            ),
+                            headerGroupInfo.cells.map((group) => /* @__PURE__ */ jsxRuntime.jsxs(
+                              "th",
+                              {
+                                colSpan: group.colSpan,
+                                rowSpan: group.rowSpan,
+                                className: cn(
+                                  "relative border-b border-r border-solid border-[color:var(--cmp-table-border-color)] bg-[var(--cmp-table-header-bg)] px-[16px] text-[12px] font-medium leading-[20px] text-[color:var(--sys-color-fg-primary)]",
+                                  group.firstIndex + group.colSpan === visibleCols.length && "border-r-0",
+                                  group.rowSpan === 2 && "border-b-0",
+                                  group.className
+                                ),
+                                style: { textAlign: group.align ?? "left", ...group.style },
+                                children: [
+                                  group.render ? group.render() : group.label,
+                                  group.rowSpan === 2 && group.colSpan === 1 ? headerResizeHitArea(
+                                    group.firstIndex,
+                                    `group-resizer-${group.columnNames[0]}`
+                                  ) : null
+                                ]
                               },
-                              children: [
-                                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SCheckbox, { value: headerCheck, onValueChange: toggleAll }) }),
-                                /* @__PURE__ */ jsxRuntime.jsx(
-                                  "span",
-                                  {
-                                    "aria-hidden": true,
-                                    className: "pointer-events-none absolute right-0 top-1/2 h-[16px] w-px -translate-y-1/2 bg-[var(--cmp-table-header-resizingBar-color)]"
-                                  }
-                                )
-                              ]
-                            }
-                          ),
-                          visibleCols.map((col, i) => {
-                            const isSortable = !!col.sortable && !col.renderHeader;
-                            const sortDir = isSortable && sort?.name === col.name ? sort.dir : void 0;
-                            return /* @__PURE__ */ jsxRuntime.jsxs(
+                              group.columnNames.join("|")
+                            ))
+                          ] }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "h-[var(--cmp-table-header-height)] bg-[var(--cmp-table-header-bg)]", children: [
+                            selectable && !headerGroupInfo && /* @__PURE__ */ jsxRuntime.jsxs(
                               "th",
                               {
                                 className: cn(
-                                  // 하단 border는 헤더 래퍼가 연속으로 그린다 (거터 영역까지 이어짐).
-                                  // leading-[0]: th 의 스트럿(line-height 만큼의 빈 인라인 박스)을 없앤다.
-                                  // 내용이 inline-flex 라 스트럿이 남아 있으면 라벨보다 큰 컨트롤(정렬 버튼 등)이
-                                  // 들어올 때 줄 상자가 베이스라인 기준으로 늘어나 헤더 높이를 넘기고
-                                  // 세로 가운데도 어긋난다. 글자 줄높이는 아래 th__content 가 다시 준다.
-                                  "relative bg-[var(--cmp-table-header-bg)] px-[16px] text-[12px] font-medium leading-[0] text-[color:var(--sys-color-fg-primary)]",
-                                  stickyInfo(i).isSticky && "z-[6]",
-                                  stickyShadowClass(i),
-                                  col.thClass
+                                  // 원본 .th--selected: 48px 고정폭, 항상 left sticky, 체크박스 중앙정렬
+                                  // 하단 border는 헤더 래퍼가 연속으로 그리므로 셀에는 두지 않는다.
+                                  "sticky left-0 z-[7] bg-[var(--cmp-table-header-bg)] text-center align-middle",
+                                  stickyLeft === 0 && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]"
                                 ),
-                                style: { textAlign: col.align ?? "left", ...cellStyle(i), ...col.thStyle },
-                                "aria-sort": isSortable ? sortDir === "asc" ? "ascending" : sortDir === "desc" ? "descending" : "none" : void 0,
+                                style: {
+                                  width: SELECTABLE_COLUMN_WIDTH,
+                                  minWidth: SELECTABLE_COLUMN_WIDTH,
+                                  maxWidth: SELECTABLE_COLUMN_WIDTH
+                                },
                                 children: [
+                                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SCheckbox, { value: headerCheck, onValueChange: toggleAll }) }),
                                   /* @__PURE__ */ jsxRuntime.jsx(
                                     "span",
                                     {
-                                      className: cn(
-                                        // 원본 th__content: align에 따라 justify-content 적용 (th도 정렬 반영)
-                                        // th 가 leading-[0] 이므로 글자 줄높이는 여기서 준다 (truncate 가
-                                        // overflow-hidden 이라 줄높이가 0이면 라벨이 잘려 사라진다).
-                                        "inline-flex w-full min-w-0 items-center gap-[4px] leading-[20px]",
-                                        col.align === "center" && "justify-center",
-                                        col.align === "right" && "justify-end"
-                                      ),
-                                      children: col.renderHeader ? col.renderHeader(col, i) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: col.label }),
-                                        col.helpText && col.helpText.length > 0 && // 라벨이 좁아져 truncate 되더라도 아이콘까지 함께 줄어들면 안 되므로
-                                        // shrink-0 래퍼로 감싼다 (STooltip 의 className 은 본문 쪽으로 간다).
-                                        // 아이콘·크기·색은 SKeyValueTable 헤더 도움말과 동일하게 맞춘다.
-                                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-                                          STooltip2,
-                                          {
-                                            trigger: "hover",
-                                            icon: "helpOutline",
-                                            iconSize: 12,
-                                            color: "var(--sys-color-fg-success)",
-                                            placement: "top",
-                                            message: col.helpText
-                                          }
-                                        ) }),
-                                        col.editable && /* @__PURE__ */ jsxRuntime.jsx(
-                                          SIcon,
-                                          {
-                                            name: "pageEdit",
-                                            size: 12,
-                                            color: "var(--sys-color-link-accent)",
-                                            label: "\uC218\uC815 \uAC00\uB2A5",
-                                            className: "shrink-0"
-                                          }
-                                        ),
-                                        col.navigable && /* @__PURE__ */ jsxRuntime.jsx(
-                                          SIcon,
-                                          {
-                                            name: "pageMove",
-                                            size: 12,
-                                            color: "var(--sys-color-link-accent)",
-                                            label: "\uB2E4\uB978 \uD654\uBA74\uC73C\uB85C \uC774\uB3D9",
-                                            className: "shrink-0"
-                                          }
-                                        ),
-                                        col.required && // 라벨이 truncate 돼도 필수 표시는 남아야 하므로 shrink-0.
-                                        // 아이콘·크기·색은 SKeyValueTable 헤더 필수 표시와 동일하게 맞춘다.
-                                        /* @__PURE__ */ jsxRuntime.jsx(
-                                          SIcon,
-                                          {
-                                            name: "asterisk",
-                                            size: 12,
-                                            color: "var(--sys-color-fg-accent)",
-                                            className: "shrink-0"
-                                          }
-                                        ),
-                                        isSortable && // 미정렬은 updown 을 default(회색)로 — 정렬할 수 있다는 것 자체가
-                                        // 헤더에 보여야 한다. 정렬 중이면 action 색으로 올려 활성임을 알린다.
-                                        // 라벨이 truncate 돼도 버튼은 남도록 shrink-0.
-                                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-                                          SGhostButton,
-                                          {
-                                            size: "xxs",
-                                            intent: sortDir ? "action" : "default",
-                                            icon: sortDir === "asc" ? "arrowUp" : sortDir === "desc" ? "arrowDown" : "updown",
-                                            ariaLabel: `${col.label} \uC815\uB82C`,
-                                            onClick: () => toggleSort(col)
-                                          }
-                                        ) })
-                                      ] })
-                                    }
-                                  ),
-                                  resizable && !col.autoWidth && i < visibleCols.length - 1 && // 원본 th__resizer: 셀 우측 경계 안쪽 4px 그립(좌우 1px #CCCCCC 라인, 세로 16px).
-                                  // 셀 밖으로 넘치면 다음 셀에 가려져 클릭이 안 먹으므로 translate 없이 셀 내부에 배치.
-                                  // 겉보기 그립은 4px(원본과 동일), 클릭 영역은 9px로 넓혀 사용성 확보.
-                                  /* @__PURE__ */ jsxRuntime.jsx(
-                                    "span",
-                                    {
-                                      onMouseDown: (e) => startResize(i, e),
-                                      className: "absolute right-0 top-1/2 z-[5] flex h-[16px] w-[9px] -translate-y-1/2 cursor-col-resize items-center justify-end",
                                       "aria-hidden": true,
-                                      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-full w-[4px] border-x border-solid border-[color:var(--cmp-table-header-resizingBar-color)]" })
+                                      className: "pointer-events-none absolute right-0 top-1/2 h-[16px] w-px -translate-y-1/2 bg-[var(--cmp-table-header-resizingBar-color)]"
                                     }
                                   )
                                 ]
-                              },
-                              col.name
-                            );
-                          })
-                        ] }) })
+                              }
+                            ),
+                            visibleCols.map((col, i) => {
+                              if (headerGroupInfo?.rowSpanNames.has(col.name)) return null;
+                              const isSortable = !!col.sortable && !col.renderHeader;
+                              const sortDir = isSortable && sort?.name === col.name ? sort.dir : void 0;
+                              return /* @__PURE__ */ jsxRuntime.jsxs(
+                                "th",
+                                {
+                                  className: cn(
+                                    // 하단 border는 헤더 래퍼가 연속으로 그린다 (거터 영역까지 이어짐).
+                                    // leading-[0]: th 의 스트럿(line-height 만큼의 빈 인라인 박스)을 없앤다.
+                                    // 내용이 inline-flex 라 스트럿이 남아 있으면 라벨보다 큰 컨트롤(정렬 버튼 등)이
+                                    // 들어올 때 줄 상자가 베이스라인 기준으로 늘어나 헤더 높이를 넘기고
+                                    // 세로 가운데도 어긋난다. 글자 줄높이는 아래 th__content 가 다시 준다.
+                                    headerGroupInfo && "border-r border-solid border-[color:var(--cmp-table-border-color)]",
+                                    headerGroupInfo && i === visibleCols.length - 1 && "border-r-0",
+                                    "relative bg-[var(--cmp-table-header-bg)] px-[16px] text-[12px] font-medium leading-[0] text-[color:var(--sys-color-fg-primary)]",
+                                    stickyInfo(i).isSticky && "z-[6]",
+                                    stickyShadowClass(i),
+                                    col.thClass
+                                  ),
+                                  style: { textAlign: col.align ?? "left", ...cellStyle(i), ...col.thStyle },
+                                  "aria-sort": isSortable ? sortDir === "asc" ? "ascending" : sortDir === "desc" ? "descending" : "none" : void 0,
+                                  children: [
+                                    /* @__PURE__ */ jsxRuntime.jsx(
+                                      "span",
+                                      {
+                                        className: cn(
+                                          // 원본 th__content: align에 따라 justify-content 적용 (th도 정렬 반영)
+                                          // th 가 leading-[0] 이므로 글자 줄높이는 여기서 준다 (truncate 가
+                                          // overflow-hidden 이라 줄높이가 0이면 라벨이 잘려 사라진다).
+                                          "inline-flex w-full min-w-0 items-center gap-[4px] leading-[20px]",
+                                          col.align === "center" && "justify-center",
+                                          col.align === "right" && "justify-end"
+                                        ),
+                                        children: col.renderHeader ? col.renderHeader(col, i) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: col.label }),
+                                          col.helpText && col.helpText.length > 0 && // 라벨이 좁아져 truncate 되더라도 아이콘까지 함께 줄어들면 안 되므로
+                                          // shrink-0 래퍼로 감싼다 (STooltip 의 className 은 본문 쪽으로 간다).
+                                          // 아이콘·크기·색은 SKeyValueTable 헤더 도움말과 동일하게 맞춘다.
+                                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+                                            STooltip2,
+                                            {
+                                              trigger: "hover",
+                                              icon: "helpOutline",
+                                              iconSize: 12,
+                                              color: "var(--sys-color-fg-success)",
+                                              placement: "top",
+                                              message: col.helpText
+                                            }
+                                          ) }),
+                                          col.editable && /* @__PURE__ */ jsxRuntime.jsx(
+                                            SIcon,
+                                            {
+                                              name: "pageEdit",
+                                              size: 12,
+                                              color: "var(--sys-color-link-accent)",
+                                              label: "\uC218\uC815 \uAC00\uB2A5",
+                                              className: "shrink-0"
+                                            }
+                                          ),
+                                          col.navigable && /* @__PURE__ */ jsxRuntime.jsx(
+                                            SIcon,
+                                            {
+                                              name: "pageMove",
+                                              size: 12,
+                                              color: "var(--sys-color-link-accent)",
+                                              label: "\uB2E4\uB978 \uD654\uBA74\uC73C\uB85C \uC774\uB3D9",
+                                              className: "shrink-0"
+                                            }
+                                          ),
+                                          col.required && // 라벨이 truncate 돼도 필수 표시는 남아야 하므로 shrink-0.
+                                          // 아이콘·크기·색은 SKeyValueTable 헤더 필수 표시와 동일하게 맞춘다.
+                                          /* @__PURE__ */ jsxRuntime.jsx(
+                                            SIcon,
+                                            {
+                                              name: "asterisk",
+                                              size: 12,
+                                              color: "var(--sys-color-fg-accent)",
+                                              className: "shrink-0"
+                                            }
+                                          ),
+                                          isSortable && // 미정렬은 updown 을 default(회색)로 — 정렬할 수 있다는 것 자체가
+                                          // 헤더에 보여야 한다. 정렬 중이면 action 색으로 올려 활성임을 알린다.
+                                          // 라벨이 truncate 돼도 버튼은 남도록 shrink-0.
+                                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+                                            SGhostButton,
+                                            {
+                                              size: "xxs",
+                                              intent: sortDir ? "action" : "default",
+                                              icon: sortDir === "asc" ? "arrowUp" : sortDir === "desc" ? "arrowDown" : "updown",
+                                              ariaLabel: `${col.label} \uC815\uB82C`,
+                                              onClick: () => toggleSort(col)
+                                            }
+                                          ) })
+                                        ] })
+                                      }
+                                    ),
+                                    headerGroupInfo ? headerResizeHitArea(i, `resizer-${col.name}`) : headerResizer(i, `resizer-${col.name}`)
+                                  ]
+                                },
+                                col.name
+                              );
+                            })
+                          ] })
+                        ] })
                       ]
                     }
                   )
@@ -17380,7 +17487,8 @@ var resolveFieldDefault = (field) => {
   if (field.type === "datepicker-day") return todayIso();
   if (field.type === "select") return field.options?.[0]?.value;
   if (field.type === "datepicker-statistics") {
-    const unit = getFieldPresets(field).find((preset) => !preset.custom)?.value;
+    const presets = getFieldPresets(field).filter((preset) => !preset.custom);
+    const unit = presets.some((preset) => preset.value === "day") ? "day" : presets[0]?.value;
     return unit ? createPeriodValue(unit) : void 0;
   }
   return void 0;
@@ -17510,8 +17618,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
   onActiveKeysChange,
   onReset,
   onAddFilter,
-  label = "\uAC80\uC0C9 \uD544\uD130",
-  showLabel = false,
+  label,
   showReset = true,
   disabled = false,
   className,
@@ -17528,6 +17635,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
   const pendingOpenKeyRef = react.useRef(null);
   const triggerRefs = react.useRef(/* @__PURE__ */ new Map());
   const initializedDefaultsRef = react.useRef(/* @__PURE__ */ new Set());
+  const misuseWarningSignatureRef = react.useRef(null);
   const prevOpenKeyRef = react.useRef(null);
   const valuesRef = react.useRef(values);
   valuesRef.current = values;
@@ -17543,14 +17651,19 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
     (current) => groups.every((group) => isGroupSatisfied(group, current)),
     [groups]
   );
+  const isRequiredSatisfied = react.useCallback(
+    (current) => fields.every((field) => !field.required || !isEmptyValue(current[field.key])),
+    [fields]
+  );
   const runSearch = react.useCallback(
     (next) => {
       if (valuesMapEqual(lastSearchedValuesRef.current, next)) return;
       if (!isGroupsValid(next)) return;
+      if (!isRequiredSatisfied(next)) return;
       lastSearchedValuesRef.current = next;
       onSearch?.(next);
     },
-    [isGroupsValid, onSearch]
+    [isGroupsValid, isRequiredSatisfied, onSearch]
   );
   react.useEffect(() => {
     const prevKey = prevOpenKeyRef.current;
@@ -17585,14 +17698,24 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
     });
     if (changed) onValueChange?.({ ...values, ...patch });
   }, [fields, values, onValueChange]);
-  if (typeof console !== "undefined") {
-    const misused = fields.filter((f) => f.defaultValue !== void 0 && !isFixedField(f));
-    if (misused.length > 0) {
+  react.useEffect(() => {
+    if (typeof console === "undefined") return;
+    const misusedKeys = fields.filter((f) => f.defaultValue !== void 0 && !isFixedField(f)).map((f) => f.key);
+    const requiredWithoutDefaultKeys = fields.filter((f) => f.required === true && resolveFieldDefault(f) === void 0).map((f) => f.key);
+    const signature = JSON.stringify([misusedKeys, requiredWithoutDefaultKeys]);
+    if (signature === misuseWarningSignatureRef.current) return;
+    misuseWarningSignatureRef.current = signature;
+    if (misusedKeys.length > 0) {
       console.warn(
-        `[SChipFilter] defaultValue \uB294 fixed\xB7required \uD544\uD130\uC5D0\uC11C\uB9CC \uC4F8 \uC218 \uC788\uC2B5\uB2C8\uB2E4. \uBB34\uC2DC\uD569\uB2C8\uB2E4. (${misused.map((f) => f.key).join(", ")})`
+        `[SChipFilter] defaultValue \uB294 fixed\xB7required \uD544\uD130\uC5D0\uC11C\uB9CC \uC4F8 \uC218 \uC788\uC2B5\uB2C8\uB2E4. \uBB34\uC2DC\uD569\uB2C8\uB2E4. (${misusedKeys.join(", ")})`
       );
     }
-  }
+    if (requiredWithoutDefaultKeys.length > 0) {
+      console.warn(
+        `[SChipFilter] required \uD544\uD130\uC5D0 defaultValue \uAC00 \uC5C6\uC2B5\uB2C8\uB2E4 \u2014 \uC774 \uD0C0\uC785\uC740 \uB0B4\uC7A5 \uAE30\uBCF8\uAC12\uC774 \uC5C6\uC5B4 "\uAC80\uC0C9 \uCD08\uAE30\uD654" \uC2DC \uAC12\uC774 \uBE44\uC6CC\uC9C0\uACE0 \uAC80\uC0C9\uB3C4 \uB9C9\uD799\uB2C8\uB2E4. defaultValue \uB97C \uC9C0\uC815\uD558\uC138\uC694. (${requiredWithoutDefaultKeys.join(", ")})`
+      );
+    }
+  }, [fields]);
   const fixedKeys = fields.filter(isFixedField).map((field) => field.key);
   const resolvedActiveKeys = Array.from(
     /* @__PURE__ */ new Set([...activeKeys ?? internalActiveKeys, ...fixedKeys])
@@ -17660,7 +17783,10 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
     },
     [fields]
   );
-  const validate = react.useCallback(() => invalidGroups.size === 0, [invalidGroups]);
+  const validate = react.useCallback(
+    () => invalidGroups.size === 0 && isRequiredSatisfied(values),
+    [invalidGroups, isRequiredSatisfied, values]
+  );
   react.useImperativeHandle(ref, () => ({ open, reset, validate }), [open, reset, validate]);
   const addField = (key) => {
     const next = [...resolvedActiveKeys, key];
@@ -17697,7 +17823,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
       ),
       style: { ...rootStyle, borderColor: "var(--chipfilter-bar-border)" },
       children: [
-        showLabel && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(STag, { className: "shrink-0", shape: "square", size: "sm", color: "darkblue", label }),
           /* @__PURE__ */ jsxRuntime.jsx(Divider, { top: true })
         ] }),
@@ -18407,6 +18533,10 @@ function InlineDatePresetFilter({
     setSelectedId(preset.value);
     onValueChange(preset.resolve ? preset.resolve() : null);
   };
+  const badgeBorder = disabled ? CHIPFILTER.chipDisabledBorder : warning ? CHIPFILTER.chipWarningBorder : CHIPFILTER.chipAppliedBorder;
+  const badgeBackground = disabled ? CHIPFILTER.chipDisabledBg : CHIPFILTER.chipAppliedBg;
+  const badgeLabelColor = disabled ? CHIPFILTER.chipDisabledText : CHIPFILTER.chipAppliedLabel;
+  const badgeValueColor = disabled ? CHIPFILTER.chipDisabledText : CHIPFILTER.chipAppliedValue;
   const badge = applied && /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
@@ -18414,17 +18544,17 @@ function InlineDatePresetFilter({
       style: {
         minHeight: CHIPFILTER.chipHeight,
         borderRadius: CHIPFILTER.chipRadius,
-        borderColor: warning ? CHIPFILTER.chipWarningBorder : CHIPFILTER.chipAppliedBorder,
-        background: CHIPFILTER.chipAppliedBg,
-        color: CHIPFILTER.chipAppliedLabel,
-        cursor: rangeValue ? "pointer" : void 0
+        borderColor: badgeBorder,
+        background: badgeBackground,
+        color: badgeLabelColor,
+        cursor: rangeValue && !disabled ? "pointer" : void 0
       },
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-bold", children: [
           field.label,
           ":"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", style: { color: CHIPFILTER.chipAppliedValue }, children: displayValue(field, value) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", style: { color: badgeValueColor }, children: displayValue(field, value) }),
         !disabled && showClear && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {