@tecsinapse/cortex-react 1.8.0-beta.0 → 1.8.0

package/dist/cjs/components/Carousel/Carousel.js

@@ -21,7 +21,7 @@ const Carousel = ({ images }) => {
       "data-testid": "button-carousel-prev",
       variants: {
         size: "square",
-        className: "z-absolute absolute left-deca top-[50%]  transform -translate-y-[50%] p-centi"
+        className: "z-absolute absolute left-deca top-[50%]  transform -translate-y-[50%] p-centi hidden lg:flex"
       },
       onClick: slideToPrevItem
     },
@@ -32,7 +32,7 @@ const Carousel = ({ images }) => {
       "data-testid": "button-carousel-next",
       variants: {
         size: "square",
-        className: "z-absolute absolute right-deca top-[50%] transform -translate-y-[50%] p-centi"
+        className: "z-absolute absolute right-deca top-[50%] transform -translate-y-[50%] p-centi hidden lg:flex"
       },
       onClick: slideToNextItem
     },

package/dist/cjs/components/Carousel/CarouselItem.js

@@ -16,17 +16,24 @@ const CarouselItem = ({ item }) => {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     "img",
     {
-      className: "w-full h-[360px] object-fill rounded-mili",
+      className: "w-full h-[360px] object-cover rounded-mili z-absolute",
       src: item.src,
       alt: item.alt
     }
   ), /* @__PURE__ */ React.createElement(
     "div",
     {
-      className: "z-absolute absolute top-[50%] transform -translate-y-[50%] left-[10%] max-w-[60%]"
+      className: "z-absolute absolute top-[50%] transform -translate-y-[50%] left-[10%] mx-deca max-w-[60%]"
     },
     /* @__PURE__ */ React.createElement("p", { className: clsx("text-h2 font-bold"), style: stylesTitle }, item.title.text),
-    /* @__PURE__ */ React.createElement("p", { className: "text-white text-h2 font-bold", style: stylesSubTitle }, item.subtitle.text)
+    /* @__PURE__ */ React.createElement(
+      "p",
+      {
+        className: "text-white text-h2 font-bold hidden lg:flex",
+        style: stylesSubTitle
+      },
+      item.subtitle.text
+    )
   ), item.button ? /* @__PURE__ */ React.createElement(
     "a",
     {

package/dist/cjs/components/Menubar/Categories.js

@@ -2,9 +2,18 @@
 
 var React = require('react');
 var Masonry = require('../Masonry.js');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+require('@floating-ui/react');
+require('currency.js');
+require('react-dropzone');
+require('uuid');
+var useDimensions = require('../../hooks/useDimensions.js');
 
 const Categories = ({ children }) => {
-  return /* @__PURE__ */ React.createElement(Masonry, { columns: 4 }, children);
+  const { width } = useDimensions.useDimensions();
+  return /* @__PURE__ */ React.createElement(Masonry, { columns: width <= 640 ? 2 : 4 }, children);
 };
 
 module.exports = Categories;

package/dist/cjs/components/Menubar/Left.js

@@ -5,7 +5,16 @@ var menubar = require('../../styles/menubar.js');
 
 const { left } = menubar.menubar();
 const Left = ({ children, ...rest }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: left(), "data-testid": "header-left-menubar", ...rest }, children);
+  const { className } = rest;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: left({ className }),
+      "data-testid": "header-left-menubar",
+      ...rest
+    },
+    children
+  );
 };
 
 module.exports = Left;

package/dist/cjs/components/Menubar/MostUsed.js

@@ -2,9 +2,19 @@
 
 var React = require('react');
 var menubar = require('../../styles/menubar.js');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+require('@floating-ui/react');
+require('currency.js');
+require('react-dropzone');
+require('uuid');
+var useDimensions = require('../../hooks/useDimensions.js');
 
 const { container, label: labelClass, containerList } = menubar.mostUsed();
 const MostUsed = ({ label, children, ...rest }) => {
+  const { width } = useDimensions.useDimensions();
+  if (width <= 640) return /* @__PURE__ */ React.createElement(React.Fragment, null);
   return /* @__PURE__ */ React.createElement("div", { className: container(), "data-testid": "most-used-menubar", ...rest }, /* @__PURE__ */ React.createElement("p", { className: labelClass() }, label), /* @__PURE__ */ React.createElement("div", { className: containerList() }, children));
 };
 

package/dist/cjs/components/Menubar/Right.js

@@ -5,7 +5,16 @@ var menubar = require('../../styles/menubar.js');
 
 const { right } = menubar.menubar();
 const Right = ({ children, ...rest }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: right(), "data-testid": "header-right-menubar", ...rest }, children);
+  const { className } = rest;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: right({ className }),
+      "data-testid": "header-right-menubar",
+      ...rest
+    },
+    children
+  );
 };
 
 module.exports = Right;

package/dist/cjs/components/Menubar/Search.js

@@ -17,11 +17,12 @@ var useMenubar = require('../../provider/useMenubar.js');
 
 const Search = (props) => {
   const [show] = useMenubar.useMenubar();
+  const { className } = props;
   return /* @__PURE__ */ React.createElement(
     index.Input.Search,
     {
       ...props,
-      className: clsx("mr-tera flex-1", menubar.animate({ show }))
+      className: clsx("flex-1", menubar.animate({ show }), className)
     }
   );
 };

package/dist/cjs/hooks/useDimensions.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var React = require('react');
+
+const getWindowDimensions = () => {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height
+  };
+};
+const useDimensions = () => {
+  const [windowDimensions, setWindowDimensions] = React.useState(
+    getWindowDimensions()
+  );
+  React.useEffect(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return windowDimensions;
+};
+
+exports.useDimensions = useDimensions;

package/dist/cjs/index.js

@@ -55,6 +55,7 @@ var useSelectGroupedOptions = require('./hooks/useSelectGroupedOptions.js');
 var useSelectOptions = require('./hooks/useSelectOptions.js');
 var useStringMask = require('./hooks/useStringMask.js');
 var useFileUpload = require('./hooks/useFileUpload.js');
+var useDimensions = require('./hooks/useDimensions.js');
 var SnackbarSonner = require('./service/SnackbarSonner.js');
 var MenubarProvider = require('./provider/MenubarProvider.js');
 var SnackbarProvider = require('./provider/SnackbarProvider.js');
@@ -133,6 +134,7 @@ exports.getMask = useStringMask.getMask;
 exports.mergeMask = useStringMask.mergeMask;
 exports.useStringMask = useStringMask.useStringMask;
 exports.useFileUpload = useFileUpload.useFileUpload;
+exports.useDimensions = useDimensions.useDimensions;
 exports.SnackbarSonner = SnackbarSonner.SnackbarSonner;
 exports.MenubarProvider = MenubarProvider.MenubarProvider;
 exports.SnackbarProvider = SnackbarProvider.SnackbarProvider;

package/dist/cjs/styles/menubar.js

@@ -4,9 +4,9 @@ var tailwindVariants = require('tailwind-variants');
 
 const menubar = tailwindVariants.tv({
   slots: {
-    header: "relative w-screen px-kilo py-deca flex flex-row justify-between bg-white z-sidebar",
+    header: "relative w-screen px-kilo py-deca flex flex-row md:justify-between bg-white z-sidebar sm:justify-start",
     left: "flex items-center w-fit",
-    right: "flex items-center gap-x-deca",
+    right: "flex items-center gap-x-deca hidden sm:flex",
     dropdown: "w-full bg-white flex-1 shadow-default z-popover px-[8vw] absolute"
   },
   variants: {

package/dist/esm/components/Carousel/Carousel.js

@@ -19,7 +19,7 @@ const Carousel = ({ images }) => {
       "data-testid": "button-carousel-prev",
       variants: {
         size: "square",
-        className: "z-absolute absolute left-deca top-[50%]  transform -translate-y-[50%] p-centi"
+        className: "z-absolute absolute left-deca top-[50%]  transform -translate-y-[50%] p-centi hidden lg:flex"
       },
       onClick: slideToPrevItem
     },
@@ -30,7 +30,7 @@ const Carousel = ({ images }) => {
       "data-testid": "button-carousel-next",
       variants: {
         size: "square",
-        className: "z-absolute absolute right-deca top-[50%] transform -translate-y-[50%] p-centi"
+        className: "z-absolute absolute right-deca top-[50%] transform -translate-y-[50%] p-centi hidden lg:flex"
       },
       onClick: slideToNextItem
     },

package/dist/esm/components/Carousel/CarouselItem.js

@@ -14,17 +14,24 @@ const CarouselItem = ({ item }) => {
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
     "img",
     {
-      className: "w-full h-[360px] object-fill rounded-mili",
+      className: "w-full h-[360px] object-cover rounded-mili z-absolute",
       src: item.src,
       alt: item.alt
     }
   ), /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      className: "z-absolute absolute top-[50%] transform -translate-y-[50%] left-[10%] max-w-[60%]"
+      className: "z-absolute absolute top-[50%] transform -translate-y-[50%] left-[10%] mx-deca max-w-[60%]"
     },
     /* @__PURE__ */ React__default.createElement("p", { className: clsx("text-h2 font-bold"), style: stylesTitle }, item.title.text),
-    /* @__PURE__ */ React__default.createElement("p", { className: "text-white text-h2 font-bold", style: stylesSubTitle }, item.subtitle.text)
+    /* @__PURE__ */ React__default.createElement(
+      "p",
+      {
+        className: "text-white text-h2 font-bold hidden lg:flex",
+        style: stylesSubTitle
+      },
+      item.subtitle.text
+    )
   ), item.button ? /* @__PURE__ */ React__default.createElement(
     "a",
     {

package/dist/esm/components/Menubar/Categories.js

@@ -1,8 +1,17 @@
 import React__default from 'react';
 import Masonry from '../Masonry.js';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import '@floating-ui/react';
+import 'currency.js';
+import 'react-dropzone';
+import 'uuid';
+import { useDimensions } from '../../hooks/useDimensions.js';
 
 const Categories = ({ children }) => {
-  return /* @__PURE__ */ React__default.createElement(Masonry, { columns: 4 }, children);
+  const { width } = useDimensions();
+  return /* @__PURE__ */ React__default.createElement(Masonry, { columns: width <= 640 ? 2 : 4 }, children);
 };
 
 export { Categories as default };

package/dist/esm/components/Menubar/Left.js

@@ -3,7 +3,16 @@ import { menubar } from '../../styles/menubar.js';
 
 const { left } = menubar();
 const Left = ({ children, ...rest }) => {
-  return /* @__PURE__ */ React__default.createElement("div", { className: left(), "data-testid": "header-left-menubar", ...rest }, children);
+  const { className } = rest;
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      className: left({ className }),
+      "data-testid": "header-left-menubar",
+      ...rest
+    },
+    children
+  );
 };
 
 export { Left as default };

package/dist/esm/components/Menubar/MostUsed.js

@@ -1,8 +1,18 @@
 import React__default from 'react';
 import { mostUsed } from '../../styles/menubar.js';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import '@floating-ui/react';
+import 'currency.js';
+import 'react-dropzone';
+import 'uuid';
+import { useDimensions } from '../../hooks/useDimensions.js';
 
 const { container, label: labelClass, containerList } = mostUsed();
 const MostUsed = ({ label, children, ...rest }) => {
+  const { width } = useDimensions();
+  if (width <= 640) return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
   return /* @__PURE__ */ React__default.createElement("div", { className: container(), "data-testid": "most-used-menubar", ...rest }, /* @__PURE__ */ React__default.createElement("p", { className: labelClass() }, label), /* @__PURE__ */ React__default.createElement("div", { className: containerList() }, children));
 };
 

package/dist/esm/components/Menubar/Right.js

@@ -3,7 +3,16 @@ import { menubar } from '../../styles/menubar.js';
 
 const { right } = menubar();
 const Right = ({ children, ...rest }) => {
-  return /* @__PURE__ */ React__default.createElement("div", { className: right(), "data-testid": "header-right-menubar", ...rest }, children);
+  const { className } = rest;
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      className: right({ className }),
+      "data-testid": "header-right-menubar",
+      ...rest
+    },
+    children
+  );
 };
 
 export { Right as default };

package/dist/esm/components/Menubar/Search.js

@@ -15,11 +15,12 @@ import { useMenubar } from '../../provider/useMenubar.js';
 
 const Search = (props) => {
   const [show] = useMenubar();
+  const { className } = props;
   return /* @__PURE__ */ React__default.createElement(
     Input.Search,
     {
       ...props,
-      className: clsx("mr-tera flex-1", animate({ show }))
+      className: clsx("flex-1", animate({ show }), className)
     }
   );
 };

package/dist/esm/hooks/useDimensions.js

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+
+const getWindowDimensions = () => {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height
+  };
+};
+const useDimensions = () => {
+  const [windowDimensions, setWindowDimensions] = useState(
+    getWindowDimensions()
+  );
+  useEffect(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return windowDimensions;
+};
+
+export { useDimensions };

package/dist/esm/index.js

@@ -53,6 +53,7 @@ export { useSelectGroupedOptions } from './hooks/useSelectGroupedOptions.js';
 export { useSelectOptions } from './hooks/useSelectOptions.js';
 export { getMask, mergeMask, useStringMask } from './hooks/useStringMask.js';
 export { useFileUpload } from './hooks/useFileUpload.js';
+export { useDimensions } from './hooks/useDimensions.js';
 export { SnackbarSonner } from './service/SnackbarSonner.js';
 export { MenubarProvider } from './provider/MenubarProvider.js';
 export { SnackbarProvider, useSnackbar } from './provider/SnackbarProvider.js';

package/dist/esm/styles/menubar.js

@@ -2,9 +2,9 @@ import { tv } from 'tailwind-variants';
 
 const menubar = tv({
   slots: {
-    header: "relative w-screen px-kilo py-deca flex flex-row justify-between bg-white z-sidebar",
+    header: "relative w-screen px-kilo py-deca flex flex-row md:justify-between bg-white z-sidebar sm:justify-start",
     left: "flex items-center w-fit",
-    right: "flex items-center gap-x-deca",
+    right: "flex items-center gap-x-deca hidden sm:flex",
     dropdown: "w-full bg-white flex-1 shadow-default z-popover px-[8vw] absolute"
   },
   variants: {

package/dist/types/hooks/index.d.ts

@@ -12,3 +12,4 @@ export * from './useSelectGroupedOptions';
 export * from './useSelectOptions';
 export * from './useStringMask';
 export * from './useFileUpload';
+export * from './useDimensions';

package/dist/types/hooks/useDimensions.d.ts

@@ -0,0 +1,4 @@
+export declare const useDimensions: () => {
+    width: number;
+    height: number;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.8.0-beta.0",
+  "version": "1.8.0",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.18",
     "@internationalized/date": "*",
-    "@tecsinapse/cortex-core": "0.4.2",
+    "@tecsinapse/cortex-core": "0.4.3",
     "clsx": "*",
     "currency.js": "~2.0.4",
     "react-aria": "^3.33.1",
@@ -48,5 +48,5 @@
     "react-dom": ">=18.0.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "db9ab6aab2ffeac3f02916553595bf44673ee595"
+  "gitHead": "d2b72d7af61770fae8caacac311af9402b401e01"
 }