sellmate-design-system-react 9.0.0-beta.80 → 9.0.0-beta.85

package/dist/index.cjs

@@ -4875,8 +4875,22 @@ function useFormField(field) {
   }, [ctx, name]);
 }
 var FIELD_SIZE = {
-  sm: { height: 28, radius: 4, fieldGap: 12, labelGap: 6, fontSize: 12, lineHeight: 20, icon: 16 },
-  md: { height: 36, radius: 6, fieldGap: 16, labelGap: 8, fontSize: 14, lineHeight: 24, icon: 16 }
+  sm: {
+    height: 28,
+    radius: 4,
+    fieldGap: 12,
+    labelGap: 6,
+    labelTypo: "typo-field-sm-bold",
+    icon: 16
+  },
+  md: {
+    height: 36,
+    radius: 6,
+    fieldGap: 16,
+    labelGap: 8,
+    labelTypo: "typo-field-md-bold",
+    icon: 16
+  }
 };
 var ALIGN = {
   start: "flex-start",
@@ -4986,7 +5000,10 @@ var SField = /* @__PURE__ */ react.forwardRef(function SField2({
             label !== "" && /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
-                className: "flex shrink-0 items-center font-bold text-(--sys-color-field-text-default)",
+                className: cn(
+                  "flex shrink-0 items-center text-(--sys-color-field-text-default)",
+                  s.labelTypo
+                ),
                 style: {
                   // 위에 선 라벨은 제 글줄 높이만 차지한다 — 컨트롤 높이에 맞춰 늘리면
                   // 라벨과 컨트롤 사이가 간격 토큰보다 넓어진다. 줄 세우기용 labelWidth 도
@@ -4995,9 +5012,7 @@ var SField = /* @__PURE__ */ react.forwardRef(function SField2({
                     height: cssLen(labelHeight) ?? s.height,
                     marginRight: s.fieldGap,
                     width: cssLen(labelWidth)
-                  },
-                  fontSize: s.fontSize,
-                  lineHeight: `${s.lineHeight}px`
+                  }
                 },
                 children: [
                   icon && /* @__PURE__ */ jsxRuntime.jsx(
@@ -5170,16 +5185,22 @@ var STextarea = /* @__PURE__ */ react.forwardRef(function STextarea2({
     },
     [ref]
   );
+  const autoSizedRef = react.useRef(false);
+  const styleHeight = textareaStyle?.height;
   react.useLayoutEffect(() => {
     const el = innerRef.current;
     if (el == null) return;
     if (!autogrow) {
-      el.style.height = "";
+      if (autoSizedRef.current) {
+        el.style.height = typeof styleHeight === "number" ? `${styleHeight}px` : styleHeight ?? "";
+        autoSizedRef.current = false;
+      }
       return;
     }
     el.style.height = "auto";
     el.style.height = `${el.scrollHeight}px`;
-  }, [autogrow, maxHeight, minHeight, rows, value]);
+    autoSizedRef.current = true;
+  }, [autogrow, maxHeight, minHeight, rows, styleHeight, value]);
   useFormField({
     name: rest.name,
     validate: () => {
@@ -18794,7 +18815,8 @@ function SCalendar({
                     className: cn(
                       "flex h-[var(--cmp-datepicker-calendar-day-circle-size)] w-[var(--cmp-datepicker-calendar-day-circle-size)] items-center justify-center rounded-[var(--cmp-datepicker-calendar-day-circle-radius)] border border-solid border-transparent text-[14px] leading-[var(--cmp-datepicker-calendar-day-circle-size)]",
                       selected ? "bg-[var(--cmp-datepicker-calendar-day-select-bg)] text-[color:var(--cmp-datepicker-calendar-day-select-text)]" : disabled ? "text-[color:var(--cmp-datepicker-calendar-day-disabled-text)]" : "text-[color:var(--cmp-datepicker-calendar-day-default-text)] hover:border-[color:var(--cmp-datepicker-calendar-day-hover-border)] hover:text-[color:var(--cmp-datepicker-calendar-day-hover-text)]",
-                      isToday && !disabled && "font-bold"
+                      // 오늘: datepicker.calendar.day.typography.bold (→ typography.field.md.bold) 의 굵기
+                      isToday && !disabled && "font-semibold"
                     ),
                     children: cell.inCurrentMonth ? cell.day : ""
                   }
@@ -19522,7 +19544,8 @@ function RangeCalendar({
                   "relative z-[1] flex h-[var(--cmp-datepicker-calendar-day-circle-size)] w-[var(--cmp-datepicker-calendar-day-circle-size)] items-center justify-center rounded-[var(--cmp-datepicker-calendar-day-circle-radius)] border border-solid border-transparent bg-transparent text-[14px]",
                   !cell.inCurrentMonth ? "invisible pointer-events-none" : disabled ? "cursor-not-allowed" : "cursor-pointer",
                   isEdge ? "bg-[var(--cmp-datepicker-calendar-day-select-bg)] text-[color:var(--cmp-datepicker-calendar-day-select-text)]" : disabled ? "text-[color:var(--cmp-datepicker-calendar-day-disabled-text)]" : "text-[color:var(--cmp-datepicker-calendar-day-default-text)] hover:border-[color:var(--cmp-datepicker-calendar-day-hover-border)] hover:text-[color:var(--cmp-datepicker-calendar-day-hover-text)]",
-                  isToday && !disabled && "font-bold"
+                  // 오늘: datepicker.calendar.day.typography.bold (→ typography.field.md.bold) 의 굵기
+                  isToday && !disabled && "font-semibold"
                 ),
                 children: cell.inCurrentMonth ? cell.day : ""
               }
@@ -21754,32 +21777,57 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
       `area-gradient-${seriesIndex}`
     )) });
   }, [area, plotted, colorAt, gradientId]);
-  const lines = react.useMemo(
+  const linePaths = react.useMemo(
     () => plotted.flatMap(
-      (row, seriesIndex) => runsOf(row).map((run, runIndex) => {
+      (row, seriesIndex) => runsOf(row).flatMap((run, runIndex) => {
         const d = linePath(run, smooth);
-        if (!d) return null;
-        return /* @__PURE__ */ jsxRuntime.jsx(
+        return d ? [{ key: `${seriesIndex}-${runIndex}`, seriesIndex, d }] : [];
+      })
+    ),
+    [plotted, smooth]
+  );
+  const strokeShape = {
+    strokeWidth: LINE_WIDTH,
+    strokeDasharray: lineStyle === "dashed" ? LINE_DASH : void 0
+  };
+  const lines = linePaths.map(({ key, seriesIndex, d }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      "aria-hidden": true,
+      d,
+      fill: "none",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      style: { ...strokeShape, stroke: colorAt(seriesIndex), strokeOpacity: LINE_OPACITY }
+    },
+    `line-${key}`
+  ));
+  const areaMaskId = `${gradientId}-area-mask`;
+  const areaMask = area ? /* @__PURE__ */ jsxRuntime.jsxs(
+    "mask",
+    {
+      id: areaMaskId,
+      maskUnits: "userSpaceOnUse",
+      x: 0,
+      y: 0,
+      width: size.width,
+      height: size.height,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 0, y: 0, width: size.width, height: size.height, style: { fill: "white" } }),
+        linePaths.map(({ key, d }) => /* @__PURE__ */ jsxRuntime.jsx(
           "path",
           {
-            "aria-hidden": true,
             d,
             fill: "none",
             strokeLinecap: "round",
             strokeLinejoin: "round",
-            style: {
-              stroke: colorAt(seriesIndex),
-              strokeWidth: LINE_WIDTH,
-              strokeOpacity: LINE_OPACITY,
-              strokeDasharray: lineStyle === "dashed" ? LINE_DASH : void 0
-            }
+            style: { ...strokeShape, stroke: "black" }
           },
-          `line-${seriesIndex}-${runIndex}`
-        );
-      })
-    ),
-    [plotted, smooth, colorAt, lineStyle]
-  );
+          `mask-${key}`
+        ))
+      ]
+    }
+  ) : null;
   const { pointHalos, pointDots } = react.useMemo(() => {
     const halos = [];
     const dots = [];
@@ -21953,7 +22001,8 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
                                     }
                                   ),
                                   areaGradients,
-                                  areas,
+                                  areaMask,
+                                  area && /* @__PURE__ */ jsxRuntime.jsx("g", { mask: `url(#${areaMaskId})`, children: areas }),
                                   lines,
                                   pointHalos,
                                   pointDots,
@@ -22649,10 +22698,13 @@ var SKELETON_TYPES = [
   "switch"
 ];
 var SKELETON_ANIMATIONS = ["wave", "pulse", "fade", "none"];
+var SKELETON_MODES = ["light", "dark"];
 var SKELETON_TYPE_CONFIG = {
-  rect: { radius: "var(--sys-radius-control-sm)" },
+  rect: { radius: "var(--cmp-skeleton-radius)" },
   circle: { width: "48px", height: "48px", radius: "50%" },
-  text: { radius: "var(--sys-radius-control-sm)" },
+  // 세로를 절반(scale-y-50)으로 줄여 그리므로 세로 반지름을 두 배로 줘야 모서리가 둥글게 남는다.
+  // 칠하는 높이가 한 줄의 절반이라 스켈레톤 radius 는 알약처럼 보여 한 단계 작은 값을 쓴다
+  text: { radius: "var(--radius-2) / calc(var(--radius-2) * 2)" },
   button: {
     width: "90px",
     height: "var(--cmp-button-sm-height)",
@@ -22676,13 +22728,18 @@ var SKELETON_TYPE_CONFIG = {
     radius: "var(--cmp-switch-radius)"
   }
 };
+var wave = (alpha) => `linear-gradient(90deg, transparent, color-mix(in srgb, var(--cmp-skeleton-highlight) ${alpha}, transparent), transparent)`;
 var SKELETON_COLORS = {
-  /** Quasar rgba(0,0,0,.12) ≈ 흰 바탕 위 #E1E1E1 */
-  bg: "var(--sys-color-disabled-bg)",
-  /** Quasar rgba(0,0,0,.05) 테두리 — 배경보다 한 단계 짙게 */
-  border: "color-mix(in srgb, var(--sys-color-border-strong) 25%, transparent)",
-  /** Quasar rgba(255,255,255,.5) 하이라이트 띠 */
-  wave: "linear-gradient(90deg, transparent, color-mix(in srgb, var(--sys-color-bg-frame) 50%, transparent), transparent)"
+  light: {
+    bg: "color-mix(in srgb, var(--cmp-skeleton-bg-dark) var(--cmp-skeleton-opacity), transparent)",
+    /** Quasar rgba(255,255,255,.5) 하이라이트 띠 */
+    wave: wave("50%")
+  },
+  dark: {
+    bg: "color-mix(in srgb, var(--cmp-skeleton-bg-light) var(--cmp-skeleton-opacity), transparent)",
+    /** 어두운 면에서 50% 흰 띠는 너무 튀어 바탕과 같은 투명도로 낮춘다 (Quasar dark 도 .1) */
+    wave: wave("var(--cmp-skeleton-opacity)")
+  }
 };
 var ANIMATION_CLASS = {
   pulse: "animate-skeleton-pulse",
@@ -22691,10 +22748,10 @@ var ANIMATION_CLASS = {
 var toCss = (v) => typeof v === "number" ? `${v}px` : v;
 var SSkeleton = /* @__PURE__ */ react.forwardRef(function SSkeleton2({
   type = "rect",
+  mode = "light",
   animation = "wave",
   animationSpeed = 1500,
   square = false,
-  bordered = false,
   size,
   width,
   height,
@@ -22703,6 +22760,7 @@ var SSkeleton = /* @__PURE__ */ react.forwardRef(function SSkeleton2({
   ...props
 }, ref) {
   const t = SKELETON_TYPE_CONFIG[type];
+  const colors = SKELETON_COLORS[mode];
   const duration = `${animationSpeed}ms`;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -22714,7 +22772,6 @@ var SSkeleton = /* @__PURE__ */ react.forwardRef(function SSkeleton2({
         "box-border cursor-wait select-none",
         // text 는 transform 이 아니라 scale 속성으로 줄여서 pulse 의 transform 애니메이션과 겹치지 않는다
         type === "text" && "scale-y-50",
-        bordered && "border border-solid",
         animation === "wave" && "relative overflow-hidden",
         animation !== "wave" && animation !== "none" && ANIMATION_CLASS[animation],
         "motion-reduce:animate-none",
@@ -22724,8 +22781,7 @@ var SSkeleton = /* @__PURE__ */ react.forwardRef(function SSkeleton2({
         width: toCss(width ?? size) ?? t.width,
         height: toCss(height ?? size) ?? t.height,
         borderRadius: square ? 0 : t.radius,
-        background: SKELETON_COLORS.bg,
-        borderColor: bordered ? SKELETON_COLORS.border : void 0,
+        background: colors.bg,
         animationDuration: animation === "pulse" || animation === "fade" ? duration : void 0,
         ...style
       },
@@ -22735,13 +22791,81 @@ var SSkeleton = /* @__PURE__ */ react.forwardRef(function SSkeleton2({
           "span",
           {
             className: "absolute inset-0 animate-skeleton-wave motion-reduce:hidden",
-            style: { background: SKELETON_COLORS.wave, animationDuration: duration }
+            style: {
+              background: colors.wave,
+              animationDuration: duration,
+              transform: "translateX(-100%)"
+            }
           }
         )
       ]
     }
   );
 });
+var STimelineImpl = /* @__PURE__ */ react.forwardRef(function STimeline({ groups, emptyText = "\uB0B4\uC5ED\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.", className, ...rest }, ref) {
+  const filled = groups.filter((group) => group.entries.length > 0);
+  if (filled.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "typo-body-sm-default flex h-full items-center justify-center text-[color:var(--cmp-timeline-empty-color)]",
+          className
+        ),
+        ...rest,
+        children: emptyText
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex flex-col", className), ...rest, children: filled.map((group, groupIndex) => {
+    const isLastGroup = groupIndex === filled.length - 1;
+    return /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typo-body-sm-bold py-[var(--cmp-timeline-heading-paddingY)] text-[color:var(--cmp-timeline-heading-color)]", children: group.heading }),
+      /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "m-0 flex list-none flex-col p-0", children: group.entries.map((entry, entryIndex) => {
+        const isFirstEntry = entryIndex === 0;
+        const isLastEntry = entryIndex === group.entries.length - 1;
+        return (
+          // 시각 열 너비는 토큰이 없다 — 줄마다 grid 가 따로라 auto 로 두면 열이 어긋나므로 고정한다.
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "li",
+            {
+              className: "grid grid-cols-[52px_var(--cmp-timeline-rail-dot-size)_minmax(0,1fr)]",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typo-body-sm-medium whitespace-nowrap pr-[var(--cmp-timeline-entry-horizontalGap)] text-right text-[color:var(--cmp-timeline-time-color)]", children: entry.time }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-hidden": true, className: "relative", children: [
+                  !(isLastGroup && isLastEntry) && /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "absolute left-1/2 w-[var(--cmp-timeline-rail-line-width)] -translate-x-1/2 bg-[var(--cmp-timeline-rail-line-color)]",
+                        isFirstEntry && groupIndex > 0 ? "top-0" : "top-[14px]",
+                        isLastEntry ? "bottom-0" : "bottom-[-8px]"
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-0 top-[6px] size-[var(--cmp-timeline-rail-dot-size)] rounded-[var(--cmp-timeline-rail-dot-radius)] bg-[var(--cmp-timeline-rail-dot-bg)]" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "min-w-0 pl-[var(--cmp-timeline-entry-horizontalGap)]",
+                      !isLastEntry && "pb-[var(--cmp-timeline-entry-gap)]"
+                    ),
+                    children: entry.content
+                  }
+                )
+              ]
+            },
+            entry.key
+          )
+        );
+      }) })
+    ] }, group.key ?? groupIndex);
+  }) });
+});
+var STimeline2 = /* @__PURE__ */ withDisplayName(STimelineImpl, "STimeline");
 var SForm = /* @__PURE__ */ react.forwardRef(function SForm2({ formClassName, onSubmit, onValidationError, children, className, style }, ref) {
   const formRef = react.useRef(null);
   const fieldsRef = react.useRef(/* @__PURE__ */ new Set());
@@ -22827,6 +22951,7 @@ function SRadioButton({
   value,
   size = "sm",
   disabled = false,
+  readOnly = false,
   name,
   showTooltip = false,
   onValueChange,
@@ -22844,11 +22969,13 @@ function SRadioButton({
       {
         role: "radiogroup",
         "aria-disabled": disabled,
+        "aria-readonly": readOnly || void 0,
         className: cn("inline-flex isolate", className),
         style,
         children: options.map((o, i) => {
           const selected = o.value === value;
           const od = disabled || o.disabled;
+          const ro = readOnly && !od;
           const first = i === 0;
           const last = i === options.length - 1;
           const tooltip = showTooltip && o.tooltip ? o.tooltip : void 0;
@@ -22860,7 +22987,7 @@ function SRadioButton({
               name,
               "aria-checked": selected,
               disabled: od,
-              onClick: () => !od && !selected && onValueChange?.(o.value),
+              onClick: () => !od && !ro && !selected && onValueChange?.(o.value),
               onMouseEnter: tooltip ? () => setHoveredValue(o.value) : void 0,
               onMouseLeave: tooltip ? () => setHoveredValue(null) : void 0,
               onFocus: tooltip ? () => setHoveredValue(o.value) : void 0,
@@ -22869,8 +22996,8 @@ function SRadioButton({
                 "relative box-border grow inline-flex items-center justify-center whitespace-nowrap border border-solid font-medium transition-colors",
                 first ? "" : "-ml-px",
                 selected ? "z-10" : "",
-                !od && !selected && "hover:!bg-[var(--cmp-radioButton-bg-hover)] hover:!text-[color:var(--cmp-radioButton-content-hover)] hover:!border-[color:var(--cmp-radioButton-bg-hover)] hover:z-10",
-                od ? "cursor-not-allowed" : "cursor-pointer"
+                !od && !ro && !selected && "hover:!bg-[var(--cmp-radioButton-bg-hover)] hover:!text-[color:var(--cmp-radioButton-content-hover)] hover:!border-[color:var(--cmp-radioButton-bg-hover)] hover:z-10",
+                od ? "cursor-not-allowed" : ro ? "cursor-default" : "cursor-pointer"
               ),
               style: {
                 height: `var(--cmp-radioButton-${size}-height)`,
@@ -22883,9 +23010,9 @@ function SRadioButton({
                   last ? s.radius : "0",
                   first ? s.radius : "0"
                 ].join(" "),
-                background: od ? "var(--cmp-radioButton-bg-disabled)" : "var(--cmp-radioButton-bg-default)",
-                borderColor: od ? "var(--cmp-radioButton-border-disabled)" : selected ? "var(--cmp-radioButton-border-select)" : "var(--cmp-radioButton-border-default)",
-                color: od ? "var(--cmp-radioButton-content-disabled)" : selected ? "var(--cmp-radioButton-content-select)" : "var(--cmp-radioButton-content-default)"
+                background: od ? "var(--cmp-radioButton-bg-disabled)" : ro ? "var(--cmp-radioButton-bg-readOnly)" : "var(--cmp-radioButton-bg-default)",
+                borderColor: od ? "var(--cmp-radioButton-border-disabled)" : selected ? ro ? "var(--cmp-radioButton-border-readOnly)" : "var(--cmp-radioButton-border-select)" : "var(--cmp-radioButton-border-default)",
+                color: od ? "var(--cmp-radioButton-content-disabled)" : selected && !ro ? "var(--cmp-radioButton-content-select)" : "var(--cmp-radioButton-content-default)"
               },
               children: o.label
             },
@@ -28598,6 +28725,7 @@ exports.SIcon = SIcon;
 exports.SImage = SImage;
 exports.SInput = SInput;
 exports.SKELETON_ANIMATIONS = SKELETON_ANIMATIONS;
+exports.SKELETON_MODES = SKELETON_MODES;
 exports.SKELETON_TYPES = SKELETON_TYPES;
 exports.SKELETON_TYPE_CONFIG = SKELETON_TYPE_CONFIG;
 exports.SKeyValueTable = SKeyValueTable;
@@ -28648,6 +28776,7 @@ exports.STextLink = STextLink;
 exports.STextarea = STextarea;
 exports.STimePicker = STimePicker;
 exports.STimeRangePicker = STimeRangePicker;
+exports.STimeline = STimeline2;
 exports.SToast = SToast;
 exports.SToastContainer = SToastContainer;
 exports.SToggle = SToggle;