@ttoss/landing-pages 0.11.17 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/landing-pages",
-  "version": "0.11.17",
+  "version": "0.12.0",
   "description": "Package for creating landing pages.",
   "author": "ttoss",
   "contributors": [
@@ -11,10 +11,10 @@
     "url": "https://github.com/ttoss/ttoss.git",
     "directory": "packages/landing-pages"
   },
+  "type": "module",
   "exports": {
     ".": {
       "import": "./dist/esm/index.js",
-      "require": "./dist/index.js",
       "types": "./dist/index.d.ts"
     }
   },
@@ -28,8 +28,8 @@
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/react-icons": "^0.3.13",
-    "@ttoss/ui": "^4.1.17"
+    "@ttoss/react-icons": "^0.4.0",
+    "@ttoss/ui": "^5.0.0"
   },
   "devDependencies": {
     "@types/jest": "^29.5.12",
@@ -38,9 +38,9 @@
     "jest": "^29.7.0",
     "tsup": "^8.2.4",
     "@ttoss/config": "^1.32.9",
-    "@ttoss/react-icons": "^0.3.13",
+    "@ttoss/ui": "^5.0.0",
     "@ttoss/test-utils": "^2.1.13",
-    "@ttoss/ui": "^4.1.17"
+    "@ttoss/react-icons": "^0.4.0"
   },
   "keywords": [
     "React",

package/dist/index.d.mts

@@ -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 };

package/dist/index.js

@@ -1,458 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-"use strict";
-
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, {
-    get: all[name],
-    enumerable: true
-  });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-// If the importer is in node compatibility mode or this is not an ESM
-// file that has been converted to a CommonJS file using a Babel-
-// compatible transform (i.e. "__esModule" has not been set), then set
-// "default" to the CommonJS "module.exports" for node compatibility.
-isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-  value: mod,
-  enumerable: true
-}) : target, mod));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  Footer: () => Footer,
-  Hero: () => Hero,
-  HeroCarousel: () => HeroCarousel,
-  Navbar: () => Navbar
-});
-module.exports = __toCommonJS(src_exports);
-
-// src/Hero/Hero.tsx
-var import_ui = require("@ttoss/ui");
-var import_jsx_runtime = require("react/jsx-runtime");
-var Hero = ({
-  alignment,
-  headerText,
-  subHeaderText,
-  imageSrc,
-  imageAlt,
-  ctaLabel
-}) => {
-  const isCentered = alignment === "center";
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_ui.Flex, {
-    sx: {
-      justifyContent: "space-between",
-      paddingY: "10vh",
-      paddingX: "186px"
-    },
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_ui.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__ */(0, import_jsx_runtime.jsx)(import_ui.Heading, {
-        sx: {
-          fontSize: "48px",
-          color: isCentered ? "white" : void 0
-        },
-        as: "h1",
-        children: headerText
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ui.Text, {
-        sx: {
-          fontSize: "24px",
-          color: isCentered ? "white" : void 0,
-          marginTop: "54px",
-          marginBottom: "71px"
-        },
-        as: "h2",
-        children: subHeaderText
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ui.Button, {
-        sx: {
-          background: isCentered ? "white" : "black",
-          color: isCentered ? "black" : void 0,
-          borderRadius: "10px",
-          fontSize: "16px"
-        },
-        children: ctaLabel
-      })]
-    }), !isCentered && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ui.Flex, {
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ui.Image, {
-        sx: {
-          maxWidth: "60vw",
-          maxHeight: "623px"
-        },
-        src: imageSrc,
-        alt: imageAlt
-      })
-    })]
-  });
-};
-
-// src/HeroCarousel/HeroCarousel.tsx
-var React = __toESM(require("react"));
-var import_ui2 = require("@ttoss/ui");
-var import_react_icons = require("@ttoss/react-icons");
-var import_jsx_runtime2 = require("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__ */(0, import_jsx_runtime2.jsx)(import_ui2.Flex, {
-    sx: {
-      width: "100%",
-      height: "100%",
-      maxHeight: "70vh",
-      paddingX: 5
-    },
-    children: /* @__PURE__ */(0, import_jsx_runtime2.jsxs)(import_ui2.Flex, {
-      sx: {
-        width: "100%",
-        height: "50vw",
-        position: "relative",
-        flexDirection: "column"
-      },
-      children: [/* @__PURE__ */(0, import_jsx_runtime2.jsxs)(import_ui2.Flex, {
-        sx: {
-          height: "100%",
-          alignItems: "center",
-          gap: 3
-        },
-        children: [/* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.Flex, {
-          sx: {
-            cursor: "pointer",
-            height: "100%",
-            alignItems: "center"
-          },
-          onClick: handleLeft,
-          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, {
-          sx: {
-            height: "100%",
-            width: "100%"
-          },
-          src: image.src
-        }), /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.Flex, {
-          sx: {
-            cursor: "pointer",
-            height: "100%",
-            alignItems: "center"
-          },
-          onClick: handleRight,
-          children: /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_react_icons.Icon, {
-            icon: "akar-icons:chevron-right"
-          })
-        })]
-      }), /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.Flex, {
-        sx: {
-          marginTop: 2,
-          alignSelf: "center",
-          gap: 3
-        },
-        children: images.map(image2 => {
-          return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.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
-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,
-  logo,
-  socialMedia,
-  reserved
-}) => {
-  return /* @__PURE__ */(0, import_jsx_runtime3.jsxs)(import_ui3.Flex, {
-    sx: {
-      flexDirection: "column",
-      paddingY: "40px"
-    },
-    children: [/* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_ui3.Image, {
-      sx: {
-        maxWidth: ["90px", "212px"],
-        alignSelf: "center",
-        marginBottom: [3, 4]
-      },
-      src: logo
-    }), /* @__PURE__ */(0, import_jsx_runtime3.jsxs)(import_ui3.Flex, {
-      sx: {
-        flexDirection: ["column", "row"],
-        justifyContent: ["unset", "center"],
-        paddingX: 3
-      },
-      children: [/* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_ui3.Grid, {
-        sx: {
-          justifyContent: "center",
-          gridTemplateColumns: ["6fr 3fr 3fr", "1fr 1fr 1fr"]
-        },
-        children: links.map((link, idx) => {
-          return /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_ui3.Link, {
-            sx: {
-              fontSize: "xs",
-              fontFamily: "body",
-              textDecorationLine: "none"
-            },
-            href: link.href,
-            children: link.label
-          }, `link-${link.label}-${idx}`);
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_ui3.Flex, {
-        sx: {
-          marginTop: [3],
-          gap: [4],
-          justifyContent: "center"
-        },
-        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_react_icons2.Icon, {
-              icon: social.icon
-            })
-          }, `social-media-${social.icon}`);
-        })
-      })]
-    }), /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_ui3.Text, {
-      sx: {
-        fontSize: "xxs",
-        color: "gray",
-        fontFamily: "heading",
-        textAlign: "center",
-        lineHeight: "1.5",
-        marginTop: [3, 4]
-      },
-      children: reserved
-    })]
-  });
-};
-
-// src/Navbar/Navbar.tsx
-var React2 = __toESM(require("react"));
-var import_react_collapse = require("react-collapse");
-var import_ui4 = require("@ttoss/ui");
-var import_react_icons3 = require("@ttoss/react-icons");
-var import_jsx_runtime4 = require("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__ */(0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, {
-    children: [/* @__PURE__ */(0, import_jsx_runtime4.jsxs)(import_ui4.Flex, {
-      sx: {
-        flexDirection: "column",
-        display: ["flex", "none"]
-      },
-      children: [/* @__PURE__ */(0, import_jsx_runtime4.jsxs)(import_ui4.Grid, {
-        sx: {
-          justifyContent: "space-between",
-          alignItems: "center",
-          gridTemplateColumns: "1fr 1fr 1fr"
-        },
-        children: [/* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_ui4.Text, {
-          sx: {
-            cursor: "pointer",
-            justifySelf: "start",
-            fontSize: "3xl"
-          },
-          children: /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_react_icons3.Icon, {
-            onClick: () => {
-              setIsMenuOpen(prev => {
-                return !prev;
-              });
-            },
-            icon: isMenuOpen ? "ic:outline-menu-open" : "ic:outline-menu"
-          })
-        }), /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_ui4.Image, {
-          src: logo,
-          sx: {
-            maxWidth: "112px"
-          }
-        }), /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_ui4.Flex, {
-          sx: {
-            justifyContent: "end",
-            width: "100%",
-            alignItems: "center"
-          },
-          children: cta && /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_ui4.Link, {
-            sx: {
-              fontSize: "xs"
-            },
-            href: cta.href,
-            children: cta.label
-          })
-        })]
-      }), /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_react_collapse.Collapse, {
-        isOpened: isMenuOpen,
-        initialStyle: {
-          height: 0,
-          overflow: "hidden"
-        },
-        children: /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_ui4.Flex, {
-          sx: {
-            flexDirection: "column",
-            width: "100%",
-            gap: 3,
-            paddingY: 3,
-            paddingLeft: 3
-          },
-          children: links.map(link => {
-            return /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_ui4.Link, {
-              sx: {
-                fontSize: "xs"
-              },
-              href: link.href,
-              children: link.label
-            }, link.label);
-          })
-        })
-      })]
-    }), /* @__PURE__ */(0, import_jsx_runtime4.jsxs)(import_ui4.Grid, {
-      sx: {
-        display: ["none", "grid"],
-        gridTemplateAreas,
-        gridTemplateColumns,
-        alignItems: "center",
-        paddingX: 6,
-        paddingY: 4
-      },
-      children: [/* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_ui4.Image, {
-        sx: {
-          gridArea: "logo",
-          height: heightLogo,
-          justifySelf: justifySelfLogo
-        },
-        src: logo
-      }), /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_ui4.Flex, {
-        sx: {
-          gridArea: "links",
-          justifyContent: "space-around"
-        },
-        children: links.map(link => {
-          return /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_ui4.Link, {
-            sx: {
-              fontSize: "2xl"
-            },
-            href: link.href,
-            children: link.label
-          }, link.label);
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_ui4.Flex, {
-        sx: {
-          gridArea: "cta",
-          justifyContent: "end"
-        },
-        children: cta && /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_ui4.Link, {
-          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
-        })
-      })]
-    })]
-  });
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Footer,
-  Hero,
-  HeroCarousel,
-  Navbar
-});