@arcadeai/design-system 1.2.0 → 1.3.0

package/dist/toolkit-card-GhM_oj4G.js

@@ -0,0 +1,304 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { c as v } from "./index-BDE30rcJ.js";
+import { Key as R, Fingerprint as j, Wrench as O, Package as $ } from "lucide-react";
+import * as f from "react";
+import { Card as P, CardContent as D } from "./components/ui/atoms/card.js";
+import { Checkbox as K } from "./components/ui/atoms/checkbox.js";
+import { ViewToolsControl as S } from "./components/ui/atoms/view-tools-control.js";
+import { c as u } from "./utils-Db4QWi-E.js";
+import { Badge as N } from "./components/ui/atoms/badge.js";
+import { ByocBadge as z } from "./components/ui/atoms/byoc-badge.js";
+import "./components/ui/atoms/chart.js";
+import "./components/ui/atoms/form.js";
+import "./components/ui/atoms/mobile-tooltip.js";
+import { ProBadge as U } from "./components/ui/atoms/pro-badge.js";
+import "./react-resizable-panels.browser-ZHjTH32c.js";
+import "./components/ui/atoms/sidebar.js";
+import "./components/ui/atoms/table.js";
+import { Tooltip as y, TooltipTrigger as w, TooltipContent as C } from "./components/ui/atoms/tooltip.js";
+import "./components/ui/molecules/tool-card.js";
+import { areStringArraysEqual as x, createPropsComparator as B } from "./components/ui/utils/memo.js";
+import "./assets/icons/utils.js";
+import "./components/ui/organisms/toolkit-picker/hooks/use-toolkit-picker.js";
+const _ = ({ secrets: r }) => {
+  const a = (r.pending?.length ?? 0) > 0, s = /* @__PURE__ */ o("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ e("div", { className: "font-medium text-gray-900 dark:text-gray-100", children: "API Keys & Secrets" }),
+    (r.configured?.length ?? 0) > 0 && /* @__PURE__ */ o("div", { children: [
+      /* @__PURE__ */ e("div", { className: "mb-1 font-medium text-emerald-700 text-xs dark:text-emerald-300", children: "Configured" }),
+      /* @__PURE__ */ e("ul", { className: "list-disc pl-4 text-gray-700 text-xs dark:text-gray-300", children: r.configured?.map((t) => /* @__PURE__ */ e("li", { children: t }, `cfg-${t}`)) })
+    ] }),
+    (r.pending?.length ?? 0) > 0 && /* @__PURE__ */ o("div", { children: [
+      /* @__PURE__ */ e("div", { className: "mb-1 font-medium text-red-700 text-xs dark:text-red-300", children: "Pending" }),
+      /* @__PURE__ */ e("ul", { className: "list-disc pl-4 text-gray-700 text-xs dark:text-gray-300", children: r.pending?.map((t) => /* @__PURE__ */ e("li", { children: t }, `pen-${t}`)) })
+    ] })
+  ] });
+  return /* @__PURE__ */ o(y, { children: [
+    /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ o(
+      N,
+      {
+        className: u(
+          "gap-1.5 bg-stone-700",
+          a && "border-l-2 border-l-yellow-600"
+        ),
+        variant: "secondary",
+        children: [
+          /* @__PURE__ */ e(R, { className: "h-3.5 w-3.5" }),
+          "Secrets"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e(C, { className: "max-w-xs text-sm", sideOffset: 8, children: s })
+  ] });
+}, F = ({ oauth: r }) => {
+  const a = r.providers.filter((i) => i.status === "active").length, t = r.providers.length - a > 0, n = /* @__PURE__ */ o("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ e("div", { className: "font-medium text-gray-900 dark:text-gray-100", children: "OAuth Authorization" }),
+    r.providers.map((i) => /* @__PURE__ */ o("div", { className: "text-gray-700 text-xs dark:text-gray-300", children: [
+      /* @__PURE__ */ e("span", { className: "font-medium", children: i.id }),
+      " ",
+      i.status === "active" ? /* @__PURE__ */ e("span", { className: "text-emerald-700 dark:text-emerald-300", children: "(active)" }) : /* @__PURE__ */ e("span", { className: "text-red-700 dark:text-red-300", children: "(inactive)" }),
+      i.scopes.length > 0 && /* @__PURE__ */ e("div", { className: "mt-0.5 pl-3 text-gray-600 dark:text-gray-400", children: i.scopes.join(", ") })
+    ] }, i.id))
+  ] });
+  return /* @__PURE__ */ o(y, { children: [
+    /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ o(
+      N,
+      {
+        className: u(
+          "gap-1.5 bg-slate-800",
+          t && "border-l-2 border-l-yellow-600"
+        ),
+        variant: "secondary",
+        children: [
+          /* @__PURE__ */ e(j, { className: "h-3.5 w-3.5" }),
+          "OAuth"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e(C, { className: "max-w-xs text-sm", sideOffset: 8, children: n })
+  ] });
+};
+function W({
+  requirementsSummary: r,
+  isByoc: a = !1,
+  isPro: s = !1
+}) {
+  if (!(r?.secrets || r?.oauth || a || s))
+    return null;
+  const { secrets: t, oauth: n } = r;
+  return /* @__PURE__ */ o("div", { className: "flex w-full flex-wrap items-center gap-1.5", children: [
+    t && /* @__PURE__ */ e(G, { secrets: t }),
+    n && /* @__PURE__ */ e(H, { oauth: n }),
+    a && /* @__PURE__ */ e(z, { className: "gap-1.5 rounded-md" }),
+    s && /* @__PURE__ */ e(U, { className: "gap-1.5 rounded-md" })
+  ] });
+}
+const G = f.memo(_, (r, a) => r.secrets === a.secrets ? !0 : !(!(r.secrets && a.secrets) || !x(
+  r.secrets.configured,
+  a.secrets.configured
+) || !x(
+  r.secrets.pending,
+  a.secrets.pending
+))), H = f.memo(F, (r, a) => {
+  if (r.oauth === a.oauth)
+    return !0;
+  if (!(r.oauth && a.oauth))
+    return !1;
+  const s = r.oauth.providers, t = a.oauth.providers;
+  if (s === t)
+    return !0;
+  if (s.length !== t.length)
+    return !1;
+  for (let n = 0; n < s.length; n++) {
+    const i = s[n], c = t[n];
+    if (!(i.id === c.id && i.status === c.status) || !x(i.scopes, c.scopes))
+      return !1;
+  }
+  return !0;
+}), J = f.memo(
+  W,
+  B(["requirementsSummary", "isByoc", "isPro"])
+), L = v("", {
+  variants: {
+    selected: {
+      true: "border-emerald-300 ring-2 ring-emerald-500 ring-offset-2 ring-offset-white dark:border-emerald-900/60 dark:ring-offset-neutral-950",
+      false: ""
+    },
+    partial: {
+      true: "border-amber-300 ring-2 ring-amber-500 ring-offset-2 ring-offset-white dark:border-amber-900/60 dark:ring-offset-neutral-950",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      selected: !1,
+      partial: !1,
+      class: "border-neutral-200 hover:border-neutral-300 dark:border-neutral-800 dark:hover:border-neutral-700"
+    }
+  ]
+}), M = (r, a, s, t) => r && !a && s > 0 ? `${s}/${t} tools` : `${t} tool${t !== 1 ? "s" : ""}`, Q = v(
+  "inline-flex items-center gap-1 rounded-full px-2 py-1 font-medium text-xs",
+  {
+    variants: {
+      indeterminate: {
+        true: "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-200",
+        false: "bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-200"
+      }
+    }
+  }
+);
+function X({
+  name: r,
+  version: a,
+  toolsCount: s,
+  Icon: t = (g) => /* @__PURE__ */ e($, { ...g }),
+  isSelected: n = !1,
+  isPartiallySelected: i = !1,
+  selectedToolsCount: c = 0,
+  requirementsSummary: k,
+  onSelect: h,
+  onView: d,
+  hideCheckbox: m = !1,
+  isByoc: A,
+  isPro: I,
+  ...q
+}) {
+  const g = f.useCallback(() => {
+    if (m && d) {
+      d();
+      return;
+    }
+    h?.(!n);
+  }, [m, n, h, d]), T = (l) => {
+    const p = l.key === "Enter" || l.code === "Enter", E = l.key === " " || l.key === "Spacebar" || l.code === "Space";
+    (p || E) && (l.preventDefault(), g()), (l.key === "ArrowRight" || l.code === "ArrowRight") && d && (l.preventDefault(), d());
+  }, b = i && !n;
+  return /* @__PURE__ */ e(
+    P,
+    {
+      ...q,
+      "aria-description": "Click card to select this toolkit. Use the View tools control to see its tools.",
+      "aria-label": `Select toolkit ${r}`,
+      className: u(
+        "group",
+        "relative",
+        "cursor-pointer",
+        "overflow-hidden",
+        "rounded-lg",
+        "border",
+        "py-3.5",
+        "transition-all",
+        "duration-200",
+        "bg-white/50",
+        "hover:bg-white/70",
+        "dark:bg-neutral-900/50",
+        "dark:hover:bg-neutral-900/70",
+        "hover:shadow-lg",
+        L({
+          selected: n,
+          partial: i
+        })
+      ),
+      onClick: g,
+      onKeyDown: T,
+      tabIndex: 0,
+      children: /* @__PURE__ */ e(D, { className: "px-3", children: /* @__PURE__ */ o("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: u(
+              "grid items-center gap-2",
+              "grid-cols-[20px_1fr_auto]",
+              m && "grid-cols-[1fr_auto]"
+            ),
+            children: [
+              !m && /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ e(
+                K,
+                {
+                  checked: n,
+                  onCheckedChange: (l) => h?.(!!l),
+                  onClick: (l) => l.stopPropagation(),
+                  ref: (l) => {
+                    if (l && i && !n) {
+                      const p = l.querySelector(
+                        'input[type="checkbox"]'
+                      );
+                      p && (p.indeterminate = !0);
+                    }
+                  },
+                  tabIndex: -1
+                }
+              ) }),
+              /* @__PURE__ */ e("div", { className: "mr-1.5 min-w-0", children: /* @__PURE__ */ o("div", { className: "flex min-w-0 items-center gap-3", children: [
+                /* @__PURE__ */ e("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__ */ e(t, { className: "size-6 text-neutral-700 dark:text-neutral-200" }) }),
+                /* @__PURE__ */ o("div", { className: "flex h-9 min-w-0 flex-col justify-center space-y-0.5", children: [
+                  /* @__PURE__ */ e("h3", { className: "truncate font-semibold text-base text-neutral-900 leading-tight dark:text-neutral-100", children: r }),
+                  a && /* @__PURE__ */ o("span", { className: "font-medium text-neutral-500 text-xs leading-tight dark:text-neutral-400", children: [
+                    "v",
+                    a
+                  ] })
+                ] })
+              ] }) }),
+              /* @__PURE__ */ e("div", { className: "mt-0.5 self-center justify-self-end", children: d ? /* @__PURE__ */ e(
+                S,
+                {
+                  indeterminate: b,
+                  name: r,
+                  onClick: () => d(),
+                  selectedCount: c,
+                  toolsCount: s
+                }
+              ) : /* @__PURE__ */ o(
+                "div",
+                {
+                  className: Q({
+                    indeterminate: b
+                  }),
+                  children: [
+                    /* @__PURE__ */ e(O, { className: "h-3 w-3" }),
+                    /* @__PURE__ */ e("span", { children: M(
+                      i,
+                      n,
+                      c,
+                      s
+                    ) })
+                  ]
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: u(m ? "ml-0" : "ml-8"), children: /* @__PURE__ */ e(
+          J,
+          {
+            isByoc: A,
+            isPro: I,
+            requirementsSummary: k
+          }
+        ) })
+      ] }) })
+    }
+  );
+}
+const Y = B([
+  "name",
+  "version",
+  "description",
+  "toolsCount",
+  "isSelected",
+  "isPartiallySelected",
+  "selectedToolsCount",
+  "Icon",
+  "requirementsSummary",
+  "isByoc",
+  "isPro",
+  "hideCheckbox"
+]), be = f.memo(
+  X,
+  Y
+);
+export {
+  H as O,
+  J as R,
+  G as S,
+  be as T
+};