@arcadeai/design-system 3.37.0 → 3.38.0

package/dist/components/ui/molecules/command-bar.d.ts

@@ -1,7 +1,14 @@
 type CommandBarProps = {
     command: string;
     className?: string;
+    /**
+     * Called when content is copied from the command area.
+     * `source` is `"copy_button"` for button clicks (via navigator.clipboard)
+     * and `"clipboard"` for keyboard/menu copies (DOM copy event).
+     * The two paths are mutually exclusive — no double-counting occurs.
+     */
+    onCopy?: (source: "copy_button" | "clipboard") => void;
 };
-export declare function CommandBar({ command, className }: CommandBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function CommandBar({ command, className, onCopy }: CommandBarProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=command-bar.d.ts.map

package/dist/components/ui/molecules/command-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"command-bar.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/command-bar.tsx"],"names":[],"mappings":"AAKA,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,eAAe,2CA2BjE"}
+{"version":3,"file":"command-bar.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/command-bar.tsx"],"names":[],"mappings":"AAKA,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,GAAG,WAAW,KAAK,IAAI,CAAC;CACxD,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,eAAe,2CA8BzE"}

package/dist/components/ui/molecules/command-bar.js

@@ -1,25 +1,32 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { w as a } from "../../../web-BwFNdl01.js";
-import { CopyButton as l } from "../atoms/copy-button.js";
-import { SHIKI_THEMES as s } from "../../../lib/shiki-themes.js";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { w as l } from "../../../web-BwFNdl01.js";
+import { CopyButton as s } from "../atoms/copy-button.js";
+import { SHIKI_THEMES as n } from "../../../lib/shiki-themes.js";
 import { cn as i } from "../../../lib/utils.js";
-function u({ command: t, className: r }) {
-  return /* @__PURE__ */ o(
+function c({ command: t, className: r, onCopy: o }) {
+  return /* @__PURE__ */ a(
     "div",
     {
       className: i("relative overflow-hidden rounded-md border", r),
       children: [
-        /* @__PURE__ */ e("div", { className: "overflow-x-auto text-sm [&_.shiki]:py-3 [&_.shiki]:pr-14 [&_.shiki]:pl-10", children: /* @__PURE__ */ e(
-          a,
+        /* @__PURE__ */ e(
+          "div",
           {
-            addDefaultStyles: !1,
-            defaultColor: !1,
-            language: "shellscript",
-            showLanguage: !1,
-            theme: s,
-            children: t
+            className: "overflow-x-auto text-sm [&_.shiki]:py-3 [&_.shiki]:pr-14 [&_.shiki]:pl-10",
+            onCopy: () => o?.("clipboard"),
+            children: /* @__PURE__ */ e(
+              l,
+              {
+                addDefaultStyles: !1,
+                defaultColor: !1,
+                language: "shellscript",
+                showLanguage: !1,
+                theme: n,
+                children: t
+              }
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ e(
           "span",
           {
@@ -28,11 +35,11 @@ function u({ command: t, className: r }) {
             children: "$"
           }
         ),
-        /* @__PURE__ */ e("div", { className: "absolute top-1/2 right-3 -translate-y-1/2", children: /* @__PURE__ */ e(l, { content: t }) })
+        /* @__PURE__ */ e("div", { className: "absolute top-1/2 right-3 -translate-y-1/2", children: /* @__PURE__ */ e(s, { content: t, onCopy: () => o?.("copy_button") }) })
       ]
     }
   );
 }
 export {
-  u as CommandBar
+  c as CommandBar
 };

package/dist/components/ui/molecules/prompt-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prompt-input.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/prompt-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EACL,OAAO,EAIR,MAAM,+BAA+B,CAAC;AA6BvC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEhC,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,SAAiB,EACjB,SAAe,EACf,KAAK,EACL,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,QAAgB,EAChB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,gBAAgB,2CA6ClB;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE1C,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,SAAS,EACT,eAAuB,EACvB,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAoE1B;AAED,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAElE,iBAAS,kBAAkB,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAMzB;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;CAC5C,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC;AAEzC,iBAAS,iBAAiB,CAAC,EACzB,OAAO,EACP,QAAQ,EACR,SAAS,EACT,IAAY,EACZ,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAmBxB;AAED,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,GACpB,CAAC"}
+{"version":3,"file":"prompt-input.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/prompt-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EACL,OAAO,EAIR,MAAM,+BAA+B,CAAC;AA6BvC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEhC,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,SAAiB,EACjB,SAAe,EACf,KAAK,EACL,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,QAAgB,EAChB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,gBAAgB,2CA8ClB;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE1C,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,SAAS,EACT,eAAuB,EACvB,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAqE1B;AAED,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAElE,iBAAS,kBAAkB,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAUzB;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;CAC5C,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC;AAEzC,iBAAS,iBAAiB,CAAC,EACzB,OAAO,EACP,QAAQ,EACR,SAAS,EACT,IAAY,EACZ,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAwBxB;AAED,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,GACpB,CAAC"}

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

@@ -1,7 +1,7 @@
-import { jsx as a, jsxs as w } from "react/jsx-runtime";
-import y, { createContext as _, useState as C, useRef as k, useLayoutEffect as P, useContext as H } from "react";
-import { Textarea as I } from "../atoms/textarea.js";
-import { TooltipProvider as R, Tooltip as T, TooltipTrigger as $, TooltipContent as D } from "../atoms/tooltip.js";
+import { jsx as a, jsxs as y } from "react/jsx-runtime";
+import w, { createContext as _, useState as C, useRef as P, useLayoutEffect as k, useContext as T } from "react";
+import { Textarea as H } from "../atoms/textarea.js";
+import { TooltipProvider as I, Tooltip as R, TooltipTrigger as $, TooltipContent as D } from "../atoms/tooltip.js";
 import { cn as x } from "../../../lib/utils.js";
 const b = _({
   isLoading: !1,
@@ -11,15 +11,15 @@ const b = _({
   maxHeight: 240,
   onSubmit: void 0,
   disabled: !1,
-  textareaRef: y.createRef()
+  textareaRef: w.createRef()
 });
 function v() {
-  return H(b);
+  return T(b);
 }
-function V({
-  className: o,
+function E({
+  className: n,
   isLoading: r = !1,
-  maxHeight: n = 240,
+  maxHeight: o = 240,
   value: s,
   onValueChange: i,
   onSubmit: l,
@@ -28,30 +28,31 @@ function V({
   onClick: d,
   ...u
 }) {
-  const [f, m] = C(s || ""), h = k(null), g = (p) => {
-    m(p), i?.(p);
-  }, t = (p) => {
-    c || h.current?.focus(), d?.(p);
+  const [p, m] = C(s || ""), f = P(null), g = (h) => {
+    m(h), i?.(h);
+  }, t = (h) => {
+    c || f.current?.focus(), d?.(h);
   };
-  return /* @__PURE__ */ a(R, { children: /* @__PURE__ */ a(
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(
     b.Provider,
     {
       value: {
         isLoading: r,
-        value: s ?? f,
+        value: s ?? p,
         setValue: i ?? g,
-        maxHeight: n,
+        maxHeight: o,
         onSubmit: l,
         disabled: c,
-        textareaRef: h
+        textareaRef: f
       },
       children: /* @__PURE__ */ a(
         "div",
         {
           className: x(
             "cursor-text rounded-lg border border-input bg-background p-2 shadow-xs transition-[box-shadow,border-color] focus-within:border focus-within:border-muted-foreground focus-within:shadow-[0_0_4px_color-mix(in_oklch,var(--ring)_4%,transparent)] dark:focus-within:shadow-[0_0_4px_color-mix(in_oklch,var(--ring)_8%,transparent)]",
-            o
+            n
           ),
+          "data-slot": "prompt-input",
           onClick: t,
           ...u,
           children: e
@@ -60,36 +61,37 @@ function V({
     }
   ) });
 }
-function E({
-  className: o,
+function L({
+  className: n,
   onKeyDown: r,
-  disableAutosize: n = !1,
+  disableAutosize: o = !1,
   ...s
 }) {
-  const { value: i, setValue: l, maxHeight: e, onSubmit: c, disabled: d, textareaRef: u } = v(), f = (t) => {
-    !t || n || (t.style.height = "auto", typeof e == "number" ? t.style.height = `${Math.min(t.scrollHeight, e)}px` : t.style.height = `min(${t.scrollHeight}px, ${e})`);
+  const { value: i, setValue: l, maxHeight: e, onSubmit: c, disabled: d, textareaRef: u } = v(), p = (t) => {
+    !t || o || (t.style.height = "auto", typeof e == "number" ? t.style.height = `${Math.min(t.scrollHeight, e)}px` : t.style.height = `min(${t.scrollHeight}px, ${e})`);
   }, m = (t) => {
-    u.current = t, f(t);
+    u.current = t, p(t);
   };
-  P(() => {
-    if (!u.current || n)
+  k(() => {
+    if (!u.current || o)
       return;
     const t = u.current;
     t.style.height = "auto", typeof e == "number" ? t.style.height = `${Math.min(t.scrollHeight, e)}px` : t.style.height = `min(${t.scrollHeight}px, ${e})`;
-  }, [i, e, n]);
-  const h = (t) => {
-    f(t.target), l(t.target.value);
+  }, [i, e, o]);
+  const f = (t) => {
+    p(t.target), l(t.target.value);
   }, g = (t) => {
     t.key === "Enter" && !t.shiftKey && (t.preventDefault(), d || c?.()), r?.(t);
   };
   return /* @__PURE__ */ a(
-    I,
+    H,
     {
       className: x(
-        "min-h-[44px] w-full resize-none border-none bg-transparent text-foreground shadow-none outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-transparent",
-        o
+        "min-h-[56px] w-full resize-none border-none bg-transparent text-foreground shadow-none outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-transparent",
+        n
       ),
-      onChange: h,
+      "data-slot": "prompt-input-textarea",
+      onChange: f,
       onKeyDown: g,
       ref: m,
       rows: 1,
@@ -98,38 +100,48 @@ function E({
     }
   );
 }
-function L({
-  children: o,
+function M({
+  children: n,
   className: r,
-  ...n
+  ...o
 }) {
-  return /* @__PURE__ */ a("div", { className: x("flex items-center gap-2", r), ...n, children: o });
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: x("flex items-center gap-2", r),
+      "data-slot": "prompt-input-actions",
+      ...o,
+      children: n
+    }
+  );
 }
 function q({
-  tooltip: o,
+  tooltip: n,
   children: r,
-  className: n,
+  className: o,
   side: s = "top",
   ...i
 }) {
   const { disabled: l } = v();
-  return /* @__PURE__ */ w(T, { ...i, children: [
+  return /* @__PURE__ */ y(R, { ...i, children: [
     /* @__PURE__ */ a(
       $,
       {
         asChild: !0,
         disabled: l,
         onClick: (e) => e.stopPropagation(),
-        onMouseDown: (e) => e.preventDefault(),
+        onPointerDown: (e) => {
+          e.pointerType !== "touch" && e.preventDefault();
+        },
         children: r
       }
     ),
-    /* @__PURE__ */ a(D, { className: n, side: s, children: o })
+    /* @__PURE__ */ a(D, { className: o, side: s, children: n })
   ] });
 }
 export {
-  V as PromptInput,
+  E as PromptInput,
   q as PromptInputAction,
-  L as PromptInputActions,
-  E as PromptInputTextarea
+  M as PromptInputActions,
+  L as PromptInputTextarea
 };

package/dist/components/ui/molecules/steps-progress.d.ts

@@ -10,5 +10,9 @@ export type StepsProgressProps = {
     steps: Step[];
     onDismiss?: () => void;
 } & React.ComponentProps<"section">;
+export declare function getMobileIndexForSteps(steps: Step[], options?: {
+    currentIndex?: number;
+    isDismissible?: boolean;
+}): number;
 export declare function StepsProgress({ steps, onDismiss, className, ...props }: StepsProgressProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=steps-progress.d.ts.map

package/dist/components/ui/molecules/steps-progress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"steps-progress.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/steps-progress.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAKpC,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE9D,MAAM,MAAM,IAAI,GAAG;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,GAAG,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;AAmCpC,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,SAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,kBAAkB,2CA6DpB"}
+{"version":3,"file":"steps-progress.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/steps-progress.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAMpC,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE9D,MAAM,MAAM,IAAI,GAAG;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,GAAG,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;AAoDpC,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,IAAI,EAAE,EACb,OAAO,CAAC,EAAE;IACR,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,UAwBF;AAuBD,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,SAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAuIpB"}

package/dist/components/ui/molecules/steps-progress.js

@@ -1,89 +1,198 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { X as u } from "lucide-react";
-import { Button as m } from "../atoms/button.js";
-import { StepIndicator as d } from "../atoms/step-indicator.js";
-import { cn as f } from "../../../lib/utils.js";
-function h({ step: e, stepNumber: t }) {
-  const n = /* @__PURE__ */ r(
-    d,
+import { jsxs as s, jsx as n } from "react/jsx-runtime";
+import { ChevronLeft as w, X as g, ChevronRight as y } from "lucide-react";
+import { useState as C, useLayoutEffect as S } from "react";
+import { Button as p } from "../atoms/button.js";
+import { StepIndicator as j } from "../atoms/step-indicator.js";
+import { cn as c } from "../../../lib/utils.js";
+function M({ step: e, stepNumber: t }) {
+  const r = /* @__PURE__ */ n(
+    j,
     {
+      className: "min-w-0",
       label: e.label,
       status: e.status,
       stepNumber: t
     }
   );
-  return e.onClick ? /* @__PURE__ */ r(
+  return e.onClick ? /* @__PURE__ */ n(
     "button",
     {
       className: "flex min-w-0 flex-1 cursor-pointer items-center justify-center",
       onClick: e.onClick,
       type: "button",
-      children: n
+      children: r
     }
-  ) : /* @__PURE__ */ r("span", { className: "flex min-w-0 flex-1 items-center justify-center", children: n });
+  ) : /* @__PURE__ */ n("span", { className: "flex min-w-0 flex-1 items-center justify-center", children: r });
+}
+function v(e) {
+  return e.length - 1;
+}
+function L(e) {
+  return e.findIndex((t) => t.status === "active");
+}
+function N(e, t) {
+  return e.length === 0 ? t ? 0 : -1 : t ? e.length : v(e);
+}
+function f(e, t) {
+  const { currentIndex: r, isDismissible: l = !1 } = t ?? {}, i = L(e);
+  if (i >= 0)
+    return i;
+  if (e.length === 0)
+    return l ? 0 : -1;
+  const d = N(e, l);
+  return r !== void 0 && r >= 0 && r <= d ? r : v(e);
+}
+function z(e, t, r) {
+  const l = N(e, r);
+  return t >= 0 && t <= l ? t : f(e, {
+    currentIndex: t,
+    isDismissible: r
+  });
 }
-function N({
+function B(e) {
+  return `calc(${(e - 1) / e} * (100% - 4.25rem) + 0.75rem)`;
+}
+function F({
   steps: e,
   onDismiss: t,
-  className: n,
-  ...o
+  className: r,
+  ...l
 }) {
-  const s = !!t && e.at(-1)?.status === "active", c = `calc(${(e.length - 1) / e.length} * (100% - 4.25rem) + 0.75rem)`;
-  return /* @__PURE__ */ l(
+  const i = !!t, [d, u] = C(
+    () => f(e, { isDismissible: i })
+  );
+  S(() => {
+    u(
+      (a) => f(e, {
+        currentIndex: a,
+        isDismissible: i
+      })
+    );
+  }, [i, e]);
+  const o = z(
+    e,
+    d,
+    i
+  ), k = e[o], h = e.length, b = o > 0, x = i ? o < h : o < e.length - 1, I = i && e.at(-1)?.status === "active";
+  return /* @__PURE__ */ s(
     "section",
     {
       "aria-label": "Steps progress",
-      className: f(
+      className: c(
         "relative h-14 overflow-hidden border border-border bg-card text-foreground",
-        n
+        r
       ),
-      ...o,
+      ...l,
       children: [
-        s && /* @__PURE__ */ r(
+        I && /* @__PURE__ */ n(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute top-0 right-0 z-10 hidden h-0.5 bg-foreground sm:block",
+            style: { left: B(e.length) }
+          }
+        ),
+        k?.status === "active" && /* @__PURE__ */ n(
           "span",
           {
             "aria-hidden": "true",
-            className: "pointer-events-none absolute top-0 right-0 z-10 h-0.5 bg-foreground",
-            style: { left: c }
+            className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-0.5 bg-foreground sm:hidden"
           }
         ),
-        /* @__PURE__ */ l("div", { className: "relative z-10 flex h-full items-center gap-3 px-3", children: [
-          /* @__PURE__ */ r("ol", { className: "flex h-full min-w-0 flex-1 items-center gap-0", children: e.map((a, i) => /* @__PURE__ */ l(
-            "li",
+        /* @__PURE__ */ s("div", { className: "relative z-10 flex h-full items-center sm:gap-3 sm:px-3", children: [
+          /* @__PURE__ */ n(
+            "button",
             {
-              "aria-current": a.status === "active" ? "step" : void 0,
-              className: "relative isolate flex h-full min-w-0 flex-1 items-center justify-center px-3 py-4",
-              "data-status": a.status,
-              children: [
-                i > 0 && /* @__PURE__ */ r(
-                  "span",
+              "aria-label": "Go to previous step",
+              className: c(
+                "flex h-full shrink-0 items-center px-2 text-muted-foreground sm:hidden",
+                !b && "pointer-events-none invisible"
+              ),
+              onClick: () => u(o - 1),
+              tabIndex: b ? 0 : -1,
+              type: "button",
+              children: /* @__PURE__ */ n(w, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ s("ol", { className: "flex h-full min-w-0 flex-1 items-center gap-0", children: [
+            e.map((a, m) => /* @__PURE__ */ s(
+              "li",
+              {
+                "aria-current": a.status === "active" ? "step" : void 0,
+                className: c(
+                  "relative isolate flex h-full min-w-0 flex-1 items-center justify-center px-2 py-4 sm:px-3",
+                  m !== o && "hidden sm:flex"
+                ),
+                "data-status": a.status,
+                children: [
+                  m > 0 && /* @__PURE__ */ n(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: "absolute left-0 hidden h-full w-px bg-border sm:block"
+                    }
+                  ),
+                  /* @__PURE__ */ n(M, { step: a, stepNumber: m + 1 })
+                ]
+              },
+              a.id
+            )),
+            t && /* @__PURE__ */ n(
+              "li",
+              {
+                className: c(
+                  "relative isolate flex h-full flex-1 items-center justify-center sm:hidden",
+                  o !== h && "hidden"
+                ),
+                children: /* @__PURE__ */ s(
+                  p,
                   {
-                    "aria-hidden": "true",
-                    className: "absolute left-0 h-full w-px bg-border"
+                    "aria-label": "Dismiss steps progress",
+                    className: "h-8 gap-1.5 border border-border px-3 text-muted-foreground hover:bg-muted hover:text-foreground",
+                    onClick: t,
+                    type: "button",
+                    variant: "ghost",
+                    children: [
+                      /* @__PURE__ */ n(g, { className: "h-4 w-4" }),
+                      /* @__PURE__ */ n("span", { className: "text-sm", children: "Dismiss" })
+                    ]
                   }
-                ),
-                /* @__PURE__ */ r(h, { step: a, stepNumber: i + 1 })
-              ]
-            },
-            a.id
-          )) }),
-          t ? /* @__PURE__ */ r(
-            m,
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ n(
+            "button",
+            {
+              "aria-label": "Go to next step",
+              className: c(
+                "flex h-full shrink-0 items-center px-2 text-muted-foreground sm:hidden",
+                !x && "pointer-events-none invisible"
+              ),
+              onClick: () => u(o + 1),
+              tabIndex: x ? 0 : -1,
+              type: "button",
+              children: /* @__PURE__ */ n(y, { className: "h-4 w-4" })
+            }
+          ),
+          t && /* @__PURE__ */ n(
+            p,
             {
               "aria-label": "Dismiss steps progress",
-              className: "h-8 w-8 shrink-0 border border-border text-muted-foreground hover:bg-muted hover:text-foreground",
+              className: "hidden h-8 w-8 shrink-0 border border-border text-muted-foreground hover:bg-muted hover:text-foreground sm:flex",
               onClick: t,
               size: "icon",
               type: "button",
               variant: "ghost",
-              children: /* @__PURE__ */ r(u, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ n(g, { className: "h-4 w-4" })
             }
-          ) : null
+          )
         ] })
       ]
     }
   );
 }
 export {
-  N as StepsProgress
+  F as StepsProgress,
+  f as getMobileIndexForSteps
 };

package/dist/components/ui/molecules/suggestion-card.d.ts

@@ -7,7 +7,7 @@ export type SuggestionCardProps = {
     /** Secondary descriptive text */
     subtitle: string;
 } & React.ComponentProps<"button">;
-export declare function SuggestionCard({ className, icon, title, subtitle, ...props }: SuggestionCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function SuggestionCard({ className, icon, title, subtitle, style, ...props }: SuggestionCardProps): import("react/jsx-runtime").JSX.Element;
 export type SuggestionCardSkeletonProps = React.ComponentProps<"div">;
-export declare function SuggestionCardSkeleton({ className, ...props }: SuggestionCardSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare function SuggestionCardSkeleton({ className, style, ...props }: SuggestionCardSkeletonProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=suggestion-card.d.ts.map

package/dist/components/ui/molecules/suggestion-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"suggestion-card.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/suggestion-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAMpC,MAAM,MAAM,mBAAmB,GAAG;IAChC,mDAAmD;IACnD,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,QAAQ,EAAE,MAAM,CAAC;CAClB,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;AAEnC,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAiCrB;AAID,MAAM,MAAM,2BAA2B,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEtE,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,2BAA2B,2CAkB7B"}
+{"version":3,"file":"suggestion-card.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/suggestion-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAMpC,MAAM,MAAM,mBAAmB,GAAG;IAChC,mDAAmD;IACnD,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,QAAQ,EAAE,MAAM,CAAC;CAClB,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;AAEnC,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,mBAAmB,2CA4CrB;AAID,MAAM,MAAM,2BAA2B,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEtE,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,2BAA2B,2CA+B7B"}

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

@@ -1,79 +1,116 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { Skeleton as r } from "../atoms/skeleton.js";
-import { cn as a } from "../../../lib/utils.js";
-function g({
-  className: t,
-  icon: o,
-  title: d,
-  subtitle: l,
-  ...n
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { Skeleton as d } from "../atoms/skeleton.js";
+import { cn as l } from "../../../lib/utils.js";
+function u({
+  className: r,
+  icon: s,
+  title: a,
+  subtitle: o,
+  style: n,
+  ...i
 }) {
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ t(
     "button",
     {
-      className: a(
-        "flex w-full cursor-pointer flex-col gap-2 rounded-2xl border bg-card p-4 text-left shadow-xs transition-all hover:-translate-y-0.5 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
-        t
+      className: l(
+        "flex w-full cursor-pointer flex-col gap-1.5 rounded-2xl border bg-card text-left shadow-xs transition-all hover:-translate-y-0.5 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+        r
       ),
       "data-slot": "suggestion-card",
+      style: {
+        padding: "clamp(0.75rem, 1.6vh, 1rem)",
+        ...n
+      },
       type: "button",
-      ...n,
+      ...i,
       children: [
         /* @__PURE__ */ e(
           "div",
           {
-            className: "flex size-8 items-center justify-center rounded-xl border bg-muted shadow-xs sm:size-10",
+            className: "flex items-center justify-center rounded-xl border bg-muted shadow-xs",
             "data-slot": "suggestion-card-icon",
-            children: o
+            style: {
+              width: "clamp(2rem, 2.8vh, 2.5rem)",
+              height: "clamp(2rem, 2.8vh, 2.5rem)"
+            },
+            children: s
           }
         ),
-        /* @__PURE__ */ s("div", { className: "space-y-2 pt-2", children: [
-          /* @__PURE__ */ e(
-            "h3",
-            {
-              className: "font-semibold text-card-foreground text-sm",
-              "data-slot": "suggestion-card-title",
-              children: d
-            }
-          ),
-          /* @__PURE__ */ e(
-            "p",
-            {
-              className: "text-muted-foreground text-xs",
-              "data-slot": "suggestion-card-subtitle",
-              children: l
-            }
-          )
-        ] })
+        /* @__PURE__ */ t(
+          "div",
+          {
+            className: "space-y-1.5",
+            style: { paddingTop: "clamp(0.25rem, 0.8vh, 0.5rem)" },
+            children: [
+              /* @__PURE__ */ e(
+                "h3",
+                {
+                  className: "font-semibold text-card-foreground text-sm leading-tight",
+                  "data-slot": "suggestion-card-title",
+                  children: a
+                }
+              ),
+              /* @__PURE__ */ e(
+                "p",
+                {
+                  className: "text-muted-foreground text-xs leading-snug",
+                  "data-slot": "suggestion-card-subtitle",
+                  children: o
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   );
 }
-function m({
-  className: t,
-  ...o
+function h({
+  className: r,
+  style: s,
+  ...a
 }) {
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ t(
     "div",
     {
       "aria-hidden": "true",
-      className: a(
-        "flex w-full flex-col gap-2 rounded-2xl border bg-card p-4 shadow-xs",
-        t
+      className: l(
+        "flex w-full flex-col gap-1.5 rounded-2xl border bg-card shadow-xs",
+        r
       ),
       "data-slot": "suggestion-card-skeleton",
-      ...o,
+      style: {
+        padding: "clamp(0.75rem, 1.6vh, 1rem)",
+        ...s
+      },
+      ...a,
       children: [
-        /* @__PURE__ */ e(r, { className: "size-8 rounded-xl sm:size-10" }),
-        /* @__PURE__ */ s("div", { className: "space-y-2 pt-2", children: [
-          /* @__PURE__ */ e(r, { className: "h-4 w-3/4 rounded" }),
-          /* @__PURE__ */ e(r, { className: "h-3 w-1/2 rounded" })
-        ] })
+        /* @__PURE__ */ e(
+          d,
+          {
+            className: "rounded-xl",
+            style: {
+              width: "clamp(2rem, 2.8vh, 2.5rem)",
+              height: "clamp(2rem, 2.8vh, 2.5rem)"
+            }
+          }
+        ),
+        /* @__PURE__ */ t(
+          "div",
+          {
+            className: "space-y-1.5",
+            style: { paddingTop: "clamp(0.25rem, 0.8vh, 0.5rem)" },
+            children: [
+              /* @__PURE__ */ e(d, { className: "h-4 w-3/4 rounded" }),
+              /* @__PURE__ */ e(d, { className: "h-3 w-1/2 rounded" })
+            ]
+          }
+        )
       ]
     }
   );
 }
 export {
-  g as SuggestionCard,
-  m as SuggestionCardSkeleton
+  u as SuggestionCard,
+  h as SuggestionCardSkeleton
 };

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

@@ -3,7 +3,7 @@ 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", {
+const h = d("my-2 gap-0 py-0", {
   variants: {
     status: {
       loading: "",
@@ -96,7 +96,7 @@ function T({
     }
   ) });
 }
-function j({
+function y({
   className: e,
   ...a
 }) {
@@ -109,7 +109,7 @@ function j({
     }
   ) });
 }
-function y({
+function j({
   className: e,
   status: a,
   ...r
@@ -154,7 +154,7 @@ function H({
 export {
   C as ToolAuthorization,
   H as ToolAuthorizationArgs,
-  j as ToolAuthorizationContent,
+  y as ToolAuthorizationContent,
   T as ToolAuthorizationHeader,
-  y as ToolAuthorizationMessage
+  j as ToolAuthorizationMessage
 };

package/dist/components/ui/templates/chat-template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-template.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/templates/chat-template.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAKpC,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAE5D,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAWtE;AAID,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;AAErE,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAWzB;AAID,MAAM,MAAM,4BAA4B,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEvE,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,4BAA4B,2CAQ9B;AAID,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEhE,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAWvB;AAID,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;AAErE,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAWzB;AAID,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEpE,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,yBAAyB,2CAW3B;AAID,MAAM,MAAM,8BAA8B,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;AAExE,wBAAgB,yBAAyB,CAAC,EACxC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,8BAA8B,2CAWhC;AAID,MAAM,MAAM,iCAAiC,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;AAE3E,wBAAgB,4BAA4B,CAAC,EAC3C,SAAS,EACT,GAAG,KAAK,EACT,EAAE,iCAAiC,2CAWnC;AAID,MAAM,MAAM,4BAA4B,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEvE,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,4BAA4B,2CAQ9B"}
+{"version":3,"file":"chat-template.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/templates/chat-template.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAKpC,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAE5D,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAWtE;AAID,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;AAErE,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAWzB;AAID,MAAM,MAAM,4BAA4B,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEvE,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,4BAA4B,2CAQ9B;AAID,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEhE,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAWvB;AAID,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;AAErE,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAWzB;AAID,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEpE,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,yBAAyB,2CAW3B;AAID,MAAM,MAAM,8BAA8B,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;AAExE,wBAAgB,yBAAyB,CAAC,EACxC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,8BAA8B,2CAWhC;AAID,MAAM,MAAM,iCAAiC,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;AAE3E,wBAAgB,4BAA4B,CAAC,EAC3C,SAAS,EACT,GAAG,KAAK,EACT,EAAE,iCAAiC,2CAWnC;AAID,MAAM,MAAM,4BAA4B,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEvE,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,4BAA4B,2CAW9B"}

package/dist/components/ui/templates/chat-template.js

@@ -1,148 +1,151 @@
 import { jsx as a } from "react/jsx-runtime";
 import { cn as l } from "../../../lib/utils.js";
-function m({ className: t, ...e }) {
+function m({ className: e, ...t }) {
   return /* @__PURE__ */ a(
     "div",
     {
       className: l(
         "relative flex h-dvh min-w-0 flex-col bg-background",
-        t
+        e
       ),
       "data-slot": "chat-template",
-      ...e
+      ...t
     }
   );
 }
 function n({
-  className: t,
-  ...e
+  className: e,
+  ...t
 }) {
   return /* @__PURE__ */ a(
     "header",
     {
       className: l(
         "sticky top-0 z-10 flex items-center gap-2 bg-background px-2 py-1.5",
-        t
+        e
       ),
       "data-slot": "chat-template-header",
-      ...e
+      ...t
     }
   );
 }
-function s({
-  className: t,
-  ...e
+function c({
+  className: e,
+  ...t
 }) {
   return /* @__PURE__ */ a(
     "div",
     {
-      className: l("flex items-center gap-2", t),
+      className: l("flex items-center gap-2", e),
       "data-slot": "chat-template-header-group",
-      ...e
+      ...t
     }
   );
 }
-function i({
-  className: t,
-  ...e
+function p({
+  className: e,
+  ...t
 }) {
   return /* @__PURE__ */ a(
     "div",
     {
       className: l(
         "flex min-w-0 flex-1 flex-col gap-6 overflow-y-auto pt-4",
-        t
+        e
       ),
       "data-slot": "chat-template-body",
-      ...e
+      ...t
     }
   );
 }
-function c({
-  className: t,
-  ...e
+function i({
+  className: e,
+  ...t
 }) {
   return /* @__PURE__ */ a(
     "footer",
     {
       className: l(
         "mx-auto flex w-full flex-col gap-1.5 px-4 pt-2 pb-4 md:max-w-3xl md:pb-6",
-        t
+        e
       ),
       "data-slot": "chat-template-footer",
-      ...e
+      ...t
     }
   );
 }
 function d({
-  className: t,
-  ...e
+  className: e,
+  ...t
 }) {
   return /* @__PURE__ */ a(
     "div",
     {
       className: l(
-        "mx-auto mt-8 flex max-w-xl flex-col rounded-xl p-6 text-center leading-relaxed sm:mt-16 md:mt-24",
-        t
+        "mx-auto mt-[clamp(0.75rem,5vh,4rem)] flex max-w-xl flex-col rounded-xl px-6 py-[clamp(1rem,2.5vh,1.5rem)] text-center leading-relaxed",
+        e
       ),
       "data-slot": "chat-template-overview",
-      ...e
+      ...t
     }
   );
 }
-function p({
-  className: t,
-  ...e
+function s({
+  className: e,
+  ...t
 }) {
   return /* @__PURE__ */ a(
     "h1",
     {
       className: l(
-        "mb-2 bg-linear-to-r from-foreground to-foreground/70 bg-clip-text font-bold font-serif text-2xl text-transparent tracking-wide sm:mb-4 sm:text-3xl md:text-4xl",
-        t
+        "mb-[clamp(0.5rem,1.5vh,1rem)] text-balance bg-linear-to-r from-foreground to-foreground/70 bg-clip-text font-bold font-serif text-[clamp(1.8rem,3.7vh,2.55rem)] text-transparent leading-tight tracking-wide",
+        e
       ),
       "data-slot": "chat-template-overview-title",
-      ...e
+      ...t
     }
   );
 }
-function x({
-  className: t,
-  ...e
+function f({
+  className: e,
+  ...t
 }) {
   return /* @__PURE__ */ a(
     "h2",
     {
       className: l(
-        "mb-4 bg-linear-to-r from-foreground/80 to-foreground/60 bg-clip-text font-medium text-transparent text-xl sm:mb-8 sm:text-2xl md:text-4xl",
-        t
+        "mb-[clamp(1rem,3.2vh,2.25rem)] text-balance bg-linear-to-r from-foreground/90 to-foreground/70 bg-clip-text font-medium text-[clamp(1.3rem,3.3vh,2.15rem)] text-transparent leading-tight",
+        e
       ),
       "data-slot": "chat-template-overview-subtitle",
-      ...e
+      ...t
     }
   );
 }
-function f({
-  className: t,
-  ...e
+function u({
+  className: e,
+  ...t
 }) {
   return /* @__PURE__ */ a(
     "div",
     {
-      className: l("mb-2 grid w-full grid-cols-12 gap-4 pt-1", t),
+      className: l(
+        "mb-2 grid w-full grid-cols-12 gap-3 pt-1 lg:gap-4",
+        e
+      ),
       "data-slot": "chat-template-suggestions",
-      ...e
+      ...t
     }
   );
 }
 export {
   m as ChatTemplate,
-  i as ChatTemplateBody,
-  c as ChatTemplateFooter,
+  p as ChatTemplateBody,
+  i as ChatTemplateFooter,
   n as ChatTemplateHeader,
-  s as ChatTemplateHeaderGroup,
+  c as ChatTemplateHeaderGroup,
   d as ChatTemplateOverview,
-  x as ChatTemplateOverviewSubtitle,
-  p as ChatTemplateOverviewTitle,
-  f as ChatTemplateSuggestions
+  f as ChatTemplateOverviewSubtitle,
+  s as ChatTemplateOverviewTitle,
+  u as ChatTemplateSuggestions
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arcadeai/design-system",
   "private": false,
-  "version": "3.37.0",
+  "version": "3.38.0",
   "type": "module",
   "main": "./dist/main.js",
   "types": "./dist/main.d.ts",