@alfadocs/ui-kit 1.54.2 → 1.55.0

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

@@ -1,9 +1,9 @@
-import { jsx as s, jsxs as g } from "react/jsx-runtime";
-import { forwardRef as v, useRef as z } from "react";
+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 b } from "./index-D2ZczOXr.js";
-import { u as p } from "./use-direction-Dp8h70PP.js";
-const u = b(
+import { c as h } from "./index-D2ZczOXr.js";
+import { u as y } from "./use-direction-Dp8h70PP.js";
+const f = h(
   [
     "ds:flex ds:touch-none ds:select-none",
     // Fade in/out based on Radix data-state (requires forceMount on Scrollbar).
@@ -30,7 +30,7 @@ const u = b(
       size: "md"
     }
   }
-), f = b(
+), v = h(
   [
     "ds:relative ds:flex-1",
     "ds:rounded-[var(--radius-full)]",
@@ -43,27 +43,32 @@ const u = b(
     '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(" ")
-), w = (o) => o === "auto" || o === void 0 ? "hover" : o, S = {
+), g = (o, a, s) => o ?? (a || s ? "region" : void 0), A = (o) => o === "auto" || o === void 0 ? "hover" : o, N = {
   vertical: "ds:overflow-y-auto",
   horizontal: "ds:overflow-x-auto",
   both: "ds:overflow-auto"
-}, m = v(
+}, p = m(
   ({
     orientation: o = "vertical",
-    size: e = "md",
-    type: l = "auto",
+    size: a = "md",
+    type: s = "auto",
     className: i,
     children: t,
     scrollHideDelay: n,
-    ...d
-  }, c) => {
-    const a = z(null), h = p(a);
-    return /* @__PURE__ */ g(
+    // 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,
       {
-        ref: a,
-        type: w(l),
-        dir: h,
+        ref: b,
+        type: A(s),
+        dir: w,
         scrollHideDelay: n,
         "data-component": "scroll-area",
         className: [
@@ -71,13 +76,16 @@ const u = b(
           "ds:min-w-0 ds:min-h-0",
           i
         ].filter(Boolean).join(" "),
-        ...d,
+        ...l,
         children: [
-          /* @__PURE__ */ s(
+          /* @__PURE__ */ e(
             r.Viewport,
             {
-              ref: c,
+              ref: z,
               tabIndex: 0,
+              role: g(u, d, c),
+              "aria-label": d,
+              "aria-labelledby": c,
               className: [
                 "ds:h-full ds:w-full ds:rounded-[inherit]",
                 // Radix wraps the viewport content in an inline
@@ -100,70 +108,72 @@ const u = b(
           ),
           (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__ */ s(
+          /* @__PURE__ */ e(
             r.Scrollbar,
             {
               forceMount: !0,
               orientation: "vertical",
-              className: u({ size: e }),
-              children: /* @__PURE__ */ s(r.Thumb, { className: f() })
+              className: f({ size: a }),
+              children: /* @__PURE__ */ e(r.Thumb, { className: v() })
             }
           ),
-          (o === "horizontal" || o === "both") && /* @__PURE__ */ s(
+          (o === "horizontal" || o === "both") && /* @__PURE__ */ e(
             r.Scrollbar,
             {
               forceMount: !0,
               orientation: "horizontal",
-              className: u({ size: e }),
-              children: /* @__PURE__ */ s(r.Thumb, { className: f() })
+              className: f({ size: a }),
+              children: /* @__PURE__ */ e(r.Thumb, { className: v() })
             }
           ),
-          /* @__PURE__ */ s(r.Corner, {})
+          /* @__PURE__ */ e(r.Corner, {})
         ]
       }
     );
   }
 );
-m.displayName = "RadixScrollArea";
-const x = v(
-  (o, e) => {
+p.displayName = "RadixScrollArea";
+const R = m(
+  (o, a) => {
     const {
-      orientation: l = "vertical",
+      orientation: s = "vertical",
       type: i = "auto",
       className: t,
       children: n,
       scrollHideDelay: d,
       size: c,
-      ...a
+      role: u,
+      ...l
     } = o;
-    return i === "native" ? /* @__PURE__ */ s(
+    return i === "native" ? /* @__PURE__ */ e(
       "div",
       {
-        ref: e,
+        ref: a,
+        role: g(u, l["aria-label"], l["aria-labelledby"]),
         "data-component": "scroll-area",
         tabIndex: 0,
         className: [
-          S[l],
+          N[s],
           "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
         ].filter(Boolean).join(" "),
-        ...a,
+        ...l,
         children: n
       }
-    ) : /* @__PURE__ */ s(m, { ref: e, ...o });
+    ) : /* @__PURE__ */ e(p, { ref: a, ...o });
   }
 );
-x.displayName = "ScrollArea";
-const R = r.Root, T = r.Viewport, V = r.Scrollbar, B = r.Thumb, H = r.Corner;
+R.displayName = "ScrollArea";
+const B = r.Root, C = r.Viewport, D = r.Scrollbar, k = r.Thumb, I = r.Corner;
 export {
-  x as S,
-  H as a,
-  R as b,
-  V as c,
-  B as d,
-  T as e
+  R as S,
+  I as a,
+  B as b,
+  D as c,
+  k as d,
+  C as e
 };
-//# sourceMappingURL=scroll-area-BZOvUhwQ.js.map
+//# sourceMappingURL=scroll-area-ZtFCv9K7.js.map