sellmate-design-system-react 0.4.0 → 0.6.0

package/dist/styles.css

@@ -38,6 +38,7 @@
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -784,6 +785,9 @@
   .-mr-px {
     margin-right: -1px;
   }
+  .mr-\[8px\] {
+    margin-right: 8px;
+  }
   .mb-8 {
     margin-bottom: var(--spacing-8);
   }
@@ -880,6 +884,9 @@
   .h-\[var\(--cmp-datepicker-calendar-range-height\)\] {
     height: var(--cmp-datepicker-calendar-range-height);
   }
+  .h-\[var\(--cmp-datepicker-sm-height\)\] {
+    height: var(--cmp-datepicker-sm-height);
+  }
   .h-\[var\(--cmp-guide-button-height\)\] {
     height: var(--cmp-guide-button-height);
   }
@@ -949,12 +956,18 @@
   .w-\[16px\] {
     width: 16px;
   }
+  .w-\[20px\] {
+    width: 20px;
+  }
   .w-\[24px\] {
     width: 24px;
   }
   .w-\[32px\] {
     width: 32px;
   }
+  .w-\[40px\] {
+    width: 40px;
+  }
   .w-\[61px\] {
     width: 61px;
   }
@@ -1244,6 +1257,18 @@
   .gap-\[var\(--cmp-datepicker-calendar-range-panelGap\)\] {
     gap: var(--cmp-datepicker-calendar-range-panelGap);
   }
+  .gap-\[var\(--cmp-datepicker-calendar-time-date-gap\)\] {
+    gap: var(--cmp-datepicker-calendar-time-date-gap);
+  }
+  .gap-\[var\(--cmp-datepicker-calendar-time-gap\)\] {
+    gap: var(--cmp-datepicker-calendar-time-gap);
+  }
+  .gap-\[var\(--cmp-datepicker-calendar-time-section-gap\)\] {
+    gap: var(--cmp-datepicker-calendar-time-section-gap);
+  }
+  .gap-\[var\(--cmp-datepicker-calendar-time-unit-gap\)\] {
+    gap: var(--cmp-datepicker-calendar-time-unit-gap);
+  }
   .gap-\[var\(--cmp-filepicker-md-gap\)\] {
     gap: var(--cmp-filepicker-md-gap);
   }
@@ -1370,6 +1395,12 @@
   .rounded-\[var\(--cmp-datepicker-calendar-radius\)\] {
     border-radius: var(--cmp-datepicker-calendar-radius);
   }
+  .rounded-\[var\(--cmp-datepicker-calendar-time-radius\)\] {
+    border-radius: var(--cmp-datepicker-calendar-time-radius);
+  }
+  .rounded-\[var\(--cmp-datepicker-sm-radius\)\] {
+    border-radius: var(--cmp-datepicker-sm-radius);
+  }
   .rounded-\[var\(--cmp-guide-button-radius\)\] {
     border-radius: var(--cmp-guide-button-radius);
   }
@@ -1516,6 +1547,9 @@
   .border-\[color\:var\(--cmp-checkbox-unchecked-border-default\)\] {
     border-color: var(--cmp-checkbox-unchecked-border-default);
   }
+  .border-\[color\:var\(--cmp-datepicker-border-default\)\] {
+    border-color: var(--cmp-datepicker-border-default);
+  }
   .border-\[color\:var\(--cmp-listItem-depth1-border-color\)\] {
     border-color: var(--cmp-listItem-depth1-border-color);
   }
@@ -1579,6 +1613,9 @@
   .bg-\[var\(--cmp-checkbox-unchecked-bg-default\)\] {
     background-color: var(--cmp-checkbox-unchecked-bg-default);
   }
+  .bg-\[var\(--cmp-datepicker-bg-default\)\] {
+    background-color: var(--cmp-datepicker-bg-default);
+  }
   .bg-\[var\(--cmp-datepicker-calendar-bg\)\] {
     background-color: var(--cmp-datepicker-calendar-bg);
   }
@@ -1591,6 +1628,12 @@
   .bg-\[var\(--cmp-datepicker-calendar-range-divider\)\] {
     background-color: var(--cmp-datepicker-calendar-range-divider);
   }
+  .bg-\[var\(--cmp-datepicker-calendar-time-bg-default\)\] {
+    background-color: var(--cmp-datepicker-calendar-time-bg-default);
+  }
+  .bg-\[var\(--cmp-datepicker-calendar-time-bg-selected\)\] {
+    background-color: var(--cmp-datepicker-calendar-time-bg-selected);
+  }
   .bg-\[var\(--cmp-listBox-bg\)\] {
     background-color: var(--cmp-listBox-bg);
   }
@@ -1687,9 +1730,6 @@
   .p-20 {
     padding: var(--spacing-20);
   }
-  .p-24 {
-    padding: var(--spacing-24);
-  }
   .p-32 {
     padding: var(--spacing-32);
   }
@@ -1750,6 +1790,9 @@
   .px-\[var\(--cmp-chip-paddingX\)\] {
     padding-inline: var(--cmp-chip-paddingX);
   }
+  .px-\[var\(--cmp-datepicker-calendar-time-paddingX\)\] {
+    padding-inline: var(--cmp-datepicker-calendar-time-paddingX);
+  }
   .px-\[var\(--cmp-guide-button-paddingX\)\] {
     padding-inline: var(--cmp-guide-button-paddingX);
   }
@@ -1822,6 +1865,9 @@
   .py-\[var\(--cmp-datepicker-calendar-day-dot-paddingY\)\] {
     padding-block: var(--cmp-datepicker-calendar-day-dot-paddingY);
   }
+  .py-\[var\(--cmp-datepicker-calendar-time-paddingY\)\] {
+    padding-block: var(--cmp-datepicker-calendar-time-paddingY);
+  }
   .py-\[var\(--cmp-modal-action-footer-paddingY\)\] {
     padding-block: var(--cmp-modal-action-footer-paddingY);
   }
@@ -2049,9 +2095,18 @@
   .text-\[color\:var\(--cmp-datepicker-calendar-day-select-text\)\] {
     color: var(--cmp-datepicker-calendar-day-select-text);
   }
+  .text-\[color\:var\(--cmp-datepicker-calendar-time-date-label\)\] {
+    color: var(--cmp-datepicker-calendar-time-date-label);
+  }
+  .text-\[color\:var\(--cmp-datepicker-calendar-time-date-unit\)\] {
+    color: var(--cmp-datepicker-calendar-time-date-unit);
+  }
   .text-\[color\:var\(--cmp-datepicker-calendar-week-color\)\] {
     color: var(--cmp-datepicker-calendar-week-color);
   }
+  .text-\[color\:var\(--cmp-datepicker-text-default\)\] {
+    color: var(--cmp-datepicker-text-default);
+  }
   .text-\[color\:var\(--cmp-filepicker-text-placeholder\)\] {
     color: var(--cmp-filepicker-text-placeholder);
   }
@@ -2294,6 +2349,10 @@
     --tw-ease: linear;
     transition-timing-function: linear;
   }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -2331,6 +2390,11 @@
       color: var(--cmp-chipInput-text-placeholder);
     }
   }
+  .placeholder\:text-\[color\:var\(--cmp-datepicker-text-disabled\)\] {
+    &::placeholder {
+      color: var(--cmp-datepicker-text-disabled);
+    }
+  }
   .placeholder\:text-\[color\:var\(--cmp-numberInput-text-placeholder\)\] {
     &::placeholder {
       color: var(--cmp-numberInput-text-placeholder);
@@ -2616,6 +2680,11 @@
       }
     }
   }
+  .focus\:border-\[color\:var\(--cmp-datepicker-border-focus\)\] {
+    &:focus {
+      border-color: var(--cmp-datepicker-border-focus);
+    }
+  }
   .focus\:bg-\[var\(--cmp-listItem-bg-hover\)\] {
     &:focus {
       background-color: var(--cmp-listItem-bg-hover);
@@ -3745,13 +3814,13 @@
   --cmp-gnb-belt-item-depth1-icon: 16px;
   --cmp-gnb-belt-item-depth2-paddingLeft: 32px;
   --cmp-gnb-belt-item-depth3-paddingLeft: 44px;
-  --cmp-gnb-rail-width: 68px;
   --cmp-gnb-rail-padding: 12px;
   --cmp-gnb-rail-gap: 16px;
   --cmp-gnb-rail-item-paddingTop: 4px;
   --cmp-gnb-rail-item-paddingBottom: 2px;
   --cmp-gnb-rail-item-radius: 8px;
   --cmp-gnb-rail-item-icon: 24px;
+  --cmp-gnb-rail-item-width: 44px;
 }
 @layer components {
   .typo-control-xs-default {

package/dist/theme.css

@@ -1294,13 +1294,13 @@
   --cmp-gnb-belt-item-depth1-icon: 16px;
   --cmp-gnb-belt-item-depth2-paddingLeft: 32px;
   --cmp-gnb-belt-item-depth3-paddingLeft: 44px;
-  --cmp-gnb-rail-width: 68px;
   --cmp-gnb-rail-padding: 12px;
   --cmp-gnb-rail-gap: 16px;
   --cmp-gnb-rail-item-paddingTop: 4px;
   --cmp-gnb-rail-item-paddingBottom: 2px;
   --cmp-gnb-rail-item-radius: 8px;
   --cmp-gnb-rail-item-icon: 24px;
+  --cmp-gnb-rail-item-width: 44px;
 }
 
 /* 타이포그래피 프리셋 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [
@@ -53,6 +53,8 @@
     "format:fix": "prettier --write \"src/**/*.{ts,tsx,css,json,md}\"",
     "check:tokens": "node scripts/check-hardcoded.mjs",
     "check:refs": "node scripts/check-refs.mjs",
+    "version": "node scripts/version.mjs",
+    "version:dry": "node scripts/version.mjs --dry-run",
     "clean": "rm -rf dist storybook-static"
   },
   "peerDependencies": {