@cognite/aura 0.3.2 → 0.3.3

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

@@ -1,271 +1,183 @@
-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
-}), 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;
+import { cn as e, isStorybookTestEnv as t } from "../../../../lib/utils.js";
+import { Button as n } from "../button/button.js";
+import { highlightCode as r } from "../../../../lib/highlight-code.js";
+import { createContext as i, forwardRef as a, useContext as o, useEffect as s, useMemo as c, useState as l } from "react";
+import { IconCheck as u, IconCopy as d, IconDownload as f, IconSelector as p } from "@tabler/icons-react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region libs/aura/src/components/ui/core/code-block/code-block.tsx
+var g = i({
+	code: "",
+	copyText: "",
+	isCollapsed: !1,
+	setIsCollapsed: () => void 0,
+	lineCount: 0
+}), _ = (e) => e.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;").replaceAll("'", "&#39;"), v = 14, y = 8e3, b = 400, x = 16384, S = 1;
+function C(e) {
+	let t = e.split("\n"), n = !1, r = t.slice(0, v).join("\n");
+	t.length > v && (n = !0), r.length > y && (r = r.slice(0, y), n = !0);
+	let i = r.length === 0 ? " " : r;
+	return n ? `${i}\n…` : i;
 }
-function Q(e) {
-  return e.split(`
-`).length > E || e.length > N;
+function w(e) {
+	return e.split("\n").length > v || e.length > y;
 }
-function Y(e, t) {
-  return t > W || e.length > G;
+function T(e, t) {
+	return t > b || e.length > x;
 }
-function Z(e) {
-  return `<pre><code>${P(e)}</code></pre>`;
+function E(e) {
+	return `<pre><code>${_(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: 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]
-    );
-    O(() => {
-      if (v) return;
-      let g = !1;
-      const B = (u) => {
-        if (!g) {
-          const m = Z(u);
-          p(m), _(m);
-        }
-      };
-      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: A,
-        isCollapsed: l,
-        setIsCollapsed: R,
-        lineCount: y
-      }),
-      [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: b,
-        "data-slot": "code-block",
-        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
-        ),
-        style: {
-          ...l ? {} : {
-            maxHeight: ee,
-            minHeight: 0
-          },
-          ...C
-        },
-        ...k,
-        children: [
-          /* @__PURE__ */ r(
-            "div",
-            {
-              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: U
-            }
-          ),
-          X
-        ]
-      }
-    ) });
-  }
-);
-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) {
-        t?.(new Error("Clipboard API not available"));
-        return;
-      }
-      try {
-        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")
-        );
-      }
-    }, p = C ? K : V;
-    return /* @__PURE__ */ r(
-      S,
-      {
-        ref: i,
-        "data-slot": "code-block-copy-button",
-        className: f("shrink-0", a),
-        onClick: d,
-        size: "icon-sm",
-        variant: "secondary",
-        ...h,
-        children: o ?? /* @__PURE__ */ r(p, { size: 14 })
-      }
-    );
-  }
-);
-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: o,
-        "data-slot": "code-block-collapse-button",
-        className: f("shrink-0", t),
-        onClick: () => h(!a),
-        size: "icon-sm",
-        variant: "secondary",
-        ...n,
-        children: e ?? /* @__PURE__ */ r($, { size: 14 })
-      }
-    );
-  }
-);
-le.displayName = "CodeBlockCollapseButton";
-const ae = w(
-  ({
-    fileName: e = "code.txt",
-    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") {
-        o?.(new Error("Download not available"));
-        return;
-      }
-      try {
-        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__ */ r(
-      S,
-      {
-        ref: C,
-        "data-slot": "code-block-download-button",
-        className: f("shrink-0", h),
-        onClick: b,
-        size: "icon-sm",
-        variant: "secondary",
-        ...i,
-        children: a ?? /* @__PURE__ */ r(q, { size: 14 })
-      }
-    );
-  }
-);
-ae.displayName = "CodeBlockDownloadButton";
-export {
-  ne as CodeBlock,
-  le as CodeBlockCollapseButton,
-  re as CodeBlockCopyButton,
-  ae as CodeBlockDownloadButton,
-  J as getCollapsedPreviewDisplay,
-  Q as isContentLargerThanPreview,
-  Z as plainPreMarkup,
-  Y as shouldUsePlainTextInsteadOfShiki
-};
+var D = "min(60vh, 32rem)", O = "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 = "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", A = a(({ code: n, copyText: i, language: a, showLineNumbers: o = !1, collapsed: u = !1, className: d, children: f, style: p, ...v }, y) => {
+	let [b, x] = l(""), [A, j] = l(""), [M, N] = l(u), P = n.length === 0 ? " " : n, F = n.split("\n").length, I = M && F > S, L = i ?? n, R = c(() => t ? `<pre><code>${_(P)}</code></pre>` : "", [P]);
+	s(() => {
+		if (t) return;
+		let e = !1, n = (t) => {
+			if (!e) {
+				let e = E(t);
+				x(e), j(e);
+			}
+		};
+		if (M && w(P)) {
+			let t = C(P);
+			return r(t, a, o).then(([t, n]) => {
+				e || (x(t), j(n));
+			}).catch((e) => {
+				console.error("Failed to highlight code:", e), n(t);
+			}), () => {
+				e = !0;
+			};
+		}
+		return !M && T(P, F) ? (queueMicrotask(() => {
+			n(P);
+		}), () => {
+			e = !0;
+		}) : (r(P, a, o).then(([t, n]) => {
+			e || (x(t), j(n));
+		}).catch((e) => {
+			console.error("Failed to highlight code:", e), n(P);
+		}), () => {
+			e = !0;
+		});
+	}, [
+		P,
+		a,
+		o,
+		M,
+		F
+	]);
+	let z = c(() => ({
+		code: n,
+		copyText: L,
+		isCollapsed: M,
+		setIsCollapsed: N,
+		lineCount: F
+	}), [
+		n,
+		L,
+		M,
+		F
+	]), B = /* @__PURE__ */ h("div", {
+		className: "relative",
+		children: [
+			/* @__PURE__ */ m("div", {
+				className: e(O, I && "max-h-26 overflow-y-hidden"),
+				dangerouslySetInnerHTML: { __html: t ? R : b }
+			}),
+			/* @__PURE__ */ m("div", {
+				className: e(k, I && "max-h-26 overflow-y-hidden"),
+				dangerouslySetInnerHTML: { __html: t ? R : A }
+			}),
+			I && /* @__PURE__ */ m("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" })
+		]
+	}), V = f == null ? null : /* @__PURE__ */ m("div", {
+		"data-slot": "code-block-actions",
+		className: e("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", t && "pointer-events-auto opacity-100"),
+		children: f
+	});
+	return /* @__PURE__ */ m(g.Provider, {
+		value: z,
+		children: /* @__PURE__ */ h("div", {
+			ref: y,
+			"data-slot": "code-block",
+			className: e("group/code-block relative w-full rounded-xl bg-background text-foreground", I ? "overflow-hidden" : "flex min-h-0 max-h-[min(60vh,_32rem)] flex-col overflow-hidden", d),
+			style: {
+				...I ? {} : {
+					maxHeight: D,
+					minHeight: 0
+				},
+				...p
+			},
+			...v,
+			children: [/* @__PURE__ */ m("div", {
+				className: e("relative min-h-0 bg-card-background", !I && "min-h-0 flex-1 overflow-x-auto overflow-y-auto [scrollbar-gutter:stable]"),
+				children: B
+			}), V]
+		})
+	});
+});
+A.displayName = "CodeBlock";
+var j = a(({ onCopy: t, onError: r, timeout: i = 2e3, children: a, className: s, ...c }, f) => {
+	let [p, h] = l(!1), { copyText: _ } = o(g), v = async () => {
+		if (typeof window > "u" || !navigator?.clipboard?.writeText) {
+			r?.(/* @__PURE__ */ Error("Clipboard API not available"));
+			return;
+		}
+		try {
+			await navigator.clipboard.writeText(_), h(!0), t?.(), setTimeout(() => h(!1), i);
+		} catch (e) {
+			console.warn("Clipboard write failed:", e), r?.(e instanceof Error ? e : /* @__PURE__ */ Error("Clipboard write failed"));
+		}
+	}, y = p ? u : d;
+	return /* @__PURE__ */ m(n, {
+		ref: f,
+		"data-slot": "code-block-copy-button",
+		className: e("shrink-0", s),
+		onClick: v,
+		size: "icon-sm",
+		variant: "secondary",
+		...c,
+		children: a ?? /* @__PURE__ */ m(y, { size: 14 })
+	});
+});
+j.displayName = "CodeBlockCopyButton";
+var M = a(({ children: t, className: r, ...i }, a) => {
+	let { isCollapsed: s, setIsCollapsed: c, lineCount: l } = o(g);
+	return l <= S ? null : /* @__PURE__ */ m(n, {
+		ref: a,
+		"data-slot": "code-block-collapse-button",
+		className: e("shrink-0", r),
+		onClick: () => c(!s),
+		size: "icon-sm",
+		variant: "secondary",
+		...i,
+		children: t ?? /* @__PURE__ */ m(p, { size: 14 })
+	});
+});
+M.displayName = "CodeBlockCollapseButton";
+var N = a(({ fileName: t = "code.txt", mimeType: r = "text/plain;charset=utf-8", onDownload: i, onError: a, children: s, className: c, ...l }, u) => {
+	let { code: d } = o(g);
+	return /* @__PURE__ */ m(n, {
+		ref: u,
+		"data-slot": "code-block-download-button",
+		className: e("shrink-0", c),
+		onClick: () => {
+			if (typeof window > "u" || typeof document > "u") {
+				a?.(/* @__PURE__ */ Error("Download not available"));
+				return;
+			}
+			try {
+				let e = new Blob([d], { type: r }), n = URL.createObjectURL(e), a = document.createElement("a");
+				a.href = n, a.download = t, a.rel = "noopener", a.click(), URL.revokeObjectURL(n), i?.();
+			} catch (e) {
+				a?.(e instanceof Error ? e : /* @__PURE__ */ Error("Download failed"));
+			}
+		},
+		size: "icon-sm",
+		variant: "secondary",
+		...l,
+		children: s ?? /* @__PURE__ */ m(f, { size: 14 })
+	});
+});
+N.displayName = "CodeBlockDownloadButton";
+//#endregion
+export { A as CodeBlock, M as CodeBlockCollapseButton, j as CodeBlockCopyButton, N as CodeBlockDownloadButton, C as getCollapsedPreviewDisplay, w as isContentLargerThanPreview, E as plainPreMarkup, T as shouldUsePlainTextInsteadOfShiki };

package/dist/components/ui/core/collapsible/collapsible.js

@@ -1,50 +1,30 @@
-import { jsx as a } from "react/jsx-runtime";
+import { cn as e } from "../../../../lib/utils.js";
 import { forwardRef as t } from "react";
-import { Collapsible as n } from "@base-ui/react/collapsible";
-import { cn as i } from "../../../../lib/utils.js";
-const s = t(({ className: l, ...o }, e) => /* @__PURE__ */ a(
-  n.Root,
-  {
-    ref: e,
-    "data-slot": "collapsible",
-    className: i(
-      "w-full min-w-0 rounded-md box-border *:max-w-full",
-      l
-    ),
-    ...o
-  }
-));
-s.displayName = "Collapsible";
-const d = t(({ className: l, children: o, ...e }, r) => /* @__PURE__ */ a(
-  n.Trigger,
-  {
-    ref: r,
-    "data-slot": "collapsible-trigger",
-    className: i(
-      "group/collapsible-trigger rounded-lg text-sm font-medium leading-5 text-foreground overflow-hidden",
-      l
-    ),
-    ...e,
-    children: o
-  }
-));
-d.displayName = "CollapsibleTrigger";
-const m = t(({ className: l, keepMounted: o = !0, ...e }, r) => /* @__PURE__ */ a(
-  n.Panel,
-  {
-    ref: r,
-    "data-slot": "collapsible-content",
-    className: i(
-      "hidden data-open:block border-none outline-none text-secondary-foreground text-sm font-normal leading-5 tracking-tight w-full min-w-0 overflow-x-hidden box-border *:max-w-full *:box-border",
-      l
-    ),
-    keepMounted: o,
-    ...e
-  }
-));
-m.displayName = "CollapsibleContent";
-export {
-  s as Collapsible,
-  m as CollapsibleContent,
-  d as CollapsibleTrigger
-};
+import { jsx as n } from "react/jsx-runtime";
+import { Collapsible as r } from "@base-ui/react/collapsible";
+//#region libs/aura/src/components/ui/core/collapsible/collapsible.tsx
+var i = t(({ className: t, ...i }, a) => /* @__PURE__ */ n(r.Root, {
+	ref: a,
+	"data-slot": "collapsible",
+	className: e("w-full min-w-0 rounded-md box-border *:max-w-full", t),
+	...i
+}));
+i.displayName = "Collapsible";
+var a = t(({ className: t, children: i, ...a }, o) => /* @__PURE__ */ n(r.Trigger, {
+	ref: o,
+	"data-slot": "collapsible-trigger",
+	className: e("group/collapsible-trigger rounded-lg text-sm font-medium leading-5 text-foreground overflow-hidden", t),
+	...a,
+	children: i
+}));
+a.displayName = "CollapsibleTrigger";
+var o = t(({ className: t, keepMounted: i = !0, ...a }, o) => /* @__PURE__ */ n(r.Panel, {
+	ref: o,
+	"data-slot": "collapsible-content",
+	className: e("hidden data-open:block border-none outline-none text-secondary-foreground text-sm font-normal leading-5 tracking-tight w-full min-w-0 overflow-x-hidden box-border *:max-w-full *:box-border", t),
+	keepMounted: i,
+	...a
+}));
+o.displayName = "CollapsibleContent";
+//#endregion
+export { i as Collapsible, o as CollapsibleContent, a as CollapsibleTrigger };

package/dist/components/ui/core/combobox/combobox.js

@@ -0,0 +1,41 @@
+import { cn as e } from "../../../../lib/utils.js";
+import { Button as t } from "../button/button.js";
+import { Command as n, CommandEmpty as r, CommandGroup as i, CommandInput as a, CommandItem as o, CommandList as s } from "../command/command.js";
+import { Popover as c, PopoverContent as l, PopoverTrigger as u } from "../popover/popover.js";
+import { forwardRef as d, useState as f } from "react";
+import { IconCaretUpDown as p, IconCheck as m } from "@tabler/icons-react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region libs/aura/src/components/ui/core/combobox/combobox.tsx
+var _ = d(({ options: d, value: _, onValueChange: v, placeholder: y = "Select option...", searchPlaceholder: b = "Search...", emptyText: x = "No option found.", className: S, ...C }, w) => {
+	let [T, E] = f(!1), [D, O] = f(_ ?? ""), k = _ !== void 0, A = k ? _ : D, j = (e) => {
+		let t = e === A ? "" : e;
+		k || O(t), v?.(t), E(!1);
+	};
+	return /* @__PURE__ */ h("div", {
+		"data-slot": "combobox",
+		children: /* @__PURE__ */ g(c, {
+			open: T,
+			onOpenChange: E,
+			children: [/* @__PURE__ */ h(u, { render: /* @__PURE__ */ g(t, {
+				ref: w,
+				"data-slot": "combobox-trigger",
+				variant: "outline",
+				role: "combobox",
+				"aria-expanded": T,
+				className: e("w-50 justify-between", S),
+				...C,
+				children: [A ? d.find((e) => e.value === A)?.label : y, /* @__PURE__ */ h(p, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })]
+			}) }), /* @__PURE__ */ h(l, {
+				className: e("w-50 p-0", S),
+				children: /* @__PURE__ */ g(n, { children: [/* @__PURE__ */ h(a, { placeholder: b }), /* @__PURE__ */ g(s, { children: [/* @__PURE__ */ h(r, { children: x }), /* @__PURE__ */ h(i, { children: d.map((t) => /* @__PURE__ */ g(o, {
+					value: t.value,
+					onSelect: j,
+					children: [/* @__PURE__ */ h(m, { className: e("mr-2 h-4 w-4", A === t.value ? "opacity-100" : "opacity-0") }), t.label]
+				}, t.value)) })] })] })
+			})]
+		})
+	});
+});
+_.displayName = "Combobox";
+//#endregion
+export { _ as Combobox };