shadcn-ui-react 0.7.10 → 0.7.12

package/dist/style.css

@@ -313,9 +313,6 @@
   .invisible {
     visibility: hidden;
   }
-  .visible {
-    visibility: visible;
-  }
   .sr-only {
     position: absolute;
     width: 1px;
@@ -468,6 +465,9 @@
   .my-1 {
     margin-block: calc(var(--spacing) * 1);
   }
+  .-mt-0\.75 {
+    margin-top: calc(var(--spacing) * -0.75);
+  }
   .-mt-4 {
     margin-top: calc(var(--spacing) * -4);
   }
@@ -628,14 +628,11 @@
   .h-px {
     height: 1px;
   }
-  .max-h-72 {
-    max-height: calc(var(--spacing) * 72);
-  }
   .max-h-\[300px\] {
     max-height: 300px;
   }
-  .max-h-\[min\(20rem\,var\(--radix-select-content-available-height\)\)\] {
-    max-height: min(20rem, var(--radix-select-content-available-height));
+  .max-h-full {
+    max-height: 100%;
   }
   .max-h-screen {
     max-height: 100vh;
@@ -643,18 +640,12 @@
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
-  .min-h-10 {
-    min-height: calc(var(--spacing) * 10);
-  }
   .min-h-\[60px\] {
     min-height: 60px;
   }
   .min-h-screen {
     min-height: 100vh;
   }
-  .w-\(--radix-select-trigger-width\) {
-    width: var(--radix-select-trigger-width);
-  }
   .w-2 {
     width: calc(var(--spacing) * 2);
   }
@@ -750,9 +741,6 @@
   .max-w-xl {
     max-width: var(--container-xl);
   }
-  .min-w-\(--radix-select-trigger-width\) {
-    min-width: var(--radix-select-trigger-width);
-  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
@@ -854,12 +842,19 @@
   .touch-none {
     touch-action: none;
   }
-  .\[scrollbar-gutter\:stable\] {
+  .resize {
+    resize: both;
+  }
+  .scrollbar-gutter-stable {
     scrollbar-gutter: stable;
   }
   .list-none {
     list-style-type: none;
   }
+  .columns-3 {
+    -moz-columns: 3;
+    columns: 3;
+  }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -914,6 +909,13 @@
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
+  .space-y-0\.5 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-1 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -981,9 +983,6 @@
   .overflow-hidden {
     overflow: hidden;
   }
-  .overflow-hidden\! {
-    overflow: hidden !important;
-  }
   .overflow-visible {
     overflow: visible;
   }
@@ -1435,6 +1434,9 @@
   .px-0 {
     padding-inline: calc(var(--spacing) * 0);
   }
+  .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
@@ -1729,9 +1731,6 @@
   .opacity-90 {
     opacity: 90%;
   }
-  .opacity-100 {
-    opacity: 100%;
-  }
   .shadow {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow:
@@ -1837,9 +1836,6 @@
       --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-fuchsia-500) 20%, transparent) var(--tw-shadow-alpha), transparent);
     }
   }
-  .ring-destructive {
-    --tw-ring-color: var(--destructive);
-  }
   .ring-destructive\/20 {
     --tw-ring-color: var(--destructive);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2170,19 +2166,54 @@
       z-index: 20;
     }
   }
+  .focus-within\:border-b-2 {
+    &:focus-within {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 2px;
+    }
+  }
+  .focus-within\:border-destructive {
+    &:focus-within {
+      border-color: var(--destructive);
+    }
+  }
   .focus-within\:border-primary {
     &:focus-within {
       border-color: var(--primary);
     }
   }
-  .focus-within\:border-primary\/60 {
+  .focus-within\:bg-input\/70 {
     &:focus-within {
-      border-color: var(--primary);
+      background-color: var(--input);
       @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--primary) 60%, transparent);
+        background-color: color-mix(in oklab, var(--input) 70%, transparent);
       }
     }
   }
+  .focus-within\:bg-input\/80 {
+    &:focus-within {
+      background-color: var(--input);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--input) 80%, transparent);
+      }
+    }
+  }
+  .focus-within\:underline {
+    &:focus-within {
+      text-decoration-line: underline;
+    }
+  }
+  .focus-within\:ring-0 {
+    &:focus-within {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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);
+    }
+  }
   .focus-within\:ring-2 {
     &:focus-within {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -2194,6 +2225,14 @@
         var(--tw-shadow);
     }
   }
+  .focus-within\:ring-destructive\/20 {
+    &:focus-within {
+      --tw-ring-color: var(--destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+      }
+    }
+  }
   .focus-within\:ring-primary\/20 {
     &:focus-within {
       --tw-ring-color: var(--primary);
@@ -2202,6 +2241,11 @@
       }
     }
   }
+  .focus-within\:ring-ring {
+    &:focus-within {
+      --tw-ring-color: var(--ring);
+    }
+  }
   .hover\:border-gray-400 {
     &:hover {
       @media (hover: hover) {
@@ -2747,14 +2791,6 @@
       }
     }
   }
-  .focus\:ring-destructive\/40 {
-    &:focus {
-      --tw-ring-color: var(--destructive);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
-      }
-    }
-  }
   .focus\:ring-primary\/20 {
     &:focus {
       --tw-ring-color: var(--primary);
@@ -2958,14 +2994,14 @@
       flex-direction: column;
     }
   }
-  .data-disabled\:pointer-events-none {
-    &[data-disabled] {
-      pointer-events: none;
+  .data-highlighted\:bg-accent {
+    &[data-highlighted] {
+      background-color: var(--accent);
     }
   }
-  .data-disabled\:opacity-50 {
-    &[data-disabled] {
-      opacity: 50%;
+  .data-highlighted\:text-accent-foreground {
+    &[data-highlighted] {
+      color: var(--accent-foreground);
     }
   }
   .data-\[accent\=on\]\:before\:bg-\[color\:var\(--dt-accent\)\] {
@@ -3176,10 +3212,9 @@
       }
     }
   }
-  .data-\[side\=bottom\]\:translate-y-1 {
-    &[data-side=bottom] {
-      --tw-translate-y: calc(var(--spacing) * 1);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
+  .data-\[placeholder\]\:text-muted-foreground {
+    &[data-placeholder] {
+      color: var(--muted-foreground);
     }
   }
   .data-\[side\=bottom\]\:slide-in-from-top-2 {
@@ -3187,34 +3222,16 @@
       --tw-enter-translate-y: -0.5rem;
     }
   }
-  .data-\[side\=left\]\:-translate-x-1 {
-    &[data-side=left] {
-      --tw-translate-x: calc(var(--spacing) * -1);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-  }
   .data-\[side\=left\]\:slide-in-from-right-2 {
     &[data-side=left] {
       --tw-enter-translate-x: 0.5rem;
     }
   }
-  .data-\[side\=right\]\:translate-x-1 {
-    &[data-side=right] {
-      --tw-translate-x: calc(var(--spacing) * 1);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-  }
   .data-\[side\=right\]\:slide-in-from-left-2 {
     &[data-side=right] {
       --tw-enter-translate-x: -0.5rem;
     }
   }
-  .data-\[side\=top\]\:-translate-y-1 {
-    &[data-side=top] {
-      --tw-translate-y: calc(var(--spacing) * -1);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-  }
   .data-\[side\=top\]\:slide-in-from-bottom-2 {
     &[data-side=top] {
       --tw-enter-translate-y: 0.5rem;
@@ -3963,26 +3980,6 @@
       width: calc(var(--spacing) * 5);
     }
   }
-  .\[\&_\[data-radix-select-viewport\]\]\:max-h-72 {
-    & [data-radix-select-viewport] {
-      max-height: calc(var(--spacing) * 72);
-    }
-  }
-  .\[\&_\[data-radix-select-viewport\]\]\:\[scrollbar-gutter\:stable\] {
-    & [data-radix-select-viewport] {
-      scrollbar-gutter: stable;
-    }
-  }
-  .\[\&_\[data-radix-select-viewport\]\]\:overflow-y-auto {
-    & [data-radix-select-viewport] {
-      overflow-y: auto;
-    }
-  }
-  .\[\&_\[data-radix-select-viewport\]\]\:overscroll-contain {
-    & [data-radix-select-viewport] {
-      overscroll-behavior: contain;
-    }
-  }
   .\[\&_p\]\:leading-relaxed {
     & p {
       --tw-leading: var(--leading-relaxed);
@@ -4295,14 +4292,6 @@
       color: var(--primary-foreground);
     }
   }
-  .\[\&\>span\]\:line-clamp-1 {
-    & > span {
-      overflow: hidden;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 1;
-    }
-  }
   .\[\&\>svg\]\:absolute {
     & > svg {
       position: absolute;
@@ -4475,6 +4464,21 @@
     color: var(--foreground);
   }
 }
+[data-select-scroll-content] {
+  overflow-y: auto !important;
+  scrollbar-width: thin !important;
+}
+[data-select-scroll-content]::-webkit-scrollbar {
+  display: block !important;
+  width: 8px !important;
+}
+[data-select-scroll-content]::-webkit-scrollbar-track {
+  background: transparent !important;
+}
+[data-select-scroll-content]::-webkit-scrollbar-thumb {
+  border-radius: 9999px !important;
+  background: var(--border) !important;
+}
 @keyframes enter {
   from {
     opacity: var(--tw-enter-opacity, 1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadcn-ui-react",
-  "version": "0.7.10",
+  "version": "0.7.12",
   "private": false,
   "author": "Bleker <bleker@gliyen.com>",
   "description": "A collection of components for building beautiful and accessible user interfaces with React and Tailwind CSS.",