@ttoss/landing-pages 0.12.64 → 0.12.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/landing-pages",
-  "version": "0.12.64",
+  "version": "0.12.65",
   "description": "Package for creating landing pages.",
   "license": "MIT",
   "author": "ttoss",
@@ -28,19 +28,19 @@
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/ui": "^6.0.4",
-    "@ttoss/react-icons": "^0.5.5"
+    "@ttoss/react-icons": "^0.5.6",
+    "@ttoss/ui": "^6.1.0"
   },
   "devDependencies": {
     "@types/jest": "^30.0.0",
-    "@types/react": "^19.2.6",
+    "@types/react": "^19.2.7",
     "@types/react-collapse": "^5.0.4",
     "jest": "^30.2.0",
     "tsup": "^8.5.1",
-    "@ttoss/react-icons": "^0.5.5",
-    "@ttoss/test-utils": "^4.0.1",
+    "@ttoss/react-icons": "^0.5.6",
+    "@ttoss/test-utils": "^4.0.2",
     "@ttoss/config": "^1.35.12",
-    "@ttoss/ui": "^6.0.4"
+    "@ttoss/ui": "^6.1.0"
   },
   "keywords": [
     "React",

package/dist/esm/index.js

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