@arcadeai/design-system 1.2.0 → 1.4.0

package/dist/components/ui/molecules/empty-state.d.ts

@@ -0,0 +1,5 @@
+import type * as React from 'react';
+export declare function EmptyState({ title, description, ...rest }: {
+    title?: string;
+    description?: string;
+} & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/molecules/empty-state.js

@@ -0,0 +1,25 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { Search as d } from "lucide-react";
+function g({
+  title: t = "No results",
+  description: a = "Try adjusting your search or filters",
+  ...s
+}) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: "flex h-56 flex-col items-center justify-center gap-4 rounded-xl border-2 border-gray-200 border-dashed bg-gray-50/50 text-center dark:border-gray-800 dark:bg-gray-900/50",
+      ...s,
+      children: [
+        /* @__PURE__ */ e("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800", children: /* @__PURE__ */ e(d, { className: "h-8 w-8 text-gray-400" }) }),
+        /* @__PURE__ */ r("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ e("h3", { className: "font-semibold text-gray-900 text-lg dark:text-gray-100", children: t }),
+          /* @__PURE__ */ e("p", { className: "text-gray-600 text-sm dark:text-gray-400", children: a })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  g as EmptyState
+};

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

@@ -0,0 +1,7 @@
+/** biome-ignore-all lint/performance/noBarrelFile: Barrel files are acceptable for atomic component folders */
+export { EmptyState } from './empty-state';
+export { RequirementBadges } from './requirement-badges';
+export { ToolCard } from './tool-card';
+export { ToolkitCard } from './toolkit-card';
+export { ToolkitPickerTrigger } from './toolkit-picker-trigger';
+export { ToolkitSelectionSummary } from './toolkit-selection-summary';

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

@@ -0,0 +1,13 @@
+import { EmptyState as e } from "./empty-state.js";
+import { R as m, T as a } from "../../../toolkit-card-UG1sZ0Le.js";
+import { ToolCard as p } from "./tool-card.js";
+import { ToolkitPickerTrigger as f } from "./toolkit-picker-trigger.js";
+import { ToolkitSelectionSummary as x } from "./toolkit-selection-summary.js";
+export {
+  e as EmptyState,
+  m as RequirementBadges,
+  p as ToolCard,
+  a as ToolkitCard,
+  f as ToolkitPickerTrigger,
+  x as ToolkitSelectionSummary
+};

package/dist/components/ui/molecules/requirement-badges.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+export type SecretsSummary = {
+    configured: string[];
+    pending: string[];
+};
+export type OAuthProvider = {
+    id: string;
+    status: 'active' | 'inactive';
+    scopes: string[];
+};
+export type OAuthSummary = {
+    providers: OAuthProvider[];
+};
+declare function RequirementBadgesImpl({ requirementsSummary, isByoc, isPro, }: {
+    requirementsSummary: {
+        secrets?: SecretsSummary;
+        oauth?: OAuthSummary;
+    };
+    isByoc?: boolean;
+    isPro?: boolean;
+}): import("react/jsx-runtime").JSX.Element | null;
+declare const SecretsBadge: React.MemoExoticComponent<({ secrets }: {
+    secrets: SecretsSummary;
+}) => import("react/jsx-runtime").JSX.Element>;
+declare const OAuthBadge: React.MemoExoticComponent<({ oauth }: {
+    oauth: OAuthSummary;
+}) => import("react/jsx-runtime").JSX.Element>;
+declare const RequirementBadges: React.MemoExoticComponent<typeof RequirementBadgesImpl>;
+export { OAuthBadge, RequirementBadges, SecretsBadge };

package/dist/components/ui/molecules/requirement-badges.js

@@ -0,0 +1,25 @@
+import "react/jsx-runtime";
+import "lucide-react";
+import "react";
+import "../../../utils-Db4QWi-E.js";
+import "../atoms/badge.js";
+import "../atoms/byoc-badge.js";
+import "../atoms/chart.js";
+import "../atoms/form.js";
+import "../atoms/mobile-tooltip.js";
+import "../atoms/pro-badge.js";
+import "../../../react-resizable-panels.browser-ZHjTH32c.js";
+import "../atoms/sidebar.js";
+import "../atoms/table.js";
+import "../atoms/tooltip.js";
+import { O as x, R as A, S as b } from "../../../toolkit-card-UG1sZ0Le.js";
+import "./tool-card.js";
+import "../../../metadata/oauth-providers.js";
+import "../../../metadata/toolkits.js";
+import "../organisms/toolkit-picker/hooks/use-toolkit-picker.js";
+import "../utils/memo.js";
+export {
+  x as OAuthBadge,
+  A as RequirementBadges,
+  b as SecretsBadge
+};

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

@@ -0,0 +1,17 @@
+import { JSX } from 'react/jsx-runtime';
+import * as React from 'react';
+export type ToolCardProps = {
+    fully_qualified_name: string;
+    name?: string;
+    toolkitName?: string;
+    description?: string;
+    isSelected?: boolean;
+    Icon?: (props: {
+        className?: string;
+    }) => JSX.Element;
+    onSelect?: (checked: boolean) => void;
+    hideCheckbox?: boolean;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'>;
+declare function ToolCardImpl({ fully_qualified_name, name, toolkitName, description, Icon, isSelected, onSelect, hideCheckbox, ...rest }: ToolCardProps): JSX.Element;
+export declare const ToolCard: React.MemoExoticComponent<typeof ToolCardImpl>;
+export {};

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 D, CardContent as I } from "../atoms/card.js";
+import { Checkbox as P } from "../atoms/checkbox.js";
+import { Collapsible as T, CollapsibleTrigger as _, CollapsibleContent as S } from "../atoms/collapsible.js";
+import { c as m } from "../../../utils-Db4QWi-E.js";
+import { createPropsComparator as j } from "../utils/memo.js";
+const K = /\s+/, O = 220, R = 40;
+function z({
+  fully_qualified_name: u,
+  name: k,
+  toolkitName: p,
+  description: n,
+  Icon: C = (s) => /* @__PURE__ */ r(N, { ...s }),
+  isSelected: o = !1,
+  onSelect: l,
+  hideCheckbox: h = !1,
+  ...b
+}) {
+  const s = t.useCallback(
+    () => l?.(!o),
+    [o, l]
+  ), [i, x] = t.useState(!1), w = t.useMemo(() => n ? n.length > O ? !0 : n.trim().split(K).length > R : !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(
+    D,
+    {
+      ...b,
+      "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(I, { 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(
+              P,
+              {
+                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(C, { 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(T, { 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(_, { 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 A = j([
+  "fully_qualified_name",
+  "name",
+  "toolkitName",
+  "description",
+  "isSelected",
+  "Icon",
+  "hideCheckbox"
+]), $ = t.memo(z, A);
+export {
+  $ 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-UG1sZ0Le.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,105 @@
+import { jsx as e, jsxs as t, Fragment as h } from "react/jsx-runtime";
+import { Loader2 as v, Package as w } from "lucide-react";
+import { Badge as y } from "../atoms/badge.js";
+import { Button as z } from "../atoms/button.js";
+import { getToolkitIcon as j } from "../atoms/icons/utils.js";
+import { Tooltip as C, TooltipTrigger as $, TooltipContent as L } from "../atoms/tooltip.js";
+import { c as g } from "../../../utils-Db4QWi-E.js";
+import { useToolkitPicker as I } from "../organisms/toolkit-picker/hooks/use-toolkit-picker.js";
+function D({
+  maxVisibleIcons: x = 2,
+  className: N,
+  countType: r = "toolkits",
+  loading: i = !1,
+  ...n
+}) {
+  const {
+    state: { committedToolkits: f, committedTools: T }
+  } = I(), o = Array.from(f.keys()), l = o.length, p = T.size, c = o.slice(0, x).map((a) => {
+    const s = f.get(a);
+    return j({
+      metadataIcon: s?.metadata?.icon,
+      toolkitName: a
+    });
+  }), k = Math.max(l - c.length, 0), b = r === "tools";
+  let m = "Toolkits", d = l;
+  b && (m = "Tools", d = p);
+  let u = `Select ${r === "tools" ? "Tools" : "Toolkits"}`;
+  return i ? u = "Loading toolkits..." : l > 0 && (u = `${d} ${m.toLowerCase()} selected`), /* @__PURE__ */ e(
+    z,
+    {
+      ...n,
+      "aria-label": u,
+      className: g("gap-2 bg-transparent transition-colors", N),
+      disabled: i,
+      size: n.size ?? "sm",
+      variant: n.variant ?? "outline",
+      children: i ? /* @__PURE__ */ t(h, { children: [
+        /* @__PURE__ */ e(v, { 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: [
+            c.map((a, s) => /* @__PURE__ */ e(
+              "div",
+              {
+                className: g(
+                  "relative first:ml-0",
+                  s > 0 && "-ml-1.5"
+                ),
+                style: { zIndex: s + 1 },
+                children: /* @__PURE__ */ e("div", { className: "flex size-5 items-center justify-center rounded-full bg-neutral-200 p-2 ring-1 ring-black/15 dark:bg-neutral-800 dark:ring-white/15", children: /* @__PURE__ */ e(a, { className: "h-2.5 w-2.5" }) })
+              },
+              `${a.name || "icon"}-${s}`
+            )),
+            k > 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: c.length + 10 },
+                children: [
+                  "+",
+                  k
+                ]
+              }
+            )
+          ] }) }),
+          /* @__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: [
+                ": ",
+                o.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: [
+                ": ",
+                p,
+                " selected"
+              ] })
+            ] })
+          ] }) }) })
+        ] }),
+        l === 0 && /* @__PURE__ */ t(h, { children: [
+          /* @__PURE__ */ e(w, { className: "h-4 w-4" }),
+          /* @__PURE__ */ t("span", { className: "truncate text-sm", children: [
+            "Select ",
+            r === "tools" ? "Tools" : "Toolkits"
+          ] })
+        ] }),
+        l > 0 && /* @__PURE__ */ t("span", { className: "inline-flex items-center gap-2 truncate text-sm", children: [
+          m,
+          /* @__PURE__ */ e(y, { className: "px-1.5 py-0 text-[11px]", variant: "default", children: d })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  D as ToolkitPickerTrigger
+};

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

@@ -0,0 +1,11 @@
+import { SelectionMode } from '../organisms/toolkit-picker';
+import { ToolkitSelectionMap } from '../organisms/toolkit-picker/hooks/use-toolkit-picker';
+export type ToolkitSelectionSummaryProps = {
+    selectedToolkits: ToolkitSelectionMap;
+    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,120 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { Package as u, X as y, CheckSquare as C } from "lucide-react";
+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-UG1sZ0Le.js";
+import "./tool-card.js";
+import { getToolkitIcon as z } from "../atoms/icons/utils.js";
+import "../organisms/toolkit-picker/hooks/use-toolkit-picker.js";
+const I = 3;
+function E({
+  selectedToolkits: s,
+  selectedTools: m,
+  onClear: N,
+  onSelectAll: o,
+  allVisibleSelected: k,
+  selectionMode: w
+}) {
+  const l = s.size > 0 || m.size > 0, i = Array.from(s.keys()), c = m.size, a = i.length, r = i.slice(0, I), d = Math.max(a - r.length, 0);
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: "flex items-center gap-3",
+      "data-testid": "toolkit-selection-summary",
+      children: [
+        !l && /* @__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" })
+        ] }),
+        l && /* @__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: [
+                c,
+                " tool",
+                c !== 1 ? "s" : "",
+                " selected"
+              ] }),
+              /* @__PURE__ */ t("div", { className: "ml-1 flex items-center sm:ml-1.5", children: [
+                r.map((n, h) => {
+                  const v = s.get(n), b = z({
+                    metadataIcon: v?.metadata?.icon,
+                    toolkitName: n
+                  });
+                  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(b, { className: "h-3 w-3 sm:h-3.5 sm:w-3.5" }) })
+                    },
+                    `mini-icon-${n}`
+                  );
+                }),
+                d > 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: r.length + 10 },
+                    children: [
+                      "+",
+                      d
+                    ]
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ t("div", { className: "text-neutral-600 text-xs dark:text-neutral-400", children: [
+              "from ",
+              a,
+              " toolkit",
+              a !== 1 ? "s" : ""
+            ] })
+          ] }) }),
+          /* @__PURE__ */ e(f, { side: "top", sideOffset: 6, children: /* @__PURE__ */ e("div", { className: "max-w-64 text-wrap text-xs", children: i.join(", ") }) })
+        ] }) }),
+        /* @__PURE__ */ t("div", { className: "ml-auto flex items-center gap-2 sm:hidden", children: [
+          l && /* @__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(y, { className: "mr-0.5 h-4 w-4" }),
+                "Clear All"
+              ]
+            }
+          ),
+          w !== "single" && o && !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: o,
+                size: "sm",
+                variant: "ghost",
+                children: /* @__PURE__ */ e(C, { className: "h-4 w-4" })
+              }
+            ) }),
+            /* @__PURE__ */ e(f, { side: "top", sideOffset: 6, children: /* @__PURE__ */ e("div", { className: "text-xs", children: "Select all visible" }) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  E as ToolkitSelectionSummary
+};

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

@@ -0,0 +1,2 @@
+/** biome-ignore-all lint/performance/noBarrelFile: Barrel files are acceptable for atomic component folders */
+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 S } from "../../../molecules/toolkit-selection-summary.js";
+import { useToolkitPicker as T } from "../hooks/use-toolkit-picker.js";
+function A() {
+  const {
+    state: {
+      selectionMode: l,
+      selectedToolkits: o,
+      selectedTools: t,
+      filteredToolkits: i,
+      filteredTools: s,
+      activeTab: a
+    },
+    clearSelections: c,
+    selectAll: n
+  } = T(), m = i.size === o.size && s.size === t.size, f = () => {
+    const u = a === "toolkits" ? Array.from(i).flatMap(
+      (e) => e.tools.map((d) => d.fully_qualified_name)
+    ) : Array.from(s).map((e) => e.fully_qualified_name);
+    n(u);
+  };
+  return l !== "multi" ? null : /* @__PURE__ */ r("div", { className: "w-full sm:w-auto", children: /* @__PURE__ */ r(
+    S,
+    {
+      allVisibleSelected: m,
+      onClear: c,
+      onSelectAll: f,
+      selectedToolkits: o,
+      selectedTools: new Set(t.keys()),
+      selectionMode: l
+    }
+  ) });
+}
+export {
+  A as FooterSummary
+};

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,37 @@
+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-UG1sZ0Le.js";
+import "../../../molecules/tool-card.js";
+import "../../../../../metadata/oauth-providers.js";
+import "../../../../../metadata/toolkits.js";
+import { useToolkitPicker as p } from "../hooks/use-toolkit-picker.js";
+function j() {
+  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 {
+  j 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 {};