athameui 0.0.2

package/dist/athameui.mjs

@@ -0,0 +1,181 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, createElement, useState, useEffect, useRef } from 'react';
+
+const ButtonPrimitive = forwardRef(({ children, ...rest }, ref) => {
+    return (jsx("button", { ref: ref, ...rest, children: children }));
+});
+
+function cx(...classes) {
+    return classes.filter(Boolean).join(" ");
+}
+
+// button.variants.ts
+const buttonVariants = {
+    size: {
+        small: "ath-button-small",
+        medium: "ath-button-medium",
+        large: "ath-button-large",
+        full: "ath-button-full",
+    },
+    variant: {
+        primary: "ath-button-primary",
+        secondary: "ath-button-secondary",
+        tertiary: "ath-button-tertiary",
+        danger: "ath-button-danger",
+        warning: "ath-button-warning",
+        success: "ath-button-success",
+        outline: "ath-button-outline",
+        ghost: "ath-button-ghost",
+    },
+    textAlign: {
+        left: "ath-button-text-left",
+        center: "ath-button-text-center",
+        right: "ath-button-text-right",
+    },
+    dark: "ath-button-dark",
+};
+
+const Button = forwardRef(({ children, className, variant = "primary", size = "medium", dark = false, disabled = false, icon, iconOnly, tabIndex, testId, type = "button", title, autoFocus = false, textAlign = "center", onBlur, onClick, onFocus, onKeyDown, ...rest }, ref) => {
+    const classes = cx("ath-button", buttonVariants.size[size], buttonVariants.variant[variant], buttonVariants.textAlign[textAlign], dark ? buttonVariants.dark : "", typeof className === "object" && className !== null
+        ? className.button
+        : className);
+    const onClickHandler = (e) => {
+        onClick?.(e);
+    };
+    return (jsx(ButtonPrimitive, { ref: ref, type: type, title: title, className: classes, disabled: disabled, autoFocus: autoFocus, tabIndex: disabled ? -1 : tabIndex, "data-testid": testId, onClick: onClickHandler, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur, ...rest, children: icon ? (jsxs(Fragment, { children: [typeof icon === "string" ? (jsx("span", { "aria-hidden": "true", children: icon })) : (icon), !iconOnly && children] })) : (jsx(Fragment, { children: children })) }));
+});
+Button.displayName = "Button";
+
+const ButtonGroup = ({ children, gap = "2", direction = "row", }) => {
+    return jsx("div", { className: `flex flex-${direction} gap-${gap}`, children: children });
+};
+
+const defaultAttributes = {
+    xmlns: 'http://www.w3.org/2000/svg',
+    width: 24,
+    height: 24,
+    viewBox: '0 0 24 24',
+    fill: 'none',
+};
+const HugeiconsIcon = forwardRef(({ color = 'currentColor', size = 24, strokeWidth, absoluteStrokeWidth = false, className = '', altIcon, showAlt = false, icon, primaryColor, secondaryColor, disableSecondaryOpacity = false, ...rest }, ref) => {
+    const calculatedStrokeWidth = strokeWidth !== undefined
+        ? (absoluteStrokeWidth ? (Number(strokeWidth) * 24) / Number(size) : strokeWidth)
+        : undefined;
+    const strokeProps = calculatedStrokeWidth !== undefined ? {
+        strokeWidth: calculatedStrokeWidth,
+        stroke: 'currentColor'
+    } : {};
+    const elementProps = {
+        ref,
+        ...defaultAttributes,
+        width: size,
+        height: size,
+        color: primaryColor || color,
+        className,
+        ...strokeProps,
+        ...rest,
+    };
+    const currentIcon = (showAlt && altIcon) ? altIcon : icon;
+    // Create SVG children with color handling for two-tone icons
+    const svgChildren = [...currentIcon]
+        .sort(([, a], [, b]) => {
+        const hasOpacityA = a.opacity !== undefined;
+        const hasOpacityB = b.opacity !== undefined;
+        return hasOpacityB ? 1 : hasOpacityA ? -1 : 0;
+    })
+        .map(([tag, attrs]) => {
+        const isSecondaryPath = attrs.opacity !== undefined;
+        const pathOpacity = isSecondaryPath && !disableSecondaryOpacity ? attrs.opacity : undefined;
+        // Handle both stroke and fill properties based on element type
+        const fillProps = secondaryColor ? {
+            ...(attrs.stroke !== undefined ? {
+                stroke: isSecondaryPath ? secondaryColor : (primaryColor || color)
+            } : {
+                fill: isSecondaryPath ? secondaryColor : (primaryColor || color)
+            })
+        } : {};
+        return createElement(tag, {
+            ...attrs,
+            ...strokeProps,
+            ...fillProps,
+            opacity: pathOpacity,
+            key: attrs.key
+        });
+    });
+    return createElement('svg', elementProps, svgChildren);
+});
+HugeiconsIcon.displayName = 'HugeiconsIcon';
+
+const ll=[["path",{d:"M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"0"}],["path",{d:"M12 9.00014V16.0002M15.5 11.5C15.5 11.5 12.9223 8.00001 12 8C11.0777 7.99999 8.50003 11.5 8.50003 11.5",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"1"}]];
+
+const BackToTopButton = (props) => {
+    const { className, variant, dark = false, testId, title } = props;
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
+        const handleScroll = () => {
+            const scrollPosition = window.scrollY;
+            if (scrollPosition < 300) {
+                setVisible(false);
+            }
+            else {
+                setVisible(true);
+            }
+        };
+        window.addEventListener("scroll", handleScroll);
+        return () => {
+            window.removeEventListener("scroll", handleScroll);
+        };
+    }, []);
+    const scrollToTop = () => {
+        window.scrollTo({ top: 0, behavior: "smooth" });
+    };
+    if (!visible)
+        return null;
+    const classes = cx("ath-back-to-top-button", className);
+    return (jsx(Button, { className: classes, "data-testid": `${testId} "ath-back-to-top-button"`, onClick: scrollToTop, variant: variant ?? "secondary", title: title ?? "Back to Top", dark: dark, children: jsx(HugeiconsIcon, { icon: ll, width: "50", height: "50" }) }));
+};
+
+const Header = ({ children, className }) => {
+    const classes = cx("ath-header", className);
+    return jsx("header", { className: classes, children: children });
+};
+
+const AccordionItem = ({ item, expanded, onToggle, className, }) => {
+    const contentRef = useRef(null);
+    const contentHeight = contentRef.current?.scrollHeight;
+    const classes = cx("ath-accordion-item", typeof className === "object" && className !== null
+        ? className.accordionItem
+        : className);
+    return (jsxs("div", { className: classes, children: [jsx(Button, { className: "ath-accordion-item-heading", variant: "ghost", size: "full", textAlign: "left", onClick: () => onToggle(item.id), dark: true, children: jsx("h4", { children: item.heading }) }), jsx("div", { className: cx("ath-accordion-expansion-wrapper", expanded && "expanded"), style: { height: expanded ? contentHeight : 0 }, children: jsx("div", { ref: contentRef, className: "ath-accordion-item-content", children: item.content }) })] }));
+};
+
+const Accordion = ({ children, className, items, childrenFirst, expand = "one", expandToggleCallback, }) => {
+    const [expandedItems, setExpandedItems] = useState([]);
+    const classes = cx("ath-accordion", typeof className === "object" && className !== null
+        ? className.accordion
+        : className);
+    const expandToggle = (itemId) => {
+        console.log("Rendering AccordionItem:", itemId, "Expanded:", expandedItems.includes(itemId));
+        if (expandedItems.includes(itemId)) {
+            setExpandedItems(expandedItems.filter((id) => id !== itemId));
+        }
+        else {
+            if (expand === "one") {
+                setExpandedItems([itemId]);
+            }
+            else if (expand === "any") {
+                setExpandedItems([...expandedItems, itemId]);
+            }
+        }
+        if (expandToggleCallback) {
+            expandToggleCallback(expandedItems);
+        }
+    };
+    return (jsxs("div", { className: classes, children: [childrenFirst && children, items.map((item) => (jsx(AccordionItem, { item: item, expanded: expandedItems.includes(item.id), onToggle: expandToggle, className: typeof className === "object" && className !== null
+                    ? className.accordionItem
+                    : undefined }, item.id))), !childrenFirst && children] }));
+};
+
+export { Accordion, AccordionItem, BackToTopButton, Button, ButtonGroup, Header };
+//# sourceMappingURL=athameui.mjs.map