@arcadeai/design-system 3.27.0 → 3.27.1

package/dist/components/ui/molecules/date-time-picker.d.ts

@@ -0,0 +1,12 @@
+import { Calendar } from '../atoms/calendar';
+import { ComponentProps } from 'react';
+export type DateTimePickerProps = {
+    value?: Date;
+    onChange?: (date: Date | undefined) => void;
+    className?: string;
+} & Omit<ComponentProps<typeof Calendar>, "selected" | "onSelect" | "mode">;
+export declare function DateTimePicker({ value, onChange, className, ...calendarProps }: DateTimePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DateTimePicker {
+    var displayName: string;
+}
+//# sourceMappingURL=date-time-picker.d.ts.map

package/dist/components/ui/molecules/date-time-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-time-picker.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/date-time-picker.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAU5D,OAAO,EAAE,KAAK,cAAc,EAAY,MAAM,OAAO,CAAC;AAEtD,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC,CAAC;AAE5E,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,GAAG,aAAa,EACjB,EAAE,mBAAmB,2CAgErB;yBArEe,cAAc"}

package/dist/components/ui/molecules/date-time-picker.js

@@ -0,0 +1,84 @@
+import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import { Button as g } from "../atoms/button.js";
+import { f as k, C as w } from "../../../calendar-w1IATMME.js";
+import { Input as x } from "../atoms/input.js";
+import { Label as s } from "../atoms/label.js";
+import { Popover as N, PopoverTrigger as b, PopoverContent as D } from "../atoms/popover.js";
+import { ChevronDownIcon as v } from "lucide-react";
+import { useState as C } from "react";
+function P({
+  value: e,
+  onChange: a,
+  className: m,
+  ...l
+}) {
+  const [p, i] = C(!1), d = e ? k(e, "HH:mm:ss") : "";
+  return /* @__PURE__ */ r("div", { className: m, children: /* @__PURE__ */ t("div", { className: "flex gap-4", children: [
+    /* @__PURE__ */ t("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ t(s, { className: "px-1", htmlFor: "date-picker", children: [
+        "Date:",
+        " "
+      ] }),
+      /* @__PURE__ */ t(N, { onOpenChange: i, open: p, children: [
+        /* @__PURE__ */ r(b, { asChild: !0, children: /* @__PURE__ */ t(
+          g,
+          {
+            className: "w-32 justify-between font-normal",
+            id: "date-picker",
+            variant: "outline",
+            children: [
+              e ? e.toLocaleDateString() : "Select date",
+              /* @__PURE__ */ r(v, {})
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ r(
+          D,
+          {
+            align: "start",
+            className: "w-auto overflow-hidden p-0",
+            children: /* @__PURE__ */ r(
+              w,
+              {
+                captionLayout: "dropdown",
+                mode: "single",
+                onSelect: (o) => {
+                  a?.(o), i(!1);
+                },
+                selected: e,
+                ...l
+              }
+            )
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ t("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ t(s, { className: "px-1", htmlFor: "time-picker", children: [
+        "Time:",
+        " "
+      ] }),
+      /* @__PURE__ */ r(
+        x,
+        {
+          className: "appearance-none bg-background [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none",
+          id: "time-picker",
+          onChange: (o) => {
+            const n = o.target.value;
+            if (!(n && e))
+              return;
+            const [f, h, u] = n.split(":").map(Number), c = new Date(e);
+            c.setHours(f, h, u || 0), a?.(c);
+          },
+          step: "1",
+          type: "time",
+          value: d
+        }
+      )
+    ] })
+  ] }) });
+}
+P.displayName = "DateTimePicker";
+export {
+  P as DateTimePicker
+};

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

@@ -1,4 +1,5 @@
 /** biome-ignore-all lint/performance/noBarrelFile: Barrel files are acceptable for atomic component folders */
+export { DateTimePicker } from './date-time-picker';
 export { EmptyState } from './empty-state';
 export { RequirementBadges } from './requirement-badges';
 export { ToolCard } from './tool-card';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/index.ts"],"names":[],"mappings":"AAAA,+GAA+G;AAE/G,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/index.ts"],"names":[],"mappings":"AAAA,+GAA+G;AAE/G,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC"}

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

@@ -1,13 +1,15 @@
-import { EmptyState as e } from "./empty-state.js";
-import { R as m, T as a } from "../../../toolkit-card-CsV6xoOG.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";
+import { DateTimePicker as e } from "./date-time-picker.js";
+import { EmptyState as m } from "./empty-state.js";
+import { R as a, T as p } from "../../../toolkit-card-Qou74oWg.js";
+import { ToolCard as f } from "./tool-card.js";
+import { ToolkitPickerTrigger as k } from "./toolkit-picker-trigger.js";
+import { ToolkitSelectionSummary as c } from "./toolkit-selection-summary.js";
 export {
-  e as EmptyState,
-  m as RequirementBadges,
-  p as ToolCard,
-  a as ToolkitCard,
-  f as ToolkitPickerTrigger,
-  x as ToolkitSelectionSummary
+  e as DateTimePicker,
+  m as EmptyState,
+  a as RequirementBadges,
+  f as ToolCard,
+  p as ToolkitCard,
+  k as ToolkitPickerTrigger,
+  c as ToolkitSelectionSummary
 };

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

@@ -3,21 +3,22 @@ import "../../../utils-6KgZuQUR.js";
 import "lucide-react";
 import "../atoms/badge.js";
 import "../atoms/byoc-badge.js";
+import "react";
 import "../atoms/chart.js";
 import "../atoms/mobile-tooltip.js";
 import "../atoms/pro-badge.js";
 import "../../../react-resizable-panels.browser-31wAXhAV.js";
 import "../atoms/sidebar.js";
-import "react";
 import "../atoms/tooltip.js";
-import { O as n, R as q, S as x } from "../../../toolkit-card-CsV6xoOG.js";
+import "./date-time-picker.js";
+import { O as q, R as x, S as A } from "../../../toolkit-card-Qou74oWg.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 {
-  n as OAuthBadge,
-  q as RequirementBadges,
-  x as SecretsBadge
+  q as OAuthBadge,
+  x as RequirementBadges,
+  A as SecretsBadge
 };

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

@@ -1 +1 @@
-{"version":3,"file":"toolkit-card.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/toolkit-card.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAI9D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAG7C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,mBAAmB,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;IAC7D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAgD3D,iBAAS,eAAe,CAAC,EACvB,IAAI,EACJ,OAAO,EACP,UAAU,EACV,IAAgC,EAChC,UAAkB,EAClB,mBAA2B,EAC3B,kBAAsB,EACtB,mBAAmB,EACnB,QAAQ,EACR,MAAM,EACN,YAAoB,EACpB,MAAM,EACN,KAAK,EACL,GAAG,IAAI,EACR,EAAE,gBAAgB,eAiJlB;AAmBD,eAAO,MAAM,WAAW,mDAGvB,CAAC"}
+{"version":3,"file":"toolkit-card.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/toolkit-card.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAI9D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAG7C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,mBAAmB,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;IAC7D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAgD3D,iBAAS,eAAe,CAAC,EACvB,IAAI,EACJ,OAAO,EACP,UAAU,EACV,IAAgC,EAChC,UAAkB,EAClB,mBAA2B,EAC3B,kBAAsB,EACtB,mBAAmB,EACnB,QAAQ,EACR,MAAM,EACN,YAAoB,EACpB,MAAM,EACN,KAAK,EACL,GAAG,IAAI,EACR,EAAE,gBAAgB,eAkJlB;AAmBD,eAAO,MAAM,WAAW,mDAGvB,CAAC"}

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

@@ -6,7 +6,7 @@ import "../../../utils-6KgZuQUR.js";
 import "../../../index-r7CUvu2m.js";
 import "lucide-react";
 import "react";
-import { T as k } from "../../../toolkit-card-CsV6xoOG.js";
+import { T as k } from "../../../toolkit-card-Qou74oWg.js";
 import "../utils/memo.js";
 export {
   k as ToolkitCard

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

@@ -2,16 +2,17 @@ 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 "react";
 import "../atoms/chart.js";
 import "../../../react-resizable-panels.browser-31wAXhAV.js";
 import "../atoms/sidebar.js";
-import "react";
-import "../../../toolkit-card-CsV6xoOG.js";
+import "./date-time-picker.js";
+import "../../../toolkit-card-Qou74oWg.js";
 import "./tool-card.js";
 import { getToolkitIcon as z } from "../../../metadata/toolkit-icons.js";
 import "../organisms/toolkit-picker/hooks/use-toolkit-picker.js";
 const j = 3;
-function _({
+function D({
   selectedToolkits: s,
   selectedTools: n,
   onClear: N,
@@ -111,5 +112,5 @@ function _({
   );
 }
 export {
-  _ as ToolkitSelectionSummary
+  D as ToolkitSelectionSummary
 };

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

@@ -1,18 +1,19 @@
 import { jsxs as d, jsx as e } from "react/jsx-runtime";
 import { Search as y } from "lucide-react";
 import "../../../atoms/mobile-tooltip.js";
+import { useRef as T } from "react";
 import "../../../atoms/chart.js";
-import { Input as T } from "../../../atoms/input.js";
+import { Input as k } from "../../../atoms/input.js";
 import "../../../../../react-resizable-panels.browser-31wAXhAV.js";
 import "../../../atoms/sidebar.js";
-import { useRef as k } from "react";
-import "../../../../../toolkit-card-CsV6xoOG.js";
+import "../../../molecules/date-time-picker.js";
+import "../../../../../toolkit-card-Qou74oWg.js";
 import "../../../molecules/tool-card.js";
 import "../../../../../metadata/oauth-providers.js";
 import "../../../../../metadata/toolkits.js";
 import { useToolkitPicker as g } from "../hooks/use-toolkit-picker.js";
-function z() {
-  const r = k(null), {
+function C() {
+  const r = T(null), {
     state: {
       searchQuery: o,
       activeTab: i,
@@ -22,26 +23,26 @@ function z() {
     },
     setSearchQuery: n,
     toggleToolkit: c,
-    toggleTool: u,
-    setActiveTab: m,
-    setToolkitFilter: f
-  } = g(), p = () => {
+    toggleTool: m,
+    setActiveTab: u,
+    setToolkitFilter: p
+  } = g(), f = () => {
     const t = Array.from(s)[0];
     if (t) {
       if (a === "single") {
-        f(t.name), m("tools");
+        p(t.name), u("tools");
         return;
       }
       c(t);
     }
   }, h = () => {
     const t = Array.from(l)[0];
-    t && u(t);
+    t && m(t);
   };
   return /* @__PURE__ */ d("div", { className: "relative flex-1", children: [
     /* @__PURE__ */ e(y, { className: "absolute top-1/2 left-3.5 size-4 -translate-y-1/2 text-gray-400" }),
     /* @__PURE__ */ e(
-      T,
+      k,
       {
         "aria-label": "Search toolkits and tools",
         autoFocus: !0,
@@ -51,7 +52,7 @@ function z() {
         onKeyDown: (t) => {
           if (!(t.key !== "Enter" || !(o.trim().length > 0))) {
             if (t.preventDefault(), t.stopPropagation(), i === "toolkits") {
-              p();
+              f();
               return;
             }
             h();
@@ -65,5 +66,5 @@ function z() {
   ] });
 }
 export {
-  z as SearchInput
+  C as SearchInput
 };

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

@@ -1 +1 @@
-{"version":3,"file":"select-button.d.ts","sourceRoot":"","sources":["../../../../../../lib/components/ui/organisms/toolkit-picker/components/select-button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,KAAK,iBAAiB,GAAG;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,aAAa,EACb,aAAa,EACb,QAAQ,EACR,SAAS,GACV,EAAE,iBAAiB,2CAuBnB"}
+{"version":3,"file":"select-button.d.ts","sourceRoot":"","sources":["../../../../../../lib/components/ui/organisms/toolkit-picker/components/select-button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,KAAK,iBAAiB,GAAG;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,aAAa,EACb,aAAa,EACb,QAAQ,EACR,SAAS,GACV,EAAE,iBAAiB,2CA2BnB"}

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

@@ -2,33 +2,34 @@ 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 "react";
 import "../../../atoms/chart.js";
 import "../../../../../react-resizable-panels.browser-31wAXhAV.js";
 import "../../../atoms/sidebar.js";
-import "react";
-import "../../../../../toolkit-card-CsV6xoOG.js";
+import "../../../molecules/date-time-picker.js";
+import "../../../../../toolkit-card-Qou74oWg.js";
 import "../../../molecules/tool-card.js";
 import "../../../../../metadata/oauth-providers.js";
 import "../../../../../metadata/toolkits.js";
 import "../hooks/use-toolkit-picker.js";
-function L({
+function $({
   selectionMode: t,
   selectedCount: o,
-  onCommit: r,
-  className: i
+  onCommit: i,
+  className: r
 }) {
   return /* @__PURE__ */ m(
     n,
     {
-      className: i,
+      className: r,
       "data-testid": "use-tools-button",
-      disabled: o === 0,
-      onClick: r,
+      disabled: t === "single" && o === 0,
+      onClick: i,
       size: "sm",
       children: t === "single" ? "Select Tool" : o === 0 ? "Select Tools" : `Use ${o} ${o === 1 ? "Tool" : "Tools"}`
     }
   );
 }
 export {
-  L as SelectButton
+  $ as SelectButton
 };

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

@@ -1,5 +1,5 @@
 import { jsx as m } from "react/jsx-runtime";
-import { T as c } from "../../../../../toolkit-card-CsV6xoOG.js";
+import { T as c } from "../../../../../toolkit-card-Qou74oWg.js";
 import { getToolkitIcon as d } from "../../../../../metadata/toolkit-icons.js";
 function g({
   toolkit: e,

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

@@ -1,7 +1,9 @@
+import { RefObject } from 'react';
 import { SelectionMode } from '../index';
 type ToolkitListProps = {
     selectionMode: SelectionMode;
+    scrollContainerRef: RefObject<HTMLDivElement | null>;
 };
-export declare function ToolkitList({ selectionMode }: ToolkitListProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToolkitList({ selectionMode, scrollContainerRef, }: ToolkitListProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=toolkit-list.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"toolkit-list.d.ts","sourceRoot":"","sources":["../../../../../../lib/components/ui/organisms/toolkit-picker/components/toolkit-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAG9C,KAAK,gBAAgB,GAAG;IACtB,aAAa,EAAE,aAAa,CAAC;CAC9B,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAAE,aAAa,EAAE,EAAE,gBAAgB,2CAkG9D"}
+{"version":3,"file":"toolkit-list.d.ts","sourceRoot":"","sources":["../../../../../../lib/components/ui/organisms/toolkit-picker/components/toolkit-list.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAM9C,KAAK,gBAAgB,GAAG;IACtB,aAAa,EAAE,aAAa,CAAC;IAC7B,kBAAkB,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACtD,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,aAAa,EACb,kBAAkB,GACnB,EAAE,gBAAgB,2CAqJlB"}

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

@@ -1,90 +1,142 @@
-import { jsx as t, jsxs as l } from "react/jsx-runtime";
-import { EmptyState as k } from "../../../molecules/empty-state.js";
-import "../../../../../toolkit-card-CsV6xoOG.js";
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import { VirtualizedGrid as u } from "../../../atoms/virtualized-grid.js";
+import "../../../molecules/date-time-picker.js";
+import { EmptyState as w } from "../../../molecules/empty-state.js";
+import "../../../../../toolkit-card-Qou74oWg.js";
 import "../../../molecules/tool-card.js";
 import "../../../../../metadata/oauth-providers.js";
 import "../../../../../metadata/toolkits.js";
 import "lucide-react";
-import { useToolkitPicker as f } from "../hooks/use-toolkit-picker.js";
+import { useToolkitPicker as S } from "../hooks/use-toolkit-picker.js";
 import "../../../atoms/mobile-tooltip.js";
+import { useMemo as v } from "react";
 import "../../../atoms/chart.js";
 import "../../../../../react-resizable-panels.browser-31wAXhAV.js";
 import "../../../atoms/sidebar.js";
-import "react";
-import { ToolkitCardWithSelection as h } from "./toolkit-card-with-selection.js";
-function F({ selectionMode: s }) {
+import { useColumns as C } from "../../../../../hooks/use-columns.js";
+import { FEATURED_TOOLKITS as R } from "../hooks/featured-toolkits.js";
+import { ToolkitCardWithSelection as A } from "./toolkit-card-with-selection.js";
+const x = 156;
+function J({
+  selectionMode: f,
+  scrollContainerRef: d
+}) {
   const {
-    state: { filteredToolkits: i, selectedToolkits: r, selectedTools: a },
-    toggleToolkit: x,
-    setActiveTab: d,
-    setToolkitFilter: n
-  } = f();
-  if (i.size === 0)
+    state: { filteredToolkits: m, selectedToolkits: l, selectedTools: T, searchQuery: o },
+    toggleToolkit: y,
+    setActiveTab: h,
+    setToolkitFilter: k
+  } = S(), n = C(), { selectedToolkitItems: a, featuredToolkitItems: i, unselectedToolkitItems: c } = v(() => {
+    const e = Array.from(m), g = new Set(
+      R.map((r) => r.toLowerCase())
+    ), N = e.filter(
+      (r) => l.has(r.name)
+    ), I = e.filter(
+      (r) => !(l.has(r.name) || o.trim()) && g.has(r.name.toLowerCase())
+    ), b = e.filter(
+      (r) => !l.has(r.name) && (o.trim() || !g.has(r.name.toLowerCase()))
+    );
+    return {
+      selectedToolkitItems: N,
+      featuredToolkitItems: I,
+      unselectedToolkitItems: b
+    };
+  }, [m, o, l]);
+  if (m.size === 0)
     return /* @__PURE__ */ t(
-      k,
+      w,
       {
         "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(
+  const p = (e) => /* @__PURE__ */ t(
+    A,
+    {
+      onSelect: (g) => {
+        if (f === "single") {
+          h("tools"), k(e.name);
+          return;
+        }
+        y(e);
+      },
+      onView: () => {
+        k(e.name), h("tools");
+      },
+      selectedTools: new Set(T.keys()),
+      selectionMode: f,
+      toolkit: e
+    },
+    e.name
+  );
+  return /* @__PURE__ */ s("div", { className: "space-y-4", "data-testid": "toolkits-grid", children: [
+    a.length > 0 && /* @__PURE__ */ s("div", { className: "space-y-3", "data-testid": "selected-toolkits-section", children: [
+      /* @__PURE__ */ s("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: a.length })
+      ] }),
+      /* @__PURE__ */ t(
+        u,
+        {
+          columns: n,
+          estimateRowSize: x,
+          getItemKey: (e) => e.name,
+          gridClassName: "grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3",
+          items: a,
+          parentRef: d,
+          renderItem: p,
+          rowGapPx: 12
+        }
+      )
+    ] }),
+    !o.trim() && i.length > 0 && /* @__PURE__ */ s(
       "div",
       {
-        className: "mt-0.5 space-y-2",
-        "data-testid": "selected-toolkits-section",
+        className: "space-y-3 rounded-lg bg-neutral-50 p-4 dark:bg-neutral-900",
+        "data-testid": "featured-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__ */ s("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: "Featured 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: i.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,
+          /* @__PURE__ */ t(
+            u,
             {
-              onSelect: p(e),
-              onView: g(e),
-              selectedTools: new Set(a.keys()),
-              selectionMode: s,
-              toolkit: e
-            },
-            e.name
-          )) })
+              columns: n,
+              estimateRowSize: x,
+              getItemKey: (e) => e.name,
+              gridClassName: "grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3",
+              items: i,
+              parentRef: d,
+              renderItem: p,
+              rowGapPx: 12
+            }
+          )
         ]
       }
     ),
-    /* @__PURE__ */ l("div", { className: "space-y-2", children: [
-      o.length > 0 && /* @__PURE__ */ l("div", { className: "flex items-center gap-1.5", children: [
+    c.length > 0 && /* @__PURE__ */ s("div", { className: "space-y-3", children: [
+      (a.length > 0 || i.length > 0) && /* @__PURE__ */ s("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,
+      /* @__PURE__ */ t(
+        u,
         {
-          onSelect: p(e),
-          onView: g(e),
-          selectedTools: new Set(a.keys()),
-          selectionMode: s,
-          toolkit: e
-        },
-        e.name
-      )) })
+          columns: n,
+          estimateRowSize: x,
+          getItemKey: (e) => e.name,
+          gridClassName: "grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3",
+          items: c,
+          parentRef: d,
+          renderItem: p,
+          rowGapPx: 12
+        }
+      )
     ] })
   ] });
 }
 export {
-  F as ToolkitList
+  J as ToolkitList
 };

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

@@ -1,7 +1,9 @@
+import { RefObject } from 'react';
 import { SelectionMode } from '../index';
 type ToolsListProps = {
     selectionMode: SelectionMode;
+    scrollContainerRef: RefObject<HTMLDivElement | null>;
 };
-export declare function ToolsList({ selectionMode }: ToolsListProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToolsList({ selectionMode, scrollContainerRef, }: ToolsListProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=tools-list.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tools-list.d.ts","sourceRoot":"","sources":["../../../../../../lib/components/ui/organisms/toolkit-picker/components/tools-list.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,KAAK,cAAc,GAAG;IACpB,aAAa,EAAE,aAAa,CAAC;CAC9B,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,aAAa,EAAE,EAAE,cAAc,2CAuG1D"}
+{"version":3,"file":"tools-list.d.ts","sourceRoot":"","sources":["../../../../../../lib/components/ui/organisms/toolkit-picker/components/tools-list.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAK9C,KAAK,cAAc,GAAG;IACpB,aAAa,EAAE,aAAa,CAAC;IAC7B,kBAAkB,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACtD,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,aAAa,EACb,kBAAkB,GACnB,EAAE,cAAc,2CAsGhB"}