shadcn-ui-react 0.5.0 → 0.5.2

package/dist/style.css

@@ -430,6 +430,9 @@
   .-mt-4 {
     margin-top: calc(var(--spacing) * -4);
   }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
   .mt-1\.5 {
     margin-top: calc(var(--spacing) * 1.5);
   }
@@ -463,15 +466,12 @@
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
-  .ml-\[1px\] {
-    margin-left: 1px;
-  }
-  .ml-\[4px\] {
-    margin-left: 4px;
-  }
   .ml-auto {
     margin-left: auto;
   }
+  .ml-px {
+    margin-left: 1px;
+  }
   .block {
     display: block;
   }
@@ -500,6 +500,9 @@
     width: calc(var(--spacing) * 8);
     height: calc(var(--spacing) * 8);
   }
+  .h-\(--radix-select-trigger-height\) {
+    height: var(--radix-select-trigger-height);
+  }
   .h-1\.5 {
     height: calc(var(--spacing) * 1.5);
   }
@@ -542,8 +545,8 @@
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
-  .h-24 {
-    height: calc(var(--spacing) * 24);
+  .h-28 {
+    height: calc(var(--spacing) * 28);
   }
   .h-36 {
     height: calc(var(--spacing) * 36);
@@ -551,15 +554,12 @@
   .h-\[1px\] {
     height: 1px;
   }
-  .h-\[calc\(80vh-220px\)\] {
-    height: calc(80vh - 220px);
+  .h-\[clamp\(22rem\,80vh\,44rem\)\] {
+    height: clamp(22rem, 80vh, 44rem);
   }
   .h-\[var\(--radix-navigation-menu-viewport-height\)\] {
     height: var(--radix-navigation-menu-viewport-height);
   }
-  .h-\[var\(--radix-select-trigger-height\)\] {
-    height: var(--radix-select-trigger-height);
-  }
   .h-auto {
     height: auto;
   }
@@ -578,6 +578,9 @@
   .max-h-screen {
     max-height: 100vh;
   }
+  .min-h-0 {
+    min-height: calc(var(--spacing) * 0);
+  }
   .min-h-\[60px\] {
     min-height: 60px;
   }
@@ -611,15 +614,27 @@
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
+  .w-17\.5 {
+    width: calc(var(--spacing) * 17.5);
+  }
   .w-20 {
     width: calc(var(--spacing) * 20);
   }
+  .w-21 {
+    width: calc(var(--spacing) * 21);
+  }
   .w-24 {
     width: calc(var(--spacing) * 24);
   }
+  .w-25 {
+    width: calc(var(--spacing) * 25);
+  }
   .w-36 {
     width: calc(var(--spacing) * 36);
   }
+  .w-37\.5 {
+    width: calc(var(--spacing) * 37.5);
+  }
   .w-40 {
     width: calc(var(--spacing) * 40);
   }
@@ -632,18 +647,9 @@
   .w-\[1px\] {
     width: 1px;
   }
-  .w-\[70px\] {
-    width: 70px;
-  }
   .w-\[100px\] {
     width: 100px;
   }
-  .w-\[110px\] {
-    width: 110px;
-  }
-  .w-\[150px\] {
-    width: 150px;
-  }
   .w-full {
     width: 100%;
   }
@@ -661,18 +667,24 @@
     max-width: -moz-max-content;
     max-width: max-content;
   }
+  .min-w-\(--radix-select-trigger-width\) {
+    min-width: var(--radix-select-trigger-width);
+  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-32 {
+    min-width: calc(var(--spacing) * 32);
+  }
+  .min-w-35 {
+    min-width: calc(var(--spacing) * 35);
+  }
   .min-w-\[8rem\] {
     min-width: 8rem;
   }
   .min-w-\[12rem\] {
     min-width: 12rem;
   }
-  .min-w-\[var\(--radix-select-trigger-width\)\] {
-    min-width: var(--radix-select-trigger-width);
-  }
   .flex-1 {
     flex: 1;
   }
@@ -737,6 +749,9 @@
   .list-none {
     list-style-type: none;
   }
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -817,6 +832,10 @@
       margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .gap-x-3 {
+    -moz-column-gap: calc(var(--spacing) * 3);
+    column-gap: calc(var(--spacing) * 3);
+  }
   .space-x-1 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -831,6 +850,9 @@
       margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
+  .gap-y-1 {
+    row-gap: calc(var(--spacing) * 1);
+  }
   .self-center {
     align-self: center;
   }
@@ -840,6 +862,9 @@
   .overflow-hidden {
     overflow: hidden;
   }
+  .overflow-visible {
+    overflow: visible;
+  }
   .overflow-x-hidden {
     overflow-x: hidden;
   }
@@ -955,6 +980,24 @@
   .bg-background {
     background-color: var(--background);
   }
+  .bg-background\/60 {
+    background-color: var(--background);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--background) 60%, transparent);
+    }
+  }
+  .bg-background\/70 {
+    background-color: var(--background);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--background) 70%, transparent);
+    }
+  }
+  .bg-background\/80 {
+    background-color: var(--background);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--background) 80%, transparent);
+    }
+  }
   .bg-black\/80 {
     background-color: color-mix(in srgb, #000 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1744,6 +1787,16 @@
       }
     }
   }
+  .hover\:bg-muted\/60 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--muted);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--muted) 60%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-primary {
     &:hover {
       @media (hover: hover) {
@@ -2091,6 +2144,14 @@
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
   }
+  .active\:bg-muted\/80 {
+    &:active {
+      background-color: var(--muted);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--muted) 80%, transparent);
+      }
+    }
+  }
   .disabled\:pointer-events-none {
     &:disabled {
       pointer-events: none;
@@ -2144,6 +2205,21 @@
       opacity: 100%;
     }
   }
+  .aria-\[orientation\=vertical\]\:flex-col {
+    &[aria-orientation=vertical] {
+      flex-direction: column;
+    }
+  }
+  .data-disabled\:pointer-events-none {
+    &[data-disabled] {
+      pointer-events: none;
+    }
+  }
+  .data-disabled\:opacity-50 {
+    &[data-disabled] {
+      opacity: 50%;
+    }
+  }
   .data-\[active\]\:bg-accent\/50 {
     &[data-active] {
       background-color: var(--accent);
@@ -2224,11 +2300,6 @@
       width: 100%;
     }
   }
-  .data-\[panel-group-direction\=vertical\]\:flex-col {
-    &[data-panel-group-direction=vertical] {
-      flex-direction: column;
-    }
-  }
   .data-\[panel-group-direction\=vertical\]\:after\:left-0 {
     &[data-panel-group-direction=vertical] {
       &::after {
@@ -2616,6 +2687,22 @@
       transition-property: none;
     }
   }
+  .supports-backdrop-filter\:bg-background\/40 {
+    @supports (backdrop-filter: var(--tw)) {
+      background-color: var(--background);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--background) 40%, transparent);
+      }
+    }
+  }
+  .supports-backdrop-filter\:bg-background\/50 {
+    @supports (backdrop-filter: var(--tw)) {
+      background-color: var(--background);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--background) 50%, transparent);
+      }
+    }
+  }
   .supports-\[backdrop-filter\]\:bg-popover\/60 {
     @supports (backdrop-filter: var(--tw)) {
       background-color: var(--popover);
@@ -2624,6 +2711,11 @@
       }
     }
   }
+  .supports-\[height\:100dvh\]\:h-\[clamp\(22rem\,80dvh\,44rem\)\] {
+    @supports (height:100dvh) {
+      height: clamp(22rem, 80dvh, 44rem);
+    }
+  }
   .sm\:top-auto {
     @media (width >= 40rem) {
       top: auto;
@@ -2644,11 +2736,26 @@
       margin-top: calc(var(--spacing) * 0);
     }
   }
+  .sm\:flex {
+    @media (width >= 40rem) {
+      display: flex;
+    }
+  }
+  .sm\:hidden {
+    @media (width >= 40rem) {
+      display: none;
+    }
+  }
   .sm\:max-w-sm {
     @media (width >= 40rem) {
       max-width: var(--container-sm);
     }
   }
+  .sm\:grid-cols-\[1fr_auto\] {
+    @media (width >= 40rem) {
+      grid-template-columns: 1fr auto;
+    }
+  }
   .sm\:flex-col {
     @media (width >= 40rem) {
       flex-direction: column;
@@ -2664,11 +2771,6 @@
       align-items: center;
     }
   }
-  .sm\:justify-between {
-    @media (width >= 40rem) {
-      justify-content: space-between;
-    }
-  }
   .sm\:justify-end {
     @media (width >= 40rem) {
       justify-content: flex-end;
@@ -2744,11 +2846,6 @@
       position: absolute;
     }
   }
-  .md\:h-\[calc\(80dvh-80px\)\] {
-    @media (width >= 48rem) {
-      height: calc(80dvh - 80px);
-    }
-  }
   .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
     @media (width >= 48rem) {
       width: var(--radix-navigation-menu-viewport-width);
@@ -2779,9 +2876,9 @@
       display: flex;
     }
   }
-  .lg\:w-\[250px\] {
+  .lg\:w-62\.5 {
     @media (width >= 64rem) {
-      width: 250px;
+      width: calc(var(--spacing) * 62.5);
     }
   }
   .lg\:gap-8 {
@@ -2947,10 +3044,12 @@
       padding-right: calc(var(--spacing) * 0);
     }
   }
-  .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\] {
-    & > [role=checkbox] {
-      --tw-translate-y: 2px;
-      translate: var(--tw-translate-x) var(--tw-translate-y);
+  .\*\:\[\[role\=checkbox\]\]\:translate-y-0\.5 {
+    :is(& > *) {
+      &:is([role=checkbox]) {
+        --tw-translate-y: calc(var(--spacing) * 0.5);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
     }
   }
   .\[\&\>span\]\:line-clamp-1 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadcn-ui-react",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "private": false,
   "author": "Bleker Cordova <bleker@gliyen.com>",
   "description": "A collection of components for building beautiful and accessible user interfaces with React and Tailwind CSS.",
@@ -46,8 +46,8 @@
     "test:watch": "jest --watch"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.5",
-    "@babel/preset-env": "^7.28.5",
+    "@babel/core": "^7.28.6",
+    "@babel/preset-env": "^7.28.6",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
     "@eslint/config-array": "^0.23.0",
@@ -57,25 +57,25 @@
     "@tailwindcss/vite": "^4.1.18",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
-    "@types/node": "^25.0.2",
-    "@types/react": "^19.2.7",
+    "@types/node": "^25.0.9",
+    "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.49.0",
-    "@typescript-eslint/parser": "^8.49.0",
-    "autoprefixer": "^10.4.22",
+    "@typescript-eslint/eslint-plugin": "^8.53.1",
+    "@typescript-eslint/parser": "^8.53.1",
+    "autoprefixer": "^10.4.23",
     "babel-jest": "^30.2.0",
     "cross-env": "^10.1.0",
     "eslint": "^9.39.2",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
+    "eslint-plugin-react-refresh": "^0.4.26",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
     "react": "^19.2.3",
-    "react-day-picker": "^9.12.0",
+    "react-day-picker": "^9.13.0",
     "react-dom": "^19.2.3",
     "react-test-renderer": "^19.2.3",
     "rimraf": "^6.1.2",
@@ -84,10 +84,10 @@
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vaul": "^1.1.2",
-    "vite": "^7.2.7",
+    "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-ts-alias": "^0.1.1",
-    "zod": "^4.1.13"
+    "zod": "^4.3.5"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.3.1 || ^19.2.3 || ^20.0.0",
@@ -132,18 +132,18 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "embla-carousel-react": "^8.6.0",
-    "framer-motion": "^12.23.26",
+    "framer-motion": "^12.27.5",
     "input-otp": "^1.4.2",
-    "lucide-react": "^0.561.0",
+    "lucide-react": "^0.562.0",
     "next-themes": "^0.4.6",
     "react-dropzone": "^14.3.8",
     "react-helmet-next": "^0.0.2",
-    "react-hook-form": "^7.68.0",
-    "react-resizable-panels": "^3.0.6",
+    "react-hook-form": "^7.71.1",
+    "react-resizable-panels": "^4.4.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "tailwind-variants": "^3.2.2",
-    "use-debounce": "^10.0.6",
+    "use-debounce": "^10.1.0",
     "vaul": "^1.1.2"
   }
 }