harebear-ui 0.0.0-stage → 0.1.0

package/dist/components/ai/conversation-list.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+export interface Conversation {
+  id: string;
+  title: string;
+}
+export interface ConversationGroup {
+  /** e.g. "Today", "Yesterday", "Previous 7 days". */
+  label: string;
+  items: Conversation[];
+}
+export interface ConversationListProps extends Omit<React.ComponentProps<"nav">, "onSelect"> {
+  groups: ConversationGroup[];
+  activeId?: string;
+  onSelect?: (id: string) => void;
+}
+/** Grouped list of chat threads for a sidebar. */
+declare function ConversationList({ groups, activeId, onSelect, className, ...props }: ConversationListProps): React.JSX.Element;
+export { ConversationList };

package/dist/components/ai/conversation-list.js

@@ -0,0 +1,30 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/ai/conversation-list.tsx
+/** Grouped list of chat threads for a sidebar. */
+function ConversationList({ groups, activeId, onSelect, className, ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"data-slot": "conversation-list",
+		"aria-label": "Conversations",
+		className: cn("flex flex-col gap-4.5", className),
+		...props,
+		children: groups.map((g) => /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-0.5",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "px-3 pb-1.5 text-xs font-medium text-muted-foreground",
+				children: g.label
+			}), g.items.map((c) => {
+				const active = c.id === activeId;
+				return /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-current": active ? "page" : void 0,
+					onClick: () => onSelect?.(c.id),
+					className: cn("w-full truncate rounded-md px-3 py-2.25 text-left font-medium text-muted-foreground transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/40", active && "bg-card text-foreground shadow-card hover:bg-card"),
+					children: c.title
+				}, c.id);
+			})]
+		}, g.label))
+	});
+}
+export { ConversationList };

package/dist/components/ai/model-picker.d.ts

@@ -0,0 +1,21 @@
+import { StatusTone } from "../admin/status.js";
+import * as React from "react";
+export interface ModelOption {
+  id: string;
+  /** Display name. Defaults to id. Rendered monospace. */
+  label?: string;
+  description?: React.ReactNode;
+  /** Availability dot. Default "success". */
+  status?: StatusTone;
+}
+export interface ModelPickerProps {
+  models: ModelOption[];
+  value: string;
+  onValueChange: (id: string) => void;
+  label?: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+}
+/** Pill button showing the active model with a status dot; opens a menu of models. */
+declare function ModelPicker({ models, value, onValueChange, label, className, disabled }: ModelPickerProps): React.JSX.Element;
+export { ModelPicker };

package/dist/components/ai/model-picker.js

@@ -0,0 +1,55 @@
+"use client";
+import { StatusDot } from "../admin/status.js";
+import { Button } from "../ui/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon } from "lucide-react";
+// src/components/ai/model-picker.tsx
+/** Pill button showing the active model with a status dot; opens a menu of models. */
+function ModelPicker({ models, value, onValueChange, label = "Model", className, disabled }) {
+	const current = models.find((m) => m.id === value);
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		disabled,
+		children: /* @__PURE__ */ jsxs(Button, {
+			variant: "outline",
+			size: "sm",
+			shape: "pill",
+			className: cn("gap-2 px-3", className),
+			children: [
+				/* @__PURE__ */ jsx(StatusDot, { tone: current?.status ?? "success" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "font-mono text-xs",
+					children: current?.label ?? value
+				}),
+				/* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-muted-foreground" })
+			]
+		})
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		align: "end",
+		className: "min-w-56",
+		children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: label }), models.map((m) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			onSelect: () => onValueChange(m.id),
+			className: "items-start gap-2.5",
+			children: [
+				/* @__PURE__ */ jsx(StatusDot, {
+					tone: m.status ?? "success",
+					className: "mt-1.5"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 flex-col",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "font-mono text-xs",
+						children: m.label ?? m.id
+					}), m.description && /* @__PURE__ */ jsx("span", {
+						className: "text-xs text-muted-foreground",
+						children: m.description
+					})]
+				}),
+				m.id === value && /* @__PURE__ */ jsx(CheckIcon, { className: "mt-0.5" })
+			]
+		}, m.id))]
+	})] });
+}
+export { ModelPicker };

package/dist/components/ai/prompt-input.d.ts

@@ -0,0 +1,27 @@
+import { Button } from "../ui/button.js";
+import * as React from "react";
+export interface PromptInputProps extends Omit<React.ComponentProps<"form">, "onSubmit" | "onChange"> {
+  value: string;
+  onValueChange: (value: string) => void;
+  /** Called with the trimmed text on Enter or the send button. Shift+Enter inserts a newline. */
+  onSubmit: (value: string) => void;
+  placeholder?: string;
+  /** While true, the send button becomes a stop button. */
+  loading?: boolean;
+  onStop?: () => void;
+  /** Shows a paperclip button. */
+  onAttach?: () => void;
+  /** Chips/toggles between the attach and send buttons, e.g. <PromptInputChip>. */
+  tools?: React.ReactNode;
+  /** Small text under the box, e.g. a disclaimer. */
+  footer?: React.ReactNode;
+  disabled?: boolean;
+  autoFocus?: boolean;
+}
+/** Chat composer: auto-growing textarea with attach, tool chips, and send/stop. */
+declare function PromptInput({ value, onValueChange, onSubmit, placeholder, loading, onStop, onAttach, tools, footer, disabled, autoFocus, className, ...props }: PromptInputProps): React.JSX.Element;
+/** Toggleable pill for the composer toolbar (web search, a knowledge source…). */
+declare function PromptInputChip({ active, className, ...props }: React.ComponentProps<typeof Button> & {
+  active?: boolean;
+}): React.JSX.Element;
+export { PromptInput, PromptInputChip };

package/dist/components/ai/prompt-input.js

@@ -0,0 +1,99 @@
+"use client";
+import { Button } from "../ui/button.js";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUpIcon, PaperclipIcon, SquareIcon } from "lucide-react";
+// src/components/ai/prompt-input.tsx
+/** Chat composer: auto-growing textarea with attach, tool chips, and send/stop. */
+function PromptInput({ value, onValueChange, onSubmit, placeholder = "Send a message…", loading, onStop, onAttach, tools, footer, disabled, autoFocus, className, ...props }) {
+	const id = React.useId();
+	const canSend = value.trim().length > 0 && !disabled;
+	const submit = () => {
+		if (canSend && !loading) onSubmit(value.trim());
+	};
+	return /* @__PURE__ */ jsxs("form", {
+		"data-slot": "prompt-input",
+		className: cn("mx-auto flex w-full max-w-190 flex-col gap-2.5", className),
+		onSubmit: (e) => {
+			e.preventDefault();
+			submit();
+		},
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2 rounded-[calc(var(--radius-xl)*1.2)] bg-muted pt-3 pr-3 pb-2.5 pl-3.5 transition-shadow focus-within:ring-4 focus-within:ring-primary/12",
+			children: [
+				/* @__PURE__ */ jsx("label", {
+					htmlFor: id,
+					className: "sr-only",
+					children: "Message"
+				}),
+				/* @__PURE__ */ jsx("textarea", {
+					id,
+					rows: 2,
+					value,
+					disabled,
+					autoFocus,
+					placeholder,
+					onChange: (e) => onValueChange(e.target.value),
+					onKeyDown: (e) => {
+						if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+							e.preventDefault();
+							submit();
+						}
+					},
+					className: "field-sizing-content max-h-60 min-h-13 w-full resize-none border-0 bg-transparent px-1.5 py-1 text-[15px] leading-normal text-foreground outline-none placeholder:text-muted-foreground"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1.5",
+					children: [
+						onAttach && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "icon-sm",
+							shape: "pill",
+							"aria-label": "Attach file",
+							onClick: onAttach,
+							children: /* @__PURE__ */ jsx(PaperclipIcon, {})
+						}),
+						tools,
+						/* @__PURE__ */ jsx("div", { className: "flex-1" }),
+						loading && onStop ? /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							size: "icon",
+							shape: "pill",
+							className: "size-9",
+							"aria-label": "Stop generating",
+							onClick: onStop,
+							children: /* @__PURE__ */ jsx(SquareIcon, { className: "fill-current" })
+						}) : /* @__PURE__ */ jsx(Button, {
+							type: "submit",
+							size: "icon",
+							shape: "pill",
+							className: "size-9",
+							"aria-label": "Send message",
+							disabled: !canSend || loading,
+							children: /* @__PURE__ */ jsx(ArrowUpIcon, {})
+						})
+					]
+				})
+			]
+		}), footer && /* @__PURE__ */ jsx("p", {
+			className: "text-center text-xs text-muted-foreground",
+			children: footer
+		})]
+	});
+}
+/** Toggleable pill for the composer toolbar (web search, a knowledge source…). */
+function PromptInputChip({ active, className, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		size: "sm",
+		shape: "pill",
+		variant: active ? "soft" : "outline",
+		"aria-pressed": active,
+		className: cn("h-8", className),
+		...props
+	});
+}
+export { PromptInput, PromptInputChip };

package/dist/components/data/bar-list.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export interface BarListItem {
+  label: React.ReactNode;
+  /** Share 0-100 used for the bar width and the bold percent. */
+  percent: number;
+  /** Optional absolute value shown muted before the percent, e.g. "32,068". */
+  value?: React.ReactNode;
+  color?: string;
+}
+/** Ranked list of labeled bars, e.g. traffic sources or top pages. */
+declare function BarList({ items, className, ...props }: Omit<React.ComponentProps<"div">, "children"> & {
+  items: BarListItem[];
+}): React.JSX.Element;
+export { BarList };

package/dist/components/data/bar-list.js

@@ -0,0 +1,27 @@
+"use client";
+import { UsageMeter } from "../admin/usage-meter.js";
+import { cn } from "../../lib/utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/components/data/bar-list.tsx
+/** Ranked list of labeled bars, e.g. traffic sources or top pages. */
+function BarList({ items, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "bar-list",
+		className: cn("flex flex-col gap-4.5", className),
+		...props,
+		children: items.map((item, i) => /* @__PURE__ */ jsx(UsageMeter, {
+			label: item.label,
+			percent: item.percent,
+			color: item.color,
+			value: /* @__PURE__ */ jsxs(Fragment, { children: [
+				item.value !== void 0 && /* @__PURE__ */ jsxs("span", {
+					className: "font-normal text-muted-foreground",
+					children: [item.value, " · "]
+				}),
+				item.percent,
+				"%"
+			] })
+		}, i))
+	});
+}
+export { BarList };

package/dist/components/data/data-table.d.ts

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { ColumnDef, RowData } from "@tanstack/react-table";
+/** Feature set used by DataTable. Use with createDataTableColumnHelper for typed columns. */
+export declare const dataTableFeatures: {
+  columnFilteringFeature: import("@tanstack/react-table").TableFeature;
+  globalFilteringFeature: import("@tanstack/react-table").TableFeature;
+  rowSortingFeature: import("@tanstack/react-table").TableFeature;
+  rowSelectionFeature: import("@tanstack/react-table").TableFeature;
+  rowPaginationFeature: import("@tanstack/react-table").TableFeature;
+  filteredRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  paginatedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  filterFns: {
+    includesString: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+  };
+  sortFns: {
+    alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    text: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    basic: import("@tanstack/react-table").CreatedSortFn<any, any>;
+  };
+};
+export type DataTableFeatures = typeof dataTableFeatures;
+export type DataTableColumnDef<TData extends RowData> = ColumnDef<DataTableFeatures, TData, any>;
+/** Typed column helper for DataTable: `const col = createDataTableColumnHelper<Customer>()`. */
+export declare function createDataTableColumnHelper<TData extends RowData>(): import("@tanstack/react-table").ColumnHelper<{
+  columnFilteringFeature: import("@tanstack/react-table").TableFeature;
+  globalFilteringFeature: import("@tanstack/react-table").TableFeature;
+  rowSortingFeature: import("@tanstack/react-table").TableFeature;
+  rowSelectionFeature: import("@tanstack/react-table").TableFeature;
+  rowPaginationFeature: import("@tanstack/react-table").TableFeature;
+  filteredRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  paginatedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  filterFns: {
+    includesString: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+  };
+  sortFns: {
+    alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    text: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    basic: import("@tanstack/react-table").CreatedSortFn<any, any>;
+  };
+}, TData>;
+export interface DataTableProps<TData extends RowData> {
+  columns: DataTableColumnDef<TData>[];
+  data: TData[];
+  /** Stable row id. Defaults to the row index. Needed for selection and activeRowId. */
+  getRowId?: (row: TData, index: number) => string;
+  /** Show a search box that filters across all string/number columns. */
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  /** Extra controls rendered after the search box (filters, sort, actions). */
+  toolbar?: React.ReactNode;
+  /** Adds a checkbox column. */
+  selectable?: boolean;
+  onSelectionChange?: (rows: TData[]) => void;
+  onRowClick?: (row: TData) => void;
+  /** Highlights this row (e.g. the one open in a detail panel). */
+  activeRowId?: string;
+  /** Rows per page. 0 disables pagination. Default 10. */
+  pageSize?: number;
+  /** Shown when there are no rows. */
+  emptyMessage?: React.ReactNode;
+  className?: string;
+}
+/**
+ * Sortable, searchable, selectable, paginated table. Client-side processing via
+ * TanStack Table v9. For server-side data, compose Table primitives with useTable directly.
+ */
+declare function DataTable<TData extends RowData>({ columns: columnsProp, data, getRowId, searchable, searchPlaceholder, toolbar, selectable, onSelectionChange, onRowClick, activeRowId, pageSize, emptyMessage, className }: DataTableProps<TData>): React.JSX.Element;
+export { DataTable };

package/dist/components/data/data-table.js

@@ -0,0 +1,208 @@
+"use client";
+import { SearchInput } from "../admin/search-input.js";
+import { Button } from "../ui/button.js";
+import { Checkbox } from "../ui/checkbox.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table.js";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { columnFilteringFeature, createColumnHelper, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, filterFn_includesString, globalFilteringFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_basic, sortFn_text, tableFeatures, useTable } from "@tanstack/react-table";
+// src/components/data/data-table.tsx
+/** Feature set used by DataTable. Use with createDataTableColumnHelper for typed columns. */
+const dataTableFeatures = tableFeatures({
+	columnFilteringFeature,
+	globalFilteringFeature,
+	rowSortingFeature,
+	rowSelectionFeature,
+	rowPaginationFeature,
+	filteredRowModel: createFilteredRowModel(),
+	sortedRowModel: createSortedRowModel(),
+	paginatedRowModel: createPaginatedRowModel(),
+	filterFns: { includesString: filterFn_includesString },
+	sortFns: {
+		alphanumeric: sortFn_alphanumeric,
+		text: sortFn_text,
+		basic: sortFn_basic
+	}
+});
+/** Typed column helper for DataTable: `const col = createDataTableColumnHelper<Customer>()`. */
+function createDataTableColumnHelper() {
+	return createColumnHelper();
+}
+/**
+* Sortable, searchable, selectable, paginated table. Client-side processing via
+* TanStack Table v9. For server-side data, compose Table primitives with useTable directly.
+*/
+function DataTable({ columns: columnsProp, data, getRowId, searchable, searchPlaceholder = "Search", toolbar, selectable, onSelectionChange, onRowClick, activeRowId, pageSize = 10, emptyMessage = "No results.", className }) {
+	const columns = React.useMemo(() => {
+		if (!selectable) return columnsProp;
+		return [{
+			id: "__select",
+			enableSorting: false,
+			enableGlobalFilter: false,
+			header: ({ table }) => /* @__PURE__ */ jsx(Checkbox, {
+				"aria-label": "Select all rows",
+				checked: table.getIsAllPageRowsSelected() ? true : table.getIsSomePageRowsSelected() ? "indeterminate" : false,
+				onCheckedChange: (v) => table.toggleAllPageRowsSelected(!!v)
+			}),
+			cell: ({ row }) => /* @__PURE__ */ jsx(Checkbox, {
+				"aria-label": "Select row",
+				checked: row.getIsSelected(),
+				onClick: (e) => e.stopPropagation(),
+				onCheckedChange: (v) => row.toggleSelected(!!v)
+			})
+		}, ...columnsProp];
+	}, [columnsProp, selectable]);
+	const paginate = pageSize > 0;
+	const table = useTable({
+		features: dataTableFeatures,
+		columns,
+		data,
+		getRowId,
+		globalFilterFn: "includesString",
+		initialState: { pagination: {
+			pageIndex: 0,
+			pageSize: paginate ? pageSize : Number.MAX_SAFE_INTEGER
+		} }
+	});
+	const rowSelection = table.state.rowSelection;
+	const onSelectionChangeRef = React.useRef(onSelectionChange);
+	onSelectionChangeRef.current = onSelectionChange;
+	React.useEffect(() => {
+		onSelectionChangeRef.current?.(table.getSelectedRowModel().rows.map((r) => r.original));
+	}, [rowSelection]);
+	const filteredCount = table.getFilteredRowModel().rows.length;
+	const { pageIndex, pageSize: size } = table.state.pagination;
+	const pageCount = table.getPageCount();
+	const rows = table.getRowModel().rows;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "data-table",
+		className: cn("flex min-w-0 flex-col gap-4", className),
+		children: [
+			(searchable || toolbar) && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-2.5",
+				children: [searchable && /* @__PURE__ */ jsx(SearchInput, {
+					wrapperClassName: "min-w-50 flex-[0_1_300px]",
+					placeholder: searchPlaceholder,
+					value: String(table.state.globalFilter ?? ""),
+					onChange: (e) => table.setGlobalFilter(e.target.value)
+				}), toolbar]
+			}),
+			/* @__PURE__ */ jsxs(Table, {
+				className: "border-spacing-y-0.5",
+				children: [/* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((group) => /* @__PURE__ */ jsx(TableRow, { children: group.headers.map((header) => {
+					const canSort = header.column.getCanSort();
+					const sorted = header.column.getIsSorted();
+					const SortIcon = sorted === "asc" ? ArrowUpIcon : sorted === "desc" ? ArrowDownIcon : ArrowUpDownIcon;
+					const meta = header.column.columnDef.meta;
+					return /* @__PURE__ */ jsx(TableHead, {
+						className: cn(header.column.id === "__select" && "w-11", meta?.align === "right" && "text-right"),
+						"aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : void 0,
+						children: header.isPlaceholder ? null : canSort ? /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: header.column.getToggleSortingHandler(),
+							className: cn("-mx-1 inline-flex items-center gap-1 rounded-sm px-1 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:outline-none", sorted && "text-foreground"),
+							children: [/* @__PURE__ */ jsx(table.FlexRender, { header }), /* @__PURE__ */ jsx(SortIcon, { className: cn("size-3.5", !sorted && "opacity-40") })]
+						}) : /* @__PURE__ */ jsx(table.FlexRender, { header })
+					}, header.id);
+				}) }, group.id)) }), /* @__PURE__ */ jsx(TableBody, { children: rows.length === 0 ? /* @__PURE__ */ jsx(TableRow, {
+					className: "hover:bg-transparent",
+					children: /* @__PURE__ */ jsx(TableCell, {
+						colSpan: columns.length,
+						className: "h-24 text-center text-muted-foreground",
+						children: emptyMessage
+					})
+				}) : rows.map((row) => /* @__PURE__ */ jsx(TableRow, {
+					"data-state": row.getIsSelected() || row.id === activeRowId ? "selected" : void 0,
+					onClick: onRowClick ? () => onRowClick(row.original) : void 0,
+					className: cn(onRowClick && "cursor-pointer"),
+					children: row.getAllCells().map((cell) => {
+						const meta = cell.column.columnDef.meta;
+						return /* @__PURE__ */ jsx(TableCell, {
+							className: cn("py-3", meta?.align === "right" && "text-right"),
+							children: /* @__PURE__ */ jsx(table.FlexRender, { cell })
+						}, cell.id);
+					})
+				}, row.id)) })]
+			}),
+			paginate && filteredCount > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center justify-between gap-3 px-1.5",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "text-[13px] text-muted-foreground tabular-nums",
+					children: [
+						"Showing ",
+						Math.min(filteredCount, pageIndex * size + 1),
+						"-",
+						Math.min(filteredCount, (pageIndex + 1) * size),
+						" of",
+						" ",
+						filteredCount
+					]
+				}), pageCount > 1 && /* @__PURE__ */ jsxs("nav", {
+					"aria-label": "Pagination",
+					className: "flex items-center gap-1",
+					children: [
+						/* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "icon-sm",
+							"aria-label": "Previous page",
+							disabled: !table.getCanPreviousPage(),
+							onClick: () => table.previousPage(),
+							children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+						}),
+						pageList(pageIndex, pageCount).map((p, i) => p === "…" ? /* @__PURE__ */ jsx("span", {
+							className: "px-1 text-muted-foreground",
+							children: "…"
+						}, `gap-${i}`) : /* @__PURE__ */ jsx(Button, {
+							variant: p === pageIndex ? "secondary" : "ghost",
+							size: "icon-sm",
+							className: "tabular-nums",
+							"aria-current": p === pageIndex ? "page" : void 0,
+							onClick: () => table.setPageIndex(p),
+							children: p + 1
+						}, p)),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "icon-sm",
+							"aria-label": "Next page",
+							disabled: !table.getCanNextPage(),
+							onClick: () => table.nextPage(),
+							children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+						})
+					]
+				})]
+			})
+		]
+	});
+}
+/** Zero-based page indexes with ellipses: 0 1 2 … 27 */
+function pageList(current, count) {
+	if (count <= 7) return Array.from({ length: count }, (_, i) => i);
+	const set = new Set([
+		0,
+		count - 1,
+		current - 1,
+		current,
+		current + 1
+	].filter((p) => p >= 0 && p < count));
+	if (current <= 2) for (const p of [
+		1,
+		2,
+		3
+	]) set.add(p);
+	if (current >= count - 3) for (const p of [
+		count - 4,
+		count - 3,
+		count - 2
+	]) set.add(p);
+	const sorted = [...set].sort((a, b) => a - b);
+	const out = [];
+	sorted.forEach((p, i) => {
+		const prev = sorted[i - 1];
+		if (i > 0 && prev !== void 0 && p - prev > 1) out.push("…");
+		out.push(p);
+	});
+	return out;
+}
+export { DataTable, createDataTableColumnHelper, dataTableFeatures };

package/dist/components/data/sparkline.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+/** Catmull-Rom smoothed SVG path through points. */
+export declare function smoothPath(points: ReadonlyArray<readonly [number, number]>): string;
+export interface SparklineProps extends Omit<React.ComponentProps<"svg">, "children" | "fill"> {
+  data: number[];
+  /** Stroke/fill color. Any CSS color; default the primary token. */
+  color?: string;
+  /** Show the soft area fill under the line. Default true. */
+  area?: boolean;
+  /** Fixed y-range; defaults to the data's min/max. */
+  min?: number;
+  max?: number;
+}
+/** Tiny smoothed trend line. Stretches to its container width; set height via className. */
+declare function Sparkline({ data, color, area: showArea, min, max, className, ...props }: SparklineProps): React.JSX.Element;
+export { Sparkline };

package/dist/components/data/sparkline.js

@@ -0,0 +1,72 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/data/sparkline.tsx
+/** Catmull-Rom smoothed SVG path through points. */
+function smoothPath(points) {
+	if (points.length === 0) return "";
+	const f = (n) => n.toFixed(1);
+	const first = points[0];
+	let d = `M${f(first[0])},${f(first[1])}`;
+	for (let i = 0; i < points.length - 1; i++) {
+		const p0 = points[i - 1] ?? points[i];
+		const p1 = points[i];
+		const p2 = points[i + 1];
+		const p3 = points[i + 2] ?? p2;
+		const c1x = p1[0] + (p2[0] - p0[0]) / 6;
+		const c1y = p1[1] + (p2[1] - p0[1]) / 6;
+		const c2x = p2[0] - (p3[0] - p1[0]) / 6;
+		const c2y = p2[1] - (p3[1] - p1[1]) / 6;
+		d += ` C${f(c1x)},${f(c1y)} ${f(c2x)},${f(c2y)} ${f(p2[0])},${f(p2[1])}`;
+	}
+	return d;
+}
+/** Tiny smoothed trend line. Stretches to its container width; set height via className. */
+function Sparkline({ data, color = "var(--primary)", area: showArea = true, min, max, className, ...props }) {
+	const W = 120;
+	const H = 36;
+	const paths = React.useMemo(() => {
+		if (data.length < 2) return {
+			line: "",
+			fill: ""
+		};
+		const lo = min ?? Math.min(...data);
+		const hi = max ?? Math.max(...data);
+		const l = smoothPath(data.map((v, i) => [i / (data.length - 1) * W, 32 - (v - lo) / (hi - lo || 1) * 28]));
+		return {
+			line: l,
+			fill: `${l} L${W},${H} L0,${H} Z`
+		};
+	}, [
+		data,
+		min,
+		max
+	]);
+	return /* @__PURE__ */ jsxs("svg", {
+		"data-slot": "sparkline",
+		viewBox: `0 0 ${W} ${H}`,
+		preserveAspectRatio: "none",
+		"aria-hidden": "true",
+		className: cn("block h-9 w-full overflow-visible", className),
+		...props,
+		children: [showArea && /* @__PURE__ */ jsx("path", {
+			d: paths.fill,
+			style: {
+				fill: color,
+				fillOpacity: .08
+			}
+		}), /* @__PURE__ */ jsx("path", {
+			d: paths.line,
+			vectorEffect: "non-scaling-stroke",
+			style: {
+				fill: "none",
+				stroke: color,
+				strokeWidth: 2,
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}
+		})]
+	});
+}
+export { Sparkline, smoothPath };