sellmate-design-system-react 9.0.0-beta.57 → 9.0.0-beta.59

package/dist/index.cjs

@@ -15564,7 +15564,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
   react.useEffect(() => {
     setColumnWidths(visibleCols.map(colWidthFromDef));
   }, [colSignature]);
-  const selectedKeys = react.useMemo(() => new Set(selected.map((r) => r[rowKey])), [selected, rowKey]);
+  const selectedKeys = react.useMemo(() => new Set(selected.map((r2) => r2[rowKey])), [selected, rowKey]);
   const rangeAnchorRef = react.useRef(null);
   const shiftPressedRef = react.useRef(false);
   const isRowSelected = react.useCallback(
@@ -15584,7 +15584,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
       const targets = rws.filter(canSelectRow);
       const total = targets.length;
       if (total === 0) return false;
-      const cnt = targets.filter((r) => selectedKeys.has(r[rowKey])).length;
+      const cnt = targets.filter((r2) => selectedKeys.has(r2[rowKey])).length;
       if (cnt === 0) return false;
       if (cnt === total) return true;
       return null;
@@ -15788,16 +15788,16 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
       updateRowSelect: (row) => {
         if (!canSelectRow(row)) return;
         if (selectedKeys.has(row[rowKey]))
-          onSelectedChange?.(selected.filter((r) => r[rowKey] !== row[rowKey]));
+          onSelectedChange?.(selected.filter((r2) => r2[rowKey] !== row[rowKey]));
         else onSelectedChange?.([...selected, row]);
       },
       toggleSelectAll: (checked, rws) => {
         if (checked) {
-          const add = rws.filter((r) => canSelectRow(r) && !selectedKeys.has(r[rowKey]));
+          const add = rws.filter((r2) => canSelectRow(r2) && !selectedKeys.has(r2[rowKey]));
           onSelectedChange?.([...selected, ...add]);
         } else {
-          const keys = new Set(rws.map((r) => r[rowKey]));
-          onSelectedChange?.(selected.filter((r) => !keys.has(r[rowKey])));
+          const keys = new Set(rws.map((r2) => r2[rowKey]));
+          onSelectedChange?.(selected.filter((r2) => !keys.has(r2[rowKey])));
         }
       }
     }),
@@ -15891,10 +15891,10 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
   const toggleAll = () => {
     rangeAnchorRef.current = null;
     if (headerCheck === true) {
-      const targetKeys = new Set(selectAllRows.map((r) => r[rowKey]));
-      onSelectedChange?.(selected.filter((r) => !targetKeys.has(r[rowKey])));
+      const targetKeys = new Set(selectAllRows.map((r2) => r2[rowKey]));
+      onSelectedChange?.(selected.filter((r2) => !targetKeys.has(r2[rowKey])));
     } else {
-      const add = selectAllRows.filter((r) => canSelectRow(r) && !selectedKeys.has(r[rowKey]));
+      const add = selectAllRows.filter((r2) => canSelectRow(r2) && !selectedKeys.has(r2[rowKey]));
       onSelectedChange?.([...selected, ...add]);
     }
   };
@@ -15907,17 +15907,17 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
       const shouldSelect = selectedKeys.has(anchor.key);
       const range = rows.slice(from, to + 1).filter(canSelectRow);
       if (shouldSelect) {
-        const add = range.filter((r) => !selectedKeys.has(r[rowKey]));
+        const add = range.filter((r2) => !selectedKeys.has(r2[rowKey]));
         onSelectedChange?.([...selected, ...add]);
       } else {
-        const keys = new Set(range.map((r) => r[rowKey]));
-        onSelectedChange?.(selected.filter((r) => !keys.has(r[rowKey])));
+        const keys = new Set(range.map((r2) => r2[rowKey]));
+        onSelectedChange?.(selected.filter((r2) => !keys.has(r2[rowKey])));
       }
       return;
     }
     rangeAnchorRef.current = { index, key: row[rowKey] };
     if (selectedKeys.has(row[rowKey]))
-      onSelectedChange?.(selected.filter((r) => r[rowKey] !== row[rowKey]));
+      onSelectedChange?.(selected.filter((r2) => r2[rowKey] !== row[rowKey]));
     else onSelectedChange?.([...selected, row]);
   };
   const isViewSelected = (row) => row != null && (dragPreviewKeys ?? selectedKeys).has(row[rowKey]);
@@ -15925,14 +15925,14 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
     const [a, b] = from <= to ? [from, to] : [to, from];
     return rows.slice(a, b + 1).filter(canSelectRow);
   };
-  const dragPreviewOf = (base, anchor, to) => /* @__PURE__ */ new Set([...base, ...dragRangeRows(anchor, to).map((r) => r[rowKey])]);
+  const dragPreviewOf = (base, anchor, to) => /* @__PURE__ */ new Set([...base, ...dragRangeRows(anchor, to).map((r2) => r2[rowKey])]);
   const startDragSelect = (index, event) => {
     if (event.button !== 0) return;
     const target = event.target;
     if (target?.closest?.(ROW_INTERACTIVE_SELECTOR)) return;
     event.preventDefault();
     const baseRows = event.ctrlKey || event.metaKey ? selected : [];
-    const baseKeys = new Set(baseRows.map((r) => r[rowKey]));
+    const baseKeys = new Set(baseRows.map((r2) => r2[rowKey]));
     dragRef.current = { anchor: index, last: index, baseKeys, baseRows };
     setDragPreviewKeys(dragPreviewOf(baseKeys, index, index));
   };
@@ -15949,7 +15949,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
     if (!d) return;
     dragRef.current = null;
     setDragPreviewKeys(null);
-    const add = dragRangeRows(d.anchor, d.last).filter((r) => !d.baseKeys.has(r[rowKey]));
+    const add = dragRangeRows(d.anchor, d.last).filter((r2) => !d.baseKeys.has(r2[rowKey]));
     onSelectedChange?.([...d.baseRows, ...add]);
   };
   react.useEffect(() => {
@@ -18361,6 +18361,7 @@ function SDateRangePicker({
   disabled = false,
   clearable = false,
   width,
+  maxWidth,
   name,
   rules,
   status,
@@ -18421,10 +18422,10 @@ function SDateRangePicker({
     lineHeight: 20,
     radius: 4
   };
-  const select = (r) => {
+  const select = (r2) => {
     setPendingStart(null);
-    onValueChange?.(r);
-    if (rules && rules.length > 0) setRuleError(runRules(r, rules));
+    onValueChange?.(r2);
+    if (rules && rules.length > 0) setRuleError(runRules(r2, rules));
     if (!showTimePicker) setOpen(false);
   };
   const clear = () => {
@@ -18452,7 +18453,7 @@ function SDateRangePicker({
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
       minWidth: dims.fieldMinW,
-      maxWidth: dims.fieldMaxW,
+      maxWidth: maxWidth ?? dims.fieldMaxW,
       disabled,
       className,
       style,
@@ -18942,6 +18943,7 @@ function SKeyValueTable({
   search = false,
   radius = "default",
   bordered = true,
+  fieldWidth = "auto",
   onChange,
   onSearch,
   className,
@@ -18955,6 +18957,7 @@ function SKeyValueTable({
   });
   const cellHeight = dense ? "var(--cmp-table-body-dense-height)" : "var(--cmp-table-keyValue-height)";
   const cellPadY = dense ? "var(--cmp-table-body-paddingY-dense)" : "var(--cmp-table-keyValue-body-paddingY)";
+  const fillMaxWidth = fieldWidth === "fill" ? { maxWidth: "100%" } : void 0;
   const renderField = (f) => {
     if (f.render) return f.render;
     const opt = { ...f.options ?? {} };
@@ -18976,9 +18979,9 @@ function SKeyValueTable({
       case "switch":
         return /* @__PURE__ */ jsxRuntime.jsx(SSwitch, { ...opt, onValueChange: up });
       case "date-picker":
-        return /* @__PURE__ */ jsxRuntime.jsx(SDatePicker, { width: "100%", ...opt, onValueChange: up });
+        return /* @__PURE__ */ jsxRuntime.jsx(SDatePicker, { width: "100%", ...fillMaxWidth, ...opt, onValueChange: up });
       case "date-range-picker":
-        return /* @__PURE__ */ jsxRuntime.jsx(SDateRangePicker, { width: "100%", ...opt, onValueChange: up });
+        return /* @__PURE__ */ jsxRuntime.jsx(SDateRangePicker, { width: "100%", ...fillMaxWidth, ...opt, onValueChange: up });
       case "file-picker":
         return /* @__PURE__ */ jsxRuntime.jsx(SFilePicker, { width: "100%", ...opt, onValueChange: up });
       case "text":
@@ -18986,25 +18989,54 @@ function SKeyValueTable({
         return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--sys-color-fg-primary)]", children: opt.value ?? "" });
     }
   };
-  const skip = fields.map((row) => row.map(() => false));
-  fields.forEach(
-    (row, r) => row.forEach((f, c) => {
-      const span = f.thRowSpan && f.thRowSpan > 1 ? f.thRowSpan : 1;
-      for (let dr = 1; dr < span; dr++) {
-        const tr = skip[r + dr];
-        if (tr && c < tr.length) tr[c] = true;
-      }
-    })
-  );
+  const grid = fields.map(() => []);
+  const showThAt = fields.map((row) => row.map(() => true));
+  const isLabelCol = [];
+  const labelColWidth = [];
   let maxCols = 0;
-  fields.forEach((row, r) => {
-    let cols = 0;
-    row.forEach((f, c) => {
-      const thCols = f.hideTh ? 0 : skip[r]?.[c] ? 1 : f.thColSpan && f.thColSpan > 1 ? f.thColSpan : 1;
-      const tdCols = f.tdColSpan && f.tdColSpan > 1 ? f.tdColSpan : 1;
-      cols += thCols + tdCols;
+  fields.forEach((row, r2) => {
+    const occupied = grid[r2];
+    let col = 0;
+    const skipOccupied = () => {
+      let sawThSupply = false;
+      while (occupied[col] != null) {
+        if (occupied[col] === "th-supply") sawThSupply = true;
+        col++;
+      }
+      return sawThSupply;
+    };
+    row.forEach((f, i) => {
+      const thRowSpan = f.thRowSpan && f.thRowSpan > 1 ? f.thRowSpan : 1;
+      const thColSpan = f.thColSpan && f.thColSpan > 1 ? f.thColSpan : 1;
+      const tdRowSpan = f.tdRowSpan && f.tdRowSpan > 1 ? f.tdRowSpan : 1;
+      const tdColSpan = f.tdColSpan && f.tdColSpan > 1 ? f.tdColSpan : 1;
+      const thSuppliedAbove = skipOccupied();
+      const showTh = !f.hideTh && !thSuppliedAbove;
+      showThAt[r2][i] = showTh;
+      if (showTh) {
+        isLabelCol[col] = true;
+        if (thColSpan === 1 && f.thWidth != null && labelColWidth[col] == null)
+          labelColWidth[col] = f.thWidth;
+        for (let dr = 1; dr < thRowSpan; dr++) {
+          const kind = dr >= tdRowSpan ? "th-supply" : "blocked";
+          for (let dc = 0; dc < thColSpan; dc++) {
+            const target = grid[r2 + dr];
+            if (target) target[col + dc] = kind;
+          }
+        }
+        col += thColSpan;
+      }
+      skipOccupied();
+      for (let dr = 1; dr < tdRowSpan; dr++) {
+        for (let dc = 0; dc < tdColSpan; dc++) {
+          const target = grid[r2 + dr];
+          if (target) target[col + dc] = "blocked";
+        }
+      }
+      col += tdColSpan;
     });
-    if (cols > maxCols) maxCols = cols;
+    skipOccupied();
+    maxCols = Math.max(maxCols, col, occupied.length);
   });
   const radiusClass = radius === "full" ? "rounded-none" : radius === "useTop" ? "rounded-b-[8px] rounded-t-none" : "rounded-[8px]";
   const frameClass = cn(
@@ -19018,19 +19050,14 @@ function SKeyValueTable({
       className: "w-full border-separate border-spacing-0",
       style: { tableLayout: "fixed", ...style },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("colgroup", { children: Array.from({ length: maxCols }, (_, i) => {
-          if (i % 2 !== 0) return /* @__PURE__ */ jsxRuntime.jsx("col", {}, `col-${i}`);
-          const fieldIdx = i / 2;
-          const fieldThWidth = fields.reduce((found, row) => {
-            if (found != null) return found;
-            return row[fieldIdx]?.thWidth;
-          }, void 0);
-          return /* @__PURE__ */ jsxRuntime.jsx("col", { style: { width: cssLen2(fieldThWidth) ?? "120px" } }, `col-${i}`);
-        }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: fields.map((row, r) => {
-          const cellBorder = r === 0 ? "" : "border-t border-solid border-[color:var(--cmp-table-border-color)]";
+        /* @__PURE__ */ jsxRuntime.jsx("colgroup", { children: Array.from(
+          { length: maxCols },
+          (_, i) => isLabelCol[i] ? /* @__PURE__ */ jsxRuntime.jsx("col", { style: { width: cssLen2(labelColWidth[i]) ?? "120px" } }, `col-${i}`) : /* @__PURE__ */ jsxRuntime.jsx("col", {}, `col-${i}`)
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: fields.map((row, r2) => {
+          const cellBorder = r2 === 0 ? "" : "border-t border-solid border-[color:var(--cmp-table-border-color)]";
           return /* @__PURE__ */ jsxRuntime.jsx("tr", { children: row.map((f, c) => {
-            const showTh = !f.hideTh && !skip[r][c];
+            const showTh = showThAt[r2][c];
             const isReadOnlyCell = f.render == null && (f.type == null || f.type === "text");
             return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
               showTh && /* @__PURE__ */ jsxRuntime.jsx(
@@ -19066,7 +19093,7 @@ function SKeyValueTable({
                     )
                   ] })
                 },
-                `th-${r}-${c}`
+                `th-${r2}-${c}`
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "td",
@@ -19083,10 +19110,10 @@ function SKeyValueTable({
                   style: { height: cellHeight, paddingTop: cellPadY, paddingBottom: cellPadY },
                   children: renderField(f)
                 },
-                `td-${r}-${c}`
+                `td-${r2}-${c}`
               )
-            ] }, `${r}-${c}`);
-          }) }, r);
+            ] }, `${r2}-${c}`);
+          }) }, r2);
         }) })
       ]
     }
@@ -19145,6 +19172,7 @@ function ratioOf(value, scale) {
   return (value - scale.min) / span;
 }
 var AXIS_LABEL_GAP = 8;
+var AXIS_EDGE_PADDING = 24;
 function ChartGrid({ scale, direction, width, height }) {
   const vertical = direction === "vertical";
   return /* @__PURE__ */ jsxRuntime.jsx("g", { "aria-hidden": true, children: scale.ticks.map((tick) => {
@@ -19453,7 +19481,6 @@ var BAR_SIZE_MAX = 80;
 var BAR_GAP = 6;
 var GROUP_PADDING_MIN = 8;
 var GROUP_PADDING_MAX = 24;
-var AXIS_EDGE_PADDING = 24;
 var VALUE_LABEL_GAP = 6;
 var BAR_RADIUS = 8;
 var BAR_OPACITY_DEFAULT = "var(--cmp-chart-bar-opacity-default)";
@@ -19497,23 +19524,23 @@ function barOpacity(hoveredCategory, categoryIndex) {
   return hoveredCategory === categoryIndex ? BAR_OPACITY_HOVER : BAR_OPACITY_DIMMED;
 }
 function barPath(x, y, width, height, direction, negative) {
-  const r = Math.max(0, Math.min(BAR_RADIUS, width / 2, height / 2));
-  if (r === 0) return `M${x} ${y}h${width}v${height}h${-width}Z`;
+  const r2 = Math.max(0, Math.min(BAR_RADIUS, width / 2, height / 2));
+  if (r2 === 0) return `M${x} ${y}h${width}v${height}h${-width}Z`;
   if (direction === "vertical") {
     return negative ? (
       // 아래로 자란다 — 아래쪽 두 모서리가 둥글다
-      `M${x} ${y}h${width}v${height - r}a${r} ${r} 0 0 1 ${-r} ${r}h${-(width - 2 * r)}a${r} ${r} 0 0 1 ${-r} ${-r}Z`
+      `M${x} ${y}h${width}v${height - r2}a${r2} ${r2} 0 0 1 ${-r2} ${r2}h${-(width - 2 * r2)}a${r2} ${r2} 0 0 1 ${-r2} ${-r2}Z`
     ) : (
       // 위로 자란다 — 위쪽 두 모서리가 둥글다
-      `M${x} ${y + height}v${-(height - r)}a${r} ${r} 0 0 1 ${r} ${-r}h${width - 2 * r}a${r} ${r} 0 0 1 ${r} ${r}v${height - r}Z`
+      `M${x} ${y + height}v${-(height - r2)}a${r2} ${r2} 0 0 1 ${r2} ${-r2}h${width - 2 * r2}a${r2} ${r2} 0 0 1 ${r2} ${r2}v${height - r2}Z`
     );
   }
   return negative ? (
     // 왼쪽으로 자란다
-    `M${x + width} ${y}h${-(width - r)}a${r} ${r} 0 0 0 ${-r} ${r}v${height - 2 * r}a${r} ${r} 0 0 0 ${r} ${r}h${width - r}Z`
+    `M${x + width} ${y}h${-(width - r2)}a${r2} ${r2} 0 0 0 ${-r2} ${r2}v${height - 2 * r2}a${r2} ${r2} 0 0 0 ${r2} ${r2}h${width - r2}Z`
   ) : (
     // 오른쪽으로 자란다
-    `M${x} ${y}h${width - r}a${r} ${r} 0 0 1 ${r} ${r}v${height - 2 * r}a${r} ${r} 0 0 1 ${-r} ${r}h${-(width - r)}Z`
+    `M${x} ${y}h${width - r2}a${r2} ${r2} 0 0 1 ${r2} ${r2}v${height - 2 * r2}a${r2} ${r2} 0 0 1 ${-r2} ${r2}h${-(width - r2)}Z`
   );
 }
 var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
@@ -20012,6 +20039,444 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
     }
   );
 });
+
+// src/components/SLineChart/lineChart.config.ts
+var LINE_WIDTH = 2;
+var POINT_RADIUS = 4;
+var POINT_HOVER_RADIUS = 9.5;
+var POINT_HOVER_BORDER_WIDTH = 1;
+var POINT_HOVER_INNER_RADIUS = 5;
+var POINT_HOVER_BG = "var(--cmp-chart-bg)";
+var POINT_HOVER_EXTENT = POINT_HOVER_RADIUS + POINT_HOVER_BORDER_WIDTH / 2;
+var BAND_MIN = 40;
+var VALUE_LABEL_GAP2 = 6;
+var AREA_OPACITY = "var(--opacity-040)";
+var LINE_DATA_LABEL_COLOR = "var(--cmp-chart-bar-dataLabel-color-default)";
+var LINE_DATA_LABEL_TYPO = "typo-body-sm-medium";
+var LINE_DATA_LABEL_TYPO_HOVER = "typo-body-md-bold";
+var r = (value) => Math.round(value * 100) / 100;
+function tangents(points) {
+  const n = points.length;
+  const slopes = [];
+  for (let i = 0; i < n - 1; i += 1) {
+    const dx = points[i + 1].x - points[i].x;
+    slopes.push(dx === 0 ? 0 : (points[i + 1].y - points[i].y) / dx);
+  }
+  const m = new Array(n).fill(0);
+  m[0] = slopes[0] ?? 0;
+  m[n - 1] = slopes[n - 2] ?? 0;
+  for (let i = 1; i < n - 1; i += 1) {
+    const prev = slopes[i - 1];
+    const next = slopes[i];
+    m[i] = prev * next <= 0 ? 0 : (prev + next) / 2;
+  }
+  for (let i = 0; i < n - 1; i += 1) {
+    const slope = slopes[i];
+    if (slope === 0) {
+      m[i] = 0;
+      m[i + 1] = 0;
+      continue;
+    }
+    const a = m[i] / slope;
+    const b = m[i + 1] / slope;
+    const scale = Math.hypot(a, b);
+    if (scale > 3) {
+      m[i] = 3 * a / scale * slope;
+      m[i + 1] = 3 * b / scale * slope;
+    }
+  }
+  return m;
+}
+function commands(points, smooth) {
+  if (points.length < 2) return "";
+  if (!smooth) {
+    return points.slice(1).map((p) => `L${r(p.x)} ${r(p.y)}`).join("");
+  }
+  const m = tangents(points);
+  let path = "";
+  for (let i = 0; i < points.length - 1; i += 1) {
+    const from = points[i];
+    const to = points[i + 1];
+    const dx = (to.x - from.x) / 3;
+    path += `C${r(from.x + dx)} ${r(from.y + m[i] * dx)} ${r(to.x - dx)} ${r(to.y - m[i + 1] * dx)} ${r(to.x)} ${r(to.y)}`;
+  }
+  return path;
+}
+function linePath(points, smooth) {
+  const first = points[0];
+  if (!first || points.length < 2) return "";
+  return `M${r(first.x)} ${r(first.y)}${commands(points, smooth)}`;
+}
+function areaPath(top, bottom, smooth) {
+  const first = top[0];
+  if (!first || top.length < 2 || bottom.length !== top.length) return "";
+  const back = [...bottom].reverse();
+  return `M${r(first.x)} ${r(first.y)}${commands(top, smooth)}L${r(back[0].x)} ${r(back[0].y)}${commands(back, smooth)}Z`;
+}
+var defaultFormat2 = (value) => value.toLocaleString();
+function runsOf(row) {
+  const runs = [];
+  let current = [];
+  for (const point of row) {
+    if (point == null) {
+      if (current.length > 0) runs.push(current);
+      current = [];
+      continue;
+    }
+    current.push(point);
+  }
+  if (current.length > 0) runs.push(current);
+  return runs;
+}
+var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
+  categories,
+  series,
+  curve = "linear",
+  area = false,
+  stacked = false,
+  palette = "default",
+  colors: customColors,
+  max,
+  tickCount = 8,
+  showPoint = true,
+  showValueLabel = false,
+  showLegend = true,
+  legendPosition = "top",
+  showTooltip = true,
+  formatValue = defaultFormat2,
+  height,
+  onPointClick,
+  className,
+  style
+}, ref) {
+  const smooth = curve === "smooth";
+  const { ref: plotRef, size } = useElementSize();
+  const { ref: axisTextRef, size: axisText } = useElementSize();
+  const { ref: axisSampleRef, size: axisSample } = useElementSize();
+  const [hoveredCategory, setHoveredCategory] = react.useState(null);
+  const colorAt = react.useCallback(
+    (seriesIndex) => paletteColor(palette, seriesIndex, customColors),
+    [palette, customColors]
+  );
+  const rows = react.useMemo(() => {
+    const running = categories.map(() => 0);
+    return series.map(
+      (s) => categories.map((_, categoryIndex) => {
+        const raw = s.data[categoryIndex];
+        if (raw == null || !Number.isFinite(raw)) return null;
+        if (!stacked) return { value: raw, base: 0, own: raw };
+        const base = running[categoryIndex];
+        running[categoryIndex] = base + raw;
+        return { value: base + raw, base, own: raw };
+      })
+    );
+  }, [series, categories, stacked]);
+  const scale = react.useMemo(
+    () => niceScale(
+      // 누적은 쌓아 올린 값까지 축에 들어와야 맨 위 선이 눈금 밖으로 나가지 않는다.
+      rows.flatMap((row) => row.flatMap((point) => point == null ? [] : [point.value, point.base])),
+      tickCount,
+      max
+    ),
+    [rows, tickCount, max]
+  );
+  const band = categories.length > 0 ? Math.max(0, size.width - AXIS_EDGE_PADDING * 2) / categories.length : 0;
+  const minPlotWidth = categories.length * BAND_MIN + AXIS_EDGE_PADDING * 2;
+  const totalHeight = height ?? 320;
+  const plotHeight = typeof totalHeight === "number" ? Math.max(0, totalHeight - axisText.height) : `calc(${totalHeight} - ${axisText.height}px)`;
+  const plotted = react.useMemo(() => {
+    if (size.width <= 0 || size.height <= 0) return [];
+    const xOf = (index) => AXIS_EDGE_PADDING + (index + 0.5) * band;
+    const yOf = (value) => size.height - ratioOf(value, scale) * size.height;
+    return rows.map(
+      (row) => row.map(
+        (point, categoryIndex) => point == null ? null : { x: xOf(categoryIndex), y: yOf(point.value), baseY: yOf(point.base), own: point.own }
+      )
+    );
+  }, [rows, size.width, size.height, band, scale]);
+  const legend = showLegend ? /* @__PURE__ */ jsxRuntime.jsx(ChartLegend, { items: series.map((s, i) => ({ name: s.name, color: colorAt(i) })) }) : null;
+  const handleMove = (event) => {
+    if (!showTooltip || band <= 0 || series.length === 0) return;
+    const rect = event.currentTarget.getBoundingClientRect();
+    const along = event.clientX - rect.left - AXIS_EDGE_PADDING;
+    const category = Math.floor(along / band);
+    setHoveredCategory(category >= 0 && category < categories.length ? category : null);
+  };
+  const tooltipItems = hoveredCategory == null ? [] : rows.flatMap((row, seriesIndex) => {
+    const point = row[hoveredCategory];
+    if (point == null) return [];
+    return [
+      {
+        color: colorAt(seriesIndex),
+        label: series[seriesIndex]?.name ?? "",
+        value: formatValue(point.own)
+      }
+    ];
+  });
+  const anchorTop = react.useMemo(() => {
+    if (hoveredCategory == null || plotted.length === 0) return null;
+    let top = Number.POSITIVE_INFINITY;
+    for (const row of plotted) {
+      const point = row[hoveredCategory];
+      if (point != null) top = Math.min(top, point.y);
+    }
+    return Number.isFinite(top) ? top : null;
+  }, [hoveredCategory, plotted]);
+  const { ref: valueLabelRef, metrics: valueLabel } = useSvgTextMetrics();
+  const tooltipAnchor = react.useMemo(() => {
+    if (hoveredCategory == null || anchorTop == null) return null;
+    const left = AXIS_EDGE_PADDING + hoveredCategory * band;
+    const top = showValueLabel ? anchorTop - POINT_RADIUS - VALUE_LABEL_GAP2 + valueLabel.top : anchorTop - POINT_HOVER_EXTENT;
+    return { left, right: left + band, top };
+  }, [hoveredCategory, anchorTop, band, showValueLabel, valueLabel.top]);
+  const categoryLabels = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "aria-hidden": true,
+      className: "relative w-full typo-body-sm-medium text-(--cmp-chart-axis-color)",
+      style: { minWidth: minPlotWidth || void 0 },
+      children: [
+        categories.map((label, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "absolute top-0 -translate-x-1/2 whitespace-nowrap",
+            style: { left: AXIS_EDGE_PADDING + (index + 0.5) * band },
+            children: label
+          },
+          `${label}-${index}`
+        )),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "invisible block whitespace-nowrap", children: "0" })
+      ]
+    }
+  );
+  const areas = react.useMemo(() => {
+    if (!area) return [];
+    return plotted.flatMap(
+      (row, seriesIndex) => runsOf(row).map((run, runIndex) => {
+        const d = areaPath(
+          run,
+          run.map((p) => ({ x: p.x, y: p.baseY })),
+          smooth
+        );
+        if (!d) return null;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            "aria-hidden": true,
+            d,
+            style: { fill: colorAt(seriesIndex), fillOpacity: AREA_OPACITY }
+          },
+          `area-${seriesIndex}-${runIndex}`
+        );
+      })
+    );
+  }, [area, plotted, smooth, colorAt]);
+  const lines = react.useMemo(
+    () => plotted.flatMap(
+      (row, seriesIndex) => runsOf(row).map((run, runIndex) => {
+        const d = linePath(run, smooth);
+        if (!d) return null;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            "aria-hidden": true,
+            d,
+            fill: "none",
+            strokeWidth: LINE_WIDTH,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            style: { stroke: colorAt(seriesIndex) }
+          },
+          `line-${seriesIndex}-${runIndex}`
+        );
+      })
+    ),
+    [plotted, smooth, colorAt]
+  );
+  const { pointHalos, pointDots } = react.useMemo(() => {
+    const halos = [];
+    const dots = [];
+    plotted.forEach((row, seriesIndex) => {
+      row.forEach((point, categoryIndex) => {
+        if (point == null) return;
+        const hovered = hoveredCategory === categoryIndex;
+        if (!showPoint && !hovered) return;
+        const color = colorAt(seriesIndex);
+        const key = `${seriesIndex}-${categoryIndex}`;
+        if (hovered) {
+          halos.push(
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "circle",
+              {
+                "aria-hidden": true,
+                cx: point.x,
+                cy: point.y,
+                r: POINT_HOVER_RADIUS,
+                style: {
+                  fill: POINT_HOVER_BG,
+                  stroke: color,
+                  strokeWidth: POINT_HOVER_BORDER_WIDTH
+                }
+              },
+              `halo-${key}`
+            )
+          );
+        }
+        dots.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx: point.x,
+              cy: point.y,
+              r: hovered ? POINT_HOVER_INNER_RADIUS : POINT_RADIUS,
+              style: { fill: color, cursor: onPointClick ? "pointer" : void 0 },
+              onClick: onPointClick ? () => onPointClick({ seriesIndex, categoryIndex, value: point.own }) : void 0,
+              children: /* @__PURE__ */ jsxRuntime.jsx("title", { children: `${categories[categoryIndex]} ${series[seriesIndex]?.name ?? ""} ${formatValue(point.own)}` })
+            },
+            `dot-${key}`
+          )
+        );
+      });
+    });
+    return { pointHalos: halos, pointDots: dots };
+  }, [plotted, showPoint, hoveredCategory, colorAt, onPointClick, categories, series, formatValue]);
+  const valueLabels = react.useMemo(
+    () => showValueLabel ? plotted.flatMap(
+      (row, seriesIndex) => row.map(
+        (point, categoryIndex) => point == null ? null : /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: point.x,
+            y: point.y - POINT_RADIUS - VALUE_LABEL_GAP2,
+            className: hoveredCategory === categoryIndex ? LINE_DATA_LABEL_TYPO_HOVER : LINE_DATA_LABEL_TYPO,
+            style: { fill: LINE_DATA_LABEL_COLOR },
+            textAnchor: "middle",
+            dominantBaseline: "auto",
+            children: formatValue(point.own)
+          },
+          `label-${seriesIndex}-${categoryIndex}`
+        )
+      )
+    ) : [],
+    [showValueLabel, plotted, hoveredCategory, formatValue]
+  );
+  const inset = { paddingTop: axisSample.height / 2, paddingBottom: axisSample.height / 2 };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ChartFrame,
+    {
+      ref,
+      legend,
+      legendPosition,
+      className,
+      style,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "grid",
+          style: {
+            columnGap: AXIS_LABEL_GAP,
+            // 눈금은 왼쪽 한 줄뿐이다 — 오른쪽에도 적으면 서로 다른 단위처럼 읽힌다.
+            gridTemplateColumns: "max-content 1fr"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: plotHeight, ...inset }, children: /* @__PURE__ */ jsxRuntime.jsx(
+              ChartAxisLabels,
+              {
+                scale,
+                direction: "vertical",
+                format: formatValue,
+                sampleRef: axisSampleRef
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 overflow-x-auto", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "relative min-w-0",
+                  style: { height: plotHeight, minWidth: minPlotWidth || void 0, ...inset },
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      ref: plotRef,
+                      className: "relative h-full w-full",
+                      onMouseMove: handleMove,
+                      onMouseLeave: () => setHoveredCategory(null),
+                      children: [
+                        size.width > 0 && size.height > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+                          "svg",
+                          {
+                            width: size.width,
+                            height: size.height,
+                            role: "img",
+                            "aria-label": `${categories.length}\uAC1C \uD56D\uBAA9, ${series.length}\uAC1C \uACC4\uC5F4 ${stacked ? "\uB204\uC801 " : ""}\uAEBE\uC740\uC120 \uADF8\uB798\uD504`,
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "text",
+                                {
+                                  ref: valueLabelRef,
+                                  "aria-hidden": true,
+                                  x: 0,
+                                  y: 0,
+                                  className: LINE_DATA_LABEL_TYPO_HOVER,
+                                  dominantBaseline: "auto",
+                                  style: { visibility: "hidden" },
+                                  children: "0"
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                ChartGrid,
+                                {
+                                  scale,
+                                  direction: "vertical",
+                                  width: size.width,
+                                  height: size.height
+                                }
+                              ),
+                              hoveredCategory != null && /* @__PURE__ */ jsxRuntime.jsx(
+                                "rect",
+                                {
+                                  "aria-hidden": true,
+                                  x: AXIS_EDGE_PADDING + hoveredCategory * band,
+                                  y: 0,
+                                  width: band,
+                                  height: size.height,
+                                  style: {
+                                    fill: "var(--cmp-chart-barContainer-hover-bg)",
+                                    fillOpacity: "var(--cmp-chart-barContainer-hover-opacity)"
+                                  }
+                                }
+                              ),
+                              areas,
+                              lines,
+                              pointHalos,
+                              pointDots,
+                              valueLabels
+                            ]
+                          }
+                        ),
+                        showTooltip && hoveredCategory != null && tooltipAnchor != null && tooltipItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                          ChartTooltip,
+                          {
+                            title: categories[hoveredCategory] ?? "",
+                            items: tooltipItems,
+                            anchor: tooltipAnchor,
+                            bounds: size,
+                            gapX: { after: -4, before: -4 }
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { ref: axisTextRef, children: categoryLabels })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+});
 var BUTTON_STYLE = {
   default: { color: "secondary" },
   danger: { color: "danger", outline: true },
@@ -21380,14 +21845,14 @@ var TableSizePicker = ({
             onPick(size.rows, size.cols);
           }
         },
-        children: Array.from({ length: TABLE_PICKER_ROWS }, (_, r) => /* @__PURE__ */ jsxRuntime.jsx("div", { role: "row", className: "flex", style: { gap: TABLE_PICKER_GAP }, children: Array.from({ length: TABLE_PICKER_COLS }, (_2, c) => {
-          const on = r < size.rows && c < size.cols;
+        children: Array.from({ length: TABLE_PICKER_ROWS }, (_, r2) => /* @__PURE__ */ jsxRuntime.jsx("div", { role: "row", className: "flex", style: { gap: TABLE_PICKER_GAP }, children: Array.from({ length: TABLE_PICKER_COLS }, (_2, c) => {
+          const on = r2 < size.rows && c < size.cols;
           return /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
               role: "gridcell",
-              "aria-label": `${r + 1}\uD589 ${c + 1}\uC5F4`,
+              "aria-label": `${r2 + 1}\uD589 ${c + 1}\uC5F4`,
               "aria-selected": on,
               tabIndex: -1,
               className: "box-border cursor-pointer rounded-[3px] border border-solid p-0 outline-none",
@@ -21397,13 +21862,13 @@ var TableSizePicker = ({
                 borderColor: on ? "var(--sys-color-bg-accent)" : "var(--sys-color-border-default)",
                 background: on ? "var(--color-bg-accentFaint)" : "transparent"
               },
-              onMouseEnter: () => setSize({ rows: r + 1, cols: c + 1 }),
-              onFocus: () => setSize({ rows: r + 1, cols: c + 1 }),
-              onClick: () => onPick(r + 1, c + 1)
+              onMouseEnter: () => setSize({ rows: r2 + 1, cols: c + 1 }),
+              onFocus: () => setSize({ rows: r2 + 1, cols: c + 1 }),
+              onClick: () => onPick(r2 + 1, c + 1)
             },
             c
           );
-        }) }, r))
+        }) }, r2))
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -25391,6 +25856,7 @@ function STimePicker({
   showMeridiem,
   minuteStep = 1,
   width,
+  maxWidth,
   name,
   rules,
   status,
@@ -25464,7 +25930,7 @@ function STimePicker({
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
       minWidth: dims.fieldMinWidth,
-      maxWidth: dims.fieldMaxWidth,
+      maxWidth: maxWidth ?? dims.fieldMaxWidth,
       disabled,
       className,
       style,
@@ -25856,6 +26322,7 @@ function STimeRangePicker({
   minuteStep = 1,
   rangeOrder = "strict",
   width,
+  maxWidth,
   name,
   rules,
   status,
@@ -25931,7 +26398,7 @@ function STimeRangePicker({
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
       minWidth: effectiveShowMeridiem ? MIDDAY_FIELD_MIN_WIDTH[size] : dims.fieldMinWidth,
-      maxWidth: effectiveShowMeridiem ? MIDDAY_FIELD_MAX_WIDTH[size] : dims.fieldMaxWidth,
+      maxWidth: maxWidth ?? (effectiveShowMeridiem ? MIDDAY_FIELD_MAX_WIDTH[size] : dims.fieldMaxWidth),
       disabled,
       className,
       style,
@@ -26132,6 +26599,7 @@ exports.SLAYOUT_MIN_WIDTH = SLAYOUT_MIN_WIDTH;
 exports.SLauncherListBox = SLauncherListBox;
 exports.SLayout = SLayout;
 exports.SLayoutContext = SLayoutContext;
+exports.SLineChart = SLineChart;
 exports.SLinearProgress = SLinearProgress;
 exports.SList = SList2;
 exports.SListItem = SListItem2;