@alfadocs/ui-kit 1.56.0 → 1.58.0

package/dist/_chunks/{scroll-area-ZtFCv9K7.js → scroll-area-CY5SLYNw.js}

@@ -1,9 +1,11 @@
-import { jsx as e, jsxs as S } from "react/jsx-runtime";
-import { forwardRef as m, useRef as x } from "react";
-import * as r from "@radix-ui/react-scroll-area";
-import { c as h } from "./index-D2ZczOXr.js";
-import { u as y } from "./use-direction-Dp8h70PP.js";
-const f = h(
+import { jsx as i, jsxs as H } from "react/jsx-runtime";
+import { forwardRef as m, useRef as b, useMemo as w, useState as T } from "react";
+import * as s from "@radix-ui/react-scroll-area";
+import { c as z } from "./index-D2ZczOXr.js";
+import { c as y } from "./compose-refs-C0k0tdqF.js";
+import { u as O } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import { u as D } from "./use-direction-Dp8h70PP.js";
+const p = z(
   [
     "ds:flex ds:touch-none ds:select-none",
     // Fade in/out based on Radix data-state (requires forceMount on Scrollbar).
@@ -30,7 +32,7 @@ const f = h(
       size: "md"
     }
   }
-), v = h(
+), g = z(
   [
     "ds:relative ds:flex-1",
     "ds:rounded-[var(--radius-full)]",
@@ -43,49 +45,73 @@ const f = h(
     'ds:before:absolute ds:before:content-[""] ds:before:inset-x-[calc((var(--min-target-size)-100%)/-2)]',
     "ds:before:inset-y-[calc((var(--min-target-size)-100%)/-2)]"
   ].join(" ")
-), g = (o, a, s) => o ?? (a || s ? "region" : void 0), A = (o) => o === "auto" || o === void 0 ? "hover" : o, N = {
+), x = (o, r, c) => o ?? (r || c ? "region" : void 0), S = (o) => o === "auto" || o === "scroll";
+function A(o, r) {
+  const [c, u] = T(!1);
+  return O(() => {
+    const e = o.current;
+    if (!e) return;
+    if (typeof ResizeObserver > "u") {
+      u(!0);
+      return;
+    }
+    const n = () => {
+      const a = getComputedStyle(e), v = (r !== "horizontal" || S(a.overflowY)) && e.scrollHeight - e.clientHeight > 1, f = (r !== "vertical" || S(a.overflowX)) && e.scrollWidth - e.clientWidth > 1;
+      u(f || v || e.ownerDocument.activeElement === e);
+    }, l = new ResizeObserver(n), t = () => {
+      l.disconnect(), l.observe(e);
+      for (const a of Array.from(e.children)) l.observe(a);
+    }, d = new MutationObserver(() => {
+      t(), n();
+    });
+    return t(), d.observe(e, { childList: !0 }), e.addEventListener("blur", n), n(), () => {
+      l.disconnect(), d.disconnect(), e.removeEventListener("blur", n);
+    };
+  }, [o, r]), c;
+}
+const E = (o) => o === "auto" || o === void 0 ? "hover" : o, M = {
   vertical: "ds:overflow-y-auto",
   horizontal: "ds:overflow-x-auto",
   both: "ds:overflow-auto"
-}, p = m(
+}, R = m(
   ({
     orientation: o = "vertical",
-    size: a = "md",
-    type: s = "auto",
-    className: i,
-    children: t,
+    size: r = "md",
+    type: c = "auto",
+    className: u,
+    children: e,
     scrollHideDelay: n,
     // The name and role belong on the viewport, the element that takes
     // focus, not on the Root wrapper around it.
-    "aria-label": d,
-    "aria-labelledby": c,
-    role: u,
-    ...l
-  }, z) => {
-    const b = x(null), w = y(b);
-    return /* @__PURE__ */ S(
-      r.Root,
+    "aria-label": l,
+    "aria-labelledby": t,
+    role: d,
+    ...a
+  }, v) => {
+    const f = b(null), j = D(f), h = b(null), V = w(() => y(v, h), [v]), C = A(h, o);
+    return /* @__PURE__ */ H(
+      s.Root,
       {
-        ref: b,
-        type: A(s),
-        dir: w,
+        ref: f,
+        type: E(c),
+        dir: j,
         scrollHideDelay: n,
         "data-component": "scroll-area",
         className: [
           "ds:relative ds:overflow-hidden",
           "ds:min-w-0 ds:min-h-0",
-          i
+          u
         ].filter(Boolean).join(" "),
-        ...l,
+        ...a,
         children: [
-          /* @__PURE__ */ e(
-            r.Viewport,
+          /* @__PURE__ */ i(
+            s.Viewport,
             {
-              ref: z,
-              tabIndex: 0,
-              role: g(u, d, c),
-              "aria-label": d,
-              "aria-labelledby": c,
+              ref: V,
+              tabIndex: C ? 0 : void 0,
+              role: x(d, l, t),
+              "aria-label": l,
+              "aria-labelledby": t,
               className: [
                 "ds:h-full ds:w-full ds:rounded-[inherit]",
                 // Radix wraps the viewport content in an inline
@@ -103,77 +129,81 @@ const f = h(
                 "ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
                 "ds:forced-colors:focus-visible:outline-[Highlight]"
               ].filter(Boolean).join(" "),
-              children: t
+              children: e
             }
           ),
           (o === "vertical" || o === "both") && // forceMount keeps the element in the DOM so CSS opacity transition
           // can animate the show/hide instead of mount/unmount snapping.
-          /* @__PURE__ */ e(
-            r.Scrollbar,
+          /* @__PURE__ */ i(
+            s.Scrollbar,
             {
               forceMount: !0,
               orientation: "vertical",
-              className: f({ size: a }),
-              children: /* @__PURE__ */ e(r.Thumb, { className: v() })
+              className: p({ size: r }),
+              children: /* @__PURE__ */ i(s.Thumb, { className: g() })
             }
           ),
-          (o === "horizontal" || o === "both") && /* @__PURE__ */ e(
-            r.Scrollbar,
+          (o === "horizontal" || o === "both") && /* @__PURE__ */ i(
+            s.Scrollbar,
             {
               forceMount: !0,
               orientation: "horizontal",
-              className: f({ size: a }),
-              children: /* @__PURE__ */ e(r.Thumb, { className: v() })
+              className: p({ size: r }),
+              children: /* @__PURE__ */ i(s.Thumb, { className: g() })
             }
           ),
-          /* @__PURE__ */ e(r.Corner, {})
+          /* @__PURE__ */ i(s.Corner, {})
         ]
       }
     );
   }
 );
-p.displayName = "RadixScrollArea";
-const R = m(
-  (o, a) => {
-    const {
-      orientation: s = "vertical",
-      type: i = "auto",
-      className: t,
-      children: n,
-      scrollHideDelay: d,
-      size: c,
-      role: u,
-      ...l
-    } = o;
-    return i === "native" ? /* @__PURE__ */ e(
+R.displayName = "RadixScrollArea";
+const N = m(
+  ({
+    orientation: o = "vertical",
+    type: r,
+    className: c,
+    children: u,
+    scrollHideDelay: e,
+    size: n,
+    role: l,
+    ...t
+  }, d) => {
+    const a = b(null), v = w(() => y(d, a), [d]), f = A(a, o);
+    return /* @__PURE__ */ i(
       "div",
       {
-        ref: a,
-        role: g(u, l["aria-label"], l["aria-labelledby"]),
+        ref: v,
+        role: x(l, t["aria-label"], t["aria-labelledby"]),
         "data-component": "scroll-area",
-        tabIndex: 0,
+        tabIndex: f ? 0 : void 0,
         className: [
-          N[s],
+          M[o],
           "ds:min-w-0 ds:min-h-0",
           "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
           "ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
           "ds:forced-colors:focus-visible:outline-[Highlight]",
-          t
+          c
         ].filter(Boolean).join(" "),
-        ...l,
-        children: n
+        ...t,
+        children: u
       }
-    ) : /* @__PURE__ */ e(p, { ref: a, ...o });
+    );
   }
 );
-R.displayName = "ScrollArea";
-const B = r.Root, C = r.Viewport, D = r.Scrollbar, k = r.Thumb, I = r.Corner;
+N.displayName = "NativeScrollArea";
+const B = m(
+  (o, r) => o.type === "native" ? /* @__PURE__ */ i(N, { ref: r, ...o }) : /* @__PURE__ */ i(R, { ref: r, ...o })
+);
+B.displayName = "ScrollArea";
+const X = s.Root, Y = s.Viewport, q = s.Scrollbar, F = s.Thumb, G = s.Corner;
 export {
-  R as S,
-  I as a,
-  B as b,
-  D as c,
-  k as d,
-  C as e
+  B as S,
+  G as a,
+  X as b,
+  q as c,
+  F as d,
+  Y as e
 };
-//# sourceMappingURL=scroll-area-ZtFCv9K7.js.map
+//# sourceMappingURL=scroll-area-CY5SLYNw.js.map