@ttoss/landing-pages 0.9.9 → 0.10.0

package/dist/esm/index.js

@@ -69,16 +69,18 @@ var Hero = ({
 };
 
 // src/HeroCarousel/HeroCarousel.tsx
+import * as React2 from "react";
 import { Box, Flex as Flex2, Image as Image2 } from "@ttoss/ui";
-import { Icon } from "@iconify/react";
-import React2 from "react";
+import { Icon } from "@ttoss/react-icons";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var HeroCarousel = ({
   images = []
 }) => {
   const [selectedImage, setSelectedImage] = React2.useState(images[0].id);
   const handleRight = () => {
-    const currentIndex = images.findIndex(item => item.id === selectedImage);
+    const currentIndex = images.findIndex(item => {
+      return item.id === selectedImage;
+    });
     const isLast = currentIndex === images.length - 1;
     if (isLast) {
       return setSelectedImage(images[0].id);
@@ -86,7 +88,9 @@ var HeroCarousel = ({
     setSelectedImage(images[currentIndex + 1].id);
   };
   const handleLeft = () => {
-    const currentIndex = images.findIndex(item => item.id === selectedImage);
+    const currentIndex = images.findIndex(item => {
+      return item.id === selectedImage;
+    });
     const isFirst = currentIndex === 0;
     if (isFirst) {
       return setSelectedImage(images[images.length - 1].id);
@@ -94,7 +98,9 @@ var HeroCarousel = ({
     setSelectedImage(images[currentIndex - 1].id);
   };
   const image = React2.useMemo(() => {
-    const result = images.find(item => item.id === selectedImage);
+    const result = images.find(item => {
+      return item.id === selectedImage;
+    });
     return result;
   }, [selectedImage, images]);
   return /* @__PURE__ */jsx2(Flex2, {
@@ -153,7 +159,9 @@ var HeroCarousel = ({
         children: images.map(image2 => {
           return /* @__PURE__ */jsx2(Box, {
             role: "button",
-            onClick: () => setSelectedImage(image2.id),
+            onClick: () => {
+              return setSelectedImage(image2.id);
+            },
             sx: {
               background: image2.id === selectedImage ? "gray" : "black",
               width: 10,
@@ -169,7 +177,8 @@ var HeroCarousel = ({
 };
 
 // src/Footer/Footer.tsx
-import { Flex as Flex3, Grid, Icon as Icon2, Image as Image3, Link, Text as Text2 } from "@ttoss/ui";
+import { Flex as Flex3, Grid, Image as Image3, Link, Text as Text2 } from "@ttoss/ui";
+import { Icon as Icon2 } from "@ttoss/react-icons";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var Footer = ({
   links,
@@ -241,9 +250,10 @@ var Footer = ({
 };
 
 // src/Navbar/Navbar.tsx
+import * as React3 from "react";
 import { Collapse } from "react-collapse";
-import { Flex as Flex4, Grid as Grid2, Icon as Icon3, Image as Image4, Link as Link2, Text as Text3 } from "@ttoss/ui";
-import React3 from "react";
+import { Flex as Flex4, Grid as Grid2, Image as Image4, Link as Link2, Text as Text3 } from "@ttoss/ui";
+import { Icon as Icon3 } from "@ttoss/react-icons";
 import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var Navbar = ({
   links,

package/dist/index.js

@@ -114,16 +114,18 @@ var Hero = ({
 };
 
 // src/HeroCarousel/HeroCarousel.tsx
+var React2 = __toESM(require("react"));
 var import_ui2 = require("@ttoss/ui");
-var import_react = require("@iconify/react");
-var import_react2 = __toESM(require("react"));
+var import_react_icons = require("@ttoss/react-icons");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var HeroCarousel = ({
   images = []
 }) => {
-  const [selectedImage, setSelectedImage] = import_react2.default.useState(images[0].id);
+  const [selectedImage, setSelectedImage] = React2.useState(images[0].id);
   const handleRight = () => {
-    const currentIndex = images.findIndex(item => item.id === selectedImage);
+    const currentIndex = images.findIndex(item => {
+      return item.id === selectedImage;
+    });
     const isLast = currentIndex === images.length - 1;
     if (isLast) {
       return setSelectedImage(images[0].id);
@@ -131,15 +133,19 @@ var HeroCarousel = ({
     setSelectedImage(images[currentIndex + 1].id);
   };
   const handleLeft = () => {
-    const currentIndex = images.findIndex(item => item.id === selectedImage);
+    const currentIndex = images.findIndex(item => {
+      return item.id === selectedImage;
+    });
     const isFirst = currentIndex === 0;
     if (isFirst) {
       return setSelectedImage(images[images.length - 1].id);
     }
     setSelectedImage(images[currentIndex - 1].id);
   };
-  const image = import_react2.default.useMemo(() => {
-    const result = images.find(item => item.id === selectedImage);
+  const image = React2.useMemo(() => {
+    const result = images.find(item => {
+      return item.id === selectedImage;
+    });
     return result;
   }, [selectedImage, images]);
   return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.Flex, {
@@ -169,7 +175,7 @@ var HeroCarousel = ({
             alignItems: "center"
           },
           onClick: handleLeft,
-          children: /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_react.Icon, {
+          children: /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_react_icons.Icon, {
             icon: "akar-icons:chevron-left"
           })
         }), image && /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.Image, {
@@ -185,7 +191,7 @@ var HeroCarousel = ({
             alignItems: "center"
           },
           onClick: handleRight,
-          children: /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_react.Icon, {
+          children: /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_react_icons.Icon, {
             icon: "akar-icons:chevron-right"
           })
         })]
@@ -198,7 +204,9 @@ var HeroCarousel = ({
         children: images.map(image2 => {
           return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.Box, {
             role: "button",
-            onClick: () => setSelectedImage(image2.id),
+            onClick: () => {
+              return setSelectedImage(image2.id);
+            },
             sx: {
               background: image2.id === selectedImage ? "gray" : "black",
               width: 10,
@@ -215,6 +223,7 @@ var HeroCarousel = ({
 
 // src/Footer/Footer.tsx
 var import_ui3 = require("@ttoss/ui");
+var import_react_icons2 = require("@ttoss/react-icons");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var Footer = ({
   links,
@@ -265,7 +274,7 @@ var Footer = ({
         children: socialMedia.map(social => {
           return /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_ui3.Link, {
             href: social.href,
-            children: /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_ui3.Icon, {
+            children: /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_react_icons2.Icon, {
               icon: social.icon
             })
           }, `social-media-${social.icon}`);
@@ -286,9 +295,10 @@ var Footer = ({
 };
 
 // src/Navbar/Navbar.tsx
+var React3 = __toESM(require("react"));
 var import_react_collapse = require("react-collapse");
 var import_ui4 = require("@ttoss/ui");
-var import_react3 = __toESM(require("react"));
+var import_react_icons3 = require("@ttoss/react-icons");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var Navbar = ({
   links,
@@ -296,13 +306,13 @@ var Navbar = ({
   cta,
   type = "1"
 }) => {
-  const [isMenuOpen, setIsMenuOpen] = import_react3.default.useState(false);
+  const [isMenuOpen, setIsMenuOpen] = React3.useState(false);
   const {
     gridTemplateAreas,
     heightLogo,
     gridTemplateColumns,
     justifySelfLogo
-  } = import_react3.default.useMemo(() => {
+  } = React3.useMemo(() => {
     if (type === "1") {
       return {
         gridTemplateAreas: '"logo links cta"',
@@ -336,7 +346,7 @@ var Navbar = ({
             justifySelf: "start",
             fontSize: "3xl"
           },
-          children: /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_ui4.Icon, {
+          children: /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_react_icons3.Icon, {
             onClick: () => {
               setIsMenuOpen(prev => {
                 return !prev;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/landing-pages",
-  "version": "0.9.9",
+  "version": "0.10.0",
   "description": "Package for creating landing pages.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -25,7 +25,8 @@
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/ui": "^2.0.4"
+    "@ttoss/react-icons": "^0.1.0",
+    "@ttoss/ui": "^3.1.0"
   },
   "devDependencies": {
     "@types/jest": "^29.5.3",
@@ -34,8 +35,9 @@
     "jest": "^29.6.1",
     "tsup": "^7.1.0",
     "@ttoss/config": "^1.30.5",
+    "@ttoss/react-icons": "^0.1.0",
     "@ttoss/test-utils": "^1.23.6",
-    "@ttoss/ui": "^2.0.4"
+    "@ttoss/ui": "^3.1.0"
   },
   "keywords": [
     "React",

package/src/Footer/Footer.tsx

@@ -1,4 +1,5 @@
-import { Flex, Grid, Icon, Image, Link, Text } from '@ttoss/ui';
+import { Flex, Grid, Image, Link, Text } from '@ttoss/ui';
+import { Icon } from '@ttoss/react-icons';
 
 type FooterLink = {
   label: string;

package/src/HeroCarousel/HeroCarousel.tsx

@@ -1,6 +1,6 @@
+import * as React from 'react';
 import { Box, Flex, Image } from '@ttoss/ui';
-import { Icon } from '@iconify/react';
-import React from 'react';
+import { Icon } from '@ttoss/react-icons';
 
 export type HeroCarouselProps = {
   images: {
@@ -14,7 +14,9 @@ export const HeroCarousel = ({ images = [] }: HeroCarouselProps) => {
   const [selectedImage, setSelectedImage] = React.useState(images[0].id);
 
   const handleRight = () => {
-    const currentIndex = images.findIndex((item) => item.id === selectedImage);
+    const currentIndex = images.findIndex((item) => {
+      return item.id === selectedImage;
+    });
     const isLast = currentIndex === images.length - 1;
 
     if (isLast) {
@@ -25,7 +27,9 @@ export const HeroCarousel = ({ images = [] }: HeroCarouselProps) => {
   };
 
   const handleLeft = () => {
-    const currentIndex = images.findIndex((item) => item.id === selectedImage);
+    const currentIndex = images.findIndex((item) => {
+      return item.id === selectedImage;
+    });
     const isFirst = currentIndex === 0;
 
     if (isFirst) {
@@ -36,7 +40,9 @@ export const HeroCarousel = ({ images = [] }: HeroCarouselProps) => {
   };
 
   const image = React.useMemo(() => {
-    const result = images.find((item) => item.id === selectedImage);
+    const result = images.find((item) => {
+      return item.id === selectedImage;
+    });
 
     return result;
   }, [selectedImage, images]);
@@ -93,7 +99,9 @@ export const HeroCarousel = ({ images = [] }: HeroCarouselProps) => {
               <Box
                 key={image.id}
                 role="button"
-                onClick={() => setSelectedImage(image.id)}
+                onClick={() => {
+                  return setSelectedImage(image.id);
+                }}
                 sx={{
                   background: image.id === selectedImage ? 'gray' : 'black',
                   width: 10,

package/src/Navbar/Navbar.tsx

@@ -1,6 +1,7 @@
+import * as React from 'react';
 import { Collapse } from 'react-collapse';
-import { Flex, Grid, Icon, Image, Link, Text } from '@ttoss/ui';
-import React from 'react';
+import { Flex, Grid, Image, Link, Text } from '@ttoss/ui';
+import { Icon } from '@ttoss/react-icons';
 
 type NavbarLink = {
   label: string;