@arcadeai/design-system 1.3.0 → 1.4.0

package/dist/components/ui/organisms/toolkit-picker/toolkit-picker.js

@@ -1,14 +1,14 @@
 import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { X as n, Package as I, Wrench as P, CheckSquare as V, FilterIcon as M, Search as Q } from "lucide-react";
-import { Arcade as W } from "../../../../assets/icons/arcade.js";
-import { getToolkitIconByName as $, getToolIconByToolkitName as E } from "../../../../assets/icons/utils.js";
-import { Badge as k } from "../../atoms/badge.js";
-import { Button as c } from "../../atoms/button.js";
-import { Dialog as H, DialogTrigger as L, DialogContent as O, DialogHeader as X, DialogTitle as Y, DialogDescription as G, DialogClose as v, DialogFooter as J } from "../../atoms/dialog.js";
+import { X as m, Package as B, Wrench as P, CheckSquare as V, FilterIcon as M, Search as Q } from "lucide-react";
+import { Badge as v } from "../../atoms/badge.js";
+import { Button as p } from "../../atoms/button.js";
+import { Dialog as W, DialogTrigger as $, DialogContent as E, DialogHeader as H, DialogTitle as L, DialogDescription as O, DialogClose as N, DialogFooter as X } from "../../atoms/dialog.js";
+import { Arcade as Y } from "../../atoms/icons/arcade.js";
+import { getToolkitIcon as G, getToolIconByToolkitName as J } from "../../atoms/icons/utils.js";
 import { MobileTooltipProvider as K } from "../../atoms/mobile-tooltip.js";
-import { Tabs as R, TabsList as U, TabsTrigger as N, TabsContent as y } from "../../atoms/tabs.js";
-import { EmptyState as w } from "../../molecules/empty-state.js";
-import "../../../../toolkit-card-GhM_oj4G.js";
+import { Tabs as R, TabsList as U, TabsTrigger as y, TabsContent as w } from "../../atoms/tabs.js";
+import { EmptyState as _ } from "../../molecules/empty-state.js";
+import "../../../../toolkit-card-UG1sZ0Le.js";
 import { ToolCard as Z } from "../../molecules/tool-card.js";
 import { useToolkitPicker as ee } from "./hooks/use-toolkit-picker.js";
 import "../../atoms/chart.js";
@@ -21,49 +21,49 @@ import { FooterSummary as te } from "./components/footer-summary.js";
 import { SearchInput as ae } from "./components/search-input.js";
 import { SelectButton as le } from "./components/select-button.js";
 import { ToolkitCardWithSelection as re } from "./components/toolkit-card-with-selection.js";
-const ze = (_) => {
+const ze = (T) => {
   const {
-    description: T = "Select toolkits and tools",
-    children: C,
-    selectionMode: l = "multi",
-    onSelectionChange: h
-  } = _, {
+    description: C = "Select toolkits and tools",
+    children: S,
+    selectionMode: r = "multi",
+    onSelectionChange: u
+  } = T, {
     state: {
-      selectedToolkits: u,
-      selectedTools: r,
-      activeTab: g,
-      filteredToolkits: o,
-      filteredTools: d,
-      toolkitFilter: m,
-      searchQuery: x
+      selectedToolkits: g,
+      selectedTools: i,
+      activeTab: x,
+      filteredToolkits: s,
+      filteredTools: n,
+      toolkitFilter: c,
+      searchQuery: f
     },
-    setActiveTab: i,
-    toggleToolkit: S,
-    toggleTool: z,
-    clearSelections: q,
-    clearSearchQuery: f,
-    clearFilter: A,
-    selectAll: D,
-    commitSelections: j,
-    restoreCommittedState: F,
+    setActiveTab: d,
+    toggleToolkit: z,
+    toggleTool: q,
+    clearSelections: A,
+    clearSearchQuery: k,
+    clearFilter: D,
+    selectAll: j,
+    commitSelections: F,
+    restoreCommittedState: I,
     setToolkitFilter: b
   } = ee();
   return /* @__PURE__ */ e(K, { children: /* @__PURE__ */ a(
-    H,
+    W,
     {
       onOpenChange: (t) => {
-        t && (F(), f(), i("toolkits"));
+        t && (I(), k(), d("toolkits"));
       },
       children: [
-        /* @__PURE__ */ e(L, { asChild: !0, children: C }),
+        /* @__PURE__ */ e($, { asChild: !0, children: S }),
         /* @__PURE__ */ a(
-          O,
+          E,
           {
             className: "flex max-h-[80vh] min-h-80 w-[95vw] max-w-xl flex-col gap-2 p-0 sm:max-w-2xl md:max-w-3xl lg:max-w-4xl xl:max-w-5xl 2xl:max-w-7xl",
             "data-testid": "toolkit-picker-dialog",
             showCloseButton: !1,
             children: [
-              /* @__PURE__ */ a(X, { className: "shrink-0 p-4 pb-0 sm:p-6 sm:pb-0", children: [
+              /* @__PURE__ */ a(H, { className: "shrink-0 p-4 pb-0 sm:p-6 sm:pb-0", children: [
                 /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
                   /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
                     /* @__PURE__ */ a("div", { className: "relative flex size-10 items-center justify-center overflow-hidden rounded-xl shadow-lg ring-1 ring-black/5 sm:size-12", children: [
@@ -81,21 +81,21 @@ const ze = (_) => {
                           className: "pointer-events-none absolute inset-0 z-10 bg-[repeating-conic-gradient(from_0deg_at_100%_0%,rgba(0,0,0,0.25)_0deg_1deg,transparent_1deg_12deg)] opacity-30"
                         }
                       ),
-                      /* @__PURE__ */ e("span", { className: "relative z-20", children: /* @__PURE__ */ e(W, { className: "size-5 sm:size-7" }) })
+                      /* @__PURE__ */ e("span", { className: "relative z-20", children: /* @__PURE__ */ e(Y, { className: "size-5 sm:size-7" }) })
                     ] }),
                     /* @__PURE__ */ a("div", { className: "ml-1 text-left", children: [
-                      /* @__PURE__ */ e(Y, { className: "font-bold text-lg sm:text-xl", children: "Choose Your Tools" }),
-                      /* @__PURE__ */ e(G, { className: "hidden sm:block", children: T })
+                      /* @__PURE__ */ e(L, { className: "font-bold text-lg sm:text-xl", children: "Choose Your Tools" }),
+                      /* @__PURE__ */ e(O, { className: "hidden sm:block", children: C })
                     ] })
                   ] }),
-                  /* @__PURE__ */ e(v, { asChild: !0, children: /* @__PURE__ */ e(
-                    c,
+                  /* @__PURE__ */ e(N, { asChild: !0, children: /* @__PURE__ */ e(
+                    p,
                     {
                       className: "h-8 w-8 rounded-full p-0",
                       "data-testid": "toolkit-picker-close",
                       size: "sm",
                       variant: "ghost",
-                      children: /* @__PURE__ */ e(n, { className: "h-4 w-4" })
+                      children: /* @__PURE__ */ e(m, { className: "h-4 w-4" })
                     }
                   ) })
                 ] }),
@@ -105,27 +105,27 @@ const ze = (_) => {
                 R,
                 {
                   className: "flex min-h-0 flex-1 flex-col",
-                  onValueChange: (t) => i(t),
-                  value: g,
+                  onValueChange: (t) => d(t),
+                  value: x,
                   children: [
                     /* @__PURE__ */ a("div", { className: "shrink-0 space-y-2 px-4 sm:space-y-3 sm:px-6", children: [
                       /* @__PURE__ */ a("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
                         /* @__PURE__ */ a(U, { className: "h-10 w-auto gap-1 rounded-md border border-neutral-200 bg-white/60 p-1 shadow-sm dark:border-neutral-800 dark:bg-neutral-900/60", children: [
                           /* @__PURE__ */ a(
-                            N,
+                            y,
                             {
                               className: "h-8 rounded-md px-3 font-medium text-neutral-600 text-sm hover:bg-black/5 data-[state=active]:bg-white data-[state=active]:text-neutral-900 dark:text-neutral-300 dark:data-[state=active]:bg-neutral-800 dark:data-[state=active]:text-white dark:hover:bg-white/10",
                               "data-testid": "toolkits-tab",
                               value: "toolkits",
                               children: [
-                                /* @__PURE__ */ e(I, { className: "h-4 w-4" }),
+                                /* @__PURE__ */ e(B, { className: "h-4 w-4" }),
                                 /* @__PURE__ */ e("span", { children: "Toolkits" }),
-                                /* @__PURE__ */ e("span", { className: "ml-1 rounded-full bg-emerald-300 px-1.5 py-0.5 text-emerald-900 text-xs dark:bg-emerald-500/25 dark:text-emerald-200", children: o.size })
+                                /* @__PURE__ */ e("span", { className: "ml-1 rounded-full bg-emerald-300 px-1.5 py-0.5 text-emerald-900 text-xs dark:bg-emerald-500/25 dark:text-emerald-200", children: s.size })
                               ]
                             }
                           ),
                           /* @__PURE__ */ a(
-                            N,
+                            y,
                             {
                               className: "h-8 rounded-md px-3 font-medium text-neutral-600 text-sm hover:bg-black/5 data-[state=active]:bg-white data-[state=active]:text-neutral-900 dark:text-neutral-300 dark:data-[state=active]:bg-neutral-800 dark:data-[state=active]:text-white dark:hover:bg-white/10",
                               "data-testid": "tools-tab",
@@ -133,39 +133,39 @@ const ze = (_) => {
                               children: [
                                 /* @__PURE__ */ e(P, { className: "h-4 w-4" }),
                                 /* @__PURE__ */ e("span", { children: "Tools" }),
-                                /* @__PURE__ */ e("span", { className: "ml-1 rounded-full bg-emerald-300 px-1.5 py-0.5 text-emerald-900 text-xs dark:bg-emerald-500/25 dark:text-emerald-200", children: d.size })
+                                /* @__PURE__ */ e("span", { className: "ml-1 rounded-full bg-emerald-300 px-1.5 py-0.5 text-emerald-900 text-xs dark:bg-emerald-500/25 dark:text-emerald-200", children: n.size })
                               ]
                             }
                           )
                         ] }),
                         /* @__PURE__ */ a("div", { className: "hidden items-center gap-2 sm:flex", children: [
-                          (u.size > 0 || r.size > 0) && /* @__PURE__ */ a(
-                            c,
+                          (g.size > 0 || i.size > 0) && /* @__PURE__ */ a(
+                            p,
                             {
                               className: "h-8 border-neutral-300 text-neutral-700 hover:bg-neutral-50 hover:text-neutral-900 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-900/40 dark:hover:text-neutral-100",
                               "data-testid": "clear-selections",
-                              onClick: q,
+                              onClick: A,
                               size: "sm",
                               variant: "outline",
                               children: [
-                                /* @__PURE__ */ e(n, { className: "h-4 w-4 text-red-600 dark:text-red-400" }),
+                                /* @__PURE__ */ e(m, { className: "h-4 w-4 text-red-600 dark:text-red-400" }),
                                 "Clear All"
                               ]
                             }
                           ),
-                          l === "multi" && (() => {
-                            const t = g === "toolkits" ? Array.from(o).flatMap(
-                              (s) => s.tools.map((B) => B.fully_qualified_name)
-                            ) : Array.from(d).map(
-                              (s) => s.fully_qualified_name
+                          r === "multi" && (() => {
+                            const t = x === "toolkits" ? Array.from(s).flatMap(
+                              (l) => l.tools.map((h) => h.fully_qualified_name)
+                            ) : Array.from(n).map(
+                              (l) => l.fully_qualified_name
                             );
-                            return t.length > 0 && t.every((s) => r.has(s)) ? null : /* @__PURE__ */ a(
-                              c,
+                            return t.length > 0 && t.every((l) => i.has(l)) ? null : /* @__PURE__ */ a(
+                              p,
                               {
                                 className: "h-8",
                                 "data-testid": "select-all",
                                 onClick: () => {
-                                  D(t);
+                                  j(t);
                                 },
                                 size: "sm",
                                 variant: "outline",
@@ -179,8 +179,8 @@ const ze = (_) => {
                         ] })
                       ] }),
                       /* @__PURE__ */ a("div", { className: "flex flex-wrap items-center gap-2", children: [
-                        m && /* @__PURE__ */ a(
-                          k,
+                        c && /* @__PURE__ */ a(
+                          v,
                           {
                             className: "h-8 border border-purple-200 bg-purple-50 pr-1.5 pl-2 text-purple-800 shadow-sm ring-1 ring-purple-200/50 dark:border-purple-800/60 dark:bg-purple-950/40 dark:text-purple-200 dark:ring-purple-800/30",
                             variant: "secondary",
@@ -194,16 +194,19 @@ const ze = (_) => {
                                 {
                                   className: "inline-flex h-full items-center gap-1.5",
                                   "data-testid": "filter-badge",
-                                  onClick: () => i("toolkits"),
+                                  onClick: () => d("toolkits"),
                                   type: "button",
                                   children: [
                                     (() => {
-                                      const t = $(
-                                        m
-                                      );
-                                      return /* @__PURE__ */ e(t, { className: "h-3.5 w-3.5" });
+                                      const t = Array.from(
+                                        s
+                                      ).find((l) => l.name === c), o = G({
+                                        metadataIcon: t?.metadata?.icon,
+                                        toolkitName: c
+                                      });
+                                      return /* @__PURE__ */ e(o, { className: "h-3.5 w-3.5" });
                                     })(),
-                                    /* @__PURE__ */ e("span", { className: "font-medium text-xs", children: m })
+                                    /* @__PURE__ */ e("span", { className: "font-medium text-xs", children: c })
                                   ]
                                 }
                               ),
@@ -213,16 +216,16 @@ const ze = (_) => {
                                   "aria-label": "Clear toolkit filter",
                                   className: "ml-1 inline-flex h-5 w-5 items-center justify-center rounded-full bg-purple-100 text-red-600 hover:bg-red-100 hover:text-red-700 focus-visible:ring-[3px] focus-visible:ring-red-200 dark:bg-purple-800/60 dark:text-red-400 dark:hover:bg-red-950/40 dark:hover:text-red-300",
                                   "data-testid": "clear-filter",
-                                  onClick: A,
+                                  onClick: D,
                                   type: "button",
-                                  children: /* @__PURE__ */ e(n, { className: "h-3.5 w-3.5" })
+                                  children: /* @__PURE__ */ e(m, { className: "h-3.5 w-3.5" })
                                 }
                               )
                             ]
                           }
                         ),
-                        x && /* @__PURE__ */ a(
-                          k,
+                        f && /* @__PURE__ */ a(
+                          v,
                           {
                             className: "h-8 border border-teal-200 bg-teal-50 pr-1.5 pl-2 text-teal-800 shadow-sm ring-1 ring-teal-200/50 dark:border-teal-800/60 dark:bg-teal-950/40 dark:text-teal-200 dark:ring-teal-800/30",
                             variant: "secondary",
@@ -233,7 +236,7 @@ const ze = (_) => {
                               ] }),
                               /* @__PURE__ */ a("span", { className: "font-medium text-xs", children: [
                                 '"',
-                                x,
+                                f,
                                 '"'
                               ] }),
                               /* @__PURE__ */ e(
@@ -242,9 +245,9 @@ const ze = (_) => {
                                   "aria-label": "Clear search query",
                                   className: "ml-1 inline-flex h-5 w-5 items-center justify-center rounded-full bg-teal-100 text-red-600 hover:bg-red-100 hover:text-red-700 focus-visible:ring-[3px] focus-visible:ring-red-200 dark:bg-teal-800/60 dark:text-red-400 dark:hover:bg-red-950/40 dark:hover:text-red-300",
                                   "data-testid": "clear-search",
-                                  onClick: f,
+                                  onClick: k,
                                   type: "button",
-                                  children: /* @__PURE__ */ e(n, { className: "h-3.5 w-3.5" })
+                                  children: /* @__PURE__ */ e(m, { className: "h-3.5 w-3.5" })
                                 }
                               )
                             ]
@@ -253,14 +256,14 @@ const ze = (_) => {
                       ] })
                     ] }),
                     /* @__PURE__ */ e(
-                      y,
+                      w,
                       {
                         className: "min-h-0 flex-1 overflow-y-auto px-4 py-2 sm:px-6",
                         "data-testid": "content-area",
                         value: "toolkits",
                         children: /* @__PURE__ */ a("div", { className: "space-y-3", children: [
-                          o.size === 0 && /* @__PURE__ */ e(
-                            w,
+                          s.size === 0 && /* @__PURE__ */ e(
+                            _,
                             {
                               "data-testid": "empty-toolkits",
                               description: "Try a different search term",
@@ -272,21 +275,21 @@ const ze = (_) => {
                             {
                               className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3",
                               "data-testid": "toolkits-grid",
-                              children: Array.from(o).map((t) => /* @__PURE__ */ e(
+                              children: Array.from(s).map((t) => /* @__PURE__ */ e(
                                 re,
                                 {
                                   onSelect: () => {
-                                    if (l === "single") {
-                                      i("tools"), b(t.name);
+                                    if (r === "single") {
+                                      d("tools"), b(t.name);
                                       return;
                                     }
-                                    S(t);
+                                    z(t);
                                   },
                                   onView: () => {
-                                    b(t.name), i("tools");
+                                    b(t.name), d("tools");
                                   },
-                                  selectedTools: new Set(r.keys()),
-                                  selectionMode: l,
+                                  selectedTools: new Set(i.keys()),
+                                  selectionMode: r,
                                   toolkit: t
                                 },
                                 t.name
@@ -297,14 +300,14 @@ const ze = (_) => {
                       }
                     ),
                     /* @__PURE__ */ e(
-                      y,
+                      w,
                       {
                         className: "min-h-0 flex-1 overflow-y-auto px-4 py-2 sm:px-6",
                         "data-testid": "content-area",
                         value: "tools",
                         children: /* @__PURE__ */ a("div", { className: "space-y-3", children: [
-                          d.size === 0 && /* @__PURE__ */ e(
-                            w,
+                          n.size === 0 && /* @__PURE__ */ e(
+                            _,
                             {
                               "data-testid": "empty-tools",
                               description: "Try a different search term",
@@ -316,21 +319,28 @@ const ze = (_) => {
                             {
                               className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3",
                               "data-testid": "tools-grid",
-                              children: Array.from(d).map((t) => /* @__PURE__ */ e(
-                                Z,
-                                {
-                                  "data-testid": `tool-card-${t.fully_qualified_name}`,
-                                  description: t.description,
-                                  fully_qualified_name: t.fully_qualified_name,
-                                  hideCheckbox: l === "single",
-                                  Icon: E(t.toolkit.name),
-                                  isSelected: r.has(t.fully_qualified_name),
-                                  name: t.name,
-                                  onSelect: () => z(t),
-                                  toolkitName: t.toolkit.name
-                                },
-                                t.fully_qualified_name
-                              ))
+                              children: Array.from(n).map((t) => {
+                                const l = Array.from(s).find(
+                                  (h) => h.name === t.toolkit.name
+                                )?.metadata?.icon ?? J(t.toolkit.name);
+                                return /* @__PURE__ */ e(
+                                  Z,
+                                  {
+                                    "data-testid": `tool-card-${t.fully_qualified_name}`,
+                                    description: t.description,
+                                    fully_qualified_name: t.fully_qualified_name,
+                                    hideCheckbox: r === "single",
+                                    Icon: l,
+                                    isSelected: i.has(
+                                      t.fully_qualified_name
+                                    ),
+                                    name: t.name,
+                                    onSelect: () => q(t),
+                                    toolkitName: t.toolkit.name
+                                  },
+                                  t.fully_qualified_name
+                                );
+                              })
                             }
                           )
                         ] })
@@ -339,15 +349,15 @@ const ze = (_) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ e(J, { className: "shrink-0 border-t bg-white px-4 py-3 sm:px-6 sm:py-4 dark:bg-neutral-950", children: /* @__PURE__ */ a(
+              /* @__PURE__ */ e(X, { className: "shrink-0 border-t bg-white px-4 py-3 sm:px-6 sm:py-4 dark:bg-neutral-950", children: /* @__PURE__ */ a(
                 "div",
                 {
-                  className: `${l === "single" ? "sm:justify-end" : "sm:justify-between"} flex w-full flex-col gap-3 sm:flex-row sm:items-center`,
+                  className: `${r === "single" ? "sm:justify-end" : "sm:justify-between"} flex w-full flex-col gap-3 sm:flex-row sm:items-center`,
                   children: [
-                    l === "multi" && /* @__PURE__ */ e(te, {}),
+                    r === "multi" && /* @__PURE__ */ e(te, {}),
                     /* @__PURE__ */ a("div", { className: "mt-2 flex gap-2 sm:mt-0 sm:gap-2", children: [
-                      /* @__PURE__ */ e(v, { asChild: !0, children: /* @__PURE__ */ e(
-                        c,
+                      /* @__PURE__ */ e(N, { asChild: !0, children: /* @__PURE__ */ e(
+                        p,
                         {
                           className: "flex-1 sm:flex-none",
                           "data-testid": "cancel-button",
@@ -361,22 +371,22 @@ const ze = (_) => {
                         {
                           className: "flex-1 sm:flex-none",
                           onCommit: () => {
-                            j(), h && h({
-                              selectedToolkits: Array.from(u.keys()),
-                              selectedTools: Array.from(r.keys())
+                            F(), u && u({
+                              selectedToolkits: Array.from(g.keys()),
+                              selectedTools: Array.from(i.keys())
                             });
                             const t = document.querySelector(
                               '[data-testid="toolkit-picker-dialog"]'
                             );
                             if (t) {
-                              const p = t.querySelector(
+                              const o = t.querySelector(
                                 '[data-testid="toolkit-picker-close"]'
                               );
-                              p && p.click();
+                              o && o.click();
                             }
                           },
-                          selectedCount: r.size,
-                          selectionMode: l
+                          selectedCount: i.size,
+                          selectionMode: r
                         }
                       )
                     ] })