@cognite/aura 0.1.6 → 0.2.0

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/inline-citation/inline-citation.js

@@ -1,8 +1,8 @@
-import { jsx as i, jsxs as d, Fragment as f } from "react/jsx-runtime";
+import { jsx as i, jsxs as d, Fragment as v } from "react/jsx-runtime";
 import { forwardRef as r } from "react";
 import { cn as o, getHostname as m } from "../../../../lib/utils.js";
 import { Badge as g } from "../badge/badge.js";
-import { HoverCard as v, HoverCardContent as x, HoverCardTrigger as b } from "../hover-card/hover-card.js";
+import { HoverCard as f, HoverCardContent as x, HoverCardTrigger as b } from "../hover-card/hover-card.js";
 const h = r(
   ({ className: e, ...n }, t) => /* @__PURE__ */ i(
     "span",
@@ -39,7 +39,7 @@ const N = r(({ className: e, ...n }, t) => /* @__PURE__ */ i(
 ));
 N.displayName = "InlineCitationText";
 const q = (e) => /* @__PURE__ */ i(
-  v,
+  f,
   {
     "data-slot": "inline-citation-card",
     closeDelay: 0,
@@ -59,14 +59,14 @@ const q = (e) => /* @__PURE__ */ i(
       {
         "data-slot": "inline-citation-card-trigger",
         className: o(
-          "ml-1 inline-flex items-center justify-center rounded-md border border-transparent bg-decorative-fjord-background px-1 text-sm leading-4.5 font-medium text-decorative-fjord-foreground whitespace-nowrap gap-1 transition-[color,box-shadow]",
+          "ml-1 inline-flex items-center justify-center rounded-md border border-transparent bg-decorative-background-fjord px-1 text-sm leading-4.5 font-medium text-decorative-foreground-fjord whitespace-nowrap gap-1 transition-[color,box-shadow]",
           "[&>svg]:size-3 [&>svg]:pointer-events-none",
           t
         ),
         ...a,
         children: [
           n && /* @__PURE__ */ i(n, { className: "size-3" }),
-          e[0] ? /* @__PURE__ */ d(f, { children: [
+          e[0] ? /* @__PURE__ */ d(v, { children: [
             m(e[0]),
             " ",
             e.length > 1 && `+${e.length - 1}`
@@ -143,9 +143,9 @@ const I = r(
               "inline-flex items-center justify-center rounded-md border border-transparent px-1 text-sm leading-4.5 font-medium whitespace-nowrap gap-1 transition-colors",
               "[&>svg]:size-3 [&>svg]:pointer-events-none",
               {
-                mountain: "bg-decorative-mountain-background hover:bg-decorative-mountain-background-hover text-decorative-mountain-foreground",
-                nordic: "bg-decorative-nordic-background hover:bg-background-hover text-decorative-nordic-foreground",
-                fjord: "bg-decorative-fjord-background hover:bg-decorative-fjord-background-hover text-decorative-fjord-foreground"
+                mountain: "bg-decorative-background-mountain hover:bg-decorative-background-mountain-hover text-decorative-foreground-mountain",
+                nordic: "bg-decorative-background-nordic hover:bg-decorative-background-nordic-hover text-decorative-foreground-nordic",
+                fjord: "bg-decorative-background-fjord hover:bg-decorative-background-fjord-hover text-decorative-foreground-fjord"
               }[a],
               l
             ),

package/dist/components/ui/core/input-group/input-group.d.ts

@@ -5,7 +5,7 @@ declare const InputGroupAddon: import('react').ForwardRefExoticComponent<Omit<im
 } & import('class-variance-authority/types').ClassProp) | undefined) => string>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 declare const InputGroupButton: import('react').ForwardRefExoticComponent<Omit<Omit<Omit<import('@base-ui/react').ButtonProps & 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>, "size"> & VariantProps<(props?: ({
     size?: "sm" | "icon-sm" | "xs" | "icon-xs" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string>, "ref"> & import('react').RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,3 @@
+declare const Kbd: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import('react').RefAttributes<HTMLElement>>;
+declare const KbdGroup: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+export { Kbd, KbdGroup };

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

@@ -0,0 +1,36 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { cn as d } from "../../../../lib/utils.js";
+const i = n(
+  ({ className: t, ...e }, o) => /* @__PURE__ */ a(
+    "kbd",
+    {
+      ref: o,
+      "data-slot": "kbd",
+      className: d(
+        "bg-muted-background text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-md px-1 font-sans text-xs font-medium leading-4 select-none aria-disabled:bg-disabled-background aria-disabled:text-disabled-foreground aria-disabled:opacity-100",
+        "[&_svg:not([class*='size-'])]:size-3",
+        "in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10",
+        t
+      ),
+      ...e
+    }
+  )
+);
+i.displayName = "Kbd";
+const r = n(
+  ({ className: t, ...e }, o) => /* @__PURE__ */ a(
+    "span",
+    {
+      ref: o,
+      "data-slot": "kbd-group",
+      className: d("inline-flex items-center gap-1", t),
+      ...e
+    }
+  )
+);
+r.displayName = "KbdGroup";
+export {
+  i as Kbd,
+  r as KbdGroup
+};

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

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '@cognite/aura/components';
+export declare const KbdMetadata: ComponentMeta;

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

@@ -0,0 +1,9 @@
+const e = {
+  name: "Kbd",
+  status: "draft",
+  description: "A keyboard key component for displaying keyboard shortcuts.",
+  llmUsage: "Use `<Kbd>` to display a single keyboard key. Use `<KbdGroup>` to group `<Kbd>` components together for chords or related shortcuts (e.g. `<KbdGroup><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup>`). Each `<Kbd>` should contain exactly one key — never put multiple keys in a single `<Kbd>`."
+};
+export {
+  e as KbdMetadata
+};

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

@@ -1,7 +1,15 @@
 import { HTMLAttributes } from 'react';
-interface LoaderProps extends HTMLAttributes<HTMLDivElement> {
+type LoaderSharedProps = HTMLAttributes<HTMLDivElement>;
+interface InlineLoaderProps extends LoaderSharedProps {
+    variant?: 'inline';
     size?: number;
 }
+interface PageLoaderProps extends LoaderSharedProps {
+    variant: 'page';
+    header: string;
+    description?: string;
+}
+type LoaderProps = InlineLoaderProps | PageLoaderProps;
 declare const Loader: import('react').ForwardRefExoticComponent<LoaderProps & import('react').RefAttributes<HTMLDivElement>>;
 export { Loader };
 export type { LoaderProps };

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

@@ -1,119 +1,118 @@
-import { jsx as t, jsxs as o } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import { cn as a } from "../../../../lib/utils.js";
-const h = ({ size: r = 16 }) => /* @__PURE__ */ o(
+import { jsx as a, jsxs as l } from "react/jsx-runtime";
+import { forwardRef as h } from "react";
+import { cn as s } from "../../../../lib/utils.js";
+const n = ({
+  size: e = 16,
+  className: r,
+  strokeClassName: t
+}) => /* @__PURE__ */ l(
   "svg",
   {
-    height: r,
-    strokeLinejoin: "round",
-    style: { color: "currentcolor" },
-    viewBox: "0 0 16 16",
-    width: r,
+    "aria-hidden": "true",
+    focusable: "false",
+    className: s("overflow-visible", t, r),
+    height: e,
+    viewBox: "0 0 167 216",
+    width: e,
+    xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ t("title", { children: "Loading" }),
-      /* @__PURE__ */ o("g", { clipPath: "url(#clip0_2393_1490)", children: [
-        /* @__PURE__ */ t("path", { d: "M8 0V4", stroke: "currentColor", strokeWidth: "1.5" }),
-        /* @__PURE__ */ t(
-          "path",
-          {
-            d: "M8 16V12",
-            opacity: "0.5",
-            stroke: "currentColor",
-            strokeWidth: "1.5"
-          }
-        ),
-        /* @__PURE__ */ t(
-          "path",
-          {
-            d: "M3.29773 1.52783L5.64887 4.7639",
-            opacity: "0.9",
-            stroke: "currentColor",
-            strokeWidth: "1.5"
-          }
-        ),
-        /* @__PURE__ */ t(
-          "path",
-          {
-            d: "M12.7023 1.52783L10.3511 4.7639",
-            opacity: "0.1",
-            stroke: "currentColor",
-            strokeWidth: "1.5"
-          }
-        ),
-        /* @__PURE__ */ t(
-          "path",
-          {
-            d: "M12.7023 14.472L10.3511 11.236",
-            opacity: "0.4",
-            stroke: "currentColor",
-            strokeWidth: "1.5"
-          }
-        ),
-        /* @__PURE__ */ t(
-          "path",
-          {
-            d: "M3.29773 14.472L5.64887 11.236",
-            opacity: "0.6",
-            stroke: "currentColor",
-            strokeWidth: "1.5"
-          }
-        ),
-        /* @__PURE__ */ t(
-          "path",
-          {
-            d: "M15.6085 5.52783L11.8043 6.7639",
-            opacity: "0.2",
-            stroke: "currentColor",
-            strokeWidth: "1.5"
-          }
-        ),
-        /* @__PURE__ */ t(
-          "path",
-          {
-            d: "M0.391602 10.472L4.19583 9.23598",
-            opacity: "0.7",
-            stroke: "currentColor",
-            strokeWidth: "1.5"
-          }
-        ),
-        /* @__PURE__ */ t(
-          "path",
-          {
-            d: "M15.6085 10.4722L11.8043 9.2361",
-            opacity: "0.3",
-            stroke: "currentColor",
-            strokeWidth: "1.5"
-          }
-        ),
-        /* @__PURE__ */ t(
-          "path",
-          {
-            d: "M0.391602 5.52783L4.19583 6.7639",
-            opacity: "0.8",
-            stroke: "currentColor",
-            strokeWidth: "1.5"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ t("clipPath", { id: "clip0_2393_1490", children: /* @__PURE__ */ t("rect", { fill: "white", height: "16", width: "16" }) }) })
+      /* @__PURE__ */ a(
+        "rect",
+        {
+          className: "aura-loader-rect aura-loader-rect-1",
+          "data-slot": "loader-rect",
+          x: "10",
+          y: "10",
+          width: "98",
+          height: "196",
+          rx: "49",
+          fill: "transparent",
+          stroke: "currentColor",
+          strokeWidth: "20",
+          strokeLinecap: "round"
+        }
+      ),
+      /* @__PURE__ */ a(
+        "rect",
+        {
+          className: "aura-loader-rect aura-loader-rect-2",
+          "data-slot": "loader-rect",
+          x: "59",
+          y: "10",
+          width: "98",
+          height: "196",
+          rx: "49",
+          fill: "transparent",
+          stroke: "currentColor",
+          strokeWidth: "20",
+          strokeLinecap: "round"
+        }
+      )
     ]
   }
-), s = d(
-  ({ className: r, size: e = 16, ...i }, c) => /* @__PURE__ */ t(
+), x = (e) => e.variant === "page", g = h((e, r) => {
+  const t = e.className, i = e.role ?? "status", o = e["aria-label"] ?? "Loading";
+  if (!x(e)) {
+    const {
+      size: u = 16,
+      variant: b,
+      className: k,
+      role: L,
+      "aria-label": y,
+      ...f
+    } = e;
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        ref: r,
+        "data-slot": "loader",
+        role: i,
+        "aria-label": o,
+        className: s("inline-flex items-center justify-center", t),
+        ...f,
+        children: /* @__PURE__ */ a(n, { size: u, strokeClassName: "text-current" })
+      }
+    );
+  }
+  const {
+    variant: N,
+    className: v,
+    role: w,
+    "aria-label": p,
+    header: d,
+    description: c,
+    ...m
+  } = e;
+  return /* @__PURE__ */ l(
     "div",
     {
-      ref: c,
+      ref: r,
       "data-slot": "loader",
-      className: a(
-        "inline-flex animate-spin items-center justify-center",
-        r
+      role: i,
+      "aria-label": o,
+      className: s(
+        "text-foreground flex h-[11.5rem] w-80 flex-col items-center justify-center gap-2",
+        t
       ),
-      ...i,
-      children: /* @__PURE__ */ t(h, { size: e })
+      ...m,
+      children: [
+        /* @__PURE__ */ a(
+          n,
+          {
+            size: 112,
+            className: "size-28",
+            strokeClassName: "text-current"
+          }
+        ),
+        /* @__PURE__ */ l("div", { className: "flex w-full flex-col items-center justify-center gap-1 text-center", children: [
+          /* @__PURE__ */ a("p", { className: "text-lg font-medium leading-6 tracking-tightest text-foreground", children: d }),
+          c && /* @__PURE__ */ a("p", { className: "w-full text-sm leading-[18px] tracking-tight text-secondary-foreground", children: c })
+        ] })
+      ]
     }
-  )
-);
-s.displayName = "Loader";
+  );
+});
+g.displayName = "Loader";
 export {
-  s as Loader
+  g as Loader
 };

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

@@ -1,8 +1,8 @@
 const e = {
   name: "Loader",
   status: "in-progress-code-review",
-  description: "A spinning loader indicator for loading states.",
-  llmUsage: "Use `<Loader>` to indicate loading. Adjust `size` prop for different contexts. Inherits text color from parent."
+  description: "A four-line loading indicator with inline and page variants.",
+  llmUsage: "Use `<Loader />` for inline loading, or set `variant='page'` for page-level loading copy. Use `size` for inline bars and `className` to style the loader color; page variant copy is configured with `header` and optional `description`."
 };
 export {
   e as LoaderMetadata

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

@@ -11,7 +11,7 @@ declare const PopoverDescription: import('react').ForwardRefExoticComponent<Omit
 declare const PopoverSlot: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 declare const PopoverClose: 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>>;
 declare const PopoverContent: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').PopoverPopupProps & Pick<import('@base-ui/react').PopoverPositionerProps, "align" | "alignOffset" | "side" | "sideOffset">, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverHeaderContent, PopoverSlot, PopoverTitle, PopoverTrigger, };

package/dist/components/ui/core/prompt-input/prompt-input.d.ts

@@ -45,7 +45,7 @@ declare const PromptInputTools: import('react').ForwardRefExoticComponent<Prompt
 type PromptInputButtonProps = ComponentProps<typeof InputGroupButton>;
 declare const PromptInputButton: import('react').ForwardRefExoticComponent<Omit<Omit<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>, "size"> & import('class-variance-authority').VariantProps<(props?: ({
     size?: "sm" | "icon-sm" | "xs" | "icon-xs" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string>, "ref"> & import('react').RefAttributes<HTMLElement>, "ref"> & import('react').RefAttributes<HTMLElement>>;