@tomny-dev/uzi 0.6.3 → 0.7.0-pr.78.214.1.87d1ede

package/dist/index71.cjs

@@ -1,88 +1,248 @@
+"use client";
 const require_runtime = require("./index2.cjs");
 const require_cx = require("./index4.cjs");
-const require_settings_page_module = require("./index70.cjs");
+const require_data_table_module = require("./index70.cjs");
 let react = require("react");
 react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/components/settings-page/SettingsPage.tsx
-/**
-* SettingsPage — a settings layout with sections, a danger zone, and a sticky save footer.
-*
-* Layout:
-*   Header (title + description)
-*   Scrollable content:
-*     Section group with headings and descriptions
-*     Danger zone with red visual distinction
-*   Sticky footer: save/cancel buttons
-*/
-function SettingsPage({ title, description, sections, dangerZone, dangerZoneTitle, dangerZoneDescription, footer, saving = false, className }) {
+//#region src/components/data-table/DataTable.tsx
+function DataTable({ data, columns, onRowAction, onSelectionChange, loading = false, emptyMessage = "No data found", pageSize = 10, selectable = false, rowKey = (row) => String(row.id ?? ""), className }) {
+	const [sortKey, setSortKey] = react.useState(null);
+	const [sortDir, setSortDir] = react.useState("asc");
+	const [page, setPage] = react.useState(1);
+	const [selected, setSelected] = react.useState(/* @__PURE__ */ new Set());
+	const handleSort = (key) => {
+		if (key === sortKey) setSortDir((d) => d === "asc" ? "desc" : "asc");
+		else {
+			setSortKey(key);
+			setSortDir("asc");
+		}
+	};
+	const toggleRow = (id) => {
+		const next = new Set(selected);
+		if (next.has(id)) next.delete(id);
+		else next.add(id);
+		setSelected(next);
+		onSelectionChange?.(Array.from(next));
+	};
+	const toggleAll = () => {
+		const allKeys = displayedData.map((r) => rowKey(r));
+		const allSelected = allKeys.every((k) => selected.has(k));
+		const next = new Set(selected);
+		if (allSelected) allKeys.forEach((k) => next.delete(k));
+		else allKeys.forEach((k) => next.add(k));
+		setSelected(next);
+		onSelectionChange?.(Array.from(next));
+	};
+	const totalPages = Math.max(1, Math.ceil(data.length / pageSize));
+	const safePage = Math.min(page, totalPages);
+	const columnSpan = columns.length + (selectable ? 1 : 0) + (onRowAction && onRowAction.length > 0 ? 1 : 0);
+	react.useEffect(() => {
+		if (page > totalPages) setPage(totalPages);
+	}, [
+		data.length,
+		page,
+		totalPages
+	]);
+	const sortedData = react.useMemo(() => {
+		if (!sortKey) return data;
+		const sortColumn = columns.find((column) => column.key === sortKey);
+		const getSortValue = (row) => {
+			if (sortColumn?.accessor) {
+				const accessed = sortColumn.accessor(row);
+				if (typeof accessed === "string" || typeof accessed === "number") return accessed;
+			}
+			return row[sortKey];
+		};
+		return [...data].sort((a, b) => {
+			const aVal = getSortValue(a);
+			const bVal = getSortValue(b);
+			if (aVal == null) return 1;
+			if (bVal == null) return -1;
+			let cmp = 0;
+			if (typeof aVal === "number" && typeof bVal === "number") cmp = aVal - bVal;
+			else cmp = String(aVal).localeCompare(String(bVal));
+			return sortDir === "asc" ? cmp : -cmp;
+		});
+	}, [
+		columns,
+		data,
+		sortKey,
+		sortDir
+	]);
+	const displayedData = react.useMemo(() => {
+		const start = (safePage - 1) * pageSize;
+		return sortedData.slice(start, start + pageSize);
+	}, [
+		sortedData,
+		safePage,
+		pageSize
+	]);
+	const displayedKeys = react.useMemo(() => displayedData.map(rowKey), [displayedData, rowKey]);
+	const allPageSelected = displayedKeys.length > 0 && displayedKeys.every((k) => selected.has(k));
+	const somePageSelected = displayedKeys.length > 0 && displayedKeys.some((k) => selected.has(k));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_cx.cx(require_settings_page_module.default.wrapper, className),
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
-				className: require_settings_page_module.default.header,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: require_settings_page_module.default.headerContent,
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
-						className: require_settings_page_module.default.title,
-						children: title
-					}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: require_settings_page_module.default.description,
-						children: description
-					})]
-				})
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: require_settings_page_module.default.content,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: require_settings_page_module.default.sections,
-					children: sections.map((section, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-						className: require_settings_page_module.default.section,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: require_settings_page_module.default.sectionHeader,
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
-								className: require_settings_page_module.default.sectionTitle,
-								children: section.title
-							}), section.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: require_settings_page_module.default.sectionDescription,
-								children: section.description
-							})]
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: require_settings_page_module.default.sectionBody,
-							children: section.children
-						})]
-					}, index))
-				}), dangerZone && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: require_settings_page_module.default.dangerZone,
-					children: [(dangerZoneTitle || dangerZoneDescription) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: require_settings_page_module.default.dangerZoneHeader,
-						children: [dangerZoneTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
-							className: require_settings_page_module.default.dangerZoneTitle,
-							children: dangerZoneTitle
-						}), dangerZoneDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: require_settings_page_module.default.dangerZoneDescription,
-							children: dangerZoneDescription
-						})]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: require_settings_page_module.default.dangerZoneBody,
-						children: dangerZone
-					})]
+		className: require_cx.cx(require_data_table_module.default.wrapper, className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: require_data_table_module.default.tableContainer,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+				className: require_data_table_module.default.table,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
+					className: require_data_table_module.default.thead,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+						selectable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+							className: require_data_table_module.default.headerCell,
+							"aria-label": "Select all",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								type: "checkbox",
+								checked: allPageSelected,
+								ref: (el) => {
+									if (el) el.indeterminate = somePageSelected && !allPageSelected;
+								},
+								onChange: toggleAll,
+								className: require_data_table_module.default.checkbox,
+								"aria-label": "Select all rows on this page"
+							})
+						}),
+						columns.map((col) => {
+							const ariaSort = col.sortable ? sortKey === col.key ? sortDir === "asc" ? "ascending" : "descending" : "none" : void 0;
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+								className: require_cx.cx(require_data_table_module.default.headerCell, col.width && require_data_table_module.default.headerCellFixed, col.align && require_data_table_module.default[`align${col.align.charAt(0).toUpperCase() + col.align.slice(1)}`]),
+								style: col.width ? { width: col.width } : void 0,
+								"aria-sort": ariaSort,
+								children: col.sortable ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+									type: "button",
+									className: require_cx.cx(require_data_table_module.default.sortableHeader, require_data_table_module.default.clickableHeader),
+									onClick: () => handleSort(col.key),
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: require_data_table_module.default.headerLabel,
+										children: col.label
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: require_data_table_module.default.sortIcon,
+										"aria-hidden": "true",
+										children: sortKey === col.key ? sortDir === "asc" ? "▲" : "▼" : "▲▼"
+									})]
+								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: require_data_table_module.default.headerLabel,
+									children: col.label
+								})
+							}, col.key);
+						}),
+						onRowAction && onRowAction.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+							className: require_data_table_module.default.headerCell,
+							style: { width: "5rem" },
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: require_data_table_module.default.headerLabel,
+								children: "Actions"
+							})
+						})
+					] })
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", {
+					className: require_data_table_module.default.tbody,
+					children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("td", {
+						colSpan: columnSpan,
+						className: require_data_table_module.default.loadingCell,
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: require_data_table_module.default.loadingRow,
+								"aria-busy": "true",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_data_table_module.default.skeletonBar }),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_data_table_module.default.skeletonBar }),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_data_table_module.default.skeletonBar })
+								]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: require_data_table_module.default.loadingRow,
+								"aria-busy": "true",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_data_table_module.default.skeletonBar }),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_data_table_module.default.skeletonBar }),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_data_table_module.default.skeletonBar })
+								]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: require_data_table_module.default.loadingRow,
+								"aria-busy": "true",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_data_table_module.default.skeletonBar }),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_data_table_module.default.skeletonBar }),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_data_table_module.default.skeletonBar })
+								]
+							})
+						]
+					}) }) : data.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+						colSpan: columnSpan,
+						className: require_data_table_module.default.emptyCell,
+						children: emptyMessage
+					}) }) : displayedData.map((row) => {
+						const id = rowKey(row);
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", {
+							className: require_cx.cx(require_data_table_module.default.row, selected.has(id) && require_data_table_module.default.rowSelected),
+							children: [
+								selectable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+									className: require_data_table_module.default.cell,
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+										type: "checkbox",
+										checked: selected.has(id),
+										onChange: () => toggleRow(id),
+										className: require_data_table_module.default.checkbox,
+										"aria-label": `Select row ${id}`
+									})
+								}),
+								columns.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+									className: require_cx.cx(require_data_table_module.default.cell, col.align && require_data_table_module.default[`align${col.align.charAt(0).toUpperCase() + col.align.slice(1)}`]),
+									children: col.accessor ? col.accessor(row) : String(row[col.key] ?? "")
+								}, `${id}-${col.key}`)),
+								onRowAction && onRowAction.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+									className: require_data_table_module.default.cell,
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: require_data_table_module.default.rowActions,
+										children: onRowAction.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: require_data_table_module.default.actionBtn,
+											onClick: () => action.onClick(row),
+											children: action.label
+										}, action.label))
+									})
+								})
+							]
+						}, id);
+					})
 				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
-				className: require_settings_page_module.default.footer,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: require_settings_page_module.default.footerContent,
-					children: [footer, saving && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: require_settings_page_module.default.savingIndicator,
-						children: "Saving..."
-					})]
-				})
 			})
-		]
+		}), data.length > pageSize && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: require_data_table_module.default.pagination,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: require_data_table_module.default.paginationInfo,
+				children: [
+					"Page ",
+					safePage,
+					" of ",
+					totalPages
+				]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_data_table_module.default.paginationButtons,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: require_data_table_module.default.pageBtn,
+					disabled: safePage <= 1,
+					onClick: () => setPage((p) => Math.max(1, p - 1)),
+					"aria-label": "Previous page",
+					children: "←"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: require_data_table_module.default.pageBtn,
+					disabled: safePage >= totalPages,
+					onClick: () => setPage((p) => Math.min(totalPages, p + 1)),
+					"aria-label": "Next page",
+					children: "→"
+				})]
+			})]
+		})]
 	});
 }
 //#endregion
-exports.SettingsPage = SettingsPage;
+exports.DataTable = DataTable;
 
 //# sourceMappingURL=index71.cjs.map

package/dist/index71.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index71.cjs","names":[],"sources":["../src/components/settings-page/SettingsPage.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./settings-page.module.css\";\n\nexport interface SettingsSection {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  children: React.ReactNode;\n}\n\nexport interface SettingsPageProps {\n  /** Page title */\n  title: React.ReactNode;\n  /** Page subtitle / description */\n  description?: React.ReactNode;\n  /** Form sections rendered in the main content area */\n  sections: SettingsSection[];\n  /** Content rendered in the danger zone (red visual distinction) */\n  dangerZone?: React.ReactNode;\n  /** Danger zone title */\n  dangerZoneTitle?: React.ReactNode;\n  /** Danger zone description */\n  dangerZoneDescription?: React.ReactNode;\n  /** Sticky footer content (e.g., Save / Cancel buttons) */\n  footer: React.ReactNode;\n  /** Whether the page is saving */\n  saving?: boolean;\n  /** Additional class name for the outer wrapper */\n  className?: string;\n}\n\n/**\n * SettingsPage — a settings layout with sections, a danger zone, and a sticky save footer.\n *\n * Layout:\n *   Header (title + description)\n *   Scrollable content:\n *     Section group with headings and descriptions\n *     Danger zone with red visual distinction\n *   Sticky footer: save/cancel buttons\n */\nexport function SettingsPage({\n  title,\n  description,\n  sections,\n  dangerZone,\n  dangerZoneTitle,\n  dangerZoneDescription,\n  footer,\n  saving = false,\n  className,\n}: SettingsPageProps) {\n  return (\n    <div className={cx(styles.wrapper, className)}>\n      <header className={styles.header}>\n        <div className={styles.headerContent}>\n          <h1 className={styles.title}>{title}</h1>\n          {description && <p className={styles.description}>{description}</p>}\n        </div>\n      </header>\n\n      <div className={styles.content}>\n        <div className={styles.sections}>\n          {sections.map((section, index) => (\n            <section key={index} className={styles.section}>\n              <div className={styles.sectionHeader}>\n                <h2 className={styles.sectionTitle}>{section.title}</h2>\n                {section.description && (\n                  <p className={styles.sectionDescription}>{section.description}</p>\n                )}\n              </div>\n              <div className={styles.sectionBody}>{section.children}</div>\n            </section>\n          ))}\n        </div>\n\n        {dangerZone && (\n          <div className={styles.dangerZone}>\n            {(dangerZoneTitle || dangerZoneDescription) && (\n              <div className={styles.dangerZoneHeader}>\n                {dangerZoneTitle && <h2 className={styles.dangerZoneTitle}>{dangerZoneTitle}</h2>}\n                {dangerZoneDescription && (\n                  <p className={styles.dangerZoneDescription}>{dangerZoneDescription}</p>\n                )}\n              </div>\n            )}\n            <div className={styles.dangerZoneBody}>{dangerZone}</div>\n          </div>\n        )}\n      </div>\n\n      <footer className={styles.footer}>\n        <div className={styles.footerContent}>\n          {footer}\n          {saving && <span className={styles.savingIndicator}>Saving...</span>}\n        </div>\n      </footer>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAyCA,SAAgB,aAAa,EAC3B,OACA,aACA,UACA,YACA,iBACA,uBACA,QACA,SAAS,OACT,aACoB;CACpB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAW,WAAA,GAAG,6BAAA,QAAO,SAAS,SAAS;YAA5C;GACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;IAAQ,WAAW,6BAAA,QAAO;cACxB,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;KAAK,WAAW,6BAAA,QAAO;eAAvB,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;MAAI,WAAW,6BAAA,QAAO;gBAAQ;KAAU,CAAA,GACvC,eAAe,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;MAAG,WAAW,6BAAA,QAAO;gBAAc;KAAe,CAAA,CAC/D;;GACC,CAAA;GAER,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAW,6BAAA,QAAO;cAAvB,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAW,6BAAA,QAAO;eACpB,SAAS,KAAK,SAAS,UACtB,iBAAA,GAAA,kBAAA,KAAA,CAAC,WAAD;MAAqB,WAAW,6BAAA,QAAO;gBAAvC,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;OAAK,WAAW,6BAAA,QAAO;iBAAvB,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;QAAI,WAAW,6BAAA,QAAO;kBAAe,QAAQ;OAAU,CAAA,GACtD,QAAQ,eACP,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;QAAG,WAAW,6BAAA,QAAO;kBAAqB,QAAQ;OAAe,CAAA,CAEhE;UACL,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;OAAK,WAAW,6BAAA,QAAO;iBAAc,QAAQ;MAAc,CAAA,CACpD;QARK,KAQL,CACV;IACE,CAAA,GAEJ,cACC,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;KAAK,WAAW,6BAAA,QAAO;eAAvB,EACI,mBAAmB,0BACnB,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;MAAK,WAAW,6BAAA,QAAO;gBAAvB,CACG,mBAAmB,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;OAAI,WAAW,6BAAA,QAAO;iBAAkB;MAAoB,CAAA,GAC/E,yBACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;OAAG,WAAW,6BAAA,QAAO;iBAAwB;MAAyB,CAAA,CAErE;SAEP,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;MAAK,WAAW,6BAAA,QAAO;gBAAiB;KAAgB,CAAA,CACrD;MAEJ;;GAEL,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;IAAQ,WAAW,6BAAA,QAAO;cACxB,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;KAAK,WAAW,6BAAA,QAAO;eAAvB,CACG,QACA,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MAAM,WAAW,6BAAA,QAAO;gBAAiB;KAAe,CAAA,CAChE;;GACC,CAAA;EACL;;AAET"}
+{"version":3,"file":"index71.cjs","names":[],"sources":["../src/components/data-table/DataTable.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./data-table.module.css\";\n\nexport type SortDirection = \"asc\" | \"desc\";\n\nexport interface Column<T = Record<string, unknown>> {\n  key: string;\n  label: React.ReactNode;\n  accessor?: (row: T) => React.ReactNode;\n  sortable?: boolean;\n  width?: string;\n  align?: \"left\" | \"center\" | \"right\";\n}\n\nexport type DataTableRowAction = {\n  label: string;\n  onClick: (row: Record<string, unknown>) => void;\n};\n\nexport interface DataTableProps<T = Record<string, unknown>> {\n  data: T[];\n  columns: readonly Column<T>[];\n  /** Array of action buttons to render per row */\n  onRowAction?: DataTableRowAction[];\n  /** Called when rows are selected; receives selected row IDs */\n  onSelectionChange?: (selectedIds: string[]) => void;\n  /** Whether the table is in a loading state */\n  loading?: boolean;\n  /** Message displayed when data is empty */\n  emptyMessage?: string;\n  /** Number of rows per page */\n  pageSize?: number;\n  /** Whether rows are selectable via checkbox */\n  selectable?: boolean;\n  /** Custom row key extractor (defaults to row.id) */\n  rowKey?: (row: T) => string;\n  /** Additional class name for the table wrapper */\n  className?: string;\n}\n\nexport function DataTable<T extends Record<string, unknown> = Record<string, unknown>>({\n  data,\n  columns,\n  onRowAction,\n  onSelectionChange,\n  loading = false,\n  emptyMessage = \"No data found\",\n  pageSize = 10,\n  selectable = false,\n  rowKey = (row: T) => String(row.id ?? \"\"),\n  className,\n}: DataTableProps<T>) {\n  const [sortKey, setSortKey] = React.useState<string | null>(null);\n  const [sortDir, setSortDir] = React.useState<SortDirection>(\"asc\");\n  const [page, setPage] = React.useState(1);\n  const [selected, setSelected] = React.useState<Set<string>>(new Set());\n\n  const handleSort = (key: string) => {\n    if (key === sortKey) {\n      setSortDir((d) => (d === \"asc\" ? \"desc\" : \"asc\"));\n    } else {\n      setSortKey(key);\n      setSortDir(\"asc\");\n    }\n  };\n\n  const toggleRow = (id: string) => {\n    const next = new Set(selected);\n    if (next.has(id)) {\n      next.delete(id);\n    } else {\n      next.add(id);\n    }\n    setSelected(next);\n    onSelectionChange?.(Array.from(next));\n  };\n\n  const toggleAll = () => {\n    const allKeys = displayedData.map((r) => rowKey(r));\n    const allSelected = allKeys.every((k) => selected.has(k));\n    const next = new Set(selected);\n    if (allSelected) {\n      allKeys.forEach((k) => next.delete(k));\n    } else {\n      allKeys.forEach((k) => next.add(k));\n    }\n    setSelected(next);\n    onSelectionChange?.(Array.from(next));\n  };\n\n  const totalPages = Math.max(1, Math.ceil(data.length / pageSize));\n  const safePage = Math.min(page, totalPages);\n  const columnSpan =\n    columns.length + (selectable ? 1 : 0) + (onRowAction && onRowAction.length > 0 ? 1 : 0);\n\n  React.useEffect(() => {\n    if (page > totalPages) {\n      setPage(totalPages);\n    }\n  }, [data.length, page, totalPages]);\n\n  const sortedData = React.useMemo(() => {\n    if (!sortKey) return data;\n\n    const sortColumn = columns.find((column) => column.key === sortKey);\n    const getSortValue = (row: T): unknown => {\n      if (sortColumn?.accessor) {\n        const accessed = sortColumn.accessor(row);\n        if (typeof accessed === \"string\" || typeof accessed === \"number\") {\n          return accessed;\n        }\n      }\n      return row[sortKey as keyof T];\n    };\n\n    return [...data].sort((a, b) => {\n      const aVal = getSortValue(a);\n      const bVal = getSortValue(b);\n      if (aVal == null) return 1;\n      if (bVal == null) return -1;\n      let cmp = 0;\n      if (typeof aVal === \"number\" && typeof bVal === \"number\") {\n        cmp = aVal - bVal;\n      } else {\n        cmp = String(aVal).localeCompare(String(bVal));\n      }\n      return sortDir === \"asc\" ? cmp : -cmp;\n    });\n  }, [columns, data, sortKey, sortDir]);\n\n  const displayedData = React.useMemo(() => {\n    const start = (safePage - 1) * pageSize;\n    return sortedData.slice(start, start + pageSize);\n  }, [sortedData, safePage, pageSize]);\n\n  const displayedKeys = React.useMemo(() => displayedData.map(rowKey), [displayedData, rowKey]);\n  const allPageSelected =\n    displayedKeys.length > 0 && displayedKeys.every((k) => selected.has(k));\n  const somePageSelected =\n    displayedKeys.length > 0 && displayedKeys.some((k) => selected.has(k));\n\n  return (\n    <div className={cx(styles.wrapper, className)}>\n      <div className={styles.tableContainer}>\n        <table className={styles.table}>\n          <thead className={styles.thead}>\n            <tr>\n              {selectable && (\n                <th className={styles.headerCell} aria-label=\"Select all\">\n                  <input\n                    type=\"checkbox\"\n                    checked={allPageSelected}\n                    ref={(el) => {\n                      if (el) el.indeterminate = somePageSelected && !allPageSelected;\n                    }}\n                    onChange={toggleAll}\n                    className={styles.checkbox}\n                    aria-label=\"Select all rows on this page\"\n                  />\n                </th>\n              )}\n              {columns.map((col) => {\n                const ariaSort = col.sortable\n                  ? sortKey === col.key\n                    ? sortDir === \"asc\"\n                      ? \"ascending\"\n                      : \"descending\"\n                    : \"none\"\n                  : undefined;\n\n                return (\n                  <th\n                    key={col.key}\n                    className={cx(\n                      styles.headerCell,\n                      col.width && styles.headerCellFixed,\n                      col.align && styles[`align${col.align.charAt(0).toUpperCase() + col.align.slice(1)}`],\n                    )}\n                    style={col.width ? { width: col.width } : undefined}\n                    aria-sort={ariaSort}\n                  >\n                    {col.sortable ? (\n                      <button\n                        type=\"button\"\n                        className={cx(styles.sortableHeader, styles.clickableHeader)}\n                        onClick={() => handleSort(col.key)}\n                      >\n                        <span className={styles.headerLabel}>{col.label}</span>\n                        <span className={styles.sortIcon} aria-hidden=\"true\">\n                          {sortKey === col.key ? (\n                            sortDir === \"asc\" ? (\n                              \"\\u25B2\"\n                            ) : (\n                              \"\\u25BC\"\n                            )\n                          ) : (\n                            \"\\u25B2\\u25BC\"\n                          )}\n                        </span>\n                      </button>\n                    ) : (\n                      <span className={styles.headerLabel}>{col.label}</span>\n                    )}\n                  </th>\n                );\n              })}\n              {onRowAction && onRowAction.length > 0 && (\n                <th className={styles.headerCell} style={{ width: \"5rem\" }}>\n                  <span className={styles.headerLabel}>Actions</span>\n                </th>\n              )}\n            </tr>\n          </thead>\n          <tbody className={styles.tbody}>\n            {loading ? (\n              <tr>\n                <td colSpan={columnSpan} className={styles.loadingCell}>\n                  <div className={styles.loadingRow} aria-busy=\"true\">\n                    <div className={styles.skeletonBar} />\n                    <div className={styles.skeletonBar} />\n                    <div className={styles.skeletonBar} />\n                  </div>\n                  <div className={styles.loadingRow} aria-busy=\"true\">\n                    <div className={styles.skeletonBar} />\n                    <div className={styles.skeletonBar} />\n                    <div className={styles.skeletonBar} />\n                  </div>\n                  <div className={styles.loadingRow} aria-busy=\"true\">\n                    <div className={styles.skeletonBar} />\n                    <div className={styles.skeletonBar} />\n                    <div className={styles.skeletonBar} />\n                  </div>\n                </td>\n              </tr>\n            ) : data.length === 0 ? (\n              <tr>\n                <td colSpan={columnSpan} className={styles.emptyCell}>\n                  {emptyMessage}\n                </td>\n              </tr>\n            ) : (\n              displayedData.map((row) => {\n                const id = rowKey(row);\n                return (\n                  <tr key={id} className={cx(styles.row, selected.has(id) && styles.rowSelected)}>\n                    {selectable && (\n                      <td className={styles.cell}>\n                        <input\n                          type=\"checkbox\"\n                          checked={selected.has(id)}\n                          onChange={() => toggleRow(id)}\n                          className={styles.checkbox}\n                          aria-label={`Select row ${id}`}\n                        />\n                      </td>\n                    )}\n                    {columns.map((col) => (\n                      <td\n                        key={`${id}-${col.key}`}\n                        className={cx(\n                          styles.cell,\n                          col.align && styles[`align${col.align.charAt(0).toUpperCase() + col.align.slice(1)}`],\n                        )}\n                      >\n                        {col.accessor ? col.accessor(row) : String(row[col.key as keyof T] ?? \"\")}\n                      </td>\n                    ))}\n                    {onRowAction && onRowAction.length > 0 && (\n                      <td className={styles.cell}>\n                        <div className={styles.rowActions}>\n                          {onRowAction.map((action) => (\n                            <button\n                              key={action.label}\n                              type=\"button\"\n                              className={styles.actionBtn}\n                              onClick={() => action.onClick(row)}\n                            >\n                              {action.label}\n                            </button>\n                          ))}\n                        </div>\n                      </td>\n                    )}\n                  </tr>\n                );\n              })\n            )}\n          </tbody>\n        </table>\n      </div>\n\n      {data.length > pageSize && (\n        <div className={styles.pagination}>\n          <span className={styles.paginationInfo}>\n            Page {safePage} of {totalPages}\n          </span>\n          <div className={styles.paginationButtons}>\n            <button\n              type=\"button\"\n              className={styles.pageBtn}\n              disabled={safePage <= 1}\n              onClick={() => setPage((p) => Math.max(1, p - 1))}\n              aria-label=\"Previous page\"\n            >\n              &larr;\n            </button>\n            <button\n              type=\"button\"\n              className={styles.pageBtn}\n              disabled={safePage >= totalPages}\n              onClick={() => setPage((p) => Math.min(totalPages, p + 1))}\n              aria-label=\"Next page\"\n            >\n              &rarr;\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AA2CA,SAAgB,UAAuE,EACrF,MACA,SACA,aACA,mBACA,UAAU,OACV,eAAe,iBACf,WAAW,IACX,aAAa,OACb,UAAU,QAAW,OAAO,IAAI,MAAM,EAAE,GACxC,aACoB;CACpB,MAAM,CAAC,SAAS,cAAc,MAAM,SAAwB,IAAI;CAChE,MAAM,CAAC,SAAS,cAAc,MAAM,SAAwB,KAAK;CACjE,MAAM,CAAC,MAAM,WAAW,MAAM,SAAS,CAAC;CACxC,MAAM,CAAC,UAAU,eAAe,MAAM,yBAAsB,IAAI,IAAI,CAAC;CAErE,MAAM,cAAc,QAAgB;EAClC,IAAI,QAAQ,SACV,YAAY,MAAO,MAAM,QAAQ,SAAS,KAAM;OAC3C;GACL,WAAW,GAAG;GACd,WAAW,KAAK;EAClB;CACF;CAEA,MAAM,aAAa,OAAe;EAChC,MAAM,OAAO,IAAI,IAAI,QAAQ;EAC7B,IAAI,KAAK,IAAI,EAAE,GACb,KAAK,OAAO,EAAE;OAEd,KAAK,IAAI,EAAE;EAEb,YAAY,IAAI;EAChB,oBAAoB,MAAM,KAAK,IAAI,CAAC;CACtC;CAEA,MAAM,kBAAkB;EACtB,MAAM,UAAU,cAAc,KAAK,MAAM,OAAO,CAAC,CAAC;EAClD,MAAM,cAAc,QAAQ,OAAO,MAAM,SAAS,IAAI,CAAC,CAAC;EACxD,MAAM,OAAO,IAAI,IAAI,QAAQ;EAC7B,IAAI,aACF,QAAQ,SAAS,MAAM,KAAK,OAAO,CAAC,CAAC;OAErC,QAAQ,SAAS,MAAM,KAAK,IAAI,CAAC,CAAC;EAEpC,YAAY,IAAI;EAChB,oBAAoB,MAAM,KAAK,IAAI,CAAC;CACtC;CAEA,MAAM,aAAa,KAAK,IAAI,GAAG,KAAK,KAAK,KAAK,SAAS,QAAQ,CAAC;CAChE,MAAM,WAAW,KAAK,IAAI,MAAM,UAAU;CAC1C,MAAM,aACJ,QAAQ,UAAU,aAAa,IAAI,MAAM,eAAe,YAAY,SAAS,IAAI,IAAI;CAEvF,MAAM,gBAAgB;EACpB,IAAI,OAAO,YACT,QAAQ,UAAU;CAEtB,GAAG;EAAC,KAAK;EAAQ;EAAM;CAAU,CAAC;CAElC,MAAM,aAAa,MAAM,cAAc;EACrC,IAAI,CAAC,SAAS,OAAO;EAErB,MAAM,aAAa,QAAQ,MAAM,WAAW,OAAO,QAAQ,OAAO;EAClE,MAAM,gBAAgB,QAAoB;GACxC,IAAI,YAAY,UAAU;IACxB,MAAM,WAAW,WAAW,SAAS,GAAG;IACxC,IAAI,OAAO,aAAa,YAAY,OAAO,aAAa,UACtD,OAAO;GAEX;GACA,OAAO,IAAI;EACb;EAEA,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC,MAAM,GAAG,MAAM;GAC9B,MAAM,OAAO,aAAa,CAAC;GAC3B,MAAM,OAAO,aAAa,CAAC;GAC3B,IAAI,QAAQ,MAAM,OAAO;GACzB,IAAI,QAAQ,MAAM,OAAO;GACzB,IAAI,MAAM;GACV,IAAI,OAAO,SAAS,YAAY,OAAO,SAAS,UAC9C,MAAM,OAAO;QAEb,MAAM,OAAO,IAAI,CAAC,CAAC,cAAc,OAAO,IAAI,CAAC;GAE/C,OAAO,YAAY,QAAQ,MAAM,CAAC;EACpC,CAAC;CACH,GAAG;EAAC;EAAS;EAAM;EAAS;CAAO,CAAC;CAEpC,MAAM,gBAAgB,MAAM,cAAc;EACxC,MAAM,SAAS,WAAW,KAAK;EAC/B,OAAO,WAAW,MAAM,OAAO,QAAQ,QAAQ;CACjD,GAAG;EAAC;EAAY;EAAU;CAAQ,CAAC;CAEnC,MAAM,gBAAgB,MAAM,cAAc,cAAc,IAAI,MAAM,GAAG,CAAC,eAAe,MAAM,CAAC;CAC5F,MAAM,kBACJ,cAAc,SAAS,KAAK,cAAc,OAAO,MAAM,SAAS,IAAI,CAAC,CAAC;CACxE,MAAM,mBACJ,cAAc,SAAS,KAAK,cAAc,MAAM,MAAM,SAAS,IAAI,CAAC,CAAC;CAEvE,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAW,WAAA,GAAG,0BAAA,QAAO,SAAS,SAAS;YAA5C,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,WAAW,0BAAA,QAAO;aACrB,iBAAA,GAAA,kBAAA,KAAA,CAAC,SAAD;IAAO,WAAW,0BAAA,QAAO;cAAzB,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;KAAO,WAAW,0BAAA,QAAO;eACvB,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD,EAAA,UAAA;MACG,cACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;OAAI,WAAW,0BAAA,QAAO;OAAY,cAAW;iBAC3C,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;QACE,MAAK;QACL,SAAS;QACT,MAAM,OAAO;SACX,IAAI,IAAI,GAAG,gBAAgB,oBAAoB,CAAC;QAClD;QACA,UAAU;QACV,WAAW,0BAAA,QAAO;QAClB,cAAW;OACZ,CAAA;MACC,CAAA;MAEL,QAAQ,KAAK,QAAQ;OACpB,MAAM,WAAW,IAAI,WACjB,YAAY,IAAI,MACd,YAAY,QACV,cACA,eACF,SACF,KAAA;OAEJ,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;QAEE,WAAW,WAAA,GACT,0BAAA,QAAO,YACP,IAAI,SAAS,0BAAA,QAAO,iBACpB,IAAI,SAAS,0BAAA,QAAO,QAAQ,IAAI,MAAM,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,IAAI,MAAM,MAAM,CAAC,IACnF;QACA,OAAO,IAAI,QAAQ,EAAE,OAAO,IAAI,MAAM,IAAI,KAAA;QAC1C,aAAW;kBAEV,IAAI,WACH,iBAAA,GAAA,kBAAA,KAAA,CAAC,UAAD;SACE,MAAK;SACL,WAAW,WAAA,GAAG,0BAAA,QAAO,gBAAgB,0BAAA,QAAO,eAAe;SAC3D,eAAe,WAAW,IAAI,GAAG;mBAHnC,CAKE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;UAAM,WAAW,0BAAA,QAAO;oBAAc,IAAI;SAAY,CAAA,GACtD,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;UAAM,WAAW,0BAAA,QAAO;UAAU,eAAY;oBAC3C,YAAY,IAAI,MACf,YAAY,QACV,MAEA,MAGF;SAEE,CAAA,CACA;aAER,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;SAAM,WAAW,0BAAA,QAAO;mBAAc,IAAI;QAAY,CAAA;OAEtD,GA/BG,IAAI,GA+BP;MAER,CAAC;MACA,eAAe,YAAY,SAAS,KACnC,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;OAAI,WAAW,0BAAA,QAAO;OAAY,OAAO,EAAE,OAAO,OAAO;iBACvD,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;QAAM,WAAW,0BAAA,QAAO;kBAAa;OAAa,CAAA;MAChD,CAAA;KAEJ,EAAA,CAAA;IACC,CAAA,GACP,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;KAAO,WAAW,0BAAA,QAAO;eACtB,UACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;MAAI,SAAS;MAAY,WAAW,0BAAA,QAAO;gBAA3C;OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;QAAK,WAAW,0BAAA,QAAO;QAAY,aAAU;kBAA7C;SACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAK,WAAW,0BAAA,QAAO,YAAc,CAAA;SACrC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAK,WAAW,0BAAA,QAAO,YAAc,CAAA;SACrC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAK,WAAW,0BAAA,QAAO,YAAc,CAAA;QAClC;;OACL,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;QAAK,WAAW,0BAAA,QAAO;QAAY,aAAU;kBAA7C;SACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAK,WAAW,0BAAA,QAAO,YAAc,CAAA;SACrC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAK,WAAW,0BAAA,QAAO,YAAc,CAAA;SACrC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAK,WAAW,0BAAA,QAAO,YAAc,CAAA;QAClC;;OACL,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;QAAK,WAAW,0BAAA,QAAO;QAAY,aAAU;kBAA7C;SACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAK,WAAW,0BAAA,QAAO,YAAc,CAAA;SACrC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAK,WAAW,0BAAA,QAAO,YAAc,CAAA;SACrC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAK,WAAW,0BAAA,QAAO,YAAc,CAAA;QAClC;;MACH;QACF,CAAA,IACF,KAAK,WAAW,IAClB,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;MAAI,SAAS;MAAY,WAAW,0BAAA,QAAO;gBACxC;KACC,CAAA,EACF,CAAA,IAEJ,cAAc,KAAK,QAAQ;MACzB,MAAM,KAAK,OAAO,GAAG;MACrB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;OAAa,WAAW,WAAA,GAAG,0BAAA,QAAO,KAAK,SAAS,IAAI,EAAE,KAAK,0BAAA,QAAO,WAAW;iBAA7E;QACG,cACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;SAAI,WAAW,0BAAA,QAAO;mBACpB,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;UACE,MAAK;UACL,SAAS,SAAS,IAAI,EAAE;UACxB,gBAAgB,UAAU,EAAE;UAC5B,WAAW,0BAAA,QAAO;UAClB,cAAY,cAAc;SAC3B,CAAA;QACC,CAAA;QAEL,QAAQ,KAAK,QACZ,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;SAEE,WAAW,WAAA,GACT,0BAAA,QAAO,MACP,IAAI,SAAS,0BAAA,QAAO,QAAQ,IAAI,MAAM,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,IAAI,MAAM,MAAM,CAAC,IACnF;mBAEC,IAAI,WAAW,IAAI,SAAS,GAAG,IAAI,OAAO,IAAI,IAAI,QAAmB,EAAE;QACtE,GAPG,GAAG,GAAG,GAAG,IAAI,KAOhB,CACL;QACA,eAAe,YAAY,SAAS,KACnC,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;SAAI,WAAW,0BAAA,QAAO;mBACpB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;UAAK,WAAW,0BAAA,QAAO;oBACpB,YAAY,KAAK,WAChB,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;WAEE,MAAK;WACL,WAAW,0BAAA,QAAO;WAClB,eAAe,OAAO,QAAQ,GAAG;qBAEhC,OAAO;UACF,GAND,OAAO,KAMN,CACT;SACE,CAAA;QACH,CAAA;OAEJ;SAvCK,EAuCL;KAER,CAAC;IAEE,CAAA,CACF;;EACJ,CAAA,GAEJ,KAAK,SAAS,YACb,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAW,0BAAA,QAAO;aAAvB,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;IAAM,WAAW,0BAAA,QAAO;cAAxB;KAAwC;KAChC;KAAS;KAAK;IAChB;OACN,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAW,0BAAA,QAAO;cAAvB,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;KACE,MAAK;KACL,WAAW,0BAAA,QAAO;KAClB,UAAU,YAAY;KACtB,eAAe,SAAS,MAAM,KAAK,IAAI,GAAG,IAAI,CAAC,CAAC;KAChD,cAAW;eACZ;IAEO,CAAA,GACR,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;KACE,MAAK;KACL,WAAW,0BAAA,QAAO;KAClB,UAAU,YAAY;KACtB,eAAe,SAAS,MAAM,KAAK,IAAI,YAAY,IAAI,CAAC,CAAC;KACzD,cAAW;eACZ;IAEO,CAAA,CACL;KACF;IAEJ;;AAET"}

package/dist/index71.js

@@ -1,25 +1,47 @@
-//#region src/components/error-page/error-page.module.css
-var layout = "uzi-error-page-module__layout__OVDE8";
-var card = "uzi-error-page-module__card__2veSo";
-var icon = "uzi-error-page-module__icon__vJy8E";
-var iconSvg = "uzi-error-page-module__iconSvg__h4u4V";
-var statusCode = "uzi-error-page-module__statusCode__Ub40l";
-var content = "uzi-error-page-module__content__b2dAY";
-var title = "uzi-error-page-module__title__8iioy";
-var subtitle = "uzi-error-page-module__subtitle__NVk-v";
-var action = "uzi-error-page-module__action__iX5fQ";
-var error_page_module_default = {
-	layout,
-	card,
-	icon,
-	iconSvg,
-	statusCode,
-	content,
+//#region src/components/settings-page/settings-page.module.css
+var wrapper = "uzi-settings-page-module__wrapper__G7OOt";
+var header = "uzi-settings-page-module__header__ao-nv";
+var headerContent = "uzi-settings-page-module__headerContent__xwP9V";
+var title = "uzi-settings-page-module__title__anF9l";
+var description = "uzi-settings-page-module__description__Qw6EQ";
+var content = "uzi-settings-page-module__content__MBz6q";
+var sections = "uzi-settings-page-module__sections__HV2n4";
+var section = "uzi-settings-page-module__section__Vjoe3";
+var sectionHeader = "uzi-settings-page-module__sectionHeader__XiOWN";
+var sectionTitle = "uzi-settings-page-module__sectionTitle__bN5lO";
+var sectionDescription = "uzi-settings-page-module__sectionDescription__3wjhy";
+var sectionBody = "uzi-settings-page-module__sectionBody__zraHK";
+var dangerZone = "uzi-settings-page-module__dangerZone__GD8XX";
+var dangerZoneHeader = "uzi-settings-page-module__dangerZoneHeader__2d3R1";
+var dangerZoneTitle = "uzi-settings-page-module__dangerZoneTitle__ljU2k";
+var dangerZoneDescription = "uzi-settings-page-module__dangerZoneDescription__Z3Ohe";
+var dangerZoneBody = "uzi-settings-page-module__dangerZoneBody__zAQbu";
+var footer = "uzi-settings-page-module__footer__dO4Xo";
+var footerContent = "uzi-settings-page-module__footerContent__pPOdb";
+var savingIndicator = "uzi-settings-page-module__savingIndicator__ujaC5";
+var settings_page_module_default = {
+	wrapper,
+	header,
+	headerContent,
 	title,
-	subtitle,
-	action
+	description,
+	content,
+	sections,
+	section,
+	sectionHeader,
+	sectionTitle,
+	sectionDescription,
+	sectionBody,
+	dangerZone,
+	dangerZoneHeader,
+	dangerZoneTitle,
+	dangerZoneDescription,
+	dangerZoneBody,
+	footer,
+	footerContent,
+	savingIndicator
 };
 //#endregion
-export { action, card, content, error_page_module_default as default, icon, iconSvg, layout, statusCode, subtitle, title };
+export { content, dangerZone, dangerZoneBody, dangerZoneDescription, dangerZoneHeader, dangerZoneTitle, settings_page_module_default as default, description, footer, footerContent, header, headerContent, savingIndicator, section, sectionBody, sectionDescription, sectionHeader, sectionTitle, sections, title, wrapper };
 
 //# sourceMappingURL=index71.js.map

package/dist/index71.js.map

@@ -1 +1 @@
-{"version":3,"file":"index71.js","names":[],"sources":["../src/components/error-page/error-page.module.css"],"sourcesContent":[".layout {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 100vh;\n  min-height: 100dvh;\n  padding: 24px;\n  background: var(--background);\n}\n\n.card {\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1.5rem;\n  max-width: 40rem;\n  padding: 3rem 2rem;\n}\n\n.icon {\n  color: var(--muted-foreground);\n}\n\n.iconSvg {\n  width: 4rem;\n  height: 4rem;\n  stroke-width: 1.5;\n}\n\n.statusCode {\n  font-size: 6rem;\n  font-weight: 700;\n  line-height: 1;\n  color: var(--muted-foreground);\n  letter-spacing: -0.04em;\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1rem;\n}\n\n.title {\n  margin: 0;\n  font-size: 1.5rem;\n  font-weight: 600;\n  color: var(--foreground);\n  line-height: 1.3;\n}\n\n.subtitle {\n  margin: 0;\n  font-size: 1rem;\n  color: var(--muted-foreground);\n  line-height: 1.6;\n  max-width: 32rem;\n}\n\n.action {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: 0.75rem;\n  margin-top: 0.5rem;\n}\n\n@media (max-width: 48rem) {\n  .statusCode {\n    font-size: 4rem;\n  }\n\n  .title {\n    font-size: 1.25rem;\n  }\n\n  .card {\n    padding: 2rem 1.5rem;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"index71.js","names":[],"sources":["../src/components/settings-page/settings-page.module.css"],"sourcesContent":[".wrapper {\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n  background: var(--background);\n  color: var(--foreground);\n}\n\n.header {\n  padding: 2rem 2rem 0;\n  flex-shrink: 0;\n}\n\n.headerContent {\n  max-width: 64rem;\n  margin: 0 auto;\n}\n\n.title {\n  margin: 0 0 0.25rem;\n  font-size: 1.5rem;\n  font-weight: 600;\n  color: var(--foreground);\n  line-height: 1.3;\n}\n\n.description {\n  margin: 0;\n  font-size: 0.9rem;\n  color: var(--muted-foreground);\n  line-height: 1.5;\n}\n\n.content {\n  flex: 1;\n  padding: 1.5rem 2rem 6rem;\n  max-width: 64rem;\n  margin: 0 auto;\n  width: 100%;\n  overflow-y: auto;\n}\n\n.sections {\n  display: flex;\n  flex-direction: column;\n  gap: 2rem;\n}\n\n.section {\n  border-bottom: 1px solid var(--border);\n  padding-bottom: 1.5rem;\n}\n\n.section:last-of-type {\n  border-bottom: none;\n}\n\n.sectionHeader {\n  margin-bottom: 1.25rem;\n}\n\n.sectionTitle {\n  margin: 0 0 0.25rem;\n  font-size: 1.125rem;\n  font-weight: 600;\n  color: var(--foreground);\n}\n\n.sectionDescription {\n  margin: 0;\n  font-size: 0.85rem;\n  color: var(--muted-foreground);\n  line-height: 1.5;\n}\n\n.sectionBody {\n  display: flex;\n  flex-direction: column;\n  gap: 1.25rem;\n}\n\n.dangerZone {\n  margin-top: 2rem;\n  border: 1px solid var(--ts-danger-border, var(--destructive));\n  border-radius: 8px;\n  background: var(--ts-danger-bg, color-mix(in srgb, var(--destructive) 8%, transparent));\n  padding: 1.5rem;\n}\n\n.dangerZoneHeader {\n  margin-bottom: 1rem;\n}\n\n.dangerZoneTitle {\n  margin: 0 0 0.25rem;\n  font-size: 1rem;\n  font-weight: 600;\n  color: var(--ts-danger-text, var(--destructive));\n}\n\n.dangerZoneDescription {\n  margin: 0;\n  font-size: 0.85rem;\n  color: var(--muted-foreground);\n  line-height: 1.5;\n}\n\n.dangerZoneBody {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.footer {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  border-top: 1px solid var(--border);\n  background: var(--background);\n  z-index: 10;\n  padding: 0.75rem 2rem;\n}\n\n.footerContent {\n  max-width: 64rem;\n  margin: 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n}\n\n.savingIndicator {\n  font-size: 0.85rem;\n  color: var(--muted-foreground);\n}\n\n@media (max-width: 48rem) {\n  .header {\n    padding: 1.5rem 1rem 0;\n  }\n\n  .content {\n    padding: 1rem 1rem 6rem;\n  }\n\n  .footer {\n    padding: 0.75rem 1rem;\n  }\n\n  .footerContent {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0.5rem;\n  }\n}\n"],"mappings":""}

package/dist/index72.cjs

@@ -1,34 +1,67 @@
-//#region src/components/error-page/error-page.module.css
-var layout = "uzi-error-page-module__layout__OVDE8";
-var card = "uzi-error-page-module__card__2veSo";
-var icon = "uzi-error-page-module__icon__vJy8E";
-var iconSvg = "uzi-error-page-module__iconSvg__h4u4V";
-var statusCode = "uzi-error-page-module__statusCode__Ub40l";
-var content = "uzi-error-page-module__content__b2dAY";
-var title = "uzi-error-page-module__title__8iioy";
-var subtitle = "uzi-error-page-module__subtitle__NVk-v";
-var action = "uzi-error-page-module__action__iX5fQ";
-var error_page_module_default = {
-	layout,
-	card,
-	icon,
-	iconSvg,
-	statusCode,
-	content,
+//#region src/components/settings-page/settings-page.module.css
+var wrapper = "uzi-settings-page-module__wrapper__G7OOt";
+var header = "uzi-settings-page-module__header__ao-nv";
+var headerContent = "uzi-settings-page-module__headerContent__xwP9V";
+var title = "uzi-settings-page-module__title__anF9l";
+var description = "uzi-settings-page-module__description__Qw6EQ";
+var content = "uzi-settings-page-module__content__MBz6q";
+var sections = "uzi-settings-page-module__sections__HV2n4";
+var section = "uzi-settings-page-module__section__Vjoe3";
+var sectionHeader = "uzi-settings-page-module__sectionHeader__XiOWN";
+var sectionTitle = "uzi-settings-page-module__sectionTitle__bN5lO";
+var sectionDescription = "uzi-settings-page-module__sectionDescription__3wjhy";
+var sectionBody = "uzi-settings-page-module__sectionBody__zraHK";
+var dangerZone = "uzi-settings-page-module__dangerZone__GD8XX";
+var dangerZoneHeader = "uzi-settings-page-module__dangerZoneHeader__2d3R1";
+var dangerZoneTitle = "uzi-settings-page-module__dangerZoneTitle__ljU2k";
+var dangerZoneDescription = "uzi-settings-page-module__dangerZoneDescription__Z3Ohe";
+var dangerZoneBody = "uzi-settings-page-module__dangerZoneBody__zAQbu";
+var footer = "uzi-settings-page-module__footer__dO4Xo";
+var footerContent = "uzi-settings-page-module__footerContent__pPOdb";
+var savingIndicator = "uzi-settings-page-module__savingIndicator__ujaC5";
+var settings_page_module_default = {
+	wrapper,
+	header,
+	headerContent,
 	title,
-	subtitle,
-	action
+	description,
+	content,
+	sections,
+	section,
+	sectionHeader,
+	sectionTitle,
+	sectionDescription,
+	sectionBody,
+	dangerZone,
+	dangerZoneHeader,
+	dangerZoneTitle,
+	dangerZoneDescription,
+	dangerZoneBody,
+	footer,
+	footerContent,
+	savingIndicator
 };
 //#endregion
-exports.action = action;
-exports.card = card;
 exports.content = content;
-exports.default = error_page_module_default;
-exports.icon = icon;
-exports.iconSvg = iconSvg;
-exports.layout = layout;
-exports.statusCode = statusCode;
-exports.subtitle = subtitle;
+exports.dangerZone = dangerZone;
+exports.dangerZoneBody = dangerZoneBody;
+exports.dangerZoneDescription = dangerZoneDescription;
+exports.dangerZoneHeader = dangerZoneHeader;
+exports.dangerZoneTitle = dangerZoneTitle;
+exports.default = settings_page_module_default;
+exports.description = description;
+exports.footer = footer;
+exports.footerContent = footerContent;
+exports.header = header;
+exports.headerContent = headerContent;
+exports.savingIndicator = savingIndicator;
+exports.section = section;
+exports.sectionBody = sectionBody;
+exports.sectionDescription = sectionDescription;
+exports.sectionHeader = sectionHeader;
+exports.sectionTitle = sectionTitle;
+exports.sections = sections;
 exports.title = title;
+exports.wrapper = wrapper;
 
 //# sourceMappingURL=index72.cjs.map

package/dist/index72.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index72.cjs","names":[],"sources":["../src/components/error-page/error-page.module.css"],"sourcesContent":[".layout {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 100vh;\n  min-height: 100dvh;\n  padding: 24px;\n  background: var(--background);\n}\n\n.card {\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1.5rem;\n  max-width: 40rem;\n  padding: 3rem 2rem;\n}\n\n.icon {\n  color: var(--muted-foreground);\n}\n\n.iconSvg {\n  width: 4rem;\n  height: 4rem;\n  stroke-width: 1.5;\n}\n\n.statusCode {\n  font-size: 6rem;\n  font-weight: 700;\n  line-height: 1;\n  color: var(--muted-foreground);\n  letter-spacing: -0.04em;\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1rem;\n}\n\n.title {\n  margin: 0;\n  font-size: 1.5rem;\n  font-weight: 600;\n  color: var(--foreground);\n  line-height: 1.3;\n}\n\n.subtitle {\n  margin: 0;\n  font-size: 1rem;\n  color: var(--muted-foreground);\n  line-height: 1.6;\n  max-width: 32rem;\n}\n\n.action {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: 0.75rem;\n  margin-top: 0.5rem;\n}\n\n@media (max-width: 48rem) {\n  .statusCode {\n    font-size: 4rem;\n  }\n\n  .title {\n    font-size: 1.25rem;\n  }\n\n  .card {\n    padding: 2rem 1.5rem;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"index72.cjs","names":[],"sources":["../src/components/settings-page/settings-page.module.css"],"sourcesContent":[".wrapper {\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n  background: var(--background);\n  color: var(--foreground);\n}\n\n.header {\n  padding: 2rem 2rem 0;\n  flex-shrink: 0;\n}\n\n.headerContent {\n  max-width: 64rem;\n  margin: 0 auto;\n}\n\n.title {\n  margin: 0 0 0.25rem;\n  font-size: 1.5rem;\n  font-weight: 600;\n  color: var(--foreground);\n  line-height: 1.3;\n}\n\n.description {\n  margin: 0;\n  font-size: 0.9rem;\n  color: var(--muted-foreground);\n  line-height: 1.5;\n}\n\n.content {\n  flex: 1;\n  padding: 1.5rem 2rem 6rem;\n  max-width: 64rem;\n  margin: 0 auto;\n  width: 100%;\n  overflow-y: auto;\n}\n\n.sections {\n  display: flex;\n  flex-direction: column;\n  gap: 2rem;\n}\n\n.section {\n  border-bottom: 1px solid var(--border);\n  padding-bottom: 1.5rem;\n}\n\n.section:last-of-type {\n  border-bottom: none;\n}\n\n.sectionHeader {\n  margin-bottom: 1.25rem;\n}\n\n.sectionTitle {\n  margin: 0 0 0.25rem;\n  font-size: 1.125rem;\n  font-weight: 600;\n  color: var(--foreground);\n}\n\n.sectionDescription {\n  margin: 0;\n  font-size: 0.85rem;\n  color: var(--muted-foreground);\n  line-height: 1.5;\n}\n\n.sectionBody {\n  display: flex;\n  flex-direction: column;\n  gap: 1.25rem;\n}\n\n.dangerZone {\n  margin-top: 2rem;\n  border: 1px solid var(--ts-danger-border, var(--destructive));\n  border-radius: 8px;\n  background: var(--ts-danger-bg, color-mix(in srgb, var(--destructive) 8%, transparent));\n  padding: 1.5rem;\n}\n\n.dangerZoneHeader {\n  margin-bottom: 1rem;\n}\n\n.dangerZoneTitle {\n  margin: 0 0 0.25rem;\n  font-size: 1rem;\n  font-weight: 600;\n  color: var(--ts-danger-text, var(--destructive));\n}\n\n.dangerZoneDescription {\n  margin: 0;\n  font-size: 0.85rem;\n  color: var(--muted-foreground);\n  line-height: 1.5;\n}\n\n.dangerZoneBody {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.footer {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  border-top: 1px solid var(--border);\n  background: var(--background);\n  z-index: 10;\n  padding: 0.75rem 2rem;\n}\n\n.footerContent {\n  max-width: 64rem;\n  margin: 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n}\n\n.savingIndicator {\n  font-size: 0.85rem;\n  color: var(--muted-foreground);\n}\n\n@media (max-width: 48rem) {\n  .header {\n    padding: 1.5rem 1rem 0;\n  }\n\n  .content {\n    padding: 1rem 1rem 6rem;\n  }\n\n  .footer {\n    padding: 0.75rem 1rem;\n  }\n\n  .footerContent {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0.5rem;\n  }\n}\n"],"mappings":""}