sellmate-design-system-react 9.0.0-beta.2 → 9.0.0-beta.3

package/dist/llms-full.txt

@@ -2297,9 +2297,10 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `value?` | `string \| null` | — | 선택 날짜 (YYYY-MM-DD) |
+| `value?` | `string \| null` | — | 선택 값 (date: YYYY-MM-DD, month: YYYY-MM, year: YYYY) |
+| `mode?` | `SDatePickerMode` | `'date'` | 선택 모드 |
 | `size?` | `SDatePickerSize` | `'sm'` |  |
-| `placeholder?` | `string` | `'YYYY-MM-DD'` |  |
+| `placeholder?` | `string` | — |  |
 | `selectable?` | `[string, string]` | — | 선택 가능 범위 [시작, 종료] |
 | `disabled?` | `boolean` | `false` |  |
 | `width?` | `number \| string` | — |  |
@@ -2324,7 +2325,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 
 | Event | Type | Description |
 |-------|------|-------------|
-| `onValueChange` | `(date: string) => void` | 선택 변경 (sdUpdate) |
+| `onValueChange` | `(value: string) => void` | 선택 변경 (sdUpdate) |
 | `onViewChange` | `(view: { year: number; month: number }) => void` | 보이는 연·월 변경 (sdViewChange) |
 
 ## Dependencies

package/dist/styles.css

@@ -1179,6 +1179,9 @@
   .w-\[calc\(14px\+var\(--cmp-tree-item-arrow-icon\)\)\] {
     width: calc(14px + var(--cmp-tree-item-arrow-icon));
   }
+  .w-\[var\(--border-width-1\)\] {
+    width: var(--border-width-1);
+  }
   .w-\[var\(--cmp-checkbox-size\)\] {
     width: var(--cmp-checkbox-size);
   }
@@ -1191,6 +1194,12 @@
   .w-\[var\(--cmp-datepicker-calendar-day-width\)\] {
     width: var(--cmp-datepicker-calendar-day-width);
   }
+  .w-\[var\(--cmp-datepicker-mode-year-width\)\] {
+    width: var(--cmp-datepicker-mode-year-width);
+  }
+  .w-\[var\(--cmp-datepicker-mode-yearMonth-column-width\)\] {
+    width: var(--cmp-datepicker-mode-yearMonth-column-width);
+  }
   .w-\[var\(--cmp-pagination-height\)\] {
     width: var(--cmp-pagination-height);
   }
@@ -1605,6 +1614,12 @@
   .gap-\[var\(--cmp-datepicker-calendar-time-unit-gap\)\] {
     gap: var(--cmp-datepicker-calendar-time-unit-gap);
   }
+  .gap-\[var\(--cmp-datepicker-mode-item-gap\)\] {
+    gap: var(--cmp-datepicker-mode-item-gap);
+  }
+  .gap-\[var\(--cmp-datepicker-mode-yearMonth-gap\)\] {
+    gap: var(--cmp-datepicker-mode-yearMonth-gap);
+  }
   .gap-\[var\(--cmp-filepicker-md-gap\)\] {
     gap: var(--cmp-filepicker-md-gap);
   }
@@ -1750,6 +1765,9 @@
   .overflow-y-hidden {
     overflow-y: hidden;
   }
+  .overscroll-contain {
+    overscroll-behavior: contain;
+  }
   .rounded {
     border-radius: 0.25rem;
   }
@@ -1798,6 +1816,9 @@
   .rounded-\[var\(--cmp-datepicker-calendar-time-radius\)\] {
     border-radius: var(--cmp-datepicker-calendar-time-radius);
   }
+  .rounded-\[var\(--cmp-datepicker-mode-radius\)\] {
+    border-radius: var(--cmp-datepicker-mode-radius);
+  }
   .rounded-\[var\(--cmp-datepicker-sm-radius\)\] {
     border-radius: var(--cmp-datepicker-sm-radius);
   }
@@ -2245,6 +2266,12 @@
   .bg-\[var\(--cmp-datepicker-calendar-time-bg-selected\)\] {
     background-color: var(--cmp-datepicker-calendar-time-bg-selected);
   }
+  .bg-\[var\(--cmp-datepicker-mode-bg\)\] {
+    background-color: var(--cmp-datepicker-mode-bg);
+  }
+  .bg-\[var\(--cmp-datepicker-mode-item-bg-default\)\] {
+    background-color: var(--cmp-datepicker-mode-item-bg-default);
+  }
   .bg-\[var\(--cmp-drawer-bg\)\] {
     background-color: var(--cmp-drawer-bg);
   }
@@ -2545,6 +2572,9 @@
   .px-\[var\(--cmp-datepicker-calendar-time-paddingX\)\] {
     padding-inline: var(--cmp-datepicker-calendar-time-paddingX);
   }
+  .px-\[var\(--cmp-datepicker-mode-item-paddingX\)\] {
+    padding-inline: var(--cmp-datepicker-mode-item-paddingX);
+  }
   .px-\[var\(--cmp-guide-button-paddingX\)\] {
     padding-inline: var(--cmp-guide-button-paddingX);
   }
@@ -2662,6 +2692,9 @@
   .py-\[var\(--cmp-datepicker-calendar-time-paddingY\)\] {
     padding-block: var(--cmp-datepicker-calendar-time-paddingY);
   }
+  .py-\[var\(--cmp-datepicker-mode-item-paddingY\)\] {
+    padding-block: var(--cmp-datepicker-mode-item-paddingY);
+  }
   .py-\[var\(--cmp-overlay-footer-paddingY\)\] {
     padding-block: var(--cmp-overlay-footer-paddingY);
   }
@@ -2776,6 +2809,9 @@
   .align-middle {
     vertical-align: middle;
   }
+  .font-base {
+    font-family: var(--font-base);
+  }
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -3074,6 +3110,15 @@
   .text-\[color\:var\(--cmp-datepicker-calendar-week-color\)\] {
     color: var(--cmp-datepicker-calendar-week-color);
   }
+  .text-\[color\:var\(--cmp-datepicker-mode-item-content-default\)\] {
+    color: var(--cmp-datepicker-mode-item-content-default);
+  }
+  .text-\[color\:var\(--cmp-datepicker-mode-item-content-disabled\)\] {
+    color: var(--cmp-datepicker-mode-item-content-disabled);
+  }
+  .text-\[color\:var\(--cmp-datepicker-mode-item-content-selected\)\] {
+    color: var(--cmp-datepicker-mode-item-content-selected);
+  }
   .text-\[color\:var\(--cmp-datepicker-text-default\)\] {
     color: var(--cmp-datepicker-text-default);
   }
@@ -3855,6 +3900,13 @@
       }
     }
   }
+  .hover\:bg-\[var\(--cmp-datepicker-mode-item-bg-hover\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--cmp-datepicker-mode-item-bg-hover);
+      }
+    }
+  }
   .hover\:bg-\[var\(--cmp-listBoxItem-bg-hover\)\] {
     &:hover {
       @media (hover: hover) {
@@ -3950,6 +4002,13 @@
       }
     }
   }
+  .hover\:text-\[color\:var\(--cmp-datepicker-mode-item-content-hover\)\] {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--cmp-datepicker-mode-item-content-hover);
+      }
+    }
+  }
   .hover\:text-\[color\:var\(--cmp-listBoxItem-content-hover\)\] {
     &:hover {
       @media (hover: hover) {
@@ -4996,6 +5055,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;

package/dist/theme.css

@@ -893,6 +893,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;

package/package.json

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