@stll/ui 0.3.0 → 0.5.0

package/dist/calendar/index.d.ts

@@ -0,0 +1,4 @@
+import { CalendarCell, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow } from "./primitives.js";
+import { CalendarDateRange, ResourceCalendarLaneLayout, ResourceCalendarLanePlacement, ResourceCalendarPlacement, assertConsecutiveCalendarDates, getResourceCalendarPlacement, layoutResourceCalendarEntries, nextCalendarDate } from "./resource-calendar.logic.js";
+import { ResourceCalendar, ResourceCalendarColumn, ResourceCalendarEntry, ResourceCalendarEntryTone, ResourceCalendarResource } from "./resource-calendar.js";
+export { CalendarCell, type CalendarDateRange, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, ResourceCalendar, type ResourceCalendarColumn, type ResourceCalendarEntry, type ResourceCalendarEntryTone, type ResourceCalendarLaneLayout, type ResourceCalendarLanePlacement, type ResourceCalendarPlacement, type ResourceCalendarResource, assertConsecutiveCalendarDates, getResourceCalendarPlacement, layoutResourceCalendarEntries, nextCalendarDate };

package/dist/calendar/index.js

@@ -0,0 +1,4 @@
+import { CalendarCell, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow } from "./primitives.js";
+import { assertConsecutiveCalendarDates, getResourceCalendarPlacement, layoutResourceCalendarEntries, nextCalendarDate } from "./resource-calendar.logic.js";
+import { ResourceCalendar } from "./resource-calendar.js";
+export { CalendarCell, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, ResourceCalendar, assertConsecutiveCalendarDates, getResourceCalendarPlacement, layoutResourceCalendarEntries, nextCalendarDate };

package/dist/calendar/primitives.d.ts

@@ -0,0 +1,10 @@
+import * as React$1 from "react";
+//#region src/calendar/primitives.d.ts
+declare const CalendarGrid: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+declare const CalendarHeaderRow: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+declare const CalendarHeaderCell: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+declare const CalendarCell: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+declare const CalendarEntryButton: ({ className, ...props }: React$1.ComponentProps<"button">) => React$1.JSX.Element;
+declare const CalendarEntrySurface: ({ className, ...props }: React$1.ComponentProps<"article">) => React$1.JSX.Element;
+//#endregion
+export { CalendarCell, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow };

package/dist/calendar/primitives.js

@@ -0,0 +1,36 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/calendar/primitives.tsx
+const CalendarGrid = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("grid", className),
+	"data-slot": "calendar-grid",
+	...props
+});
+const CalendarHeaderRow = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("grid border-b", className),
+	"data-slot": "calendar-header-row",
+	...props
+});
+const CalendarHeaderCell = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("text-muted-foreground border-e px-2 py-2 text-center text-xs font-medium last:border-e-0", className),
+	"data-slot": "calendar-header-cell",
+	...props
+});
+const CalendarCell = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("border-e border-b", className),
+	"data-slot": "calendar-cell",
+	...props
+});
+const CalendarEntryButton = ({ className, ...props }) => /* @__PURE__ */ jsx("button", {
+	className: cn("focus-visible:ring-ring min-w-0 rounded-md text-start text-xs outline-none focus-visible:ring-2 focus-visible:ring-offset-1", className),
+	"data-slot": "calendar-entry",
+	type: "button",
+	...props
+});
+const CalendarEntrySurface = ({ className, ...props }) => /* @__PURE__ */ jsx("article", {
+	className: cn("min-w-0 rounded-md text-start text-xs", className),
+	"data-slot": "calendar-entry",
+	...props
+});
+//#endregion
+export { CalendarCell, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow };

package/dist/calendar/resource-calendar.d.ts

@@ -0,0 +1,35 @@
+import { ReactElement, ReactNode } from "react";
+//#region src/calendar/resource-calendar.d.ts
+type ResourceCalendarColumn = {
+  date: string;
+  label: ReactNode;
+  meta?: ReactNode;
+};
+type ResourceCalendarResource = {
+  id: string;
+  label: ReactNode;
+  meta?: ReactNode;
+};
+type ResourceCalendarEntryTone = "accent" | "neutral" | "warning" | "destructive";
+type ResourceCalendarEntry = {
+  accessibleLabel: string;
+  endDateExclusive: string;
+  id: string;
+  label: ReactNode;
+  meta?: ReactNode;
+  resourceId: string;
+  startDate: string;
+  tone?: ResourceCalendarEntryTone;
+};
+type ResourceCalendarProps = {
+  ariaLabel: string;
+  columns: readonly ResourceCalendarColumn[];
+  empty?: ReactNode;
+  entries: readonly ResourceCalendarEntry[];
+  onSelectEntry?: (entry: ResourceCalendarEntry) => void;
+  resourceHeader: ReactNode;
+  resources: readonly ResourceCalendarResource[];
+};
+declare const ResourceCalendar: ({ ariaLabel, columns, empty, entries, onSelectEntry, resourceHeader, resources }: ResourceCalendarProps) => ReactElement;
+//#endregion
+export { ResourceCalendar, ResourceCalendarColumn, ResourceCalendarEntry, ResourceCalendarEntryTone, ResourceCalendarResource };

package/dist/calendar/resource-calendar.js

@@ -0,0 +1,184 @@
+import { cn } from "../lib/utils.js";
+import { CalendarCell, CalendarEntryButton, CalendarEntrySurface, CalendarHeaderCell, CalendarHeaderRow } from "./primitives.js";
+import { assertConsecutiveCalendarDates, layoutResourceCalendarEntries, nextCalendarDate } from "./resource-calendar.logic.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+//#region src/calendar/resource-calendar.tsx
+const ResourceCalendar = ({ ariaLabel, columns, empty, entries, onSelectEntry, resourceHeader, resources }) => {
+	assertResourceCalendarContract({
+		columns,
+		entries,
+		resources
+	});
+	const calendarId = useId();
+	if (resources.length === 0) return /* @__PURE__ */ jsx("div", {
+		"data-slot": "resource-calendar-empty",
+		children: empty
+	});
+	const gridStyle = { gridTemplateColumns: `14rem repeat(${String(columns.length)}, minmax(7rem, 1fr))` };
+	const calendarWidthStyle = { minWidth: `${String(14 + columns.length * 7)}rem` };
+	const visibleRange = {
+		endDateExclusive: nextCalendarDate(columns.at(-1)?.date ?? ""),
+		startDate: columns.at(0)?.date ?? ""
+	};
+	const entriesByResource = /* @__PURE__ */ new Map();
+	for (const entry of entries) {
+		const existing = entriesByResource.get(entry.resourceId);
+		if (existing === void 0) {
+			entriesByResource.set(entry.resourceId, [entry]);
+			continue;
+		}
+		existing.push(entry);
+	}
+	const getColumnHeaderId = (index) => `${calendarId}-column-${String(index)}`;
+	return /* @__PURE__ */ jsx("section", {
+		"aria-colcount": columns.length + 1,
+		"aria-label": ariaLabel,
+		"aria-rowcount": resources.length + 1,
+		className: "border-border bg-card overflow-x-auto rounded-xl border",
+		"data-slot": "resource-calendar",
+		role: "table",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "w-full",
+			style: calendarWidthStyle,
+			children: [/* @__PURE__ */ jsxs(CalendarHeaderRow, {
+				role: "row",
+				style: gridStyle,
+				children: [/* @__PURE__ */ jsx(CalendarHeaderCell, {
+					"aria-colindex": 1,
+					className: "bg-card sticky start-0 z-30 text-start font-semibold tracking-wide uppercase",
+					role: "columnheader",
+					children: resourceHeader
+				}), columns.map((column, index) => /* @__PURE__ */ jsxs(CalendarHeaderCell, {
+					"aria-colindex": index + 2,
+					id: getColumnHeaderId(index),
+					role: "columnheader",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "block",
+						children: column.label
+					}), column.meta === void 0 ? null : /* @__PURE__ */ jsx("span", {
+						className: "text-foreground mt-0.5 block font-semibold",
+						children: column.meta
+					})]
+				}, column.date))]
+			}), resources.map((resource, resourceIndex) => {
+				const resourceEntries = entriesByResource.get(resource.id) ?? [];
+				const layout = layoutResourceCalendarEntries(resourceEntries, visibleRange);
+				const resourceEntryById = new Map(resourceEntries.map((entry) => [entry.id, entry]));
+				const visibleEntriesByColumn = /* @__PURE__ */ new Map();
+				for (const placement of layout.placements) {
+					const entry = resourceEntryById.get(placement.entryId);
+					if (entry === void 0) throw new TypeError(`Resource calendar layout references unknown entry ${placement.entryId}`);
+					const existing = visibleEntriesByColumn.get(placement.columnStart);
+					if (existing === void 0) {
+						visibleEntriesByColumn.set(placement.columnStart, [{
+							entry,
+							placement
+						}]);
+						continue;
+					}
+					existing.push({
+						entry,
+						placement
+					});
+				}
+				const resourceHeaderId = `${calendarId}-resource-${String(resourceIndex)}`;
+				const resourceRowStyle = {
+					...gridStyle,
+					minHeight: `${String(Math.max(5, layout.rowCount * 3.75))}rem`
+				};
+				return /* @__PURE__ */ jsxs("div", {
+					className: "border-border relative grid min-h-20 border-b last:border-b-0",
+					"data-slot": "resource-calendar-row",
+					role: "row",
+					style: resourceRowStyle,
+					children: [/* @__PURE__ */ jsxs(CalendarCell, {
+						"aria-colindex": 1,
+						"aria-rowindex": resourceIndex + 2,
+						className: "bg-card sticky start-0 z-20 border-b-0 px-4 py-3",
+						id: resourceHeaderId,
+						role: "rowheader",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "block truncate text-sm font-semibold",
+							children: resource.label
+						}), resource.meta === void 0 ? null : /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground mt-1 block truncate text-xs",
+							children: resource.meta
+						})]
+					}), columns.map((column, columnIndex) => {
+						const columnStart = columnIndex + 2;
+						const visibleEntries = visibleEntriesByColumn.get(columnStart) ?? [];
+						return /* @__PURE__ */ jsx(CalendarCell, {
+							"aria-colindex": columnStart,
+							"aria-labelledby": `${resourceHeaderId} ${getColumnHeaderId(columnIndex)}`,
+							"aria-rowindex": resourceIndex + 2,
+							className: "bg-background/40 relative border-b-0 last:border-e-0",
+							role: "gridcell",
+							children: visibleEntries.map(({ entry, placement }) => {
+								const labelledBy = [resourceHeaderId, ...Array.from({ length: placement.span }, (_, index) => getColumnHeaderId(columnIndex + index))].join(" ");
+								return /* @__PURE__ */ jsx(ResourceCalendarEntryView, {
+									entry,
+									labelledBy,
+									onSelectEntry,
+									placement,
+									rowCount: layout.rowCount
+								}, entry.id);
+							})
+						}, column.date);
+					})]
+				}, resource.id);
+			})]
+		})
+	});
+};
+const RESOURCE_CALENDAR_ENTRY_TONES = {
+	accent: "bg-primary text-primary-foreground",
+	destructive: "border-destructive/32 bg-destructive/12 text-foreground border",
+	neutral: "border-border bg-muted text-foreground border",
+	warning: "border-warning/30 bg-warning/15 text-foreground border"
+};
+const ResourceCalendarEntryView = ({ entry, labelledBy, onSelectEntry, placement, rowCount }) => {
+	const className = cn("h-full w-full px-3 py-2 font-medium shadow-sm", RESOURCE_CALENDAR_ENTRY_TONES[entry.tone ?? "accent"]);
+	const style = {
+		blockSize: `${String(100 / rowCount)}%`,
+		insetBlockStart: `${String((placement.rowStart - 1) * 100 / rowCount)}%`,
+		insetInlineStart: 0,
+		inlineSize: `calc(${String(placement.span)} * 100%)`
+	};
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: "block truncate",
+		children: entry.label
+	}), entry.meta === void 0 ? null : /* @__PURE__ */ jsx("span", {
+		className: "block truncate opacity-75",
+		children: entry.meta
+	})] });
+	return /* @__PURE__ */ jsx("div", {
+		className: "absolute z-10 min-w-0 p-2",
+		style,
+		children: onSelectEntry === void 0 ? /* @__PURE__ */ jsx(CalendarEntrySurface, {
+			"aria-describedby": labelledBy,
+			"aria-label": entry.accessibleLabel,
+			className,
+			children: content
+		}) : /* @__PURE__ */ jsx(CalendarEntryButton, {
+			"aria-describedby": labelledBy,
+			"aria-label": entry.accessibleLabel,
+			className,
+			onClick: () => onSelectEntry(entry),
+			children: content
+		})
+	});
+};
+const assertUniqueIds = (ids, label) => {
+	if (new Set(ids).size !== ids.length) throw new TypeError(`${label} ids must be unique`);
+};
+const assertResourceCalendarContract = ({ columns, entries, resources }) => {
+	assertConsecutiveCalendarDates(columns.map(({ date }) => date));
+	assertUniqueIds(resources.map(({ id }) => id), "Resource calendar resource");
+	assertUniqueIds(entries.map(({ id }) => id), "Resource calendar entry");
+	const resourceIds = new Set(resources.map(({ id }) => id));
+	const orphan = entries.find(({ resourceId }) => !resourceIds.has(resourceId));
+	if (orphan !== void 0) throw new TypeError(`Resource calendar entry ${orphan.id} references an unknown resource`);
+};
+//#endregion
+export { ResourceCalendar };

package/dist/calendar/resource-calendar.logic.d.ts

@@ -0,0 +1,28 @@
+//#region src/calendar/resource-calendar.logic.d.ts
+type CalendarDateRange = {
+  endDateExclusive: string;
+  startDate: string;
+};
+type ResourceCalendarPlacement = {
+  columnStart: number;
+  span: number;
+};
+type ResourceCalendarLanePlacement = ResourceCalendarPlacement & {
+  entryId: string;
+  rowStart: number;
+};
+type ResourceCalendarLaneLayout = {
+  placements: ResourceCalendarLanePlacement[];
+  rowCount: number;
+};
+declare const getResourceCalendarPlacement: ({ entry, visibleRange }: {
+  entry: CalendarDateRange;
+  visibleRange: CalendarDateRange;
+}) => ResourceCalendarPlacement | null;
+declare const assertConsecutiveCalendarDates: (dates: readonly string[]) => void;
+declare const nextCalendarDate: (value: string) => string;
+declare const layoutResourceCalendarEntries: (entries: readonly (CalendarDateRange & {
+  id: string;
+})[], visibleRange: CalendarDateRange) => ResourceCalendarLaneLayout;
+//#endregion
+export { CalendarDateRange, ResourceCalendarLaneLayout, ResourceCalendarLanePlacement, ResourceCalendarPlacement, assertConsecutiveCalendarDates, getResourceCalendarPlacement, layoutResourceCalendarEntries, nextCalendarDate };

package/dist/calendar/resource-calendar.logic.js

@@ -0,0 +1,88 @@
+//#region src/calendar/resource-calendar.logic.ts
+const ISO_DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/u;
+const DAY_IN_MS = 864e5;
+const toUTCDate = (value) => {
+	if (!ISO_DATE_PATTERN.test(value)) return null;
+	const date = /* @__PURE__ */ new Date(`${value}T00:00:00.000Z`);
+	return date.toISOString().slice(0, 10) === value ? date : null;
+};
+const differenceInCalendarDays = (later, earlier) => {
+	const laterDate = toUTCDate(later);
+	const earlierDate = toUTCDate(earlier);
+	if (laterDate === null || earlierDate === null) throw new RangeError("Calendar dates must use normalized YYYY-MM-DD values");
+	return (laterDate.getTime() - earlierDate.getTime()) / DAY_IN_MS;
+};
+const getResourceCalendarPlacement = ({ entry, visibleRange }) => {
+	const visibleDayCount = differenceInCalendarDays(visibleRange.endDateExclusive, visibleRange.startDate);
+	const entryDayCount = differenceInCalendarDays(entry.endDateExclusive, entry.startDate);
+	if (visibleDayCount <= 0 || entryDayCount <= 0) throw new RangeError("Calendar date ranges must be non-empty and half-open");
+	if (entry.startDate >= visibleRange.endDateExclusive || entry.endDateExclusive <= visibleRange.startDate) return null;
+	const clippedStart = entry.startDate < visibleRange.startDate ? visibleRange.startDate : entry.startDate;
+	const clippedEnd = entry.endDateExclusive > visibleRange.endDateExclusive ? visibleRange.endDateExclusive : entry.endDateExclusive;
+	return {
+		columnStart: differenceInCalendarDays(clippedStart, visibleRange.startDate) + 2,
+		span: differenceInCalendarDays(clippedEnd, clippedStart)
+	};
+};
+const assertConsecutiveCalendarDates = (dates) => {
+	if (dates.length === 0) throw new RangeError("A resource calendar needs at least one date column");
+	const first = dates.at(0);
+	if (first === void 0 || toUTCDate(first) === null) throw new RangeError("Resource calendar date columns must be consecutive normalized dates");
+	for (let index = 1; index < dates.length; index += 1) {
+		const previous = dates.at(index - 1);
+		const current = dates.at(index);
+		if (previous === void 0 || current === void 0 || differenceInCalendarDays(current, previous) !== 1) throw new RangeError("Resource calendar date columns must be consecutive normalized dates");
+	}
+};
+const nextCalendarDate = (value) => {
+	const date = toUTCDate(value);
+	if (date === null) throw new RangeError("Calendar dates must use normalized YYYY-MM-DD values");
+	date.setUTCDate(date.getUTCDate() + 1);
+	const nextDate = date.toISOString().slice(0, 10);
+	if (toUTCDate(nextDate) === null) throw new RangeError("Calendar dates must have a following normalized YYYY-MM-DD value");
+	return nextDate;
+};
+const layoutResourceCalendarEntries = (entries, visibleRange) => {
+	const visibleEntries = [];
+	const entryIds = /* @__PURE__ */ new Set();
+	for (const entry of entries) {
+		if (entryIds.has(entry.id)) throw new TypeError("Resource calendar entry ids must be unique");
+		entryIds.add(entry.id);
+		const placement = getResourceCalendarPlacement({
+			entry,
+			visibleRange
+		});
+		if (placement === null) continue;
+		visibleEntries.push({
+			columnStart: placement.columnStart,
+			entryId: entry.id,
+			span: placement.span
+		});
+	}
+	visibleEntries.sort((left, right) => {
+		const startDifference = left.columnStart - right.columnStart;
+		if (startDifference !== 0) return startDifference;
+		if (left.entryId < right.entryId) return -1;
+		if (left.entryId > right.entryId) return 1;
+		return 0;
+	});
+	const laneEnds = [];
+	const placements = [];
+	for (const entry of visibleEntries) {
+		const firstAvailableLane = laneEnds.findIndex((laneEnd) => laneEnd <= entry.columnStart);
+		const lane = firstAvailableLane === -1 ? laneEnds.length : firstAvailableLane;
+		laneEnds[lane] = entry.columnStart + entry.span;
+		placements.push({
+			columnStart: entry.columnStart,
+			entryId: entry.entryId,
+			rowStart: lane + 1,
+			span: entry.span
+		});
+	}
+	return {
+		placements,
+		rowCount: Math.max(1, laneEnds.length)
+	};
+};
+//#endregion
+export { assertConsecutiveCalendarDates, getResourceCalendarPlacement, layoutResourceCalendarEntries, nextCalendarDate };

package/dist/components/button-variants.d.ts

@@ -10,7 +10,7 @@
  */
 declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
 declare const buttonVariants: (props?: ({
-  size?: "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "sm" | "xl" | "xs" | null | undefined;
+  size?: "sm" | "default" | "lg" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "xl" | "xs" | null | undefined;
   variant?: "link" | "default" | "destructive" | "destructive-outline" | "ghost" | "outline" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

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

@@ -1,2 +1,3 @@
 import { TableColumnCapabilities, TableColumnDescriptor, TableSchema, duplicateColumnIds, findTableColumn, hideableColumnIds, sortableColumnIds, tableColumnIds, tableColumnSizing, visibleColumnIds } from "./schema.js";
-export { type TableColumnCapabilities, type TableColumnDescriptor, type TableSchema, duplicateColumnIds, findTableColumn, hideableColumnIds, sortableColumnIds, tableColumnIds, tableColumnSizing, visibleColumnIds };
+import { DataTable, DataTableAriaSort, DataTableColumn, DataTableProps, DataTableRowAction } from "./table.js";
+export { DataTable, type DataTableAriaSort, type DataTableColumn, type DataTableProps, type DataTableRowAction, type TableColumnCapabilities, type TableColumnDescriptor, type TableSchema, duplicateColumnIds, findTableColumn, hideableColumnIds, sortableColumnIds, tableColumnIds, tableColumnSizing, visibleColumnIds };

package/dist/data-table/index.js

@@ -1,2 +1,3 @@
 import { duplicateColumnIds, findTableColumn, hideableColumnIds, sortableColumnIds, tableColumnIds, tableColumnSizing, visibleColumnIds } from "./schema.js";
-export { duplicateColumnIds, findTableColumn, hideableColumnIds, sortableColumnIds, tableColumnIds, tableColumnSizing, visibleColumnIds };
+import { DataTable } from "./table.js";
+export { DataTable, duplicateColumnIds, findTableColumn, hideableColumnIds, sortableColumnIds, tableColumnIds, tableColumnSizing, visibleColumnIds };

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

@@ -0,0 +1,33 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/data-table/table.d.ts
+declare const DataTable: <TItem>({ columns, emptyLabel, getRowProps, isLoading, loadingLabel, loadingRowCount, rowAction, rowKey, rows }: DataTableProps<TItem>) => import("react").JSX.Element;
+type RowProps = Omit<HTMLAttributes<HTMLTableRowElement>, "children">;
+declare const DATA_TABLE_INTERACTIVE_DESCENDANT_SELECTORS: readonly ["a[href]", "audio[controls]", "button", "input", "select", "textarea", "video[controls]", "summary", "label", "[contenteditable]:not([contenteditable='false'])", "[role='button']", "[role='checkbox']", "[role='combobox']", "[role='link']", "[role='listbox']", "[role='menuitem']", "[role='menuitemcheckbox']", "[role='menuitemradio']", "[role='option']", "[role='radio']", "[role='searchbox']", "[role='slider']", "[role='spinbutton']", "[role='switch']", "[role='tab']", "[role='textbox']", "[role='treeitem']", "[tabindex]:not([tabindex='-1'])", "[data-data-table-stop-row-action]"];
+type DataTableAriaSort = "ascending" | "descending" | "none";
+type DataTableColumn<TItem> = {
+  ariaSort?: DataTableAriaSort;
+  cellClassName?: string | ((item: TItem) => string | undefined);
+  header: ReactNode;
+  headClassName?: string;
+  id: string;
+  render: (item: TItem) => ReactNode;
+};
+type DataTableRowAction<TItem> = {
+  getAriaLabel: (item: TItem) => string;
+  getClassName?: (item: TItem) => string | undefined;
+  onSelect: (item: TItem) => void;
+};
+type DataTableProps<TItem> = {
+  columns: readonly [DataTableColumn<TItem>, ...DataTableColumn<TItem>[]];
+  emptyLabel: string;
+  getRowProps?: (item: TItem) => RowProps;
+  isLoading?: boolean;
+  loadingLabel: string;
+  loadingRowCount?: number;
+  rowAction?: DataTableRowAction<TItem>;
+  rowKey: (item: TItem) => string | number;
+  rows: readonly TItem[];
+};
+declare const isDataTableRowActionTarget: (row: EventTarget, target: EventTarget | null) => boolean;
+//#endregion
+export { DATA_TABLE_INTERACTIVE_DESCENDANT_SELECTORS, DataTable, DataTableAriaSort, DataTableColumn, DataTableProps, DataTableRowAction, isDataTableRowActionTarget };

package/dist/data-table/table.js

@@ -0,0 +1,128 @@
+import { cn } from "../lib/utils.js";
+import { Button } from "../components/button.js";
+import { Skeleton } from "../components/skeleton.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/table.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/data-table/table.tsx
+const DataTable = ({ columns, emptyLabel, getRowProps, isLoading = false, loadingLabel, loadingRowCount = DEFAULT_LOADING_ROW_COUNT, rowAction, rowKey, rows }) => {
+	let content;
+	if (isLoading) content = /* @__PURE__ */ jsx(LoadingRows, {
+		columns,
+		rowClassName: rowAction === void 0 ? void 0 : COARSE_POINTER_ROW_CLASS_NAME,
+		rowCount: loadingRowCount
+	});
+	else if (rows.length === 0) content = /* @__PURE__ */ jsx(StatusRow, {
+		colSpan: columns.length,
+		label: emptyLabel
+	});
+	else content = rows.map((item) => {
+		const rowProps = getRowProps?.(item);
+		const interactiveProps = rowAction === void 0 ? void 0 : interactiveRowProps(item, rowAction);
+		return /* @__PURE__ */ jsx(TableRow, {
+			...rowProps,
+			...interactiveProps,
+			className: cn(interactiveProps?.className, rowProps?.className),
+			onClick: mergeHandlers(interactiveProps?.onClick, rowProps?.onClick),
+			children: columns.map((column, columnIndex) => /* @__PURE__ */ jsxs(TableCell, {
+				className: cn(rowAction !== void 0 && columnIndex === 0 ? "relative" : void 0, resolveClassName(column.cellClassName, item)),
+				children: [rowAction !== void 0 && columnIndex === 0 ? /* @__PURE__ */ jsx(Button, {
+					className: "focus-visible:bg-background focus-visible:ring-ring sr-only focus-visible:not-sr-only focus-visible:absolute focus-visible:inset-2 focus-visible:z-10 focus-visible:flex focus-visible:items-center focus-visible:rounded-md focus-visible:px-2 focus-visible:text-sm focus-visible:ring-2",
+					onClick: () => rowAction.onSelect(item),
+					size: "xs",
+					variant: "ghost",
+					children: rowAction.getAriaLabel(item)
+				}) : null, column.render(item)]
+			}, column.id))
+		}, rowKey(item));
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		role: "status",
+		children: isLoading ? loadingLabel : ""
+	}), /* @__PURE__ */ jsxs(Table, {
+		"aria-busy": isLoading,
+		children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx(TableHead, {
+			"aria-sort": column.ariaSort,
+			className: column.headClassName,
+			children: column.header
+		}, column.id)) }) }), /* @__PURE__ */ jsx(TableBody, { children: content })]
+	})] });
+};
+const DEFAULT_LOADING_ROW_COUNT = 3;
+const MAX_LOADING_ROW_COUNT = 20;
+const COARSE_POINTER_ROW_CLASS_NAME = "pointer-coarse:h-11";
+const DATA_TABLE_INTERACTIVE_DESCENDANT_SELECTORS = [
+	"a[href]",
+	"audio[controls]",
+	"button",
+	"input",
+	"select",
+	"textarea",
+	"video[controls]",
+	"summary",
+	"label",
+	"[contenteditable]:not([contenteditable='false'])",
+	"[role='button']",
+	"[role='checkbox']",
+	"[role='combobox']",
+	"[role='link']",
+	"[role='listbox']",
+	"[role='menuitem']",
+	"[role='menuitemcheckbox']",
+	"[role='menuitemradio']",
+	"[role='option']",
+	"[role='radio']",
+	"[role='searchbox']",
+	"[role='slider']",
+	"[role='spinbutton']",
+	"[role='switch']",
+	"[role='tab']",
+	"[role='textbox']",
+	"[role='treeitem']",
+	"[tabindex]:not([tabindex='-1'])",
+	"[data-data-table-stop-row-action]"
+];
+const INTERACTIVE_DESCENDANT_SELECTOR = DATA_TABLE_INTERACTIVE_DESCENDANT_SELECTORS.join(",");
+const LoadingRows = ({ columns, rowClassName, rowCount }) => Array.from({ length: resolveLoadingRowCount(rowCount) }, (_, rowIndex) => /* @__PURE__ */ jsx(TableRow, {
+	className: rowClassName,
+	children: columns.map((column) => /* @__PURE__ */ jsx(TableCell, {
+		className: typeof column.cellClassName === "string" ? column.cellClassName : void 0,
+		children: /* @__PURE__ */ jsx(Skeleton, {
+			"aria-hidden": "true",
+			className: "h-4 w-full"
+		})
+	}, column.id))
+}, rowIndex));
+const resolveLoadingRowCount = (rowCount) => Number.isFinite(rowCount) && rowCount > 0 ? Math.min(MAX_LOADING_ROW_COUNT, Math.max(1, Math.floor(rowCount))) : DEFAULT_LOADING_ROW_COUNT;
+const StatusRow = ({ colSpan, label }) => /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+	className: "text-muted-foreground h-24 text-center",
+	colSpan,
+	children: label
+}) });
+const resolveClassName = (value, item) => typeof value === "function" ? value(item) : value;
+const interactiveRowProps = (item, rowAction) => ({
+	className: cn("cursor-pointer", COARSE_POINTER_ROW_CLASS_NAME, rowAction.getClassName?.(item)),
+	onClick: (event) => {
+		if (!isDataTableRowActionTarget(event.currentTarget, event.target)) return;
+		rowAction.onSelect(item);
+	}
+});
+const hasClosest = (target) => "closest" in target && typeof target.closest === "function";
+const hasContains = (target) => "contains" in target && typeof target.contains === "function";
+const isDataTableRowActionTarget = (row, target) => {
+	if (target === row) return true;
+	if (target === null || !hasContains(row) || !row.contains(target)) return false;
+	if (!hasClosest(target)) return true;
+	const interactiveTarget = target.closest(INTERACTIVE_DESCENDANT_SELECTOR);
+	return interactiveTarget === null || interactiveTarget === row || !row.contains(interactiveTarget);
+};
+const mergeHandlers = (first, second) => {
+	if (first === void 0) return second;
+	if (second === void 0) return first;
+	return (event) => {
+		first(event);
+		second(event);
+	};
+};
+//#endregion
+export { DATA_TABLE_INTERACTIVE_DESCENDANT_SELECTORS, DataTable, isDataTableRowActionTarget };

package/dist/index.d.ts

@@ -1,3 +1,7 @@
+import { CalendarCell, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow } from "./calendar/primitives.js";
+import { CalendarDateRange, ResourceCalendarLaneLayout, ResourceCalendarLanePlacement, ResourceCalendarPlacement, assertConsecutiveCalendarDates, getResourceCalendarPlacement, layoutResourceCalendarEntries, nextCalendarDate } from "./calendar/resource-calendar.logic.js";
+import { ResourceCalendar, ResourceCalendarColumn, ResourceCalendarEntry, ResourceCalendarEntryTone, ResourceCalendarResource } from "./calendar/resource-calendar.js";
+import "./calendar/index.js";
 import { Accordion, AccordionContent as AccordionPanel, AccordionItem, AccordionTrigger } from "./components/accordion.js";
 import { OVERLAY_LAYER_CLASS_NAMES, OverlayLayer } from "./lib/overlay-layer.js";
 import { AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogContent as AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport } from "./components/alert-dialog.js";
@@ -46,6 +50,8 @@ import { Tabs, TabsContent as TabsPanel, TabsList, TabsTab } from "./components/
 import { AnchoredToastProvider, TOAST_RIGHT_OFFSET_VAR, ToastPosition, ToastProvider, stellaToast } from "./components/toast.js";
 import { Tooltip, TooltipContent as TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger } from "./components/tooltip.js";
 import { TableColumnCapabilities, TableColumnDescriptor, TableSchema, duplicateColumnIds, findTableColumn, hideableColumnIds, sortableColumnIds, tableColumnIds, tableColumnSizing, visibleColumnIds } from "./data-table/schema.js";
+import { DataTable, DataTableAriaSort, DataTableColumn, DataTableProps, DataTableRowAction } from "./data-table/table.js";
+import "./data-table/index.js";
 import { containedEventHandler, containedHandler } from "./hooks/use-contained-handler.js";
 import { contentDir, isStructuredInputType, useContentDir } from "./hooks/use-content-dir.js";
 import { useIsMobile } from "./hooks/use-mobile.js";
@@ -59,9 +65,10 @@ import "./inspector/index.js";
 import { KanbanCardFieldSelection, selectKanbanCardFieldIds } from "./kanban/card-properties.js";
 import { KanbanCardShell, KanbanCardShellProps } from "./kanban/card-shell.js";
 import { KanbanColumnHeader, KanbanColumnHeaderProps } from "./kanban/column-header.js";
+import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, RegisterKanbanBoardAutoScrollOptions, RegisterKanbanCardDragOptions, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./kanban/drag-interactions.js";
 import { ColorVariants, OptionColor, emptyColor, optionColors, resolveOptionColor } from "./lib/option-color.js";
 import { KanbanBuiltInGroup, KanbanGroup, KanbanGroupOption, KanbanGrouping, KanbanSchema, ResolveKanbanGroupingParams, getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./kanban/grouping.js";
 import "./kanban/index.js";
 import { cn, composeRefs } from "./lib/utils.js";
 import { getFirstWeekday, getLocaleWeekInfo, getWeekendDays } from "./lib/week.js";
-export { Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AnchoredToastProvider, Avatar, AvatarFallback, AvatarImage, type BidiDirection, BidiText, type BidiTextProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Checkbox, ColorPicker, ColorPickerContent, type ColorPickerContentProps, type ColorPickerProps, type ColorPreset, ColorVariants, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut, DEFAULT_PRESETS, DatePickerPopover, type DatePickerPopoverProps, DestructiveActionConfirmation, DestructiveConfirmDialog, type DestructiveConfirmDialogProps, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DirectionalIcon, DiscordLogoIcon, Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, GitHubLogoIcon, HexColorPicker, type HexColorPickerProps, PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTitle, type KanbanBuiltInGroup, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanSchema, Label, MenuPreviewLayout, OVERLAY_LAYER_CLASS_NAMES, OptionColor, OutlineItem, OutlineRail, OutlineRailProps, OverlayLayer, PROPERTY_ROW_GRID, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, type ResolveKanbanGroupingParams, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, ScrollToTopProps, SecretInput, type SecretInputProps, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, type SheetSide, SheetTitle, SheetTrigger, Skeleton, type SortDirection, SortableHead, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, Table, TableBody, TableCaption, TableCell, type TableColumnCapabilities, type TableColumnDescriptor, TableFooter, TableHead, TableHeader, TableRow, type TableSchema, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, type TextareaProps, type ToastPosition, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, UserText, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getKanbanGroupingPropertyId, getKanbanGroups, getLocaleWeekInfo, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, optionColors, parsePersistedPaneWidth, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useViewportWidth, visibleColumnIds };
+export { Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AnchoredToastProvider, Avatar, AvatarFallback, AvatarImage, type BidiDirection, BidiText, type BidiTextProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CalendarCell, type CalendarDateRange, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, Checkbox, ColorPicker, ColorPickerContent, type ColorPickerContentProps, type ColorPickerProps, type ColorPreset, ColorVariants, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut, DEFAULT_PRESETS, DataTable, type DataTableAriaSort, type DataTableColumn, type DataTableProps, type DataTableRowAction, DatePickerPopover, type DatePickerPopoverProps, DestructiveActionConfirmation, DestructiveConfirmDialog, type DestructiveConfirmDialogProps, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DirectionalIcon, DiscordLogoIcon, Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, GitHubLogoIcon, HexColorPicker, type HexColorPickerProps, PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTitle, KANBAN_BOARD_AUTO_SCROLL_SOURCES, type KanbanBuiltInGroup, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanSchema, Label, MenuPreviewLayout, OVERLAY_LAYER_CLASS_NAMES, OptionColor, OutlineItem, OutlineRail, OutlineRailProps, OverlayLayer, PROPERTY_ROW_GRID, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupingParams, ResourceCalendar, type ResourceCalendarColumn, type ResourceCalendarEntry, type ResourceCalendarEntryTone, type ResourceCalendarLaneLayout, type ResourceCalendarLanePlacement, type ResourceCalendarPlacement, type ResourceCalendarResource, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, ScrollToTopProps, SecretInput, type SecretInputProps, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, type SheetSide, SheetTitle, SheetTrigger, Skeleton, type SortDirection, SortableHead, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, Table, TableBody, TableCaption, TableCell, type TableColumnCapabilities, type TableColumnDescriptor, TableFooter, TableHead, TableHeader, TableRow, type TableSchema, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, type TextareaProps, type ToastPosition, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, UserText, assertConsecutiveCalendarDates, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getKanbanGroupingPropertyId, getKanbanGroups, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, layoutResourceCalendarEntries, nextCalendarDate, optionColors, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useViewportWidth, visibleColumnIds };

package/dist/index.js

@@ -19,6 +19,9 @@ import { ScrollArea, ScrollBar } from "./components/scroll-area.js";
 import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, useComboboxFilter } from "./components/combobox.js";
 import { Dialog, DialogBackdrop, DialogClose, DialogContent as DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport } from "./components/dialog.js";
 import { Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut } from "./components/command.js";
+import { CalendarCell, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow } from "./calendar/primitives.js";
+import { assertConsecutiveCalendarDates, getResourceCalendarPlacement, layoutResourceCalendarEntries, nextCalendarDate } from "./calendar/resource-calendar.logic.js";
+import { ResourceCalendar } from "./calendar/resource-calendar.js";
 import { getFirstWeekday, getLocaleWeekInfo, getWeekendDays } from "./lib/week.js";
 import { Popover, PopoverClose, PopoverContent as PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger } from "./components/popover.js";
 import { DatePickerPopover } from "./components/date-picker-popover.js";
@@ -50,6 +53,7 @@ import { SortableHead, Table, TableBody, TableCaption, TableCell, TableFooter, T
 import { Tabs, TabsContent as TabsPanel, TabsList, TabsTab } from "./components/tabs.js";
 import { AnchoredToastProvider, TOAST_RIGHT_OFFSET_VAR, ToastProvider, stellaToast } from "./components/toast.js";
 import { duplicateColumnIds, findTableColumn, hideableColumnIds, sortableColumnIds, tableColumnIds, tableColumnSizing, visibleColumnIds } from "./data-table/schema.js";
+import { DataTable } from "./data-table/table.js";
 import { useIsMobile } from "./hooks/use-mobile.js";
 import { useViewportWidth } from "./hooks/use-viewport-width.js";
 import { PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX } from "./inspector/layout-tokens.js";
@@ -60,6 +64,7 @@ import { INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, parseP
 import { selectKanbanCardFieldIds } from "./kanban/card-properties.js";
 import { KanbanCardShell } from "./kanban/card-shell.js";
 import { KanbanColumnHeader } from "./kanban/column-header.js";
+import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./kanban/drag-interactions.js";
 import { getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./kanban/grouping.js";
 import { emptyColor, optionColors, resolveOptionColor } from "./lib/option-color.js";
-export { Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AnchoredToastProvider, Avatar, AvatarFallback, AvatarImage, BidiText, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Checkbox, ColorPicker, ColorPickerContent, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut, DEFAULT_PRESETS, DatePickerPopover, DestructiveActionConfirmation, DestructiveConfirmDialog, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DirectionalIcon, DiscordLogoIcon, Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, GitHubLogoIcon, HexColorPicker, PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTitle, KanbanCardShell, KanbanColumnHeader, Label, MenuPreviewLayout, OVERLAY_LAYER_CLASS_NAMES, OutlineRail, PROPERTY_ROW_GRID, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, SecretInput, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, SheetTitle, SheetTrigger, Skeleton, SortableHead, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, UserText, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getKanbanGroupingPropertyId, getKanbanGroups, getLocaleWeekInfo, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, optionColors, parsePersistedPaneWidth, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useViewportWidth, visibleColumnIds };
+export { Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AnchoredToastProvider, Avatar, AvatarFallback, AvatarImage, BidiText, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CalendarCell, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, Checkbox, ColorPicker, ColorPickerContent, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut, DEFAULT_PRESETS, DataTable, DatePickerPopover, DestructiveActionConfirmation, DestructiveConfirmDialog, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DirectionalIcon, DiscordLogoIcon, Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, GitHubLogoIcon, HexColorPicker, PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTitle, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KanbanCardShell, KanbanColumnHeader, Label, MenuPreviewLayout, OVERLAY_LAYER_CLASS_NAMES, OutlineRail, PROPERTY_ROW_GRID, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, ResourceCalendar, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, SecretInput, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, SheetTitle, SheetTrigger, Skeleton, SortableHead, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, UserText, assertConsecutiveCalendarDates, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getKanbanGroupingPropertyId, getKanbanGroups, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, layoutResourceCalendarEntries, nextCalendarDate, optionColors, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useViewportWidth, visibleColumnIds };

package/dist/kanban/drag-interactions.d.ts

@@ -0,0 +1,35 @@
+import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+//#region src/kanban/drag-interactions.d.ts
+type AtlaskitDraggableOptions = Parameters<typeof draggable>[0];
+type RegisterKanbanCardDragOptions = {
+  /** The drag wrapper rendered by `KanbanCardShell`. */
+  element: AtlaskitDraggableOptions["element"];
+  /** Domain data read by the board's drop monitor. */
+  getInitialData: NonNullable<AtlaskitDraggableOptions["getInitialData"]>;
+  /** Omit when every rendered card may move. */
+  canDrag?: AtlaskitDraggableOptions["canDrag"];
+  onDragStart?: AtlaskitDraggableOptions["onDragStart"];
+  onDrop?: AtlaskitDraggableOptions["onDrop"];
+};
+/**
+ * Register the standard kanban card drag source and native preview.
+ *
+ * Movement remains with the caller: the package does not inspect the drag data
+ * or persist a drop. It owns the interaction every card shares, including a
+ * pointer-centred preview cloned from the styled card inside the shell.
+ */
+declare const registerKanbanCardDrag: ({ element, getInitialData, canDrag, onDragStart, onDrop }: RegisterKanbanCardDragOptions) => (() => void);
+declare const KANBAN_BOARD_AUTO_SCROLL_SOURCES: {
+  readonly elements: "elements";
+  readonly elementsAndExternal: "elements-and-external";
+};
+type KanbanBoardAutoScrollSource = (typeof KANBAN_BOARD_AUTO_SCROLL_SOURCES)[keyof typeof KANBAN_BOARD_AUTO_SCROLL_SOURCES];
+type RegisterKanbanBoardAutoScrollOptions = {
+  element: HTMLElement;
+  /** External sources include files dragged in from outside the page. */
+  sources: KanbanBoardAutoScrollSource;
+};
+/** Register horizontal auto-scroll at the board's overflow boundary. */
+declare const registerKanbanBoardAutoScroll: ({ element, sources }: RegisterKanbanBoardAutoScrollOptions) => (() => void);
+//#endregion
+export { KANBAN_BOARD_AUTO_SCROLL_SOURCES, RegisterKanbanBoardAutoScrollOptions, RegisterKanbanCardDragOptions, registerKanbanBoardAutoScroll, registerKanbanCardDrag };

package/dist/kanban/drag-interactions.js

@@ -0,0 +1,53 @@
+import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
+import { autoScrollForExternal } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/external";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { centerUnderPointer } from "@atlaskit/pragmatic-drag-and-drop/element/center-under-pointer";
+import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
+//#region src/kanban/drag-interactions.ts
+/**
+* Register the standard kanban card drag source and native preview.
+*
+* Movement remains with the caller: the package does not inspect the drag data
+* or persist a drop. It owns the interaction every card shares, including a
+* pointer-centred preview cloned from the styled card inside the shell.
+*/
+const registerKanbanCardDrag = ({ element, getInitialData, canDrag, onDragStart, onDrop }) => draggable({
+	element,
+	getInitialData,
+	...canDrag === void 0 ? {} : { canDrag },
+	...onDragStart === void 0 ? {} : { onDragStart },
+	...onDrop === void 0 ? {} : { onDrop },
+	onGenerateDragPreview: ({ nativeSetDragImage }) => {
+		setCustomNativeDragPreview({
+			nativeSetDragImage,
+			getOffset: centerUnderPointer,
+			render: ({ container }) => {
+				const card = element.firstElementChild;
+				if (!(card instanceof HTMLElement)) return;
+				const clone = card.cloneNode(true);
+				if (!(clone instanceof HTMLElement)) return;
+				clone.style.width = `${card.getBoundingClientRect().width}px`;
+				container.append(clone);
+			}
+		});
+	}
+});
+const KANBAN_BOARD_AUTO_SCROLL_SOURCES = {
+	elements: "elements",
+	elementsAndExternal: "elements-and-external"
+};
+/** Register horizontal auto-scroll at the board's overflow boundary. */
+const registerKanbanBoardAutoScroll = ({ element, sources }) => {
+	const elementCleanup = autoScrollForElements({
+		element,
+		getAllowedAxis: () => "horizontal"
+	});
+	if (sources === KANBAN_BOARD_AUTO_SCROLL_SOURCES.elements) return elementCleanup;
+	return combine(elementCleanup, autoScrollForExternal({
+		element,
+		getAllowedAxis: () => "horizontal"
+	}));
+};
+//#endregion
+export { KANBAN_BOARD_AUTO_SCROLL_SOURCES, registerKanbanBoardAutoScroll, registerKanbanCardDrag };

package/dist/kanban/index.d.ts

@@ -1,5 +1,6 @@
 import { KanbanCardFieldSelection, selectKanbanCardFieldIds } from "./card-properties.js";
 import { KanbanCardShell, KanbanCardShellProps } from "./card-shell.js";
 import { KanbanColumnHeader, KanbanColumnHeaderProps } from "./column-header.js";
+import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, RegisterKanbanBoardAutoScrollOptions, RegisterKanbanCardDragOptions, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./drag-interactions.js";
 import { KanbanBuiltInGroup, KanbanGroup, KanbanGroupOption, KanbanGrouping, KanbanSchema, ResolveKanbanGroupingParams, getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./grouping.js";
-export { type KanbanBuiltInGroup, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanSchema, type ResolveKanbanGroupingParams, getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows };
+export { KANBAN_BOARD_AUTO_SCROLL_SOURCES, type KanbanBuiltInGroup, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanSchema, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupingParams, getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows };

package/dist/kanban/index.js

@@ -1,5 +1,6 @@
 import { selectKanbanCardFieldIds } from "./card-properties.js";
 import { KanbanCardShell } from "./card-shell.js";
 import { KanbanColumnHeader } from "./column-header.js";
+import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./drag-interactions.js";
 import { getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./grouping.js";
-export { KanbanCardShell, KanbanColumnHeader, getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows };
+export { KANBAN_BOARD_AUTO_SCROLL_SOURCES, KanbanCardShell, KanbanColumnHeader, getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Stella's design system: bidi-aware React primitives built on Base UI, the dockable inspector pane, and the Tailwind v4 theme they are styled with.",
   "keywords": [
     "base-ui",
@@ -81,6 +81,10 @@
       "types": "./dist/components/command.d.ts",
       "import": "./dist/components/command.js"
     },
+    "./calendar": {
+      "types": "./dist/calendar/index.d.ts",
+      "import": "./dist/calendar/index.js"
+    },
     "./data-table": {
       "types": "./dist/data-table/index.d.ts",
       "import": "./dist/data-table/index.js"
@@ -497,17 +501,21 @@
     "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^3.0.0",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.1",
     "@base-ui/react": "1.7.0",
     "@stll/typescript-config": "0.0.0",
-    "@types/bun": "1.3.14",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
+    "bun-types": "1.4.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "tailwindcss": "4.3.3",
     "tsdown": "0.22.14"
   },
   "peerDependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^3.0.0",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.1",
     "@base-ui/react": "^1.7.0",
     "react": ">=19",
     "react-dom": ">=19",