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

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

@@ -0,0 +1,3 @@
+export { BlockSidebar, SidebarItem } from "./BlockSidebar";
+export type { BlockSidebarProps, SidebarItemProps } from "./BlockSidebar.types";
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,7 @@
+import type { BlockTabsProps } from "./BlockTabs.types";
+/**
+ * Inventory-style tabs following the WAI-ARIA tabs pattern: arrow keys move
+ * (and activate) with wrap-around, Home/End jump, disabled tabs are skipped.
+ */
+export declare const BlockTabs: import("react").ForwardRefExoticComponent<BlockTabsProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=BlockTabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTabs.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/BlockTabs/BlockTabs.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD;;;GAGG;AACH,eAAO,MAAM,SAAS,2GAwFpB,CAAC"}

package/dist/components/navigation/BlockTabs/BlockTabs.js

@@ -0,0 +1,84 @@
+import { cx } from "../../../utils/cx.js";
+import { useControllableState } from "../../../hooks/useControllableState.js";
+import BlockTabs_module_default from "./BlockTabs.module.js";
+import { forwardRef, useId, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/navigation/BlockTabs/BlockTabs.tsx
+/**
+* Inventory-style tabs following the WAI-ARIA tabs pattern: arrow keys move
+* (and activate) with wrap-around, Home/End jump, disabled tabs are skipped.
+*/
+var BlockTabs = forwardRef(function BlockTabs({ items, value, defaultValue, onValueChange, label, fullWidth = false, className, ...rest }, ref) {
+	const baseId = useId();
+	const firstEnabled = items.find((item) => !item.disabled)?.id ?? "";
+	const [active, setActive] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? firstEnabled,
+		onChange: onValueChange
+	});
+	const tabRefs = useRef(/* @__PURE__ */ new Map());
+	const enabled = items.filter((item) => !item.disabled);
+	const focusTab = (id) => {
+		setActive(id);
+		tabRefs.current.get(id)?.focus();
+	};
+	const onKeyDown = (event) => {
+		const index = enabled.findIndex((item) => item.id === active);
+		let next = null;
+		if (event.key === "ArrowRight") next = (index + 1) % enabled.length;
+		else if (event.key === "ArrowLeft") next = (index - 1 + enabled.length) % enabled.length;
+		else if (event.key === "Home") next = 0;
+		else if (event.key === "End") next = enabled.length - 1;
+		if (next === null) return;
+		event.preventDefault();
+		const target = enabled[next];
+		if (target) focusTab(target.id);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx(BlockTabs_module_default.tabs, className),
+		...rest,
+		children: [/* @__PURE__ */ jsx("div", {
+			role: "tablist",
+			tabIndex: -1,
+			"aria-label": label,
+			"aria-orientation": "horizontal",
+			className: cx(BlockTabs_module_default.list, fullWidth && BlockTabs_module_default.fullWidth),
+			onKeyDown,
+			children: items.map((item) => {
+				const selected = item.id === active;
+				return /* @__PURE__ */ jsxs("button", {
+					ref: (element) => {
+						if (element) tabRefs.current.set(item.id, element);
+						else tabRefs.current.delete(item.id);
+					},
+					type: "button",
+					role: "tab",
+					id: `${baseId}-tab-${item.id}`,
+					"aria-selected": selected,
+					"aria-controls": `${baseId}-panel-${item.id}`,
+					tabIndex: selected ? 0 : -1,
+					disabled: item.disabled,
+					className: BlockTabs_module_default.tab,
+					onClick: () => setActive(item.id),
+					children: [item.icon ? /* @__PURE__ */ jsx("span", {
+						className: BlockTabs_module_default.icon,
+						"aria-hidden": "true",
+						children: item.icon
+					}) : null, /* @__PURE__ */ jsx("span", { children: item.label })]
+				}, item.id);
+			})
+		}), items.map((item) => item.id === active ? /* @__PURE__ */ jsx("div", {
+			role: "tabpanel",
+			id: `${baseId}-panel-${item.id}`,
+			"aria-labelledby": `${baseId}-tab-${item.id}`,
+			tabIndex: 0,
+			className: BlockTabs_module_default.panel,
+			children: item.content
+		}, item.id) : null)]
+	});
+});
+//#endregion
+export { BlockTabs };
+
+//# sourceMappingURL=BlockTabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTabs.js","names":["styles"],"sources":["../../../../src/components/navigation/BlockTabs/BlockTabs.tsx"],"sourcesContent":["import { forwardRef, useId, useRef, type KeyboardEvent } from \"react\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport { cx } from \"../../../utils/cx\";\nimport styles from \"./BlockTabs.module.css\";\nimport type { BlockTabsProps } from \"./BlockTabs.types\";\n\n/**\n * Inventory-style tabs following the WAI-ARIA tabs pattern: arrow keys move\n * (and activate) with wrap-around, Home/End jump, disabled tabs are skipped.\n */\nexport const BlockTabs = forwardRef<HTMLDivElement, BlockTabsProps>(function BlockTabs(\n  { items, value, defaultValue, onValueChange, label, fullWidth = false, className, ...rest },\n  ref,\n) {\n  const baseId = useId();\n  const firstEnabled = items.find((item) => !item.disabled)?.id ?? \"\";\n  const [active, setActive] = useControllableState({\n    value,\n    defaultValue: defaultValue ?? firstEnabled,\n    onChange: onValueChange,\n  });\n  const tabRefs = useRef(new Map<string, HTMLButtonElement>());\n\n  const enabled = items.filter((item) => !item.disabled);\n\n  const focusTab = (id: string) => {\n    setActive(id);\n    tabRefs.current.get(id)?.focus();\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const index = enabled.findIndex((item) => item.id === active);\n    let next: number | null = null;\n    if (event.key === \"ArrowRight\") next = (index + 1) % enabled.length;\n    else if (event.key === \"ArrowLeft\") next = (index - 1 + enabled.length) % enabled.length;\n    else if (event.key === \"Home\") next = 0;\n    else if (event.key === \"End\") next = enabled.length - 1;\n    if (next === null) return;\n    event.preventDefault();\n    const target = enabled[next];\n    if (target) focusTab(target.id);\n  };\n\n  return (\n    <div ref={ref} className={cx(styles.tabs, className)} {...rest}>\n      <div\n        role=\"tablist\"\n        tabIndex={-1}\n        aria-label={label}\n        aria-orientation=\"horizontal\"\n        className={cx(styles.list, fullWidth && styles.fullWidth)}\n        onKeyDown={onKeyDown}\n      >\n        {items.map((item) => {\n          const selected = item.id === active;\n          return (\n            <button\n              key={item.id}\n              ref={(element) => {\n                if (element) tabRefs.current.set(item.id, element);\n                else tabRefs.current.delete(item.id);\n              }}\n              type=\"button\"\n              role=\"tab\"\n              id={`${baseId}-tab-${item.id}`}\n              aria-selected={selected}\n              aria-controls={`${baseId}-panel-${item.id}`}\n              tabIndex={selected ? 0 : -1}\n              disabled={item.disabled}\n              className={styles.tab}\n              onClick={() => setActive(item.id)}\n            >\n              {item.icon ? (\n                <span className={styles.icon} aria-hidden=\"true\">\n                  {item.icon}\n                </span>\n              ) : null}\n              <span>{item.label}</span>\n            </button>\n          );\n        })}\n      </div>\n      {items.map((item) =>\n        item.id === active ? (\n          <div\n            key={item.id}\n            role=\"tabpanel\"\n            id={`${baseId}-panel-${item.id}`}\n            aria-labelledby={`${baseId}-tab-${item.id}`}\n            tabIndex={0}\n            className={styles.panel}\n          >\n            {item.content}\n          </div>\n        ) : null,\n      )}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;AAUA,IAAa,YAAY,WAA2C,SAAS,UAC3E,EAAE,OAAO,OAAO,cAAc,eAAe,OAAO,YAAY,OAAO,WAAW,GAAG,QACrF,KACA;CACA,MAAM,SAAS,MAAM;CACrB,MAAM,eAAe,MAAM,MAAM,SAAS,CAAC,KAAK,QAAQ,CAAC,EAAE,MAAM;CACjE,MAAM,CAAC,QAAQ,aAAa,qBAAqB;EAC/C;EACA,cAAc,gBAAgB;EAC9B,UAAU;CACZ,CAAC;CACD,MAAM,UAAU,uBAAO,IAAI,IAA+B,CAAC;CAE3D,MAAM,UAAU,MAAM,QAAQ,SAAS,CAAC,KAAK,QAAQ;CAErD,MAAM,YAAY,OAAe;EAC/B,UAAU,EAAE;EACZ,QAAQ,QAAQ,IAAI,EAAE,CAAC,EAAE,MAAM;CACjC;CAEA,MAAM,aAAa,UAAyC;EAC1D,MAAM,QAAQ,QAAQ,WAAW,SAAS,KAAK,OAAO,MAAM;EAC5D,IAAI,OAAsB;EAC1B,IAAI,MAAM,QAAQ,cAAc,QAAQ,QAAQ,KAAK,QAAQ;OACxD,IAAI,MAAM,QAAQ,aAAa,QAAQ,QAAQ,IAAI,QAAQ,UAAU,QAAQ;OAC7E,IAAI,MAAM,QAAQ,QAAQ,OAAO;OACjC,IAAI,MAAM,QAAQ,OAAO,OAAO,QAAQ,SAAS;EACtD,IAAI,SAAS,MAAM;EACnB,MAAM,eAAe;EACrB,MAAM,SAAS,QAAQ;EACvB,IAAI,QAAQ,SAAS,OAAO,EAAE;CAChC;CAEA,OACE,qBAAC,OAAD;EAAU;EAAK,WAAW,GAAGA,yBAAO,MAAM,SAAS;EAAG,GAAI;EAA1D,UAAA,CACE,oBAAC,OAAD;GACE,MAAK;GACL,UAAU;GACV,cAAY;GACZ,oBAAiB;GACjB,WAAW,GAAGA,yBAAO,MAAM,aAAaA,yBAAO,SAAS;GAC7C;GAEV,UAAA,MAAM,KAAK,SAAS;IACnB,MAAM,WAAW,KAAK,OAAO;IAC7B,OACE,qBAAC,UAAD;KAEE,MAAM,YAAY;MAChB,IAAI,SAAS,QAAQ,QAAQ,IAAI,KAAK,IAAI,OAAO;WAC5C,QAAQ,QAAQ,OAAO,KAAK,EAAE;KACrC;KACA,MAAK;KACL,MAAK;KACL,IAAI,GAAG,OAAO,OAAO,KAAK;KAC1B,iBAAe;KACf,iBAAe,GAAG,OAAO,SAAS,KAAK;KACvC,UAAU,WAAW,IAAI;KACzB,UAAU,KAAK;KACf,WAAWA,yBAAO;KAClB,eAAe,UAAU,KAAK,EAAE;KAdlC,UAAA,CAgBG,KAAK,OACJ,oBAAC,QAAD;MAAM,WAAWA,yBAAO;MAAM,eAAY;MACvC,UAAA,KAAK;KACF,CAAA,IACJ,MACJ,oBAAC,QAAD,EAAA,UAAO,KAAK,MAAY,CAAA,CAClB;IArBD,GAAA,KAAK,EAqBJ;GAEZ,CAAC;EACE,CAAA,GACJ,MAAM,KAAK,SACV,KAAK,OAAO,SACV,oBAAC,OAAD;GAEE,MAAK;GACL,IAAI,GAAG,OAAO,SAAS,KAAK;GAC5B,mBAAiB,GAAG,OAAO,OAAO,KAAK;GACvC,UAAU;GACV,WAAWA,yBAAO;GAEjB,UAAA,KAAK;EACH,GARE,KAAK,EAQP,IACH,IACN,CACG;;AAET,CAAC"}

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

@@ -0,0 +1,19 @@
+//#region src/components/navigation/BlockTabs/BlockTabs.module.css
+var tabs = "block-tabs-IlYtm";
+var list = "block-list-ZlyAA";
+var fullWidth = "block-fullWidth-gPANW";
+var tab = "block-tab-oP0s-";
+var icon = "block-icon-W-ZM1";
+var panel = "block-panel-MWaKc";
+var BlockTabs_module_default = {
+	tabs,
+	list,
+	fullWidth,
+	tab,
+	icon,
+	panel
+};
+//#endregion
+export { BlockTabs_module_default as default, fullWidth, icon, list, panel, tab, tabs };
+
+//# sourceMappingURL=BlockTabs.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTabs.module.js","names":[],"sources":["../../../../src/components/navigation/BlockTabs/BlockTabs.module.css"],"sourcesContent":[".tabs {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.list {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  gap: var(--block-space-1);\n  overflow-x: auto;\n  scrollbar-width: thin;\n}\n\n.fullWidth .tab {\n  flex: 1;\n  justify-content: center;\n}\n\n.tab {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--block-space-2);\n  flex-shrink: 0;\n  min-height: 40px;\n  margin-bottom: calc(-1 * var(--block-border-width));\n  padding: var(--block-space-2) var(--block-space-4);\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  color: var(--block-text-muted);\n  background-color: var(--block-surface-alt);\n  border: var(--block-border-width) solid var(--block-border);\n  border-bottom-color: var(--block-border);\n  box-shadow: inset 2px 2px 0 var(--block-shadow-bevel-light);\n  cursor: pointer;\n  transition: transform var(--block-duration-instant) var(--block-ease-step);\n}\n\n.tab:hover:not(:disabled) {\n  color: var(--block-text);\n  transform: translateY(-2px);\n}\n\n.tab:focus-visible {\n  outline: 3px solid var(--block-focus);\n  outline-offset: -3px;\n}\n\n.tab[aria-selected=\"true\"] {\n  color: var(--block-text);\n  background-color: var(--block-surface);\n  border-bottom-color: var(--block-surface);\n  transform: translateY(-3px);\n  padding-bottom: calc(var(--block-space-2) + 3px);\n}\n\n.tab:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.icon {\n  display: inline-flex;\n}\n\n.panel {\n  padding: var(--block-space-4);\n  background-color: var(--block-surface);\n  border: var(--block-border-width) solid var(--block-border);\n  box-shadow: var(--block-shadow-bevel);\n}\n\n.panel:focus-visible {\n  outline: 3px solid var(--block-focus);\n  outline-offset: 2px;\n}\n"],"mappings":""}

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

@@ -0,0 +1,21 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface BlockTabItem {
+    id: string;
+    label: ReactNode;
+    content: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+export interface BlockTabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    items: BlockTabItem[];
+    /** Controlled active tab id. */
+    value?: string;
+    /** Initially active tab id. Defaults to the first enabled tab. */
+    defaultValue?: string;
+    onValueChange?: (id: string) => void;
+    /** Accessible name of the tab list. */
+    label?: string;
+    /** Stretch tabs to fill the width. */
+    fullWidth?: boolean;
+}
+//# sourceMappingURL=BlockTabs.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTabs.types.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/BlockTabs/BlockTabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,GAAG,cAAc,CAC5B;IACC,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/BlockTabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

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

@@ -0,0 +1,4 @@
+import type { BreadcrumbProps } from "./Breadcrumb.types";
+/** Breadcrumb trail. The last item is marked with `aria-current="page"`. */
+export declare const Breadcrumb: import("react").ForwardRefExoticComponent<BreadcrumbProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=Breadcrumb.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,4EAA4E;AAC5E,eAAO,MAAM,UAAU,yGA+CrB,CAAC"}

package/dist/components/navigation/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,55 @@
+import { cx } from "../../../utils/cx.js";
+import Breadcrumb_module_default from "./Breadcrumb.module.js";
+import { forwardRef } from "react";
+import { ChevronRightIcon } from "@malilion/block-ui-icons";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/navigation/Breadcrumb/Breadcrumb.tsx
+/** Breadcrumb trail. The last item is marked with `aria-current="page"`. */
+var Breadcrumb = forwardRef(function Breadcrumb({ items, separator, label = "Breadcrumb", className, ...rest }, ref) {
+	return /* @__PURE__ */ jsx("nav", {
+		ref,
+		"aria-label": label,
+		className: cx(Breadcrumb_module_default.breadcrumb, className),
+		...rest,
+		children: /* @__PURE__ */ jsx("ol", {
+			className: Breadcrumb_module_default.list,
+			children: items.map((item, index) => {
+				const current = index === items.length - 1;
+				const content = /* @__PURE__ */ jsxs(Fragment, { children: [item.icon ? /* @__PURE__ */ jsx("span", {
+					className: Breadcrumb_module_default.icon,
+					"aria-hidden": "true",
+					children: item.icon
+				}) : null, /* @__PURE__ */ jsx("span", { children: item.label })] });
+				return /* @__PURE__ */ jsxs("li", {
+					className: Breadcrumb_module_default.item,
+					children: [current ? /* @__PURE__ */ jsx("span", {
+						className: Breadcrumb_module_default.current,
+						"aria-current": "page",
+						children: content
+					}) : item.href !== void 0 ? /* @__PURE__ */ jsx("a", {
+						href: item.href,
+						onClick: item.onClick,
+						className: Breadcrumb_module_default.link,
+						children: content
+					}) : item.onClick ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: item.onClick,
+						className: Breadcrumb_module_default.link,
+						children: content
+					}) : /* @__PURE__ */ jsx("span", {
+						className: Breadcrumb_module_default.text,
+						children: content
+					}), !current ? /* @__PURE__ */ jsx("span", {
+						className: Breadcrumb_module_default.separator,
+						"aria-hidden": "true",
+						children: separator ?? /* @__PURE__ */ jsx(ChevronRightIcon, { size: 16 })
+					}) : null]
+				}, index);
+			})
+		})
+	});
+});
+//#endregion
+export { Breadcrumb };
+
+//# sourceMappingURL=Breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.js","names":["styles","_Fragment"],"sources":["../../../../src/components/navigation/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@malilion/block-ui-icons\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../../utils/cx\";\nimport styles from \"./Breadcrumb.module.css\";\nimport type { BreadcrumbProps } from \"./Breadcrumb.types\";\n\n/** Breadcrumb trail. The last item is marked with `aria-current=\"page\"`. */\nexport const Breadcrumb = forwardRef<HTMLElement, BreadcrumbProps>(function Breadcrumb(\n  { items, separator, label = \"Breadcrumb\", className, ...rest },\n  ref,\n) {\n  return (\n    <nav ref={ref} aria-label={label} className={cx(styles.breadcrumb, className)} {...rest}>\n      <ol className={styles.list}>\n        {items.map((item, index) => {\n          const current = index === items.length - 1;\n          const content = (\n            <>\n              {item.icon ? (\n                <span className={styles.icon} aria-hidden=\"true\">\n                  {item.icon}\n                </span>\n              ) : null}\n              <span>{item.label}</span>\n            </>\n          );\n          return (\n            <li key={index} className={styles.item}>\n              {current ? (\n                <span className={styles.current} aria-current=\"page\">\n                  {content}\n                </span>\n              ) : item.href !== undefined ? (\n                <a href={item.href} onClick={item.onClick} className={styles.link}>\n                  {content}\n                </a>\n              ) : item.onClick ? (\n                <button type=\"button\" onClick={item.onClick} className={styles.link}>\n                  {content}\n                </button>\n              ) : (\n                <span className={styles.text}>{content}</span>\n              )}\n              {!current ? (\n                <span className={styles.separator} aria-hidden=\"true\">\n                  {separator ?? <ChevronRightIcon size={16} />}\n                </span>\n              ) : null}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n});\n"],"mappings":";;;;;;;AAOA,IAAa,aAAa,WAAyC,SAAS,WAC1E,EAAE,OAAO,WAAW,QAAQ,cAAc,WAAW,GAAG,QACxD,KACA;CACA,OACE,oBAAC,OAAD;EAAU;EAAK,cAAY;EAAO,WAAW,GAAGA,0BAAO,YAAY,SAAS;EAAG,GAAI;EACjF,UAAA,oBAAC,MAAD;GAAI,WAAWA,0BAAO;GACnB,UAAA,MAAM,KAAK,MAAM,UAAU;IAC1B,MAAM,UAAU,UAAU,MAAM,SAAS;IACzC,MAAM,UACJ,qBAAAC,UAAA,EAAA,UAAA,CACG,KAAK,OACJ,oBAAC,QAAD;KAAM,WAAWD,0BAAO;KAAM,eAAY;KACvC,UAAA,KAAK;IACF,CAAA,IACJ,MACJ,oBAAC,QAAD,EAAA,UAAO,KAAK,MAAY,CAAA,CACxB,EAAA,CAAA;IAEJ,OACE,qBAAC,MAAD;KAAgB,WAAWA,0BAAO;KAAlC,UAAA,CACG,UACC,oBAAC,QAAD;MAAM,WAAWA,0BAAO;MAAS,gBAAa;MAC3C,UAAA;KACG,CAAA,IACJ,KAAK,SAAS,KAAA,IAChB,oBAAC,KAAD;MAAG,MAAM,KAAK;MAAM,SAAS,KAAK;MAAS,WAAWA,0BAAO;MAC1D,UAAA;KACA,CAAA,IACD,KAAK,UACP,oBAAC,UAAD;MAAQ,MAAK;MAAS,SAAS,KAAK;MAAS,WAAWA,0BAAO;MAC5D,UAAA;KACK,CAAA,IAER,oBAAC,QAAD;MAAM,WAAWA,0BAAO;MAAO,UAAA;KAAc,CAAA,GAE9C,CAAC,UACA,oBAAC,QAAD;MAAM,WAAWA,0BAAO;MAAW,eAAY;MAC5C,UAAA,aAAa,oBAAC,kBAAD,EAAkB,MAAM,GAAK,CAAA;KACvC,CAAA,IACJ,IACF;IArBK,GAAA,KAqBL;GAER,CAAC;EACC,CAAA;CACD,CAAA;AAET,CAAC"}

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

@@ -0,0 +1,23 @@
+//#region src/components/navigation/Breadcrumb/Breadcrumb.module.css
+var breadcrumb = "block-breadcrumb-vJJMF";
+var list = "block-list-cbSAq";
+var item = "block-item-wjD2X";
+var link = "block-link-C5Nw-";
+var text = "block-text-Vciwx";
+var current = "block-current-2-DmQ";
+var separator = "block-separator-5IdKi";
+var icon = "block-icon-K3wJY";
+var Breadcrumb_module_default = {
+	breadcrumb,
+	list,
+	item,
+	link,
+	text,
+	current,
+	separator,
+	icon
+};
+//#endregion
+export { breadcrumb, current, Breadcrumb_module_default as default, icon, item, link, list, separator, text };
+
+//# sourceMappingURL=Breadcrumb.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.module.js","names":[],"sources":["../../../../src/components/navigation/Breadcrumb/Breadcrumb.module.css"],"sourcesContent":[".breadcrumb {\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  font-size: var(--block-font-size-sm);\n}\n\n.item {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--block-space-1);\n}\n\n.link,\n.text,\n.current {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--block-space-1);\n  padding: 2px var(--block-space-1);\n}\n\n.link {\n  font: inherit;\n  color: var(--block-text-muted);\n  text-decoration: underline;\n  text-decoration-thickness: 2px;\n  text-underline-offset: 3px;\n  background: none;\n  border: 0;\n  cursor: pointer;\n}\n\n.link:hover {\n  color: var(--block-text);\n  background-color: var(--block-slot-hover);\n}\n\n.link:focus-visible {\n  outline: 3px solid var(--block-focus);\n  outline-offset: 1px;\n}\n\n.text {\n  color: var(--block-text-muted);\n}\n\n.current {\n  font-weight: var(--block-font-weight-bold);\n  color: var(--block-text);\n}\n\n.separator,\n.icon {\n  display: inline-flex;\n  color: var(--block-text-muted);\n}\n"],"mappings":""}

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

@@ -0,0 +1,16 @@
+import type { HTMLAttributes, MouseEvent, ReactNode } from "react";
+export interface BreadcrumbItem {
+    label: ReactNode;
+    href?: string;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    icon?: ReactNode;
+}
+export interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
+    /** Trail items. The last item is the current page. */
+    items: BreadcrumbItem[];
+    /** Separator between items. Defaults to a pixel chevron. */
+    separator?: ReactNode;
+    /** Accessible name. @default "Breadcrumb" */
+    label?: string;
+}
+//# sourceMappingURL=Breadcrumb.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.types.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/Breadcrumb/Breadcrumb.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,WAAW,CAAC;IAClE,sDAAsD;IACtD,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

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

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

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

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

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

@@ -0,0 +1,4 @@
+import type { HotbarNavigationProps } from "./HotbarNavigation.types";
+/** Mobile bottom navigation styled as a hotbar (max 5 items). */
+export declare const HotbarNavigation: import("react").ForwardRefExoticComponent<HotbarNavigationProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=HotbarNavigation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HotbarNavigation.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/HotbarNavigation/HotbarNavigation.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE,iEAAiE;AACjE,eAAO,MAAM,gBAAgB,+GAmF5B,CAAC"}

package/dist/components/navigation/HotbarNavigation/HotbarNavigation.js

@@ -0,0 +1,85 @@
+import { cx } from "../../../utils/cx.js";
+import { useControllableState } from "../../../hooks/useControllableState.js";
+import HotbarNavigation_module_default from "./HotbarNavigation.module.js";
+import { forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/navigation/HotbarNavigation/HotbarNavigation.tsx
+/** Mobile bottom navigation styled as a hotbar (max 5 items). */
+var HotbarNavigation = forwardRef(function HotbarNavigation({ items, value, defaultValue, onValueChange, maxItems = 5, fixed = false, mobileOnly = false, label = "Quick navigation", className, ...rest }, ref) {
+	const visible = items.slice(0, maxItems);
+	const [active, setActive] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? visible[0]?.id ?? "",
+		onChange: onValueChange
+	});
+	return /* @__PURE__ */ jsx("nav", {
+		ref,
+		"aria-label": label,
+		"data-fixed": fixed || void 0,
+		"data-mobile-only": mobileOnly || void 0,
+		className: cx(HotbarNavigation_module_default.nav, className),
+		...rest,
+		children: /* @__PURE__ */ jsx("ul", {
+			className: HotbarNavigation_module_default.list,
+			children: visible.map((item, index) => {
+				const current = item.id === active;
+				const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: HotbarNavigation_module_default.slot,
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: HotbarNavigation_module_default.icon,
+								"aria-hidden": "true",
+								children: item.icon
+							}),
+							item.badge !== void 0 && item.badge !== null ? /* @__PURE__ */ jsx("span", {
+								className: HotbarNavigation_module_default.badge,
+								"aria-hidden": "true",
+								children: item.badge
+							}) : null,
+							/* @__PURE__ */ jsx("span", {
+								className: HotbarNavigation_module_default.key,
+								"aria-hidden": "true",
+								children: index + 1
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: HotbarNavigation_module_default.label,
+						children: item.label
+					}),
+					item.badge !== void 0 && item.badge !== null ? /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsxs("span", {
+						className: "block-visually-hidden",
+						children: [
+							"(",
+							item.badge,
+							")"
+						]
+					})] }) : null
+				] });
+				const shared = {
+					className: HotbarNavigation_module_default.item,
+					"aria-current": current ? "page" : void 0,
+					"data-active": current || void 0,
+					onClick: () => setActive(item.id)
+				};
+				return /* @__PURE__ */ jsx("li", {
+					className: HotbarNavigation_module_default.listItem,
+					children: item.href !== void 0 ? /* @__PURE__ */ jsx("a", {
+						href: item.href,
+						...shared,
+						children: content
+					}) : /* @__PURE__ */ jsx("button", {
+						type: "button",
+						...shared,
+						children: content
+					})
+				}, item.id);
+			})
+		})
+	});
+});
+//#endregion
+export { HotbarNavigation };
+
+//# sourceMappingURL=HotbarNavigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HotbarNavigation.js","names":["styles","_Fragment"],"sources":["../../../../src/components/navigation/HotbarNavigation/HotbarNavigation.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport { cx } from \"../../../utils/cx\";\nimport styles from \"./HotbarNavigation.module.css\";\nimport type { HotbarNavigationProps } from \"./HotbarNavigation.types\";\n\n/** Mobile bottom navigation styled as a hotbar (max 5 items). */\nexport const HotbarNavigation = forwardRef<HTMLElement, HotbarNavigationProps>(\n  function HotbarNavigation(\n    {\n      items,\n      value,\n      defaultValue,\n      onValueChange,\n      maxItems = 5,\n      fixed = false,\n      mobileOnly = false,\n      label = \"Quick navigation\",\n      className,\n      ...rest\n    },\n    ref,\n  ) {\n    const visible = items.slice(0, maxItems);\n    const [active, setActive] = useControllableState({\n      value,\n      defaultValue: defaultValue ?? visible[0]?.id ?? \"\",\n      onChange: onValueChange,\n    });\n\n    return (\n      <nav\n        ref={ref}\n        aria-label={label}\n        data-fixed={fixed || undefined}\n        data-mobile-only={mobileOnly || undefined}\n        className={cx(styles.nav, className)}\n        {...rest}\n      >\n        <ul className={styles.list}>\n          {visible.map((item, index) => {\n            const current = item.id === active;\n            const content = (\n              <>\n                <span className={styles.slot}>\n                  <span className={styles.icon} aria-hidden=\"true\">\n                    {item.icon}\n                  </span>\n                  {item.badge !== undefined && item.badge !== null ? (\n                    <span className={styles.badge} aria-hidden=\"true\">\n                      {item.badge}\n                    </span>\n                  ) : null}\n                  <span className={styles.key} aria-hidden=\"true\">\n                    {index + 1}\n                  </span>\n                </span>\n                <span className={styles.label}>{item.label}</span>\n                {item.badge !== undefined && item.badge !== null ? (\n                  <>\n                    {\" \"}\n                    <span className=\"block-visually-hidden\">({item.badge})</span>\n                  </>\n                ) : null}\n              </>\n            );\n            const shared = {\n              className: styles.item,\n              \"aria-current\": current ? (\"page\" as const) : undefined,\n              \"data-active\": current || undefined,\n              onClick: () => setActive(item.id),\n            };\n            return (\n              <li key={item.id} className={styles.listItem}>\n                {item.href !== undefined ? (\n                  <a href={item.href} {...shared}>\n                    {content}\n                  </a>\n                ) : (\n                  <button type=\"button\" {...shared}>\n                    {content}\n                  </button>\n                )}\n              </li>\n            );\n          })}\n        </ul>\n      </nav>\n    );\n  },\n);\n"],"mappings":";;;;;;;AAOA,IAAa,mBAAmB,WAC9B,SAAS,iBACP,EACE,OACA,OACA,cACA,eACA,WAAW,GACX,QAAQ,OACR,aAAa,OACb,QAAQ,oBACR,WACA,GAAG,QAEL,KACA;CACA,MAAM,UAAU,MAAM,MAAM,GAAG,QAAQ;CACvC,MAAM,CAAC,QAAQ,aAAa,qBAAqB;EAC/C;EACA,cAAc,gBAAgB,QAAQ,EAAE,EAAE,MAAM;EAChD,UAAU;CACZ,CAAC;CAED,OACE,oBAAC,OAAD;EACO;EACL,cAAY;EACZ,cAAY,SAAS,KAAA;EACrB,oBAAkB,cAAc,KAAA;EAChC,WAAW,GAAGA,gCAAO,KAAK,SAAS;EACnC,GAAI;EAEJ,UAAA,oBAAC,MAAD;GAAI,WAAWA,gCAAO;GACnB,UAAA,QAAQ,KAAK,MAAM,UAAU;IAC5B,MAAM,UAAU,KAAK,OAAO;IAC5B,MAAM,UACJ,qBAAAC,UAAA,EAAA,UAAA;KACE,qBAAC,QAAD;MAAM,WAAWD,gCAAO;MAAxB,UAAA;OACE,oBAAC,QAAD;QAAM,WAAWA,gCAAO;QAAM,eAAY;QACvC,UAAA,KAAK;OACF,CAAA;OACL,KAAK,UAAU,KAAA,KAAa,KAAK,UAAU,OAC1C,oBAAC,QAAD;QAAM,WAAWA,gCAAO;QAAO,eAAY;QACxC,UAAA,KAAK;OACF,CAAA,IACJ;OACJ,oBAAC,QAAD;QAAM,WAAWA,gCAAO;QAAK,eAAY;QACtC,UAAA,QAAQ;OACL,CAAA;MACF;;KACN,oBAAC,QAAD;MAAM,WAAWA,gCAAO;MAAQ,UAAA,KAAK;KAAY,CAAA;KAChD,KAAK,UAAU,KAAA,KAAa,KAAK,UAAU,OAC1C,qBAAAC,UAAA,EAAA,UAAA,CACG,KACD,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA;OAAwC;OAAE,KAAK;OAAM;MAAO;KAC5D,CAAA,CAAA,EAAA,CAAA,IACA;IACJ,EAAA,CAAA;IAEJ,MAAM,SAAS;KACb,WAAWD,gCAAO;KAClB,gBAAgB,UAAW,SAAmB,KAAA;KAC9C,eAAe,WAAW,KAAA;KAC1B,eAAe,UAAU,KAAK,EAAE;IAClC;IACA,OACE,oBAAC,MAAD;KAAkB,WAAWA,gCAAO;KACjC,UAAA,KAAK,SAAS,KAAA,IACb,oBAAC,KAAD;MAAG,MAAM,KAAK;MAAM,GAAI;MACrB,UAAA;KACA,CAAA,IAEH,oBAAC,UAAD;MAAQ,MAAK;MAAS,GAAI;MACvB,UAAA;KACK,CAAA;IAER,GAVK,KAAK,EAUV;GAER,CAAC;EACC,CAAA;CACD,CAAA;AAET,CACF"}

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

@@ -0,0 +1,25 @@
+//#region src/components/navigation/HotbarNavigation/HotbarNavigation.module.css
+var nav = "block-nav-r51gV";
+var list = "block-list-AQL27";
+var listItem = "block-listItem-b5cwk";
+var item = "block-item-jjYZK";
+var slot = "block-slot-F51--";
+var icon = "block-icon-mxYZ7";
+var key = "block-key-Qv7Lz";
+var badge = "block-badge-NbkzF";
+var label = "block-label-VCYEY";
+var HotbarNavigation_module_default = {
+	nav,
+	list,
+	listItem,
+	item,
+	slot,
+	icon,
+	key,
+	badge,
+	label
+};
+//#endregion
+export { badge, HotbarNavigation_module_default as default, icon, item, key, label, list, listItem, nav, slot };
+
+//# sourceMappingURL=HotbarNavigation.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HotbarNavigation.module.js","names":[],"sources":["../../../../src/components/navigation/HotbarNavigation/HotbarNavigation.module.css"],"sourcesContent":[".nav {\n  width: 100%;\n  padding: var(--block-space-1);\n  background-color: color-mix(in srgb, var(--block-surface-alt) 94%, transparent);\n  border: var(--block-border-width) solid var(--block-border);\n  box-shadow: var(--block-shadow-bevel);\n}\n\n.nav[data-fixed] {\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: var(--block-z-sticky);\n  padding-bottom: calc(var(--block-space-1) + env(safe-area-inset-bottom, 0px));\n  border-width: var(--block-border-width) 0 0;\n}\n\n.list {\n  display: grid;\n  grid-auto-columns: minmax(0, 1fr);\n  grid-auto-flow: column;\n  gap: var(--block-space-1);\n  max-width: 480px;\n  margin: 0 auto;\n  padding: 0;\n  list-style: none;\n}\n\n.listItem {\n  display: flex;\n  min-width: 0;\n}\n\n.item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 2px;\n  width: 100%;\n  min-height: 56px;\n  padding: 2px 0;\n  font: inherit;\n  color: var(--block-text-muted);\n  text-decoration: none;\n  background: none;\n  border: 0;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  touch-action: manipulation;\n}\n\n.slot {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  background-color: var(--block-slot);\n  border: var(--block-border-width-thin) solid var(--block-border);\n  box-shadow: var(--block-shadow-inset);\n}\n\n.icon {\n  display: inline-flex;\n}\n\n.key {\n  position: absolute;\n  left: 2px;\n  top: 0;\n  font-family: var(--block-font-display);\n  font-size: 9px;\n  color: var(--block-text-muted);\n}\n\n.badge {\n  position: absolute;\n  top: -6px;\n  right: -6px;\n  min-width: 16px;\n  padding: 0 2px;\n  font-family: var(--block-font-display);\n  font-size: 10px;\n  line-height: 14px;\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.label {\n  max-width: 100%;\n  overflow: hidden;\n  font-size: var(--block-font-size-xs);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.item[data-active] {\n  color: var(--block-text);\n}\n\n.item[data-active] .slot {\n  border-color: var(--block-primary-light);\n  box-shadow:\n    0 0 0 2px var(--block-border),\n    inset 0 0 0 2px var(--block-primary);\n  background-color: color-mix(in srgb, var(--block-primary) 20%, var(--block-slot));\n}\n\n.item:focus-visible {\n  outline: none;\n}\n\n.item:focus-visible .slot {\n  outline: 3px solid var(--block-focus);\n  outline-offset: 2px;\n}\n\n.item:active .slot {\n  transform: translateY(1px);\n}\n\n@media (min-width: 768px) {\n  .nav[data-mobile-only] {\n    display: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,25 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface HotbarNavigationItem {
+    id: string;
+    label: string;
+    icon: ReactNode;
+    href?: string;
+    badge?: ReactNode;
+}
+export interface HotbarNavigationProps extends Omit<HTMLAttributes<HTMLElement>, "onChange"> {
+    items: HotbarNavigationItem[];
+    /** Active item id (controlled). */
+    value?: string;
+    /** Initially active item id. */
+    defaultValue?: string;
+    onValueChange?: (id: string) => void;
+    /** Maximum visible items (PRD §48). @default 5 */
+    maxItems?: number;
+    /** Fix to the bottom of the viewport. @default false */
+    fixed?: boolean;
+    /** Only show below 768px (pair with a responsive `BlockSidebar`). @default false */
+    mobileOnly?: boolean;
+    /** Accessible name. @default "Quick navigation" */
+    label?: string;
+}
+//# sourceMappingURL=HotbarNavigation.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HotbarNavigation.types.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/HotbarNavigation/HotbarNavigation.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,WAAW,oBAAoB;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC1F,KAAK,EAAE,oBAAoB,EAAE,CAAC;IAC9B,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wDAAwD;IACxD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oFAAoF;IACpF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/HotbarNavigation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC"}

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +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;AACnC,cAAc,mBAAmB,CAAC"}

package/dist/hooks/index.d.ts

@@ -0,0 +1,7 @@
+export { useControllableState } from "./useControllableState";
+export type { ControllableStateOptions } from "./useControllableState";
+export { useFocusTrap } from "./useFocusTrap";
+export type { FocusTrapOptions } from "./useFocusTrap";
+export { useDigitHotkeys } from "./useDigitHotkeys";
+export { useMediaQuery } from "./useMediaQuery";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,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"}