shadcn-ui-react 0.7.12 → 0.7.13

package/dist/index.cjs

@@ -7824,8 +7824,9 @@ var SelectContent = React46.forwardRef(
           ref: composeRefs(ref, context.contentRef),
           role: "listbox",
           "data-side": side,
+          "data-select-content": true,
           className: cn(
-            "min-w-32 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md",
+            "pointer-events-auto min-w-32 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md",
             className
           ),
           style: __spreadValues(__spreadValues({}, contentStyle), style),
@@ -8255,8 +8256,9 @@ function SearchableSelectBase({
       "div",
       {
         ref: contentRef,
+        "data-searchable-select-content": true,
         className: cn(
-          "overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-xl",
+          "pointer-events-auto overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-xl",
           contentClassName
         ),
         style: __spreadProps(__spreadValues({}, contentStyle), {
@@ -9836,7 +9838,7 @@ var TableHead = React63.forwardRef((_a, ref) => {
     __spreadValues({
       ref,
       className: cn(
-        "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
+        "h-10 px-2 text-left align-middle font-medium text-muted-foreground has-[[role=checkbox]]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
         className
       )
     }, props)
@@ -9850,7 +9852,7 @@ var TableCell = React63.forwardRef((_a, ref) => {
     __spreadValues({
       ref,
       className: cn(
-        "p-2 align-middle [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
+        "p-2 align-middle has-[[role=checkbox]]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
         className
       )
     }, props)

package/dist/index.js

@@ -7548,8 +7548,9 @@ var SelectContent = React46.forwardRef(
           ref: composeRefs(ref, context.contentRef),
           role: "listbox",
           "data-side": side,
+          "data-select-content": true,
           className: cn(
-            "min-w-32 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md",
+            "pointer-events-auto min-w-32 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md",
             className
           ),
           style: __spreadValues(__spreadValues({}, contentStyle), style),
@@ -7979,8 +7980,9 @@ function SearchableSelectBase({
       "div",
       {
         ref: contentRef,
+        "data-searchable-select-content": true,
         className: cn(
-          "overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-xl",
+          "pointer-events-auto overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-xl",
           contentClassName
         ),
         style: __spreadProps(__spreadValues({}, contentStyle), {
@@ -9596,7 +9598,7 @@ var TableHead = React63.forwardRef((_a, ref) => {
     __spreadValues({
       ref,
       className: cn(
-        "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
+        "h-10 px-2 text-left align-middle font-medium text-muted-foreground has-[[role=checkbox]]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
         className
       )
     }, props)
@@ -9610,7 +9612,7 @@ var TableCell = React63.forwardRef((_a, ref) => {
     __spreadValues({
       ref,
       className: cn(
-        "p-2 align-middle [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
+        "p-2 align-middle has-[[role=checkbox]]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
         className
       )
     }, props)

package/dist/style.css

@@ -61,10 +61,13 @@
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
+    --container-xs: 20rem;
     --container-sm: 24rem;
     --container-md: 28rem;
     --container-lg: 32rem;
     --container-xl: 36rem;
+    --container-2xl: 42rem;
+    --container-3xl: 48rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -631,6 +634,9 @@
   .max-h-\[300px\] {
     max-height: 300px;
   }
+  .max-h-\[calc\(100vh-2rem\)\] {
+    max-height: calc(100vh - 2rem);
+  }
   .max-h-full {
     max-height: 100%;
   }
@@ -718,6 +724,9 @@
   .w-\[100px\] {
     width: 100px;
   }
+  .w-\[calc\(100vw-1rem\)\] {
+    width: calc(100vw - 1rem);
+  }
   .w-full {
     width: 100%;
   }
@@ -1479,6 +1488,9 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
+  .py-5 {
+    padding-block: calc(var(--spacing) * 5);
+  }
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
@@ -1491,6 +1503,9 @@
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
+  .pt-5 {
+    padding-top: calc(var(--spacing) * 5);
+  }
   .pt-6 {
     padding-top: calc(var(--spacing) * 6);
   }
@@ -1548,6 +1563,9 @@
   .text-left {
     text-align: left;
   }
+  .text-start {
+    text-align: start;
+  }
   .align-middle {
     vertical-align: middle;
   }
@@ -2979,6 +2997,11 @@
       opacity: 50%;
     }
   }
+  .has-\[\[role\=checkbox\]\]\:pr-0 {
+    &:has(*:is([role=checkbox])) {
+      padding-right: calc(var(--spacing) * 0);
+    }
+  }
   .aria-selected\:bg-accent {
     &[aria-selected=true] {
       background-color: var(--accent);
@@ -3713,11 +3736,52 @@
       display: none;
     }
   }
+  .sm\:w-fit {
+    @media (width >= 40rem) {
+      width: -moz-fit-content;
+      width: fit-content;
+    }
+  }
+  .sm\:max-w-2xl {
+    @media (width >= 40rem) {
+      max-width: var(--container-2xl);
+    }
+  }
+  .sm\:max-w-3xl {
+    @media (width >= 40rem) {
+      max-width: var(--container-3xl);
+    }
+  }
+  .sm\:max-w-\[calc\(100vw-2rem\)\] {
+    @media (width >= 40rem) {
+      max-width: calc(100vw - 2rem);
+    }
+  }
+  .sm\:max-w-lg {
+    @media (width >= 40rem) {
+      max-width: var(--container-lg);
+    }
+  }
+  .sm\:max-w-md {
+    @media (width >= 40rem) {
+      max-width: var(--container-md);
+    }
+  }
   .sm\:max-w-sm {
     @media (width >= 40rem) {
       max-width: var(--container-sm);
     }
   }
+  .sm\:max-w-xl {
+    @media (width >= 40rem) {
+      max-width: var(--container-xl);
+    }
+  }
+  .sm\:max-w-xs {
+    @media (width >= 40rem) {
+      max-width: var(--container-xs);
+    }
+  }
   .sm\:grid-cols-\[1fr_auto\] {
     @media (width >= 40rem) {
       grid-template-columns: 1fr auto;
@@ -4212,11 +4276,6 @@
       line-height: var(--tw-leading, var(--text-xs--line-height));
     }
   }
-  .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0 {
-    &:has([role=checkbox]) {
-      padding-right: calc(var(--spacing) * 0);
-    }
-  }
   .\*\:\[\[role\=checkbox\]\]\:translate-y-0\.5 {
     :is(& > *) {
       &:is([role=checkbox]) {

package/package.json

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