sellmate-design-system-react 3.0.0 → 3.2.0

package/dist/styles.css

@@ -31,6 +31,9 @@
     --text-base--line-height: calc(1.5 / 1);
     --text-xl: 1.25rem;
     --text-xl--line-height: calc(1.75 / 1.25);
+    --font-weight-thin: 100;
+    --font-weight-extralight: 200;
+    --font-weight-light: 300;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
@@ -669,6 +672,9 @@
   .top-\[16px\] {
     top: 16px;
   }
+  .top-\[64px\] {
+    top: 64px;
+  }
   .top-\[var\(--cmp-table-header-height\)\] {
     top: var(--cmp-table-header-height);
   }
@@ -747,6 +753,9 @@
   .z-\[31\] {
     z-index: 31;
   }
+  .z-\[60\] {
+    z-index: 60;
+  }
   .z-\[1000\] {
     z-index: 1000;
   }
@@ -789,6 +798,9 @@
   .mx-3 {
     margin-inline: calc(var(--spacing) * 3);
   }
+  .-mt-8 {
+    margin-top: calc(var(--spacing-8) * -1);
+  }
   .-mt-px {
     margin-top: -1px;
   }
@@ -801,6 +813,9 @@
   .mt-8 {
     margin-top: var(--spacing-8);
   }
+  .mt-9 {
+    margin-top: calc(var(--spacing) * 9);
+  }
   .mt-12 {
     margin-top: var(--spacing-12);
   }
@@ -973,6 +988,12 @@
   .h-\[var\(--cmp-textinput-sm-height\)\] {
     height: var(--cmp-textinput-sm-height);
   }
+  .h-\[var\(--sys-size-\.\.\.\)\] {
+    height: var(--sys-size-...);
+  }
+  .h-\[var\(--sys-size-control-md-height\)\] {
+    height: var(--sys-size-control-md-height);
+  }
   .h-auto {
     height: auto;
   }
@@ -1108,6 +1129,9 @@
   .w-\[var\(--cmp-pagination-height\)\] {
     width: var(--cmp-pagination-height);
   }
+  .w-\[var\(--sys-size-control-md-height\)\] {
+    width: var(--sys-size-control-md-height);
+  }
   .w-fit {
     width: fit-content;
   }
@@ -1126,6 +1150,9 @@
   .max-w-\[420px\] {
     max-width: 420px;
   }
+  .max-w-\[1200px\] {
+    max-width: 1200px;
+  }
   .max-w-full {
     max-width: 100%;
   }
@@ -1266,6 +1293,9 @@
   .grid-cols-7 {
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
+  .grid-cols-\[200px_1fr\] {
+    grid-template-columns: 200px 1fr;
+  }
   .grid-cols-\[repeat\(7\,var\(--cmp-datepicker-calendar-day-width\)\)\] {
     grid-template-columns: repeat(7,var(--cmp-datepicker-calendar-day-width));
   }
@@ -1278,6 +1308,9 @@
   .flex-col {
     flex-direction: column;
   }
+  .flex-col-reverse {
+    flex-direction: column-reverse;
+  }
   .flex-row {
     flex-direction: row;
   }
@@ -1299,6 +1332,9 @@
   .items-stretch {
     align-items: stretch;
   }
+  .justify-around {
+    justify-content: space-around;
+  }
   .justify-between {
     justify-content: space-between;
   }
@@ -1311,6 +1347,9 @@
   .justify-start {
     justify-content: flex-start;
   }
+  .\!gap-12 {
+    gap: var(--spacing-12) !important;
+  }
   .gap-\(--cmp-chipInput-chip-gap\) {
     gap: var(--cmp-chipInput-chip-gap);
   }
@@ -1338,12 +1377,18 @@
   .gap-4 {
     gap: var(--spacing-4);
   }
+  .gap-7 {
+    gap: calc(var(--spacing) * 7);
+  }
   .gap-8 {
     gap: var(--spacing-8);
   }
   .gap-12 {
     gap: var(--spacing-12);
   }
+  .gap-13 {
+    gap: calc(var(--spacing) * 13);
+  }
   .gap-16 {
     gap: var(--spacing-16);
   }
@@ -1365,6 +1410,9 @@
   .gap-\[12px\] {
     gap: 12px;
   }
+  .gap-\[13px\] {
+    gap: 13px;
+  }
   .gap-\[16px\] {
     gap: 16px;
   }
@@ -1377,6 +1425,9 @@
   .gap-\[40px\] {
     gap: 40px;
   }
+  .gap-\[var\(--\.\.\.\)\] {
+    gap: var(--...);
+  }
   .gap-\[var\(--cmp-callout-body-gap\)\] {
     gap: var(--cmp-callout-body-gap);
   }
@@ -1386,6 +1437,9 @@
   .gap-\[var\(--cmp-checkbox-gap\)\] {
     gap: var(--cmp-checkbox-gap);
   }
+  .gap-\[var\(--cmp-checkbox-group-gap-horizontal\)\] {
+    gap: var(--cmp-checkbox-group-gap-horizontal);
+  }
   .gap-\[var\(--cmp-chip-gap\)\] {
     gap: var(--cmp-chip-gap);
   }
@@ -1548,6 +1602,9 @@
   .rounded-\[4px\] {
     border-radius: 4px;
   }
+  .rounded-\[5px\] {
+    border-radius: 5px;
+  }
   .rounded-\[6px\] {
     border-radius: 6px;
   }
@@ -1611,10 +1668,18 @@
   .rounded-none {
     border-radius: 0;
   }
+  .rounded-t {
+    border-top-left-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
+  }
   .rounded-t-none {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
+  .rounded-l {
+    border-top-left-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+  }
   .rounded-l-\[4px\] {
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
@@ -1627,6 +1692,13 @@
     border-top-left-radius: var(--cmp-select-sm-radius);
     border-bottom-left-radius: var(--cmp-select-sm-radius);
   }
+  .rounded-tl {
+    border-top-left-radius: 0.25rem;
+  }
+  .rounded-r {
+    border-top-right-radius: 0.25rem;
+    border-bottom-right-radius: 0.25rem;
+  }
   .rounded-r-\[4px\] {
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
@@ -1639,6 +1711,13 @@
     border-top-right-radius: var(--cmp-select-sm-radius);
     border-bottom-right-radius: var(--cmp-select-sm-radius);
   }
+  .rounded-tr {
+    border-top-right-radius: 0.25rem;
+  }
+  .rounded-b {
+    border-bottom-right-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+  }
   .rounded-b-\[8px\] {
     border-bottom-right-radius: 8px;
     border-bottom-left-radius: 8px;
@@ -1647,6 +1726,12 @@
     border-bottom-right-radius: var(--cmp-table-radius);
     border-bottom-left-radius: var(--cmp-table-radius);
   }
+  .rounded-br {
+    border-bottom-right-radius: 0.25rem;
+  }
+  .rounded-bl {
+    border-bottom-left-radius: 0.25rem;
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -1799,6 +1884,18 @@
   .border-\[var\(--sys-color-border-default\)\] {
     border-color: var(--sys-color-border-default);
   }
+  .border-border-default {
+    border-color: var(--color-border-default);
+  }
+  .border-border-strong {
+    border-color: var(--color-border-strong);
+  }
+  .border-disabled-border {
+    border-color: var(--color-disabled-border);
+  }
+  .border-divider-default {
+    border-color: var(--color-divider-default);
+  }
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
@@ -1862,9 +1959,15 @@
   .bg-\(--sys-color-bg-neutralLight\) {
     background-color: var(--sys-color-bg-neutralLight);
   }
+  .bg-\[\#\.\.\.\] {
+    background-color: #...;
+  }
   .bg-\[\#F2F2F2\] {
     background-color: #F2F2F2;
   }
+  .bg-\[\#eee\] {
+    background-color: #eee;
+  }
   .bg-\[var\(--btn-bg\)\] {
     background-color: var(--btn-bg);
   }
@@ -1964,6 +2067,18 @@
   .bg-\[var\(--sys-color-divider-default\)\] {
     background-color: var(--sys-color-divider-default);
   }
+  .bg-bg-frame {
+    background-color: var(--color-bg-frame);
+  }
+  .bg-bg-neutralBright {
+    background-color: var(--color-bg-neutralBright);
+  }
+  .bg-bg-neutralLight {
+    background-color: var(--color-bg-neutralLight);
+  }
+  .bg-bg-screen {
+    background-color: var(--color-bg-screen);
+  }
   .bg-black\/5 {
     background-color: color-mix(in srgb, #000000 5%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1976,6 +2091,12 @@
       background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
     }
   }
+  .bg-blue-subtle {
+    background-color: var(--color-blue-subtle);
+  }
+  .bg-disabled-bg {
+    background-color: var(--color-disabled-bg);
+  }
   .bg-gray-200 {
     background-color: var(--color-gray-200);
   }
@@ -2024,6 +2145,12 @@
   .p-12 {
     padding: var(--spacing-12);
   }
+  .p-15 {
+    padding: calc(var(--spacing) * 15);
+  }
+  .p-16 {
+    padding: var(--spacing-16);
+  }
   .p-20 {
     padding: var(--spacing-20);
   }
@@ -2036,6 +2163,9 @@
   .p-\[8px\] {
     padding: 8px;
   }
+  .p-\[10px\] {
+    padding: 10px;
+  }
   .p-\[12px\] {
     padding: 12px;
   }
@@ -2063,6 +2193,9 @@
   .px-8 {
     padding-inline: var(--spacing-8);
   }
+  .px-11 {
+    padding-inline: calc(var(--spacing) * 11);
+  }
   .px-12 {
     padding-inline: var(--spacing-12);
   }
@@ -2304,6 +2437,9 @@
   .text-16 {
     font-size: var(--text-16);
   }
+  .text-18 {
+    font-size: var(--text-18);
+  }
   .text-20 {
     font-size: var(--text-20);
   }
@@ -2383,10 +2519,30 @@
     --tw-leading: 1;
     line-height: 1;
   }
+  .font-\[600\] {
+    --tw-font-weight: 600;
+    font-weight: 600;
+  }
+  .font-black {
+    --tw-font-weight: var(--font-weight-black);
+    font-weight: var(--font-weight-black);
+  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
   }
+  .font-extrabold {
+    --tw-font-weight: var(--font-weight-extrabold);
+    font-weight: var(--font-weight-extrabold);
+  }
+  .font-extralight {
+    --tw-font-weight: var(--font-weight-extralight);
+    font-weight: var(--font-weight-extralight);
+  }
+  .font-light {
+    --tw-font-weight: var(--font-weight-light);
+    font-weight: var(--font-weight-light);
+  }
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
@@ -2399,6 +2555,10 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
+  .font-thin {
+    --tw-font-weight: var(--font-weight-thin);
+    font-weight: var(--font-weight-thin);
+  }
   .tracking-wider {
     --tw-tracking: var(--tracking-wider);
     letter-spacing: var(--tracking-wider);
@@ -2487,6 +2647,9 @@
   .text-\[\#0A0A0A\] {
     color: #0A0A0A;
   }
+  .text-\[\#333\] {
+    color: #333;
+  }
   .text-\[\#666\] {
     color: #666;
   }
@@ -2610,6 +2773,30 @@
   .text-blue-strong {
     color: var(--color-blue-strong);
   }
+  .text-fg-accent {
+    color: var(--color-fg-accent);
+  }
+  .text-fg-danger {
+    color: var(--color-fg-danger);
+  }
+  .text-fg-inverse {
+    color: var(--color-fg-inverse);
+  }
+  .text-fg-primary {
+    color: var(--color-fg-primary);
+  }
+  .text-fg-secondary {
+    color: var(--color-fg-secondary);
+  }
+  .text-fg-success {
+    color: var(--color-fg-success);
+  }
+  .text-fg-tertiary {
+    color: var(--color-fg-tertiary);
+  }
+  .text-fg-warning {
+    color: var(--color-fg-warning);
+  }
   .text-gray-400 {
     color: var(--color-gray-400);
   }
@@ -2643,6 +2830,9 @@
   .text-inherit {
     color: inherit;
   }
+  .text-link-accent {
+    color: var(--color-link-accent);
+  }
   .text-red-75 {
     color: var(--color-red-75);
   }
@@ -2711,6 +2901,10 @@
     --tw-shadow: 0px 0px 24px -6px var(--tw-shadow-color, rgba(34,34,34,0.12)), 4px 8px 16px -4px var(--tw-shadow-color, rgba(34,34,34,0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -2803,6 +2997,9 @@
   .\[font\:inherit\] {
     font: inherit;
   }
+  .\[length\:var\(--x\)\] {
+    length: var(--x);
+  }
   .group-hover\/filepicker\:text-\[color\:var\(--cmp-filepicker-text-default\)\] {
     &:is(:where(.group\/filepicker):hover *) {
       @media (hover: hover) {
@@ -3051,6 +3248,13 @@
       }
     }
   }
+  .hover\:gap-16 {
+    &:hover {
+      @media (hover: hover) {
+        gap: var(--spacing-16);
+      }
+    }
+  }
   .hover\:\!border-\[color\:var\(--cmp-radioButton-bg-hover\)\] {
     &:hover {
       @media (hover: hover) {
@@ -3551,6 +3755,20 @@
       transition-property: none;
     }
   }
+  .md\:px-24 {
+    @media (width >= 48rem) {
+      padding-inline: var(--spacing-24);
+    }
+  }
+  .hover\:md\:gap-12 {
+    &:hover {
+      @media (hover: hover) {
+        @media (width >= 48rem) {
+          gap: var(--spacing-12);
+        }
+      }
+    }
+  }
   .\[\&\:\:-webkit-scrollbar\]\:hidden {
     &::-webkit-scrollbar {
       display: none;
@@ -4713,6 +4931,9 @@
   --cmp-tree-connector-line-color: #AAAAAA;
 }
 @layer base {
+  body {
+    color: var(--color-fg-primary);
+  }
   *::-webkit-scrollbar {
     width: 12px;
     height: 12px;

package/dist/theme.css

@@ -1439,6 +1439,14 @@
    Chrome 121+/WebKit 는 scrollbar-width·scrollbar-color 계산값이 auto 가 아니면 ::-webkit-scrollbar-* 를 통째로
    무시하므로, 표준 속성은 webkit 유사요소가 없는 브라우저(Firefox)에서만 켠다. */
 @layer base {
+  /* 전역 기본 텍스트 색 — 본문은 grey_95(= fg.primary). 요소마다 색을 지정하지 않아도
+     브라우저 기본 검정(#000)이 아니라 디자인 시스템 색으로 렌더된다.
+     보조·비활성 텍스트만 text-fg-tertiary(grey_65)로 내려 쓴다.
+     base 레이어라 소비 앱의 text-* 유틸리티(utilities)가 언제든 덮어쓴다. */
+  body {
+    color: var(--color-fg-primary);
+  }
+
   *::-webkit-scrollbar {
     width: 12px;
     height: 12px;

package/eslint/index.mjs

@@ -0,0 +1,69 @@
+/**
+ * sellmate-design-system-react — 소비 앱용 ESLint 플러그인.
+ *
+ * AGENTS.md 의 규칙 중 정적으로 검출 가능한 것을 린트로 강제한다.
+ * 사용법은 README 의 "ESLint 설정" 절 참조.
+ */
+import noRawHtmlControl from "./rules/no-raw-html-control.mjs";
+import noArbitraryClass from "./rules/no-arbitrary-class.mjs";
+import noOffScaleSpacing from "./rules/no-off-scale-spacing.mjs";
+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";
+
+const PLUGIN_NAME = "sellmate";
+
+const plugin = {
+  meta: { name: "eslint-plugin-sellmate" },
+  rules: {
+    "no-raw-html-control": noRawHtmlControl,
+    "no-arbitrary-class": noArbitraryClass,
+    "no-off-scale-spacing": noOffScaleSpacing,
+    "prefer-typo-preset": preferTypoPreset,
+    "table-numeric-align": tableNumericAlign,
+    "require-locale-number": requireLocaleNumber,
+    "component-group-gap": componentGroupGap,
+  },
+};
+
+/** 기본 프리셋 — JSX/TSX 파일에 적용 */
+const recommended = [
+  {
+    // 컬럼 정의를 .ts 파일로 분리하는 경우가 있어 tsx 뿐 아니라 ts 도 포함한다
+    files: ["**/*.{js,jsx,ts,tsx}"],
+    plugins: { [PLUGIN_NAME]: plugin },
+    rules: {
+      // 스타일이 조용히 사라지거나 디자인 시스템을 우회하는 경우 → error
+      [`${PLUGIN_NAME}/no-raw-html-control`]: "error",
+      [`${PLUGIN_NAME}/no-arbitrary-class`]: "error",
+      [`${PLUGIN_NAME}/no-off-scale-spacing`]: "error",
+      [`${PLUGIN_NAME}/table-numeric-align`]: "error",
+      [`${PLUGIN_NAME}/require-locale-number`]: "error",
+      [`${PLUGIN_NAME}/component-group-gap`]: "error",
+      // 대체 프리셋 판단에 여지가 있어 warn
+      [`${PLUGIN_NAME}/prefer-typo-preset`]: "warn",
+    },
+  },
+];
+
+/**
+ * 전 규칙 error + ul·ol·li·svg·label 까지 검사.
+ * 정당한 사용처(로고 SVG, 시맨틱 목록 등)가 있는 요소도 잡히므로
+ * 예외는 `allow` 로 열어 쓰는 것을 전제로 한다. 신규 프로젝트용.
+ */
+const strict = [
+  {
+    ...recommended[0],
+    rules: {
+      ...recommended[0].rules,
+      [`${PLUGIN_NAME}/no-raw-html-control`]: ["error", { strict: true }],
+      [`${PLUGIN_NAME}/prefer-typo-preset`]: "error",
+    },
+  },
+];
+
+plugin.configs = { recommended, strict };
+
+export default plugin;
+export const { rules, configs } = plugin;

package/eslint/lib/class-names.mjs

@@ -0,0 +1,119 @@
+/**
+ * className / class 속성에서 클래스 토큰을 추출하는 공용 헬퍼.
+ *
+ * 지원 형태:
+ *   className="a b"                     → Literal
+ *   className={`a ${x} b`}              → TemplateLiteral (정적 quasi 부분만)
+ *   className={cn('a', cond && 'b')}    → clsx/cn/classnames 호출의 문자열 인자
+ *   className={'a b'}                   → JSXExpressionContainer > Literal
+ *
+ * 동적으로 조립되는 부분(변수·삼항의 식별자 등)은 정적 분석 대상이 아니므로 건너뛴다.
+ */
+
+const CLASS_ATTRS = new Set(["className", "class"]);
+const CLASS_HELPERS = new Set(["cn", "clsx", "classNames", "classnames", "cva", "twMerge"]);
+
+/** 문자열을 공백 기준 클래스 토큰으로 나눈다 (variant 접두어는 유지) */
+export function tokenize(value) {
+  return String(value)
+    .split(/\s+/)
+    .filter(Boolean);
+}
+
+/**
+ * `hover:md:gap-12` → `gap-12` — variant 접두어를 벗겨 유틸리티 본체만 남긴다.
+ * 임의 값 안의 `:`(예: `[length:var(--x)]`)는 벗기지 않는다.
+ */
+export function stripVariants(token) {
+  let rest = token;
+  for (;;) {
+    const idx = indexOfTopLevelColon(rest);
+    if (idx === -1) return rest;
+    rest = rest.slice(idx + 1);
+  }
+}
+
+/** 대괄호 밖에 있는 첫 `:` 위치 (없으면 -1) */
+function indexOfTopLevelColon(s) {
+  let depth = 0;
+  for (let i = 0; i < s.length; i++) {
+    const c = s[i];
+    if (c === "[") depth++;
+    else if (c === "]") depth--;
+    else if (c === ":" && depth === 0) return i;
+  }
+  return -1;
+}
+
+/** `!gap-12` / `-mt-8` 같은 접두 기호 제거 */
+export function stripModifiers(token) {
+  return token.replace(/^!/, "").replace(/^-/, "");
+}
+
+/**
+ * JSXAttribute 노드에서 정적으로 알 수 있는 클래스 토큰을 모두 수집한다.
+ * @returns {Array<{ token: string, node: import('estree').Node }>}
+ */
+export function collectClassTokens(attrNode) {
+  if (attrNode.type !== "JSXAttribute") return [];
+  const name = attrNode.name?.name;
+  if (!CLASS_ATTRS.has(name)) return [];
+
+  const out = [];
+  const push = (raw, node) => {
+    for (const token of tokenize(raw)) out.push({ token, node });
+  };
+
+  const visit = (node) => {
+    if (!node) return;
+    switch (node.type) {
+      case "Literal":
+        if (typeof node.value === "string") push(node.value, node);
+        break;
+      case "TemplateLiteral":
+        // 정적 부분만 본다. 보간(${}) 안쪽은 아래 표현식 방문으로 따로 처리.
+        for (const q of node.quasis) push(q.value.cooked ?? "", node);
+        for (const e of node.expressions) visit(e);
+        break;
+      case "JSXExpressionContainer":
+        visit(node.expression);
+        break;
+      case "CallExpression": {
+        const callee = node.callee;
+        const fnName = callee?.type === "Identifier" ? callee.name : callee?.property?.name;
+        if (fnName && CLASS_HELPERS.has(fnName)) {
+          for (const arg of node.arguments) visit(arg);
+        }
+        break;
+      }
+      case "ConditionalExpression":
+        visit(node.consequent);
+        visit(node.alternate);
+        break;
+      case "LogicalExpression":
+        visit(node.left);
+        visit(node.right);
+        break;
+      case "ArrayExpression":
+        for (const el of node.elements) visit(el);
+        break;
+      case "ObjectExpression":
+        // clsx({ 'gap-12': cond }) 형태 — 키가 클래스다
+        for (const prop of node.properties) {
+          if (prop.type === "Property" && prop.key) {
+            if (prop.key.type === "Literal" && typeof prop.key.value === "string") {
+              push(prop.key.value, prop.key);
+            } else if (prop.key.type === "Identifier" && !prop.computed) {
+              push(prop.key.name, prop.key);
+            }
+          }
+        }
+        break;
+      default:
+        break;
+    }
+  };
+
+  visit(attrNode.value);
+  return out;
+}