@arcadeai/design-system 2.1.0 → 2.3.0

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

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

package/dist/components/ui/molecules/toolkit-selection-summary.js

@@ -7,7 +7,7 @@ import "../../../react-resizable-panels.browser-DggUboAp.js";
 import "../atoms/sidebar.js";
 import "react";
 import "../atoms/table.js";
-import "../../../toolkit-card-DgjPGtsJ.js";
+import "../../../toolkit-card-BWuG_NJi.js";
 import "./tool-card.js";
 import { getToolkitIcon as z } from "../atoms/icons/utils.js";
 import "../organisms/toolkit-picker/hooks/use-toolkit-picker.js";

package/dist/components/ui/organisms/toolkit-picker/components/action-buttons.d.ts

@@ -0,0 +1,6 @@
+import { SelectionMode } from '../index';
+type ActionButtonsProps = {
+    selectionMode: SelectionMode;
+};
+export declare function ActionButtons({ selectionMode }: ActionButtonsProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,54 @@
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { X as v, CheckSquare as x } from "lucide-react";
+import { Button as s } from "../../../atoms/button.js";
+import { useToolkitPicker as b } from "../hooks/use-toolkit-picker.js";
+function y({ selectionMode: o }) {
+  const {
+    state: {
+      selectedToolkits: i,
+      selectedTools: a,
+      activeTab: n,
+      filteredToolkits: c,
+      filteredTools: d
+    },
+    clearSelections: m,
+    selectAll: u
+  } = b(), h = i.size > 0 || a.size > 0, t = n === "toolkits" ? Array.from(c).flatMap(
+    (e) => e.tools.map((k) => k.fully_qualified_name)
+  ) : Array.from(d).map((e) => e.fully_qualified_name), f = t.length > 0 && t.every((e) => a.has(e));
+  return /* @__PURE__ */ l("div", { className: "hidden items-center gap-2 sm:flex", children: [
+    h && /* @__PURE__ */ l(
+      s,
+      {
+        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: m,
+        size: "sm",
+        variant: "outline",
+        children: [
+          /* @__PURE__ */ r(v, { className: "h-4 w-4 text-red-600 dark:text-red-400" }),
+          "Clear All"
+        ]
+      }
+    ),
+    o === "multi" && !f && /* @__PURE__ */ l(
+      s,
+      {
+        className: "h-8",
+        "data-testid": "select-all",
+        onClick: () => {
+          u(t);
+        },
+        size: "sm",
+        variant: "outline",
+        children: [
+          /* @__PURE__ */ r(x, { className: "h-4 w-4" }),
+          "Select all"
+        ]
+      }
+    )
+  ] });
+}
+export {
+  y as ActionButtons
+};

package/dist/components/ui/organisms/toolkit-picker/components/filter-badges.d.ts

@@ -0,0 +1 @@
+export declare function FilterBadges(): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,92 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { FilterIcon as u, X as l, Search as x } from "lucide-react";
+import { Badge as i } from "../../../atoms/badge.js";
+import { getToolkitIcon as b } from "../../../atoms/icons/utils.js";
+import { useToolkitPicker as h } from "../hooks/use-toolkit-picker.js";
+function y() {
+  const {
+    state: { toolkitFilter: t, searchQuery: a, filteredToolkits: d },
+    setActiveTab: n,
+    clearFilter: s,
+    clearSearchQuery: o
+  } = h();
+  return t || a ? /* @__PURE__ */ r("div", { className: "mb-2 flex flex-wrap items-center gap-2", children: [
+    t && /* @__PURE__ */ r(
+      i,
+      {
+        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",
+        children: [
+          /* @__PURE__ */ r("span", { className: "mr-1.5 inline-flex items-center gap-1 rounded-full bg-purple-100 px-1.5 py-0.5 text-[10px] text-purple-700 dark:bg-purple-800/60 dark:text-purple-200", children: [
+            /* @__PURE__ */ e(u, { className: "h-3 w-3" }),
+            "Filter"
+          ] }),
+          /* @__PURE__ */ r(
+            "button",
+            {
+              className: "inline-flex h-full items-center gap-1.5",
+              "data-testid": "filter-badge",
+              onClick: () => n("toolkits"),
+              type: "button",
+              children: [
+                (() => {
+                  const c = Array.from(d).find(
+                    (m) => m.name === t
+                  ), p = b({
+                    metadataIcon: c?.metadata?.icon,
+                    toolkitName: t
+                  });
+                  return /* @__PURE__ */ e(p, { className: "h-3.5 w-3.5" });
+                })(),
+                /* @__PURE__ */ e("span", { className: "font-medium text-xs", children: t })
+              ]
+            }
+          ),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              "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: s,
+              type: "button",
+              children: /* @__PURE__ */ e(l, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ]
+      }
+    ),
+    a && /* @__PURE__ */ r(
+      i,
+      {
+        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",
+        children: [
+          /* @__PURE__ */ r("span", { className: "mr-1.5 inline-flex items-center gap-1 rounded-full bg-teal-100 px-1.5 py-0.5 text-[10px] text-teal-700 dark:bg-teal-800/60 dark:text-teal-200", children: [
+            /* @__PURE__ */ e(x, { className: "h-3 w-3" }),
+            "Search"
+          ] }),
+          /* @__PURE__ */ r("span", { className: "font-medium text-xs", children: [
+            '"',
+            a,
+            '"'
+          ] }),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              "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: o,
+              type: "button",
+              children: /* @__PURE__ */ e(l, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ]
+      }
+    )
+  ] }) : null;
+}
+export {
+  y as FilterBadges
+};

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

@@ -1,35 +1,69 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { Search as i } from "lucide-react";
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { Search as y } from "lucide-react";
+import { useRef as T } from "react";
 import "../../../atoms/mobile-tooltip.js";
 import "../../../atoms/chart.js";
-import { Input as s } from "../../../atoms/input.js";
+import { Input as k } from "../../../atoms/input.js";
 import "../../../../../react-resizable-panels.browser-DggUboAp.js";
 import "../../../atoms/sidebar.js";
-import "react";
 import "../../../atoms/table.js";
-import "../../../../../toolkit-card-DgjPGtsJ.js";
+import "../../../../../toolkit-card-BWuG_NJi.js";
 import "../../../molecules/tool-card.js";
 import "../../../../../metadata/toolkits.js";
-import { useToolkitPicker as m } from "../hooks/use-toolkit-picker.js";
-function k() {
-  const {
-    state: { searchQuery: r },
-    setSearchQuery: e
-  } = m();
-  return /* @__PURE__ */ a("div", { className: "relative flex-1", children: [
-    /* @__PURE__ */ t(i, { className: "-translate-y-1/2 absolute top-1/2 left-3.5 size-4 text-gray-400" }),
-    /* @__PURE__ */ t(
-      s,
+import { useToolkitPicker as g } from "../hooks/use-toolkit-picker.js";
+function z() {
+  const r = T(null), {
+    state: {
+      searchQuery: o,
+      activeTab: i,
+      filteredToolkits: s,
+      filteredTools: l,
+      selectionMode: a
+    },
+    setSearchQuery: n,
+    toggleToolkit: c,
+    toggleTool: u,
+    setActiveTab: m,
+    setToolkitFilter: f
+  } = g(), p = () => {
+    const t = Array.from(s)[0];
+    if (t) {
+      if (a === "single") {
+        f(t.name), m("tools");
+        return;
+      }
+      c(t);
+    }
+  }, h = () => {
+    const t = Array.from(l)[0];
+    t && u(t);
+  };
+  return /* @__PURE__ */ d("div", { className: "relative flex-1", children: [
+    /* @__PURE__ */ e(y, { className: "-translate-y-1/2 absolute top-1/2 left-3.5 size-4 text-gray-400" }),
+    /* @__PURE__ */ e(
+      k,
       {
+        "aria-label": "Search toolkits and tools",
+        autoFocus: !0,
         className: "h-9 pl-10",
         "data-testid": "search-input",
-        onChange: (o) => e(o.target.value),
+        onChange: (t) => n(t.target.value),
+        onKeyDown: (t) => {
+          if (!(t.key !== "Enter" || !(o.trim().length > 0))) {
+            if (t.preventDefault(), t.stopPropagation(), i === "toolkits") {
+              p();
+              return;
+            }
+            h();
+          }
+        },
         placeholder: "Search toolkits and tools",
-        value: r
+        ref: r,
+        value: o
       }
     )
   ] });
 }
 export {
-  k as SearchInput
+  z as SearchInput
 };

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

@@ -7,7 +7,7 @@ import "../../../../../react-resizable-panels.browser-DggUboAp.js";
 import "../../../atoms/sidebar.js";
 import "react";
 import "../../../atoms/table.js";
-import "../../../../../toolkit-card-DgjPGtsJ.js";
+import "../../../../../toolkit-card-BWuG_NJi.js";
 import "../../../molecules/tool-card.js";
 import "../../../../../metadata/toolkits.js";
 import "../hooks/use-toolkit-picker.js";

package/dist/components/ui/organisms/toolkit-picker/components/toolkit-card-with-selection.js

@@ -1,6 +1,6 @@
 import { jsx as m } from "react/jsx-runtime";
 import { getToolkitIcon as c } from "../../../atoms/icons/utils.js";
-import { T as d } from "../../../../../toolkit-card-DgjPGtsJ.js";
+import { T as d } from "../../../../../toolkit-card-BWuG_NJi.js";
 function g({
   toolkit: e,
   selectedTools: o,

package/dist/components/ui/organisms/toolkit-picker/components/toolkit-list.d.ts

@@ -0,0 +1,6 @@
+import { SelectionMode } from '../index';
+type ToolkitListProps = {
+    selectionMode: SelectionMode;
+};
+export declare function ToolkitList({ selectionMode }: ToolkitListProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,90 @@
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { EmptyState as k } from "../../../molecules/empty-state.js";
+import "../../../../../toolkit-card-BWuG_NJi.js";
+import "../../../molecules/tool-card.js";
+import "lucide-react";
+import "../../../../../metadata/toolkits.js";
+import { useToolkitPicker as f } from "../hooks/use-toolkit-picker.js";
+import "../../../atoms/mobile-tooltip.js";
+import "../../../atoms/chart.js";
+import "../../../../../react-resizable-panels.browser-DggUboAp.js";
+import "../../../atoms/sidebar.js";
+import "react";
+import "../../../atoms/table.js";
+import { ToolkitCardWithSelection as h } from "./toolkit-card-with-selection.js";
+function F({ selectionMode: s }) {
+  const {
+    state: { filteredToolkits: i, selectedToolkits: r, selectedTools: a },
+    toggleToolkit: x,
+    setActiveTab: d,
+    setToolkitFilter: n
+  } = f();
+  if (i.size === 0)
+    return /* @__PURE__ */ t(
+      k,
+      {
+        "data-testid": "empty-toolkits",
+        description: "Try a different search term",
+        title: "No toolkits found"
+      }
+    );
+  const m = Array.from(i), o = m.filter(
+    (e) => r.has(e.name)
+  ), c = m.filter(
+    (e) => !r.has(e.name)
+  ), p = (e) => (u) => {
+    if (s === "single") {
+      d("tools"), n(e.name);
+      return;
+    }
+    x(e);
+  }, g = (e) => () => {
+    n(e.name), d("tools");
+  };
+  return /* @__PURE__ */ l("div", { className: "space-y-4", "data-testid": "toolkits-grid", children: [
+    o.length > 0 && /* @__PURE__ */ l(
+      "div",
+      {
+        className: "mt-0.5 space-y-2",
+        "data-testid": "selected-toolkits-section",
+        children: [
+          /* @__PURE__ */ l("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ t("h3", { className: "font-semibold text-neutral-700 text-sm dark:text-neutral-200", children: "Selected" }),
+            /* @__PURE__ */ t("span", { className: "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.length })
+          ] }),
+          /* @__PURE__ */ t("div", { className: "mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3", children: o.map((e) => /* @__PURE__ */ t(
+            h,
+            {
+              onSelect: p(e),
+              onView: g(e),
+              selectedTools: new Set(a.keys()),
+              selectionMode: s,
+              toolkit: e
+            },
+            e.name
+          )) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ l("div", { className: "space-y-2", children: [
+      o.length > 0 && /* @__PURE__ */ l("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ t("h3", { className: "font-semibold text-neutral-700 text-sm dark:text-neutral-200", children: "All toolkits" }),
+        /* @__PURE__ */ t("span", { className: "rounded-full bg-neutral-200 px-1.5 py-0.5 text-neutral-800 text-xs dark:bg-neutral-800 dark:text-neutral-200", children: c.length })
+      ] }),
+      /* @__PURE__ */ t("div", { className: "mt-2 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3", children: c.map((e) => /* @__PURE__ */ t(
+        h,
+        {
+          onSelect: p(e),
+          onView: g(e),
+          selectedTools: new Set(a.keys()),
+          selectionMode: s,
+          toolkit: e
+        },
+        e.name
+      )) })
+    ] })
+  ] });
+}
+export {
+  F as ToolkitList
+};

package/dist/components/ui/organisms/toolkit-picker/components/tools-list.d.ts

@@ -0,0 +1,6 @@
+import { SelectionMode } from '../index';
+type ToolsListProps = {
+    selectionMode: SelectionMode;
+};
+export declare function ToolsList({ selectionMode }: ToolsListProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,97 @@
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { getToolIconByToolkitName as u } from "../../../atoms/icons/utils.js";
+import { EmptyState as h } from "../../../molecules/empty-state.js";
+import "../../../../../toolkit-card-BWuG_NJi.js";
+import { ToolCard as p } from "../../../molecules/tool-card.js";
+import "lucide-react";
+import { useToolkitPicker as x } from "../hooks/use-toolkit-picker.js";
+import "../../../atoms/mobile-tooltip.js";
+import "../../../atoms/chart.js";
+import "../../../../../react-resizable-panels.browser-DggUboAp.js";
+import "../../../atoms/sidebar.js";
+import "react";
+import "../../../atoms/table.js";
+function $({ selectionMode: d }) {
+  const {
+    state: { filteredTools: n, filteredToolkits: o, selectedTools: l },
+    toggleTool: m
+  } = x();
+  if (n.size === 0)
+    return /* @__PURE__ */ t(
+      h,
+      {
+        "data-testid": "empty-tools",
+        description: "Try a different search term",
+        title: "No tools found"
+      }
+    );
+  const c = Array.from(n), i = c.filter(
+    (e) => l.has(e.fully_qualified_name)
+  ), f = c.filter(
+    (e) => !l.has(e.fully_qualified_name)
+  );
+  return /* @__PURE__ */ a("div", { className: "space-y-4", "data-testid": "tools-grid", children: [
+    i.length > 0 && /* @__PURE__ */ a("div", { className: "mt-0.5 space-y-2", "data-testid": "selected-tools-section", children: [
+      /* @__PURE__ */ a("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ t("h3", { className: "font-semibold text-neutral-700 text-sm dark:text-neutral-200", children: "Selected" }),
+        /* @__PURE__ */ t("span", { className: "rounded-full bg-emerald-300 px-1.5 py-0.5 text-emerald-900 text-xs dark:bg-emerald-600 dark:text-emerald-200", children: i.length })
+      ] }),
+      /* @__PURE__ */ t(
+        "div",
+        {
+          className: "mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3",
+          "data-testid": "selected-tools-grid",
+          children: i.map((e) => {
+            const r = Array.from(o).find(
+              (s) => s.name === e.toolkit.name
+            )?.metadata?.icon ?? u(e.toolkit.name);
+            return /* @__PURE__ */ t(
+              p,
+              {
+                "data-testid": `tool-card-${e.fully_qualified_name}`,
+                description: e.description,
+                fully_qualified_name: e.fully_qualified_name,
+                hideCheckbox: d === "single",
+                Icon: r,
+                isSelected: l.has(e.fully_qualified_name),
+                name: e.name,
+                onSelect: () => m(e),
+                toolkitName: e.toolkit.name
+              },
+              e.fully_qualified_name
+            );
+          })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+      i.length > 0 && /* @__PURE__ */ a("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ t("h3", { className: "font-semibold text-neutral-700 text-sm dark:text-neutral-200", children: "All tools" }),
+        /* @__PURE__ */ t("span", { className: "rounded-full bg-neutral-200 px-1.5 py-0.5 text-neutral-800 text-xs dark:bg-neutral-800 dark:text-neutral-200", children: f.length })
+      ] }),
+      /* @__PURE__ */ t("div", { className: "mt-2 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3", children: f.map((e) => {
+        const r = Array.from(o).find(
+          (s) => s.name === e.toolkit.name
+        )?.metadata?.icon ?? u(e.toolkit.name);
+        return /* @__PURE__ */ t(
+          p,
+          {
+            "data-testid": `tool-card-${e.fully_qualified_name}`,
+            description: e.description,
+            fully_qualified_name: e.fully_qualified_name,
+            hideCheckbox: d === "single",
+            Icon: r,
+            isSelected: l.has(e.fully_qualified_name),
+            name: e.name,
+            onSelect: () => m(e),
+            toolkitName: e.toolkit.name
+          },
+          e.fully_qualified_name
+        );
+      }) })
+    ] })
+  ] });
+}
+export {
+  $ as ToolsList
+};