sellmate-design-system-react 8.1.0 → 9.0.0-beta.10

package/dist/theme.css

@@ -154,6 +154,7 @@
   --color-fg-subtleCool: #025497;
   --color-fg-deep: #004290;
   --color-fg-success: #00973C;
+  --color-fg-successLight: #12B553;
   --color-fg-dangerLight: #FB4444;
   --color-fg-accent: #0075FF;
   --color-fg-accentLight: #64ABFF;
@@ -453,6 +454,7 @@
   --sys-color-fg-subtleCool: #025497;
   --sys-color-fg-deep: #004290;
   --sys-color-fg-success: #00973C;
+  --sys-color-fg-successLight: #12B553;
   --sys-color-fg-dangerLight: #FB4444;
   --sys-color-fg-accent: #0075FF;
   --sys-color-fg-accentLight: #64ABFF;
@@ -608,8 +610,10 @@
   --cmp-switch-bg-disabled-on: #BBDAFF;
   --cmp-switch-bg-disabled-off: #E1E1E1;
   --cmp-switch-gap: 6px;
-  --cmp-toggle-height: 28px;
-  --cmp-toggle-paddingX: 12px;
+  --cmp-toggle-xs-height: 24px;
+  --cmp-toggle-xs-paddingX: 8px;
+  --cmp-toggle-sm-height: 28px;
+  --cmp-toggle-sm-paddingX: 12px;
   --cmp-toggle-radius: 9999px;
   --cmp-toggle-border-width: 1px;
   --cmp-toggle-border-default: #CCCCCC;
@@ -742,6 +746,11 @@
   --cmp-field-errorMessage-color: #E30000;
   --cmp-field-contents-gap: 4px;
   --cmp-field-message-paddingX: 8px;
+  --cmp-field-width-xs: 80px;
+  --cmp-field-width-sm: 120px;
+  --cmp-field-width-md: 160px;
+  --cmp-field-width-lg: 240px;
+  --cmp-field-width-xl: 480px;
   --cmp-textinput-sm-height: 28px;
   --cmp-textinput-sm-paddingX: 12px;
   --cmp-textinput-sm-paddingY: 4px;
@@ -889,6 +898,20 @@
   --cmp-datepicker-calendar-time-gap: 12px;
   --cmp-datepicker-calendar-time-section-gap: 12px;
   --cmp-datepicker-calendar-time-unit-gap: 2px;
+  --cmp-datepicker-mode-bg: #FFFFFF;
+  --cmp-datepicker-mode-radius: 4px;
+  --cmp-datepicker-mode-year-width: 120px;
+  --cmp-datepicker-mode-yearMonth-column-width: 64px;
+  --cmp-datepicker-mode-yearMonth-gap: 4px;
+  --cmp-datepicker-mode-item-paddingY: 4px;
+  --cmp-datepicker-mode-item-paddingX: 12px;
+  --cmp-datepicker-mode-item-gap: 8px;
+  --cmp-datepicker-mode-item-bg-default: #FFFFFF;
+  --cmp-datepicker-mode-item-bg-hover: #0075FF;
+  --cmp-datepicker-mode-item-content-default: #222222;
+  --cmp-datepicker-mode-item-content-hover: #FFFFFF;
+  --cmp-datepicker-mode-item-content-disabled: #888888;
+  --cmp-datepicker-mode-item-content-selected: #0075FF;
   --cmp-chip-height: 24px;
   --cmp-chip-paddingX: 8px;
   --cmp-chip-gap: 4px;
@@ -1139,9 +1162,10 @@
   --cmp-progress-circular-gap: 8px;
   --cmp-progress-color-track: #EEEEEE;
   --cmp-progress-color-label: #555555;
-  --cmp-progress-active-color: #2D8DFF;
-  --cmp-progress-success-color: #12B553;
-  --cmp-progress-error-color: #FB4444;
+  --cmp-progress-color-active: #2D8DFF;
+  --cmp-progress-color-success: #12B553;
+  --cmp-progress-color-error: #FB4444;
+  --cmp-progress-color-neutral: #D8D8D8;
   --cmp-progress-bar-text: #FFFFFF;
   --cmp-progress-inverse-color: #FFFFFF;
   --cmp-progress-inverse-opacity: 40%;
@@ -1219,10 +1243,8 @@
   --cmp-stepper-vertical-title-paddingTop: 12px;
   --cmp-stepper-vertical-title-paddingBottom: 6px;
   --cmp-stepper-vertical-title-text: #004290;
-  --cmp-tab-main-lg-height: 44px;
-  --cmp-tab-main-lg-paddingX: 32px;
-  --cmp-tab-main-md-height: 36px;
-  --cmp-tab-main-md-paddingX: 24px;
+  --cmp-tab-main-height: 36px;
+  --cmp-tab-main-paddingX: 24px;
   --cmp-tab-main-gap: 8px;
   --cmp-tab-main-container-gap: 4px;
   --cmp-tab-main-radius: 6px;
@@ -1378,9 +1400,8 @@
   --cmp-tree-item-rowGap: 8px;
   --cmp-tree-item-contentGap: 12px;
   --cmp-tree-item-text-default: #222222;
-  --cmp-tree-item-text-selected: #0075FF;
   --cmp-tree-item-arrow-icon: 16px;
-  --cmp-tree-connector-line-color: #AAAAAA;
+  --cmp-tree-connector-line-color: #E1E1E1;
   --cmp-pageHeader-paddingX: 16px;
   --cmp-pageHeader-gap: 12px;
   --cmp-pageHeader-title-paddingLeft: 4px;
@@ -1450,6 +1471,8 @@
   --cmp-splitter-border-width: 4px;
   --cmp-splitter-border-padding: 4px;
   --cmp-splitter-border-color: #64ABFF;
+  --cmp-image-bg: #F9F9F9;
+  --cmp-image-icon: #D8D8D8;
 }
 
 /* 전역 스크롤바 — overflow(auto/scroll)로 스크롤이 생기는 모든 요소에 SScrollArea 기본 스크롤바를 자동 적용.

package/eslint/index.mjs

@@ -11,6 +11,7 @@ import preferTypoPreset from "./rules/prefer-typo-preset.mjs";
 import tableNumericAlign from "./rules/table-numeric-align.mjs";
 import requireLocaleNumber from "./rules/require-locale-number.mjs";
 import componentGroupGap from "./rules/component-group-gap.mjs";
+import fieldWidthGrade from "./rules/field-width-grade.mjs";
 
 const PLUGIN_NAME = "sellmate";
 
@@ -24,6 +25,7 @@ const plugin = {
     "table-numeric-align": tableNumericAlign,
     "require-locale-number": requireLocaleNumber,
     "component-group-gap": componentGroupGap,
+    "field-width-grade": fieldWidthGrade,
   },
 };
 
@@ -54,6 +56,8 @@ const recommended = [
       [`${PLUGIN_NAME}/component-group-gap`]: "warn",
       [`${PLUGIN_NAME}/table-numeric-align`]: "warn",
       [`${PLUGIN_NAME}/require-locale-number`]: "warn",
+      // 폭 등급 환산이 아직 잠정치라 권고에 둔다 (디자인 확정표가 오면 error 승격 검토)
+      [`${PLUGIN_NAME}/field-width-grade`]: "warn",
 
       // 앱 고유 치수(w-[280px])·일회성 값에는 임의 값이 정당하다. 필요한 팀만 켠다.
       [`${PLUGIN_NAME}/no-arbitrary-class`]: "off",
@@ -79,6 +83,7 @@ const strict = [
       [`${PLUGIN_NAME}/component-group-gap`]: "error",
       [`${PLUGIN_NAME}/table-numeric-align`]: "error",
       [`${PLUGIN_NAME}/require-locale-number`]: "error",
+      [`${PLUGIN_NAME}/field-width-grade`]: "error",
     },
   },
 ];

package/eslint/rules/field-width-grade.d.mts

@@ -0,0 +1,41 @@
+/**
+ * playground 의 실측 페이지(FieldWidthGradePage)가 규칙과 같은 계산을 쓰기 위한 타입 선언.
+ * 규칙 본체는 소비 앱이 그대로 실행하는 plain ESM 이라 .mjs 로 두고, 타입만 여기에 붙인다.
+ */
+
+export type FieldGrade = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type FieldSize = 'sm' | 'md';
+
+export interface FieldComponentSpec {
+  /** 스키마 상한을 담는 prop — 숫자 필드는 maxLength 가 아니라 max 다 */
+  lengthProp: 'maxLength' | 'max';
+  font: Record<FieldSize, number>;
+  /** 글자가 쓸 수 없는 폭의 합 (좌우 패딩 · 테두리 · 스테퍼) */
+  chrome: Record<FieldSize, number>;
+  /** 한글이 들어갈 수 있는가 */
+  korean: boolean;
+  grades: FieldGrade[];
+}
+
+export declare const GRADES: Record<FieldGrade, number>;
+export declare const CHAR_RATIO: { narrow: number; wide: number };
+export declare const COMPONENTS: Record<string, FieldComponentSpec>;
+
+export declare function capacity(
+  spec: FieldComponentSpec,
+  size: FieldSize,
+  grade: FieldGrade,
+  ratio: number,
+  grades?: Record<FieldGrade, number>,
+): number;
+
+export declare function smallestGradeFor(
+  spec: FieldComponentSpec,
+  size: FieldSize,
+  len: number,
+  ratio: number,
+  grades?: Record<FieldGrade, number>,
+): FieldGrade | undefined;
+
+declare const rule: unknown;
+export default rule;

package/eslint/rules/field-width-grade.mjs

@@ -0,0 +1,294 @@
+/**
+ * 필드 폭을 `maxLength`(= 스키마 상한) 기준으로 고정했는지 검사한다.
+ *
+ * 확정 규칙 (design-feedback-final.md §1-2):
+ *   필드 너비는 maxLength 로 정한다.
+ *     - 상한이 등급 안에 들어오면 → 그 등급
+ *     - 상한이 등급 상한(xl)을 넘거나 상한이 없으면 → 행 전체 + 100%
+ *     - 셀렉트는 예외 (maxLength 개념이 없어 목록 최장값 기준) → 대상 아님
+ *
+ * 디자인팀이 요구한 "검수: maxLength ↔ 폭 등급 적합성 필수 확인" 을 자동화한 것이다.
+ * 사람이 하는 검수는 스키마가 나중에 확정되는 화면에서 빠지기 쉽다 —
+ * 시안 단계의 잠정 등급이 그대로 남아도 화면은 멀쩡해 보이기 때문이다.
+ *
+ * 대상이 아닌 것과 그 이유:
+ *   STextarea            여러 줄로 접히므로 maxLength 가 폭을 정하지 않는다
+ *   SSelect 계열         maxLength 개념이 없다 (§1-2 예외 — 목록 최장값 기준)
+ *   SDatePicker 계열     컴포넌트가 자체 상한을 갖는다 (B-14)
+ *
+ * ⚠️ 글자수 ↔ 등급 환산은 아직 디자인 확정본이 없어 토큰 값에서 계산한 잠정치다.
+ *    (폭 등급 자체도 B-8 토큰 도착 전이라 하드코딩이다 — 도착하면 GRADES 를 교체한다)
+ *    확정표가 오면 GRADES · CHAR_RATIO 를 그 값으로 바꾼다. 두 상수 모두 옵션으로 덮을 수 있다.
+ */
+
+/**
+ * 폭 등급 (px). design-feedback-final.md §2-10.
+ * B-8 토큰(`--cmp-field-width-*`)이 소스에 추가되면 scale.gen.mjs 를 거쳐 여기로 들어온다.
+ */
+export const GRADES = { xs: 80, sm: 120, md: 160, lg: 240, xl: 480 };
+
+/**
+ * 글자 하나가 차지하는 폭 (font-size 대비 비율).
+ *   narrow — 영문·숫자. "이 등급에 안 담긴다" 를 판정할 때 쓴다(가장 좁게 잡아도 넘치면 확실히 위반)
+ *   wide   — 한글(전각). "한 등급 작아도 된다" 를 판정할 때 쓴다(가장 넓게 잡아도 남으면 확실히 과하다)
+ * 두 판정 사이에는 아무것도 보고하지 않는 구간이 남는다 — 오탐보다 미탐을 택한 것이다.
+ */
+export const CHAR_RATIO = { narrow: 0.55, wide: 1 };
+
+/**
+ * 컴포넌트별 기하. chrome 은 글자가 쓸 수 없는 폭(좌우 패딩 · 테두리 · 스테퍼)의 합이고
+ * 전부 theme.css 토큰 값에서 계산했다.
+ *
+ *   SInput/SBarcodeInput  paddingX(12·16) × 2 + border 1 × 2
+ *   SNumberInput          스테퍼가 없으면 패딩이 두 배가 된다(SNumberInput.tsx:388) —
+ *                         없을 때 paddingX(6·8) × 2 × 2 + border,
+ *                         있을 때 paddingX × 2 + stepper(20·24) × 2 + gap(= paddingX) × 2 + border
+ *
+ * lengthProp   — 숫자 필드의 스키마 상한은 `maxLength` 가 아니라 `max` 다.
+ * korean       — 한글이 들어갈 수 있는가. false 면 두 판정 모두 narrow 로 계산한다.
+ * chromeStepper — `useButton` 일 때의 chrome. 기본값이 false 라 chrome 쪽이 기본이다.
+ */
+export const COMPONENTS = {
+  SInput: {
+    lengthProp: "maxLength",
+    font: { sm: 12, md: 14 },
+    chrome: { sm: 26, md: 34 },
+    korean: true,
+    grades: ["sm", "md", "lg", "xl"],
+  },
+  SBarcodeInput: {
+    lengthProp: "maxLength",
+    font: { sm: 12, md: 14 },
+    chrome: { sm: 26, md: 34 },
+    korean: false, // 바코드는 영숫자다
+    grades: ["sm", "md", "lg", "xl"],
+  },
+  SNumberInput: {
+    lengthProp: "max",
+    font: { sm: 12, md: 14 },
+    chrome: { sm: 26, md: 34 },
+    chromeStepper: { sm: 66, md: 82 },
+    korean: false,
+    grades: ["xs", "sm", "md", "lg", "xl"], // xs 는 숫자 필드 전용 등급이다
+  },
+};
+
+/**
+ * 등급이 담을 수 있는 글자수. playground 의 실측 페이지가 같은 식을 쓰도록 내보낸다
+ * (숫자를 두 곳에 적으면 한쪽만 고쳐져 검수가 무의미해진다).
+ */
+export function capacity(spec, size, grade, ratio, grades = GRADES) {
+  const usable = Math.max(0, grades[grade] - spec.chrome[size]);
+  return Math.floor(usable / (spec.font[size] * ratio));
+}
+
+/** 그 비율로 len 글자를 담을 수 있는 가장 작은 등급 (없으면 undefined) */
+export function smallestGradeFor(spec, size, len, ratio, grades = GRADES) {
+  return spec.grades.find(g => capacity(spec, size, g, ratio, grades) >= len);
+}
+
+/** JSX 속성 노드 */
+function attr(node, name) {
+  return node.attributes.find(a => a.type === "JSXAttribute" && a.name?.name === name);
+}
+
+/**
+ * 속성에서 리터럴 값을 꺼낸다.
+ *   없음        → undefined
+ *   리터럴      → 값
+ *   그 밖(변수) → null (판단 불가 — 조용히 넘긴다)
+ */
+function literal(node, name) {
+  const a = attr(node, name);
+  if (!a) return undefined;
+  const v = a.value;
+  if (!v) return true; // <SNumberInput useButton /> 같은 boolean shorthand 는 true 다
+  if (v.type === "Literal") return v.value;
+  if (v.type === "JSXExpressionContainer" && v.expression.type === "Literal") {
+    return v.expression.value;
+  }
+  return null;
+}
+
+/** `max={1000}` → 자릿수 4. 천단위 콤마도 폭을 먹으므로 함께 센다 */
+function digitsOf(max) {
+  const digits = String(Math.abs(Math.trunc(max))).length;
+  return digits + Math.floor((digits - 1) / 3);
+}
+
+export default {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "필드 폭을 maxLength(스키마 상한) 기준 등급으로 고정",
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          /** 폭 등급 px 재정의 — 디자인 확정본이 오면 여기로 덮는다 */
+          grades: { type: "object", additionalProperties: { type: "number" } },
+          /** 글자폭 비율 재정의 */
+          charRatio: {
+            type: "object",
+            properties: { narrow: { type: "number" }, wide: { type: "number" } },
+            additionalProperties: false,
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      noGrade:
+        "`{{lengthProp}}={{len}}` 로 상한이 정해진 필드인데 `width` 가 없어 행 전체를 차지합니다. `width={{{suggestPx}}}`({{suggest}} 등급)으로 고정하세요. (§1-2)",
+      offGrade:
+        "`width={{{width}}}` 는 폭 등급이 아닙니다. {{gradeList}} 중 하나이거나, 상한이 없으면 `width=\"100%\"` 여야 합니다. (§1-2)",
+      noBound:
+        "`width` 로 폭을 고정했는데 `{{lengthProp}}` 이 없습니다. 폭의 근거가 스키마 상한이므로, 상한이 없으면 행 전체(`width=\"100%\"` 또는 생략)로 둡니다. (§1-2)",
+      tooNarrow:
+        "`{{lengthProp}}={{len}}` 이 {{grade}} 등급({{gradePx}}px)에 담기지 않습니다. `width={{{suggestPx}}}`({{suggest}} 등급) 이상이 필요합니다. (§1-2)",
+      tooWide:
+        "`{{lengthProp}}={{len}}` 은 {{suggest}} 등급({{suggestPx}}px)으로 충분한데 {{grade}} 등급({{gradePx}}px)을 주었습니다. 폭은 상한에 맞춥니다. (§1-2)",
+      overMax:
+        "`{{lengthProp}}={{len}}` 은 최대 등급 xl({{xl}}px)로도 담기지 않습니다. 행 전체(`width=\"100%\"`)로 둡니다. (§1-2)",
+      fullWidthBounded:
+        "`{{lengthProp}}={{len}}` 로 상한이 정해져 있으므로 `width=\"100%\"` 가 아니라 `width={{{suggestPx}}}`({{suggest}} 등급)로 고정합니다. 행 전체는 상한이 없거나 xl 을 넘을 때만 씁니다. (§1-2)",
+    },
+  },
+
+  create(context) {
+    const grades = { ...GRADES, ...(context.options[0]?.grades ?? {}) };
+    const ratio = { ...CHAR_RATIO, ...(context.options[0]?.charRatio ?? {}) };
+
+    return {
+      JSXOpeningElement(node) {
+        if (node.name.type !== "JSXIdentifier") return;
+        const base = COMPONENTS[node.name.name];
+        if (!base) return;
+
+        // spread 가 있으면 width·maxLength 가 그 안에 있을 수 있어 판단하지 않는다
+        if (node.attributes.some(a => a.type === "JSXSpreadAttribute")) return;
+
+        const size = literal(node, "size") === "md" ? "md" : "sm";
+        // 스테퍼가 붙으면 글자가 쓸 수 있는 폭이 크게 줄어든다 (useButton 기본값은 false)
+        const spec = literal(node, "useButton") === true && base.chromeStepper
+          ? { ...base, chrome: base.chromeStepper }
+          : base;
+
+        const capacityAt = (grade, r) => capacity(spec, size, grade, r, grades);
+        const smallestFor = (len, r) => smallestGradeFor(spec, size, len, r, grades);
+
+        const narrow = ratio.narrow;
+        // 한글이 들어갈 수 없는 필드는 두 판정 모두 좁은 글자폭으로 계산한다
+        const wide = spec.korean ? ratio.wide : ratio.narrow;
+
+        const rawLen = literal(node, spec.lengthProp);
+        if (rawLen === null) return; // 변수로 넘긴 상한 — 판단 불가
+        const len =
+          rawLen === undefined
+            ? undefined
+            : spec.lengthProp === "max"
+              ? digitsOf(rawLen)
+              : rawLen;
+        if (len !== undefined && (!Number.isFinite(len) || len <= 0)) return;
+
+        const rawWidth = literal(node, "width");
+        if (rawWidth === null) return; // 변수로 넘긴 폭 — 판단 불가
+
+        const reportNode = attr(node, "width") ?? attr(node, spec.lengthProp) ?? node.name;
+        const gradeList = spec.grades.map(g => `${g}(${grades[g]})`).join(" · ");
+
+        /* ── width 가 없다 ── */
+        if (rawWidth === undefined) {
+          if (len === undefined) return; // 둘 다 없음 = 상한 없는 필드 → 행 전체가 맞다
+          const suggest = smallestFor(len, wide);
+          if (!suggest) return; // xl 로도 안 담긴다 → 행 전체가 맞다
+          context.report({
+            node: reportNode,
+            messageId: "noGrade",
+            data: { lengthProp: spec.lengthProp, len: rawLen, suggest, suggestPx: grades[suggest] },
+          });
+          return;
+        }
+
+        /* ── width="100%" ── */
+        if (rawWidth === "100%") {
+          if (len === undefined) return; // 상한 없음 + 행 전체 = 규칙대로다
+          const suggest = smallestFor(len, wide);
+          if (!suggest) return; // xl 초과 → 행 전체가 맞다
+          context.report({
+            node: reportNode,
+            messageId: "fullWidthBounded",
+            data: { lengthProp: spec.lengthProp, len: rawLen, suggest, suggestPx: grades[suggest] },
+          });
+          return;
+        }
+
+        /* ── width 가 등급 값인가 ── */
+        const px = typeof rawWidth === "number" ? rawWidth : /^(\d+)px$/.exec(String(rawWidth))?.[1];
+        const grade = px != null && spec.grades.find(g => grades[g] === Number(px));
+        if (!grade) {
+          context.report({
+            node: reportNode,
+            messageId: "offGrade",
+            data: { width: String(rawWidth), gradeList },
+          });
+          return;
+        }
+
+        /* ── 등급은 맞다. 상한과 맞는가 ── */
+        if (len === undefined) {
+          context.report({
+            node: reportNode,
+            messageId: "noBound",
+            data: { lengthProp: spec.lengthProp },
+          });
+          return;
+        }
+
+        // 영문·숫자로 채워도 넘치면 등급이 확실히 좁다
+        if (capacityAt(grade, narrow) < len) {
+          const suggest = smallestFor(len, narrow);
+          if (!suggest) {
+            context.report({
+              node: reportNode,
+              messageId: "overMax",
+              data: { lengthProp: spec.lengthProp, len: rawLen, xl: grades.xl },
+            });
+            return;
+          }
+          context.report({
+            node: reportNode,
+            messageId: "tooNarrow",
+            data: {
+              lengthProp: spec.lengthProp,
+              len: rawLen,
+              grade,
+              gradePx: grades[grade],
+              suggest,
+              suggestPx: grades[suggest],
+            },
+          });
+          return;
+        }
+
+        // 한글로 채워도 더 작은 등급에 들어가면 등급이 확실히 과하다
+        const enough = smallestFor(len, wide);
+        if (enough && grades[enough] < grades[grade]) {
+          context.report({
+            node: reportNode,
+            messageId: "tooWide",
+            data: {
+              lengthProp: spec.lengthProp,
+              len: rawLen,
+              grade,
+              gradePx: grades[grade],
+              suggest: enough,
+              suggestPx: grades[enough],
+            },
+          });
+        }
+      },
+    };
+  },
+};

package/eslint/scale.gen.mjs

@@ -13,4 +13,4 @@ export const RADIUS = ["2","4","6","8","full","control-sm","control-md","feedbac
 export const TYPO_PRESETS = ["typo-body-lg-bold","typo-body-lg-default","typo-body-lg-medium","typo-body-md-bold","typo-body-md-default","typo-body-md-medium","typo-body-sm-bold","typo-body-sm-default","typo-body-sm-medium","typo-body-xs-default","typo-control-lg","typo-control-md-default","typo-control-md-underline","typo-control-sm-default","typo-control-sm-underline","typo-control-xs-bold","typo-control-xs-default","typo-control-xs-medium","typo-control-xs-underline","typo-feedback-md-bold","typo-feedback-md-medium","typo-feedback-md-underline","typo-feedback-sm-bold","typo-feedback-sm-medium","typo-feedback-sm-regular","typo-feedback-sm-underline","typo-feedback-xs","typo-field-lg-bold","typo-field-lg-default","typo-field-lg-medium","typo-field-md-bold","typo-field-md-default","typo-field-md-medium","typo-field-sm-bold","typo-field-sm-default","typo-field-sm-medium","typo-field-xs-default","typo-heading-lg","typo-heading-md","typo-heading-sm","typo-heading-xs","typo-heading-xxs","typo-item-md-default","typo-item-md-selected","typo-item-sm-default","typo-item-sm-selected","typo-navigation-lg-medium","typo-navigation-lg-semibold","typo-navigation-md-bold","typo-navigation-sm-bold","typo-navigation-sm-default","typo-navigation-sm-medium","typo-navigation-xs-bold","typo-navigation-xs-medium","typo-table-accent","typo-table-body","typo-table-header"];
 
 /** 색상 유틸리티 키 (text-*, bg-*, border-* 공통) */
-export const COLORS = ["bg-accent","bg-accentBright","bg-accentFaint","bg-accentLight","bg-brand","bg-caution","bg-danger","bg-dangerLight","bg-deep","bg-frame","bg-neutralBright","bg-neutralLight","bg-progress","bg-screen","bg-subtle","bg-success","bg-successLight","bg-tableHeader","bg-warning","black","blue-strong","blue-subtle","border-accent","border-accentLight","border-bold","border-danger","border-default","border-strong","border-success","border-warning","brilliantblue-05","brilliantblue-10","brilliantblue-20","brilliantblue-25","brilliantblue-40","brilliantblue-50","brilliantblue-60","brilliantblue-70","brilliantblue-75","brilliantblue-80","brilliantblue-85","brilliantblue-90","brilliantblue-95","brilliantblue-99","control-bg-inverseHover","danger-15","danger-20","danger-30","danger-45","danger-60","danger-70","danger-75","danger-80","danger-85","danger-90","danger-95","danger-99","danger-strong","danger-subtle","darkblue-strong","darkblue-subtle","disabled-bg","disabled-border","disabled-icon","disabled-text","divider-default","fg-accent","fg-accentLight","fg-brand","fg-danger","fg-dangerLight","fg-deep","fg-inverse","fg-primary","fg-quaternary","fg-secondary","fg-subtleCool","fg-subtleWarm","fg-success","fg-tertiary","fg-warning","field-bg-default","field-bg-hover","field-bg-readOnly","field-border-danger","field-border-default","field-border-focus","field-border-hover","field-border-success","field-icon-default","field-text-default","field-text-placeholder","field-text-readOnly","green-15","green-25","green-45","green-55","green-65","green-70","green-75","green-80","green-85","green-90","green-95","green-99","green-strong","green-subtle","grey-05","grey-10","grey-20","grey-25","grey-30","grey-35","grey-45","grey-50","grey-55","grey-60","grey-65","grey-70","grey-80","grey-85","grey-90","grey-95","grey-strong","grey-subtle","indigo-strong","indigo-subtle","lightblue-strong","lightblue-subtle","link-accent","navigation-gnb-bg-dark","oceanblue-15","oceanblue-25","oceanblue-50","oceanblue-60","oceanblue-65","oceanblue-70","oceanblue-75","oceanblue-80","oceanblue-85","oceanblue-90","oceanblue-95","oceanblue-99","olive-05","olive-10","olive-15","olive-20","olive-30","olive-45","olive-55","olive-65","olive-70","olive-80","olive-90","olive-95","orange-10","orange-20","orange-35","orange-45","orange-55","orange-60","orange-65","orange-75","orange-85","orange-90","orange-95","orange-99","orange-strong","orange-subtle","primary-05","primary-10","primary-20","primary-25","primary-40","primary-50","primary-60","primary-70","primary-75","primary-80","primary-85","primary-90","primary-95","primary-99","red-15","red-20","red-30","red-45","red-60","red-70","red-75","red-80","red-85","red-90","red-95","red-99","red-strong","red-subtle","steelblue-10","steelblue-25","steelblue-45","steelblue-60","steelblue-65","steelblue-70","steelblue-75","steelblue-80","steelblue-85","steelblue-90","steelblue-95","steelblue-99","success-15","success-25","success-45","success-55","success-65","success-70","success-75","success-80","success-85","success-90","success-95","success-99","success-strong","success-subtle","warning-10","warning-20","warning-35","warning-45","warning-55","warning-60","warning-65","warning-75","warning-85","warning-90","warning-95","warning-99","warning-strong","warning-subtle","white","yellow-10","yellow-20","yellow-25","yellow-30","yellow-40","yellow-45","yellow-50","yellow-60","yellow-70","yellow-80","yellow-90","yellow-95","yellow-moderate","yellow-strong","yellow-subtle"];
+export const COLORS = ["bg-accent","bg-accentBright","bg-accentFaint","bg-accentLight","bg-brand","bg-caution","bg-danger","bg-dangerLight","bg-deep","bg-frame","bg-neutralBright","bg-neutralLight","bg-progress","bg-screen","bg-subtle","bg-success","bg-successLight","bg-tableHeader","bg-warning","black","blue-strong","blue-subtle","border-accent","border-accentLight","border-bold","border-danger","border-default","border-strong","border-success","border-warning","brilliantblue-05","brilliantblue-10","brilliantblue-20","brilliantblue-25","brilliantblue-40","brilliantblue-50","brilliantblue-60","brilliantblue-70","brilliantblue-75","brilliantblue-80","brilliantblue-85","brilliantblue-90","brilliantblue-95","brilliantblue-99","control-bg-inverseHover","danger-15","danger-20","danger-30","danger-45","danger-60","danger-70","danger-75","danger-80","danger-85","danger-90","danger-95","danger-99","danger-strong","danger-subtle","darkblue-strong","darkblue-subtle","disabled-bg","disabled-border","disabled-icon","disabled-text","divider-default","fg-accent","fg-accentLight","fg-brand","fg-danger","fg-dangerLight","fg-deep","fg-inverse","fg-primary","fg-quaternary","fg-secondary","fg-subtleCool","fg-subtleWarm","fg-success","fg-successLight","fg-tertiary","fg-warning","field-bg-default","field-bg-hover","field-bg-readOnly","field-border-danger","field-border-default","field-border-focus","field-border-hover","field-border-success","field-icon-default","field-text-default","field-text-placeholder","field-text-readOnly","green-15","green-25","green-45","green-55","green-65","green-70","green-75","green-80","green-85","green-90","green-95","green-99","green-strong","green-subtle","grey-05","grey-10","grey-20","grey-25","grey-30","grey-35","grey-45","grey-50","grey-55","grey-60","grey-65","grey-70","grey-80","grey-85","grey-90","grey-95","grey-strong","grey-subtle","indigo-strong","indigo-subtle","lightblue-strong","lightblue-subtle","link-accent","navigation-gnb-bg-dark","oceanblue-15","oceanblue-25","oceanblue-50","oceanblue-60","oceanblue-65","oceanblue-70","oceanblue-75","oceanblue-80","oceanblue-85","oceanblue-90","oceanblue-95","oceanblue-99","olive-05","olive-10","olive-15","olive-20","olive-30","olive-45","olive-55","olive-65","olive-70","olive-80","olive-90","olive-95","orange-10","orange-20","orange-35","orange-45","orange-55","orange-60","orange-65","orange-75","orange-85","orange-90","orange-95","orange-99","orange-strong","orange-subtle","primary-05","primary-10","primary-20","primary-25","primary-40","primary-50","primary-60","primary-70","primary-75","primary-80","primary-85","primary-90","primary-95","primary-99","red-15","red-20","red-30","red-45","red-60","red-70","red-75","red-80","red-85","red-90","red-95","red-99","red-strong","red-subtle","steelblue-10","steelblue-25","steelblue-45","steelblue-60","steelblue-65","steelblue-70","steelblue-75","steelblue-80","steelblue-85","steelblue-90","steelblue-95","steelblue-99","success-15","success-25","success-45","success-55","success-65","success-70","success-75","success-80","success-85","success-90","success-95","success-99","success-strong","success-subtle","warning-10","warning-20","warning-35","warning-45","warning-55","warning-60","warning-65","warning-75","warning-85","warning-90","warning-95","warning-99","warning-strong","warning-subtle","white","yellow-10","yellow-20","yellow-25","yellow-30","yellow-40","yellow-45","yellow-50","yellow-60","yellow-70","yellow-80","yellow-90","yellow-95","yellow-moderate","yellow-strong","yellow-subtle"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "8.1.0",
+  "version": "9.0.0-beta.10",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [
@@ -70,8 +70,10 @@
     "check:docs": "node scripts/check-docs-coverage.mjs",
     "check:docs-refs": "node scripts/check-docs-refs.mjs",
     "check:routing": "node scripts/check-routing.mjs",
-    "version": "node scripts/version.mjs",
-    "version:dry": "node scripts/version.mjs --dry-run",
+    "version": "node scripts/version.mjs --prerelease beta --tag",
+    "version:dry": "node scripts/version.mjs --prerelease beta --dry-run",
+    "version:stable": "node scripts/version.mjs --tag",
+    "version:stable:dry": "node scripts/version.mjs --dry-run",
     "clean": "rm -rf dist storybook-static"
   },
   "peerDependencies": {
@@ -117,6 +119,7 @@
     "vite": "^8.0.0"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "tag": "beta"
   }
 }