@biotechusa/pdo-ui 1.0.7 → 1.0.8

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 {
@@ -756,6 +779,10 @@
     height: calc(var(--spacing) * 10);
   }
 
+  .h-64 {
+    height: calc(var(--spacing) * 64);
+  }
+
   .h-auto {
     height: auto;
   }
@@ -1155,10 +1182,6 @@
     overflow-y: auto;
   }
 
-  .overscroll-contain {
-    overscroll-behavior: contain;
-  }
-
   .rounded-2xl {
     border-radius: var(--radius-2xl);
   }
@@ -1495,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;
   }
@@ -2113,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;
   }
@@ -3378,6 +3457,18 @@
     opacity: 1;
   }
 
+  .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);
   }
@@ -5181,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/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/package.json

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