@dowel-ui/react 0.1.0

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

@@ -0,0 +1,263 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select/select.js";
+import { Button } from "../button/button.js";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../dropdown-menu/dropdown-menu.js";
+import { Table as Table$1, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../table/table.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { flexRender } from "@tanstack/react-table";
+//#region src/components/data-table/data-table.tsx
+function hasSortState(column) {
+	return "getIsSorted" in column && "getCanSort" in column;
+}
+function hasSize(header) {
+	return "getSize" in header;
+}
+function hasSelection(row) {
+	return "getIsSelected" in row;
+}
+function hasVisibility(column) {
+	return "getIsVisible" in column;
+}
+/**
+* Whether a column's cells should render.
+*
+* A table without the visibility feature has no notion of hidden columns, so
+* everything renders. With the feature on, this has to be honoured for cells as
+* well as headers — dropping a header while still rendering its cells shifts
+* every row out of alignment with the columns above it.
+*/
+function isColumnVisible(column) {
+	return !hasVisibility(column) || column.getIsVisible();
+}
+function ariaSort(column) {
+	if (!hasSortState(column)) return void 0;
+	const sorted = column.getIsSorted();
+	if (sorted === "asc") return "ascending";
+	if (sorted === "desc") return "descending";
+	return column.getCanSort() ? "none" : void 0;
+}
+function columnWidth(header) {
+	if (!hasSize(header)) return void 0;
+	const size = header.getSize();
+	return size ? { width: size } : void 0;
+}
+function DataTable({ table, empty, className, ...props }) {
+	const rows = table.getRowModel().rows;
+	const columnCount = table.getAllLeafColumns().length;
+	return /* @__PURE__ */ jsx("div", {
+		className: "rounded-lg border border-border",
+		children: /* @__PURE__ */ jsxs(Table$1, {
+			className: cn(className),
+			...props,
+			children: [/* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableHead, {
+				colSpan: header.colSpan,
+				style: columnWidth(header),
+				"aria-sort": ariaSort(header.column),
+				children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
+			}, header.id)) }, headerGroup.id)) }), /* @__PURE__ */ jsx(TableBody, { children: rows.length === 0 ? /* @__PURE__ */ jsx(TableRow, {
+				className: "hover:bg-transparent",
+				children: /* @__PURE__ */ jsx(TableCell, {
+					colSpan: columnCount,
+					className: "h-32 p-0 text-center",
+					children: empty ?? /* @__PURE__ */ jsx("span", {
+						className: "text-sm text-muted-foreground",
+						children: "No results."
+					})
+				})
+			}) : rows.map((row) => /* @__PURE__ */ jsx(TableRow, {
+				"data-state": hasSelection(row) && row.getIsSelected() ? "selected" : void 0,
+				children: row.getAllCells().filter((cell) => isColumnVisible(cell.column)).map((cell) => /* @__PURE__ */ jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+			}, row.id)) })]
+		})
+	});
+}
+/**
+* A sortable column header.
+*
+* Falls back to plain text when the column cannot be sorted, rather than
+* rendering a button that does nothing — a control that looks interactive and
+* is not is worse than no control.
+*/
+function DataTableColumnHeader({ column, title, className, ...props }) {
+	if (!column.getCanSort()) return /* @__PURE__ */ jsx("div", {
+		className: cn("text-xs font-medium", className),
+		...props,
+		children: title
+	});
+	const sorted = column.getIsSorted();
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center", className),
+		...props,
+		children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				variant: "ghost",
+				size: "sm",
+				className: "-ml-2 h-7 gap-1 px-2 font-medium text-muted-foreground data-[state=open]:bg-accent",
+				children: [
+					title,
+					/* @__PURE__ */ jsx(SortIcon, { direction: sorted === false ? void 0 : sorted }),
+					/* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: sorted === "asc" ? `${title}, sorted ascending` : sorted === "desc" ? `${title}, sorted descending` : `${title}, not sorted`
+					})
+				]
+			})
+		}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+			align: "start",
+			children: [/* @__PURE__ */ jsx(DropdownMenuItem, {
+				onSelect: () => {
+					column.toggleSorting(false);
+				},
+				children: "Sort ascending"
+			}), /* @__PURE__ */ jsx(DropdownMenuItem, {
+				onSelect: () => {
+					column.toggleSorting(true);
+				},
+				children: "Sort descending"
+			})]
+		})] })
+	});
+}
+function SortIcon({ direction }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		"aria-hidden": "true",
+		className: "size-3.5 opacity-70",
+		children: /* @__PURE__ */ jsx("path", {
+			d: direction === "asc" ? "m7 14 5-5 5 5" : direction === "desc" ? "m7 10 5 5 5-5" : "m8 10 4-4 4 4M8 14l4 4 4-4",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+/** Toggles column visibility. */
+function DataTableViewOptions({ table, label = "Columns" }) {
+	const columns = table.getAllColumns().filter((column) => column.getCanHide());
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			size: "sm",
+			children: label
+		})
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		align: "end",
+		className: "w-44",
+		children: [
+			/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Toggle columns" }),
+			/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+			columns.map((column) => /* @__PURE__ */ jsx(DropdownMenuCheckboxItem, {
+				checked: column.getIsVisible(),
+				onCheckedChange: (checked) => {
+					column.toggleVisibility(checked === true);
+				},
+				children: column.id
+			}, column.id))
+		]
+	})] });
+}
+/**
+* Page controls for a table.
+*
+* The page position is a polite live region: paging replaces the rows in place,
+* and without an announcement a screen reader user gets no confirmation that
+* anything happened.
+*/
+function DataTablePagination({ table, pageSizes = [
+	10,
+	20,
+	50,
+	100
+], status }) {
+	const { pageIndex, pageSize } = table.state.pagination;
+	const pageCount = table.getPageCount();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-wrap items-center justify-between gap-4 px-1 py-3",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "text-sm text-muted-foreground",
+			"aria-live": "polite",
+			children: status ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+				"Page ",
+				pageIndex + 1,
+				" of ",
+				Math.max(1, pageCount)
+			] })
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-4",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-sm text-muted-foreground",
+					id: "rows-per-page",
+					children: "Rows per page"
+				}), /* @__PURE__ */ jsxs(Select, {
+					value: String(pageSize),
+					onValueChange: (value) => {
+						table.setPageSize(Number(value));
+					},
+					children: [/* @__PURE__ */ jsx(SelectTrigger, {
+						triggerSize: "sm",
+						className: "w-18",
+						"aria-labelledby": "rows-per-page",
+						children: /* @__PURE__ */ jsx(SelectValue, {})
+					}), /* @__PURE__ */ jsx(SelectContent, { children: pageSizes.map((size) => /* @__PURE__ */ jsx(SelectItem, {
+						value: String(size),
+						children: size
+					}, size)) })]
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1",
+				children: [/* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "icon-sm",
+					"aria-label": "Go to previous page",
+					disabled: !table.getCanPreviousPage(),
+					onClick: () => {
+						table.previousPage();
+					},
+					children: /* @__PURE__ */ jsx("svg", {
+						viewBox: "0 0 24 24",
+						fill: "none",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx("path", {
+							d: "m15 18-6-6 6-6",
+							stroke: "currentColor",
+							strokeWidth: "2",
+							strokeLinecap: "round",
+							strokeLinejoin: "round"
+						})
+					})
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "icon-sm",
+					"aria-label": "Go to next page",
+					disabled: !table.getCanNextPage(),
+					onClick: () => {
+						table.nextPage();
+					},
+					children: /* @__PURE__ */ jsx("svg", {
+						viewBox: "0 0 24 24",
+						fill: "none",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx("path", {
+							d: "m9 18 6-6-6-6",
+							stroke: "currentColor",
+							strokeWidth: "2",
+							strokeLinecap: "round",
+							strokeLinejoin: "round"
+						})
+					})
+				})]
+			})]
+		})]
+	});
+}
+//#endregion
+export { DataTable, DataTableColumnHeader, DataTablePagination, DataTableViewOptions };
+
+//# sourceMappingURL=data-table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.js","names":["Table"],"sources":["../../../src/components/data-table/data-table.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  flexRender,\n  type RowData,\n  type Table as TanstackTable,\n  type TableFeatures,\n} from \"@tanstack/react-table\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\n\nimport { Button } from \"@/components/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/dropdown-menu\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/table\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Presentation for a TanStack Table instance.\n *\n * Deliberately not a component that takes `data` and `columns` and does\n * everything. Sorting, filtering, selection and pagination are the table\n * library's job and it does them well; wrapping them in props would re-expose\n * an API that already exists, badly, and block anything the wrapper did not\n * anticipate. The consumer owns the instance:\n *\n *   const table = useTable({ features, columns, data });\n *   <DataTable table={table} />\n *\n * ## How these are typed\n *\n * The table library's features are opt-in, and its types follow: a method like\n * `getCanSort` exists only when the sorting feature is enabled.\n *\n * The controls below therefore declare **the shape they need** rather than\n * being generic over feature flags. A column from a table without sorting does\n * not satisfy `SortableColumn`, so passing one is a compile error at the call\n * site — the guarantee we wanted, and it survives the library reshuffling its\n * internal feature types.\n *\n * `DataTable` itself has to render any table, so it uses the core API and\n * detects the optional extras with real type guards.\n */\n\n/* -------------------------------------------------------------------------- */\n/* Capability detection                                                        */\n/* -------------------------------------------------------------------------- */\n\ninterface WithSortState {\n  getIsSorted: () => \"asc\" | \"desc\" | false;\n  getCanSort: () => boolean;\n}\n\ninterface WithSize {\n  getSize: () => number;\n}\n\ninterface WithSelection {\n  getIsSelected: () => boolean;\n}\n\ninterface WithVisibility {\n  getIsVisible: () => boolean;\n}\n\nfunction hasSortState(column: object): column is WithSortState {\n  return \"getIsSorted\" in column && \"getCanSort\" in column;\n}\n\nfunction hasSize(header: object): header is WithSize {\n  return \"getSize\" in header;\n}\n\nfunction hasSelection(row: object): row is WithSelection {\n  return \"getIsSelected\" in row;\n}\n\nfunction hasVisibility(column: object): column is WithVisibility {\n  return \"getIsVisible\" in column;\n}\n\n/**\n * Whether a column's cells should render.\n *\n * A table without the visibility feature has no notion of hidden columns, so\n * everything renders. With the feature on, this has to be honoured for cells as\n * well as headers — dropping a header while still rendering its cells shifts\n * every row out of alignment with the columns above it.\n */\nfunction isColumnVisible(column: object): boolean {\n  return !hasVisibility(column) || column.getIsVisible();\n}\n\nfunction ariaSort(column: object): \"ascending\" | \"descending\" | \"none\" | undefined {\n  if (!hasSortState(column)) return undefined;\n\n  const sorted = column.getIsSorted();\n  if (sorted === \"asc\") return \"ascending\";\n  if (sorted === \"desc\") return \"descending\";\n  return column.getCanSort() ? \"none\" : undefined;\n}\n\nfunction columnWidth(header: object): { width: number } | undefined {\n  if (!hasSize(header)) return undefined;\n\n  const size = header.getSize();\n  return size ? { width: size } : undefined;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Table                                                                       */\n/* -------------------------------------------------------------------------- */\n\nexport interface DataTableProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> extends Omit<ComponentPropsWithRef<\"table\">, \"children\"> {\n  table: TanstackTable<TFeatures, TData>;\n  /** Shown in place of rows when there are none. */\n  empty?: ReactNode;\n}\n\nexport function DataTable<TFeatures extends TableFeatures, TData extends RowData>({\n  table,\n  empty,\n  className,\n  ...props\n}: DataTableProps<TFeatures, TData>) {\n  const rows = table.getRowModel().rows;\n  const columnCount = table.getAllLeafColumns().length;\n\n  return (\n    <div className=\"rounded-lg border border-border\">\n      <Table className={cn(className)} {...props}>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id}>\n              {headerGroup.headers.map((header) => (\n                <TableHead\n                  key={header.id}\n                  colSpan={header.colSpan}\n                  style={columnWidth(header)}\n                  // Announces the current sort. Without it the arrow icon is the\n                  // only signal, which is no signal at all for a screen reader.\n                  aria-sort={ariaSort(header.column)}\n                >\n                  {header.isPlaceholder\n                    ? null\n                    : flexRender(header.column.columnDef.header, header.getContext())}\n                </TableHead>\n              ))}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {rows.length === 0 ? (\n            <TableRow className=\"hover:bg-transparent\">\n              <TableCell colSpan={columnCount} className=\"h-32 p-0 text-center\">\n                {empty ?? <span className=\"text-sm text-muted-foreground\">No results.</span>}\n              </TableCell>\n            </TableRow>\n          ) : (\n            rows.map((row) => (\n              <TableRow\n                key={row.id}\n                data-state={hasSelection(row) && row.getIsSelected() ? \"selected\" : undefined}\n              >\n                {row\n                  .getAllCells()\n                  .filter((cell) => isColumnVisible(cell.column))\n                  .map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                    </TableCell>\n                  ))}\n              </TableRow>\n            ))\n          )}\n        </TableBody>\n      </Table>\n    </div>\n  );\n}\n\n/* -------------------------------------------------------------------------- */\n/* Sortable column header                                                      */\n/* -------------------------------------------------------------------------- */\n\n/**\n * The slice of a column a sortable header needs.\n *\n * A column from a table without the sorting feature does not have these\n * methods, so passing one is a compile error rather than a runtime crash.\n */\nexport interface SortableColumn {\n  getCanSort: () => boolean;\n  getIsSorted: () => \"asc\" | \"desc\" | false;\n  toggleSorting: (desc?: boolean) => void;\n}\n\nexport interface DataTableColumnHeaderProps extends ComponentPropsWithRef<\"div\"> {\n  column: SortableColumn;\n  title: string;\n}\n\n/**\n * A sortable column header.\n *\n * Falls back to plain text when the column cannot be sorted, rather than\n * rendering a button that does nothing — a control that looks interactive and\n * is not is worse than no control.\n */\nexport function DataTableColumnHeader({\n  column,\n  title,\n  className,\n  ...props\n}: DataTableColumnHeaderProps) {\n  if (!column.getCanSort()) {\n    return (\n      <div className={cn(\"text-xs font-medium\", className)} {...props}>\n        {title}\n      </div>\n    );\n  }\n\n  const sorted = column.getIsSorted();\n\n  return (\n    <div className={cn(\"flex items-center\", className)} {...props}>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            className=\"-ml-2 h-7 gap-1 px-2 font-medium text-muted-foreground data-[state=open]:bg-accent\"\n          >\n            {title}\n            <SortIcon direction={sorted === false ? undefined : sorted} />\n            <span className=\"sr-only\">\n              {sorted === \"asc\"\n                ? `${title}, sorted ascending`\n                : sorted === \"desc\"\n                  ? `${title}, sorted descending`\n                  : `${title}, not sorted`}\n            </span>\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"start\">\n          <DropdownMenuItem\n            onSelect={() => {\n              column.toggleSorting(false);\n            }}\n          >\n            Sort ascending\n          </DropdownMenuItem>\n          <DropdownMenuItem\n            onSelect={() => {\n              column.toggleSorting(true);\n            }}\n          >\n            Sort descending\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  );\n}\n\nfunction SortIcon({ direction }: { direction?: \"asc\" | \"desc\" }) {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-3.5 opacity-70\">\n      <path\n        d={\n          direction === \"asc\"\n            ? \"m7 14 5-5 5 5\"\n            : direction === \"desc\"\n              ? \"m7 10 5 5 5-5\"\n              : \"m8 10 4-4 4 4M8 14l4 4 4-4\"\n        }\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\n/* -------------------------------------------------------------------------- */\n/* Column visibility                                                           */\n/* -------------------------------------------------------------------------- */\n\n/** The slice of a table the column toggle needs. */\nexport interface HideableTable {\n  getAllColumns: () => {\n    id: string;\n    getCanHide: () => boolean;\n    getIsVisible: () => boolean;\n    toggleVisibility: (visible?: boolean) => void;\n  }[];\n}\n\nexport interface DataTableViewOptionsProps {\n  table: HideableTable;\n  label?: string;\n}\n\n/** Toggles column visibility. */\nexport function DataTableViewOptions({ table, label = \"Columns\" }: DataTableViewOptionsProps) {\n  const columns = table.getAllColumns().filter((column) => column.getCanHide());\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\" size=\"sm\">\n          {label}\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"w-44\">\n        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        {columns.map((column) => (\n          <DropdownMenuCheckboxItem\n            key={column.id}\n            checked={column.getIsVisible()}\n            onCheckedChange={(checked) => {\n              column.toggleVisibility(checked === true);\n            }}\n          >\n            {column.id}\n          </DropdownMenuCheckboxItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n\n/* -------------------------------------------------------------------------- */\n/* Pagination                                                                  */\n/* -------------------------------------------------------------------------- */\n\n/**\n * The slice of a table the page controls need.\n *\n * `state` is a property, not a `getState()` call — the table library moved to a\n * reactive state object, and reading it the old way fails at runtime rather\n * than at compile time.\n */\nexport interface PaginatedTable {\n  state: { pagination: { pageIndex: number; pageSize: number } };\n  getPageCount: () => number;\n  setPageSize: (size: number) => void;\n  previousPage: () => void;\n  nextPage: () => void;\n  getCanPreviousPage: () => boolean;\n  getCanNextPage: () => boolean;\n}\n\nexport interface DataTablePaginationProps {\n  table: PaginatedTable;\n  pageSizes?: number[];\n  /**\n   * Replaces the page position on the left.\n   *\n   * A slot rather than a `showSelectionCount` flag: a selection count needs the\n   * selection and filtering features, and demanding those here would break\n   * every table that only paginates.\n   */\n  status?: ReactNode;\n}\n\n/**\n * Page controls for a table.\n *\n * The page position is a polite live region: paging replaces the rows in place,\n * and without an announcement a screen reader user gets no confirmation that\n * anything happened.\n */\nexport function DataTablePagination({\n  table,\n  pageSizes = [10, 20, 50, 100],\n  status,\n}: DataTablePaginationProps) {\n  const { pageIndex, pageSize } = table.state.pagination;\n  const pageCount = table.getPageCount();\n\n  return (\n    <div className=\"flex flex-wrap items-center justify-between gap-4 px-1 py-3\">\n      <div className=\"text-sm text-muted-foreground\" aria-live=\"polite\">\n        {status ?? (\n          <>\n            Page {pageIndex + 1} of {Math.max(1, pageCount)}\n          </>\n        )}\n      </div>\n\n      <div className=\"flex items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <span className=\"text-sm text-muted-foreground\" id=\"rows-per-page\">\n            Rows per page\n          </span>\n          <Select\n            value={String(pageSize)}\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n          >\n            <SelectTrigger triggerSize=\"sm\" className=\"w-18\" aria-labelledby=\"rows-per-page\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {pageSizes.map((size) => (\n                <SelectItem key={size} value={String(size)}>\n                  {size}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n\n        <div className=\"flex items-center gap-1\">\n          <Button\n            variant=\"outline\"\n            size=\"icon-sm\"\n            aria-label=\"Go to previous page\"\n            disabled={!table.getCanPreviousPage()}\n            onClick={() => {\n              table.previousPage();\n            }}\n          >\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n              <path\n                d=\"m15 18-6-6 6-6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"icon-sm\"\n            aria-label=\"Go to next page\"\n            disabled={!table.getCanNextPage()}\n            onClick={() => {\n              table.nextPage();\n            }}\n          >\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n              <path\n                d=\"m9 18 6-6-6-6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAqFA,SAAS,aAAa,QAAyC;CAC7D,OAAO,iBAAiB,UAAU,gBAAgB;AACpD;AAEA,SAAS,QAAQ,QAAoC;CACnD,OAAO,aAAa;AACtB;AAEA,SAAS,aAAa,KAAmC;CACvD,OAAO,mBAAmB;AAC5B;AAEA,SAAS,cAAc,QAA0C;CAC/D,OAAO,kBAAkB;AAC3B;;;;;;;;;AAUA,SAAS,gBAAgB,QAAyB;CAChD,OAAO,CAAC,cAAc,MAAM,KAAK,OAAO,aAAa;AACvD;AAEA,SAAS,SAAS,QAAiE;CACjF,IAAI,CAAC,aAAa,MAAM,GAAG,OAAO,KAAA;CAElC,MAAM,SAAS,OAAO,YAAY;CAClC,IAAI,WAAW,OAAO,OAAO;CAC7B,IAAI,WAAW,QAAQ,OAAO;CAC9B,OAAO,OAAO,WAAW,IAAI,SAAS,KAAA;AACxC;AAEA,SAAS,YAAY,QAA+C;CAClE,IAAI,CAAC,QAAQ,MAAM,GAAG,OAAO,KAAA;CAE7B,MAAM,OAAO,OAAO,QAAQ;CAC5B,OAAO,OAAO,EAAE,OAAO,KAAK,IAAI,KAAA;AAClC;AAeA,SAAgB,UAAkE,EAChF,OACA,OACA,WACA,GAAG,SACgC;CACnC,MAAM,OAAO,MAAM,YAAY,CAAC,CAAC;CACjC,MAAM,cAAc,MAAM,kBAAkB,CAAC,CAAC;CAE9C,OACE,oBAAC,OAAD;EAAK,WAAU;EACb,UAAA,qBAACA,SAAD;GAAO,WAAW,GAAG,SAAS;GAAG,GAAI;GAArC,UAAA,CACE,oBAAC,aAAD,EAAA,UACG,MAAM,gBAAgB,CAAC,CAAC,KAAK,gBAC5B,oBAAC,UAAD,EAAA,UACG,YAAY,QAAQ,KAAK,WACxB,oBAAC,WAAD;IAEE,SAAS,OAAO;IAChB,OAAO,YAAY,MAAM;IAGzB,aAAW,SAAS,OAAO,MAAM;IAEhC,UAAA,OAAO,gBACJ,OACA,WAAW,OAAO,OAAO,UAAU,QAAQ,OAAO,WAAW,CAAC;GACzD,GAVJ,OAAO,EAUH,CACZ,EACO,GAfK,YAAY,EAejB,CACX,EACU,CAAA,GACb,oBAAC,WAAD,EAAA,UACG,KAAK,WAAW,IACf,oBAAC,UAAD;IAAU,WAAU;IAClB,UAAA,oBAAC,WAAD;KAAW,SAAS;KAAa,WAAU;KACxC,UAAA,SAAS,oBAAC,QAAD;MAAM,WAAU;MAAgC,UAAA;KAAiB,CAAA;IAClE,CAAA;GACH,CAAA,IAEV,KAAK,KAAK,QACR,oBAAC,UAAD;IAEE,cAAY,aAAa,GAAG,KAAK,IAAI,cAAc,IAAI,aAAa,KAAA;IAEnE,UAAA,IACE,YAAY,CAAC,CACb,QAAQ,SAAS,gBAAgB,KAAK,MAAM,CAAC,CAAC,CAC9C,KAAK,SACJ,oBAAC,WAAD,EAAA,UACG,WAAW,KAAK,OAAO,UAAU,MAAM,KAAK,WAAW,CAAC,EAChD,GAFK,KAAK,EAEV,CACZ;GACK,GAXH,IAAI,EAWD,CACX,EAEM,CAAA,CACN;;CACJ,CAAA;AAET;;;;;;;;AA8BA,SAAgB,sBAAsB,EACpC,QACA,OACA,WACA,GAAG,SAC0B;CAC7B,IAAI,CAAC,OAAO,WAAW,GACrB,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,uBAAuB,SAAS;EAAG,GAAI;EACvD,UAAA;CACE,CAAA;CAIT,MAAM,SAAS,OAAO,YAAY;CAElC,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,qBAAqB,SAAS;EAAG,GAAI;EACtD,UAAA,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,qBAAD;GAAqB,SAAA;GACnB,UAAA,qBAAC,QAAD;IACE,SAAQ;IACR,MAAK;IACL,WAAU;IAHZ,UAAA;KAKG;KACD,oBAAC,UAAD,EAAU,WAAW,WAAW,QAAQ,KAAA,IAAY,OAAS,CAAA;KAC7D,oBAAC,QAAD;MAAM,WAAU;MACb,UAAA,WAAW,QACR,GAAG,MAAM,sBACT,WAAW,SACT,GAAG,MAAM,uBACT,GAAG,MAAM;KACX,CAAA;IACA;;EACW,CAAA,GACrB,qBAAC,qBAAD;GAAqB,OAAM;GAA3B,UAAA,CACE,oBAAC,kBAAD;IACE,gBAAgB;KACd,OAAO,cAAc,KAAK;IAC5B;IACD,UAAA;GAEiB,CAAA,GAClB,oBAAC,kBAAD;IACE,gBAAgB;KACd,OAAO,cAAc,IAAI;IAC3B;IACD,UAAA;GAEiB,CAAA,CACC;EACT,CAAA,CAAA,EAAA,CAAA;CACX,CAAA;AAET;AAEA,SAAS,SAAS,EAAE,aAA6C;CAC/D,OACE,oBAAC,OAAD;EAAK,SAAQ;EAAY,MAAK;EAAO,eAAY;EAAO,WAAU;EAChE,UAAA,oBAAC,QAAD;GACE,GACE,cAAc,QACV,kBACA,cAAc,SACZ,kBACA;GAER,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;EAChB,CAAA;CACE,CAAA;AAET;;AAsBA,SAAgB,qBAAqB,EAAE,OAAO,QAAQ,aAAwC;CAC5F,MAAM,UAAU,MAAM,cAAc,CAAC,CAAC,QAAQ,WAAW,OAAO,WAAW,CAAC;CAE5E,OACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,qBAAD;EAAqB,SAAA;EACnB,UAAA,oBAAC,QAAD;GAAQ,SAAQ;GAAU,MAAK;GAC5B,UAAA;EACK,CAAA;CACW,CAAA,GACrB,qBAAC,qBAAD;EAAqB,OAAM;EAAM,WAAU;EAA3C,UAAA;GACE,oBAAC,mBAAD,EAAA,UAAmB,iBAAiC,CAAA;GACpD,oBAAC,uBAAD,CAAwB,CAAA;GACvB,QAAQ,KAAK,WACZ,oBAAC,0BAAD;IAEE,SAAS,OAAO,aAAa;IAC7B,kBAAkB,YAAY;KAC5B,OAAO,iBAAiB,YAAY,IAAI;IAC1C;IAEC,UAAA,OAAO;GACgB,GAPnB,OAAO,EAOY,CAC3B;EACkB;CACT,CAAA,CAAA,EAAA,CAAA;AAElB;;;;;;;;AA2CA,SAAgB,oBAAoB,EAClC,OACA,YAAY;CAAC;CAAI;CAAI;CAAI;AAAG,GAC5B,UAC2B;CAC3B,MAAM,EAAE,WAAW,aAAa,MAAM,MAAM;CAC5C,MAAM,YAAY,MAAM,aAAa;CAErC,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,OAAD;GAAK,WAAU;GAAgC,aAAU;GACtD,UAAA,UACC,qBAAA,UAAA,EAAA,UAAA;IAAE;IACM,YAAY;IAAE;IAAK,KAAK,IAAI,GAAG,SAAS;GAC9C,EAAA,CAAA;EAED,CAAA,GAEL,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,QAAD;KAAM,WAAU;KAAgC,IAAG;KAAgB,UAAA;IAE7D,CAAA,GACN,qBAAC,QAAD;KACE,OAAO,OAAO,QAAQ;KACtB,gBAAgB,UAAU;MACxB,MAAM,YAAY,OAAO,KAAK,CAAC;KACjC;KAJF,UAAA,CAME,oBAAC,eAAD;MAAe,aAAY;MAAK,WAAU;MAAO,mBAAgB;MAC/D,UAAA,oBAAC,aAAD,CAAc,CAAA;KACD,CAAA,GACf,oBAAC,eAAD,EAAA,UACG,UAAU,KAAK,SACd,oBAAC,YAAD;MAAuB,OAAO,OAAO,IAAI;MACtC,UAAA;KACS,GAFK,IAEL,CACb,EACY,CAAA,CACT;IACL,CAAA,CAAA;GAEL,CAAA,GAAA,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,QAAD;KACE,SAAQ;KACR,MAAK;KACL,cAAW;KACX,UAAU,CAAC,MAAM,mBAAmB;KACpC,eAAe;MACb,MAAM,aAAa;KACrB;KAEA,UAAA,oBAAC,OAAD;MAAK,SAAQ;MAAY,MAAK;MAAO,eAAY;MAC/C,UAAA,oBAAC,QAAD;OACE,GAAE;OACF,QAAO;OACP,aAAY;OACZ,eAAc;OACd,gBAAe;MAChB,CAAA;KACE,CAAA;IACC,CAAA,GACR,oBAAC,QAAD;KACE,SAAQ;KACR,MAAK;KACL,cAAW;KACX,UAAU,CAAC,MAAM,eAAe;KAChC,eAAe;MACb,MAAM,SAAS;KACjB;KAEA,UAAA,oBAAC,OAAD;MAAK,SAAQ;MAAY,MAAK;MAAO,eAAY;MAC/C,UAAA,oBAAC,QAAD;OACE,GAAE;OACF,QAAO;OACP,aAAY;OACZ,eAAc;OACd,gBAAe;MAChB,CAAA;KACE,CAAA;IACC,CAAA,CACL;GACF,CAAA,CAAA;EACF,CAAA,CAAA;;AAET"}

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

@@ -0,0 +1,2 @@
+import { DataTable, DataTableColumnHeader, DataTableColumnHeaderProps, DataTablePagination, DataTablePaginationProps, DataTableProps, DataTableViewOptions, DataTableViewOptionsProps, HideableTable, PaginatedTable, SortableColumn } from "./data-table.js";
+export { DataTable, DataTableColumnHeader, type DataTableColumnHeaderProps, DataTablePagination, type DataTablePaginationProps, type DataTableProps, DataTableViewOptions, type DataTableViewOptionsProps, type HideableTable, type PaginatedTable, type SortableColumn };

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

@@ -0,0 +1,2 @@
+import { DataTable, DataTableColumnHeader, DataTablePagination, DataTableViewOptions } from "./data-table.js";
+export { DataTable, DataTableColumnHeader, DataTablePagination, DataTableViewOptions };

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

@@ -0,0 +1,22 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/data-table/meta.ts
+const meta = defineMeta({
+	name: "data-table",
+	title: "Data Table",
+	description: "Presentation for a TanStack Table instance: sorting, column visibility and pagination.",
+	category: "data",
+	status: "stable",
+	dependencies: ["@tanstack/react-table"],
+	registryDependencies: [
+		"button",
+		"dropdown-menu",
+		"select",
+		"table"
+	],
+	files: ["data-table.tsx"],
+	a11y: "Sortable headers carry aria-sort, so the current sort is announced rather than being conveyed by an arrow icon alone, and each sort button has visually hidden text stating the column and its direction. The pagination status is a polite live region, because paging swaps the rows in place with no other signal. A column that cannot be sorted renders as text, not as a button that does nothing."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/data-table/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"data-table\",\n  title: \"Data Table\",\n  description:\n    \"Presentation for a TanStack Table instance: sorting, column visibility and pagination.\",\n  category: \"data\",\n  status: \"stable\",\n  dependencies: [\"@tanstack/react-table\"],\n  registryDependencies: [\"button\", \"dropdown-menu\", \"select\", \"table\"],\n  files: [\"data-table.tsx\"],\n  a11y:\n    \"Sortable headers carry aria-sort, so the current sort is announced rather than being \" +\n    \"conveyed by an arrow icon alone, and each sort button has visually hidden text stating the \" +\n    \"column and its direction. The pagination status is a polite live region, because paging \" +\n    \"swaps the rows in place with no other signal. A column that cannot be sorted renders as \" +\n    \"text, not as a button that does nothing.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,uBAAuB;CACtC,sBAAsB;EAAC;EAAU;EAAiB;EAAU;CAAO;CACnE,OAAO,CAAC,gBAAgB;CACxB,MACE;AAKJ,CAAC"}

package/dist/components/date-picker/date-picker.d.ts

@@ -0,0 +1,31 @@
+import { DateRange } from "react-day-picker";
+//#region src/components/date-picker/date-picker.d.ts
+interface DatePickerProps {
+  value?: Date;
+  defaultValue?: Date;
+  onValueChange?: (date: Date | undefined) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  /** BCP 47 tag for formatting the button label. Defaults to the runtime locale. */
+  locale?: string;
+  className?: string;
+  /** Names the popover, which carries role="dialog". */
+  label?: string;
+}
+declare function DatePicker({ value: valueProp, defaultValue, onValueChange, placeholder, disabled, locale, className, label }: DatePickerProps): import("react").JSX.Element;
+interface DateRangePickerProps {
+  value?: DateRange;
+  defaultValue?: DateRange;
+  onValueChange?: (range: DateRange | undefined) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  locale?: string;
+  className?: string;
+  label?: string;
+  /** Months shown side by side. Two makes most ranges selectable without paging. */
+  numberOfMonths?: number;
+}
+declare function DateRangePicker({ value: valueProp, defaultValue, onValueChange, placeholder, disabled, locale, className, label, numberOfMonths }: DateRangePickerProps): import("react").JSX.Element;
+//#endregion
+export { DatePicker, DatePickerProps, DateRangePicker, DateRangePickerProps };
+//# sourceMappingURL=date-picker.d.ts.map

package/dist/components/date-picker/date-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.ts","names":[],"sources":["../../../src/components/date-picker/date-picker.tsx"],"mappings":";;UAsEiB;EACf,QAAQ;EACR,eAAe;EACf,iBAAiB,MAAM;EACvB;EACA;;EAEA;EACA;;EAEA;;iBAGc,aACd,OAAO,WACP,cACA,eACA,aACA,UACA,QACA,WACA,SACC,kCAAe,IAAA;UA0CD;EACf,QAAQ;EACR,eAAe;EACf,iBAAiB,OAAO;EACxB;EACA;EACA;EACA;EACA;;EAEA;;iBAGc,kBACd,OAAO,WACP,cACA,eACA,aACA,UACA,QACA,WACA,OACA,kBACC,uCAAoB,IAAA"}

package/dist/components/date-picker/date-picker.js

@@ -0,0 +1,123 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../button/button.js";
+import { Calendar } from "../calendar/calendar.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+//#region src/components/date-picker/date-picker.tsx
+/**
+* A button that opens a calendar to pick a date.
+*
+* Composed from Popover, Calendar and Button rather than reimplementing any of
+* them, which is also why it is the first registry entry with transitive
+* dependencies — installing it pulls all three.
+*
+* A date picker is a convenience, not the only way in. For a date the user
+* already knows, a typed input is faster than any calendar; pair this with one
+* when speed of entry matters more than browsing.
+*/
+function formatDate(date, locale) {
+	if (!date) return "";
+	return new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(date);
+}
+function CalendarIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		"aria-hidden": "true",
+		className: "size-4 opacity-70",
+		children: [/* @__PURE__ */ jsx("rect", {
+			x: "3",
+			y: "5",
+			width: "18",
+			height: "16",
+			rx: "2",
+			stroke: "currentColor",
+			strokeWidth: "2"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M3 10h18M8 3v4M16 3v4",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round"
+		})]
+	});
+}
+function DatePickerTrigger({ className, placeholder: _placeholder, hasValue, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Button, {
+		variant: "outline",
+		className: cn("w-full justify-start gap-2 font-normal", !hasValue && "text-muted-foreground", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(CalendarIcon, {}), children]
+	});
+}
+function DatePicker({ value: valueProp, defaultValue, onValueChange, placeholder = "Pick a date", disabled, locale, className, label = "Choose a date" }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultValue);
+	const value = valueProp === void 0 ? uncontrolled : valueProp;
+	const [open, setOpen] = useState(false);
+	function handleSelect(next) {
+		if (valueProp === void 0) setUncontrolled(next);
+		onValueChange?.(next);
+		setOpen(next ? false : open);
+	}
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(DatePickerTrigger, {
+				"data-slot": "date-picker-trigger",
+				placeholder,
+				hasValue: Boolean(value),
+				disabled,
+				className,
+				children: value ? formatDate(value, locale) : placeholder
+			})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "w-auto p-0",
+			"aria-label": label,
+			children: /* @__PURE__ */ jsx(Calendar, {
+				mode: "single",
+				selected: value,
+				defaultMonth: value,
+				onSelect: handleSelect,
+				autoFocus: true
+			})
+		})]
+	});
+}
+function DateRangePicker({ value: valueProp, defaultValue, onValueChange, placeholder = "Pick a date range", disabled, locale, className, label = "Choose a date range", numberOfMonths = 2 }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultValue);
+	const value = valueProp === void 0 ? uncontrolled : valueProp;
+	function handleSelect(next) {
+		if (valueProp === void 0) setUncontrolled(next);
+		onValueChange?.(next);
+	}
+	const labelText = value?.from ? value.to ? `${formatDate(value.from, locale)} – ${formatDate(value.to, locale)}` : formatDate(value.from, locale) : placeholder;
+	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(DatePickerTrigger, {
+			"data-slot": "date-range-picker-trigger",
+			placeholder,
+			hasValue: Boolean(value?.from),
+			disabled,
+			className,
+			children: labelText
+		})
+	}), /* @__PURE__ */ jsx(PopoverContent, {
+		className: "w-auto p-0",
+		"aria-label": label,
+		children: /* @__PURE__ */ jsx(Calendar, {
+			mode: "range",
+			selected: value,
+			defaultMonth: value?.from,
+			onSelect: handleSelect,
+			numberOfMonths,
+			autoFocus: true
+		})
+	})] });
+}
+//#endregion
+export { DatePicker, DateRangePicker };
+
+//# sourceMappingURL=date-picker.js.map

package/dist/components/date-picker/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.js","names":[],"sources":["../../../src/components/date-picker/date-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, type ComponentPropsWithRef, type ReactNode } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\n\nimport { Button } from \"@/components/button\";\nimport { Calendar } from \"@/components/calendar\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/popover\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A button that opens a calendar to pick a date.\n *\n * Composed from Popover, Calendar and Button rather than reimplementing any of\n * them, which is also why it is the first registry entry with transitive\n * dependencies — installing it pulls all three.\n *\n * A date picker is a convenience, not the only way in. For a date the user\n * already knows, a typed input is faster than any calendar; pair this with one\n * when speed of entry matters more than browsing.\n */\n\nfunction formatDate(date: Date | undefined, locale?: string): string {\n  if (!date) return \"\";\n  return new Intl.DateTimeFormat(locale, { dateStyle: \"medium\" }).format(date);\n}\n\nfunction CalendarIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-4 opacity-70\">\n      <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\" stroke=\"currentColor\" strokeWidth=\"2\" />\n      <path\n        d=\"M3 10h18M8 3v4M16 3v4\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  );\n}\n\ninterface DatePickerTriggerProps extends Omit<ComponentPropsWithRef<\"button\">, \"value\"> {\n  placeholder: string;\n  hasValue: boolean;\n  children: ReactNode;\n}\n\nfunction DatePickerTrigger({\n  className,\n  placeholder: _placeholder,\n  hasValue,\n  children,\n  ...props\n}: DatePickerTriggerProps) {\n  return (\n    <Button\n      variant=\"outline\"\n      className={cn(\n        \"w-full justify-start gap-2 font-normal\",\n        !hasValue && \"text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      <CalendarIcon />\n      {children}\n    </Button>\n  );\n}\n\nexport interface DatePickerProps {\n  value?: Date;\n  defaultValue?: Date;\n  onValueChange?: (date: Date | undefined) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  /** BCP 47 tag for formatting the button label. Defaults to the runtime locale. */\n  locale?: string;\n  className?: string;\n  /** Names the popover, which carries role=\"dialog\". */\n  label?: string;\n}\n\nexport function DatePicker({\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  placeholder = \"Pick a date\",\n  disabled,\n  locale,\n  className,\n  label = \"Choose a date\",\n}: DatePickerProps) {\n  const [uncontrolled, setUncontrolled] = useState<Date | undefined>(defaultValue);\n  const value = valueProp === undefined ? uncontrolled : valueProp;\n  const [open, setOpen] = useState(false);\n\n  function handleSelect(next: Date | undefined) {\n    if (valueProp === undefined) setUncontrolled(next);\n    onValueChange?.(next);\n    // Closing on selection is right for a single date: the task is complete.\n    // A range picker must stay open, since one click is only half an answer.\n    setOpen(next ? false : open);\n  }\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <DatePickerTrigger\n          data-slot=\"date-picker-trigger\"\n          placeholder={placeholder}\n          hasValue={Boolean(value)}\n          disabled={disabled}\n          className={className}\n        >\n          {value ? formatDate(value, locale) : placeholder}\n        </DatePickerTrigger>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\" aria-label={label}>\n        <Calendar\n          mode=\"single\"\n          selected={value}\n          // Open on the selected date's month rather than today's. The calendar\n          // does not infer this from `selected`, so without it a user editing a\n          // date from last year lands in the wrong place and has to page back.\n          defaultMonth={value}\n          onSelect={handleSelect}\n          autoFocus\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport interface DateRangePickerProps {\n  value?: DateRange;\n  defaultValue?: DateRange;\n  onValueChange?: (range: DateRange | undefined) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  locale?: string;\n  className?: string;\n  label?: string;\n  /** Months shown side by side. Two makes most ranges selectable without paging. */\n  numberOfMonths?: number;\n}\n\nexport function DateRangePicker({\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  placeholder = \"Pick a date range\",\n  disabled,\n  locale,\n  className,\n  label = \"Choose a date range\",\n  numberOfMonths = 2,\n}: DateRangePickerProps) {\n  const [uncontrolled, setUncontrolled] = useState<DateRange | undefined>(defaultValue);\n  const value = valueProp === undefined ? uncontrolled : valueProp;\n\n  function handleSelect(next: DateRange | undefined) {\n    if (valueProp === undefined) setUncontrolled(next);\n    onValueChange?.(next);\n  }\n\n  const labelText = value?.from\n    ? value.to\n      ? `${formatDate(value.from, locale)} – ${formatDate(value.to, locale)}`\n      : formatDate(value.from, locale)\n    : placeholder;\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <DatePickerTrigger\n          data-slot=\"date-range-picker-trigger\"\n          placeholder={placeholder}\n          hasValue={Boolean(value?.from)}\n          disabled={disabled}\n          className={className}\n        >\n          {labelText}\n        </DatePickerTrigger>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\" aria-label={label}>\n        <Calendar\n          mode=\"range\"\n          selected={value}\n          defaultMonth={value?.from}\n          onSelect={handleSelect}\n          numberOfMonths={numberOfMonths}\n          autoFocus\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAsBA,SAAS,WAAW,MAAwB,QAAyB;CACnE,IAAI,CAAC,MAAM,OAAO;CAClB,OAAO,IAAI,KAAK,eAAe,QAAQ,EAAE,WAAW,SAAS,CAAC,CAAC,CAAC,OAAO,IAAI;AAC7E;AAEA,SAAS,eAAe;CACtB,OACE,qBAAC,OAAD;EAAK,SAAQ;EAAY,MAAK;EAAO,eAAY;EAAO,WAAU;EAAlE,UAAA,CACE,oBAAC,QAAD;GAAM,GAAE;GAAI,GAAE;GAAI,OAAM;GAAK,QAAO;GAAK,IAAG;GAAI,QAAO;GAAe,aAAY;EAAK,CAAA,GACvF,oBAAC,QAAD;GACE,GAAE;GACF,QAAO;GACP,aAAY;GACZ,eAAc;EACf,CAAA,CACE;;AAET;AAQA,SAAS,kBAAkB,EACzB,WACA,aAAa,cACb,UACA,UACA,GAAG,SACsB;CACzB,OACE,qBAAC,QAAD;EACE,SAAQ;EACR,WAAW,GACT,0CACA,CAAC,YAAY,yBACb,SACF;EACA,GAAI;EAPN,UAAA,CASE,oBAAC,cAAD,CAAe,CAAA,GACd,QACK;;AAEZ;AAeA,SAAgB,WAAW,EACzB,OAAO,WACP,cACA,eACA,cAAc,eACd,UACA,QACA,WACA,QAAQ,mBACU;CAClB,MAAM,CAAC,cAAc,mBAAmB,SAA2B,YAAY;CAC/E,MAAM,QAAQ,cAAc,KAAA,IAAY,eAAe;CACvD,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,SAAS,aAAa,MAAwB;EAC5C,IAAI,cAAc,KAAA,GAAW,gBAAgB,IAAI;EACjD,gBAAgB,IAAI;EAGpB,QAAQ,OAAO,QAAQ,IAAI;CAC7B;CAEA,OACE,qBAAC,SAAD;EAAe;EAAM,cAAc;EAAnC,UAAA,CACE,oBAAC,gBAAD;GAAgB,SAAA;GACd,UAAA,oBAAC,mBAAD;IACE,aAAU;IACG;IACb,UAAU,QAAQ,KAAK;IACb;IACC;IAEV,UAAA,QAAQ,WAAW,OAAO,MAAM,IAAI;GACpB,CAAA;EACL,CAAA,GAChB,oBAAC,gBAAD;GAAgB,WAAU;GAAa,cAAY;GACjD,UAAA,oBAAC,UAAD;IACE,MAAK;IACL,UAAU;IAIV,cAAc;IACd,UAAU;IACV,WAAA;GACD,CAAA;EACa,CAAA,CACT;;AAEb;AAeA,SAAgB,gBAAgB,EAC9B,OAAO,WACP,cACA,eACA,cAAc,qBACd,UACA,QACA,WACA,QAAQ,uBACR,iBAAiB,KACM;CACvB,MAAM,CAAC,cAAc,mBAAmB,SAAgC,YAAY;CACpF,MAAM,QAAQ,cAAc,KAAA,IAAY,eAAe;CAEvD,SAAS,aAAa,MAA6B;EACjD,IAAI,cAAc,KAAA,GAAW,gBAAgB,IAAI;EACjD,gBAAgB,IAAI;CACtB;CAEA,MAAM,YAAY,OAAO,OACrB,MAAM,KACJ,GAAG,WAAW,MAAM,MAAM,MAAM,EAAE,KAAK,WAAW,MAAM,IAAI,MAAM,MAClE,WAAW,MAAM,MAAM,MAAM,IAC/B;CAEJ,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EAAgB,SAAA;EACd,UAAA,oBAAC,mBAAD;GACE,aAAU;GACG;GACb,UAAU,QAAQ,OAAO,IAAI;GACnB;GACC;GAEV,UAAA;EACgB,CAAA;CACL,CAAA,GAChB,oBAAC,gBAAD;EAAgB,WAAU;EAAa,cAAY;EACjD,UAAA,oBAAC,UAAD;GACE,MAAK;GACL,UAAU;GACV,cAAc,OAAO;GACrB,UAAU;GACM;GAChB,WAAA;EACD,CAAA;CACa,CAAA,CACT,EAAA,CAAA;AAEb"}

package/dist/components/date-picker/index.d.ts

@@ -0,0 +1,2 @@
+import { DatePicker, DatePickerProps, DateRangePicker, DateRangePickerProps } from "./date-picker.js";
+export { DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps };

package/dist/components/date-picker/index.js

@@ -0,0 +1,2 @@
+import { DatePicker, DateRangePicker } from "./date-picker.js";
+export { DatePicker, DateRangePicker };

package/dist/components/date-picker/meta.js

@@ -0,0 +1,21 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/date-picker/meta.ts
+const meta = defineMeta({
+	name: "date-picker",
+	title: "Date Picker",
+	description: "A button that opens a calendar to pick a date or a date range.",
+	category: "form",
+	status: "stable",
+	dependencies: ["react-day-picker"],
+	registryDependencies: [
+		"button",
+		"calendar",
+		"popover"
+	],
+	files: ["date-picker.tsx"],
+	a11y: "The trigger states the selected date, formatted for the locale, so its accessible name changes with the value. The popover is named because it carries role=\"dialog\". Selecting a single date closes the popover and returns focus to the trigger; a range stays open, since one click is only half an answer. Offer a typed input alongside it for dates the user already knows."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/date-picker/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/date-picker/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"date-picker\",\n  title: \"Date Picker\",\n  description: \"A button that opens a calendar to pick a date or a date range.\",\n  category: \"form\",\n  status: \"stable\",\n  dependencies: [\"react-day-picker\"],\n  registryDependencies: [\"button\", \"calendar\", \"popover\"],\n  files: [\"date-picker.tsx\"],\n  a11y:\n    \"The trigger states the selected date, formatted for the locale, so its accessible name \" +\n    'changes with the value. The popover is named because it carries role=\"dialog\". Selecting a ' +\n    \"single date closes the popover and returns focus to the trigger; a range stays open, since \" +\n    \"one click is only half an answer. Offer a typed input alongside it for dates the user \" +\n    \"already knows.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,kBAAkB;CACjC,sBAAsB;EAAC;EAAU;EAAY;CAAS;CACtD,OAAO,CAAC,iBAAiB;CACzB,MACE;AAKJ,CAAC"}

package/dist/components/dialog/dialog.d.ts

@@ -0,0 +1,30 @@
+import { Dialog } from "radix-ui";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/dialog/dialog.d.ts
+/**
+ * A modal window that interrupts the user to gather a response.
+ *
+ * Focus is trapped while open, restored to the trigger on close, and the rest
+ * of the page is hidden from assistive technology — all handled by the
+ * underlying primitive rather than reimplemented here.
+ */
+declare const Dialog$1: import("react").FC<Dialog.DialogProps>;
+declare const DialogTrigger: import("react").ForwardRefExoticComponent<Dialog.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: import("react").FC<Dialog.DialogPortalProps>;
+declare const DialogClose: import("react").ForwardRefExoticComponent<Dialog.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+type DialogOverlayProps = ComponentPropsWithRef<typeof Dialog.Overlay>;
+declare function DialogOverlay({ className, ...props }: DialogOverlayProps): import("react").JSX.Element;
+interface DialogContentProps extends ComponentPropsWithRef<typeof Dialog.Content> {
+  /** Renders the built-in close button. Turn off to supply your own. */
+  showCloseButton?: boolean;
+}
+declare function DialogContent({ className, children, showCloseButton, ...props }: DialogContentProps): import("react").JSX.Element;
+declare function DialogHeader({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
+declare function DialogFooter({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
+type DialogTitleProps = ComponentPropsWithRef<typeof Dialog.Title>;
+declare function DialogTitle({ className, ...props }: DialogTitleProps): import("react").JSX.Element;
+type DialogDescriptionProps = ComponentPropsWithRef<typeof Dialog.Description>;
+declare function DialogDescription({ className, ...props }: DialogDescriptionProps): import("react").JSX.Element;
+//#endregion
+export { Dialog$1 as Dialog, DialogClose, DialogContent, DialogContentProps, DialogDescription, DialogDescriptionProps, DialogFooter, DialogHeader, DialogOverlay, DialogOverlayProps, DialogPortal, DialogTitle, DialogTitleProps, DialogTrigger };
+//# sourceMappingURL=dialog.d.ts.map

package/dist/components/dialog/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","names":[],"sources":["../../../src/components/dialog/dialog.tsx"],"mappings":";;;;;;;;;;cAea,0BAAM,GAAA,OAAA;cACN,+BAAa,0BAAA,OAAA,qCAAA,cAAA;cACb,8BAAY,GAAA,OAAA;cACZ,6BAAW,0BAAA,OAAA,mCAAA,cAAA;KAEZ,qBAAqB,6BAA6B,OAAgB;iBAE9D,gBAAgB,cAAc,SAAS,qCAAkB,IAAA;UAcxD,2BAA2B,6BACnC,OAAgB;;EAGvB;;iBAGc,gBACd,WACA,UACA,oBACG,SACF,qCAAkB,IAAA;iBAyCL,eAAe,cAAc,SAAS,+CAA4B,IAAA;iBAUlE,eAAe,cAAc,SAAS,+CAA4B,IAAA;KAUtE,mBAAmB,6BAA6B,OAAgB;iBAE5D,cAAc,cAAc,SAAS,mCAAgB,IAAA;KAUzD,yBAAyB,6BAA6B,OAAgB;iBAElE,oBAAoB,cAAc,SAAS,yCAAsB,IAAA"}