@burtson-labs/ui 0.9.1 → 0.10.0

package/dist/components/data-table.js

@@ -0,0 +1,264 @@
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { Checkbox } from "./checkbox.js";
+import { Input } from "./input.js";
+import { Pagination } from "./pagination.js";
+import { Skeleton } from "./skeleton.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import ChevronsUpDown from "@burtson-labs/icons/react/chevrons-up-down";
+import Search from "@burtson-labs/icons/react/search";
+import ArrowUp from "@burtson-labs/icons/react/arrow-up";
+import ArrowDown from "@burtson-labs/icons/react/arrow-down";
+//#region src/components/data-table.tsx
+var nextSort = (current, id) => {
+	if (!current || current.columnId !== id) return {
+		columnId: id,
+		direction: "asc"
+	};
+	return current.direction === "asc" ? {
+		columnId: id,
+		direction: "desc"
+	} : null;
+};
+var INTERACTIVE = "a,button,input,select,textarea,[role=\"checkbox\"],[role=\"menuitem\"]";
+/**
+* A table recipe for records: sort, search, select, page, and row actions,
+* with loading, empty and error states. Fully controlled, so the data can
+* come from a server; the table never reorders rows itself.
+*/
+function DataTable({ "aria-label": ariaLabel, columns, rows, getRowId, getRowLabel, sort, onSortChange, filter, onFilterChange, filterPlaceholder = "Search", selected, onSelectedChange, onRowAction, rowActions, page, pageCount, onPageChange, pageSummary, loading = false, error, onRetry, empty = "No results.", toolbar, density = "default", stickyHeader, className, ...props }) {
+	const selectable = Boolean(onSelectedChange);
+	const selectedSet = React.useMemo(() => new Set(selected ?? []), [selected]);
+	const ids = rows.map(getRowId);
+	const pageSelected = ids.filter((id) => selectedSet.has(id)).length;
+	const allState = ids.length > 0 && pageSelected === ids.length ? true : pageSelected > 0 ? "indeterminate" : false;
+	const colCount = columns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0);
+	const interactive = Boolean(onRowAction) || selectable;
+	const [active, setActive] = React.useState(0);
+	const frameRef = React.useRef(null);
+	const activeRow = Math.min(active, Math.max(0, rows.length - 1));
+	const toggle = (id) => {
+		if (!onSelectedChange) return;
+		const next = new Set(selectedSet);
+		if (next.has(id)) next.delete(id);
+		else next.add(id);
+		onSelectedChange([...next]);
+	};
+	const toggleAll = () => {
+		if (!onSelectedChange) return;
+		const next = new Set(selectedSet);
+		if (allState === true) ids.forEach((id) => next.delete(id));
+		else ids.forEach((id) => next.add(id));
+		onSelectedChange([...next]);
+	};
+	const focusRow = (i) => {
+		const clamped = Math.min(Math.max(i, 0), rows.length - 1);
+		setActive(clamped);
+		frameRef.current?.querySelectorAll("[data-slot=\"table-body\"] > [data-slot=\"table-row\"]")[clamped]?.focus();
+	};
+	const onRowKeyDown = (event, i, row) => {
+		if (event.target !== event.currentTarget) return;
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				focusRow(i + 1);
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				focusRow(i - 1);
+				break;
+			case "Home":
+				event.preventDefault();
+				focusRow(0);
+				break;
+			case "End":
+				event.preventDefault();
+				focusRow(rows.length - 1);
+				break;
+			case "Enter":
+				if (onRowAction) {
+					event.preventDefault();
+					onRowAction(row);
+				}
+				break;
+			case " ": if (selectable) {
+				event.preventDefault();
+				toggle(getRowId(row));
+			}
+		}
+	};
+	const showToolbar = Boolean(onFilterChange || toolbar || selectable && selectedSet.size);
+	let body;
+	if (error) body = /* @__PURE__ */ jsx(TableRow, {
+		className: "hover:bg-transparent",
+		children: /* @__PURE__ */ jsx(TableCell, {
+			colSpan: colCount,
+			className: "h-auto py-8 text-center whitespace-normal",
+			children: /* @__PURE__ */ jsxs("div", {
+				role: "alert",
+				className: "grid justify-items-center gap-3 text-sm",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-destructive",
+					children: error
+				}), onRetry && /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					size: "sm",
+					variant: "outline",
+					onClick: onRetry,
+					children: "Try again"
+				})]
+			})
+		})
+	});
+	else if (loading && rows.length === 0) body = Array.from({ length: 3 }, (_, r) => /* @__PURE__ */ jsx(TableRow, {
+		className: "hover:bg-transparent",
+		"aria-hidden": true,
+		children: Array.from({ length: colCount }, (_, c) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-full max-w-40" }) }, c))
+	}, `loading-${r}`));
+	else if (rows.length === 0) body = /* @__PURE__ */ jsx(TableRow, {
+		className: "hover:bg-transparent",
+		children: /* @__PURE__ */ jsx(TableCell, {
+			colSpan: colCount,
+			className: "h-auto py-10 text-center whitespace-normal text-muted-foreground",
+			children: empty
+		})
+	});
+	else body = rows.map((row, i) => {
+		const id = getRowId(row);
+		const isSelected = selectedSet.has(id);
+		const label = getRowLabel?.(row) ?? id;
+		return /* @__PURE__ */ jsxs(TableRow, {
+			selected: isSelected,
+			tabIndex: interactive ? i === activeRow ? 0 : -1 : void 0,
+			onFocus: () => setActive(i),
+			onKeyDown: interactive ? (e) => onRowKeyDown(e, i, row) : void 0,
+			onClick: onRowAction ? (e) => {
+				if (e.target.closest(INTERACTIVE)) return;
+				onRowAction(row);
+			} : void 0,
+			className: cn(interactive && "outline-none focus-visible:bg-muted/60 focus-visible:shadow-[inset_2px_0_0_var(--ring)]", onRowAction && "cursor-pointer"),
+			children: [
+				selectable && /* @__PURE__ */ jsx(TableCell, {
+					className: "w-10",
+					children: /* @__PURE__ */ jsx(Checkbox, {
+						checked: isSelected,
+						onCheckedChange: () => toggle(id),
+						"aria-label": `Select ${label}`,
+						tabIndex: -1
+					})
+				}),
+				columns.map((col) => /* @__PURE__ */ jsx(TableCell, {
+					numeric: col.numeric,
+					className: col.className,
+					children: col.cell(row)
+				}, col.id)),
+				rowActions && /* @__PURE__ */ jsx(TableCell, {
+					className: "w-12 text-right",
+					children: rowActions(row)
+				})
+			]
+		}, id);
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "data-table",
+		className: cn("grid min-w-0 gap-3", className),
+		...props,
+		children: [
+			showToolbar && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [
+					onFilterChange && /* @__PURE__ */ jsxs("div", {
+						className: "relative w-full max-w-xs min-w-0 flex-1",
+						children: [/* @__PURE__ */ jsx(Search, {
+							className: "pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground",
+							"aria-hidden": true
+						}), /* @__PURE__ */ jsx(Input, {
+							type: "search",
+							value: filter ?? "",
+							onChange: (e) => onFilterChange(e.target.value),
+							placeholder: filterPlaceholder,
+							"aria-label": `Search ${ariaLabel.toLowerCase()}`,
+							className: "pl-8"
+						})]
+					}),
+					selectable && /* @__PURE__ */ jsx("span", {
+						"aria-live": "polite",
+						className: "text-xs text-muted-foreground tabular-nums",
+						children: selectedSet.size ? `${selectedSet.size} selected` : ""
+					}),
+					toolbar && /* @__PURE__ */ jsx("div", {
+						className: "ml-auto flex flex-wrap items-center gap-2",
+						children: toolbar
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: frameRef,
+				className: "rounded-lg border bg-surface",
+				children: /* @__PURE__ */ jsxs(Table, {
+					"aria-label": ariaLabel,
+					"aria-busy": loading || void 0,
+					density,
+					stickyHeader,
+					className: cn(loading && rows.length > 0 && "opacity-60 transition-opacity"),
+					children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, {
+						className: "hover:bg-transparent",
+						children: [
+							selectable && /* @__PURE__ */ jsx(TableHead, {
+								className: "w-10",
+								children: /* @__PURE__ */ jsx(Checkbox, {
+									checked: allState,
+									onCheckedChange: toggleAll,
+									disabled: rows.length === 0,
+									"aria-label": "Select all rows on this page"
+								})
+							}),
+							columns.map((col) => {
+								const sorted = sort?.columnId === col.id ? sort.direction : void 0;
+								return /* @__PURE__ */ jsx(TableHead, {
+									numeric: col.numeric,
+									className: col.className,
+									"aria-sort": col.sortable ? sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "none" : void 0,
+									children: col.sortable && onSortChange ? /* @__PURE__ */ jsxs("button", {
+										type: "button",
+										onClick: () => onSortChange(nextSort(sort, col.id)),
+										className: cn("-mx-1.5 inline-flex h-7 items-center gap-1 rounded-sm px-1.5 uppercase outline-none hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20", sorted && "text-foreground", col.numeric && "flex-row-reverse"),
+										children: [col.header, sorted === "asc" ? /* @__PURE__ */ jsx(ArrowUp, {
+											className: "size-3.5",
+											"aria-hidden": true
+										}) : sorted === "desc" ? /* @__PURE__ */ jsx(ArrowDown, {
+											className: "size-3.5",
+											"aria-hidden": true
+										}) : /* @__PURE__ */ jsx(ChevronsUpDown, {
+											className: "size-3.5 opacity-50",
+											"aria-hidden": true
+										})]
+									}) : col.header
+								}, col.id);
+							}),
+							rowActions && /* @__PURE__ */ jsx(TableHead, {
+								className: "w-12",
+								children: /* @__PURE__ */ jsx("span", {
+									className: "sr-only",
+									children: "Actions"
+								})
+							})
+						]
+					}) }), /* @__PURE__ */ jsx(TableBody, { children: body })]
+				})
+			}),
+			onPageChange && page !== void 0 && pageCount !== void 0 && pageCount > 0 && /* @__PURE__ */ jsx(Pagination, {
+				page,
+				pageCount,
+				onPageChange,
+				summary: pageSummary
+			})
+		]
+	});
+}
+//#endregion
+export { DataTable };
+
+//# sourceMappingURL=data-table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.js","names":[],"sources":["../../src/components/data-table.tsx"],"sourcesContent":["import ArrowDown from '@burtson-labs/icons/react/arrow-down';\nimport ArrowUp from '@burtson-labs/icons/react/arrow-up';\nimport ChevronsUpDown from '@burtson-labs/icons/react/chevrons-up-down';\nimport Search from '@burtson-labs/icons/react/search';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Button } from './button';\nimport { Checkbox } from './checkbox';\nimport { Input } from './input';\nimport { Pagination } from './pagination';\nimport { Skeleton } from './skeleton';\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './table';\n\nexport interface DataTableColumn<T> {\n  id: string;\n  header: React.ReactNode;\n  cell: (row: T) => React.ReactNode;\n  sortable?: boolean;\n  /** Right-aligned tabular figures. */\n  numeric?: boolean;\n  className?: string;\n}\n\nexport type SortDirection = 'asc' | 'desc';\n\nexport interface DataTableSort {\n  columnId: string;\n  direction: SortDirection;\n}\n\nexport interface DataTableProps<T> extends Omit<React.ComponentProps<'div'>, 'children'> {\n  /** Required: what the table lists, e.g. \"Workspace members\". */\n  'aria-label': string;\n  columns: DataTableColumn<T>[];\n  /** The rows to show now: already sorted, filtered and paged by the app or server. */\n  rows: T[];\n  getRowId: (row: T) => string;\n  /** Names a row for screen readers (\"Select Ada Lovelace\"). Defaults to its id. */\n  getRowLabel?: (row: T) => string;\n\n  /** Controlled sort. A sortable header cycles ascending, descending, none. */\n  sort?: DataTableSort | null;\n  onSortChange?: (sort: DataTableSort | null) => void;\n\n  /** Controlled filter text; a search box appears when onFilterChange is set. */\n  filter?: string;\n  onFilterChange?: (value: string) => void;\n  filterPlaceholder?: string;\n\n  /** Controlled selection by row id; checkboxes appear when onSelectedChange is set. */\n  selected?: string[];\n  onSelectedChange?: (ids: string[]) => void;\n\n  /** Enter or a click on the row, e.g. open the record. */\n  onRowAction?: (row: T) => void;\n  /** Per-row controls in a trailing column, e.g. a DropdownMenu. */\n  rowActions?: (row: T) => React.ReactNode;\n\n  /** 1-based; Pagination appears when onPageChange is set. */\n  page?: number;\n  pageCount?: number;\n  onPageChange?: (page: number) => void;\n  /** e.g. \"1–25 of 312\". */\n  pageSummary?: React.ReactNode;\n\n  loading?: boolean;\n  /** A message shown in place of the rows. */\n  error?: React.ReactNode;\n  onRetry?: () => void;\n  /** Shown when there are no rows and nothing failed. */\n  empty?: React.ReactNode;\n  /** Extra controls beside the search box, e.g. filters or a bulk action. */\n  toolbar?: React.ReactNode;\n  density?: 'compact' | 'default';\n  stickyHeader?: boolean;\n}\n\nconst nextSort = (current: DataTableSort | null | undefined, id: string): DataTableSort | null => {\n  if (!current || current.columnId !== id) return { columnId: id, direction: 'asc' };\n  return current.direction === 'asc' ? { columnId: id, direction: 'desc' } : null;\n};\n\n// Clicks and keys aimed at these belong to them, not to the row.\nconst INTERACTIVE = 'a,button,input,select,textarea,[role=\"checkbox\"],[role=\"menuitem\"]';\n\n/**\n * A table recipe for records: sort, search, select, page, and row actions,\n * with loading, empty and error states. Fully controlled, so the data can\n * come from a server; the table never reorders rows itself.\n */\nfunction DataTable<T>({\n  'aria-label': ariaLabel,\n  columns,\n  rows,\n  getRowId,\n  getRowLabel,\n  sort,\n  onSortChange,\n  filter,\n  onFilterChange,\n  filterPlaceholder = 'Search',\n  selected,\n  onSelectedChange,\n  onRowAction,\n  rowActions,\n  page,\n  pageCount,\n  onPageChange,\n  pageSummary,\n  loading = false,\n  error,\n  onRetry,\n  empty = 'No results.',\n  toolbar,\n  density = 'default',\n  stickyHeader,\n  className,\n  ...props\n}: DataTableProps<T>) {\n  const selectable = Boolean(onSelectedChange);\n  const selectedSet = React.useMemo(() => new Set(selected ?? []), [selected]);\n  const ids = rows.map(getRowId);\n  const pageSelected = ids.filter((id) => selectedSet.has(id)).length;\n  const allState: boolean | 'indeterminate' =\n    ids.length > 0 && pageSelected === ids.length\n      ? true\n      : pageSelected > 0\n        ? 'indeterminate'\n        : false;\n  const colCount = columns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0);\n  const interactive = Boolean(onRowAction) || selectable;\n\n  // One tab stop in the body: the active row. Arrows move it.\n  const [active, setActive] = React.useState(0);\n  const frameRef = React.useRef<HTMLDivElement>(null);\n  // Rows can shrink under the active index (a new page, a filter).\n  const activeRow = Math.min(active, Math.max(0, rows.length - 1));\n\n  const toggle = (id: string) => {\n    if (!onSelectedChange) return;\n    const next = new Set(selectedSet);\n    if (next.has(id)) next.delete(id);\n    else next.add(id);\n    onSelectedChange([...next]);\n  };\n  const toggleAll = () => {\n    if (!onSelectedChange) return;\n    const next = new Set(selectedSet);\n    if (allState === true) ids.forEach((id) => next.delete(id));\n    else ids.forEach((id) => next.add(id));\n    onSelectedChange([...next]);\n  };\n  const focusRow = (i: number) => {\n    const clamped = Math.min(Math.max(i, 0), rows.length - 1);\n    setActive(clamped);\n    frameRef.current\n      ?.querySelectorAll<HTMLElement>('[data-slot=\"table-body\"] > [data-slot=\"table-row\"]')\n      [clamped]?.focus();\n  };\n\n  const onRowKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>, i: number, row: T) => {\n    if (event.target !== event.currentTarget) return;\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        focusRow(i + 1);\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        focusRow(i - 1);\n        break;\n      case 'Home':\n        event.preventDefault();\n        focusRow(0);\n        break;\n      case 'End':\n        event.preventDefault();\n        focusRow(rows.length - 1);\n        break;\n      case 'Enter':\n        if (onRowAction) {\n          event.preventDefault();\n          onRowAction(row);\n        }\n        break;\n      case ' ':\n        if (selectable) {\n          event.preventDefault();\n          toggle(getRowId(row));\n        }\n        break;\n    }\n  };\n\n  const showToolbar = Boolean(onFilterChange || toolbar || (selectable && selectedSet.size));\n  let body: React.ReactNode;\n  if (error) {\n    body = (\n      <TableRow className=\"hover:bg-transparent\">\n        <TableCell colSpan={colCount} className=\"h-auto py-8 text-center whitespace-normal\">\n          <div role=\"alert\" className=\"grid justify-items-center gap-3 text-sm\">\n            <span className=\"text-destructive\">{error}</span>\n            {onRetry && (\n              <Button type=\"button\" size=\"sm\" variant=\"outline\" onClick={onRetry}>\n                Try again\n              </Button>\n            )}\n          </div>\n        </TableCell>\n      </TableRow>\n    );\n  } else if (loading && rows.length === 0) {\n    body = Array.from({ length: 3 }, (_, r) => (\n      <TableRow key={`loading-${r}`} className=\"hover:bg-transparent\" aria-hidden>\n        {Array.from({ length: colCount }, (_, c) => (\n          <TableCell key={c}>\n            <Skeleton className=\"h-3.5 w-full max-w-40\" />\n          </TableCell>\n        ))}\n      </TableRow>\n    ));\n  } else if (rows.length === 0) {\n    body = (\n      <TableRow className=\"hover:bg-transparent\">\n        <TableCell\n          colSpan={colCount}\n          className=\"h-auto py-10 text-center whitespace-normal text-muted-foreground\"\n        >\n          {empty}\n        </TableCell>\n      </TableRow>\n    );\n  } else {\n    body = rows.map((row, i) => {\n      const id = getRowId(row);\n      const isSelected = selectedSet.has(id);\n      const label = getRowLabel?.(row) ?? id;\n      return (\n        <TableRow\n          key={id}\n          selected={isSelected}\n          tabIndex={interactive ? (i === activeRow ? 0 : -1) : undefined}\n          onFocus={() => setActive(i)}\n          onKeyDown={interactive ? (e) => onRowKeyDown(e, i, row) : undefined}\n          onClick={\n            onRowAction\n              ? (e) => {\n                  if ((e.target as HTMLElement).closest(INTERACTIVE)) return;\n                  onRowAction(row);\n                }\n              : undefined\n          }\n          className={cn(\n            interactive &&\n              'outline-none focus-visible:bg-muted/60 focus-visible:shadow-[inset_2px_0_0_var(--ring)]',\n            onRowAction && 'cursor-pointer',\n          )}\n        >\n          {selectable && (\n            <TableCell className=\"w-10\">\n              <Checkbox\n                checked={isSelected}\n                onCheckedChange={() => toggle(id)}\n                aria-label={`Select ${label}`}\n                tabIndex={-1}\n              />\n            </TableCell>\n          )}\n          {columns.map((col) => (\n            <TableCell key={col.id} numeric={col.numeric} className={col.className}>\n              {col.cell(row)}\n            </TableCell>\n          ))}\n          {rowActions && <TableCell className=\"w-12 text-right\">{rowActions(row)}</TableCell>}\n        </TableRow>\n      );\n    });\n  }\n\n  return (\n    <div data-slot=\"data-table\" className={cn('grid min-w-0 gap-3', className)} {...props}>\n      {showToolbar && (\n        <div className=\"flex flex-wrap items-center gap-2\">\n          {onFilterChange && (\n            <div className=\"relative w-full max-w-xs min-w-0 flex-1\">\n              <Search\n                className=\"pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground\"\n                aria-hidden\n              />\n              <Input\n                type=\"search\"\n                value={filter ?? ''}\n                onChange={(e) => onFilterChange(e.target.value)}\n                placeholder={filterPlaceholder}\n                aria-label={`Search ${ariaLabel.toLowerCase()}`}\n                className=\"pl-8\"\n              />\n            </div>\n          )}\n          {selectable && (\n            <span aria-live=\"polite\" className=\"text-xs text-muted-foreground tabular-nums\">\n              {selectedSet.size ? `${selectedSet.size} selected` : ''}\n            </span>\n          )}\n          {toolbar && <div className=\"ml-auto flex flex-wrap items-center gap-2\">{toolbar}</div>}\n        </div>\n      )}\n      <div ref={frameRef} className=\"rounded-lg border bg-surface\">\n        <Table\n          aria-label={ariaLabel}\n          aria-busy={loading || undefined}\n          density={density}\n          stickyHeader={stickyHeader}\n          className={cn(loading && rows.length > 0 && 'opacity-60 transition-opacity')}\n        >\n          <TableHeader>\n            <TableRow className=\"hover:bg-transparent\">\n              {selectable && (\n                <TableHead className=\"w-10\">\n                  <Checkbox\n                    checked={allState}\n                    onCheckedChange={toggleAll}\n                    disabled={rows.length === 0}\n                    aria-label=\"Select all rows on this page\"\n                  />\n                </TableHead>\n              )}\n              {columns.map((col) => {\n                const sorted = sort?.columnId === col.id ? sort.direction : undefined;\n                return (\n                  <TableHead\n                    key={col.id}\n                    numeric={col.numeric}\n                    className={col.className}\n                    aria-sort={\n                      col.sortable\n                        ? sorted === 'asc'\n                          ? 'ascending'\n                          : sorted === 'desc'\n                            ? 'descending'\n                            : 'none'\n                        : undefined\n                    }\n                  >\n                    {col.sortable && onSortChange ? (\n                      <button\n                        type=\"button\"\n                        onClick={() => onSortChange(nextSort(sort, col.id))}\n                        className={cn(\n                          '-mx-1.5 inline-flex h-7 items-center gap-1 rounded-sm px-1.5 uppercase outline-none hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20',\n                          sorted && 'text-foreground',\n                          col.numeric && 'flex-row-reverse',\n                        )}\n                      >\n                        {col.header}\n                        {sorted === 'asc' ? (\n                          <ArrowUp className=\"size-3.5\" aria-hidden />\n                        ) : sorted === 'desc' ? (\n                          <ArrowDown className=\"size-3.5\" aria-hidden />\n                        ) : (\n                          <ChevronsUpDown className=\"size-3.5 opacity-50\" aria-hidden />\n                        )}\n                      </button>\n                    ) : (\n                      col.header\n                    )}\n                  </TableHead>\n                );\n              })}\n              {rowActions && (\n                <TableHead className=\"w-12\">\n                  <span className=\"sr-only\">Actions</span>\n                </TableHead>\n              )}\n            </TableRow>\n          </TableHeader>\n          <TableBody>{body}</TableBody>\n        </Table>\n      </div>\n      {onPageChange && page !== undefined && pageCount !== undefined && pageCount > 0 && (\n        <Pagination\n          page={page}\n          pageCount={pageCount}\n          onPageChange={onPageChange}\n          summary={pageSummary}\n        />\n      )}\n    </div>\n  );\n}\n\nexport { DataTable };\n"],"mappings":"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"}

package/dist/components/mobile-nav.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+export interface MobileNavItem {
+    id: string;
+    label: string;
+    /** An icon element, e.g. <MessageSquare />; sized to 20px. */
+    icon: React.ReactNode;
+    /** Renders a link; leave out for a button that only calls onValueChange. */
+    href?: string;
+    /** A count, or true for a dot. */
+    badge?: number | boolean;
+}
+export interface MobileNavProps extends Omit<React.ComponentProps<'nav'>, 'onChange'> {
+    /** Three to five destinations the app defines. */
+    items: MobileNavItem[];
+    /** The current destination's id. */
+    value: string;
+    /**
+     * Called on every press. For a link, call `event.preventDefault()` and
+     * route yourself to keep a single-page app from reloading.
+     */
+    onValueChange?: (id: string, event: React.MouseEvent<HTMLElement>) => void;
+    /** `fixed` pins it to the bottom of the viewport. */
+    position?: 'fixed' | 'static';
+    'aria-label'?: string;
+}
+/**
+ * The phone's bottom tab bar: icon over a visible label, 44px+ targets, and
+ * room for the home indicator (safe-area insets). Destinations come from the
+ * app; don't pad it with empty sections.
+ */
+declare function MobileNav({ items, value, onValueChange, position, className, 'aria-label': ariaLabel, ...props }: MobileNavProps): React.JSX.Element;
+export { MobileNav };

package/dist/components/mobile-nav.js

@@ -0,0 +1,72 @@
+import { cn } from "../lib/utils.js";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/mobile-nav.tsx
+/**
+* The phone's bottom tab bar: icon over a visible label, 44px+ targets, and
+* room for the home indicator (safe-area insets). Destinations come from the
+* app; don't pad it with empty sections.
+*/
+function MobileNav({ items, value, onValueChange, position = "static", className, "aria-label": ariaLabel = "Primary", ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"data-slot": "mobile-nav",
+		"aria-label": ariaLabel,
+		className: cn("border-t bg-surface/95 pr-[env(safe-area-inset-right)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] backdrop-blur supports-[backdrop-filter]:bg-surface/80", position === "fixed" && "fixed inset-x-0 bottom-0 z-40", className),
+		...props,
+		children: /* @__PURE__ */ jsx("ul", {
+			className: "mx-auto flex max-w-lg",
+			children: items.map((item) => {
+				const active = item.id === value;
+				const count = typeof item.badge === "number" && item.badge > 0 ? item.badge : void 0;
+				const dot = item.badge === true;
+				const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "relative [&_svg]:size-5",
+						"aria-hidden": true,
+						children: [item.icon, (count !== void 0 || dot) && /* @__PURE__ */ jsx("span", {
+							className: cn("absolute -top-1 left-3 grid place-items-center rounded-full bg-destructive text-[10px] leading-none font-semibold text-destructive-foreground ring-2 ring-surface tabular-nums", count !== void 0 ? "h-4 min-w-4 px-1" : "size-2"),
+							children: count !== void 0 ? count > 99 ? "99+" : count : null
+						})]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "max-w-full truncate",
+						children: item.label
+					}),
+					count !== void 0 && /* @__PURE__ */ jsxs("span", {
+						className: "sr-only",
+						children: [
+							", ",
+							count,
+							" new"
+						]
+					}),
+					dot && /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: ", new"
+					})
+				] });
+				const classes = cn("flex min-h-14 w-full min-w-11 flex-col items-center justify-center gap-1 px-1 py-1.5 text-[11px] font-medium text-muted-foreground outline-none transition-colors select-none [-webkit-tap-highlight-color:transparent] hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/25 focus-visible:ring-inset", active && "text-brand hover:text-brand");
+				return /* @__PURE__ */ jsx("li", {
+					className: "min-w-0 flex-1",
+					children: item.href ? /* @__PURE__ */ jsx("a", {
+						href: item.href,
+						"aria-current": active ? "page" : void 0,
+						onClick: (e) => onValueChange?.(item.id, e),
+						className: classes,
+						children: content
+					}) : /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-current": active ? "page" : void 0,
+						onClick: (e) => onValueChange?.(item.id, e),
+						className: classes,
+						children: content
+					})
+				}, item.id);
+			})
+		})
+	});
+}
+//#endregion
+export { MobileNav };
+
+//# sourceMappingURL=mobile-nav.js.map

package/dist/components/mobile-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-nav.js","names":["_Fragment"],"sources":["../../src/components/mobile-nav.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nexport interface MobileNavItem {\n  id: string;\n  label: string;\n  /** An icon element, e.g. <MessageSquare />; sized to 20px. */\n  icon: React.ReactNode;\n  /** Renders a link; leave out for a button that only calls onValueChange. */\n  href?: string;\n  /** A count, or true for a dot. */\n  badge?: number | boolean;\n}\n\nexport interface MobileNavProps extends Omit<React.ComponentProps<'nav'>, 'onChange'> {\n  /** Three to five destinations the app defines. */\n  items: MobileNavItem[];\n  /** The current destination's id. */\n  value: string;\n  /**\n   * Called on every press. For a link, call `event.preventDefault()` and\n   * route yourself to keep a single-page app from reloading.\n   */\n  onValueChange?: (id: string, event: React.MouseEvent<HTMLElement>) => void;\n  /** `fixed` pins it to the bottom of the viewport. */\n  position?: 'fixed' | 'static';\n  'aria-label'?: string;\n}\n\n/**\n * The phone's bottom tab bar: icon over a visible label, 44px+ targets, and\n * room for the home indicator (safe-area insets). Destinations come from the\n * app; don't pad it with empty sections.\n */\nfunction MobileNav({\n  items,\n  value,\n  onValueChange,\n  position = 'static',\n  className,\n  'aria-label': ariaLabel = 'Primary',\n  ...props\n}: MobileNavProps) {\n  return (\n    <nav\n      data-slot=\"mobile-nav\"\n      aria-label={ariaLabel}\n      className={cn(\n        'border-t bg-surface/95 pr-[env(safe-area-inset-right)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] backdrop-blur supports-[backdrop-filter]:bg-surface/80',\n        position === 'fixed' && 'fixed inset-x-0 bottom-0 z-40',\n        className,\n      )}\n      {...props}\n    >\n      <ul className=\"mx-auto flex max-w-lg\">\n        {items.map((item) => {\n          const active = item.id === value;\n          const count = typeof item.badge === 'number' && item.badge > 0 ? item.badge : undefined;\n          const dot = item.badge === true;\n          const content = (\n            <>\n              <span className=\"relative [&_svg]:size-5\" aria-hidden>\n                {item.icon}\n                {(count !== undefined || dot) && (\n                  <span\n                    className={cn(\n                      'absolute -top-1 left-3 grid place-items-center rounded-full bg-destructive text-[10px] leading-none font-semibold text-destructive-foreground ring-2 ring-surface tabular-nums',\n                      count !== undefined ? 'h-4 min-w-4 px-1' : 'size-2',\n                    )}\n                  >\n                    {count !== undefined ? (count > 99 ? '99+' : count) : null}\n                  </span>\n                )}\n              </span>\n              <span className=\"max-w-full truncate\">{item.label}</span>\n              {count !== undefined && <span className=\"sr-only\">, {count} new</span>}\n              {dot && <span className=\"sr-only\">, new</span>}\n            </>\n          );\n          const classes = cn(\n            'flex min-h-14 w-full min-w-11 flex-col items-center justify-center gap-1 px-1 py-1.5 text-[11px] font-medium text-muted-foreground outline-none transition-colors select-none [-webkit-tap-highlight-color:transparent] hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/25 focus-visible:ring-inset',\n            active && 'text-brand hover:text-brand',\n          );\n          return (\n            <li key={item.id} className=\"min-w-0 flex-1\">\n              {item.href ? (\n                <a\n                  href={item.href}\n                  aria-current={active ? 'page' : undefined}\n                  onClick={(e) => onValueChange?.(item.id, e)}\n                  className={classes}\n                >\n                  {content}\n                </a>\n              ) : (\n                <button\n                  type=\"button\"\n                  aria-current={active ? 'page' : undefined}\n                  onClick={(e) => onValueChange?.(item.id, e)}\n                  className={classes}\n                >\n                  {content}\n                </button>\n              )}\n            </li>\n          );\n        })}\n      </ul>\n    </nav>\n  );\n}\n\nexport { MobileNav };\n"],"mappings":";;;;;;;;;AAmCA,SAAS,UAAU,EACjB,OACA,OACA,eACA,WAAW,UACX,WACA,cAAc,YAAY,WAC1B,GAAG,SACc;CACjB,OACE,oBAAC,OAAD;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,iLACA,aAAa,WAAW,iCACxB,SACF;EACA,GAAI;EAEJ,UAAA,oBAAC,MAAD;GAAI,WAAU;GACX,UAAA,MAAM,KAAK,SAAS;IACnB,MAAM,SAAS,KAAK,OAAO;IAC3B,MAAM,QAAQ,OAAO,KAAK,UAAU,YAAY,KAAK,QAAQ,IAAI,KAAK,QAAQ,KAAA;IAC9E,MAAM,MAAM,KAAK,UAAU;IAC3B,MAAM,UACJ,qBAAAA,UAAA,EAAA,UAAA;KACE,qBAAC,QAAD;MAAM,WAAU;MAA0B,eAAA;MAA1C,UAAA,CACG,KAAK,OACJ,UAAU,KAAA,KAAa,QACvB,oBAAC,QAAD;OACE,WAAW,GACT,kLACA,UAAU,KAAA,IAAY,qBAAqB,QAC7C;OAEC,UAAA,UAAU,KAAA,IAAa,QAAQ,KAAK,QAAQ,QAAS;MAClD,CAAA,CAEJ;;KACN,oBAAC,QAAD;MAAM,WAAU;MAAuB,UAAA,KAAK;KAAY,CAAA;KACvD,UAAU,KAAA,KAAa,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA;OAA0B;OAAG;OAAM;MAAU;;KACpE,OAAO,oBAAC,QAAD;MAAM,WAAU;MAAU,UAAA;KAAW,CAAA;IAC7C,EAAA,CAAA;IAEJ,MAAM,UAAU,GACd,8TACA,UAAU,6BACZ;IACA,OACE,oBAAC,MAAD;KAAkB,WAAU;KACzB,UAAA,KAAK,OACJ,oBAAC,KAAD;MACE,MAAM,KAAK;MACX,gBAAc,SAAS,SAAS,KAAA;MAChC,UAAU,MAAM,gBAAgB,KAAK,IAAI,CAAC;MAC1C,WAAW;MAEV,UAAA;KACA,CAAA,IAEH,oBAAC,UAAD;MACE,MAAK;MACL,gBAAc,SAAS,SAAS,KAAA;MAChC,UAAU,MAAM,gBAAgB,KAAK,IAAI,CAAC;MAC1C,WAAW;MAEV,UAAA;KACK,CAAA;IAER,GApBK,KAAK,EAoBV;GAER,CAAC;EACC,CAAA;CACD,CAAA;AAET"}

package/dist/components/sheet.d.ts

@@ -6,11 +6,17 @@ declare function SheetClose(props: React.ComponentProps<typeof SheetPrimitive.Cl
 declare const sideClasses: {
     readonly right: "inset-y-0 right-0 h-full w-3/4 border-l [--bl-sheet-x:100%] sm:max-w-sm";
     readonly left: "inset-y-0 left-0 h-full w-3/4 border-r [--bl-sheet-x:-100%] sm:max-w-sm";
-    readonly top: "inset-x-0 top-0 max-h-[85dvh] rounded-b-xl border-b [--bl-sheet-x:0] [--bl-sheet-y:-100%]";
-    readonly bottom: "inset-x-0 bottom-0 max-h-[85dvh] rounded-t-xl border-t [--bl-sheet-x:0] [--bl-sheet-y:100%]";
+    readonly top: "inset-x-0 top-0 max-h-[85dvh] rounded-b-xl border-b pt-[env(safe-area-inset-top)] [--bl-sheet-x:0] [--bl-sheet-y:-100%]";
+    readonly bottom: "inset-x-0 bottom-0 max-h-[85dvh] rounded-t-xl border-t pb-[env(safe-area-inset-bottom)] [--bl-sheet-x:0] [--bl-sheet-y:100%]";
 };
-declare function SheetContent({ className, children, side, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
+declare function SheetContent({ className, children, side, handle, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
     side?: keyof typeof sideClasses;
+    /**
+     * A grab bar at the top edge, the cue that this is a drawer. Visual only:
+     * it does not drag; close with the button, Escape or the overlay. On by
+     * default for bottom sheets.
+     */
+    handle?: boolean;
 }): React.JSX.Element;
 declare function SheetHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 declare function SheetFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;

package/dist/components/sheet.js

@@ -25,10 +25,10 @@ function SheetClose(props) {
 var sideClasses = {
 	right: "inset-y-0 right-0 h-full w-3/4 border-l [--bl-sheet-x:100%] sm:max-w-sm",
 	left: "inset-y-0 left-0 h-full w-3/4 border-r [--bl-sheet-x:-100%] sm:max-w-sm",
-	top: "inset-x-0 top-0 max-h-[85dvh] rounded-b-xl border-b [--bl-sheet-x:0] [--bl-sheet-y:-100%]",
-	bottom: "inset-x-0 bottom-0 max-h-[85dvh] rounded-t-xl border-t [--bl-sheet-x:0] [--bl-sheet-y:100%]"
+	top: "inset-x-0 top-0 max-h-[85dvh] rounded-b-xl border-b pt-[env(safe-area-inset-top)] [--bl-sheet-x:0] [--bl-sheet-y:-100%]",
+	bottom: "inset-x-0 bottom-0 max-h-[85dvh] rounded-t-xl border-t pb-[env(safe-area-inset-bottom)] [--bl-sheet-x:0] [--bl-sheet-y:100%]"
 };
-function SheetContent({ className, children, side = "right", ...props }) {
+function SheetContent({ className, children, side = "right", handle = side === "bottom", ...props }) {
 	return /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, {
 		"data-slot": "sheet-overlay",
 		className: "fixed inset-0 z-50 bg-black/55 backdrop-blur-[3px] data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in"
@@ -36,13 +36,21 @@ function SheetContent({ className, children, side = "right", ...props }) {
 		"data-slot": "sheet-content",
 		className: cn("fixed z-50 max-h-dvh overflow-y-auto overscroll-contain flex flex-col gap-4 border-border-strong bg-surface-raised text-foreground shadow-[0_24px_80px_rgb(0_0_0_/_0.28)] outline-none data-[state=closed]:animate-sheet-out data-[state=open]:animate-sheet-in", sideClasses[side], className),
 		...props,
-		children: [children, /* @__PURE__ */ jsxs(Dialog.Close, {
-			className: "absolute top-3.5 right-3.5 grid size-8 place-items-center rounded-md text-muted-foreground transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20 [&_svg]:size-4",
-			children: [/* @__PURE__ */ jsx(X, { "aria-hidden": true }), /* @__PURE__ */ jsx("span", {
-				className: "sr-only",
-				children: "Close"
-			})]
-		})]
+		children: [
+			handle && /* @__PURE__ */ jsx("div", {
+				"data-slot": "sheet-handle",
+				"aria-hidden": true,
+				className: "mx-auto mt-2 -mb-2 h-1 w-10 shrink-0 rounded-full bg-border-strong"
+			}),
+			children,
+			/* @__PURE__ */ jsxs(Dialog.Close, {
+				className: cn("absolute right-3 grid size-8 place-items-center rounded-md text-muted-foreground transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20 pointer-coarse:size-11 [&_svg]:size-4 pointer-coarse:[&_svg]:size-5", side === "top" ? "top-[calc(env(safe-area-inset-top)+0.75rem)]" : "top-3"),
+				children: [/* @__PURE__ */ jsx(X, { "aria-hidden": true }), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "Close"
+				})]
+			})
+		]
 	})] });
 }
 function SheetHeader({ className, ...props }) {

package/dist/components/sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","names":["SheetPrimitive"],"sources":["../../src/components/sheet.tsx"],"sourcesContent":["import X from '@burtson-labs/icons/react/x';\nimport { Dialog as SheetPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Sheet(props: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n}\n\nfunction SheetTrigger(props: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\nfunction SheetClose(props: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\nconst sideClasses = {\n  right: 'inset-y-0 right-0 h-full w-3/4 border-l [--bl-sheet-x:100%] sm:max-w-sm',\n  left: 'inset-y-0 left-0 h-full w-3/4 border-r [--bl-sheet-x:-100%] sm:max-w-sm',\n  // Top and bottom sheets are the mobile drawers.\n  top: 'inset-x-0 top-0 max-h-[85dvh] rounded-b-xl border-b [--bl-sheet-x:0] [--bl-sheet-y:-100%]',\n  bottom:\n    'inset-x-0 bottom-0 max-h-[85dvh] rounded-t-xl border-t [--bl-sheet-x:0] [--bl-sheet-y:100%]',\n} as const;\n\nfunction SheetContent({\n  className,\n  children,\n  side = 'right',\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & { side?: keyof typeof sideClasses }) {\n  return (\n    <SheetPrimitive.Portal>\n      <SheetPrimitive.Overlay\n        data-slot=\"sheet-overlay\"\n        className=\"fixed inset-0 z-50 bg-black/55 backdrop-blur-[3px] data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in\"\n      />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        className={cn(\n          'fixed z-50 max-h-dvh overflow-y-auto overscroll-contain flex flex-col gap-4 border-border-strong bg-surface-raised text-foreground shadow-[0_24px_80px_rgb(0_0_0_/_0.28)] outline-none data-[state=closed]:animate-sheet-out data-[state=open]:animate-sheet-in',\n          sideClasses[side],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <SheetPrimitive.Close className=\"absolute top-3.5 right-3.5 grid size-8 place-items-center rounded-md text-muted-foreground transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20 [&_svg]:size-4\">\n          <X aria-hidden />\n          <span className=\"sr-only\">Close</span>\n        </SheetPrimitive.Close>\n      </SheetPrimitive.Content>\n    </SheetPrimitive.Portal>\n  );\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn('flex flex-col gap-1.5 p-4', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn('mt-auto flex flex-col gap-2 p-4', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn('text-base font-semibold tracking-[-0.02em] text-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn('text-sm text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n};\n"],"mappings":";;;;;;AAMA,SAAS,MAAM,OAAyD;CACtE,OAAO,oBAACA,OAAe,MAAhB;EAAqB,aAAU;EAAQ,GAAI;CAAQ,CAAA;AAC5D;AAEA,SAAS,aAAa,OAA4D;CAChF,OAAO,oBAACA,OAAe,SAAhB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,WAAW,OAA0D;CAC5E,OAAO,oBAACA,OAAe,OAAhB;EAAsB,aAAU;EAAc,GAAI;CAAQ,CAAA;AACnE;AAEA,IAAM,cAAc;CAClB,OAAO;CACP,MAAM;CAEN,KAAK;CACL,QACE;AACJ;AAEA,SAAS,aAAa,EACpB,WACA,UACA,OAAO,SACP,GAAG,SACyF;CAC5F,OACE,qBAACA,OAAe,QAAhB,EAAA,UAAA,CACE,oBAACA,OAAe,SAAhB;EACE,aAAU;EACV,WAAU;CACX,CAAA,GACD,qBAACA,OAAe,SAAhB;EACE,aAAU;EACV,WAAW,GACT,mQACA,YAAY,OACZ,SACF;EACA,GAAI;EAPN,UAAA,CASG,UACD,qBAACA,OAAe,OAAhB;GAAsB,WAAU;GAAhC,UAAA,CACE,oBAAC,GAAD,EAAG,eAAA,KAAa,CAAA,GAChB,oBAAC,QAAD;IAAM,WAAU;IAAU,UAAA;GAAW,CAAA,CACjB;EACA,CAAA,CAAA;CACH,CAAA,CAAA,EAAA,CAAA;AAE3B;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,6BAA6B,SAAS;EACpD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAA4D;CAC9F,OACE,oBAACA,OAAe,OAAhB;EACE,aAAU;EACV,WAAW,GAAG,8DAA8D,SAAS;EACrF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,oBAACA,OAAe,aAAhB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"sheet.js","names":["SheetPrimitive"],"sources":["../../src/components/sheet.tsx"],"sourcesContent":["import X from '@burtson-labs/icons/react/x';\nimport { Dialog as SheetPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Sheet(props: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n}\n\nfunction SheetTrigger(props: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\nfunction SheetClose(props: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\nconst sideClasses = {\n  right: 'inset-y-0 right-0 h-full w-3/4 border-l [--bl-sheet-x:100%] sm:max-w-sm',\n  left: 'inset-y-0 left-0 h-full w-3/4 border-r [--bl-sheet-x:-100%] sm:max-w-sm',\n  // Top and bottom sheets are the mobile drawers. Each keeps clear of the\n  // notch or home indicator on its edge (safe-area insets).\n  top: 'inset-x-0 top-0 max-h-[85dvh] rounded-b-xl border-b pt-[env(safe-area-inset-top)] [--bl-sheet-x:0] [--bl-sheet-y:-100%]',\n  bottom:\n    'inset-x-0 bottom-0 max-h-[85dvh] rounded-t-xl border-t pb-[env(safe-area-inset-bottom)] [--bl-sheet-x:0] [--bl-sheet-y:100%]',\n} as const;\n\nfunction SheetContent({\n  className,\n  children,\n  side = 'right',\n  handle = side === 'bottom',\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: keyof typeof sideClasses;\n  /**\n   * A grab bar at the top edge, the cue that this is a drawer. Visual only:\n   * it does not drag; close with the button, Escape or the overlay. On by\n   * default for bottom sheets.\n   */\n  handle?: boolean;\n}) {\n  return (\n    <SheetPrimitive.Portal>\n      <SheetPrimitive.Overlay\n        data-slot=\"sheet-overlay\"\n        className=\"fixed inset-0 z-50 bg-black/55 backdrop-blur-[3px] data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in\"\n      />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        className={cn(\n          'fixed z-50 max-h-dvh overflow-y-auto overscroll-contain flex flex-col gap-4 border-border-strong bg-surface-raised text-foreground shadow-[0_24px_80px_rgb(0_0_0_/_0.28)] outline-none data-[state=closed]:animate-sheet-out data-[state=open]:animate-sheet-in',\n          sideClasses[side],\n          className,\n        )}\n        {...props}\n      >\n        {handle && (\n          <div\n            data-slot=\"sheet-handle\"\n            aria-hidden\n            className=\"mx-auto mt-2 -mb-2 h-1 w-10 shrink-0 rounded-full bg-border-strong\"\n          />\n        )}\n        {children}\n        {/* 44px on touch screens, 32px with a mouse. */}\n        <SheetPrimitive.Close\n          className={cn(\n            'absolute right-3 grid size-8 place-items-center rounded-md text-muted-foreground transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20 pointer-coarse:size-11 [&_svg]:size-4 pointer-coarse:[&_svg]:size-5',\n            side === 'top' ? 'top-[calc(env(safe-area-inset-top)+0.75rem)]' : 'top-3',\n          )}\n        >\n          <X aria-hidden />\n          <span className=\"sr-only\">Close</span>\n        </SheetPrimitive.Close>\n      </SheetPrimitive.Content>\n    </SheetPrimitive.Portal>\n  );\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn('flex flex-col gap-1.5 p-4', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn('mt-auto flex flex-col gap-2 p-4', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn('text-base font-semibold tracking-[-0.02em] text-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn('text-sm text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n};\n"],"mappings":";;;;;;AAMA,SAAS,MAAM,OAAyD;CACtE,OAAO,oBAACA,OAAe,MAAhB;EAAqB,aAAU;EAAQ,GAAI;CAAQ,CAAA;AAC5D;AAEA,SAAS,aAAa,OAA4D;CAChF,OAAO,oBAACA,OAAe,SAAhB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,WAAW,OAA0D;CAC5E,OAAO,oBAACA,OAAe,OAAhB;EAAsB,aAAU;EAAc,GAAI;CAAQ,CAAA;AACnE;AAEA,IAAM,cAAc;CAClB,OAAO;CACP,MAAM;CAGN,KAAK;CACL,QACE;AACJ;AAEA,SAAS,aAAa,EACpB,WACA,UACA,OAAO,SACP,SAAS,SAAS,UAClB,GAAG,SASF;CACD,OACE,qBAACA,OAAe,QAAhB,EAAA,UAAA,CACE,oBAACA,OAAe,SAAhB;EACE,aAAU;EACV,WAAU;CACX,CAAA,GACD,qBAACA,OAAe,SAAhB;EACE,aAAU;EACV,WAAW,GACT,mQACA,YAAY,OACZ,SACF;EACA,GAAI;EAPN,UAAA;GASG,UACC,oBAAC,OAAD;IACE,aAAU;IACV,eAAA;IACA,WAAU;GACX,CAAA;GAEF;GAED,qBAACA,OAAe,OAAhB;IACE,WAAW,GACT,gRACA,SAAS,QAAQ,iDAAiD,OACpE;IAJF,UAAA,CAME,oBAAC,GAAD,EAAG,eAAA,KAAa,CAAA,GAChB,oBAAC,QAAD;KAAM,WAAU;KAAU,UAAA;IAAW,CAAA,CACjB;;EACA;CACH,CAAA,CAAA,EAAA,CAAA;AAE3B;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,6BAA6B,SAAS;EACpD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAA4D;CAC9F,OACE,oBAACA,OAAe,OAAhB;EACE,aAAU;EACV,WAAW,GAAG,8DAA8D,SAAS;EACrF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,oBAACA,OAAe,aAAhB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}

package/dist/components/source.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { PopoverTrigger } from './popover';
+/** Where an answer came from. The app supplies provenance; this only shows it. */
+export interface Source {
+    id: string;
+    title: string;
+    /** Only http(s) links are rendered as links. */
+    url?: string;
+    /** The passage the answer relied on. */
+    snippet?: string;
+    /** Short location, e.g. "page 4" or "Updated 2 days ago". */
+    meta?: string;
+    icon?: React.ReactNode;
+}
+/** An http(s) URL, or undefined for anything else (javascript:, data:, relative). */
+export declare function safeSourceHref(url: string | undefined): string | undefined;
+export interface SourceCitationProps extends Omit<React.ComponentProps<typeof PopoverTrigger>, 'children'> {
+    /** 1-based number shown in the text; matches the SourceList entry. */
+    index: number;
+    source: Source;
+}
+/** An inline [n] marker in an answer; opens the source it points to. */
+declare function SourceCitation({ index, source, className, ...props }: SourceCitationProps): React.JSX.Element;
+export interface SourceListProps extends React.ComponentProps<'section'> {
+    sources: Source[];
+    /** Heading; also the list's accessible name. */
+    label?: string;
+}
+/** Numbered sources under an answer, in citation order. */
+declare function SourceList({ sources, label, className, ...props }: SourceListProps): React.JSX.Element | null;
+export { SourceCitation, SourceList };