@segmentify/ui 0.0.24 → 0.0.25

package/dist/ui.css

@@ -20,9 +20,6 @@
     --ui-color-gray-400: #9fa6b2;
     --ui-color-gray-500: #6b7280;
     --ui-color-gray-600: #4b5563;
-    --ui-color-zinc-700: oklch(37% 0.013 285.805);
-    --ui-color-neutral-200: oklch(92.2% 0 0);
-    --ui-color-neutral-300: oklch(87% 0 0);
     --ui-color-neutral-500: oklch(55.6% 0 0);
     --ui-color-neutral-700: oklch(37.1% 0 0);
     --ui-color-neutral-800: oklch(26.9% 0 0);
@@ -35,6 +32,8 @@
     --ui-container-lg: 32rem;
     --ui-container-2xl: 42rem;
     --ui-container-3xl: 48rem;
+    --ui-container-5xl: 64rem;
+    --ui-container-6xl: 72rem;
     --ui-text-xs: 0.75rem;
     --ui-text-xs--line-height: calc(1 / 0.75);
     --ui-text-sm: 0.875rem;
@@ -51,7 +50,6 @@
     --ui-text-4xl--line-height: calc(2.5 / 2.25);
     --ui-text-7xl: 4.5rem;
     --ui-text-7xl--line-height: 1;
-    --ui-font-weight-light: 300;
     --ui-font-weight-normal: 400;
     --ui-font-weight-medium: 500;
     --ui-font-weight-semibold: 600;
@@ -287,6 +285,9 @@
   .ui\:relative {
     position: relative;
   }
+  .ui\:sticky {
+    position: sticky;
+  }
   .ui\:inset-0 {
     inset: calc(var(--ui-spacing) * 0);
   }
@@ -389,6 +390,9 @@
   .ui\:-mx-1 {
     margin-inline: calc(var(--ui-spacing) * -1);
   }
+  .ui\:-mx-4 {
+    margin-inline: calc(var(--ui-spacing) * -4);
+  }
   .ui\:mx-2 {
     margin-inline: calc(var(--ui-spacing) * 2);
   }
@@ -449,12 +453,21 @@
   .ui\:mr-2 {
     margin-right: calc(var(--ui-spacing) * 2);
   }
+  .ui\:mb-0 {
+    margin-bottom: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:mb-1 {
+    margin-bottom: calc(var(--ui-spacing) * 1);
+  }
   .ui\:mb-2 {
     margin-bottom: calc(var(--ui-spacing) * 2);
   }
   .ui\:mb-4 {
     margin-bottom: calc(var(--ui-spacing) * 4);
   }
+  .ui\:mb-6 {
+    margin-bottom: calc(var(--ui-spacing) * 6);
+  }
   .ui\:-ml-4 {
     margin-left: calc(var(--ui-spacing) * -4);
   }
@@ -495,6 +508,10 @@
     width: var(--cell-size);
     height: var(--cell-size);
   }
+  .ui\:size-1\.5 {
+    width: calc(var(--ui-spacing) * 1.5);
+    height: calc(var(--ui-spacing) * 1.5);
+  }
   .ui\:size-2 {
     width: calc(var(--ui-spacing) * 2);
     height: calc(var(--ui-spacing) * 2);
@@ -609,8 +626,8 @@
   .ui\:max-h-\(--radix-dropdown-menu-content-available-height\) {
     max-height: var(--radix-dropdown-menu-content-available-height);
   }
-  .ui\:max-h-9 {
-    max-height: calc(var(--ui-spacing) * 9);
+  .ui\:max-h-10 {
+    max-height: calc(var(--ui-spacing) * 10);
   }
   .ui\:max-h-24 {
     max-height: calc(var(--ui-spacing) * 24);
@@ -621,6 +638,9 @@
   .ui\:max-h-96 {
     max-height: calc(var(--ui-spacing) * 96);
   }
+  .ui\:max-h-\[50vh\] {
+    max-height: 50vh;
+  }
   .ui\:max-h-\[80vh\] {
     max-height: 80vh;
   }
@@ -684,6 +704,12 @@
   .ui\:w-10 {
     width: calc(var(--ui-spacing) * 10);
   }
+  .ui\:w-20 {
+    width: calc(var(--ui-spacing) * 20);
+  }
+  .ui\:w-32 {
+    width: calc(var(--ui-spacing) * 32);
+  }
   .ui\:w-48 {
     width: calc(var(--ui-spacing) * 48);
   }
@@ -738,12 +764,24 @@
   .ui\:max-w-3xl {
     max-width: var(--ui-container-3xl);
   }
+  .ui\:max-w-5xl {
+    max-width: var(--ui-container-5xl);
+  }
+  .ui\:max-w-6xl {
+    max-width: var(--ui-container-6xl);
+  }
+  .ui\:max-w-40 {
+    max-width: calc(var(--ui-spacing) * 40);
+  }
   .ui\:max-w-80 {
     max-width: calc(var(--ui-spacing) * 80);
   }
   .ui\:max-w-96 {
     max-width: calc(var(--ui-spacing) * 96);
   }
+  .ui\:max-w-\[200px\] {
+    max-width: 200px;
+  }
   .ui\:max-w-\[calc\(100\%-2rem\)\] {
     max-width: calc(100% - 2rem);
   }
@@ -780,9 +818,6 @@
   .ui\:min-w-\[8rem\] {
     min-width: 8rem;
   }
-  .ui\:min-w-full {
-    min-width: 100%;
-  }
   .ui\:flex-1 {
     flex: 1;
   }
@@ -798,6 +833,9 @@
   .ui\:basis-full {
     flex-basis: 100%;
   }
+  .ui\:caption-bottom {
+    caption-side: bottom;
+  }
   .ui\:border-collapse {
     border-collapse: collapse;
   }
@@ -838,7 +876,7 @@
     --tw-translate-y: -50%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .ui\:translate-y-\[calc\(-50\%_-_2px\)\] {
+  .ui\:translate-y-\[calc\(-50\%-2px\)\] {
     --tw-translate-y: calc(-50% - 2px);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
@@ -941,6 +979,9 @@
   .ui\:justify-center {
     justify-content: center;
   }
+  .ui\:justify-end {
+    justify-content: flex-end;
+  }
   .ui\:justify-start {
     justify-content: flex-start;
   }
@@ -986,6 +1027,13 @@
       margin-block-end: calc(calc(var(--ui-spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .ui\:space-y-2\.5 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--ui-spacing) * 2.5) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--ui-spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .ui\:space-y-3 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1120,6 +1168,10 @@
     border-style: var(--tw-border-style);
     border-width: 0px;
   }
+  .ui\:border-4 {
+    border-style: var(--tw-border-style);
+    border-width: 4px;
+  }
   .ui\:border-\[1\.5px\] {
     border-style: var(--tw-border-style);
     border-width: 1.5px;
@@ -1184,15 +1236,15 @@
   .ui\:border-input {
     border-color: var(--ui-color-input);
   }
-  .ui\:border-neutral-200 {
-    border-color: var(--ui-color-neutral-200);
-  }
   .ui\:border-primary {
     border-color: var(--ui-color-primary);
   }
   .ui\:border-primary\! {
     border-color: var(--ui-color-primary) !important;
   }
+  .ui\:border-segmentify-200 {
+    border-color: var(--ui-color-segmentify-200);
+  }
   .ui\:border-sidebar-border {
     border-color: var(--ui-sidebar-border);
   }
@@ -1259,6 +1311,12 @@
   .ui\:bg-muted {
     background-color: var(--ui-color-muted);
   }
+  .ui\:bg-muted-foreground\/50 {
+    background-color: var(--ui-color-muted-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--ui-color-muted-foreground) 50%, transparent);
+    }
+  }
   .ui\:bg-muted\/30 {
     background-color: var(--ui-color-muted);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1331,9 +1389,6 @@
   .ui\:bg-yellow-500 {
     background-color: var(--ui-color-yellow-500);
   }
-  .ui\:bg-zinc-700 {
-    background-color: var(--ui-color-zinc-700);
-  }
   .ui\:fill-current {
     fill: currentcolor;
   }
@@ -1421,6 +1476,9 @@
   .ui\:py-6 {
     padding-block: calc(var(--ui-spacing) * 6);
   }
+  .ui\:py-8 {
+    padding-block: calc(var(--ui-spacing) * 8);
+  }
   .ui\:pt-0 {
     padding-top: calc(var(--ui-spacing) * 0);
   }
@@ -1466,6 +1524,9 @@
   .ui\:pl-4 {
     padding-left: calc(var(--ui-spacing) * 4);
   }
+  .ui\:pl-6 {
+    padding-left: calc(var(--ui-spacing) * 6);
+  }
   .ui\:pl-8 {
     padding-left: calc(var(--ui-spacing) * 8);
   }
@@ -1478,6 +1539,9 @@
   .ui\:text-right {
     text-align: right;
   }
+  .ui\:align-middle {
+    vertical-align: middle;
+  }
   .ui\:font-mono {
     font-family: var(--ui-font-mono);
   }
@@ -1538,10 +1602,6 @@
     --tw-font-weight: var(--ui-font-weight-bold);
     font-weight: var(--ui-font-weight-bold);
   }
-  .ui\:font-light {
-    --tw-font-weight: var(--ui-font-weight-light);
-    font-weight: var(--ui-font-weight-light);
-  }
   .ui\:font-medium {
     --tw-font-weight: var(--ui-font-weight-medium);
     font-weight: var(--ui-font-weight-medium);
@@ -1578,6 +1638,9 @@
   .ui\:text-accent-foreground {
     color: var(--ui-color-accent-foreground);
   }
+  .ui\:text-background {
+    color: var(--ui-color-background);
+  }
   .ui\:text-black-250 {
     color: var(--ui-color-black-250);
   }
@@ -2156,6 +2219,42 @@
       color: var(--ui-color-muted-foreground);
     }
   }
+  .ui\:before\:absolute {
+    &::before {
+      content: var(--tw-content);
+      position: absolute;
+    }
+  }
+  .ui\:before\:top-0 {
+    &::before {
+      content: var(--tw-content);
+      top: calc(var(--ui-spacing) * 0);
+    }
+  }
+  .ui\:before\:left-0 {
+    &::before {
+      content: var(--tw-content);
+      left: calc(var(--ui-spacing) * 0);
+    }
+  }
+  .ui\:before\:h-full {
+    &::before {
+      content: var(--tw-content);
+      height: 100%;
+    }
+  }
+  .ui\:before\:w-px {
+    &::before {
+      content: var(--tw-content);
+      width: 1px;
+    }
+  }
+  .ui\:before\:bg-border {
+    &::before {
+      content: var(--tw-content);
+      background-color: var(--ui-color-border);
+    }
+  }
   .ui\:after\:absolute {
     &::after {
       content: var(--tw-content);
@@ -2174,18 +2273,48 @@
       inset-block: calc(var(--ui-spacing) * 0);
     }
   }
+  .ui\:after\:top-0 {
+    &::after {
+      content: var(--tw-content);
+      top: calc(var(--ui-spacing) * 0);
+    }
+  }
+  .ui\:after\:right-0 {
+    &::after {
+      content: var(--tw-content);
+      right: calc(var(--ui-spacing) * 0);
+    }
+  }
   .ui\:after\:left-1\/2 {
     &::after {
       content: var(--tw-content);
       left: calc(1/2 * 100%);
     }
   }
+  .ui\:after\:h-full {
+    &::after {
+      content: var(--tw-content);
+      height: 100%;
+    }
+  }
   .ui\:after\:w-\[2px\] {
     &::after {
       content: var(--tw-content);
       width: 2px;
     }
   }
+  .ui\:after\:w-px {
+    &::after {
+      content: var(--tw-content);
+      width: 1px;
+    }
+  }
+  .ui\:after\:bg-border {
+    &::after {
+      content: var(--tw-content);
+      background-color: var(--ui-color-border);
+    }
+  }
   .ui\:group-data-\[collapsible\=offcanvas\]\:after\:left-full {
     &:is(:where(.ui\:group)[data-collapsible="offcanvas"] *) {
       &::after {
@@ -2306,13 +2435,6 @@
       }
     }
   }
-  .ui\:hover\:bg-neutral-300 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--ui-color-neutral-300);
-      }
-    }
-  }
   .ui\:hover\:bg-neutral-800 {
     &:hover {
       @media (hover: hover) {
@@ -2361,13 +2483,6 @@
       }
     }
   }
-  .ui\:hover\:bg-zinc-700 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--ui-color-zinc-700);
-      }
-    }
-  }
   .ui\:hover\:text-accent-foreground {
     &:hover {
       @media (hover: hover) {
@@ -3166,6 +3281,11 @@
       }
     }
   }
+  .ui\:data-\[state\=selected\]\:bg-muted {
+    &[data-state="selected"] {
+      background-color: var(--ui-color-muted);
+    }
+  }
   .ui\:data-\[state\=unchecked\]\:translate-x-0 {
     &[data-state="unchecked"] {
       --tw-translate-x: calc(var(--ui-spacing) * 0);
@@ -3500,11 +3620,6 @@
       color: var(--ui-color-muted-foreground);
     }
   }
-  .ui\:dark\:text-white {
-    &:is(.dark *) {
-      color: var(--ui-color-white);
-    }
-  }
   .ui\:dark\:hover\:bg-input\/50 {
     &:is(.dark *) {
       &:hover {
@@ -3786,6 +3901,12 @@
       color: var(--ui-color-muted-foreground);
     }
   }
+  .ui\:\[\&_tr\]\:border-b {
+    & tr {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 1px;
+    }
+  }
   .ui\:\[\&_tr\:last-child\]\:border-0 {
     & tr:last-child {
       border-style: var(--tw-border-style);
@@ -3826,6 +3947,14 @@
       }
     }
   }
+  .ui\:\*\:\[\[role\=checkbox\]\]\:translate-y-\[2px\] {
+    :is(& > *) {
+      &:is([role=checkbox]) {
+        --tw-translate-y: 2px;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
   .ui\:\*\:\[span\]\:last\:flex {
     :is(& > *) {
       &:is(span) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@segmentify/ui",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "description": "A collection of reusable React UI components built with Tailwind CSS and Radix UI",
   "repository": {
     "type": "git",