@arcadeai/design-system 1.1.0 → 1.3.0

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

@@ -0,0 +1,127 @@
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import { Wrench as N } from "lucide-react";
+import * as t from "react";
+import { Button as E } from "../atoms/button.js";
+import { Card as P, CardContent as D } from "../atoms/card.js";
+import { Checkbox as I } from "../atoms/checkbox.js";
+import { Collapsible as j, CollapsibleTrigger as K, CollapsibleContent as S } from "../atoms/collapsible.js";
+import { c as m } from "../../../utils-Db4QWi-E.js";
+import { createPropsComparator as T } from "../utils/memo.js";
+const _ = /\s+/;
+function z({
+  fully_qualified_name: u,
+  name: k,
+  toolkitName: p,
+  description: n,
+  Icon: b = (s) => /* @__PURE__ */ r(N, { ...s }),
+  isSelected: o = !1,
+  onSelect: l,
+  hideCheckbox: h = !1,
+  ...C
+}) {
+  const s = t.useCallback(
+    () => l?.(!o),
+    [o, l]
+  ), [i, x] = t.useState(!1), w = t.useMemo(() => n ? n.length > 220 ? !0 : n.trim().split(_).length > 40 : !1, [n]), y = (e) => {
+    const c = e.key === "Enter" || e.code === "Enter", d = e.key === " " || e.key === "Spacebar" || e.code === "Space";
+    (c || d) && (e.preventDefault(), s());
+  }, v = t.useCallback(
+    (e) => l?.(!!e),
+    [l]
+  ), f = t.useCallback((e) => {
+    e.stopPropagation();
+  }, []), g = t.useCallback((e) => {
+    const c = e.key === "Enter" || e.code === "Enter", d = e.key === " " || e.key === "Spacebar" || e.code === "Space";
+    (c || d) && e.stopPropagation();
+  }, []);
+  return /* @__PURE__ */ r(
+    P,
+    {
+      ...C,
+      "aria-label": `Select tool ${u}`,
+      className: m(
+        "group relative cursor-pointer overflow-hidden rounded-lg border py-3 transition-all duration-200",
+        "bg-white/50 hover:bg-white/70 dark:bg-neutral-900/50 dark:hover:bg-neutral-900/70",
+        "hover:-translate-y-0.5 hover:shadow-lg",
+        o && "border-emerald-300 ring-2 ring-emerald-500 ring-offset-2 ring-offset-white dark:border-emerald-900/60 dark:ring-offset-neutral-950",
+        !o && "border-neutral-200 hover:border-neutral-300 dark:border-neutral-800 dark:hover:border-neutral-700"
+      ),
+      onClick: s,
+      onKeyDown: y,
+      tabIndex: 0,
+      children: /* @__PURE__ */ r(D, { className: "px-3", children: /* @__PURE__ */ a(
+        "div",
+        {
+          className: m(
+            "grid items-start gap-2",
+            "grid-cols-[20px_1fr_auto]",
+            h && "grid-cols-[1fr_auto]"
+          ),
+          children: [
+            !h && /* @__PURE__ */ r("div", { className: "flex items-center justify-center pt-1.5", children: /* @__PURE__ */ r(
+              I,
+              {
+                checked: o,
+                onCheckedChange: v,
+                onClick: f,
+                onKeyDown: g,
+                tabIndex: -1
+              }
+            ) }),
+            /* @__PURE__ */ a("div", { className: "min-w-0 space-y-2", children: [
+              /* @__PURE__ */ a("div", { className: "flex min-w-0 items-start gap-3", children: [
+                /* @__PURE__ */ r("div", { className: "flex size-9 items-center justify-center rounded bg-gradient-to-b from-neutral-200 to-neutral-100 ring-1 ring-black/5 dark:from-neutral-800 dark:to-neutral-900 dark:ring-white/5", children: /* @__PURE__ */ r(b, { className: "size-6 text-neutral-700 dark:text-neutral-200" }) }),
+                /* @__PURE__ */ a("div", { className: "flex h-9 min-w-0 flex-col justify-center space-y-0.5", children: [
+                  /* @__PURE__ */ r("h3", { className: "truncate font-semibold text-base text-neutral-900 leading-tight dark:text-neutral-100", children: k ?? u }),
+                  p && /* @__PURE__ */ r("span", { className: "font-medium text-neutral-500 text-xs leading-tight dark:text-neutral-400", children: p })
+                ] })
+              ] }),
+              n && /* @__PURE__ */ a(j, { onOpenChange: x, open: i, children: [
+                /* @__PURE__ */ a("div", { className: "space-y-1", children: [
+                  /* @__PURE__ */ r(
+                    "p",
+                    {
+                      className: m(
+                        "text-neutral-600 text-sm dark:text-neutral-400",
+                        !i && "line-clamp-3"
+                      ),
+                      children: n
+                    }
+                  ),
+                  w && /* @__PURE__ */ r(K, { asChild: !0, children: /* @__PURE__ */ a(
+                    E,
+                    {
+                      className: "h-auto px-0",
+                      onClick: f,
+                      onKeyDown: g,
+                      size: "sm",
+                      variant: "link",
+                      children: [
+                        i && "Show less",
+                        !i && "Show more"
+                      ]
+                    }
+                  ) })
+                ] }),
+                /* @__PURE__ */ r(S, {})
+              ] })
+            ] }),
+            /* @__PURE__ */ r("div", { className: "w-8" })
+          ]
+        }
+      ) })
+    }
+  );
+}
+const R = T([
+  "fully_qualified_name",
+  "name",
+  "toolkitName",
+  "description",
+  "isSelected",
+  "Icon",
+  "hideCheckbox"
+]), F = t.memo(z, R);
+export {
+  F as ToolCard
+};

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

@@ -0,0 +1,24 @@
+import { JSX } from 'react/jsx-runtime';
+import { ProcessedToolkit } from '../../../lib/arcade/arcade';
+import * as React from 'react';
+export type ToolkitCardProps = {
+    name: string;
+    version?: string;
+    description?: string;
+    toolsCount: number;
+    isSelected?: boolean;
+    isPartiallySelected?: boolean;
+    selectedToolsCount?: number;
+    Icon?: (props: {
+        className?: string;
+    }) => JSX.Element;
+    requirementsSummary: ProcessedToolkit['requirementsSummary'];
+    isByoc?: boolean;
+    isPro?: boolean;
+    onSelect?: (checked: boolean) => void;
+    onView?: () => void;
+    hideCheckbox?: boolean;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'>;
+declare function ToolkitCardImpl({ name, version, toolsCount, Icon, isSelected, isPartiallySelected, selectedToolsCount, requirementsSummary, onSelect, onView, hideCheckbox, isByoc, isPro, ...rest }: ToolkitCardProps): JSX.Element;
+export declare const ToolkitCard: React.MemoExoticComponent<typeof ToolkitCardImpl>;
+export {};

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

@@ -0,0 +1,13 @@
+import "react/jsx-runtime";
+import "../../../index-BDE30rcJ.js";
+import "lucide-react";
+import "react";
+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-GhM_oj4G.js";
+import "../utils/memo.js";
+export {
+  k as ToolkitCard
+};

package/dist/components/ui/molecules/toolkit-picker-trigger.d.ts

@@ -0,0 +1,8 @@
+import { Button } from '../atoms/button';
+import type * as React from 'react';
+export type ToolkitPickerTriggerProps = React.ComponentProps<typeof Button> & {
+    maxVisibleIcons?: number;
+    countType?: 'toolkits' | 'tools';
+    loading?: boolean;
+};
+export declare function ToolkitPickerTrigger({ maxVisibleIcons, className, countType, loading, ...buttonProps }: ToolkitPickerTriggerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/molecules/toolkit-picker-trigger.js

@@ -0,0 +1,96 @@
+import { jsx as e, jsxs as t, Fragment as h } from "react/jsx-runtime";
+import { Loader2 as w, Package as v } from "lucide-react";
+import { getToolkitIconByName as y } from "../../../assets/icons/utils.js";
+import { Badge as j } from "../atoms/badge.js";
+import { Button as z } from "../atoms/button.js";
+import { Tooltip as C, TooltipTrigger as $, TooltipContent as L } from "../atoms/tooltip.js";
+import { c as k } from "../../../utils-Db4QWi-E.js";
+import { useToolkitPicker as B } from "../organisms/toolkit-picker/hooks/use-toolkit-picker.js";
+function D({
+  maxVisibleIcons: g = 2,
+  className: x,
+  countType: s = "toolkits",
+  loading: r = !1,
+  ...i
+}) {
+  const {
+    state: { committedToolkits: N, committedTools: T }
+  } = B(), n = Array.from(N.keys()), l = n.length, f = T.size, o = n.slice(0, g).map((a) => y(a)), p = Math.max(l - o.length, 0), b = s === "tools";
+  let c = "Toolkits", m = l;
+  b && (c = "Tools", m = f);
+  let d = `Select ${s === "tools" ? "Tools" : "Toolkits"}`;
+  return r ? d = "Loading toolkits..." : l > 0 && (d = `${m} ${c.toLowerCase()} selected`), /* @__PURE__ */ e(
+    z,
+    {
+      ...i,
+      "aria-label": d,
+      className: k("gap-2 bg-transparent transition-colors", x),
+      disabled: r,
+      size: i.size ?? "sm",
+      variant: i.variant ?? "outline",
+      children: r ? /* @__PURE__ */ t(h, { children: [
+        /* @__PURE__ */ e(w, { className: "h-4 w-4 animate-spin" }),
+        /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ e("div", { className: "h-4 w-16 animate-pulse rounded bg-neutral-200 dark:bg-neutral-700" }),
+          /* @__PURE__ */ e("div", { className: "h-5 w-6 animate-pulse rounded-full bg-neutral-200 dark:bg-neutral-700" })
+        ] })
+      ] }) : /* @__PURE__ */ t(h, { children: [
+        l > 0 && /* @__PURE__ */ t(C, { children: [
+          /* @__PURE__ */ e($, { asChild: !0, children: /* @__PURE__ */ t("span", { className: "mr-1.5 flex items-center", children: [
+            o.map((a, u) => /* @__PURE__ */ e(
+              "div",
+              {
+                className: k("relative first:ml-0", u > 0 && "-ml-2"),
+                style: { zIndex: u + 1 },
+                children: /* @__PURE__ */ e("div", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-neutral-200 p-0.5 ring-1 ring-black/15 dark:bg-neutral-800 dark:ring-white/15", children: /* @__PURE__ */ e(a, { className: "h-3.5 w-3.5" }) })
+              },
+              `${a.name || "icon"}-${u}`
+            )),
+            p > 0 && /* @__PURE__ */ t(
+              "span",
+              {
+                className: "-ml-2 inline-flex h-6 w-6 items-center justify-center rounded-full bg-neutral-200 font-medium text-[10px] text-neutral-700 ring-1 ring-black/15 dark:bg-neutral-800 dark:text-neutral-200 dark:ring-white/15",
+                style: { zIndex: o.length + 10 },
+                children: [
+                  "+",
+                  p
+                ]
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ e(L, { side: "bottom", sideOffset: 6, children: /* @__PURE__ */ e("div", { className: "text-xs", children: /* @__PURE__ */ t("ul", { className: "list-disc space-y-1 pl-4", children: [
+            /* @__PURE__ */ t("li", { children: [
+              /* @__PURE__ */ e("span", { className: "font-semibold text-neutral-800 dark:text-neutral-200", children: "Toolkits" }),
+              /* @__PURE__ */ t("span", { className: "text-neutral-700 dark:text-neutral-300", children: [
+                ": ",
+                n.join(", ")
+              ] })
+            ] }),
+            /* @__PURE__ */ t("li", { children: [
+              /* @__PURE__ */ e("span", { className: "font-semibold text-neutral-800 dark:text-neutral-200", children: "Tools" }),
+              /* @__PURE__ */ t("span", { className: "text-neutral-700 dark:text-neutral-300", children: [
+                ": ",
+                f,
+                " selected"
+              ] })
+            ] })
+          ] }) }) })
+        ] }),
+        l === 0 && /* @__PURE__ */ t(h, { children: [
+          /* @__PURE__ */ e(v, { className: "h-4 w-4" }),
+          /* @__PURE__ */ t("span", { className: "truncate text-sm", children: [
+            "Select ",
+            s === "tools" ? "Tools" : "Toolkits"
+          ] })
+        ] }),
+        l > 0 && /* @__PURE__ */ t("span", { className: "inline-flex items-center gap-2 truncate text-sm", children: [
+          c,
+          /* @__PURE__ */ e(j, { className: "px-1.5 py-0 text-[11px]", variant: "default", children: m })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  D as ToolkitPickerTrigger
+};

package/dist/components/ui/molecules/toolkit-selection-summary.d.ts

@@ -0,0 +1,10 @@
+import { SelectionMode } from '../organisms/toolkit-picker';
+export interface ToolkitSelectionSummaryProps {
+    selectedToolkits: Set<string>;
+    selectedTools: Set<string>;
+    onClear: () => void;
+    onSelectAll?: () => void;
+    allVisibleSelected?: boolean;
+    selectionMode?: SelectionMode;
+}
+export declare function ToolkitSelectionSummary({ selectedToolkits, selectedTools, onClear, onSelectAll, allVisibleSelected, selectionMode, }: ToolkitSelectionSummaryProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,117 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { Package as u, X as b, CheckSquare as y } from "lucide-react";
+import { getToolkitIconByName as C } from "../../../assets/icons/utils.js";
+import { Button as x } from "../atoms/button.js";
+import { MobileTooltip as p, MobileTooltipTrigger as g, MobileTooltipContent as f } from "../atoms/mobile-tooltip.js";
+import "../atoms/chart.js";
+import "../atoms/form.js";
+import "../../../react-resizable-panels.browser-ZHjTH32c.js";
+import "../atoms/sidebar.js";
+import "react";
+import "../atoms/table.js";
+import "../../../toolkit-card-GhM_oj4G.js";
+import "./tool-card.js";
+import "../organisms/toolkit-picker/hooks/use-toolkit-picker.js";
+const z = 3;
+function D({
+  selectedToolkits: r,
+  selectedTools: n,
+  onClear: N,
+  onSelectAll: m,
+  allVisibleSelected: k,
+  selectionMode: w
+}) {
+  const s = r.size > 0 || n.size > 0, l = Array.from(r), o = n.size, i = l.length, a = l.slice(0, z), c = Math.max(i - a.length, 0);
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: "flex items-center gap-3",
+      "data-testid": "toolkit-selection-summary",
+      children: [
+        !s && /* @__PURE__ */ t("div", { className: "flex items-center gap-2 text-neutral-500 text-sm dark:text-neutral-400", children: [
+          /* @__PURE__ */ e(u, { className: "h-4 w-4" }),
+          /* @__PURE__ */ e("span", { children: "No items selected" })
+        ] }),
+        s && /* @__PURE__ */ e("div", { className: "flex w-full items-center gap-2 sm:w-auto", children: /* @__PURE__ */ t(p, { children: [
+          /* @__PURE__ */ e(g, { asChild: !0, children: /* @__PURE__ */ t("div", { className: "grid min-h-8 w-full grid-cols-1 items-center gap-x-3 gap-y-1 rounded-lg bg-neutral-100 px-2 py-1.5 text-xs sm:min-h-10 sm:w-auto sm:grid-cols-[auto_auto] sm:px-3 sm:py-2 sm:text-sm dark:bg-neutral-800", children: [
+            /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ e(u, { className: "h-3.5 w-3.5 text-neutral-600 sm:h-4 sm:w-4 dark:text-neutral-300" }),
+              /* @__PURE__ */ t("span", { className: "font-medium text-neutral-900 dark:text-neutral-100", children: [
+                o,
+                " tool",
+                o !== 1 ? "s" : "",
+                " selected"
+              ] }),
+              /* @__PURE__ */ t("div", { className: "ml-1 flex items-center sm:ml-1.5", children: [
+                a.map((d, h) => {
+                  const v = C(d);
+                  return /* @__PURE__ */ e(
+                    "div",
+                    {
+                      className: `relative ${h > 0 ? "-ml-2" : ""}`,
+                      style: { zIndex: h + 1 },
+                      children: /* @__PURE__ */ e("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-neutral-200 p-0.5 ring-1 ring-black/15 sm:h-6 sm:w-6 dark:bg-neutral-700 dark:ring-white/15", children: /* @__PURE__ */ e(v, { className: "h-3 w-3 sm:h-3.5 sm:w-3.5" }) })
+                    },
+                    `mini-icon-${d}`
+                  );
+                }),
+                c > 0 && /* @__PURE__ */ t(
+                  "span",
+                  {
+                    className: "-ml-2 inline-flex h-5 w-5 items-center justify-center rounded-full bg-neutral-200 font-medium text-[10px] text-neutral-700 ring-1 ring-black/15 sm:h-6 sm:w-6 dark:bg-neutral-700 dark:text-neutral-200 dark:ring-white/15",
+                    style: { zIndex: a.length + 10 },
+                    children: [
+                      "+",
+                      c
+                    ]
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ t("div", { className: "text-neutral-600 text-xs dark:text-neutral-400", children: [
+              "from ",
+              i,
+              " toolkit",
+              i !== 1 ? "s" : ""
+            ] })
+          ] }) }),
+          /* @__PURE__ */ e(f, { side: "top", sideOffset: 6, children: /* @__PURE__ */ e("div", { className: "max-w-64 text-wrap text-xs", children: l.join(", ") }) })
+        ] }) }),
+        /* @__PURE__ */ t("div", { className: "ml-auto flex items-center gap-2 sm:hidden", children: [
+          s && /* @__PURE__ */ t(
+            x,
+            {
+              className: "h-8 text-red-600 hover:text-red-700",
+              "data-testid": "footer-clear-selections",
+              onClick: N,
+              size: "sm",
+              variant: "ghost",
+              children: [
+                /* @__PURE__ */ e(b, { className: "mr-0.5 h-4 w-4" }),
+                "Clear All"
+              ]
+            }
+          ),
+          w !== "single" && m && !k && /* @__PURE__ */ t(p, { children: [
+            /* @__PURE__ */ e(g, { asChild: !0, children: /* @__PURE__ */ e(
+              x,
+              {
+                "aria-label": "Select all visible",
+                className: "h-8 w-8",
+                "data-testid": "footer-select-all",
+                onClick: m,
+                size: "sm",
+                variant: "ghost",
+                children: /* @__PURE__ */ e(y, { className: "h-4 w-4" })
+              }
+            ) }),
+            /* @__PURE__ */ e(f, { side: "top", sideOffset: 6, children: /* @__PURE__ */ e("div", { className: "text-xs", children: "Select all visible" }) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  D as ToolkitSelectionSummary
+};

package/dist/components/ui/organisms/index.d.ts

@@ -0,0 +1 @@
+export { ToolkitPicker } from './toolkit-picker/index';

package/dist/components/ui/organisms/index.js

@@ -0,0 +1,4 @@
+import { ToolkitPicker as e } from "./toolkit-picker/index.js";
+export {
+  e as ToolkitPicker
+};

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

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

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

@@ -0,0 +1,36 @@
+import { jsx as r } from "react/jsx-runtime";
+import { ToolkitSelectionSummary as k } from "../../../molecules/toolkit-selection-summary.js";
+import { useToolkitPicker as S } from "../hooks/use-toolkit-picker.js";
+function A() {
+  const {
+    state: {
+      selectionMode: l,
+      selectedToolkits: o,
+      selectedTools: t,
+      filteredToolkits: s,
+      filteredTools: i,
+      activeTab: a
+    },
+    clearSelections: c,
+    selectAll: n
+  } = S(), m = s.size === o.size && i.size === t.size, f = () => {
+    const u = a === "toolkits" ? Array.from(s).flatMap(
+      (e) => e.tools.map((d) => d.fully_qualified_name)
+    ) : Array.from(i).map((e) => e.fully_qualified_name);
+    n(u);
+  };
+  return l !== "multi" ? null : /* @__PURE__ */ r("div", { className: "w-full sm:w-auto", children: /* @__PURE__ */ r(
+    k,
+    {
+      allVisibleSelected: m,
+      onClear: c,
+      onSelectAll: f,
+      selectedToolkits: new Set(o.keys()),
+      selectedTools: new Set(t.keys()),
+      selectionMode: l
+    }
+  ) });
+}
+export {
+  A as FooterSummary
+};

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

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

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

@@ -0,0 +1,96 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { Filter as p, X as a, Search as c } from "lucide-react";
+import { getToolkitIconByName as m } from "../../../../../assets/icons/utils.js";
+import { Badge as i } from "../../../atoms/badge.js";
+import "../../../atoms/mobile-tooltip.js";
+import "../../../atoms/chart.js";
+import "../../../atoms/form.js";
+import "../../../../../react-resizable-panels.browser-ZHjTH32c.js";
+import "../../../atoms/sidebar.js";
+import "react";
+import "../../../atoms/table.js";
+import "../../../../../toolkit-card-GhM_oj4G.js";
+import "../../../molecules/tool-card.js";
+import { useToolkitPicker as u } from "../hooks/use-toolkit-picker.js";
+function T() {
+  const {
+    state: { toolkitFilter: t, searchQuery: l },
+    clearFilter: o,
+    clearSearchQuery: s,
+    setActiveTab: d
+  } = u();
+  return !(t || l) ? null : /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-2 px-4 pb-0.5 sm:hidden", children: [
+    t && /* @__PURE__ */ r(
+      i,
+      {
+        className: "h-7 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(p, { className: "h-2.5 w-2.5" }),
+            "Filter"
+          ] }),
+          /* @__PURE__ */ r(
+            "button",
+            {
+              className: "inline-flex h-full items-center gap-1.5",
+              "data-testid": "mobile-filter-badge",
+              onClick: () => d("toolkits"),
+              type: "button",
+              children: [
+                (() => {
+                  const n = m(t);
+                  return /* @__PURE__ */ e(n, { className: "h-3 w-3" });
+                })(),
+                /* @__PURE__ */ e("span", { className: "font-medium text-sm", children: t })
+              ]
+            }
+          ),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              "aria-label": "Clear toolkit filter",
+              className: "ml-1 inline-flex h-4 w-4 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": "mobile-clear-filter",
+              onClick: o,
+              type: "button",
+              children: /* @__PURE__ */ e(a, { className: "h-3 w-3" })
+            }
+          )
+        ]
+      }
+    ),
+    l && /* @__PURE__ */ r(
+      i,
+      {
+        className: "h-7 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(c, { className: "h-2.5 w-2.5" }),
+            "Search"
+          ] }),
+          /* @__PURE__ */ r("span", { className: "font-medium text-sm", children: [
+            '"',
+            l,
+            '"'
+          ] }),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              "aria-label": "Clear search query",
+              className: "ml-1 inline-flex h-4 w-4 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": "mobile-clear-search",
+              onClick: s,
+              type: "button",
+              children: /* @__PURE__ */ e(a, { className: "h-3 w-3" })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  T as MobileFilterBadges
+};

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

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

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

@@ -0,0 +1,36 @@
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { Search as i } from "lucide-react";
+import "../../../atoms/mobile-tooltip.js";
+import "../../../atoms/chart.js";
+import "../../../atoms/form.js";
+import { Input as m } from "../../../atoms/input.js";
+import "../../../../../react-resizable-panels.browser-ZHjTH32c.js";
+import "../../../atoms/sidebar.js";
+import "react";
+import "../../../atoms/table.js";
+import "../../../../../toolkit-card-GhM_oj4G.js";
+import "../../../molecules/tool-card.js";
+import "../../../../../assets/icons/utils.js";
+import { useToolkitPicker as p } from "../hooks/use-toolkit-picker.js";
+function N() {
+  const {
+    state: { searchQuery: r },
+    setSearchQuery: e
+  } = p();
+  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(
+      m,
+      {
+        className: "h-9 pl-10",
+        "data-testid": "search-input",
+        onChange: (o) => e(o.target.value),
+        placeholder: "Search toolkits and tools",
+        value: r
+      }
+    )
+  ] });
+}
+export {
+  N as SearchInput
+};

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

@@ -0,0 +1,9 @@
+import { SelectionMode } from '../index';
+type SelectButtonProps = {
+    selectionMode: SelectionMode;
+    selectedCount: number;
+    onCommit: () => void;
+    className?: string;
+};
+export declare function SelectButton({ selectionMode, selectedCount, onCommit, className, }: SelectButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,35 @@
+import { jsx as m } from "react/jsx-runtime";
+import "lucide-react";
+import { Button as n } from "../../../atoms/button.js";
+import "../../../atoms/mobile-tooltip.js";
+import "../../../atoms/chart.js";
+import "../../../atoms/form.js";
+import "../../../../../react-resizable-panels.browser-ZHjTH32c.js";
+import "../../../atoms/sidebar.js";
+import "react";
+import "../../../atoms/table.js";
+import "../../../../../toolkit-card-GhM_oj4G.js";
+import "../../../molecules/tool-card.js";
+import "../../../../../assets/icons/utils.js";
+import "../hooks/use-toolkit-picker.js";
+function $({
+  selectionMode: t,
+  selectedCount: o,
+  onCommit: r,
+  className: i
+}) {
+  return /* @__PURE__ */ m(
+    n,
+    {
+      className: i,
+      "data-testid": "use-tools-button",
+      disabled: o === 0,
+      onClick: r,
+      size: "sm",
+      children: t === "single" ? "Select Tool" : o === 0 ? "Select Tools" : `Use ${o} ${o === 1 ? "Tool" : "Tools"}`
+    }
+  );
+}
+export {
+  $ as SelectButton
+};

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

@@ -0,0 +1,9 @@
+import { ProcessedToolkit } from '../../../../../lib/arcade/arcade';
+export interface ToolkitCardWithSelectionProps {
+    toolkit: ProcessedToolkit;
+    selectedTools: Set<string>;
+    onSelect: (checked: boolean) => void;
+    onView: () => void;
+    selectionMode: 'single' | 'multi';
+}
+export declare function ToolkitCardWithSelection({ toolkit, selectedTools, onSelect, onView, selectionMode, }: ToolkitCardWithSelectionProps): import("react/jsx-runtime").JSX.Element;