@cognite/aura 0.1.5 → 0.1.7

package/dist/components/ui/core/prompt-input/prompt-input.js

@@ -1,28 +1,28 @@
 import { jsx as o, jsxs as w } from "react/jsx-runtime";
-import { createContext as H, forwardRef as p, useState as N, useContext as b, useCallback as A, useMemo as E } from "react";
-import { IconSend as D, IconLoader2 as z, IconSquare as B, IconX as L, IconPlus as k, IconInfoCircle as G } from "@tabler/icons-react";
+import { createContext as H, forwardRef as s, useState as y, useContext as C, useCallback as k, useMemo as A } from "react";
+import { IconSend as E, IconLoader2 as D, IconSquare as z, IconX as B, IconPlus as L, IconInfoCircle as G } from "@tabler/icons-react";
 import { cn as r } from "../../../../lib/utils.js";
 import { Command as F, CommandEmpty as j, CommandGroup as K, CommandInput as V, CommandItem as q, CommandList as R, CommandSeparator as O } from "../command/command.js";
 import { DropdownMenu as W, DropdownMenuContent as X, DropdownMenuItem as J, DropdownMenuTrigger as Q } from "../dropdown-menu/dropdown-menu.js";
-import { HelperText as C } from "../helper-text/helper-text.js";
+import { HelperText as f } from "../helper-text/helper-text.js";
 import { HoverCard as U, HoverCardContent as Y, HoverCardTrigger as Z } from "../hover-card/hover-card.js";
 import { InputGroupTextarea as _, InputGroupAddon as x, InputGroupButton as h, InputGroup as $ } from "../input-group/input-group.js";
 import { Select as tt, SelectContent as et, SelectItem as ot, SelectTrigger as nt, SelectValue as rt } from "../select/select.js";
-const g = H(
+const N = H(
   null
 ), Jt = () => {
-  const t = b(g);
+  const t = C(N);
   if (!t)
     throw new Error(
       "Wrap your component inside <PromptInputProvider> to use usePromptInputController()."
     );
   return t;
-}, v = () => b(g);
+}, v = () => C(N);
 function at({
   initialInput: t = "",
   children: e
 }) {
-  const [n, a] = N(t), l = A(() => a(""), []), s = E(
+  const [n, a] = y(t), l = k(() => a(""), []), p = A(
     () => ({
       textInput: {
         value: n,
@@ -32,39 +32,39 @@ function at({
     }),
     [n, l]
   );
-  return /* @__PURE__ */ o(g.Provider, { value: s, children: e });
+  return /* @__PURE__ */ o(N.Provider, { value: p, children: e });
 }
 at.displayName = "PromptInputProvider";
-const pt = ({
+const st = ({
   className: t,
   onSubmit: e,
   helperText: n,
   errorMessage: a,
   children: l,
-  ...s
+  ...p
 }) => {
-  const m = v(), [u, d] = N(null), P = (y) => {
-    y.preventDefault();
-    const f = y.currentTarget, M = m ? m.textInput.value : (() => {
-      const I = new FormData(f).get("message");
+  const m = v(), [u, c] = y(null), P = (g) => {
+    g.preventDefault();
+    const b = g.currentTarget, M = m ? m.textInput.value : (() => {
+      const I = new FormData(b).get("message");
       return typeof I == "string" ? I : "";
     })();
-    m || f.reset();
+    m || b.reset();
     try {
-      const c = e({ text: M }, y);
-      c instanceof Promise ? c.then(() => {
-        d(null), m?.textInput.clear();
+      const d = e({ text: M }, g);
+      d instanceof Promise ? d.then(() => {
+        c(null), m?.textInput.clear();
       }).catch((I) => {
-        console.error("PromptInput: Submission error:", I), d(
+        console.error("PromptInput: Submission error:", I), c(
           I instanceof Error ? I.message : "Failed to submit. Please try again."
         );
-      }) : (d(null), m?.textInput.clear());
-    } catch (c) {
-      console.error("PromptInput: Submission error:", c), d(
-        c instanceof Error ? c.message : "Failed to submit. Please try again."
+      }) : (c(null), m?.textInput.clear());
+    } catch (d) {
+      console.error("PromptInput: Submission error:", d), c(
+        d instanceof Error ? d.message : "Failed to submit. Please try again."
       );
     }
-  }, S = n === !1 ? null : n ?? /* @__PURE__ */ o(C, { size: "xs", icon: /* @__PURE__ */ o(G, {}), children: "AI doesn't always get it right. Be sure to check results" });
+  }, S = n === !1 ? null : n ?? /* @__PURE__ */ o(f, { size: "xs", icon: /* @__PURE__ */ o(G, {}), children: "AI doesn't always get it right. Be sure to check results" });
   return /* @__PURE__ */ w("div", { className: "w-full flex flex-col gap-2", children: [
     /* @__PURE__ */ o(
       "form",
@@ -72,15 +72,15 @@ const pt = ({
         "data-slot": "prompt-input",
         className: r("w-full", t),
         onSubmit: P,
-        ...s,
-        children: /* @__PURE__ */ o($, { className: "shadow-none rounded-xl has-[[data-slot=input-group-control]:read-only]:border-input hover:has-[[data-slot=input-group-control]:read-only]:border-input hover:has-[[data-slot=input-group-control]:read-only]:bg-background hover:has-[[data-slot=input-group-control]:read-only]:text-current", children: l })
+        ...p,
+        children: /* @__PURE__ */ o($, { className: "shadow-none rounded-xl has-[[data-slot=input-group-control]:is(:read-only,[aria-disabled=true])]:border-muted-background has-[[data-slot=input-group-control]:is(:read-only,[aria-disabled=true])]:bg-muted-background hover:has-[[data-slot=input-group-control]:is(:read-only,[aria-disabled=true])]:border-muted-background hover:has-[[data-slot=input-group-control]:is(:read-only,[aria-disabled=true])]:bg-muted-background hover:has-[[data-slot=input-group-control]:is(:read-only,[aria-disabled=true])]:text-muted-foreground", children: l })
       }
     ),
-    a || u ? /* @__PURE__ */ o(C, { size: "xs", isError: !0, children: a || u }) : S
+    a || u ? /* @__PURE__ */ o(f, { size: "xs", isError: !0, children: a || u }) : S
   ] });
 };
-pt.displayName = "PromptInput";
-const st = p(
+st.displayName = "PromptInput";
+const pt = s(
   ({ className: t, ...e }, n) => /* @__PURE__ */ o(
     "div",
     {
@@ -91,19 +91,19 @@ const st = p(
     }
   )
 );
-st.displayName = "PromptInputBody";
-const mt = p(
+pt.displayName = "PromptInputBody";
+const mt = s(
   ({ onChange: t, className: e, placeholder: n = "Type your message...", ...a }, l) => {
-    const s = v(), [m, u] = N(!1), d = (i) => {
+    const p = v(), [m, u] = y(!1), c = (i) => {
       if (i.key === "Enter") {
         if (m || i.nativeEvent.isComposing || i.shiftKey)
           return;
         i.preventDefault(), i.currentTarget.form?.requestSubmit();
       }
-    }, P = s ? {
-      value: s.textInput.value,
+    }, P = p ? {
+      value: p.textInput.value,
       onChange: (i) => {
-        s.textInput.setInput(i.currentTarget.value), t?.(i);
+        p.textInput.setInput(i.currentTarget.value), t?.(i);
       }
     } : {
       onChange: t
@@ -119,7 +119,7 @@ const mt = p(
         name: "message",
         onCompositionEnd: () => u(!1),
         onCompositionStart: () => u(!0),
-        onKeyDown: d,
+        onKeyDown: c,
         placeholder: n,
         ...a,
         ...P
@@ -128,7 +128,7 @@ const mt = p(
   }
 );
 mt.displayName = "PromptInputTextarea";
-const lt = p(({ className: t, ...e }, n) => /* @__PURE__ */ o(
+const lt = s(({ className: t, ...e }, n) => /* @__PURE__ */ o(
   x,
   {
     ref: n,
@@ -138,7 +138,7 @@ const lt = p(({ className: t, ...e }, n) => /* @__PURE__ */ o(
   }
 ));
 lt.displayName = "PromptInputHeader";
-const ut = p(({ className: t, ...e }, n) => /* @__PURE__ */ o(
+const ut = s(({ className: t, ...e }, n) => /* @__PURE__ */ o(
   x,
   {
     ref: n,
@@ -148,7 +148,7 @@ const ut = p(({ className: t, ...e }, n) => /* @__PURE__ */ o(
   }
 ));
 ut.displayName = "PromptInputFooter";
-const it = p(
+const it = s(
   ({ className: t, ...e }, n) => /* @__PURE__ */ o(
     "div",
     {
@@ -160,8 +160,8 @@ const it = p(
   )
 );
 it.displayName = "PromptInputTools";
-const T = p(({ variant: t = "ghost", className: e, size: n, ...a }, l) => {
-  const s = a.children === void 0 || a.children === null ? 0 : Array.isArray(a.children) ? a.children.length : 1, m = n ?? (s > 1 ? "sm" : "icon-sm");
+const T = s(({ variant: t = "ghost", className: e, size: n, ...a }, l) => {
+  const p = a.children === void 0 || a.children === null ? 0 : Array.isArray(a.children) ? a.children.length : 1, m = n ?? (p > 1 ? "sm" : "icon-sm");
   return /* @__PURE__ */ o(
     h,
     {
@@ -175,19 +175,19 @@ const T = p(({ variant: t = "ghost", className: e, size: n, ...a }, l) => {
   );
 });
 T.displayName = "PromptInputButton";
-const ct = (t) => /* @__PURE__ */ o(W, { ...t });
-ct.displayName = "PromptInputActionMenu";
-const dt = ({
+const dt = (t) => /* @__PURE__ */ o(W, { ...t });
+dt.displayName = "PromptInputActionMenu";
+const ct = ({
   className: t,
   children: e,
   ...n
 }) => /* @__PURE__ */ o(
   Q,
   {
-    render: /* @__PURE__ */ o(T, { className: t, ...n, children: e ?? /* @__PURE__ */ o(k, { className: "size-4" }) })
+    render: /* @__PURE__ */ o(T, { className: t, ...n, children: e ?? /* @__PURE__ */ o(L, { className: "size-4" }) })
   }
 );
-dt.displayName = "PromptInputActionMenuTrigger";
+ct.displayName = "PromptInputActionMenuTrigger";
 const It = ({
   className: t,
   ...e
@@ -198,17 +198,17 @@ const Pt = ({
   ...e
 }) => /* @__PURE__ */ o(J, { className: r(t), ...e });
 Pt.displayName = "PromptInputActionMenuItem";
-const yt = p(
+const gt = s(
   ({
     className: t,
     variant: e = "default",
     size: n = "icon-sm",
     status: a,
     children: l,
-    ...s
+    ...p
   }, m) => {
-    let u = /* @__PURE__ */ o(D, { className: "size-4" });
-    return a === "submitted" ? u = /* @__PURE__ */ o(z, { className: "size-4 animate-spin" }) : a === "streaming" ? u = /* @__PURE__ */ o(B, { className: "size-4" }) : a === "error" && (u = /* @__PURE__ */ o(L, { className: "size-4" })), /* @__PURE__ */ o(
+    let u = /* @__PURE__ */ o(E, { className: "size-4" });
+    return a === "submitted" ? u = /* @__PURE__ */ o(D, { className: "size-4 animate-spin" }) : a === "streaming" ? u = /* @__PURE__ */ o(z, { className: "size-4" }) : a === "error" && (u = /* @__PURE__ */ o(B, { className: "size-4" })), /* @__PURE__ */ o(
       h,
       {
         ref: m,
@@ -218,16 +218,16 @@ const yt = p(
         size: n,
         type: "submit",
         variant: e,
-        ...s,
+        ...p,
         children: l ?? u
       }
     );
   }
 );
-yt.displayName = "PromptInputSubmit";
-const Nt = (t) => /* @__PURE__ */ o(tt, { ...t });
-Nt.displayName = "PromptInputModelSelect";
-const gt = ({
+gt.displayName = "PromptInputSubmit";
+const yt = (t) => /* @__PURE__ */ o(tt, { ...t });
+yt.displayName = "PromptInputModelSelect";
+const Nt = ({
   className: t,
   ...e
 }) => /* @__PURE__ */ o(
@@ -235,28 +235,28 @@ const gt = ({
   {
     className: r(
       "border-none bg-transparent font-medium text-muted-foreground shadow-none transition-colors",
-      "hover:bg-accent hover:text-foreground aria-expanded:bg-accent aria-expanded:text-foreground",
+      "hover:bg-accent-background hover:text-foreground aria-expanded:bg-accent-background aria-expanded:text-foreground",
       t
     ),
     ...e
   }
 );
-gt.displayName = "PromptInputModelSelectTrigger";
-const ft = ({
+Nt.displayName = "PromptInputModelSelectTrigger";
+const bt = ({
   className: t,
   ...e
 }) => /* @__PURE__ */ o(et, { className: r(t), ...e });
-ft.displayName = "PromptInputModelSelectContent";
-const Ct = ({
+bt.displayName = "PromptInputModelSelectContent";
+const ft = ({
   className: t,
   ...e
 }) => /* @__PURE__ */ o(ot, { className: r(t), ...e });
-Ct.displayName = "PromptInputModelSelectItem";
-const bt = ({
+ft.displayName = "PromptInputModelSelectItem";
+const Ct = ({
   className: t,
   ...e
 }) => /* @__PURE__ */ o(rt, { className: r(t), ...e });
-bt.displayName = "PromptInputModelSelectValue";
+Ct.displayName = "PromptInputModelSelectValue";
 const xt = ({
   openDelay: t = 0,
   closeDelay: e = 0,
@@ -270,7 +270,7 @@ const vt = ({
   ...e
 }) => /* @__PURE__ */ o(Y, { align: t, ...e });
 vt.displayName = "PromptInputHoverCardContent";
-const Tt = p(({ className: t, ...e }, n) => /* @__PURE__ */ o(
+const Tt = s(({ className: t, ...e }, n) => /* @__PURE__ */ o(
   "div",
   {
     ref: n,
@@ -280,7 +280,7 @@ const Tt = p(({ className: t, ...e }, n) => /* @__PURE__ */ o(
   }
 ));
 Tt.displayName = "PromptInputTabsList";
-const St = p(
+const St = s(
   ({ className: t, ...e }, n) => /* @__PURE__ */ o(
     "div",
     {
@@ -292,7 +292,7 @@ const St = p(
   )
 );
 St.displayName = "PromptInputTab";
-const Mt = p(({ className: t, children: e, ...n }, a) => /* @__PURE__ */ o(
+const Mt = s(({ className: t, children: e, ...n }, a) => /* @__PURE__ */ o(
   "h3",
   {
     ref: a,
@@ -306,7 +306,7 @@ const Mt = p(({ className: t, children: e, ...n }, a) => /* @__PURE__ */ o(
   }
 ));
 Mt.displayName = "PromptInputTabLabel";
-const wt = p(({ className: t, ...e }, n) => /* @__PURE__ */ o(
+const wt = s(({ className: t, ...e }, n) => /* @__PURE__ */ o(
   "div",
   {
     ref: n,
@@ -316,81 +316,81 @@ const wt = p(({ className: t, ...e }, n) => /* @__PURE__ */ o(
   }
 ));
 wt.displayName = "PromptInputTabBody";
-const Ht = p(({ className: t, ...e }, n) => /* @__PURE__ */ o(
+const Ht = s(({ className: t, ...e }, n) => /* @__PURE__ */ o(
   "div",
   {
     ref: n,
     "data-slot": "prompt-input-tab-item",
     className: r(
-      "flex items-center gap-2 px-3 py-2 text-xs hover:bg-accent",
+      "flex items-center gap-2 px-3 py-2 text-xs hover:bg-accent-background",
       t
     ),
     ...e
   }
 ));
 Ht.displayName = "PromptInputTabItem";
-const At = ({
+const kt = ({
   className: t,
   ...e
 }) => /* @__PURE__ */ o(F, { className: r(t), ...e });
-At.displayName = "PromptInputCommand";
-const Et = ({
+kt.displayName = "PromptInputCommand";
+const At = ({
   className: t,
   ...e
 }) => /* @__PURE__ */ o(V, { className: r(t), ...e });
-Et.displayName = "PromptInputCommandInput";
-const Dt = ({
+At.displayName = "PromptInputCommandInput";
+const Et = ({
   className: t,
   ...e
 }) => /* @__PURE__ */ o(R, { className: r(t), ...e });
-Dt.displayName = "PromptInputCommandList";
-const zt = ({
+Et.displayName = "PromptInputCommandList";
+const Dt = ({
   className: t,
   ...e
 }) => /* @__PURE__ */ o(j, { className: r(t), ...e });
-zt.displayName = "PromptInputCommandEmpty";
-const Bt = ({
+Dt.displayName = "PromptInputCommandEmpty";
+const zt = ({
   className: t,
   ...e
 }) => /* @__PURE__ */ o(K, { className: r(t), ...e });
-Bt.displayName = "PromptInputCommandGroup";
-const Lt = ({
+zt.displayName = "PromptInputCommandGroup";
+const Bt = ({
   className: t,
   ...e
 }) => /* @__PURE__ */ o(q, { className: r(t), ...e });
-Lt.displayName = "PromptInputCommandItem";
-const kt = ({
+Bt.displayName = "PromptInputCommandItem";
+const Lt = ({
   className: t,
   ...e
 }) => /* @__PURE__ */ o(O, { className: r(t), ...e });
-kt.displayName = "PromptInputCommandSeparator";
+Lt.displayName = "PromptInputCommandSeparator";
 export {
-  pt as PromptInput,
-  ct as PromptInputActionMenu,
+  st as PromptInput,
+  dt as PromptInputActionMenu,
   It as PromptInputActionMenuContent,
   Pt as PromptInputActionMenuItem,
-  dt as PromptInputActionMenuTrigger,
-  st as PromptInputBody,
+  ct as PromptInputActionMenuTrigger,
+  pt as PromptInputBody,
   T as PromptInputButton,
-  At as PromptInputCommand,
-  zt as PromptInputCommandEmpty,
-  Bt as PromptInputCommandGroup,
-  Et as PromptInputCommandInput,
-  Lt as PromptInputCommandItem,
-  Dt as PromptInputCommandList,
-  kt as PromptInputCommandSeparator,
+  kt as PromptInputCommand,
+  Dt as PromptInputCommandEmpty,
+  zt as PromptInputCommandGroup,
+  At as PromptInputCommandInput,
+  Bt as PromptInputCommandItem,
+  Et as PromptInputCommandList,
+  Lt as PromptInputCommandSeparator,
   ut as PromptInputFooter,
   lt as PromptInputHeader,
   xt as PromptInputHoverCard,
   vt as PromptInputHoverCardContent,
   ht as PromptInputHoverCardTrigger,
-  Nt as PromptInputModelSelect,
-  ft as PromptInputModelSelectContent,
-  Ct as PromptInputModelSelectItem,
-  gt as PromptInputModelSelectTrigger,
-  bt as PromptInputModelSelectValue,
+  yt as PromptInputModelSelect,
+  bt as PromptInputModelSelectContent,
+  ft as PromptInputModelSelectItem,
+  Nt as PromptInputModelSelectTrigger,
+  Ct as PromptInputModelSelectValue,
   at as PromptInputProvider,
-  yt as PromptInputSubmit,
+  gt as PromptInputSubmit,
   St as PromptInputTab,
   wt as PromptInputTabBody,
   Ht as PromptInputTabItem,

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

package/dist/components/ui/core/scroll-area/scroll-area.js

@@ -0,0 +1,71 @@
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { ScrollArea as o } from "@base-ui/react/scroll-area";
+import { focusRing as m, cn as s } from "../../../../lib/utils.js";
+const p = i(
+  ({
+    className: a,
+    children: l,
+    ...e
+  }, t) => /* @__PURE__ */ d(
+    o.Root,
+    {
+      ref: t,
+      "data-slot": "scroll-area",
+      className: s("relative group/scroll-area", a),
+      ...e,
+      children: [
+        /* @__PURE__ */ r(
+          o.Viewport,
+          {
+            "data-slot": "scroll-area-viewport",
+            className: `size-full rounded-[inherit] transition-[color,box-shadow] ${m}`,
+            children: /* @__PURE__ */ r(o.Content, { "data-slot": "scroll-area-content", children: l })
+          }
+        ),
+        /* @__PURE__ */ r(c, { orientation: "vertical" }),
+        /* @__PURE__ */ r(c, { orientation: "horizontal" }),
+        /* @__PURE__ */ r(o.Corner, { "data-slot": "scroll-area-corner" })
+      ]
+    }
+  )
+), c = i(
+  ({
+    className: a,
+    orientation: l = "vertical",
+    ...e
+  }, t) => {
+    const n = l === "horizontal";
+    return /* @__PURE__ */ r(
+      o.Scrollbar,
+      {
+        ref: t,
+        "data-slot": "scroll-area-scrollbar",
+        "data-orientation": l,
+        orientation: l,
+        className: s(
+          "group/scroll-area-scrollbar flex touch-none select-none items-start transition-colors",
+          n ? "w-full py-0.5 px-3" : "inline-flex self-stretch px-0.5 py-3",
+          a
+        ),
+        ...e,
+        children: /* @__PURE__ */ r(
+          o.Thumb,
+          {
+            "data-slot": "scroll-area-thumb",
+            className: s(
+              "relative rounded-full bg-secondary-background transition-colors group-hover/scroll-area-scrollbar:bg-secondary-background-hover",
+              n ? "h-1 min-w-10" : "w-1 min-h-10"
+            )
+          }
+        )
+      }
+    );
+  }
+);
+p.displayName = "ScrollArea";
+c.displayName = "ScrollBar";
+export {
+  p as ScrollArea,
+  c as ScrollBar
+};

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

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

package/dist/components/ui/core/scroll-area/scroll-area.metadata.js

@@ -0,0 +1,9 @@
+const a = {
+  name: "ScrollArea",
+  status: "in-progress-code-review",
+  description: "A custom scrollable area built on Base UI Scroll Area, with styled scrollbars and an automatic corner for bidirectional scrolling.",
+  llmUsage: "Use `<ScrollArea>` as the container and place scrollable content directly as children. Both vertical and horizontal scrollbars are rendered automatically and only appear on the axes that actually overflow. Use the `dir` prop for RTL layouts (and a Base UI `DirectionProvider` when required by your app setup)."
+};
+export {
+  a as ScrollAreaMetadata
+};

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

@@ -23,10 +23,10 @@ declare function SelectGroup({ className, ...props }: SelectPrimitive.Group.Prop
 declare function SelectValue({ icon, ...props }: SelectPrimitive.Value.Props & {
     icon?: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-declare function SelectTrigger({ className, size, children, errorMessage, ...props }: SelectPrimitive.Trigger.Props & {
-    size?: 'sm' | 'default';
+declare const SelectTrigger: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').SelectTriggerProps & {
+    size?: "sm" | "default";
     errorMessage?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
 declare function SelectContent({ className, children, position: _position, align, alignOffset, side, sideOffset, ...props }: SelectPrimitive.Popup.Props & {
     position?: 'popper' | 'item-aligned';
     align?: SelectPrimitive.Positioner.Props['align'];