@rpg-engine/long-bow 0.7.90 → 0.7.91

package/dist/long-bow.esm.js

@@ -28642,9 +28642,12 @@ var CraftBook = function CraftBook(_ref) {
   var _useState3 = useState(),
     size = _useState3[0],
     setSize = _useState3[1];
-  var _useState4 = useState(false),
-    isCraftingDisabled = _useState4[0],
-    setIsCraftingDisabled = _useState4[1];
+  var _useState4 = useState(''),
+    searchTerm = _useState4[0],
+    setSearchTerm = _useState4[1];
+  var _useState5 = useState(false),
+    isCraftingDisabled = _useState5[0],
+    setIsCraftingDisabled = _useState5[1];
   useEffect(function () {
     var handleResize = function handleResize() {
       if (window.innerWidth < 500 && (size == null ? void 0 : size.width) !== mobilePortrait.width && (!scale || scale < 1)) {
@@ -28710,6 +28713,11 @@ var CraftBook = function CraftBook(_ref) {
       }, row);
     });
   };
+  var filteredCraftableItems = craftablesItems == null ? void 0 : craftablesItems.filter(function (item) {
+    var matchesSearch = item.name.toLowerCase().includes(searchTerm.toLowerCase());
+    var matchesCategory = selectedType === 'Suggested' || item.type === selectedType;
+    return matchesSearch && matchesCategory;
+  });
   if (!size) return null;
   return React.createElement(DraggableContainer, {
     type: RPGUIContainerTypes.Framed,
@@ -28726,13 +28734,21 @@ var CraftBook = function CraftBook(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$2, null, "Craftbook"), React.createElement(Subtitle, null, "Select an item to craft"), React.createElement("hr", {
+  }, React.createElement(Title$2, null, "Craftbook"), React.createElement(Subtitle, null, "Select an item to craft"), React.createElement(SearchContainer$1, null, React.createElement("input", {
+    type: "text",
+    className: "rpgui-input",
+    placeholder: "Search items...",
+    value: searchTerm,
+    onChange: function onChange(e) {
+      return setSearchTerm(e.target.value);
+    }
+  })), React.createElement("hr", {
     className: "golden"
   })), React.createElement(ContentContainer, null, React.createElement(ItemTypes, {
     className: "inputRadioCraftBook"
   }, renderItemTypes()), React.createElement(RadioInputScroller, {
     className: "inputRadioCraftBook"
-  }, craftablesItems == null ? void 0 : craftablesItems.map(function (item) {
+  }, filteredCraftableItems == null ? void 0 : filteredCraftableItems.map(function (item) {
     return React.createElement(CraftingRecipe, {
       key: item.key,
       atlasIMG: atlasIMG,
@@ -28793,6 +28809,10 @@ var ItemTypes = /*#__PURE__*/styled.div.withConfig({
   displayName: "CraftBook__ItemTypes",
   componentId: "sc-19q95ue-6"
 })(["display:flex;overflow-y:scroll;overflow-x:hidden;width:max-content;flex-direction:column;padding-right:5px;@media (max-width:", "){overflow-x:scroll;overflow-y:hidden;padding-right:0;width:100%;}"], mobilePortrait.width);
+var SearchContainer$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftBook__SearchContainer",
+  componentId: "sc-19q95ue-7"
+})(["margin:8px 0;padding:0 16px;input{width:100%;font-size:0.8rem;padding:8px 12px;background-color:rgba(0,0,0,0.3);border:none;color:white;border-radius:4px;&::placeholder{color:rgba(255,255,255,0.5);}&:focus{outline:none;background-color:rgba(0,0,0,0.4);}}"]);
 
 var Dropdown = function Dropdown(_ref) {
   var options = _ref.options,