@malilion/block-ui-react 0.1.0 → 0.2.0

package/dist/components/navigation/BlockPagination/BlockPagination.js

@@ -0,0 +1,83 @@
+import { cx } from "../../../utils/cx.js";
+import { BlockButton } from "../../actions/BlockButton/BlockButton.js";
+import { useControllableState } from "../../../hooks/useControllableState.js";
+import { clamp } from "../../../utils/number.js";
+import BlockPagination_module_default from "./BlockPagination.module.js";
+import { getPaginationRange } from "./BlockPagination.utils.js";
+import { forwardRef } from "react";
+import { ChevronLeftIcon, ChevronRightIcon } from "@malilion/block-ui-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/navigation/BlockPagination/BlockPagination.tsx
+/**
+* Page navigation with previous / next arrows. The current page is a grass
+* block marked `aria-current="page"`; long ranges collapse into ellipses.
+*/
+var BlockPagination = forwardRef(function BlockPagination({ pageCount, page, defaultPage = 1, onPageChange, siblingCount = 1, boundaryCount = 1, variant = "full", size = "md", disabled = false, label = "Pagination", className, ...rest }, ref) {
+	const count = Math.max(1, Math.floor(pageCount));
+	const [rawPage, setPage] = useControllableState({
+		value: page,
+		defaultValue: defaultPage,
+		onChange: onPageChange
+	});
+	const current = clamp(rawPage, 1, count);
+	const goTo = (next) => {
+		if (disabled || next < 1 || next > count || next === current) return;
+		setPage(next);
+	};
+	const buttonSize = size === "sm" ? "sm" : "md";
+	return /* @__PURE__ */ jsx("nav", {
+		ref,
+		"aria-label": label,
+		"data-size": size,
+		className: cx(BlockPagination_module_default.pagination, className),
+		...rest,
+		children: /* @__PURE__ */ jsxs("ul", {
+			className: BlockPagination_module_default.list,
+			children: [
+				/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(BlockButton, {
+					size: buttonSize,
+					"aria-label": "Previous page",
+					disabled: disabled || current <= 1,
+					className: BlockPagination_module_default.arrow,
+					onClick: () => goTo(current - 1),
+					children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: 16 })
+				}) }),
+				variant === "compact" ? /* @__PURE__ */ jsxs("li", {
+					className: BlockPagination_module_default.status,
+					"aria-live": "polite",
+					children: [
+						"Page ",
+						current,
+						" of ",
+						count
+					]
+				}) : getPaginationRange(current, count, siblingCount, boundaryCount).map((entry) => typeof entry === "number" ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(BlockButton, {
+					size: buttonSize,
+					variant: entry === current ? "grass" : "stone",
+					"aria-label": `Page ${entry}`,
+					"aria-current": entry === current ? "page" : void 0,
+					disabled,
+					className: BlockPagination_module_default.page,
+					onClick: () => goTo(entry),
+					children: entry
+				}) }, entry) : /* @__PURE__ */ jsx("li", {
+					className: BlockPagination_module_default.ellipsis,
+					"aria-hidden": "true",
+					children: "…"
+				}, entry)),
+				/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(BlockButton, {
+					size: buttonSize,
+					"aria-label": "Next page",
+					disabled: disabled || current >= count,
+					className: BlockPagination_module_default.arrow,
+					onClick: () => goTo(current + 1),
+					children: /* @__PURE__ */ jsx(ChevronRightIcon, { size: 16 })
+				}) })
+			]
+		})
+	});
+});
+//#endregion
+export { BlockPagination };
+
+//# sourceMappingURL=BlockPagination.js.map

package/dist/components/navigation/BlockPagination/BlockPagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockPagination.js","names":["styles"],"sources":["../../../../src/components/navigation/BlockPagination/BlockPagination.tsx"],"sourcesContent":["import { ChevronLeftIcon, ChevronRightIcon } from \"@malilion/block-ui-icons\";\nimport { forwardRef } from \"react\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport { cx } from \"../../../utils/cx\";\nimport { clamp } from \"../../../utils/number\";\nimport { BlockButton } from \"../../actions/BlockButton/BlockButton\";\nimport styles from \"./BlockPagination.module.css\";\nimport type { BlockPaginationProps } from \"./BlockPagination.types\";\nimport { getPaginationRange } from \"./BlockPagination.utils\";\n\n/**\n * Page navigation with previous / next arrows. The current page is a grass\n * block marked `aria-current=\"page\"`; long ranges collapse into ellipses.\n */\nexport const BlockPagination = forwardRef<HTMLElement, BlockPaginationProps>(\n  function BlockPagination(\n    {\n      pageCount,\n      page,\n      defaultPage = 1,\n      onPageChange,\n      siblingCount = 1,\n      boundaryCount = 1,\n      variant = \"full\",\n      size = \"md\",\n      disabled = false,\n      label = \"Pagination\",\n      className,\n      ...rest\n    },\n    ref,\n  ) {\n    const count = Math.max(1, Math.floor(pageCount));\n    const [rawPage, setPage] = useControllableState({\n      value: page,\n      defaultValue: defaultPage,\n      onChange: onPageChange,\n    });\n    const current = clamp(rawPage, 1, count);\n\n    const goTo = (next: number) => {\n      if (disabled || next < 1 || next > count || next === current) return;\n      setPage(next);\n    };\n\n    const buttonSize = size === \"sm\" ? \"sm\" : \"md\";\n\n    return (\n      <nav\n        ref={ref}\n        aria-label={label}\n        data-size={size}\n        className={cx(styles.pagination, className)}\n        {...rest}\n      >\n        <ul className={styles.list}>\n          <li>\n            <BlockButton\n              size={buttonSize}\n              aria-label=\"Previous page\"\n              disabled={disabled || current <= 1}\n              className={styles.arrow}\n              onClick={() => goTo(current - 1)}\n            >\n              <ChevronLeftIcon size={16} />\n            </BlockButton>\n          </li>\n          {variant === \"compact\" ? (\n            <li className={styles.status} aria-live=\"polite\">\n              Page {current} of {count}\n            </li>\n          ) : (\n            getPaginationRange(current, count, siblingCount, boundaryCount).map((entry) =>\n              typeof entry === \"number\" ? (\n                <li key={entry}>\n                  <BlockButton\n                    size={buttonSize}\n                    variant={entry === current ? \"grass\" : \"stone\"}\n                    aria-label={`Page ${entry}`}\n                    aria-current={entry === current ? \"page\" : undefined}\n                    disabled={disabled}\n                    className={styles.page}\n                    onClick={() => goTo(entry)}\n                  >\n                    {entry}\n                  </BlockButton>\n                </li>\n              ) : (\n                <li key={entry} className={styles.ellipsis} aria-hidden=\"true\">\n                  …\n                </li>\n              ),\n            )\n          )}\n          <li>\n            <BlockButton\n              size={buttonSize}\n              aria-label=\"Next page\"\n              disabled={disabled || current >= count}\n              className={styles.arrow}\n              onClick={() => goTo(current + 1)}\n            >\n              <ChevronRightIcon size={16} />\n            </BlockButton>\n          </li>\n        </ul>\n      </nav>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;AAcA,IAAa,kBAAkB,WAC7B,SAAS,gBACP,EACE,WACA,MACA,cAAc,GACd,cACA,eAAe,GACf,gBAAgB,GAChB,UAAU,QACV,OAAO,MACP,WAAW,OACX,QAAQ,cACR,WACA,GAAG,QAEL,KACA;CACA,MAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,MAAM,SAAS,CAAC;CAC/C,MAAM,CAAC,SAAS,WAAW,qBAAqB;EAC9C,OAAO;EACP,cAAc;EACd,UAAU;CACZ,CAAC;CACD,MAAM,UAAU,MAAM,SAAS,GAAG,KAAK;CAEvC,MAAM,QAAQ,SAAiB;EAC7B,IAAI,YAAY,OAAO,KAAK,OAAO,SAAS,SAAS,SAAS;EAC9D,QAAQ,IAAI;CACd;CAEA,MAAM,aAAa,SAAS,OAAO,OAAO;CAE1C,OACE,oBAAC,OAAD;EACO;EACL,cAAY;EACZ,aAAW;EACX,WAAW,GAAGA,+BAAO,YAAY,SAAS;EAC1C,GAAI;EAEJ,UAAA,qBAAC,MAAD;GAAI,WAAWA,+BAAO;GAAtB,UAAA;IACE,oBAAC,MAAD,EAAA,UACE,oBAAC,aAAD;KACE,MAAM;KACN,cAAW;KACX,UAAU,YAAY,WAAW;KACjC,WAAWA,+BAAO;KAClB,eAAe,KAAK,UAAU,CAAC;KAE/B,UAAA,oBAAC,iBAAD,EAAiB,MAAM,GAAK,CAAA;IACjB,CAAA,EACX,CAAA;IACH,YAAY,YACX,qBAAC,MAAD;KAAI,WAAWA,+BAAO;KAAQ,aAAU;KAAxC,UAAA;MAAiD;MACzC;MAAQ;MAAK;KACjB;IAEJ,CAAA,IAAA,mBAAmB,SAAS,OAAO,cAAc,aAAa,CAAC,CAAC,KAAK,UACnE,OAAO,UAAU,WACf,oBAAC,MAAD,EAAA,UACE,oBAAC,aAAD;KACE,MAAM;KACN,SAAS,UAAU,UAAU,UAAU;KACvC,cAAY,QAAQ;KACpB,gBAAc,UAAU,UAAU,SAAS,KAAA;KACjC;KACV,WAAWA,+BAAO;KAClB,eAAe,KAAK,KAAK;KAExB,UAAA;IACU,CAAA,EACX,GAZK,KAYL,IAEJ,oBAAC,MAAD;KAAgB,WAAWA,+BAAO;KAAU,eAAY;KAAO,UAAA;IAE3D,GAFK,KAEL,CAER;IAEF,oBAAC,MAAD,EAAA,UACE,oBAAC,aAAD;KACE,MAAM;KACN,cAAW;KACX,UAAU,YAAY,WAAW;KACjC,WAAWA,+BAAO;KAClB,eAAe,KAAK,UAAU,CAAC;KAE/B,UAAA,oBAAC,kBAAD,EAAkB,MAAM,GAAK,CAAA;IAClB,CAAA,EACX,CAAA;GACF;;CACD,CAAA;AAET,CACF"}

package/dist/components/navigation/BlockPagination/BlockPagination.module.js

@@ -0,0 +1,19 @@
+//#region src/components/navigation/BlockPagination/BlockPagination.module.css
+var pagination = "block-pagination-jR1nM";
+var list = "block-list-Z1jbw";
+var page = "block-page-BkAnx";
+var arrow = "block-arrow-ry9f4";
+var ellipsis = "block-ellipsis-nx5KR";
+var status = "block-status-jjwdn";
+var BlockPagination_module_default = {
+	pagination,
+	list,
+	page,
+	arrow,
+	ellipsis,
+	status
+};
+//#endregion
+export { arrow, BlockPagination_module_default as default, ellipsis, list, page, pagination, status };
+
+//# sourceMappingURL=BlockPagination.module.js.map

package/dist/components/navigation/BlockPagination/BlockPagination.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockPagination.module.js","names":[],"sources":["../../../../src/components/navigation/BlockPagination/BlockPagination.module.css"],"sourcesContent":[".pagination {\n  min-width: 0;\n}\n\n.list {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--block-space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.page,\n.arrow {\n  min-width: var(--block-size-control-md);\n  padding-inline: var(--block-space-2);\n  font-variant-numeric: tabular-nums;\n}\n\n.pagination[data-size=\"sm\"] .page,\n.pagination[data-size=\"sm\"] .arrow {\n  min-width: var(--block-size-control-sm);\n  padding-inline: var(--block-space-1);\n}\n\n.ellipsis {\n  display: inline-flex;\n  justify-content: center;\n  min-width: var(--block-space-6);\n  font-family: var(--block-font-display);\n  color: var(--block-text-muted);\n}\n\n.status {\n  padding-inline: var(--block-space-3);\n  font-family: var(--block-font-display);\n  font-size: var(--block-font-size-sm);\n  font-weight: var(--block-font-weight-bold);\n  text-transform: uppercase;\n  white-space: nowrap;\n  color: var(--block-text);\n}\n"],"mappings":""}

package/dist/components/navigation/BlockPagination/BlockPagination.types.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from "react";
+export interface BlockPaginationProps extends Omit<HTMLAttributes<HTMLElement>, "onChange" | "defaultValue"> {
+    /** Total number of pages. */
+    pageCount: number;
+    /** Controlled current page (1-based). */
+    page?: number;
+    /** Initial page when uncontrolled. @default 1 */
+    defaultPage?: number;
+    onPageChange?: (page: number) => void;
+    /** Pages shown on each side of the current page. @default 1 */
+    siblingCount?: number;
+    /** Pages always shown at the start and end. @default 1 */
+    boundaryCount?: number;
+    /** `full` lists page numbers; `compact` shows "Page 3 of 10" between the arrows. @default "full" */
+    variant?: "full" | "compact";
+    /** @default "md" */
+    size?: "sm" | "md";
+    disabled?: boolean;
+    /** Accessible name of the navigation landmark. @default "Pagination" */
+    label?: string;
+}
+//# sourceMappingURL=BlockPagination.types.d.ts.map

package/dist/components/navigation/BlockPagination/BlockPagination.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockPagination.types.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/BlockPagination/BlockPagination.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,cAAc,CAAC,WAAW,CAAC,EAC3B,UAAU,GAAG,cAAc,CAC5B;IACC,6BAA6B;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oGAAoG;IACpG,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,oBAAoB;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/navigation/BlockPagination/BlockPagination.utils.d.ts

@@ -0,0 +1,7 @@
+export type PaginationEntry = number | "start-ellipsis" | "end-ellipsis";
+/**
+ * Page numbers to render, with ellipses for skipped runs. The list always has
+ * the same length for a given `pageCount`, so the control does not jump around.
+ */
+export declare function getPaginationRange(page: number, pageCount: number, siblingCount?: number, boundaryCount?: number): PaginationEntry[];
+//# sourceMappingURL=BlockPagination.utils.d.ts.map

package/dist/components/navigation/BlockPagination/BlockPagination.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockPagination.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/BlockPagination/BlockPagination.utils.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,gBAAgB,GAAG,cAAc,CAAC;AAMzE;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,MAAM,EACjB,YAAY,SAAI,EAChB,aAAa,SAAI,GAChB,eAAe,EAAE,CAwBnB"}

package/dist/components/navigation/BlockPagination/BlockPagination.utils.js

@@ -0,0 +1,26 @@
+//#region src/components/navigation/BlockPagination/BlockPagination.utils.ts
+function range(start, end) {
+	return Array.from({ length: Math.max(end - start + 1, 0) }, (_, i) => start + i);
+}
+/**
+* Page numbers to render, with ellipses for skipped runs. The list always has
+* the same length for a given `pageCount`, so the control does not jump around.
+*/
+function getPaginationRange(page, pageCount, siblingCount = 1, boundaryCount = 1) {
+	if (pageCount <= boundaryCount * 2 + siblingCount * 2 + 3) return range(1, pageCount);
+	const startPages = range(1, boundaryCount);
+	const endPages = range(pageCount - boundaryCount + 1, pageCount);
+	const siblingsStart = Math.max(Math.min(page - siblingCount, pageCount - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
+	const siblingsEnd = Math.min(Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2), pageCount - boundaryCount - 1);
+	return [
+		...startPages,
+		siblingsStart > boundaryCount + 2 ? "start-ellipsis" : boundaryCount + 1,
+		...range(siblingsStart, siblingsEnd),
+		siblingsEnd < pageCount - boundaryCount - 1 ? "end-ellipsis" : pageCount - boundaryCount,
+		...endPages
+	];
+}
+//#endregion
+export { getPaginationRange };
+
+//# sourceMappingURL=BlockPagination.utils.js.map

package/dist/components/navigation/BlockPagination/BlockPagination.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockPagination.utils.js","names":[],"sources":["../../../../src/components/navigation/BlockPagination/BlockPagination.utils.ts"],"sourcesContent":["export type PaginationEntry = number | \"start-ellipsis\" | \"end-ellipsis\";\n\nfunction range(start: number, end: number): number[] {\n  return Array.from({ length: Math.max(end - start + 1, 0) }, (_, i) => start + i);\n}\n\n/**\n * Page numbers to render, with ellipses for skipped runs. The list always has\n * the same length for a given `pageCount`, so the control does not jump around.\n */\nexport function getPaginationRange(\n  page: number,\n  pageCount: number,\n  siblingCount = 1,\n  boundaryCount = 1,\n): PaginationEntry[] {\n  // Boundaries + siblings + current + two ellipses.\n  const total = boundaryCount * 2 + siblingCount * 2 + 3;\n  if (pageCount <= total) return range(1, pageCount);\n\n  const startPages = range(1, boundaryCount);\n  const endPages = range(pageCount - boundaryCount + 1, pageCount);\n\n  const siblingsStart = Math.max(\n    Math.min(page - siblingCount, pageCount - boundaryCount - siblingCount * 2 - 1),\n    boundaryCount + 2,\n  );\n  const siblingsEnd = Math.min(\n    Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),\n    pageCount - boundaryCount - 1,\n  );\n\n  return [\n    ...startPages,\n    siblingsStart > boundaryCount + 2 ? \"start-ellipsis\" : boundaryCount + 1,\n    ...range(siblingsStart, siblingsEnd),\n    siblingsEnd < pageCount - boundaryCount - 1 ? \"end-ellipsis\" : pageCount - boundaryCount,\n    ...endPages,\n  ];\n}\n"],"mappings":";AAEA,SAAS,MAAM,OAAe,KAAuB;CACnD,OAAO,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,GAAG,MAAM,QAAQ,CAAC;AACjF;;;;;AAMA,SAAgB,mBACd,MACA,WACA,eAAe,GACf,gBAAgB,GACG;CAGnB,IAAI,aADU,gBAAgB,IAAI,eAAe,IAAI,GAC7B,OAAO,MAAM,GAAG,SAAS;CAEjD,MAAM,aAAa,MAAM,GAAG,aAAa;CACzC,MAAM,WAAW,MAAM,YAAY,gBAAgB,GAAG,SAAS;CAE/D,MAAM,gBAAgB,KAAK,IACzB,KAAK,IAAI,OAAO,cAAc,YAAY,gBAAgB,eAAe,IAAI,CAAC,GAC9E,gBAAgB,CAClB;CACA,MAAM,cAAc,KAAK,IACvB,KAAK,IAAI,OAAO,cAAc,gBAAgB,eAAe,IAAI,CAAC,GAClE,YAAY,gBAAgB,CAC9B;CAEA,OAAO;EACL,GAAG;EACH,gBAAgB,gBAAgB,IAAI,mBAAmB,gBAAgB;EACvE,GAAG,MAAM,eAAe,WAAW;EACnC,cAAc,YAAY,gBAAgB,IAAI,iBAAiB,YAAY;EAC3E,GAAG;CACL;AACF"}

package/dist/components/navigation/BlockPagination/index.d.ts

@@ -0,0 +1,5 @@
+export { BlockPagination } from "./BlockPagination";
+export { getPaginationRange } from "./BlockPagination.utils";
+export type { PaginationEntry } from "./BlockPagination.utils";
+export type { BlockPaginationProps } from "./BlockPagination.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/navigation/BlockPagination/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/BlockPagination/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC/D,YAAY,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC"}

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

@@ -2,4 +2,5 @@ export * from "./BlockSidebar";
 export * from "./BlockTabs";
 export * from "./Breadcrumb";
 export * from "./HotbarNavigation";
+export * from "./BlockPagination";
 //# sourceMappingURL=index.d.ts.map

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

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

package/dist/hooks/useAnchoredPosition.d.ts

@@ -0,0 +1,17 @@
+import { type CSSProperties, type RefObject } from "react";
+import { type FloatingAlign, type FloatingPosition, type FloatingSide } from "../utils/position";
+export interface AnchoredPosition extends FloatingPosition {
+    /** Custom properties for the floating element (`--block-float-*`). */
+    style: CSSProperties;
+}
+/**
+ * Keeps a `position: fixed` floating element (rendered in a portal) next to
+ * its anchor while open, following scroll and resize. Returns `null` until
+ * the first measurement.
+ */
+export declare function useAnchoredPosition(anchorRef: RefObject<HTMLElement | null>, floatingRef: RefObject<HTMLElement | null>, open: boolean, { side, align, gap }: {
+    side: FloatingSide;
+    align?: FloatingAlign;
+    gap?: number;
+}): AnchoredPosition | null;
+//# sourceMappingURL=useAnchoredPosition.d.ts.map

package/dist/hooks/useAnchoredPosition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnchoredPosition.d.ts","sourceRoot":"","sources":["../../src/hooks/useAnchoredPosition.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACtF,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACrB,KAAK,YAAY,EAClB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACxD,sEAAsE;IACtE,KAAK,EAAE,aAAa,CAAC;CACtB;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,WAAW,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC1C,IAAI,EAAE,OAAO,EACb,EAAE,IAAI,EAAE,KAAgB,EAAE,GAAO,EAAE,EAAE;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,KAAK,CAAC,EAAE,aAAa,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,GAC/F,gBAAgB,GAAG,IAAI,CA8CzB"}

package/dist/hooks/useAnchoredPosition.js

@@ -0,0 +1,62 @@
+import { computePosition } from "../utils/position.js";
+import { useLayoutEffect, useState } from "react";
+//#region src/hooks/useAnchoredPosition.ts
+/**
+* Keeps a `position: fixed` floating element (rendered in a portal) next to
+* its anchor while open, following scroll and resize. Returns `null` until
+* the first measurement.
+*/
+function useAnchoredPosition(anchorRef, floatingRef, open, { side, align = "center", gap = 8 }) {
+	const [position, setPosition] = useState(null);
+	useLayoutEffect(() => {
+		if (!open) return void 0;
+		const update = () => {
+			const anchor = anchorRef.current;
+			const floating = floatingRef.current;
+			if (!anchor || !floating) return;
+			const anchorRect = anchor.getBoundingClientRect();
+			const next = computePosition({
+				anchor: anchorRect,
+				floating: {
+					width: floating.offsetWidth,
+					height: floating.offsetHeight
+				},
+				viewport: {
+					width: window.innerWidth,
+					height: window.innerHeight
+				},
+				side,
+				align,
+				gap
+			});
+			setPosition((previous) => previous && previous.x === next.x && previous.y === next.y && previous.side === next.side && previous.arrow === next.arrow ? previous : {
+				...next,
+				style: {
+					"--block-float-x": `${next.x}px`,
+					"--block-float-y": `${next.y}px`,
+					"--block-float-arrow": `${next.arrow}px`,
+					"--block-float-anchor-width": `${anchorRect.width}px`
+				}
+			});
+		};
+		update();
+		window.addEventListener("scroll", update, true);
+		window.addEventListener("resize", update);
+		return () => {
+			window.removeEventListener("scroll", update, true);
+			window.removeEventListener("resize", update);
+		};
+	}, [
+		open,
+		side,
+		align,
+		gap,
+		anchorRef,
+		floatingRef
+	]);
+	return open ? position : null;
+}
+//#endregion
+export { useAnchoredPosition };
+
+//# sourceMappingURL=useAnchoredPosition.js.map

package/dist/hooks/useAnchoredPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnchoredPosition.js","names":[],"sources":["../../src/hooks/useAnchoredPosition.ts"],"sourcesContent":["import { useLayoutEffect, useState, type CSSProperties, type RefObject } from \"react\";\nimport {\n  computePosition,\n  type FloatingAlign,\n  type FloatingPosition,\n  type FloatingSide,\n} from \"../utils/position\";\n\nexport interface AnchoredPosition extends FloatingPosition {\n  /** Custom properties for the floating element (`--block-float-*`). */\n  style: CSSProperties;\n}\n\n/**\n * Keeps a `position: fixed` floating element (rendered in a portal) next to\n * its anchor while open, following scroll and resize. Returns `null` until\n * the first measurement.\n */\nexport function useAnchoredPosition(\n  anchorRef: RefObject<HTMLElement | null>,\n  floatingRef: RefObject<HTMLElement | null>,\n  open: boolean,\n  { side, align = \"center\", gap = 8 }: { side: FloatingSide; align?: FloatingAlign; gap?: number },\n): AnchoredPosition | null {\n  const [position, setPosition] = useState<AnchoredPosition | null>(null);\n\n  useLayoutEffect(() => {\n    if (!open) return undefined;\n    const update = () => {\n      const anchor = anchorRef.current;\n      const floating = floatingRef.current;\n      if (!anchor || !floating) return;\n      const anchorRect = anchor.getBoundingClientRect();\n      const next = computePosition({\n        anchor: anchorRect,\n        floating: { width: floating.offsetWidth, height: floating.offsetHeight },\n        viewport: { width: window.innerWidth, height: window.innerHeight },\n        side,\n        align,\n        gap,\n      });\n      setPosition((previous) =>\n        previous &&\n        previous.x === next.x &&\n        previous.y === next.y &&\n        previous.side === next.side &&\n        previous.arrow === next.arrow\n          ? previous\n          : {\n              ...next,\n              style: {\n                \"--block-float-x\": `${next.x}px`,\n                \"--block-float-y\": `${next.y}px`,\n                \"--block-float-arrow\": `${next.arrow}px`,\n                \"--block-float-anchor-width\": `${anchorRect.width}px`,\n              } as CSSProperties,\n            },\n      );\n    };\n    update();\n    window.addEventListener(\"scroll\", update, true);\n    window.addEventListener(\"resize\", update);\n    return () => {\n      window.removeEventListener(\"scroll\", update, true);\n      window.removeEventListener(\"resize\", update);\n    };\n  }, [open, side, align, gap, anchorRef, floatingRef]);\n\n  return open ? position : null;\n}\n"],"mappings":";;;;;;;;AAkBA,SAAgB,oBACd,WACA,aACA,MACA,EAAE,MAAM,QAAQ,UAAU,MAAM,KACP;CACzB,MAAM,CAAC,UAAU,eAAe,SAAkC,IAAI;CAEtE,sBAAsB;EACpB,IAAI,CAAC,MAAM,OAAO,KAAA;EAClB,MAAM,eAAe;GACnB,MAAM,SAAS,UAAU;GACzB,MAAM,WAAW,YAAY;GAC7B,IAAI,CAAC,UAAU,CAAC,UAAU;GAC1B,MAAM,aAAa,OAAO,sBAAsB;GAChD,MAAM,OAAO,gBAAgB;IAC3B,QAAQ;IACR,UAAU;KAAE,OAAO,SAAS;KAAa,QAAQ,SAAS;IAAa;IACvE,UAAU;KAAE,OAAO,OAAO;KAAY,QAAQ,OAAO;IAAY;IACjE;IACA;IACA;GACF,CAAC;GACD,aAAa,aACX,YACA,SAAS,MAAM,KAAK,KACpB,SAAS,MAAM,KAAK,KACpB,SAAS,SAAS,KAAK,QACvB,SAAS,UAAU,KAAK,QACpB,WACA;IACE,GAAG;IACH,OAAO;KACL,mBAAmB,GAAG,KAAK,EAAE;KAC7B,mBAAmB,GAAG,KAAK,EAAE;KAC7B,uBAAuB,GAAG,KAAK,MAAM;KACrC,8BAA8B,GAAG,WAAW,MAAM;IACpD;GACF,CACN;EACF;EACA,OAAO;EACP,OAAO,iBAAiB,UAAU,QAAQ,IAAI;EAC9C,OAAO,iBAAiB,UAAU,MAAM;EACxC,aAAa;GACX,OAAO,oBAAoB,UAAU,QAAQ,IAAI;GACjD,OAAO,oBAAoB,UAAU,MAAM;EAC7C;CACF,GAAG;EAAC;EAAM;EAAM;EAAO;EAAK;EAAW;CAAW,CAAC;CAEnD,OAAO,OAAO,WAAW;AAC3B"}

package/dist/index.js

@@ -9,6 +9,7 @@ import { BlockUIProvider } from "./provider/BlockUIProvider.js";
 import { BlockButton } from "./components/actions/BlockButton/BlockButton.js";
 import { blockButtonVariants } from "./components/actions/BlockButton/BlockButton.types.js";
 import { IconButton } from "./components/actions/IconButton/IconButton.js";
+import { BlockMenu } from "./components/actions/BlockMenu/BlockMenu.js";
 import { BlockInput } from "./components/forms/BlockInput/BlockInput.js";
 import { BlockTextarea } from "./components/forms/BlockTextarea/BlockTextarea.js";
 import { BlockSelect } from "./components/forms/BlockSelect/BlockSelect.js";
@@ -54,15 +55,24 @@ import { pingQuality } from "./components/cards/ServerCard/ServerCard.utils.js";
 import { ServerCard } from "./components/cards/ServerCard/ServerCard.js";
 import { WorldCard } from "./components/cards/WorldCard/WorldCard.js";
 import { badgeVariants } from "./components/display/BlockBadge/BlockBadge.types.js";
+import { BlockTooltip } from "./components/display/BlockTooltip/BlockTooltip.js";
+import { tooltipPlacements } from "./components/display/BlockTooltip/BlockTooltip.types.js";
+import { BlockTable } from "./components/display/BlockTable/BlockTable.js";
 import { useMediaQuery } from "./hooks/useMediaQuery.js";
 import { BlockSidebar, SidebarItem } from "./components/navigation/BlockSidebar/BlockSidebar.js";
 import { BlockTabs } from "./components/navigation/BlockTabs/BlockTabs.js";
 import { Breadcrumb } from "./components/navigation/Breadcrumb/Breadcrumb.js";
 import { HotbarNavigation } from "./components/navigation/HotbarNavigation/HotbarNavigation.js";
+import { getPaginationRange } from "./components/navigation/BlockPagination/BlockPagination.utils.js";
+import { BlockPagination } from "./components/navigation/BlockPagination/BlockPagination.js";
+import { BlockStack } from "./components/layout/BlockStack/BlockStack.js";
+import { stackGaps } from "./components/layout/BlockStack/BlockStack.types.js";
+import { BlockDivider } from "./components/layout/BlockDivider/BlockDivider.js";
+import { dividerVariants } from "./components/layout/BlockDivider/BlockDivider.types.js";
 import { alertVariants } from "./components/feedback/Alert/BlockAlert.types.js";
 import { useFocusTrap } from "./hooks/useFocusTrap.js";
 import { BlockModal } from "./components/feedback/Modal/BlockModal.js";
 import { ConfirmDialog } from "./components/feedback/ConfirmDialog/ConfirmDialog.js";
 import { progressVariants } from "./components/feedback/Progress/BlockProgress.types.js";
 import { BlockLoading } from "./components/feedback/Loading/BlockLoading.js";
-export { AchievementCard, ArmorBar, BlockAlert, BlockBadge, BlockButton, BlockCard, BlockCheckbox, BlockInput, BlockLoading, BlockModal, BlockPanel, BlockProgress, BlockRadio, BlockRadioGroup, BlockSelect, BlockSidebar, BlockSlider, BlockTabs, BlockTextarea, BlockToaster, BlockToggle, BlockUIProvider, Breadcrumb, ConfirmDialog, CraftingGrid, CraftingResult, CraftingSlot, CraftingTable, DEFAULT_TOAST_DURATION, DurabilityBar, Furnace, HealthBar, Hotbar, HotbarNavigation, HungerBar, IconButton, Inventory, InventoryGrid, InventorySection, InventorySlot, ItemStack, ItemTooltip, PlayerCard, PlayerHUD, QuestCard, ServerCard, SidebarItem, WorldCard, XPBar, alertVariants, badgeVariants, blockButtonVariants, cardMaterials, clamp, cx, describeItemStack, durabilityLevel, formatNumber, furnaceStates, getFurnaceState, itemRarities, normalizeRarity, pingQuality, progressVariants, ratio, toast, useBlockUI, useControllableState, useDigitHotkeys, useFocusTrap, useMediaQuery, usePortalContainer, useToasts };
+export { AchievementCard, ArmorBar, BlockAlert, BlockBadge, BlockButton, BlockCard, BlockCheckbox, BlockDivider, BlockInput, BlockLoading, BlockMenu, BlockModal, BlockPagination, BlockPanel, BlockProgress, BlockRadio, BlockRadioGroup, BlockSelect, BlockSidebar, BlockSlider, BlockStack, BlockTable, BlockTabs, BlockTextarea, BlockToaster, BlockToggle, BlockTooltip, BlockUIProvider, Breadcrumb, ConfirmDialog, CraftingGrid, CraftingResult, CraftingSlot, CraftingTable, DEFAULT_TOAST_DURATION, DurabilityBar, Furnace, HealthBar, Hotbar, HotbarNavigation, HungerBar, IconButton, Inventory, InventoryGrid, InventorySection, InventorySlot, ItemStack, ItemTooltip, PlayerCard, PlayerHUD, QuestCard, ServerCard, SidebarItem, WorldCard, XPBar, alertVariants, badgeVariants, blockButtonVariants, cardMaterials, clamp, cx, describeItemStack, dividerVariants, durabilityLevel, formatNumber, furnaceStates, getFurnaceState, getPaginationRange, itemRarities, normalizeRarity, pingQuality, progressVariants, ratio, stackGaps, toast, tooltipPlacements, useBlockUI, useControllableState, useDigitHotkeys, useFocusTrap, useMediaQuery, usePortalContainer, useToasts };