@lablup/ui-common 0.1.0-alpha.0

package/dist/components/DataTable/DataTable2.js

@@ -0,0 +1,276 @@
+/* empty css          */
+import { memo as e, useCallback as t, useEffect as n, useMemo as r, useRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/DataTable/DataTable.tsx
+var c = "dataTable";
+function l(e) {
+	return `${c}.${e}`;
+}
+function u(e) {
+	if (!e || typeof window > "u") return {
+		widths: {},
+		visibility: {}
+	};
+	try {
+		let t = window.localStorage.getItem(l(e));
+		if (!t) return {
+			widths: {},
+			visibility: {}
+		};
+		let n = JSON.parse(t);
+		if (typeof n != "object" || !n) return {
+			widths: {},
+			visibility: {}
+		};
+		let r = n;
+		return {
+			widths: typeof r.widths == "object" && r.widths !== null ? r.widths : {},
+			visibility: typeof r.visibility == "object" && r.visibility !== null ? r.visibility : {}
+		};
+	} catch {
+		return {
+			widths: {},
+			visibility: {}
+		};
+	}
+}
+function d(e, t) {
+	if (!(!e || typeof window > "u")) try {
+		window.localStorage.setItem(l(e), JSON.stringify(t));
+	} catch {}
+}
+function f(e, t) {
+	let n = e.map((e, t) => ({
+		row: e,
+		i: t
+	}));
+	return n.sort((e, n) => {
+		let r = t(e.row, n.row);
+		return r === 0 ? e.i - n.i : r;
+	}), n.map(({ row: e }) => e);
+}
+function p(e, t) {
+	let { sortComparator: n } = e;
+	if (n) return (e, r) => n(e, r, t);
+	let r = e.sortValueAccessor;
+	return r ? (e, n) => {
+		let i = r(e), a = r(n);
+		if (i == null && a == null) return 0;
+		if (i == null) return 1;
+		if (a == null) return -1;
+		let o;
+		return o = typeof i == "number" && typeof a == "number" ? i - a : String(i).localeCompare(String(a)), t === "asc" ? o : -o;
+	} : () => 0;
+}
+function m(e, t, n) {
+	if (e.sortable) return e.id === t ? n === "asc" ? "ascending" : "descending" : "none";
+}
+function h({ direction: e }) {
+	return e === "none" ? /* @__PURE__ */ o("span", {
+		className: "data-table__sort-icon data-table__sort-icon--none",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ s("svg", {
+			width: "10",
+			height: "14",
+			viewBox: "0 0 10 14",
+			fill: "none",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [/* @__PURE__ */ o("path", {
+				d: "M5 1L1 5H9L5 1Z",
+				fill: "currentColor",
+				opacity: "0.35"
+			}), /* @__PURE__ */ o("path", {
+				d: "M5 13L9 9H1L5 13Z",
+				fill: "currentColor",
+				opacity: "0.35"
+			})]
+		})
+	}) : e === "asc" ? /* @__PURE__ */ o("span", {
+		className: "data-table__sort-icon data-table__sort-icon--asc",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ s("svg", {
+			width: "10",
+			height: "14",
+			viewBox: "0 0 10 14",
+			fill: "none",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [/* @__PURE__ */ o("path", {
+				d: "M5 1L1 5H9L5 1Z",
+				fill: "currentColor"
+			}), /* @__PURE__ */ o("path", {
+				d: "M5 13L9 9H1L5 13Z",
+				fill: "currentColor",
+				opacity: "0.25"
+			})]
+		})
+	}) : /* @__PURE__ */ o("span", {
+		className: "data-table__sort-icon data-table__sort-icon--desc",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ s("svg", {
+			width: "10",
+			height: "14",
+			viewBox: "0 0 10 14",
+			fill: "none",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [/* @__PURE__ */ o("path", {
+				d: "M5 1L1 5H9L5 1Z",
+				fill: "currentColor",
+				opacity: "0.25"
+			}), /* @__PURE__ */ o("path", {
+				d: "M5 13L9 9H1L5 13Z",
+				fill: "currentColor"
+			})]
+		})
+	});
+}
+function g({ columns: e, rows: c, getRowKey: l, emptyState: g, loadingState: _, loading: v = !1, persistKey: y, className: b = "", ariaLabel: x = "Data table", testId: S, onRowClick: C, sortColumnId: w, sortDirection: T, onSortChange: E }) {
+	let [D, O] = a(() => u(y));
+	n(() => {
+		O(u(y));
+	}, [y]);
+	let k = w !== void 0 || T !== void 0, [A, j] = a(void 0), [M, N] = a(void 0), P = k ? w : A, F = k ? T : M, I = t((e) => {
+		if (!e.sortable) return;
+		let t, n;
+		P === e.id ? F === (e.defaultSortDirection ?? "asc") ? (t = e.id, n = F === "asc" ? "desc" : "asc") : (t = void 0, n = void 0) : (t = e.id, n = e.defaultSortDirection ?? "asc"), k || (j(t), N(n)), E?.(t, n);
+	}, [
+		P,
+		F,
+		k,
+		E
+	]), L = r(() => e.filter((e) => e.alwaysVisible ? !0 : D.visibility[e.id] !== !1), [e, D.visibility]), R = t((e) => {
+		let t = D.widths[e.id];
+		return typeof t == "number" && t > 0 ? t : e.initialWidth;
+	}, [D.widths]), z = i(null), B = t((e, t, n) => {
+		if (t.noResize) return;
+		e.preventDefault(), e.stopPropagation(), z.current = {
+			columnId: t.id,
+			startX: e.clientX,
+			startWidth: n,
+			minWidth: t.minWidth ?? 80
+		};
+		let r = (e) => {
+			let t = z.current;
+			if (!t) return;
+			let n = e.clientX - t.startX, r = Math.max(t.minWidth, t.startWidth + n);
+			O((e) => ({
+				...e,
+				widths: {
+					...e.widths,
+					[t.columnId]: r
+				}
+			}));
+		}, i = () => {
+			z.current = null, window.removeEventListener("mousemove", r), window.removeEventListener("mouseup", i);
+		};
+		window.addEventListener("mousemove", r), window.addEventListener("mouseup", i);
+	}, []);
+	n(() => {
+		d(y, D);
+	}, [y, D]);
+	let V = r(() => {
+		if (!P || !F) return c;
+		let t = e.find((e) => e.id === P);
+		return t?.sortable ? f(c, p(t, F)) : c;
+	}, [
+		c,
+		e,
+		P,
+		F
+	]), H = ["data-table", b].filter(Boolean).join(" ");
+	return /* @__PURE__ */ o("div", {
+		className: H,
+		"data-testid": S,
+		children: /* @__PURE__ */ s("table", {
+			className: "data-table__table",
+			"aria-label": x,
+			role: "table",
+			children: [/* @__PURE__ */ o("thead", {
+				className: "data-table__head",
+				children: /* @__PURE__ */ o("tr", {
+					className: "data-table__row data-table__row--head",
+					children: L.map((e) => {
+						let t = R(e), n = e.sortable && e.id === P;
+						return /* @__PURE__ */ s("th", {
+							scope: "col",
+							className: [
+								"data-table__cell",
+								"data-table__cell--head",
+								e.sortable && "data-table__cell--sortable",
+								n && "data-table__cell--sort-active",
+								e.className,
+								e.align && `data-table__cell--align-${e.align}`
+							].filter(Boolean).join(" "),
+							style: t ? { width: `${String(t)}px` } : void 0,
+							"aria-sort": m(e, P, F),
+							onClick: e.sortable ? () => {
+								I(e);
+							} : void 0,
+							onKeyDown: e.sortable ? (t) => {
+								(t.key === "Enter" || t.key === " ") && (t.preventDefault(), I(e));
+							} : void 0,
+							tabIndex: e.sortable ? 0 : void 0,
+							children: [
+								/* @__PURE__ */ o("span", {
+									className: "data-table__head-label",
+									children: e.header
+								}),
+								e.sortable && /* @__PURE__ */ o(h, { direction: n && F ? F : "none" }),
+								!e.noResize && /* @__PURE__ */ o("div", {
+									role: "separator",
+									"aria-orientation": "vertical",
+									className: "data-table__resize-handle",
+									onMouseDown: (n) => {
+										B(n, e, t ?? e.minWidth ?? 120);
+									}
+								})
+							]
+						}, e.id);
+					})
+				})
+			}), /* @__PURE__ */ o("tbody", {
+				className: "data-table__body",
+				children: v ? /* @__PURE__ */ o("tr", {
+					className: "data-table__row data-table__row--state",
+					children: /* @__PURE__ */ o("td", {
+						colSpan: L.length || 1,
+						className: "data-table__state-cell",
+						children: _ ?? /* @__PURE__ */ o("div", { className: "data-table__loading" })
+					})
+				}) : V.length === 0 ? /* @__PURE__ */ o("tr", {
+					className: "data-table__row data-table__row--state",
+					children: /* @__PURE__ */ o("td", {
+						colSpan: L.length || 1,
+						className: "data-table__state-cell",
+						children: g
+					})
+				}) : V.map((e, t) => {
+					let n = l(e, t);
+					return /* @__PURE__ */ o("tr", {
+						className: ["data-table__row", C && "data-table__row--clickable"].filter(Boolean).join(" "),
+						onClick: C ? () => {
+							C(e);
+						} : void 0,
+						onKeyDown: C ? (t) => {
+							(t.key === "Enter" || t.key === " ") && (t.preventDefault(), C(e));
+						} : void 0,
+						tabIndex: C ? 0 : void 0,
+						role: C ? "button" : void 0,
+						children: L.map((n) => /* @__PURE__ */ o("td", {
+							className: [
+								"data-table__cell",
+								n.className,
+								n.align && `data-table__cell--align-${n.align}`
+							].filter(Boolean).join(" "),
+							children: n.render(e, t)
+						}, n.id))
+					}, n);
+				})
+			})]
+		})
+	});
+}
+var _ = e(g);
+//#endregion
+export { _ as DataTable, _ as default };
+
+//# sourceMappingURL=DataTable2.js.map

package/dist/components/DataTable/DataTable2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable2.js","names":[],"sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["/**\n * DataTable Component (epic #2730 / issue #2738 · sort: epic #2859 / issue #2861)\n *\n * Generic, type-safe table primitive modeled after the Backend.AI WebUI\n * `BAITable`. Designed so future menus (Models, Sessions, Data, ...)\n * can share one tabular surface instead of inventing a new one each\n * time.\n *\n * Features (V1 — additional capabilities planned for follow-up issues):\n * - Type-safe column definitions with custom cell renderers\n * - Optional column-visibility persistence via `localStorage` when\n *   `persistKey` is supplied\n * - Optional resizable columns (drag the right edge of a header cell)\n *   with widths persisted alongside visibility\n * - Empty-state slot rendered when `rows` is empty\n * - Loading-state slot rendered when `loading` is `true`\n * - Stable `getRowKey` accessor so rows with the same identifier remain\n *   referentially identical across event-driven updates\n *\n * Sorting (V2 — epic #2859 / issue #2861):\n * - Optional per-column sortable flag with sort value accessor or\n *   custom comparator\n * - Optional defaultSortDirection per column\n * - Controlled (`sortColumnId` + `sortDirection` + `onSortChange`) and\n *   uncontrolled (internal state) modes\n * - Accessible `aria-sort` attributes on header cells\n * - Keyboard activation (Enter / Space) for sortable headers\n * - Stable sort — equal-valued rows retain their original order\n * - Sorting never mutates the original `rows` prop\n *\n * The component is intentionally domain-agnostic — it MUST NOT carry\n * Session, Model, or Agent-specific knowledge. The first consumer is\n * `SessionListTable` (epic #2730 / #2738) but the API is generic.\n */\n\nimport {\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport \"./DataTable.css\";\n\n// ============================================================================\n// Public types\n// ============================================================================\n\n/** Direction a column is currently sorted. */\nexport type SortDirection = \"asc\" | \"desc\";\n\nexport interface DataTableColumn<T> {\n  /** Unique identifier for the column. Used for visibility + width persistence. */\n  id: string;\n  /** Header label. */\n  header: ReactNode;\n  /**\n   * Cell renderer. Receives the row and returns a React node. Pure\n   * functions are encouraged so memoization stays effective.\n   */\n  render: (row: T, index: number) => ReactNode;\n  /** Optional minimum column width in pixels. Defaults to 80. */\n  minWidth?: number;\n  /** Optional initial width in pixels (only honored on the first paint). */\n  initialWidth?: number;\n  /** When `true`, the column cannot be resized. Defaults to `false`. */\n  noResize?: boolean;\n  /** When `true`, the column cannot be hidden by the user. Defaults to `false`. */\n  alwaysVisible?: boolean;\n  /** Extra `class` for the column's `<th>` and `<td>` cells. */\n  className?: string;\n  /**\n   * When provided, the value is exposed via the `align` style on the\n   * column's cells. Useful for right-aligned numeric columns.\n   */\n  align?: \"left\" | \"right\" | \"center\";\n\n  // ---- Sorting API (added epic #2859 / issue #2861) -------------------------\n\n  /**\n   * When `true`, the column header renders a sort affordance and clicking\n   * (or pressing Enter / Space) cycles through ascending → descending →\n   * unsorted states. Defaults to `false`.\n   */\n  sortable?: boolean;\n  /**\n   * Extracts a primitive comparable value from a row for sorting purposes.\n   * Used when the default ascending/descending behavior is sufficient.\n   * Mutually exclusive with `sortComparator` — if both are provided,\n   * `sortComparator` takes precedence.\n   *\n   * @example\n   * ```tsx\n   * sortValueAccessor: (row) => row.name.toLowerCase()\n   * ```\n   */\n  sortValueAccessor?: (row: T) => string | number | boolean | null | undefined;\n  /**\n   * Custom comparator used for sorting. Receives two rows and the active\n   * sort direction. Return a negative number if `a` should come first, a\n   * positive number if `b` should come first, or `0` if they are equal.\n   * The table applies a stable fallback on `0` to preserve original order.\n   *\n   * @example\n   * ```tsx\n   * sortComparator: (a, b, dir) =>\n   *   dir === \"asc\"\n   *     ? a.createdAt - b.createdAt\n   *     : b.createdAt - a.createdAt\n   * ```\n   */\n  sortComparator?: (a: T, b: T, direction: SortDirection) => number;\n  /**\n   * The sort direction applied when this column is first activated.\n   * Defaults to `\"asc\"`.\n   */\n  defaultSortDirection?: SortDirection;\n}\n\nexport interface DataTablePersistedState {\n  /** column id → user-overridden width in pixels. */\n  widths: Record<string, number>;\n  /** column id → visibility flag. Missing keys count as visible. */\n  visibility: Record<string, boolean>;\n}\n\nexport interface DataTableProps<T> {\n  /** Column definitions, in display order. */\n  columns: DataTableColumn<T>[];\n  /** Row data. */\n  rows: T[];\n  /**\n   * Stable identifier accessor — used as the React key for each row.\n   * Must be deterministic for the lifetime of the row.\n   */\n  getRowKey: (row: T, index: number) => string;\n  /** Render this node when `rows` is empty. */\n  emptyState?: ReactNode;\n  /** Render this node when `loading` is `true`. */\n  loadingState?: ReactNode;\n  /** When `true`, the loading slot replaces the table body. */\n  loading?: boolean;\n  /**\n   * When provided, column widths and visibility settings are persisted\n   * to `localStorage` under this key. Use a stable, namespaced string\n   * (e.g. `\"sessions.activeTab\"`).\n   */\n  persistKey?: string;\n  /** Extra class for the table's wrapping element. */\n  className?: string;\n  /** ARIA label for the table. Defaults to \"Data table\". */\n  ariaLabel?: string;\n  /** Test ID for testing harnesses. */\n  testId?: string;\n  /**\n   * Callback invoked when a row is clicked. When provided, rows render\n   * with a clickable affordance (cursor: pointer + keyboard binding).\n   */\n  onRowClick?: (row: T) => void;\n\n  // ---- Sorting props (added epic #2859 / issue #2861) -----------------------\n\n  /**\n   * Controlled — the column currently being sorted. Pass `undefined` to\n   * indicate no active sort. When this prop is present, the component\n   * operates in controlled mode: the caller is responsible for updating\n   * the sort state via `onSortChange`.\n   */\n  sortColumnId?: string;\n  /**\n   * Controlled — the direction of the active sort. Ignored when\n   * `sortColumnId` is `undefined`.\n   */\n  sortDirection?: SortDirection;\n  /**\n   * Called when the user activates a sortable column header. In\n   * controlled mode the caller must propagate this back as\n   * `sortColumnId` / `sortDirection`. In uncontrolled mode this prop is\n   * purely observational.\n   *\n   * @param columnId  The column being sorted, or `undefined` when the\n   *                  sort is cleared.\n   * @param direction The new direction.\n   */\n  onSortChange?: (\n    columnId: string | undefined,\n    direction: SortDirection | undefined,\n  ) => void;\n}\n\n// ============================================================================\n// Storage helpers\n// ============================================================================\n\nconst STORAGE_NAMESPACE = \"dataTable\";\n\nfunction buildStorageKey(persistKey: string): string {\n  return `${STORAGE_NAMESPACE}.${persistKey}`;\n}\n\n/**\n * Load persisted state from `localStorage`. Returns an empty state on\n * any failure (missing storage, malformed JSON, schema drift) so the\n * component degrades gracefully.\n */\nfunction loadPersistedState(persistKey: string | undefined): DataTablePersistedState {\n  if (!persistKey || typeof window === \"undefined\") {\n    return { widths: {}, visibility: {} };\n  }\n  try {\n    const raw = window.localStorage.getItem(buildStorageKey(persistKey));\n    if (!raw) return { widths: {}, visibility: {} };\n    const parsed = JSON.parse(raw) as unknown;\n    if (typeof parsed !== \"object\" || parsed === null) {\n      return { widths: {}, visibility: {} };\n    }\n    const obj = parsed as { widths?: unknown; visibility?: unknown };\n    const widths =\n      typeof obj.widths === \"object\" && obj.widths !== null\n        ? (obj.widths as Record<string, number>)\n        : {};\n    const visibility =\n      typeof obj.visibility === \"object\" && obj.visibility !== null\n        ? (obj.visibility as Record<string, boolean>)\n        : {};\n    return { widths, visibility };\n  } catch {\n    return { widths: {}, visibility: {} };\n  }\n}\n\nfunction savePersistedState(\n  persistKey: string | undefined,\n  state: DataTablePersistedState,\n): void {\n  if (!persistKey || typeof window === \"undefined\") return;\n  try {\n    window.localStorage.setItem(buildStorageKey(persistKey), JSON.stringify(state));\n  } catch {\n    // Quota exceeded / disabled storage — silently ignore.\n  }\n}\n\n// ============================================================================\n// Sorting helpers\n// ============================================================================\n\n/**\n * Stable sort — rows with equal comparison result keep their original\n * relative order. We achieve stability by augmenting each row with its\n * original index and using that as a tie-breaker.\n *\n * The input array is never mutated.\n */\nfunction stableSort<T>(rows: T[], comparator: (a: T, b: T) => number): T[] {\n  const indexed = rows.map((row, i) => ({ row, i }));\n  indexed.sort((a, b) => {\n    const result = comparator(a.row, b.row);\n    return result !== 0 ? result : a.i - b.i;\n  });\n  return indexed.map(({ row }) => row);\n}\n\n/**\n * Builds a comparator from a `DataTableColumn` + active sort direction.\n * Falls back to string comparison when neither `sortComparator` nor\n * `sortValueAccessor` is provided on the column.\n */\nfunction buildComparator<T>(\n  col: DataTableColumn<T>,\n  direction: SortDirection,\n): (a: T, b: T) => number {\n  const { sortComparator } = col;\n  if (sortComparator) {\n    return (a, b) => sortComparator(a, b, direction);\n  }\n  const accessor = col.sortValueAccessor;\n  if (accessor) {\n    return (a, b) => {\n      const av = accessor(a);\n      const bv = accessor(b);\n      // Nullish values sort last regardless of direction.\n      if (av == null && bv == null) return 0;\n      if (av == null) return 1;\n      if (bv == null) return -1;\n      let cmp: number;\n      if (typeof av === \"number\" && typeof bv === \"number\") {\n        cmp = av - bv;\n      } else {\n        cmp = String(av).localeCompare(String(bv));\n      }\n      return direction === \"asc\" ? cmp : -cmp;\n    };\n  }\n  // No accessor — unsortable in practice (column should not be sortable).\n  return () => 0;\n}\n\n/**\n * Returns the `aria-sort` attribute value for a column header cell.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort\n */\nfunction ariaSortValue(\n  col: DataTableColumn<unknown>,\n  activeSortColumnId: string | undefined,\n  activeSortDirection: SortDirection | undefined,\n): \"ascending\" | \"descending\" | \"none\" | undefined {\n  if (!col.sortable) return undefined;\n  if (col.id === activeSortColumnId) {\n    return activeSortDirection === \"asc\" ? \"ascending\" : \"descending\";\n  }\n  return \"none\";\n}\n\n// Sort indicator icons rendered as inline SVG so there is no external\n// asset dependency. They intentionally reuse design-token colours so they\n// automatically adapt to light / dark themes.\n\nfunction SortIcon({ direction }: { direction: SortDirection | \"none\" }) {\n  if (direction === \"none\") {\n    // Neutral chevron stack — both arrows in muted colour\n    return (\n      <span\n        className=\"data-table__sort-icon data-table__sort-icon--none\"\n        aria-hidden=\"true\"\n      >\n        <svg\n          width=\"10\"\n          height=\"14\"\n          viewBox=\"0 0 10 14\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5 1L1 5H9L5 1Z\" fill=\"currentColor\" opacity=\"0.35\" />\n          <path d=\"M5 13L9 9H1L5 13Z\" fill=\"currentColor\" opacity=\"0.35\" />\n        </svg>\n      </span>\n    );\n  }\n  if (direction === \"asc\") {\n    return (\n      <span\n        className=\"data-table__sort-icon data-table__sort-icon--asc\"\n        aria-hidden=\"true\"\n      >\n        <svg\n          width=\"10\"\n          height=\"14\"\n          viewBox=\"0 0 10 14\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5 1L1 5H9L5 1Z\" fill=\"currentColor\" />\n          <path d=\"M5 13L9 9H1L5 13Z\" fill=\"currentColor\" opacity=\"0.25\" />\n        </svg>\n      </span>\n    );\n  }\n  return (\n    <span\n      className=\"data-table__sort-icon data-table__sort-icon--desc\"\n      aria-hidden=\"true\"\n    >\n      <svg\n        width=\"10\"\n        height=\"14\"\n        viewBox=\"0 0 10 14\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path d=\"M5 1L1 5H9L5 1Z\" fill=\"currentColor\" opacity=\"0.25\" />\n        <path d=\"M5 13L9 9H1L5 13Z\" fill=\"currentColor\" />\n      </svg>\n    </span>\n  );\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nfunction DataTableInner<T>({\n  columns,\n  rows,\n  getRowKey,\n  emptyState,\n  loadingState,\n  loading = false,\n  persistKey,\n  className = \"\",\n  ariaLabel = \"Data table\",\n  testId,\n  onRowClick,\n  // Sorting (controlled)\n  sortColumnId: controlledSortColumnId,\n  sortDirection: controlledSortDirection,\n  onSortChange,\n}: DataTableProps<T>) {\n  // ---- Persisted state (widths + visibility) -------------------------------\n  const [persisted, setPersisted] = useState<DataTablePersistedState>(() =>\n    loadPersistedState(persistKey),\n  );\n\n  // Refresh persisted state when the storage key changes (defensive — the\n  // expected use case is a stable key).\n  useEffect(() => {\n    setPersisted(loadPersistedState(persistKey));\n  }, [persistKey]);\n\n  // ---- Sorting state (uncontrolled fallback) -------------------------------\n  //\n  // Controlled mode is detected by the presence of `sortColumnId` as a prop\n  // (the caller explicitly manages the sort column). Using only this prop as\n  // the signal (rather than OR-ing with `sortDirection`) avoids a\n  // pathological state where `sortDirection` is set but `sortColumnId` is\n  // not, which would enter controlled mode with no sort effect.\n  //\n  // Note: TypeScript cannot distinguish \"prop not passed\" from \"prop passed\n  // as undefined\", so we rely on the convention that controlled callers\n  // always pass both `sortColumnId` and `sortDirection` together.\n  const isControlled =\n    controlledSortColumnId !== undefined || controlledSortDirection !== undefined;\n\n  const [internalSortColumnId, setInternalSortColumnId] = useState<string | undefined>(\n    undefined,\n  );\n  const [internalSortDirection, setInternalSortDirection] = useState<\n    SortDirection | undefined\n  >(undefined);\n\n  const activeSortColumnId = isControlled\n    ? controlledSortColumnId\n    : internalSortColumnId;\n  const activeSortDirection = isControlled\n    ? controlledSortDirection\n    : internalSortDirection;\n\n  /** Handle a click / keypress on a sortable column header. */\n  const handleSortToggle = useCallback(\n    (col: DataTableColumn<T>) => {\n      if (!col.sortable) return;\n\n      let nextColumnId: string | undefined;\n      let nextDirection: SortDirection | undefined;\n\n      if (activeSortColumnId !== col.id) {\n        // Activate this column in its default direction.\n        nextColumnId = col.id;\n        nextDirection = col.defaultSortDirection ?? \"asc\";\n      } else if (activeSortDirection === (col.defaultSortDirection ?? \"asc\")) {\n        // Flip to the opposite direction.\n        nextColumnId = col.id;\n        nextDirection = activeSortDirection === \"asc\" ? \"desc\" : \"asc\";\n      } else {\n        // Already in the non-default direction — clear the sort.\n        nextColumnId = undefined;\n        nextDirection = undefined;\n      }\n\n      if (!isControlled) {\n        setInternalSortColumnId(nextColumnId);\n        setInternalSortDirection(nextDirection);\n      }\n      onSortChange?.(nextColumnId, nextDirection);\n    },\n    [activeSortColumnId, activeSortDirection, isControlled, onSortChange],\n  );\n\n  // ---- Visibility computation (column always-visible wins) -----------------\n  const visibleColumns = useMemo(\n    () =>\n      columns.filter((col) => {\n        if (col.alwaysVisible) return true;\n        const flag = persisted.visibility[col.id];\n        return flag !== false;\n      }),\n    [columns, persisted.visibility],\n  );\n\n  // ---- Width resolution ----------------------------------------------------\n  const resolveWidth = useCallback(\n    (col: DataTableColumn<T>): number | undefined => {\n      const persistedWidth = persisted.widths[col.id];\n      if (typeof persistedWidth === \"number\" && persistedWidth > 0) {\n        return persistedWidth;\n      }\n      return col.initialWidth;\n    },\n    [persisted.widths],\n  );\n\n  // ---- Resize handling -----------------------------------------------------\n  const resizeRef = useRef<{\n    columnId: string;\n    startX: number;\n    startWidth: number;\n    minWidth: number;\n  } | null>(null);\n\n  const beginResize = useCallback(\n    (\n      ev: React.MouseEvent<HTMLDivElement>,\n      col: DataTableColumn<T>,\n      currentWidth: number,\n    ) => {\n      if (col.noResize) return;\n      ev.preventDefault();\n      ev.stopPropagation();\n      resizeRef.current = {\n        columnId: col.id,\n        startX: ev.clientX,\n        startWidth: currentWidth,\n        minWidth: col.minWidth ?? 80,\n      };\n\n      const onMove = (e: MouseEvent) => {\n        const ref = resizeRef.current;\n        if (!ref) return;\n        const delta = e.clientX - ref.startX;\n        const next = Math.max(ref.minWidth, ref.startWidth + delta);\n        setPersisted((prev) => ({\n          ...prev,\n          widths: { ...prev.widths, [ref.columnId]: next },\n        }));\n      };\n      const onUp = () => {\n        resizeRef.current = null;\n        window.removeEventListener(\"mousemove\", onMove);\n        window.removeEventListener(\"mouseup\", onUp);\n      };\n      window.addEventListener(\"mousemove\", onMove);\n      window.addEventListener(\"mouseup\", onUp);\n    },\n    [],\n  );\n\n  // Persist when state changes\n  useEffect(() => {\n    savePersistedState(persistKey, persisted);\n  }, [persistKey, persisted]);\n\n  // ---- Sorted rows --------------------------------------------------------\n  const sortedRows = useMemo(() => {\n    if (!activeSortColumnId || !activeSortDirection) return rows;\n    const col = columns.find((c) => c.id === activeSortColumnId);\n    if (!col?.sortable) return rows;\n    return stableSort(rows, buildComparator(col, activeSortDirection));\n  }, [rows, columns, activeSortColumnId, activeSortDirection]);\n\n  // ---- Body rendering ------------------------------------------------------\n  const composedClassName = [\"data-table\", className].filter(Boolean).join(\" \");\n\n  const renderBody = () => {\n    if (loading) {\n      return (\n        <tr className=\"data-table__row data-table__row--state\">\n          <td colSpan={visibleColumns.length || 1} className=\"data-table__state-cell\">\n            {loadingState ?? <div className=\"data-table__loading\" />}\n          </td>\n        </tr>\n      );\n    }\n    if (sortedRows.length === 0) {\n      return (\n        <tr className=\"data-table__row data-table__row--state\">\n          <td colSpan={visibleColumns.length || 1} className=\"data-table__state-cell\">\n            {emptyState}\n          </td>\n        </tr>\n      );\n    }\n    return sortedRows.map((row, index) => {\n      const key = getRowKey(row, index);\n      return (\n        <tr\n          key={key}\n          className={[\"data-table__row\", onRowClick && \"data-table__row--clickable\"]\n            .filter(Boolean)\n            .join(\" \")}\n          onClick={\n            onRowClick\n              ? () => {\n                  onRowClick(row);\n                }\n              : undefined\n          }\n          onKeyDown={\n            onRowClick\n              ? (e) => {\n                  if (e.key === \"Enter\" || e.key === \" \") {\n                    e.preventDefault();\n                    onRowClick(row);\n                  }\n                }\n              : undefined\n          }\n          tabIndex={onRowClick ? 0 : undefined}\n          role={onRowClick ? \"button\" : undefined}\n        >\n          {visibleColumns.map((col) => (\n            <td\n              key={col.id}\n              className={[\n                \"data-table__cell\",\n                col.className,\n                col.align && `data-table__cell--align-${col.align}`,\n              ]\n                .filter(Boolean)\n                .join(\" \")}\n            >\n              {col.render(row, index)}\n            </td>\n          ))}\n        </tr>\n      );\n    });\n  };\n\n  return (\n    <div className={composedClassName} data-testid={testId}>\n      <table className=\"data-table__table\" aria-label={ariaLabel} role=\"table\">\n        <thead className=\"data-table__head\">\n          <tr className=\"data-table__row data-table__row--head\">\n            {visibleColumns.map((col) => {\n              const width = resolveWidth(col);\n              const isSortActive = col.sortable && col.id === activeSortColumnId;\n\n              return (\n                <th\n                  key={col.id}\n                  scope=\"col\"\n                  className={[\n                    \"data-table__cell\",\n                    \"data-table__cell--head\",\n                    col.sortable && \"data-table__cell--sortable\",\n                    isSortActive && \"data-table__cell--sort-active\",\n                    col.className,\n                    col.align && `data-table__cell--align-${col.align}`,\n                  ]\n                    .filter(Boolean)\n                    .join(\" \")}\n                  style={width ? { width: `${String(width)}px` } : undefined}\n                  aria-sort={ariaSortValue(\n                    col as DataTableColumn<unknown>,\n                    activeSortColumnId,\n                    activeSortDirection,\n                  )}\n                  onClick={\n                    col.sortable\n                      ? () => {\n                          handleSortToggle(col);\n                        }\n                      : undefined\n                  }\n                  onKeyDown={\n                    col.sortable\n                      ? (e) => {\n                          if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault();\n                            handleSortToggle(col);\n                          }\n                        }\n                      : undefined\n                  }\n                  tabIndex={col.sortable ? 0 : undefined}\n                >\n                  <span className=\"data-table__head-label\">{col.header}</span>\n                  {col.sortable && (\n                    <SortIcon\n                      direction={\n                        isSortActive && activeSortDirection\n                          ? activeSortDirection\n                          : \"none\"\n                      }\n                    />\n                  )}\n                  {!col.noResize && (\n                    <div\n                      role=\"separator\"\n                      aria-orientation=\"vertical\"\n                      className=\"data-table__resize-handle\"\n                      onMouseDown={(e) => {\n                        beginResize(e, col, width ?? col.minWidth ?? 120);\n                      }}\n                    />\n                  )}\n                </th>\n              );\n            })}\n          </tr>\n        </thead>\n        <tbody className=\"data-table__body\">{renderBody()}</tbody>\n      </table>\n    </div>\n  );\n}\n\n// Memoize while preserving the generic signature.\nexport const DataTable = memo(DataTableInner) as typeof DataTableInner;\n\nexport default DataTable;\n"],"mappings":"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"}

package/dist/components/DataTable/index.d.ts

@@ -0,0 +1,2 @@
+export { DataTable, default } from './DataTable';
+export type { DataTableColumn, DataTableProps, DataTablePersistedState, SortDirection, } from './DataTable';

package/dist/components/DataTable/index.js

@@ -0,0 +1,2 @@
+import { DataTable as e } from "./DataTable2.js";
+export { e as DataTable, e as default };

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,25 @@
+export interface DrawerProps {
+    /** Whether the drawer is open */
+    isOpen: boolean;
+    /** Callback when drawer should close */
+    onClose: () => void;
+    /** Drawer title */
+    title: React.ReactNode;
+    /** Optional subtitle */
+    subtitle?: React.ReactNode;
+    /** Drawer width preset or custom CSS width value */
+    width?: "narrow" | "medium" | "wide" | (string & Record<never, never>);
+    /** Drawer content */
+    children: React.ReactNode;
+    /** Optional footer content */
+    footer?: React.ReactNode;
+    /** Additional CSS class for drawer panel */
+    className?: string;
+    /** ARIA labelledby ID (defaults to internal title ID) */
+    ariaLabelledBy?: string;
+    /** ARIA describedby ID (defaults to internal subtitle ID if subtitle exists) */
+    ariaDescribedBy?: string;
+    /** Accessible label for the close button. Default: "Close" */
+    closeLabel?: string;
+}
+export declare function Drawer({ isOpen, onClose, title, subtitle, width, children, footer, className, ariaLabelledBy, ariaDescribedBy, closeLabel, }: DrawerProps): import("react").JSX.Element;

package/dist/components/Drawer/Drawer2.js

@@ -0,0 +1,106 @@
+/* empty css       */
+import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/Drawer/Drawer.tsx
+var o = {
+	narrow: "400px",
+	medium: "520px",
+	wide: "900px"
+};
+function s({ isOpen: s, onClose: c, title: l, subtitle: u, width: d = "medium", children: f, footer: p, className: m = "", ariaLabelledBy: h, ariaDescribedBy: g, closeLabel: _ = "Close" }) {
+	let v = n(null), y = n(null), b = n(null), [x, S] = r(!1), C = n(!1);
+	t(() => {
+		s && !C.current ? (C.current = !0, requestAnimationFrame(() => {
+			requestAnimationFrame(() => {
+				S(!0);
+			});
+		})) : S(!!s);
+	}, [s]);
+	let w = s && x, T = d in o ? o[d] : d, E = h || "drawer-title", D = g || (u ? "drawer-subtitle" : void 0);
+	t(() => {
+		if (!s) return;
+		y.current = document.activeElement;
+		let e = v.current;
+		if (!e) return;
+		requestAnimationFrame(() => {
+			b.current?.focus();
+		});
+		let t = e.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])"), n = t[0], r = t[t.length - 1], i = (e) => {
+			if (e.key === "Escape") {
+				c();
+				return;
+			}
+			e.key === "Tab" && (e.shiftKey ? document.activeElement === n && (e.preventDefault(), r?.focus()) : document.activeElement === r && (e.preventDefault(), n?.focus()));
+		};
+		return e.addEventListener("keydown", i), () => {
+			e.removeEventListener("keydown", i), y.current && y.current.focus();
+		};
+	}, [s, c]);
+	let O = e((e) => {
+		e.target === e.currentTarget && c();
+	}, [c]);
+	return /* @__PURE__ */ i("div", {
+		className: `drawer__backdrop ${w ? "drawer__backdrop--open" : ""}`,
+		onClick: O,
+		role: "presentation",
+		"aria-hidden": !s,
+		children: /* @__PURE__ */ a("aside", {
+			ref: v,
+			className: `drawer ${w ? "drawer--open" : ""} ${m}`,
+			style: {
+				width: T,
+				maxWidth: "100vw"
+			},
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": E,
+			"aria-describedby": D,
+			children: [
+				/* @__PURE__ */ a("header", {
+					className: "drawer__header",
+					children: [/* @__PURE__ */ a("div", {
+						className: "drawer__title-row",
+						children: [/* @__PURE__ */ i("h2", {
+							id: E,
+							className: "drawer__title",
+							children: l
+						}), /* @__PURE__ */ i("button", {
+							ref: b,
+							type: "button",
+							className: "drawer__close-btn",
+							onClick: c,
+							"aria-label": _,
+							children: /* @__PURE__ */ a("svg", {
+								width: "20",
+								height: "20",
+								viewBox: "0 0 24 24",
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: "2",
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								children: [/* @__PURE__ */ i("path", { d: "M18 6L6 18" }), /* @__PURE__ */ i("path", { d: "M6 6l12 12" })]
+							})
+						})]
+					}), u && /* @__PURE__ */ i("p", {
+						id: D,
+						className: "drawer__subtitle",
+						children: u
+					})]
+				}),
+				/* @__PURE__ */ i("div", {
+					className: "drawer__content",
+					children: f
+				}),
+				p && /* @__PURE__ */ i("footer", {
+					className: "drawer__footer",
+					children: p
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { s as Drawer };
+
+//# sourceMappingURL=Drawer2.js.map

package/dist/components/Drawer/Drawer2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer2.js","names":[],"sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["/**\n * Drawer Component\n *\n * A reusable right-side drawer panel with backdrop, animations, and accessibility features.\n * Consolidates common patterns from all drawer implementations.\n */\n\nimport { useEffect, useRef, useCallback, useState } from \"react\";\nimport \"./Drawer.css\";\n\nexport interface DrawerProps {\n  /** Whether the drawer is open */\n  isOpen: boolean;\n  /** Callback when drawer should close */\n  onClose: () => void;\n  /** Drawer title */\n  title: React.ReactNode;\n  /** Optional subtitle */\n  subtitle?: React.ReactNode;\n  /** Drawer width preset or custom CSS width value */\n  width?: \"narrow\" | \"medium\" | \"wide\" | (string & Record<never, never>);\n  /** Drawer content */\n  children: React.ReactNode;\n  /** Optional footer content */\n  footer?: React.ReactNode;\n  /** Additional CSS class for drawer panel */\n  className?: string;\n  /** ARIA labelledby ID (defaults to internal title ID) */\n  ariaLabelledBy?: string;\n  /** ARIA describedby ID (defaults to internal subtitle ID if subtitle exists) */\n  ariaDescribedBy?: string;\n  /** Accessible label for the close button. Default: \"Close\" */\n  closeLabel?: string;\n}\n\nconst WIDTH_PRESETS = {\n  narrow: \"400px\",\n  medium: \"520px\",\n  wide: \"900px\",\n};\n\nexport function Drawer({\n  isOpen,\n  onClose,\n  title,\n  subtitle,\n  width = \"medium\",\n  children,\n  footer,\n  className = \"\",\n  ariaLabelledBy,\n  ariaDescribedBy,\n  closeLabel = \"Close\",\n}: DrawerProps) {\n  const drawerRef = useRef<HTMLDivElement>(null);\n  const previousActiveElementRef = useRef<HTMLElement | null>(null);\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n\n  // Track if this is the first render to enable animation on initial open\n  // Without this, when the component mounts with isOpen=true, there's no\n  // transition because CSS transitions only apply to state changes, not initial renders.\n  const [shouldAnimate, setShouldAnimate] = useState(false);\n  const hasInitialized = useRef(false);\n\n  useEffect(() => {\n    if (isOpen && !hasInitialized.current) {\n      // First time opening - delay adding open class to trigger animation\n      hasInitialized.current = true;\n      // Use double rAF to ensure the closed state is painted first\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          setShouldAnimate(true);\n        });\n      });\n    } else if (isOpen) {\n      setShouldAnimate(true);\n    } else {\n      setShouldAnimate(false);\n    }\n  }, [isOpen]);\n\n  // Compute the actual open state for CSS classes\n  const isVisuallyOpen = isOpen && shouldAnimate;\n\n  // Compute width value\n  const widthValue =\n    width in WIDTH_PRESETS ? WIDTH_PRESETS[width as keyof typeof WIDTH_PRESETS] : width;\n\n  // Internal IDs for ARIA\n  const titleId = ariaLabelledBy || \"drawer-title\";\n  const subtitleId = ariaDescribedBy || (subtitle ? \"drawer-subtitle\" : undefined);\n\n  // Focus management and trap\n  useEffect(() => {\n    if (!isOpen) return;\n\n    // Store previously focused element\n    previousActiveElementRef.current = document.activeElement as HTMLElement;\n\n    const drawer = drawerRef.current;\n    if (!drawer) return;\n\n    // Focus close button when drawer opens\n    requestAnimationFrame(() => {\n      closeButtonRef.current?.focus();\n    });\n\n    // Setup focus trap\n    const focusableElements = drawer.querySelectorAll<HTMLElement>(\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n    );\n\n    const firstFocusable = focusableElements[0];\n    const lastFocusable = focusableElements[focusableElements.length - 1];\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      // Escape to close\n      if (e.key === \"Escape\") {\n        onClose();\n        return;\n      }\n\n      // Tab key focus trap\n      if (e.key === \"Tab\") {\n        if (e.shiftKey) {\n          // Shift + Tab\n          if (document.activeElement === firstFocusable) {\n            e.preventDefault();\n            lastFocusable?.focus();\n          }\n        } else {\n          // Tab\n          if (document.activeElement === lastFocusable) {\n            e.preventDefault();\n            firstFocusable?.focus();\n          }\n        }\n      }\n    };\n\n    drawer.addEventListener(\"keydown\", handleKeyDown);\n\n    return () => {\n      drawer.removeEventListener(\"keydown\", handleKeyDown);\n      // Restore focus when drawer closes\n      if (previousActiveElementRef.current) {\n        previousActiveElementRef.current.focus();\n      }\n    };\n  }, [isOpen, onClose]);\n\n  // Handle backdrop click\n  const handleBackdropClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.target === e.currentTarget) {\n        onClose();\n      }\n    },\n    [onClose],\n  );\n\n  return (\n    <div\n      className={`drawer__backdrop ${isVisuallyOpen ? \"drawer__backdrop--open\" : \"\"}`}\n      onClick={handleBackdropClick}\n      role=\"presentation\"\n      aria-hidden={!isOpen}\n    >\n      <aside\n        ref={drawerRef}\n        className={`drawer ${isVisuallyOpen ? \"drawer--open\" : \"\"} ${className}`}\n        style={{ width: widthValue, maxWidth: \"100vw\" }}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        aria-describedby={subtitleId}\n      >\n        {/* Header */}\n        <header className=\"drawer__header\">\n          <div className=\"drawer__title-row\">\n            <h2 id={titleId} className=\"drawer__title\">\n              {title}\n            </h2>\n            <button\n              ref={closeButtonRef}\n              type=\"button\"\n              className=\"drawer__close-btn\"\n              onClick={onClose}\n              aria-label={closeLabel}\n            >\n              <svg\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              >\n                <path d=\"M18 6L6 18\" />\n                <path d=\"M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n          {subtitle && (\n            <p id={subtitleId} className=\"drawer__subtitle\">\n              {subtitle}\n            </p>\n          )}\n        </header>\n\n        {/* Content */}\n        <div className=\"drawer__content\">{children}</div>\n\n        {/* Footer */}\n        {footer && <footer className=\"drawer__footer\">{footer}</footer>}\n      </aside>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/Drawer/index.d.ts

@@ -0,0 +1,2 @@
+export { Drawer } from './Drawer';
+export type { DrawerProps } from './Drawer';

package/dist/components/Drawer/index.js

@@ -0,0 +1,2 @@
+import { Drawer as e } from "./Drawer2.js";
+export { e as Drawer };

package/dist/components/EmptyState/EmptyState.d.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+export type IllustrationType = "chat" | "models" | "creations" | "text" | "benchmark" | "logs" | "statistics" | "error" | "schedule" | "generic";
+export interface EmptyStateAction {
+    label: string;
+    onClick: () => void;
+}
+export interface EmptyStateSecondaryAction {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+}
+export interface EmptyStateProps {
+    /** Type of illustration to display */
+    illustration: IllustrationType;
+    /** Main heading */
+    title: string;
+    /** Descriptive text */
+    description: string;
+    /** Primary action button */
+    primaryAction?: EmptyStateAction;
+    /** Secondary action (link or button) */
+    secondaryAction?: EmptyStateSecondaryAction;
+    /**
+     * Extra content rendered under the description, inside the same text column.
+     *
+     * The two action props cover the common one-or-two-button case. An
+     * onboarding state that has to offer more than that (e.g. the Data Hub's
+     * three ingest paths, issue #3903) renders them here instead of growing a
+     * page-local copy of this component.
+     */
+    children?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Whether to show illustration (default: true) */
+    showIllustration?: boolean;
+}
+/**
+ * EmptyState Component
+ *
+ * Displays an empty state with illustration, text, and optional actions.
+ * Memoized to prevent unnecessary re-renders.
+ */
+declare function EmptyStateComponent({ illustration, title, description, primaryAction, secondaryAction, children, className, showIllustration, }: EmptyStateProps): import("react").JSX.Element;
+export declare const EmptyState: import('react').MemoExoticComponent<typeof EmptyStateComponent>;
+export {};

package/dist/components/EmptyState/EmptyState.example.d.ts

@@ -0,0 +1,8 @@
+/**
+ * EmptyState Component Examples
+ *
+ * Demonstrates usage of EmptyState component in different contexts.
+ * Note: This file is for documentation/demonstration purposes only.
+ */
+export declare function EmptyStateExamples(): import("react").JSX.Element;
+export default EmptyStateExamples;

package/dist/components/EmptyState/EmptyState2.js

@@ -0,0 +1,78 @@
+import { Button as e } from "../Button/Button2.js";
+import { BenchmarkIllustration as t, ChatIllustration as n, CreationsIllustration as r, ErrorIllustration as i, GenericIllustration as a, LogsIllustration as o, ModelsIllustration as s, ScheduleIllustration as c, StatisticsIllustration as l, TextIllustration as u } from "./illustrations.js";
+/* empty css           */
+import { memo as d, useCallback as f, useMemo as p } from "react";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/components/EmptyState/EmptyState.tsx
+var _ = {
+	chat: n,
+	models: s,
+	creations: r,
+	text: u,
+	benchmark: t,
+	logs: o,
+	statistics: l,
+	error: i,
+	schedule: c,
+	generic: a
+};
+function v({ illustration: t, title: n, description: r, primaryAction: i, secondaryAction: a, children: o, className: s = "", showIllustration: c = !0 }) {
+	let l = i?.onClick, u = a?.onClick, d = f(() => {
+		l?.();
+	}, [l]), v = f(() => {
+		u?.();
+	}, [u]), y = p(() => _[t], [t]), b = p(() => [
+		"empty-state",
+		`empty-state--${t}`,
+		s
+	].filter(Boolean).join(" "), [t, s]);
+	return /* @__PURE__ */ g("div", {
+		className: b,
+		role: "status",
+		"aria-live": "polite",
+		children: [
+			c && /* @__PURE__ */ h("div", {
+				className: "empty-state__illustration",
+				children: /* @__PURE__ */ h(y, { className: "empty-state__icon" })
+			}),
+			/* @__PURE__ */ g("div", {
+				className: "empty-state__content",
+				children: [
+					/* @__PURE__ */ h("h3", {
+						className: "empty-state__title",
+						children: n
+					}),
+					/* @__PURE__ */ h("p", {
+						className: "empty-state__description",
+						children: r
+					}),
+					o
+				]
+			}),
+			(i || a) && /* @__PURE__ */ g("div", {
+				className: "empty-state__actions",
+				children: [i && /* @__PURE__ */ h(e, {
+					variant: "primary",
+					onClick: d,
+					className: "empty-state__action-btn empty-state__action-btn--primary",
+					children: i.label
+				}), a && /* @__PURE__ */ h(m, { children: a.href ? /* @__PURE__ */ h("a", {
+					href: a.href,
+					className: "empty-state__action-link",
+					onClick: v,
+					children: a.label
+				}) : /* @__PURE__ */ h(e, {
+					variant: "ghost",
+					onClick: v,
+					className: "empty-state__action-btn empty-state__action-btn--secondary",
+					children: a.label
+				}) })]
+			})
+		]
+	});
+}
+var y = d(v);
+//#endregion
+export { y as EmptyState };
+
+//# sourceMappingURL=EmptyState2.js.map