@cognite/aura 0.1.0

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

@@ -0,0 +1,279 @@
+import { jsx as t, jsxs as u, Fragment as C } from "react/jsx-runtime";
+import { createContext as N, useMemo as y, useId as z, useContext as I } from "react";
+import { Select as o } from "@base-ui/react/select";
+import { IconCheck as V, IconChevronDown as v, IconChevronUp as _, IconExclamationCircle as O } from "@tabler/icons-react";
+import { useControllableState as P } from "../../../../lib/use-controllable-state.js";
+import { getPortalContainer as j, cn as s, disabledState as k, invalidState as D, focusState as T, filledState as B, hoverState as E, formElementBase as G } from "../../../../lib/utils.js";
+const f = N(null), L = () => {
+  const e = I(f);
+  if (!e)
+    throw new Error("Select components must be used within Select");
+  return e;
+};
+function K(e) {
+  const [a, l] = P({
+    prop: e.open,
+    defaultProp: e.defaultOpen ?? !1,
+    onChange: e.onOpenChange
+  }), n = y(() => ({ isOpen: a ?? !1 }), [a]);
+  if (e.multiple) {
+    const {
+      multiple: m,
+      value: g,
+      defaultValue: b,
+      onValueChange: S,
+      ...w
+    } = e;
+    return /* @__PURE__ */ t(f.Provider, { value: n, children: /* @__PURE__ */ t(
+      o.Root,
+      {
+        "data-slot": "select",
+        open: a,
+        onOpenChange: (p) => l(p),
+        value: g,
+        defaultValue: b,
+        onValueChange: (p, R) => {
+          S?.(p ?? []);
+        },
+        multiple: !0,
+        ...w
+      }
+    ) });
+  }
+  const { value: r, defaultValue: i, onValueChange: c, ...d } = e, h = r === void 0 ? void 0 : r === "" ? null : r, x = i === void 0 ? void 0 : i === "" ? null : i;
+  return /* @__PURE__ */ t(f.Provider, { value: n, children: /* @__PURE__ */ t(
+    o.Root,
+    {
+      "data-slot": "select",
+      open: a,
+      onOpenChange: (m) => l(m),
+      value: h,
+      defaultValue: x,
+      onValueChange: (m, g) => {
+        c?.(typeof m == "string" ? m : "");
+      },
+      ...d
+    }
+  ) });
+}
+function Q({ className: e, ...a }) {
+  return /* @__PURE__ */ t(
+    o.Group,
+    {
+      "data-slot": "select-group",
+      className: s("scroll-my-1 p-1", e),
+      ...a
+    }
+  );
+}
+function X({
+  icon: e,
+  ...a
+}) {
+  return e ? /* @__PURE__ */ u("span", { className: "flex items-center gap-2", children: [
+    e,
+    /* @__PURE__ */ t(o.Value, { "data-slot": "select-value", ...a })
+  ] }) : /* @__PURE__ */ t(o.Value, { "data-slot": "select-value", ...a });
+}
+function Y({
+  className: e,
+  size: a = "default",
+  children: l,
+  errorMessage: n,
+  ...r
+}) {
+  const { isOpen: i } = L(), c = !!n, d = z();
+  return /* @__PURE__ */ u(C, { children: [
+    /* @__PURE__ */ u(
+      o.Trigger,
+      {
+        "data-slot": "select-trigger",
+        "data-size": a,
+        "aria-invalid": c ? !0 : void 0,
+        "aria-describedby": c ? d : void 0,
+        className: s(
+          "w-fit min-w-50 min-h-9 flex items-center justify-between gap-2 whitespace-nowrap transition-[color,box-shadow] cursor-pointer",
+          G,
+          E,
+          B,
+          T,
+          D,
+          k,
+          "dark:bg-input/30 dark:text-muted-foreground dark:hover:bg-accent",
+          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+          "*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
+          e
+        ),
+        ...r,
+        children: [
+          l,
+          /* @__PURE__ */ t(
+            o.Icon,
+            {
+              render: /* @__PURE__ */ t(
+                v,
+                {
+                  className: s(
+                    "size-4 opacity-50 transition-transform",
+                    i ? "rotate-180" : "rotate-0"
+                  )
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    n && /* @__PURE__ */ u(
+      "div",
+      {
+        id: d,
+        className: "flex flex-row gap-1 justify-start items-center p-1",
+        children: [
+          /* @__PURE__ */ t(O, { className: "text-destructive-foreground text-sm size-4" }),
+          /* @__PURE__ */ t("span", { className: "text-destructive-foreground text-sm", children: n })
+        ]
+      }
+    )
+  ] });
+}
+function Z({
+  className: e,
+  children: a,
+  position: l = "popper",
+  align: n = "start",
+  alignOffset: r = 0,
+  side: i = "bottom",
+  sideOffset: c = 4,
+  ...d
+}) {
+  return /* @__PURE__ */ t(o.Portal, { container: j(), children: /* @__PURE__ */ t(
+    o.Positioner,
+    {
+      alignItemWithTrigger: !1,
+      align: n,
+      alignOffset: r,
+      side: i,
+      sideOffset: c,
+      collisionPadding: 10,
+      className: "isolate z-50",
+      children: /* @__PURE__ */ u(
+        o.Popup,
+        {
+          "data-slot": "select-content",
+          className: s(
+            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md outline-none",
+            l === "popper" && "data-[side=bottom]:translate-y-1",
+            e
+          ),
+          ...d,
+          children: [
+            /* @__PURE__ */ t(U, {}),
+            /* @__PURE__ */ t(o.List, { children: a }),
+            /* @__PURE__ */ t(A, {})
+          ]
+        }
+      )
+    }
+  ) });
+}
+function M({
+  className: e,
+  ...a
+}) {
+  return /* @__PURE__ */ t(
+    o.GroupLabel,
+    {
+      "data-slot": "select-label",
+      className: s("text-muted-foreground px-2 py-1.5 text-xs", e),
+      ...a
+    }
+  );
+}
+function ee({
+  className: e,
+  children: a,
+  icon: l,
+  ...n
+}) {
+  return /* @__PURE__ */ u(
+    o.Item,
+    {
+      "data-slot": "select-item",
+      className: s(
+        "relative flex w-full min-h-9 cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-base leading-5 tracking-tightest outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        e
+      ),
+      ...n,
+      children: [
+        /* @__PURE__ */ t(
+          o.ItemIndicator,
+          {
+            render: /* @__PURE__ */ t("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ t(V, { className: "size-4 text-popover-foreground" }) })
+          }
+        ),
+        l && /* @__PURE__ */ t("span", { className: "flex items-center gap-2 mr-1", children: l }),
+        /* @__PURE__ */ t(o.ItemText, { children: a })
+      ]
+    }
+  );
+}
+function te({
+  className: e,
+  ...a
+}) {
+  return /* @__PURE__ */ t(
+    o.Separator,
+    {
+      "data-slot": "select-separator",
+      className: s("bg-border pointer-events-none -mx-1 my-1 h-px", e),
+      ...a
+    }
+  );
+}
+function U({
+  className: e,
+  ...a
+}) {
+  return /* @__PURE__ */ t(
+    o.ScrollUpArrow,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: s(
+        "bg-popover z-10 flex cursor-default items-center justify-center py-1 top-0 w-full",
+        e
+      ),
+      ...a,
+      children: /* @__PURE__ */ t(_, { className: "size-4" })
+    }
+  );
+}
+function A({
+  className: e,
+  ...a
+}) {
+  return /* @__PURE__ */ t(
+    o.ScrollDownArrow,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: s(
+        "bg-popover z-10 flex cursor-default items-center justify-center py-1 bottom-0 w-full",
+        e
+      ),
+      ...a,
+      children: /* @__PURE__ */ t(v, { className: "size-4" })
+    }
+  );
+}
+export {
+  K as Select,
+  Z as SelectContent,
+  Q as SelectGroup,
+  ee as SelectItem,
+  M as SelectLabel,
+  A as SelectScrollDownButton,
+  U as SelectScrollUpButton,
+  te as SelectSeparator,
+  Y as SelectTrigger,
+  X as SelectValue
+};

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

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

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

@@ -0,0 +1,9 @@
+const e = {
+  name: "Select",
+  status: "in-progress-code-review",
+  description: "A select dropdown component built on Base UI Select primitives.",
+  llmUsage: "Use `<Select>` with `<SelectTrigger>`, `<SelectContent>`, and `<SelectItem>` for dropdowns."
+};
+export {
+  e as SelectMetadata
+};

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

@@ -0,0 +1,6 @@
+import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
+declare function Separator({ className, orientation, ...props }: SeparatorPrimitive.Props): import("react/jsx-runtime").JSX.Element;
+declare namespace Separator {
+    var displayName: string;
+}
+export { Separator };

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

@@ -0,0 +1,25 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Separator as i } from "@base-ui/react/separator";
+import { cn as e } from "../../../../lib/utils.js";
+function n({
+  className: a,
+  orientation: r = "horizontal",
+  ...t
+}) {
+  return /* @__PURE__ */ o(
+    i,
+    {
+      "data-slot": "separator",
+      orientation: r,
+      className: e(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        a
+      ),
+      ...t
+    }
+  );
+}
+n.displayName = "Separator";
+export {
+  n as Separator
+};

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

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

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

@@ -0,0 +1,8 @@
+const a = {
+  name: "Separator",
+  status: "in-progress-code-review",
+  description: "A visual separator for dividing content."
+};
+export {
+  a as SeparatorMetadata
+};

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

@@ -0,0 +1,14 @@
+type TextShimmerProps = {
+    children: string;
+    as?: 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3';
+    className?: string;
+    duration?: number;
+    spread?: number;
+    variant?: 'default' | 'nordic' | 'aurora' | 'dusk' | 'equinox' | 'summer' | 'spring' | 'fall';
+};
+declare function ShimmerComponent({ children, as: Component, className, duration, spread, variant, }: TextShimmerProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ShimmerComponent {
+    var displayName: string;
+}
+declare const MemoizedShimmer: import('react').MemoExoticComponent<typeof ShimmerComponent>;
+export { MemoizedShimmer as Shimmer };

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

@@ -0,0 +1,69 @@
+import { jsx as e } from "react/jsx-runtime";
+import { memo as f, useMemo as s } from "react";
+import { motion as a } from "framer-motion";
+import { cn as v } from "../../../../lib/utils.js";
+const S = {
+  nordic: "var(--gradient-nordic)",
+  aurora: "var(--gradient-aurora)",
+  dusk: "var(--gradient-dusk)",
+  equinox: "var(--gradient-equinox)",
+  summer: "var(--gradient-summer)",
+  spring: "var(--gradient-spring)",
+  fall: "var(--gradient-fall)"
+};
+function m({
+  children: n,
+  as: d = "p",
+  className: c,
+  duration: u = 2,
+  spread: i = 2,
+  variant: t = "default"
+}) {
+  const p = s(
+    () => (n?.length ?? 0) * i,
+    [n, i]
+  ), g = s(() => {
+    const o = "linear-gradient(90deg, transparent calc(50% - var(--spread)), rgba(255, 255, 255, 0.4), transparent calc(50% + var(--spread)))";
+    return t === "default" ? `${o}, linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))` : `${o}, ${S[t]}`;
+  }, [t]), l = {
+    "--spread": `${p}px`,
+    backgroundImage: g,
+    backgroundSize: "250% 100%, 100% 100%"
+  }, h = {
+    repeat: Number.POSITIVE_INFINITY,
+    duration: u,
+    ease: "linear"
+  }, r = {
+    "data-slot": "shimmer",
+    animate: {
+      backgroundPosition: ["100% center, center", "0% center, center"]
+    },
+    className: v(
+      "relative inline-block bg-clip-text text-transparent rounded-md",
+      c
+    ),
+    style: l,
+    transition: h,
+    children: n
+  };
+  switch (d) {
+    case "span":
+      return /* @__PURE__ */ e(a.span, { ...r });
+    case "div":
+      return /* @__PURE__ */ e(a.div, { ...r });
+    case "h1":
+      return /* @__PURE__ */ e(a.h1, { ...r });
+    case "h2":
+      return /* @__PURE__ */ e(a.h2, { ...r });
+    case "h3":
+      return /* @__PURE__ */ e(a.h3, { ...r });
+    default:
+      return /* @__PURE__ */ e(a.p, { ...r });
+  }
+}
+m.displayName = "Shimmer";
+const b = f(m);
+b.displayName = "Shimmer";
+export {
+  b as Shimmer
+};

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

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

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

@@ -0,0 +1,9 @@
+const e = {
+  name: "Shimmer",
+  status: "in-progress-code-review",
+  description: "An animated text shimmer component for creating eye-catching loading states and progressive reveal effects.",
+  llmUsage: 'Use `<Shimmer>` with text content for loading states. Use variants like "nordic", "aurora", "dusk" for branded effects.'
+};
+export {
+  e as ShimmerMetadata
+};

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

@@ -0,0 +1,2 @@
+declare const Skeleton: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export { Skeleton };

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

@@ -0,0 +1,18 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { cn as r } from "../../../../lib/utils.js";
+const n = m(
+  ({ className: e, ...o }, t) => /* @__PURE__ */ a(
+    "div",
+    {
+      ref: t,
+      "data-slot": "skeleton",
+      className: r("bg-accent animate-pulse rounded-md", e),
+      ...o
+    }
+  )
+);
+n.displayName = "Skeleton";
+export {
+  n as Skeleton
+};

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

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

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

@@ -0,0 +1,9 @@
+const e = {
+  name: "Skeleton",
+  status: "in-progress-code-review",
+  description: "A placeholder loading component.",
+  llmUsage: "Use `<Skeleton>` with width/height classes for loading states. Combine multiple skeletons to mimic content structure."
+};
+export {
+  e as SkeletonMetadata
+};

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

@@ -0,0 +1,16 @@
+import { ComponentProps, ReactNode } from 'react';
+import { InlineCitationLink } from '../inline-citation/inline-citation';
+type SourcesProps = Omit<ComponentProps<'div'>, 'title'> & {
+    title?: ReactNode | boolean;
+};
+declare const Sources: ({ className, title, children, ...props }: SourcesProps) => import("react/jsx-runtime").JSX.Element;
+type SourcesTitleProps = ComponentProps<'div'> & {
+    title?: string;
+};
+declare const SourcesTitle: ({ className, title, children, ...props }: SourcesTitleProps) => import("react/jsx-runtime").JSX.Element;
+type SourceProps = ComponentProps<typeof InlineCitationLink> & {
+    title?: string;
+    url?: string;
+};
+declare const Source: ({ href, url, title, variant, target, icon, className, children, ...props }: SourceProps) => import("react/jsx-runtime").JSX.Element | null;
+export { Source, Sources, SourcesTitle };

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

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

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

@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+interface TextareaProps extends ComponentProps<'textarea'> {
+    maxChars?: number;
+    errorMessage?: string;
+    overLimitMessage?: string;
+    charactersLeftMessage?: (remaining: number) => string;
+}
+declare const Textarea: import('react').ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import('react').RefAttributes<HTMLTextAreaElement>>;
+export { Textarea };

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

@@ -0,0 +1,49 @@
+import { jsxs as x, Fragment as C, jsx as l } from "react/jsx-runtime";
+import { forwardRef as S, useState as b } from "react";
+import { cn as T, disabledState as w, invalidState as E, focusState as j, filledState as k, hoverState as y, formElementBase as L } from "../../../../lib/utils.js";
+import { HelperText as c } from "../helper-text/helper-text.js";
+const N = (a) => `${a} characters left`, V = S(
+  ({
+    className: a,
+    maxChars: e,
+    errorMessage: o,
+    overLimitMessage: s = "Too many characters",
+    charactersLeftMessage: u = N,
+    ...t
+  }, f) => {
+    const i = t.value !== void 0, [h, g] = b(() => {
+      const n = t.defaultValue ?? "";
+      return String(n).length;
+    }), d = i ? String(t.value ?? "").length : h, r = e !== void 0 && d > e, m = !!o || r, v = (n) => {
+      i || g(n.target.value.length), t.onChange && t.onChange(n);
+    };
+    return /* @__PURE__ */ x(C, { children: [
+      /* @__PURE__ */ l(
+        "textarea",
+        {
+          ref: f,
+          "data-slot": "textarea",
+          "aria-invalid": m ? !0 : void 0,
+          className: T(
+            "flex field-sizing-content min-h-16 w-full placeholder:text-muted-foreground transition-[color,background-color,border-color,box-shadow]",
+            L,
+            y,
+            k,
+            j,
+            E,
+            w,
+            "dark:bg-input/30",
+            a
+          ),
+          onChange: v,
+          ...t
+        }
+      ),
+      o ? /* @__PURE__ */ l(c, { isError: !0, children: o }) : e !== void 0 && /* @__PURE__ */ l(c, { isError: r, children: r ? s : u(e - d) })
+    ] });
+  }
+);
+V.displayName = "Textarea";
+export {
+  V as Textarea
+};

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

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

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

@@ -0,0 +1,9 @@
+const e = {
+  name: "Textarea",
+  status: "in-progress-code-review",
+  description: "A multi-line text input component.",
+  llmUsage: "Use `<Textarea>` for multi-line text input fields."
+};
+export {
+  e as TextareaMetadata
+};

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

@@ -0,0 +1,21 @@
+import { ComponentProps } from 'react';
+import { ToolUIPart } from '../../../../lib/ai/types';
+import { CollapsibleTrigger } from '../collapsible/collapsible';
+declare const Tool: import('react').ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').CollapsibleRootProps, "ref"> & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+type ToolHeaderProps = Omit<ComponentProps<typeof CollapsibleTrigger>, 'type'> & {
+    title?: string;
+    type: ToolUIPart['type'];
+    hasError?: boolean;
+};
+declare const ToolHeader: import('react').ForwardRefExoticComponent<Omit<ToolHeaderProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+declare const ToolContent: import('react').ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').CollapsiblePanelProps, "ref"> & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+type ToolInputProps = ComponentProps<'div'> & {
+    input: ToolUIPart['input'];
+};
+declare const ToolInput: import('react').ForwardRefExoticComponent<Omit<ToolInputProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+type ToolOutputProps = ComponentProps<'div'> & {
+    output: ToolUIPart['output'];
+    errorText: ToolUIPart['errorText'];
+};
+declare const ToolOutput: import('react').ForwardRefExoticComponent<Omit<ToolOutputProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export { Tool, ToolHeader, ToolContent, ToolInput, ToolOutput };