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

package/AGENTS.md

@@ -1418,6 +1418,7 @@ tableRef.current.scrollToRow(row);                  // 복원
 | **`default`**(기본) | `#888888` | **대부분** — 닫기, 복사, 드래그, 펼치기, 행 삭제 |
 | `action` | `#025497` | 진입·추가처럼 **의미 있는 조작** — 편집 모드 진입, 항목 추가, 행 수정 |
 | `subAction` | `#5CB0F3` | `action` 다음 계층 — `action`·`default` 사이의 중의적 의미 + 부분 강조 |
+| `complete` | `#00973C` | **완료**를 나타내는 조작 — 완료 처리(`check`) 등 |
 | `danger` | `#E30000` | **되돌릴 수 없는 삭제** |
 | `inverse` | `#FFFFFF` | 어두운 배경 위 (GNB 접기 등) |
 
@@ -3357,14 +3358,17 @@ export default function SalesDashboardPage() {
             <SCard key={s.label} bordered className="flex flex-col gap-sd-4 p-sd-16">
               <span className="typo-body-sm-default text-fg-secondary">{s.label}</span>
               {/* 카드 안의 메인 수치는 typo-heading-xl — 제목에는 쓰지 않는다 (§2-1) */}
-              <span className="typo-heading-xl">
+              <span className="typo-heading-xl text-right">
                 {s.value.toLocaleString()}
                 {s.unit}
               </span>
-              {/* 증감은 숫자 앞 부호와 색으로 함께 말한다 — 색만으로 뜻을 싣지 않는다 */}
-              <span className="typo-body-sm-default text-fg-tertiary">
+              {/* 증감은 숫자 앞 부호와 색으로 함께 말한다 — 색만으로 뜻을 싣지 않는다.
+                  문장 안 강조라 굵기는 typo-body-sm-medium 프리셋으로 준다 (§2-1) */}
+              <span className="typo-body-sm-default text-right text-fg-tertiary">
                 전기간 대비{' '}
-                <span className={s.change >= 0 ? 'text-fg-success' : 'text-fg-danger'}>
+                <span
+                  className={`typo-body-sm-medium ${s.change >= 0 ? 'text-fg-success' : 'text-fg-danger'}`}
+                >
                   {s.change >= 0 ? '+' : ''}
                   {s.change.toLocaleString()}%
                 </span>
@@ -3375,16 +3379,20 @@ export default function SalesDashboardPage() {
 
         {/* 차트는 섹션 카드에 담는다. 차트 이름은 카드의 title 이 맡으므로 차트의 title 은 주지 않는다 —
             둘 다 주면 제목이 두 줄이 된다. 단위(unit)는 차트가 오른쪽 위에 적는다.
-            한 페이지에 섹션 카드가 여럿이라 marker 를 켠다 (§4-5) */}
+            한 페이지 안의 카드 헤더(titleSize·배경)는 전부 같게 간다 (§4-5) */}
         {/* 날짜순 흐름이라 선 — 순서가 있는 항목의 추이 (§3-0 B). 항목(날짜)이 많아 한 줄을 다 쓴다 */}
-        <SSectionHeaderCard title="일별 매출" marker>
+        <SSectionHeaderCard
+          title="일별 매출"
+          titleSize="sm"
+          headerClassName="bg-bg-neutralBright!"
+          padding="none"
+        >
           <SLineChart
             categories={daily.categories}
             series={[{ name: '매출', data: daily.data }]}
             unit="원"
             area
             showLegend={false}
-            height={280}
             formatValue={won}
             // 차트는 "어느 쪽이 큰가" 까지만 답한다 — 정확한 값은 그날의 주문 목록에서 본다
             onPointClick={p => navigate(`/orders?date=${daily.dates[p.categoryIndex]}`)}
@@ -3393,26 +3401,36 @@ export default function SalesDashboardPage() {
 
         <div className="grid grid-cols-2 gap-sd-12">
           {/* 합계는 도넛 구멍이 아니라 카드 subtitle 에 적는다 (§3-0 B) */}
-          <SSectionHeaderCard title="판매처별 비중" marker subtitle={`합계 ${won(channelTotal)}`}>
+          <SSectionHeaderCard
+            title="판매처별 비중"
+            titleSize="sm"
+            subtitle={`합계 ${won(channelTotal)}`}
+            padding="none"
+            headerClassName="bg-bg-neutralBright!"
+          >
             <SDonutChart
               data={channelShare}
               legendPosition="bottom"
               formatValue={won}
               // 그림은 폭만큼의 정사각형이다 — 칸을 다 채우면 옆 카드보다 훨씬 길어지므로
               // 화면 고유 치수로 폭을 묶는다 (§1-2)
-              className="mx-auto max-w-[280px]"
+              className="mx-auto max-w-[310px]"
             />
           </SSectionHeaderCard>
 
           {/* 항목끼리 크기를 견주므로 막대. 상품명이 길어 가로 막대로 눕힌다 */}
-          <SSectionHeaderCard title="상품별 판매량 TOP 5" marker>
+          <SSectionHeaderCard
+            title="상품별 판매량 TOP 5"
+            titleSize="sm"
+            padding="none"
+            headerClassName="bg-bg-neutralBright!"
+          >
             <SBarChart
               categories={topProducts.categories}
               series={[{ name: '판매량', data: topProducts.data }]}
               unit="개"
               direction="horizontal"
               showLegend={false}
-              height={320}
               formatValue={v => `${v.toLocaleString()}개`}
             />
           </SSectionHeaderCard>

package/dist/components/SGhostButton/README.md

@@ -38,7 +38,8 @@ export type SGhostButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
 ### SGhostButtonIntent
 
 ```ts
-export type SGhostButtonIntent = 'default' | 'danger' | 'action' | 'subAction' | 'inverse';
+export type SGhostButtonIntent =
+  'default' | 'danger' | 'action' | 'subAction' | 'complete' | 'inverse';
 ```
 
 ## Dependencies

package/dist/components/SGhostButton/SGhostButton.d.ts

@@ -1,7 +1,7 @@
 import { type CSSProperties, type MouseEvent } from 'react';
 import { type SIconName } from '../SIcon';
 export type SGhostButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
-export type SGhostButtonIntent = 'default' | 'danger' | 'action' | 'subAction' | 'inverse';
+export type SGhostButtonIntent = 'default' | 'danger' | 'action' | 'subAction' | 'complete' | 'inverse';
 export interface SGhostButtonProps {
     /** 표시할 아이콘명 (필수) */
     icon: SIconName;

package/dist/components/SRadioButton/README.md

@@ -12,6 +12,7 @@
 | `value?` | `string \| number \| null` | — | 현재 선택 값 |
 | `size?` | `SRadioButtonSize` | `'sm'` | 크기 |
 | `disabled?` | `boolean` | `false` | 전체 비활성 |
+| `readOnly?` | `boolean` | `false` | 읽기 전용. 선택 값을 보여주기만 하고 바꿀 수 없다. 모든 버튼이 readOnly 배경, 선택된 버튼만 readOnly 테두리·기본 글자색으로 구분하고 선택되지 않은 버튼의 글자는 disabled 색이다. 포커스·툴팁은 유지된다. `disabled`(그룹·옵션)가 함께 오면 disabled 가 우선한다. |
 | `name?` | `string` | — | input name 속성 |
 | `showTooltip?` | `boolean` | `false` | 옵션 호버 시 툴팁 노출. 문구는 옵션별 `tooltip` 으로 주며, 문구가 없는 옵션은 툴팁을 띄우지 않는다. 툴팁 타입은 `accent` 고정이다. |
 | `className?` | `string` | — |  |

package/dist/components/SRadioButton/SRadioButton.d.ts

@@ -16,6 +16,13 @@ export interface SRadioButtonProps {
     size?: SRadioButtonSize;
     /** 전체 비활성 */
     disabled?: boolean;
+    /**
+     * 읽기 전용. 선택 값을 보여주기만 하고 바꿀 수 없다.
+     * 모든 버튼이 readOnly 배경, 선택된 버튼만 readOnly 테두리·기본 글자색으로 구분하고
+     * 선택되지 않은 버튼의 글자는 disabled 색이다.
+     * 포커스·툴팁은 유지된다. `disabled`(그룹·옵션)가 함께 오면 disabled 가 우선한다.
+     */
+    readOnly?: boolean;
     /** input name 속성 */
     name?: string;
     /**
@@ -30,6 +37,6 @@ export interface SRadioButtonProps {
 }
 /**
  * SRadioButton — sd-radio-button 포팅. 세그먼트형 라디오(버튼 그룹).
- * default(흰 배경/회색, hover 파란 채움) · select(흰 배경/파란 테두리·글자) · disabled.
+ * default(흰 배경/회색, hover 파란 채움) · select(흰 배경/파란 테두리·글자) · disabled · readOnly.
  */
-export declare function SRadioButton({ options, value, size, disabled, name, showTooltip, onValueChange, className, style, }: SRadioButtonProps): import("react").JSX.Element;
+export declare function SRadioButton({ options, value, size, disabled, readOnly, name, showTooltip, onValueChange, className, style, }: SRadioButtonProps): import("react").JSX.Element;

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(
@@ -18800,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 : ""
                   }
@@ -19528,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 : ""
               }
@@ -21760,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 = [];
@@ -21959,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,
@@ -22908,6 +22951,7 @@ function SRadioButton({
   value,
   size = "sm",
   disabled = false,
+  readOnly = false,
   name,
   showTooltip = false,
   onValueChange,
@@ -22925,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;
@@ -22941,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,
@@ -22950,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)`,
@@ -22964,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 || ro && !selected ? "var(--cmp-radioButton-content-disabled)" : selected && !ro ? "var(--cmp-radioButton-content-select)" : "var(--cmp-radioButton-content-default)"
               },
               children: o.label
             },