nexus-shared 1.1.3 → 1.1.5

package/package.json

@@ -1,64 +1,26 @@
 {
   "name": "nexus-shared",
-  "version": "1.1.3",
-  "description": "Nexus-Core: Shared UI components, helpers, interfaces, and services",
-  "readme": "USER-GUIDE.md",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "version": "1.1.5",
+  "description": "Nexus shared React components for Next.js",
+  "type": "module",
+  "sideEffects": ["**/*.css"],
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    },
-    "./styles.css": "./dist/index.css"
-  },
-  "files": [
-    "dist",
-    "USER-GUIDE.md"
-  ],
-  "sideEffects": [
-    "**/*.css",
-    "./src/load-env.ts",
-    "./dist/index.js",
-    "./dist/index.cjs"
-  ],
-  "engines": {
-    "node": ">=24.15.0"
+    ".": "./src/index.ts",
+    "./interface": "./src/interface.ts",
+    "./server": "./src/server.ts",
+    "./client": "./src/client.ts"
   },
+  "files": ["src"],
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "prepublishOnly": "npm run build"
-  },
-  "keywords": [
-    "nexus",
-    "react",
-    "components"
-  ],
-  "author": "",
-  "license": "ISC",
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "dependencies": {
-    "dotenv": "^17.4.2"
+    "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "next": ">=16.2.6",
-    "react": ">=19.2.4",
-    "react-dom": ">=19.2.4"
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
   },
   "devDependencies": {
-    "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "next": "^16.2.6",
-    "react": "^19.2.6",
-    "react-dom": "^19.2.6",
-    "tsup": "^8.5.1",
     "typescript": "^5"
   }
 }

package/src/client/index.ts

@@ -0,0 +1 @@
+export { NexusSelectableList } from "./nexus-selectable-list";

package/src/client/nexus-selectable-list.css

@@ -0,0 +1,131 @@
+.nexus-selectable-list {
+  --nexus-select-bg: #12101a;
+  --nexus-select-surface: #1e1b28;
+  --nexus-select-border: #3d3654;
+  --nexus-select-accent: #a855f7;
+  --nexus-select-accent-dim: rgba(168, 85, 247, 0.15);
+  --nexus-select-text: #f4f0fa;
+  --nexus-select-muted: #9d94b0;
+
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+  background: var(--nexus-select-bg);
+  border: 1px solid var(--nexus-select-border);
+  border-radius: 12px;
+  padding: 1.25rem 1.5rem;
+  color: var(--nexus-select-text);
+  max-width: 32rem;
+}
+
+.nexus-selectable-list__header {
+  margin-bottom: 1rem;
+}
+
+.nexus-selectable-list__title {
+  margin: 0 0 0.75rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+
+.nexus-selectable-list__search {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0.625rem 0.875rem;
+  font-size: 0.875rem;
+  color: var(--nexus-select-text);
+  background: var(--nexus-select-surface);
+  border: 1px solid var(--nexus-select-border);
+  border-radius: 8px;
+  outline: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.nexus-selectable-list__search::placeholder {
+  color: var(--nexus-select-muted);
+}
+
+.nexus-selectable-list__search:focus {
+  border-color: var(--nexus-select-accent);
+  box-shadow: 0 0 0 3px var(--nexus-select-accent-dim);
+}
+
+.nexus-selectable-list__meta {
+  margin: 0.5rem 0 0;
+  font-size: 0.75rem;
+  color: var(--nexus-select-muted);
+}
+
+.nexus-selectable-list__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  max-height: 16rem;
+  overflow-y: auto;
+}
+
+.nexus-selectable-list__item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 0.75rem 1rem;
+  font: inherit;
+  color: inherit;
+  background: var(--nexus-select-surface);
+  border: 1px solid transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.nexus-selectable-list__item:hover {
+  border-color: var(--nexus-select-border);
+}
+
+.nexus-selectable-list__item--selected {
+  background: var(--nexus-select-accent-dim);
+  border-color: var(--nexus-select-accent);
+}
+
+.nexus-selectable-list__label {
+  display: block;
+  font-size: 0.9375rem;
+  font-weight: 500;
+}
+
+.nexus-selectable-list__description {
+  display: block;
+  margin-top: 0.2rem;
+  font-size: 0.8125rem;
+  color: var(--nexus-select-muted);
+  line-height: 1.35;
+}
+
+.nexus-selectable-list__empty {
+  margin: 0;
+  padding: 1.25rem;
+  text-align: center;
+  font-size: 0.875rem;
+  color: var(--nexus-select-muted);
+  background: var(--nexus-select-surface);
+  border-radius: 8px;
+}
+
+.nexus-selectable-list__detail {
+  margin-top: 1rem;
+  padding: 0.875rem 1rem;
+  background: var(--nexus-select-surface);
+  border-left: 3px solid var(--nexus-select-accent);
+  border-radius: 0 8px 8px 0;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+}
+
+.nexus-selectable-list__detail strong {
+  color: var(--nexus-select-accent);
+  font-weight: 600;
+}

package/src/client/nexus-selectable-list.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import type { NexusSelectableListProps } from "../interfaces/nexus-list";
+import "./nexus-selectable-list.css";
+
+/**
+ * Client component — filterable list with selection and detail preview.
+ */
+export function NexusSelectableList({
+  title,
+  items,
+  placeholder = "Filter items…",
+  emptyMessage = "No matching items.",
+  className,
+}: NexusSelectableListProps) {
+  const [query, setQuery] = useState("");
+  const [selectedId, setSelectedId] = useState<string | null>(
+    items[0]?.id ?? null,
+  );
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return items;
+    return items.filter(
+      (item) =>
+        item.label.toLowerCase().includes(q) ||
+        item.description?.toLowerCase().includes(q),
+    );
+  }, [items, query]);
+
+  const selected = items.find((item) => item.id === selectedId) ?? null;
+  const rootClass = className
+    ? `nexus-selectable-list ${className}`
+    : "nexus-selectable-list";
+
+  return (
+    <section
+      className={rootClass}
+      aria-labelledby="nexus-selectable-list-title"
+    >
+      <div className="nexus-selectable-list__header">
+        <h2 id="nexus-selectable-list-title" className="nexus-selectable-list__title">
+          {title}
+        </h2>
+        <input
+          type="search"
+          className="nexus-selectable-list__search"
+          placeholder={placeholder}
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          aria-label={`Filter ${title}`}
+        />
+        <p className="nexus-selectable-list__meta">
+          Showing {filtered.length} of {items.length}
+        </p>
+      </div>
+
+      {filtered.length === 0 ? (
+        <p className="nexus-selectable-list__empty">{emptyMessage}</p>
+      ) : (
+        <ul
+          className="nexus-selectable-list__list"
+          role="listbox"
+          aria-label={title}
+        >
+          {filtered.map((item) => {
+            const isSelected = item.id === selectedId;
+            const itemClass = isSelected
+              ? "nexus-selectable-list__item nexus-selectable-list__item--selected"
+              : "nexus-selectable-list__item";
+
+            return (
+              <li key={item.id} role="presentation">
+                <button
+                  type="button"
+                  role="option"
+                  aria-selected={isSelected}
+                  className={itemClass}
+                  onClick={() => setSelectedId(item.id)}
+                >
+                  <span className="nexus-selectable-list__label">
+                    {item.label}
+                  </span>
+                  {item.description ? (
+                    <span className="nexus-selectable-list__description">
+                      {item.description}
+                    </span>
+                  ) : null}
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+
+      {selected ? (
+        <div className="nexus-selectable-list__detail">
+          <strong>{selected.label}</strong>
+          {selected.description ? <> — {selected.description}</> : null}
+          {selected.value !== undefined && selected.value !== null ? (
+            <>
+              <br />
+              Value: <strong>{selected.value}</strong>
+            </>
+          ) : null}
+        </div>
+      ) : null}
+    </section>
+  );
+}

package/src/client.ts

@@ -0,0 +1,7 @@
+import "./client/nexus-selectable-list.css";
+
+/**
+ * Barrel entry for client components ('use client').
+ * Add exports here as you create modules under ./client/
+ */
+export * from "./client/index";

package/src/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Unified entry — re-exports interface, server, and client modules.
+ *
+ * Prefer subpath imports in client-only code:
+ * - `@nexus/core/interface`
+ * - `@nexus/core/server`
+ * - `@nexus/core/client`
+ */
+export * from "./interface";
+export * from "./server";
+export * from "./client";

package/src/interface.ts

@@ -0,0 +1,5 @@
+/**
+ * Barrel entry for all shared interfaces/types.
+ * Add exports here as you create modules under ./interfaces/
+ */
+export * from "./interfaces";

package/src/interfaces/index.ts

@@ -0,0 +1,6 @@
+export type { NexusBaseProps } from "./nexus-base.ts";
+export type {
+  NexusListItem,
+  NexusStatListProps,
+  NexusSelectableListProps,
+} from "./nexus-list";

package/src/interfaces/nexus-base.ts

@@ -0,0 +1,5 @@
+/** Base props shared across Nexus packages */
+export interface NexusBaseProps {
+  id?: string;
+  className?: string;
+}

package/src/interfaces/nexus-list.ts

@@ -0,0 +1,24 @@
+/** Single row/item used by Nexus list components */
+export interface NexusListItem {
+  id: string;
+  label: string;
+  description?: string;
+  value?: string | number;
+}
+
+/** Props for the server-rendered stat list */
+export interface NexusStatListProps {
+  title: string;
+  items: NexusListItem[];
+  emptyMessage?: string;
+  className?: string;
+}
+
+/** Props for the client-side selectable & filterable list */
+export interface NexusSelectableListProps {
+  title: string;
+  items: NexusListItem[];
+  placeholder?: string;
+  emptyMessage?: string;
+  className?: string;
+}

package/src/server/index.ts

@@ -0,0 +1 @@
+export { NexusStatList } from "./nexus-stat-list";

package/src/server/nexus-stat-list.css

@@ -0,0 +1,92 @@
+.nexus-stat-list {
+  --nexus-stat-bg: #0f1419;
+  --nexus-stat-surface: #1a2332;
+  --nexus-stat-border: #2d3a4f;
+  --nexus-stat-accent: #3b82f6;
+  --nexus-stat-text: #e8edf4;
+  --nexus-stat-muted: #8b9cb3;
+
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+  background: var(--nexus-stat-bg);
+  border: 1px solid var(--nexus-stat-border);
+  border-radius: 12px;
+  padding: 1.25rem 1.5rem;
+  color: var(--nexus-stat-text);
+  max-width: 28rem;
+}
+
+.nexus-stat-list__title {
+  margin: 0 0 1rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  color: var(--nexus-stat-text);
+  border-bottom: 2px solid var(--nexus-stat-accent);
+  padding-bottom: 0.5rem;
+  display: inline-block;
+}
+
+.nexus-stat-list__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.nexus-stat-list__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  background: var(--nexus-stat-surface);
+  border-radius: 8px;
+  border: 1px solid transparent;
+  transition: border-color 0.15s ease;
+}
+
+.nexus-stat-list__item:hover {
+  border-color: var(--nexus-stat-border);
+}
+
+.nexus-stat-list__label-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  min-width: 0;
+}
+
+.nexus-stat-list__label {
+  font-size: 0.9375rem;
+  font-weight: 500;
+  color: var(--nexus-stat-text);
+}
+
+.nexus-stat-list__description {
+  font-size: 0.8125rem;
+  color: var(--nexus-stat-muted);
+  line-height: 1.35;
+}
+
+.nexus-stat-list__value {
+  flex-shrink: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--nexus-stat-accent);
+  background: rgba(59, 130, 246, 0.12);
+  padding: 0.25rem 0.625rem;
+  border-radius: 6px;
+}
+
+.nexus-stat-list__empty {
+  margin: 0;
+  padding: 1.5rem;
+  text-align: center;
+  font-size: 0.875rem;
+  color: var(--nexus-stat-muted);
+  background: var(--nexus-stat-surface);
+  border-radius: 8px;
+  border: 1px dashed var(--nexus-stat-border);
+}

package/src/server/nexus-stat-list.tsx

@@ -0,0 +1,46 @@
+import type { NexusStatListProps } from "../interfaces/nexus-list";
+import "./nexus-stat-list.css";
+
+/**
+ * Server component — renders a read-only list of labeled items with optional values.
+ */
+export function NexusStatList({
+  title,
+  items,
+  emptyMessage = "No items to display.",
+  className,
+}: NexusStatListProps) {
+  const rootClass = className
+    ? `nexus-stat-list ${className}`
+    : "nexus-stat-list";
+
+  return (
+    <section className={rootClass} aria-labelledby="nexus-stat-list-title">
+      <h2 id="nexus-stat-list-title" className="nexus-stat-list__title">
+        {title}
+      </h2>
+
+      {items.length === 0 ? (
+        <p className="nexus-stat-list__empty">{emptyMessage}</p>
+      ) : (
+        <ul className="nexus-stat-list__list">
+          {items.map((item) => (
+            <li key={item.id} className="nexus-stat-list__item">
+              <div className="nexus-stat-list__label-group">
+                <span className="nexus-stat-list__label">{item.label}</span>
+                {item.description ? (
+                  <span className="nexus-stat-list__description">
+                    {item.description}
+                  </span>
+                ) : null}
+              </div>
+              {item.value !== undefined && item.value !== null ? (
+                <span className="nexus-stat-list__value">{item.value}</span>
+              ) : null}
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}

package/src/server.ts

@@ -0,0 +1,7 @@
+import "./server/nexus-stat-list.css";
+
+/**
+ * Barrel entry for server components and server utilities.
+ * Add exports here as you create modules under ./server/
+ */
+export * from "./server/index";