@inkeep/agents-ui 0.15.8 → 0.15.10

package/dist/styled/components/message.js

@@ -1,142 +1,325 @@
 "use client";
-import { jsx as t, jsxs as l, Fragment as J } from "react/jsx-runtime";
-import { useBaseEvents as O } from "../../primitives/providers/base-events-provider.js";
-import { useInkeepConfig as U } from "../../primitives/providers/config-provider.js";
-import { useMessage as q } from "../../primitives/providers/message-provider.js";
-import { EmbeddedChatPrimitiveMarkdown as z, PrimitiveMessagePart as d, EmbeddedChatPrimitiveDynamicComponent as S } from "../../primitives/components/embedded-chat.js";
-import { useChat as H } from "../../primitives/components/embedded-chat/chat-provider.js";
-import { merge as Q } from "merge-anything";
-import { cn as R } from "../utils.js";
-import { markdownStyles as V } from "./ui/markdown-styles.js";
-import { useStreamProcessor as W } from "../../primitives/components/embedded-chat/use-stream-processor.js";
-import { DataSummaryGroup as X } from "./data-summary-group.js";
-import { useMemo as h, useCallback as y } from "react";
-import { MessageLoading as Y } from "./embedded-chat.js";
-import { Library as Z, ComponentIcon as ee } from "lucide-react";
-const te = () => /* @__PURE__ */ t("div", { className: "flex space-x-1", children: [0, 1, 2].map((a) => /* @__PURE__ */ t(
+import { jsx as e, jsxs as o, Fragment as re } from "react/jsx-runtime";
+import { useBaseEvents as ne } from "../../primitives/providers/base-events-provider.js";
+import { useInkeepConfig as oe } from "../../primitives/providers/config-provider.js";
+import { useMessage as se } from "../../primitives/providers/message-provider.js";
+import { EmbeddedChatPrimitiveMarkdown as ie, PrimitiveMessagePart as v, EmbeddedChatPrimitiveDynamicComponent as q } from "../../primitives/components/embedded-chat.js";
+import { useChat as le } from "../../primitives/components/embedded-chat/chat-provider.js";
+import { merge as pe } from "merge-anything";
+import { cn as b } from "../utils.js";
+import { markdownStyles as de } from "./ui/markdown-styles.js";
+import { useStreamProcessor as ce } from "../../primitives/components/embedded-chat/use-stream-processor.js";
+import { DataSummaryGroup as me } from "./data-summary-group.js";
+import { useState as A, useRef as ue, useEffect as _, useMemo as L, useCallback as P } from "react";
+import { DynamicComponent as he, MessageLoading as fe } from "./embedded-chat.js";
+import { Hammer as ge, ChevronDown as xe, Check as J, X as ye, Library as we, ComponentIcon as ve, XCircle as B, CheckCircle as F, Clock as be, Loader2 as Ce, Circle as ke } from "lucide-react";
+import { button as K } from "./ui/recipes/button.js";
+const Ne = {
+  "input-streaming": "Pending",
+  "input-available": "Running",
+  "approval-requested": "Awaiting Approval",
+  "approval-responded": "Responded",
+  "output-available": "Completed",
+  "output-error": "Error",
+  "output-denied": "Denied"
+};
+function Se(t) {
+  if (!t || typeof t != "object") return !1;
+  const n = t;
+  return typeof n.type == "string" && n.type.startsWith("tool-");
+}
+const De = (t) => {
+  if (!t || typeof t != "object" || !("status" in t)) return;
+  const n = t.status;
+  return typeof n == "string" ? n : void 0;
+}, Te = () => /* @__PURE__ */ e("div", { className: "flex space-x-1", children: [0, 1, 2].map((t) => /* @__PURE__ */ e(
   "span",
   {
     className: "animate-bounce-dot opacity-30",
     style: {
-      animationDelay: `${a * 0.2}s`
+      animationDelay: `${t * 0.2}s`
     },
     children: "."
   },
-  a
-)) }), N = ({ name: a, Icon: n, props: C, componentType: u }) => /* @__PURE__ */ l("div", { className: "border rounded-lg bg-gray-50 dark:bg-gray-dark-800 mb-3", children: [
-  /* @__PURE__ */ l("div", { className: "flex justify-between px-4 py-2 text-xs", children: [
-    /* @__PURE__ */ l("div", { className: "font-medium flex items-center gap-2", children: [
-      /* @__PURE__ */ t(n, { className: "w-3 h-3 text-gray-600 dark:text-white-alpha-600" }),
-      /* @__PURE__ */ t("span", { children: a })
+  t
+)) }), U = ({ name: t, Icon: n, props: s, componentType: l }) => /* @__PURE__ */ o("div", { className: "border rounded-lg bg-gray-50 dark:bg-gray-dark-800 mb-3", children: [
+  /* @__PURE__ */ o("div", { className: "flex justify-between px-4 py-2 text-xs", children: [
+    /* @__PURE__ */ o("div", { className: "font-medium flex items-center gap-2", children: [
+      /* @__PURE__ */ e(n, { className: "w-3 h-3 text-gray-600 dark:text-white-alpha-600" }),
+      /* @__PURE__ */ e("span", { children: t })
     ] }),
-    /* @__PURE__ */ t("div", { className: "flex items-center px-1.5 py-0.5 rounded-md text-2xs uppercase tracking-wider bg-gray-200 dark:bg-white-alpha-200 font-medium text-gray-700 dark:text-white-alpha-700 font-mono", children: u })
+    /* @__PURE__ */ e("div", { className: "flex items-center px-1.5 py-0.5 rounded-md text-2xs uppercase tracking-wider bg-gray-200 dark:bg-white-alpha-200 font-medium text-gray-700 dark:text-white-alpha-700 font-mono", children: l })
   ] }),
-  /* @__PURE__ */ t("pre", { className: "whitespace-pre-wrap text-xs text-gray-700 dark:text-white-alpha-700 font-mono px-4 py-2", children: JSON.stringify(C, null, 2) })
-] }), ae = ({ name: a, props: n }) => /* @__PURE__ */ t(N, { name: a, Icon: ee, props: n, componentType: "component" }), oe = ({ name: a, props: n }) => /* @__PURE__ */ t(N, { name: a, Icon: Z, props: n, componentType: "artifact" }), Ce = ({
-  className: a,
+  /* @__PURE__ */ e("pre", { className: "whitespace-pre-wrap text-xs text-gray-700 dark:text-white-alpha-700 font-mono px-4 py-2", children: JSON.stringify(s, null, 2) })
+] }), Ie = ({ name: t, props: n }) => /* @__PURE__ */ e(U, { name: t, Icon: ve, props: n, componentType: "component" }), Ee = ({ name: t, props: n }) => /* @__PURE__ */ e(U, { name: t, Icon: we, props: n, componentType: "artifact" }), Le = ({ part: t, approve: n, isDebug: s = !1 }) => {
+  const l = t.type, C = l.startsWith("tool-") ? l.slice(5) : l, r = t.state, m = !!t.approval?.id, g = r === "approval-requested", k = De(t.output), [u, N] = A(m || !s), S = r ? Ne[r] ?? r : "tool";
+  return _(() => {
+    g && N(!0);
+  }, [g]), /* @__PURE__ */ o("div", { className: "border rounded-lg mb-3 overflow-hidden", children: [
+    s && /* @__PURE__ */ o(
+      "button",
+      {
+        type: "button",
+        className: "inline-flex items-center group gap-2 text-xs text-gray-700 dark:text-white-alpha-700 hover:text-gray-800 dark:hover:text-white-alpha-800 transition-colors cursor-pointer w-full justify-between px-4 py-2",
+        onClick: () => N(!u),
+        "data-expanded": u,
+        children: [
+          /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ o("div", { className: "font-medium flex items-center gap-2", children: [
+            /* @__PURE__ */ e(ge, { className: "w-3 h-3 text-gray-600 dark:text-white-alpha-600" }),
+            /* @__PURE__ */ e("span", { children: C })
+          ] }) }),
+          /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ o("div", { className: "flex items-center gap-1.5 px-1.5 py-0.5 rounded-md text-2xs uppercase tracking-wider bg-gray-100 dark:bg-white-alpha-100 font-medium text-gray-700 dark:text-white-alpha-700 font-mono", children: [
+              (() => {
+                switch (r) {
+                  case "input-streaming":
+                    return /* @__PURE__ */ e(ke, { className: "w-3 h-3" });
+                  case "input-available":
+                    return /* @__PURE__ */ e(Ce, { className: "w-3 h-3 animate-spin" });
+                  case "approval-requested":
+                    return /* @__PURE__ */ e(be, { className: "w-3 h-3" });
+                  case "approval-responded":
+                    return /* @__PURE__ */ e(F, { className: "w-3 h-3" });
+                  case "output-available":
+                    return /* @__PURE__ */ e(F, { className: "w-3 h-3" });
+                  case "output-error":
+                    return /* @__PURE__ */ e(B, { className: "w-3 h-3" });
+                  case "output-denied":
+                    return /* @__PURE__ */ e(B, { className: "w-3 h-3" });
+                  default:
+                    return null;
+                }
+              })(),
+              S
+            ] }),
+            /* @__PURE__ */ e(xe, { className: "w-3 h-3 text-gray-500 dark:text-white-alpha-500 transition-all duration-200 transform rotate-0 group-data-[expanded=true]:rotate-180" })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        "data-expanded": u,
+        className: b(
+          "relative",
+          'before:content-[""] before:absolute before:inset-x-0 before:-top-px before:h-3 before:pointer-events-none before:z-10',
+          'after:content-[""] after:absolute after:inset-x-0 after:bottom-0 after:h-3 after:pointer-events-none after:z-10',
+          "before:bg-[linear-gradient(white,_transparent)] after:bg-[linear-gradient(transparent,_white)]",
+          "dark:before:bg-[linear-gradient(var(--ikp-color-gray-dark-950),_transparent)] dark:after:bg-[linear-gradient(transparent,_var(--ikp-color-gray-dark-950))]",
+          "data-[expanded=false]:before:opacity-0 data-[expanded=false]:after:opacity-0"
+        ),
+        children: /* @__PURE__ */ o(
+          "div",
+          {
+            "data-expanded": u,
+            className: b(
+              "px-4 data-[expanded=true]:pb-3 [scrollbar-width:thin] overflow-hidden transition-all duration-300 ease-in-out data-[expanded=true]:opacity-100 data-[expanded=false]:max-h-0 data-[expanded=false]:opacity-0 max-w-full",
+              m ? "" : "data-[expanded=true]:max-h-48 data-[expanded=true]:overflow-y-auto"
+            ),
+            children: [
+              t.input != null && s && /* @__PURE__ */ e("pre", { className: "whitespace-pre-wrap text-xs text-gray-700 dark:text-white-alpha-700 font-mono py-2", children: JSON.stringify(t.input, null, 2) }),
+              !s && /* @__PURE__ */ o("div", { className: "whitespace-pre-wrap text-sm text-gray-700 dark:text-white-alpha-700 py-2", children: [
+                "Approval is needed to run ",
+                /* @__PURE__ */ e("strong", { children: C }),
+                "."
+              ] }),
+              g && t.approval?.id && /* @__PURE__ */ o("div", { className: "flex justify-end gap-2 pt-1", children: [
+                /* @__PURE__ */ e(
+                  "button",
+                  {
+                    type: "button",
+                    className: b(
+                      K({ size: "xs", variant: "outline" }),
+                      "px-2 py-1 rounded-md text-xs text-gray-700 dark:text-white-alpha-700"
+                    ),
+                    onClick: () => n(!1),
+                    children: "Deny"
+                  }
+                ),
+                /* @__PURE__ */ o(
+                  "button",
+                  {
+                    type: "button",
+                    className: b(
+                      K({ size: "xs", variant: "primaryFilled" }),
+                      "px-2 py-1 rounded-md text-xs gap-1"
+                    ),
+                    onClick: () => n(!0),
+                    children: [
+                      /* @__PURE__ */ e(J, { className: "w-3 h-3" }),
+                      "Approve"
+                    ]
+                  }
+                )
+              ] }),
+              r === "output-available" && t.output != null && !s && /* @__PURE__ */ o("div", { className: "flex justify-end items-center gap-1 whitespace-pre-wrap text-xs text-gray-700 dark:text-white-alpha-700 capitalize", children: [
+                k === "approved" && /* @__PURE__ */ e(J, { className: "w-3 h-3" }),
+                k
+              ] }),
+              r === "output-denied" && !s && /* @__PURE__ */ o("div", { className: "flex justify-end items-center gap-1 whitespace-pre-wrap text-xs text-gray-700 dark:text-white-alpha-700 capitalize", children: [
+                /* @__PURE__ */ e(ye, { className: "w-3 h-3" }),
+                S
+              ] }),
+              r === "output-available" && t.output != null && s && /* @__PURE__ */ e("pre", { className: "whitespace-pre-wrap text-xs text-gray-700 dark:text-white-alpha-700 font-mono py-2", children: typeof t.output == "string" ? t.output : JSON.stringify(t.output, null, 2) })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}, We = ({
+  className: t,
   componentStyles: n,
-  children: C,
-  isLast: u,
-  ...L
+  children: s,
+  isLast: l,
+  ...C
 }) => {
-  const { message: s } = q(), { logEvent: p } = O(), { conversationId: x, isStreaming: M, isLoading: P, setError: E } = H(), {
-    aiChatSettings: { components: _, artifacts: $ }
-  } = U(), I = s.role === "user", T = (M || P) && u && s.role === "assistant", { processedParts: j, summaryTimings: K, shouldShowInitialLoading: A, shouldShowStreamDelayLoading: B } = W(s.parts, T, E), w = h(
-    () => s.parts.filter(
-      (e) => e.type === "data-artifact" && e.data?.type?.toLowerCase() === "citation"
+  const { message: r } = se(), { logEvent: f } = ne(), { conversationId: m, isStreaming: g, isLoading: k, setError: u, addToolApprovalResponse: N, sendMessage: S } = le(), {
+    aiChatSettings: { components: D, artifacts: W, headers: X }
+  } = oe(), M = X?.["x-emit-operations"] === "true", G = r.role === "user", H = (g || k) && l && r.role === "assistant", { processedParts: V, summaryTimings: Q, shouldShowInitialLoading: Y, shouldShowStreamDelayLoading: Z } = ce(r.parts, H, u), [x, j] = A(null), [ee, I] = A(!1), p = ue(null);
+  _(() => {
+    if (!x) {
+      I(!1), p.current && (clearTimeout(p.current), p.current = null);
+      return;
+    }
+    return I(!1), p.current && clearTimeout(p.current), p.current = window.setTimeout(() => {
+      I(!0);
+    }, 1e3), () => {
+      p.current && (clearTimeout(p.current), p.current = null);
+    };
+  }, [x]), _(() => {
+    x && (!l || r.parts.length > x.partCount) && j(null);
+  }, [x, l, r.parts.length]);
+  const $ = L(
+    () => r.parts.filter(
+      (a) => a.type === "data-artifact" && a.data?.type?.toLowerCase() === "citation"
     ),
-    [s.parts]
-  ), b = h(
-    () => Q(V, n ?? {}),
+    [r.parts]
+  ), O = L(
+    () => pe(de, n ?? {}),
     [n]
-  ), k = y(
-    (e, o) => {
-      p({
+  ), z = P(
+    (a, i) => {
+      f({
         eventName: "assistant_message_inline_link_opened",
         properties: {
-          title: o?.toString(),
-          url: e
+          title: i?.toString(),
+          url: a
         }
       });
     },
-    [p]
-  ), D = y(
-    (e, o) => {
-      p({
+    [f]
+  ), R = P(
+    (a, i) => {
+      f({
         eventName: "assistant_code_block_copied",
         properties: {
-          conversationId: x,
-          language: e,
-          code: o
+          conversationId: m,
+          language: a,
+          code: i
         }
       });
     },
-    [p, x]
-  ), v = y(
-    (e) => /* @__PURE__ */ t(
-      z,
+    [f, m]
+  ), E = P(
+    (a) => /* @__PURE__ */ e(
+      ie,
       {
-        text: e,
-        componentStyles: b,
-        onLinkClick: k,
-        onCodeCopy: D,
-        artifacts: w
+        text: a,
+        componentStyles: O,
+        onLinkClick: z,
+        onCodeCopy: R,
+        artifacts: $
       }
     ),
-    [b, k, D, w]
-  ), F = h(
-    () => R(
+    [O, z, R, $]
+  ), te = L(
+    () => b(
       "data-[role=user]:whitespace-pre-wrap mb-3 data-[role=user]:mb-0 [&[data-role=user]>p]:mb-0 max-w-full",
-      a
+      t
     ),
-    [a]
+    [t]
   );
-  return /* @__PURE__ */ l(J, { children: [
-    j.map((e, o) => {
-      const i = {
-        "data-role": s.role,
-        "data-type": e?.type === "data-component" ? e.data.type : e?.type,
-        ...L,
-        className: F
+  return /* @__PURE__ */ o(re, { children: [
+    V.map((a, i) => {
+      const h = {
+        "data-role": r.role,
+        "data-type": a?.type === "data-component" ? a.data.type : a?.type,
+        ...C,
+        className: te
       };
-      switch (e?.type) {
+      switch (a?.type) {
         case "text":
-          return /* @__PURE__ */ t(d, { ...i, children: I ? e.text : v(e.text || "") }, o);
+          return /* @__PURE__ */ e(v, { ...h, children: G ? a.text : E(a.text || "") }, i);
         case "data-component": {
-          const { type: m } = e.data;
-          switch (m) {
+          const { type: d } = a.data;
+          switch (d) {
             case "text":
-              return /* @__PURE__ */ t("div", { ...i, children: v(e.data.text || "") }, o);
+              return /* @__PURE__ */ e("div", { ...h, children: E(a.data.text || "") }, i);
             default: {
-              const g = e.data, { name: r, props: f } = g, c = _?.[r];
-              return /* @__PURE__ */ t(d, { ...i, children: /* @__PURE__ */ t(c ? S : ae, { name: r, props: f, componentDef: c }) }, `${r}-${o}`);
+              const T = a.data, { name: c, props: y } = T, w = D?.[c];
+              return /* @__PURE__ */ e(v, { ...h, children: /* @__PURE__ */ e(w ? q : Ie, { name: c, props: y, componentDef: w }) }, `${c}-${i}`);
             }
           }
         }
         case "data-artifact": {
-          const m = e.data, { name: g, type: r, artifactSummary: f } = m, c = $?.[r];
-          return /* @__PURE__ */ t(d, { ...i, children: /* @__PURE__ */ t(c ? S : oe, { name: r, props: f, componentDef: c }) }, `${g}-${o}`);
+          const d = a.data, { name: T, type: c, artifactSummary: y } = d, w = W?.[c];
+          return /* @__PURE__ */ e(v, { ...h, children: /* @__PURE__ */ e(w ? q : Ee, { name: c, props: y, componentDef: w }) }, `${T}-${i}`);
         }
         case "summary-group": {
-          const m = K.get(e.groupKey) || {
+          const d = Q.get(a.groupKey) || {
             isCompleted: !1
           };
-          return /* @__PURE__ */ t(d, { ...i, children: /* @__PURE__ */ t(
-            X,
+          return /* @__PURE__ */ e(v, { ...h, children: /* @__PURE__ */ e(
+            me,
             {
-              summaries: e.summaries || [],
-              isCompleted: m.isCompleted
+              summaries: a.summaries || [],
+              isCompleted: d.isCompleted
             }
-          ) }, `${e.groupKey}-${o}`);
+          ) }, `${a.groupKey}-${i}`);
         }
         default:
+          if (Se(a)) {
+            const d = a.approval?.id;
+            if (!(M || d)) return null;
+            const c = async (y = !0) => {
+              d && (j({ partCount: r.parts.length }), N({ id: d, approved: y }), await S(void 0, {
+                body: {
+                  conversationId: m
+                }
+              }));
+            };
+            return /* @__PURE__ */ e(
+              v,
+              {
+                ...h,
+                children: D?.IkpTool ? /* @__PURE__ */ e(
+                  he,
+                  {
+                    name: "IkpTool",
+                    props: { tool: a, approve: c, renderMarkdown: E },
+                    componentDef: D.IkpTool
+                  }
+                ) : /* @__PURE__ */ e(
+                  Le,
+                  {
+                    part: a,
+                    approve: c,
+                    isDebug: M
+                  }
+                )
+              },
+              a.toolCallId ?? `${a.type}-${i}`
+            );
+          }
           return null;
       }
     }),
-    A && /* @__PURE__ */ t(Y, {}),
-    B && /* @__PURE__ */ t(te, {})
+    Y && /* @__PURE__ */ e(fe, {}),
+    (Z || ee) && /* @__PURE__ */ e(Te, {})
   ] });
 };
 export {
-  Ce as EmbeddedChatMessagePart
+  We as EmbeddedChatMessagePart
 };

package/dist/styled/components/ui/recipes/button.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("class-variance-authority"),a=e.cva(["inline-flex","items-center","justify-center","align-middle","select-none","relative","whitespace-nowrap","appearance-none","rounded-md","leading-[1.2]","transition-all","duration-300","cursor-pointer","font-semibold","focus:outline-none","focus:z-base","focus-visible:ring","focus-visible:ring-gray-500","dark:focus-visible:ring-white-alpha-900","focus-visible:ring-2","disabled:opacity-40","disabled:cursor-not-allowed","disabled:shadow-none"],{variants:{variant:{solid:["bg-gray-100 dark:bg-white-alpha-100","text-gray-800 dark:text-white-alpha-950","hover:bg-gray-200 dark:hover:bg-white-alpha-200","hover:disabled:bg-gray-100 dark:hover:disabled:bg-white-alpha-100","active:bg-gray-300 dark:active:bg-white-alpha-400"],iconButton:["px-1 text-gray-500 text-md","hover:text-inkeep-primary-strong","dark:text-gray-dark-200","dark:hover:text-inkeep-expanded-primary-300"],ghost:["text-gray-800 dark:text-white-alpha-950","hover:bg-gray-100 dark:hover:bg-white-alpha-100","active:bg-gray-200 dark:active:bg-white-alpha-200"],outline:["border dark:border-white-alpha-200","text-gray-600 dark:text-gray-200","hover:bg-gray-50 dark:hover:bg-white-alpha-100","active:bg-gray-50 dark:active:bg-white-alpha-100"]},size:{sm:"h-8 min-w-8 text-sm px-3",md:"h-9 min-w-9 text-sm px-4",xs:"h-6 min-w-6 text-xs px-2"},preset:{neutralFilled:["bg-gray-1000 text-white hover:bg-gray-900 active:bg-gray-900","dark:bg-inkeep-expanded-primary-300 dark:text-gray-dark-950","dark:hover:bg-inkeep-expanded-primary-200","dark:active:bg-inkeep-expanded-primary-200"]}},defaultVariants:{size:"md"}});exports.button=a;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("class-variance-authority"),a=e.cva(["inline-flex","items-center","justify-center","align-middle","select-none","relative","whitespace-nowrap","appearance-none","rounded-md","leading-[1.2]","transition-all","duration-300","cursor-pointer","font-semibold","focus:outline-none","focus:z-base","focus-visible:ring","focus-visible:ring-gray-500","dark:focus-visible:ring-white-alpha-900","focus-visible:ring-2","disabled:opacity-40","disabled:cursor-not-allowed","disabled:shadow-none"],{variants:{variant:{solid:["bg-gray-100 dark:bg-white-alpha-100","text-gray-800 dark:text-white-alpha-950","hover:bg-gray-200 dark:hover:bg-white-alpha-200","hover:disabled:bg-gray-100 dark:hover:disabled:bg-white-alpha-100","active:bg-gray-300 dark:active:bg-white-alpha-400"],iconButton:["px-1 text-gray-500 text-md","hover:text-inkeep-primary-strong","dark:text-gray-dark-200","dark:hover:text-inkeep-expanded-primary-300"],ghost:["text-gray-800 dark:text-white-alpha-950","hover:bg-gray-100 dark:hover:bg-white-alpha-100","active:bg-gray-200 dark:active:bg-white-alpha-200"],outline:["border dark:border-white-alpha-200","text-gray-600 dark:text-gray-200","hover:bg-gray-50 dark:hover:bg-white-alpha-100","active:bg-gray-50 dark:active:bg-white-alpha-100"],primaryFilled:["bg-inkeep-expanded-primary-500 text-inkeep-primary-text-color-on-primary hover:bg-inkeep-expanded-primary-700 active:bg-inkeep-expanded-primary-700","dark:bg-inkeep-expanded-primary-300 dark:text-gray-dark-950","dark:hover:bg-inkeep-expanded-primary-200","dark:active:bg-inkeep-expanded-primary-200"]},size:{sm:"h-8 min-w-8 text-sm px-3",md:"h-9 min-w-9 text-sm px-4",xs:"h-6 min-w-6 text-xs px-2"},preset:{neutralFilled:["bg-gray-1000 text-white hover:bg-gray-900 active:bg-gray-900","dark:bg-inkeep-expanded-primary-300 dark:text-gray-dark-950","dark:hover:bg-inkeep-expanded-primary-200","dark:active:bg-inkeep-expanded-primary-200"]}},defaultVariants:{size:"md"}});exports.button=a;

package/dist/styled/components/ui/recipes/button.d.ts

@@ -1,6 +1,6 @@
 import { ClassProp } from 'class-variance-authority/types';
 export declare const button: (props?: ({
-    variant?: "solid" | "iconButton" | "ghost" | "outline" | null | undefined;
+    variant?: "solid" | "iconButton" | "ghost" | "outline" | "primaryFilled" | null | undefined;
     size?: "sm" | "md" | "xs" | null | undefined;
     preset?: "neutralFilled" | null | undefined;
 } & ClassProp) | undefined) => string;

package/dist/styled/components/ui/recipes/button.js

@@ -55,6 +55,12 @@ const r = e(
           "text-gray-600 dark:text-gray-200",
           "hover:bg-gray-50 dark:hover:bg-white-alpha-100",
           "active:bg-gray-50 dark:active:bg-white-alpha-100"
+        ],
+        primaryFilled: [
+          "bg-inkeep-expanded-primary-500 text-inkeep-primary-text-color-on-primary hover:bg-inkeep-expanded-primary-700 active:bg-inkeep-expanded-primary-700",
+          "dark:bg-inkeep-expanded-primary-300 dark:text-gray-dark-950",
+          "dark:hover:bg-inkeep-expanded-primary-200",
+          "dark:active:bg-inkeep-expanded-primary-200"
         ]
       },
       size: {

package/dist/styled/inkeep.css.cjs

@@ -1456,6 +1456,9 @@ video {
 .bg-inherit {
   background-color: inherit;
 }
+.bg-inkeep-expanded-primary-500 {
+  background-color: var(--ikp-color-inkeep-expanded-primary-500);
+}
 .bg-inkeep-primary-medium {
   background-color: var(--ikp-color-inkeep-primary-medium);
 }
@@ -1704,6 +1707,9 @@ video {
 .lowercase {
   text-transform: lowercase;
 }
+.capitalize {
+  text-transform: capitalize;
+}
 .leading-4 {
   line-height: 1rem;
 }
@@ -2171,6 +2177,17 @@ slot {
   position: absolute;
 }
 
+.before\\:inset-x-0::before {
+  content: var(--tw-content);
+  left: 0px;
+  right: 0px;
+}
+
+.before\\:-top-px::before {
+  content: var(--tw-content);
+  top: -1px;
+}
+
 .before\\:left-0::before {
   content: var(--tw-content);
   left: 0px;
@@ -2181,6 +2198,11 @@ slot {
   top: 0px;
 }
 
+.before\\:z-10::before {
+  content: var(--tw-content);
+  z-index: 10;
+}
+
 .before\\:z-hide::before {
   content: var(--tw-content);
   z-index: var(--ikp-z-index-hide);
@@ -2242,6 +2264,11 @@ slot {
   background-repeat: no-repeat;
 }
 
+.before\\:content-\\[\\"\\"\\]::before {
+  --tw-content: "";
+  content: var(--tw-content);
+}
+
 .before\\:\\[background-position\\:0_0\\]::before {
   content: var(--tw-content);
   background-position: 0 0;
@@ -2252,6 +2279,11 @@ slot {
   background-size: cover;
 }
 
+.after\\:pointer-events-none::after {
+  content: var(--tw-content);
+  pointer-events: none;
+}
+
 .after\\:invisible::after {
   content: var(--tw-content);
   visibility: hidden;
@@ -2262,6 +2294,12 @@ slot {
   position: absolute;
 }
 
+.after\\:inset-x-0::after {
+  content: var(--tw-content);
+  left: 0px;
+  right: 0px;
+}
+
 .after\\:bottom-0::after {
   content: var(--tw-content);
   bottom: 0px;
@@ -2292,6 +2330,11 @@ slot {
   top: 100%;
 }
 
+.after\\:z-10::after {
+  content: var(--tw-content);
+  z-index: 10;
+}
+
 .after\\:z-base::after {
   content: var(--tw-content);
   z-index: var(--ikp-z-index-base);
@@ -2448,6 +2491,10 @@ slot {
   background-color: var(--ikp-color-gray-900);
 }
 
+.active\\:bg-inkeep-expanded-primary-700:active {
+  background-color: var(--ikp-color-inkeep-expanded-primary-700);
+}
+
 .active\\:transition-transform:active {
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2570,6 +2617,10 @@ slot {
   max-height: 0px;
 }
 
+.data-\\[expanded\\=true\\]\\:max-h-48[data-expanded="true"] {
+  max-height: 12rem;
+}
+
 .data-\\[composite\\]\\:w-full[data-composite] {
   width: 100%;
 }
@@ -2744,6 +2795,10 @@ slot {
   justify-content: flex-end;
 }
 
+.data-\\[expanded\\=true\\]\\:overflow-y-auto[data-expanded="true"] {
+  overflow-y: auto;
+}
+
 .data-\\[role\\=user\\]\\:whitespace-pre-wrap[data-role="user"] {
   white-space: pre-wrap;
 }
@@ -2808,6 +2863,10 @@ slot {
   padding-bottom: 0.5rem;
 }
 
+.data-\\[expanded\\=true\\]\\:pb-3[data-expanded="true"] {
+  padding-bottom: 0.75rem;
+}
+
 .data-\\[has-content\\]\\:pb-2[data-has-content] {
   padding-bottom: 0.5rem;
 }
@@ -2935,6 +2994,11 @@ slot {
   --start-color: var(--ikp-color-inkeep-expanded-primary-50);
 }
 
+.data-\\[expanded\\=false\\]\\:before\\:opacity-0[data-expanded="false"]::before {
+  content: var(--tw-content);
+  opacity: 0;
+}
+
 .data-\\[required\\]\\:after\\:absolute[data-required]::after {
   content: var(--tw-content);
   position: absolute;
@@ -2997,6 +3061,11 @@ slot {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
+.data-\\[expanded\\=false\\]\\:after\\:opacity-0[data-expanded="false"]::after {
+  content: var(--tw-content);
+  opacity: 0;
+}
+
 .data-\\[required\\]\\:after\\:\\[content\\:\\"\\*\\"\\][data-required]::after {
   content: "*";
 }
@@ -3019,6 +3088,11 @@ slot {
   background-image: conic-gradient(transparent,var(--ikp-color-inkeep-expanded-primary-600),transparent 30%);
 }
 
+.group[data-expanded="true"] .group-data-\\[expanded\\=true\\]\\:rotate-180 {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .group[data-expanded="true"] .group-data-\\[expanded\\=true\\]\\:rotate-90 {
   --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -3107,6 +3181,10 @@ slot {
   background-color: var(--ikp-color-gray-900);
 }
 
+.hover\\:bg-inkeep-expanded-primary-700:hover:not(:disabled) {
+  background-color: var(--ikp-color-inkeep-expanded-primary-700);
+}
+
 .hover\\:bg-inkeep-primary-light-subtle:hover:not(:disabled) {
   background-color: var(--ikp-color-inkeep-primary-light-subtle);
 }