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

package/dist/components/layout/BlockPanel/BlockPanel.types.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type BlockPanelVariant = "stone" | "inset" | "plain";
+export interface BlockPanelProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    /** Header title, rendered in the pixel display font. */
+    title?: ReactNode;
+    /** Heading level for the title. @default 2 */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    /** Elements on the right side of the header (buttons, badges). */
+    actions?: ReactNode;
+    /** Icon before the title. */
+    icon?: ReactNode;
+    /** @default "stone" */
+    variant?: BlockPanelVariant;
+    /** Remove body padding (e.g. for edge-to-edge media). */
+    flush?: boolean;
+    /** Render as a different element. @default "section" */
+    as?: "section" | "div" | "article" | "aside";
+    children?: ReactNode;
+}
+//# sourceMappingURL=BlockPanel.types.d.ts.map

package/dist/components/layout/BlockPanel/BlockPanel.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockPanel.types.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/BlockPanel/BlockPanel.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAE5D,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IACjF,wDAAwD;IACxD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACjC,kEAAkE;IAClE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,uBAAuB;IACvB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,yDAAyD;IACzD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wDAAwD;IACxD,EAAE,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,CAAC;IAC7C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB"}

package/dist/components/layout/BlockPanel/index.d.ts

@@ -0,0 +1,3 @@
+export { BlockPanel } from "./BlockPanel";
+export type { BlockPanelProps, BlockPanelVariant } from "./BlockPanel.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/BlockPanel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/BlockPanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/layout/BlockStack/BlockStack.d.ts

@@ -0,0 +1,4 @@
+import type { BlockStackProps } from "./BlockStack.types";
+/** Flex layout helper that spaces children on the 4px token grid. */
+export declare const BlockStack: import("react").ForwardRefExoticComponent<BlockStackProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=BlockStack.d.ts.map

package/dist/components/layout/BlockStack/BlockStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockStack.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/BlockStack/BlockStack.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,qEAAqE;AACrE,eAAO,MAAM,UAAU,yGA8BrB,CAAC"}

package/dist/components/layout/BlockStack/BlockStack.js

@@ -0,0 +1,22 @@
+import { cx } from "../../../utils/cx.js";
+import BlockStack_module_default from "./BlockStack.module.js";
+import { createElement, forwardRef } from "react";
+//#region src/components/layout/BlockStack/BlockStack.tsx
+/** Flex layout helper that spaces children on the 4px token grid. */
+var BlockStack = forwardRef(function BlockStack({ direction = "column", gap = 3, align = "stretch", justify = "start", wrap = false, stackOnMobile = false, as = "div", className, children, ...rest }, ref) {
+	return createElement(as, {
+		ref,
+		"data-direction": direction,
+		"data-gap": gap,
+		"data-align": align,
+		"data-justify": justify,
+		"data-wrap": wrap || void 0,
+		"data-stack-mobile": stackOnMobile || void 0,
+		className: cx(BlockStack_module_default.stack, className),
+		...rest
+	}, children);
+});
+//#endregion
+export { BlockStack };
+
+//# sourceMappingURL=BlockStack.js.map

package/dist/components/layout/BlockStack/BlockStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockStack.js","names":["styles"],"sources":["../../../../src/components/layout/BlockStack/BlockStack.tsx"],"sourcesContent":["import { createElement, forwardRef } from \"react\";\nimport { cx } from \"../../../utils/cx\";\nimport styles from \"./BlockStack.module.css\";\nimport type { BlockStackProps } from \"./BlockStack.types\";\n\n/** Flex layout helper that spaces children on the 4px token grid. */\nexport const BlockStack = forwardRef<HTMLElement, BlockStackProps>(function BlockStack(\n  {\n    direction = \"column\",\n    gap = 3,\n    align = \"stretch\",\n    justify = \"start\",\n    wrap = false,\n    stackOnMobile = false,\n    as = \"div\",\n    className,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  return createElement(\n    as,\n    {\n      ref,\n      \"data-direction\": direction,\n      \"data-gap\": gap,\n      \"data-align\": align,\n      \"data-justify\": justify,\n      \"data-wrap\": wrap || undefined,\n      \"data-stack-mobile\": stackOnMobile || undefined,\n      className: cx(styles.stack, className),\n      ...rest,\n    },\n    children,\n  );\n});\n"],"mappings":";;;;;AAMA,IAAa,aAAa,WAAyC,SAAS,WAC1E,EACE,YAAY,UACZ,MAAM,GACN,QAAQ,WACR,UAAU,SACV,OAAO,OACP,gBAAgB,OAChB,KAAK,OACL,WACA,UACA,GAAG,QAEL,KACA;CACA,OAAO,cACL,IACA;EACE;EACA,kBAAkB;EAClB,YAAY;EACZ,cAAc;EACd,gBAAgB;EAChB,aAAa,QAAQ,KAAA;EACrB,qBAAqB,iBAAiB,KAAA;EACtC,WAAW,GAAGA,0BAAO,OAAO,SAAS;EACrC,GAAG;CACL,GACA,QACF;AACF,CAAC"}

package/dist/components/layout/BlockStack/BlockStack.module.js

@@ -0,0 +1,7 @@
+//#region src/components/layout/BlockStack/BlockStack.module.css
+var stack = "block-stack-z5qhc";
+var BlockStack_module_default = { stack };
+//#endregion
+export { BlockStack_module_default as default, stack };
+
+//# sourceMappingURL=BlockStack.module.js.map

package/dist/components/layout/BlockStack/BlockStack.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockStack.module.js","names":[],"sources":["../../../../src/components/layout/BlockStack/BlockStack.module.css"],"sourcesContent":[".stack {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.stack[data-direction=\"row\"] {\n  flex-direction: row;\n}\n\n.stack[data-wrap] {\n  flex-wrap: wrap;\n}\n\n.stack[data-gap=\"0\"] {\n  gap: var(--block-space-0);\n}\n\n.stack[data-gap=\"1\"] {\n  gap: var(--block-space-1);\n}\n\n.stack[data-gap=\"2\"] {\n  gap: var(--block-space-2);\n}\n\n.stack[data-gap=\"3\"] {\n  gap: var(--block-space-3);\n}\n\n.stack[data-gap=\"4\"] {\n  gap: var(--block-space-4);\n}\n\n.stack[data-gap=\"5\"] {\n  gap: var(--block-space-5);\n}\n\n.stack[data-gap=\"6\"] {\n  gap: var(--block-space-6);\n}\n\n.stack[data-gap=\"8\"] {\n  gap: var(--block-space-8);\n}\n\n.stack[data-gap=\"10\"] {\n  gap: var(--block-space-10);\n}\n\n.stack[data-gap=\"12\"] {\n  gap: var(--block-space-12);\n}\n\n.stack[data-align=\"start\"] {\n  align-items: flex-start;\n}\n\n.stack[data-align=\"center\"] {\n  align-items: center;\n}\n\n.stack[data-align=\"end\"] {\n  align-items: flex-end;\n}\n\n.stack[data-align=\"stretch\"] {\n  align-items: stretch;\n}\n\n.stack[data-align=\"baseline\"] {\n  align-items: baseline;\n}\n\n.stack[data-justify=\"start\"] {\n  justify-content: flex-start;\n}\n\n.stack[data-justify=\"center\"] {\n  justify-content: center;\n}\n\n.stack[data-justify=\"end\"] {\n  justify-content: flex-end;\n}\n\n.stack[data-justify=\"between\"] {\n  justify-content: space-between;\n}\n\n.stack[data-justify=\"around\"] {\n  justify-content: space-around;\n}\n\n@media (max-width: 767.98px) {\n  .stack[data-stack-mobile] {\n    flex-direction: column;\n  }\n}\n"],"mappings":""}

package/dist/components/layout/BlockStack/BlockStack.types.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/** Spacing token steps (4px grid) accepted by `gap`. */
+export declare const stackGaps: readonly [0, 1, 2, 3, 4, 5, 6, 8, 10, 12];
+export type BlockStackGap = (typeof stackGaps)[number];
+export type BlockStackAlign = "start" | "center" | "end" | "stretch" | "baseline";
+export type BlockStackJustify = "start" | "center" | "end" | "between" | "around";
+export interface BlockStackProps extends HTMLAttributes<HTMLElement> {
+    /** @default "column" */
+    direction?: "row" | "column";
+    /** Spacing token step between children (`3` = `--block-space-3` = 12px). @default 3 */
+    gap?: BlockStackGap;
+    /** Cross-axis alignment. @default "stretch" */
+    align?: BlockStackAlign;
+    /** Main-axis distribution. @default "start" */
+    justify?: BlockStackJustify;
+    /** Let children wrap onto new lines. */
+    wrap?: boolean;
+    /** Switch a row to a column below 768px (PRD §50 mobile). */
+    stackOnMobile?: boolean;
+    /** Render as a different element. @default "div" */
+    as?: "div" | "section" | "ul" | "ol" | "nav" | "header" | "footer";
+    children?: ReactNode;
+}
+//# sourceMappingURL=BlockStack.types.d.ts.map

package/dist/components/layout/BlockStack/BlockStack.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockStack.types.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/BlockStack/BlockStack.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,wDAAwD;AACxD,eAAO,MAAM,SAAS,2CAA4C,CAAC;AAEnE,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAEvD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;AAElF,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,CAAC;AAElF,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,WAAW,CAAC;IAClE,wBAAwB;IACxB,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,uFAAuF;IACvF,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,wCAAwC;IACxC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6DAA6D;IAC7D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oDAAoD;IACpD,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACnE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB"}

package/dist/components/layout/BlockStack/BlockStack.types.js

@@ -0,0 +1,18 @@
+//#region src/components/layout/BlockStack/BlockStack.types.ts
+/** Spacing token steps (4px grid) accepted by `gap`. */
+var stackGaps = [
+	0,
+	1,
+	2,
+	3,
+	4,
+	5,
+	6,
+	8,
+	10,
+	12
+];
+//#endregion
+export { stackGaps };
+
+//# sourceMappingURL=BlockStack.types.js.map

package/dist/components/layout/BlockStack/BlockStack.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockStack.types.js","names":[],"sources":["../../../../src/components/layout/BlockStack/BlockStack.types.ts"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\n\n/** Spacing token steps (4px grid) accepted by `gap`. */\nexport const stackGaps = [0, 1, 2, 3, 4, 5, 6, 8, 10, 12] as const;\n\nexport type BlockStackGap = (typeof stackGaps)[number];\n\nexport type BlockStackAlign = \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\";\n\nexport type BlockStackJustify = \"start\" | \"center\" | \"end\" | \"between\" | \"around\";\n\nexport interface BlockStackProps extends HTMLAttributes<HTMLElement> {\n  /** @default \"column\" */\n  direction?: \"row\" | \"column\";\n  /** Spacing token step between children (`3` = `--block-space-3` = 12px). @default 3 */\n  gap?: BlockStackGap;\n  /** Cross-axis alignment. @default \"stretch\" */\n  align?: BlockStackAlign;\n  /** Main-axis distribution. @default \"start\" */\n  justify?: BlockStackJustify;\n  /** Let children wrap onto new lines. */\n  wrap?: boolean;\n  /** Switch a row to a column below 768px (PRD §50 mobile). */\n  stackOnMobile?: boolean;\n  /** Render as a different element. @default \"div\" */\n  as?: \"div\" | \"section\" | \"ul\" | \"ol\" | \"nav\" | \"header\" | \"footer\";\n  children?: ReactNode;\n}\n"],"mappings":";;AAGA,IAAa,YAAY;CAAC;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAI;AAAE"}

package/dist/components/layout/BlockStack/index.d.ts

@@ -0,0 +1,4 @@
+export { BlockStack } from "./BlockStack";
+export { stackGaps } from "./BlockStack.types";
+export type { BlockStackAlign, BlockStackGap, BlockStackJustify, BlockStackProps, } from "./BlockStack.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/BlockStack/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/BlockStack/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,YAAY,EACV,eAAe,EACf,aAAa,EACb,iBAAiB,EACjB,eAAe,GAChB,MAAM,oBAAoB,CAAC"}

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

@@ -0,0 +1,4 @@
+export * from "./BlockPanel";
+export * from "./BlockStack";
+export * from "./BlockDivider";
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,7 @@
+import type { BlockPaginationProps } from "./BlockPagination.types";
+/**
+ * Page navigation with previous / next arrows. The current page is a grass
+ * block marked `aria-current="page"`; long ranges collapse into ellipses.
+ */
+export declare const BlockPagination: import("react").ForwardRefExoticComponent<BlockPaginationProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=BlockPagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlockPagination.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/BlockPagination/BlockPagination.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAGpE;;;GAGG;AACH,eAAO,MAAM,eAAe,8GA+F3B,CAAC"}

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/BlockSidebar/BlockSidebar.d.ts

@@ -0,0 +1,9 @@
+import type { BlockSidebarProps, SidebarItemProps } from "./BlockSidebar.types";
+/**
+ * Main navigation rail. Collapses to icons on tablet and hides on mobile when
+ * `responsive` (pair it with `HotbarNavigation`).
+ */
+export declare const BlockSidebar: import("react").ForwardRefExoticComponent<BlockSidebarProps & import("react").RefAttributes<HTMLElement>>;
+/** A sidebar entry. Renders `<a>` with `href`, otherwise `<button>`. */
+export declare const SidebarItem: import("react").ForwardRefExoticComponent<SidebarItemProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=BlockSidebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlockSidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/BlockSidebar/BlockSidebar.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAGhF;;;GAGG;AACH,eAAO,MAAM,YAAY,2GAiCvB,CAAC;AAEH,wEAAwE;AACxE,eAAO,MAAM,WAAW,0GAsEtB,CAAC"}

package/dist/components/navigation/BlockSidebar/BlockSidebar.js

@@ -0,0 +1,96 @@
+import { cx } from "../../../utils/cx.js";
+import { useMediaQuery } from "../../../hooks/useMediaQuery.js";
+import BlockSidebar_module_default from "./BlockSidebar.module.js";
+import { SidebarContext, useSidebar } from "./context.js";
+import { forwardRef, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { media } from "@malilion/block-ui-tokens";
+//#region src/components/navigation/BlockSidebar/BlockSidebar.tsx
+/**
+* Main navigation rail. Collapses to icons on tablet and hides on mobile when
+* `responsive` (pair it with `HotbarNavigation`).
+*/
+var BlockSidebar = forwardRef(function BlockSidebar({ header, footer, collapsed = false, responsive = true, label = "Main", className, children, ...rest }, ref) {
+	const tablet = useMediaQuery(media.tablet);
+	const isCollapsed = collapsed || responsive && tablet;
+	const context = useMemo(() => ({ collapsed: isCollapsed }), [isCollapsed]);
+	return /* @__PURE__ */ jsxs("nav", {
+		ref,
+		"aria-label": label,
+		"data-collapsed": isCollapsed || void 0,
+		"data-responsive": responsive || void 0,
+		className: cx(BlockSidebar_module_default.sidebar, className),
+		...rest,
+		children: [
+			header ? /* @__PURE__ */ jsx("div", {
+				className: BlockSidebar_module_default.header,
+				children: header
+			}) : null,
+			/* @__PURE__ */ jsx(SidebarContext.Provider, {
+				value: context,
+				children: /* @__PURE__ */ jsx("ul", {
+					className: BlockSidebar_module_default.list,
+					children
+				})
+			}),
+			footer ? /* @__PURE__ */ jsx("div", {
+				className: BlockSidebar_module_default.footer,
+				children: footer
+			}) : null
+		]
+	});
+});
+/** A sidebar entry. Renders `<a>` with `href`, otherwise `<button>`. */
+var SidebarItem = forwardRef(function SidebarItem({ icon, active = false, href, onClick, badge, disabled = false, className, children, title, ...rest }, ref) {
+	const { collapsed } = useSidebar();
+	const tooltip = title ?? (collapsed && typeof children === "string" ? children : void 0);
+	const handleClick = (event) => {
+		if (disabled) {
+			event.preventDefault();
+			return;
+		}
+		onClick?.(event);
+	};
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		icon ? /* @__PURE__ */ jsx("span", {
+			className: BlockSidebar_module_default.icon,
+			"aria-hidden": "true",
+			children: icon
+		}) : null,
+		/* @__PURE__ */ jsx("span", {
+			className: BlockSidebar_module_default.label,
+			children
+		}),
+		badge !== void 0 && badge !== null ? /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx("span", {
+			className: BlockSidebar_module_default.badge,
+			children: badge
+		})] }) : null
+	] });
+	const shared = {
+		className: cx(BlockSidebar_module_default.item, className),
+		"aria-current": active ? "page" : void 0,
+		"aria-disabled": disabled || void 0,
+		"data-active": active || void 0,
+		title: tooltip,
+		onClick: handleClick
+	};
+	return /* @__PURE__ */ jsx("li", {
+		className: BlockSidebar_module_default.listItem,
+		children: href !== void 0 ? /* @__PURE__ */ jsx("a", {
+			ref,
+			href: disabled ? void 0 : href,
+			...shared,
+			...rest,
+			children: content
+		}) : /* @__PURE__ */ jsx("button", {
+			ref,
+			type: "button",
+			...shared,
+			children: content
+		})
+	});
+});
+//#endregion
+export { BlockSidebar, SidebarItem };
+
+//# sourceMappingURL=BlockSidebar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlockSidebar.js","names":["styles","_Fragment"],"sources":["../../../../src/components/navigation/BlockSidebar/BlockSidebar.tsx"],"sourcesContent":["import { media } from \"@malilion/block-ui-tokens\";\nimport { forwardRef, useMemo, type MouseEvent, type Ref } from \"react\";\nimport { useMediaQuery } from \"../../../hooks/useMediaQuery\";\nimport { cx } from \"../../../utils/cx\";\nimport styles from \"./BlockSidebar.module.css\";\nimport type { BlockSidebarProps, SidebarItemProps } from \"./BlockSidebar.types\";\nimport { SidebarContext, useSidebar } from \"./context\";\n\n/**\n * Main navigation rail. Collapses to icons on tablet and hides on mobile when\n * `responsive` (pair it with `HotbarNavigation`).\n */\nexport const BlockSidebar = forwardRef<HTMLElement, BlockSidebarProps>(function BlockSidebar(\n  {\n    header,\n    footer,\n    collapsed = false,\n    responsive = true,\n    label = \"Main\",\n    className,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const tablet = useMediaQuery(media.tablet);\n  const isCollapsed = collapsed || (responsive && tablet);\n  const context = useMemo(() => ({ collapsed: isCollapsed }), [isCollapsed]);\n\n  return (\n    <nav\n      ref={ref}\n      aria-label={label}\n      data-collapsed={isCollapsed || undefined}\n      data-responsive={responsive || undefined}\n      className={cx(styles.sidebar, className)}\n      {...rest}\n    >\n      {header ? <div className={styles.header}>{header}</div> : null}\n      <SidebarContext.Provider value={context}>\n        <ul className={styles.list}>{children}</ul>\n      </SidebarContext.Provider>\n      {footer ? <div className={styles.footer}>{footer}</div> : null}\n    </nav>\n  );\n});\n\n/** A sidebar entry. Renders `<a>` with `href`, otherwise `<button>`. */\nexport const SidebarItem = forwardRef<HTMLElement, SidebarItemProps>(function SidebarItem(\n  {\n    icon,\n    active = false,\n    href,\n    onClick,\n    badge,\n    disabled = false,\n    className,\n    children,\n    title,\n    ...rest\n  },\n  ref,\n) {\n  const { collapsed } = useSidebar();\n  const tooltip = title ?? (collapsed && typeof children === \"string\" ? children : undefined);\n\n  const handleClick = (event: MouseEvent<HTMLElement>) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n    onClick?.(event);\n  };\n\n  const content = (\n    <>\n      {icon ? (\n        <span className={styles.icon} aria-hidden=\"true\">\n          {icon}\n        </span>\n      ) : null}\n      <span className={styles.label}>{children}</span>\n      {badge !== undefined && badge !== null ? (\n        <>\n          {\" \"}\n          <span className={styles.badge}>{badge}</span>\n        </>\n      ) : null}\n    </>\n  );\n\n  const shared = {\n    className: cx(styles.item, className),\n    \"aria-current\": active ? (\"page\" as const) : undefined,\n    \"aria-disabled\": disabled || undefined,\n    \"data-active\": active || undefined,\n    title: tooltip,\n    onClick: handleClick,\n  };\n\n  return (\n    <li className={styles.listItem}>\n      {href !== undefined ? (\n        <a\n          ref={ref as Ref<HTMLAnchorElement>}\n          href={disabled ? undefined : href}\n          {...shared}\n          {...rest}\n        >\n          {content}\n        </a>\n      ) : (\n        <button ref={ref as Ref<HTMLButtonElement>} type=\"button\" {...shared}>\n          {content}\n        </button>\n      )}\n    </li>\n  );\n});\n"],"mappings":";;;;;;;;;;;;AAYA,IAAa,eAAe,WAA2C,SAAS,aAC9E,EACE,QACA,QACA,YAAY,OACZ,aAAa,MACb,QAAQ,QACR,WACA,UACA,GAAG,QAEL,KACA;CACA,MAAM,SAAS,cAAc,MAAM,MAAM;CACzC,MAAM,cAAc,aAAc,cAAc;CAChD,MAAM,UAAU,eAAe,EAAE,WAAW,YAAY,IAAI,CAAC,WAAW,CAAC;CAEzE,OACE,qBAAC,OAAD;EACO;EACL,cAAY;EACZ,kBAAgB,eAAe,KAAA;EAC/B,mBAAiB,cAAc,KAAA;EAC/B,WAAW,GAAGA,4BAAO,SAAS,SAAS;EACvC,GAAI;EANN,UAAA;GAQG,SAAS,oBAAC,OAAD;IAAK,WAAWA,4BAAO;IAAS,UAAA;GAAY,CAAA,IAAI;GAC1D,oBAAC,eAAe,UAAhB;IAAyB,OAAO;IAC9B,UAAA,oBAAC,MAAD;KAAI,WAAWA,4BAAO;KAAO;IAAa,CAAA;GACnB,CAAA;GACxB,SAAS,oBAAC,OAAD;IAAK,WAAWA,4BAAO;IAAS,UAAA;GAAY,CAAA,IAAI;EACvD;;AAET,CAAC;;AAGD,IAAa,cAAc,WAA0C,SAAS,YAC5E,EACE,MACA,SAAS,OACT,MACA,SACA,OACA,WAAW,OACX,WACA,UACA,OACA,GAAG,QAEL,KACA;CACA,MAAM,EAAE,cAAc,WAAW;CACjC,MAAM,UAAU,UAAU,aAAa,OAAO,aAAa,WAAW,WAAW,KAAA;CAEjF,MAAM,eAAe,UAAmC;EACtD,IAAI,UAAU;GACZ,MAAM,eAAe;GACrB;EACF;EACA,UAAU,KAAK;CACjB;CAEA,MAAM,UACJ,qBAAAC,UAAA,EAAA,UAAA;EACG,OACC,oBAAC,QAAD;GAAM,WAAWD,4BAAO;GAAM,eAAY;GACvC,UAAA;EACG,CAAA,IACJ;EACJ,oBAAC,QAAD;GAAM,WAAWA,4BAAO;GAAQ;EAAe,CAAA;EAC9C,UAAU,KAAA,KAAa,UAAU,OAChC,qBAAAC,UAAA,EAAA,UAAA,CACG,KACD,oBAAC,QAAD;GAAM,WAAWD,4BAAO;GAAQ,UAAA;EAAY,CAAA,CAC5C,EAAA,CAAA,IACA;CACJ,EAAA,CAAA;CAGJ,MAAM,SAAS;EACb,WAAW,GAAGA,4BAAO,MAAM,SAAS;EACpC,gBAAgB,SAAU,SAAmB,KAAA;EAC7C,iBAAiB,YAAY,KAAA;EAC7B,eAAe,UAAU,KAAA;EACzB,OAAO;EACP,SAAS;CACX;CAEA,OACE,oBAAC,MAAD;EAAI,WAAWA,4BAAO;EACnB,UAAA,SAAS,KAAA,IACR,oBAAC,KAAD;GACO;GACL,MAAM,WAAW,KAAA,IAAY;GAC7B,GAAI;GACJ,GAAI;GAEH,UAAA;EACA,CAAA,IAEH,oBAAC,UAAD;GAAa;GAA+B,MAAK;GAAS,GAAI;GAC3D,UAAA;EACK,CAAA;CAER,CAAA;AAER,CAAC"}

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

@@ -0,0 +1,25 @@
+//#region src/components/navigation/BlockSidebar/BlockSidebar.module.css
+var sidebar = "block-sidebar-h3ahB";
+var header = "block-header-NX0dw";
+var list = "block-list-YWcM0";
+var listItem = "block-listItem-SWSlH";
+var item = "block-item-uFbXw";
+var icon = "block-icon-gZaaA";
+var label = "block-label--tdpQ";
+var badge = "block-badge-vocdh";
+var footer = "block-footer-zacyK";
+var BlockSidebar_module_default = {
+	sidebar,
+	header,
+	list,
+	listItem,
+	item,
+	icon,
+	label,
+	badge,
+	footer
+};
+//#endregion
+export { badge, BlockSidebar_module_default as default, footer, header, icon, item, label, list, listItem, sidebar };
+
+//# sourceMappingURL=BlockSidebar.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlockSidebar.module.js","names":[],"sources":["../../../../src/components/navigation/BlockSidebar/BlockSidebar.module.css"],"sourcesContent":[".sidebar {\n  display: flex;\n  flex-direction: column;\n  gap: var(--block-space-3);\n  width: var(--block-size-sidebar);\n  min-height: 100%;\n  padding: var(--block-space-3);\n  color: var(--block-text);\n  background-color: var(--block-surface-alt);\n  background-image:\n    linear-gradient(\n      color-mix(in srgb, var(--block-surface-alt) 82%, transparent),\n      color-mix(in srgb, var(--block-surface-alt) 82%, transparent)\n    ),\n    var(--block-texture);\n  background-size:\n    auto,\n    64px 64px;\n  border: var(--block-border-width) solid var(--block-border);\n  box-shadow: var(--block-shadow-bevel);\n}\n\n.sidebar[data-collapsed] {\n  width: var(--block-size-sidebar-collapsed);\n  padding-inline: var(--block-space-2);\n}\n\n.header {\n  padding-bottom: var(--block-space-3);\n  border-bottom: var(--block-border-width-thin) solid var(--block-border);\n}\n\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--block-space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.listItem {\n  display: flex;\n}\n\n.item {\n  display: flex;\n  align-items: center;\n  gap: var(--block-space-3);\n  width: 100%;\n  min-height: 40px;\n  padding: var(--block-space-1) var(--block-space-3);\n  font: inherit;\n  font-size: var(--block-font-size-md);\n  font-weight: var(--block-font-weight-medium);\n  color: var(--block-text);\n  text-align: left;\n  text-decoration: none;\n  background: transparent;\n  border: var(--block-border-width-thin) solid transparent;\n  cursor: pointer;\n  transition:\n    background-color var(--block-duration-instant) var(--block-ease-step),\n    transform var(--block-duration-instant) var(--block-ease-step);\n}\n\n.item:hover:not([aria-disabled=\"true\"]):not([data-active]) {\n  background-color: var(--block-slot-hover);\n  border-color: var(--block-border);\n}\n\n.item:active:not([aria-disabled=\"true\"]) {\n  transform: translateY(1px);\n}\n\n.item:focus-visible {\n  outline: 3px solid var(--block-focus);\n  outline-offset: 1px;\n}\n\n.item[data-active] {\n  color: var(--block-on-primary);\n  /* Stays readable on hover: the hover rule above skips the active item. */\n  background-color: var(--block-primary);\n  border-color: var(--block-border);\n  box-shadow:\n    inset 2px 2px 0 var(--block-primary-light),\n    inset -2px -3px 0 var(--block-primary-dark);\n}\n\n.item[aria-disabled=\"true\"] {\n  color: var(--block-text-muted);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  filter: drop-shadow(1px 1px 0 var(--block-border));\n}\n\n.label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.badge {\n  flex-shrink: 0;\n  min-width: 22px;\n  padding: 0 var(--block-space-1);\n  font-family: var(--block-font-display);\n  font-size: var(--block-font-size-xs);\n  text-align: center;\n  color: var(--block-on-redstone);\n  background-color: var(--block-redstone);\n  border: 1px solid var(--block-border);\n}\n\n.sidebar[data-collapsed] .item {\n  justify-content: center;\n  padding-inline: 0;\n}\n\n.sidebar[data-collapsed] .label,\n.sidebar[data-collapsed] .badge {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n.footer {\n  margin-top: auto;\n  padding-top: var(--block-space-3);\n  border-top: var(--block-border-width-thin) solid var(--block-border);\n}\n\n@media (max-width: 767.98px) {\n  .sidebar[data-responsive] {\n    display: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,30 @@
+import type { AnchorHTMLAttributes, HTMLAttributes, MouseEvent, ReactNode } from "react";
+export interface BlockSidebarProps extends HTMLAttributes<HTMLElement> {
+    /** Brand / logo area at the top. */
+    header?: ReactNode;
+    /** Content pinned to the bottom. */
+    footer?: ReactNode;
+    /** Force the icon-only rail. */
+    collapsed?: boolean;
+    /**
+     * Follow the PRD breakpoints: collapsed on tablet (768–1023px) and hidden on
+     * mobile (< 768px, use `HotbarNavigation` there). @default true
+     */
+    responsive?: boolean;
+    /** Accessible name of the `<nav>`. @default "Main" */
+    label?: string;
+    children?: ReactNode;
+}
+export interface SidebarItemProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "children"> {
+    icon?: ReactNode;
+    /** Current page — sets `aria-current="page"`. */
+    active?: boolean;
+    /** Renders a link when set, otherwise a button. */
+    href?: string;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    /** Small count or label on the right (hidden when collapsed). */
+    badge?: ReactNode;
+    disabled?: boolean;
+    children: ReactNode;
+}
+//# sourceMappingURL=BlockSidebar.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlockSidebar.types.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/BlockSidebar/BlockSidebar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzF,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,WAAW,CAAC;IACpE,oCAAoC;IACpC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,oCAAoC;IACpC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,SAAS,GAAG,UAAU,CACvB;IACC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,iEAAiE;IACjE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB"}

package/dist/components/navigation/BlockSidebar/context.d.ts

@@ -0,0 +1,7 @@
+export declare const SidebarContext: import("react").Context<{
+    collapsed: boolean;
+}>;
+export declare function useSidebar(): {
+    collapsed: boolean;
+};
+//# sourceMappingURL=context.d.ts.map

package/dist/components/navigation/BlockSidebar/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/BlockSidebar/context.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;eAA8B,OAAO;EAAyB,CAAC;AAE1F,wBAAgB,UAAU;eAF+B,OAAO;EAI/D"}

package/dist/components/navigation/BlockSidebar/context.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+//#region src/components/navigation/BlockSidebar/context.ts
+var SidebarContext = createContext({ collapsed: false });
+function useSidebar() {
+	return useContext(SidebarContext);
+}
+//#endregion
+export { SidebarContext, useSidebar };
+
+//# sourceMappingURL=context.js.map

package/dist/components/navigation/BlockSidebar/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/components/navigation/BlockSidebar/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport const SidebarContext = createContext<{ collapsed: boolean }>({ collapsed: false });\n\nexport function useSidebar() {\n  return useContext(SidebarContext);\n}\n"],"mappings":";;AAEA,IAAa,iBAAiB,cAAsC,EAAE,WAAW,MAAM,CAAC;AAExF,SAAgB,aAAa;CAC3B,OAAO,WAAW,cAAc;AAClC"}