@nucleux/knowledge-base-picker 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nucleux
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,26 @@
+# @nucleux/knowledge-base-picker
+
+KnowledgeBasePicker — select the context files an agent may use — Nucleux agentic UI for React.
+
+Part of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** — agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).
+
+## Install
+
+```bash
+pnpm add @nucleux/knowledge-base-picker @nucleux/tokens
+```
+
+`react` / `react-dom` are peer dependencies.
+
+## Usage
+
+```tsx
+import { KnowledgeBasePicker } from "@nucleux/knowledge-base-picker";
+```
+
+Requires the theme once in your app: `import "@nucleux/tokens/styles.css";`
+and the Tailwind preset from `@nucleux/tokens/preset`.
+
+## License
+
+MIT © Nucleux

package/dist/index.cjs

@@ -0,0 +1,95 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var utils = require('@nucleux/utils');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/index.tsx
+var KnowledgeBasePicker = React__namespace.forwardRef(
+  ({ sources, value, defaultValue = [], onValueChange, heading = "Knowledge sources", className, ...props }, ref) => {
+    const [internal, setInternal] = React__namespace.useState(defaultValue);
+    const selected = value !== void 0 ? value : internal;
+    const toggle = (id) => {
+      const next = selected.includes(id) ? selected.filter((v) => v !== id) : [...selected, id];
+      if (value === void 0) setInternal(next);
+      onValueChange?.(next);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: utils.cn("flex flex-col gap-2 rounded-xl border border-border bg-background p-3", className),
+        ...props,
+        children: [
+          heading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: heading }),
+            selected.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+              selected.length,
+              " selected"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1", children: sources.map((source) => {
+            const active = selected.includes(source.id);
+            return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                role: "checkbox",
+                "aria-checked": active,
+                onClick: () => toggle(source.id),
+                className: utils.cn(
+                  "flex w-full items-center gap-3 rounded-lg border px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  active ? "border-brand bg-brand-muted/40" : "border-transparent hover:bg-accent"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground [&_svg]:size-4", children: source.icon ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { "aria-hidden": "true" }) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm font-medium text-foreground", children: source.name }),
+                    source.meta && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs text-muted-foreground", children: source.meta })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: utils.cn(
+                        "inline-flex size-5 shrink-0 items-center justify-center rounded-md border transition-colors [&_svg]:size-3.5",
+                        active ? "border-brand bg-brand text-brand-foreground" : "border-border"
+                      ),
+                      children: active && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { "aria-hidden": "true" })
+                    }
+                  )
+                ]
+              }
+            ) }, source.id);
+          }) })
+        ]
+      }
+    );
+  }
+);
+KnowledgeBasePicker.displayName = "KnowledgeBasePicker";
+
+exports.KnowledgeBasePicker = KnowledgeBasePicker;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":["React","jsxs","cn","jsx","FileText","Check"],"mappings":"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","file":"index.cjs","sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@nucleux/utils\";\nimport { FileText, Check } from \"lucide-react\";\n\nexport interface KnowledgeSource {\n  /** Stable id. */\n  id: string;\n  /** Source name, e.g. a filename. */\n  name: React.ReactNode;\n  /** Metadata line, e.g. `\"PDF · 12 pages\"`. */\n  meta?: React.ReactNode;\n  /** Leading icon. Defaults to a document glyph. */\n  icon?: React.ReactNode;\n}\n\nexport interface KnowledgeBasePickerProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** The available knowledge sources. */\n  sources: KnowledgeSource[];\n  /** Selected source ids (controlled). */\n  value?: string[];\n  /** Initial selection (uncontrolled). */\n  defaultValue?: string[];\n  /** Called when the selection changes. */\n  onValueChange?: (ids: string[]) => void;\n  /** Heading above the list. Defaults to `\"Knowledge sources\"`. */\n  heading?: React.ReactNode;\n}\n\n/**\n * A selectable list of context files/knowledge sources an agent may draw on —\n * curates the retrieval context for a turn.\n * Source: Figma \"Context Expansion / Knowledge Bases\".\n */\nexport const KnowledgeBasePicker = React.forwardRef<HTMLDivElement, KnowledgeBasePickerProps>(\n  ({ sources, value, defaultValue = [], onValueChange, heading = \"Knowledge sources\", className, ...props }, ref) => {\n    const [internal, setInternal] = React.useState<string[]>(defaultValue);\n    const selected = value !== undefined ? value : internal;\n    const toggle = (id: string) => {\n      const next = selected.includes(id) ? selected.filter((v) => v !== id) : [...selected, id];\n      if (value === undefined) setInternal(next);\n      onValueChange?.(next);\n    };\n    return (\n      <div\n        ref={ref}\n        className={cn(\"flex flex-col gap-2 rounded-xl border border-border bg-background p-3\", className)}\n        {...props}\n      >\n        {heading && (\n          <div className=\"flex items-center justify-between px-1\">\n            <p className=\"text-xs font-medium uppercase tracking-wide text-muted-foreground\">{heading}</p>\n            {selected.length > 0 && (\n              <span className=\"text-xs text-muted-foreground\">{selected.length} selected</span>\n            )}\n          </div>\n        )}\n        <ul className=\"flex flex-col gap-1\">\n          {sources.map((source) => {\n            const active = selected.includes(source.id);\n            return (\n              <li key={source.id}>\n                <button\n                  type=\"button\"\n                  role=\"checkbox\"\n                  aria-checked={active}\n                  onClick={() => toggle(source.id)}\n                  className={cn(\n                    \"flex w-full items-center gap-3 rounded-lg border px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n                    active ? \"border-brand bg-brand-muted/40\" : \"border-transparent hover:bg-accent\",\n                  )}\n                >\n                  <span className=\"inline-flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground [&_svg]:size-4\">\n                    {source.icon ?? <FileText aria-hidden=\"true\" />}\n                  </span>\n                  <span className=\"flex min-w-0 flex-1 flex-col\">\n                    <span className=\"truncate text-sm font-medium text-foreground\">{source.name}</span>\n                    {source.meta && <span className=\"truncate text-xs text-muted-foreground\">{source.meta}</span>}\n                  </span>\n                  <span\n                    className={cn(\n                      \"inline-flex size-5 shrink-0 items-center justify-center rounded-md border transition-colors [&_svg]:size-3.5\",\n                      active ? \"border-brand bg-brand text-brand-foreground\" : \"border-border\",\n                    )}\n                  >\n                    {active && <Check aria-hidden=\"true\" />}\n                  </span>\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n      </div>\n    );\n  },\n);\nKnowledgeBasePicker.displayName = \"KnowledgeBasePicker\";\n"]}

package/dist/index.d.cts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+interface KnowledgeSource {
+    /** Stable id. */
+    id: string;
+    /** Source name, e.g. a filename. */
+    name: React.ReactNode;
+    /** Metadata line, e.g. `"PDF · 12 pages"`. */
+    meta?: React.ReactNode;
+    /** Leading icon. Defaults to a document glyph. */
+    icon?: React.ReactNode;
+}
+interface KnowledgeBasePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** The available knowledge sources. */
+    sources: KnowledgeSource[];
+    /** Selected source ids (controlled). */
+    value?: string[];
+    /** Initial selection (uncontrolled). */
+    defaultValue?: string[];
+    /** Called when the selection changes. */
+    onValueChange?: (ids: string[]) => void;
+    /** Heading above the list. Defaults to `"Knowledge sources"`. */
+    heading?: React.ReactNode;
+}
+/**
+ * A selectable list of context files/knowledge sources an agent may draw on —
+ * curates the retrieval context for a turn.
+ * Source: Figma "Context Expansion / Knowledge Bases".
+ */
+declare const KnowledgeBasePicker: React.ForwardRefExoticComponent<KnowledgeBasePickerProps & React.RefAttributes<HTMLDivElement>>;
+
+export { KnowledgeBasePicker, type KnowledgeBasePickerProps, type KnowledgeSource };

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+interface KnowledgeSource {
+    /** Stable id. */
+    id: string;
+    /** Source name, e.g. a filename. */
+    name: React.ReactNode;
+    /** Metadata line, e.g. `"PDF · 12 pages"`. */
+    meta?: React.ReactNode;
+    /** Leading icon. Defaults to a document glyph. */
+    icon?: React.ReactNode;
+}
+interface KnowledgeBasePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** The available knowledge sources. */
+    sources: KnowledgeSource[];
+    /** Selected source ids (controlled). */
+    value?: string[];
+    /** Initial selection (uncontrolled). */
+    defaultValue?: string[];
+    /** Called when the selection changes. */
+    onValueChange?: (ids: string[]) => void;
+    /** Heading above the list. Defaults to `"Knowledge sources"`. */
+    heading?: React.ReactNode;
+}
+/**
+ * A selectable list of context files/knowledge sources an agent may draw on —
+ * curates the retrieval context for a turn.
+ * Source: Figma "Context Expansion / Knowledge Bases".
+ */
+declare const KnowledgeBasePicker: React.ForwardRefExoticComponent<KnowledgeBasePickerProps & React.RefAttributes<HTMLDivElement>>;
+
+export { KnowledgeBasePicker, type KnowledgeBasePickerProps, type KnowledgeSource };

package/dist/index.js

@@ -0,0 +1,73 @@
+"use client";
+import * as React from 'react';
+import { cn } from '@nucleux/utils';
+import { FileText, Check } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/index.tsx
+var KnowledgeBasePicker = React.forwardRef(
+  ({ sources, value, defaultValue = [], onValueChange, heading = "Knowledge sources", className, ...props }, ref) => {
+    const [internal, setInternal] = React.useState(defaultValue);
+    const selected = value !== void 0 ? value : internal;
+    const toggle = (id) => {
+      const next = selected.includes(id) ? selected.filter((v) => v !== id) : [...selected, id];
+      if (value === void 0) setInternal(next);
+      onValueChange?.(next);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-col gap-2 rounded-xl border border-border bg-background p-3", className),
+        ...props,
+        children: [
+          heading && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: heading }),
+            selected.length > 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+              selected.length,
+              " selected"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1", children: sources.map((source) => {
+            const active = selected.includes(source.id);
+            return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "checkbox",
+                "aria-checked": active,
+                onClick: () => toggle(source.id),
+                className: cn(
+                  "flex w-full items-center gap-3 rounded-lg border px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  active ? "border-brand bg-brand-muted/40" : "border-transparent hover:bg-accent"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "inline-flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground [&_svg]:size-4", children: source.icon ?? /* @__PURE__ */ jsx(FileText, { "aria-hidden": "true" }) }),
+                  /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+                    /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: source.name }),
+                    source.meta && /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: source.meta })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "inline-flex size-5 shrink-0 items-center justify-center rounded-md border transition-colors [&_svg]:size-3.5",
+                        active ? "border-brand bg-brand text-brand-foreground" : "border-border"
+                      ),
+                      children: active && /* @__PURE__ */ jsx(Check, { "aria-hidden": "true" })
+                    }
+                  )
+                ]
+              }
+            ) }, source.id);
+          }) })
+        ]
+      }
+    );
+  }
+);
+KnowledgeBasePicker.displayName = "KnowledgeBasePicker";
+
+export { KnowledgeBasePicker };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@nucleux/utils\";\nimport { FileText, Check } from \"lucide-react\";\n\nexport interface KnowledgeSource {\n  /** Stable id. */\n  id: string;\n  /** Source name, e.g. a filename. */\n  name: React.ReactNode;\n  /** Metadata line, e.g. `\"PDF · 12 pages\"`. */\n  meta?: React.ReactNode;\n  /** Leading icon. Defaults to a document glyph. */\n  icon?: React.ReactNode;\n}\n\nexport interface KnowledgeBasePickerProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** The available knowledge sources. */\n  sources: KnowledgeSource[];\n  /** Selected source ids (controlled). */\n  value?: string[];\n  /** Initial selection (uncontrolled). */\n  defaultValue?: string[];\n  /** Called when the selection changes. */\n  onValueChange?: (ids: string[]) => void;\n  /** Heading above the list. Defaults to `\"Knowledge sources\"`. */\n  heading?: React.ReactNode;\n}\n\n/**\n * A selectable list of context files/knowledge sources an agent may draw on —\n * curates the retrieval context for a turn.\n * Source: Figma \"Context Expansion / Knowledge Bases\".\n */\nexport const KnowledgeBasePicker = React.forwardRef<HTMLDivElement, KnowledgeBasePickerProps>(\n  ({ sources, value, defaultValue = [], onValueChange, heading = \"Knowledge sources\", className, ...props }, ref) => {\n    const [internal, setInternal] = React.useState<string[]>(defaultValue);\n    const selected = value !== undefined ? value : internal;\n    const toggle = (id: string) => {\n      const next = selected.includes(id) ? selected.filter((v) => v !== id) : [...selected, id];\n      if (value === undefined) setInternal(next);\n      onValueChange?.(next);\n    };\n    return (\n      <div\n        ref={ref}\n        className={cn(\"flex flex-col gap-2 rounded-xl border border-border bg-background p-3\", className)}\n        {...props}\n      >\n        {heading && (\n          <div className=\"flex items-center justify-between px-1\">\n            <p className=\"text-xs font-medium uppercase tracking-wide text-muted-foreground\">{heading}</p>\n            {selected.length > 0 && (\n              <span className=\"text-xs text-muted-foreground\">{selected.length} selected</span>\n            )}\n          </div>\n        )}\n        <ul className=\"flex flex-col gap-1\">\n          {sources.map((source) => {\n            const active = selected.includes(source.id);\n            return (\n              <li key={source.id}>\n                <button\n                  type=\"button\"\n                  role=\"checkbox\"\n                  aria-checked={active}\n                  onClick={() => toggle(source.id)}\n                  className={cn(\n                    \"flex w-full items-center gap-3 rounded-lg border px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n                    active ? \"border-brand bg-brand-muted/40\" : \"border-transparent hover:bg-accent\",\n                  )}\n                >\n                  <span className=\"inline-flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground [&_svg]:size-4\">\n                    {source.icon ?? <FileText aria-hidden=\"true\" />}\n                  </span>\n                  <span className=\"flex min-w-0 flex-1 flex-col\">\n                    <span className=\"truncate text-sm font-medium text-foreground\">{source.name}</span>\n                    {source.meta && <span className=\"truncate text-xs text-muted-foreground\">{source.meta}</span>}\n                  </span>\n                  <span\n                    className={cn(\n                      \"inline-flex size-5 shrink-0 items-center justify-center rounded-md border transition-colors [&_svg]:size-3.5\",\n                      active ? \"border-brand bg-brand text-brand-foreground\" : \"border-border\",\n                    )}\n                  >\n                    {active && <Check aria-hidden=\"true\" />}\n                  </span>\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n      </div>\n    );\n  },\n);\nKnowledgeBasePicker.displayName = \"KnowledgeBasePicker\";\n"]}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@nucleux/knowledge-base-picker",
+  "version": "0.1.1",
+  "type": "module",
+  "sideEffects": false,
+  "description": "KnowledgeBasePicker — select the context files an agent may use — Nucleux agentic UI for React.",
+  "keywords": [
+    "nucleux",
+    "react",
+    "ui",
+    "components",
+    "agentic",
+    "ai",
+    "tailwind",
+    "knowledge-base-picker"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "lucide-react": "^0.469.0",
+    "@nucleux/utils": "0.1.1"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "@types/react": "^18.3.18",
+    "react": "^18.3.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/intelligaia-open-labs/nucleux.git",
+    "directory": "packages/knowledge-base-picker"
+  },
+  "homepage": "https://github.com/intelligaia-open-labs/nucleux#readme",
+  "scripts": {
+    "build": "tsup"
+  }
+}