shadcn-ui-react 0.7.10 → 0.7.11

package/dist/style.css

@@ -634,8 +634,8 @@
   .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,9 +643,6 @@
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
-  .min-h-10 {
-    min-height: calc(var(--spacing) * 10);
-  }
   .min-h-\[60px\] {
     min-height: 60px;
   }
@@ -854,6 +851,12 @@
   .touch-none {
     touch-action: none;
   }
+  .resize {
+    resize: both;
+  }
+  .\[scrollbar-width\:thin\] {
+    scrollbar-width: thin;
+  }
   .\[scrollbar-gutter\:stable\] {
     scrollbar-gutter: stable;
   }
@@ -987,9 +990,15 @@
   .overflow-visible {
     overflow: visible;
   }
+  .\!overflow-x-hidden {
+    overflow-x: hidden !important;
+  }
   .overflow-x-hidden {
     overflow-x: hidden;
   }
+  .\!overflow-y-scroll {
+    overflow-y: scroll !important;
+  }
   .overflow-y-auto {
     overflow-y: auto;
   }
@@ -1435,6 +1444,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);
   }
@@ -1837,9 +1849,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 +2179,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 +2238,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 +2254,11 @@
       }
     }
   }
+  .focus-within\:ring-ring {
+    &:focus-within {
+      --tw-ring-color: var(--ring);
+    }
+  }
   .hover\:border-gray-400 {
     &:hover {
       @media (hover: hover) {
@@ -2747,14 +2804,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 +3007,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 +3225,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 +3235,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;
@@ -4215,6 +4245,31 @@
       line-height: var(--tw-leading, var(--text-xs--line-height));
     }
   }
+  .\[\&\:\:-webkit-scrollbar\]\:\!block {
+    &::-webkit-scrollbar {
+      display: block !important;
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar\]\:\!w-2 {
+    &::-webkit-scrollbar {
+      width: calc(var(--spacing) * 2) !important;
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar-thumb\]\:\!rounded-full {
+    &::-webkit-scrollbar-thumb {
+      border-radius: calc(infinity * 1px) !important;
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar-thumb\]\:\!bg-border {
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--border) !important;
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar-track\]\:\!bg-transparent {
+    &::-webkit-scrollbar-track {
+      background-color: transparent !important;
+    }
+  }
   .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0 {
     &:has([role=checkbox]) {
       padding-right: calc(var(--spacing) * 0);
@@ -4475,6 +4530,21 @@
     color: var(--foreground);
   }
 }
+[data-select-scroll-content] {
+  overflow-y: scroll !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: hsl(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.11",
   "private": false,
   "author": "Bleker <bleker@gliyen.com>",
   "description": "A collection of components for building beautiful and accessible user interfaces with React and Tailwind CSS.",