unifyedx-storybook-new 0.1.33 → 0.1.34

package/dist/unifyedx-storybook-new.css

@@ -81,6 +81,15 @@
     --color-indigo-600: oklch(51.1% .262 276.966);
     --color-purple-500: oklch(62.7% .265 303.9);
     --color-gray-50: oklch(98.5% .002 247.839);
+    --color-gray-100: oklch(96.7% .003 264.542);
+    --color-gray-200: oklch(92.8% .006 264.531);
+    --color-gray-300: oklch(87.2% .01 258.338);
+    --color-gray-400: oklch(70.7% .022 261.325);
+    --color-gray-500: oklch(55.1% .027 264.364);
+    --color-gray-600: oklch(44.6% .03 256.802);
+    --color-gray-700: oklch(37.3% .034 259.733);
+    --color-gray-800: oklch(27.8% .033 256.848);
+    --color-gray-900: oklch(21% .034 264.665);
     --color-black: #000;
     --color-white: #fff;
     --spacing: .25rem;
@@ -95,10 +104,12 @@
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
+    --font-weight-bold: 700;
     --radius-sm: .25rem;
     --radius-md: .375rem;
     --radius-lg: .5rem;
     --radius-xl: .75rem;
+    --radius-2xl: 1rem;
     --ease-in: cubic-bezier(.4, 0, 1, 1);
     --ease-out: cubic-bezier(0, 0, .2, 1);
     --ease-in-out: cubic-bezier(.4, 0, .2, 1);
@@ -394,6 +405,10 @@
     position: sticky;
   }
 
+  .inset-0 {
+    inset: calc(var(--spacing) * 0);
+  }
+
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
@@ -438,6 +453,44 @@
     grid-column: span 3 / span 3;
   }
 
+  .container {
+    width: 100%;
+  }
+
+  @media (min-width: 40rem) {
+    .container {
+      max-width: 40rem;
+    }
+  }
+
+  @media (min-width: 48rem) {
+    .container {
+      max-width: 48rem;
+    }
+  }
+
+  @media (min-width: 64rem) {
+    .container {
+      max-width: 64rem;
+    }
+  }
+
+  @media (min-width: 80rem) {
+    .container {
+      max-width: 80rem;
+    }
+  }
+
+  @media (min-width: 96rem) {
+    .container {
+      max-width: 96rem;
+    }
+  }
+
+  .mx-5 {
+    margin-inline: calc(var(--spacing) * 5);
+  }
+
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
@@ -458,10 +511,18 @@
     margin-right: calc(var(--spacing) * 2);
   }
 
+  .mr-3 {
+    margin-right: calc(var(--spacing) * 3);
+  }
+
   .\!mb-0 {
     margin-bottom: calc(var(--spacing) * 0) !important;
   }
 
+  .mb-5 {
+    margin-bottom: calc(var(--spacing) * 5);
+  }
+
   .-ml-4 {
     margin-left: calc(var(--spacing) * -4);
   }
@@ -542,6 +603,14 @@
     min-height: 38px;
   }
 
+  .min-h-full {
+    min-height: 100%;
+  }
+
+  .\!w-\[70px\] {
+    width: 70px !important;
+  }
+
   .w-3\/5 {
     width: 60%;
   }
@@ -729,7 +798,7 @@
   }
 
   :where(.divide-gray-200 > :not(:last-child)) {
-    border-color: var(--gray200);
+    border-color: var(--color-gray-200);
   }
 
   .truncate {
@@ -754,6 +823,10 @@
     border-radius: .25rem;
   }
 
+  .rounded-2xl {
+    border-radius: var(--radius-2xl);
+  }
+
   .rounded-full {
     border-radius: 3.40282e38px;
   }
@@ -800,15 +873,15 @@
   }
 
   .border-gray-200 {
-    border-color: var(--gray200);
+    border-color: var(--color-gray-200);
   }
 
   .border-gray-300 {
-    border-color: var(--gray300);
+    border-color: var(--color-gray-300);
   }
 
   .border-gray-400 {
-    border-color: var(--gray400);
+    border-color: var(--color-gray-400);
   }
 
   .border-transparent {
@@ -819,6 +892,16 @@
     border-color: var(--color-white);
   }
 
+  .bg-black\/30 {
+    background-color: #0000004d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-black\/30 {
+      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
+    }
+  }
+
   .bg-blue-100 {
     background-color: var(--color-blue-100);
   }
@@ -832,15 +915,11 @@
   }
 
   .bg-gray-100 {
-    background-color: var(--gray100);
+    background-color: var(--color-gray-100);
   }
 
   .bg-gray-200 {
-    background-color: var(--gray200);
-  }
-
-  .bg-indigo-600 {
-    background-color: var(--color-indigo-600);
+    background-color: var(--color-gray-200);
   }
 
   .bg-red-100 {
@@ -871,6 +950,10 @@
     padding: calc(var(--spacing) * 4);
   }
 
+  .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
+
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
@@ -887,6 +970,10 @@
     padding-inline: calc(var(--spacing) * 4);
   }
 
+  .px-5 {
+    padding-inline: calc(var(--spacing) * 5);
+  }
+
   .px-\[12px\] {
     padding-inline: 12px;
   }
@@ -947,6 +1034,10 @@
     text-align: left;
   }
 
+  .align-middle {
+    vertical-align: middle;
+  }
+
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -977,6 +1068,11 @@
     line-height: calc(var(--spacing) * 6);
   }
 
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
@@ -1013,37 +1109,33 @@
   }
 
   .text-gray-400 {
-    color: var(--gray400);
+    color: var(--color-gray-400);
   }
 
   .text-gray-500 {
-    color: var(--gray500);
+    color: var(--color-gray-500);
   }
 
   .text-gray-600 {
-    color: var(--gray600);
+    color: var(--color-gray-600);
   }
 
   .text-gray-700 {
-    color: var(--gray700);
+    color: var(--color-gray-700);
   }
 
   .text-gray-800 {
-    color: var(--gray800);
+    color: var(--color-gray-800);
   }
 
   .text-gray-900 {
-    color: var(--darkgray200);
+    color: var(--color-gray-900);
   }
 
   .text-green-500 {
     color: var(--color-green-500);
   }
 
-  .text-indigo-600 {
-    color: var(--color-indigo-600);
-  }
-
   .text-purple-500 {
     color: var(--color-purple-500);
   }
@@ -1091,6 +1183,11 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  .shadow-xl {
+    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   .ring, .ring-1 {
     --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1101,7 +1198,7 @@
   }
 
   .ring-gray-300 {
-    --tw-ring-color: var(--gray300);
+    --tw-ring-color: var(--color-gray-300);
   }
 
   .ring-red-500 {
@@ -1131,6 +1228,12 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .transition-colors {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1213,7 +1316,7 @@
     }
 
     .hover\:bg-gray-100:hover {
-      background-color: var(--gray100);
+      background-color: var(--color-gray-100);
     }
 
     .hover\:bg-white\/\[0\.6\]:hover {
@@ -1231,11 +1334,11 @@
     }
 
     .hover\:text-gray-800:hover {
-      color: var(--gray800);
+      color: var(--color-gray-800);
     }
 
     .hover\:text-gray-900:hover {
-      color: var(--darkgray200);
+      color: var(--color-gray-900);
     }
 
     .hover\:text-red-500:hover {
@@ -1307,14 +1410,34 @@
       line-height: calc(var(--spacing) * 6);
     }
   }
+
+  @media (min-width: 48rem) {
+    .md\:min-w-96 {
+      min-width: calc(var(--spacing) * 96);
+    }
+  }
+
+  @media (min-width: 64rem) {
+    .lg\:mx-0 {
+      margin-inline: calc(var(--spacing) * 0);
+    }
+
+    .lg\:w-\[36rem\] {
+      width: 36rem;
+    }
+
+    .lg\:min-w-\[36rem\] {
+      min-width: 36rem;
+    }
+  }
 }
 
 :root {
   --font-primary: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-  --primaryColor: #525252;
+  --primaryColor: #fc0;
   --secondaryColor: #1e1e1e;
   --secondaryTextColor: #1e1e1e;
-  --textColor: #fff;
+  --textColor: #1e1e1e;
   --linkColor: #1c61a5;
   --color-text-primary: #1a1a1a;
   --color-text-secondary: #4d4d4d;
@@ -1667,30 +1790,33 @@ body {
 
 .checkbox-box {
   background-color: #fff;
-  border: 2px solid #9ca3af;
+  border: 1px solid #9ca3af;
   border-radius: .25rem;
   flex-shrink: 0;
   justify-content: center;
   align-items: center;
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1rem;
+  height: 1rem;
   transition: background-color .2s, border-color .2s;
   display: flex;
+  position: relative;
+  overflow: hidden;
 }
 
 .checkbox-check-icon {
   color: #fff;
-  width: 1rem;
-  height: 1rem;
+  width: .8rem;
+  height: .8rem;
+  position: absolute;
 }
 
 .checkbox-box--checked {
-  background-color: #2563eb;
-  border-color: #2563eb;
+  background-color: #1e2939;
+  border-color: #1e2939;
 }
 
 .checkbox-input:focus-visible + .checkbox-box {
-  border-color: #2563eb;
+  border-color: #1e2939;
   outline: none;
   box-shadow: 0 0 0 3px #2563eb4d;
 }
@@ -1708,7 +1834,7 @@ body {
   color: #374151;
   -webkit-user-select: none;
   user-select: none;
-  font-size: 1rem;
+  font-size: .8rem;
 }
 
 .checkbox-error-message {
@@ -4181,10 +4307,8 @@ body {
 }
 
 .options-menu-item {
-  color: #374151;
   cursor: pointer;
   text-align: left;
-  background: none;
   border: none;
   border-radius: .25rem;
   align-items: center;
@@ -4195,11 +4319,6 @@ body {
   display: flex;
 }
 
-.options-menu-item.active {
-  color: #fff;
-  background-color: #2563eb;
-}
-
 .options-menu-item:disabled {
   color: #9ca3af;
   cursor: not-allowed;
@@ -5342,9 +5461,9 @@ body {
 
 /* Our custom checkbox box */
 .checkbox-box {
-  width: 1.25rem; /* 20px */
-  height: 1.25rem; /* 20px */
-  border: 2px solid #9ca3af; /* gray-400 */
+  width: 1rem; /* 16px */
+  height: 1rem; /* 16px */
+  border: 1px solid #9ca3af; /* gray-400 */
   border-radius: 0.25rem;
   background-color: white;
   display: flex;
@@ -5352,27 +5471,30 @@ body {
   justify-content: center;
   transition: background-color 0.2s, border-color 0.2s;
   flex-shrink: 0; /* Prevents the box from shrinking */
+  overflow: hidden;
+  position: relative;
 }
 
 /* Style for the checkmark icon */
 .checkbox-check-icon {
-  width: 1rem;
-  height: 1rem;
+  width: 0.8rem;
+  height: 0.8rem;
   color: white;
+  position: absolute;
 }
 
 /* --- States --- */
 
 /* Checked state */
 .checkbox-box--checked {
-  background-color: #2563eb; /* blue-600 */
-  border-color: #2563eb;
+  background-color: #1e2939; /* blue-600 */
+  border-color: #1e2939;
 }
 
 /* Focus state (when the hidden input is focused) */
 .checkbox-input:focus-visible + .checkbox-box {
   outline: none;
-  border-color: #2563eb;
+  border-color: #1e2939;
   box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
 }
 
@@ -5387,7 +5509,7 @@ body {
 
 /* Label styles */
 .checkbox-label-text {
-  font-size: 1rem;
+  font-size: .8rem;
   color: #374151;
   user-select: none;
 }
@@ -8203,19 +8325,18 @@ body {
   width: 100%;
   padding: 0.5rem 0.75rem;
   font-size: 0.875rem;
-  color: #374151; /* gray-700 */
   border-radius: 0.25rem;
   transition: background-color 0.15s, color 0.15s;
-  background: none;
   border: none;
   cursor: pointer;
   text-align: left;
 }
 
-.options-menu-item.active {
-  background-color: #2563eb;
+/* .options-menu-item.active {
+  /* background-color: #2563eb;
   color: white;
-}
+} */
+
 .options-menu-item:disabled {
   color: #9ca3af;
   cursor: not-allowed;