@cognite/aura 0.1.6 → 0.2.0

package/dist/components/ui/core/checkbox/checkbox.metadata.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../../../lib/types';
+export declare const CheckboxMetadata: ComponentMeta;

package/dist/components/ui/core/checkbox/checkbox.metadata.js

@@ -0,0 +1,8 @@
+const e = {
+  name: "Checkbox",
+  description: "A composable checkbox group with optional label and description slots, including a card-style item variant and support for checked, unchecked, and indeterminate states.",
+  llmUsage: 'Use `<CheckboxGroup>` with `<CheckboxItem>` wrapping `<CheckboxItemControl />`, plus optional `<CheckboxItemLabel>` and `<CheckboxItemDescription>`. Always pass an accessible name on `<CheckboxItemControl>` via `aria-label` (or `aria-labelledby` pointing to the label\'s id) — the wrapping `<label>` element names the underlying hidden form input, but does not name the visible `role="checkbox"` element that screen readers focus on. `<CheckboxItemDescription>` is a visual slot at this primitive layer; if you need it announced by screen readers, give it an `id` and pass `aria-describedby` to `<CheckboxItemControl>`. Use `variant="card"` on `<CheckboxItem>` for card-style options. `<CheckboxItemControl>` supports `checked`, `defaultChecked`, `indeterminate`, `onCheckedChange`, `disabled`, and `required` for form integration.'
+};
+export {
+  e as CheckboxMetadata
+};

package/dist/components/ui/core/code-block/code-block.d.ts

@@ -1,6 +1,10 @@
 import { ComponentProps, HTMLAttributes } from 'react';
 import { BundledLanguage } from 'shiki';
 import { Button } from '../button/button';
+export declare function getCollapsedPreviewDisplay(code: string): string;
+export declare function isContentLargerThanPreview(code: string): boolean;
+export declare function shouldUsePlainTextInsteadOfShiki(code: string, lineCount: number): boolean;
+export declare function plainPreMarkup(code: string): string;
 declare const CodeBlock: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     code: string;
     copyText?: string;
@@ -16,7 +20,7 @@ type CodeBlockCopyButtonProps = ComponentProps<typeof Button> & {
 declare const CodeBlockCopyButton: import('react').ForwardRefExoticComponent<Omit<CodeBlockCopyButtonProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
 declare const CodeBlockCollapseButton: import('react').ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').ButtonProps & import('class-variance-authority').VariantProps<(props?: ({
     variant?: "default" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
-    size?: "icon" | "default" | "sm" | "lg" | "icon-sm" | "icon-lg" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string>, "ref"> & import('react').RefAttributes<HTMLElement>, "ref"> & import('react').RefAttributes<HTMLElement>>;
 type CodeBlockDownloadButtonProps = ComponentProps<typeof Button> & {
     fileName?: string;

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/command/command.d.ts

@@ -31,7 +31,7 @@ declare const CommandInput: import('react').ForwardRefExoticComponent<Omit<Omit<
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof import('react').InputHTMLAttributes<HTMLInputElement> | "asChild">, "onChange" | "value" | "type"> & {
+}, "key" | keyof import('react').InputHTMLAttributes<HTMLInputElement> | "asChild">, "type" | "value" | "onChange"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & import('react').RefAttributes<HTMLInputElement>, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
@@ -75,7 +75,7 @@ declare const CommandItem: import('react').ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "value" | "disabled"> & {
+}, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild">, "disabled" | "value" | "onSelect"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

package/dist/components/ui/core/count/count.d.ts

@@ -0,0 +1,8 @@
+import { VariantProps } from 'class-variance-authority';
+declare const countVariants: (props?: ({
+    variant?: "default" | "warning" | "critical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const Count: import('react').ForwardRefExoticComponent<Omit<import('react').ClassAttributes<HTMLOutputElement> & import('react').OutputHTMLAttributes<HTMLOutputElement> & VariantProps<(props?: ({
+    variant?: "default" | "warning" | "critical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string>, "ref"> & import('react').RefAttributes<HTMLOutputElement>>;
+export { Count, countVariants };

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

@@ -0,0 +1,32 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as o } from "react";
+import { cva as i } from "class-variance-authority";
+import { cn as u } from "../../../../lib/utils.js";
+const c = i(
+  "flex min-h-9 min-w-9 flex-col items-center justify-center rounded-sm px-0.5 text-3xl font-medium leading-8 tracking-tightest",
+  {
+    variants: {
+      variant: {
+        default: "bg-neutral-background text-neutral-foreground-on-neutral",
+        warning: "bg-warning-background text-warning-foreground-on-warning",
+        critical: "bg-destructive-background text-destructive-foreground-on-critical"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+), d = o(({ className: t, variant: r, ...n }, a) => /* @__PURE__ */ e(
+  "output",
+  {
+    ref: a,
+    "data-slot": "count",
+    className: u(c({ variant: r }), t),
+    ...n
+  }
+));
+d.displayName = "Count";
+export {
+  d as Count,
+  c as countVariants
+};

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;
 }