@malilion/block-ui-react 0.0.0-stage → 0.2.0

package/dist/components/display/BlockTable/BlockTable.js

@@ -0,0 +1,92 @@
+import { cx } from "../../../utils/cx.js";
+import { useControllableState } from "../../../hooks/useControllableState.js";
+import BlockTable_module_default from "./BlockTable.module.js";
+import { nextSort, readField, sortRows } from "./BlockTable.utils.js";
+import { forwardRef, useId } from "react";
+import { ChevronDownIcon, ChevronUpIcon } from "@malilion/block-ui-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/display/BlockTable/BlockTable.tsx
+var ARIA_SORT = {
+	asc: "ascending",
+	desc: "descending"
+};
+function BlockTableInner({ columns, rows, getRowKey = (_row, index) => index, caption, hideCaption = false, sort, defaultSort = null, onSortChange, manualSort = false, striped = false, size = "md", stickyHeader = false, emptyState = "No data", wrapperClassName, className, ...rest }, ref) {
+	const captionId = useId();
+	const [activeSort, setSort] = useControllableState({
+		value: sort,
+		defaultValue: defaultSort,
+		onChange: onSortChange
+	});
+	const visibleRows = manualSort ? rows : sortRows(rows, columns, activeSort);
+	const hasWidths = columns.some((column) => column.width);
+	return /* @__PURE__ */ jsx("div", {
+		role: "region",
+		"aria-labelledby": captionId,
+		tabIndex: 0,
+		className: cx(BlockTable_module_default.wrapper, stickyHeader && BlockTable_module_default.sticky, wrapperClassName),
+		children: /* @__PURE__ */ jsxs("table", {
+			ref,
+			"data-size": size,
+			"data-striped": striped || void 0,
+			className: cx(BlockTable_module_default.table, className),
+			...rest,
+			children: [
+				/* @__PURE__ */ jsx("caption", {
+					id: captionId,
+					className: cx(BlockTable_module_default.caption, hideCaption && "block-visually-hidden"),
+					children: caption
+				}),
+				hasWidths ? /* @__PURE__ */ jsx("colgroup", { children: columns.map((column) => /* @__PURE__ */ jsx("col", {
+					className: column.width ? BlockTable_module_default.col : void 0,
+					style: column.width ? { "--block-table-col-width": column.width } : void 0
+				}, column.key)) }) : null,
+				/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => {
+					const direction = activeSort?.key === column.key ? activeSort.direction : void 0;
+					return /* @__PURE__ */ jsx("th", {
+						scope: "col",
+						"data-align": column.align ?? "start",
+						"aria-sort": column.sortable && direction ? ARIA_SORT[direction] : void 0,
+						className: BlockTable_module_default.headerCell,
+						children: column.sortable ? /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							className: BlockTable_module_default.sortButton,
+							"data-direction": direction,
+							onClick: () => setSort(nextSort(activeSort, column.key)),
+							children: [/* @__PURE__ */ jsx("span", { children: column.header }), /* @__PURE__ */ jsx("span", {
+								className: BlockTable_module_default.sortIcon,
+								"aria-hidden": "true",
+								children: direction === "desc" ? /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16 }) : /* @__PURE__ */ jsx(ChevronUpIcon, { size: 16 })
+							})]
+						}) : column.header
+					}, column.key);
+				}) }) }),
+				/* @__PURE__ */ jsx("tbody", { children: visibleRows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+					colSpan: columns.length,
+					className: BlockTable_module_default.empty,
+					children: emptyState
+				}) }) : visibleRows.map((row, index) => /* @__PURE__ */ jsx("tr", {
+					className: BlockTable_module_default.row,
+					children: columns.map((column) => {
+						const content = column.cell ? column.cell(row, index) : readField(row, column.key);
+						const Cell = column.rowHeader ? "th" : "td";
+						return /* @__PURE__ */ jsx(Cell, {
+							scope: column.rowHeader ? "row" : void 0,
+							"data-align": column.align ?? "start",
+							className: cx(BlockTable_module_default.cell, column.rowHeader && BlockTable_module_default.rowHeader),
+							children: content
+						}, column.key);
+					})
+				}, getRowKey(row, index))) })
+			]
+		})
+	});
+}
+/**
+* Data table with a block frame, optional sorting (click a header to cycle
+* ascending → descending → unsorted), striping and a horizontal scroll region.
+*/
+var BlockTable = forwardRef(BlockTableInner);
+//#endregion
+export { BlockTable };
+
+//# sourceMappingURL=BlockTable.js.map

package/dist/components/display/BlockTable/BlockTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTable.js","names":["styles"],"sources":["../../../../src/components/display/BlockTable/BlockTable.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronUpIcon } from \"@malilion/block-ui-icons\";\nimport {\n  forwardRef,\n  useId,\n  type CSSProperties,\n  type ForwardedRef,\n  type ReactElement,\n  type RefAttributes,\n} from \"react\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport { cx } from \"../../../utils/cx\";\nimport styles from \"./BlockTable.module.css\";\nimport type { BlockTableProps, BlockTableSort } from \"./BlockTable.types\";\nimport { nextSort, readField, sortRows } from \"./BlockTable.utils\";\n\nconst ARIA_SORT = { asc: \"ascending\", desc: \"descending\" } as const;\n\nfunction BlockTableInner<T>(\n  {\n    columns,\n    rows,\n    getRowKey = (_row, index) => index,\n    caption,\n    hideCaption = false,\n    sort,\n    defaultSort = null,\n    onSortChange,\n    manualSort = false,\n    striped = false,\n    size = \"md\",\n    stickyHeader = false,\n    emptyState = \"No data\",\n    wrapperClassName,\n    className,\n    ...rest\n  }: BlockTableProps<T>,\n  ref: ForwardedRef<HTMLTableElement>,\n) {\n  const captionId = useId();\n  const [activeSort, setSort] = useControllableState<BlockTableSort | null>({\n    value: sort,\n    defaultValue: defaultSort,\n    onChange: onSortChange,\n  });\n  const visibleRows = manualSort ? rows : sortRows(rows, columns, activeSort);\n  const hasWidths = columns.some((column) => column.width);\n\n  return (\n    <div\n      role=\"region\"\n      aria-labelledby={captionId}\n      // The wrapper scrolls horizontally on narrow screens, so keyboard users must be able to focus it.\n      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n      tabIndex={0}\n      className={cx(styles.wrapper, stickyHeader && styles.sticky, wrapperClassName)}\n    >\n      <table\n        ref={ref}\n        data-size={size}\n        data-striped={striped || undefined}\n        className={cx(styles.table, className)}\n        {...rest}\n      >\n        <caption\n          id={captionId}\n          className={cx(styles.caption, hideCaption && \"block-visually-hidden\")}\n        >\n          {caption}\n        </caption>\n        {hasWidths ? (\n          <colgroup>\n            {columns.map((column) => (\n              <col\n                key={column.key}\n                className={column.width ? styles.col : undefined}\n                style={\n                  column.width\n                    ? ({ \"--block-table-col-width\": column.width } as CSSProperties)\n                    : undefined\n                }\n              />\n            ))}\n          </colgroup>\n        ) : null}\n        <thead>\n          <tr>\n            {columns.map((column) => {\n              const direction = activeSort?.key === column.key ? activeSort.direction : undefined;\n              return (\n                <th\n                  key={column.key}\n                  scope=\"col\"\n                  data-align={column.align ?? \"start\"}\n                  aria-sort={column.sortable && direction ? ARIA_SORT[direction] : undefined}\n                  className={styles.headerCell}\n                >\n                  {column.sortable ? (\n                    <button\n                      type=\"button\"\n                      className={styles.sortButton}\n                      data-direction={direction}\n                      onClick={() => setSort(nextSort(activeSort, column.key))}\n                    >\n                      <span>{column.header}</span>\n                      <span className={styles.sortIcon} aria-hidden=\"true\">\n                        {direction === \"desc\" ? (\n                          <ChevronDownIcon size={16} />\n                        ) : (\n                          <ChevronUpIcon size={16} />\n                        )}\n                      </span>\n                    </button>\n                  ) : (\n                    column.header\n                  )}\n                </th>\n              );\n            })}\n          </tr>\n        </thead>\n        <tbody>\n          {visibleRows.length === 0 ? (\n            <tr>\n              <td colSpan={columns.length} className={styles.empty}>\n                {emptyState}\n              </td>\n            </tr>\n          ) : (\n            visibleRows.map((row, index) => (\n              <tr key={getRowKey(row, index)} className={styles.row}>\n                {columns.map((column) => {\n                  const content = column.cell\n                    ? column.cell(row, index)\n                    : readField(row, column.key);\n                  const Cell = column.rowHeader ? \"th\" : \"td\";\n                  return (\n                    <Cell\n                      key={column.key}\n                      scope={column.rowHeader ? \"row\" : undefined}\n                      data-align={column.align ?? \"start\"}\n                      className={cx(styles.cell, column.rowHeader && styles.rowHeader)}\n                    >\n                      {content}\n                    </Cell>\n                  );\n                })}\n              </tr>\n            ))\n          )}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\n/**\n * Data table with a block frame, optional sorting (click a header to cycle\n * ascending → descending → unsorted), striping and a horizontal scroll region.\n */\nexport const BlockTable = forwardRef(BlockTableInner) as <T>(\n  props: BlockTableProps<T> & RefAttributes<HTMLTableElement>,\n) => ReactElement;\n"],"mappings":";;;;;;;;AAeA,IAAM,YAAY;CAAE,KAAK;CAAa,MAAM;AAAa;AAEzD,SAAS,gBACP,EACE,SACA,MACA,aAAa,MAAM,UAAU,OAC7B,SACA,cAAc,OACd,MACA,cAAc,MACd,cACA,aAAa,OACb,UAAU,OACV,OAAO,MACP,eAAe,OACf,aAAa,WACb,kBACA,WACA,GAAG,QAEL,KACA;CACA,MAAM,YAAY,MAAM;CACxB,MAAM,CAAC,YAAY,WAAW,qBAA4C;EACxE,OAAO;EACP,cAAc;EACd,UAAU;CACZ,CAAC;CACD,MAAM,cAAc,aAAa,OAAO,SAAS,MAAM,SAAS,UAAU;CAC1E,MAAM,YAAY,QAAQ,MAAM,WAAW,OAAO,KAAK;CAEvD,OACE,oBAAC,OAAD;EACE,MAAK;EACL,mBAAiB;EAGjB,UAAU;EACV,WAAW,GAAGA,0BAAO,SAAS,gBAAgBA,0BAAO,QAAQ,gBAAgB;EAE7E,UAAA,qBAAC,SAAD;GACO;GACL,aAAW;GACX,gBAAc,WAAW,KAAA;GACzB,WAAW,GAAGA,0BAAO,OAAO,SAAS;GACrC,GAAI;GALN,UAAA;IAOE,oBAAC,WAAD;KACE,IAAI;KACJ,WAAW,GAAGA,0BAAO,SAAS,eAAe,uBAAuB;KAEnE,UAAA;IACM,CAAA;IACR,YACC,oBAAC,YAAD,EAAA,UACG,QAAQ,KAAK,WACZ,oBAAC,OAAD;KAEE,WAAW,OAAO,QAAQA,0BAAO,MAAM,KAAA;KACvC,OACE,OAAO,QACF,EAAE,2BAA2B,OAAO,MAAM,IAC3C,KAAA;IAEP,GAPM,OAAO,GAOb,CACF,EACO,CAAA,IACR;IACJ,oBAAC,SAAD,EAAA,UACE,oBAAC,MAAD,EAAA,UACG,QAAQ,KAAK,WAAW;KACvB,MAAM,YAAY,YAAY,QAAQ,OAAO,MAAM,WAAW,YAAY,KAAA;KAC1E,OACE,oBAAC,MAAD;MAEE,OAAM;MACN,cAAY,OAAO,SAAS;MAC5B,aAAW,OAAO,YAAY,YAAY,UAAU,aAAa,KAAA;MACjE,WAAWA,0BAAO;MAEjB,UAAA,OAAO,WACN,qBAAC,UAAD;OACE,MAAK;OACL,WAAWA,0BAAO;OAClB,kBAAgB;OAChB,eAAe,QAAQ,SAAS,YAAY,OAAO,GAAG,CAAC;OAJzD,UAAA,CAME,oBAAC,QAAD,EAAA,UAAO,OAAO,OAAa,CAAA,GAC3B,oBAAC,QAAD;QAAM,WAAWA,0BAAO;QAAU,eAAY;QAC3C,UAAA,cAAc,SACb,oBAAC,iBAAD,EAAiB,MAAM,GAAK,CAAA,IAE5B,oBAAC,eAAD,EAAe,MAAM,GAAK,CAAA;OAExB,CAAA,CACA;MAER,CAAA,IAAA,OAAO;KAEP,GAzBG,OAAO,GAyBV;IAER,CAAC,EACC,CAAA,EACC,CAAA;IACP,oBAAC,SAAD,EAAA,UACG,YAAY,WAAW,IACtB,oBAAC,MAAD,EAAA,UACE,oBAAC,MAAD;KAAI,SAAS,QAAQ;KAAQ,WAAWA,0BAAO;KAC5C,UAAA;IACC,CAAA,EACF,CAAA,IAEJ,YAAY,KAAK,KAAK,UACpB,oBAAC,MAAD;KAAgC,WAAWA,0BAAO;KAC/C,UAAA,QAAQ,KAAK,WAAW;MACvB,MAAM,UAAU,OAAO,OACnB,OAAO,KAAK,KAAK,KAAK,IACtB,UAAU,KAAK,OAAO,GAAG;MAC7B,MAAM,OAAO,OAAO,YAAY,OAAO;MACvC,OACE,oBAAC,MAAD;OAEE,OAAO,OAAO,YAAY,QAAQ,KAAA;OAClC,cAAY,OAAO,SAAS;OAC5B,WAAW,GAAGA,0BAAO,MAAM,OAAO,aAAaA,0BAAO,SAAS;OAE9D,UAAA;MACG,GANC,OAAO,GAMR;KAEV,CAAC;IACC,GAjBK,UAAU,KAAK,KAAK,CAiBzB,CACL,EAEE,CAAA;GACF;;CACJ,CAAA;AAET;;;;;AAMA,IAAa,aAAa,WAAW,eAAe"}

package/dist/components/display/BlockTable/BlockTable.module.js

@@ -0,0 +1,31 @@
+//#region src/components/display/BlockTable/BlockTable.module.css
+var wrapper = "block-wrapper-tQfa-";
+var table = "block-table-x1Qnx";
+var caption = "block-caption-T-Obe";
+var col = "block-col-L7kx6";
+var headerCell = "block-headerCell-LQKy8";
+var sticky = "block-sticky-M7fKZ";
+var cell = "block-cell-yLLKH";
+var rowHeader = "block-rowHeader-cYBI3";
+var row = "block-row-cNM95";
+var sortButton = "block-sortButton-Lr2ri";
+var sortIcon = "block-sortIcon-tm-Vg";
+var empty = "block-empty-B21lk";
+var BlockTable_module_default = {
+	wrapper,
+	table,
+	caption,
+	col,
+	headerCell,
+	sticky,
+	cell,
+	rowHeader,
+	row,
+	sortButton,
+	sortIcon,
+	empty
+};
+//#endregion
+export { caption, cell, col, BlockTable_module_default as default, empty, headerCell, row, rowHeader, sortButton, sortIcon, sticky, table, wrapper };
+
+//# sourceMappingURL=BlockTable.module.js.map

package/dist/components/display/BlockTable/BlockTable.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTable.module.js","names":[],"sources":["../../../../src/components/display/BlockTable/BlockTable.module.css"],"sourcesContent":[".wrapper {\n  max-width: 100%;\n  overflow-x: auto;\n  background-color: var(--block-surface);\n  border: var(--block-border-width) solid var(--block-border);\n  box-shadow: var(--block-shadow-bevel);\n  scrollbar-width: thin;\n}\n\n.wrapper:focus-visible {\n  outline: 3px solid var(--block-focus);\n  outline-offset: 2px;\n}\n\n.table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: var(--block-font-size-sm);\n  color: var(--block-text);\n  font-variant-numeric: tabular-nums;\n}\n\n.caption {\n  padding: var(--block-space-2) var(--block-space-3);\n  font-family: var(--block-font-display);\n  font-size: var(--block-font-size-md);\n  font-weight: var(--block-font-weight-bold);\n  letter-spacing: var(--block-letter-spacing-wide);\n  text-align: left;\n  text-transform: uppercase;\n  text-shadow: var(--block-shadow-text);\n  background-color: var(--block-surface-header);\n  border-bottom: var(--block-border-width-thin) solid var(--block-border);\n}\n\n.col {\n  width: var(--block-table-col-width);\n}\n\n.headerCell {\n  padding: var(--block-space-2) var(--block-space-3);\n  font-family: var(--block-font-display);\n  font-size: var(--block-font-size-xs);\n  font-weight: var(--block-font-weight-bold);\n  letter-spacing: var(--block-letter-spacing-wide);\n  text-transform: uppercase;\n  white-space: nowrap;\n  color: var(--block-text-muted);\n  background-color: var(--block-surface-alt);\n  border-bottom: var(--block-border-width) solid var(--block-border);\n}\n\n.sticky {\n  overflow: visible;\n}\n\n.sticky .headerCell {\n  position: sticky;\n  top: 0;\n  z-index: var(--block-z-sticky);\n}\n\n.cell {\n  padding: var(--block-space-2) var(--block-space-3);\n  border-bottom: var(--block-border-width-thin) solid var(--block-shadow-bevel-dark);\n  vertical-align: middle;\n}\n\n.table[data-size=\"sm\"] .headerCell,\n.table[data-size=\"sm\"] .cell {\n  padding: var(--block-space-1) var(--block-space-2);\n}\n\n.rowHeader {\n  font-weight: var(--block-font-weight-bold);\n  text-align: left;\n}\n\n.row:last-child .cell {\n  border-bottom: 0;\n}\n\n.table[data-striped] .row:nth-child(even) {\n  background-color: color-mix(in srgb, var(--block-surface-alt) 70%, transparent);\n}\n\n.row:hover {\n  background-color: var(--block-slot-hover);\n}\n\n.table [data-align=\"start\"] {\n  text-align: start;\n}\n\n.table [data-align=\"center\"] {\n  text-align: center;\n}\n\n.table [data-align=\"end\"] {\n  text-align: end;\n}\n\n.sortButton {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--block-space-1);\n  margin: calc(-1 * var(--block-space-1));\n  padding: var(--block-space-1);\n  font: inherit;\n  letter-spacing: inherit;\n  text-transform: inherit;\n  color: inherit;\n  background: none;\n  border: 0;\n  cursor: pointer;\n}\n\n.sortButton:hover,\n.sortButton[data-direction] {\n  color: var(--block-text);\n}\n\n.sortButton:focus-visible {\n  outline: 3px solid var(--block-focus);\n  outline-offset: 0;\n}\n\n.sortIcon {\n  display: inline-flex;\n  opacity: 0.35;\n}\n\n.sortButton[data-direction] .sortIcon {\n  opacity: 1;\n}\n\n.empty {\n  padding: var(--block-space-6) var(--block-space-3);\n  text-align: center;\n  color: var(--block-text-muted);\n}\n"],"mappings":""}

package/dist/components/display/BlockTable/BlockTable.types.d.ts

@@ -0,0 +1,49 @@
+import type { Key, ReactNode, TableHTMLAttributes } from "react";
+export type BlockTableSortDirection = "asc" | "desc";
+export interface BlockTableSort {
+    key: string;
+    direction: BlockTableSortDirection;
+}
+export interface BlockTableColumn<T> {
+    /** Column id; also the default property read from each row. */
+    key: string;
+    header: ReactNode;
+    /** Custom cell content. Defaults to `row[key]`. */
+    cell?: (row: T, index: number) => ReactNode;
+    /** @default "start" */
+    align?: "start" | "center" | "end";
+    /** CSS width, e.g. `"120px"` or `"20%"`. */
+    width?: string;
+    sortable?: boolean;
+    /** Value used for sorting. Defaults to `row[key]`. */
+    sortValue?: (row: T) => string | number | null | undefined;
+    /** Render this column's cells as row headers (`<th scope="row">`). */
+    rowHeader?: boolean;
+}
+export interface BlockTableProps<T> extends Omit<TableHTMLAttributes<HTMLTableElement>, "children"> {
+    columns: BlockTableColumn<T>[];
+    rows: T[];
+    /** Stable key for each row. @default the row index */
+    getRowKey?: (row: T, index: number) => Key;
+    /** Table caption — required as the table's accessible name. */
+    caption: ReactNode;
+    /** Keep the caption for screen readers only. */
+    hideCaption?: boolean;
+    /** Controlled sort; `null` means unsorted. */
+    sort?: BlockTableSort | null;
+    defaultSort?: BlockTableSort | null;
+    onSortChange?: (sort: BlockTableSort | null) => void;
+    /** Turn off built-in sorting (e.g. when rows are sorted on the server). */
+    manualSort?: boolean;
+    /** Alternate row shading. */
+    striped?: boolean;
+    /** @default "md" */
+    size?: "sm" | "md";
+    /** Keep the header visible while the page scrolls. */
+    stickyHeader?: boolean;
+    /** Shown in place of rows when `rows` is empty. @default "No data" */
+    emptyState?: ReactNode;
+    /** Class for the scroll container around the table. */
+    wrapperClassName?: string;
+}
+//# sourceMappingURL=BlockTable.types.d.ts.map

package/dist/components/display/BlockTable/BlockTable.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTable.types.d.ts","sourceRoot":"","sources":["../../../../src/components/display/BlockTable/BlockTable.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAEjE,MAAM,MAAM,uBAAuB,GAAG,KAAK,GAAG,MAAM,CAAC;AAErD,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,uBAAuB,CAAC;CACpC;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC;IACjC,+DAA+D;IAC/D,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,SAAS,CAAC;IAClB,mDAAmD;IACnD,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAC5C,uBAAuB;IACvB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3D,sEAAsE;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,IAAI,CAC9C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,UAAU,CACX;IACC,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,sDAAsD;IACtD,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,CAAC;IAC3C,+DAA+D;IAC/D,OAAO,EAAE,SAAS,CAAC;IACnB,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IACpC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD,2EAA2E;IAC3E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oBAAoB;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,sDAAsD;IACtD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sEAAsE;IACtE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,uDAAuD;IACvD,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B"}

package/dist/components/display/BlockTable/BlockTable.utils.d.ts

@@ -0,0 +1,8 @@
+import type { BlockTableColumn, BlockTableSort } from "./BlockTable.types";
+/** The property `key` of a row, when it is a renderable or sortable primitive. */
+export declare function readField(row: unknown, key: string): string | number | undefined;
+/** Returns a sorted copy of `rows` (stable; empty values last in both directions). */
+export declare function sortRows<T>(rows: T[], columns: BlockTableColumn<T>[], sort: BlockTableSort | null): T[];
+/** Clicking a header cycles: unsorted → ascending → descending → unsorted. */
+export declare function nextSort(current: BlockTableSort | null, key: string): BlockTableSort | null;
+//# sourceMappingURL=BlockTable.utils.d.ts.map

package/dist/components/display/BlockTable/BlockTable.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTable.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/display/BlockTable/BlockTable.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAI3E,kFAAkF;AAClF,wBAAgB,SAAS,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAIhF;AAaD,sFAAsF;AACtF,wBAAgB,QAAQ,CAAC,CAAC,EACxB,IAAI,EAAE,CAAC,EAAE,EACT,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,EAC9B,IAAI,EAAE,cAAc,GAAG,IAAI,GAC1B,CAAC,EAAE,CAaL;AAED,8EAA8E;AAC9E,wBAAgB,QAAQ,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,cAAc,GAAG,IAAI,CAI3F"}

package/dist/components/display/BlockTable/BlockTable.utils.js

@@ -0,0 +1,48 @@
+//#region src/components/display/BlockTable/BlockTable.utils.ts
+/** The property `key` of a row, when it is a renderable or sortable primitive. */
+function readField(row, key) {
+	if (row === null || typeof row !== "object") return void 0;
+	const value = row[key];
+	return typeof value === "string" || typeof value === "number" ? value : void 0;
+}
+var collator = new Intl.Collator(void 0, {
+	numeric: true,
+	sensitivity: "base"
+});
+function compare(a, b) {
+	if (a === null || a === void 0 || a === "") return b === null || b === void 0 || b === "" ? 0 : 1;
+	if (b === null || b === void 0 || b === "") return -1;
+	if (typeof a === "number" && typeof b === "number") return a - b;
+	return collator.compare(String(a), String(b));
+}
+/** Returns a sorted copy of `rows` (stable; empty values last in both directions). */
+function sortRows(rows, columns, sort) {
+	if (!sort) return rows;
+	const column = columns.find((candidate) => candidate.key === sort.key);
+	if (!column) return rows;
+	const value = (row) => column.sortValue ? column.sortValue(row) : readField(row, column.key);
+	const sign = sort.direction === "asc" ? 1 : -1;
+	return [...rows].sort((a, b) => {
+		const va = value(a);
+		const vb = value(b);
+		const empty = (v) => v === null || v === void 0 || v === "";
+		if (empty(va) || empty(vb)) return compare(va, vb);
+		return compare(va, vb) * sign;
+	});
+}
+/** Clicking a header cycles: unsorted → ascending → descending → unsorted. */
+function nextSort(current, key) {
+	if (current?.key !== key) return {
+		key,
+		direction: "asc"
+	};
+	if (current.direction === "asc") return {
+		key,
+		direction: "desc"
+	};
+	return null;
+}
+//#endregion
+export { nextSort, readField, sortRows };
+
+//# sourceMappingURL=BlockTable.utils.js.map

package/dist/components/display/BlockTable/BlockTable.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTable.utils.js","names":[],"sources":["../../../../src/components/display/BlockTable/BlockTable.utils.ts"],"sourcesContent":["import type { BlockTableColumn, BlockTableSort } from \"./BlockTable.types\";\n\ntype SortableValue = string | number | null | undefined;\n\n/** The property `key` of a row, when it is a renderable or sortable primitive. */\nexport function readField(row: unknown, key: string): string | number | undefined {\n  if (row === null || typeof row !== \"object\") return undefined;\n  const value = (row as Record<string, unknown>)[key];\n  return typeof value === \"string\" || typeof value === \"number\" ? value : undefined;\n}\n\nconst collator = new Intl.Collator(undefined, { numeric: true, sensitivity: \"base\" });\n\nfunction compare(a: SortableValue, b: SortableValue): number {\n  // Empty values always sort last.\n  if (a === null || a === undefined || a === \"\")\n    return b === null || b === undefined || b === \"\" ? 0 : 1;\n  if (b === null || b === undefined || b === \"\") return -1;\n  if (typeof a === \"number\" && typeof b === \"number\") return a - b;\n  return collator.compare(String(a), String(b));\n}\n\n/** Returns a sorted copy of `rows` (stable; empty values last in both directions). */\nexport function sortRows<T>(\n  rows: T[],\n  columns: BlockTableColumn<T>[],\n  sort: BlockTableSort | null,\n): T[] {\n  if (!sort) return rows;\n  const column = columns.find((candidate) => candidate.key === sort.key);\n  if (!column) return rows;\n  const value = (row: T) => (column.sortValue ? column.sortValue(row) : readField(row, column.key));\n  const sign = sort.direction === \"asc\" ? 1 : -1;\n  return [...rows].sort((a, b) => {\n    const va = value(a);\n    const vb = value(b);\n    const empty = (v: SortableValue) => v === null || v === undefined || v === \"\";\n    if (empty(va) || empty(vb)) return compare(va, vb);\n    return compare(va, vb) * sign;\n  });\n}\n\n/** Clicking a header cycles: unsorted → ascending → descending → unsorted. */\nexport function nextSort(current: BlockTableSort | null, key: string): BlockTableSort | null {\n  if (current?.key !== key) return { key, direction: \"asc\" };\n  if (current.direction === \"asc\") return { key, direction: \"desc\" };\n  return null;\n}\n"],"mappings":";;AAKA,SAAgB,UAAU,KAAc,KAA0C;CAChF,IAAI,QAAQ,QAAQ,OAAO,QAAQ,UAAU,OAAO,KAAA;CACpD,MAAM,QAAS,IAAgC;CAC/C,OAAO,OAAO,UAAU,YAAY,OAAO,UAAU,WAAW,QAAQ,KAAA;AAC1E;AAEA,IAAM,WAAW,IAAI,KAAK,SAAS,KAAA,GAAW;CAAE,SAAS;CAAM,aAAa;AAAO,CAAC;AAEpF,SAAS,QAAQ,GAAkB,GAA0B;CAE3D,IAAI,MAAM,QAAQ,MAAM,KAAA,KAAa,MAAM,IACzC,OAAO,MAAM,QAAQ,MAAM,KAAA,KAAa,MAAM,KAAK,IAAI;CACzD,IAAI,MAAM,QAAQ,MAAM,KAAA,KAAa,MAAM,IAAI,OAAO;CACtD,IAAI,OAAO,MAAM,YAAY,OAAO,MAAM,UAAU,OAAO,IAAI;CAC/D,OAAO,SAAS,QAAQ,OAAO,CAAC,GAAG,OAAO,CAAC,CAAC;AAC9C;;AAGA,SAAgB,SACd,MACA,SACA,MACK;CACL,IAAI,CAAC,MAAM,OAAO;CAClB,MAAM,SAAS,QAAQ,MAAM,cAAc,UAAU,QAAQ,KAAK,GAAG;CACrE,IAAI,CAAC,QAAQ,OAAO;CACpB,MAAM,SAAS,QAAY,OAAO,YAAY,OAAO,UAAU,GAAG,IAAI,UAAU,KAAK,OAAO,GAAG;CAC/F,MAAM,OAAO,KAAK,cAAc,QAAQ,IAAI;CAC5C,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC,MAAM,GAAG,MAAM;EAC9B,MAAM,KAAK,MAAM,CAAC;EAClB,MAAM,KAAK,MAAM,CAAC;EAClB,MAAM,SAAS,MAAqB,MAAM,QAAQ,MAAM,KAAA,KAAa,MAAM;EAC3E,IAAI,MAAM,EAAE,KAAK,MAAM,EAAE,GAAG,OAAO,QAAQ,IAAI,EAAE;EACjD,OAAO,QAAQ,IAAI,EAAE,IAAI;CAC3B,CAAC;AACH;;AAGA,SAAgB,SAAS,SAAgC,KAAoC;CAC3F,IAAI,SAAS,QAAQ,KAAK,OAAO;EAAE;EAAK,WAAW;CAAM;CACzD,IAAI,QAAQ,cAAc,OAAO,OAAO;EAAE;EAAK,WAAW;CAAO;CACjE,OAAO;AACT"}

package/dist/components/display/BlockTable/index.d.ts

@@ -0,0 +1,3 @@
+export { BlockTable } from "./BlockTable";
+export type { BlockTableColumn, BlockTableProps, BlockTableSort, BlockTableSortDirection, } from "./BlockTable.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/display/BlockTable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/display/BlockTable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EACV,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,uBAAuB,GACxB,MAAM,oBAAoB,CAAC"}

package/dist/components/display/BlockTooltip/BlockTooltip.d.ts

@@ -0,0 +1,8 @@
+import type { BlockTooltipProps } from "./BlockTooltip.types";
+/**
+ * Short hint for a focusable element, shown on hover and keyboard focus.
+ * Rendered in the provider's overlay layer, so scroll containers never clip it.
+ * Escape dismisses it; the pointer can move onto it without closing it.
+ */
+export declare const BlockTooltip: import("react").ForwardRefExoticComponent<BlockTooltipProps & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=BlockTooltip.d.ts.map

package/dist/components/display/BlockTooltip/BlockTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/display/BlockTooltip/BlockTooltip.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAK9D;;;;GAIG;AACH,eAAO,MAAM,YAAY,+GA8FvB,CAAC"}

package/dist/components/display/BlockTooltip/BlockTooltip.js

@@ -0,0 +1,83 @@
+import { cx } from "../../../utils/cx.js";
+import { usePortalContainer } from "../../../provider/context.js";
+import { useAnchoredPosition } from "../../../hooks/useAnchoredPosition.js";
+import { mergeRefs } from "../../../utils/refs.js";
+import BlockTooltip_module_default from "./BlockTooltip.module.js";
+import { cloneElement, forwardRef, useEffect, useId, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/display/BlockTooltip/BlockTooltip.tsx
+/** Grace period so the pointer can cross the gap onto the tooltip (WCAG 1.4.13 hoverable). */
+var CLOSE_DELAY = 120;
+/**
+* Short hint for a focusable element, shown on hover and keyboard focus.
+* Rendered in the provider's overlay layer, so scroll containers never clip it.
+* Escape dismisses it; the pointer can move onto it without closing it.
+*/
+var BlockTooltip = forwardRef(function BlockTooltip({ content, children, placement = "top", delay = 300, size = "md", disabled = false, className, onPointerEnter, onPointerLeave, onFocus, onBlur, ...rest }, ref) {
+	const container = usePortalContainer();
+	const tooltipId = useId();
+	const [open, setOpen] = useState(false);
+	const anchorRef = useRef(null);
+	const tooltipRef = useRef(null);
+	const timer = useRef(void 0);
+	const visible = open && !disabled;
+	const position = useAnchoredPosition(anchorRef, tooltipRef, visible, { side: placement });
+	const schedule = (next, ms) => {
+		clearTimeout(timer.current);
+		if (ms <= 0) setOpen(next);
+		else timer.current = setTimeout(() => setOpen(next), ms);
+	};
+	useEffect(() => () => clearTimeout(timer.current), []);
+	useEffect(() => {
+		if (!open) return;
+		const onKeyDown = (event) => {
+			if (event.key === "Escape") {
+				clearTimeout(timer.current);
+				setOpen(false);
+			}
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => document.removeEventListener("keydown", onKeyDown);
+	}, [open]);
+	const hasTooltip = !disabled && container !== null;
+	const describedBy = cx(children.props["aria-describedby"], hasTooltip && tooltipId) || void 0;
+	return /* @__PURE__ */ jsxs("span", {
+		ref: mergeRefs(ref, anchorRef),
+		className: cx(BlockTooltip_module_default.anchor, className),
+		onPointerEnter: (event) => {
+			schedule(true, delay);
+			onPointerEnter?.(event);
+		},
+		onPointerLeave: (event) => {
+			schedule(false, CLOSE_DELAY);
+			onPointerLeave?.(event);
+		},
+		onFocus: (event) => {
+			schedule(true, 0);
+			onFocus?.(event);
+		},
+		onBlur: (event) => {
+			schedule(false, 0);
+			onBlur?.(event);
+		},
+		...rest,
+		children: [cloneElement(children, { "aria-describedby": describedBy }), hasTooltip ? createPortal(/* @__PURE__ */ jsx("span", {
+			ref: tooltipRef,
+			id: tooltipId,
+			role: "tooltip",
+			hidden: !visible,
+			"data-placement": position?.side ?? placement,
+			"data-size": size,
+			className: BlockTooltip_module_default.tooltip,
+			style: position?.style,
+			onPointerEnter: () => schedule(true, 0),
+			onPointerLeave: () => schedule(false, CLOSE_DELAY),
+			children: content
+		}), container) : null]
+	});
+});
+//#endregion
+export { BlockTooltip };
+
+//# sourceMappingURL=BlockTooltip.js.map

package/dist/components/display/BlockTooltip/BlockTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTooltip.js","names":["styles"],"sources":["../../../../src/components/display/BlockTooltip/BlockTooltip.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type FocusEvent,\n  type PointerEvent,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useAnchoredPosition } from \"../../../hooks/useAnchoredPosition\";\nimport { usePortalContainer } from \"../../../provider/context\";\nimport { cx } from \"../../../utils/cx\";\nimport { mergeRefs } from \"../../../utils/refs\";\nimport styles from \"./BlockTooltip.module.css\";\nimport type { BlockTooltipProps } from \"./BlockTooltip.types\";\n\n/** Grace period so the pointer can cross the gap onto the tooltip (WCAG 1.4.13 hoverable). */\nconst CLOSE_DELAY = 120;\n\n/**\n * Short hint for a focusable element, shown on hover and keyboard focus.\n * Rendered in the provider's overlay layer, so scroll containers never clip it.\n * Escape dismisses it; the pointer can move onto it without closing it.\n */\nexport const BlockTooltip = forwardRef<HTMLSpanElement, BlockTooltipProps>(function BlockTooltip(\n  {\n    content,\n    children,\n    placement = \"top\",\n    delay = 300,\n    size = \"md\",\n    disabled = false,\n    className,\n    onPointerEnter,\n    onPointerLeave,\n    onFocus,\n    onBlur,\n    ...rest\n  },\n  ref,\n) {\n  const container = usePortalContainer();\n  const tooltipId = useId();\n  const [open, setOpen] = useState(false);\n  const anchorRef = useRef<HTMLSpanElement>(null);\n  const tooltipRef = useRef<HTMLSpanElement>(null);\n  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const visible = open && !disabled;\n  const position = useAnchoredPosition(anchorRef, tooltipRef, visible, { side: placement });\n\n  const schedule = (next: boolean, ms: number) => {\n    clearTimeout(timer.current);\n    if (ms <= 0) setOpen(next);\n    else timer.current = setTimeout(() => setOpen(next), ms);\n  };\n\n  useEffect(() => () => clearTimeout(timer.current), []);\n\n  useEffect(() => {\n    if (!open) return;\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        clearTimeout(timer.current);\n        setOpen(false);\n      }\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [open]);\n\n  const hasTooltip = !disabled && container !== null;\n  const describedBy = cx(children.props[\"aria-describedby\"], hasTooltip && tooltipId) || undefined;\n\n  return (\n    <span\n      ref={mergeRefs(ref, anchorRef)}\n      className={cx(styles.anchor, className)}\n      onPointerEnter={(event: PointerEvent<HTMLSpanElement>) => {\n        schedule(true, delay);\n        onPointerEnter?.(event);\n      }}\n      onPointerLeave={(event: PointerEvent<HTMLSpanElement>) => {\n        schedule(false, CLOSE_DELAY);\n        onPointerLeave?.(event);\n      }}\n      onFocus={(event: FocusEvent<HTMLSpanElement>) => {\n        schedule(true, 0);\n        onFocus?.(event);\n      }}\n      onBlur={(event: FocusEvent<HTMLSpanElement>) => {\n        schedule(false, 0);\n        onBlur?.(event);\n      }}\n      {...rest}\n    >\n      {cloneElement(children, { \"aria-describedby\": describedBy })}\n      {hasTooltip\n        ? createPortal(\n            <span\n              ref={tooltipRef}\n              id={tooltipId}\n              role=\"tooltip\"\n              hidden={!visible}\n              data-placement={position?.side ?? placement}\n              data-size={size}\n              className={styles.tooltip}\n              style={position?.style}\n              onPointerEnter={() => schedule(true, 0)}\n              onPointerLeave={() => schedule(false, CLOSE_DELAY)}\n            >\n              {content}\n            </span>,\n            container,\n          )\n        : null}\n    </span>\n  );\n});\n"],"mappings":";;;;;;;;;;AAmBA,IAAM,cAAc;;;;;;AAOpB,IAAa,eAAe,WAA+C,SAAS,aAClF,EACE,SACA,UACA,YAAY,OACZ,QAAQ,KACR,OAAO,MACP,WAAW,OACX,WACA,gBACA,gBACA,SACA,QACA,GAAG,QAEL,KACA;CACA,MAAM,YAAY,mBAAmB;CACrC,MAAM,YAAY,MAAM;CACxB,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,YAAY,OAAwB,IAAI;CAC9C,MAAM,aAAa,OAAwB,IAAI;CAC/C,MAAM,QAAQ,OAAkD,KAAA,CAAS;CAEzE,MAAM,UAAU,QAAQ,CAAC;CACzB,MAAM,WAAW,oBAAoB,WAAW,YAAY,SAAS,EAAE,MAAM,UAAU,CAAC;CAExF,MAAM,YAAY,MAAe,OAAe;EAC9C,aAAa,MAAM,OAAO;EAC1B,IAAI,MAAM,GAAG,QAAQ,IAAI;OACpB,MAAM,UAAU,iBAAiB,QAAQ,IAAI,GAAG,EAAE;CACzD;CAEA,sBAAsB,aAAa,MAAM,OAAO,GAAG,CAAC,CAAC;CAErD,gBAAgB;EACd,IAAI,CAAC,MAAM;EACX,MAAM,aAAa,UAAyB;GAC1C,IAAI,MAAM,QAAQ,UAAU;IAC1B,aAAa,MAAM,OAAO;IAC1B,QAAQ,KAAK;GACf;EACF;EACA,SAAS,iBAAiB,WAAW,SAAS;EAC9C,aAAa,SAAS,oBAAoB,WAAW,SAAS;CAChE,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,aAAa,CAAC,YAAY,cAAc;CAC9C,MAAM,cAAc,GAAG,SAAS,MAAM,qBAAqB,cAAc,SAAS,KAAK,KAAA;CAEvF,OACE,qBAAC,QAAD;EACE,KAAK,UAAU,KAAK,SAAS;EAC7B,WAAW,GAAGA,4BAAO,QAAQ,SAAS;EACtC,iBAAiB,UAAyC;GACxD,SAAS,MAAM,KAAK;GACpB,iBAAiB,KAAK;EACxB;EACA,iBAAiB,UAAyC;GACxD,SAAS,OAAO,WAAW;GAC3B,iBAAiB,KAAK;EACxB;EACA,UAAU,UAAuC;GAC/C,SAAS,MAAM,CAAC;GAChB,UAAU,KAAK;EACjB;EACA,SAAS,UAAuC;GAC9C,SAAS,OAAO,CAAC;GACjB,SAAS,KAAK;EAChB;EACA,GAAI;EAnBN,UAAA,CAqBG,aAAa,UAAU,EAAE,oBAAoB,YAAY,CAAC,GAC1D,aACG,aACE,oBAAC,QAAD;GACE,KAAK;GACL,IAAI;GACJ,MAAK;GACL,QAAQ,CAAC;GACT,kBAAgB,UAAU,QAAQ;GAClC,aAAW;GACX,WAAWA,4BAAO;GAClB,OAAO,UAAU;GACjB,sBAAsB,SAAS,MAAM,CAAC;GACtC,sBAAsB,SAAS,OAAO,WAAW;GAEhD,UAAA;EACG,CAAA,GACN,SACF,IACA,IACA;;AAEV,CAAC"}

package/dist/components/display/BlockTooltip/BlockTooltip.module.js

@@ -0,0 +1,11 @@
+//#region src/components/display/BlockTooltip/BlockTooltip.module.css
+var anchor = "block-anchor-3LOJ3";
+var tooltip = "block-tooltip-K9Jn9";
+var BlockTooltip_module_default = {
+	anchor,
+	tooltip
+};
+//#endregion
+export { anchor, BlockTooltip_module_default as default, tooltip };
+
+//# sourceMappingURL=BlockTooltip.module.js.map

package/dist/components/display/BlockTooltip/BlockTooltip.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTooltip.module.js","names":[],"sources":["../../../../src/components/display/BlockTooltip/BlockTooltip.module.css"],"sourcesContent":[".anchor {\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n.tooltip {\n  position: fixed;\n  top: var(--block-float-y, 0);\n  left: var(--block-float-x, 0);\n  z-index: var(--block-z-tooltip);\n  width: max-content;\n  max-width: min(280px, calc(100vw - var(--block-space-4)));\n  padding: var(--block-space-1) var(--block-space-2);\n  font-family: var(--block-font-body);\n  font-size: var(--block-font-size-sm);\n  font-weight: var(--block-font-weight-medium);\n  line-height: var(--block-line-height-tight);\n  text-align: left;\n  text-transform: none;\n  white-space: normal;\n  color: var(--block-text-primary);\n  background-color: var(--block-obsidian-dark);\n  border: var(--block-border-width-thin) solid var(--block-black);\n  box-shadow:\n    inset 0 0 0 2px var(--block-obsidian-light),\n    var(--block-shadow-drop);\n}\n\n.tooltip[hidden] {\n  display: none;\n}\n\n.tooltip[data-size=\"sm\"] {\n  max-width: min(200px, calc(100vw - var(--block-space-4)));\n}\n\n/* Pixel arrow, aligned with the anchor's center even when the box slides. */\n.tooltip::after {\n  content: \"\";\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  background-color: var(--block-obsidian-light);\n}\n\n.tooltip[data-placement=\"top\"]::after,\n.tooltip[data-placement=\"bottom\"]::after {\n  left: calc(var(--block-float-arrow, 50%) - 4px);\n}\n\n.tooltip[data-placement=\"left\"]::after,\n.tooltip[data-placement=\"right\"]::after {\n  top: calc(var(--block-float-arrow, 50%) - 4px);\n}\n\n.tooltip[data-placement=\"top\"]::after {\n  top: 100%;\n  clip-path: polygon(0 0, 100% 0, 50% 100%);\n}\n\n.tooltip[data-placement=\"bottom\"]::after {\n  bottom: 100%;\n  clip-path: polygon(50% 0, 100% 100%, 0 100%);\n}\n\n.tooltip[data-placement=\"left\"]::after {\n  left: 100%;\n  clip-path: polygon(0 0, 100% 50%, 0 100%);\n}\n\n.tooltip[data-placement=\"right\"]::after {\n  right: 100%;\n  clip-path: polygon(100% 0, 100% 100%, 0 50%);\n}\n"],"mappings":""}

package/dist/components/display/BlockTooltip/BlockTooltip.types.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+export declare const tooltipPlacements: readonly ["top", "bottom", "left", "right"];
+export type BlockTooltipPlacement = (typeof tooltipPlacements)[number];
+export interface BlockTooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, "content"> {
+    /** Tooltip text. Keep it short and non-interactive — links and buttons belong in a menu or modal. */
+    content: ReactNode;
+    /** A single focusable element (button, link, input). It receives `aria-describedby`. */
+    children: ReactElement<{
+        "aria-describedby"?: string;
+    }>;
+    /** Preferred side; flips to the opposite side when it would leave the viewport. @default "top" */
+    placement?: BlockTooltipPlacement;
+    /** Hover delay before opening, in ms. Focus opens immediately. @default 300 */
+    delay?: number;
+    /** `sm` wraps at 200px, `md` at 280px. @default "md" */
+    size?: "sm" | "md";
+    /** Never show the tooltip. */
+    disabled?: boolean;
+}
+//# sourceMappingURL=BlockTooltip.types.d.ts.map

package/dist/components/display/BlockTooltip/BlockTooltip.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTooltip.types.d.ts","sourceRoot":"","sources":["../../../../src/components/display/BlockTooltip/BlockTooltip.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErE,eAAO,MAAM,iBAAiB,6CAA8C,CAAC;AAE7E,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEvE,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,SAAS,CAAC;IACzF,qGAAqG;IACrG,OAAO,EAAE,SAAS,CAAC;IACnB,wFAAwF;IACxF,QAAQ,EAAE,YAAY,CAAC;QAAE,kBAAkB,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACxD,kGAAkG;IAClG,SAAS,CAAC,EAAE,qBAAqB,CAAC;IAClC,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/components/display/BlockTooltip/BlockTooltip.types.js

@@ -0,0 +1,11 @@
+//#region src/components/display/BlockTooltip/BlockTooltip.types.ts
+var tooltipPlacements = [
+	"top",
+	"bottom",
+	"left",
+	"right"
+];
+//#endregion
+export { tooltipPlacements };
+
+//# sourceMappingURL=BlockTooltip.types.js.map

package/dist/components/display/BlockTooltip/BlockTooltip.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTooltip.types.js","names":[],"sources":["../../../../src/components/display/BlockTooltip/BlockTooltip.types.ts"],"sourcesContent":["import type { HTMLAttributes, ReactElement, ReactNode } from \"react\";\n\nexport const tooltipPlacements = [\"top\", \"bottom\", \"left\", \"right\"] as const;\n\nexport type BlockTooltipPlacement = (typeof tooltipPlacements)[number];\n\nexport interface BlockTooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, \"content\"> {\n  /** Tooltip text. Keep it short and non-interactive — links and buttons belong in a menu or modal. */\n  content: ReactNode;\n  /** A single focusable element (button, link, input). It receives `aria-describedby`. */\n  children: ReactElement<{ \"aria-describedby\"?: string }>;\n  /** Preferred side; flips to the opposite side when it would leave the viewport. @default \"top\" */\n  placement?: BlockTooltipPlacement;\n  /** Hover delay before opening, in ms. Focus opens immediately. @default 300 */\n  delay?: number;\n  /** `sm` wraps at 200px, `md` at 280px. @default \"md\" */\n  size?: \"sm\" | \"md\";\n  /** Never show the tooltip. */\n  disabled?: boolean;\n}\n"],"mappings":";AAEA,IAAa,oBAAoB;CAAC;CAAO;CAAU;CAAQ;AAAO"}

package/dist/components/display/BlockTooltip/index.d.ts

@@ -0,0 +1,4 @@
+export { BlockTooltip } from "./BlockTooltip";
+export { tooltipPlacements } from "./BlockTooltip.types";
+export type { BlockTooltipPlacement, BlockTooltipProps } from "./BlockTooltip.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/display/BlockTooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/display/BlockTooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,YAAY,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC"}

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

@@ -0,0 +1,4 @@
+export * from "./BlockBadge";
+export * from "./BlockTooltip";
+export * from "./BlockTable";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC"}

package/dist/components/feedback/Alert/BlockAlert.d.ts

@@ -0,0 +1,7 @@
+import type { BlockAlertProps } from "./BlockAlert.types";
+/**
+ * Inline status message. `warning`/`error` use `role="alert"`; `success`/`info`
+ * use `role="status"` so screen readers announce them politely.
+ */
+export declare const BlockAlert: import("react").ForwardRefExoticComponent<BlockAlertProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=BlockAlert.d.ts.map

package/dist/components/feedback/Alert/BlockAlert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockAlert.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Alert/BlockAlert.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAgB,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAUxE;;;GAGG;AACH,eAAO,MAAM,UAAU,4GAgDrB,CAAC"}

package/dist/components/feedback/Alert/BlockAlert.js

@@ -0,0 +1,62 @@
+import { cx } from "../../../utils/cx.js";
+import BlockAlert_module_default from "./BlockAlert.module.js";
+import { alertMaterial } from "./BlockAlert.utils.js";
+import { forwardRef, useId } from "react";
+import { CheckIcon, CloseIcon, ErrorIcon, InfoIcon, WarningIcon } from "@malilion/block-ui-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/feedback/Alert/BlockAlert.tsx
+var defaultIcons = {
+	success: /* @__PURE__ */ jsx(CheckIcon, { size: 20 }),
+	info: /* @__PURE__ */ jsx(InfoIcon, { size: 20 }),
+	warning: /* @__PURE__ */ jsx(WarningIcon, { size: 20 }),
+	error: /* @__PURE__ */ jsx(ErrorIcon, { size: 20 })
+};
+/**
+* Inline status message. `warning`/`error` use `role="alert"`; `success`/`info`
+* use `role="status"` so screen readers announce them politely.
+*/
+var BlockAlert = forwardRef(function BlockAlert({ variant = "info", title, children, icon, onClose, closeLabel = "Dismiss", action, className, role, ...rest }, ref) {
+	const titleId = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: role ?? (variant === "warning" || variant === "error" ? "alert" : "status"),
+		"aria-labelledby": title ? titleId : void 0,
+		"data-variant": variant,
+		"data-material": alertMaterial[variant],
+		className: cx(BlockAlert_module_default.alert, className),
+		...rest,
+		children: [
+			icon !== false ? /* @__PURE__ */ jsx("span", {
+				className: BlockAlert_module_default.icon,
+				"aria-hidden": "true",
+				children: icon ?? defaultIcons[variant]
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: BlockAlert_module_default.body,
+				children: [title ? /* @__PURE__ */ jsx("p", {
+					id: titleId,
+					className: BlockAlert_module_default.title,
+					children: title
+				}) : null, children ? /* @__PURE__ */ jsx("div", {
+					className: BlockAlert_module_default.description,
+					children
+				}) : null]
+			}),
+			action ? /* @__PURE__ */ jsx("div", {
+				className: BlockAlert_module_default.action,
+				children: action
+			}) : null,
+			onClose ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: BlockAlert_module_default.close,
+				"aria-label": closeLabel,
+				onClick: onClose,
+				children: /* @__PURE__ */ jsx(CloseIcon, { size: 16 })
+			}) : null
+		]
+	});
+});
+//#endregion
+export { BlockAlert };
+
+//# sourceMappingURL=BlockAlert.js.map

package/dist/components/feedback/Alert/BlockAlert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockAlert.js","names":["styles"],"sources":["../../../../src/components/feedback/Alert/BlockAlert.tsx"],"sourcesContent":["import { CheckIcon, CloseIcon, ErrorIcon, InfoIcon, WarningIcon } from \"@malilion/block-ui-icons\";\nimport { forwardRef, useId, type ReactNode } from \"react\";\nimport { cx } from \"../../../utils/cx\";\nimport styles from \"./BlockAlert.module.css\";\nimport type { AlertVariant, BlockAlertProps } from \"./BlockAlert.types\";\nimport { alertMaterial } from \"./BlockAlert.utils\";\n\nconst defaultIcons: Record<AlertVariant, ReactNode> = {\n  success: <CheckIcon size={20} />,\n  info: <InfoIcon size={20} />,\n  warning: <WarningIcon size={20} />,\n  error: <ErrorIcon size={20} />,\n};\n\n/**\n * Inline status message. `warning`/`error` use `role=\"alert\"`; `success`/`info`\n * use `role=\"status\"` so screen readers announce them politely.\n */\nexport const BlockAlert = forwardRef<HTMLDivElement, BlockAlertProps>(function BlockAlert(\n  {\n    variant = \"info\",\n    title,\n    children,\n    icon,\n    onClose,\n    closeLabel = \"Dismiss\",\n    action,\n    className,\n    role,\n    ...rest\n  },\n  ref,\n) {\n  const titleId = useId();\n  const assertive = variant === \"warning\" || variant === \"error\";\n  return (\n    <div\n      ref={ref}\n      role={role ?? (assertive ? \"alert\" : \"status\")}\n      aria-labelledby={title ? titleId : undefined}\n      data-variant={variant}\n      data-material={alertMaterial[variant]}\n      className={cx(styles.alert, className)}\n      {...rest}\n    >\n      {icon !== false ? (\n        <span className={styles.icon} aria-hidden=\"true\">\n          {icon ?? defaultIcons[variant]}\n        </span>\n      ) : null}\n      <div className={styles.body}>\n        {title ? (\n          <p id={titleId} className={styles.title}>\n            {title}\n          </p>\n        ) : null}\n        {children ? <div className={styles.description}>{children}</div> : null}\n      </div>\n      {action ? <div className={styles.action}>{action}</div> : null}\n      {onClose ? (\n        <button type=\"button\" className={styles.close} aria-label={closeLabel} onClick={onClose}>\n          <CloseIcon size={16} />\n        </button>\n      ) : null}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;AAOA,IAAM,eAAgD;CACpD,SAAS,oBAAC,WAAD,EAAW,MAAM,GAAK,CAAA;CAC/B,MAAM,oBAAC,UAAD,EAAU,MAAM,GAAK,CAAA;CAC3B,SAAS,oBAAC,aAAD,EAAa,MAAM,GAAK,CAAA;CACjC,OAAO,oBAAC,WAAD,EAAW,MAAM,GAAK,CAAA;AAC/B;;;;;AAMA,IAAa,aAAa,WAA4C,SAAS,WAC7E,EACE,UAAU,QACV,OACA,UACA,MACA,SACA,aAAa,WACb,QACA,WACA,MACA,GAAG,QAEL,KACA;CACA,MAAM,UAAU,MAAM;CAEtB,OACE,qBAAC,OAAD;EACO;EACL,MAAM,SAJQ,YAAY,aAAa,YAAY,UAIxB,UAAU;EACrC,mBAAiB,QAAQ,UAAU,KAAA;EACnC,gBAAc;EACd,iBAAe,cAAc;EAC7B,WAAW,GAAGA,0BAAO,OAAO,SAAS;EACrC,GAAI;EAPN,UAAA;GASG,SAAS,QACR,oBAAC,QAAD;IAAM,WAAWA,0BAAO;IAAM,eAAY;IACvC,UAAA,QAAQ,aAAa;GAClB,CAAA,IACJ;GACJ,qBAAC,OAAD;IAAK,WAAWA,0BAAO;IAAvB,UAAA,CACG,QACC,oBAAC,KAAD;KAAG,IAAI;KAAS,WAAWA,0BAAO;KAC/B,UAAA;IACA,CAAA,IACD,MACH,WAAW,oBAAC,OAAD;KAAK,WAAWA,0BAAO;KAAc;IAAc,CAAA,IAAI,IAChE;;GACJ,SAAS,oBAAC,OAAD;IAAK,WAAWA,0BAAO;IAAS,UAAA;GAAY,CAAA,IAAI;GACzD,UACC,oBAAC,UAAD;IAAQ,MAAK;IAAS,WAAWA,0BAAO;IAAO,cAAY;IAAY,SAAS;IAC9E,UAAA,oBAAC,WAAD,EAAW,MAAM,GAAK,CAAA;GAChB,CAAA,IACN;EACD;;AAET,CAAC"}

package/dist/components/feedback/Alert/BlockAlert.module.js

@@ -0,0 +1,21 @@
+//#region src/components/feedback/Alert/BlockAlert.module.css
+var alert = "block-alert-Q5mYq";
+var icon = "block-icon-6l3ZL";
+var body = "block-body-OV8o7";
+var title = "block-title-wkCiC";
+var description = "block-description-1G9Nb";
+var action = "block-action-RI6ej";
+var close = "block-close-6Y2T6";
+var BlockAlert_module_default = {
+	alert,
+	icon,
+	body,
+	title,
+	description,
+	action,
+	close
+};
+//#endregion
+export { action, alert, body, close, BlockAlert_module_default as default, description, icon, title };
+
+//# sourceMappingURL=BlockAlert.module.js.map

package/dist/components/feedback/Alert/BlockAlert.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockAlert.module.js","names":[],"sources":["../../../../src/components/feedback/Alert/BlockAlert.module.css"],"sourcesContent":[".alert {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--block-space-3);\n  padding: var(--block-space-3);\n  color: var(--block-text);\n  background-color: color-mix(in srgb, var(--block-mat) 32%, var(--block-surface-alt));\n  border: var(--block-border-width) solid var(--block-border);\n  box-shadow:\n    inset 3px 3px 0 color-mix(in srgb, var(--block-mat-light) 30%, transparent),\n    inset -3px -3px 0 var(--block-shadow-bevel-dark);\n}\n\n.icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  flex-shrink: 0;\n  color: var(--block-mat-on);\n  background-color: var(--block-mat);\n  border: var(--block-border-width-thin) solid var(--block-border);\n  box-shadow:\n    inset 2px 2px 0 var(--block-mat-light),\n    inset -2px -2px 0 var(--block-mat-dark);\n}\n\n.body {\n  flex: 1;\n  min-width: 0;\n  padding-top: 2px;\n}\n\n.title {\n  margin: 0;\n  font-family: var(--block-font-display);\n  font-size: var(--block-font-size-md);\n  line-height: var(--block-line-height-tight);\n  text-shadow: var(--block-shadow-text);\n}\n\n.description {\n  margin-top: var(--block-space-1);\n  font-size: var(--block-font-size-sm);\n  line-height: var(--block-line-height-normal);\n}\n\n.description:first-child {\n  margin-top: 0;\n  font-size: var(--block-font-size-md);\n}\n\n.action {\n  align-self: center;\n  flex-shrink: 0;\n}\n\n.close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  flex-shrink: 0;\n  padding: 0;\n  color: var(--block-text);\n  background: transparent;\n  border: var(--block-border-width-thin) solid transparent;\n  cursor: pointer;\n  transition: background-color var(--block-duration-instant) var(--block-ease-step);\n}\n\n.close:hover {\n  background-color: var(--block-shadow-bevel-dark);\n}\n\n.close:focus-visible {\n  outline: 3px solid var(--block-focus);\n  outline-offset: 1px;\n}\n"],"mappings":""}

package/dist/components/feedback/Alert/BlockAlert.types.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export declare const alertVariants: readonly ["success", "info", "warning", "error"];
+export type AlertVariant = (typeof alertVariants)[number];
+export interface BlockAlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** @default "info" */
+    variant?: AlertVariant;
+    title?: ReactNode;
+    /** Description content. */
+    children?: ReactNode;
+    /** Custom icon, or `false` to hide it. Defaults to the variant icon. */
+    icon?: ReactNode | false;
+    /** Renders a dismiss button when provided. */
+    onClose?: () => void;
+    /** Accessible label for the dismiss button. @default "Dismiss" */
+    closeLabel?: string;
+    /** Extra actions (e.g. a button) shown after the text. */
+    action?: ReactNode;
+}
+//# sourceMappingURL=BlockAlert.types.d.ts.map