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

package/dist/components/inventory/Inventory/Inventory.js

@@ -0,0 +1,45 @@
+import { cx } from "../../../utils/cx.js";
+import { BlockPanel } from "../../layout/BlockPanel/BlockPanel.js";
+import Inventory_module_default from "./Inventory.module.js";
+import { forwardRef, useId } from "react";
+import { ChestIcon } from "@malilion/block-ui-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/inventory/Inventory/Inventory.tsx
+/**
+* Inventory window — a panel that stacks `InventorySection`s (grids, hotbar).
+* Use `variant="chest"` for storage containers.
+*/
+var Inventory = forwardRef(function Inventory({ title = "Inventory", variant = "default", icon, className, children, ...rest }, ref) {
+	return /* @__PURE__ */ jsx(BlockPanel, {
+		ref,
+		title,
+		icon: icon ?? (variant === "chest" ? /* @__PURE__ */ jsx(ChestIcon, { size: 24 }) : void 0),
+		"data-inventory": variant,
+		className: cx(Inventory_module_default.inventory, variant === "chest" && Inventory_module_default.chest, className),
+		...rest,
+		children: /* @__PURE__ */ jsx("div", {
+			className: Inventory_module_default.sections,
+			children
+		})
+	});
+});
+/** A titled group inside an `Inventory` (e.g. main storage, hotbar). */
+var InventorySection = forwardRef(function InventorySection({ title, className, children, ...rest }, ref) {
+	const titleId = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: title ? "group" : void 0,
+		"aria-labelledby": title ? titleId : void 0,
+		className: cx(Inventory_module_default.section, className),
+		...rest,
+		children: [title ? /* @__PURE__ */ jsx("p", {
+			id: titleId,
+			className: Inventory_module_default.sectionTitle,
+			children: title
+		}) : null, children]
+	});
+});
+//#endregion
+export { Inventory, InventorySection };
+
+//# sourceMappingURL=Inventory.js.map

package/dist/components/inventory/Inventory/Inventory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Inventory.js","names":["styles"],"sources":["../../../../src/components/inventory/Inventory/Inventory.tsx"],"sourcesContent":["import { ChestIcon } from \"@malilion/block-ui-icons\";\nimport { forwardRef, useId } from \"react\";\nimport { cx } from \"../../../utils/cx\";\nimport { BlockPanel } from \"../../layout/BlockPanel/BlockPanel\";\nimport styles from \"./Inventory.module.css\";\nimport type { InventoryProps, InventorySectionProps } from \"./Inventory.types\";\n\n/**\n * Inventory window — a panel that stacks `InventorySection`s (grids, hotbar).\n * Use `variant=\"chest\"` for storage containers.\n */\nexport const Inventory = forwardRef<HTMLElement, InventoryProps>(function Inventory(\n  { title = \"Inventory\", variant = \"default\", icon, className, children, ...rest },\n  ref,\n) {\n  return (\n    <BlockPanel\n      ref={ref}\n      title={title}\n      icon={icon ?? (variant === \"chest\" ? <ChestIcon size={24} /> : undefined)}\n      data-inventory={variant}\n      className={cx(styles.inventory, variant === \"chest\" && styles.chest, className)}\n      {...rest}\n    >\n      <div className={styles.sections}>{children}</div>\n    </BlockPanel>\n  );\n});\n\n/** A titled group inside an `Inventory` (e.g. main storage, hotbar). */\nexport const InventorySection = forwardRef<HTMLDivElement, InventorySectionProps>(\n  function InventorySection({ title, className, children, ...rest }, ref) {\n    const titleId = useId();\n    return (\n      <div\n        ref={ref}\n        role={title ? \"group\" : undefined}\n        aria-labelledby={title ? titleId : undefined}\n        className={cx(styles.section, className)}\n        {...rest}\n      >\n        {title ? (\n          <p id={titleId} className={styles.sectionTitle}>\n            {title}\n          </p>\n        ) : null}\n        {children}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;AAWA,IAAa,YAAY,WAAwC,SAAS,UACxE,EAAE,QAAQ,aAAa,UAAU,WAAW,MAAM,WAAW,UAAU,GAAG,QAC1E,KACA;CACA,OACE,oBAAC,YAAD;EACO;EACE;EACP,MAAM,SAAS,YAAY,UAAU,oBAAC,WAAD,EAAW,MAAM,GAAK,CAAA,IAAI,KAAA;EAC/D,kBAAgB;EAChB,WAAW,GAAGA,yBAAO,WAAW,YAAY,WAAWA,yBAAO,OAAO,SAAS;EAC9E,GAAI;EAEJ,UAAA,oBAAC,OAAD;GAAK,WAAWA,yBAAO;GAAW;EAAc,CAAA;CACtC,CAAA;AAEhB,CAAC;;AAGD,IAAa,mBAAmB,WAC9B,SAAS,iBAAiB,EAAE,OAAO,WAAW,UAAU,GAAG,QAAQ,KAAK;CACtE,MAAM,UAAU,MAAM;CACtB,OACE,qBAAC,OAAD;EACO;EACL,MAAM,QAAQ,UAAU,KAAA;EACxB,mBAAiB,QAAQ,UAAU,KAAA;EACnC,WAAW,GAAGA,yBAAO,SAAS,SAAS;EACvC,GAAI;EALN,UAAA,CAOG,QACC,oBAAC,KAAD;GAAG,IAAI;GAAS,WAAWA,yBAAO;GAC/B,UAAA;EACA,CAAA,IACD,MACH,QACE;;AAET,CACF"}

package/dist/components/inventory/Inventory/Inventory.module.js

@@ -0,0 +1,17 @@
+//#region src/components/inventory/Inventory/Inventory.module.css
+var inventory = "block-inventory-2rQG-";
+var sections = "block-sections-eBp6Y";
+var section = "block-section-9f6XF";
+var sectionTitle = "block-sectionTitle--Jobo";
+var chest = "block-chest-woG1o";
+var Inventory_module_default = {
+	inventory,
+	sections,
+	section,
+	sectionTitle,
+	chest
+};
+//#endregion
+export { chest, Inventory_module_default as default, inventory, section, sectionTitle, sections };
+
+//# sourceMappingURL=Inventory.module.js.map

package/dist/components/inventory/Inventory/Inventory.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Inventory.module.js","names":[],"sources":["../../../../src/components/inventory/Inventory/Inventory.module.css"],"sourcesContent":[".inventory {\n  width: 100%;\n}\n\n.sections {\n  display: flex;\n  flex-direction: column;\n  gap: var(--block-space-4);\n}\n\n.section {\n  display: flex;\n  flex-direction: column;\n  gap: var(--block-space-2);\n}\n\n.sectionTitle {\n  margin: 0;\n  font-family: var(--block-font-display);\n  font-size: var(--block-font-size-md);\n  font-weight: var(--block-font-weight-bold);\n  letter-spacing: var(--block-letter-spacing-wide);\n  text-transform: uppercase;\n  text-shadow: var(--block-shadow-text);\n}\n\n.chest {\n  --block-slot: color-mix(in srgb, var(--block-wood-dark) 45%, var(--block-black));\n  --block-slot-hover: color-mix(in srgb, var(--block-wood-dark) 65%, var(--block-black));\n  --block-surface-header: var(--block-wood-dark);\n}\n"],"mappings":""}

package/dist/components/inventory/Inventory/Inventory.types.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockPanelProps } from "../../layout/BlockPanel/BlockPanel.types";
+export interface InventoryProps extends Omit<BlockPanelProps, "variant"> {
+    /** @default "Inventory" */
+    title?: ReactNode;
+    /** `chest` renders a wooden chest container. @default "default" */
+    variant?: "default" | "chest";
+}
+export interface InventorySectionProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Small pixel heading (e.g. "Hotbar"). */
+    title?: ReactNode;
+    children?: ReactNode;
+}
+//# sourceMappingURL=Inventory.types.d.ts.map

package/dist/components/inventory/Inventory/Inventory.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Inventory.types.d.ts","sourceRoot":"","sources":["../../../../src/components/inventory/Inventory/Inventory.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAEhF,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC;IACtE,2BAA2B;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mEAAmE;IACnE,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC/B;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC1F,2CAA2C;IAC3C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB"}

package/dist/components/inventory/Inventory/index.d.ts

@@ -0,0 +1,3 @@
+export { Inventory, InventorySection } from "./Inventory";
+export type { InventoryProps, InventorySectionProps } from "./Inventory.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/inventory/Inventory/index.d.ts.map

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

package/dist/components/inventory/InventoryGrid/InventoryGrid.d.ts

@@ -0,0 +1,9 @@
+import type { InventoryGridProps } from "./InventoryGrid.types";
+/**
+ * CSS-grid inventory with ARIA grid semantics and roving focus.
+ *
+ * Keyboard: arrows move, Home/End jump within a row (Ctrl for the whole grid),
+ * Enter/Space selects, Escape closes a slot tooltip.
+ */
+export declare const InventoryGrid: import("react").ForwardRefExoticComponent<InventoryGridProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=InventoryGrid.d.ts.map

package/dist/components/inventory/InventoryGrid/InventoryGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InventoryGrid.d.ts","sourceRoot":"","sources":["../../../../src/components/inventory/InventoryGrid/InventoryGrid.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAQhE;;;;;GAKG;AACH,eAAO,MAAM,aAAa,+GAwIxB,CAAC"}

package/dist/components/inventory/InventoryGrid/InventoryGrid.js

@@ -0,0 +1,127 @@
+import { cx } from "../../../utils/cx.js";
+import { useControllableState } from "../../../hooks/useControllableState.js";
+import { InventoryGridContext, SlotIndexContext } from "./context.js";
+import { InventorySlot } from "../InventorySlot/InventorySlot.js";
+import InventoryGrid_module_default from "./InventoryGrid.module.js";
+import { Children, forwardRef, useCallback, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/inventory/InventoryGrid/InventoryGrid.tsx
+function chunk(items, size) {
+	const rows = [];
+	for (let i = 0; i < items.length; i += size) rows.push(items.slice(i, i + size));
+	return rows;
+}
+/**
+* CSS-grid inventory with ARIA grid semantics and roving focus.
+*
+* Keyboard: arrows move, Home/End jump within a row (Ctrl for the whole grid),
+* Enter/Space selects, Escape closes a slot tooltip.
+*/
+var InventoryGrid = forwardRef(function InventoryGrid({ columns = 9, rows, slotSize = "md", children, selectedIndex, defaultSelectedIndex = null, onSelectedIndexChange, selectionFollowsFocus = false, wrap = false, label = "Inventory", className, onKeyDown, ...rest }, ref) {
+	const cols = Math.max(1, Math.floor(columns));
+	const items = Children.toArray(children);
+	if (rows !== void 0) for (let i = items.length; i < cols * rows; i += 1) items.push(/* @__PURE__ */ jsx(InventorySlot, {}, `block-empty-${i}`));
+	const count = items.length;
+	const [selected, setSelected] = useControllableState({
+		value: selectedIndex,
+		defaultValue: defaultSelectedIndex,
+		onChange: (index) => {
+			if (index !== null) onSelectedIndexChange?.(index);
+		}
+	});
+	const [focusedIndex, setFocusedIndex] = useState(selected ?? 0);
+	const [previousSelected, setPreviousSelected] = useState(selected);
+	if (selected !== previousSelected) {
+		setPreviousSelected(selected);
+		if (selected !== null) setFocusedIndex(selected);
+	}
+	const tabStop = Math.min(focusedIndex, Math.max(0, count - 1));
+	const cells = useRef(/* @__PURE__ */ new Map());
+	const registerCell = useCallback((index, element) => {
+		if (element) cells.current.set(index, element);
+		else cells.current.delete(index);
+	}, []);
+	const context = useMemo(() => ({
+		focusedIndex: tabStop,
+		selectedIndex: selected,
+		setFocusedIndex,
+		select: setSelected,
+		registerCell
+	}), [
+		tabStop,
+		selected,
+		setSelected,
+		registerCell
+	]);
+	const moveTo = (index) => {
+		setFocusedIndex(index);
+		cells.current.get(index)?.focus();
+		if (selectionFollowsFocus) {
+			if (cells.current.get(index)?.getAttribute("aria-disabled") !== "true") setSelected(index);
+		}
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || count === 0) return;
+		const current = tabStop;
+		const rowStart = current - current % cols;
+		const rowEnd = Math.min(rowStart + cols - 1, count - 1);
+		let next = null;
+		switch (event.key) {
+			case "ArrowRight":
+				next = current < rowEnd ? current + 1 : wrap ? rowStart : current;
+				break;
+			case "ArrowLeft":
+				next = current > rowStart ? current - 1 : wrap ? rowEnd : current;
+				break;
+			case "ArrowDown":
+				next = current + cols < count ? current + cols : current;
+				break;
+			case "ArrowUp":
+				next = current - cols >= 0 ? current - cols : current;
+				break;
+			case "Home":
+				next = event.ctrlKey ? 0 : rowStart;
+				break;
+			case "End":
+				next = event.ctrlKey ? count - 1 : rowEnd;
+				break;
+			case "Enter":
+			case " ":
+				event.preventDefault();
+				cells.current.get(current)?.click();
+				return;
+			default: return;
+		}
+		event.preventDefault();
+		if (next !== current) moveTo(next);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		role: "grid",
+		tabIndex: -1,
+		"aria-label": label,
+		"aria-rowcount": Math.ceil(count / cols),
+		"aria-colcount": cols,
+		"data-size": slotSize,
+		className: cx(InventoryGrid_module_default.grid, className),
+		style: { "--block-columns": cols },
+		onKeyDown: handleKeyDown,
+		...rest,
+		children: /* @__PURE__ */ jsx(InventoryGridContext.Provider, {
+			value: context,
+			children: chunk(items, cols).map((row, rowIndex) => /* @__PURE__ */ jsx("div", {
+				role: "row",
+				className: InventoryGrid_module_default.row,
+				children: row.map((item, colIndex) => /* @__PURE__ */ jsx(SlotIndexContext.Provider, {
+					value: rowIndex * cols + colIndex,
+					children: item
+				}, colIndex))
+			}, rowIndex))
+		})
+	});
+});
+//#endregion
+export { InventoryGrid };
+
+//# sourceMappingURL=InventoryGrid.js.map

package/dist/components/inventory/InventoryGrid/InventoryGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InventoryGrid.js","names":["styles"],"sources":["../../../../src/components/inventory/InventoryGrid/InventoryGrid.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport { cx } from \"../../../utils/cx\";\nimport { InventorySlot } from \"../InventorySlot/InventorySlot\";\nimport { InventoryGridContext, SlotIndexContext, type InventoryGridContextValue } from \"./context\";\nimport styles from \"./InventoryGrid.module.css\";\nimport type { InventoryGridProps } from \"./InventoryGrid.types\";\n\nfunction chunk<T>(items: T[], size: number): T[][] {\n  const rows: T[][] = [];\n  for (let i = 0; i < items.length; i += size) rows.push(items.slice(i, i + size));\n  return rows;\n}\n\n/**\n * CSS-grid inventory with ARIA grid semantics and roving focus.\n *\n * Keyboard: arrows move, Home/End jump within a row (Ctrl for the whole grid),\n * Enter/Space selects, Escape closes a slot tooltip.\n */\nexport const InventoryGrid = forwardRef<HTMLDivElement, InventoryGridProps>(function InventoryGrid(\n  {\n    columns = 9,\n    rows,\n    slotSize = \"md\",\n    children,\n    selectedIndex,\n    defaultSelectedIndex = null,\n    onSelectedIndexChange,\n    selectionFollowsFocus = false,\n    wrap = false,\n    label = \"Inventory\",\n    className,\n    onKeyDown,\n    ...rest\n  },\n  ref,\n) {\n  const cols = Math.max(1, Math.floor(columns));\n  const items: ReactNode[] = Children.toArray(children);\n  if (rows !== undefined) {\n    for (let i = items.length; i < cols * rows; i += 1) {\n      items.push(<InventorySlot key={`block-empty-${i}`} />);\n    }\n  }\n  const count = items.length;\n\n  const [selected, setSelected] = useControllableState<number | null>({\n    value: selectedIndex,\n    defaultValue: defaultSelectedIndex,\n    onChange: (index) => {\n      if (index !== null) onSelectedIndexChange?.(index);\n    },\n  });\n\n  const [focusedIndex, setFocusedIndex] = useState(selected ?? 0);\n  const [previousSelected, setPreviousSelected] = useState(selected);\n  if (selected !== previousSelected) {\n    setPreviousSelected(selected);\n    if (selected !== null) setFocusedIndex(selected);\n  }\n  const tabStop = Math.min(focusedIndex, Math.max(0, count - 1));\n\n  const cells = useRef(new Map<number, HTMLElement>());\n  const registerCell = useCallback((index: number, element: HTMLElement | null) => {\n    if (element) cells.current.set(index, element);\n    else cells.current.delete(index);\n  }, []);\n\n  const context = useMemo<InventoryGridContextValue>(\n    () => ({\n      focusedIndex: tabStop,\n      selectedIndex: selected,\n      setFocusedIndex,\n      select: setSelected,\n      registerCell,\n    }),\n    [tabStop, selected, setSelected, registerCell],\n  );\n\n  const moveTo = (index: number) => {\n    setFocusedIndex(index);\n    cells.current.get(index)?.focus();\n    if (selectionFollowsFocus) {\n      const cell = cells.current.get(index);\n      if (cell?.getAttribute(\"aria-disabled\") !== \"true\") setSelected(index);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    if (event.defaultPrevented || count === 0) return;\n    const current = tabStop;\n    const rowStart = current - (current % cols);\n    const rowEnd = Math.min(rowStart + cols - 1, count - 1);\n    let next: number | null = null;\n\n    switch (event.key) {\n      case \"ArrowRight\":\n        next = current < rowEnd ? current + 1 : wrap ? rowStart : current;\n        break;\n      case \"ArrowLeft\":\n        next = current > rowStart ? current - 1 : wrap ? rowEnd : current;\n        break;\n      case \"ArrowDown\":\n        next = current + cols < count ? current + cols : current;\n        break;\n      case \"ArrowUp\":\n        next = current - cols >= 0 ? current - cols : current;\n        break;\n      case \"Home\":\n        next = event.ctrlKey ? 0 : rowStart;\n        break;\n      case \"End\":\n        next = event.ctrlKey ? count - 1 : rowEnd;\n        break;\n      case \"Enter\":\n      case \" \":\n        event.preventDefault();\n        cells.current.get(current)?.click();\n        return;\n      default:\n        return;\n    }\n\n    event.preventDefault();\n    if (next !== current) moveTo(next);\n  };\n\n  return (\n    <div\n      ref={ref}\n      role=\"grid\"\n      tabIndex={-1}\n      aria-label={label}\n      aria-rowcount={Math.ceil(count / cols)}\n      aria-colcount={cols}\n      data-size={slotSize}\n      className={cx(styles.grid, className)}\n      style={{ \"--block-columns\": cols } as CSSProperties}\n      onKeyDown={handleKeyDown}\n      {...rest}\n    >\n      <InventoryGridContext.Provider value={context}>\n        {chunk(items, cols).map((row, rowIndex) => (\n          <div key={rowIndex} role=\"row\" className={styles.row}>\n            {row.map((item, colIndex) => (\n              <SlotIndexContext.Provider key={colIndex} value={rowIndex * cols + colIndex}>\n                {item}\n              </SlotIndexContext.Provider>\n            ))}\n          </div>\n        ))}\n      </InventoryGridContext.Provider>\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;AAkBA,SAAS,MAAS,OAAY,MAAqB;CACjD,MAAM,OAAc,CAAC;CACrB,KAAK,IAAI,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK,MAAM,KAAK,KAAK,MAAM,MAAM,GAAG,IAAI,IAAI,CAAC;CAC/E,OAAO;AACT;;;;;;;AAQA,IAAa,gBAAgB,WAA+C,SAAS,cACnF,EACE,UAAU,GACV,MACA,WAAW,MACX,UACA,eACA,uBAAuB,MACvB,uBACA,wBAAwB,OACxB,OAAO,OACP,QAAQ,aACR,WACA,WACA,GAAG,QAEL,KACA;CACA,MAAM,OAAO,KAAK,IAAI,GAAG,KAAK,MAAM,OAAO,CAAC;CAC5C,MAAM,QAAqB,SAAS,QAAQ,QAAQ;CACpD,IAAI,SAAS,KAAA,GACX,KAAK,IAAI,IAAI,MAAM,QAAQ,IAAI,OAAO,MAAM,KAAK,GAC/C,MAAM,KAAK,oBAAC,eAAD,CAAyC,GAArB,eAAe,GAAM,CAAC;CAGzD,MAAM,QAAQ,MAAM;CAEpB,MAAM,CAAC,UAAU,eAAe,qBAAoC;EAClE,OAAO;EACP,cAAc;EACd,WAAW,UAAU;GACnB,IAAI,UAAU,MAAM,wBAAwB,KAAK;EACnD;CACF,CAAC;CAED,MAAM,CAAC,cAAc,mBAAmB,SAAS,YAAY,CAAC;CAC9D,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,QAAQ;CACjE,IAAI,aAAa,kBAAkB;EACjC,oBAAoB,QAAQ;EAC5B,IAAI,aAAa,MAAM,gBAAgB,QAAQ;CACjD;CACA,MAAM,UAAU,KAAK,IAAI,cAAc,KAAK,IAAI,GAAG,QAAQ,CAAC,CAAC;CAE7D,MAAM,QAAQ,uBAAO,IAAI,IAAyB,CAAC;CACnD,MAAM,eAAe,aAAa,OAAe,YAAgC;EAC/E,IAAI,SAAS,MAAM,QAAQ,IAAI,OAAO,OAAO;OACxC,MAAM,QAAQ,OAAO,KAAK;CACjC,GAAG,CAAC,CAAC;CAEL,MAAM,UAAU,eACP;EACL,cAAc;EACd,eAAe;EACf;EACA,QAAQ;EACR;CACF,IACA;EAAC;EAAS;EAAU;EAAa;CAAY,CAC/C;CAEA,MAAM,UAAU,UAAkB;EAChC,gBAAgB,KAAK;EACrB,MAAM,QAAQ,IAAI,KAAK,CAAC,EAAE,MAAM;EAChC,IAAI,uBACW;OAAA,MAAM,QAAQ,IAAI,KAC3B,CAAA,EAAM,aAAa,eAAe,MAAM,QAAQ,YAAY,KAAK;EAAA;CAEzE;CAEA,MAAM,iBAAiB,UAAyC;EAC9D,YAAY,KAAK;EACjB,IAAI,MAAM,oBAAoB,UAAU,GAAG;EAC3C,MAAM,UAAU;EAChB,MAAM,WAAW,UAAW,UAAU;EACtC,MAAM,SAAS,KAAK,IAAI,WAAW,OAAO,GAAG,QAAQ,CAAC;EACtD,IAAI,OAAsB;EAE1B,QAAQ,MAAM,KAAd;GACE,KAAK;IACH,OAAO,UAAU,SAAS,UAAU,IAAI,OAAO,WAAW;IAC1D;GACF,KAAK;IACH,OAAO,UAAU,WAAW,UAAU,IAAI,OAAO,SAAS;IAC1D;GACF,KAAK;IACH,OAAO,UAAU,OAAO,QAAQ,UAAU,OAAO;IACjD;GACF,KAAK;IACH,OAAO,UAAU,QAAQ,IAAI,UAAU,OAAO;IAC9C;GACF,KAAK;IACH,OAAO,MAAM,UAAU,IAAI;IAC3B;GACF,KAAK;IACH,OAAO,MAAM,UAAU,QAAQ,IAAI;IACnC;GACF,KAAK;GACL,KAAK;IACH,MAAM,eAAe;IACrB,MAAM,QAAQ,IAAI,OAAO,CAAC,EAAE,MAAM;IAClC;GACF,SACE;EACJ;EAEA,MAAM,eAAe;EACrB,IAAI,SAAS,SAAS,OAAO,IAAI;CACnC;CAEA,OACE,oBAAC,OAAD;EACO;EACL,MAAK;EACL,UAAU;EACV,cAAY;EACZ,iBAAe,KAAK,KAAK,QAAQ,IAAI;EACrC,iBAAe;EACf,aAAW;EACX,WAAW,GAAGA,6BAAO,MAAM,SAAS;EACpC,OAAO,EAAE,mBAAmB,KAAK;EACjC,WAAW;EACX,GAAI;EAEJ,UAAA,oBAAC,qBAAqB,UAAtB;GAA+B,OAAO;GACnC,UAAA,MAAM,OAAO,IAAI,CAAC,CAAC,KAAK,KAAK,aAC5B,oBAAC,OAAD;IAAoB,MAAK;IAAM,WAAWA,6BAAO;IAC9C,UAAA,IAAI,KAAK,MAAM,aACd,oBAAC,iBAAiB,UAAlB;KAA0C,OAAO,WAAW,OAAO;KAChE,UAAA;IACwB,GAFK,QAEL,CAC5B;GACE,GANK,QAML,CACN;EAC4B,CAAA;CAC5B,CAAA;AAET,CAAC"}

package/dist/components/inventory/InventoryGrid/InventoryGrid.module.js

@@ -0,0 +1,11 @@
+//#region src/components/inventory/InventoryGrid/InventoryGrid.module.css
+var grid = "block-grid-wg7qk";
+var row = "block-row-Yy75a";
+var InventoryGrid_module_default = {
+	grid,
+	row
+};
+//#endregion
+export { InventoryGrid_module_default as default, grid, row };
+
+//# sourceMappingURL=InventoryGrid.module.js.map

package/dist/components/inventory/InventoryGrid/InventoryGrid.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InventoryGrid.module.js","names":[],"sources":["../../../../src/components/inventory/InventoryGrid/InventoryGrid.module.css"],"sourcesContent":[".grid {\n  --block-slot-size: var(--block-size-slot-md);\n  --block-slot-gap: 4px;\n\n  display: flex;\n  flex-direction: column;\n  gap: var(--block-slot-gap);\n  width: 100%;\n  max-width: calc(\n    var(--block-columns) * var(--block-slot-size) + (var(--block-columns) - 1) *\n      var(--block-slot-gap)\n  );\n}\n\n.grid[data-size=\"sm\"] {\n  --block-slot-size: var(--block-size-slot-sm);\n}\n\n.grid[data-size=\"lg\"] {\n  --block-slot-size: var(--block-size-slot-lg);\n}\n\n.row {\n  display: grid;\n  grid-template-columns: repeat(var(--block-columns), minmax(0, 1fr));\n  gap: var(--block-slot-gap);\n}\n\n@media (max-width: 767.98px) {\n  .grid {\n    --block-slot-gap: 2px;\n  }\n}\n"],"mappings":""}

package/dist/components/inventory/InventoryGrid/InventoryGrid.types.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { SlotSize } from "./context";
+export interface InventoryGridProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** @default 9 */
+    columns?: number;
+    /** When set, empty slots are added until `columns × rows` slots exist. */
+    rows?: number;
+    /** Maximum slot size; slots shrink on narrow screens. @default "md" */
+    slotSize?: SlotSize;
+    /** `InventorySlot` elements. */
+    children: ReactNode;
+    /** Controlled selected slot (`null` for none). */
+    selectedIndex?: number | null;
+    /** Initially selected slot when uncontrolled. @default null */
+    defaultSelectedIndex?: number | null;
+    onSelectedIndexChange?: (index: number) => void;
+    /** Move the selection together with keyboard focus (hotbar behaviour). */
+    selectionFollowsFocus?: boolean;
+    /** Arrow keys wrap around at row ends. */
+    wrap?: boolean;
+    /** Accessible name. @default "Inventory" */
+    label?: string;
+}
+//# sourceMappingURL=InventoryGrid.types.d.ts.map

package/dist/components/inventory/InventoryGrid/InventoryGrid.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InventoryGrid.types.d.ts","sourceRoot":"","sources":["../../../../src/components/inventory/InventoryGrid/InventoryGrid.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE1C,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC1F,iBAAiB;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,kDAAkD;IAClD,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,+DAA+D;IAC/D,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,0EAA0E;IAC1E,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,0CAA0C;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/inventory/InventoryGrid/context.d.ts

@@ -0,0 +1,14 @@
+export type SlotSize = "sm" | "md" | "lg";
+export interface InventoryGridContextValue {
+    focusedIndex: number;
+    selectedIndex: number | null;
+    setFocusedIndex: (index: number) => void;
+    select: (index: number) => void;
+    registerCell: (index: number, element: HTMLElement | null) => void;
+}
+export declare const InventoryGridContext: import("react").Context<InventoryGridContextValue | null>;
+/** Index of the slot inside its grid; -1 outside a grid. */
+export declare const SlotIndexContext: import("react").Context<number>;
+export declare function useInventoryGrid(): InventoryGridContextValue | null;
+export declare function useSlotIndex(): number;
+//# sourceMappingURL=context.d.ts.map

package/dist/components/inventory/InventoryGrid/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/components/inventory/InventoryGrid/context.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C,MAAM,WAAW,yBAAyB;IACxC,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CACpE;AAED,eAAO,MAAM,oBAAoB,2DAAwD,CAAC;AAE1F,4DAA4D;AAC5D,eAAO,MAAM,gBAAgB,iCAA4B,CAAC;AAE1D,wBAAgB,gBAAgB,IAAI,yBAAyB,GAAG,IAAI,CAEnE;AAED,wBAAgB,YAAY,IAAI,MAAM,CAErC"}

package/dist/components/inventory/InventoryGrid/context.js

@@ -0,0 +1,15 @@
+import { createContext, useContext } from "react";
+//#region src/components/inventory/InventoryGrid/context.ts
+var InventoryGridContext = createContext(null);
+/** Index of the slot inside its grid; -1 outside a grid. */
+var SlotIndexContext = createContext(-1);
+function useInventoryGrid() {
+	return useContext(InventoryGridContext);
+}
+function useSlotIndex() {
+	return useContext(SlotIndexContext);
+}
+//#endregion
+export { InventoryGridContext, SlotIndexContext, useInventoryGrid, useSlotIndex };
+
+//# sourceMappingURL=context.js.map

package/dist/components/inventory/InventoryGrid/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/components/inventory/InventoryGrid/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport type SlotSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface InventoryGridContextValue {\n  focusedIndex: number;\n  selectedIndex: number | null;\n  setFocusedIndex: (index: number) => void;\n  select: (index: number) => void;\n  registerCell: (index: number, element: HTMLElement | null) => void;\n}\n\nexport const InventoryGridContext = createContext<InventoryGridContextValue | null>(null);\n\n/** Index of the slot inside its grid; -1 outside a grid. */\nexport const SlotIndexContext = createContext<number>(-1);\n\nexport function useInventoryGrid(): InventoryGridContextValue | null {\n  return useContext(InventoryGridContext);\n}\n\nexport function useSlotIndex(): number {\n  return useContext(SlotIndexContext);\n}\n"],"mappings":";;AAYA,IAAa,uBAAuB,cAAgD,IAAI;;AAGxF,IAAa,mBAAmB,cAAsB,EAAE;AAExD,SAAgB,mBAAqD;CACnE,OAAO,WAAW,oBAAoB;AACxC;AAEA,SAAgB,eAAuB;CACrC,OAAO,WAAW,gBAAgB;AACpC"}

package/dist/components/inventory/InventoryGrid/index.d.ts

@@ -0,0 +1,4 @@
+export { InventoryGrid } from "./InventoryGrid";
+export type { InventoryGridProps } from "./InventoryGrid.types";
+export type { SlotSize } from "./context";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/inventory/InventoryGrid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inventory/InventoryGrid/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAChE,YAAY,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/inventory/InventorySlot/InventorySlot.d.ts

@@ -0,0 +1,8 @@
+import type { InventorySlotProps } from "./InventorySlot.types";
+/**
+ * A single inventory slot. Inside an `InventoryGrid` it becomes a roving-focus
+ * grid cell; standalone it is a toggle button (when `onClick` is set) or a
+ * static well.
+ */
+export declare const InventorySlot: import("react").ForwardRefExoticComponent<InventorySlotProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=InventorySlot.d.ts.map

package/dist/components/inventory/InventorySlot/InventorySlot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InventorySlot.d.ts","sourceRoot":"","sources":["../../../../src/components/inventory/InventorySlot/InventorySlot.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAIhE;;;;GAIG;AACH,eAAO,MAAM,aAAa,4GA0KxB,CAAC"}

package/dist/components/inventory/InventorySlot/InventorySlot.js

@@ -0,0 +1,151 @@
+import { cx } from "../../../utils/cx.js";
+import { mergeRefs } from "../../../utils/refs.js";
+import { useInventoryGrid, useSlotIndex } from "../InventoryGrid/context.js";
+import InventorySlot_module_default from "./InventorySlot.module.js";
+import { forwardRef, useCallback, useId, useLayoutEffect, useRef, useState } from "react";
+import { LockIcon } from "@malilion/block-ui-icons";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/inventory/InventorySlot/InventorySlot.tsx
+/**
+* A single inventory slot. Inside an `InventoryGrid` it becomes a roving-focus
+* grid cell; standalone it is a toggle button (when `onClick` is set) or a
+* static well.
+*/
+var InventorySlot = forwardRef(function InventorySlot({ selected, disabled = false, locked = false, rarity, children, onClick, tooltip, label, size = "md", className, onKeyDown, onMouseEnter, onMouseLeave, onFocus, onBlur, ...rest }, ref) {
+	const grid = useInventoryGrid();
+	const index = useSlotIndex();
+	const inGrid = grid !== null && index >= 0;
+	const inactive = disabled || locked;
+	const isSelected = selected ?? (inGrid ? grid.selectedIndex === index : false);
+	const empty = children === void 0 || children === null || children === false;
+	/** Non-interactive wells cannot carry aria-label, so their label is rendered as hidden text. */
+	const staticWell = !inGrid && !onClick;
+	const tooltipId = useId();
+	const [tooltipOpen, setTooltipOpen] = useState(false);
+	const [placement, setPlacement] = useState("right");
+	const tooltipRef = useRef(null);
+	useLayoutEffect(() => {
+		if (!tooltipOpen || !tooltipRef.current) return;
+		const rect = tooltipRef.current.getBoundingClientRect();
+		if (placement === "right" && rect.right > window.innerWidth - 8) setPlacement("left");
+	}, [tooltipOpen, placement]);
+	const register = useCallback((element) => {
+		if (inGrid) grid.registerCell(index, element);
+	}, [
+		grid,
+		inGrid,
+		index
+	]);
+	const openTooltip = () => {
+		if (tooltip) setTooltipOpen(true);
+	};
+	const closeTooltip = () => {
+		setTooltipOpen(false);
+		setPlacement("right");
+	};
+	const handleClick = () => {
+		if (inGrid) {
+			grid.setFocusedIndex(index);
+			if (!inactive) grid.select(index);
+		}
+		if (!inactive) onClick?.();
+	};
+	const handleKeyDown = (event) => {
+		if (event.key === "Escape" && tooltipOpen) {
+			event.stopPropagation();
+			closeTooltip();
+		}
+		if (inGrid && (event.key === "Enter" || event.key === " ")) {
+			event.preventDefault();
+			handleClick();
+		}
+		onKeyDown?.(event);
+	};
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("span", {
+			className: InventorySlot_module_default.content,
+			children
+		}),
+		empty && !label ? /* @__PURE__ */ jsx("span", {
+			className: "block-visually-hidden",
+			children: "Empty slot"
+		}) : null,
+		label && staticWell ? /* @__PURE__ */ jsx("span", {
+			className: "block-visually-hidden",
+			children: label
+		}) : null,
+		locked ? /* @__PURE__ */ jsx("span", {
+			className: InventorySlot_module_default.lock,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(LockIcon, { size: 16 })
+		}) : null,
+		tooltip ? /* @__PURE__ */ jsx("div", {
+			ref: tooltipRef,
+			id: tooltipId,
+			role: "tooltip",
+			"aria-hidden": "true",
+			hidden: !tooltipOpen,
+			className: InventorySlot_module_default.tooltip,
+			"data-placement": placement,
+			children: tooltip
+		}) : null
+	] });
+	const shared = {
+		className: cx(InventorySlot_module_default.slot, !inGrid && InventorySlot_module_default[size], className),
+		"data-selected": isSelected || void 0,
+		"data-disabled": disabled || void 0,
+		"data-locked": locked || void 0,
+		"data-rarity": rarity,
+		"data-empty": empty || void 0,
+		"aria-label": staticWell ? void 0 : label,
+		"aria-describedby": tooltip ? tooltipId : void 0,
+		onKeyDown: handleKeyDown,
+		onMouseEnter: (event) => {
+			openTooltip();
+			onMouseEnter?.(event);
+		},
+		onMouseLeave: (event) => {
+			closeTooltip();
+			onMouseLeave?.(event);
+		},
+		onFocus: (event) => {
+			openTooltip();
+			onFocus?.(event);
+		},
+		onBlur: (event) => {
+			closeTooltip();
+			onBlur?.(event);
+		},
+		...rest
+	};
+	if (inGrid) return /* @__PURE__ */ jsx("div", {
+		ref: mergeRefs(ref, register),
+		role: "gridcell",
+		tabIndex: grid.focusedIndex === index ? 0 : -1,
+		"aria-selected": isSelected,
+		"aria-disabled": inactive || void 0,
+		onClick: handleClick,
+		...shared,
+		onKeyDown: handleKeyDown,
+		children: content
+	});
+	if (onClick) return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		"aria-pressed": isSelected,
+		"aria-disabled": inactive || void 0,
+		onClick: handleClick,
+		...shared,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		tabIndex: tooltip ? 0 : void 0,
+		...shared,
+		children: content
+	});
+});
+//#endregion
+export { InventorySlot };
+
+//# sourceMappingURL=InventorySlot.js.map

package/dist/components/inventory/InventorySlot/InventorySlot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InventorySlot.js","names":["_Fragment","styles"],"sources":["../../../../src/components/inventory/InventorySlot/InventorySlot.tsx"],"sourcesContent":["import { LockIcon } from \"@malilion/block-ui-icons\";\nimport {\n  forwardRef,\n  useCallback,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type FocusEvent,\n  type KeyboardEvent,\n  type MouseEvent,\n  type Ref,\n} from \"react\";\nimport { cx } from \"../../../utils/cx\";\nimport { mergeRefs } from \"../../../utils/refs\";\nimport { useInventoryGrid, useSlotIndex } from \"../InventoryGrid/context\";\nimport styles from \"./InventorySlot.module.css\";\nimport type { InventorySlotProps } from \"./InventorySlot.types\";\n\ntype Placement = \"right\" | \"left\";\n\n/**\n * A single inventory slot. Inside an `InventoryGrid` it becomes a roving-focus\n * grid cell; standalone it is a toggle button (when `onClick` is set) or a\n * static well.\n */\nexport const InventorySlot = forwardRef<HTMLElement, InventorySlotProps>(function InventorySlot(\n  {\n    selected,\n    disabled = false,\n    locked = false,\n    rarity,\n    children,\n    onClick,\n    tooltip,\n    label,\n    size = \"md\",\n    className,\n    onKeyDown,\n    onMouseEnter,\n    onMouseLeave,\n    onFocus,\n    onBlur,\n    ...rest\n  },\n  ref,\n) {\n  const grid = useInventoryGrid();\n  const index = useSlotIndex();\n  const inGrid = grid !== null && index >= 0;\n  const inactive = disabled || locked;\n  const isSelected = selected ?? (inGrid ? grid.selectedIndex === index : false);\n  const empty = children === undefined || children === null || children === false;\n  /** Non-interactive wells cannot carry aria-label, so their label is rendered as hidden text. */\n  const staticWell = !inGrid && !onClick;\n\n  const tooltipId = useId();\n  const [tooltipOpen, setTooltipOpen] = useState(false);\n  const [placement, setPlacement] = useState<Placement>(\"right\");\n  const tooltipRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    if (!tooltipOpen || !tooltipRef.current) return;\n    const rect = tooltipRef.current.getBoundingClientRect();\n    if (placement === \"right\" && rect.right > window.innerWidth - 8) setPlacement(\"left\");\n  }, [tooltipOpen, placement]);\n\n  const register = useCallback(\n    (element: HTMLElement | null) => {\n      if (inGrid) grid.registerCell(index, element);\n    },\n    [grid, inGrid, index],\n  );\n\n  const openTooltip = () => {\n    if (tooltip) setTooltipOpen(true);\n  };\n  const closeTooltip = () => {\n    setTooltipOpen(false);\n    setPlacement(\"right\");\n  };\n\n  const handleClick = () => {\n    if (inGrid) {\n      grid.setFocusedIndex(index);\n      if (!inactive) grid.select(index);\n    }\n    if (!inactive) onClick?.();\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n    if (event.key === \"Escape\" && tooltipOpen) {\n      event.stopPropagation();\n      closeTooltip();\n    }\n    if (inGrid && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      handleClick();\n    }\n    onKeyDown?.(event);\n  };\n\n  const content = (\n    <>\n      <span className={styles.content}>{children}</span>\n      {empty && !label ? <span className=\"block-visually-hidden\">Empty slot</span> : null}\n      {label && staticWell ? <span className=\"block-visually-hidden\">{label}</span> : null}\n      {locked ? (\n        <span className={styles.lock} aria-hidden=\"true\">\n          <LockIcon size={16} />\n        </span>\n      ) : null}\n      {tooltip ? (\n        <div\n          ref={tooltipRef}\n          id={tooltipId}\n          role=\"tooltip\"\n          aria-hidden=\"true\"\n          hidden={!tooltipOpen}\n          className={styles.tooltip}\n          data-placement={placement}\n        >\n          {tooltip}\n        </div>\n      ) : null}\n    </>\n  );\n\n  const shared = {\n    className: cx(styles.slot, !inGrid && styles[size], className),\n    \"data-selected\": isSelected || undefined,\n    \"data-disabled\": disabled || undefined,\n    \"data-locked\": locked || undefined,\n    \"data-rarity\": rarity,\n    \"data-empty\": empty || undefined,\n    \"aria-label\": staticWell ? undefined : label,\n    \"aria-describedby\": tooltip ? tooltipId : undefined,\n    onKeyDown: handleKeyDown,\n    onMouseEnter: (event: MouseEvent<HTMLElement>) => {\n      openTooltip();\n      onMouseEnter?.(event);\n    },\n    onMouseLeave: (event: MouseEvent<HTMLElement>) => {\n      closeTooltip();\n      onMouseLeave?.(event);\n    },\n    onFocus: (event: FocusEvent<HTMLElement>) => {\n      openTooltip();\n      onFocus?.(event);\n    },\n    onBlur: (event: FocusEvent<HTMLElement>) => {\n      closeTooltip();\n      onBlur?.(event);\n    },\n    ...rest,\n  };\n\n  if (inGrid) {\n    return (\n      <div\n        ref={mergeRefs(ref, register)}\n        role=\"gridcell\"\n        tabIndex={grid.focusedIndex === index ? 0 : -1}\n        aria-selected={isSelected}\n        aria-disabled={inactive || undefined}\n        onClick={handleClick}\n        {...shared}\n        onKeyDown={handleKeyDown}\n      >\n        {content}\n      </div>\n    );\n  }\n\n  if (onClick) {\n    return (\n      <button\n        ref={ref as Ref<HTMLButtonElement>}\n        type=\"button\"\n        aria-pressed={isSelected}\n        aria-disabled={inactive || undefined}\n        onClick={handleClick}\n        {...shared}\n      >\n        {content}\n      </button>\n    );\n  }\n\n  return (\n    // Non-interactive slots with tooltips must be focusable so keyboard users can trigger the tooltip\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n    <div ref={ref as Ref<HTMLDivElement>} tabIndex={tooltip ? 0 : undefined} {...shared}>\n      {content}\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/components/inventory/InventorySlot/InventorySlot.module.js

@@ -0,0 +1,21 @@
+//#region src/components/inventory/InventorySlot/InventorySlot.module.css
+var slot = "block-slot-ZIG6g";
+var sm = "block-sm-G8bS3";
+var md = "block-md-V0VIP";
+var lg = "block-lg-fD8Vo";
+var content = "block-content-1R6Hm";
+var lock = "block-lock-Kl4az";
+var tooltip = "block-tooltip-9J-Rp";
+var InventorySlot_module_default = {
+	slot,
+	sm,
+	md,
+	lg,
+	content,
+	lock,
+	tooltip
+};
+//#endregion
+export { content, InventorySlot_module_default as default, lg, lock, md, slot, sm, tooltip };
+
+//# sourceMappingURL=InventorySlot.module.js.map

package/dist/components/inventory/InventorySlot/InventorySlot.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InventorySlot.module.js","names":[],"sources":["../../../../src/components/inventory/InventorySlot/InventorySlot.module.css"],"sourcesContent":[".slot {\n  --slot-rarity: transparent;\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  aspect-ratio: 1;\n  margin: 0;\n  padding: 3px;\n  font: inherit;\n  color: var(--block-text);\n  background-color: var(--block-slot);\n  border: var(--block-border-width) solid var(--block-border);\n  border-radius: var(--block-radius-none);\n  box-shadow:\n    inset 3px 3px 0 var(--block-shadow-bevel-dark),\n    inset -3px -3px 0 var(--block-shadow-bevel-light),\n    inset 0 0 0 5px var(--slot-rarity);\n  cursor: pointer;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\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.sm {\n  width: var(--block-size-slot-sm);\n}\n\n.md {\n  width: var(--block-size-slot-md);\n}\n\n.lg {\n  width: var(--block-size-slot-lg);\n}\n\ndiv.slot:not([role=\"gridcell\"]):not([tabindex]) {\n  cursor: default;\n}\n\n.slot:hover:not([data-disabled]):not([data-locked]) {\n  background-color: var(--block-slot-hover);\n}\n\n.slot:active:not([data-disabled]):not([data-locked]) {\n  transform: translateY(1px);\n}\n\n.slot:focus-visible {\n  z-index: 2;\n  outline: 3px solid var(--block-focus);\n  outline-offset: 0;\n}\n\n.slot[data-selected] {\n  z-index: 1;\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    inset 3px 3px 0 2px var(--block-shadow-bevel-dark),\n    inset 0 0 0 5px var(--slot-rarity);\n  background-color: color-mix(in srgb, var(--block-primary) 18%, var(--block-slot));\n}\n\n.slot[data-rarity=\"uncommon\"] {\n  --slot-rarity: color-mix(in srgb, var(--block-gold) 45%, transparent);\n}\n\n.slot[data-rarity=\"rare\"] {\n  --slot-rarity: color-mix(in srgb, var(--block-diamond) 45%, transparent);\n}\n\n.slot[data-rarity=\"epic\"] {\n  --slot-rarity: color-mix(in srgb, var(--block-amethyst) 50%, transparent);\n}\n\n.slot[data-rarity=\"legendary\"] {\n  --slot-rarity: color-mix(in srgb, var(--block-lava) 55%, transparent);\n}\n\n.slot[data-disabled],\n.slot[data-locked] {\n  cursor: not-allowed;\n}\n\n.slot[data-disabled] .content,\n.slot[data-locked] .content {\n  opacity: 0.4;\n}\n\n.content {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n.lock {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--block-text-muted);\n  background-color: color-mix(in srgb, var(--block-black) 35%, transparent);\n}\n\n.tooltip {\n  position: absolute;\n  top: 0;\n  left: calc(100% + 8px);\n  z-index: var(--block-z-tooltip);\n  pointer-events: none;\n}\n\n.tooltip[data-placement=\"left\"] {\n  left: auto;\n  right: calc(100% + 8px);\n}\n\n.tooltip[hidden] {\n  display: none;\n}\n"],"mappings":""}

package/dist/components/inventory/InventorySlot/InventorySlot.types.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { ItemRarity } from "../ItemTooltip/ItemTooltip.types";
+export interface InventorySlotProps extends Omit<HTMLAttributes<HTMLElement>, "onClick"> {
+    /** Highlight as the selected slot. Inside a grid this follows the grid's selection by default. */
+    selected?: boolean;
+    disabled?: boolean;
+    /** Locked slots show a padlock and cannot be selected. */
+    locked?: boolean;
+    rarity?: ItemRarity;
+    /** Usually an `<ItemStack />`. Empty slots are announced as "Empty slot". */
+    children?: ReactNode;
+    onClick?: () => void;
+    /** Tooltip content (usually `<ItemTooltip />`) shown on hover and keyboard focus. */
+    tooltip?: ReactNode;
+    /** Accessible name override. */
+    label?: string;
+    /** Slot size when used outside a grid. @default "md" */
+    size?: "sm" | "md" | "lg";
+}
+//# sourceMappingURL=InventorySlot.types.d.ts.map

package/dist/components/inventory/InventorySlot/InventorySlot.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InventorySlot.types.d.ts","sourceRoot":"","sources":["../../../../src/components/inventory/InventorySlot/InventorySlot.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAEnE,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACtF,kGAAkG;IAClG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qFAAqF;IACrF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B"}

package/dist/components/inventory/InventorySlot/index.d.ts

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

package/dist/components/inventory/InventorySlot/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inventory/InventorySlot/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/components/inventory/ItemStack/ItemStack.d.ts

@@ -0,0 +1,8 @@
+import type { ItemStackProps } from "./ItemStack.types";
+/**
+ * An item inside a slot: icon, stack amount (bottom-right) and an optional
+ * durability bar. Visual details are hidden from screen readers and replaced
+ * by a single text description.
+ */
+export declare const ItemStack: import("react").ForwardRefExoticComponent<ItemStackProps & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=ItemStack.d.ts.map

package/dist/components/inventory/ItemStack/ItemStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemStack.d.ts","sourceRoot":"","sources":["../../../../src/components/inventory/ItemStack/ItemStack.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGxD;;;;GAIG;AACH,eAAO,MAAM,SAAS,4GA4BpB,CAAC"}