@ttoss/landing-pages 0.12.5 → 0.12.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/landing-pages",
-  "version": "0.12.5",
+  "version": "0.12.6",
   "description": "Package for creating landing pages.",
   "author": "ttoss",
   "contributors": [
@@ -28,8 +28,8 @@
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/react-icons": "^0.4.1",
-    "@ttoss/ui": "^5.0.5"
+    "@ttoss/react-icons": "^0.4.2",
+    "@ttoss/ui": "^5.0.6"
   },
   "devDependencies": {
     "@types/jest": "^29.5.13",
@@ -37,10 +37,10 @@
     "@types/react-collapse": "^5.0.4",
     "jest": "^29.7.0",
     "tsup": "^8.3.0",
-    "@ttoss/config": "^1.32.10",
-    "@ttoss/react-icons": "^0.4.1",
-    "@ttoss/test-utils": "^2.1.14",
-    "@ttoss/ui": "^5.0.5"
+    "@ttoss/config": "^1.33.0",
+    "@ttoss/ui": "^5.0.6",
+    "@ttoss/test-utils": "^2.1.15",
+    "@ttoss/react-icons": "^0.4.2"
   },
   "keywords": [
     "React",

package/dist/esm/index.js

@@ -1,407 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-
-// src/Hero/Hero.tsx
-import { Button, Flex, Heading, Image, Text } from "@ttoss/ui";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Hero = ({
-  alignment,
-  headerText,
-  subHeaderText,
-  imageSrc,
-  imageAlt,
-  ctaLabel
-}) => {
-  const isCentered = alignment === "center";
-  return /* @__PURE__ */jsxs(Flex, {
-    sx: {
-      justifyContent: "space-between",
-      paddingY: "10vh",
-      paddingX: "186px"
-    },
-    children: [/* @__PURE__ */jsxs(Flex, {
-      sx: {
-        flexDirection: "column",
-        alignItems: isCentered ? "center" : "start",
-        backgroundImage: isCentered ? `url(${imageSrc})` : void 0,
-        width: isCentered ? "100%" : void 0,
-        minHeight: isCentered ? "80vh" : void 0,
-        justifyContent: isCentered ? "center" : void 0
-      },
-      children: [/* @__PURE__ */jsx(Heading, {
-        sx: {
-          fontSize: "48px",
-          color: isCentered ? "white" : void 0
-        },
-        as: "h1",
-        children: headerText
-      }), /* @__PURE__ */jsx(Text, {
-        sx: {
-          fontSize: "24px",
-          color: isCentered ? "white" : void 0,
-          marginTop: "54px",
-          marginBottom: "71px"
-        },
-        as: "h2",
-        children: subHeaderText
-      }), /* @__PURE__ */jsx(Button, {
-        sx: {
-          background: isCentered ? "white" : "black",
-          color: isCentered ? "black" : void 0,
-          borderRadius: "10px",
-          fontSize: "16px"
-        },
-        children: ctaLabel
-      })]
-    }), !isCentered && /* @__PURE__ */jsx(Flex, {
-      children: /* @__PURE__ */jsx(Image, {
-        sx: {
-          maxWidth: "60vw",
-          maxHeight: "623px"
-        },
-        src: imageSrc,
-        alt: imageAlt
-      })
-    })]
-  });
-};
-
-// src/HeroCarousel/HeroCarousel.tsx
-import * as React from "react";
-import { Box, Flex as Flex2, Image as Image2 } from "@ttoss/ui";
-import { Icon } from "@ttoss/react-icons";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var HeroCarousel = ({
-  images = []
-}) => {
-  const [selectedImage, setSelectedImage] = React.useState(images[0].id);
-  const handleRight = () => {
-    const currentIndex = images.findIndex(item => {
-      return item.id === selectedImage;
-    });
-    const isLast = currentIndex === images.length - 1;
-    if (isLast) {
-      return setSelectedImage(images[0].id);
-    }
-    setSelectedImage(images[currentIndex + 1].id);
-  };
-  const handleLeft = () => {
-    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 = React.useMemo(() => {
-    const result = images.find(item => {
-      return item.id === selectedImage;
-    });
-    return result;
-  }, [selectedImage, images]);
-  return /* @__PURE__ */jsx2(Flex2, {
-    sx: {
-      width: "100%",
-      height: "100%",
-      maxHeight: "70vh",
-      paddingX: 5
-    },
-    children: /* @__PURE__ */jsxs2(Flex2, {
-      sx: {
-        width: "100%",
-        height: "50vw",
-        position: "relative",
-        flexDirection: "column"
-      },
-      children: [/* @__PURE__ */jsxs2(Flex2, {
-        sx: {
-          height: "100%",
-          alignItems: "center",
-          gap: 3
-        },
-        children: [/* @__PURE__ */jsx2(Flex2, {
-          sx: {
-            cursor: "pointer",
-            height: "100%",
-            alignItems: "center"
-          },
-          onClick: handleLeft,
-          children: /* @__PURE__ */jsx2(Icon, {
-            icon: "akar-icons:chevron-left"
-          })
-        }), image && /* @__PURE__ */jsx2(Image2, {
-          sx: {
-            height: "100%",
-            width: "100%"
-          },
-          src: image.src
-        }), /* @__PURE__ */jsx2(Flex2, {
-          sx: {
-            cursor: "pointer",
-            height: "100%",
-            alignItems: "center"
-          },
-          onClick: handleRight,
-          children: /* @__PURE__ */jsx2(Icon, {
-            icon: "akar-icons:chevron-right"
-          })
-        })]
-      }), /* @__PURE__ */jsx2(Flex2, {
-        sx: {
-          marginTop: 2,
-          alignSelf: "center",
-          gap: 3
-        },
-        children: images.map(image2 => {
-          return /* @__PURE__ */jsx2(Box, {
-            role: "button",
-            onClick: () => {
-              return setSelectedImage(image2.id);
-            },
-            sx: {
-              background: image2.id === selectedImage ? "gray" : "black",
-              width: 10,
-              height: 10,
-              borderRadius: "50%",
-              cursor: "pointer"
-            }
-          }, image2.id);
-        })
-      })]
-    })
-  });
-};
-
-// src/Footer/Footer.tsx
-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,
-  logo,
-  socialMedia,
-  reserved
-}) => {
-  return /* @__PURE__ */jsxs3(Flex3, {
-    sx: {
-      flexDirection: "column",
-      paddingY: "40px"
-    },
-    children: [/* @__PURE__ */jsx3(Image3, {
-      sx: {
-        maxWidth: ["90px", "212px"],
-        alignSelf: "center",
-        marginBottom: [3, 4]
-      },
-      src: logo
-    }), /* @__PURE__ */jsxs3(Flex3, {
-      sx: {
-        flexDirection: ["column", "row"],
-        justifyContent: ["unset", "center"],
-        paddingX: 3
-      },
-      children: [/* @__PURE__ */jsx3(Grid, {
-        sx: {
-          justifyContent: "center",
-          gridTemplateColumns: ["6fr 3fr 3fr", "1fr 1fr 1fr"]
-        },
-        children: links.map((link, idx) => {
-          return /* @__PURE__ */jsx3(Link, {
-            sx: {
-              fontSize: "xs",
-              fontFamily: "body",
-              textDecorationLine: "none"
-            },
-            href: link.href,
-            children: link.label
-          }, `link-${link.label}-${idx}`);
-        })
-      }), /* @__PURE__ */jsx3(Flex3, {
-        sx: {
-          marginTop: [3],
-          gap: [4],
-          justifyContent: "center"
-        },
-        children: socialMedia.map(social => {
-          return /* @__PURE__ */jsx3(Link, {
-            href: social.href,
-            children: /* @__PURE__ */jsx3(Icon2, {
-              icon: social.icon
-            })
-          }, `social-media-${social.icon}`);
-        })
-      })]
-    }), /* @__PURE__ */jsx3(Text2, {
-      sx: {
-        fontSize: "xxs",
-        color: "gray",
-        fontFamily: "heading",
-        textAlign: "center",
-        lineHeight: "1.5",
-        marginTop: [3, 4]
-      },
-      children: reserved
-    })]
-  });
-};
-
-// src/Navbar/Navbar.tsx
-import * as React2 from "react";
-import { Collapse } from "react-collapse";
-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,
-  logo,
-  cta,
-  type = "1"
-}) => {
-  const [isMenuOpen, setIsMenuOpen] = React2.useState(false);
-  const {
-    gridTemplateAreas,
-    heightLogo,
-    gridTemplateColumns,
-    justifySelfLogo
-  } = React2.useMemo(() => {
-    if (type === "1") {
-      return {
-        gridTemplateAreas: '"logo links cta"',
-        gridTemplateColumns: "2fr 5fr 2fr",
-        heightLogo: "42px",
-        justifySelfLogo: "unset"
-      };
-    }
-    return {
-      gridTemplateAreas: '"links logo cta"',
-      gridTemplateColumns: "1fr 1fr 1fr",
-      heightLogo: "54px",
-      justifySelfLogo: "center"
-    };
-  }, [type]);
-  return /* @__PURE__ */jsxs4(Fragment, {
-    children: [/* @__PURE__ */jsxs4(Flex4, {
-      sx: {
-        flexDirection: "column",
-        display: ["flex", "none"]
-      },
-      children: [/* @__PURE__ */jsxs4(Grid2, {
-        sx: {
-          justifyContent: "space-between",
-          alignItems: "center",
-          gridTemplateColumns: "1fr 1fr 1fr"
-        },
-        children: [/* @__PURE__ */jsx4(Text3, {
-          sx: {
-            cursor: "pointer",
-            justifySelf: "start",
-            fontSize: "3xl"
-          },
-          children: /* @__PURE__ */jsx4(Icon3, {
-            onClick: () => {
-              setIsMenuOpen(prev => {
-                return !prev;
-              });
-            },
-            icon: isMenuOpen ? "ic:outline-menu-open" : "ic:outline-menu"
-          })
-        }), /* @__PURE__ */jsx4(Image4, {
-          src: logo,
-          sx: {
-            maxWidth: "112px"
-          }
-        }), /* @__PURE__ */jsx4(Flex4, {
-          sx: {
-            justifyContent: "end",
-            width: "100%",
-            alignItems: "center"
-          },
-          children: cta && /* @__PURE__ */jsx4(Link2, {
-            sx: {
-              fontSize: "xs"
-            },
-            href: cta.href,
-            children: cta.label
-          })
-        })]
-      }), /* @__PURE__ */jsx4(Collapse, {
-        isOpened: isMenuOpen,
-        initialStyle: {
-          height: 0,
-          overflow: "hidden"
-        },
-        children: /* @__PURE__ */jsx4(Flex4, {
-          sx: {
-            flexDirection: "column",
-            width: "100%",
-            gap: 3,
-            paddingY: 3,
-            paddingLeft: 3
-          },
-          children: links.map(link => {
-            return /* @__PURE__ */jsx4(Link2, {
-              sx: {
-                fontSize: "xs"
-              },
-              href: link.href,
-              children: link.label
-            }, link.label);
-          })
-        })
-      })]
-    }), /* @__PURE__ */jsxs4(Grid2, {
-      sx: {
-        display: ["none", "grid"],
-        gridTemplateAreas,
-        gridTemplateColumns,
-        alignItems: "center",
-        paddingX: 6,
-        paddingY: 4
-      },
-      children: [/* @__PURE__ */jsx4(Image4, {
-        sx: {
-          gridArea: "logo",
-          height: heightLogo,
-          justifySelf: justifySelfLogo
-        },
-        src: logo
-      }), /* @__PURE__ */jsx4(Flex4, {
-        sx: {
-          gridArea: "links",
-          justifyContent: "space-around"
-        },
-        children: links.map(link => {
-          return /* @__PURE__ */jsx4(Link2, {
-            sx: {
-              fontSize: "2xl"
-            },
-            href: link.href,
-            children: link.label
-          }, link.label);
-        })
-      }), /* @__PURE__ */jsx4(Flex4, {
-        sx: {
-          gridArea: "cta",
-          justifyContent: "end"
-        },
-        children: cta && /* @__PURE__ */jsx4(Link2, {
-          href: cta.href,
-          sx: {
-            backgroundColor: "background",
-            borderColor: "text",
-            color: "text",
-            borderRadius: "10px",
-            fontSize: "base",
-            textDecorationLine: "none",
-            paddingX: 3,
-            paddingY: 2
-          },
-          as: "button",
-          children: cta.label
-        })
-      })]
-    })]
-  });
-};
-export { Footer, Hero, HeroCarousel, Navbar };

package/dist/index.d.ts

@@ -1,53 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-type HeroProps = {
-    headerText: string;
-    subHeaderText: string;
-    alignment: 'left' | 'center';
-    imageSrc: string;
-    imageAlt?: string;
-    ctaLabel?: string;
-};
-declare const Hero: ({ alignment, headerText, subHeaderText, imageSrc, imageAlt, ctaLabel, }: HeroProps) => react_jsx_runtime.JSX.Element;
-
-type HeroCarouselProps = {
-    images: {
-        id: string;
-        alt: string;
-        src: string;
-    }[];
-};
-declare const HeroCarousel: ({ images }: HeroCarouselProps) => react_jsx_runtime.JSX.Element;
-
-type FooterLink = {
-    label: string;
-    href: string;
-};
-type SocialMedia = {
-    icon: string;
-    href: string;
-};
-type FooterProps = {
-    links: FooterLink[];
-    logo: string;
-    socialMedia: SocialMedia[];
-    reserved: string;
-};
-declare const Footer: ({ links, logo, socialMedia, reserved }: FooterProps) => react_jsx_runtime.JSX.Element;
-
-type NavbarLink = {
-    label: string;
-    href: string;
-};
-type NavbarProps = {
-    type?: '1' | '2';
-    logo: string;
-    cta?: {
-        label: string;
-        href: string;
-    };
-    links: NavbarLink[];
-};
-declare const Navbar: ({ links, logo, cta, type }: NavbarProps) => react_jsx_runtime.JSX.Element;
-
-export { Footer, type FooterProps, Hero, HeroCarousel, type HeroCarouselProps, type HeroProps, Navbar, type NavbarProps };