@etsoo/materialui 1.4.92 → 1.4.93

package/lib/cjs/FlexBox.d.ts

@@ -5,6 +5,12 @@ import { StackProps } from "@mui/material";
  * @returns Component
  */
 export declare function HBox(props: Omit<StackProps, "ref">): import("react/jsx-runtime").JSX.Element;
+/**
+ * Horizonal box with list items
+ * @param props Props
+ * @returns Component
+ */
+export declare function HBoxList(props: Omit<StackProps, "direction">): import("react/jsx-runtime").JSX.Element;
 /**
  * Vertial box
  * @param props Props

package/lib/cjs/FlexBox.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HBox = HBox;
+exports.HBoxList = HBoxList;
 exports.VBox = VBox;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
@@ -12,6 +13,14 @@ const material_1 = require("@mui/material");
 function HBox(props) {
     return (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", width: "100%", ...props });
 }
+/**
+ * Horizonal box with list items
+ * @param props Props
+ * @returns Component
+ */
+function HBoxList(props) {
+    return ((0, jsx_runtime_1.jsx)(material_1.Stack, { spacing: 1, gap: 1, direction: "row", flexWrap: "wrap", width: "100%", ...props }));
+}
 /**
  * Vertial box
  * @param props Props

package/lib/mjs/FlexBox.d.ts

@@ -5,6 +5,12 @@ import { StackProps } from "@mui/material";
  * @returns Component
  */
 export declare function HBox(props: Omit<StackProps, "ref">): import("react/jsx-runtime").JSX.Element;
+/**
+ * Horizonal box with list items
+ * @param props Props
+ * @returns Component
+ */
+export declare function HBoxList(props: Omit<StackProps, "direction">): import("react/jsx-runtime").JSX.Element;
 /**
  * Vertial box
  * @param props Props

package/lib/mjs/FlexBox.js

@@ -8,6 +8,14 @@ import { Stack } from "@mui/material";
 export function HBox(props) {
     return _jsx(Stack, { direction: "row", width: "100%", ...props });
 }
+/**
+ * Horizonal box with list items
+ * @param props Props
+ * @returns Component
+ */
+export function HBoxList(props) {
+    return (_jsx(Stack, { spacing: 1, gap: 1, direction: "row", flexWrap: "wrap", width: "100%", ...props }));
+}
 /**
  * Vertial box
  * @param props Props

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.4.92",
+  "version": "1.4.93",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -76,13 +76,13 @@
     "@types/pica": "^9.0.5",
     "@types/pulltorefreshjs": "^0.1.7",
     "@types/react": "^18.3.18",
-    "@types/react-avatar-editor": "^13.0.3",
+    "@types/react-avatar-editor": "^13.0.4",
     "@types/react-dom": "^18.3.5",
     "@types/react-input-mask": "^3.0.6",
     "@types/react-window": "^1.8.8",
     "@vitejs/plugin-react": "^4.3.4",
     "jsdom": "^26.0.0",
     "typescript": "^5.7.3",
-    "vitest": "^3.0.6"
+    "vitest": "^3.0.7"
   }
 }

package/src/FlexBox.tsx

@@ -1,5 +1,4 @@
 import { Stack, StackProps } from "@mui/material";
-import React from "react";
 
 /**
  * Horizonal box
@@ -10,6 +9,24 @@ export function HBox(props: Omit<StackProps, "ref">) {
   return <Stack direction="row" width="100%" {...props} />;
 }
 
+/**
+ * Horizonal box with list items
+ * @param props Props
+ * @returns Component
+ */
+export function HBoxList(props: Omit<StackProps, "direction">) {
+  return (
+    <Stack
+      spacing={1}
+      gap={1}
+      direction="row"
+      flexWrap="wrap"
+      width="100%"
+      {...props}
+    />
+  );
+}
+
 /**
  * Vertial box
  * @param props Props