sellmate-design-system-react 9.0.0-beta.83 → 9.0.0-beta.86

package/dist/index.js

@@ -4847,8 +4847,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",
@@ -4958,7 +4972,10 @@ var SField = /* @__PURE__ */ forwardRef(function SField2({
             label !== "" && /* @__PURE__ */ 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 도
@@ -4967,9 +4984,7 @@ var SField = /* @__PURE__ */ forwardRef(function SField2({
                     height: cssLen(labelHeight) ?? s.height,
                     marginRight: s.fieldGap,
                     width: cssLen(labelWidth)
-                  },
-                  fontSize: s.fontSize,
-                  lineHeight: `${s.lineHeight}px`
+                  }
                 },
                 children: [
                   icon && /* @__PURE__ */ jsx(
@@ -18772,7 +18787,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 : ""
                   }
@@ -19500,7 +19516,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 : ""
               }
@@ -21732,32 +21749,57 @@ var SLineChart = /* @__PURE__ */ forwardRef(function SLineChart2({
       `area-gradient-${seriesIndex}`
     )) });
   }, [area, plotted, colorAt, gradientId]);
-  const lines = useMemo(
+  const linePaths = 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__ */ 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__ */ 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__ */ jsxs(
+    "mask",
+    {
+      id: areaMaskId,
+      maskUnits: "userSpaceOnUse",
+      x: 0,
+      y: 0,
+      width: size.width,
+      height: size.height,
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: 0, y: 0, width: size.width, height: size.height, style: { fill: "white" } }),
+        linePaths.map(({ key, d }) => /* @__PURE__ */ 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 } = useMemo(() => {
     const halos = [];
     const dots = [];
@@ -21931,7 +21973,8 @@ var SLineChart = /* @__PURE__ */ forwardRef(function SLineChart2({
                                     }
                                   ),
                                   areaGradients,
-                                  areas,
+                                  areaMask,
+                                  area && /* @__PURE__ */ jsx("g", { mask: `url(#${areaMaskId})`, children: areas }),
                                   lines,
                                   pointHalos,
                                   pointDots,
@@ -22880,6 +22923,7 @@ function SRadioButton({
   value,
   size = "sm",
   disabled = false,
+  readOnly = false,
   name,
   showTooltip = false,
   onValueChange,
@@ -22897,11 +22941,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;
@@ -22913,7 +22959,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,
@@ -22922,8 +22968,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)`,
@@ -22936,9 +22982,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 || ro && !selected ? "var(--cmp-radioButton-content-disabled)" : selected && !ro ? "var(--cmp-radioButton-content-select)" : "var(--cmp-radioButton-content-default)"
               },
               children: o.label
             },