myshell-react-lib 0.1.0 → 0.1.1

package/dist/index.cjs

@@ -670,6 +670,9 @@ __export(index_exports, {
     Link: function() {
         return Link;
     },
+    Masonry: function() {
+        return Masonry;
+    },
     Menubar: function() {
         return Menubar;
     },
@@ -862,6 +865,9 @@ __export(index_exports, {
     SliderSingle: function() {
         return SliderSingle;
     },
+    Spinner: function() {
+        return Spinner;
+    },
     SubHeading: function() {
         return SubHeading;
     },
@@ -4076,6 +4082,90 @@ var import_lodash_es = require("lodash-es");
 var import_react10 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var import_react11 = require("react");
+var Masonry = function(param) {
+    var _param_breakpointCols = param.breakpointCols, breakpointCols = _param_breakpointCols === void 0 ? {
+        default: 0,
+        3280: 5,
+        1919: 4,
+        1439: 3,
+        1199: 2
+    } : _param_breakpointCols, _param_className = param.className, className = _param_className === void 0 ? "" : _param_className, _param_columnClassName = param.columnClassName, columnClassName = _param_columnClassName === void 0 ? "" : _param_columnClassName, children = param.children, _param_columnAttrs = param.columnAttrs, columnAttrs = _param_columnAttrs === void 0 ? {} : _param_columnAttrs, heights = param.heights;
+    var _ref = _sliced_to_array((0, import_react10.useState)(typeof breakpointCols === "number" ? breakpointCols : breakpointCols.default), 2), columnCount = _ref[0], setColumnCount = _ref[1];
+    var reCalculateColumnCount = function() {
+        var _window;
+        var windowWidth = ((_window = window) === null || _window === void 0 ? void 0 : _window.innerWidth) || Infinity;
+        var newColumnCount = columnCount;
+        if ((typeof breakpointCols === "undefined" ? "undefined" : _type_of(breakpointCols)) === "object") {
+            var matchedBreakpoint = Infinity;
+            for(var breakpoint in breakpointCols){
+                var optBreakpoint = parseInt(breakpoint);
+                var isCurrentBreakpoint = optBreakpoint > 0 && windowWidth <= optBreakpoint;
+                if (isCurrentBreakpoint && optBreakpoint < matchedBreakpoint) {
+                    matchedBreakpoint = optBreakpoint;
+                    newColumnCount = breakpointCols[breakpoint];
+                }
+            }
+            newColumnCount = Math.max(1, newColumnCount || 1);
+        }
+        if (columnCount !== newColumnCount) {
+            setColumnCount(newColumnCount);
+        }
+    };
+    (0, import_react10.useEffect)(function() {
+        var handleResize = function() {
+            reCalculateColumnCount();
+        };
+        window.addEventListener("resize", handleResize);
+        handleResize();
+        return function() {
+            window.removeEventListener("resize", handleResize);
+        };
+    }, [
+        breakpointCols,
+        columnCount
+    ]);
+    var itemsInColumns = function() {
+        var columns = new Array(columnCount);
+        var totals = new Array(columnCount).fill(0);
+        var items = import_react10.Children.toArray(children);
+        if (heights) {
+            for(var i = 0; i < items.length; i++){
+                var columnIndex = (0, import_lodash_es.indexOf)(totals, (0, import_lodash_es.min)(totals));
+                if (!columns[columnIndex]) {
+                    columns[columnIndex] = [];
+                }
+                columns[columnIndex].push(items[i]);
+                totals[columnIndex] += heights[i];
+            }
+        } else {
+            for(var i1 = 0; i1 < items.length; i1++){
+                var columnIndex1 = i1 % columnCount;
+                if (!columns[columnIndex1]) {
+                    columns[columnIndex1] = [];
+                }
+                columns[columnIndex1].push(items[i1]);
+            }
+        }
+        return columns;
+    };
+    var renderColumns = function() {
+        var childrenInColumns = itemsInColumns();
+        var columnWidth = "".concat(100 / childrenInColumns.length, "%");
+        return childrenInColumns.map(function(items, i) {
+            return /* @__PURE__ */ (0, import_react11.createElement)("div", _object_spread_props(_object_spread({}, columnAttrs), {
+                style: _object_spread_props(_object_spread({}, columnAttrs.style), {
+                    width: columnWidth
+                }),
+                className: cn("space-y-2 bg-clip-padding pl-2 md:space-y-5 md:pl-5", columnClassName),
+                key: i
+            }), items);
+        });
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", _object_spread_props(_object_spread({}, columnAttrs), {
+        className: cn("mr-4 flex w-auto md:mr-6", className || "my-masonry-grid"),
+        children: columnCount > 0 && renderColumns()
+    }));
+};
 // src/components/menubar.tsx
 var React23 = __toESM(require("react"), 1);
 var MenubarPrimitive = __toESM(require("@radix-ui/react-menubar"), 1);
@@ -9540,6 +9630,7 @@ var Message = /*#__PURE__*/ function() {
     Input: Input,
     Label: Label,
     Link: Link,
+    Masonry: Masonry,
     Menubar: Menubar,
     MenubarCheckboxItem: MenubarCheckboxItem,
     MenubarContent: MenubarContent,
@@ -9604,6 +9695,7 @@ var Message = /*#__PURE__*/ function() {
     Skeleton: Skeleton,
     Slider: Slider,
     SliderSingle: SliderSingle,
+    Spinner: Spinner,
     SubHeading: SubHeading,
     SubTitle: SubTitle,
     Swiper: Swiper,