@epilot/zenith-react 0.2.0-next.0 → 0.2.0-next.3

package/dist/components/scroll-overflow/scroll-overflow.js

@@ -1,100 +1,101 @@
-import { jsxs as A, jsx as l } from "react/jsx-runtime";
-import * as f from "react";
-import { Root as T, Viewport as M, Scrollbar as O, Thumb as F } from "../../vendor/.bun/@radix-ui_react-scroll-area@1.2.10_2b23df507bdda662/vendor/@radix-ui/react-scroll-area/dist/index.js";
-import { mergeClasses as d, SLOT_ATTR as n, shorthands as v } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as W } from "../../styles/make-styles.js";
-import { grayA8 as I, accentA8 as Z, grayA12 as j, gray1 as K, radiusMd as $, radiusSm as G } from "../../tokens/index.js";
-import { useScrollbarStyles as U } from "../scroll-area/scrollbar-styles.js";
-function B() {
+import { jsxs as I, jsx as l } from "react/jsx-runtime";
+import * as w from "react";
+import { Root as M, Viewport as O, Scrollbar as F, Thumb as W } from "../../vendor/.bun/@radix-ui_react-scroll-area@1.2.10_2b23df507bdda662/vendor/@radix-ui/react-scroll-area/dist/index.js";
+import { mergeClasses as f, SLOT_ATTR as s, shorthands as b } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as Z } from "../../styles/make-styles.js";
+import { boxModel as a, nativeControl as j } from "../../styles/host-reset.js";
+import { grayA8 as B, accentA8 as K, grayA12 as $, gray1 as G, radiusMd as U, radiusSm as P } from "../../tokens/index.js";
+import { useScrollbarStyles as _ } from "../scroll-area/scrollbar-styles.js";
+function D() {
   return typeof window > "u" || !window.matchMedia || window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth";
 }
-function P(s = {}) {
-  const { scrollStep: b = 200, orientation: H = "horizontal" } = s, w = f.useRef(null), [g, h] = f.useState(!1), [m, C] = f.useState(!1), [x, S] = f.useState(!1), a = H === "horizontal", u = f.useCallback(() => {
-    const t = w.current;
+function q(c = {}) {
+  const { scrollStep: m = 200, orientation: y = "horizontal" } = c, h = w.useRef(null), [S, u] = w.useState(!1), [C, x] = w.useState(!1), [g, H] = w.useState(!1), n = y === "horizontal", p = w.useCallback(() => {
+    const t = h.current;
     if (t)
-      if (a) {
-        const e = Math.round(t.scrollLeft), c = t.scrollWidth, i = t.clientWidth;
-        h(c > i), C(e > 0), S(e + i < c - 1);
+      if (n) {
+        const e = Math.round(t.scrollLeft), i = t.scrollWidth, d = t.clientWidth;
+        u(i > d), x(e > 0), H(e + d < i - 1);
       } else {
-        const e = Math.round(t.scrollTop), c = t.scrollHeight, i = t.clientHeight;
-        h(c > i), C(e > 0), S(e + i < c - 1);
+        const e = Math.round(t.scrollTop), i = t.scrollHeight, d = t.clientHeight;
+        u(i > d), x(e > 0), H(e + d < i - 1);
       }
-  }, [a]);
-  f.useEffect(() => {
-    const t = w.current;
+  }, [n]);
+  w.useEffect(() => {
+    const t = h.current;
     if (!t) return;
-    u();
+    p();
     let e = null;
     if (typeof ResizeObserver < "u") {
       e = new ResizeObserver(() => {
-        u();
+        p();
       }), e.observe(t);
-      for (const c of t.children)
-        e.observe(c);
+      for (const i of t.children)
+        e.observe(i);
     }
-    return t.addEventListener("scroll", u, { passive: !0 }), () => {
-      e == null || e.disconnect(), t.removeEventListener("scroll", u);
+    return t.addEventListener("scroll", p, { passive: !0 }), () => {
+      e == null || e.disconnect(), t.removeEventListener("scroll", p);
     };
-  }, [u]);
-  const y = f.useCallback(() => {
+  }, [p]);
+  const z = w.useCallback(() => {
     var t;
-    (t = w.current) == null || t.scrollBy({
-      [a ? "left" : "top"]: -b,
-      behavior: B()
+    (t = h.current) == null || t.scrollBy({
+      [n ? "left" : "top"]: -m,
+      behavior: D()
     });
-  }, [b, a]), o = f.useCallback(() => {
+  }, [m, n]), o = w.useCallback(() => {
     var t;
-    (t = w.current) == null || t.scrollBy({
-      [a ? "left" : "top"]: b,
-      behavior: B()
+    (t = h.current) == null || t.scrollBy({
+      [n ? "left" : "top"]: m,
+      behavior: D()
     });
-  }, [b, a]);
+  }, [m, n]);
   return {
-    scrollRef: w,
-    hasOverflow: g,
-    canScrollStart: m,
-    canScrollEnd: x,
-    scrollToStart: y,
+    scrollRef: h,
+    hasOverflow: S,
+    canScrollStart: C,
+    canScrollEnd: g,
+    scrollToStart: z,
     scrollToEnd: o
   };
 }
-const _ = (s) => /* @__PURE__ */ l(
+const J = (c) => /* @__PURE__ */ l(
   "svg",
   {
     viewBox: "0 0 16 16",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
-    ...s,
+    ...c,
     children: /* @__PURE__ */ l("path", { d: "M 8.86 10.51 C 8.94 10.51 9.02 10.49 9.08 10.43 C 9.14 10.38 9.17 10.3 9.17 10.21 V 5.79 C 9.17 5.7 9.14 5.62 9.08 5.57 C 9.01 5.51 8.94 5.49 8.86 5.49 C 8.84 5.49 8.77 5.52 8.65 5.58 L 6.55 7.68 C 6.5 7.73 6.47 7.78 6.44 7.83 C 6.42 7.88 6.41 7.94 6.41 8 C 6.41 8.06 6.42 8.12 6.44 8.17 C 6.47 8.22 6.5 8.27 6.55 8.32 L 8.65 10.42 C 8.68 10.45 8.71 10.47 8.75 10.49 C 8.78 10.51 8.82 10.51 8.86 10.51 Z" })
   }
-), q = (s) => /* @__PURE__ */ l(
+), Q = (c) => /* @__PURE__ */ l(
   "svg",
   {
     viewBox: "0 0 16 16",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
-    ...s,
+    ...c,
     children: /* @__PURE__ */ l("path", { d: "M7.14 10.51C7.06 10.51 6.98 10.49 6.92 10.43C6.86 10.38 6.83 10.3 6.83 10.21V5.79C6.83 5.7 6.86 5.62 6.92 5.57C6.99 5.51 7.06 5.49 7.14 5.49C7.16 5.49 7.23 5.52 7.35 5.58L9.45 7.68C9.5 7.73 9.53 7.78 9.56 7.83C9.58 7.88 9.59 7.94 9.59 8C9.59 8.06 9.58 8.12 9.56 8.17C9.53 8.22 9.5 8.27 9.45 8.32L7.35 10.42C7.32 10.45 7.29 10.47 7.25 10.49C7.22 10.51 7.18 10.51 7.14 10.51Z" })
   }
-), J = (s) => /* @__PURE__ */ l(
+), X = (c) => /* @__PURE__ */ l(
   "svg",
   {
     viewBox: "0 0 16 16",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
-    ...s,
+    ...c,
     children: /* @__PURE__ */ l("path", { d: "M5.49 7.14C5.49 7.06 5.51 6.98 5.57 6.92C5.62 6.86 5.7 6.83 5.79 6.83H10.21C10.3 6.83 10.38 6.86 10.43 6.92C10.49 6.99 10.51 7.06 10.51 7.14C10.51 7.16 10.48 7.23 10.42 7.35L8.32 9.45C8.27 9.5 8.22 9.53 8.17 9.56C8.12 9.58 8.06 9.59 8 9.59C7.94 9.59 7.88 9.58 7.83 9.56C7.78 9.53 7.73 9.5 7.68 9.45L5.58 7.35C5.55 7.32 5.53 7.29 5.51 7.25C5.49 7.22 5.49 7.18 5.49 7.14Z" })
   }
-), Q = (s) => /* @__PURE__ */ l(
+), Y = (c) => /* @__PURE__ */ l(
   "svg",
   {
     viewBox: "0 0 16 16",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
-    ...s,
+    ...c,
     children: /* @__PURE__ */ l("path", { d: "M10.51 8.86C10.51 8.94 10.49 9.02 10.43 9.08C10.38 9.14 10.3 9.17 10.21 9.17H5.79C5.7 9.17 5.62 9.14 5.57 9.08C5.51 9.01 5.49 8.94 5.49 8.86C5.49 8.84 5.52 8.77 5.58 8.65L7.68 6.55C7.73 6.5 7.78 6.47 7.83 6.44C7.88 6.42 7.94 6.41 8 6.41C8.06 6.41 8.12 6.42 8.17 6.44C8.22 6.47 8.27 6.5 8.32 6.55L10.42 8.65C10.45 8.68 10.47 8.71 10.49 8.75C10.51 8.78 10.51 8.82 10.51 8.86Z" })
   }
-), X = W({
+), oo = Z({
   container: {
     position: "relative",
     display: "flex"
@@ -143,6 +144,7 @@ const _ = (s) => /* @__PURE__ */ l(
     boxShadow: "inset 0 -8px 6px -6px rgba(0,0,0,0.08)"
   },
   arrowButton: {
+    ...j,
     position: "absolute",
     zIndex: 20,
     display: "flex",
@@ -150,60 +152,68 @@ const _ = (s) => /* @__PURE__ */ l(
     justifyContent: "center",
     cursor: "pointer",
     backgroundColor: "transparent",
-    ...v.borderStyle("none"),
-    ...v.borderWidth(0),
-    ...v.padding(0)
+    ...b.borderStyle("none"),
+    ...b.borderWidth(0),
+    ...b.padding(0)
   },
   arrowHorizontalStart: {
+    ...a,
     left: 0,
     top: 0,
     bottom: 0,
     width: "1.5rem"
   },
   arrowHorizontalEnd: {
+    ...a,
     right: 0,
     top: 0,
     bottom: 0,
     width: "1.5rem"
   },
   arrowVerticalStart: {
+    ...a,
     top: 0,
     left: 0,
     right: 0,
     height: "1.5rem"
   },
   arrowVerticalEnd: {
+    ...a,
     bottom: 0,
     left: 0,
     right: 0,
     height: "1.5rem"
   },
   arrowBadge: {
+    ...a,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: I,
-    ...v.borderRadius(G),
+    backgroundColor: B,
+    ...b.borderRadius(P),
     backdropFilter: "blur(4px)",
-    color: K,
+    color: G,
     ":hover": {
-      backgroundColor: j
+      backgroundColor: $
     }
   },
   arrowIcon: {
+    ...a,
     width: "1rem",
     height: "1rem"
   },
   scrollAreaRoot: {
-    ...v.overflow("hidden"),
+    ...b.overflow("hidden"),
     flexGrow: 1,
     flexShrink: 1,
     flexBasis: "0%"
   },
   scrollAreaRootHorizontal: {
+    ...a,
     minWidth: 0
   },
   scrollAreaRootVertical: {
+    ...a,
     minHeight: 0,
     display: "flex",
     flexDirection: "column"
@@ -217,12 +227,13 @@ const _ = (s) => /* @__PURE__ */ l(
     flexDirection: "row"
   },
   viewport: {
-    ...v.borderRadius($),
+    ...a,
+    ...b.borderRadius(U),
     ":focus-visible": {
       outlineWidth: "2px",
       outlineOffset: "2px",
       outlineStyle: "solid",
-      outlineColor: Z
+      outlineColor: K
     }
   },
   viewportHorizontal: {
@@ -232,6 +243,7 @@ const _ = (s) => /* @__PURE__ */ l(
     }
   },
   viewportVertical: {
+    ...a,
     flexGrow: 1,
     flexShrink: 1,
     flexBasis: "0%",
@@ -243,7 +255,8 @@ const _ = (s) => /* @__PURE__ */ l(
     flexBasis: "0%"
   },
   scrollbar: {
-    ...v.padding("1px"),
+    ...a,
+    ...b.padding("1px"),
     transitionProperty: "color, background-color, border-color",
     transitionDuration: "150ms"
   },
@@ -251,107 +264,109 @@ const _ = (s) => /* @__PURE__ */ l(
     display: "none"
   },
   scrollbarHorizontal: {
+    ...a,
     height: "0.5rem",
     flexDirection: "column"
   },
   scrollbarVertical: {
+    ...a,
     width: "0.5rem",
     flexDirection: "row"
   },
   thumb: {
-    backgroundColor: I
+    backgroundColor: B
   }
-}), ao = f.forwardRef(function({
-  className: b,
-  children: H,
-  arrows: w = !1,
-  gradients: g = !0,
-  gradientWidth: h = 40,
-  gradientColor: m = "var(--volt-body)",
-  shadow: C = !0,
-  scrollbar: x = !1,
-  scrollStep: S,
-  orientation: a = "horizontal",
-  ...u
-}, y) {
-  const o = X(), t = U(), {
+}), co = w.forwardRef(function({
+  className: m,
+  children: y,
+  arrows: h = !1,
+  gradients: S = !0,
+  gradientWidth: u = 40,
+  gradientColor: C = "var(--volt-body)",
+  shadow: x = !0,
+  scrollbar: g = !1,
+  scrollStep: H,
+  orientation: n = "horizontal",
+  ...p
+}, z) {
+  const o = oo(), t = _(), {
     scrollRef: e,
-    hasOverflow: c,
-    canScrollStart: i,
-    canScrollEnd: z,
-    scrollToStart: k,
-    scrollToEnd: V
-  } = P({ scrollStep: S, orientation: a }), r = a === "horizontal", D = (p) => {
-    var E, R;
-    if (p.target !== p.currentTarget) return;
-    const L = r ? "ArrowLeft" : "ArrowUp", N = r ? "ArrowRight" : "ArrowDown";
-    switch (p.key) {
-      case L:
-        p.preventDefault(), k();
-        break;
+    hasOverflow: i,
+    canScrollStart: d,
+    canScrollEnd: k,
+    scrollToStart: V,
+    scrollToEnd: E
+  } = q({ scrollStep: H, orientation: n }), r = n === "horizontal", L = (v) => {
+    var R, A;
+    if (v.target !== v.currentTarget) return;
+    const N = r ? "ArrowLeft" : "ArrowUp", T = r ? "ArrowRight" : "ArrowDown";
+    switch (v.key) {
       case N:
-        p.preventDefault(), V();
+        v.preventDefault(), V();
+        break;
+      case T:
+        v.preventDefault(), E();
         break;
       case "Home":
-        p.preventDefault(), (E = e.current) == null || E.scrollTo({
+        v.preventDefault(), (R = e.current) == null || R.scrollTo({
           [r ? "left" : "top"]: 0,
           behavior: "smooth"
         });
         break;
       case "End":
-        p.preventDefault(), (R = e.current) == null || R.scrollTo({
+        v.preventDefault(), (A = e.current) == null || A.scrollTo({
           [r ? "left" : "top"]: r ? e.current.scrollWidth : e.current.scrollHeight,
           behavior: "smooth"
         });
         break;
     }
   };
-  return /* @__PURE__ */ A(
+  return /* @__PURE__ */ I(
     "div",
     {
-      ref: y,
+      ref: z,
       "data-slot": "scroll-overflow",
-      [n]: "scroll-overflow",
-      "data-orientation": a,
-      "data-has-overflow": c || void 0,
-      "data-can-scroll-start": i || void 0,
-      "data-can-scroll-end": z || void 0,
-      className: d(
+      [s]: "scroll-overflow",
+      "data-orientation": n,
+      "data-has-overflow": i || void 0,
+      "data-can-scroll-start": d || void 0,
+      "data-can-scroll-end": k || void 0,
+      className: f(
         o.container,
         r ? o.containerHorizontal : o.containerVertical,
-        b
+        m
       ),
       children: [
-        g && i && /* @__PURE__ */ l(
+        S && d && /* @__PURE__ */ l(
           "div",
           {
             "data-slot": "scroll-overflow-fade-start",
-            [n]: "scroll-overflow-fade-start",
+            [s]: "scroll-overflow-fade-start",
             "aria-hidden": "true",
-            className: d(
+            className: f(
               o.fade,
               r ? o.fadeHorizontalStart : o.fadeVerticalStart,
-              C && (r ? o.shadowHorizontalStart : o.shadowVerticalStart)
+              x && (r ? o.shadowHorizontalStart : o.shadowVerticalStart)
             ),
             style: r ? {
-              width: h,
-              background: `linear-gradient(to right, ${m}, transparent)`
+              width: u,
+              background: `linear-gradient(to right, ${C}, transparent)`
             } : {
-              height: h,
-              background: `linear-gradient(to bottom, ${m}, transparent)`
+              height: u,
+              background: `linear-gradient(to bottom, ${C}, transparent)`
             }
           }
         ),
-        w && i && /* @__PURE__ */ l(
+        h && d && /* @__PURE__ */ l(
           "button",
           {
             "data-slot": "scroll-overflow-arrow-start",
-            [n]: "scroll-overflow-arrow-start",
+            [s]: "scroll-overflow-arrow-start",
             type: "button",
             tabIndex: -1,
             "aria-label": r ? "Scroll left" : "Scroll up",
-            onClick: k,
-            className: d(
+            onClick: V,
+            className: f(
               o.arrowButton,
               r ? o.arrowHorizontalStart : o.arrowVerticalStart
             ),
@@ -359,61 +374,61 @@ const _ = (s) => /* @__PURE__ */ l(
               "span",
               {
                 "data-slot": "scroll-overflow-arrow-icon",
-                [n]: "scroll-overflow-arrow-icon",
+                [s]: "scroll-overflow-arrow-icon",
                 className: o.arrowBadge,
-                children: r ? /* @__PURE__ */ l(_, { className: o.arrowIcon }) : /* @__PURE__ */ l(J, { className: o.arrowIcon })
+                children: r ? /* @__PURE__ */ l(J, { className: o.arrowIcon }) : /* @__PURE__ */ l(X, { className: o.arrowIcon })
               }
             )
           }
         ),
-        /* @__PURE__ */ A(
-          T,
+        /* @__PURE__ */ I(
+          M,
           {
             "data-slot": "scroll-overflow-root",
             type: "scroll",
-            [n]: "scroll-overflow-root",
-            className: d(
+            [s]: "scroll-overflow-root",
+            className: f(
               o.scrollAreaRoot,
               r ? o.scrollAreaRootHorizontal : o.scrollAreaRootVertical,
-              x && (r ? o.scrollAreaRootScrollbarHorizontal : o.scrollAreaRootScrollbarVertical)
+              g && (r ? o.scrollAreaRootScrollbarHorizontal : o.scrollAreaRootScrollbarVertical)
             ),
-            ...u,
+            ...p,
             children: [
               /* @__PURE__ */ l(
-                M,
+                O,
                 {
                   ref: e,
                   "data-slot": "scroll-overflow-viewport",
-                  [n]: "scroll-overflow-viewport",
-                  tabIndex: c ? 0 : void 0,
-                  onKeyDown: D,
-                  className: d(
+                  [s]: "scroll-overflow-viewport",
+                  tabIndex: i ? 0 : void 0,
+                  onKeyDown: L,
+                  className: f(
                     o.viewport,
                     r && o.viewportHorizontal,
-                    x && o.viewportFlex,
+                    g && o.viewportFlex,
                     !r && o.viewportVertical
                   ),
-                  children: H
+                  children: y
                 }
               ),
               /* @__PURE__ */ l(
-                O,
+                F,
                 {
                   forceMount: !0,
-                  orientation: a,
+                  orientation: n,
                   "data-slot": "scroll-overflow-scrollbar",
-                  [n]: "scroll-overflow-scrollbar",
-                  className: d(
+                  [s]: "scroll-overflow-scrollbar",
+                  className: f(
                     t.track,
-                    x ? o.scrollbar : o.scrollbarHidden,
+                    g ? o.scrollbar : o.scrollbarHidden,
                     r ? o.scrollbarHorizontal : o.scrollbarVertical
                   ),
                   children: /* @__PURE__ */ l(
-                    F,
+                    W,
                     {
                       "data-slot": "scroll-overflow-thumb",
-                      [n]: "scroll-overflow-thumb",
-                      className: d(t.thumb, o.thumb)
+                      [s]: "scroll-overflow-thumb",
+                      className: f(t.thumb, o.thumb)
                     }
                   )
                 }
@@ -421,36 +436,36 @@ const _ = (s) => /* @__PURE__ */ l(
             ]
           }
         ),
-        g && z && /* @__PURE__ */ l(
+        S && k && /* @__PURE__ */ l(
           "div",
           {
             "data-slot": "scroll-overflow-fade-end",
-            [n]: "scroll-overflow-fade-end",
+            [s]: "scroll-overflow-fade-end",
             "aria-hidden": "true",
-            className: d(
+            className: f(
               o.fade,
               r ? o.fadeHorizontalEnd : o.fadeVerticalEnd,
-              C && (r ? o.shadowHorizontalEnd : o.shadowVerticalEnd)
+              x && (r ? o.shadowHorizontalEnd : o.shadowVerticalEnd)
             ),
             style: r ? {
-              width: h,
-              background: `linear-gradient(to left, ${m}, transparent)`
+              width: u,
+              background: `linear-gradient(to left, ${C}, transparent)`
             } : {
-              height: h,
-              background: `linear-gradient(to top, ${m}, transparent)`
+              height: u,
+              background: `linear-gradient(to top, ${C}, transparent)`
             }
           }
         ),
-        w && z && /* @__PURE__ */ l(
+        h && k && /* @__PURE__ */ l(
           "button",
           {
             "data-slot": "scroll-overflow-arrow-end",
-            [n]: "scroll-overflow-arrow-end",
+            [s]: "scroll-overflow-arrow-end",
             type: "button",
             tabIndex: -1,
             "aria-label": r ? "Scroll right" : "Scroll down",
-            onClick: V,
-            className: d(
+            onClick: E,
+            className: f(
               o.arrowButton,
               r ? o.arrowHorizontalEnd : o.arrowVerticalEnd
             ),
@@ -458,9 +473,9 @@ const _ = (s) => /* @__PURE__ */ l(
               "span",
               {
                 "data-slot": "scroll-overflow-arrow-icon",
-                [n]: "scroll-overflow-arrow-icon",
+                [s]: "scroll-overflow-arrow-icon",
                 className: o.arrowBadge,
-                children: r ? /* @__PURE__ */ l(q, { className: o.arrowIcon }) : /* @__PURE__ */ l(Q, { className: o.arrowIcon })
+                children: r ? /* @__PURE__ */ l(Q, { className: o.arrowIcon }) : /* @__PURE__ */ l(Y, { className: o.arrowIcon })
               }
             )
           }
@@ -470,7 +485,7 @@ const _ = (s) => /* @__PURE__ */ l(
   );
 });
 export {
-  ao as ScrollOverflow,
-  P as useScrollOverflow
+  co as ScrollOverflow,
+  q as useScrollOverflow
 };
 //# sourceMappingURL=scroll-overflow.js.map