sellmate-design-system-react 9.0.0-beta.21 → 9.0.0-beta.24

package/dist/styles.css

@@ -755,18 +755,24 @@
   .mx-3 {
     margin-inline: calc(var(--spacing) * 3);
   }
-  .mx-\[2px\] {
-    margin-inline: 2px;
+  .mx-\[4px\] {
+    margin-inline: 4px;
   }
   .mx-\[calc\(12px-var\(--cmp-chipFilter-chip-group\)\)\] {
     margin-inline: calc(12px - var(--cmp-chipFilter-chip-group));
   }
+  .my-\[4px\] {
+    margin-block: 4px;
+  }
   .my-\[6px\] {
     margin-block: 6px;
   }
   .my-auto {
     margin-block: auto;
   }
+  .my-sd-8 {
+    margin-block: var(--spacing-sd-8);
+  }
   .-mt-8 {
     margin-top: calc(var(--spacing) * -8);
   }
@@ -794,6 +800,9 @@
   .mt-\[2px\] {
     margin-top: 2px;
   }
+  .mt-\[6px\] {
+    margin-top: 6px;
+  }
   .mt-\[8px\] {
     margin-top: 8px;
   }
@@ -803,6 +812,9 @@
   .mt-\[var\(--cmp-guide-contents-gap\)\] {
     margin-top: var(--cmp-guide-contents-gap);
   }
+  .mt-auto {
+    margin-top: auto;
+  }
   .mt-sd-2 {
     margin-top: var(--spacing-sd-2);
   }
@@ -839,6 +851,9 @@
   .mb-\[24px\] {
     margin-bottom: 24px;
   }
+  .mb-auto {
+    margin-bottom: auto;
+  }
   .mb-sd-8 {
     margin-bottom: var(--spacing-sd-8);
   }
@@ -924,6 +939,9 @@
   .h-48 {
     height: calc(var(--spacing) * 48);
   }
+  .h-\[1px\] {
+    height: 1px;
+  }
   .h-\[2px\] {
     height: 2px;
   }
@@ -1020,9 +1038,6 @@
   .h-\[var\(--cmp-datepicker-calendar-day-dot-size\)\] {
     height: var(--cmp-datepicker-calendar-day-dot-size);
   }
-  .h-\[var\(--cmp-datepicker-calendar-header-divider-height\)\] {
-    height: var(--cmp-datepicker-calendar-header-divider-height);
-  }
   .h-\[var\(--cmp-datepicker-calendar-range-height\)\] {
     height: var(--cmp-datepicker-calendar-range-height);
   }
@@ -1053,6 +1068,9 @@
   .h-\[var\(--sys-size-control-md-height\)\] {
     height: var(--sys-size-control-md-height);
   }
+  .h-\[var\(--x\)\] {
+    height: var(--x);
+  }
   .h-auto {
     height: auto;
   }
@@ -1071,6 +1089,9 @@
   .h-sd-8 {
     height: var(--spacing-sd-8);
   }
+  .h-sd-20 {
+    height: var(--spacing-sd-20);
+  }
   .h-sd-32 {
     height: var(--spacing-sd-32);
   }
@@ -1329,6 +1350,9 @@
   .min-w-\[40px\] {
     min-width: 40px;
   }
+  .min-w-\[72px\] {
+    min-width: 72px;
+  }
   .min-w-\[160px\] {
     min-width: 160px;
   }
@@ -1831,6 +1855,9 @@
   .overflow-auto {
     overflow: auto;
   }
+  .overflow-clip {
+    overflow: clip;
+  }
   .overflow-hidden {
     overflow: hidden;
   }
@@ -2380,6 +2407,9 @@
   .bg-\[var\(--cmp-listBoxItem-depth2-middle-bg\)\] {
     background-color: var(--cmp-listBoxItem-depth2-middle-bg);
   }
+  .bg-\[var\(--cmp-listItem-bg-selected\)\] {
+    background-color: var(--cmp-listItem-bg-selected);
+  }
   .bg-\[var\(--cmp-modal-bg\)\] {
     background-color: var(--cmp-modal-bg);
   }
@@ -2434,6 +2464,9 @@
   .bg-\[var\(--sys-color-bg-screen\)\] {
     background-color: var(--sys-color-bg-screen);
   }
+  .bg-\[var\(--sys-color-border-default\)\] {
+    background-color: var(--sys-color-border-default);
+  }
   .bg-\[var\(--sys-color-divider-default\)\] {
     background-color: var(--sys-color-divider-default);
   }
@@ -2494,6 +2527,9 @@
   .bg-grey-90 {
     background-color: var(--color-grey-90);
   }
+  .bg-inherit {
+    background-color: inherit;
+  }
   .bg-primary-50 {
     background-color: var(--color-primary-50);
   }
@@ -3255,6 +3291,9 @@
   .text-\[color\:var\(--cmp-listBoxItem-content-selected\)\] {
     color: var(--cmp-listBoxItem-content-selected);
   }
+  .text-\[color\:var\(--cmp-listItem-text-selected\)\] {
+    color: var(--cmp-listItem-text-selected);
+  }
   .text-\[color\:var\(--cmp-modal-confirm-message-color\)\] {
     color: var(--cmp-modal-confirm-message-color);
   }
@@ -4301,11 +4340,21 @@
       cursor: not-allowed;
     }
   }
+  .data-\[disabled\]\:bg-transparent {
+    &[data-disabled] {
+      background-color: transparent;
+    }
+  }
   .data-\[disabled\]\:text-\[color\:var\(--cmp-button-text-disabled\)\] {
     &[data-disabled] {
       color: var(--cmp-button-text-disabled);
     }
   }
+  .data-\[disabled\]\:text-\[color\:var\(--cmp-ghostButton-icon-disabled\)\] {
+    &[data-disabled] {
+      color: var(--cmp-ghostButton-icon-disabled);
+    }
+  }
   .data-\[highlighted\]\:bg-\[var\(--color-bg-neutralLight\)\] {
     &[data-highlighted] {
       background-color: var(--color-bg-neutralLight);
@@ -4496,6 +4545,11 @@
       transition-property: none;
     }
   }
+  .md\:h-sd-20 {
+    @media (width >= 48rem) {
+      height: var(--spacing-sd-20);
+    }
+  }
   .md\:p-4 {
     @media (width >= 48rem) {
       padding: calc(var(--spacing) * 4);
@@ -4558,6 +4612,264 @@
       outline-color: var(--color-border-accent);
     }
   }
+  .\[\&_\.sd-editor-image\]\:my-\[8px\] {
+    & .sd-editor-image {
+      margin-block: 8px;
+    }
+  }
+  .\[\&_\.sd-editor-image\]\:h-auto {
+    & .sd-editor-image {
+      height: auto;
+    }
+  }
+  .\[\&_\.sd-editor-image\]\:max-w-full {
+    & .sd-editor-image {
+      max-width: 100%;
+    }
+  }
+  .\[\&_\.sd-editor-image\]\:rounded-\[4px\] {
+    & .sd-editor-image {
+      border-radius: 4px;
+    }
+  }
+  .\[\&_\.sd-editor-table\]\:my-\[8px\] {
+    & .sd-editor-table {
+      margin-block: 8px;
+    }
+  }
+  .\[\&_\.sd-editor-table\]\:w-full {
+    & .sd-editor-table {
+      width: 100%;
+    }
+  }
+  .\[\&_\.sd-editor-table\]\:table-fixed {
+    & .sd-editor-table {
+      table-layout: fixed;
+    }
+  }
+  .\[\&_\.sd-editor-table\]\:border-collapse {
+    & .sd-editor-table {
+      border-collapse: collapse;
+    }
+  }
+  .\[\&_\.sd-editor-table-cell\]\:border {
+    & .sd-editor-table-cell {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+    }
+  }
+  .\[\&_\.sd-editor-table-cell\]\:border-solid {
+    & .sd-editor-table-cell {
+      --tw-border-style: solid;
+      border-style: solid;
+    }
+  }
+  .\[\&_\.sd-editor-table-cell\]\:border-\[color\:var\(--color-border-default\)\] {
+    & .sd-editor-table-cell {
+      border-color: var(--color-border-default);
+    }
+  }
+  .\[\&_\.sd-editor-table-cell\]\:px-\[8px\] {
+    & .sd-editor-table-cell {
+      padding-inline: 8px;
+    }
+  }
+  .\[\&_\.sd-editor-table-cell\]\:py-\[4px\] {
+    & .sd-editor-table-cell {
+      padding-block: 4px;
+    }
+  }
+  .\[\&_\.sd-editor-table-cell\]\:align-top {
+    & .sd-editor-table-cell {
+      vertical-align: top;
+    }
+  }
+  .\[\&_\.sd-editor-table-cell\>p\]\:my-0 {
+    & .sd-editor-table-cell>p {
+      margin-block: 0;
+    }
+  }
+  .\[\&_\.sd-editor-table-header\]\:border {
+    & .sd-editor-table-header {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+    }
+  }
+  .\[\&_\.sd-editor-table-header\]\:border-solid {
+    & .sd-editor-table-header {
+      --tw-border-style: solid;
+      border-style: solid;
+    }
+  }
+  .\[\&_\.sd-editor-table-header\]\:border-\[color\:var\(--color-border-default\)\] {
+    & .sd-editor-table-header {
+      border-color: var(--color-border-default);
+    }
+  }
+  .\[\&_\.sd-editor-table-header\]\:bg-\[var\(--color-bg-neutralLight\)\] {
+    & .sd-editor-table-header {
+      background-color: var(--color-bg-neutralLight);
+    }
+  }
+  .\[\&_\.sd-editor-table-header\]\:px-\[8px\] {
+    & .sd-editor-table-header {
+      padding-inline: 8px;
+    }
+  }
+  .\[\&_\.sd-editor-table-header\]\:py-\[4px\] {
+    & .sd-editor-table-header {
+      padding-block: 4px;
+    }
+  }
+  .\[\&_\.sd-editor-table-header\]\:text-left {
+    & .sd-editor-table-header {
+      text-align: left;
+    }
+  }
+  .\[\&_\.sd-editor-table-header\]\:align-top {
+    & .sd-editor-table-header {
+      vertical-align: top;
+    }
+  }
+  .\[\&_\.sd-editor-table-header\]\:font-bold {
+    & .sd-editor-table-header {
+      --tw-font-weight: var(--font-weight-bold);
+      font-weight: var(--font-weight-bold);
+    }
+  }
+  .\[\&_\.sd-editor-table-header\>p\]\:my-0 {
+    & .sd-editor-table-header>p {
+      margin-block: 0;
+    }
+  }
+  .\[\&_\.sd-editor-task-item\]\:flex {
+    & .sd-editor-task-item {
+      display: flex;
+    }
+  }
+  .\[\&_\.sd-editor-task-item\]\:items-start {
+    & .sd-editor-task-item {
+      align-items: flex-start;
+    }
+  }
+  .\[\&_\.sd-editor-task-item\]\:gap-\[6px\] {
+    & .sd-editor-task-item {
+      gap: 6px;
+    }
+  }
+  .\[\&_\.sd-editor-task-item_input\]\:m-0 {
+    & .sd-editor-task-item input {
+      margin: 0;
+    }
+  }
+  .\[\&_\.sd-editor-task-item_input\]\:h-\[13px\] {
+    & .sd-editor-task-item input {
+      height: 13px;
+    }
+  }
+  .\[\&_\.sd-editor-task-item_input\]\:w-\[13px\] {
+    & .sd-editor-task-item input {
+      width: 13px;
+    }
+  }
+  .\[\&_\.sd-editor-task-item_input\]\:cursor-pointer {
+    & .sd-editor-task-item input {
+      cursor: pointer;
+    }
+  }
+  .\[\&_\.sd-editor-task-item_input\]\:accent-\[var\(--color-fg-accent\)\] {
+    & .sd-editor-task-item input {
+      accent-color: var(--color-fg-accent);
+    }
+  }
+  .\[\&_\.sd-editor-task-item\>div\]\:min-w-0 {
+    & .sd-editor-task-item>div {
+      min-width: 0;
+    }
+  }
+  .\[\&_\.sd-editor-task-item\>div\]\:flex-1 {
+    & .sd-editor-task-item>div {
+      flex: 1;
+    }
+  }
+  .\[\&_\.sd-editor-task-item\>label\]\:mt-\[3px\] {
+    & .sd-editor-task-item>label {
+      margin-top: 3px;
+    }
+  }
+  .\[\&_\.sd-editor-task-item\>label\]\:shrink-0 {
+    & .sd-editor-task-item>label {
+      flex-shrink: 0;
+    }
+  }
+  .\[\&_\.sd-editor-task-item\>label\]\:leading-none {
+    & .sd-editor-task-item>label {
+      --tw-leading: 1;
+      line-height: 1;
+    }
+  }
+  .\[\&_\.sd-editor-task-item\[data-checked\=true\]\>div\]\:text-\[color\:var\(--color-fg-tertiary\)\] {
+    & .sd-editor-task-item[data-checked=true]>div {
+      color: var(--color-fg-tertiary);
+    }
+  }
+  .\[\&_\.sd-editor-task-item\[data-checked\=true\]\>div\]\:line-through {
+    & .sd-editor-task-item[data-checked=true]>div {
+      text-decoration-line: line-through;
+    }
+  }
+  .\[\&_\.sd-editor-task-list\]\:my-\[4px\] {
+    & .sd-editor-task-list {
+      margin-block: 4px;
+    }
+  }
+  .\[\&_\.sd-editor-task-list\]\:list-none {
+    & .sd-editor-task-list {
+      list-style-type: none;
+    }
+  }
+  .\[\&_\.sd-editor-task-list\]\:pl-0 {
+    & .sd-editor-task-list {
+      padding-left: 0;
+    }
+  }
+  .\[\&_\.selectedCell\]\:relative {
+    & .selectedCell {
+      position: relative;
+    }
+  }
+  .\[\&_\.selectedCell\]\:after\:pointer-events-none {
+    & .selectedCell {
+      &::after {
+        content: var(--tw-content);
+        pointer-events: none;
+      }
+    }
+  }
+  .\[\&_\.selectedCell\]\:after\:absolute {
+    & .selectedCell {
+      &::after {
+        content: var(--tw-content);
+        position: absolute;
+      }
+    }
+  }
+  .\[\&_\.selectedCell\]\:after\:inset-0 {
+    & .selectedCell {
+      &::after {
+        content: var(--tw-content);
+        inset: 0;
+      }
+    }
+  }
+  .\[\&_\.selectedCell\]\:after\:bg-\[var\(--color-bg-accentFaint\)\] {
+    & .selectedCell {
+      &::after {
+        content: var(--tw-content);
+        background-color: var(--color-bg-accentFaint);
+      }
+    }
+  }
   .\[\&_a\]\:cursor-pointer {
     & a {
       cursor: pointer;
@@ -4737,21 +5049,6 @@
       margin-block: 0;
     }
   }
-  .\[\&_mark\]\:rounded-\[2px\] {
-    & mark {
-      border-radius: 2px;
-    }
-  }
-  .\[\&_mark\]\:bg-transparent {
-    & mark {
-      background-color: transparent;
-    }
-  }
-  .\[\&_mark\]\:px-\[1px\] {
-    & mark {
-      padding-inline: 1px;
-    }
-  }
   .\[\&_ol\]\:my-\[4px\] {
     & ol {
       margin-block: 4px;
@@ -4858,26 +5155,6 @@
       font-weight: var(--font-weight-bold);
     }
   }
-  .\[\&_sub\]\:align-sub {
-    & sub {
-      vertical-align: sub;
-    }
-  }
-  .\[\&_sub\]\:text-\[0\.75em\] {
-    & sub {
-      font-size: 0.75em;
-    }
-  }
-  .\[\&_sup\]\:align-super {
-    & sup {
-      vertical-align: super;
-    }
-  }
-  .\[\&_sup\]\:text-\[0\.75em\] {
-    & sup {
-      font-size: 0.75em;
-    }
-  }
   .\[\&_u\]\:underline {
     & u {
       text-decoration-line: underline;

package/eslint/index.mjs

@@ -13,6 +13,7 @@ import requireLocaleNumber from "./rules/require-locale-number.mjs";
 import componentGroupGap from "./rules/component-group-gap.mjs";
 import fieldWidthGrade from "./rules/field-width-grade.mjs";
 import tableColumnWidth from "./rules/table-column-width.mjs";
+import dividerVerticalHeight from "./rules/divider-vertical-height.mjs";
 
 const PLUGIN_NAME = "sellmate";
 
@@ -28,6 +29,7 @@ const plugin = {
     "component-group-gap": componentGroupGap,
     "field-width-grade": fieldWidthGrade,
     "table-column-width": tableColumnWidth,
+    "divider-vertical-height": dividerVerticalHeight,
   },
 };
 
@@ -52,6 +54,8 @@ const recommended = [
       [`${PLUGIN_NAME}/no-off-scale-spacing`]: "error",
       // 생 <button>/<table> 은 디자인 시스템을 통째로 우회하는 것 (스타일 자유와 무관)
       [`${PLUGIN_NAME}/no-raw-html-control`]: "error",
+      // 세로 SDivider 에 className 으로 높이를 주면 self-stretch 가 무효가 되어 선이 위로 솟는다
+      [`${PLUGIN_NAME}/divider-vertical-height`]: "error",
 
       // 아래는 디자인 컨벤션 — 권고만 한다
       [`${PLUGIN_NAME}/prefer-typo-preset`]: "warn",

package/eslint/rules/divider-vertical-height.mjs

@@ -0,0 +1,137 @@
+/**
+ * 세로 `SDivider` 의 높이를 `className="h-*"` 로 주면 정렬이 조용히 깨지는 것을 잡는다.
+ *
+ * 세로 분할선의 기본값은 `h-auto ... self-stretch` 라, 높이를 주지 않으면 부모 줄 높이를
+ * 그대로 채운다. 그런데 `align-self: stretch` 는 **교차축 크기가 auto 일 때만** 늘리므로
+ * className 으로 높이가 정해지는 순간 stretch 가 무효가 되고 flex-start 처럼 줄 맨 위에
+ * 붙는다. tailwind-merge 는 `h-auto` 만 교체하고 `self-stretch` 는 남기므로 경고도 없다.
+ *
+ * 높이와 정렬은 같이 정해져야 하는 값이라 컴포넌트가 함께 맡는다 — `height` prop 을 쓴다.
+ *
+ *   <SDivider vertical height={20} />          // 높이 + self-center
+ *   <SDivider vertical className="h-sd-20" />  // 위로 솟는다
+ *
+ * 정렬을 **직접 지정한 경우**(`self-center` `self-start` `my-auto` …)는 알고 쓰는 것으로
+ * 보고 잡지 않는다.
+ *
+ * AGENTS.md §3-6.
+ */
+import { collectClassTokens, stripVariants, stripModifiers } from "../lib/class-names.mjs";
+
+/** 높이를 정하는 유틸리티인가 — `h-auto` 만 예외(기본값과 같아 stretch 가 살아 있다) */
+function heightUtil(util) {
+  const m = /^h-(.+)$/.exec(util);
+  if (!m || m[1] === "auto") return null;
+  return m[1];
+}
+
+/** 교차축 정렬을 이미 직접 지정했는가 */
+function alignsSelf(util) {
+  return /^self-/.test(util) || util === "my-auto" || util === "mt-auto" || util === "mb-auto";
+}
+
+/**
+ * 높이 유틸리티 값을 `height` prop 값으로 옮긴다. 옮길 수 없으면 null (수정 제안 없음).
+ *   h-sd-20        → {20}
+ *   h-[20px]       → {20}
+ *   h-[var(--x)]   → "var(--x)"
+ */
+function toHeightProp(value) {
+  const scaled = /^sd-(\d+)$/.exec(value);
+  if (scaled) return `{${scaled[1]}}`;
+  const arbitrary = /^\[(.+)\]$/.exec(value);
+  if (!arbitrary) return null;
+  const inner = arbitrary[1].replace(/_/g, " ");
+  const px = /^(\d+(?:\.\d+)?)px$/.exec(inner);
+  if (px) return `{${px[1]}}`;
+  if (inner.includes('"')) return null;
+  return `"${inner}"`;
+}
+
+const isClassAttr = (a) =>
+  a.type === "JSXAttribute" && (a.name?.name === "className" || a.name?.name === "class");
+
+export default {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "세로 SDivider 의 높이는 className 이 아니라 height prop 으로 지정",
+    },
+    schema: [],
+    messages: {
+      useHeightProp:
+        "세로 SDivider 의 높이는 `height` prop 으로 주세요{{suggestion}} — `className` 으로 주면 `align-self: stretch` 가 무효가 되어 선이 줄 맨 위에 붙습니다. (AGENTS.md §3-6)",
+    },
+    fixable: "code",
+  },
+
+  create(context) {
+    return {
+      JSXOpeningElement(node) {
+        if (node.name.type !== "JSXIdentifier" || node.name.name !== "SDivider") return;
+
+        const attrs = node.attributes;
+        const named = (n) => attrs.find((a) => a.type === "JSXAttribute" && a.name?.name === n);
+
+        // 세로 분할선만 대상. `vertical={expr}` 처럼 값이 정적이지 않으면 판단하지 않는다.
+        const vertical = named("vertical");
+        if (!vertical) return;
+        if (vertical.value !== null && vertical.value?.expression?.value !== true) return;
+
+        // 이미 height prop 을 쓰고 있으면 컴포넌트가 정렬까지 맡는다
+        if (named("height")) return;
+
+        const classAttr = attrs.find(isClassAttr);
+        if (!classAttr) return;
+
+        const tokens = collectClassTokens(classAttr);
+        let height = null;
+        for (const { token } of tokens) {
+          const util = stripModifiers(stripVariants(token));
+          if (alignsSelf(util)) return; // 정렬을 직접 정했다 — 의도한 것으로 본다
+          // variant 가 붙은 높이(`md:h-sd-20`)는 prop 으로 옮길 수 없어 판단에서 뺀다
+          if (height === null && token === util) height = heightUtil(util);
+        }
+        if (height === null) return;
+
+        const propValue = toHeightProp(height);
+
+        context.report({
+          node,
+          messageId: "useHeightProp",
+          data: { suggestion: propValue ? ` (\`height=${propValue}\`)` : "" },
+          fix(fixer) {
+            if (!propValue) return null;
+            // className 이 통짜 문자열일 때만 안전하게 손댄다 (cn()·템플릿 리터럴은 제외)
+            const raw =
+              classAttr.value?.type === "Literal"
+                ? classAttr.value
+                : classAttr.value?.type === "JSXExpressionContainer" &&
+                    classAttr.value.expression.type === "Literal"
+                  ? classAttr.value.expression
+                  : null;
+            if (!raw || typeof raw.value !== "string") return null;
+
+            const rest = raw.value
+              .split(/\s+/)
+              .filter(Boolean)
+              .filter((t) => t !== `h-${height}`);
+            if (rest.length === raw.value.split(/\s+/).filter(Boolean).length) return null;
+
+            const fixes = [fixer.insertTextAfter(vertical, ` height=${propValue}`)];
+            if (rest.length > 0) {
+              fixes.push(fixer.replaceText(raw, `"${rest.join(" ")}"`));
+            } else {
+              // 속성만 지우면 공백이 두 칸 남는다 — 앞 공백까지 함께 지운다
+              const src = context.sourceCode ?? context.getSourceCode();
+              const [start, end] = classAttr.range;
+              const from = /\s/.test(src.text[start - 1]) ? start - 1 : start;
+              fixes.push(fixer.removeRange([from, end]));
+            }
+            return fixes;
+          },
+        });
+      },
+    };
+  },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "9.0.0-beta.21",
+  "version": "9.0.0-beta.24",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [
@@ -89,11 +89,9 @@
     "@radix-ui/react-switch": "^1.3.2",
     "@radix-ui/react-tooltip": "^1.2.11",
     "@tiptap/core": "^3.30.2",
-    "@tiptap/extension-highlight": "^3.30.2",
     "@tiptap/extension-image": "^3.30.2",
     "@tiptap/extension-list": "^3.30.2",
-    "@tiptap/extension-subscript": "^3.30.2",
-    "@tiptap/extension-superscript": "^3.30.2",
+    "@tiptap/extension-table": "^3.30.2",
     "@tiptap/extension-text-align": "^3.30.2",
     "@tiptap/extension-text-style": "^3.30.2",
     "@tiptap/extension-typography": "^3.30.2",