@hyperpackai/hyperui 0.2.0 → 0.3.0

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);
 }

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

@@ -11,14 +11,16 @@ export interface MenuItem {
     onClick?: () => void;
     children?: MenuItem[];
 }
+export type DropdownMenuCloseReason = "escape" | "item-select" | "programmatic" | "trigger";
 export interface DropdownMenuProps {
-    open: boolean | Signal<boolean>;
+    open?: boolean | Signal<boolean>;
+    defaultOpen?: boolean;
     items: MenuItem[];
     align?: "left" | "right";
     side?: "top" | "bottom";
     trigger?: unknown;
-    onClose?: () => void;
-    onOpenChange?: (open: boolean) => void;
+    onClose?: (reason?: DropdownMenuCloseReason) => void;
+    onOpenChange?: (open: boolean, reason?: DropdownMenuCloseReason) => void;
     class?: string;
 }
 export declare function DropdownMenu(props: DropdownMenuProps): VNode;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownMenu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAmCpE,MAAM,WAAW,QAAQ;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,OAAO,CAAC;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAChC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,KAAK,CA4C5D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownMenu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAmCpE,MAAM,WAAW,QAAQ;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,OAAO,CAAC;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;CACvB;AAED,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG,aAAa,GAAG,cAAc,GAAG,SAAS,CAAC;AAE5F,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,uBAAuB,KAAK,IAAI,CAAC;IACrD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,uBAAuB,KAAK,IAAI,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,KAAK,CAsF5D"}

package/dist/components/DropdownMenu/index.js

@@ -1,3 +1,4 @@
+import { signal } from "@hyperpackai/hyperion";
 import { injectCSS, cn, h } from "../../theme/index.js";
 const DROPDOWN_CSS = `
 .hu-dropdown { position: relative; display: inline-block; }
@@ -34,23 +35,59 @@ const DROPDOWN_CSS = `
 export function DropdownMenu(props) {
     injectCSS("hu-dropdown", DROPDOWN_CSS);
     const { items, align = "left", side = "bottom", trigger, onClose, onOpenChange } = props;
-    const isSignalOpen = typeof props.open === "object" && "peek" in props.open;
-    const isOpen = () => isSignalOpen
-        ? props.open.value
-        : props.open;
-    const close = () => {
-        onOpenChange?.(false);
-        onClose?.();
+    const internalOpen = signal(props.defaultOpen ?? false);
+    const signalOpen = getSignalProp(props.open);
+    const isControlled = typeof props.open === "boolean" || !!signalOpen;
+    const isOpen = () => signalOpen ? signalOpen.value : typeof props.open === "boolean" ? props.open : internalOpen.value;
+    const setOpen = (next, reason = "programmatic") => {
+        if (signalOpen)
+            signalOpen.value = next;
+        else if (!isControlled)
+            internalOpen.value = next;
+        onOpenChange?.(next, reason);
+        if (!next)
+            onClose?.(reason);
+    };
+    const close = (reason = "programmatic") => {
+        setOpen(false, reason);
+    };
+    const toggle = () => setOpen(!isOpen(), "trigger");
+    const handleMenuKeyDown = (e) => {
+        if (e.key === "Escape") {
+            e.preventDefault();
+            close("escape");
+            return;
+        }
+        if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key))
+            return;
+        const menu = e.currentTarget;
+        const items = Array.from(menu.querySelectorAll('[role="menuitem"]:not(:disabled)'));
+        if (!items.length)
+            return;
+        e.preventDefault();
+        const activeIndex = items.indexOf(document.activeElement);
+        const lastIndex = items.length - 1;
+        if (e.key === "Home") {
+            items[0]?.focus();
+            return;
+        }
+        if (e.key === "End") {
+            items[lastIndex]?.focus();
+            return;
+        }
+        const delta = e.key === "ArrowDown" ? 1 : -1;
+        const nextIndex = activeIndex === -1
+            ? (delta === 1 ? 0 : lastIndex)
+            : (activeIndex + delta + items.length) % items.length;
+        items[nextIndex]?.focus();
     };
     const menuClass = `hu-dropdown-menu--${side}-${align}`;
     const renderMenu = () => isOpen()
         ? h("ul", {
             class: cn("hu-dropdown-menu", menuClass),
             role: "menu",
-            onKeyDown: (e) => {
-                if (e.key === "Escape")
-                    close();
-            }
+            tabindex: "-1",
+            onKeyDown: handleMenuKeyDown
         }, ...items.map((item, i) => {
             if (item.type === "separator")
                 return h("li", { key: `sep-${i}`, class: "hu-dropdown-separator", role: "separator" });
@@ -59,9 +96,15 @@ export function DropdownMenu(props) {
             return h("li", { key: item.id ?? item.label, role: "none" }, h("button", {
                 class: cn("hu-dropdown-item", item.destructive && "hu-dropdown-item--destructive", item.disabled && "hu-dropdown-item--disabled"),
                 role: "menuitem", disabled: item.disabled,
-                onClick: () => { item.onClick?.(); close(); }
+                tabindex: "-1",
+                onClick: () => { item.onClick?.(); close("item-select"); }
             }, item.icon && h("span", { class: "hu-dropdown-item-icon", "aria-hidden": "true" }, item.icon), item.label, item.shortcut && h("span", { class: "hu-dropdown-item-shortcut" }, item.shortcut)));
         }))
         : null;
-    return h("div", { class: cn("hu-dropdown", props.class) }, trigger, typeof props.open === "boolean" ? renderMenu() : renderMenu);
+    return h("div", { class: cn("hu-dropdown", props.class) }, trigger && (isControlled
+        ? trigger
+        : h("div", { onClick: toggle, style: "display:contents;" }, trigger)), typeof props.open === "boolean" ? renderMenu() : renderMenu);
+}
+function getSignalProp(value) {
+    return typeof value === "object" && value != null && "peek" in value ? value : undefined;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FocusTrap/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAK,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAWrD,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,KAAK,CAgEtD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FocusTrap/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAK,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAWrD,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,KAAK,CAiEtD"}