@riligar/components-kit 1.0.1 → 1.1.0

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { createTheme, Stack, Text, Title, Center, Box, Button, Container, Paper, Group, SimpleGrid, Image, List, ThemeIcon, Grid, Badge, Code, RingProgress, Divider, SegmentedControl, Accordion, Avatar, Anchor, ActionIcon } from '@mantine/core';
+import { createTheme, Stack, Text, Title, Center, Box, Button, Container, Paper, Group, SimpleGrid, Image, List, ThemeIcon, Grid, Badge, Code, RingProgress, Divider, SegmentedControl, Accordion, Avatar } from '@mantine/core';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useWindowScroll } from '@mantine/hooks';
 import { IconCheck, IconBolt, IconQuote, IconCircleCheck } from '@tabler/icons-react';
@@ -239,12 +239,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
@@ -253,6 +271,7 @@ function Layout({
   ta = "left",
   stackGap = "xl"
 }) {
+  const bg = resolveBackground(background);
   return /*#__PURE__*/jsx(Box, {
     component: "section",
     id: id,
@@ -282,8 +301,10 @@ function Header({
   logo,
   navLinks = [],
   loginCta,
-  signupCta
+  signupCta,
+  background = "white"
 }) {
+  const bg = resolveBackground(background);
   const [scroll] = useWindowScroll();
   const scrolled = scroll.y > 10;
   const handleNavClick = target => {
@@ -320,7 +341,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",
@@ -428,8 +449,10 @@ function Hero({
   description,
   cta,
   video,
-  image
+  image,
+  background = "white"
 }) {
+  const bg = resolveBackground(background);
   return /*#__PURE__*/jsx(Box, {
     py: {
       base: 80,
@@ -437,7 +460,7 @@ function Hero({
       md: 140
     },
     id: "hero",
-    bg: "white",
+    bg: bg,
     children: /*#__PURE__*/jsx(Container, {
       size: "lg",
       children: /*#__PURE__*/jsxs(SimpleGrid, {
@@ -556,8 +579,10 @@ function LogoItem({
 function SocialProof({
   id,
   title,
-  logos
+  logos,
+  background = "gray"
 }) {
+  const bg = resolveBackground(background);
   if (!logos || logos.length === 0) return null;
   return /*#__PURE__*/jsx(Box, {
     component: "section",
@@ -566,7 +591,7 @@ function SocialProof({
       base: 40,
       md: 60
     },
-    bg: "white",
+    bg: bg,
     bd: {
       bottom: "1px solid var(--mantine-color-gray-1)"
     },
@@ -613,7 +638,7 @@ function FeatureSplit({
   video,
   image,
   reverse = false,
-  bg
+  background = "white"
 }) {
   const listComponent = featuresList && featuresList.length > 0 && /*#__PURE__*/jsx(List, {
     spacing: "md",
@@ -661,7 +686,7 @@ function FeatureSplit({
     id: id,
     subtitle: subtitle,
     title: title,
-    bg: bg,
+    background: background,
     children: /*#__PURE__*/jsx(SimpleGrid, {
       cols: {
         base: 1,
@@ -688,14 +713,14 @@ function FeaturesGrid({
   id,
   subtitle,
   title,
-  bg = "gray.0",
+  background = "gray.0",
   items = []
 }) {
   return /*#__PURE__*/jsx(Layout, {
     id: id,
     subtitle: subtitle,
     title: title,
-    bg: bg,
+    background: background,
     children: /*#__PURE__*/jsx(Grid, {
       gutter: "lg",
       children: items.map((item, idx) => /*#__PURE__*/jsx(FeatureCard, {
@@ -1013,13 +1038,14 @@ function Comparison({
   subtitle,
   title,
   traditionalCol,
-  newCol
+  newCol,
+  background = "white"
 }) {
   return /*#__PURE__*/jsx(Layout, {
     id: id,
     subtitle: subtitle,
     title: title,
-    bg: "white",
+    background: background,
     children: /*#__PURE__*/jsx(Paper, {
       radius: "0",
       bd: "1px solid var(--mantine-color-gray-2)",
@@ -1206,13 +1232,15 @@ function Pricing({
   billing,
   setBilling,
   promoBadge,
-  plans
+  plans,
+  background = "white"
 }) {
   return /*#__PURE__*/jsxs(Layout, {
     id: id,
     subtitle: subtitle,
     title: title,
     ta: "center",
+    background: background,
     children: [billingOptions && billingOptions.length > 0 && /*#__PURE__*/jsx(Stack, {
       align: "center",
       gap: "xl",
@@ -1384,7 +1412,8 @@ function FAQ({
   subtitle,
   title,
   questions = [],
-  contactCard
+  contactCard,
+  background = "white"
 }) {
   const accordionStyles = {
     item: {
@@ -1409,7 +1438,7 @@ function FAQ({
     id: id,
     subtitle: subtitle,
     title: title,
-    bg: "white",
+    background: background,
     children: [/*#__PURE__*/jsxs(SimpleGrid, {
       cols: {
         base: 1,
@@ -1533,14 +1562,13 @@ function FAQ({
 
 function Testimonials({
   id,
-  bg = "gray.0",
-  title,
   subtitle,
-  items = []
+  items = [],
+  background = "gray"
 }) {
   return /*#__PURE__*/jsx(Layout, {
     id: id,
-    bg: bg,
+    background: background,
     title: title,
     subtitle: subtitle,
     children: /*#__PURE__*/jsx(SimpleGrid, {
@@ -1604,11 +1632,11 @@ function CTABanner({
   title,
   description,
   cta,
-  bg = "gray.0"
+  background = "gray.0"
 }) {
   return /*#__PURE__*/jsx(Layout, {
     id: id,
-    bg: bg,
+    background: background,
     ta: "center",
     children: /*#__PURE__*/jsx(Paper, {
       p: {
@@ -1661,11 +1689,13 @@ const SecondaryCTA = CTABanner;
 
 function TrustBadge({
   text = "Selo Exclusivo RiLiGar",
-  color = "green.6"
+  color = "green.6",
+  background = "gray"
 }) {
+  const bg = resolveBackground(background);
   return /*#__PURE__*/jsx(Box, {
     p: "xs",
-    bg: "gray.1",
+    bg: bg,
     style: {
       borderRadius: "8px",
       border: "1px solid var(--mantine-color-gray-2)",
@@ -1697,127 +1727,5 @@ function TrustBadge({
 /** @deprecated Use TrustBadge instead */
 const SeloExclusivo = TrustBadge;
 
-function Footer({
-  logo,
-  description,
-  sections = [],
-  socialLinks = [],
-  copyrightText,
-  madeByText,
-  bg = "gray.0"
-}) {
-  return /*#__PURE__*/jsx(Box, {
-    component: "footer",
-    py: "xl",
-    bg: bg,
-    bd: {
-      top: "1px solid var(--mantine-color-gray-2)"
-    },
-    children: /*#__PURE__*/jsxs(Container, {
-      size: "xl",
-      children: [/*#__PURE__*/jsxs(SimpleGrid, {
-        cols: {
-          base: 1,
-          sm: 2
-        },
-        spacing: "xl",
-        children: [/*#__PURE__*/jsxs(Stack, {
-          gap: "lg",
-          children: [logo && /*#__PURE__*/jsx("img", {
-            src: logo.src,
-            alt: logo.alt || "",
-            height: logo.height || 32,
-            style: {
-              objectFit: "contain",
-              objectPosition: "left"
-            }
-          }), description && /*#__PURE__*/jsx(Text, {
-            size: "md",
-            c: "gray.6",
-            lh: 1.6,
-            maw: 400,
-            children: description
-          })]
-        }), /*#__PURE__*/jsxs(SimpleGrid, {
-          cols: {
-            base: 2,
-            sm: sections.length || 4
-          },
-          spacing: "xl",
-          children: [sections.map((section, idx) => /*#__PURE__*/jsxs(Stack, {
-            gap: "md",
-            children: [/*#__PURE__*/jsx(Text, {
-              fw: 900,
-              size: "xs",
-              tt: "uppercase",
-              ls: "1.5px",
-              children: section.title
-            }), /*#__PURE__*/jsx(Stack, {
-              gap: "xs",
-              children: section.links.map((link, linkIdx) => /*#__PURE__*/jsx(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__*/jsxs(Stack, {
-            gap: "md",
-            children: [/*#__PURE__*/jsx(Text, {
-              fw: 900,
-              size: "xs",
-              tt: "uppercase",
-              ls: "1.5px",
-              children: "Social"
-            }), /*#__PURE__*/jsx(Group, {
-              gap: "xs",
-              children: socialLinks.map((social, socialIdx) => /*#__PURE__*/jsx(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__*/jsx(Divider, {
-        my: "xl",
-        color: "gray.2"
-      }), /*#__PURE__*/jsxs(Group, {
-        justify: "space-between",
-        mt: 30,
-        wrap: "wrap",
-        gap: "sm",
-        children: [/*#__PURE__*/jsx(Text, {
-          size: "xs",
-          fw: 800,
-          tt: "uppercase",
-          ls: "1px",
-          c: "gray.5",
-          children: copyrightText
-        }), madeByText && /*#__PURE__*/jsx(Group, {
-          gap: "sm",
-          children: /*#__PURE__*/jsx(Text, {
-            size: "xs",
-            fw: 800,
-            tt: "uppercase",
-            ls: "1px",
-            c: "gray.5",
-            children: madeByText
-          })
-        })]
-      })]
-    })
-  });
-}
-
-export { CTABanner, CTAButton, Comparison, FAQ, FeatureSplit, FeaturesGrid, Footer, Header, Hero, Layout, MediaBlock, Navbar, Pricing, SecondaryCTA, SectionHeader, SeloExclusivo, SocialProof, Testimonials, TrustBadge, theme };
+export { CTABanner, CTAButton, Comparison, FAQ, FeatureSplit, FeaturesGrid, Header, Hero, Layout, MediaBlock, Navbar, Pricing, SECTION_BACKGROUNDS, SecondaryCTA, SectionHeader, SeloExclusivo, SocialProof, Testimonials, TrustBadge, resolveBackground, theme };
 //# sourceMappingURL=index.esm.js.map