@riligar/components-kit 1.0.1 → 1.1.0

package/dist/index.js

@@ -241,12 +241,30 @@ function CTAButton({
   });
 }
 
+/**
+ * SECTION_BACKGROUNDS - Central configuration for section backgrounds.
+ * Supports "white" and "gray" (Mantine gray.0).
+ */
+const SECTION_BACKGROUNDS = {
+  white: "white",
+  gray: "gray.0"
+};
+
+/**
+ * Helper to resolve the background token for Mantine's 'bg' prop.
+ * @param {string} background - "white" | "gray"
+ * @returns {string} - The Mantine color token
+ */
+const resolveBackground = background => {
+  return SECTION_BACKGROUNDS[background] || SECTION_BACKGROUNDS.white;
+};
+
 function Layout({
   children,
   title,
   subtitle,
   id,
-  bg = "white",
+  background = "white",
   py = {
     base: 80,
     md: 120
@@ -255,6 +273,7 @@ function Layout({
   ta = "left",
   stackGap = "xl"
 }) {
+  const bg = resolveBackground(background);
   return /*#__PURE__*/jsxRuntime.jsx(core.Box, {
     component: "section",
     id: id,
@@ -284,8 +303,10 @@ function Header({
   logo,
   navLinks = [],
   loginCta,
-  signupCta
+  signupCta,
+  background = "white"
 }) {
+  const bg = resolveBackground(background);
   const [scroll] = hooks.useWindowScroll();
   const scrolled = scroll.y > 10;
   const handleNavClick = target => {
@@ -322,7 +343,7 @@ function Header({
         shadow: scrolled ? "sm" : "none",
         radius: "0",
         p: "xs",
-        bg: "white",
+        bg: bg,
         bd: scrolled ? "1px solid var(--mantine-color-gray-2)" : "1px solid transparent",
         style: {
           pointerEvents: "auto",
@@ -430,8 +451,10 @@ function Hero({
   description,
   cta,
   video,
-  image
+  image,
+  background = "white"
 }) {
+  const bg = resolveBackground(background);
   return /*#__PURE__*/jsxRuntime.jsx(core.Box, {
     py: {
       base: 80,
@@ -439,7 +462,7 @@ function Hero({
       md: 140
     },
     id: "hero",
-    bg: "white",
+    bg: bg,
     children: /*#__PURE__*/jsxRuntime.jsx(core.Container, {
       size: "lg",
       children: /*#__PURE__*/jsxRuntime.jsxs(core.SimpleGrid, {
@@ -558,8 +581,10 @@ function LogoItem({
 function SocialProof({
   id,
   title,
-  logos
+  logos,
+  background = "gray"
 }) {
+  const bg = resolveBackground(background);
   if (!logos || logos.length === 0) return null;
   return /*#__PURE__*/jsxRuntime.jsx(core.Box, {
     component: "section",
@@ -568,7 +593,7 @@ function SocialProof({
       base: 40,
       md: 60
     },
-    bg: "white",
+    bg: bg,
     bd: {
       bottom: "1px solid var(--mantine-color-gray-1)"
     },
@@ -615,7 +640,7 @@ function FeatureSplit({
   video,
   image,
   reverse = false,
-  bg
+  background = "white"
 }) {
   const listComponent = featuresList && featuresList.length > 0 && /*#__PURE__*/jsxRuntime.jsx(core.List, {
     spacing: "md",
@@ -663,7 +688,7 @@ function FeatureSplit({
     id: id,
     subtitle: subtitle,
     title: title,
-    bg: bg,
+    background: background,
     children: /*#__PURE__*/jsxRuntime.jsx(core.SimpleGrid, {
       cols: {
         base: 1,
@@ -690,14 +715,14 @@ function FeaturesGrid({
   id,
   subtitle,
   title,
-  bg = "gray.0",
+  background = "gray.0",
   items = []
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(Layout, {
     id: id,
     subtitle: subtitle,
     title: title,
-    bg: bg,
+    background: background,
     children: /*#__PURE__*/jsxRuntime.jsx(core.Grid, {
       gutter: "lg",
       children: items.map((item, idx) => /*#__PURE__*/jsxRuntime.jsx(FeatureCard, {
@@ -1015,13 +1040,14 @@ function Comparison({
   subtitle,
   title,
   traditionalCol,
-  newCol
+  newCol,
+  background = "white"
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(Layout, {
     id: id,
     subtitle: subtitle,
     title: title,
-    bg: "white",
+    background: background,
     children: /*#__PURE__*/jsxRuntime.jsx(core.Paper, {
       radius: "0",
       bd: "1px solid var(--mantine-color-gray-2)",
@@ -1208,13 +1234,15 @@ function Pricing({
   billing,
   setBilling,
   promoBadge,
-  plans
+  plans,
+  background = "white"
 }) {
   return /*#__PURE__*/jsxRuntime.jsxs(Layout, {
     id: id,
     subtitle: subtitle,
     title: title,
     ta: "center",
+    background: background,
     children: [billingOptions && billingOptions.length > 0 && /*#__PURE__*/jsxRuntime.jsx(core.Stack, {
       align: "center",
       gap: "xl",
@@ -1386,7 +1414,8 @@ function FAQ({
   subtitle,
   title,
   questions = [],
-  contactCard
+  contactCard,
+  background = "white"
 }) {
   const accordionStyles = {
     item: {
@@ -1411,7 +1440,7 @@ function FAQ({
     id: id,
     subtitle: subtitle,
     title: title,
-    bg: "white",
+    background: background,
     children: [/*#__PURE__*/jsxRuntime.jsxs(core.SimpleGrid, {
       cols: {
         base: 1,
@@ -1535,14 +1564,13 @@ function FAQ({
 
 function Testimonials({
   id,
-  bg = "gray.0",
-  title,
   subtitle,
-  items = []
+  items = [],
+  background = "gray"
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(Layout, {
     id: id,
-    bg: bg,
+    background: background,
     title: title,
     subtitle: subtitle,
     children: /*#__PURE__*/jsxRuntime.jsx(core.SimpleGrid, {
@@ -1606,11 +1634,11 @@ function CTABanner({
   title,
   description,
   cta,
-  bg = "gray.0"
+  background = "gray.0"
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(Layout, {
     id: id,
-    bg: bg,
+    background: background,
     ta: "center",
     children: /*#__PURE__*/jsxRuntime.jsx(core.Paper, {
       p: {
@@ -1663,11 +1691,13 @@ const SecondaryCTA = CTABanner;
 
 function TrustBadge({
   text = "Selo Exclusivo RiLiGar",
-  color = "green.6"
+  color = "green.6",
+  background = "gray"
 }) {
+  const bg = resolveBackground(background);
   return /*#__PURE__*/jsxRuntime.jsx(core.Box, {
     p: "xs",
-    bg: "gray.1",
+    bg: bg,
     style: {
       borderRadius: "8px",
       border: "1px solid var(--mantine-color-gray-2)",
@@ -1699,146 +1729,25 @@ function TrustBadge({
 /** @deprecated Use TrustBadge instead */
 const SeloExclusivo = TrustBadge;
 
-function Footer({
-  logo,
-  description,
-  sections = [],
-  socialLinks = [],
-  copyrightText,
-  madeByText,
-  bg = "gray.0"
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(core.Box, {
-    component: "footer",
-    py: "xl",
-    bg: bg,
-    bd: {
-      top: "1px solid var(--mantine-color-gray-2)"
-    },
-    children: /*#__PURE__*/jsxRuntime.jsxs(core.Container, {
-      size: "xl",
-      children: [/*#__PURE__*/jsxRuntime.jsxs(core.SimpleGrid, {
-        cols: {
-          base: 1,
-          sm: 2
-        },
-        spacing: "xl",
-        children: [/*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
-          gap: "lg",
-          children: [logo && /*#__PURE__*/jsxRuntime.jsx("img", {
-            src: logo.src,
-            alt: logo.alt || "",
-            height: logo.height || 32,
-            style: {
-              objectFit: "contain",
-              objectPosition: "left"
-            }
-          }), description && /*#__PURE__*/jsxRuntime.jsx(core.Text, {
-            size: "md",
-            c: "gray.6",
-            lh: 1.6,
-            maw: 400,
-            children: description
-          })]
-        }), /*#__PURE__*/jsxRuntime.jsxs(core.SimpleGrid, {
-          cols: {
-            base: 2,
-            sm: sections.length || 4
-          },
-          spacing: "xl",
-          children: [sections.map((section, idx) => /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
-            gap: "md",
-            children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
-              fw: 900,
-              size: "xs",
-              tt: "uppercase",
-              ls: "1.5px",
-              children: section.title
-            }), /*#__PURE__*/jsxRuntime.jsx(core.Stack, {
-              gap: "xs",
-              children: section.links.map((link, linkIdx) => /*#__PURE__*/jsxRuntime.jsx(core.Anchor, {
-                c: "gray.6",
-                size: "sm",
-                component: link.href ? "a" : "button",
-                href: link.href,
-                onClick: link.onClick,
-                fw: 500,
-                children: link.label
-              }, linkIdx))
-            })]
-          }, idx)), socialLinks && socialLinks.length > 0 && /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
-            gap: "md",
-            children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
-              fw: 900,
-              size: "xs",
-              tt: "uppercase",
-              ls: "1.5px",
-              children: "Social"
-            }), /*#__PURE__*/jsxRuntime.jsx(core.Group, {
-              gap: "xs",
-              children: socialLinks.map((social, socialIdx) => /*#__PURE__*/jsxRuntime.jsx(core.ActionIcon, {
-                size: "md",
-                variant: "subtle",
-                color: "gray",
-                component: "a",
-                href: social.href,
-                target: "_blank",
-                radius: "0",
-                "aria-label": social.label || `Social link ${socialIdx + 1}`,
-                children: social.icon
-              }, socialIdx))
-            })]
-          })]
-        })]
-      }), /*#__PURE__*/jsxRuntime.jsx(core.Divider, {
-        my: "xl",
-        color: "gray.2"
-      }), /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
-        justify: "space-between",
-        mt: 30,
-        wrap: "wrap",
-        gap: "sm",
-        children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
-          size: "xs",
-          fw: 800,
-          tt: "uppercase",
-          ls: "1px",
-          c: "gray.5",
-          children: copyrightText
-        }), madeByText && /*#__PURE__*/jsxRuntime.jsx(core.Group, {
-          gap: "sm",
-          children: /*#__PURE__*/jsxRuntime.jsx(core.Text, {
-            size: "xs",
-            fw: 800,
-            tt: "uppercase",
-            ls: "1px",
-            c: "gray.5",
-            children: madeByText
-          })
-        })]
-      })]
-    })
-  });
-}
-
 exports.CTABanner = CTABanner;
 exports.CTAButton = CTAButton;
 exports.Comparison = Comparison;
 exports.FAQ = FAQ;
 exports.FeatureSplit = FeatureSplit;
 exports.FeaturesGrid = FeaturesGrid;
-exports.Footer = Footer;
 exports.Header = Header;
 exports.Hero = Hero;
 exports.Layout = Layout;
 exports.MediaBlock = MediaBlock;
 exports.Navbar = Navbar;
 exports.Pricing = Pricing;
+exports.SECTION_BACKGROUNDS = SECTION_BACKGROUNDS;
 exports.SecondaryCTA = SecondaryCTA;
 exports.SectionHeader = SectionHeader;
 exports.SeloExclusivo = SeloExclusivo;
 exports.SocialProof = SocialProof;
 exports.Testimonials = Testimonials;
 exports.TrustBadge = TrustBadge;
+exports.resolveBackground = resolveBackground;
 exports.theme = theme;
 //# sourceMappingURL=index.js.map