sellmate-design-system-react 0.1.9 → 0.1.11

package/dist/lib/portal-container.d.ts

@@ -1,7 +1,14 @@
 export declare const PortalContainerProvider: import("react").Provider<HTMLElement | null>;
+export declare const InsideModalProvider: import("react").Provider<boolean>;
 /**
  * 현재 소속된 Portal 컨테이너를 반환한다.
  * Radix `*.Portal` 의 `container`, Ariakit 의 `portalElement` 에 그대로 넘기면 되며,
  * 컨테이너가 없을 때(모달 밖)는 `undefined` 를 반환해 각 라이브러리 기본값(body)을 쓴다.
  */
 export declare function usePortalContainer(): HTMLElement | undefined;
+/**
+ * 현재 floating 이 모달 내부 컨텍스트에서 렌더링되는지 반환한다.
+ * portal target ref 가 아직 준비되지 않은 첫 렌더에서도 true를 유지해
+ * 모달 내부 전용 우회 로직이 깜빡이지 않도록 한다.
+ */
+export declare function useInsideModal(): boolean;

package/dist/styles.css

@@ -32,6 +32,7 @@
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
+    --color-grey-25: #E5E5E5;
     --color-grey-30: #E1E1E1;
     --color-grey-45: #CCCCCC;
     --color-grey-55: #AAAAAA;
@@ -316,6 +317,9 @@
   .left-0 {
     left: 0;
   }
+  .left-1\/2 {
+    left: calc(1 / 2 * 100%);
+  }
   .z-10 {
     z-index: 10;
   }
@@ -666,6 +670,10 @@
   .origin-left {
     transform-origin: 0;
   }
+  .-translate-x-1\/2 {
+    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -715,6 +723,9 @@
   .resize-y {
     resize: vertical;
   }
+  .\[scrollbar-width\:auto\] {
+    scrollbar-width: auto;
+  }
   .\[scrollbar-width\:none\] {
     scrollbar-width: none;
   }
@@ -877,6 +888,12 @@
   .gap-\[var\(--cmp-progress-circular-gap\)\] {
     gap: var(--cmp-progress-circular-gap);
   }
+  .gap-\[var\(--cmp-radio-group-gap-horizontal\)\] {
+    gap: var(--cmp-radio-group-gap-horizontal);
+  }
+  .gap-\[var\(--cmp-radio-group-gap-vertical\)\] {
+    gap: var(--cmp-radio-group-gap-vertical);
+  }
   .gap-\[var\(--cmp-table-header-gap\)\] {
     gap: var(--cmp-table-header-gap);
   }
@@ -1074,6 +1091,9 @@
   .border-\[color\:var\(--cmp-checkbox-checked-bg-default\)\] {
     border-color: var(--cmp-checkbox-checked-bg-default);
   }
+  .border-\[color\:var\(--cmp-checkbox-checked-border-inverse\)\] {
+    border-color: var(--cmp-checkbox-checked-border-inverse);
+  }
   .border-\[color\:var\(--cmp-checkbox-unchecked-border-default\)\] {
     border-color: var(--cmp-checkbox-unchecked-border-default);
   }
@@ -1128,6 +1148,9 @@
   .bg-\[var\(--cmp-checkbox-checked-bg-default\)\] {
     background-color: var(--cmp-checkbox-checked-bg-default);
   }
+  .bg-\[var\(--cmp-checkbox-unchecked-bg-default\)\] {
+    background-color: var(--cmp-checkbox-unchecked-bg-default);
+  }
   .bg-\[var\(--cmp-datepicker-calendar-bg\)\] {
     background-color: var(--cmp-datepicker-calendar-bg);
   }
@@ -1143,6 +1166,9 @@
   .bg-\[var\(--cmp-listBox-bg\)\] {
     background-color: var(--cmp-listBox-bg);
   }
+  .bg-\[var\(--cmp-listItem-bg-hover\)\] {
+    background-color: var(--cmp-listItem-bg-hover);
+  }
   .bg-\[var\(--cmp-listItem-depth1-bg-default\)\] {
     background-color: var(--cmp-listItem-depth1-bg-default);
   }
@@ -1308,6 +1334,9 @@
   .px-\[var\(--cmp-table-keyValue-body-paddingX-default\)\] {
     padding-inline: var(--cmp-table-keyValue-body-paddingX-default);
   }
+  .px-\[var\(--cmp-table-keyValue-body-paddingX-wide\)\] {
+    padding-inline: var(--cmp-table-keyValue-body-paddingX-wide);
+  }
   .px-\[var\(--cmp-table-keyValue-search-paddingX\)\] {
     padding-inline: var(--cmp-table-keyValue-search-paddingX);
   }
@@ -1569,6 +1598,9 @@
   .text-\[color\:var\(--cmp-listItem-content-disabled\)\] {
     color: var(--cmp-listItem-content-disabled);
   }
+  .text-\[color\:var\(--cmp-listItem-content-hover\)\] {
+    color: var(--cmp-listItem-content-hover);
+  }
   .text-\[color\:var\(--cmp-listItem-content-selected\)\] {
     color: var(--cmp-listItem-content-selected);
   }
@@ -1754,6 +1786,10 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .duration-150 {
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
+  }
   .duration-200 {
     --tw-duration: 200ms;
     transition-duration: 200ms;
@@ -1806,16 +1842,6 @@
       }
     }
   }
-  .group-data-\[active-item\]\:border-\[color\:var\(--cmp-checkbox-checked-border-inverse\)\] {
-    &:is(:where(.group)[data-active-item] *) {
-      border-color: var(--cmp-checkbox-checked-border-inverse);
-    }
-  }
-  .group-data-\[active-item\]\:bg-transparent {
-    &:is(:where(.group)[data-active-item] *) {
-      background-color: transparent;
-    }
-  }
   .placeholder\:text-\(--cmp-chipInput-text-placeholder\) {
     &::placeholder {
       color: var(--cmp-chipInput-text-placeholder);
@@ -2099,6 +2125,16 @@
       }
     }
   }
+  .focus\:bg-\[var\(--cmp-listItem-bg-hover\)\] {
+    &:focus {
+      background-color: var(--cmp-listItem-bg-hover);
+    }
+  }
+  .focus\:text-\[color\:var\(--cmp-listItem-content-hover\)\] {
+    &:focus {
+      color: var(--cmp-listItem-content-hover);
+    }
+  }
   .focus-visible\:shadow-\[0_0_0_2px_var\(--btn-ring\)\] {
     &:focus-visible {
       --tw-shadow: 0 0 0 2px var(--tw-shadow-color, var(--btn-ring));
@@ -2122,26 +2158,11 @@
       cursor: not-allowed;
     }
   }
-  .aria-disabled\:cursor-not-allowed {
-    &[aria-disabled="true"] {
-      cursor: not-allowed;
-    }
-  }
-  .aria-disabled\:text-\[color\:var\(--cmp-listItem-content-disabled\)\] {
-    &[aria-disabled="true"] {
+  .disabled\:text-\[color\:var\(--cmp-listItem-content-disabled\)\] {
+    &:disabled {
       color: var(--cmp-listItem-content-disabled);
     }
   }
-  .data-\[active-item\]\:bg-\[var\(--cmp-listItem-bg-hover\)\] {
-    &[data-active-item] {
-      background-color: var(--cmp-listItem-bg-hover);
-    }
-  }
-  .data-\[active-item\]\:text-\[color\:var\(--cmp-listItem-content-hover\)\] {
-    &[data-active-item] {
-      color: var(--cmp-listItem-content-hover);
-    }
-  }
   .data-\[disabled\]\:cursor-not-allowed {
     &[data-disabled] {
       cursor: not-allowed;
@@ -2152,11 +2173,6 @@
       color: var(--cmp-button-text-disabled);
     }
   }
-  .data-\[enter\]\:animate-floating-in-bottom {
-    &[data-enter] {
-      animation: var(--animate-floating-in-bottom);
-    }
-  }
   .data-\[highlighted\]\:bg-\[var\(--sys-color-bg-accent\)\] {
     &[data-highlighted] {
       background-color: var(--sys-color-bg-accent);
@@ -2167,11 +2183,6 @@
       color: var(--sys-color-fg-inverse);
     }
   }
-  .data-\[leave\]\:animate-floating-out-bottom {
-    &[data-leave] {
-      animation: var(--animate-floating-out-bottom);
-    }
-  }
   .data-\[state\=checked\]\:translate-x-\[12px\] {
     &[data-state="checked"] {
       --tw-translate-x: 12px;
@@ -2315,6 +2326,36 @@
       display: none;
     }
   }
+  .\[\&\:\:-webkit-scrollbar\]\:w-\[8px\] {
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar\]\:bg-\[var\(--color-grey-25\)\] {
+    &::-webkit-scrollbar {
+      background-color: var(--color-grey-25);
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar-thumb\]\:rounded-\[4px\] {
+    &::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar-thumb\]\:bg-\[var\(--color-grey-45\)\] {
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--color-grey-45);
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar-track\]\:bg-\[var\(--color-grey-25\)\] {
+    &::-webkit-scrollbar-track {
+      background-color: var(--color-grey-25);
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar\:horizontal\]\:h-\[8px\] {
+    &::-webkit-scrollbar:horizontal {
+      height: 8px;
+    }
+  }
 }
 :root {
   --sys-size-control-xs-height: 24px;
@@ -2539,7 +2580,7 @@
   --cmp-ghostButton-inverse-content: #FFFFFF;
   --cmp-ghostButton-inverse-disabled: #E1E1E1;
   --cmp-ghostButton-inverse-hover-bg: #FFFFFF;
-  --cmp-ghostButton-group-gap: 4px;
+  --cmp-ghostButton-group-gap: 8px;
   --cmp-textLink-sm-gap: 4px;
   --cmp-textLink-sm-icon: 16px;
   --cmp-textLink-md-gap: 8px;
@@ -2600,6 +2641,8 @@
   --cmp-checkbox-label-disabled: #888888;
   --cmp-checkbox-bg-disabled: #E1E1E1;
   --cmp-checkbox-border-disabled: #CCCCCC;
+  --cmp-checkbox-group-gap-horizontal: 24px;
+  --cmp-checkbox-group-gap-vertical: 8px;
   --cmp-radio-size: 16px;
   --cmp-radio-radius: 9999px;
   --cmp-radio-borderWidth: 1px;
@@ -2616,6 +2659,8 @@
   --cmp-radio-dot-size: 10px;
   --cmp-radio-label-default: #222222;
   --cmp-radio-label-disabled: #888888;
+  --cmp-radio-group-gap-horizontal: 24px;
+  --cmp-radio-group-gap-vertical: 8px;
   --cmp-radioButton-xs-height: 24px;
   --cmp-radioButton-xs-paddingX: 8px;
   --cmp-radioButton-sm-height: 28px;
@@ -2876,6 +2921,7 @@
   --cmp-tag-indigo-bg: #EFF6FF;
   --cmp-tag-grey-content: #737373;
   --cmp-tag-grey-bg: #EEEEEE;
+  --cmp-tag-group-gap: 8px;
   --cmp-badge-size: 6px;
   --cmp-badge-radius: 9999px;
   --cmp-badge-red: #FB4444;
@@ -2984,6 +3030,22 @@
   --cmp-popup-bg: #EEEEEE;
   --cmp-drawer-bg: #F6F6F6;
   --cmp-drawer-body-border: #E1E1E1;
+  --cmp-callout-radius: 8px;
+  --cmp-callout-border-width: 1px;
+  --cmp-callout-body-gap: 2px;
+  --cmp-callout-body-paddingX: 12px;
+  --cmp-callout-body-paddingY: 8px;
+  --cmp-callout-default-bg: #F9F9F9;
+  --cmp-callout-default-border: #E1E1E1;
+  --cmp-callout-default-content: #555555;
+  --cmp-callout-danger-bg: #FCEFEF;
+  --cmp-callout-danger-border: #FFB5B5;
+  --cmp-callout-danger-content: #222222;
+  --cmp-callout-danger-title-bg: #FB4444;
+  --cmp-callout-danger-title-paddingX: 24px;
+  --cmp-callout-danger-title-gap: 2px;
+  --cmp-callout-danger-title-color: #FFFFFF;
+  --cmp-callout-danger-title-icon: 24px;
   --cmp-guide-gap: 4px;
   --cmp-guide-button-height: 28px;
   --cmp-guide-button-paddingX: 12px;
@@ -3003,7 +3065,6 @@
   --cmp-guide-contents-paddingY: 20px;
   --cmp-guide-contents-gap: 12px;
   --cmp-guide-contents-title-gap: 8px;
-  --cmp-guide-contents-row-gap: 8px;
   --cmp-guide-contents-body-gap: 2px;
   --cmp-guide-contents-typography-color: #222222;
   --cmp-guide-contents-icon: #00973C;
@@ -3031,9 +3092,10 @@
   --cmp-table-body-default-height: 44px;
   --cmp-table-body-default-paddingY: 8px;
   --cmp-table-body-dense-height: 32px;
-  --cmp-table-body-dense-paddingY: 6px;
-  --cmp-table-body-paddingX-default: 16px;
-  --cmp-table-body-paddingX-frame: 8px;
+  --cmp-table-body-paddingY-dense: 6px;
+  --cmp-table-body-paddingY-default: 8px;
+  --cmp-table-body-paddingX-default: 8px;
+  --cmp-table-body-paddingX-wide: 16px;
   --cmp-table-border-color: #E1E1E1;
   --cmp-table-border-width: 1px;
   --cmp-table-content-gap: 8px;
@@ -3127,22 +3189,25 @@
   --cmp-gnbBox-item-depth1-icon: 20px;
   --cmp-gnbBox-item-depth2-paddingLeft: 24px;
   --cmp-gnbBox-item-depth3-paddingLeft: 36px;
-  --cmp-callout-radius: 8px;
-  --cmp-callout-border-width: 1px;
-  --cmp-callout-body-gap: 2px;
-  --cmp-callout-body-paddingX: 12px;
-  --cmp-callout-body-paddingY: 8px;
-  --cmp-callout-default-bg: #F9F9F9;
-  --cmp-callout-default-border: #E1E1E1;
-  --cmp-callout-default-content: #555555;
-  --cmp-callout-danger-bg: #FCEFEF;
-  --cmp-callout-danger-border: #FFB5B5;
-  --cmp-callout-danger-content: #222222;
-  --cmp-callout-danger-title-bg: #FB4444;
-  --cmp-callout-danger-title-paddingX: 24px;
-  --cmp-callout-danger-title-gap: 2px;
-  --cmp-callout-danger-title-color: #FFFFFF;
-  --cmp-callout-danger-title-icon: 24px;
+  --cmp-stepper-sm-sequence-size: 20px;
+  --cmp-stepper-dash-width: 20px;
+  --cmp-stepper-dash-color: #888888;
+  --cmp-stepper-lg-sequence-size: 24px;
+  --cmp-stepper-container-gap: 12px;
+  --cmp-stepper-item-gap: 8px;
+  --cmp-stepper-sequence-radius: 9999px;
+  --cmp-stepper-sequence-border-active: #93C4FF;
+  --cmp-stepper-sequence-border-default: #E1E1E1;
+  --cmp-stepper-sequence-border-completed: #CCCCCC;
+  --cmp-stepper-sequence-border-witdh: 1px;
+  --cmp-stepper-sequence-icon: 12px;
+  --cmp-stepper-sequence-bg-active: #D9EAFF;
+  --cmp-stepper-sequence-bg-default: #FFFFFF;
+  --cmp-stepper-sequence-bg-completed: #E1E1E1;
+  --cmp-stepper-sequence-text-active: #0075FF;
+  --cmp-stepper-sequence-text-default: #AAAAAA;
+  --cmp-stepper-text-active: #0075FF;
+  --cmp-stepper-text-default: #888888;
 }
 @layer components {
   .typo-control-xs-default {

package/dist/theme.css

@@ -617,7 +617,7 @@
   --cmp-ghostButton-inverse-content: #FFFFFF;
   --cmp-ghostButton-inverse-disabled: #E1E1E1;
   --cmp-ghostButton-inverse-hover-bg: #FFFFFF;
-  --cmp-ghostButton-group-gap: 4px;
+  --cmp-ghostButton-group-gap: 8px;
   --cmp-textLink-sm-gap: 4px;
   --cmp-textLink-sm-icon: 16px;
   --cmp-textLink-md-gap: 8px;
@@ -678,6 +678,8 @@
   --cmp-checkbox-label-disabled: #888888;
   --cmp-checkbox-bg-disabled: #E1E1E1;
   --cmp-checkbox-border-disabled: #CCCCCC;
+  --cmp-checkbox-group-gap-horizontal: 24px;
+  --cmp-checkbox-group-gap-vertical: 8px;
   --cmp-radio-size: 16px;
   --cmp-radio-radius: 9999px;
   --cmp-radio-borderWidth: 1px;
@@ -694,6 +696,8 @@
   --cmp-radio-dot-size: 10px;
   --cmp-radio-label-default: #222222;
   --cmp-radio-label-disabled: #888888;
+  --cmp-radio-group-gap-horizontal: 24px;
+  --cmp-radio-group-gap-vertical: 8px;
   --cmp-radioButton-xs-height: 24px;
   --cmp-radioButton-xs-paddingX: 8px;
   --cmp-radioButton-sm-height: 28px;
@@ -954,6 +958,7 @@
   --cmp-tag-indigo-bg: #EFF6FF;
   --cmp-tag-grey-content: #737373;
   --cmp-tag-grey-bg: #EEEEEE;
+  --cmp-tag-group-gap: 8px;
   --cmp-badge-size: 6px;
   --cmp-badge-radius: 9999px;
   --cmp-badge-red: #FB4444;
@@ -1062,6 +1067,22 @@
   --cmp-popup-bg: #EEEEEE;
   --cmp-drawer-bg: #F6F6F6;
   --cmp-drawer-body-border: #E1E1E1;
+  --cmp-callout-radius: 8px;
+  --cmp-callout-border-width: 1px;
+  --cmp-callout-body-gap: 2px;
+  --cmp-callout-body-paddingX: 12px;
+  --cmp-callout-body-paddingY: 8px;
+  --cmp-callout-default-bg: #F9F9F9;
+  --cmp-callout-default-border: #E1E1E1;
+  --cmp-callout-default-content: #555555;
+  --cmp-callout-danger-bg: #FCEFEF;
+  --cmp-callout-danger-border: #FFB5B5;
+  --cmp-callout-danger-content: #222222;
+  --cmp-callout-danger-title-bg: #FB4444;
+  --cmp-callout-danger-title-paddingX: 24px;
+  --cmp-callout-danger-title-gap: 2px;
+  --cmp-callout-danger-title-color: #FFFFFF;
+  --cmp-callout-danger-title-icon: 24px;
   --cmp-guide-gap: 4px;
   --cmp-guide-button-height: 28px;
   --cmp-guide-button-paddingX: 12px;
@@ -1081,7 +1102,6 @@
   --cmp-guide-contents-paddingY: 20px;
   --cmp-guide-contents-gap: 12px;
   --cmp-guide-contents-title-gap: 8px;
-  --cmp-guide-contents-row-gap: 8px;
   --cmp-guide-contents-body-gap: 2px;
   --cmp-guide-contents-typography-color: #222222;
   --cmp-guide-contents-icon: #00973C;
@@ -1109,9 +1129,10 @@
   --cmp-table-body-default-height: 44px;
   --cmp-table-body-default-paddingY: 8px;
   --cmp-table-body-dense-height: 32px;
-  --cmp-table-body-dense-paddingY: 6px;
-  --cmp-table-body-paddingX-default: 16px;
-  --cmp-table-body-paddingX-frame: 8px;
+  --cmp-table-body-paddingY-dense: 6px;
+  --cmp-table-body-paddingY-default: 8px;
+  --cmp-table-body-paddingX-default: 8px;
+  --cmp-table-body-paddingX-wide: 16px;
   --cmp-table-border-color: #E1E1E1;
   --cmp-table-border-width: 1px;
   --cmp-table-content-gap: 8px;
@@ -1205,22 +1226,25 @@
   --cmp-gnbBox-item-depth1-icon: 20px;
   --cmp-gnbBox-item-depth2-paddingLeft: 24px;
   --cmp-gnbBox-item-depth3-paddingLeft: 36px;
-  --cmp-callout-radius: 8px;
-  --cmp-callout-border-width: 1px;
-  --cmp-callout-body-gap: 2px;
-  --cmp-callout-body-paddingX: 12px;
-  --cmp-callout-body-paddingY: 8px;
-  --cmp-callout-default-bg: #F9F9F9;
-  --cmp-callout-default-border: #E1E1E1;
-  --cmp-callout-default-content: #555555;
-  --cmp-callout-danger-bg: #FCEFEF;
-  --cmp-callout-danger-border: #FFB5B5;
-  --cmp-callout-danger-content: #222222;
-  --cmp-callout-danger-title-bg: #FB4444;
-  --cmp-callout-danger-title-paddingX: 24px;
-  --cmp-callout-danger-title-gap: 2px;
-  --cmp-callout-danger-title-color: #FFFFFF;
-  --cmp-callout-danger-title-icon: 24px;
+  --cmp-stepper-sm-sequence-size: 20px;
+  --cmp-stepper-dash-width: 20px;
+  --cmp-stepper-dash-color: #888888;
+  --cmp-stepper-lg-sequence-size: 24px;
+  --cmp-stepper-container-gap: 12px;
+  --cmp-stepper-item-gap: 8px;
+  --cmp-stepper-sequence-radius: 9999px;
+  --cmp-stepper-sequence-border-active: #93C4FF;
+  --cmp-stepper-sequence-border-default: #E1E1E1;
+  --cmp-stepper-sequence-border-completed: #CCCCCC;
+  --cmp-stepper-sequence-border-witdh: 1px;
+  --cmp-stepper-sequence-icon: 12px;
+  --cmp-stepper-sequence-bg-active: #D9EAFF;
+  --cmp-stepper-sequence-bg-default: #FFFFFF;
+  --cmp-stepper-sequence-bg-completed: #E1E1E1;
+  --cmp-stepper-sequence-text-active: #0075FF;
+  --cmp-stepper-sequence-text-default: #AAAAAA;
+  --cmp-stepper-text-active: #0075FF;
+  --cmp-stepper-text-default: #888888;
 }
 
 /* 타이포그래피 프리셋 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [