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

package/dist/components/hud/PlayerHUD/PlayerHUD.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayerHUD.module.js","names":[],"sources":["../../../../src/components/hud/PlayerHUD/PlayerHUD.module.css"],"sourcesContent":[".hud {\n  display: flex;\n  flex-direction: column;\n  gap: var(--block-space-2);\n  width: 100%;\n}\n\n.bars {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--block-space-2) var(--block-space-6);\n}\n\n.left,\n.right {\n  display: flex;\n  flex-direction: column;\n  gap: var(--block-space-1);\n}\n\n.right {\n  align-items: flex-end;\n  margin-left: auto;\n}\n"],"mappings":""}

package/dist/components/hud/PlayerHUD/PlayerHUD.types.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes } from "react";
+export interface PlayerStats {
+    name?: string;
+    health: number;
+    /** @default 20 */
+    maxHealth?: number;
+    armor?: number;
+    /** @default 20 */
+    maxArmor?: number;
+    hunger?: number;
+    /** @default 20 */
+    maxHunger?: number;
+    level?: number;
+    xp?: number;
+    maxXp?: number;
+}
+export interface PlayerHUDProps extends HTMLAttributes<HTMLElement> {
+    player: PlayerStats;
+    /** Icon size for hearts, armor and hunger. @default 16 */
+    iconSize?: number;
+    /** Show numeric values next to each bar. */
+    showText?: boolean;
+    /** Accessible name. @default "Player status" */
+    label?: string;
+}
+//# sourceMappingURL=PlayerHUD.types.d.ts.map

package/dist/components/hud/PlayerHUD/PlayerHUD.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayerHUD.types.d.ts","sourceRoot":"","sources":["../../../../src/components/hud/PlayerHUD/PlayerHUD.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,WAAW,CAAC;IACjE,MAAM,EAAE,WAAW,CAAC;IACpB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/hud/PlayerHUD/index.d.ts

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

package/dist/components/hud/PlayerHUD/index.d.ts.map

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

package/dist/components/hud/PointsBar/PointsBar.d.ts

@@ -0,0 +1,24 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface PointsBarProps extends HTMLAttributes<HTMLDivElement> {
+    value: number;
+    /** Points; every icon represents 2 points. @default 20 */
+    max?: number;
+    /** Icon for one unit (rendered full, half or empty). */
+    icon: ReactNode;
+    /** Accessible name, e.g. "Health". */
+    label: string;
+    /** Show `value / max` next to the icons. */
+    showText?: boolean;
+    /** Pixel size of each icon. @default 16 */
+    iconSize?: number;
+    /** Highlight when `value / max` drops to or below this ratio. @default 0 */
+    lowThreshold?: number;
+    /** Visual direction. Hunger fills right-to-left in many games. @default "ltr" */
+    direction?: "ltr" | "rtl";
+}
+/**
+ * Internal base for HealthBar / ArmorBar / HungerBar: a row of pixel icons,
+ * each worth two points, exposed as a single `meter`.
+ */
+export declare const PointsBar: import("react").ForwardRefExoticComponent<PointsBarProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=PointsBar.d.ts.map

package/dist/components/hud/PointsBar/PointsBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PointsBar.d.ts","sourceRoot":"","sources":["../../../../src/components/hud/PointsBar/PointsBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKxE,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wDAAwD;IACxD,IAAI,EAAE,SAAS,CAAC;IAChB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iFAAiF;IACjF,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;CAC3B;AAID;;;GAGG;AACH,eAAO,MAAM,SAAS,2GAsDpB,CAAC"}

package/dist/components/hud/PointsBar/PointsBar.js

@@ -0,0 +1,61 @@
+import { cx } from "../../../utils/cx.js";
+import { clamp } from "../../../utils/number.js";
+import PointsBar_module_default from "./PointsBar.module.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/hud/PointsBar/PointsBar.tsx
+/**
+* Internal base for HealthBar / ArmorBar / HungerBar: a row of pixel icons,
+* each worth two points, exposed as a single `meter`.
+*/
+var PointsBar = forwardRef(function PointsBar({ value, max = 20, icon, label, showText = false, iconSize = 16, lowThreshold = 0, direction = "ltr", className, ...rest }, ref) {
+	const safeMax = Math.max(0, max);
+	const current = clamp(value, 0, safeMax);
+	const units = Math.ceil(safeMax / 2);
+	const low = safeMax > 0 && current / safeMax <= lowThreshold;
+	const fills = Array.from({ length: units }, (_, i) => {
+		const points = clamp(current - i * 2, 0, 2);
+		return points >= 2 ? "full" : points >= 1 ? "half" : "empty";
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "meter",
+		"aria-label": label,
+		"aria-valuemin": 0,
+		"aria-valuemax": safeMax,
+		"aria-valuenow": current,
+		"aria-valuetext": `${current} of ${safeMax}`,
+		"data-low": low || void 0,
+		"data-direction": direction,
+		"data-icon-size": iconSize,
+		className: cx(PointsBar_module_default.bar, className),
+		...rest,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: PointsBar_module_default.icons,
+			"aria-hidden": "true",
+			children: fills.map((fill, index) => /* @__PURE__ */ jsxs("span", {
+				className: PointsBar_module_default.unit,
+				"data-fill": fill,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: PointsBar_module_default.empty,
+					children: icon
+				}), fill !== "empty" ? /* @__PURE__ */ jsx("span", {
+					className: PointsBar_module_default.full,
+					children: icon
+				}) : null]
+			}, index))
+		}), showText ? /* @__PURE__ */ jsxs("span", {
+			className: PointsBar_module_default.text,
+			"aria-hidden": "true",
+			children: [
+				current,
+				" / ",
+				safeMax
+			]
+		}) : null]
+	});
+});
+//#endregion
+export { PointsBar };
+
+//# sourceMappingURL=PointsBar.js.map

package/dist/components/hud/PointsBar/PointsBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PointsBar.js","names":["styles"],"sources":["../../../../src/components/hud/PointsBar/PointsBar.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { cx } from \"../../../utils/cx\";\nimport { clamp } from \"../../../utils/number\";\nimport styles from \"./PointsBar.module.css\";\n\nexport interface PointsBarProps extends HTMLAttributes<HTMLDivElement> {\n  value: number;\n  /** Points; every icon represents 2 points. @default 20 */\n  max?: number;\n  /** Icon for one unit (rendered full, half or empty). */\n  icon: ReactNode;\n  /** Accessible name, e.g. \"Health\". */\n  label: string;\n  /** Show `value / max` next to the icons. */\n  showText?: boolean;\n  /** Pixel size of each icon. @default 16 */\n  iconSize?: number;\n  /** Highlight when `value / max` drops to or below this ratio. @default 0 */\n  lowThreshold?: number;\n  /** Visual direction. Hunger fills right-to-left in many games. @default \"ltr\" */\n  direction?: \"ltr\" | \"rtl\";\n}\n\ntype Fill = \"full\" | \"half\" | \"empty\";\n\n/**\n * Internal base for HealthBar / ArmorBar / HungerBar: a row of pixel icons,\n * each worth two points, exposed as a single `meter`.\n */\nexport const PointsBar = forwardRef<HTMLDivElement, PointsBarProps>(function PointsBar(\n  {\n    value,\n    max = 20,\n    icon,\n    label,\n    showText = false,\n    iconSize = 16,\n    lowThreshold = 0,\n    direction = \"ltr\",\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const safeMax = Math.max(0, max);\n  const current = clamp(value, 0, safeMax);\n  const units = Math.ceil(safeMax / 2);\n  const low = safeMax > 0 && current / safeMax <= lowThreshold;\n  const fills: Fill[] = Array.from({ length: units }, (_, i) => {\n    const points = clamp(current - i * 2, 0, 2);\n    return points >= 2 ? \"full\" : points >= 1 ? \"half\" : \"empty\";\n  });\n\n  return (\n    <div\n      ref={ref}\n      role=\"meter\"\n      aria-label={label}\n      aria-valuemin={0}\n      aria-valuemax={safeMax}\n      aria-valuenow={current}\n      aria-valuetext={`${current} of ${safeMax}`}\n      data-low={low || undefined}\n      data-direction={direction}\n      data-icon-size={iconSize}\n      className={cx(styles.bar, className)}\n      {...rest}\n    >\n      <span className={styles.icons} aria-hidden=\"true\">\n        {fills.map((fill, index) => (\n          <span key={index} className={styles.unit} data-fill={fill}>\n            <span className={styles.empty}>{icon}</span>\n            {fill !== \"empty\" ? <span className={styles.full}>{icon}</span> : null}\n          </span>\n        ))}\n      </span>\n      {showText ? (\n        <span className={styles.text} aria-hidden=\"true\">\n          {current} / {safeMax}\n        </span>\n      ) : null}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;AA6BA,IAAa,YAAY,WAA2C,SAAS,UAC3E,EACE,OACA,MAAM,IACN,MACA,OACA,WAAW,OACX,WAAW,IACX,eAAe,GACf,YAAY,OACZ,WACA,GAAG,QAEL,KACA;CACA,MAAM,UAAU,KAAK,IAAI,GAAG,GAAG;CAC/B,MAAM,UAAU,MAAM,OAAO,GAAG,OAAO;CACvC,MAAM,QAAQ,KAAK,KAAK,UAAU,CAAC;CACnC,MAAM,MAAM,UAAU,KAAK,UAAU,WAAW;CAChD,MAAM,QAAgB,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,MAAM;EAC5D,MAAM,SAAS,MAAM,UAAU,IAAI,GAAG,GAAG,CAAC;EAC1C,OAAO,UAAU,IAAI,SAAS,UAAU,IAAI,SAAS;CACvD,CAAC;CAED,OACE,qBAAC,OAAD;EACO;EACL,MAAK;EACL,cAAY;EACZ,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,kBAAgB,GAAG,QAAQ,MAAM;EACjC,YAAU,OAAO,KAAA;EACjB,kBAAgB;EAChB,kBAAgB;EAChB,WAAW,GAAGA,yBAAO,KAAK,SAAS;EACnC,GAAI;EAZN,UAAA,CAcE,oBAAC,QAAD;GAAM,WAAWA,yBAAO;GAAO,eAAY;GACxC,UAAA,MAAM,KAAK,MAAM,UAChB,qBAAC,QAAD;IAAkB,WAAWA,yBAAO;IAAM,aAAW;IAArD,UAAA,CACE,oBAAC,QAAD;KAAM,WAAWA,yBAAO;KAAQ,UAAA;IAAW,CAAA,GAC1C,SAAS,UAAU,oBAAC,QAAD;KAAM,WAAWA,yBAAO;KAAO,UAAA;IAAW,CAAA,IAAI,IAC9D;GAHK,GAAA,KAGL,CACP;EACG,CAAA,GACL,WACC,qBAAC,QAAD;GAAM,WAAWA,yBAAO;GAAM,eAAY;GAA1C,UAAA;IACG;IAAQ;IAAI;GACT;EACJ,CAAA,IAAA,IACD;;AAET,CAAC"}

package/dist/components/hud/PointsBar/PointsBar.module.js

@@ -0,0 +1,20 @@
+//#region src/components/hud/PointsBar/PointsBar.module.css
+var bar = "block-bar-e9RBk";
+var icons = "block-icons-25NvT";
+var unit = "block-unit-CLPoq";
+var empty = "block-empty-n2SMZ";
+var full = "block-full-35AX1";
+var text = "block-text-QcHAg";
+var PointsBar_module_default = {
+	bar,
+	icons,
+	unit,
+	empty,
+	full,
+	"low-blink": "block-low-blink-LRhrZ",
+	text
+};
+//#endregion
+export { bar, PointsBar_module_default as default, empty, full, icons, text, unit };
+
+//# sourceMappingURL=PointsBar.module.js.map

package/dist/components/hud/PointsBar/PointsBar.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PointsBar.module.js","names":[],"sources":["../../../../src/components/hud/PointsBar/PointsBar.module.css"],"sourcesContent":[".bar {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--block-space-2);\n  max-width: 100%;\n}\n\n.icons {\n  display: inline-flex;\n  flex-wrap: wrap;\n  gap: 1px;\n}\n\n.bar[data-direction=\"rtl\"] .icons {\n  flex-direction: row-reverse;\n}\n\n.unit {\n  position: relative;\n  display: inline-flex;\n}\n\n.unit > span > svg {\n  display: block;\n}\n\n.empty {\n  display: inline-flex;\n  filter: grayscale(1) brightness(0.32);\n}\n\n.full {\n  position: absolute;\n  inset: 0;\n  display: inline-flex;\n}\n\n.unit[data-fill=\"half\"] .full {\n  clip-path: inset(0 50% 0 0);\n}\n\n.bar[data-direction=\"rtl\"] .unit[data-fill=\"half\"] .full {\n  clip-path: inset(0 0 0 50%);\n}\n\n.bar[data-low] .unit {\n  animation: low-blink 640ms steps(1, end) infinite;\n}\n\n.bar[data-low] .unit:nth-child(even) {\n  animation-delay: 160ms;\n}\n\n.text {\n  flex-shrink: 0;\n  font-family: var(--block-font-display);\n  font-size: var(--block-font-size-sm);\n  color: var(--block-text-muted);\n}\n\n@keyframes low-blink {\n  50% {\n    transform: translateY(-2px);\n  }\n}\n"],"mappings":""}

package/dist/components/hud/PointsBar/index.d.ts

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

package/dist/components/hud/PointsBar/index.d.ts.map

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

package/dist/components/hud/XPBar/XPBar.d.ts

@@ -0,0 +1,4 @@
+import type { XPBarProps } from "./XPBar.types";
+/** Segmented experience bar with the level number on top. */
+export declare const XPBar: import("react").ForwardRefExoticComponent<XPBarProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=XPBar.d.ts.map

package/dist/components/hud/XPBar/XPBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"XPBar.d.ts","sourceRoot":"","sources":["../../../../src/components/hud/XPBar/XPBar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,6DAA6D;AAC7D,eAAO,MAAM,KAAK,uGAsChB,CAAC"}

package/dist/components/hud/XPBar/XPBar.js

@@ -0,0 +1,45 @@
+import { cx } from "../../../utils/cx.js";
+import { formatNumber, ratio } from "../../../utils/number.js";
+import XPBar_module_default from "./XPBar.module.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/hud/XPBar/XPBar.tsx
+/** Segmented experience bar with the level number on top. */
+var XPBar = forwardRef(function XPBar({ value, max, level, showValue = false, label = "Experience", className, ...rest }, ref) {
+	const percent = ratio(value, max) * 100;
+	const current = Math.max(0, Math.min(value, max));
+	const valueText = `${formatNumber(current)} / ${formatNumber(max)} XP`;
+	const fullText = level !== void 0 ? `Level ${level}, ${valueText}` : valueText;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(XPBar_module_default.xp, className),
+		children: [
+			level !== void 0 ? /* @__PURE__ */ jsx("span", {
+				className: XPBar_module_default.level,
+				"aria-hidden": "true",
+				children: level
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				ref,
+				role: "progressbar",
+				"aria-label": label,
+				"aria-valuemin": 0,
+				"aria-valuemax": max,
+				"aria-valuenow": current,
+				"aria-valuetext": fullText,
+				className: XPBar_module_default.track,
+				style: { "--block-xp": `${percent}%` },
+				...rest,
+				children: [/* @__PURE__ */ jsx("span", { className: XPBar_module_default.fill }), /* @__PURE__ */ jsx("span", { className: XPBar_module_default.segments })]
+			}),
+			showValue ? /* @__PURE__ */ jsx("span", {
+				className: XPBar_module_default.value,
+				"aria-hidden": "true",
+				children: valueText
+			}) : null
+		]
+	});
+});
+//#endregion
+export { XPBar };
+
+//# sourceMappingURL=XPBar.js.map

package/dist/components/hud/XPBar/XPBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"XPBar.js","names":["styles"],"sources":["../../../../src/components/hud/XPBar/XPBar.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties } from \"react\";\nimport { cx } from \"../../../utils/cx\";\nimport { formatNumber, ratio } from \"../../../utils/number\";\nimport styles from \"./XPBar.module.css\";\nimport type { XPBarProps } from \"./XPBar.types\";\n\n/** Segmented experience bar with the level number on top. */\nexport const XPBar = forwardRef<HTMLDivElement, XPBarProps>(function XPBar(\n  { value, max, level, showValue = false, label = \"Experience\", className, ...rest },\n  ref,\n) {\n  const percent = ratio(value, max) * 100;\n  const current = Math.max(0, Math.min(value, max));\n  const valueText = `${formatNumber(current)} / ${formatNumber(max)} XP`;\n  const fullText = level !== undefined ? `Level ${level}, ${valueText}` : valueText;\n\n  return (\n    <div className={cx(styles.xp, className)}>\n      {level !== undefined ? (\n        <span className={styles.level} aria-hidden=\"true\">\n          {level}\n        </span>\n      ) : null}\n      <div\n        ref={ref}\n        role=\"progressbar\"\n        aria-label={label}\n        aria-valuemin={0}\n        aria-valuemax={max}\n        aria-valuenow={current}\n        aria-valuetext={fullText}\n        className={styles.track}\n        style={{ \"--block-xp\": `${percent}%` } as CSSProperties}\n        {...rest}\n      >\n        <span className={styles.fill} />\n        <span className={styles.segments} />\n      </div>\n      {showValue ? (\n        <span className={styles.value} aria-hidden=\"true\">\n          {valueText}\n        </span>\n      ) : null}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;AAOA,IAAa,QAAQ,WAAuC,SAAS,MACnE,EAAE,OAAO,KAAK,OAAO,YAAY,OAAO,QAAQ,cAAc,WAAW,GAAG,QAC5E,KACA;CACA,MAAM,UAAU,MAAM,OAAO,GAAG,IAAI;CACpC,MAAM,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,GAAG,CAAC;CAChD,MAAM,YAAY,GAAG,aAAa,OAAO,EAAE,KAAK,aAAa,GAAG,EAAE;CAClE,MAAM,WAAW,UAAU,KAAA,IAAY,SAAS,MAAM,IAAI,cAAc;CAExE,OACE,qBAAC,OAAD;EAAK,WAAW,GAAGA,qBAAO,IAAI,SAAS;EAAvC,UAAA;GACG,UAAU,KAAA,IACT,oBAAC,QAAD;IAAM,WAAWA,qBAAO;IAAO,eAAY;IACxC,UAAA;GACG,CAAA,IACJ;GACJ,qBAAC,OAAD;IACO;IACL,MAAK;IACL,cAAY;IACZ,iBAAe;IACf,iBAAe;IACf,iBAAe;IACf,kBAAgB;IAChB,WAAWA,qBAAO;IAClB,OAAO,EAAE,cAAc,GAAG,QAAQ,GAAG;IACrC,GAAI;IAVN,UAAA,CAYE,oBAAC,QAAD,EAAM,WAAWA,qBAAO,KAAO,CAAA,GAC/B,oBAAC,QAAD,EAAM,WAAWA,qBAAO,SAAW,CAAA,CAChC;;GACJ,YACC,oBAAC,QAAD;IAAM,WAAWA,qBAAO;IAAO,eAAY;IACxC,UAAA;GACG,CAAA,IACJ;EACD;;AAET,CAAC"}

package/dist/components/hud/XPBar/XPBar.module.js

@@ -0,0 +1,19 @@
+//#region src/components/hud/XPBar/XPBar.module.css
+var xp = "block-xp-YV5BV";
+var level = "block-level-r52QH";
+var track = "block-track-LVWM8";
+var fill = "block-fill-Z698q";
+var segments = "block-segments-lzQbg";
+var value = "block-value-DBW19";
+var XPBar_module_default = {
+	xp,
+	level,
+	track,
+	fill,
+	segments,
+	value
+};
+//#endregion
+export { XPBar_module_default as default, fill, level, segments, track, value, xp };
+
+//# sourceMappingURL=XPBar.module.js.map

package/dist/components/hud/XPBar/XPBar.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"XPBar.module.js","names":[],"sources":["../../../../src/components/hud/XPBar/XPBar.module.css"],"sourcesContent":[".xp {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 2px;\n  width: 100%;\n  min-width: 120px;\n}\n\n.level {\n  font-family: var(--block-font-display);\n  font-size: var(--block-font-size-lg);\n  font-weight: var(--block-font-weight-bold);\n  line-height: 1;\n  color: var(--block-emerald-light);\n  text-shadow:\n    2px 0 0 var(--block-black),\n    -2px 0 0 var(--block-black),\n    0 2px 0 var(--block-black),\n    0 -2px 0 var(--block-black);\n}\n\n.track {\n  position: relative;\n  width: 100%;\n  height: 12px;\n  background-color: var(--block-black);\n  border: var(--block-border-width-thin) solid var(--block-border);\n  overflow: hidden;\n}\n\n.fill {\n  position: absolute;\n  inset: 0 auto 0 0;\n  width: var(--block-xp);\n  background-color: var(--block-emerald);\n  box-shadow:\n    inset 0 2px 0 var(--block-emerald-light),\n    inset 0 -2px 0 var(--block-emerald-dark);\n  transition: width var(--block-duration-normal) steps(4, end);\n}\n\n/* Pixel segment dividers. */\n.segments {\n  position: absolute;\n  inset: 0;\n  background-image: repeating-linear-gradient(\n    to right,\n    transparent 0 calc(100% / 18 - 2px),\n    var(--block-black) calc(100% / 18 - 2px) calc(100% / 18)\n  );\n  opacity: 0.55;\n}\n\n.value {\n  align-self: flex-end;\n  font-family: var(--block-font-display);\n  font-size: var(--block-font-size-xs);\n  color: var(--block-text-muted);\n}\n"],"mappings":""}

package/dist/components/hud/XPBar/XPBar.types.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from "react";
+export interface XPBarProps extends HTMLAttributes<HTMLDivElement> {
+    value: number;
+    max: number;
+    /** Player level shown above the bar. */
+    level?: number;
+    /** Show `value / max XP` under the bar. */
+    showValue?: boolean;
+    /** Accessible name. @default "Experience" */
+    label?: string;
+}
+//# sourceMappingURL=XPBar.types.d.ts.map

package/dist/components/hud/XPBar/XPBar.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"XPBar.types.d.ts","sourceRoot":"","sources":["../../../../src/components/hud/XPBar/XPBar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/hud/XPBar/index.d.ts

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

package/dist/components/hud/XPBar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/hud/XPBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}

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

@@ -0,0 +1,6 @@
+export * from "./HealthBar";
+export * from "./ArmorBar";
+export * from "./HungerBar";
+export * from "./XPBar";
+export * from "./PlayerHUD";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/hud/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC"}

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

@@ -0,0 +1,4 @@
+import type { DurabilityBarProps } from "./DurabilityBar.types";
+/** Tool durability gauge — green → gold → redstone as it wears out. */
+export declare const DurabilityBar: import("react").ForwardRefExoticComponent<DurabilityBarProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=DurabilityBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DurabilityBar.d.ts","sourceRoot":"","sources":["../../../../src/components/inventory/DurabilityBar/DurabilityBar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAGhE,uEAAuE;AACvE,eAAO,MAAM,aAAa,+GA4BxB,CAAC"}

package/dist/components/inventory/DurabilityBar/DurabilityBar.js

@@ -0,0 +1,37 @@
+import { cx } from "../../../utils/cx.js";
+import { formatNumber, ratio } from "../../../utils/number.js";
+import DurabilityBar_module_default from "./DurabilityBar.module.js";
+import { durabilityLevel } from "./DurabilityBar.utils.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/inventory/DurabilityBar/DurabilityBar.tsx
+/** Tool durability gauge — green → gold → redstone as it wears out. */
+var DurabilityBar = forwardRef(function DurabilityBar({ value, max, label = "Durability", compact = false, showValue = false, className, ...rest }, ref) {
+	const level = durabilityLevel(value, max);
+	const percent = ratio(value, max) * 100;
+	const text = `${formatNumber(Math.max(0, Math.round(value)))} / ${formatNumber(max)}`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(DurabilityBar_module_default.root, compact && DurabilityBar_module_default.compact, className),
+		children: [/* @__PURE__ */ jsx("div", {
+			ref,
+			role: "meter",
+			"aria-label": label,
+			"aria-valuemin": 0,
+			"aria-valuemax": max,
+			"aria-valuenow": Math.max(0, Math.min(value, max)),
+			"aria-valuetext": text,
+			"data-level": level,
+			className: DurabilityBar_module_default.track,
+			style: { "--block-durability": `${percent}%` },
+			...rest,
+			children: /* @__PURE__ */ jsx("span", { className: DurabilityBar_module_default.fill })
+		}), showValue && !compact ? /* @__PURE__ */ jsx("span", {
+			className: DurabilityBar_module_default.value,
+			children: text
+		}) : null]
+	});
+});
+//#endregion
+export { DurabilityBar };
+
+//# sourceMappingURL=DurabilityBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DurabilityBar.js","names":["styles"],"sources":["../../../../src/components/inventory/DurabilityBar/DurabilityBar.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties } from \"react\";\nimport { cx } from \"../../../utils/cx\";\nimport { formatNumber, ratio } from \"../../../utils/number\";\nimport styles from \"./DurabilityBar.module.css\";\nimport type { DurabilityBarProps } from \"./DurabilityBar.types\";\nimport { durabilityLevel } from \"./DurabilityBar.utils\";\n\n/** Tool durability gauge — green → gold → redstone as it wears out. */\nexport const DurabilityBar = forwardRef<HTMLDivElement, DurabilityBarProps>(function DurabilityBar(\n  { value, max, label = \"Durability\", compact = false, showValue = false, className, ...rest },\n  ref,\n) {\n  const level = durabilityLevel(value, max);\n  const percent = ratio(value, max) * 100;\n  const text = `${formatNumber(Math.max(0, Math.round(value)))} / ${formatNumber(max)}`;\n\n  return (\n    <div className={cx(styles.root, compact && styles.compact, className)}>\n      <div\n        ref={ref}\n        role=\"meter\"\n        aria-label={label}\n        aria-valuemin={0}\n        aria-valuemax={max}\n        aria-valuenow={Math.max(0, Math.min(value, max))}\n        aria-valuetext={text}\n        data-level={level}\n        className={styles.track}\n        style={{ \"--block-durability\": `${percent}%` } as CSSProperties}\n        {...rest}\n      >\n        <span className={styles.fill} />\n      </div>\n      {showValue && !compact ? <span className={styles.value}>{text}</span> : null}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;AAQA,IAAa,gBAAgB,WAA+C,SAAS,cACnF,EAAE,OAAO,KAAK,QAAQ,cAAc,UAAU,OAAO,YAAY,OAAO,WAAW,GAAG,QACtF,KACA;CACA,MAAM,QAAQ,gBAAgB,OAAO,GAAG;CACxC,MAAM,UAAU,MAAM,OAAO,GAAG,IAAI;CACpC,MAAM,OAAO,GAAG,aAAa,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,CAAC,CAAC,EAAE,KAAK,aAAa,GAAG;CAElF,OACE,qBAAC,OAAD;EAAK,WAAW,GAAGA,6BAAO,MAAM,WAAWA,6BAAO,SAAS,SAAS;EAApE,UAAA,CACE,oBAAC,OAAD;GACO;GACL,MAAK;GACL,cAAY;GACZ,iBAAe;GACf,iBAAe;GACf,iBAAe,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,GAAG,CAAC;GAC/C,kBAAgB;GAChB,cAAY;GACZ,WAAWA,6BAAO;GAClB,OAAO,EAAE,sBAAsB,GAAG,QAAQ,GAAG;GAC7C,GAAI;GAEJ,UAAA,oBAAC,QAAD,EAAM,WAAWA,6BAAO,KAAO,CAAA;EAC5B,CAAA,GACJ,aAAa,CAAC,UAAU,oBAAC,QAAD;GAAM,WAAWA,6BAAO;GAAQ,UAAA;EAAW,CAAA,IAAI,IACrE;;AAET,CAAC"}

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

@@ -0,0 +1,17 @@
+//#region src/components/inventory/DurabilityBar/DurabilityBar.module.css
+var root = "block-root-Adx9O";
+var track = "block-track-fR-vr";
+var fill = "block-fill-IVVMh";
+var compact = "block-compact-Ir9V3";
+var value = "block-value-2chYI";
+var DurabilityBar_module_default = {
+	root,
+	track,
+	fill,
+	compact,
+	value
+};
+//#endregion
+export { compact, DurabilityBar_module_default as default, fill, root, track, value };
+
+//# sourceMappingURL=DurabilityBar.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DurabilityBar.module.js","names":[],"sources":["../../../../src/components/inventory/DurabilityBar/DurabilityBar.module.css"],"sourcesContent":[".root {\n  display: flex;\n  align-items: center;\n  gap: var(--block-space-2);\n  min-width: 0;\n}\n\n.track {\n  position: relative;\n  flex: 1;\n  height: 8px;\n  min-width: 32px;\n  background-color: var(--block-black);\n  border: var(--block-border-width-thin) solid var(--block-border);\n}\n\n.fill {\n  position: absolute;\n  inset: 0 auto 0 0;\n  width: var(--block-durability);\n  background-color: var(--block-emerald);\n  box-shadow: inset 0 -2px 0 var(--block-shadow-bevel-dark);\n}\n\n.track[data-level=\"medium\"] .fill {\n  background-color: var(--block-gold);\n}\n\n.track[data-level=\"low\"] .fill {\n  background-color: var(--block-redstone-light);\n}\n\n.compact .track {\n  height: 4px;\n  min-width: 0;\n  border-width: 0;\n  box-shadow: 0 0 0 1px var(--block-black);\n}\n\n.compact .fill {\n  box-shadow: none;\n}\n\n.value {\n  flex-shrink: 0;\n  font-family: var(--block-font-display);\n  font-size: var(--block-font-size-xs);\n  color: var(--block-text-muted);\n}\n"],"mappings":""}

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

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from "react";
+export interface DurabilityBarProps extends HTMLAttributes<HTMLDivElement> {
+    value: number;
+    max: number;
+    /** Accessible label. @default "Durability" */
+    label?: string;
+    /** Slim variant used inside item slots. */
+    compact?: boolean;
+    /** Show `value / max` text next to the bar. */
+    showValue?: boolean;
+}
+export type DurabilityLevel = "high" | "medium" | "low";
+//# sourceMappingURL=DurabilityBar.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DurabilityBar.types.d.ts","sourceRoot":"","sources":["../../../../src/components/inventory/DurabilityBar/DurabilityBar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxE,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC"}

package/dist/components/inventory/DurabilityBar/DurabilityBar.utils.d.ts

@@ -0,0 +1,3 @@
+import type { DurabilityLevel } from "./DurabilityBar.types";
+export declare function durabilityLevel(value: number, max: number): DurabilityLevel;
+//# sourceMappingURL=DurabilityBar.utils.d.ts.map

package/dist/components/inventory/DurabilityBar/DurabilityBar.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DurabilityBar.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/inventory/DurabilityBar/DurabilityBar.utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE7D,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,eAAe,CAK3E"}

package/dist/components/inventory/DurabilityBar/DurabilityBar.utils.js

@@ -0,0 +1,12 @@
+import { ratio } from "../../../utils/number.js";
+//#region src/components/inventory/DurabilityBar/DurabilityBar.utils.ts
+function durabilityLevel(value, max) {
+	const r = ratio(value, max);
+	if (r > .5) return "high";
+	if (r > .25) return "medium";
+	return "low";
+}
+//#endregion
+export { durabilityLevel };
+
+//# sourceMappingURL=DurabilityBar.utils.js.map

package/dist/components/inventory/DurabilityBar/DurabilityBar.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DurabilityBar.utils.js","names":[],"sources":["../../../../src/components/inventory/DurabilityBar/DurabilityBar.utils.ts"],"sourcesContent":["import { ratio } from \"../../../utils/number\";\nimport type { DurabilityLevel } from \"./DurabilityBar.types\";\n\nexport function durabilityLevel(value: number, max: number): DurabilityLevel {\n  const r = ratio(value, max);\n  if (r > 0.5) return \"high\";\n  if (r > 0.25) return \"medium\";\n  return \"low\";\n}\n"],"mappings":";;AAGA,SAAgB,gBAAgB,OAAe,KAA8B;CAC3E,MAAM,IAAI,MAAM,OAAO,GAAG;CAC1B,IAAI,IAAI,IAAK,OAAO;CACpB,IAAI,IAAI,KAAM,OAAO;CACrB,OAAO;AACT"}

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

@@ -0,0 +1,4 @@
+export { DurabilityBar } from "./DurabilityBar";
+export { durabilityLevel } from "./DurabilityBar.utils";
+export type { DurabilityBarProps, DurabilityLevel } from "./DurabilityBar.types";
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,7 @@
+import type { HotbarProps } from "./Hotbar.types";
+/**
+ * Nine-slot quick bar. Number keys `1`–`9` select a slot from anywhere on the
+ * page (ignored while typing); arrow keys move the selection and wrap around.
+ */
+export declare const Hotbar: import("react").ForwardRefExoticComponent<HotbarProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Hotbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Hotbar.d.ts","sourceRoot":"","sources":["../../../../src/components/inventory/Hotbar/Hotbar.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD;;;GAGG;AACH,eAAO,MAAM,MAAM,wGA4DjB,CAAC"}

package/dist/components/inventory/Hotbar/Hotbar.js

@@ -0,0 +1,51 @@
+import { cx } from "../../../utils/cx.js";
+import { useControllableState } from "../../../hooks/useControllableState.js";
+import { InventoryGrid } from "../InventoryGrid/InventoryGrid.js";
+import { useDigitHotkeys } from "../../../hooks/useDigitHotkeys.js";
+import Hotbar_module_default from "./Hotbar.module.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/inventory/Hotbar/Hotbar.tsx
+/**
+* Nine-slot quick bar. Number keys `1`–`9` select a slot from anywhere on the
+* page (ignored while typing); arrow keys move the selection and wrap around.
+*/
+var Hotbar = forwardRef(function Hotbar({ selectedIndex, defaultSelectedIndex = 0, onSelect, children, slots = 9, hotkeys = true, showKeys = true, slotSize = "md", label = "Hotbar", className, ...rest }, ref) {
+	const [current, setCurrent] = useControllableState({
+		value: selectedIndex,
+		defaultValue: defaultSelectedIndex,
+		onChange: onSelect
+	});
+	useDigitHotkeys(hotkeys, slots, setCurrent);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(Hotbar_module_default.hotbar, className),
+		"data-size": slotSize,
+		style: { "--block-columns": slots },
+		children: [/* @__PURE__ */ jsx(InventoryGrid, {
+			ref,
+			columns: slots,
+			rows: 1,
+			slotSize,
+			selectedIndex: current,
+			onSelectedIndexChange: setCurrent,
+			selectionFollowsFocus: true,
+			wrap: true,
+			label,
+			"aria-keyshortcuts": hotkeys ? Array.from({ length: Math.min(slots, 9) }, (_, i) => i + 1).join(" ") : void 0,
+			...rest,
+			children
+		}), showKeys ? /* @__PURE__ */ jsx("div", {
+			className: Hotbar_module_default.keys,
+			"aria-hidden": "true",
+			children: Array.from({ length: slots }, (_, index) => /* @__PURE__ */ jsx("span", {
+				className: Hotbar_module_default.key,
+				"data-selected": index === current || void 0,
+				children: index < 9 ? index + 1 : ""
+			}, index))
+		}) : null]
+	});
+});
+//#endregion
+export { Hotbar };
+
+//# sourceMappingURL=Hotbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Hotbar.js","names":["styles"],"sources":["../../../../src/components/inventory/Hotbar/Hotbar.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties } from \"react\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport { useDigitHotkeys } from \"../../../hooks/useDigitHotkeys\";\nimport { cx } from \"../../../utils/cx\";\nimport { InventoryGrid } from \"../InventoryGrid/InventoryGrid\";\nimport styles from \"./Hotbar.module.css\";\nimport type { HotbarProps } from \"./Hotbar.types\";\n\n/**\n * Nine-slot quick bar. Number keys `1`–`9` select a slot from anywhere on the\n * page (ignored while typing); arrow keys move the selection and wrap around.\n */\nexport const Hotbar = forwardRef<HTMLDivElement, HotbarProps>(function Hotbar(\n  {\n    selectedIndex,\n    defaultSelectedIndex = 0,\n    onSelect,\n    children,\n    slots = 9,\n    hotkeys = true,\n    showKeys = true,\n    slotSize = \"md\",\n    label = \"Hotbar\",\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const [current, setCurrent] = useControllableState({\n    value: selectedIndex,\n    defaultValue: defaultSelectedIndex,\n    onChange: onSelect,\n  });\n\n  useDigitHotkeys(hotkeys, slots, setCurrent);\n\n  return (\n    <div\n      className={cx(styles.hotbar, className)}\n      data-size={slotSize}\n      style={{ \"--block-columns\": slots } as CSSProperties}\n    >\n      <InventoryGrid\n        ref={ref}\n        columns={slots}\n        rows={1}\n        slotSize={slotSize}\n        selectedIndex={current}\n        onSelectedIndexChange={setCurrent}\n        selectionFollowsFocus\n        wrap\n        label={label}\n        aria-keyshortcuts={\n          hotkeys\n            ? Array.from({ length: Math.min(slots, 9) }, (_, i) => i + 1).join(\" \")\n            : undefined\n        }\n        {...rest}\n      >\n        {children}\n      </InventoryGrid>\n      {showKeys ? (\n        <div className={styles.keys} aria-hidden=\"true\">\n          {Array.from({ length: slots }, (_, index) => (\n            <span key={index} className={styles.key} data-selected={index === current || undefined}>\n              {index < 9 ? index + 1 : \"\"}\n            </span>\n          ))}\n        </div>\n      ) : null}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;;;AAYA,IAAa,SAAS,WAAwC,SAAS,OACrE,EACE,eACA,uBAAuB,GACvB,UACA,UACA,QAAQ,GACR,UAAU,MACV,WAAW,MACX,WAAW,MACX,QAAQ,UACR,WACA,GAAG,QAEL,KACA;CACA,MAAM,CAAC,SAAS,cAAc,qBAAqB;EACjD,OAAO;EACP,cAAc;EACd,UAAU;CACZ,CAAC;CAED,gBAAgB,SAAS,OAAO,UAAU;CAE1C,OACE,qBAAC,OAAD;EACE,WAAW,GAAGA,sBAAO,QAAQ,SAAS;EACtC,aAAW;EACX,OAAO,EAAE,mBAAmB,MAAM;EAHpC,UAAA,CAKE,oBAAC,eAAD;GACO;GACL,SAAS;GACT,MAAM;GACI;GACV,eAAe;GACf,uBAAuB;GACvB,uBAAA;GACA,MAAA;GACO;GACP,qBACE,UACI,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,KAAK,GAAG,IACpE,KAAA;GAEN,GAAI;GAEH;EACY,CAAA,GACd,WACC,oBAAC,OAAD;GAAK,WAAWA,sBAAO;GAAM,eAAY;GACtC,UAAA,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,UACjC,oBAAC,QAAD;IAAkB,WAAWA,sBAAO;IAAK,iBAAe,UAAU,WAAW,KAAA;IAC1E,UAAA,QAAQ,IAAI,QAAQ,IAAI;GACrB,GAFK,KAEL,CACP;EACE,CAAA,IACH,IACD;;AAET,CAAC"}

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

@@ -0,0 +1,13 @@
+//#region src/components/inventory/Hotbar/Hotbar.module.css
+var hotbar = "block-hotbar-Q9oyR";
+var keys = "block-keys-LrF--";
+var key = "block-key-ug-uT";
+var Hotbar_module_default = {
+	hotbar,
+	keys,
+	key
+};
+//#endregion
+export { Hotbar_module_default as default, hotbar, key, keys };
+
+//# sourceMappingURL=Hotbar.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Hotbar.module.js","names":[],"sources":["../../../../src/components/inventory/Hotbar/Hotbar.module.css"],"sourcesContent":[".hotbar {\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-space-1);\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  touch-action: manipulation;\n}\n\n.hotbar[data-size=\"sm\"] {\n  --block-slot-size: var(--block-size-slot-sm);\n}\n\n.hotbar[data-size=\"lg\"] {\n  --block-slot-size: var(--block-size-slot-lg);\n}\n\n.keys {\n  display: grid;\n  grid-template-columns: repeat(var(--block-columns), minmax(0, 1fr));\n  gap: var(--block-slot-gap);\n}\n\n.key {\n  font-family: var(--block-font-display);\n  font-size: var(--block-font-size-xs);\n  text-align: center;\n  color: var(--block-text-muted);\n}\n\n.key[data-selected] {\n  color: var(--block-primary-light);\n  font-weight: var(--block-font-weight-bold);\n}\n\n@media (max-width: 767.98px) {\n  .hotbar {\n    --block-slot-gap: 2px;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+import type { InventoryGridProps } from "../InventoryGrid/InventoryGrid.types";
+export interface HotbarProps extends Omit<InventoryGridProps, "columns" | "rows" | "children" | "selectedIndex" | "defaultSelectedIndex" | "onSelectedIndexChange" | "selectionFollowsFocus" | "wrap" | "onSelect"> {
+    /** Controlled selected slot. */
+    selectedIndex?: number;
+    /** @default 0 */
+    defaultSelectedIndex?: number;
+    children: ReactNode;
+    onSelect?: (index: number) => void;
+    /** Number of slots (empty ones are added). @default 9 */
+    slots?: number;
+    /** Listen to number keys `1`–`9` on the whole page. @default true */
+    hotkeys?: boolean;
+    /** Show key numbers under the slots. @default true */
+    showKeys?: boolean;
+}
+//# sourceMappingURL=Hotbar.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Hotbar.types.d.ts","sourceRoot":"","sources":["../../../../src/components/inventory/Hotbar/Hotbar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAE/E,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,kBAAkB,EAChB,SAAS,GACT,MAAM,GACN,UAAU,GACV,eAAe,GACf,sBAAsB,GACtB,uBAAuB,GACvB,uBAAuB,GACvB,MAAM,GACN,UAAU,CACb;IACC,gCAAgC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB;IACjB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inventory/Hotbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

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

@@ -0,0 +1,9 @@
+import type { InventoryProps, InventorySectionProps } from "./Inventory.types";
+/**
+ * Inventory window — a panel that stacks `InventorySection`s (grids, hotbar).
+ * Use `variant="chest"` for storage containers.
+ */
+export declare const Inventory: import("react").ForwardRefExoticComponent<InventoryProps & import("react").RefAttributes<HTMLElement>>;
+/** A titled group inside an `Inventory` (e.g. main storage, hotbar). */
+export declare const InventorySection: import("react").ForwardRefExoticComponent<InventorySectionProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Inventory.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Inventory.d.ts","sourceRoot":"","sources":["../../../../src/components/inventory/Inventory/Inventory.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAE/E;;;GAGG;AACH,eAAO,MAAM,SAAS,wGAgBpB,CAAC;AAEH,wEAAwE;AACxE,eAAO,MAAM,gBAAgB,kHAoB5B,CAAC"}