quix-ui 1.2.5 → 1.2.7

package/dist/components/layout/Layout.d.ts

@@ -1,23 +1,3 @@
-import { LayoutProps, menuItemsDynamicStyleProps, menuItemsProps, sideMenuProps } from "./types";
+import { LayoutProps } from "./types";
 import './layout.style.css';
 export default function Layout(props: LayoutProps): import("react/jsx-runtime").JSX.Element;
-export declare function SideMenu(props: {
-    sideMenu: sideMenuProps;
-    top: number;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function MenuItem({ item, ElementType, menuItemsDynamicStyle, menuItemStyle }: {
-    item: menuItemsProps;
-    ElementType?: "NavLink" | "Link" | "a" | "div";
-    menuItemsDynamicStyle?: menuItemsDynamicStyleProps;
-    menuItemStyle?: {
-        style?: React.CSSProperties;
-        width?: {
-            desktop: number | string;
-            tablet: number | string;
-            mobile: number | string;
-        };
-    };
-}): import("react/jsx-runtime").JSX.Element;
-export declare function Header(): import("react/jsx-runtime").JSX.Element;
-export declare function Content(): import("react/jsx-runtime").JSX.Element;
-export declare function Footer(): import("react/jsx-runtime").JSX.Element;

package/dist/index.js

@@ -1,21 +1,7 @@
 import { jsx as jsx$1, jsxs } from 'react/jsx-runtime';
 import * as React3 from 'react';
-import { forwardRef, useContext } from 'react';
+import { forwardRef, useContext, useEffect, useState, useCallback } from 'react';
 
-function _classCallCheck(a, n) {
-  if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
-}
-function _defineProperties(e, r) {
-  for (var t = 0; t < r.length; t++) {
-    var o = r[t];
-    o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, _toPropertyKey(o.key), o);
-  }
-}
-function _createClass(e, r, t) {
-  return r && _defineProperties(e.prototype, r), Object.defineProperty(e, "prototype", {
-    writable: false
-  }), e;
-}
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
     value: t,
@@ -60,7 +46,7 @@ function _toPrimitive(t, r) {
     if ("object" != typeof i) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (String )(t);
+  return ("string" === r ? String : Number)(t);
 }
 function _toPropertyKey(t) {
   var i = _toPrimitive(t, "string");
@@ -3949,59 +3935,158 @@ keyframes`
   }
 `;
 
-// interface SizeMapProps {
-//     width:number,
-//     height:number
-// }
-var WindowSize = /*#__PURE__*/function () {
-  function WindowSize() {
-    _classCallCheck(this, WindowSize);
-    _defineProperty(this, "size", {
-      width: 0,
-      height: 0
-    });
-    if (typeof window === "undefined") return;
-    this.resizeWindow = this.resizeWindow.bind(this);
-    this.resizeWindow();
-    window.addEventListener("resize", this.resizeWindow);
-    this.update = this.update.bind(this);
-  }
-  return _createClass(WindowSize, [{
-    key: "resizeWindow",
-    value: function resizeWindow() {
-      this.size = {
-        width: window.innerWidth,
-        height: window.innerHeight
-      };
-      // this.update();
-    }
-  }, {
-    key: "update",
-    value: function update() {
-      return [this.size];
-    }
-  }, {
-    key: "destroy",
-    value: function destroy() {
-      window.removeEventListener("resize", this.resizeWindow);
-    }
-  }]);
-}();
-var useWindowSize = new WindowSize();
+function useWindowEvent(type, listener, options) {
+  useEffect(() => {
+    window.addEventListener(type, listener, options);
+    return () => window.removeEventListener(type, listener, options);
+  }, [type, listener]);
+}
+
+const eventListerOptions = {
+  passive: true
+};
+function useViewportSize() {
+  const [windowSize, setWindowSize] = useState({
+    width: 0,
+    height: 0
+  });
+  const setSize = useCallback(() => {
+    setWindowSize({ width: window.innerWidth || 0, height: window.innerHeight || 0 });
+  }, []);
+  useWindowEvent("resize", setSize, eventListerOptions);
+  useWindowEvent("orientationchange", setSize, eventListerOptions);
+  useEffect(setSize, []);
+  return windowSize;
+}
 
 var _templateObject, _templateObject2, _templateObject3;
 function Layout(props) {
   var _header$height, _header$height2, _sideMenu$width$table, _sideMenu$width, _sideMenu$width$deskt, _sideMenu$width2, _sideMenu$width$deskt2, _sideMenu$width3;
-  var update = useWindowSize.update;
   var backgroundColor = props.backgroundColor,
     layoutStyle = props.layoutStyle,
     className = props.className,
     sideMenu = props.sideMenu,
     content = props.content,
     header = props.header;
-  var size = update()[0];
+  var size = useViewportSize();
   var LayoutSection = styled.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width:", "\n    "])), layoutStyle === null || layoutStyle === void 0 ? void 0 : layoutStyle.width);
   var Content = styled.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\n    "])));
+  function SideMenu(props) {
+    var _sideMenuStyle$left, _menuItemStyle$width$, _menuItemStyle$width, _sideMenuStyle$bottom, _props$top, _menuItemStyle$width2;
+    var _props$sideMenu = props.sideMenu,
+      width = _props$sideMenu.width,
+      sideMenuStyle = _props$sideMenu.sideMenuStyle,
+      menuItems = _props$sideMenu.menuItems,
+      ElementType = _props$sideMenu.ElementType,
+      bottomSection = _props$sideMenu.bottomSection,
+      menuItemStyle = _props$sideMenu.menuItemStyle,
+      menuItemsDynamicStyle = _props$sideMenu.menuItemsDynamicStyle;
+    var bottomNode = function bottomNode(menuItemStyle) {
+      if (bottomSection) {
+        return bottomSection.map(function (item) {
+          return MenuItem({
+            item: item,
+            menuItemStyle: menuItemStyle
+          });
+        });
+      }
+    };
+    return jsxs("aside", {
+      className: " quix_side_menu ",
+      style: _objectSpread2({
+        position: 'absolute',
+        left: size.width < 450 ? 8 : (_sideMenuStyle$left = sideMenuStyle === null || sideMenuStyle === void 0 ? void 0 : sideMenuStyle.left) !== null && _sideMenuStyle$left !== void 0 ? _sideMenuStyle$left : 0,
+        bottom: size.width < 450 ? Number((_menuItemStyle$width$ = menuItemStyle === null || menuItemStyle === void 0 || (_menuItemStyle$width = menuItemStyle.width) === null || _menuItemStyle$width === void 0 ? void 0 : _menuItemStyle$width.mobile) !== null && _menuItemStyle$width$ !== void 0 ? _menuItemStyle$width$ : 48) / 2 : (_sideMenuStyle$bottom = sideMenuStyle === null || sideMenuStyle === void 0 ? void 0 : sideMenuStyle.bottom) !== null && _sideMenuStyle$bottom !== void 0 ? _sideMenuStyle$bottom : 0,
+        width: size.width < 450 ? '100%' : size.width > 450 && size.width < 850 ? width.tablet : size.width >= 850 ? width.desktop : 300,
+        top: size.width < 450 ? 'none' : (_props$top = props === null || props === void 0 ? void 0 : props.top) !== null && _props$top !== void 0 ? _props$top : 80,
+        height: size.width < 450 ? menuItemStyle === null || menuItemStyle === void 0 || (_menuItemStyle$width2 = menuItemStyle.width) === null || _menuItemStyle$width2 === void 0 ? void 0 : _menuItemStyle$width2.mobile : '90%',
+        // height: 48,
+        zIndex: 99
+      }, sideMenuStyle),
+      children: [menuItems && menuItems.map(function (item) {
+        return MenuItem({
+          item: item,
+          ElementType: ElementType,
+          menuItemsDynamicStyle: menuItemsDynamicStyle,
+          menuItemStyle: menuItemStyle
+        });
+      }), size.width > 450 && jsx$1("div", {
+        className: " sidemenu_bottom_section ",
+        children: jsx$1("div", {
+          className: " items ",
+          children: bottomNode(menuItemStyle)
+        })
+      })]
+    });
+  }
+  function MenuItem(_ref) {
+    var _menuItemsDynamicStyl, _menuItemsDynamicStyl2, _menuItemsDynamicStyl3, _menuItemsDynamicStyl4, _menuItemsDynamicStyl5, _menuItemsDynamicStyl6, _menuItemStyle$style, _menuItemStyle$style2, _menuItemStyle$width3, _menuItemStyle$width4, _menuItemStyle$width5;
+    var item = _ref.item,
+      ElementType = _ref.ElementType,
+      menuItemsDynamicStyle = _ref.menuItemsDynamicStyle,
+      menuItemStyle = _ref.menuItemStyle;
+    var windowWidth = size.width;
+    var MenuItemElement = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n     background-color:", ";\n     color:", ";\n\n     &:hover{\n     background-color:", ";\n     color:", "\n     }\n    "])), (_menuItemsDynamicStyl = menuItemsDynamicStyle === null || menuItemsDynamicStyle === void 0 ? void 0 : menuItemsDynamicStyle.backgroundColor) !== null && _menuItemsDynamicStyl !== void 0 ? _menuItemsDynamicStyl : '#d4d4d480', (_menuItemsDynamicStyl2 = menuItemsDynamicStyle === null || menuItemsDynamicStyle === void 0 ? void 0 : menuItemsDynamicStyle.textColor) !== null && _menuItemsDynamicStyl2 !== void 0 ? _menuItemsDynamicStyl2 : "#121212", (_menuItemsDynamicStyl3 = menuItemsDynamicStyle === null || menuItemsDynamicStyle === void 0 || (_menuItemsDynamicStyl4 = menuItemsDynamicStyle.activeColor) === null || _menuItemsDynamicStyl4 === void 0 ? void 0 : _menuItemsDynamicStyl4.background) !== null && _menuItemsDynamicStyl3 !== void 0 ? _menuItemsDynamicStyl3 : '#d4d4d4', (_menuItemsDynamicStyl5 = menuItemsDynamicStyle === null || menuItemsDynamicStyle === void 0 || (_menuItemsDynamicStyl6 = menuItemsDynamicStyle.activeColor) === null || _menuItemsDynamicStyl6 === void 0 ? void 0 : _menuItemsDynamicStyl6.text) !== null && _menuItemsDynamicStyl5 !== void 0 ? _menuItemsDynamicStyl5 : "#121212");
+    var navigate = function navigate(route) {
+      window.location.replace(route);
+    };
+    var Element = function Element(_ref2) {
+      var children = _ref2.children;
+      return ElementType === 'NavLink' ? jsx$1(NavLink, {
+        style: {
+          width: "100%"
+        },
+        to: item.route,
+        children: children
+      }, item.label) : ElementType === 'Link' ? jsx$1(Link, {
+        style: {
+          width: "100%"
+        },
+        to: item.route,
+        children: children
+      }, item.label) : ElementType === 'a' ? jsx$1("a", {
+        style: {
+          width: "100%",
+          textDecoration: 'none'
+        },
+        href: item.route,
+        children: children
+      }, item.label) : jsx$1("div", {
+        style: {
+          width: "100%"
+        },
+        onClick: function onClick() {
+          navigate(item.route);
+        },
+        children: children
+      }, item.label);
+    };
+    return jsx$1(Element, {
+      children: jsx$1("div", {
+        style: {
+          padding: windowWidth > 850 ? 10 : 6,
+          width: '100%'
+        },
+        children: jsxs(MenuItemElement, {
+          className: '  ',
+          style: _objectSpread2({
+            transition: '0.2s all',
+            justifyContent: windowWidth > 850 ? menuItemStyle === null || menuItemStyle === void 0 || (_menuItemStyle$style = menuItemStyle.style) === null || _menuItemStyle$style === void 0 ? void 0 : _menuItemStyle$style.justifyContent : 'center',
+            borderRadius: windowWidth > 850 ? menuItemStyle === null || menuItemStyle === void 0 || (_menuItemStyle$style2 = menuItemStyle.style) === null || _menuItemStyle$style2 === void 0 ? void 0 : _menuItemStyle$style2.borderRadius : 2,
+            width: windowWidth <= 450 ? menuItemStyle === null || menuItemStyle === void 0 || (_menuItemStyle$width3 = menuItemStyle.width) === null || _menuItemStyle$width3 === void 0 ? void 0 : _menuItemStyle$width3.mobile : windowWidth > 450 && windowWidth < 850 ? menuItemStyle === null || menuItemStyle === void 0 || (_menuItemStyle$width4 = menuItemStyle.width) === null || _menuItemStyle$width4 === void 0 ? void 0 : _menuItemStyle$width4.tablet : windowWidth >= 850 ? menuItemStyle === null || menuItemStyle === void 0 || (_menuItemStyle$width5 = menuItemStyle.width) === null || _menuItemStyle$width5 === void 0 ? void 0 : _menuItemStyle$width5.desktop : 300
+          }, menuItemStyle === null || menuItemStyle === void 0 ? void 0 : menuItemStyle.style),
+          children: [item.icon && item.icon.position === 'left' && item.icon.component, windowWidth > 850 && jsx$1("p", {
+            className: " quix_menuItem_label ",
+            style: {
+              paddingInline: 10,
+              paddingBlock: 8
+            },
+            children: item === null || item === void 0 ? void 0 : item.label
+          }), item.icon && item.icon.position === 'right' && item.icon.component]
+        })
+      }, item.label)
+    });
+  }
   // console.log( (size.width) - ((size.width < 450 ? Number(sideMenu?.width.mobile) : size.width < 850 ? Number(sideMenu?.width.tablet) : size.width > 850 ? Number(sideMenu?.width.desktop) : Number(sideMenu?.width.desktop)) + 30))
   return jsxs(LayoutSection, {
     className: "".concat(className),
@@ -4031,125 +4116,5 @@ function Layout(props) {
     })]
   });
 }
-function SideMenu(props) {
-  var _sideMenuStyle$left, _menuItemStyle$width$, _menuItemStyle$width, _sideMenuStyle$bottom, _props$top, _menuItemStyle$width2;
-  var _props$sideMenu = props.sideMenu,
-    width = _props$sideMenu.width,
-    sideMenuStyle = _props$sideMenu.sideMenuStyle,
-    menuItems = _props$sideMenu.menuItems,
-    ElementType = _props$sideMenu.ElementType,
-    bottomSection = _props$sideMenu.bottomSection,
-    menuItemStyle = _props$sideMenu.menuItemStyle,
-    menuItemsDynamicStyle = _props$sideMenu.menuItemsDynamicStyle;
-  var update = useWindowSize.update;
-  var size = update()[0];
-  var bottomNode = function bottomNode(menuItemStyle) {
-    if (bottomSection) {
-      return bottomSection.map(function (item) {
-        return MenuItem({
-          item: item,
-          menuItemStyle: menuItemStyle
-        });
-      });
-    }
-  };
-  return jsxs("aside", {
-    className: " quix_side_menu ",
-    style: _objectSpread2({
-      position: 'absolute',
-      left: size.width < 450 ? 8 : (_sideMenuStyle$left = sideMenuStyle === null || sideMenuStyle === void 0 ? void 0 : sideMenuStyle.left) !== null && _sideMenuStyle$left !== void 0 ? _sideMenuStyle$left : 0,
-      bottom: size.width < 450 ? Number((_menuItemStyle$width$ = menuItemStyle === null || menuItemStyle === void 0 || (_menuItemStyle$width = menuItemStyle.width) === null || _menuItemStyle$width === void 0 ? void 0 : _menuItemStyle$width.mobile) !== null && _menuItemStyle$width$ !== void 0 ? _menuItemStyle$width$ : 48) / 2 : (_sideMenuStyle$bottom = sideMenuStyle === null || sideMenuStyle === void 0 ? void 0 : sideMenuStyle.bottom) !== null && _sideMenuStyle$bottom !== void 0 ? _sideMenuStyle$bottom : 0,
-      width: size.width < 450 ? '100%' : size.width > 450 && size.width < 850 ? width.tablet : size.width >= 850 ? width.desktop : 300,
-      top: size.width < 450 ? 'none' : (_props$top = props === null || props === void 0 ? void 0 : props.top) !== null && _props$top !== void 0 ? _props$top : 80,
-      height: size.width < 450 ? menuItemStyle === null || menuItemStyle === void 0 || (_menuItemStyle$width2 = menuItemStyle.width) === null || _menuItemStyle$width2 === void 0 ? void 0 : _menuItemStyle$width2.mobile : '90%',
-      // height: 48,
-      zIndex: 99
-    }, sideMenuStyle),
-    children: [menuItems && menuItems.map(function (item) {
-      return MenuItem({
-        item: item,
-        ElementType: ElementType,
-        menuItemsDynamicStyle: menuItemsDynamicStyle,
-        menuItemStyle: menuItemStyle
-      });
-    }), size.width > 450 && jsx$1("div", {
-      className: " sidemenu_bottom_section ",
-      children: jsx$1("div", {
-        className: " items ",
-        children: bottomNode(menuItemStyle)
-      })
-    })]
-  });
-}
-function MenuItem(_ref) {
-  var _menuItemsDynamicStyl, _menuItemsDynamicStyl2, _menuItemsDynamicStyl3, _menuItemsDynamicStyl4, _menuItemsDynamicStyl5, _menuItemsDynamicStyl6, _menuItemStyle$style, _menuItemStyle$style2, _menuItemStyle$width3, _menuItemStyle$width4, _menuItemStyle$width5;
-  var item = _ref.item,
-    ElementType = _ref.ElementType,
-    menuItemsDynamicStyle = _ref.menuItemsDynamicStyle,
-    menuItemStyle = _ref.menuItemStyle;
-  var update = useWindowSize.update;
-  var size = update()[0];
-  var windowWidth = size.width;
-  var MenuItemElement = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n     background-color:", ";\n     color:", ";\n\n     &:hover{\n     background-color:", ";\n     color:", "\n     }\n    "])), (_menuItemsDynamicStyl = menuItemsDynamicStyle === null || menuItemsDynamicStyle === void 0 ? void 0 : menuItemsDynamicStyle.backgroundColor) !== null && _menuItemsDynamicStyl !== void 0 ? _menuItemsDynamicStyl : '#d4d4d480', (_menuItemsDynamicStyl2 = menuItemsDynamicStyle === null || menuItemsDynamicStyle === void 0 ? void 0 : menuItemsDynamicStyle.textColor) !== null && _menuItemsDynamicStyl2 !== void 0 ? _menuItemsDynamicStyl2 : "#121212", (_menuItemsDynamicStyl3 = menuItemsDynamicStyle === null || menuItemsDynamicStyle === void 0 || (_menuItemsDynamicStyl4 = menuItemsDynamicStyle.activeColor) === null || _menuItemsDynamicStyl4 === void 0 ? void 0 : _menuItemsDynamicStyl4.background) !== null && _menuItemsDynamicStyl3 !== void 0 ? _menuItemsDynamicStyl3 : '#d4d4d4', (_menuItemsDynamicStyl5 = menuItemsDynamicStyle === null || menuItemsDynamicStyle === void 0 || (_menuItemsDynamicStyl6 = menuItemsDynamicStyle.activeColor) === null || _menuItemsDynamicStyl6 === void 0 ? void 0 : _menuItemsDynamicStyl6.text) !== null && _menuItemsDynamicStyl5 !== void 0 ? _menuItemsDynamicStyl5 : "#121212");
-  var navigate = function navigate(route) {
-    window.location.replace(route);
-  };
-  var Element = function Element(_ref2) {
-    var children = _ref2.children;
-    return ElementType === 'NavLink' ? jsx$1(NavLink, {
-      style: {
-        width: "100%"
-      },
-      to: item.route,
-      children: children
-    }, item.label) : ElementType === 'Link' ? jsx$1(Link, {
-      style: {
-        width: "100%"
-      },
-      to: item.route,
-      children: children
-    }, item.label) : ElementType === 'a' ? jsx$1("a", {
-      style: {
-        width: "100%",
-        textDecoration: 'none'
-      },
-      href: item.route,
-      children: children
-    }, item.label) : jsx$1("div", {
-      style: {
-        width: "100%"
-      },
-      onClick: function onClick() {
-        navigate(item.route);
-      },
-      children: children
-    }, item.label);
-  };
-  return jsx$1(Element, {
-    children: jsx$1("div", {
-      style: {
-        padding: windowWidth > 850 ? 10 : 6,
-        width: '100%'
-      },
-      children: jsxs(MenuItemElement, {
-        className: '  ',
-        style: _objectSpread2({
-          transition: '0.2s all',
-          justifyContent: windowWidth > 850 ? menuItemStyle === null || menuItemStyle === void 0 || (_menuItemStyle$style = menuItemStyle.style) === null || _menuItemStyle$style === void 0 ? void 0 : _menuItemStyle$style.justifyContent : 'center',
-          borderRadius: windowWidth > 850 ? menuItemStyle === null || menuItemStyle === void 0 || (_menuItemStyle$style2 = menuItemStyle.style) === null || _menuItemStyle$style2 === void 0 ? void 0 : _menuItemStyle$style2.borderRadius : 2,
-          width: windowWidth <= 450 ? menuItemStyle === null || menuItemStyle === void 0 || (_menuItemStyle$width3 = menuItemStyle.width) === null || _menuItemStyle$width3 === void 0 ? void 0 : _menuItemStyle$width3.mobile : windowWidth > 450 ? menuItemStyle === null || menuItemStyle === void 0 || (_menuItemStyle$width4 = menuItemStyle.width) === null || _menuItemStyle$width4 === void 0 ? void 0 : _menuItemStyle$width4.tablet : windowWidth >= 850 ? menuItemStyle === null || menuItemStyle === void 0 || (_menuItemStyle$width5 = menuItemStyle.width) === null || _menuItemStyle$width5 === void 0 ? void 0 : _menuItemStyle$width5.desktop : 300
-        }, menuItemStyle === null || menuItemStyle === void 0 ? void 0 : menuItemStyle.style),
-        children: [item.icon && item.icon.position === 'left' && item.icon.component, windowWidth > 850 && jsx$1("p", {
-          className: " quix_menuItem_label ",
-          style: {
-            paddingInline: 10,
-            paddingBlock: 8
-          },
-          children: item === null || item === void 0 ? void 0 : item.label
-        }), item.icon && item.icon.position === 'right' && item.icon.component]
-      })
-    }, item.label)
-  });
-}
 
 export { Buttons, FlexView, Layout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quix-ui",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "description": "This is a react component library.",
   "type": "module",
   "main": "dist/index.js",
@@ -55,6 +55,7 @@
     "@eslint/js": "^9.39.2",
     "@figma/eslint-plugin-figma-plugins": "^1.0.0",
     "@figma/plugin-typings": "^1.122.0",
+    "@mantine/hooks": "^8.3.13",
     "@rollup/plugin-babel": "^6.1.0",
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
@@ -70,6 +71,7 @@
     "axios": "^1.13.2",
     "babel-loader": "^10.0.0",
     "eslint": "^9.39.2",
+    "fs": "^0.0.1-security",
     "globals": "^17.0.0",
     "husky": "^9.1.7",
     "jest": "^30.2.0",
@@ -90,10 +92,7 @@
     "typescript-eslint": "^8.53.0"
   },
   "peerDependencies": {
-    "react": "^18",
-    "react-dom": "^18"
-  },
-  "dependencies": {
-    "fs": "^0.0.1-security"
+    "react": "^16",
+    "react-dom": "^16"
   }
 }