mui-flexy - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

dist/Flex.d.ts

 import type { OverridableComponent } from "@mui/material/OverridableComponent";
 import { Theme as MaterialTheme } from "@mui/material/styles";
-import { Theme as SystemTheme } from "@mui/system/createTheme";
+import { Theme as SystemTheme } from "@mui/system";
 import type { FlexBoxProps, FlexBoxTypeMap, FlexGrid2Props, FlexGridProps, FlexGridTypeMap } from "./Flex.types";
@@ -10,2 +10,2 @@ export { FlexBoxProps };
 export { FlexGrid2Props };
-export declare const FlexGrid2: OverridableComponent<FlexGridTypeMap<undefined, {}, "div">>;
+export declare const FlexGrid2: OverridableComponent<import("./Flex.types").FlexGrid2TypeMap<undefined, {}, "div">> | import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;

dist/Flex.js

@@ -0,60 +1,39 @@
+import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
 import MuiBox from '@mui/material/Box';
 import MuiGrid from '@mui/material/Grid';
-import { forwardRef, createElement } from 'react';
+import { major } from '@mui/material/version';
+import { forwardRef } from 'react';
 import { mapFlexProps } from './Flex.utils.js';
+import { createUnstable_FlexGrid2 } from './v5/Flex_v5.js';
+import { createFlexGrid2 } from './v6/Flex_v6.js';
+import { jsx } from 'react/jsx-runtime';
 
-const muiPkg = await import('@mui/material/package.json');
-const muiVersion = parseInt(muiPkg?.version?.split(".")[0], 10);
-const MuiGrid2 = await import('@mui/material').then((m)=>{
-    if (muiVersion > 5) {
-        // @ts-ignore
-        return m?.Grid2;
-    }
-    // @ts-ignore
-    return m?.Unstable_Grid2;
-});
-const createFlexBox = ()=>/*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ createElement(MuiBox, mapFlexProps(props, ref, "Box")));
-const FlexBox = createFlexBox();
-const createFlexGrid = ()=>/*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ createElement(MuiGrid, mapFlexProps(props, ref, "Grid")));
-const FlexGrid = createFlexGrid();
-const createFlexGrid2_v6 = ()=>/*#__PURE__*/ forwardRef((props, ref)=>{
-        const { xs, sm, md, lg, xl, size, ...rest } = props;
-        const sizeValues = [
-            xs,
-            sm,
-            md,
-            lg,
-            xl
-        ].filter((value)=>value !== null && value !== undefined);
-        const sizeProps = size ?? (sizeValues.every((value)=>value === sizeValues[0]) ? sizeValues[0] : {
-            xs,
-            sm,
-            md,
-            lg,
-            xl
-        });
-        props = {
-            ...rest,
-            size: sizeProps
-        };
-        return /*#__PURE__*/ createElement(MuiGrid2, mapFlexProps(props, ref, "Grid2"));
+var createFlexBox = function createFlexBox() {
+  return /*#__PURE__*/forwardRef(function (props, ref) {
+    return /*#__PURE__*/jsx(MuiBox, _objectSpread2({}, mapFlexProps(props, ref, "Box")));
+  });
+};
+var FlexBox = createFlexBox();
+var createFlexGrid = function createFlexGrid() {
+  return /*#__PURE__*/forwardRef(
+  // @ts-ignore
+  function (props, ref) {
+    return /*#__PURE__*/jsx(MuiGrid, _objectSpread2({}, mapFlexProps(props, ref, "Grid")));
+  });
+};
+var FlexGrid = createFlexGrid();
+var FlexGrid2 = function () {
+  try {
+    return major > 5 ? createFlexGrid2() : createUnstable_FlexGrid2();
+  } catch (err) {
+    return /*#__PURE__*/forwardRef(function (props, ref) {
+      return /*#__PURE__*/jsx(MuiBox, _objectSpread2(_objectSpread2({}, props), {}, {
+        ref: ref,
+        children: String((err === null || err === void 0 ? void 0 : err.message) || err)
+      }));
     });
-const createFlexGrid2_v5 = ()=>/*#__PURE__*/ forwardRef((props, ref)=>{
-        const { size, ...rest } = props;
-        const xs = typeof size === "number" || typeof size === "string" ? size : size?.xs;
-        const { xs: _xs, sm, md, lg, xl } = size || {};
-        props = {
-            ...rest,
-            xs: xs || _xs,
-            sm,
-            md,
-            lg,
-            xl,
-            ref
-        };
-        return /*#__PURE__*/ createElement(MuiGrid2, mapFlexProps(props, ref, "Grid2"));
-    });
-const FlexGrid2 = muiVersion > 5 ? createFlexGrid2_v6() : createFlexGrid2_v5();
+  }
+}();
 
 export { FlexBox, FlexGrid, FlexGrid2 };
 //# sourceMappingURL=Flex.js.map

dist/Flex.utils.js

@@ -1,227 +0,249 @@
-const mapAlignment = (alignment)=>{
-    if (!alignment) return;
-    if (typeof alignment === "string") {
-        switch(alignment){
-            case "top":
-            case "left":
-                return "flex-start";
-            case "bottom":
-            case "right":
-                return "flex-end";
-            default:
-                return alignment;
-        }
-    } else if (Array.isArray(alignment)) {
-        return alignment.map((a)=>mapAlignment(a));
-    } else if (typeof alignment === "object") {
-        return Object.fromEntries(Object.entries(alignment).map(([k, a])=>[
-                k,
-                mapAlignment(a)
-            ]));
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, typeof as _typeof, slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, createForOfIteratorHelper as _createForOfIteratorHelper } from './_virtual/_rollupPluginBabelHelpers.js';
+
+var _excluded = ["x", "y", "row", "column", "flexDirection", "reverse", "nowrap"];
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+var _mapAlignment = function mapAlignment(alignment) {
+  if (!alignment) return;
+  if (typeof alignment === "string") {
+    switch (alignment) {
+      case "top":
+      case "left":
+        return "flex-start";
+      case "bottom":
+      case "right":
+        return "flex-end";
+      default:
+        return alignment;
     }
+  } else if (Array.isArray(alignment)) {
+    return alignment.map(function (a) {
+      return _mapAlignment(a);
+    });
+  } else if (_typeof(alignment) === "object") {
+    return Object.fromEntries(Object.entries(alignment).map(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+        k = _ref2[0],
+        a = _ref2[1];
+      return [k, _mapAlignment(a)];
+    }));
+  }
 };
-const mapDirection = (direction, reverse = false)=>{
-    if (!direction) return "row";
-    if (typeof direction === "string") {
-        if (![
-            "row",
-            "row-reverse",
-            "column",
-            "column-reverse"
-        ].includes(direction)) {
-            console.warn(`Using { flex-direction: ${direction} } with mui-flexy shorthand is not recommended \
-because it can cause unexpected alignment and orientation anomalies.`);
-        }
-        switch(direction){
-            case "row":
-            case "column":
-                return `${direction}${reverse ? "-reverse" : ""}`;
-            default:
-                return direction;
-        }
-    } else if (Array.isArray(direction)) {
-        return direction.map((d)=>!d ? "row" : mapDirection(d, reverse));
-    } else if (typeof direction === "object") {
-        return Object.fromEntries(Object.entries(direction).map(([k, d])=>[
-                k,
-                mapDirection(d, reverse)
-            ]));
+var _mapDirection = function mapDirection(direction) {
+  var reverse = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  if (!direction) return "row";
+  if (typeof direction === "string") {
+    if (!["row", "row-reverse", "column", "column-reverse"].includes(direction)) {
+      console.warn("Using { flex-direction: ".concat(direction, " } with mui-flexy shorthand is not recommended because it can cause unexpected alignment and orientation anomalies."));
     }
-};
-const stringOrArrayValue = (value, index)=>{
-    if (typeof value === "string") {
-        return value;
-    } else if (Array.isArray(value)) {
-        return value?.[index];
+    switch (direction) {
+      case "row":
+      case "column":
+        return "".concat(direction).concat(reverse ? "-reverse" : "");
+      default:
+        return direction;
     }
-};
-const mapResponsiveObject = (direction, main, cross)=>{
-    return Object.fromEntries(Object.entries(direction ?? []).map(([key, d])=>{
-        if (typeof d !== "string") {
-            throw new Error("Values for a flex direction ResponsiveStyleObject must be strings, e.g. { xs: 'row', sm: 'column' }");
-        }
-        if (d.startsWith("column")) {
-            return [
-                key,
-                typeof cross === "string" ? cross : mapAlignment(cross)?.[key]
-            ];
-        } else {
-            return [
-                key,
-                typeof main === "string" ? main : mapAlignment(main)?.[key]
-            ];
-        }
+  } else if (Array.isArray(direction)) {
+    return direction.map(function (d) {
+      return !d ? "row" : _mapDirection(d, reverse);
+    });
+  } else if (_typeof(direction) === "object") {
+    return Object.fromEntries(Object.entries(direction).map(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+        k = _ref4[0],
+        d = _ref4[1];
+      return [k, _mapDirection(d, reverse)];
     }));
+  }
 };
-const resolveAlignment = (direction, x, y)=>{
-    if (typeof direction === "string") {
-        const isColumn = direction.startsWith("column");
-        return {
-            justifyContent: mapAlignment(isColumn ? y : x),
-            alignItems: mapAlignment(isColumn ? x : y)
-        };
+var stringOrArrayValue = function stringOrArrayValue(value, index) {
+  if (typeof value === "string") {
+    return value;
+  } else if (Array.isArray(value)) {
+    return value === null || value === void 0 ? void 0 : value[index];
+  }
+};
+var mapResponsiveObject = function mapResponsiveObject(direction, main, cross) {
+  return Object.fromEntries(Object.entries(direction !== null && direction !== void 0 ? direction : []).map(function (_ref5) {
+    var _ref6 = _slicedToArray(_ref5, 2),
+      key = _ref6[0],
+      d = _ref6[1];
+    if (typeof d !== "string") {
+      throw new Error("Values for a flex direction ResponsiveStyleObject must be strings, e.g. { xs: 'row', sm: 'column' }");
     }
-    if (Array.isArray(direction)) {
-        return {
-            justifyContent: direction.map((d, i)=>stringOrArrayValue(mapAlignment(d?.startsWith("column") ? y : x), i)),
-            alignItems: direction.map((d, i)=>stringOrArrayValue(mapAlignment(d?.startsWith("column") ? x : y), i))
-        };
+    if (d.startsWith("column")) {
+      var _mapAlignment2;
+      return [key, typeof cross === "string" ? cross : (_mapAlignment2 = _mapAlignment(cross)) === null || _mapAlignment2 === void 0 ? void 0 : _mapAlignment2[key]];
+    } else {
+      var _mapAlignment3;
+      return [key, typeof main === "string" ? main : (_mapAlignment3 = _mapAlignment(main)) === null || _mapAlignment3 === void 0 ? void 0 : _mapAlignment3[key]];
     }
-    if (typeof direction === "object") {
-        return {
-            justifyContent: mapResponsiveObject(direction, x, y),
-            alignItems: mapResponsiveObject(direction, y, x)
-        };
-    }
+  }));
+};
+var resolveAlignment = function resolveAlignment(direction, x, y) {
+  if (typeof direction === "string") {
+    var isColumn = direction.startsWith("column");
     return {
-        justifyContent: x,
-        alignItems: y
+      justifyContent: _mapAlignment(isColumn ? y : x),
+      alignItems: _mapAlignment(isColumn ? x : y)
     };
+  }
+  if (Array.isArray(direction)) {
+    return {
+      justifyContent: direction.map(function (d, i) {
+        return stringOrArrayValue(_mapAlignment(d !== null && d !== void 0 && d.startsWith("column") ? y : x), i);
+      }),
+      alignItems: direction.map(function (d, i) {
+        return stringOrArrayValue(_mapAlignment(d !== null && d !== void 0 && d.startsWith("column") ? x : y), i);
+      })
+    };
+  }
+  if (_typeof(direction) === "object") {
+    return {
+      justifyContent: mapResponsiveObject(direction, x, y),
+      alignItems: mapResponsiveObject(direction, y, x)
+    };
+  }
+  return {
+    justifyContent: x,
+    alignItems: y
+  };
 };
-const resolveDirection = (row, column, reverse = false, fallback = "row")=>{
-    /* Maps boolean responsive row/column props to flexDirection values */ const rowIsNullOrUndefined = row === null || row === undefined;
-    const columnIsNullOrUndefined = column === null || column === undefined;
-    if (rowIsNullOrUndefined && columnIsNullOrUndefined) {
-        return mapDirection(fallback, reverse);
+var _resolveDirection = function resolveDirection(row, column) {
+  var reverse = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var fallback = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "row";
+  /* Maps boolean responsive row/column props to flexDirection values */
+
+  var rowIsNullOrUndefined = row === null || row === undefined;
+  var columnIsNullOrUndefined = column === null || column === undefined;
+  if (rowIsNullOrUndefined && columnIsNullOrUndefined) {
+    return _mapDirection(fallback, reverse);
+  }
+  var rowIsFalse = row === false;
+  var columnIsFalse = column === false;
+  var chooseRow = [true, "row"].includes(row) || columnIsFalse || columnIsNullOrUndefined;
+  var chooseColumn = [true, "column"].includes(column) || rowIsFalse || rowIsNullOrUndefined;
+  if (rowIsFalse && !columnIsFalse) {
+    chooseRow = false;
+    chooseColumn = true;
+  } else if (columnIsFalse && !rowIsFalse) {
+    chooseColumn = false;
+    chooseRow = true;
+  } else if (chooseRow && chooseColumn) {
+    chooseColumn = false;
+  }
+  var rowIsArray = Array.isArray(row);
+  var columnIsArray = Array.isArray(column);
+  var rowIsObject = _typeof(row) === "object" && !rowIsArray && !rowIsNullOrUndefined;
+  var columnIsObject = _typeof(column) === "object" && !columnIsArray && !columnIsNullOrUndefined;
+  if ([!rowIsObject, !columnIsObject, !rowIsArray, !columnIsArray].every(Boolean)) {
+    return _mapDirection(chooseColumn ? "column" : chooseRow ? "row" : fallback, reverse);
+  }
+  var rowIsFalsy = !row || rowIsArray && !row.length || rowIsObject && !Object.keys(row).length;
+  var columnIsFalsy = !column || columnIsArray && !column.length || columnIsObject && !Object.keys(column).length;
+  if (rowIsArray && columnIsFalsy) {
+    return row.map(function (r) {
+      return _resolveDirection(r, column, reverse, fallback);
+    });
+  }
+  if (columnIsArray && rowIsFalsy) {
+    return column.map(function (c) {
+      return _resolveDirection(row, c, reverse, fallback);
+    });
+  }
+  if (rowIsArray && columnIsArray) {
+    var composite = [];
+    if (row.length !== column.length) {
+      console.warn("When using Array type ResponsiveFlexDirection for both 'row' and 'column', they should be the same length (have the same number of breakpoints) - got row=".concat(JSON.stringify(row), " and column=").concat(JSON.stringify(column), ". You probably want to use just one or the other."));
+      var longestLength = Math.max(row.length, column.length);
+      for (var i = 0; i < longestLength; i++) {
+        var _row$i, _column$i;
+        var r = (_row$i = row[i]) !== null && _row$i !== void 0 ? _row$i : column[i] === "column" ? "row" : "column";
+        var c = (_column$i = column[i]) !== null && _column$i !== void 0 ? _column$i : row[i] === "row" ? "column" : "row";
+        composite.push(_resolveDirection(r, c, reverse, fallback));
+      }
+      return composite;
     }
-    const rowIsFalse = row === false;
-    const columnIsFalse = column === false;
-    let chooseRow = [
-        true,
-        "row"
-    ].includes(row) || columnIsFalse || columnIsNullOrUndefined;
-    let chooseColumn = [
-        true,
-        "column"
-    ].includes(column) || rowIsFalse || rowIsNullOrUndefined;
-    if (rowIsFalse && !columnIsFalse) {
-        chooseRow = false;
-        chooseColumn = true;
-    } else if (columnIsFalse && !rowIsFalse) {
-        chooseColumn = false;
-        chooseRow = true;
-    } else if (chooseRow && chooseColumn) {
-        chooseColumn = false;
-    }
-    const rowIsArray = Array.isArray(row);
-    const columnIsArray = Array.isArray(column);
-    const rowIsObject = typeof row === "object" && !rowIsArray && !rowIsNullOrUndefined;
-    const columnIsObject = typeof column === "object" && !columnIsArray && !columnIsNullOrUndefined;
-    if ([
-        !rowIsObject,
-        !columnIsObject,
-        !rowIsArray,
-        !columnIsArray
-    ].every(Boolean)) {
-        return mapDirection(chooseColumn ? "column" : chooseRow ? "row" : fallback, reverse);
-    }
-    const rowIsFalsy = !row || rowIsArray && !row.length || rowIsObject && !Object.keys(row).length;
-    const columnIsFalsy = !column || columnIsArray && !column.length || columnIsObject && !Object.keys(column).length;
-    if (rowIsArray && columnIsFalsy) {
-        return row.map((r)=>resolveDirection(r, column, reverse, fallback));
-    }
-    if (columnIsArray && rowIsFalsy) {
-        return column.map((c)=>resolveDirection(row, c, reverse, fallback));
-    }
-    if (rowIsArray && columnIsArray) {
-        const composite = [];
-        if (row.length !== column.length) {
-            console.warn(`When using Array type ResponsiveFlexDirection for both 'row' and 'column', they should be the same length (have the same number of breakpoints) - got row=${JSON.stringify(row)} and column=${JSON.stringify(column)}. You probably want to use just one or the other.`);
-            const longestLength = Math.max(row.length, column.length);
-            for(let i = 0; i < longestLength; i++){
-                const r = row[i] ?? (column[i] === "column" ? "row" : "column");
-                const c = column[i] ?? (row[i] === "row" ? "column" : "row");
-                composite.push(resolveDirection(r, c, reverse, fallback));
-            }
-            return composite;
+
+    // if any of the values in each array are both true for the same array index, warn in the console and default to 'row'
+    return row.map(function (r, i) {
+      var c = column[i];
+      if (r && c) {
+        console.warn("When using Array type ResponsiveFlexDirection for both 'row' and 'column', they cannot not both be true for the same breakpoint index - got row=".concat(JSON.stringify(row), " and column=").concat(JSON.stringify(column), ". Defaulting to 'row' for conflicting indices."));
+        c = false;
+      }
+      return _resolveDirection(r, c, reverse, fallback);
+    });
+  }
+  if (rowIsObject && columnIsFalsy) {
+    return Object.fromEntries(Object.entries(row).filter(function (_ref7) {
+      var _ref8 = _slicedToArray(_ref7, 2),
+        r = _ref8[1];
+      return ![null, undefined].includes(r);
+    }).map(function (_ref9) {
+      var _ref10 = _slicedToArray(_ref9, 2),
+        k = _ref10[0],
+        r = _ref10[1];
+      return [k, _resolveDirection(r, undefined, reverse, fallback)];
+    }));
+  }
+  if (columnIsObject && rowIsFalsy) {
+    return Object.fromEntries(Object.entries(column).filter(function (_ref11) {
+      var _ref12 = _slicedToArray(_ref11, 2),
+        r = _ref12[1];
+      return ![null, undefined].includes(r);
+    }).map(function (_ref13) {
+      var _ref14 = _slicedToArray(_ref13, 2),
+        k = _ref14[0],
+        c = _ref14[1];
+      return [k, _resolveDirection(undefined, c, reverse, fallback)];
+    }));
+  }
+  if (rowIsObject && columnIsObject) {
+    var _composite = {};
+    var keys = new Set([].concat(_toConsumableArray(Object.keys(row)), _toConsumableArray(Object.keys(column))));
+    var _iterator = _createForOfIteratorHelper(keys),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var key = _step.value;
+        var _r = row[key];
+        var _c = column[key];
+        if ([null, undefined].includes(_r) && [null, undefined].includes(_c)) {
+          // if both are empty, omit the key
+          continue;
         }
-        // if any of the values in each array are both true for the same array index, warn in the console and default to 'row'
-        return row.map((r, i)=>{
-            let c = column[i];
-            if (r && c) {
-                console.warn(`When using Array type ResponsiveFlexDirection for both 'row' and 'column', they cannot not both be true for the same breakpoint index - got row=${JSON.stringify(row)} and column=${JSON.stringify(column)}. Defaulting to 'row' for conflicting indices.`);
-                c = false;
-            }
-            return resolveDirection(r, c, reverse, fallback);
-        });
+        _composite[key] = _resolveDirection(_r, _c, reverse, fallback);
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
     }
-    if (rowIsObject && columnIsFalsy) {
-        return Object.fromEntries(Object.entries(row).filter(([, r])=>![
-                null,
-                undefined
-            ].includes(r)).map(([k, r])=>[
-                k,
-                resolveDirection(r, undefined, reverse, fallback)
-            ]));
-    }
-    if (columnIsObject && rowIsFalsy) {
-        return Object.fromEntries(Object.entries(column).filter(([, r])=>![
-                null,
-                undefined
-            ].includes(r)).map(([k, c])=>[
-                k,
-                resolveDirection(undefined, c, reverse, fallback)
-            ]));
-    }
-    if (rowIsObject && columnIsObject) {
-        const composite = {};
-        const keys = new Set([
-            ...Object.keys(row),
-            ...Object.keys(column)
-        ]);
-        for (const key of keys){
-            const r = row[key];
-            const c = column[key];
-            if ([
-                null,
-                undefined
-            ].includes(r) && [
-                null,
-                undefined
-            ].includes(c)) {
-                continue;
-            }
-            composite[key] = resolveDirection(r, c, reverse, fallback);
-        }
-        return composite;
-    }
+    return _composite;
+  }
 };
-const mapFlexProps = (props, ref, componentName = "Box")=>{
-    const { x, y, row, column, flexDirection, reverse, nowrap, ...rest } = props;
-    const direction = resolveDirection(row, column, reverse, flexDirection);
-    const whiteSpace = nowrap ? "nowrap" : props.whiteSpace;
-    const flexProps = {
-        display: rest.display || "flex",
-        whiteSpace
-    };
-    const className = `${props.className || ""} MuiFlex-root${componentName ? ` MuiFlex${componentName}-root` : ""}`;
-    const alignments = resolveAlignment(direction, x, y);
-    return {
-        ...rest,
-        ...flexProps,
-        ...alignments,
-        flexDirection: direction,
-        className,
-        ref
-    };
+var mapFlexProps = function mapFlexProps(props, ref) {
+  var componentName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "Box";
+  var x = props.x,
+    y = props.y,
+    row = props.row,
+    column = props.column,
+    flexDirection = props.flexDirection,
+    reverse = props.reverse,
+    nowrap = props.nowrap,
+    rest = _objectWithoutProperties(props, _excluded);
+  var direction = _resolveDirection(row, column, reverse, flexDirection);
+  var whiteSpace = nowrap ? "nowrap" : props.whiteSpace;
+  var flexProps = {
+    display: rest.display || "flex",
+    whiteSpace: whiteSpace
+  };
+  var className = "".concat(props.className || "", " MuiFlex-root").concat(componentName ? " MuiFlex".concat(componentName, "-root") : "");
+  var alignments = resolveAlignment(direction, x, y);
+  return _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, rest), flexProps), alignments), {}, {
+    flexDirection: direction,
+    className: className,
+    ref: ref
+  });
 };
@@ -228,0 +250,0 @@

package.json

 {
   "name": "mui-flexy",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "A flexbox convenience component for Material UI Box and Grid with handy shorthand props",
@@ -9,6 +9,3 @@ "type": "module",
   "types": "dist/index.d.ts",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/brandonscript/mui-flexy.git"
-  },
+  "repository": "https://github.com/brandonscript/mui-flexy",
   "author": "github.com/brandonscript",
@@ -28,5 +25,11 @@ "license": "MIT",
     "clean": "rm -rf dist && mkdir dist",
-    "build": "yarn clean && rollup -c && tsc -p tsconfig.dist.json",
-    "ship": "npm run build && if [ $? -eq 0 ]; then npm whoami && npm publish; else echo 'Build failed'; fi",
-    "test": "NODE_OPTIONS=--experimental-vm-modules ./node_modules/.bin/jest --config jest.config.js"
+    "clean:docs": "rm -rf docs/static && mkdir -p docs/static",
+    "build": "yarn install && yarn clean && rollup -c rollup.config.mjs && tsc -p tsconfig.dist.json",
+    "build:docs": "yarn install && yarn clean:docs && rollup -c rollup.docs.mjs",
+    "build:all": "yarn build && yarn build:docs",
+    "docs": "cd docs && npx http-server -o ./",
+    "ship": "./ship.sh",
+    "up": "./up.sh",
+    "test": "NODE_OPTIONS=--experimental-vm-modules ./node_modules/.bin/jest --config jest.config.js",
+    "prepare": "husky"
   },
@@ -36,23 +39,29 @@ "peerDependencies": {
     "@emotion/styled": "^11",
-    "@mui/material": "^5 || ^6",
-    "@types/react": "^17 || ^18",
-    "@types/react-dom": "^17 || ^18",
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18",
+    "@mui/material": "^5",
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19",
     "typescript": ">=5.4"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.2.4",
-    "@eslint/js": "^9",
-    "@rollup/plugin-commonjs": "^28.0.2",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
+    "@eslint/compat": "^1.2.7",
+    "@eslint/js": "^9.23.0",
+    "@humanwhocodes/module-importer": "^1.0.1",
+    "@rollup/plugin-alias": "^5.1.1",
+    "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-swc": "^0.4.0",
-    "@swc/cli": "^0.5.2",
-    "@swc/core": "^1.10.1",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@swc/cli": "^0.6.0",
+    "@swc/core": "^1.11.11",
     "@types/jest": "^28.1.8",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "@typescript-eslint/parser": "^8",
-    "eslint": "^9",
+    "@types/react": "^17 || ^18 || ^19",
+    "@types/react-dom": "^17 || ^18 || ^19",
+    "@types/rollup-plugin-peer-deps-external": "^2",
+    "@typescript-eslint/parser": "^8.27.0",
+    "eslint": "^9.23.0",
     "eslint-import-resolver-typescript": "^3.7.0",
@@ -64,13 +73,17 @@ "eslint-plugin-import-x": "^4",
     "eslint-plugin-unused-imports": "^4",
-    "jest": "^29",
-    "jest-environment-jsdom": "^29",
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18",
-    "rollup": "^4.28",
-    "ts-jest": "^29",
-    "ts-loader": "^9",
-    "tslib": "^2.4.0",
-    "typescript": ">=5.4",
-    "typescript-eslint": "^8"
+    "husky": "^9.1.7",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "prettier": "3.5.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup": "^4.36.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "ts-jest": "^29.2.6",
+    "ts-loader": "^9.5.2",
+    "tslib": "^2.8.1",
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.27.0"
   }
 }

README.md

@@ -7,35 +7,56 @@ <img width="256" alt="flex-logo" src="https://user-images.githubusercontent.com/1480253/186842214-5575f27e-fc48-4617-bedb-a7ec29411203.png">
 
-## The problem
+![NPM Version](https://img.shields.io/npm/v/mui-flexy)
+![NPM Downloads](https://img.shields.io/npm/dm/mui-flexy?label=downloads)
+![GitHub Issues or Pull Requests](https://img.shields.io/github/issues/brandonscript/mui-flexy)
+![MUI Versions](https://img.shields.io/badge/%40mui%2Fmaterial%20v5%20%7C%20v6-blue)
+![React Versions](https://img.shields.io/badge/React%2017%20%7C%2018-8A2BE2)
 
-If you have never been confused whether to use `justify-content` or `align-items`, then Flexy is not for you. If you have, then get started with `yarn add mui-flexy` or `npm install mui-flexy`.
+## Get started
 
-Vanilla CSS requires a lot of mental gymnastics to remember which alignment property to use depending on the axis of your flexbox:
+### Install
 
-`justify-content` aligns along the main axis and `align-items` aligns along the cross axis. When you change the axis, you have to re-write your alignments. This gets exponentially more difficult when you introduce responsive breakpoints.
+```shell
+yarn add mui-flexy
+# or
+npm install mui-flexy
+```
 
-## The solution
+> Notes:
+>
+> - This lib was designed for TypeScript, so please file a bug or PR if you find any issues using it with untyped JS.
+> - As of v1.2.0, CommonJS is no longer supported. If you need it, please use an older version, or file a bug/PR.
 
-Science and math solved this problem a long time ago with constants like `x` and `y` to represent 2-dimensional space, where `x` is the horizontal axis and `y` is the vertical axis.
+### Dependencies
 
-mui-flexy gives you a way to align things in the same way using `x` and `y` props instead, calculating all the hard CSS stuff for you so you don't have to.
+Make sure you've got `@mui/material` and its dependencies installed, as well as React:
 
-![mui-flexy](https://user-images.githubusercontent.com/1480253/186974043-d75cd310-c60b-4835-ba80-e72cbab167c3.gif)
+```shell
+yarn add @mui/material @emotion/react @emotion/styled react react-dom
+# or
+npm install @mui/material @emotion/react @emotion/styled react react-dom
+```
 
-Want to see for yourself? [Try it out!](https://brandonscript.github.io/mui-flexy/)
+If you haven't already, make sure to wrap your app with the MUI `ThemeProvider`:
 
-## Getting started
+```jsx
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+import { CssBaseline } from "@mui/material";
 
-```shell
-yarn add mui-flexy
-# or
-npm install mui-flexy
+const theme = createTheme({
+  palette: {
+    mode: "light", // or "dark"
+  },
+});
+const App = () => (
+  <ThemeProvider theme={theme}>
+    <CssBaseline />
+    <YourApp />
+  </ThemeProvider>
+);
 ```
 
-Notes:
+### Basic usage
 
-- This lib was designed for TypeScript, so please file a bug or PR if you find any issues using it with untyped JS.
-- As of v1.2.0, CommonJS is no longer supported. If you need it, please use an older version, or file a bug/PR.
+Import the `FlexBox` or `FlexGrid` components from `mui-flexy` and use them in your app as you would with MUI's `Box` or `Grid` components:
 
-Make sure you've got `@mui/material` and its dependencies installed, as well as React, then add to your project:
-
 ```jsx
@@ -50,4 +71,24 @@ import { Typography } from "@mui/material"; // or use a <p> if you don't like fun typography
 
-## Using a FlexBox
+## Why `mui-flexy`?
 
+### The problem
+
+If you have never been confused whether to use `justify-content` or `align-items`, then Flexy is not for you. If you have, then get started with `yarn add mui-flexy` or `npm install mui-flexy`.
+
+Vanilla CSS requires a lot of mental gymnastics to remember which alignment property to use depending on the axis of your flexbox:
+
+`justify-content` aligns along the main axis and `align-items` aligns along the cross axis. When you change the axis, you have to re-write your alignments. This gets exponentially more difficult when you introduce responsive breakpoints.
+
+### The solution
+
+Science and math solved this problem a long time ago with constants like `x` and `y` to represent 2-dimensional space, where `x` is the horizontal axis and `y` is the vertical axis.
+
+mui-flexy gives you a way to align things in the same way using `x` and `y` props instead, calculating all the hard CSS stuff for you so you don't have to.
+
+![mui-flexy](https://user-images.githubusercontent.com/1480253/186974043-d75cd310-c60b-4835-ba80-e72cbab167c3.gif)
+
+## Usage & features
+
+Check out the [live demo](https://brandonscript.github.io/mui-flexy/) for examples of all `mui-flexy`'s features.
+
 FlexBox can be used as a drop-in replacement for MUI's Box component, with the added benefit of `x` and `y` props for alignment:
@@ -54,0 +95,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

223201

10.86%

Dependency count

6

-25%

Number of package files

24

71.43%

Lines of code

674

71.07%

Number of lines in readme file

319

14.75%

Worsened metrics

Dev dependency count

41

41.38%

Number of low supply chain risk alerts

1

Infinity%

No dependency changes