@arcadeai/design-system 3.33.2 → 3.34.0

package/dist/components/ui/molecules/tool-authorization.js

@@ -0,0 +1,160 @@
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { c as d } from "../../../index-UgeK3A8s.js";
+import { Card as m, CardContent as c, CardHeader as x } from "../atoms/card.js";
+import { JsonHighlight as f } from "../atoms/json-highlight.js";
+import { cn as o } from "../../../lib/utils.js";
+const h = d("gap-0 py-0", {
+  variants: {
+    status: {
+      loading: "",
+      pending: "",
+      completed: "border-green-100 dark:border-green-950",
+      failed: "border-red-100 dark:border-red-950"
+    }
+  },
+  defaultVariants: { status: "loading" }
+}), p = d("shrink-0 rounded-full p-2", {
+  variants: {
+    status: {
+      loading: "bg-muted",
+      pending: "bg-orange-50 dark:bg-orange-950/50",
+      completed: "bg-green-50 dark:bg-green-950/50",
+      failed: "bg-red-50 dark:bg-red-950/50"
+    }
+  },
+  defaultVariants: { status: "loading" }
+}), b = d("size-5", {
+  variants: {
+    status: {
+      loading: "text-muted-foreground",
+      pending: "text-orange-500 dark:text-orange-400",
+      completed: "text-green-500 dark:text-green-400",
+      failed: "text-red-500 dark:text-red-400"
+    }
+  },
+  defaultVariants: { status: "loading" }
+}), k = d(
+  "flex items-center gap-2 rounded-md p-3 text-xs",
+  {
+    variants: {
+      status: {
+        loading: "bg-muted text-muted-foreground",
+        pending: "bg-orange-50 text-orange-700 dark:bg-orange-950/50 dark:text-orange-300",
+        completed: "bg-green-50 text-green-700 dark:bg-green-950/50 dark:text-green-300",
+        failed: "bg-red-50 text-red-700 dark:bg-red-950/50 dark:text-red-300"
+      }
+    },
+    defaultVariants: { status: "loading" }
+  }
+);
+function C({
+  className: e,
+  status: a,
+  ...r
+}) {
+  return /* @__PURE__ */ t(
+    m,
+    {
+      className: o(h({ status: a }), e),
+      "data-slot": "tool-authorization",
+      ...r
+    }
+  );
+}
+function T({
+  className: e,
+  status: a,
+  icon: r,
+  toolkitIcon: l,
+  title: s,
+  description: i,
+  children: g,
+  ...u
+}) {
+  return /* @__PURE__ */ t(x, { className: "px-3 pt-3 pb-0", children: /* @__PURE__ */ n(
+    "div",
+    {
+      className: o("flex items-start gap-3 sm:items-center", e),
+      "data-slot": "tool-authorization-header",
+      ...u,
+      children: [
+        r && /* @__PURE__ */ t("div", { className: o(p({ status: a })), children: /* @__PURE__ */ t(
+          r,
+          {
+            className: o(b({ status: a }))
+          }
+        ) }),
+        (s || i) && /* @__PURE__ */ n("div", { children: [
+          s && /* @__PURE__ */ n("h3", { className: "flex items-center gap-1.5 font-medium text-card-foreground text-sm", children: [
+            l && /* @__PURE__ */ t(l, { className: "size-4 shrink-0" }),
+            s
+          ] }),
+          i && /* @__PURE__ */ t("p", { className: "mt-0.5 text-muted-foreground text-xs", children: i })
+        ] }),
+        g
+      ]
+    }
+  ) });
+}
+function j({
+  className: e,
+  ...a
+}) {
+  return /* @__PURE__ */ t(c, { className: "p-3 pt-2", children: /* @__PURE__ */ t(
+    "div",
+    {
+      className: o("flex flex-col gap-2", e),
+      "data-slot": "tool-authorization-content",
+      ...a
+    }
+  ) });
+}
+function y({
+  className: e,
+  status: a,
+  ...r
+}) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: o(
+        k({ status: a }),
+        "items-start sm:items-center",
+        e
+      ),
+      "data-slot": "tool-authorization-message",
+      ...r
+    }
+  );
+}
+function H({
+  args: e,
+  className: a,
+  ...r
+}) {
+  return Object.keys(e).length === 0 ? null : /* @__PURE__ */ n(
+    "div",
+    {
+      className: o("w-full rounded-lg bg-muted p-2 sm:p-2.5", a),
+      "data-slot": "tool-authorization-args",
+      ...r,
+      children: [
+        /* @__PURE__ */ t("h4", { className: "mb-1 font-medium text-xs", children: "Tool Arguments:" }),
+        /* @__PURE__ */ t(
+          f,
+          {
+            className: "text-[11px] sm:text-xs",
+            code: JSON.stringify(e, null, 2)
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  C as ToolAuthorization,
+  H as ToolAuthorizationArgs,
+  j as ToolAuthorizationContent,
+  T as ToolAuthorizationHeader,
+  y as ToolAuthorizationMessage
+};

package/dist/components/ui/molecules/tool-call-accordion.d.ts

@@ -0,0 +1,36 @@
+import { VariantProps } from 'class-variance-authority';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../atoms/accordion';
+import { ClassProp } from 'class-variance-authority/types';
+import * as React from "react";
+export type ToolCallView = "table" | "code";
+export type ToolCallState = "calling" | "complete" | "error";
+export type ToolCallAccordionProps = React.ComponentProps<typeof Accordion>;
+export type ToolCallAccordionItemProps = React.ComponentProps<typeof AccordionItem>;
+export type ToolCallAccordionTriggerProps = React.ComponentProps<typeof AccordionTrigger> & VariantProps<typeof toolCallAccordionTriggerVariants> & {
+    toolName: string;
+    icon?: React.ReactNode;
+    showStateIndicator?: boolean;
+};
+export type ToolCallAccordionContentProps = React.ComponentProps<typeof AccordionContent> & {
+    view?: ToolCallView;
+    onViewChange?: (view: ToolCallView) => void;
+    showViewToggle?: boolean;
+    args?: Record<string, unknown>;
+    result?: unknown;
+};
+declare const toolCallAccordionTriggerVariants: (props?: ({
+    state?: "error" | "complete" | "calling" | null | undefined;
+} & ClassProp) | undefined) => string;
+declare function ToolCallAccordion({ className, ...props }: ToolCallAccordionProps): import("react/jsx-runtime").JSX.Element;
+declare function ToolCallAccordionItem({ className, ...props }: ToolCallAccordionItemProps): import("react/jsx-runtime").JSX.Element;
+declare function ToolCallAccordionTrigger({ className, state, toolName, icon, showStateIndicator, ...props }: ToolCallAccordionTriggerProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Expandable content area with a built-in table/JSON view toggle.
+ *
+ * Pass `args` and/or `result` as props to render the standard "Parameters"
+ * and "Response" sections. The active view is applied automatically.
+ * Additional content can be passed as `children`.
+ */
+declare function ToolCallAccordionContent({ className, children, view: viewProp, onViewChange, showViewToggle, args, result, ...props }: ToolCallAccordionContentProps): import("react/jsx-runtime").JSX.Element;
+export { ToolCallAccordion, ToolCallAccordionItem, ToolCallAccordionTrigger, ToolCallAccordionContent, };
+//# sourceMappingURL=tool-call-accordion.d.ts.map

package/dist/components/ui/molecules/tool-call-accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-call-accordion.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/tool-call-accordion.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AASlE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EACjB,MAAM,iCAAiC,CAAC;AASzC,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,MAAM,CAAC;AAE5C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAE7D,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,CAAC;AAE5E,MAAM,MAAM,0BAA0B,GAAG,KAAK,CAAC,cAAc,CAC3D,OAAO,aAAa,CACrB,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG,KAAK,CAAC,cAAc,CAC9D,OAAO,gBAAgB,CACxB,GACC,YAAY,CAAC,OAAO,gCAAgC,CAAC,GAAG;IACtD,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEJ,MAAM,MAAM,6BAA6B,GAAG,KAAK,CAAC,cAAc,CAC9D,OAAO,gBAAgB,CACxB,GAAG;IACF,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAMF,QAAA,MAAM,gCAAgC;;8EAYrC,CAAC;AAmNF,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAQzE;AAED,iBAAS,qBAAqB,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,0BAA0B,2CAW5B;AAED,iBAAS,wBAAwB,CAAC,EAChC,SAAS,EACT,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,kBAAyB,EACzB,GAAG,KAAK,EACT,EAAE,6BAA6B,2CAyD/B;AAED;;;;;;GAMG;AACH,iBAAS,wBAAwB,CAAC,EAChC,SAAS,EACT,QAAQ,EACR,IAAI,EAAE,QAAQ,EACd,YAAY,EACZ,cAAqB,EACrB,IAAI,EACJ,MAAM,EACN,GAAG,KAAK,EACT,EAAE,6BAA6B,2CAkE/B;AAMD,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,wBAAwB,EACxB,wBAAwB,GACzB,CAAC"}

package/dist/components/ui/molecules/tool-call-accordion.js

@@ -0,0 +1,301 @@
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import { c as y } from "../../../index-UgeK3A8s.js";
+import { Table as A, Code as T, Wrench as C, TriangleAlert as v, CheckCircle2 as S, Loader2 as V } from "lucide-react";
+import * as c from "react";
+import { Accordion as j, AccordionContent as z, AccordionItem as I, AccordionTrigger as O } from "../atoms/accordion.js";
+import { CopyButton as E } from "../atoms/copy-button.js";
+import { JsonHighlight as N } from "../atoms/json-highlight.js";
+import { cn as l } from "../../../lib/utils.js";
+const J = y(
+  "font-mono text-xs transition-colors",
+  {
+    variants: {
+      state: {
+        calling: "text-muted-foreground hover:text-foreground",
+        complete: "text-muted-foreground hover:text-foreground",
+        error: "text-destructive hover:text-destructive/80"
+      }
+    },
+    defaultVariants: { state: "calling" }
+  }
+), R = y(
+  "absolute -top-0.5 right-0 size-2 shrink-0 rounded-full ring-2 ring-background",
+  {
+    variants: {
+      state: {
+        calling: "animate-pulse bg-orange-400",
+        complete: "bg-green-500",
+        error: "bg-destructive"
+      }
+    },
+    defaultVariants: { state: "calling" }
+  }
+);
+function $(e, t = 140) {
+  return e.length > t ? `${e.slice(0, t).trimEnd()}...` : e;
+}
+function w(e) {
+  if (typeof e == "string")
+    try {
+      return JSON.stringify(JSON.parse(e), null, 2);
+    } catch {
+      return e;
+    }
+  return JSON.stringify(e, null, 2) ?? "null";
+}
+function D(e) {
+  if (typeof e == "string") {
+    try {
+      const t = JSON.parse(e);
+      if (typeof t == "object" && t !== null && !Array.isArray(t))
+        return t;
+    } catch {
+      return { value: e };
+    }
+    return { value: e };
+  }
+  return typeof e == "object" && e !== null && !Array.isArray(e) ? e : { value: e };
+}
+function H(e) {
+  if (typeof e == "string")
+    return $(e.replace(/\s+/g, " "));
+  if (typeof e == "number" || typeof e == "boolean" || e === null || e === void 0)
+    return String(e);
+  if (Array.isArray(e))
+    return `${e.length} item${e.length === 1 ? "" : "s"}`;
+  if (typeof e == "object") {
+    const t = Object.keys(e).length;
+    return `${t} field${t === 1 ? "" : "s"}`;
+  }
+  return String(e);
+}
+function M(e) {
+  return typeof e == "string" && e.length > 180 || Array.isArray(e) || typeof e == "object" && e !== null;
+}
+function h({
+  activeView: e,
+  panelView: t,
+  children: o,
+  lazy: i = !1
+}) {
+  const s = e === t, [d, n] = c.useState(s || !i);
+  return c.useEffect(() => {
+    s && n(!0);
+  }, [s]), d ? /* @__PURE__ */ r("div", { className: l(!s && "hidden"), children: o }) : null;
+}
+function B({ label: e, value: t }) {
+  const [, o] = c.useTransition(), [i, s] = c.useState(!1), d = M(t);
+  return /* @__PURE__ */ a("div", { className: "grid gap-1 px-3 py-2.5 sm:grid-cols-[minmax(0,8rem)_minmax(0,1fr)] sm:gap-3", children: [
+    /* @__PURE__ */ r("dt", { className: "font-medium text-[11px] text-muted-foreground uppercase tracking-[0.08em]", children: e }),
+    /* @__PURE__ */ a("dd", { className: "min-w-0 space-y-2 text-foreground/90 text-xs", children: [
+      /* @__PURE__ */ r("span", { className: "wrap-break-word block whitespace-pre-wrap", children: H(t) }),
+      d && /* @__PURE__ */ r(
+        "button",
+        {
+          className: "inline-flex items-center rounded-md border border-border/60 px-2 py-1 font-medium text-[11px] text-muted-foreground transition-colors hover:bg-muted/40 hover:text-foreground dark:border-white/10",
+          onClick: () => o(() => s((n) => !n)),
+          type: "button",
+          children: i ? "Show less" : "Show more"
+        }
+      ),
+      i && /* @__PURE__ */ r(
+        N,
+        {
+          className: "rounded-lg border border-border/60 bg-background/80 dark:border-white/10",
+          code: w(t)
+        }
+      )
+    ] })
+  ] });
+}
+const F = c.memo(function({ value: t }) {
+  const o = c.useMemo(
+    () => Object.entries(D(t)),
+    [t]
+  );
+  return /* @__PURE__ */ r("div", { className: "overflow-hidden rounded-lg border border-border/60 bg-background/80 dark:border-white/10", children: /* @__PURE__ */ r("dl", { className: "divide-y divide-border/50 dark:divide-white/10", children: o.map(([i, s]) => /* @__PURE__ */ r(B, { label: i, value: s }, i)) }) });
+}), x = c.memo(function({
+  label: t,
+  value: o,
+  view: i = "table",
+  className: s,
+  ...d
+}) {
+  const n = c.useMemo(() => w(o), [o]);
+  return /* @__PURE__ */ a("section", { className: l("space-y-2", s), ...d, children: [
+    /* @__PURE__ */ a("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ r("h4", { className: "font-medium text-foreground text-xs", children: t }),
+      /* @__PURE__ */ r(
+        E,
+        {
+          className: "size-7 shrink-0 text-muted-foreground hover:text-foreground",
+          content: n,
+          size: "icon",
+          variant: "ghost"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ r(h, { activeView: i, panelView: "table", children: /* @__PURE__ */ r(F, { value: o }) }),
+    /* @__PURE__ */ r(h, { activeView: i, lazy: !0, panelView: "code", children: /* @__PURE__ */ r(
+      N,
+      {
+        className: "rounded-lg border border-border/60 bg-background/80 dark:border-white/10",
+        code: n
+      }
+    ) })
+  ] });
+});
+function Q({ className: e, ...t }) {
+  return /* @__PURE__ */ r(
+    j,
+    {
+      className: l("w-full", e),
+      "data-slot": "tool-call-accordion",
+      ...t
+    }
+  );
+}
+function U({
+  className: e,
+  ...t
+}) {
+  return /* @__PURE__ */ r(
+    I,
+    {
+      className: l(
+        "w-full overflow-hidden rounded-xl border border-border/50 bg-card/75 shadow-sm last:border-b dark:border-white/10 dark:shadow-black/20",
+        e
+      ),
+      "data-slot": "tool-call-accordion-item",
+      ...t
+    }
+  );
+}
+function X({
+  className: e,
+  state: t,
+  toolName: o,
+  icon: i,
+  showStateIndicator: s = !0,
+  ...d
+}) {
+  const n = t ?? "calling", m = i ?? /* @__PURE__ */ r(C, { className: "size-3.5 text-muted-foreground" }), g = {
+    calling: /* @__PURE__ */ r(V, { className: "size-3 shrink-0 animate-spin text-orange-500" }),
+    complete: /* @__PURE__ */ r(S, { className: "size-3 shrink-0 text-green-500" }),
+    error: /* @__PURE__ */ r(v, { className: "size-3 shrink-0 text-destructive" })
+  }, f = {
+    calling: "Running",
+    complete: "Completed",
+    error: "Failed"
+  };
+  return /* @__PURE__ */ a(
+    O,
+    {
+      className: l(
+        "items-center gap-3 px-3 py-3 hover:bg-muted/15 hover:no-underline [&>svg]:translate-y-0 [&>svg]:self-center",
+        J({ state: n }),
+        e
+      ),
+      "data-slot": "tool-call-accordion-trigger",
+      ...d,
+      children: [
+        /* @__PURE__ */ a("div", { className: "relative shrink-0", children: [
+          /* @__PURE__ */ r("div", { className: "flex size-8 items-center justify-center rounded-full bg-muted/45 ring-1 ring-border/50", children: m }),
+          s && /* @__PURE__ */ r(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: R({
+                state: n
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { className: "min-w-0 flex-1 text-left", children: /* @__PURE__ */ r("span", { className: "block truncate text-foreground text-xs", children: o }) }),
+        /* @__PURE__ */ a(
+          "span",
+          {
+            className: l(
+              "inline-flex shrink-0 items-center gap-1.5 self-center text-[11px] text-muted-foreground leading-none",
+              n === "error" && "text-destructive"
+            ),
+            children: [
+              g[n],
+              f[n]
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function Y({
+  className: e,
+  children: t,
+  view: o,
+  onViewChange: i,
+  showViewToggle: s = !0,
+  args: d,
+  result: n,
+  ...m
+}) {
+  const [g, f] = c.useState("table"), [, k] = c.useTransition(), u = o ?? g, b = (p) => {
+    i?.(p), o === void 0 && k(() => f(p));
+  };
+  return /* @__PURE__ */ r(
+    z,
+    {
+      className: "w-full border-border/50 border-t bg-muted/10 dark:border-white/10",
+      "data-slot": "tool-call-accordion-content",
+      ...m,
+      children: /* @__PURE__ */ a("div", { className: l("space-y-3 overflow-auto px-3 py-3", e), children: [
+        s && /* @__PURE__ */ a("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ r("p", { className: "truncate text-[11px] text-muted-foreground", children: "Inspect payload and response" }),
+          /* @__PURE__ */ a("div", { className: "inline-flex shrink-0 items-center gap-0.5 rounded-lg border border-border/60 bg-background/70 p-0.5 shadow-sm dark:border-white/10", children: [
+            /* @__PURE__ */ a(
+              "button",
+              {
+                className: l(
+                  "inline-flex h-6.5 items-center justify-center gap-1.5 rounded-md px-2.5 text-[11px] transition-colors",
+                  u === "table" ? "bg-background text-foreground shadow-sm ring-1 ring-border/60" : "text-muted-foreground hover:bg-background/60 hover:text-foreground"
+                ),
+                onClick: () => b("table"),
+                type: "button",
+                children: [
+                  /* @__PURE__ */ r(A, { className: "size-3.5" }),
+                  "Table"
+                ]
+              }
+            ),
+            /* @__PURE__ */ a(
+              "button",
+              {
+                className: l(
+                  "inline-flex h-6.5 items-center justify-center gap-1.5 rounded-md px-2.5 text-[11px] transition-colors",
+                  u === "code" ? "bg-background text-foreground shadow-sm ring-1 ring-border/60" : "text-muted-foreground hover:bg-background/60 hover:text-foreground"
+                ),
+                onClick: () => b("code"),
+                type: "button",
+                children: [
+                  /* @__PURE__ */ r(T, { className: "size-3.5" }),
+                  "JSON"
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ a("div", { className: "space-y-3", children: [
+          t,
+          d !== void 0 && /* @__PURE__ */ r(x, { label: "Parameters", value: d, view: u }),
+          n !== void 0 && /* @__PURE__ */ r(x, { label: "Response", value: n, view: u })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  Q as ToolCallAccordion,
+  Y as ToolCallAccordionContent,
+  U as ToolCallAccordionItem,
+  X as ToolCallAccordionTrigger
+};

package/dist/components/ui/molecules/toolkit-card.js

@@ -6,7 +6,7 @@ import "../atoms/card.js";
 import "../atoms/checkbox.js";
 import "../atoms/view-tools-control.js";
 import "../../../lib/utils.js";
-import { T as k } from "../../../toolkit-card-k8jio69G.js";
+import { T as k } from "../../../toolkit-card-DAgQXF93.js";
 import "../utils/memo.js";
 export {
   k as ToolkitCard

package/dist/components/ui/molecules/user-nav.d.ts

@@ -0,0 +1,65 @@
+import { ComponentProps, ReactNode } from 'react';
+import { DropdownMenuContent } from '../atoms/dropdown-menu';
+export type UserNavSize = "sm" | "lg";
+export type UserNavProps = {
+    /** Display name. @default "User" */
+    name?: string;
+    /** Email shown as default secondary content. */
+    email?: string;
+    /** Avatar image URL. Falls back to initials when omitted. */
+    avatarUrl?: string;
+    /** Avatar size. `"sm"` = 36px, `"lg"` = 40px. @default "sm" */
+    avatarSize?: UserNavSize;
+    /** Additional class names for the avatar fallback. */
+    avatarClassName?: string;
+    /** Badge overlay on the avatar (e.g. a notification dot). Positioned top-right automatically. */
+    badge?: ReactNode;
+    /** Optional badge content rendered in the dropdown identity instead of reusing the trigger badge. */
+    menuBadge?: ReactNode;
+    /**
+     * Custom content rendered below the name.
+     * Defaults to the email when omitted.
+     * Pass `null` explicitly to render nothing below the name.
+     */
+    secondary?: ReactNode;
+    /** Optional secondary content rendered in the dropdown identity instead of reusing the trigger secondary content. */
+    menuSecondary?: ReactNode;
+    /** Compact mode hides trigger details and chevron while keeping the dropdown identity expanded. */
+    compact?: boolean;
+    /**
+     * Dropdown menu items (e.g. `DropdownMenuItem`, `DropdownMenuSeparator`).
+     * When provided the trigger becomes interactive and opens a dropdown.
+     * When omitted the component renders as a static display.
+     */
+    children?: ReactNode;
+    /** Which side of the trigger the dropdown opens on. @default "top" */
+    dropdownSide?: ComponentProps<typeof DropdownMenuContent>["side"];
+    /** How the dropdown aligns with the trigger. @default "end" */
+    dropdownAlign?: ComponentProps<typeof DropdownMenuContent>["align"];
+    className?: string;
+};
+/**
+ * Presentational user widget — avatar, name, and secondary info.
+ *
+ * - Without `children` it renders as a static display.
+ * - With `children` (typically `DropdownMenuItem`) it renders as a dropdown.
+ * - `secondary` defaults to the email; override with any ReactNode.
+ *   Pass `null` explicitly to suppress the email entirely.
+ *
+ * @example Chat sidebar
+ * ```tsx
+ * <UserNav name={name} email={email}>
+ *   <DropdownMenuItem onClick={onSignOut}>Sign out</DropdownMenuItem>
+ * </UserNav>
+ * ```
+ *
+ * @example Dashboard with plan badge
+ * ```tsx
+ * <UserNav name={name} avatarSize="lg" secondary={<PlanBadge plan="pro" />}>
+ *   <DropdownMenuItem onClick={onBilling}>Billing</DropdownMenuItem>
+ * </UserNav>
+ * ```
+ */
+declare function UserNav({ name, email, avatarUrl, avatarSize, avatarClassName, badge, menuBadge, secondary, menuSecondary, compact, children, dropdownSide, dropdownAlign, className, }: UserNavProps): import("react/jsx-runtime").JSX.Element;
+export { UserNav };
+//# sourceMappingURL=user-nav.d.ts.map

package/dist/components/ui/molecules/user-nav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"user-nav.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/user-nav.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvD,OAAO,EAEL,mBAAmB,EAIpB,MAAM,qCAAqC,CAAC;AAK7C,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtC,MAAM,MAAM,YAAY,GAAG;IACzB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,sDAAsD;IACtD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iGAAiG;IACjG,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qGAAqG;IACrG,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,qHAAqH;IACrH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,mGAAmG;IACnG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sEAAsE;IACtE,YAAY,CAAC,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;IAClE,+DAA+D;IAC/D,aAAa,CAAC,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC,OAAO,CAAC,CAAC;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA2EF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,iBAAS,OAAO,CAAC,EACf,IAAI,EACJ,KAAK,EACL,SAAS,EACT,UAAiB,EACjB,eAAe,EACf,KAAK,EACL,SAAS,EACT,SAAS,EACT,aAAa,EACb,OAAe,EACf,QAAQ,EACR,YAAoB,EACpB,aAAqB,EACrB,SAAS,GACV,EAAE,YAAY,2CAyFd;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}