@hyperpackai/hyperui 0.1.0

package/dist/components/data.js

@@ -0,0 +1,581 @@
+/**
+ * HyperUI Data Components
+ * VirtualTable · AdvancedFilters · SearchBuilder
+ */
+import { injectCSS, cn, h } from "../theme/index.js";
+import { Button } from "./Button/index.js";
+import { Input } from "./Input/index.js";
+import { Select } from "./Select/index.js";
+const DATA_CSS = `
+.hu-virtual-table {
+  border: 1px solid var(--hu-border); border-radius: var(--hu-radius-md);
+  overflow: auto; background: var(--hu-bg); position: relative;
+}
+.hu-virtual-table__inner { position: relative; min-width: 100%; }
+.hu-virtual-table table { width: 100%; border-collapse: collapse; table-layout: fixed; }
+.hu-virtual-table thead { position: sticky; inset-block-start: 0; z-index: 1; background: var(--hu-bg-2); }
+.hu-virtual-table th {
+  padding: var(--hu-space-2) var(--hu-space-3); border-block-end: 1px solid var(--hu-border);
+  color: var(--hu-text-2); font-size: var(--hu-font-size-xs); font-weight: var(--hu-font-weight-semibold);
+  text-align: start; text-transform: uppercase; letter-spacing: .04em;
+}
+.hu-virtual-table td {
+  padding: var(--hu-space-2) var(--hu-space-3); border-block-end: 1px solid var(--hu-border);
+  color: var(--hu-text); font-size: var(--hu-font-size-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.hu-virtual-table tr:hover td { background: var(--hu-bg-2); }
+.hu-virtual-table__empty { padding: var(--hu-space-8); text-align: center; color: var(--hu-text-2); }
+
+.hu-advanced-filters {
+  display: flex; flex-direction: column; gap: var(--hu-space-3);
+  padding: var(--hu-space-4); border: 1px solid var(--hu-border);
+  border-radius: var(--hu-radius-md); background: var(--hu-bg);
+}
+.hu-advanced-filters__header { display: flex; align-items: center; justify-content: space-between; gap: var(--hu-space-3); }
+.hu-advanced-filters__title { font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-semibold); color: var(--hu-text); }
+.hu-advanced-filters__rules { display: flex; flex-direction: column; gap: var(--hu-space-2); }
+.hu-advanced-filters__rule {
+  display: grid; grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(160px, 1.2fr) auto;
+  gap: var(--hu-space-2); align-items: start;
+}
+.hu-advanced-filters__empty { font-size: var(--hu-font-size-sm); color: var(--hu-text-2); }
+
+.hu-search-builder {
+  display: flex; flex-direction: column; gap: var(--hu-space-3);
+  padding: var(--hu-space-4); border: 1px solid var(--hu-border);
+  border-radius: var(--hu-radius-md); background: var(--hu-bg);
+}
+.hu-search-builder__bar { display: flex; gap: var(--hu-space-2); align-items: flex-start; }
+.hu-search-builder__query { flex: 1; min-width: 0; }
+.hu-search-builder__chips { display: flex; flex-wrap: wrap; gap: var(--hu-space-2); }
+.hu-search-builder__chip {
+  display: inline-flex; align-items: center; gap: var(--hu-space-1);
+  padding: 4px 8px; border-radius: var(--hu-radius-full);
+  background: var(--hu-primary-bg); color: var(--hu-primary);
+  font-size: var(--hu-font-size-xs); font-weight: var(--hu-font-weight-medium);
+}
+.hu-data-grid {
+  display: flex; flex-direction: column; gap: var(--hu-space-3);
+  border: 1px solid var(--hu-border); border-radius: var(--hu-radius-md);
+  background: var(--hu-bg); padding: var(--hu-space-4);
+}
+.hu-data-grid__toolbar {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: var(--hu-space-3); flex-wrap: wrap;
+}
+.hu-data-grid__search { min-width: 220px; flex: 1; }
+.hu-data-grid__actions { display: flex; align-items: center; gap: var(--hu-space-2); flex-wrap: wrap; }
+.hu-data-grid__columns {
+  display: flex; flex-wrap: wrap; gap: var(--hu-space-2);
+  padding: var(--hu-space-3); border: 1px solid var(--hu-border);
+  border-radius: var(--hu-radius); background: var(--hu-bg-2);
+}
+.hu-data-grid__column-toggle {
+  display: inline-flex; align-items: center; gap: var(--hu-space-1);
+  font-size: var(--hu-font-size-xs); color: var(--hu-text-2);
+}
+.hu-data-grid__selection {
+  font-size: var(--hu-font-size-sm); color: var(--hu-text-2);
+}
+.hu-data-grid__footer {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: var(--hu-space-3); flex-wrap: wrap; font-size: var(--hu-font-size-sm); color: var(--hu-text-2);
+}
+.hu-data-grid__pagination { display: flex; align-items: center; gap: var(--hu-space-2); }
+.hu-data-transfer {
+  display: flex; flex-direction: column; gap: var(--hu-space-3);
+  padding: var(--hu-space-4); border: 1px solid var(--hu-border);
+  border-radius: var(--hu-radius-md); background: var(--hu-bg);
+}
+.hu-data-transfer__header {
+  display: flex; align-items: flex-start; justify-content: space-between;
+  gap: var(--hu-space-3); flex-wrap: wrap;
+}
+.hu-data-transfer__title { font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-semibold); color: var(--hu-text); }
+.hu-data-transfer__meta { font-size: var(--hu-font-size-xs); color: var(--hu-text-2); }
+.hu-data-transfer__controls {
+  display: grid; grid-template-columns: minmax(140px, .7fr) minmax(180px, 1fr) auto;
+  gap: var(--hu-space-2); align-items: end;
+}
+.hu-data-transfer__columns { display: flex; flex-wrap: wrap; gap: var(--hu-space-2); }
+.hu-data-transfer__column {
+  display: inline-flex; align-items: center; gap: var(--hu-space-1);
+  padding: 4px 8px; border: 1px solid var(--hu-border);
+  border-radius: var(--hu-radius-full); background: var(--hu-bg-2);
+  font-size: var(--hu-font-size-xs); color: var(--hu-text-2);
+}
+.hu-data-transfer__dropzone {
+  display: flex; flex-direction: column; gap: var(--hu-space-2);
+  padding: var(--hu-space-4); border: 1px dashed var(--hu-border-2);
+  border-radius: var(--hu-radius-md); background: var(--hu-bg-2);
+}
+.hu-data-transfer__file { max-width: 100%; font-size: var(--hu-font-size-sm); color: var(--hu-text); }
+.hu-data-transfer__status { font-size: var(--hu-font-size-sm); color: var(--hu-text-2); }
+.hu-data-transfer__error { font-size: var(--hu-font-size-sm); color: var(--hu-error); }
+.hu-data-transfer__preview { overflow: auto; border: 1px solid var(--hu-border); border-radius: var(--hu-radius); }
+.hu-data-transfer__preview table { width: 100%; border-collapse: collapse; table-layout: fixed; }
+.hu-data-transfer__preview th,
+.hu-data-transfer__preview td {
+  padding: var(--hu-space-2) var(--hu-space-3); border-block-end: 1px solid var(--hu-border);
+  font-size: var(--hu-font-size-xs); text-align: start; color: var(--hu-text);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.hu-data-transfer__preview th { background: var(--hu-bg-2); color: var(--hu-text-2); font-weight: var(--hu-font-weight-semibold); }
+.hu-tree-grid__toggle {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 24px; height: 24px; margin-inline-end: var(--hu-space-1);
+  border: 1px solid transparent; border-radius: var(--hu-radius);
+  background: transparent; color: var(--hu-text-2); cursor: pointer;
+}
+.hu-tree-grid__toggle:hover { background: var(--hu-bg-2); border-color: var(--hu-border); }
+.hu-tree-grid__toggle-spacer { display: inline-block; width: 24px; margin-inline-end: var(--hu-space-1); }
+.hu-tree-grid__cell-content { display: inline-flex; align-items: center; min-width: 0; }
+.hu-pivot-grid {
+  display: flex; flex-direction: column; gap: var(--hu-space-3);
+  padding: var(--hu-space-4); border: 1px solid var(--hu-border);
+  border-radius: var(--hu-radius-md); background: var(--hu-bg);
+}
+.hu-pivot-grid__header {
+  display: flex; align-items: flex-start; justify-content: space-between;
+  gap: var(--hu-space-3); flex-wrap: wrap;
+}
+.hu-pivot-grid__title { font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-semibold); color: var(--hu-text); }
+.hu-pivot-grid__meta { font-size: var(--hu-font-size-xs); color: var(--hu-text-2); }
+.hu-pivot-grid__table { overflow: auto; border: 1px solid var(--hu-border); border-radius: var(--hu-radius); }
+.hu-pivot-grid__table table { width: 100%; border-collapse: collapse; table-layout: fixed; }
+.hu-pivot-grid__table th,
+.hu-pivot-grid__table td {
+  padding: var(--hu-space-2) var(--hu-space-3); border-block-end: 1px solid var(--hu-border);
+  border-inline-end: 1px solid var(--hu-border); font-size: var(--hu-font-size-xs);
+  color: var(--hu-text); text-align: end; white-space: nowrap;
+}
+.hu-pivot-grid__table th { background: var(--hu-bg-2); color: var(--hu-text-2); font-weight: var(--hu-font-weight-semibold); text-align: start; }
+.hu-pivot-grid__total { font-weight: var(--hu-font-weight-semibold); background: var(--hu-bg-2); }
+@media (max-width: 720px) {
+  .hu-advanced-filters__rule { grid-template-columns: minmax(0, 1fr); }
+  .hu-search-builder__bar { flex-direction: column; }
+  .hu-search-builder__query { width: 100%; }
+  .hu-data-grid__toolbar { align-items: stretch; }
+  .hu-data-grid__search { min-width: 100%; }
+  .hu-data-transfer__controls { grid-template-columns: minmax(0, 1fr); }
+}
+`;
+export function VirtualTable(props) {
+    injectCSS("hu-data", DATA_CSS);
+    const rowHeight = props.rowHeight ?? 40;
+    const startIndex = Math.max(0, props.startIndex ?? 0);
+    const visibleCount = props.visibleCount ?? props.rows.length;
+    const visibleRows = props.rows.slice(startIndex, startIndex + visibleCount);
+    const totalHeight = props.rows.length * rowHeight;
+    const offset = startIndex * rowHeight;
+    return h("div", {
+        class: cn("hu-virtual-table", props.class),
+        style: props.height !== undefined ? `height:${toCssUnit(props.height)}` : undefined,
+        role: "region",
+        "aria-label": "Virtualized table"
+    }, h("div", { class: "hu-virtual-table__inner", style: `height:${totalHeight}px` }, h("table", { role: "table", "aria-rowcount": props.rows.length }, h("thead", {}, h("tr", { role: "row" }, ...props.columns.map((column) => h("th", {
+        key: column.key,
+        role: "columnheader",
+        style: [
+            column.width !== undefined && `width:${toCssUnit(column.width)}`,
+            column.align && `text-align:${column.align}`
+        ].filter(Boolean).join(";") || undefined
+    }, column.header)))), h("tbody", { style: `transform:translateY(${offset}px)` }, visibleRows.length === 0
+        ? h("tr", {}, h("td", { colspan: props.columns.length, class: "hu-virtual-table__empty" }, props.emptyMessage ?? "No rows."))
+        : visibleRows.map((row, localIndex) => {
+            const index = startIndex + localIndex;
+            const key = props.rowKey?.(row, index) ?? String(row["id"] ?? index);
+            return h("tr", {
+                key,
+                role: "row",
+                "aria-rowindex": index + 1,
+                style: `height:${rowHeight}px`,
+                onClick: props.onRowClick ? () => props.onRowClick?.(row, index) : undefined
+            }, ...props.columns.map((column) => h("td", {
+                key: column.key,
+                role: "cell",
+                style: column.align ? `text-align:${column.align}` : undefined
+            }, column.render ? column.render(row, index) : row[column.key])));
+        })))));
+}
+const FILTER_OPERATORS = [
+    { value: "equals", label: "Equals" },
+    { value: "notEquals", label: "Does not equal" },
+    { value: "contains", label: "Contains" },
+    { value: "startsWith", label: "Starts with" },
+    { value: "endsWith", label: "Ends with" },
+    { value: "greaterThan", label: "Greater than" },
+    { value: "lessThan", label: "Less than" },
+    { value: "between", label: "Between" },
+    { value: "isEmpty", label: "Is empty" },
+    { value: "isNotEmpty", label: "Is not empty" }
+];
+export function AdvancedFilters(props) {
+    injectCSS("hu-data", DATA_CSS);
+    const fieldOptions = props.fields.map((field) => ({ value: field.key, label: field.label }));
+    const operatorOptions = FILTER_OPERATORS.map((operator) => ({ value: operator.value, label: operator.label }));
+    return h("section", { class: cn("hu-advanced-filters", props.class), "aria-label": props.title ?? "Advanced filters" }, h("div", { class: "hu-advanced-filters__header" }, h("div", { class: "hu-advanced-filters__title" }, props.title ?? "Advanced filters"), Button({ type: "button", variant: "secondary", size: "sm", children: "Add filter", onClick: props.onAddRule })), h("div", { class: "hu-advanced-filters__rules" }, (props.rules?.length ?? 0) === 0
+        ? h("div", { class: "hu-advanced-filters__empty" }, "No filters applied.")
+        : props.rules.map((rule) => h("div", { key: rule.id, class: "hu-advanced-filters__rule", role: "group", "aria-label": `Filter ${rule.id}` }, Select({
+            label: "Field",
+            value: rule.field,
+            options: fieldOptions,
+            onChange: (e) => props.onRuleChange?.({ ...rule, field: e.target.value })
+        }), Select({
+            label: "Operator",
+            value: rule.operator,
+            options: operatorOptions,
+            onChange: (e) => props.onRuleChange?.({ ...rule, operator: e.target.value })
+        }), Input({
+            value: rule.value ?? "",
+            placeholder: "Value",
+            onInput: (e) => props.onRuleChange?.({ ...rule, value: e.target.value })
+        }), Button({ type: "button", variant: "ghost", size: "sm", children: "Remove", onClick: () => props.onRemoveRule?.(rule.id) })))));
+}
+export function SearchBuilder(props) {
+    injectCSS("hu-data", DATA_CSS);
+    const tokens = props.tokens ?? [];
+    const query = props.query ?? "";
+    return h("section", { class: cn("hu-search-builder", props.class), "aria-label": "Search builder" }, h("div", { class: "hu-search-builder__bar", role: "search" }, h("div", { class: "hu-search-builder__query" }, Input({
+        value: query,
+        placeholder: props.placeholder ?? "Search…",
+        onInput: (e) => props.onQueryChange?.(e.target.value)
+    })), Button({ type: "button", children: "Search", onClick: () => props.onSearch?.(query, tokens) })), tokens.length > 0 && h("div", { class: "hu-search-builder__chips", "aria-label": "Search tokens" }, ...tokens.map((token) => h("span", { key: token.key, class: "hu-search-builder__chip" }, `${token.label}: ${token.value}`, h("button", {
+        type: "button",
+        "aria-label": `Remove ${token.label}`,
+        onClick: () => props.onRemoveToken?.(token.key)
+    }, "×")))));
+}
+export function DataGrid(props) {
+    injectCSS("hu-data", DATA_CSS);
+    const page = props.page ?? 1;
+    const pageSize = props.pageSize ?? (props.rows.length || 1);
+    const totalRows = props.totalRows ?? props.rows.length;
+    const totalPages = Math.max(1, Math.ceil(totalRows / pageSize));
+    const selected = new Set(props.selectedRows ?? []);
+    const rowKey = props.rowKey ?? ((row, index) => String(row["id"] ?? index));
+    const visibleColumns = props.columns.filter((column) => column.visible !== false);
+    const selectionColumn = props.onSelectedRowsChange
+        ? {
+            key: "__select",
+            header: "",
+            width: 44,
+            render: (row, index) => {
+                const key = rowKey(row, index);
+                const checked = selected.has(key);
+                return h("input", {
+                    type: "checkbox",
+                    checked,
+                    "aria-label": `Select row ${index + 1}`,
+                    onChange: (e) => {
+                        const next = new Set(selected);
+                        if (e.target.checked)
+                            next.add(key);
+                        else
+                            next.delete(key);
+                        props.onSelectedRowsChange?.([...next]);
+                    }
+                });
+            }
+        }
+        : undefined;
+    const tableColumns = selectionColumn ? [selectionColumn, ...visibleColumns] : visibleColumns;
+    return h("section", { class: cn("hu-data-grid", props.class), "aria-label": "Data grid" }, h("div", { class: "hu-data-grid__toolbar" }, h("div", { class: "hu-data-grid__search" }, Input({
+        value: props.query ?? "",
+        placeholder: "Search rows...",
+        onInput: (e) => props.onQueryChange?.(e.target.value)
+    })), h("div", { class: "hu-data-grid__actions" }, props.toolbarActions, props.filters && Button({ type: "button", variant: "secondary", size: "sm", children: "Add filter", onClick: props.onFilterAdd }))), props.showColumnControls && h("div", { class: "hu-data-grid__columns", "aria-label": "Column visibility" }, ...props.columns.map((column) => h("label", { class: "hu-data-grid__column-toggle" }, h("input", {
+        type: "checkbox",
+        checked: column.visible !== false,
+        onChange: (e) => props.onColumnVisibilityChange?.(column.key, e.target.checked)
+    }), column.header))), props.filters && AdvancedFilters({
+        fields: props.filterFields ?? props.columns.map((column) => ({ key: column.key, label: column.header })),
+        rules: props.filters,
+        onAddRule: props.onFilterAdd,
+        onRemoveRule: props.onFilterRemove,
+        onRuleChange: props.onFilterChange
+    }), props.selectedRows && h("div", { class: "hu-data-grid__selection", "aria-live": "polite" }, `${props.selectedRows.length} selected`), VirtualTable({
+        columns: tableColumns,
+        rows: props.rows,
+        rowKey,
+        rowHeight: props.rowHeight,
+        height: props.height,
+        startIndex: props.visibleStartIndex,
+        visibleCount: props.visibleCount,
+        onRowClick: props.onRowClick
+    }), h("div", { class: "hu-data-grid__footer" }, h("div", {}, `${totalRows} rows`), h("div", { class: "hu-data-grid__pagination", "aria-label": "Pagination" }, Button({
+        type: "button",
+        variant: "secondary",
+        size: "sm",
+        disabled: page <= 1,
+        children: "Previous",
+        onClick: () => props.onPageChange?.(page - 1)
+    }), h("span", {}, `Page ${page} of ${totalPages}`), Button({
+        type: "button",
+        variant: "secondary",
+        size: "sm",
+        disabled: page >= totalPages,
+        children: "Next",
+        onClick: () => props.onPageChange?.(page + 1)
+    }))));
+}
+export function DataExporter(props) {
+    injectCSS("hu-data", DATA_CSS);
+    const format = props.format ?? "csv";
+    const filename = props.filename ?? `export.${format}`;
+    const selectedColumns = getSelectedExportColumns(props.columns, props.selectedColumns);
+    return h("section", { class: cn("hu-data-transfer", props.class), "aria-label": props.title ?? "Data exporter" }, h("div", { class: "hu-data-transfer__header" }, h("div", {}, h("div", { class: "hu-data-transfer__title" }, props.title ?? "Export data"), h("div", { class: "hu-data-transfer__meta" }, props.description ?? `${props.rows.length} rows available`)), h("div", { class: "hu-data-transfer__meta", "aria-live": "polite" }, `${selectedColumns.length} columns selected`)), h("div", { class: "hu-data-transfer__controls" }, Select({
+        label: "Format",
+        value: format,
+        options: [
+            { label: "CSV", value: "csv" },
+            { label: "JSON", value: "json" }
+        ],
+        onChange: (e) => props.onFormatChange?.(e.target.value)
+    }), Input({
+        label: "Filename",
+        value: filename,
+        onInput: (e) => props.onFilenameChange?.(e.target.value)
+    }), Button({
+        type: "button",
+        children: "Export",
+        disabled: selectedColumns.length === 0,
+        onClick: () => props.onExport?.({
+            format,
+            filename,
+            rows: props.rows,
+            columns: selectedColumns,
+            content: serializeExport(props.rows, selectedColumns, format, props.includeHeaders !== false)
+        })
+    })), h("div", { class: "hu-data-transfer__columns", "aria-label": "Export columns" }, ...props.columns.map((column) => {
+        const checked = selectedColumns.some((selected) => selected.key === column.key);
+        return h("label", { class: "hu-data-transfer__column" }, h("input", {
+            type: "checkbox",
+            checked,
+            onChange: (e) => props.onColumnToggle?.(column.key, e.target.checked)
+        }), column.header);
+    })));
+}
+export function DataImporter(props) {
+    injectCSS("hu-data", DATA_CSS);
+    const format = props.format ?? "csv";
+    const accept = props.accept ?? (format === "csv" ? ".csv,text/csv" : ".json,application/json");
+    const previewRows = props.previewRows ?? [];
+    const columns = props.columns ?? inferImportColumns(previewRows);
+    const status = props.status ?? (props.fileName ? "ready" : "idle");
+    return h("section", { class: cn("hu-data-transfer", props.class), "aria-label": props.title ?? "Data importer" }, h("div", { class: "hu-data-transfer__header" }, h("div", {}, h("div", { class: "hu-data-transfer__title" }, props.title ?? "Import data"), h("div", { class: "hu-data-transfer__meta" }, props.description ?? "Upload a file, validate mapped columns, then import.")), h("div", { class: "hu-data-transfer__meta", "aria-live": "polite" }, `${previewRows.length} preview rows`)), h("div", { class: "hu-data-transfer__controls" }, Select({
+        label: "Format",
+        value: format,
+        options: [
+            { label: "CSV", value: "csv" },
+            { label: "JSON", value: "json" }
+        ],
+        onChange: (e) => props.onFormatChange?.(e.target.value)
+    }), h("label", { class: "hu-data-transfer__dropzone" }, h("span", { class: "hu-data-transfer__meta" }, props.fileName ?? "Choose import file"), h("input", {
+        class: "hu-data-transfer__file",
+        type: "file",
+        accept,
+        multiple: props.multiple,
+        onChange: (e) => {
+            const file = e.target.files?.[0];
+            if (file)
+                props.onFileSelect?.(file, e);
+        }
+    })), Button({
+        type: "button",
+        children: "Import",
+        disabled: previewRows.length === 0 || status === "error" || status === "parsing",
+        onClick: () => props.onImport?.(previewRows)
+    })), props.fileName && h("div", { class: "hu-data-transfer__status", role: "status" }, `${props.fileName}${props.maxFileSize ? ` · max ${formatBytes(props.maxFileSize)}` : ""}`), props.error && h("div", { class: "hu-data-transfer__error", role: "alert" }, props.error), previewRows.length > 0 && h("div", { class: "hu-data-transfer__preview", "aria-label": "Import preview" }, h("table", {}, h("thead", {}, h("tr", {}, ...columns.map((column) => h("th", { key: column.key, scope: "col" }, `${column.header}${column.required ? " *" : ""}`)))), h("tbody", {}, ...previewRows.slice(0, 5).map((row, index) => h("tr", { key: String(row["id"] ?? index) }, ...columns.map((column) => h("td", { key: column.key }, row[column.key] ?? ""))))))), props.onClear && Button({ type: "button", variant: "ghost", size: "sm", children: "Clear import", onClick: props.onClear }));
+}
+export function TreeGrid(props) {
+    injectCSS("hu-data", DATA_CSS);
+    const expanded = new Set(props.expanded ?? []);
+    const flatRows = flattenTreeGridRows(props.rows, expanded);
+    const visibleColumns = props.columns.filter((column) => column.visible !== false);
+    const firstColumn = visibleColumns[0]?.key;
+    return h("div", {
+        class: cn("hu-virtual-table hu-tree-grid", props.class),
+        style: props.height !== undefined ? `height:${toCssUnit(props.height)}` : undefined,
+        role: "region",
+        "aria-label": "Tree grid"
+    }, h("table", { role: "treegrid", "aria-rowcount": flatRows.length }, h("thead", {}, h("tr", { role: "row" }, ...visibleColumns.map((column) => h("th", {
+        key: column.key,
+        role: "columnheader",
+        style: [
+            column.width !== undefined && `width:${toCssUnit(column.width)}`,
+            column.align && `text-align:${column.align}`
+        ].filter(Boolean).join(";") || undefined
+    }, column.header)))), h("tbody", {}, flatRows.length === 0
+        ? h("tr", {}, h("td", { colspan: visibleColumns.length, class: "hu-virtual-table__empty" }, props.emptyMessage ?? "No rows."))
+        : flatRows.map(({ row, level }, index) => {
+            const hasChildren = (row.children?.length ?? 0) > 0;
+            const isExpanded = expanded.has(row.id);
+            return h("tr", {
+                key: row.id,
+                role: "row",
+                "aria-level": level,
+                "aria-expanded": hasChildren ? String(isExpanded) : undefined,
+                "aria-selected": props.selected === row.id ? "true" : undefined,
+                "aria-rowindex": index + 1,
+                style: props.rowHeight ? `height:${props.rowHeight}px` : undefined,
+                onClick: props.onRowClick ? () => props.onRowClick?.(row) : undefined
+            }, ...visibleColumns.map((column) => h("td", {
+                key: column.key,
+                role: "gridcell",
+                style: column.align ? `text-align:${column.align}` : undefined
+            }, column.key === firstColumn
+                ? h("span", {
+                    class: "hu-tree-grid__cell-content",
+                    style: `padding-inline-start:${(level - 1) * 20}px`
+                }, hasChildren
+                    ? h("button", {
+                        type: "button",
+                        class: "hu-tree-grid__toggle",
+                        "aria-label": `${isExpanded ? "Collapse" : "Expand"} ${row.id}`,
+                        "aria-expanded": String(isExpanded),
+                        disabled: row.disabled,
+                        onClick: (e) => {
+                            e.stopPropagation?.();
+                            props.onToggle?.(row.id, !isExpanded);
+                        }
+                    }, isExpanded ? "−" : "+")
+                    : h("span", { class: "hu-tree-grid__toggle-spacer", "aria-hidden": "true" }), column.render ? column.render(row.data, index) : row.data[column.key])
+                : column.render ? column.render(row.data, index) : row.data[column.key])));
+        }))));
+}
+export function PivotGrid(props) {
+    injectCSS("hu-data", DATA_CSS);
+    const aggregation = props.aggregation ?? "sum";
+    const matrix = buildPivotMatrix(props.rows, props.rowFields, props.columnField, props.valueField, aggregation);
+    return h("section", { class: cn("hu-pivot-grid", props.class), "aria-label": props.title ?? "Pivot grid" }, h("div", { class: "hu-pivot-grid__header" }, h("div", {}, h("div", { class: "hu-pivot-grid__title" }, props.title ?? "Pivot grid"), h("div", { class: "hu-pivot-grid__meta" }, `${props.rows.length} rows · ${aggregation}`)), h("div", { class: "hu-pivot-grid__meta", "aria-live": "polite" }, `${matrix.rowKeys.length} groups · ${matrix.columnKeys.length} columns`)), h("div", { class: "hu-pivot-grid__table", role: "region", "aria-label": "Pivot results" }, h("table", { role: "table" }, h("thead", {}, h("tr", { role: "row" }, h("th", { role: "columnheader", scope: "col" }, props.rowFields.map((field) => field.header).join(" / ") || "Group"), ...matrix.columnKeys.map((columnKey) => h("th", { key: columnKey, role: "columnheader", scope: "col" }, columnKey)), h("th", { role: "columnheader", scope: "col" }, "Total"))), h("tbody", {}, matrix.rowKeys.length === 0
+        ? h("tr", {}, h("td", { colspan: matrix.columnKeys.length + 2, class: "hu-virtual-table__empty" }, "No pivot data."))
+        : matrix.rowKeys.map((rowKey) => h("tr", { key: rowKey, role: "row" }, h("th", { role: "rowheader", scope: "row" }, rowKey), ...matrix.columnKeys.map((columnKey) => h("td", { key: columnKey, role: "cell" }, formatPivotValue(matrix.values.get(`${rowKey}\u0000${columnKey}`) ?? 0, props, rowKey, columnKey, aggregation))), h("td", { class: "hu-pivot-grid__total", role: "cell" }, formatPivotValue(matrix.rowTotals.get(rowKey) ?? 0, props, rowKey, "__total", aggregation))))), matrix.rowKeys.length > 0 && h("tfoot", {}, h("tr", { role: "row" }, h("th", { scope: "row" }, "Total"), ...matrix.columnKeys.map((columnKey) => h("td", { key: columnKey, class: "hu-pivot-grid__total" }, formatPivotValue(matrix.columnTotals.get(columnKey) ?? 0, props, "__total", columnKey, aggregation))), h("td", { class: "hu-pivot-grid__total" }, formatPivotValue(matrix.grandTotal, props, "__total", "__total", aggregation)))))));
+}
+function toCssUnit(value) {
+    return typeof value === "number" ? `${value}px` : value;
+}
+function getSelectedExportColumns(columns, selectedColumns) {
+    if (selectedColumns) {
+        const selected = new Set(selectedColumns);
+        return columns.filter((column) => selected.has(column.key));
+    }
+    return columns.filter((column) => column.selected !== false);
+}
+function serializeExport(rows, columns, format, includeHeaders) {
+    if (format === "json") {
+        return JSON.stringify(rows.map((row) => pickColumns(row, columns)), null, 2);
+    }
+    const body = rows.map((row) => columns.map((column) => escapeCsvValue(row[column.key])).join(","));
+    return [
+        includeHeaders && columns.map((column) => escapeCsvValue(column.header)).join(","),
+        ...body
+    ].filter(Boolean).join("\n");
+}
+function pickColumns(row, columns) {
+    return columns.reduce((record, column) => {
+        record[column.key] = row[column.key];
+        return record;
+    }, {});
+}
+function escapeCsvValue(value) {
+    const text = value == null ? "" : String(value);
+    return /[",\n\r]/.test(text) ? `"${text.replace(/"/g, "\"\"")}"` : text;
+}
+function inferImportColumns(rows) {
+    const firstRow = rows[0];
+    if (!firstRow)
+        return [];
+    return Object.keys(firstRow).map((key) => ({
+        key: key,
+        header: key
+    }));
+}
+function formatBytes(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${Math.round(bytes / 1024)} KB`;
+    return `${Math.round(bytes / (1024 * 1024))} MB`;
+}
+function flattenTreeGridRows(rows, expanded, level = 1) {
+    return rows.flatMap((row) => [
+        { row, level },
+        ...((row.children?.length ?? 0) > 0 && expanded.has(row.id)
+            ? flattenTreeGridRows(row.children ?? [], expanded, level + 1)
+            : [])
+    ]);
+}
+function buildPivotMatrix(rows, rowFields, columnField, valueField, aggregation) {
+    const buckets = new Map();
+    const rowBuckets = new Map();
+    const columnBuckets = new Map();
+    const rowKeys = [];
+    const columnKeys = [];
+    const rowSet = new Set();
+    const columnSet = new Set();
+    const allValues = [];
+    for (const row of rows) {
+        const rowKey = rowFields.map((field) => stringifyPivotValue(row[field.key])).join(" / ") || "All";
+        const columnKey = stringifyPivotValue(row[columnField.key]);
+        const value = aggregation === "count" ? 1 : Number(row[valueField.key] ?? 0);
+        const numericValue = Number.isFinite(value) ? value : 0;
+        const cellKey = `${rowKey}\u0000${columnKey}`;
+        if (!rowSet.has(rowKey)) {
+            rowSet.add(rowKey);
+            rowKeys.push(rowKey);
+        }
+        if (!columnSet.has(columnKey)) {
+            columnSet.add(columnKey);
+            columnKeys.push(columnKey);
+        }
+        pushPivotValue(buckets, cellKey, numericValue);
+        pushPivotValue(rowBuckets, rowKey, numericValue);
+        pushPivotValue(columnBuckets, columnKey, numericValue);
+        allValues.push(numericValue);
+    }
+    const values = new Map();
+    const rowTotals = new Map();
+    const columnTotals = new Map();
+    buckets.forEach((bucket, key) => values.set(key, aggregatePivotValues(bucket, aggregation)));
+    rowBuckets.forEach((bucket, key) => rowTotals.set(key, aggregatePivotValues(bucket, aggregation)));
+    columnBuckets.forEach((bucket, key) => columnTotals.set(key, aggregatePivotValues(bucket, aggregation)));
+    return {
+        rowKeys,
+        columnKeys,
+        values,
+        rowTotals,
+        columnTotals,
+        grandTotal: aggregatePivotValues(allValues, aggregation)
+    };
+}
+function pushPivotValue(map, key, value) {
+    const bucket = map.get(key);
+    if (bucket)
+        bucket.push(value);
+    else
+        map.set(key, [value]);
+}
+function aggregatePivotValues(values, aggregation) {
+    if (values.length === 0)
+        return 0;
+    switch (aggregation) {
+        case "count":
+            return values.length;
+        case "avg":
+            return values.reduce((total, value) => total + value, 0) / values.length;
+        case "min":
+            return Math.min(...values);
+        case "max":
+            return Math.max(...values);
+        case "sum":
+        default:
+            return values.reduce((total, value) => total + value, 0);
+    }
+}
+function stringifyPivotValue(value) {
+    return value == null || value === "" ? "(blank)" : String(value);
+}
+function formatPivotValue(value, props, rowKey, columnKey, aggregation) {
+    return props.formatValue?.(value, { rowKey, columnKey, aggregation }) ?? Number(value.toFixed(2));
+}

package/dist/components/date.d.ts

@@ -0,0 +1,73 @@
+/**
+ * HyperUI Date Components
+ * Calendar · DatePicker · TimePicker · DateTimePicker · DateRangePicker
+ */
+import { type VNode } from "../theme/index.js";
+export interface CalendarProps {
+    value?: string;
+    month?: string;
+    min?: string;
+    max?: string;
+    rangeStart?: string;
+    rangeEnd?: string;
+    disabledDates?: string[];
+    onChange?: (value: string) => void;
+    onMonthChange?: (month: string) => void;
+    class?: string;
+}
+export declare function Calendar(props: CalendarProps): VNode;
+export interface DatePickerProps {
+    label?: string;
+    value?: string;
+    min?: string;
+    max?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string;
+    helperText?: string;
+    id?: string;
+    name?: string;
+    class?: string;
+    onChange?: (value: string, e: Event) => void;
+}
+export declare function DatePicker(props: DatePickerProps): VNode;
+export interface TimePickerProps {
+    label?: string;
+    value?: string;
+    min?: string;
+    max?: string;
+    step?: number;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string;
+    helperText?: string;
+    id?: string;
+    name?: string;
+    class?: string;
+    onChange?: (value: string, e: Event) => void;
+}
+export declare function TimePicker(props: TimePickerProps): VNode;
+export interface DateTimePickerProps extends Omit<DatePickerProps, "onChange"> {
+    onChange?: (value: string, e: Event) => void;
+}
+export declare function DateTimePicker(props: DateTimePickerProps): VNode;
+export interface DateRangePickerProps {
+    label?: string;
+    startLabel?: string;
+    endLabel?: string;
+    start?: string;
+    end?: string;
+    min?: string;
+    max?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string;
+    id?: string;
+    class?: string;
+    onChange?: (range: {
+        start?: string;
+        end?: string;
+    }, e: Event) => void;
+}
+export declare function DateRangePicker(props: DateRangePickerProps): VNode;
+//# sourceMappingURL=date.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../src/components/date.ts"],"names":[],"mappings":"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"}