harebear-ui 0.0.0-stage → 0.2.2

package/dist/components/auth/auth.js

@@ -0,0 +1,325 @@
+"use client";
+import { Button } from "../ui/button.js";
+import { Card, CardContent } from "../ui/card.js";
+import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldSeparator } from "../ui/field.js";
+import { Input } from "../ui/input.js";
+import { Spinner } from "../ui/spinner.js";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/auth/auth.tsx
+/** Full-page wrapper for sign-in and sign-up screens. Put LoginForm or SignupForm inside. */
+function AuthLayout({ variant = "centered", brand, image, footer, className, children }) {
+	const img = image && /* @__PURE__ */ jsx("img", {
+		src: image.src,
+		alt: image.alt,
+		className: "absolute inset-0 size-full object-cover dark:brightness-[0.6] dark:grayscale-[0.3]"
+	});
+	const small = footer && /* @__PURE__ */ jsx("div", {
+		className: "text-center text-xs text-balance text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-foreground",
+		children: footer
+	});
+	if (variant === "split") return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "auth-layout",
+		"data-variant": variant,
+		className: cn("grid min-h-svh lg:grid-cols-2", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4 p-6 md:p-10",
+			children: [brand && /* @__PURE__ */ jsx("div", {
+				className: "flex justify-center md:justify-start",
+				children: brand
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex flex-1 items-center justify-center",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex w-full max-w-sm flex-col gap-6",
+					children: [children, small]
+				})
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "relative hidden bg-muted lg:block",
+			children: img
+		})]
+	});
+	const wide = variant === "card-image";
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "auth-layout",
+		"data-variant": variant,
+		className: cn("flex min-h-svh flex-col items-center justify-center p-6 md:p-10", variant === "muted" && "bg-muted", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("flex w-full flex-col gap-6", wide ? "max-w-sm md:max-w-4xl" : "max-w-sm"),
+			children: [
+				brand && /* @__PURE__ */ jsx("div", {
+					className: "flex justify-center",
+					children: brand
+				}),
+				wide ? /* @__PURE__ */ jsx(Card, {
+					className: "overflow-hidden py-0",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "grid md:grid-cols-2",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "p-6 md:p-8",
+							children
+						}), /* @__PURE__ */ jsx("div", {
+							className: "relative hidden min-h-80 bg-muted md:block",
+							children: img
+						})]
+					})
+				}) : /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { children }) }),
+				small
+			]
+		})
+	});
+}
+function ProviderButtons({ providers, verb, onProviderClick, disabled }) {
+	const compact = providers.length >= 3 && providers.every((p) => p.icon);
+	return /* @__PURE__ */ jsx(Field, {
+		className: cn(compact && "grid gap-3"),
+		style: compact ? { gridTemplateColumns: `repeat(${providers.length}, minmax(0, 1fr))` } : void 0,
+		children: providers.map((p) => /* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			variant: "outline",
+			disabled,
+			onClick: () => onProviderClick?.(p.id),
+			"aria-label": compact ? `${verb} with ${p.label}` : void 0,
+			children: [p.icon, !compact && `${verb} with ${p.label}`]
+		}, p.id))
+	});
+}
+function BrandSvg({ d, ...props }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			d,
+			fill: "currentColor"
+		})
+	});
+}
+/** GitHub mark, for AuthProvider icons. */
+function GitHubIcon(props) {
+	return /* @__PURE__ */ jsx(BrandSvg, {
+		d: "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12",
+		...props
+	});
+}
+/** Google "G" mark, for AuthProvider icons. */
+const GOOGLE_PATH = "M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z";
+function GoogleIcon(props) {
+	return /* @__PURE__ */ jsx(BrandSvg, {
+		d: GOOGLE_PATH,
+		...props
+	});
+}
+const APPLE_PATH = "M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701";
+/** Apple mark, for AuthProvider icons. */
+function AppleIcon(props) {
+	return /* @__PURE__ */ jsx(BrandSvg, {
+		d: APPLE_PATH,
+		...props
+	});
+}
+function Header({ title, description }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center gap-1.5 text-center",
+		children: [/* @__PURE__ */ jsx("h1", {
+			className: "text-2xl font-semibold tracking-[-0.02em]",
+			children: title
+		}), description && /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-balance text-muted-foreground",
+			children: description
+		})]
+	});
+}
+function readForm(form) {
+	return Object.fromEntries([...new FormData(form).entries()].map(([k, v]) => [k, typeof v === "string" ? v : ""]));
+}
+/** Email + password sign-in form with optional SSO buttons. Pair with AuthLayout. */
+function LoginForm({ title = "Welcome back", description, onSubmit, mode = "password", providers = [], onProviderClick, providersFirst, forgotPasswordHref, signupHref, submitLabel, loading, error, className, ...props }) {
+	const id = React.useId();
+	const emailOnly = mode === "email-only";
+	const desc = description ?? (emailOnly ? "Enter your email and we'll send you a sign-in link" : "Sign in to your account");
+	const sso = providers.length > 0 && /* @__PURE__ */ jsx(ProviderButtons, {
+		providers,
+		verb: "Continue",
+		onProviderClick,
+		disabled: loading
+	});
+	return /* @__PURE__ */ jsx("form", {
+		"data-slot": "login-form",
+		className: cn("flex flex-col gap-6", className),
+		onSubmit: onSubmit ? (e) => {
+			e.preventDefault();
+			const v = readForm(e.currentTarget);
+			onSubmit(emailOnly ? { email: v.email ?? "" } : {
+				email: v.email ?? "",
+				password: v.password ?? ""
+			});
+		} : void 0,
+		"aria-busy": loading || void 0,
+		...props,
+		children: /* @__PURE__ */ jsxs(FieldGroup, { children: [
+			/* @__PURE__ */ jsx(Header, {
+				title,
+				description: desc
+			}),
+			providersFirst && sso,
+			providersFirst && sso && /* @__PURE__ */ jsx(FieldSeparator, { children: "Or continue with email" }),
+			/* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(FieldLabel, {
+				htmlFor: `${id}-email`,
+				children: "Email"
+			}), /* @__PURE__ */ jsx(Input, {
+				id: `${id}-email`,
+				name: "email",
+				type: "email",
+				autoComplete: "email",
+				placeholder: "you@example.com",
+				required: true,
+				disabled: loading
+			})] }),
+			!emailOnly && /* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center",
+				children: [/* @__PURE__ */ jsx(FieldLabel, {
+					htmlFor: `${id}-password`,
+					children: "Password"
+				}), forgotPasswordHref && /* @__PURE__ */ jsx("a", {
+					href: forgotPasswordHref,
+					className: "ms-auto text-sm text-muted-foreground underline-offset-4 hover:text-foreground hover:underline",
+					children: "Forgot password?"
+				})]
+			}), /* @__PURE__ */ jsx(Input, {
+				id: `${id}-password`,
+				name: "password",
+				type: "password",
+				autoComplete: "current-password",
+				required: true,
+				disabled: loading
+			})] }),
+			error && /* @__PURE__ */ jsx(FieldError, { children: error }),
+			/* @__PURE__ */ jsx(Field, { children: /* @__PURE__ */ jsxs(Button, {
+				type: "submit",
+				disabled: loading,
+				children: [loading && /* @__PURE__ */ jsx(Spinner, {}), submitLabel ?? (emailOnly ? "Send sign-in link" : "Sign in")]
+			}) }),
+			!providersFirst && sso && /* @__PURE__ */ jsx(FieldSeparator, { children: "Or continue with" }),
+			!providersFirst && sso,
+			signupHref && /* @__PURE__ */ jsxs(FieldDescription, {
+				className: "text-center",
+				children: ["Don't have an account? ", /* @__PURE__ */ jsx("a", {
+					href: signupHref,
+					children: "Sign up"
+				})]
+			})
+		] })
+	});
+}
+/** Account creation form: name, email, password (+ confirm), optional SSO. Pair with AuthLayout. */
+function SignupForm({ title = "Create your account", description = "Enter your details to get started", onSubmit, nameField = true, confirmPassword = true, passwordHint, minPasswordLength = 8, providers = [], onProviderClick, providersFirst, loginHref, submitLabel = "Create account", loading, error, className, ...props }) {
+	const id = React.useId();
+	const sso = providers.length > 0 && /* @__PURE__ */ jsx(ProviderButtons, {
+		providers,
+		verb: "Sign up",
+		onProviderClick,
+		disabled: loading
+	});
+	return /* @__PURE__ */ jsx("form", {
+		"data-slot": "signup-form",
+		className: cn("flex flex-col gap-6", className),
+		onSubmit: (e) => {
+			const form = e.currentTarget;
+			const v = readForm(form);
+			const confirm = form.elements.namedItem("confirm");
+			if (confirm) {
+				confirm.setCustomValidity(v.confirm === v.password ? "" : "Passwords do not match");
+				if (!confirm.reportValidity()) {
+					e.preventDefault();
+					return;
+				}
+			}
+			if (!onSubmit) return;
+			e.preventDefault();
+			onSubmit({
+				...nameField ? { name: v.name ?? "" } : {},
+				email: v.email ?? "",
+				password: v.password ?? ""
+			});
+		},
+		"aria-busy": loading || void 0,
+		...props,
+		children: /* @__PURE__ */ jsxs(FieldGroup, { children: [
+			/* @__PURE__ */ jsx(Header, {
+				title,
+				description
+			}),
+			providersFirst && sso,
+			providersFirst && sso && /* @__PURE__ */ jsx(FieldSeparator, { children: "Or sign up with email" }),
+			nameField && /* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(FieldLabel, {
+				htmlFor: `${id}-name`,
+				children: "Full name"
+			}), /* @__PURE__ */ jsx(Input, {
+				id: `${id}-name`,
+				name: "name",
+				autoComplete: "name",
+				required: true,
+				disabled: loading
+			})] }),
+			/* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(FieldLabel, {
+				htmlFor: `${id}-email`,
+				children: "Email"
+			}), /* @__PURE__ */ jsx(Input, {
+				id: `${id}-email`,
+				name: "email",
+				type: "email",
+				autoComplete: "email",
+				placeholder: "you@example.com",
+				required: true,
+				disabled: loading
+			})] }),
+			/* @__PURE__ */ jsxs(Field, { children: [
+				/* @__PURE__ */ jsx(FieldLabel, {
+					htmlFor: `${id}-password`,
+					children: "Password"
+				}),
+				/* @__PURE__ */ jsx(Input, {
+					id: `${id}-password`,
+					name: "password",
+					type: "password",
+					autoComplete: "new-password",
+					onInput: (e) => (e.currentTarget.form?.elements.namedItem("confirm"))?.setCustomValidity(""),
+					minLength: minPasswordLength,
+					required: true,
+					disabled: loading
+				}),
+				/* @__PURE__ */ jsx(FieldDescription, { children: passwordHint ?? `At least ${minPasswordLength} characters.` })
+			] }),
+			confirmPassword && /* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(FieldLabel, {
+				htmlFor: `${id}-confirm`,
+				children: "Confirm password"
+			}), /* @__PURE__ */ jsx(Input, {
+				id: `${id}-confirm`,
+				name: "confirm",
+				type: "password",
+				autoComplete: "new-password",
+				required: true,
+				disabled: loading,
+				onInput: (e) => e.currentTarget.setCustomValidity("")
+			})] }),
+			error && /* @__PURE__ */ jsx(FieldError, { children: error }),
+			/* @__PURE__ */ jsx(Field, { children: /* @__PURE__ */ jsxs(Button, {
+				type: "submit",
+				disabled: loading,
+				children: [loading && /* @__PURE__ */ jsx(Spinner, {}), submitLabel]
+			}) }),
+			!providersFirst && sso && /* @__PURE__ */ jsx(FieldSeparator, { children: "Or continue with" }),
+			!providersFirst && sso,
+			loginHref && /* @__PURE__ */ jsxs(FieldDescription, {
+				className: "text-center",
+				children: ["Already have an account? ", /* @__PURE__ */ jsx("a", {
+					href: loginHref,
+					children: "Sign in"
+				})]
+			})
+		] })
+	});
+}
+export { AppleIcon, AuthLayout, GitHubIcon, GoogleIcon, LoginForm, SignupForm };

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 };