@malilion/block-ui-react 0.2.0 → 0.3.0

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

@@ -0,0 +1,149 @@
+import { cx } from "../../../utils/cx.js";
+import { BlockButton } from "../../actions/BlockButton/BlockButton.js";
+import { BlockInput } from "../../forms/BlockInput/BlockInput.js";
+import { useControllableState } from "../../../hooks/useControllableState.js";
+import { BlockToggle } from "../../forms/BlockToggle/BlockToggle.js";
+import { InventorySlot } from "../../inventory/InventorySlot/InventorySlot.js";
+import RecipeBook_module_default from "./RecipeBook.module.js";
+import { deriveCategories, filterRecipes } from "./RecipeBook.utils.js";
+import { forwardRef, useId, useState } from "react";
+import { ArrowIcon, SearchIcon } from "@malilion/block-ui-icons";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/crafting/RecipeBook/RecipeBook.tsx
+/**
+* Recipe book: search, category filters and a "craftable only" switch over a
+* grid of recipes, with the selected recipe's 3 × 3 pattern and result.
+*/
+var RecipeBook = forwardRef(function RecipeBook({ recipes, categories, value, defaultValue, onValueChange, onCraft, defaultCraftableOnly = false, label = "Recipe book", className, ...rest }, ref) {
+	const titleId = useId();
+	const [query, setQuery] = useState("");
+	const [category, setCategory] = useState("all");
+	const [craftableOnly, setCraftableOnly] = useState(defaultCraftableOnly);
+	const [selectedId, setSelectedId] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? "",
+		onChange: onValueChange
+	});
+	const filters = [{
+		id: "all",
+		label: "All"
+	}, ...categories ?? deriveCategories(recipes)];
+	const visible = filterRecipes(recipes, {
+		query,
+		category,
+		craftableOnly
+	});
+	const selected = recipes.find((recipe) => recipe.id === selectedId);
+	const pattern = Array.from({ length: 9 }, (_, i) => selected?.ingredients?.[i] ?? null);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "group",
+		"aria-label": label,
+		className: cx(RecipeBook_module_default.book, className),
+		...rest,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: RecipeBook_module_default.browser,
+			children: [
+				/* @__PURE__ */ jsx(BlockInput, {
+					type: "search",
+					label: "Search recipes",
+					value: query,
+					onChange: (event) => setQuery(event.target.value),
+					startIcon: /* @__PURE__ */ jsx(SearchIcon, { size: 16 })
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: RecipeBook_module_default.filters,
+					children: [/* @__PURE__ */ jsx("div", {
+						role: "group",
+						"aria-label": "Categories",
+						className: RecipeBook_module_default.categories,
+						children: filters.map((filter) => /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							"aria-pressed": category === filter.id,
+							className: RecipeBook_module_default.category,
+							onClick: () => setCategory(filter.id),
+							children: ["icon" in filter && filter.icon ? /* @__PURE__ */ jsx("span", {
+								className: RecipeBook_module_default.categoryIcon,
+								"aria-hidden": "true",
+								children: filter.icon
+							}) : null, filter.label]
+						}, filter.id))
+					}), /* @__PURE__ */ jsx(BlockToggle, {
+						size: "sm",
+						label: "Craftable only",
+						checked: craftableOnly,
+						onCheckedChange: setCraftableOnly
+					})]
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: RecipeBook_module_default.count,
+					role: "status",
+					children: visible.length === 1 ? "1 recipe" : `${visible.length} recipes`
+				}),
+				visible.length > 0 ? /* @__PURE__ */ jsx("ul", {
+					className: RecipeBook_module_default.grid,
+					"aria-label": "Recipes",
+					children: visible.map((recipe) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(InventorySlot, {
+						size: "md",
+						selected: recipe.id === selectedId,
+						label: recipe.craftable === false ? `${recipe.name} (missing ingredients)` : recipe.name,
+						"data-craftable": recipe.craftable === false ? "false" : void 0,
+						className: RecipeBook_module_default.recipe,
+						onClick: () => setSelectedId(recipe.id),
+						children: recipe.result
+					}) }, recipe.id))
+				}) : /* @__PURE__ */ jsx("p", {
+					className: RecipeBook_module_default.empty,
+					children: "No recipes match."
+				})
+			]
+		}), /* @__PURE__ */ jsxs("section", {
+			className: RecipeBook_module_default.detail,
+			"aria-labelledby": titleId,
+			children: [/* @__PURE__ */ jsx("h3", {
+				id: titleId,
+				className: RecipeBook_module_default.title,
+				children: selected ? selected.name : "Select a recipe"
+			}), selected ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: RecipeBook_module_default.preview,
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							role: "group",
+							"aria-label": "Pattern",
+							className: RecipeBook_module_default.pattern,
+							children: pattern.map((cell, index) => /* @__PURE__ */ jsx(InventorySlot, {
+								size: "sm",
+								children: cell
+							}, index))
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: RecipeBook_module_default.arrow,
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ jsx(ArrowIcon, { size: 24 })
+						}),
+						/* @__PURE__ */ jsx(InventorySlot, {
+							size: "lg",
+							label: `Makes ${selected.name}`,
+							children: selected.result
+						})
+					]
+				}),
+				selected.craftable === false ? /* @__PURE__ */ jsx("p", {
+					className: RecipeBook_module_default.missing,
+					children: "Missing ingredients"
+				}) : null,
+				onCraft ? /* @__PURE__ */ jsx(BlockButton, {
+					variant: "grass",
+					disabled: selected.craftable === false,
+					onClick: () => onCraft(selected.id),
+					children: "Craft"
+				}) : null
+			] }) : null]
+		})]
+	});
+});
+//#endregion
+export { RecipeBook };
+
+//# sourceMappingURL=RecipeBook.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RecipeBook.js","names":["styles","_Fragment"],"sources":["../../../../src/components/crafting/RecipeBook/RecipeBook.tsx"],"sourcesContent":["import { ArrowIcon, SearchIcon } from \"@malilion/block-ui-icons\";\nimport { forwardRef, useId, useState } from \"react\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport { cx } from \"../../../utils/cx\";\nimport { BlockButton } from \"../../actions/BlockButton/BlockButton\";\nimport { BlockInput } from \"../../forms/BlockInput/BlockInput\";\nimport { BlockToggle } from \"../../forms/BlockToggle/BlockToggle\";\nimport { InventorySlot } from \"../../inventory/InventorySlot/InventorySlot\";\nimport styles from \"./RecipeBook.module.css\";\nimport type { RecipeBookProps } from \"./RecipeBook.types\";\nimport { ALL, deriveCategories, filterRecipes } from \"./RecipeBook.utils\";\n\n/**\n * Recipe book: search, category filters and a \"craftable only\" switch over a\n * grid of recipes, with the selected recipe's 3 × 3 pattern and result.\n */\nexport const RecipeBook = forwardRef<HTMLDivElement, RecipeBookProps>(function RecipeBook(\n  {\n    recipes,\n    categories,\n    value,\n    defaultValue,\n    onValueChange,\n    onCraft,\n    defaultCraftableOnly = false,\n    label = \"Recipe book\",\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const titleId = useId();\n  const [query, setQuery] = useState(\"\");\n  const [category, setCategory] = useState(ALL);\n  const [craftableOnly, setCraftableOnly] = useState(defaultCraftableOnly);\n  const [selectedId, setSelectedId] = useControllableState({\n    value,\n    defaultValue: defaultValue ?? \"\",\n    onChange: onValueChange,\n  });\n\n  const filters = [{ id: ALL, label: \"All\" }, ...(categories ?? deriveCategories(recipes))];\n  const visible = filterRecipes(recipes, { query, category, craftableOnly });\n  const selected = recipes.find((recipe) => recipe.id === selectedId);\n  const pattern = Array.from({ length: 9 }, (_, i) => selected?.ingredients?.[i] ?? null);\n\n  return (\n    <div ref={ref} role=\"group\" aria-label={label} className={cx(styles.book, className)} {...rest}>\n      <div className={styles.browser}>\n        <BlockInput\n          type=\"search\"\n          label=\"Search recipes\"\n          value={query}\n          onChange={(event) => setQuery(event.target.value)}\n          startIcon={<SearchIcon size={16} />}\n        />\n        <div className={styles.filters}>\n          <div role=\"group\" aria-label=\"Categories\" className={styles.categories}>\n            {filters.map((filter) => (\n              <button\n                key={filter.id}\n                type=\"button\"\n                aria-pressed={category === filter.id}\n                className={styles.category}\n                onClick={() => setCategory(filter.id)}\n              >\n                {\"icon\" in filter && filter.icon ? (\n                  <span className={styles.categoryIcon} aria-hidden=\"true\">\n                    {filter.icon}\n                  </span>\n                ) : null}\n                {filter.label}\n              </button>\n            ))}\n          </div>\n          <BlockToggle\n            size=\"sm\"\n            label=\"Craftable only\"\n            checked={craftableOnly}\n            onCheckedChange={setCraftableOnly}\n          />\n        </div>\n        <p className={styles.count} role=\"status\">\n          {visible.length === 1 ? \"1 recipe\" : `${visible.length} recipes`}\n        </p>\n        {visible.length > 0 ? (\n          <ul className={styles.grid} aria-label=\"Recipes\">\n            {visible.map((recipe) => (\n              <li key={recipe.id}>\n                <InventorySlot\n                  size=\"md\"\n                  selected={recipe.id === selectedId}\n                  label={\n                    recipe.craftable === false\n                      ? `${recipe.name} (missing ingredients)`\n                      : recipe.name\n                  }\n                  data-craftable={recipe.craftable === false ? \"false\" : undefined}\n                  className={styles.recipe}\n                  onClick={() => setSelectedId(recipe.id)}\n                >\n                  {recipe.result}\n                </InventorySlot>\n              </li>\n            ))}\n          </ul>\n        ) : (\n          <p className={styles.empty}>No recipes match.</p>\n        )}\n      </div>\n      <section className={styles.detail} aria-labelledby={titleId}>\n        <h3 id={titleId} className={styles.title}>\n          {selected ? selected.name : \"Select a recipe\"}\n        </h3>\n        {selected ? (\n          <>\n            <div className={styles.preview}>\n              <div role=\"group\" aria-label=\"Pattern\" className={styles.pattern}>\n                {pattern.map((cell, index) => (\n                  <InventorySlot key={index} size=\"sm\">\n                    {cell}\n                  </InventorySlot>\n                ))}\n              </div>\n              <span className={styles.arrow} aria-hidden=\"true\">\n                <ArrowIcon size={24} />\n              </span>\n              <InventorySlot size=\"lg\" label={`Makes ${selected.name}`}>\n                {selected.result}\n              </InventorySlot>\n            </div>\n            {selected.craftable === false ? (\n              <p className={styles.missing}>Missing ingredients</p>\n            ) : null}\n            {onCraft ? (\n              <BlockButton\n                variant=\"grass\"\n                disabled={selected.craftable === false}\n                onClick={() => onCraft(selected.id)}\n              >\n                Craft\n              </BlockButton>\n            ) : null}\n          </>\n        ) : null}\n      </section>\n    </div>\n  );\n});\n"],"mappings":"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"}

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

@@ -0,0 +1,39 @@
+//#region src/components/crafting/RecipeBook/RecipeBook.module.css
+var book = "block-book-vGdij";
+var browser = "block-browser-1j4Ie";
+var filters = "block-filters-JOYhT";
+var categories = "block-categories-r-P5z";
+var category = "block-category-LWhjw";
+var categoryIcon = "block-categoryIcon-yPuZV";
+var count = "block-count-LKB07";
+var grid = "block-grid-9zscA";
+var recipe = "block-recipe-pTIKN";
+var empty = "block-empty-tQQcq";
+var detail = "block-detail-cDd-n";
+var title = "block-title-z3TI4";
+var preview = "block-preview-KuJ5C";
+var pattern = "block-pattern-LX2EB";
+var arrow = "block-arrow-40igD";
+var missing = "block-missing-5DpuD";
+var RecipeBook_module_default = {
+	book,
+	browser,
+	filters,
+	categories,
+	category,
+	categoryIcon,
+	count,
+	grid,
+	recipe,
+	empty,
+	detail,
+	title,
+	preview,
+	pattern,
+	arrow,
+	missing
+};
+//#endregion
+export { arrow, book, browser, categories, category, categoryIcon, count, RecipeBook_module_default as default, detail, empty, filters, grid, missing, pattern, preview, recipe, title };
+
+//# sourceMappingURL=RecipeBook.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RecipeBook.module.js","names":[],"sources":["../../../../src/components/crafting/RecipeBook/RecipeBook.module.css"],"sourcesContent":[".book {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  gap: var(--block-space-4);\n  width: 100%;\n}\n\n.browser {\n  display: flex;\n  flex: 1 1 320px;\n  flex-direction: column;\n  gap: var(--block-space-2);\n  min-width: 0;\n}\n\n.filters {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--block-space-2);\n}\n\n.categories {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--block-space-1);\n}\n\n.category {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--block-space-1);\n  min-height: 32px;\n  padding: 0 var(--block-space-2);\n  font-family: var(--block-font-display);\n  font-size: var(--block-font-size-xs);\n  text-transform: uppercase;\n  color: var(--block-text-muted);\n  background-color: var(--block-surface-alt);\n  border: var(--block-border-width-thin) solid var(--block-border);\n  box-shadow: inset 2px 2px 0 var(--block-shadow-bevel-light);\n  cursor: pointer;\n}\n\n.category:hover {\n  color: var(--block-text);\n}\n\n.category[aria-pressed=\"true\"] {\n  color: var(--block-text);\n  background-color: var(--block-surface);\n  border-color: var(--block-text-muted);\n}\n\n.category:focus-visible {\n  outline: 3px solid var(--block-focus);\n  outline-offset: 2px;\n}\n\n.categoryIcon {\n  display: inline-flex;\n}\n\n.count {\n  margin: 0;\n  font-family: var(--block-font-display);\n  font-size: var(--block-font-size-xs);\n  color: var(--block-text-muted);\n}\n\n.grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(var(--block-size-slot-md), 1fr));\n  gap: var(--block-space-1);\n  max-height: 260px;\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/* Missing ingredients: the slot glows redstone instead of looking normal. */\n.recipe[data-craftable=\"false\"] {\n  background-color: color-mix(in srgb, var(--block-redstone) 35%, var(--block-slot));\n}\n\n.empty {\n  margin: 0;\n  padding: var(--block-space-4);\n  text-align: center;\n  color: var(--block-text-muted);\n}\n\n.detail {\n  display: flex;\n  flex: 0 1 260px;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--block-space-3);\n}\n\n.title {\n  margin: 0;\n  font-family: var(--block-font-display);\n  font-size: var(--block-font-size-md);\n  text-align: center;\n  text-transform: uppercase;\n  text-shadow: var(--block-shadow-text);\n}\n\n.preview {\n  display: flex;\n  align-items: center;\n  gap: var(--block-space-2);\n}\n\n.pattern {\n  display: grid;\n  grid-template-columns: repeat(3, auto);\n  gap: 2px;\n}\n\n.arrow {\n  display: inline-flex;\n  color: var(--block-text-muted);\n}\n\n.missing {\n  margin: 0;\n  font-family: var(--block-font-display);\n  font-size: var(--block-font-size-xs);\n  color: var(--block-redstone-light);\n}\n"],"mappings":""}

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

@@ -0,0 +1,36 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface Recipe {
+    id: string;
+    /** Searchable name, also the recipe button's accessible name. */
+    name: string;
+    /** Output item, usually an `<ItemStack />`. */
+    result: ReactNode;
+    /** Category id used by the filter buttons. */
+    category: string;
+    /** 3 × 3 pattern, row by row; `null` for an empty cell. */
+    ingredients?: Array<ReactNode | null>;
+    /** Whether the player has the ingredients. @default true */
+    craftable?: boolean;
+}
+export interface RecipeCategory {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+}
+export interface RecipeBookProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue"> {
+    recipes: Recipe[];
+    /** Filter buttons. Defaults to one per category found in `recipes`. "All" is always first. */
+    categories?: RecipeCategory[];
+    /** Controlled selected recipe id. */
+    value?: string;
+    /** Initially selected recipe id. */
+    defaultValue?: string;
+    onValueChange?: (id: string) => void;
+    /** Renders a Craft button for the selected recipe. */
+    onCraft?: (id: string) => void;
+    /** Start with "Craftable only" switched on. */
+    defaultCraftableOnly?: boolean;
+    /** Accessible name. @default "Recipe book" */
+    label?: string;
+}
+//# sourceMappingURL=RecipeBook.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RecipeBook.types.d.ts","sourceRoot":"","sources":["../../../../src/components/crafting/RecipeBook/RecipeBook.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,iEAAiE;IACjE,IAAI,EAAE,MAAM,CAAC;IACb,+CAA+C;IAC/C,MAAM,EAAE,SAAS,CAAC;IAClB,8CAA8C;IAC9C,QAAQ,EAAE,MAAM,CAAC;IACjB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;IACtC,4DAA4D;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC;IAC3F,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,8FAA8F;IAC9F,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC;IAC9B,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,sDAAsD;IACtD,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,+CAA+C;IAC/C,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

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