@cognite/aura 0.1.6 → 0.1.7

package/dist/components/ui/core/code-block/code-block.js

@@ -1,199 +1,267 @@
-import { jsx as t, jsxs as E } from "react/jsx-runtime";
-import { createContext as R, forwardRef as x, useState as y, useMemo as z, useEffect as L, useContext as B } from "react";
-import { IconCheck as S, IconCopy as j, IconSelector as M, IconDownload as U } from "@tabler/icons-react";
-import { isStorybookTestEnv as h, highlightCode as F, cn as i } from "../../../../lib/utils.js";
-import { Button as I } from "../button/button.js";
-const g = R({
+import { jsxs as L, jsx as r } from "react/jsx-runtime";
+import { createContext as F, forwardRef as w, useState as x, useMemo as D, useEffect as O, useContext as H } from "react";
+import { IconCheck as K, IconCopy as V, IconSelector as $, IconDownload as q } from "@tabler/icons-react";
+import { isStorybookTestEnv as v, highlightCode as M, cn as f } from "../../../../lib/utils.js";
+import { Button as S } from "../button/button.js";
+const I = F({
   code: "",
   copyText: "",
   isCollapsed: !1,
   setIsCollapsed: () => {
   },
   lineCount: 0
-}), A = (e) => e.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;"), O = x(
+}), P = (e) => e.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;"), E = 14, N = 8e3, W = 400, G = 16384;
+function J(e) {
+  const t = e.split(`
+`);
+  let n = !1, o = t.slice(0, E).join(`
+`);
+  t.length > E && (n = !0), o.length > N && (o = o.slice(0, N), n = !0);
+  const a = o.length === 0 ? " " : o;
+  return n ? `${a}
+…` : a;
+}
+function Q(e) {
+  return e.split(`
+`).length > E || e.length > N;
+}
+function Y(e, t) {
+  return t > W || e.length > G;
+}
+function Z(e) {
+  return `<pre><code>${P(e)}</code></pre>`;
+}
+const ee = "min(60vh, 32rem)", oe = "dark:hidden [&>pre]:m-0 [&>pre]:min-h-10 [&>pre]:bg-card-background [&>pre]:p-2 [&>pre]:text-secondary-foreground [&>pre]:leading-[18px] [&>pre]:tracking-[-0.08px] [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm [&>pre]:overflow-x-auto", te = "hidden dark:block [&>pre]:m-0 [&>pre]:min-h-10 [&>pre]:bg-card-background [&>pre]:p-2 [&>pre]:text-secondary-foreground [&>pre]:leading-[18px] [&>pre]:tracking-[-0.08px] [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm [&>pre]:overflow-x-auto", ne = w(
   ({
     code: e,
-    copyText: l,
-    language: a,
-    showLineNumbers: r = !1,
-    collapsed: s = !1,
-    className: d,
-    children: c,
-    ...m
-  }, p) => {
-    const [f, n] = y(""), [u, o] = y(""), [k, D] = y(s), b = e.length === 0 ? " " : e, N = e.split(`
-`).length, T = l ?? e, _ = z(
-      () => h ? `<pre><code>${A(b)}</code></pre>` : "",
-      [b]
+    copyText: t,
+    language: n,
+    showLineNumbers: o = !1,
+    collapsed: a = !1,
+    className: h,
+    children: i,
+    style: C,
+    ...k
+  }, b) => {
+    const [d, p] = x(""), [c, _] = x(""), [l, R] = x(a), s = e.length === 0 ? " " : e, y = e.split(`
+`).length, A = t ?? e, T = D(
+      () => v ? `<pre><code>${P(s)}</code></pre>` : "",
+      [s]
     );
-    L(() => {
-      if (h) return;
-      let w = !1;
-      return F(b, a, r).then(([v, C]) => {
-        w || (n(v), o(C));
-      }).catch((v) => {
-        if (console.error("Failed to highlight code:", v), !w) {
-          const C = `<pre><code>${A(b)}</code></pre>`;
-          n(C), o(C);
+    O(() => {
+      if (v) return;
+      let g = !1;
+      const B = (u) => {
+        if (!g) {
+          const m = Z(u);
+          p(m), _(m);
         }
-      }), () => {
-        w = !0;
       };
-    }, [b, a, r]);
-    const H = z(
+      if (l && Q(s)) {
+        const u = J(s);
+        return M(u, n, o).then(([m, j]) => {
+          g || (p(m), _(j));
+        }).catch((m) => {
+          console.error("Failed to highlight code:", m), B(u);
+        }), () => {
+          g = !0;
+        };
+      }
+      return !l && Y(s, y) ? (queueMicrotask(() => {
+        B(s);
+      }), () => {
+        g = !0;
+      }) : (M(s, n, o).then(([u, m]) => {
+        g || (p(u), _(m));
+      }).catch((u) => {
+        console.error("Failed to highlight code:", u), B(s);
+      }), () => {
+        g = !0;
+      });
+    }, [s, n, o, l, y]);
+    const z = D(
       () => ({
         code: e,
-        copyText: T,
-        isCollapsed: k,
-        setIsCollapsed: D,
-        lineCount: N
+        copyText: A,
+        isCollapsed: l,
+        setIsCollapsed: R,
+        lineCount: y
       }),
-      [e, T, k, N]
-    );
-    return /* @__PURE__ */ t(g.Provider, { value: H, children: /* @__PURE__ */ E(
+      [e, A, l, y]
+    ), U = /* @__PURE__ */ L("div", { className: "relative", children: [
+      /* @__PURE__ */ r(
+        "div",
+        {
+          className: f(
+            oe,
+            l && "max-h-26 overflow-y-hidden"
+          ),
+          dangerouslySetInnerHTML: {
+            __html: v ? T : d
+          }
+        }
+      ),
+      /* @__PURE__ */ r(
+        "div",
+        {
+          className: f(
+            te,
+            l && "max-h-26 overflow-y-hidden"
+          ),
+          dangerouslySetInnerHTML: {
+            __html: v ? T : c
+          }
+        }
+      ),
+      l && /* @__PURE__ */ r("div", { className: "pointer-events-none absolute bottom-0 left-0 right-0 h-3/4 bg-linear-to-b from-transparent via-card-background/70 to-card-background" })
+    ] }), X = i != null ? /* @__PURE__ */ r(
+      "div",
+      {
+        "data-slot": "code-block-actions",
+        className: f(
+          /* Sibling of scroll inner: pinned while code scrolls; even inset from top/right (scrollbar gutter on inner) */
+          "pointer-events-none absolute top-5 right-5 z-20 flex items-center gap-1 bg-transparent p-0 shadow-none ring-0 outline-none",
+          "opacity-0 transition-opacity",
+          "group-hover/code-block:pointer-events-auto group-hover/code-block:opacity-100",
+          "group-focus-within/code-block:pointer-events-auto group-focus-within/code-block:opacity-100",
+          v && "pointer-events-auto opacity-100"
+        ),
+        children: i
+      }
+    ) : null;
+    return /* @__PURE__ */ r(I.Provider, { value: z, children: /* @__PURE__ */ L(
       "div",
       {
-        ref: p,
+        ref: b,
         "data-slot": "code-block",
-        className: i(
-          "group/code-block relative w-full overflow-hidden rounded-xl bg-background text-foreground",
-          d
+        className: f(
+          "group/code-block relative w-full rounded-xl bg-background text-foreground",
+          l ? "overflow-hidden" : (
+            /* Expanded: flex + clip so actions overlay without a reserved top row */
+            "flex min-h-0 max-h-[min(60vh,_32rem)] flex-col overflow-hidden"
+          ),
+          h
         ),
-        ...m,
+        style: {
+          ...l ? {} : {
+            maxHeight: ee,
+            minHeight: 0
+          },
+          ...C
+        },
+        ...k,
         children: [
-          /* @__PURE__ */ E("div", { className: "relative", children: [
-            /* @__PURE__ */ t(
-              "div",
-              {
-                className: i(
-                  "dark:hidden [&>pre]:m-0 [&>pre]:min-h-10 [&>pre]:bg-card-background [&>pre]:p-2 [&>pre]:text-secondary-foreground [&>pre]:leading-[18px] [&>pre]:tracking-[-0.08px] [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm [&>pre]:overflow-x-auto",
-                  k && "max-h-26 overflow-y-hidden"
-                ),
-                dangerouslySetInnerHTML: {
-                  __html: h ? _ : f
-                }
-              }
-            ),
-            /* @__PURE__ */ t(
-              "div",
-              {
-                className: i(
-                  "hidden dark:block [&>pre]:m-0 [&>pre]:min-h-10 [&>pre]:bg-card-background [&>pre]:p-2 [&>pre]:text-secondary-foreground [&>pre]:leading-[18px] [&>pre]:tracking-[-0.08px] [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm [&>pre]:overflow-x-auto",
-                  k && "max-h-26 overflow-y-hidden"
-                ),
-                dangerouslySetInnerHTML: {
-                  __html: h ? _ : u
-                }
-              }
-            ),
-            k && /* @__PURE__ */ t("div", { className: "pointer-events-none absolute bottom-0 left-0 right-0 h-3/4 bg-linear-to-b from-transparent via-card-background/70 to-card-background" })
-          ] }),
-          c ? /* @__PURE__ */ t(
+          /* @__PURE__ */ r(
             "div",
             {
-              "data-slot": "code-block-actions",
-              className: i(
-                "absolute top-2 right-2 flex items-center gap-1 opacity-0 transition-opacity group-hover/code-block:opacity-100 group-focus-within/code-block:opacity-100",
-                h && "opacity-100"
+              className: f(
+                /* Match <pre> card tone so transparent actions are not over root bg-background */
+                "relative min-h-0 bg-card-background",
+                !l && "min-h-0 flex-1 overflow-x-auto overflow-y-auto [scrollbar-gutter:stable]"
               ),
-              children: c
+              children: U
             }
-          ) : null
+          ),
+          X
         ]
       }
     ) });
   }
 );
-O.displayName = "CodeBlock";
-const P = x(({ onCopy: e, onError: l, timeout: a = 2e3, children: r, className: s, ...d }, c) => {
-  const [m, p] = y(!1), { copyText: f } = B(g), n = async () => {
+ne.displayName = "CodeBlock";
+const re = w(({ onCopy: e, onError: t, timeout: n = 2e3, children: o, className: a, ...h }, i) => {
+  const [C, k] = x(!1), { copyText: b } = H(I), d = async () => {
     if (typeof window > "u" || !navigator?.clipboard?.writeText) {
-      l?.(new Error("Clipboard API not available"));
+      t?.(new Error("Clipboard API not available"));
       return;
     }
     try {
-      await navigator.clipboard.writeText(f), p(!0), e?.(), setTimeout(() => p(!1), a);
-    } catch (o) {
-      console.warn("Clipboard write failed:", o), l?.(
-        o instanceof Error ? o : new Error("Clipboard write failed")
+      await navigator.clipboard.writeText(b), k(!0), e?.(), setTimeout(() => k(!1), n);
+    } catch (c) {
+      console.warn("Clipboard write failed:", c), t?.(
+        c instanceof Error ? c : new Error("Clipboard write failed")
       );
     }
-  }, u = m ? S : j;
-  return /* @__PURE__ */ t(
-    I,
+  }, p = C ? K : V;
+  return /* @__PURE__ */ r(
+    S,
     {
-      ref: c,
+      ref: i,
       "data-slot": "code-block-copy-button",
-      className: i("shrink-0", s),
-      onClick: n,
+      className: f("shrink-0", a),
+      onClick: d,
       size: "icon-sm",
       variant: "secondary",
-      ...d,
-      children: r ?? /* @__PURE__ */ t(u, { size: 14 })
+      ...h,
+      children: o ?? /* @__PURE__ */ r(p, { size: 14 })
     }
   );
 });
-P.displayName = "CodeBlockCopyButton";
-const $ = x(({ children: e, className: l, ...a }, r) => {
-  const { isCollapsed: s, setIsCollapsed: d, lineCount: c } = B(g);
-  return c <= 1 ? null : /* @__PURE__ */ t(
-    I,
+re.displayName = "CodeBlockCopyButton";
+const le = w(({ children: e, className: t, ...n }, o) => {
+  const { isCollapsed: a, setIsCollapsed: h, lineCount: i } = H(I);
+  return i <= 1 ? null : /* @__PURE__ */ r(
+    S,
     {
-      ref: r,
+      ref: o,
       "data-slot": "code-block-collapse-button",
-      className: i("shrink-0", l),
-      onClick: () => d(!s),
+      className: f("shrink-0", t),
+      onClick: () => h(!a),
       size: "icon-sm",
       variant: "secondary",
-      ...a,
-      children: e ?? /* @__PURE__ */ t(M, { size: 14 })
+      ...n,
+      children: e ?? /* @__PURE__ */ r($, { size: 14 })
     }
   );
 });
-$.displayName = "CodeBlockCollapseButton";
-const q = x(
+le.displayName = "CodeBlockCollapseButton";
+const ae = w(
   ({
     fileName: e = "code.txt",
-    mimeType: l = "text/plain;charset=utf-8",
-    onDownload: a,
-    onError: r,
-    children: s,
-    className: d,
-    ...c
-  }, m) => {
-    const { code: p } = B(g), f = () => {
+    mimeType: t = "text/plain;charset=utf-8",
+    onDownload: n,
+    onError: o,
+    children: a,
+    className: h,
+    ...i
+  }, C) => {
+    const { code: k } = H(I), b = () => {
       if (typeof window > "u" || typeof document > "u") {
-        r?.(new Error("Download not available"));
+        o?.(new Error("Download not available"));
         return;
       }
       try {
-        const n = new Blob([p], { type: l }), u = URL.createObjectURL(n), o = document.createElement("a");
-        o.href = u, o.download = e, o.rel = "noopener", o.click(), URL.revokeObjectURL(u), a?.();
-      } catch (n) {
-        r?.(
-          n instanceof Error ? n : new Error("Download failed")
+        const d = new Blob([k], { type: t }), p = URL.createObjectURL(d), c = document.createElement("a");
+        c.href = p, c.download = e, c.rel = "noopener", c.click(), URL.revokeObjectURL(p), n?.();
+      } catch (d) {
+        o?.(
+          d instanceof Error ? d : new Error("Download failed")
         );
       }
     };
-    return /* @__PURE__ */ t(
-      I,
+    return /* @__PURE__ */ r(
+      S,
       {
-        ref: m,
+        ref: C,
         "data-slot": "code-block-download-button",
-        className: i("shrink-0", d),
-        onClick: f,
+        className: f("shrink-0", h),
+        onClick: b,
         size: "icon-sm",
         variant: "secondary",
-        ...c,
-        children: s ?? /* @__PURE__ */ t(U, { size: 14 })
+        ...i,
+        children: a ?? /* @__PURE__ */ r(q, { size: 14 })
       }
     );
   }
 );
-q.displayName = "CodeBlockDownloadButton";
+ae.displayName = "CodeBlockDownloadButton";
 export {
-  O as CodeBlock,
-  $ as CodeBlockCollapseButton,
-  P as CodeBlockCopyButton,
-  q as CodeBlockDownloadButton
+  ne as CodeBlock,
+  le as CodeBlockCollapseButton,
+  re as CodeBlockCopyButton,
+  ae as CodeBlockDownloadButton,
+  J as getCollapsedPreviewDisplay,
+  Q as isContentLargerThanPreview,
+  Z as plainPreMarkup,
+  Y as shouldUsePlainTextInsteadOfShiki
 };

package/dist/components/ui/core/dropdown-menu/dropdown-menu.d.ts

@@ -4,7 +4,7 @@ declare function DropdownMenu({ ...props }: MenuPrimitive.Root.Props): import("r
 declare namespace DropdownMenu {
     var displayName: string;
 }
-declare function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuPortal({ container, ...props }: MenuPrimitive.Portal.Props): import("react/jsx-runtime").JSX.Element;
 declare namespace DropdownMenuPortal {
     var displayName: string;
 }

package/dist/components/ui/core/dropdown-menu/dropdown-menu.js

@@ -1,21 +1,24 @@
-import { jsx as t, jsxs as p } from "react/jsx-runtime";
+import { jsx as n, jsxs as c } from "react/jsx-runtime";
 import { forwardRef as u } from "react";
 import { Menu as r } from "@base-ui/react/menu";
-import { IconCheck as c, IconChevronRight as f } from "@tabler/icons-react";
+import { IconCheck as p, IconChevronRight as f } from "@tabler/icons-react";
 import { usePortalContainer as b } from "../../../../lib/portal-container-context.js";
 import { cn as d } from "../../../../lib/utils.js";
 function v({ ...e }) {
-  return /* @__PURE__ */ t(r.Root, { "data-slot": "dropdown-menu", ...e });
+  return /* @__PURE__ */ n(r.Root, { "data-slot": "dropdown-menu", ...e });
 }
 v.displayName = "DropdownMenu";
-function l({ ...e }) {
-  const o = b();
-  return /* @__PURE__ */ t(
+function l({
+  container: e,
+  ...o
+}) {
+  const t = b();
+  return /* @__PURE__ */ n(
     r.Portal,
     {
       "data-slot": "dropdown-menu-portal",
-      container: o,
-      ...e
+      container: e ?? t,
+      ...o
     }
   );
 }
@@ -24,27 +27,27 @@ function w({
   children: e,
   ...o
 }) {
-  return /* @__PURE__ */ t(r.Trigger, { "data-slot": "dropdown-menu-trigger", ...o, children: e });
+  return /* @__PURE__ */ n(r.Trigger, { "data-slot": "dropdown-menu-trigger", ...o, children: e });
 }
 w.displayName = "DropdownMenuTrigger";
 function m({
   align: e = "start",
   alignOffset: o = 0,
-  side: n = "bottom",
+  side: t = "bottom",
   sideOffset: a = 4,
   className: s,
   container: i,
   ...g
 }) {
-  return /* @__PURE__ */ t(l, { container: i, children: /* @__PURE__ */ t(
+  return /* @__PURE__ */ n(l, { container: i, children: /* @__PURE__ */ n(
     r.Positioner,
     {
       className: "isolate z-50 outline-none",
       align: e,
       alignOffset: o,
-      side: n,
+      side: t,
       sideOffset: a,
-      children: /* @__PURE__ */ t(
+      children: /* @__PURE__ */ n(
         r.Popup,
         {
           "data-slot": "dropdown-menu-content",
@@ -60,16 +63,16 @@ function m({
 }
 m.displayName = "DropdownMenuContent";
 function x({ ...e }) {
-  return /* @__PURE__ */ t(r.Group, { "data-slot": "dropdown-menu-group", ...e });
+  return /* @__PURE__ */ n(r.Group, { "data-slot": "dropdown-menu-group", ...e });
 }
 x.displayName = "DropdownMenuGroup";
-const h = u(({ className: e, inset: o, variant: n = "default", children: a, ...s }, i) => /* @__PURE__ */ t(
+const h = u(({ className: e, inset: o, variant: t = "default", children: a, ...s }, i) => /* @__PURE__ */ n(
   r.Item,
   {
     ref: i,
     "data-slot": "dropdown-menu-item",
     "data-inset": o,
-    "data-variant": n,
+    "data-variant": t,
     className: d(
       "focus:bg-accent-background focus:text-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive-background-hover dark:data-[variant=destructive]:focus:bg-destructive-background-hover data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:text-destructive-foreground data-[variant=destructive]:hover:bg-destructive-background-hover dark:data-[variant=destructive]:hover:bg-destructive-background-hover [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm p-2 text-base outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
       e
@@ -79,7 +82,7 @@ const h = u(({ className: e, inset: o, variant: n = "default", children: a, ...s
   }
 ));
 h.displayName = "DropdownMenuItem";
-const M = u(({ className: e, children: o, checked: n, ...a }, s) => /* @__PURE__ */ p(
+const M = u(({ className: e, children: o, checked: t, ...a }, s) => /* @__PURE__ */ c(
   r.CheckboxItem,
   {
     ref: s,
@@ -88,17 +91,17 @@ const M = u(({ className: e, children: o, checked: n, ...a }, s) => /* @__PURE__
       "focus:bg-accent-background focus:text-foreground h-9 relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
       e
     ),
-    checked: n,
+    checked: t,
     ...a,
     children: [
-      /* @__PURE__ */ t("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ t(r.CheckboxItemIndicator, { children: /* @__PURE__ */ t(c, { className: "size-4 text-foreground" }) }) }),
+      /* @__PURE__ */ n("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ n(r.CheckboxItemIndicator, { children: /* @__PURE__ */ n(p, { className: "size-4 text-foreground" }) }) }),
       o
     ]
   }
 ));
 M.displayName = "DropdownMenuCheckboxItem";
 function D({ ...e }) {
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ n(
     r.RadioGroup,
     {
       "data-slot": "dropdown-menu-radio-group",
@@ -107,7 +110,7 @@ function D({ ...e }) {
   );
 }
 D.displayName = "DropdownMenuRadioGroup";
-const N = u(({ className: e, children: o, ...n }, a) => /* @__PURE__ */ p(
+const N = u(({ className: e, children: o, ...t }, a) => /* @__PURE__ */ c(
   r.RadioItem,
   {
     ref: a,
@@ -116,15 +119,15 @@ const N = u(({ className: e, children: o, ...n }, a) => /* @__PURE__ */ p(
       "focus:bg-accent-background focus:text-foreground h-9 relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
       e
     ),
-    ...n,
+    ...t,
     children: [
-      /* @__PURE__ */ t("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ t(r.RadioItemIndicator, { children: /* @__PURE__ */ t(c, { className: "size-4 text-foreground" }) }) }),
+      /* @__PURE__ */ n("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ n(r.RadioItemIndicator, { children: /* @__PURE__ */ n(p, { className: "size-4 text-foreground" }) }) }),
       o
     ]
   }
 ));
 N.displayName = "DropdownMenuRadioItem";
-const y = u(({ className: e, inset: o, ...n }, a) => /* @__PURE__ */ t(
+const y = u(({ className: e, inset: o, ...t }, a) => /* @__PURE__ */ n(
   r.GroupLabel,
   {
     ref: a,
@@ -134,14 +137,14 @@ const y = u(({ className: e, inset: o, ...n }, a) => /* @__PURE__ */ t(
       "-mx-1 -mt-1 mb-1 px-2 py-1.5 text-sm border-b border-border font-medium data-inset:pl-8 text-foreground dark:text-foreground",
       e
     ),
-    ...n
+    ...t
   }
 ));
 y.displayName = "DropdownMenuLabel";
-const k = u(({ className: e, ...o }, n) => /* @__PURE__ */ t(
+const k = u(({ className: e, ...o }, t) => /* @__PURE__ */ n(
   "div",
   {
-    ref: n,
+    ref: t,
     "data-slot": "dropdown-menu-header",
     className: d(
       "-mx-1 -mt-1 mb-1 flex flex-row items-center gap-2 border-b border-border px-2 py-2 pointer-events-none",
@@ -151,20 +154,20 @@ const k = u(({ className: e, ...o }, n) => /* @__PURE__ */ t(
   }
 ));
 k.displayName = "DropdownMenuHeader";
-const z = u(({ className: e, ...o }, n) => /* @__PURE__ */ t(
+const z = u(({ className: e, ...o }, t) => /* @__PURE__ */ n(
   r.Separator,
   {
-    ref: n,
+    ref: t,
     "data-slot": "dropdown-menu-separator",
     className: d("bg-border -mx-1 my-1 h-px", e),
     ...o
   }
 ));
 z.displayName = "DropdownMenuSeparator";
-const I = u(({ className: e, ...o }, n) => /* @__PURE__ */ t(
+const I = u(({ className: e, ...o }, t) => /* @__PURE__ */ n(
   "span",
   {
-    ref: n,
+    ref: t,
     "data-slot": "dropdown-menu-shortcut",
     className: d(
       "text-muted-foreground ml-auto text-xs tracking-widest",
@@ -175,10 +178,10 @@ const I = u(({ className: e, ...o }, n) => /* @__PURE__ */ t(
 ));
 I.displayName = "DropdownMenuShortcut";
 function S({ ...e }) {
-  return /* @__PURE__ */ t(r.SubmenuRoot, { "data-slot": "dropdown-menu-sub", ...e });
+  return /* @__PURE__ */ n(r.SubmenuRoot, { "data-slot": "dropdown-menu-sub", ...e });
 }
 S.displayName = "DropdownMenuSub";
-const _ = u(({ className: e, inset: o, children: n, ...a }, s) => /* @__PURE__ */ p(
+const _ = u(({ className: e, inset: o, children: t, ...a }, s) => /* @__PURE__ */ c(
   r.SubmenuTrigger,
   {
     ref: s,
@@ -190,8 +193,8 @@ const _ = u(({ className: e, inset: o, children: n, ...a }, s) => /* @__PURE__ *
     ),
     ...a,
     children: [
-      n,
-      /* @__PURE__ */ t(f, { className: "ml-auto size-4" })
+      t,
+      /* @__PURE__ */ n(f, { className: "ml-auto size-4" })
     ]
   }
 ));
@@ -199,29 +202,29 @@ _.displayName = "DropdownMenuSubTrigger";
 function C({
   align: e = "start",
   alignOffset: o = -3,
-  side: n = "right",
+  side: t = "right",
   sideOffset: a = 0,
   className: s,
   ...i
 }) {
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ n(
     m,
     {
       "data-slot": "dropdown-menu-sub-content",
       className: d("min-w-32 w-auto", s),
       align: e,
       alignOffset: o,
-      side: n,
+      side: t,
       sideOffset: a,
       ...i
     }
   );
 }
 C.displayName = "DropdownMenuSubContent";
-const R = u(({ className: e, ...o }, n) => /* @__PURE__ */ t(
+const R = u(({ className: e, ...o }, t) => /* @__PURE__ */ n(
   "div",
   {
-    ref: n,
+    ref: t,
     "data-slot": "dropdown-menu-section-label",
     className: d(
       "px-2 py-1 text-sm text-muted-foreground dark:text-muted-foreground",

package/dist/components/ui/core/scroll-area/scroll-area.d.ts

@@ -0,0 +1,3 @@
+declare const ScrollArea: import('react').ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').ScrollAreaRootProps, "ref"> & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const ScrollBar: import('react').ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').ScrollAreaScrollbarProps, "ref"> & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export { ScrollArea, ScrollBar };