sellmate-design-system-react 0.12.0 → 1.0.0

package/dist/styles.css

@@ -16,6 +16,7 @@
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-400: oklch(70.7% 0.022 261.325);
     --color-gray-500: oklch(55.1% 0.027 264.364);
+    --color-gray-600: oklch(44.6% 0.03 256.802);
     --color-gray-700: oklch(37.3% 0.034 259.733);
     --color-gray-900: oklch(21% 0.034 264.665);
     --color-black: #000000;
@@ -766,6 +767,9 @@
   .m-0 {
     margin: 0;
   }
+  .m-auto {
+    margin: auto;
+  }
   .mx-3 {
     margin-inline: calc(var(--spacing) * 3);
   }
@@ -943,6 +947,9 @@
   .h-screen {
     height: 100vh;
   }
+  .max-h-\[calc\(100dvh-48px\)\] {
+    max-height: calc(100dvh - 48px);
+  }
   .min-h-\(--cmp-chipInput-md-minHeight\) {
     min-height: var(--cmp-chipInput-md-minHeight);
   }
@@ -967,12 +974,12 @@
   .min-h-\[60px\] {
     min-height: 60px;
   }
-  .min-h-\[320px\] {
-    min-height: 320px;
-  }
   .min-h-\[328px\] {
     min-height: 328px;
   }
+  .min-h-\[min\(320px\,calc\(100dvh-48px\)\)\] {
+    min-height: min(320px, calc(100dvh - 48px));
+  }
   .min-h-\[var\(--cmp-datepicker-calendar-day-circle-size\)\] {
     min-height: var(--cmp-datepicker-calendar-day-circle-size);
   }
@@ -1102,6 +1109,9 @@
   .flex-1 {
     flex: 1;
   }
+  .flex-auto {
+    flex: auto;
+  }
   .flex-shrink-0 {
     flex-shrink: 0;
   }
@@ -1197,6 +1207,12 @@
   .grid-cols-\[repeat\(7\,var\(--cmp-datepicker-calendar-day-width\)\)\] {
     grid-template-columns: repeat(7,var(--cmp-datepicker-calendar-day-width));
   }
+  .grid-rows-\[0fr\] {
+    grid-template-rows: 0fr;
+  }
+  .grid-rows-\[1fr\] {
+    grid-template-rows: 1fr;
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -1236,6 +1252,9 @@
   .gap-\(--cmp-chipInput-chip-gap\) {
     gap: var(--cmp-chipInput-chip-gap);
   }
+  .gap-\(--cmp-expansionItem-title-gap\) {
+    gap: var(--cmp-expansionItem-title-gap);
+  }
   .gap-\(--cmp-field-addonLabel-gap\) {
     gap: var(--cmp-field-addonLabel-gap);
   }
@@ -1326,9 +1345,6 @@
   .gap-\[var\(--cmp-datepicker-calendar-time-unit-gap\)\] {
     gap: var(--cmp-datepicker-calendar-time-unit-gap);
   }
-  .gap-\[var\(--cmp-expansionItem-title-gap\)\] {
-    gap: var(--cmp-expansionItem-title-gap);
-  }
   .gap-\[var\(--cmp-filepicker-md-gap\)\] {
     gap: var(--cmp-filepicker-md-gap);
   }
@@ -1605,6 +1621,12 @@
     --tw-border-style: solid;
     border-style: solid;
   }
+  .\!border-\[\#93C4FF\] {
+    border-color: #93C4FF !important;
+  }
+  .border-\(--cmp-expansionItem-title-border\) {
+    border-color: var(--cmp-expansionItem-title-border);
+  }
   .border-\(--field-bc\) {
     border-color: var(--field-bc);
   }
@@ -1656,9 +1678,6 @@
   .border-\[color\:var\(--rd-border\)\] {
     border-color: var(--rd-border);
   }
-  .border-\[var\(--cmp-expansionItem-title-border\)\] {
-    border-color: var(--cmp-expansionItem-title-border);
-  }
   .border-\[var\(--cmp-timepicker-border-default\)\] {
     border-color: var(--cmp-timepicker-border-default);
   }
@@ -1683,6 +1702,9 @@
   .border-transparent {
     border-color: transparent;
   }
+  .bg-\(--cmp-expansionItem-title-bg-expanded\) {
+    background-color: var(--cmp-expansionItem-title-bg-expanded);
+  }
   .bg-\(--cmp-listBox-bg\) {
     background-color: var(--cmp-listBox-bg);
   }
@@ -1734,9 +1756,6 @@
   .bg-\[var\(--cmp-expansionItem-title-bg-default\)\] {
     background-color: var(--cmp-expansionItem-title-bg-default);
   }
-  .bg-\[var\(--cmp-expansionItem-title-bg-expanded\)\] {
-    background-color: var(--cmp-expansionItem-title-bg-expanded);
-  }
   .bg-\[var\(--cmp-listBox-bg\)\] {
     background-color: var(--cmp-listBox-bg);
   }
@@ -1836,6 +1855,9 @@
       background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
     }
   }
+  .p-\(--cmp-expansionItem-body-padding\) {
+    padding: var(--cmp-expansionItem-body-padding);
+  }
   .p-0 {
     padding: 0;
   }
@@ -1959,6 +1981,12 @@
   .py-\(--cmp-chipInput-sm-paddingY\) {
     padding-block: var(--cmp-chipInput-sm-paddingY);
   }
+  .py-\(--cmp-expansionItem-title-paddingY-dense\) {
+    padding-block: var(--cmp-expansionItem-title-paddingY-dense);
+  }
+  .py-\(--cmp-expansionItem-title-paddingY-normal\) {
+    padding-block: var(--cmp-expansionItem-title-paddingY-normal);
+  }
   .py-1 {
     padding-block: var(--spacing);
   }
@@ -2004,12 +2032,6 @@
   .py-\[var\(--cmp-datepicker-calendar-time-paddingY\)\] {
     padding-block: var(--cmp-datepicker-calendar-time-paddingY);
   }
-  .py-\[var\(--cmp-expansionItem-title-paddingY-dense\)\] {
-    padding-block: var(--cmp-expansionItem-title-paddingY-dense);
-  }
-  .py-\[var\(--cmp-expansionItem-title-paddingY-normal\)\] {
-    padding-block: var(--cmp-expansionItem-title-paddingY-normal);
-  }
   .py-\[var\(--cmp-modal-action-footer-paddingY\)\] {
     padding-block: var(--cmp-modal-action-footer-paddingY);
   }
@@ -2028,18 +2050,21 @@
   .pt-48 {
     padding-top: var(--spacing-48);
   }
+  .pr-\(--cmp-expansionItem-title-paddingX\) {
+    padding-right: var(--cmp-expansionItem-title-paddingX);
+  }
   .pr-\[12px\] {
     padding-right: 12px;
   }
   .pr-\[calc\(var\(--cmp-overlay-header-paddingX\)\+20px\)\] {
     padding-right: calc(var(--cmp-overlay-header-paddingX) + 20px);
   }
-  .pr-\[var\(--cmp-expansionItem-title-paddingX\)\] {
-    padding-right: var(--cmp-expansionItem-title-paddingX);
-  }
   .pb-\[var\(--cmp-modal-action-body-paddingBottom\)\] {
     padding-bottom: var(--cmp-modal-action-body-paddingBottom);
   }
+  .pl-\(--cmp-expansionItem-title-paddingX\) {
+    padding-left: var(--cmp-expansionItem-title-paddingX);
+  }
   .pl-\[26px\] {
     padding-left: 26px;
   }
@@ -2052,9 +2077,6 @@
   .pl-\[calc\(var\(--cmp-expansionItem-title-paddingX\)\+64px\)\] {
     padding-left: calc(var(--cmp-expansionItem-title-paddingX) + 64px);
   }
-  .pl-\[var\(--cmp-expansionItem-title-paddingX\)\] {
-    padding-left: var(--cmp-expansionItem-title-paddingX);
-  }
   .pl-\[var\(--cmp-overlay-header-paddingX\)\] {
     padding-left: var(--cmp-overlay-header-paddingX);
   }
@@ -2224,6 +2246,9 @@
   .text-\(--cmp-chipInput-text-placeholder\) {
     color: var(--cmp-chipInput-text-placeholder);
   }
+  .text-\(--cmp-expansionItem-title-text-expanded\) {
+    color: var(--cmp-expansionItem-title-text-expanded);
+  }
   .text-\(--cmp-field-errorMessage-color\) {
     color: var(--cmp-field-errorMessage-color);
   }
@@ -2356,9 +2381,6 @@
   .text-\[var\(--cmp-expansionItem-title-text-default\)\] {
     color: var(--cmp-expansionItem-title-text-default);
   }
-  .text-\[var\(--cmp-expansionItem-title-text-expanded\)\] {
-    color: var(--cmp-expansionItem-title-text-expanded);
-  }
   .text-\[var\(--cmp-field-hint-color\)\] {
     color: var(--cmp-field-hint-color);
   }
@@ -2389,6 +2411,9 @@
   .text-gray-500 {
     color: var(--color-gray-500);
   }
+  .text-gray-600 {
+    color: var(--color-gray-600);
+  }
   .text-gray-900 {
     color: var(--color-gray-900);
   }
@@ -2413,6 +2438,9 @@
   .text-inherit {
     color: inherit;
   }
+  .text-red-75 {
+    color: var(--color-red-75);
+  }
   .text-red-700 {
     color: var(--color-red-700);
   }
@@ -2493,6 +2521,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[grid-template-rows\] {
+    transition-property: grid-template-rows;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[stroke-dasharray\] {
     transition-property: stroke-dasharray;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2730,6 +2763,13 @@
       }
     }
   }
+  .hover\:border-\[\#AAAAAA\] {
+    &:hover {
+      @media (hover: hover) {
+        border-color: #AAAAAA;
+      }
+    }
+  }
   .hover\:border-\[color\:var\(--cmp-checkbox-unchecked-border-hover\)\] {
     &:hover {
       @media (hover: hover) {
@@ -2772,24 +2812,24 @@
       }
     }
   }
-  .hover\:bg-\[var\(--btn-bg-hover\)\] {
+  .hover\:bg-\(--cmp-expansionItem-title-bg-hover\) {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--btn-bg-hover);
+        background-color: var(--cmp-expansionItem-title-bg-hover);
       }
     }
   }
-  .hover\:bg-\[var\(--cmp-checkbox-unchecked-bg-hover\)\] {
+  .hover\:bg-\[var\(--btn-bg-hover\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--cmp-checkbox-unchecked-bg-hover);
+        background-color: var(--btn-bg-hover);
       }
     }
   }
-  .hover\:bg-\[var\(--cmp-expansionItem-title-bg-hover\)\] {
+  .hover\:bg-\[var\(--cmp-checkbox-unchecked-bg-hover\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--cmp-expansionItem-title-bg-hover);
+        background-color: var(--cmp-checkbox-unchecked-bg-hover);
       }
     }
   }
@@ -3149,6 +3189,11 @@
       scrollbar-color: var(--color-grey-45) var(--color-white);
     }
   }
+  .motion-reduce\:transition-none {
+    @media (prefers-reduced-motion: reduce) {
+      transition-property: none;
+    }
+  }
   .\[\&\:\:-webkit-scrollbar\]\:hidden {
     &::-webkit-scrollbar {
       display: none;
@@ -3246,6 +3291,11 @@
       border-left: 1px solid var(--sys-color-border-default);
     }
   }
+  .\[\&\:has\(\>button\:hover\)\]\:border-\[\#AAAAAA\] {
+    &:has(>button:hover) {
+      border-color: #AAAAAA;
+    }
+  }
   .\[\&\>button\]\:bg-\[var\(--sys-color-bg-tableHeader\)\] {
     &>button {
       background-color: var(--sys-color-bg-tableHeader);

package/package.json

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