@hyperpackai/hyperui 0.1.0 → 0.3.0

package/dist/components/DashboardLayout/index.js

@@ -4,11 +4,20 @@ const DASHBOARD_LAYOUT_CSS = `
   min-height: 100dvh; display: grid; color: var(--hu-text); background: var(--hu-bg-2);
   grid-template-areas:
     "sidebar header"
-    "sidebar main";
+    "sidebar main"
+    "sidebar footer";
   grid-template-columns: var(--hu-dashboard-sidebar, 280px) minmax(0, 1fr);
-  grid-template-rows: auto minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr) auto;
 }
 .hu-dashboard-layout--collapsed { grid-template-columns: var(--hu-dashboard-sidebar-collapsed, 72px) minmax(0, 1fr); }
+.hu-dashboard-layout__skip {
+  position: fixed; inset-inline-start: var(--hu-space-3); inset-block-start: var(--hu-space-3);
+  z-index: calc(var(--hu-z-toast) + 1); transform: translateY(-150%);
+  padding: var(--hu-space-2) var(--hu-space-3); border-radius: var(--hu-radius);
+  background: var(--hu-primary); color: var(--hu-primary-text); text-decoration: none;
+  font-weight: var(--hu-font-weight-semibold);
+}
+.hu-dashboard-layout__skip:focus { transform: translateY(0); outline: 2px solid var(--hu-primary-text); outline-offset: 2px; }
 .hu-dashboard-layout__header {
   grid-area: header; min-width: 0; position: sticky; inset-block-start: 0;
   z-index: var(--hu-z-sticky); background: var(--hu-bg);
@@ -26,10 +35,15 @@ const DASHBOARD_LAYOUT_CSS = `
   border-inline-start: 1px solid var(--hu-border); background: var(--hu-bg);
   min-width: 0; overflow: auto;
 }
+.hu-dashboard-layout__footer {
+  grid-area: footer; min-width: 0; background: var(--hu-bg);
+  border-block-start: 1px solid var(--hu-border);
+}
 .hu-dashboard-layout--with-aside {
   grid-template-areas:
     "sidebar header header"
-    "sidebar main aside";
+    "sidebar main aside"
+    "sidebar footer aside";
   grid-template-columns: var(--hu-dashboard-sidebar, 280px) minmax(0, 1fr) var(--hu-dashboard-aside, 320px);
 }
 @media (max-width: 768px) {
@@ -37,9 +51,10 @@ const DASHBOARD_LAYOUT_CSS = `
   .hu-dashboard-layout--with-aside {
     grid-template-areas:
       "header"
-      "main";
+      "main"
+      "footer";
     grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: auto minmax(0, 1fr);
+    grid-template-rows: auto minmax(0, 1fr) auto;
   }
   .hu-dashboard-layout__sidebar,
   .hu-dashboard-layout__aside { display: none; }
@@ -60,8 +75,36 @@ export function DashboardLayout(props) {
         styles.push(`--hu-dashboard-aside:${toCssUnit(props.asideWidth)}`);
     if (props.padding !== undefined)
         styles.push(`--hu-dashboard-padding:${toCssUnit(props.padding)}`);
+    if (props.style)
+        styles.push(props.style);
+    const mainId = props.skipLinkTarget?.replace(/^#/, "") ?? (props.id ? `${props.id}-main` : "hu-dashboard-main");
     return h("div", {
+        id: props.id,
         class: cn("hu-dashboard-layout", props.collapsed && "hu-dashboard-layout--collapsed", props.aside != null && "hu-dashboard-layout--with-aside", props.class),
-        style: styles.join(";") || undefined
-    }, props.header && h("header", { class: "hu-dashboard-layout__header" }, props.header), props.sidebar && h("aside", { class: "hu-dashboard-layout__sidebar", "aria-label": "Primary navigation" }, props.sidebar), h("main", { class: "hu-dashboard-layout__main" }, props.children), props.aside && h("aside", { class: "hu-dashboard-layout__aside", "aria-label": "Secondary panel" }, props.aside));
+        style: styles.join(";") || undefined,
+        "data-testid": props.testId
+    }, props.skipLinkLabel !== null && h("a", {
+        class: "hu-dashboard-layout__skip",
+        href: `#${mainId}`
+    }, props.skipLinkLabel ?? "Skip to main content"), props.header && h("header", {
+        class: "hu-dashboard-layout__header",
+        "aria-label": props.headerLabel
+    }, props.header), props.sidebar && h("aside", {
+        class: "hu-dashboard-layout__sidebar",
+        "aria-label": props.sidebarLabel ?? "Primary navigation"
+    }, props.sidebar), h("main", {
+        id: mainId,
+        class: "hu-dashboard-layout__main",
+        tabindex: "-1",
+        "aria-label": props.mainLabel
+    }, props.children), props.aside && h("aside", {
+        class: "hu-dashboard-layout__aside",
+        "aria-label": props.asideLabel ?? "Secondary panel"
+    }, props.aside), props.footer && h("footer", {
+        class: "hu-dashboard-layout__footer",
+        "aria-label": props.footerLabel
+    }, props.footer));
+}
+export function AppShell(props) {
+    return DashboardLayout(props);
 }

package/dist/components/DataTable/index.d.ts

@@ -2,26 +2,69 @@ import { type VNode } from "../../theme/index.js";
 export interface TableColumn<T> {
     key: string;
     header: string;
+    id?: string;
     width?: string;
     sortable?: boolean;
     render?: (row: T, i: number) => unknown;
     align?: "left" | "center" | "right";
+    headerLabel?: string;
+    cellLabel?: (row: T, i: number) => string;
 }
+export interface DataTableSortEvent {
+    key: string;
+    direction: "asc" | "desc";
+}
+export interface DataTableRowEvent<T> {
+    row: T;
+    key: string;
+    index: number;
+}
+export interface DataTableSelectionEvent<T> {
+    row: T;
+    key: string;
+    selected: boolean;
+}
+export interface DataTableSelectAllEvent<T> {
+    selected: boolean;
+    keys: string[];
+    rows: T[];
+}
+export type DataTableDensity = "compact" | "default" | "comfortable";
 export interface DataTableProps<T extends Record<string, unknown>> {
+    id?: string;
     columns: TableColumn<T>[];
     rows: T[];
     rowKey?: (row: T) => string;
+    caption?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    density?: DataTableDensity;
+    stickyHeader?: boolean;
+    maxHeight?: string | number;
     sortColumn?: string;
     sortDir?: "asc" | "desc";
     onSort?: (key: string) => void;
+    onSortChange?: (event: DataTableSortEvent) => void;
     onRowClick?: (row: T) => void;
+    onRowAction?: (event: DataTableRowEvent<T>) => void;
+    isRowDisabled?: (row: T, index: number) => boolean;
+    getRowLabel?: (row: T, index: number) => string;
     emptyMessage?: string;
+    emptyState?: unknown;
+    loading?: boolean;
+    loadingState?: unknown;
+    error?: unknown;
+    errorState?: unknown;
     footer?: unknown;
     selectable?: boolean;
     selectedRows?: Set<string>;
     onSelectRow?: (key: string, selected: boolean) => void;
+    onSelectionChange?: (event: DataTableSelectionEvent<T>) => void;
     onSelectAll?: (selected: boolean) => void;
+    onSelectAllChange?: (event: DataTableSelectAllEvent<T>) => void;
     class?: string;
+    style?: string;
+    testId?: string;
 }
 export declare function DataTable<T extends Record<string, unknown>>(props: DataTableProps<T>): VNode;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/DataTable/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AA8BpE,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC/D,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvD,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,KAAK,CAkE5F"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/index.ts"],"names":[],"mappings":"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"}

package/dist/components/DataTable/index.js

@@ -5,7 +5,13 @@ const TABLE_CSS = `
   border: 1px solid color-mix(in srgb, var(--hu-border) 82%, transparent);
   background: var(--hu-bg); box-shadow: var(--hu-shadow-sm);
 }
+.hu-table-wrap--sticky { max-height: var(--hu-table-max-height, 560px); }
 .hu-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--hu-font-size-sm); min-width: 560px; }
+.hu-table-caption {
+  caption-side: top; text-align: left; padding: var(--hu-space-3) var(--hu-space-4);
+  font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-semibold); color: var(--hu-text);
+  background: var(--hu-bg); border-bottom: 1px solid var(--hu-border);
+}
 .hu-table th {
   padding: 10px 16px; text-align: left; font-size: 11px; font-weight: var(--hu-font-weight-semibold);
   color: var(--hu-text-3); text-transform: uppercase; letter-spacing: .05em;
@@ -13,47 +19,146 @@ const TABLE_CSS = `
   border-bottom: 1px solid var(--hu-border);
   white-space: nowrap;
 }
+.hu-table--sticky-header thead th { position: sticky; top: 0; z-index: 1; }
 .hu-table th.hu-table-sortable { cursor: pointer; user-select: none; }
 .hu-table th.hu-table-sortable:hover { background: var(--hu-bg-3); color: var(--hu-text); }
+.hu-table th.hu-table-sortable:focus-visible, .hu-table tbody tr[tabindex]:focus-visible { outline: 2px solid var(--hu-primary); outline-offset: -2px; }
 .hu-table-sort-icon { display: inline-flex; align-items: center; margin-left: 4px; opacity: .4; vertical-align: middle; }
 .hu-table-sort-icon--asc, .hu-table-sort-icon--desc { opacity: 1; color: var(--hu-primary); }
 .hu-table td { padding: 12px 16px; border-bottom: 1px solid var(--hu-border); color: var(--hu-text); vertical-align: middle; background: var(--hu-bg); }
 .hu-table tr:last-child td { border-bottom: none; }
 .hu-table tbody tr { transition: background var(--hu-duration) var(--hu-ease); }
 .hu-table tbody tr:hover td { background: color-mix(in srgb, var(--hu-primary-bg) 28%, var(--hu-bg-2)); }
+.hu-table tbody tr[aria-selected="true"] td { background: color-mix(in srgb, var(--hu-primary-bg) 45%, var(--hu-bg)); }
+.hu-table tbody tr[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
+.hu-table tbody tr[aria-disabled="true"]:hover td { background: var(--hu-bg); }
 .hu-table-empty { text-align: center; padding: var(--hu-space-12) var(--hu-space-6); color: var(--hu-text-3); }
 .hu-table-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--hu-space-3); flex-wrap: wrap; padding: var(--hu-space-3) var(--hu-space-4); border-top: 1px solid var(--hu-border); background: var(--hu-bg-2); font-size: var(--hu-font-size-xs); color: var(--hu-text-3); }
 .hu-table-checkbox-col { width: 40px; padding-left: 16px !important; }
 .hu-table input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--hu-primary); }
+.hu-table--compact th { padding: 7px 12px; }
+.hu-table--compact td { padding: 8px 12px; }
+.hu-table--comfortable th { padding: 13px 18px; }
+.hu-table--comfortable td { padding: 16px 18px; }
 `;
+function toCssUnit(value) {
+    return typeof value === "number" ? `${value}px` : value;
+}
 export function DataTable(props) {
     injectCSS("hu-table", TABLE_CSS);
-    const { columns, rows, rowKey, sortColumn, sortDir, onSort, onRowClick, emptyMessage = "No data available.", footer, selectable, selectedRows, onSelectRow, onSelectAll } = props;
-    const sortSVG = (dir) => dir === "asc"
-        ? `<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor"><path d="M6 3l4 5H2l4-5z"/></svg>`
+    const { columns, rows, rowKey, sortColumn, sortDir, onSort, onRowClick, emptyMessage = "No data available.", emptyState, loading, loadingState, error, errorState, footer, selectable, selectedRows, onSelectRow, onSelectAll, density = "default" } = props;
+    const rowId = (row, index) => rowKey?.(row) ?? String(row["id"] ?? index);
+    const rowKeys = rows.map(rowId);
+    const stateColSpan = columns.length + (selectable ? 1 : 0);
+    const sortDirectionFor = (key) => sortColumn === key && sortDir === "asc" ? "desc" : "asc";
+    const handleSort = (key) => {
+        const direction = sortDirectionFor(key);
+        onSort?.(key);
+        props.onSortChange?.({ key, direction });
+    };
+    const handleSortKeyDown = (event, key) => {
+        if (event.key !== "Enter" && event.key !== " ")
+            return;
+        event.preventDefault();
+        handleSort(key);
+    };
+    const handleRowAction = (row, key, index) => {
+        if (props.isRowDisabled?.(row, index))
+            return;
+        onRowClick?.(row);
+        props.onRowAction?.({ row, key, index });
+    };
+    const handleRowKeyDown = (event, row, key, index) => {
+        if (event.key !== "Enter" && event.key !== " ")
+            return;
+        event.preventDefault();
+        handleRowAction(row, key, index);
+    };
+    const handleSelectAll = (selected) => {
+        onSelectAll?.(selected);
+        props.onSelectAllChange?.({ selected, keys: rowKeys, rows });
+    };
+    const handleSelectRow = (row, key, index, selected) => {
+        if (props.isRowDisabled?.(row, index))
+            return;
+        onSelectRow?.(key, selected);
+        props.onSelectionChange?.({ row, key, selected });
+    };
+    const sortIcon = (dir) => h("svg", {
+        width: "12",
+        height: "12",
+        viewBox: "0 0 12 12",
+        fill: "currentColor",
+        "aria-hidden": "true"
+    }, dir === "asc"
+        ? h("path", { d: "M6 3l4 5H2l4-5z" })
         : dir === "desc"
-            ? `<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor"><path d="M6 9L2 4h8L6 9z"/></svg>`
-            : `<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor" opacity=".4"><path d="M6 3l3 3H3l3-3zM6 9L3 6h6L6 9z"/></svg>`;
-    const allSelected = rows.length > 0 && rows.every((r) => selectedRows?.has(rowKey?.(r) ?? String(r["id"] ?? "")));
-    return h("div", { class: cn("hu-table-wrap", props.class) }, h("table", { class: "hu-table", role: "table" }, h("thead", {}, h("tr", {}, selectable && h("th", { class: "hu-table-checkbox-col" }, h("input", { type: "checkbox", checked: allSelected, onChange: (e) => onSelectAll?.(e.target.checked) })), ...columns.map((col) => h("th", {
+            ? h("path", { d: "M6 9L2 4h8L6 9z" })
+            : h("path", { d: "M6 3l3 3H3l3-3zM6 9L3 6h6L6 9z", opacity: ".4" }));
+    const allSelected = rows.length > 0 && rowKeys.every((key) => selectedRows?.has(key));
+    const wrapperStyle = [
+        props.maxHeight !== undefined && `--hu-table-max-height:${toCssUnit(props.maxHeight)}`,
+        props.style
+    ].filter(Boolean).join(";") || undefined;
+    return h("div", {
+        id: props.id,
+        class: cn("hu-table-wrap", props.stickyHeader && "hu-table-wrap--sticky", props.class),
+        style: wrapperStyle,
+        "data-testid": props.testId
+    }, h("table", {
+        class: cn("hu-table", density !== "default" && `hu-table--${density}`, props.stickyHeader && "hu-table--sticky-header"),
+        role: "table",
+        "aria-label": props["aria-label"],
+        "aria-labelledby": props["aria-labelledby"]
+    }, props.caption && h("caption", { class: "hu-table-caption" }, props.caption), h("thead", {}, h("tr", {}, selectable && h("th", { class: "hu-table-checkbox-col" }, h("input", {
+        type: "checkbox",
+        checked: allSelected,
+        "aria-label": "Select all rows",
+        "aria-checked": allSelected ? "true" : "false",
+        onChange: (e) => handleSelectAll(e.target.checked)
+    })), ...columns.map((col) => h("th", {
+        id: col.id ?? `hu-table-col-${col.key}`,
         key: col.key,
         class: col.sortable ? "hu-table-sortable" : undefined,
         style: [col.width && `width:${col.width}`, col.align && `text-align:${col.align}`].filter(Boolean).join(";"),
-        onClick: col.sortable ? () => onSort?.(col.key) : undefined
+        tabindex: col.sortable ? "0" : undefined,
+        "aria-sort": sortColumn === col.key ? (sortDir === "desc" ? "descending" : "ascending") : undefined,
+        "aria-label": col.headerLabel,
+        onClick: col.sortable ? () => handleSort(col.key) : undefined,
+        onKeyDown: col.sortable ? (event) => handleSortKeyDown(event, col.key) : undefined
     }, col.header, col.sortable && h("span", {
         class: cn("hu-table-sort-icon", sortColumn === col.key && `hu-table-sort-icon--${sortDir}`),
-        innerHTML: sortSVG(sortColumn === col.key ? sortDir ?? "" : ""),
         "aria-hidden": "true"
-    }))))), h("tbody", {}, rows.length === 0
-        ? h("tr", {}, h("td", { colspan: columns.length + (selectable ? 1 : 0), class: "hu-table-empty" }, emptyMessage))
-        : rows.map((row, i) => {
-            const key = rowKey?.(row) ?? String(row["id"] ?? i);
-            return h("tr", {
-                key, style: onRowClick ? "cursor:pointer" : undefined,
-                onClick: onRowClick ? () => onRowClick(row) : undefined
-            }, selectable && h("td", { class: "hu-table-checkbox-col" }, h("input", {
-                type: "checkbox", checked: selectedRows?.has(key) ?? false,
-                onChange: (e) => { e.stopPropagation(); onSelectRow?.(key, e.target.checked); }
-            })), ...columns.map((col) => h("td", { key: col.key, style: col.align ? `text-align:${col.align}` : undefined }, col.render ? col.render(row, i) : row[col.key])));
-        }))), footer && h("div", { class: "hu-table-footer" }, footer));
+    }, sortIcon(sortColumn === col.key ? sortDir ?? "" : "")))))), h("tbody", {}, loading
+        ? h("tr", {}, h("td", { colspan: stateColSpan, class: "hu-table-empty" }, loadingState ?? "Loading..."))
+        : error || errorState
+            ? h("tr", {}, h("td", { colspan: stateColSpan, class: "hu-table-empty", role: "alert" }, errorState ?? error))
+            : rows.length === 0
+                ? h("tr", {}, h("td", { colspan: stateColSpan, class: "hu-table-empty" }, emptyState ?? emptyMessage))
+                : rows.map((row, i) => {
+                    const key = rowId(row, i);
+                    const disabled = props.isRowDisabled?.(row, i) ?? false;
+                    const selected = selectedRows?.has(key) ?? false;
+                    const actionable = (onRowClick || props.onRowAction) && !disabled;
+                    return h("tr", {
+                        key,
+                        style: actionable ? "cursor:pointer" : undefined,
+                        tabindex: actionable ? "0" : undefined,
+                        "aria-label": props.getRowLabel?.(row, i),
+                        "aria-selected": selectable ? (selected ? "true" : "false") : undefined,
+                        "aria-disabled": disabled ? "true" : undefined,
+                        onClick: actionable ? () => handleRowAction(row, key, i) : undefined,
+                        onKeyDown: actionable ? (event) => handleRowKeyDown(event, row, key, i) : undefined
+                    }, selectable && h("td", { class: "hu-table-checkbox-col" }, h("input", {
+                        type: "checkbox", checked: selected,
+                        disabled,
+                        "aria-label": `Select row ${i + 1}`,
+                        onChange: (e) => { e.stopPropagation(); handleSelectRow(row, key, i, e.target.checked); }
+                    })), ...columns.map((col) => h("td", {
+                        key: col.key,
+                        headers: col.id ?? `hu-table-col-${col.key}`,
+                        style: col.align ? `text-align:${col.align}` : undefined,
+                        "aria-label": col.cellLabel?.(row, i)
+                    }, col.render ? col.render(row, i) : row[col.key])));
+                }))), footer && h("div", { class: "hu-table-footer" }, footer));
 }

package/dist/components/Dialog/index.d.ts

@@ -1,15 +1,21 @@
 import { type Signal } from "@hyperpackai/hyperion";
 import { type VNode } from "../../theme/index.js";
+export type DialogCloseReason = "backdrop" | "escape" | "close-button" | "programmatic";
+export type DialogCloseButtonRenderer = (close: (reason?: DialogCloseReason) => void) => unknown;
 export interface DialogProps {
-    open: boolean | Signal<boolean>;
-    onClose?: (reason?: "backdrop" | "escape" | "close-button") => void;
-    onOpenChange?: (open: boolean, reason?: "backdrop" | "escape" | "close-button") => void;
+    open?: boolean | Signal<boolean>;
+    defaultOpen?: boolean;
+    onClose?: (reason?: DialogCloseReason) => void;
+    onOpenChange?: (open: boolean, reason?: DialogCloseReason) => void;
     title?: string;
     description?: string;
+    id?: string;
     size?: "sm" | "md" | "lg" | "xl" | "full";
     closeOnBackdrop?: boolean;
     closeOnEscape?: boolean;
     showClose?: boolean;
+    closeIcon?: unknown;
+    closeButton?: unknown | DialogCloseButtonRenderer;
     footer?: unknown;
     footerAlign?: "start" | "end" | "between";
     class?: string;

package/dist/components/Dialog/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAsDpE,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,cAAc,KAAK,IAAI,CAAC;IACpE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,cAAc,KAAK,IAAI,CAAC;IACxF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,KAAK,CAiEhD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAsDpE,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG,QAAQ,GAAG,cAAc,GAAG,cAAc,CAAC;AACxF,MAAM,MAAM,yBAAyB,GAAG,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,EAAE,iBAAiB,KAAK,IAAI,KAAK,OAAO,CAAC;AAEjG,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC/C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,GAAG,yBAAyB,CAAC;IAClD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAID,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,KAAK,CA4EhD"}

package/dist/components/Dialog/index.js

@@ -1,3 +1,4 @@
+import { signal } from "@hyperpackai/hyperion";
 import { injectCSS, cn, h } from "../../theme/index.js";
 import { renderInPortal } from "../../portal.js";
 import { FocusTrap } from "../FocusTrap/index.js";
@@ -50,47 +51,62 @@ const DIALOG_CSS = `
 .hu-dialog-footer--start { justify-content: flex-start; }
 .hu-dialog-footer--between { justify-content: space-between; }
 `;
+let dialogId = 0;
 export function Dialog(props) {
     injectCSS("hu-dialog", DIALOG_CSS);
-    const { title, description, size = "md", closeOnBackdrop = true, closeOnEscape = true, showClose = true, footer, footerAlign = "end", onClose, onOpenChange, children } = props;
-    const isSignalOpen = typeof props.open === "object" && "peek" in props.open;
-    const isOpen = () => isSignalOpen
-        ? props.open.value
-        : props.open;
-    const handleKeyDown = (e) => {
-        if (closeOnEscape && e.key === "Escape") {
-            onOpenChange?.(false, "escape");
-            onClose?.("escape");
-        }
+    const { title, description, size = "md", closeOnBackdrop = true, closeOnEscape = true, showClose = true, footer, footerAlign = "end", closeIcon, closeButton, onClose, onOpenChange, children } = props;
+    const generatedId = props.id ?? `hu-dialog-${++dialogId}`;
+    const titleId = title ? `${generatedId}-title` : undefined;
+    const descriptionId = description ? `${generatedId}-description` : undefined;
+    const signalOpen = getSignalProp(props.open);
+    const internalOpen = signal(props.defaultOpen ?? false);
+    const isControlled = typeof props.open === "boolean" || !!signalOpen;
+    const isOpen = () => signalOpen ? signalOpen.value : typeof props.open === "boolean" ? props.open : internalOpen.value;
+    const close = (reason = "programmatic") => {
+        if (signalOpen)
+            signalOpen.value = false;
+        else if (!isControlled)
+            internalOpen.value = false;
+        onOpenChange?.(false, reason);
+        onClose?.(reason);
+    };
+    const defaultCloseIcon = h("svg", {
+        viewBox: "0 0 16 16",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "aria-hidden": "true"
+    }, h("path", { d: "M2 2l12 12M14 2L2 14" }));
+    const renderedCloseButton = () => {
+        if (typeof closeButton === "function")
+            return closeButton(close);
+        if (closeButton)
+            return closeButton;
+        return h("button", {
+            class: "hu-dialog-close",
+            type: "button",
+            onClick: () => close("close-button"),
+            "aria-label": "Close dialog"
+        }, closeIcon ?? defaultCloseIcon);
     };
-    const closeSVG = `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 2l12 12M14 2L2 14"/></svg>`;
     const renderDialog = () => h("div", {
         class: "hu-dialog-backdrop", role: "presentation", tabIndex: -1,
         onClick: closeOnBackdrop ? (e) => {
             if (e.target.classList.contains("hu-dialog-backdrop")) {
-                onOpenChange?.(false, "backdrop");
-                onClose?.("backdrop");
+                close("backdrop");
             }
-        } : undefined,
-        onKeyDown: handleKeyDown
-    }, FocusTrap({ active: true, restoreFocus: true, autoFocus: true, onEscape: closeOnEscape ? () => {
-            onOpenChange?.(false, "escape");
-            onClose?.("escape");
-        } : undefined, children: h("div", {
+        } : undefined
+    }, FocusTrap({ active: true, restoreFocus: true, autoFocus: true, onEscape: closeOnEscape ? () => close("escape") : undefined, children: h("div", {
             class: cn("hu-dialog", `hu-dialog--${size}`, props.class),
             role: "dialog", "aria-modal": "true",
-            "aria-labelledby": title ? "hu-dialog-title" : undefined,
-            "aria-describedby": description ? "hu-dialog-description" : undefined
-        }, (title || showClose) && h("div", { class: "hu-dialog-header" }, title && h("div", {}, h("h2", { id: "hu-dialog-title", class: "hu-dialog-title" }, title), description && h("p", { id: "hu-dialog-description", class: "hu-dialog-desc" }, description)), showClose && h("button", {
-            class: "hu-dialog-close",
-            onClick: () => {
-                onOpenChange?.(false, "close-button");
-                onClose?.("close-button");
-            },
-            "aria-label": "Close dialog", innerHTML: closeSVG
-        })), h("div", { class: "hu-dialog-body" }, children), footer && h("div", { class: cn("hu-dialog-footer", `hu-dialog-footer--${footerAlign}`) }, footer))
+            "aria-labelledby": titleId,
+            "aria-describedby": descriptionId
+        }, (title || showClose) && h("div", { class: "hu-dialog-header" }, title && h("div", {}, h("h2", { id: titleId, class: "hu-dialog-title" }, title), description && h("p", { id: descriptionId, class: "hu-dialog-desc" }, description)), showClose && renderedCloseButton()), h("div", { class: "hu-dialog-body" }, children), footer && h("div", { class: cn("hu-dialog-footer", `hu-dialog-footer--${footerAlign}`) }, footer))
     }));
-    if (!isSignalOpen)
+    if (typeof props.open === "boolean")
         return isOpen() ? renderInPortal(renderDialog(), "dialog") : h("span", { "aria-hidden": "true" });
     return (() => isOpen() ? renderInPortal(renderDialog(), "dialog") : h("span", { "aria-hidden": "true" }));
 }
+function getSignalProp(value) {
+    return typeof value === "object" && value != null && "peek" in value ? value : undefined;
+}

package/dist/components/Drawer/index.d.ts

@@ -1,15 +1,23 @@
+import { type Signal } from "@hyperpackai/hyperion";
 import { type VNode } from "../../theme/index.js";
 export type DrawerAnchor = "left" | "right" | "top" | "bottom";
 export type DrawerVariant = "temporary" | "permanent" | "persistent";
 export type DrawerSize = "sm" | "md" | "lg";
+export type DrawerCloseReason = "backdrop" | "escape" | "close-button";
+export type DrawerCloseButtonRenderer = (close: (reason?: DrawerCloseReason) => void) => unknown;
 export interface DrawerProps {
-    open: boolean;
+    open?: boolean | Signal<boolean>;
+    defaultOpen?: boolean;
     anchor?: DrawerAnchor;
     variant?: DrawerVariant;
     size?: DrawerSize;
     title?: string;
-    onClose?: (reason?: "backdrop" | "close-button") => void;
-    onOpenChange?: (open: boolean, reason?: "backdrop" | "close-button") => void;
+    closeIcon?: unknown;
+    closeButton?: unknown | DrawerCloseButtonRenderer;
+    closeOnBackdrop?: boolean;
+    closeOnEscape?: boolean;
+    onClose?: (reason?: DrawerCloseReason) => void;
+    onOpenChange?: (open: boolean, reason?: DrawerCloseReason) => void;
     class?: string;
     children?: unknown;
 }

package/dist/components/Drawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AA0DpE,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAC/D,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,WAAW,GAAG,YAAY,CAAC;AACrE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,cAAc,KAAK,IAAI,CAAC;IACzD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,UAAU,GAAG,cAAc,KAAK,IAAI,CAAC;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,KAAK,GAAG,IAAI,CA8BvD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AA2DpE,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAC/D,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,WAAW,GAAG,YAAY,CAAC;AACrE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG,QAAQ,GAAG,cAAc,CAAC;AACvE,MAAM,MAAM,yBAAyB,GAAG,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,EAAE,iBAAiB,KAAK,IAAI,KAAK,OAAO,CAAC;AAEjG,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,GAAG,yBAAyB,CAAC;IAClD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC/C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,KAAK,GAAG,IAAI,CA0EvD"}

package/dist/components/Drawer/index.js

@@ -1,5 +1,7 @@
+import { signal } from "@hyperpackai/hyperion";
 import { injectCSS, cn, h } from "../../theme/index.js";
 import { renderInPortal } from "../../portal.js";
+import { FocusTrap } from "../FocusTrap/index.js";
 const CSS = `
 .hu-drawer-root { }
 
@@ -56,22 +58,75 @@ const CSS = `
 `;
 export function Drawer(props) {
     injectCSS("hu-drawer", CSS);
-    const { open, anchor = "left", variant = "temporary", size = "md", title, onClose, onOpenChange } = props;
-    const close = (reason) => {
+    const { anchor = "left", variant = "temporary", size = "md", title, closeOnBackdrop = true, closeOnEscape = true, onClose, onOpenChange } = props;
+    const uncontrolledOpen = signal(props.defaultOpen ?? false);
+    const isSignalOpen = typeof props.open === "object" && props.open != null && "peek" in props.open;
+    const isControlled = typeof props.open === "boolean" || isSignalOpen;
+    const isOpen = () => {
+        if (typeof props.open === "boolean")
+            return props.open;
+        if (isSignalOpen)
+            return props.open.value;
+        return uncontrolledOpen.value;
+    };
+    const close = (reason = "close-button") => {
+        if (!isControlled)
+            uncontrolledOpen.value = false;
+        if (isSignalOpen)
+            props.open.value = false;
         onOpenChange?.(false, reason);
         onClose?.(reason);
     };
-    if (!open && variant === "temporary")
+    const open = isOpen();
+    if (!open && variant === "temporary" && isControlled && typeof props.open === "boolean")
         return null;
-    if (!open && variant !== "permanent")
+    if (!open && variant !== "permanent" && isControlled && typeof props.open === "boolean")
         return null;
-    const closeSVG = `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 2l12 12M14 2L2 14"/></svg>`;
-    const panel = h("div", {
+    const closeIcon = props.closeIcon ?? h("svg", {
+        viewBox: "0 0 16 16",
+        width: "16",
+        height: "16",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "aria-hidden": "true"
+    }, h("path", { d: "M2 2l12 12M14 2L2 14" }));
+    const showDefaultClose = props.closeButton === undefined && Boolean(onClose ?? onOpenChange ?? isSignalOpen ?? !isControlled);
+    const showCloseButton = props.closeButton !== null && (props.closeButton !== undefined || showDefaultClose);
+    const panel = () => h("div", {
         class: cn("hu-drawer", `hu-drawer--${anchor}`, `hu-drawer--${variant}`, size !== "md" && `hu-drawer--${size}`, props.class),
         role: "dialog",
-        "aria-modal": variant === "temporary" ? "true" : undefined
-    }, (title || onClose) && h("div", { class: "hu-drawer__header" }, title && h("span", { class: "hu-drawer__title" }, title), onClose && h("button", { class: "hu-drawer__close", onClick: () => close("close-button"), "aria-label": "Close drawer", innerHTML: closeSVG })), h("div", { class: "hu-drawer__content" }, props.children));
-    if (variant !== "temporary")
-        return panel;
-    return renderInPortal(h("div", { class: "hu-drawer-root" }, h("div", { class: "hu-drawer-backdrop", onClick: () => close("backdrop") }), panel), "drawer");
+        "aria-modal": variant === "temporary" ? "true" : undefined,
+    }, (title || showCloseButton) && h("div", { class: "hu-drawer__header" }, title && h("span", { class: "hu-drawer__title" }, title), showCloseButton && renderDrawerCloseButton(props.closeButton, close, closeIcon)), h("div", { class: "hu-drawer__content" }, props.children));
+    const renderClosed = () => null;
+    const renderDrawer = () => {
+        if (!isOpen() && variant === "temporary")
+            return renderClosed();
+        if (!isOpen() && variant !== "permanent")
+            return renderClosed();
+        if (variant !== "temporary")
+            return panel();
+        return renderInPortal(h("div", { class: "hu-drawer-root" }, h("div", { class: "hu-drawer-backdrop", onClick: closeOnBackdrop ? () => close("backdrop") : undefined }), FocusTrap({
+            active: true,
+            restoreFocus: true,
+            autoFocus: true,
+            onEscape: closeOnEscape ? () => close("escape") : undefined,
+            children: panel()
+        })), "drawer");
+    };
+    if (isControlled && typeof props.open === "boolean")
+        return renderDrawer();
+    return renderDrawer;
+}
+function renderDrawerCloseButton(closeButton, close, closeIcon) {
+    if (typeof closeButton === "function")
+        return closeButton(close);
+    if (closeButton != null)
+        return closeButton;
+    return h("button", {
+        type: "button",
+        class: "hu-drawer__close",
+        onClick: () => close("close-button"),
+        "aria-label": "Close drawer"
+    }, closeIcon);
 }