@arcadeai/design-system 2.1.1 → 2.3.0

package/dist/main.js

@@ -148,7 +148,7 @@ import { Textarea as Km } from "./components/ui/atoms/textarea.js";
 import { Toggle as Zm, toggleVariants as Qm } from "./components/ui/atoms/toggle.js";
 import { Tooltip as jm, TooltipContent as $m, TooltipProvider as oi, TooltipTrigger as ri } from "./components/ui/atoms/tooltip.js";
 import { EmptyState as ti } from "./components/ui/molecules/empty-state.js";
-import { R as ai, T as mi } from "./toolkit-card-DgjPGtsJ.js";
+import { R as ai, T as mi } from "./toolkit-card-BWuG_NJi.js";
 import { ToolCard as li } from "./components/ui/molecules/tool-card.js";
 import { ToolkitPickerTrigger as xi } from "./components/ui/molecules/toolkit-picker-trigger.js";
 import { ToolkitSelectionSummary as di } from "./components/ui/molecules/toolkit-selection-summary.js";

package/dist/{toolkit-card-DgjPGtsJ.js → toolkit-card-BWuG_NJi.js}

@@ -1,4 +1,4 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { jsxs as d, 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";
@@ -20,19 +20,19 @@ import { areStringArraysEqual as x, createPropsComparator as B } from "./compone
 import "./metadata/toolkits.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: [
+  const a = (r.pending?.length ?? 0) > 0, s = /* @__PURE__ */ d("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: [
+    (r.configured?.length ?? 0) > 0 && /* @__PURE__ */ d("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: [
+    (r.pending?.length ?? 0) > 0 && /* @__PURE__ */ d("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(
+  return /* @__PURE__ */ d(y, { children: [
+    /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ d(
       N,
       {
         className: u(
@@ -49,17 +49,17 @@ const _ = ({ secrets: r }) => {
     /* @__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: [
+  const a = r.providers.filter((i) => i.status === "active").length, t = r.providers.length - a > 0, n = /* @__PURE__ */ d("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: [
+    r.providers.map((i) => /* @__PURE__ */ d("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(
+  return /* @__PURE__ */ d(y, { children: [
+    /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ d(
       N,
       {
         className: u(
@@ -84,7 +84,7 @@ function W({
   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: [
+  return /* @__PURE__ */ d("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" }),
@@ -119,11 +119,11 @@ const G = f.memo(_, (r, a) => r.secrets === a.secrets ? !0 : !(!(r.secrets && a.
 ), 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",
+      true: "border-2 border-emerald-600 dark:border-emerald-400",
       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",
+      true: "border-2 border-emerald-600 border-dashed dark:border-emerald-400",
       false: ""
     }
   },
@@ -139,7 +139,7 @@ const G = f.memo(_, (r, a) => r.secrets === a.secrets ? !0 : !(!(r.secrets && a.
   {
     variants: {
       indeterminate: {
-        true: "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-200",
+        true: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-200",
         false: "bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-200"
       }
     }
@@ -155,21 +155,21 @@ function X({
   selectedToolsCount: c = 0,
   requirementsSummary: b,
   onSelect: h,
-  onView: d,
+  onView: o,
   hideCheckbox: m = !1,
   isByoc: A,
   isPro: I,
   ...q
 }) {
   const g = f.useCallback(() => {
-    if (m && d) {
-      d();
+    if (m && o) {
+      o();
       return;
     }
     h?.(!n);
-  }, [m, n, h, d]), T = (l) => {
+  }, [m, n, h, o]), 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());
+    (p || E) && (l.preventDefault(), g()), (l.key === "ArrowRight" || l.code === "ArrowRight") && o && (l.preventDefault(), o());
   }, k = i && !n;
   return /* @__PURE__ */ e(
     P,
@@ -200,8 +200,8 @@ function X({
       onClick: g,
       onKeyDown: T,
       tabIndex: 0,
-      children: /* @__PURE__ */ e(D, { className: "px-3", children: /* @__PURE__ */ o("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ o(
+      children: /* @__PURE__ */ e(D, { className: "px-3", children: /* @__PURE__ */ d("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ d(
           "div",
           {
             className: u(
@@ -227,26 +227,26 @@ function X({
                   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: "mr-1.5 min-w-0", children: /* @__PURE__ */ d("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__ */ d("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: [
+                  a && /* @__PURE__ */ d("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(
+              /* @__PURE__ */ e("div", { className: "mt-0.5 self-center justify-self-end", children: o ? /* @__PURE__ */ e(
                 S,
                 {
                   indeterminate: k,
                   name: r,
-                  onClick: () => d(),
+                  onClick: () => o(),
                   selectedCount: c,
                   toolsCount: s
                 }
-              ) : /* @__PURE__ */ o(
+              ) : /* @__PURE__ */ d(
                 "div",
                 {
                   className: Q({

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arcadeai/design-system",
   "private": false,
-  "version": "2.1.1",
+  "version": "2.3.0",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",