@manamerge/mana-atomic-ui 0.0.90 → 0.0.92

package/dist/index.d.ts

@@ -93,6 +93,22 @@ interface LinkTypes extends AnchorHTMLAttributes<HTMLAnchorElement> {
 }
 declare const Link: React.FC<LinkTypes>;
 
+interface GradientTypes {
+    variant?: string;
+    children: React.ReactNode;
+}
+declare const Gradient: React.FC<GradientTypes>;
+
+interface DividerTypes {
+    variant?: string;
+    width?: string;
+    height?: string;
+    color?: string;
+    borderRadius?: string;
+    margin?: string;
+}
+declare const Divider: React.FC<DividerTypes>;
+
 interface HeaderTypes {
     iconTop?: FunctionComponent<SVGProps<SVGSVGElement>>;
     iconDot?: FunctionComponent<SVGProps<SVGSVGElement>>;
@@ -170,16 +186,4 @@ interface CardBannerTypes {
 }
 declare const CardBanner: React.FC<CardBannerTypes>;
 
-interface ContentTypes {
-    title?: string;
-    description?: string;
-}
-interface AccordionTypes {
-    variant?: string;
-    iconPlus: FunctionComponent<SVGProps<SVGSVGElement>>;
-    iconMinus: FunctionComponent<SVGProps<SVGSVGElement>>;
-    content?: ContentTypes[];
-}
-declare const Accordion: React.FC<AccordionTypes>;
-
-export { Accordion, BreakerTape, Button, CardBanner, CardSimpleRender, CardTeaser, Footer, Header, Heading, Icon, Link, Navigation, Text };
+export { BreakerTape, Button, CardBanner, CardSimpleRender, CardTeaser, Divider, Footer, Gradient, Header, Heading, Icon, Link, Navigation, Text };

package/dist/index.js

@@ -168,7 +168,7 @@ const TextContainer = styled.p `
     ${(_a) => {
     var _b;
     var { variant = "regular", theme } = _a, props = __rest(_a, ["variant", "theme"]);
-    const textStyles = ((_b = theme === null || theme === void 0 ? void 0 : theme.textStyles) === null || _b === void 0 ? void 0 : _b[variant]) || {};
+    const textStyles = ((_b = theme === null || theme === void 0 ? void 0 : theme.text) === null || _b === void 0 ? void 0 : _b[variant]) || {};
     return css `
             margin: ${props.margin || textStyles.margin};
             font-size: ${props.fontSize || textStyles.fontSize};
@@ -184,7 +184,7 @@ const TextContainerLabel = styled.label `
     ${(_a) => {
     var _b;
     var { variant = "regular", theme } = _a, props = __rest(_a, ["variant", "theme"]);
-    const textStyles = ((_b = theme === null || theme === void 0 ? void 0 : theme.textStyles) === null || _b === void 0 ? void 0 : _b[variant]) || {};
+    const textStyles = ((_b = theme === null || theme === void 0 ? void 0 : theme.text) === null || _b === void 0 ? void 0 : _b[variant]) || {};
     return css `
             margin: ${props.margin || textStyles.margin};
             font-size: ${props.fontSize || textStyles.fontSize};
@@ -326,6 +326,56 @@ const Link = (_a) => {
     return (React.createElement(StyledLink$2, Object.assign({ className: classNames("Link-" + variant), variant: "Link-" + variant, as: Component, fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight }, componentProps, props), children));
 };
 
+const GradientContainer = styled.div `
+    ${({ variant = "primary", theme }) => {
+    var _a;
+    const gradientStyles = ((_a = theme === null || theme === void 0 ? void 0 : theme.gradient) === null || _a === void 0 ? void 0 : _a[variant]) || {};
+    return css `
+            width: fit-content;
+            //gradient capability
+            background: radial-gradient(
+                ${gradientStyles.orientation},
+                ${gradientStyles.primaryColor},
+                ${gradientStyles.secondaryColor}
+            );
+
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        `;
+}};
+`;
+
+const Gradient = (_a) => {
+    var { variant, children } = _a, props = __rest(_a, ["variant", "children"]);
+    return (React.createElement(GradientContainer, Object.assign({ className: classNames("Gradient-", variant), variant: "Gradient-" + variant }, props), children));
+};
+
+const DividerStyle = styled.hr `
+    border: none;
+    border-top: 1px solid;
+    border: 0 none;
+
+    ${(_a) => {
+    var _b;
+    var { theme, variant = "primary" } = _a, props = __rest(_a, ["theme", "variant"]);
+    const dividerStyle = ((_b = theme === null || theme === void 0 ? void 0 : theme.divider) === null || _b === void 0 ? void 0 : _b[variant]) || {};
+    return css `
+            width: ${props.width || dividerStyle.width || "100%"};
+            background-color: ${props.color || dividerStyle.color || "#000"};
+            height: ${props.height || dividerStyle.height || "2px"};
+            border-radius: ${props.borderRadius ||
+        dividerStyle.borderRadius ||
+        "10px"};
+            margin: ${props.margin || dividerStyle.margin || "0"};
+        `;
+}}
+`;
+
+const Divider = (_a) => {
+    var { variant } = _a, props = __rest(_a, ["variant"]);
+    return (React.createElement(DividerStyle, Object.assign({ className: classNames("Divider-", variant), variant: "Divider-" + variant }, props)));
+};
+
 const WrapperBackground = styled.div `
     position: relative;
     display: flex;
@@ -353,6 +403,17 @@ const WrapperBackground = styled.div `
             `;
 }}
         animation: glow 3s infinite alternate ease-in-out;
+
+        @keyframes glow {
+            0% {
+                transform: scale(1);
+                opacity: 0.5;
+            }
+            100% {
+                transform: scale(1.5);
+                opacity: 1;
+            }
+        }
     }
 `;
 const WrapperHeader = styled.div `
@@ -419,7 +480,7 @@ const AtomIconDot = styled(Icon).attrs(({ theme }) => {
         `;
 }}
 `;
-const AtomHeading$3 = styled(Heading).attrs(({ theme }) => {
+const AtomHeading$2 = styled(Heading).attrs(({ theme }) => {
     var _a, _b;
     return ({
         variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.header) === null || _a === void 0 ? void 0 : _a.atomHeading) === null || _b === void 0 ? void 0 : _b.variant) || "h1"
@@ -483,7 +544,7 @@ const Header = ({ iconTop, iconDot, iconLeft, iconRight, textBanner, headingTitl
                 React.createElement(WrapperLineTop, null,
                     iconDot && React.createElement(AtomIconDot, { svg: iconDot }),
                     React.createElement(AtomTextTitle, null, textBanner))),
-            React.createElement(AtomHeading$3, null, headingTitle),
+            React.createElement(AtomHeading$2, null, headingTitle),
             React.createElement("div", null, textTitle === null || textTitle === void 0 ? void 0 : textTitle.map((text, i) => (React.createElement(AtomTextTitle, { key: i }, text)))),
             React.createElement(WrapperLineBottom, null,
                 React.createElement(AtomButtonLeft, { onClick: buttonLeftClick },
@@ -578,6 +639,12 @@ const StyledLink$1 = styled(Link).attrs(({ theme }) => {
         `;
 }};
 `;
+const AtomButton$1 = styled(Button).attrs(({ theme }) => {
+    var _a, _b;
+    return ({
+        variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.navigation) === null || _a === void 0 ? void 0 : _a.atomButton) === null || _b === void 0 ? void 0 : _b.variant) || "icon"
+    });
+}) ``;
 
 const Navigation = ({ iconBurger, tabs, onTabClick }) => {
     const location = useLocation();
@@ -586,14 +653,10 @@ const Navigation = ({ iconBurger, tabs, onTabClick }) => {
     const handleToggle = () => {
         setIsOpen(!isOpen);
     };
-    const handleKeyDown = (event) => {
-        if (event.key === "Enter" || event.key === " ") {
-            handleToggle();
-        }
-    };
     return (React.createElement(NavBar, null,
         React.createElement(BurgerWrapper, null,
-            React.createElement(BurgerIcon, { onClick: handleToggle, onKeyDown: handleKeyDown, tabIndex: 0, role: "button", "aria-pressed": isOpen, svg: iconBurger })),
+            React.createElement(AtomButton$1, { onClick: handleToggle, "aria-pressed": isOpen },
+                React.createElement(BurgerIcon, { svg: iconBurger }))),
         React.createElement(NavLinks, { isOpen: isOpen }, tabs.length > 0
             ? tabs.map((tab) => (React.createElement(StyledLink$1, { key: tab.label, to: tab.to, currentPath: tab.label === currentPath, onClick: () => {
                     onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(tab.label);
@@ -1054,6 +1117,8 @@ const Card$1 = styled.div `
     var { theme } = _a, props = __rest(_a, ["theme"]);
     const thisTheme = (theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) || {};
     return css `
+            all: unset;
+            width: 100%;
             display: flex;
             flex-direction: ${(props === null || props === void 0 ? void 0 : props.flexDirection) ||
         (thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.flexDirection) ||
@@ -1105,7 +1170,7 @@ const Card$1 = styled.div `
         `;
 }}
 `;
-const WrapperLine$1 = styled.div `
+const WrapperLine = styled.div `
     display: flex;
     align-items: center;
     justify-content: center;
@@ -1113,19 +1178,19 @@ const WrapperLine$1 = styled.div `
     text-align: center;
     gap: 10px;
 `;
-const AtomIcon$2 = styled(Icon).attrs(({ theme }) => {
+const AtomIcon$1 = styled(Icon).attrs(({ theme }) => {
     var _a, _b;
     return ({
         variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _a === void 0 ? void 0 : _a.atomIcon) === null || _b === void 0 ? void 0 : _b.variant) || "medium"
     });
 }) ``;
-const AtomHeading$2 = styled(Heading).attrs(({ theme }) => {
+const AtomHeading$1 = styled(Heading).attrs(({ theme }) => {
     var _a, _b;
     return ({
         variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _a === void 0 ? void 0 : _a.atomHeading) === null || _b === void 0 ? void 0 : _b.variant) || "h3"
     });
 }) ``;
-const AtomText$2 = styled(Text).attrs(({ theme }) => {
+const AtomText$1 = styled(Text).attrs(({ theme }) => {
     var _a, _b;
     return ({
         variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _a === void 0 ? void 0 : _a.atomText) === null || _b === void 0 ? void 0 : _b.variant) || "regular"
@@ -1133,19 +1198,12 @@ const AtomText$2 = styled(Text).attrs(({ theme }) => {
 }) ``;
 
 const CardSimpleRender = ({ icon, title, description, children, cardClick }) => {
-    const handleKeyDown = (event) => {
-        if (cardClick) {
-            if (event.key === "Enter" || event.key === " ") {
-                cardClick(event);
-            }
-        }
-    };
-    return (React.createElement(Card$1, { onClick: cardClick, onKeyDown: handleKeyDown, tabIndex: cardClick ? 0 : undefined, cardHover: !!cardClick },
+    return (React.createElement(Card$1, { as: cardClick ? "button" : "div", onClick: cardClick, cardHover: !!cardClick },
         React.createElement("div", null,
-            React.createElement(WrapperLine$1, null,
-                icon && React.createElement(AtomIcon$2, { svg: icon }),
-                React.createElement(AtomHeading$2, null, title)),
-            React.createElement(AtomText$2, null, description)),
+            React.createElement(WrapperLine, null,
+                icon && React.createElement(AtomIcon$1, { svg: icon }),
+                React.createElement(AtomHeading$1, null, title)),
+            React.createElement(AtomText$1, null, description)),
         children));
 };
 
@@ -1175,13 +1233,13 @@ const Card = styled.div `
         `;
 }}
 `;
-const AtomHeading$1 = styled(Heading).attrs(({ theme }) => {
+const AtomHeading = styled(Heading).attrs(({ theme }) => {
     var _a, _b;
     return ({
         variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _a === void 0 ? void 0 : _a.atomHeading) === null || _b === void 0 ? void 0 : _b.variant) || "h3"
     });
 }) ``;
-const AtomText$1 = styled(Text).attrs(({ theme }) => {
+const AtomText = styled(Text).attrs(({ theme }) => {
     var _a, _b;
     return ({
         variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _a === void 0 ? void 0 : _a.atomText) === null || _b === void 0 ? void 0 : _b.variant) || "regular"
@@ -1199,7 +1257,7 @@ const AtomTextButton = styled(Text).attrs(({ theme }) => {
         variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _a === void 0 ? void 0 : _a.atomTextButton) === null || _b === void 0 ? void 0 : _b.variant) || "primary"
     });
 }) ``;
-const AtomIcon$1 = styled(Icon).attrs(({ theme }) => {
+const AtomIcon = styled(Icon).attrs(({ theme }) => {
     var _a, _b;
     return ({
         variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _a === void 0 ? void 0 : _a.atomIcon) === null || _b === void 0 ? void 0 : _b.variant) || "medium"
@@ -1209,93 +1267,12 @@ const AtomIcon$1 = styled(Icon).attrs(({ theme }) => {
 const CardBanner = ({ icon, title, description, buttonText, buttonClick }) => {
     return (React.createElement(Card, null,
         React.createElement("div", null,
-            React.createElement(AtomHeading$1, null, title),
-            React.createElement(AtomText$1, null, description)),
+            React.createElement(AtomHeading, null, title),
+            React.createElement(AtomText, null, description)),
         buttonClick && (React.createElement(AtomButton, { onClick: buttonClick },
             React.createElement(AtomTextButton, null, buttonText),
-            icon && React.createElement(AtomIcon$1, { svg: icon })))));
-};
-
-const AccordionContainer = styled.div `
-    width: 100%;
-    background-color: #1e1e1e;
-    color: white;
-    border-radius: 8px;
-    overflow: hidden;
-    font-family: Arial, sans-serif;
-`;
-const AccordionItem = styled.div `
-    border-bottom: 1px solid #333;
-`;
-const WrapperLine = styled.div `
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    text-align: center;
-    gap: 10px;
-    cursor: pointer;
-    background: #2a2a2a;
-    &:hover {
-        background: #3a3a3a;
-    }
-`;
-const AccordionTitle = styled.div `
-    width: 80%;
-    padding: 16px;
-    font-size: 16px;
-    font-weight: bold;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    text-align: left;
-`;
-const AccordionDescription = styled.div `
-    padding: 16px;
-    background: #252525;
-    font-size: 14px;
-    display: ${({ isOpen }) => (isOpen ? "block" : "none")};
-`;
-const AtomHeading = styled(Heading).attrs((_a) => {
-    var _b, _c, _d;
-    var { theme } = _a, props = __rest(_a, ["theme"]);
-    return ({
-        variant: ((_d = (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _b === void 0 ? void 0 : _b[(props === null || props === void 0 ? void 0 : props.variant) || "Accordion-primary"]) === null || _c === void 0 ? void 0 : _c.atomHeading) === null || _d === void 0 ? void 0 : _d.variant) || "h5"
-    });
-}) ``;
-const AtomText = styled(Text).attrs((_a) => {
-    var _b, _c, _d;
-    var { theme } = _a, props = __rest(_a, ["theme"]);
-    return ({
-        variant: ((_d = (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _b === void 0 ? void 0 : _b[(props === null || props === void 0 ? void 0 : props.variant) || "Accordion-primary"]) === null || _c === void 0 ? void 0 : _c.atomText) === null || _d === void 0 ? void 0 : _d.variant) || "regular"
-    });
-}) ``;
-const AtomIcon = styled(Icon).attrs((_a) => {
-    var _b, _c, _d;
-    var { theme } = _a, props = __rest(_a, ["theme"]);
-    return ({
-        variant: ((_d = (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _b === void 0 ? void 0 : _b[(props === null || props === void 0 ? void 0 : props.variant) || "Accordion-primary"]) === null || _c === void 0 ? void 0 : _c.atomIcon) === null || _d === void 0 ? void 0 : _d.variant) || "small"
-    });
-}) `
-    padding: 16px;
-`;
-
-const Accordion = ({ variant = "primary", iconPlus, iconMinus, content = [] }) => {
-    const [openIndices, setOpenIndices] = useState([]);
-    const toggleAccordion = (index) => {
-        setOpenIndices((prev) => {
-            const newOpenIndices = [...prev];
-            newOpenIndices[index] = !newOpenIndices[index];
-            return newOpenIndices;
-        });
-    };
-    return (React.createElement(AccordionContainer, { className: classNames("Accordion", variant), variant: "Accordion-" + variant }, content === null || content === void 0 ? void 0 : content.map((item, index) => (React.createElement(AccordionItem, { key: index },
-        React.createElement(WrapperLine, { onClick: () => toggleAccordion(index) },
-            React.createElement(AccordionTitle, null,
-                React.createElement(AtomHeading, { variant: "Accordion-" + variant }, item.title)),
-            React.createElement(AtomIcon, { svg: openIndices[index] ? iconMinus : iconPlus })),
-        React.createElement(AccordionDescription, { isOpen: openIndices[index] },
-            React.createElement(AtomText, { variant: "Accordion-" + variant }, item.description)))))));
+            icon && React.createElement(AtomIcon, { svg: icon })))));
 };
 
-export { Accordion, BreakerTape, Button, CardBanner, CardSimpleRender, CardTeaser, Footer, Header, Heading, Icon, Link, Navigation, Text };
+export { BreakerTape, Button, CardBanner, CardSimpleRender, CardTeaser, Divider, Footer, Gradient, Header, Heading, Icon, Link, Navigation, Text };
 //# sourceMappingURL=index.js.map