@malilion/block-ui-react 0.1.0 → 0.3.0

package/dist/components/crafting/RecipeBook/RecipeBook.utils.d.ts

@@ -0,0 +1,9 @@
+import type { Recipe, RecipeCategory } from "./RecipeBook.types";
+export declare const ALL = "all";
+export declare function deriveCategories(recipes: Recipe[]): RecipeCategory[];
+export declare function filterRecipes(recipes: Recipe[], { query, category, craftableOnly }: {
+    query: string;
+    category: string;
+    craftableOnly: boolean;
+}): Recipe[];
+//# sourceMappingURL=RecipeBook.utils.d.ts.map

package/dist/components/crafting/RecipeBook/RecipeBook.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecipeBook.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/crafting/RecipeBook/RecipeBook.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEjE,eAAO,MAAM,GAAG,QAAQ,CAAC;AAEzB,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,cAAc,EAAE,CAYpE;AAED,wBAAgB,aAAa,CAC3B,OAAO,EAAE,MAAM,EAAE,EACjB,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,OAAO,CAAA;CAAE,GAC9F,MAAM,EAAE,CAQV"}

package/dist/components/crafting/RecipeBook/RecipeBook.utils.js

@@ -0,0 +1,21 @@
+function deriveCategories(recipes) {
+	const seen = /* @__PURE__ */ new Set();
+	const categories = [];
+	for (const recipe of recipes) {
+		if (seen.has(recipe.category)) continue;
+		seen.add(recipe.category);
+		categories.push({
+			id: recipe.category,
+			label: recipe.category.charAt(0).toUpperCase() + recipe.category.slice(1)
+		});
+	}
+	return categories;
+}
+function filterRecipes(recipes, { query, category, craftableOnly }) {
+	const needle = query.trim().toLowerCase();
+	return recipes.filter((recipe) => (category === "all" || recipe.category === category) && (!craftableOnly || recipe.craftable !== false) && (needle === "" || recipe.name.toLowerCase().includes(needle)));
+}
+//#endregion
+export { deriveCategories, filterRecipes };
+
+//# sourceMappingURL=RecipeBook.utils.js.map

package/dist/components/crafting/RecipeBook/RecipeBook.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecipeBook.utils.js","names":[],"sources":["../../../../src/components/crafting/RecipeBook/RecipeBook.utils.ts"],"sourcesContent":["import type { Recipe, RecipeCategory } from \"./RecipeBook.types\";\n\nexport const ALL = \"all\";\n\nexport function deriveCategories(recipes: Recipe[]): RecipeCategory[] {\n  const seen = new Set<string>();\n  const categories: RecipeCategory[] = [];\n  for (const recipe of recipes) {\n    if (seen.has(recipe.category)) continue;\n    seen.add(recipe.category);\n    categories.push({\n      id: recipe.category,\n      label: recipe.category.charAt(0).toUpperCase() + recipe.category.slice(1),\n    });\n  }\n  return categories;\n}\n\nexport function filterRecipes(\n  recipes: Recipe[],\n  { query, category, craftableOnly }: { query: string; category: string; craftableOnly: boolean },\n): Recipe[] {\n  const needle = query.trim().toLowerCase();\n  return recipes.filter(\n    (recipe) =>\n      (category === ALL || recipe.category === category) &&\n      (!craftableOnly || recipe.craftable !== false) &&\n      (needle === \"\" || recipe.name.toLowerCase().includes(needle)),\n  );\n}\n"],"mappings":"AAIA,SAAgB,iBAAiB,SAAqC;CACpE,MAAM,uBAAO,IAAI,IAAY;CAC7B,MAAM,aAA+B,CAAC;CACtC,KAAK,MAAM,UAAU,SAAS;EAC5B,IAAI,KAAK,IAAI,OAAO,QAAQ,GAAG;EAC/B,KAAK,IAAI,OAAO,QAAQ;EACxB,WAAW,KAAK;GACd,IAAI,OAAO;GACX,OAAO,OAAO,SAAS,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,OAAO,SAAS,MAAM,CAAC;EAC1E,CAAC;CACH;CACA,OAAO;AACT;AAEA,SAAgB,cACd,SACA,EAAE,OAAO,UAAU,iBACT;CACV,MAAM,SAAS,MAAM,KAAK,CAAC,CAAC,YAAY;CACxC,OAAO,QAAQ,QACZ,YACE,aAAA,SAAoB,OAAO,aAAa,cACxC,CAAC,iBAAiB,OAAO,cAAc,WACvC,WAAW,MAAM,OAAO,KAAK,YAAY,CAAC,CAAC,SAAS,MAAM,EAC/D;AACF"}

package/dist/components/crafting/RecipeBook/index.d.ts

@@ -0,0 +1,4 @@
+export { RecipeBook } from "./RecipeBook";
+export { filterRecipes } from "./RecipeBook.utils";
+export type { Recipe, RecipeBookProps, RecipeCategory } from "./RecipeBook.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/crafting/RecipeBook/index.d.ts.map

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

package/dist/components/crafting/TradingUI/TradingUI.d.ts

@@ -0,0 +1,7 @@
+import { type TradingUIProps } from "./TradingUI.types";
+/**
+ * Villager trading: a keyboard-navigable list of offers (WAI-ARIA listbox)
+ * beside the selected offer's payment and result slots, plus the villager's level.
+ */
+export declare const TradingUI: import("react").ForwardRefExoticComponent<TradingUIProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=TradingUI.d.ts.map

package/dist/components/crafting/TradingUI/TradingUI.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TradingUI.d.ts","sourceRoot":"","sources":["../../../../src/components/crafting/TradingUI/TradingUI.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAkB,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGxE;;;GAGG;AACH,eAAO,MAAM,SAAS,2GAyJpB,CAAC"}

package/dist/components/crafting/TradingUI/TradingUI.js

@@ -0,0 +1,181 @@
+import { cx } from "../../../utils/cx.js";
+import { BlockButton } from "../../actions/BlockButton/BlockButton.js";
+import { useControllableState } from "../../../hooks/useControllableState.js";
+import { clamp } from "../../../utils/number.js";
+import { InventorySlot } from "../../inventory/InventorySlot/InventorySlot.js";
+import TradingUI_module_default from "./TradingUI.module.js";
+import { villagerLevels } from "./TradingUI.types.js";
+import { isSoldOut } from "./TradingUI.utils.js";
+import { forwardRef, useId, useRef } from "react";
+import { ArrowIcon, CloseIcon } from "@malilion/block-ui-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/crafting/TradingUI/TradingUI.tsx
+/**
+* Villager trading: a keyboard-navigable list of offers (WAI-ARIA listbox)
+* beside the selected offer's payment and result slots, plus the villager's level.
+*/
+var TradingUI = forwardRef(function TradingUI({ trades, value, defaultValue, onValueChange, onTrade, profession, level, levelProgress, label = "Trading", className, ...rest }, ref) {
+	const baseId = useId();
+	const [selectedId, setSelectedId] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? trades[0]?.id ?? "",
+		onChange: onValueChange
+	});
+	const optionRefs = useRef(/* @__PURE__ */ new Map());
+	const selected = trades.find((trade) => trade.id === selectedId);
+	const soldOut = selected ? isSoldOut(selected) : false;
+	const levelIndex = level !== void 0 ? clamp(Math.round(level), 1, 5) - 1 : void 0;
+	const select = (id, focus = false) => {
+		setSelectedId(id);
+		if (focus) optionRefs.current.get(id)?.focus();
+	};
+	const onKeyDown = (event) => {
+		const index = trades.findIndex((trade) => trade.id === selectedId);
+		let next = null;
+		if (event.key === "ArrowDown") next = Math.min(index + 1, trades.length - 1);
+		else if (event.key === "ArrowUp") next = Math.max(index - 1, 0);
+		else if (event.key === "Home") next = 0;
+		else if (event.key === "End") next = trades.length - 1;
+		if (next === null) return;
+		event.preventDefault();
+		const trade = trades[next];
+		if (trade) select(trade.id, true);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "group",
+		"aria-label": label,
+		className: cx(TradingUI_module_default.trading, className),
+		...rest,
+		children: [/* @__PURE__ */ jsx("ul", {
+			role: "listbox",
+			"aria-label": "Trades",
+			className: TradingUI_module_default.list,
+			onKeyDown,
+			children: trades.map((trade, index) => {
+				const isSelected = trade.id === selectedId;
+				const out = isSoldOut(trade);
+				const tabbable = isSelected || !selected && index === 0;
+				return /* @__PURE__ */ jsxs("li", {
+					ref: (element) => {
+						if (element) optionRefs.current.set(trade.id, element);
+						else optionRefs.current.delete(trade.id);
+					},
+					id: `${baseId}-${trade.id}`,
+					role: "option",
+					"aria-selected": isSelected,
+					tabIndex: tabbable ? 0 : -1,
+					"data-sold-out": out || void 0,
+					className: TradingUI_module_default.offer,
+					onClick: () => select(trade.id),
+					onKeyDown: (event) => {
+						if (event.key === "Enter" || event.key === " ") {
+							event.preventDefault();
+							select(trade.id);
+						}
+					},
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: TradingUI_module_default.offerItems,
+						"aria-hidden": "true",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: TradingUI_module_default.mini,
+								children: trade.cost
+							}),
+							trade.cost2 ? /* @__PURE__ */ jsx("span", {
+								className: TradingUI_module_default.mini,
+								children: trade.cost2
+							}) : null,
+							/* @__PURE__ */ jsx("span", {
+								className: TradingUI_module_default.offerArrow,
+								children: out ? /* @__PURE__ */ jsx(CloseIcon, { size: 16 }) : /* @__PURE__ */ jsx(ArrowIcon, { size: 16 })
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: TradingUI_module_default.mini,
+								children: trade.result
+							})
+						]
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "block-visually-hidden",
+						children: [trade.label, out ? " (sold out)" : ""]
+					})]
+				}, trade.id);
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: TradingUI_module_default.detail,
+			children: [
+				profession || levelIndex !== void 0 ? /* @__PURE__ */ jsxs("div", {
+					className: TradingUI_module_default.villager,
+					children: [profession ? /* @__PURE__ */ jsx("p", {
+						className: TradingUI_module_default.profession,
+						children: profession
+					}) : null, levelIndex !== void 0 ? /* @__PURE__ */ jsxs("div", {
+						className: TradingUI_module_default.level,
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: TradingUI_module_default.levelName,
+							children: [
+								levelIndex + 1,
+								" · ",
+								villagerLevels[levelIndex]
+							]
+						}), levelProgress !== void 0 && levelIndex < 4 ? /* @__PURE__ */ jsx("div", {
+							role: "progressbar",
+							"aria-label": `Progress to ${villagerLevels[levelIndex + 1]}`,
+							"aria-valuemin": 0,
+							"aria-valuemax": 100,
+							"aria-valuenow": Math.round(clamp(levelProgress, 0, 100)),
+							className: TradingUI_module_default.levelBar,
+							style: { "--block-trade-xp": `${clamp(levelProgress, 0, 100)}%` },
+							children: /* @__PURE__ */ jsx("span", { className: TradingUI_module_default.levelFill })
+						}) : null]
+					}) : null]
+				}) : null,
+				/* @__PURE__ */ jsxs("div", {
+					className: TradingUI_module_default.exchange,
+					"aria-live": "polite",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							role: "group",
+							"aria-label": "Payment",
+							className: TradingUI_module_default.payment,
+							children: [/* @__PURE__ */ jsx(InventorySlot, {
+								size: "lg",
+								label: selected ? void 0 : "Payment: empty",
+								children: selected?.cost
+							}), /* @__PURE__ */ jsx(InventorySlot, {
+								size: "lg",
+								label: selected?.cost2 ? void 0 : "Second payment: empty",
+								children: selected?.cost2
+							})]
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: TradingUI_module_default.arrow,
+							"data-sold-out": soldOut || void 0,
+							"aria-hidden": "true",
+							children: soldOut ? /* @__PURE__ */ jsx(CloseIcon, { size: 32 }) : /* @__PURE__ */ jsx(ArrowIcon, { size: 32 })
+						}),
+						/* @__PURE__ */ jsx("div", {
+							role: "group",
+							"aria-label": "Result",
+							children: /* @__PURE__ */ jsx(InventorySlot, {
+								size: "lg",
+								label: selected ? void 0 : "Result: empty",
+								children: selected?.result
+							})
+						})
+					]
+				}),
+				onTrade ? /* @__PURE__ */ jsx(BlockButton, {
+					variant: "emerald",
+					disabled: !selected || soldOut,
+					onClick: () => selected && onTrade(selected.id),
+					children: soldOut ? "Sold out" : "Trade"
+				}) : null
+			]
+		})]
+	});
+});
+//#endregion
+export { TradingUI };
+
+//# sourceMappingURL=TradingUI.js.map

package/dist/components/crafting/TradingUI/TradingUI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TradingUI.js","names":["styles"],"sources":["../../../../src/components/crafting/TradingUI/TradingUI.tsx"],"sourcesContent":["import { ArrowIcon, CloseIcon } from \"@malilion/block-ui-icons\";\nimport { forwardRef, useId, useRef, type CSSProperties, type KeyboardEvent } from \"react\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport { cx } from \"../../../utils/cx\";\nimport { clamp } from \"../../../utils/number\";\nimport { BlockButton } from \"../../actions/BlockButton/BlockButton\";\nimport { InventorySlot } from \"../../inventory/InventorySlot/InventorySlot\";\nimport styles from \"./TradingUI.module.css\";\nimport { villagerLevels, type TradingUIProps } from \"./TradingUI.types\";\nimport { isSoldOut } from \"./TradingUI.utils\";\n\n/**\n * Villager trading: a keyboard-navigable list of offers (WAI-ARIA listbox)\n * beside the selected offer's payment and result slots, plus the villager's level.\n */\nexport const TradingUI = forwardRef<HTMLDivElement, TradingUIProps>(function TradingUI(\n  {\n    trades,\n    value,\n    defaultValue,\n    onValueChange,\n    onTrade,\n    profession,\n    level,\n    levelProgress,\n    label = \"Trading\",\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const baseId = useId();\n  const [selectedId, setSelectedId] = useControllableState({\n    value,\n    defaultValue: defaultValue ?? trades[0]?.id ?? \"\",\n    onChange: onValueChange,\n  });\n  const optionRefs = useRef(new Map<string, HTMLLIElement>());\n  const selected = trades.find((trade) => trade.id === selectedId);\n  const soldOut = selected ? isSoldOut(selected) : false;\n  const levelIndex = level !== undefined ? clamp(Math.round(level), 1, 5) - 1 : undefined;\n\n  const select = (id: string, focus = false) => {\n    setSelectedId(id);\n    if (focus) optionRefs.current.get(id)?.focus();\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLUListElement>) => {\n    const index = trades.findIndex((trade) => trade.id === selectedId);\n    let next: number | null = null;\n    if (event.key === \"ArrowDown\") next = Math.min(index + 1, trades.length - 1);\n    else if (event.key === \"ArrowUp\") next = Math.max(index - 1, 0);\n    else if (event.key === \"Home\") next = 0;\n    else if (event.key === \"End\") next = trades.length - 1;\n    if (next === null) return;\n    event.preventDefault();\n    const trade = trades[next];\n    if (trade) select(trade.id, true);\n  };\n\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      aria-label={label}\n      className={cx(styles.trading, className)}\n      {...rest}\n    >\n      <ul role=\"listbox\" aria-label=\"Trades\" className={styles.list} onKeyDown={onKeyDown}>\n        {trades.map((trade, index) => {\n          const isSelected = trade.id === selectedId;\n          const out = isSoldOut(trade);\n          const tabbable = isSelected || (!selected && index === 0);\n          return (\n            <li\n              key={trade.id}\n              ref={(element) => {\n                if (element) optionRefs.current.set(trade.id, element);\n                else optionRefs.current.delete(trade.id);\n              }}\n              id={`${baseId}-${trade.id}`}\n              role=\"option\"\n              aria-selected={isSelected}\n              tabIndex={tabbable ? 0 : -1}\n              data-sold-out={out || undefined}\n              className={styles.offer}\n              onClick={() => select(trade.id)}\n              onKeyDown={(event) => {\n                if (event.key === \"Enter\" || event.key === \" \") {\n                  event.preventDefault();\n                  select(trade.id);\n                }\n              }}\n            >\n              <span className={styles.offerItems} aria-hidden=\"true\">\n                <span className={styles.mini}>{trade.cost}</span>\n                {trade.cost2 ? <span className={styles.mini}>{trade.cost2}</span> : null}\n                <span className={styles.offerArrow}>\n                  {out ? <CloseIcon size={16} /> : <ArrowIcon size={16} />}\n                </span>\n                <span className={styles.mini}>{trade.result}</span>\n              </span>\n              <span className=\"block-visually-hidden\">\n                {trade.label}\n                {out ? \" (sold out)\" : \"\"}\n              </span>\n            </li>\n          );\n        })}\n      </ul>\n      <div className={styles.detail}>\n        {profession || levelIndex !== undefined ? (\n          <div className={styles.villager}>\n            {profession ? <p className={styles.profession}>{profession}</p> : null}\n            {levelIndex !== undefined ? (\n              <div className={styles.level}>\n                <span className={styles.levelName}>\n                  {levelIndex + 1} · {villagerLevels[levelIndex]}\n                </span>\n                {levelProgress !== undefined && levelIndex < 4 ? (\n                  <div\n                    role=\"progressbar\"\n                    aria-label={`Progress to ${villagerLevels[levelIndex + 1]}`}\n                    aria-valuemin={0}\n                    aria-valuemax={100}\n                    aria-valuenow={Math.round(clamp(levelProgress, 0, 100))}\n                    className={styles.levelBar}\n                    style={\n                      { \"--block-trade-xp\": `${clamp(levelProgress, 0, 100)}%` } as CSSProperties\n                    }\n                  >\n                    <span className={styles.levelFill} />\n                  </div>\n                ) : null}\n              </div>\n            ) : null}\n          </div>\n        ) : null}\n        <div className={styles.exchange} aria-live=\"polite\">\n          <div role=\"group\" aria-label=\"Payment\" className={styles.payment}>\n            <InventorySlot size=\"lg\" label={selected ? undefined : \"Payment: empty\"}>\n              {selected?.cost}\n            </InventorySlot>\n            <InventorySlot size=\"lg\" label={selected?.cost2 ? undefined : \"Second payment: empty\"}>\n              {selected?.cost2}\n            </InventorySlot>\n          </div>\n          <span className={styles.arrow} data-sold-out={soldOut || undefined} aria-hidden=\"true\">\n            {soldOut ? <CloseIcon size={32} /> : <ArrowIcon size={32} />}\n          </span>\n          <div role=\"group\" aria-label=\"Result\">\n            <InventorySlot size=\"lg\" label={selected ? undefined : \"Result: empty\"}>\n              {selected?.result}\n            </InventorySlot>\n          </div>\n        </div>\n        {onTrade ? (\n          <BlockButton\n            variant=\"emerald\"\n            disabled={!selected || soldOut}\n            onClick={() => selected && onTrade(selected.id)}\n          >\n            {soldOut ? \"Sold out\" : \"Trade\"}\n          </BlockButton>\n        ) : null}\n      </div>\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/components/crafting/TradingUI/TradingUI.module.js

@@ -0,0 +1,39 @@
+//#region src/components/crafting/TradingUI/TradingUI.module.css
+var trading = "block-trading-9AePS";
+var list = "block-list-zd51-";
+var offer = "block-offer-ROBvP";
+var offerItems = "block-offerItems-gJHRi";
+var mini = "block-mini-fzMQ6";
+var offerArrow = "block-offerArrow-9Wjt3";
+var detail = "block-detail-ZDTTP";
+var villager = "block-villager-POPq8";
+var profession = "block-profession-Y1tNJ";
+var level = "block-level-WOr3P";
+var levelName = "block-levelName-opsL3";
+var levelBar = "block-levelBar-JzGvv";
+var levelFill = "block-levelFill-lo1c3";
+var exchange = "block-exchange-5nemV";
+var payment = "block-payment-hE-Np";
+var arrow = "block-arrow-l5HHm";
+var TradingUI_module_default = {
+	trading,
+	list,
+	offer,
+	offerItems,
+	mini,
+	offerArrow,
+	detail,
+	villager,
+	profession,
+	level,
+	levelName,
+	levelBar,
+	levelFill,
+	exchange,
+	payment,
+	arrow
+};
+//#endregion
+export { arrow, TradingUI_module_default as default, detail, exchange, level, levelBar, levelFill, levelName, list, mini, offer, offerArrow, offerItems, payment, profession, trading, villager };
+
+//# sourceMappingURL=TradingUI.module.js.map

package/dist/components/crafting/TradingUI/TradingUI.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TradingUI.module.js","names":[],"sources":["../../../../src/components/crafting/TradingUI/TradingUI.module.css"],"sourcesContent":[".trading {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  justify-content: center;\n  gap: var(--block-space-4);\n  width: 100%;\n}\n\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--block-space-1);\n  width: 220px;\n  max-width: 100%;\n  max-height: 360px;\n  margin: 0;\n  padding: var(--block-space-1);\n  overflow-y: auto;\n  list-style: none;\n  background-color: var(--block-slot);\n  border: var(--block-border-width-thin) solid var(--block-border);\n  box-shadow: var(--block-shadow-inset);\n}\n\n.offer {\n  display: flex;\n  align-items: center;\n  min-height: 44px;\n  padding: var(--block-space-1);\n  background-color: var(--block-surface-alt);\n  border: var(--block-border-width-thin) solid var(--block-border);\n  cursor: pointer;\n}\n\n.offer:hover {\n  background-color: var(--block-slot-hover);\n}\n\n.offer[aria-selected=\"true\"] {\n  background-color: color-mix(in srgb, var(--block-emerald) 28%, var(--block-surface-alt));\n  border-color: var(--block-emerald-light);\n}\n\n.offer:focus-visible {\n  outline: 3px solid var(--block-focus);\n  outline-offset: -3px;\n}\n\n.offerItems {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--block-space-1);\n}\n\n.offer[data-sold-out] .offerItems {\n  opacity: 0.55;\n}\n\n/* Small item previews inside an offer. */\n.mini {\n  display: inline-flex;\n  width: 32px;\n  height: 32px;\n  align-items: center;\n  justify-content: center;\n}\n\n.mini > * {\n  width: 100%;\n  height: 100%;\n}\n\n.offerArrow {\n  display: inline-flex;\n  color: var(--block-text-muted);\n}\n\n.offer[data-sold-out] .offerArrow {\n  color: var(--block-redstone-light);\n}\n\n.detail {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--block-space-3);\n  min-width: min(280px, 100%);\n}\n\n.villager {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--block-space-1);\n  width: 100%;\n}\n\n.profession {\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  text-transform: uppercase;\n  text-shadow: var(--block-shadow-text);\n}\n\n.level {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 2px;\n  width: 100%;\n  max-width: 220px;\n}\n\n.levelName {\n  font-family: var(--block-font-display);\n  font-size: var(--block-font-size-xs);\n  color: var(--block-text-muted);\n}\n\n.levelBar {\n  position: relative;\n  width: 100%;\n  height: 8px;\n  background-color: var(--block-black);\n  border: var(--block-border-width-thin) solid var(--block-border);\n  overflow: hidden;\n}\n\n.levelFill {\n  position: absolute;\n  inset: 0 auto 0 0;\n  width: var(--block-trade-xp);\n  background-color: var(--block-emerald);\n  box-shadow: inset 0 2px 0 var(--block-emerald-light);\n}\n\n.exchange {\n  display: flex;\n  align-items: center;\n  gap: var(--block-space-3);\n}\n\n.payment {\n  display: flex;\n  gap: var(--block-space-2);\n}\n\n.arrow {\n  display: inline-flex;\n  color: var(--block-text-muted);\n}\n\n.arrow[data-sold-out] {\n  color: var(--block-redstone-light);\n}\n\n@media (max-width: 767.98px) {\n  .list {\n    width: 100%;\n    max-height: 200px;\n  }\n\n  .exchange {\n    gap: var(--block-space-2);\n  }\n}\n"],"mappings":""}

package/dist/components/crafting/TradingUI/TradingUI.types.d.ts

@@ -0,0 +1,36 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface Trade {
+    id: string;
+    /** Price, usually an `<ItemStack />` (e.g. emeralds). */
+    cost: ReactNode;
+    /** Optional second price item. */
+    cost2?: ReactNode;
+    /** What the player receives. */
+    result: ReactNode;
+    /** Accessible summary, e.g. "12 emeralds for a diamond sword". */
+    label: string;
+    /** Times traded so far. */
+    uses?: number;
+    /** Uses before the trade sells out. */
+    maxUses?: number;
+}
+export declare const villagerLevels: readonly ["Novice", "Apprentice", "Journeyman", "Expert", "Master"];
+export interface TradingUIProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue"> {
+    trades: Trade[];
+    /** Controlled selected trade id. */
+    value?: string;
+    /** Initially selected trade id. @default the first trade */
+    defaultValue?: string;
+    onValueChange?: (id: string) => void;
+    /** Called when the player confirms the selected trade. */
+    onTrade?: (id: string) => void;
+    /** Villager profession shown in the header, e.g. "Armorer". */
+    profession?: ReactNode;
+    /** Villager level 1–5 (Novice … Master). */
+    level?: number;
+    /** Progress to the next level, 0–100. */
+    levelProgress?: number;
+    /** Accessible name. @default "Trading" */
+    label?: string;
+}
+//# sourceMappingURL=TradingUI.types.d.ts.map

package/dist/components/crafting/TradingUI/TradingUI.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TradingUI.types.d.ts","sourceRoot":"","sources":["../../../../src/components/crafting/TradingUI/TradingUI.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,yDAAyD;IACzD,IAAI,EAAE,SAAS,CAAC;IAChB,kCAAkC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gCAAgC;IAChC,MAAM,EAAE,SAAS,CAAC;IAClB,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,qEAAsE,CAAC;AAElG,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC;IAC1F,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,0DAA0D;IAC1D,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,+DAA+D;IAC/D,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/crafting/TradingUI/TradingUI.types.js

@@ -0,0 +1,12 @@
+//#region src/components/crafting/TradingUI/TradingUI.types.ts
+var villagerLevels = [
+	"Novice",
+	"Apprentice",
+	"Journeyman",
+	"Expert",
+	"Master"
+];
+//#endregion
+export { villagerLevels };
+
+//# sourceMappingURL=TradingUI.types.js.map

package/dist/components/crafting/TradingUI/TradingUI.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TradingUI.types.js","names":[],"sources":["../../../../src/components/crafting/TradingUI/TradingUI.types.ts"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\n\nexport interface Trade {\n  id: string;\n  /** Price, usually an `<ItemStack />` (e.g. emeralds). */\n  cost: ReactNode;\n  /** Optional second price item. */\n  cost2?: ReactNode;\n  /** What the player receives. */\n  result: ReactNode;\n  /** Accessible summary, e.g. \"12 emeralds for a diamond sword\". */\n  label: string;\n  /** Times traded so far. */\n  uses?: number;\n  /** Uses before the trade sells out. */\n  maxUses?: number;\n}\n\nexport const villagerLevels = [\"Novice\", \"Apprentice\", \"Journeyman\", \"Expert\", \"Master\"] as const;\n\nexport interface TradingUIProps extends Omit<HTMLAttributes<HTMLDivElement>, \"defaultValue\"> {\n  trades: Trade[];\n  /** Controlled selected trade id. */\n  value?: string;\n  /** Initially selected trade id. @default the first trade */\n  defaultValue?: string;\n  onValueChange?: (id: string) => void;\n  /** Called when the player confirms the selected trade. */\n  onTrade?: (id: string) => void;\n  /** Villager profession shown in the header, e.g. \"Armorer\". */\n  profession?: ReactNode;\n  /** Villager level 1–5 (Novice … Master). */\n  level?: number;\n  /** Progress to the next level, 0–100. */\n  levelProgress?: number;\n  /** Accessible name. @default \"Trading\" */\n  label?: string;\n}\n"],"mappings":";AAkBA,IAAa,iBAAiB;CAAC;CAAU;CAAc;CAAc;CAAU;AAAQ"}

package/dist/components/crafting/TradingUI/TradingUI.utils.d.ts

@@ -0,0 +1,3 @@
+import type { Trade } from "./TradingUI.types";
+export declare function isSoldOut(trade: Trade): boolean;
+//# sourceMappingURL=TradingUI.utils.d.ts.map

package/dist/components/crafting/TradingUI/TradingUI.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TradingUI.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/crafting/TradingUI/TradingUI.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE/C,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAE/C"}

package/dist/components/crafting/TradingUI/TradingUI.utils.js

@@ -0,0 +1,8 @@
+//#region src/components/crafting/TradingUI/TradingUI.utils.ts
+function isSoldOut(trade) {
+	return trade.maxUses !== void 0 && (trade.uses ?? 0) >= trade.maxUses;
+}
+//#endregion
+export { isSoldOut };
+
+//# sourceMappingURL=TradingUI.utils.js.map

package/dist/components/crafting/TradingUI/TradingUI.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TradingUI.utils.js","names":[],"sources":["../../../../src/components/crafting/TradingUI/TradingUI.utils.ts"],"sourcesContent":["import type { Trade } from \"./TradingUI.types\";\n\nexport function isSoldOut(trade: Trade): boolean {\n  return trade.maxUses !== undefined && (trade.uses ?? 0) >= trade.maxUses;\n}\n"],"mappings":";AAEA,SAAgB,UAAU,OAAuB;CAC/C,OAAO,MAAM,YAAY,KAAA,MAAc,MAAM,QAAQ,MAAM,MAAM;AACnE"}

package/dist/components/crafting/TradingUI/index.d.ts

@@ -0,0 +1,4 @@
+export { TradingUI } from "./TradingUI";
+export { villagerLevels } from "./TradingUI.types";
+export type { Trade, TradingUIProps } from "./TradingUI.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/crafting/TradingUI/index.d.ts.map

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

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

@@ -3,4 +3,9 @@ export * from "./CraftingGrid";
 export * from "./CraftingResult";
 export * from "./CraftingTable";
 export * from "./Furnace";
+export * from "./EnchantingTable";
+export * from "./BrewingStand";
+export * from "./Anvil";
+export * from "./TradingUI";
+export * from "./RecipeBook";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/crafting/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/crafting/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

package/dist/components/display/BlockTable/BlockTable.d.ts

@@ -0,0 +1,8 @@
+import { type ReactElement, type RefAttributes } from "react";
+import type { BlockTableProps } from "./BlockTable.types";
+/**
+ * Data table with a block frame, optional sorting (click a header to cycle
+ * ascending → descending → unsorted), striping and a horizontal scroll region.
+ */
+export declare const BlockTable: <T>(props: BlockTableProps<T> & RefAttributes<HTMLTableElement>) => ReactElement;
+//# sourceMappingURL=BlockTable.d.ts.map

package/dist/components/display/BlockTable/BlockTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTable.d.ts","sourceRoot":"","sources":["../../../../src/components/display/BlockTable/BlockTable.tsx"],"names":[],"mappings":"AACA,OAAO,EAKL,KAAK,YAAY,EACjB,KAAK,aAAa,EACnB,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,eAAe,EAAkB,MAAM,oBAAoB,CAAC;AA+I1E;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAkC,CAAC,CAAC,EACzD,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,gBAAgB,CAAC,KACxD,YAAY,CAAC"}

package/dist/components/display/BlockTable/BlockTable.js

@@ -0,0 +1,92 @@
+import { cx } from "../../../utils/cx.js";
+import { useControllableState } from "../../../hooks/useControllableState.js";
+import BlockTable_module_default from "./BlockTable.module.js";
+import { nextSort, readField, sortRows } from "./BlockTable.utils.js";
+import { forwardRef, useId } from "react";
+import { ChevronDownIcon, ChevronUpIcon } from "@malilion/block-ui-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/display/BlockTable/BlockTable.tsx
+var ARIA_SORT = {
+	asc: "ascending",
+	desc: "descending"
+};
+function BlockTableInner({ columns, rows, getRowKey = (_row, index) => index, caption, hideCaption = false, sort, defaultSort = null, onSortChange, manualSort = false, striped = false, size = "md", stickyHeader = false, emptyState = "No data", wrapperClassName, className, ...rest }, ref) {
+	const captionId = useId();
+	const [activeSort, setSort] = useControllableState({
+		value: sort,
+		defaultValue: defaultSort,
+		onChange: onSortChange
+	});
+	const visibleRows = manualSort ? rows : sortRows(rows, columns, activeSort);
+	const hasWidths = columns.some((column) => column.width);
+	return /* @__PURE__ */ jsx("div", {
+		role: "region",
+		"aria-labelledby": captionId,
+		tabIndex: 0,
+		className: cx(BlockTable_module_default.wrapper, stickyHeader && BlockTable_module_default.sticky, wrapperClassName),
+		children: /* @__PURE__ */ jsxs("table", {
+			ref,
+			"data-size": size,
+			"data-striped": striped || void 0,
+			className: cx(BlockTable_module_default.table, className),
+			...rest,
+			children: [
+				/* @__PURE__ */ jsx("caption", {
+					id: captionId,
+					className: cx(BlockTable_module_default.caption, hideCaption && "block-visually-hidden"),
+					children: caption
+				}),
+				hasWidths ? /* @__PURE__ */ jsx("colgroup", { children: columns.map((column) => /* @__PURE__ */ jsx("col", {
+					className: column.width ? BlockTable_module_default.col : void 0,
+					style: column.width ? { "--block-table-col-width": column.width } : void 0
+				}, column.key)) }) : null,
+				/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => {
+					const direction = activeSort?.key === column.key ? activeSort.direction : void 0;
+					return /* @__PURE__ */ jsx("th", {
+						scope: "col",
+						"data-align": column.align ?? "start",
+						"aria-sort": column.sortable && direction ? ARIA_SORT[direction] : void 0,
+						className: BlockTable_module_default.headerCell,
+						children: column.sortable ? /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							className: BlockTable_module_default.sortButton,
+							"data-direction": direction,
+							onClick: () => setSort(nextSort(activeSort, column.key)),
+							children: [/* @__PURE__ */ jsx("span", { children: column.header }), /* @__PURE__ */ jsx("span", {
+								className: BlockTable_module_default.sortIcon,
+								"aria-hidden": "true",
+								children: direction === "desc" ? /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16 }) : /* @__PURE__ */ jsx(ChevronUpIcon, { size: 16 })
+							})]
+						}) : column.header
+					}, column.key);
+				}) }) }),
+				/* @__PURE__ */ jsx("tbody", { children: visibleRows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+					colSpan: columns.length,
+					className: BlockTable_module_default.empty,
+					children: emptyState
+				}) }) : visibleRows.map((row, index) => /* @__PURE__ */ jsx("tr", {
+					className: BlockTable_module_default.row,
+					children: columns.map((column) => {
+						const content = column.cell ? column.cell(row, index) : readField(row, column.key);
+						const Cell = column.rowHeader ? "th" : "td";
+						return /* @__PURE__ */ jsx(Cell, {
+							scope: column.rowHeader ? "row" : void 0,
+							"data-align": column.align ?? "start",
+							className: cx(BlockTable_module_default.cell, column.rowHeader && BlockTable_module_default.rowHeader),
+							children: content
+						}, column.key);
+					})
+				}, getRowKey(row, index))) })
+			]
+		})
+	});
+}
+/**
+* Data table with a block frame, optional sorting (click a header to cycle
+* ascending → descending → unsorted), striping and a horizontal scroll region.
+*/
+var BlockTable = forwardRef(BlockTableInner);
+//#endregion
+export { BlockTable };
+
+//# sourceMappingURL=BlockTable.js.map

package/dist/components/display/BlockTable/BlockTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTable.js","names":["styles"],"sources":["../../../../src/components/display/BlockTable/BlockTable.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronUpIcon } from \"@malilion/block-ui-icons\";\nimport {\n  forwardRef,\n  useId,\n  type CSSProperties,\n  type ForwardedRef,\n  type ReactElement,\n  type RefAttributes,\n} from \"react\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport { cx } from \"../../../utils/cx\";\nimport styles from \"./BlockTable.module.css\";\nimport type { BlockTableProps, BlockTableSort } from \"./BlockTable.types\";\nimport { nextSort, readField, sortRows } from \"./BlockTable.utils\";\n\nconst ARIA_SORT = { asc: \"ascending\", desc: \"descending\" } as const;\n\nfunction BlockTableInner<T>(\n  {\n    columns,\n    rows,\n    getRowKey = (_row, index) => index,\n    caption,\n    hideCaption = false,\n    sort,\n    defaultSort = null,\n    onSortChange,\n    manualSort = false,\n    striped = false,\n    size = \"md\",\n    stickyHeader = false,\n    emptyState = \"No data\",\n    wrapperClassName,\n    className,\n    ...rest\n  }: BlockTableProps<T>,\n  ref: ForwardedRef<HTMLTableElement>,\n) {\n  const captionId = useId();\n  const [activeSort, setSort] = useControllableState<BlockTableSort | null>({\n    value: sort,\n    defaultValue: defaultSort,\n    onChange: onSortChange,\n  });\n  const visibleRows = manualSort ? rows : sortRows(rows, columns, activeSort);\n  const hasWidths = columns.some((column) => column.width);\n\n  return (\n    <div\n      role=\"region\"\n      aria-labelledby={captionId}\n      // The wrapper scrolls horizontally on narrow screens, so keyboard users must be able to focus it.\n      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n      tabIndex={0}\n      className={cx(styles.wrapper, stickyHeader && styles.sticky, wrapperClassName)}\n    >\n      <table\n        ref={ref}\n        data-size={size}\n        data-striped={striped || undefined}\n        className={cx(styles.table, className)}\n        {...rest}\n      >\n        <caption\n          id={captionId}\n          className={cx(styles.caption, hideCaption && \"block-visually-hidden\")}\n        >\n          {caption}\n        </caption>\n        {hasWidths ? (\n          <colgroup>\n            {columns.map((column) => (\n              <col\n                key={column.key}\n                className={column.width ? styles.col : undefined}\n                style={\n                  column.width\n                    ? ({ \"--block-table-col-width\": column.width } as CSSProperties)\n                    : undefined\n                }\n              />\n            ))}\n          </colgroup>\n        ) : null}\n        <thead>\n          <tr>\n            {columns.map((column) => {\n              const direction = activeSort?.key === column.key ? activeSort.direction : undefined;\n              return (\n                <th\n                  key={column.key}\n                  scope=\"col\"\n                  data-align={column.align ?? \"start\"}\n                  aria-sort={column.sortable && direction ? ARIA_SORT[direction] : undefined}\n                  className={styles.headerCell}\n                >\n                  {column.sortable ? (\n                    <button\n                      type=\"button\"\n                      className={styles.sortButton}\n                      data-direction={direction}\n                      onClick={() => setSort(nextSort(activeSort, column.key))}\n                    >\n                      <span>{column.header}</span>\n                      <span className={styles.sortIcon} aria-hidden=\"true\">\n                        {direction === \"desc\" ? (\n                          <ChevronDownIcon size={16} />\n                        ) : (\n                          <ChevronUpIcon size={16} />\n                        )}\n                      </span>\n                    </button>\n                  ) : (\n                    column.header\n                  )}\n                </th>\n              );\n            })}\n          </tr>\n        </thead>\n        <tbody>\n          {visibleRows.length === 0 ? (\n            <tr>\n              <td colSpan={columns.length} className={styles.empty}>\n                {emptyState}\n              </td>\n            </tr>\n          ) : (\n            visibleRows.map((row, index) => (\n              <tr key={getRowKey(row, index)} className={styles.row}>\n                {columns.map((column) => {\n                  const content = column.cell\n                    ? column.cell(row, index)\n                    : readField(row, column.key);\n                  const Cell = column.rowHeader ? \"th\" : \"td\";\n                  return (\n                    <Cell\n                      key={column.key}\n                      scope={column.rowHeader ? \"row\" : undefined}\n                      data-align={column.align ?? \"start\"}\n                      className={cx(styles.cell, column.rowHeader && styles.rowHeader)}\n                    >\n                      {content}\n                    </Cell>\n                  );\n                })}\n              </tr>\n            ))\n          )}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\n/**\n * Data table with a block frame, optional sorting (click a header to cycle\n * ascending → descending → unsorted), striping and a horizontal scroll region.\n */\nexport const BlockTable = forwardRef(BlockTableInner) as <T>(\n  props: BlockTableProps<T> & RefAttributes<HTMLTableElement>,\n) => ReactElement;\n"],"mappings":";;;;;;;;AAeA,IAAM,YAAY;CAAE,KAAK;CAAa,MAAM;AAAa;AAEzD,SAAS,gBACP,EACE,SACA,MACA,aAAa,MAAM,UAAU,OAC7B,SACA,cAAc,OACd,MACA,cAAc,MACd,cACA,aAAa,OACb,UAAU,OACV,OAAO,MACP,eAAe,OACf,aAAa,WACb,kBACA,WACA,GAAG,QAEL,KACA;CACA,MAAM,YAAY,MAAM;CACxB,MAAM,CAAC,YAAY,WAAW,qBAA4C;EACxE,OAAO;EACP,cAAc;EACd,UAAU;CACZ,CAAC;CACD,MAAM,cAAc,aAAa,OAAO,SAAS,MAAM,SAAS,UAAU;CAC1E,MAAM,YAAY,QAAQ,MAAM,WAAW,OAAO,KAAK;CAEvD,OACE,oBAAC,OAAD;EACE,MAAK;EACL,mBAAiB;EAGjB,UAAU;EACV,WAAW,GAAGA,0BAAO,SAAS,gBAAgBA,0BAAO,QAAQ,gBAAgB;EAE7E,UAAA,qBAAC,SAAD;GACO;GACL,aAAW;GACX,gBAAc,WAAW,KAAA;GACzB,WAAW,GAAGA,0BAAO,OAAO,SAAS;GACrC,GAAI;GALN,UAAA;IAOE,oBAAC,WAAD;KACE,IAAI;KACJ,WAAW,GAAGA,0BAAO,SAAS,eAAe,uBAAuB;KAEnE,UAAA;IACM,CAAA;IACR,YACC,oBAAC,YAAD,EAAA,UACG,QAAQ,KAAK,WACZ,oBAAC,OAAD;KAEE,WAAW,OAAO,QAAQA,0BAAO,MAAM,KAAA;KACvC,OACE,OAAO,QACF,EAAE,2BAA2B,OAAO,MAAM,IAC3C,KAAA;IAEP,GAPM,OAAO,GAOb,CACF,EACO,CAAA,IACR;IACJ,oBAAC,SAAD,EAAA,UACE,oBAAC,MAAD,EAAA,UACG,QAAQ,KAAK,WAAW;KACvB,MAAM,YAAY,YAAY,QAAQ,OAAO,MAAM,WAAW,YAAY,KAAA;KAC1E,OACE,oBAAC,MAAD;MAEE,OAAM;MACN,cAAY,OAAO,SAAS;MAC5B,aAAW,OAAO,YAAY,YAAY,UAAU,aAAa,KAAA;MACjE,WAAWA,0BAAO;MAEjB,UAAA,OAAO,WACN,qBAAC,UAAD;OACE,MAAK;OACL,WAAWA,0BAAO;OAClB,kBAAgB;OAChB,eAAe,QAAQ,SAAS,YAAY,OAAO,GAAG,CAAC;OAJzD,UAAA,CAME,oBAAC,QAAD,EAAA,UAAO,OAAO,OAAa,CAAA,GAC3B,oBAAC,QAAD;QAAM,WAAWA,0BAAO;QAAU,eAAY;QAC3C,UAAA,cAAc,SACb,oBAAC,iBAAD,EAAiB,MAAM,GAAK,CAAA,IAE5B,oBAAC,eAAD,EAAe,MAAM,GAAK,CAAA;OAExB,CAAA,CACA;MAER,CAAA,IAAA,OAAO;KAEP,GAzBG,OAAO,GAyBV;IAER,CAAC,EACC,CAAA,EACC,CAAA;IACP,oBAAC,SAAD,EAAA,UACG,YAAY,WAAW,IACtB,oBAAC,MAAD,EAAA,UACE,oBAAC,MAAD;KAAI,SAAS,QAAQ;KAAQ,WAAWA,0BAAO;KAC5C,UAAA;IACC,CAAA,EACF,CAAA,IAEJ,YAAY,KAAK,KAAK,UACpB,oBAAC,MAAD;KAAgC,WAAWA,0BAAO;KAC/C,UAAA,QAAQ,KAAK,WAAW;MACvB,MAAM,UAAU,OAAO,OACnB,OAAO,KAAK,KAAK,KAAK,IACtB,UAAU,KAAK,OAAO,GAAG;MAC7B,MAAM,OAAO,OAAO,YAAY,OAAO;MACvC,OACE,oBAAC,MAAD;OAEE,OAAO,OAAO,YAAY,QAAQ,KAAA;OAClC,cAAY,OAAO,SAAS;OAC5B,WAAW,GAAGA,0BAAO,MAAM,OAAO,aAAaA,0BAAO,SAAS;OAE9D,UAAA;MACG,GANC,OAAO,GAMR;KAEV,CAAC;IACC,GAjBK,UAAU,KAAK,KAAK,CAiBzB,CACL,EAEE,CAAA;GACF;;CACJ,CAAA;AAET;;;;;AAMA,IAAa,aAAa,WAAW,eAAe"}

package/dist/components/display/BlockTable/BlockTable.module.js

@@ -0,0 +1,31 @@
+//#region src/components/display/BlockTable/BlockTable.module.css
+var wrapper = "block-wrapper-tQfa-";
+var table = "block-table-x1Qnx";
+var caption = "block-caption-T-Obe";
+var col = "block-col-L7kx6";
+var headerCell = "block-headerCell-LQKy8";
+var sticky = "block-sticky-M7fKZ";
+var cell = "block-cell-yLLKH";
+var rowHeader = "block-rowHeader-cYBI3";
+var row = "block-row-cNM95";
+var sortButton = "block-sortButton-Lr2ri";
+var sortIcon = "block-sortIcon-tm-Vg";
+var empty = "block-empty-B21lk";
+var BlockTable_module_default = {
+	wrapper,
+	table,
+	caption,
+	col,
+	headerCell,
+	sticky,
+	cell,
+	rowHeader,
+	row,
+	sortButton,
+	sortIcon,
+	empty
+};
+//#endregion
+export { caption, cell, col, BlockTable_module_default as default, empty, headerCell, row, rowHeader, sortButton, sortIcon, sticky, table, wrapper };
+
+//# sourceMappingURL=BlockTable.module.js.map

package/dist/components/display/BlockTable/BlockTable.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTable.module.js","names":[],"sources":["../../../../src/components/display/BlockTable/BlockTable.module.css"],"sourcesContent":[".wrapper {\n  max-width: 100%;\n  overflow-x: auto;\n  background-color: var(--block-surface);\n  border: var(--block-border-width) solid var(--block-border);\n  box-shadow: var(--block-shadow-bevel);\n  scrollbar-width: thin;\n}\n\n.wrapper:focus-visible {\n  outline: 3px solid var(--block-focus);\n  outline-offset: 2px;\n}\n\n.table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: var(--block-font-size-sm);\n  color: var(--block-text);\n  font-variant-numeric: tabular-nums;\n}\n\n.caption {\n  padding: var(--block-space-2) var(--block-space-3);\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-align: left;\n  text-transform: uppercase;\n  text-shadow: var(--block-shadow-text);\n  background-color: var(--block-surface-header);\n  border-bottom: var(--block-border-width-thin) solid var(--block-border);\n}\n\n.col {\n  width: var(--block-table-col-width);\n}\n\n.headerCell {\n  padding: var(--block-space-2) var(--block-space-3);\n  font-family: var(--block-font-display);\n  font-size: var(--block-font-size-xs);\n  font-weight: var(--block-font-weight-bold);\n  letter-spacing: var(--block-letter-spacing-wide);\n  text-transform: uppercase;\n  white-space: nowrap;\n  color: var(--block-text-muted);\n  background-color: var(--block-surface-alt);\n  border-bottom: var(--block-border-width) solid var(--block-border);\n}\n\n.sticky {\n  overflow: visible;\n}\n\n.sticky .headerCell {\n  position: sticky;\n  top: 0;\n  z-index: var(--block-z-sticky);\n}\n\n.cell {\n  padding: var(--block-space-2) var(--block-space-3);\n  border-bottom: var(--block-border-width-thin) solid var(--block-shadow-bevel-dark);\n  vertical-align: middle;\n}\n\n.table[data-size=\"sm\"] .headerCell,\n.table[data-size=\"sm\"] .cell {\n  padding: var(--block-space-1) var(--block-space-2);\n}\n\n.rowHeader {\n  font-weight: var(--block-font-weight-bold);\n  text-align: left;\n}\n\n.row:last-child .cell {\n  border-bottom: 0;\n}\n\n.table[data-striped] .row:nth-child(even) {\n  background-color: color-mix(in srgb, var(--block-surface-alt) 70%, transparent);\n}\n\n.row:hover {\n  background-color: var(--block-slot-hover);\n}\n\n.table [data-align=\"start\"] {\n  text-align: start;\n}\n\n.table [data-align=\"center\"] {\n  text-align: center;\n}\n\n.table [data-align=\"end\"] {\n  text-align: end;\n}\n\n.sortButton {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--block-space-1);\n  margin: calc(-1 * var(--block-space-1));\n  padding: var(--block-space-1);\n  font: inherit;\n  letter-spacing: inherit;\n  text-transform: inherit;\n  color: inherit;\n  background: none;\n  border: 0;\n  cursor: pointer;\n}\n\n.sortButton:hover,\n.sortButton[data-direction] {\n  color: var(--block-text);\n}\n\n.sortButton:focus-visible {\n  outline: 3px solid var(--block-focus);\n  outline-offset: 0;\n}\n\n.sortIcon {\n  display: inline-flex;\n  opacity: 0.35;\n}\n\n.sortButton[data-direction] .sortIcon {\n  opacity: 1;\n}\n\n.empty {\n  padding: var(--block-space-6) var(--block-space-3);\n  text-align: center;\n  color: var(--block-text-muted);\n}\n"],"mappings":""}