@biotechusa/pdo-ui 1.0.6 → 1.0.8

package/dist/alert-dialog.js

@@ -20,7 +20,7 @@ function AlertDialogPortal(props) {
 }
 function AlertDialogBackdrop({ className, ...props }) {
     return /*#__PURE__*/ jsx(AlertDialog.Backdrop, {
-        className: cn("fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 ease-out data-ending-style:opacity-0 data-starting-style:opacity-0", className),
+        className: cn("fixed inset-0 z-50 bg-[oklch(from_var(--destructive)_0.03_c_h)]/30 backdrop-blur-sm transition-all duration-200 ease-out data-ending-style:opacity-0 data-starting-style:opacity-0", className),
         "data-slot": "alert-dialog-backdrop",
         ...props
     });

package/dist/autocomplete.js

@@ -49,7 +49,7 @@ function AutocompletePopup({ className, children, sideOffset = 4, ...props }) {
 }
 function AutocompleteItem({ className, children, ...props }) {
     return /*#__PURE__*/ jsx(Autocomplete.Item, {
-        className: cn("flex cursor-default select-none items-center rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm", className),
+        className: cn("flex cursor-default select-none items-center rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-highlight data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm", className),
         "data-slot": "autocomplete-item",
         ...props,
         children: children

package/dist/badge.js

@@ -18,7 +18,7 @@ const badgeVariants = cva("relative inline-flex shrink-0 items-center justify-ce
             destructive: "bg-destructive text-white [button,a&]:hover:bg-destructive/90",
             error: "bg-destructive/8 text-destructive-foreground dark:bg-destructive/16",
             info: "bg-info/8 text-info-foreground dark:bg-info/16",
-            outline: "border-border bg-transparent dark:bg-input/32 [button,a&]:hover:bg-accent/50 dark:[button,a&]:hover:bg-input/48",
+            outline: "border-border bg-transparent dark:bg-input/32 [button,a&]:hover:bg-highlight/50 dark:[button,a&]:hover:bg-input/48",
             secondary: "bg-secondary text-secondary-foreground [button,a&]:hover:bg-secondary/90",
             success: "bg-success/8 text-success-foreground dark:bg-success/16",
             warning: "bg-warning/8 text-warning-foreground dark:bg-warning/16"

package/dist/button.js

@@ -25,9 +25,9 @@ const buttonVariants = cva("relative inline-flex shrink-0 cursor-pointer items-c
             default: "not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-primary bg-primary text-primary-foreground shadow-primary/24 shadow-xs hover:bg-primary/90 [&:is(:active,[data-pressed])]:inset-shadow-[0_1px_--theme(--color-black/8%)] [&:is(:disabled,:active,[data-pressed])]:shadow-none",
             destructive: "not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-destructive bg-destructive text-white shadow-destructive/24 shadow-xs hover:bg-destructive/90 [&:is(:active,[data-pressed])]:inset-shadow-[0_1px_--theme(--color-black/8%)] [&:is(:disabled,:active,[data-pressed])]:shadow-none",
             "destructive-outline": "border-border bg-transparent text-destructive-foreground shadow-xs not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-in-data-[slot=group]:bg-clip-border dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/4%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/8%)] [&:is(:disabled,:active,[data-pressed])]:shadow-none [&:is(:hover,[data-pressed])]:border-destructive/32 [&:is(:hover,[data-pressed])]:bg-destructive/4",
-            ghost: "border-transparent hover:bg-accent data-pressed:bg-accent",
+            ghost: "border-transparent hover:bg-highlight data-pressed:bg-highlight",
             link: "border-transparent underline-offset-4 hover:underline",
-            outline: "border-border bg-background shadow-xs not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-in-data-[slot=group]:bg-clip-border dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/4%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/8%)] [&:is(:disabled,:active,[data-pressed])]:shadow-none [&:is(:hover,[data-pressed])]:bg-accent/50 dark:[&:is(:hover,[data-pressed])]:bg-input/64",
+            outline: "border-border bg-background shadow-xs not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-in-data-[slot=group]:bg-clip-border dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/4%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/8%)] [&:is(:disabled,:active,[data-pressed])]:shadow-none [&:is(:hover,[data-pressed])]:bg-highlight/50 dark:[&:is(:hover,[data-pressed])]:bg-input/64",
             secondary: "border-secondary bg-secondary text-secondary-foreground hover:bg-secondary/90 data-pressed:bg-secondary/90"
         }
     }

package/dist/checkbox.js

@@ -3,11 +3,11 @@ import { Checkbox } from "@base-ui-components/react/checkbox";
 import { cn } from "./lib/utils.js";
 function checkbox_Checkbox({ className, ...props }) {
     return /*#__PURE__*/ jsx(Checkbox.Root, {
-        className: cn("relative inline-flex size-4 shrink-0 items-center justify-center rounded-lg border border-input bg-background bg-clip-padding shadow-xs outline-none ring-ring transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(0.25rem-1px)] not-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-64 aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/48 dark:not-data-checked:bg-input/32 dark:bg-clip-border dark:aria-invalid:ring-destructive/24 dark:not-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/8%)] [&:is(:disabled,[data-checked],[aria-invalid])]:shadow-none", className),
+        className: cn("relative inline-flex size-4.5 shrink-0 items-center justify-center rounded-[5px] border border-input bg-background bg-clip-padding shadow-sm outline-none ring-ring transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(0.25rem-1px)] not-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/6%)] focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-64 aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/48 dark:not-data-checked:bg-input/32 dark:bg-clip-border dark:aria-invalid:ring-destructive/24 dark:not-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/8%)] [&:is(:disabled,[data-checked],[aria-invalid])]:shadow-none", className),
         "data-slot": "checkbox",
         ...props,
         children: /*#__PURE__*/ jsx(Checkbox.Indicator, {
-            className: "-inset-px absolute flex items-center justify-center rounded-lg text-primary-foreground data-unchecked:hidden data-checked:bg-primary data-indeterminate:text-foreground",
+            className: "-inset-px absolute flex items-center justify-center rounded-[5px] text-primary-foreground data-unchecked:hidden data-checked:bg-[oklch(from_var(--accent)_l_0.07_h)] transition-all duration-100 data-indeterminate:text-foreground",
             "data-slot": "checkbox-indicator",
             render: (props, state)=>/*#__PURE__*/ jsx("span", {
                     ...props,
@@ -37,7 +37,7 @@ function checkbox_Checkbox({ className, ...props }) {
                         width: "24",
                         xmlns: "http://www.w3.org/2000/svg",
                         children: /*#__PURE__*/ jsx("path", {
-                            d: "M5.252 12.7 10.2 18.63 18.748 5.37"
+                            d: "M5.252 13.7 10.2 18.63 18.748 6.37"
                         })
                     })
                 })

package/dist/combobox.js

@@ -83,7 +83,7 @@ function ComboboxPopup({ className, children, sideOffset = 4, ...props }) {
 }
 function ComboboxItem({ className, children, ...props }) {
     return /*#__PURE__*/ jsxs(Combobox.Item, {
-        className: cn("grid in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+        className: cn("grid in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-highlight data-highlighted:text-highlight-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
         "data-slot": "combobox-item",
         ...props,
         children: [
@@ -193,7 +193,7 @@ function ComboboxChips({ className, ...props }) {
 }
 function ComboboxChip({ children, ...props }) {
     return /*#__PURE__*/ jsxs(Combobox.Chip, {
-        className: "flex items-center rounded-[calc(var(--radius-md)-1px)] bg-accent ps-2 font-medium text-accent-foreground text-xs outline-none",
+        className: "flex items-center rounded-[calc(var(--radius-md)-1px)] bg-highlight ps-2 font-medium text-accent-foreground text-xs outline-none",
         "data-slot": "combobox-chip",
         ...props,
         children: [

package/dist/dialog.js

@@ -22,7 +22,7 @@ function DialogClose(props) {
 }
 function DialogBackdrop({ className, ...props }) {
     return /*#__PURE__*/ jsx(Dialog.Backdrop, {
-        className: cn("fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0", className),
+        className: cn("fixed inset-0 z-50 bg-[oklch(from_var(--accent)_0.09_c_h)]/30 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0", className),
         "data-slot": "dialog-backdrop",
         ...props
     });

package/dist/index.css

@@ -13,6 +13,29 @@
       --tw-skew-x: initial;
       --tw-skew-y: initial;
       --tw-border-style: solid;
+      --tw-mask-linear: linear-gradient(#fff, #fff);
+      --tw-mask-radial: linear-gradient(#fff, #fff);
+      --tw-mask-conic: linear-gradient(#fff, #fff);
+      --tw-mask-left: linear-gradient(#fff, #fff);
+      --tw-mask-right: linear-gradient(#fff, #fff);
+      --tw-mask-bottom: linear-gradient(#fff, #fff);
+      --tw-mask-top: linear-gradient(#fff, #fff);
+      --tw-mask-top-from-position: 0%;
+      --tw-mask-top-to-position: 100%;
+      --tw-mask-top-from-color: black;
+      --tw-mask-top-to-color: transparent;
+      --tw-mask-right-from-position: 0%;
+      --tw-mask-right-to-position: 100%;
+      --tw-mask-right-from-color: black;
+      --tw-mask-right-to-color: transparent;
+      --tw-mask-bottom-from-position: 0%;
+      --tw-mask-bottom-to-position: 100%;
+      --tw-mask-bottom-from-color: black;
+      --tw-mask-bottom-to-color: transparent;
+      --tw-mask-left-from-position: 0%;
+      --tw-mask-left-to-position: 100%;
+      --tw-mask-left-from-color: black;
+      --tw-mask-left-to-color: transparent;
       --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-tracking: initial;
@@ -562,8 +585,8 @@
     grid-row-start: 2;
   }
 
-  .m-0\.5 {
-    margin: calc(var(--spacing) * .5);
+  .m-1 {
+    margin: calc(var(--spacing) * 1);
   }
 
   .mx-2 {
@@ -672,6 +695,16 @@
     height: calc(var(--spacing) * 4);
   }
 
+  .size-4\.5 {
+    width: calc(var(--spacing) * 4.5);
+    height: calc(var(--spacing) * 4.5);
+  }
+
+  .size-5\.5 {
+    width: calc(var(--spacing) * 5.5);
+    height: calc(var(--spacing) * 5.5);
+  }
+
   .size-6 {
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
@@ -746,6 +779,10 @@
     height: calc(var(--spacing) * 10);
   }
 
+  .h-64 {
+    height: calc(var(--spacing) * 64);
+  }
+
   .h-auto {
     height: auto;
   }
@@ -858,10 +895,6 @@
     width: 100%;
   }
 
-  .w-screen {
-    width: 100vw;
-  }
-
   .max-w-\(--available-width\) {
     max-width: var(--available-width);
   }
@@ -1149,14 +1182,14 @@
     overflow-y: auto;
   }
 
-  .overscroll-contain {
-    overscroll-behavior: contain;
-  }
-
   .rounded-2xl {
     border-radius: var(--radius-2xl);
   }
 
+  .rounded-\[5px\] {
+    border-radius: 5px;
+  }
+
   .rounded-\[calc\(var\(--radius-md\)-1px\)\] {
     border-radius: calc(var(--radius-md)  - 1px);
   }
@@ -1289,8 +1322,24 @@
     }
   }
 
-  .bg-accent {
-    background-color: var(--accent);
+  .bg-\[oklch\(from_var\(--accent\)_0\.09_c_h\)\]\/30 {
+    background-color: oklch(from var(--accent) .09 c h);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-\[oklch\(from_var\(--accent\)_0\.09_c_h\)\]\/30 {
+      background-color: color-mix(in oklab, oklch(from var(--accent) .09 c h) 30%, transparent);
+    }
+  }
+
+  .bg-\[oklch\(from_var\(--destructive\)_0\.03_c_h\)\]\/30 {
+    background-color: oklch(from var(--destructive) .03 c h);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-\[oklch\(from_var\(--destructive\)_0\.03_c_h\)\]\/30 {
+      background-color: color-mix(in oklab, oklch(from var(--destructive) .03 c h) 30%, transparent);
+    }
   }
 
   .bg-amber-500 {
@@ -1353,6 +1402,10 @@
     }
   }
 
+  .bg-highlight {
+    background-color: var(--highlight);
+  }
+
   .bg-info\/4 {
     background-color: var(--info);
   }
@@ -1465,6 +1518,54 @@
     background-color: var(--color-white);
   }
 
+  .mask-t-from-\[calc\(100\%-min\(var\(--fade-size\)\,var\(--scroll-area-overflow-y-start\)\)\)\] {
+    -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+    -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+    mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+    --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+    --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+    --tw-mask-top-from-position: calc(100% - min(var(--fade-size), var(--scroll-area-overflow-y-start)));
+    -webkit-mask-composite: source-in;
+    -webkit-mask-composite: source-in;
+    mask-composite: intersect;
+  }
+
+  .mask-r-from-\[calc\(100\%-min\(var\(--fade-size\)\,var\(--scroll-area-overflow-x-end\)\)\)\] {
+    -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+    -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+    mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+    --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+    --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+    --tw-mask-right-from-position: calc(100% - min(var(--fade-size), var(--scroll-area-overflow-x-end)));
+    -webkit-mask-composite: source-in;
+    -webkit-mask-composite: source-in;
+    mask-composite: intersect;
+  }
+
+  .mask-b-from-\[calc\(100\%-min\(var\(--fade-size\)\,var\(--scroll-area-overflow-y-end\)\)\)\] {
+    -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+    -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+    mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+    --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+    --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+    --tw-mask-bottom-from-position: calc(100% - min(var(--fade-size), var(--scroll-area-overflow-y-end)));
+    -webkit-mask-composite: source-in;
+    -webkit-mask-composite: source-in;
+    mask-composite: intersect;
+  }
+
+  .mask-l-from-\[calc\(100\%-min\(var\(--fade-size\)\,var\(--scroll-area-overflow-x-start\)\)\)\] {
+    -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+    -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+    mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+    --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+    --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+    --tw-mask-left-from-position: calc(100% - min(var(--fade-size), var(--scroll-area-overflow-x-start)));
+    -webkit-mask-composite: source-in;
+    -webkit-mask-composite: source-in;
+    mask-composite: intersect;
+  }
+
   .bg-clip-padding {
     background-clip: padding-box;
   }
@@ -1859,17 +1960,22 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  .inset-shadow-\[0_1px_--theme\(--color-black\/4\%\)\] {
-    --tw-inset-shadow: inset 0 1px var(--tw-inset-shadow-color, #0000000a);
+  .ring-1 {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + 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);
+  }
+
+  .inset-shadow-\[0_1px_--theme\(--color-black\/8\%\)\] {
+    --tw-inset-shadow: inset 0 1px var(--tw-inset-shadow-color, #00000014);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .inset-shadow-\[0_1px_--theme\(--color-black\/4\%\)\] {
-      --tw-inset-shadow: inset 0 1px var(--tw-inset-shadow-color, color-mix(in oklab, var(--color-black) 4%, transparent));
+    .inset-shadow-\[0_1px_--theme\(--color-black\/8\%\)\] {
+      --tw-inset-shadow: inset 0 1px var(--tw-inset-shadow-color, color-mix(in oklab, var(--color-black) 8%, transparent));
     }
   }
 
-  .inset-shadow-\[0_1px_--theme\(--color-black\/4\%\)\] {
+  .inset-shadow-\[0_1px_--theme\(--color-black\/8\%\)\] {
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
@@ -1913,6 +2019,16 @@
     }
   }
 
+  .ring-ring\/50 {
+    --tw-ring-color: var(--ring);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .ring-ring\/50 {
+      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+    }
+  }
+
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -2015,6 +2131,11 @@
     transition-delay: .3s;
   }
 
+  .duration-100 {
+    --tw-duration: .1s;
+    transition-duration: .1s;
+  }
+
   .duration-200 {
     --tw-duration: .2s;
     transition-duration: .2s;
@@ -2063,6 +2184,14 @@
     user-select: none;
   }
 
+  .\[--fade-size\:1\.5rem\] {
+    --fade-size: 1.5rem;
+  }
+
+  .\[--fade-size\:3\.5rem\] {
+    --fade-size: 3.5rem;
+  }
+
   .\[--sheet-inset\:0px\] {
     --sheet-inset: 0px;
   }
@@ -2229,8 +2358,8 @@
     border-bottom-width: 0;
   }
 
-  .group-active\/switch\:w-4\.5:is(:where(.group\/switch):active *) {
-    width: calc(var(--spacing) * 4.5);
+  .group-active\/switch\:w-6:is(:where(.group\/switch):active *) {
+    width: calc(var(--spacing) * 6);
   }
 
   .file\:me-3::file-selector-button {
@@ -2255,13 +2384,13 @@
     color: var(--foreground);
   }
 
-  .placeholder\:text-muted-foreground\/64::placeholder {
+  .placeholder\:text-muted-foreground\/80::placeholder {
     color: var(--muted-foreground);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .placeholder\:text-muted-foreground\/64::placeholder {
-      color: color-mix(in oklab, var(--muted-foreground) 64%, transparent);
+    .placeholder\:text-muted-foreground\/80::placeholder {
+      color: color-mix(in oklab, var(--muted-foreground) 80%, transparent);
     }
   }
 
@@ -2521,6 +2650,21 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  .not-disabled\:not-data-checked\:not-aria-invalid\:before\:shadow-\[0_1px_--theme\(--color-black\/6\%\)\]:not(:disabled):not([data-checked]):not([aria-invalid="true"]):before {
+    content: var(--tw-content);
+    --tw-shadow: 0 1px var(--tw-shadow-color, #0000000f);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .not-disabled\:not-data-checked\:not-aria-invalid\:before\:shadow-\[0_1px_--theme\(--color-black\/6\%\)\]:not(:disabled):not([data-checked]):not([aria-invalid="true"]):before {
+      --tw-shadow: 0 1px var(--tw-shadow-color, color-mix(in oklab, var(--color-black) 6%, transparent));
+    }
+  }
+
+  .not-disabled\:not-data-checked\:not-aria-invalid\:before\:shadow-\[0_1px_--theme\(--color-black\/6\%\)\]:not(:disabled):not([data-checked]):not([aria-invalid="true"]):before {
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   .not-data-disabled\:not-focus-within\:not-aria-invalid\:before\:shadow-\[0_1px_--theme\(--color-black\/4\%\)\]:not([data-disabled]):not(:focus-within):not([aria-invalid="true"]):before {
     content: var(--tw-content);
     --tw-shadow: 0 1px var(--tw-shadow-color, #0000000a);
@@ -2640,7 +2784,7 @@
   }
 
   @media (hover: hover) {
-    .hover\:bg-accent:hover, .hover\:bg-accent\/50:hover {
+    .hover\:bg-accent\/50:hover {
       background-color: var(--accent);
     }
 
@@ -2660,6 +2804,16 @@
       }
     }
 
+    .hover\:bg-highlight:hover, .hover\:bg-highlight\/50:hover {
+      background-color: var(--highlight);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-highlight\/50:hover {
+        background-color: color-mix(in oklab, var(--highlight) 50%, transparent);
+      }
+    }
+
     .hover\:bg-muted:hover {
       background-color: var(--muted);
     }
@@ -2952,6 +3106,16 @@
     }
   }
 
+  .has-data-checked\:border-ring\/48:has([data-checked]) {
+    border-color: var(--ring);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .has-data-checked\:border-ring\/48:has([data-checked]) {
+      border-color: color-mix(in oklab, var(--ring) 48%, transparent);
+    }
+  }
+
   .has-data-checked\:bg-accent\/50:has([data-checked]) {
     background-color: var(--accent);
   }
@@ -2962,6 +3126,16 @@
     }
   }
 
+  .has-data-checked\:bg-highlight\/50:has([data-checked]) {
+    background-color: var(--highlight);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .has-data-checked\:bg-highlight\/50:has([data-checked]) {
+      background-color: color-mix(in oklab, var(--highlight) 50%, transparent);
+    }
+  }
+
   .has-data-starting-style\:scale-98:has([data-starting-style]) {
     --tw-scale-x: 98%;
     --tw-scale-y: 98%;
@@ -3175,6 +3349,10 @@
     }
   }
 
+  .data-active\:text-foreground[data-active] {
+    color: var(--foreground);
+  }
+
   .data-behind\:pointer-events-none[data-behind] {
     pointer-events: none;
   }
@@ -3188,8 +3366,16 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
-  .data-checked\:bg-primary[data-checked] {
-    background-color: var(--primary);
+  .data-checked\:bg-\[oklch\(from_var\(--accent\)_l_0\.05_h\)\][data-checked] {
+    background-color: oklch(from var(--accent) l .05 h);
+  }
+
+  .data-checked\:bg-\[oklch\(from_var\(--accent\)_l_0\.07_h\)\][data-checked] {
+    background-color: oklch(from var(--accent) l .07 h);
+  }
+
+  .data-checked\:bg-accent[data-checked] {
+    background-color: var(--accent);
   }
 
   .data-checked\:group-active\/switch\:translate-x-2\.5[data-checked]:is(:where(.group\/switch):active *) {
@@ -3271,14 +3457,30 @@
     opacity: 1;
   }
 
-  .data-highlighted\:bg-accent[data-highlighted] {
-    background-color: var(--accent);
+  .data-has-overflow-x\:overscroll-x-contain[data-has-overflow-x] {
+    overscroll-behavior-x: contain;
+  }
+
+  .data-has-overflow-x\:pb-2\.5[data-has-overflow-x] {
+    padding-bottom: calc(var(--spacing) * 2.5);
+  }
+
+  .data-has-overflow-y\:pe-2\.5[data-has-overflow-y] {
+    padding-inline-end: calc(var(--spacing) * 2.5);
+  }
+
+  .data-highlighted\:bg-highlight[data-highlighted] {
+    background-color: var(--highlight);
   }
 
   .data-highlighted\:text-accent-foreground[data-highlighted] {
     color: var(--accent-foreground);
   }
 
+  .data-highlighted\:text-highlight-foreground[data-highlighted] {
+    color: var(--highlight-foreground);
+  }
+
   .data-hovering\:opacity-100[data-hovering] {
     opacity: 1;
   }
@@ -3318,8 +3520,8 @@
     opacity: 0;
   }
 
-  .data-pressed\:bg-accent[data-pressed] {
-    background-color: var(--accent);
+  .data-pressed\:bg-highlight[data-pressed] {
+    background-color: var(--highlight);
   }
 
   .data-pressed\:bg-secondary\/90[data-pressed] {
@@ -3358,10 +3560,6 @@
     animation-delay: 0s;
   }
 
-  .data-selected\:text-foreground[data-selected] {
-    color: var(--foreground);
-  }
-
   .data-starting-style\:h-0[data-starting-style] {
     height: calc(var(--spacing) * 0);
   }
@@ -3401,8 +3599,8 @@
     display: none;
   }
 
-  .data-unchecked\:translate-x-0[data-unchecked] {
-    --tw-translate-x: calc(var(--spacing) * 0);
+  .data-unchecked\:translate-x-\[-4px\][data-unchecked] {
+    --tw-translate-x: -4px;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
@@ -3410,10 +3608,6 @@
     background-color: var(--input);
   }
 
-  .data-\[disabled\]\:pointer-events-none[data-disabled] {
-    pointer-events: none;
-  }
-
   .data-\[orientation\=horizontal\]\:my-0\.5[data-orientation="horizontal"] {
     margin-block: calc(var(--spacing) * .5);
   }
@@ -3672,8 +3866,8 @@
   }
 
   @media (hover: hover) {
-    :is(.\*\:data-\[slot\=tabs-trigger\]\:hover\:bg-accent > *)[data-slot="tabs-trigger"]:hover {
-      background-color: var(--accent);
+    :is(.\*\:data-\[slot\=tabs-trigger\]\:hover\:bg-highlight > *)[data-slot="tabs-trigger"]:hover {
+      background-color: var(--highlight);
     }
   }
 
@@ -3944,10 +4138,6 @@
     border-color: var(--background);
   }
 
-  .dark\:bg-accent:is(.dark *) {
-    background-color: var(--accent);
-  }
-
   .dark\:bg-destructive\/16:is(.dark *) {
     background-color: var(--destructive);
   }
@@ -3958,6 +4148,10 @@
     }
   }
 
+  .dark\:bg-highlight:is(.dark *) {
+    background-color: var(--highlight);
+  }
+
   .dark\:bg-info\/16:is(.dark *) {
     background-color: var(--info);
   }
@@ -4207,8 +4401,8 @@
   }
 
   @media (hover: hover) {
-    .dark\:hover\:bg-accent:is(.dark *):hover {
-      background-color: var(--accent);
+    .dark\:hover\:bg-highlight:is(.dark *):hover {
+      background-color: var(--highlight);
     }
 
     .dark\:hover\:bg-input\/64:is(.dark *):hover {
@@ -4438,23 +4632,23 @@
     }
   }
 
-  .\[\&\:is\(\:hover\,\[data-pressed\]\)\]\:bg-accent\/50:is(:hover, [data-pressed]) {
-    background-color: var(--accent);
+  .\[\&\:is\(\:hover\,\[data-pressed\]\)\]\:bg-destructive\/4:is(:hover, [data-pressed]) {
+    background-color: var(--destructive);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .\[\&\:is\(\:hover\,\[data-pressed\]\)\]\:bg-accent\/50:is(:hover, [data-pressed]) {
-      background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+    .\[\&\:is\(\:hover\,\[data-pressed\]\)\]\:bg-destructive\/4:is(:hover, [data-pressed]) {
+      background-color: color-mix(in oklab, var(--destructive) 4%, transparent);
     }
   }
 
-  .\[\&\:is\(\:hover\,\[data-pressed\]\)\]\:bg-destructive\/4:is(:hover, [data-pressed]) {
-    background-color: var(--destructive);
+  .\[\&\:is\(\:hover\,\[data-pressed\]\)\]\:bg-highlight\/50:is(:hover, [data-pressed]) {
+    background-color: var(--highlight);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .\[\&\:is\(\:hover\,\[data-pressed\]\)\]\:bg-destructive\/4:is(:hover, [data-pressed]) {
-      background-color: color-mix(in oklab, var(--destructive) 4%, transparent);
+    .\[\&\:is\(\:hover\,\[data-pressed\]\)\]\:bg-highlight\/50:is(:hover, [data-pressed]) {
+      background-color: color-mix(in oklab, var(--highlight) 50%, transparent);
     }
   }
 
@@ -4711,23 +4905,23 @@
   }
 
   @media (hover: hover) {
-    :is(.\[button\,a\&\]\:hover\:bg-accent\/50 button, a.\[button\,a\&\]\:hover\:bg-accent\/50):hover {
-      background-color: var(--accent);
+    :is(.\[button\,a\&\]\:hover\:bg-destructive\/90 button, a.\[button\,a\&\]\:hover\:bg-destructive\/90):hover {
+      background-color: var(--destructive);
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      :is(.\[button\,a\&\]\:hover\:bg-accent\/50 button, a.\[button\,a\&\]\:hover\:bg-accent\/50):hover {
-        background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+      :is(.\[button\,a\&\]\:hover\:bg-destructive\/90 button, a.\[button\,a\&\]\:hover\:bg-destructive\/90):hover {
+        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
       }
     }
 
-    :is(.\[button\,a\&\]\:hover\:bg-destructive\/90 button, a.\[button\,a\&\]\:hover\:bg-destructive\/90):hover {
-      background-color: var(--destructive);
+    :is(.\[button\,a\&\]\:hover\:bg-highlight\/50 button, a.\[button\,a\&\]\:hover\:bg-highlight\/50):hover {
+      background-color: var(--highlight);
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      :is(.\[button\,a\&\]\:hover\:bg-destructive\/90 button, a.\[button\,a\&\]\:hover\:bg-destructive\/90):hover {
-        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
+      :is(.\[button\,a\&\]\:hover\:bg-highlight\/50 button, a.\[button\,a\&\]\:hover\:bg-highlight\/50):hover {
+        background-color: color-mix(in oklab, var(--highlight) 50%, transparent);
       }
     }
 
@@ -4902,20 +5096,20 @@
 }
 
 :root {
+  --accent: oklch(44% .12 146.31);
+  --accent-foreground: oklch(20.5% 0 0);
   --background: oklch(100% 0 0);
-  --foreground: oklch(14.5% 0 0);
+  --foreground: oklch(from var(--accent) .25 c h);
   --card: oklch(100% 0 0);
   --card-foreground: oklch(14.5% 0 0);
   --popover: oklch(100% 0 0);
   --popover-foreground: oklch(14.5% 0 0);
-  --primary: oklch(20.5% 0 0);
+  --primary: oklch(from var(--accent) .1 c h);
   --primary-foreground: oklch(98.5% 0 0);
   --secondary: oklch(97% 0 0);
   --secondary-foreground: oklch(20.5% 0 0);
   --muted: oklch(97% 0 0);
-  --muted-foreground: oklch(55.6% 0 0);
-  --accent: oklch(97% 0 0);
-  --accent-foreground: oklch(20.5% 0 0);
+  --muted-foreground: oklch(from var(--accent) .65 .015 h);
   --destructive: oklch(57.7% .245 27.325);
   --destructive-foreground: oklch(57.7% .245 27.325);
   --border: oklch(92.2% 0 0);
@@ -4936,6 +5130,8 @@
   --sidebar-border: oklch(92.2% 0 0);
   --sidebar-ring: oklch(70.8% 0 0);
   --spacing-touch: calc(var(--spacing) * 4);
+  --highlight: oklch(97% 0 0);
+  --highlight-foreground: oklch(20.5% 0 0);
   --info: var(--color-blue-500);
   --info-foreground: var(--color-blue-700);
   --success: var(--color-emerald-500);
@@ -4977,6 +5173,8 @@
   --sidebar-accent-foreground: oklch(98.5% 0 0);
   --sidebar-border: oklch(26.9% 0 0);
   --sidebar-ring: oklch(43.9% 0 0);
+  --highlight: oklch(97% 0 0);
+  --highlight-foreground: oklch(20.5% 0 0);
   --info: var(--color-blue-500);
   --info-foreground: var(--color-blue-400);
   --success: var(--color-emerald-500);
@@ -5074,6 +5272,144 @@
   initial-value: solid;
 }
 
+@property --tw-mask-linear {
+  syntax: "*";
+  inherits: false;
+  initial-value: linear-gradient(#fff, #fff);
+}
+
+@property --tw-mask-radial {
+  syntax: "*";
+  inherits: false;
+  initial-value: linear-gradient(#fff, #fff);
+}
+
+@property --tw-mask-conic {
+  syntax: "*";
+  inherits: false;
+  initial-value: linear-gradient(#fff, #fff);
+}
+
+@property --tw-mask-left {
+  syntax: "*";
+  inherits: false;
+  initial-value: linear-gradient(#fff, #fff);
+}
+
+@property --tw-mask-right {
+  syntax: "*";
+  inherits: false;
+  initial-value: linear-gradient(#fff, #fff);
+}
+
+@property --tw-mask-bottom {
+  syntax: "*";
+  inherits: false;
+  initial-value: linear-gradient(#fff, #fff);
+}
+
+@property --tw-mask-top {
+  syntax: "*";
+  inherits: false;
+  initial-value: linear-gradient(#fff, #fff);
+}
+
+@property --tw-mask-top-from-position {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0%;
+}
+
+@property --tw-mask-top-to-position {
+  syntax: "*";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-mask-top-from-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: black;
+}
+
+@property --tw-mask-top-to-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: transparent;
+}
+
+@property --tw-mask-right-from-position {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0%;
+}
+
+@property --tw-mask-right-to-position {
+  syntax: "*";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-mask-right-from-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: black;
+}
+
+@property --tw-mask-right-to-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: transparent;
+}
+
+@property --tw-mask-bottom-from-position {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0%;
+}
+
+@property --tw-mask-bottom-to-position {
+  syntax: "*";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-mask-bottom-from-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: black;
+}
+
+@property --tw-mask-bottom-to-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: transparent;
+}
+
+@property --tw-mask-left-from-position {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0%;
+}
+
+@property --tw-mask-left-to-position {
+  syntax: "*";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-mask-left-from-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: black;
+}
+
+@property --tw-mask-left-to-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: transparent;
+}
+
 @property --tw-leading {
   syntax: "*";
   inherits: false

package/dist/input.js

@@ -7,7 +7,7 @@ function input_Input({ className, size = "default", unstyled = false, ...props }
         "data-size": size,
         "data-slot": "input-control",
         children: /*#__PURE__*/ jsx(Input, {
-            className: cn("w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none placeholder:text-muted-foreground/64", "sm" === size && "px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)]", "lg" === size && "py-[calc(--spacing(2)-1px)]", "touch" === size && "py-[calc(--spacing(4)-1px)] px-[calc(--spacing(4)-1px)]", "search" === props.type && "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none", "file" === props.type && "text-muted-foreground file:me-3 file:bg-transparent file:font-medium file:text-foreground file:text-sm"),
+            className: cn("w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none placeholder:text-muted-foreground/80", "sm" === size && "px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)]", "lg" === size && "py-[calc(--spacing(2)-1px)]", "touch" === size && "py-[calc(--spacing(4)-1px)] px-[calc(--spacing(4)-1px)]", "search" === props.type && "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none", "file" === props.type && "text-muted-foreground file:me-3 file:bg-transparent file:font-medium file:text-foreground file:text-sm"),
             "data-slot": "input",
             size: "number" == typeof size ? size : void 0,
             ...props

package/dist/menu.js

@@ -38,7 +38,7 @@ function MenuGroup(props) {
 }
 function MenuItem({ className, inset, variant = "default", size = "default", ...props }) {
     return /*#__PURE__*/ jsx(Menu.Item, {
-        className: cn("flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-inset:ps-8 data-[variant=destructive]:text-destructive-foreground data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[size=touch]:py-(--spacing-touch)", className),
+        className: cn("flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-highlight data-inset:ps-8 data-[variant=destructive]:text-destructive-foreground data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[size=touch]:py-(--spacing-touch)", className),
         "data-inset": inset,
         "data-slot": "menu-item",
         "data-variant": variant,
@@ -49,7 +49,7 @@ function MenuItem({ className, inset, variant = "default", size = "default", ...
 function MenuCheckboxItem({ className, children, checked, size = "default", ...props }) {
     return /*#__PURE__*/ jsxs(Menu.CheckboxItem, {
         checked: checked,
-        className: cn("grid in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[size=touch]:py-(--spacing-touch)", className),
+        className: cn("grid in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-highlight data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[size=touch]:py-(--spacing-touch)", className),
         "data-slot": "menu-checkbox-item",
         "data-size": size,
         ...props,
@@ -73,7 +73,7 @@ function MenuRadioGroup(props) {
 }
 function MenuRadioItem({ className, children, size = "default", ...props }) {
     return /*#__PURE__*/ jsxs(Menu.RadioItem, {
-        className: cn("grid in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0  data-[size=touch]:py-(--spacing-touch)", className),
+        className: cn("grid in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-highlight data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0  data-[size=touch]:py-(--spacing-touch)", className),
         "data-slot": "menu-radio-item",
         "data-size": size,
         ...props,
@@ -119,7 +119,7 @@ function MenuSub(props) {
 }
 function MenuSubTrigger({ className, inset, children, size = "default", ...props }) {
     return /*#__PURE__*/ jsxs(Menu.SubmenuTrigger, {
-        className: cn("flex items-center gap-2 rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-inset:ps-8 data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none data-[size=touch]:py-(--spacing-touch)", className),
+        className: cn("flex items-center gap-2 rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-highlight data-inset:ps-8 data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none data-[size=touch]:py-(--spacing-touch)", className),
         "data-inset": inset,
         "data-slot": "menu-sub-trigger",
         "data-size": size,

package/dist/number-field.js

@@ -30,7 +30,7 @@ function NumberFieldGroup({ className, ...props }) {
 }
 function NumberFieldDecrement({ className, ...props }) {
     return /*#__PURE__*/ jsx(NumberField.Decrement, {
-        className: cn("relative flex shrink-0 cursor-pointer items-center justify-center rounded-s-[calc(var(--radius-lg)-1px)] in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent", className),
+        className: cn("relative flex shrink-0 cursor-pointer items-center justify-center rounded-s-[calc(var(--radius-lg)-1px)] in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-highlight", className),
         "data-slot": "number-field-decrement",
         ...props,
         children: /*#__PURE__*/ jsx(MinusIcon, {})
@@ -38,7 +38,7 @@ function NumberFieldDecrement({ className, ...props }) {
 }
 function NumberFieldIncrement({ className, ...props }) {
     return /*#__PURE__*/ jsx(NumberField.Increment, {
-        className: cn("relative flex shrink-0 cursor-pointer items-center justify-center rounded-e-[calc(var(--radius-lg)-1px)] in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent", className),
+        className: cn("relative flex shrink-0 cursor-pointer items-center justify-center rounded-e-[calc(var(--radius-lg)-1px)] in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-highlight", className),
         "data-slot": "number-field-increment",
         ...props,
         children: /*#__PURE__*/ jsx(PlusIcon, {})

package/dist/radio-group.js

@@ -15,7 +15,7 @@ function radio_group_Radio({ className, ...props }) {
         "data-slot": "radio",
         ...props,
         children: /*#__PURE__*/ jsx(Radio.Indicator, {
-            className: "-inset-px absolute flex size-4 items-center justify-center rounded-full before:size-1.5 before:rounded-full before:bg-primary-foreground data-unchecked:hidden data-checked:bg-primary",
+            className: "-inset-px absolute flex size-4 items-center justify-center rounded-full before:size-1.5 before:rounded-full before:bg-primary-foreground data-unchecked:hidden data-checked:bg-[oklch(from_var(--accent)_l_0.05_h)]",
             "data-slot": "radio-indicator"
         })
     });

package/dist/scroll-area.d.ts

@@ -1,6 +1,7 @@
 import { ScrollArea as ScrollAreaPrimitive } from "@base-ui-components/react/scroll-area";
-declare function ScrollArea({ className, children, orientation, ...props }: ScrollAreaPrimitive.Root.Props & {
-    orientation?: "horizontal" | "vertical" | "both";
+declare function ScrollArea({ className, children, scrollFade, scrollbarGutter, ...props }: ScrollAreaPrimitive.Root.Props & {
+    scrollFade?: boolean;
+    scrollbarGutter?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 declare function ScrollBar({ className, orientation, ...props }: ScrollAreaPrimitive.Scrollbar.Props): import("react/jsx-runtime").JSX.Element;
 export { ScrollArea, ScrollBar };

package/dist/scroll-area.js

@@ -1,27 +1,21 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ScrollArea } from "@base-ui-components/react/scroll-area";
 import { cn } from "./lib/utils.js";
-function scroll_area_ScrollArea({ className, children, orientation, ...props }) {
+function scroll_area_ScrollArea({ className, children, scrollFade = false, scrollbarGutter = false, ...props }) {
     return /*#__PURE__*/ jsxs(ScrollArea.Root, {
-        className: "min-h-0",
+        className: cn("size-full min-h-0", className),
         ...props,
         children: [
             /*#__PURE__*/ jsx(ScrollArea.Viewport, {
-                className: cn("size-full overscroll-contain rounded-[inherit] outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background", className),
+                className: cn("h-full rounded-[inherit] outline-none transition-shadows focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-has-overflow-x:overscroll-x-contain", scrollFade && "mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] [--fade-size:1.5rem]", scrollbarGutter && "data-has-overflow-y:pe-2.5 data-has-overflow-x:pb-2.5"),
                 "data-slot": "scroll-area-viewport",
                 children: children
             }),
-            "both" === orientation ? /*#__PURE__*/ jsxs(Fragment, {
-                children: [
-                    /*#__PURE__*/ jsx(ScrollBar, {
-                        orientation: "vertical"
-                    }),
-                    /*#__PURE__*/ jsx(ScrollBar, {
-                        orientation: "horizontal"
-                    })
-                ]
-            }) : /*#__PURE__*/ jsx(ScrollBar, {
-                orientation: orientation
+            /*#__PURE__*/ jsx(ScrollBar, {
+                orientation: "vertical"
+            }),
+            /*#__PURE__*/ jsx(ScrollBar, {
+                orientation: "horizontal"
             }),
             /*#__PURE__*/ jsx(ScrollArea.Corner, {
                 "data-slot": "scroll-area-corner"
@@ -31,7 +25,7 @@ function scroll_area_ScrollArea({ className, children, orientation, ...props })
 }
 function ScrollBar({ className, orientation = "vertical", ...props }) {
     return /*#__PURE__*/ jsx(ScrollArea.Scrollbar, {
-        className: cn("m-0.5 flex opacity-0 transition-opacity delay-300 data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5 data-[orientation=horizontal]:flex-col data-hovering:opacity-100 data-scrolling:opacity-100 data-hovering:delay-0 data-scrolling:delay-0 data-hovering:duration-100 data-scrolling:duration-100", className),
+        className: cn("m-1 flex opacity-0 transition-opacity delay-300 data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5 data-[orientation=horizontal]:flex-col data-hovering:opacity-100 data-scrolling:opacity-100 data-hovering:delay-0 data-scrolling:delay-0 data-hovering:duration-100 data-scrolling:duration-100", className),
         "data-slot": "scroll-area-scrollbar",
         orientation: orientation,
         ...props,

package/dist/select.js

@@ -67,7 +67,7 @@ function SelectPopup({ className, children, sideOffset = 4, alignItemWithTrigger
 }
 function SelectItem({ className, children, ...props }) {
     return /*#__PURE__*/ jsxs(Select.Item, {
-        className: cn("grid in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+        className: cn("grid in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-highlight data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
         "data-slot": "select-item",
         ...props,
         children: [

package/dist/slider.js

@@ -29,7 +29,7 @@ function slider_Slider({ className, children, defaultValue, value, min = 0, max
         children: [
             children,
             /*#__PURE__*/ jsx(Slider.Control, {
-                className: cn("flex touch-none select-none data-[disabled]:pointer-events-none data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:min-w-44 data-[orientation=vertical]:flex-col data-disabled:opacity-64", className),
+                className: cn("flex touch-none select-none data-disabled:pointer-events-none data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:min-w-44 data-[orientation=vertical]:flex-col data-disabled:opacity-64", className),
                 "data-slot": "slider-control",
                 children: /*#__PURE__*/ jsxs(Slider.Track, {
                     className: "relative grow select-none before:absolute before:rounded-full before:bg-input data-[orientation=horizontal]:h-1 data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-1 data-[orientation=horizontal]:before:inset-x-0.5 data-[orientation=vertical]:before:inset-x-0 data-[orientation=horizontal]:before:inset-y-0 data-[orientation=vertical]:before:inset-y-0.5",

package/dist/styles.css

@@ -4,20 +4,20 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
+    --accent: oklch(0.44 0.12 146.31);
+    --accent-foreground: oklch(0.205 0 0);
     --background: oklch(1 0 0);
-    --foreground: oklch(0.145 0 0);
+    --foreground: oklch(from var(--accent) 0.25 c h);
     --card: oklch(1 0 0);
     --card-foreground: oklch(0.145 0 0);
     --popover: oklch(1 0 0);
     --popover-foreground: oklch(0.145 0 0);
-    --primary: oklch(0.205 0 0);
+    --primary: oklch(from var(--accent) 0.1 c h);
     --primary-foreground: oklch(0.985 0 0);
     --secondary: oklch(0.97 0 0);
     --secondary-foreground: oklch(0.205 0 0);
     --muted: oklch(0.97 0 0);
-    --muted-foreground: oklch(0.556 0 0);
-    --accent: oklch(0.97 0 0);
-    --accent-foreground: oklch(0.205 0 0);
+    --muted-foreground: oklch(from var(--accent) 0.65 0.015 h);
     --destructive: oklch(0.577 0.245 27.325);
     --destructive-foreground: oklch(0.577 0.245 27.325);
     --border: oklch(0.922 0 0);
@@ -38,6 +38,8 @@
     --sidebar-border: oklch(0.922 0 0);
     --sidebar-ring: oklch(0.708 0 0);
     --spacing-touch: calc(var(--spacing) * 4);
+    --highlight: oklch(0.97 0 0);
+    --highlight-foreground: oklch(0.205 0 0);
 
     --info: var(--color-blue-500);
     --info-foreground: var(--color-blue-700);
@@ -80,6 +82,8 @@
     --sidebar-accent-foreground: oklch(0.985 0 0);
     --sidebar-border: oklch(0.269 0 0);
     --sidebar-ring: oklch(0.439 0 0);
+    --highlight: oklch(0.97 0 0);
+    --highlight-foreground: oklch(0.205 0 0);
 
     --info: var(--color-blue-500);
     --info-foreground: var(--color-blue-400);
@@ -126,6 +130,8 @@
     --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
     --color-sidebar-border: var(--sidebar-border);
     --color-sidebar-ring: var(--sidebar-ring);
+    --color-highlight: var(--highlight);
+    --color-highlight-foreground: var(--highlight-foreground);
 
     --color-info: var(--info);
     --color-info-foreground: var(--info-foreground);

package/dist/switch.js

@@ -3,11 +3,11 @@ import { Switch } from "@base-ui-components/react/switch";
 import { cn } from "./lib/utils.js";
 function switch_Switch({ className, ...props }) {
     return /*#__PURE__*/ jsx(Switch.Root, {
-        className: cn("group/switch inset-shadow-[0_1px_--theme(--color-black/4%)] inline-flex h-4.5 w-7.5 shrink-0 items-center rounded-full p-px outline-none transition-all focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-64 data-checked:bg-primary data-unchecked:bg-input", className),
+        className: cn("group/switch inset-shadow-[0_1px_--theme(--color-black/8%)] inline-flex h-4.5 w-7.5 shrink-0 items-center rounded-sm p-px outline-none transition-all focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-64 data-checked:bg-accent data-unchecked:bg-input", className),
         "data-slot": "switch",
         ...props,
         children: /*#__PURE__*/ jsx(Switch.Thumb, {
-            className: cn("pointer-events-none block size-4 rounded-full bg-background shadow-sm transition-[translate,width] group-active/switch:w-4.5 data-checked:translate-x-3 data-unchecked:translate-x-0 data-checked:group-active/switch:translate-x-2.5"),
+            className: cn("pointer-events-none block size-5.5 rounded-sm bg-background ring-1 ring-ring/50 shadow-md transition-[translate,width] group-active/switch:w-6 data-checked:translate-x-3 data-unchecked:translate-x-[-4px] data-checked:group-active/switch:translate-x-2.5"),
             "data-slot": "switch-thumb"
         })
     });

package/dist/tabs.js

@@ -10,13 +10,13 @@ function tabs_Tabs({ className, ...props }) {
 }
 function TabsList({ variant = "default", className, children, ...props }) {
     return /*#__PURE__*/ jsxs(Tabs.List, {
-        className: cn("relative z-0 flex w-fit items-center justify-center gap-x-0.5 text-muted-foreground", "data-[orientation=vertical]:flex-col", "default" === variant ? "rounded-lg bg-muted p-0.5 text-muted-foreground/64" : "data-[orientation=vertical]:px-1 data-[orientation=horizontal]:py-1 *:data-[slot=tabs-trigger]:hover:bg-accent", className),
+        className: cn("relative z-0 flex w-fit items-center justify-center gap-x-0.5 text-muted-foreground", "data-[orientation=vertical]:flex-col", "default" === variant ? "rounded-lg bg-muted p-0.5 text-muted-foreground/64" : "data-[orientation=vertical]:px-1 data-[orientation=horizontal]:py-1 *:data-[slot=tabs-trigger]:hover:bg-highlight", className),
         "data-slot": "tabs-list",
         ...props,
         children: [
             children,
             /*#__PURE__*/ jsx(Tabs.Indicator, {
-                className: cn("-translate-y-(--active-tab-bottom) absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) transition-[width,translate] duration-200 ease-in-out", "underline" === variant ? "data-[orientation=vertical]:-translate-x-px z-10 bg-primary data-[orientation=horizontal]:h-0.5 data-[orientation=vertical]:w-0.5 data-[orientation=horizontal]:translate-y-px" : "-z-1 rounded-md bg-background shadow-sm dark:bg-accent"),
+                className: cn("-translate-y-(--active-tab-bottom) absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) transition-[width,translate] duration-200 ease-in-out", "underline" === variant ? "data-[orientation=vertical]:-translate-x-px z-10 bg-primary data-[orientation=horizontal]:h-0.5 data-[orientation=vertical]:w-0.5 data-[orientation=horizontal]:translate-y-px" : "-z-1 rounded-md bg-background shadow-sm dark:bg-highlight"),
                 "data-slot": "tab-indicator"
             })
         ]
@@ -24,7 +24,7 @@ function TabsList({ variant = "default", className, children, ...props }) {
 }
 function TabsTab({ className, ...props }) {
     return /*#__PURE__*/ jsx(Tabs.Tab, {
-        className: cn("flex flex-1 shrink-0 cursor-pointer items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-sm outline-none transition-[color,background-color,box-shadow] focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-disabled:opacity-64 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", "hover:text-muted-foreground data-selected:text-foreground", "gap-1.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1.5)-1px)]", "data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start", className),
+        className: cn("flex flex-1 shrink-0 cursor-pointer items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-sm outline-none transition-[color,background-color,box-shadow] focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-disabled:opacity-64 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", "hover:text-muted-foreground data-active:text-foreground", "gap-1.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1.5)-1px)]", "data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start", className),
         "data-slot": "tabs-trigger",
         ...props
     });

package/dist/toggle.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { Toggle } from "@base-ui-components/react/toggle";
 import { cva } from "class-variance-authority";
 import { cn } from "./lib/utils.js";
-const toggleVariants = cva("relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-medium text-sm outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 data-pressed:bg-accent data-pressed:text-accent-foreground data-pressed:transition-none dark:data-pressed:bg-input/80 dark:hover:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+const toggleVariants = cva("relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-medium text-sm outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-highlight/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 data-pressed:bg-highlight data-pressed:text-accent-foreground data-pressed:transition-none dark:data-pressed:bg-input/80 dark:hover:bg-highlight [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
     defaultVariants: {
         size: "default",
         variant: "default"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@biotechusa/pdo-ui",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "type": "module",
   "exports": {
     ".": {