@harjs/react-ui 1.0.0

package/dist/components/feedback/notification/index.js

@@ -0,0 +1,96 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import React from "react";
+import "../../../assets/css/components/feedback/notification/notification.css";
+const Notification = ({ title, message, status, direction = "bottom-left", trigger }) => {
+    const _firstLoad = useRef(false);
+    const _notificationItems = useRef([]);
+    const [items, setItems] = useState([]);
+    // useEffects
+    useEffect(() => {
+        if (!_firstLoad.current) {
+            _firstLoad.current = true;
+            return;
+        }
+        if (typeof status === "number") {
+            if (status >= 100 && status < 200) {
+                status = "information";
+            }
+            else if (status >= 200 && status < 300) {
+                status = "success";
+            }
+            else if (status >= 300 && status < 400) {
+                status = "warning";
+            }
+            else if (status >= 400 && status < 500) {
+                status = "error";
+            }
+            else if (status >= 500 && status < 600) {
+                status = "error";
+            }
+        }
+        setItems((prev) => [...prev, { id: Math.random(), title, message, status, direction }]);
+    }, [trigger]);
+    useEffect(() => {
+        let clearTimeoutId = undefined;
+        items.forEach((item) => {
+            if (!item.timeoutId) {
+                const timeoutId = setTimeout(() => {
+                    clearTimeoutId = item.timeoutId;
+                    setItems((prev) => prev.filter((_item) => _item.id !== item.id));
+                }, 3000);
+                // Öncesinde timeoutId değerinin tanımlanması yapılıyor.
+                setItems((prev) => prev.map((prevItem) => (prevItem.id === item.id ? { ...prevItem, timeoutId } : prevItem)));
+            }
+        });
+        return () => {
+            if (items.length === 0)
+                return;
+            const item = items.find((x) => x.timeoutId == clearTimeoutId);
+            if (item) {
+                clearTimeout(item.timeoutId);
+                clearTimeoutId = undefined;
+            }
+        };
+    }, [items]);
+    const getBottomPosition = (index) => {
+        let bottom = 30; // Başlangıçta 30px'lik bir boşluk ekliyoruz.
+        // Önceki öğenin yüksekliğini dikkate alarak bottom hesaplanıyor.
+        if (_notificationItems.current[index - 1]) {
+            bottom = _notificationItems.current.slice(0, index).reduce((acc, el) => {
+                const rect = el.getBoundingClientRect();
+                return acc + rect.height + 20; // +20 değeri ara boşluğu arttırıyor.
+            }, 30); // 30px'lik boşluğu başlangıçta ekliyoruz.
+        }
+        return bottom;
+    };
+    return items.map((item, index) => {
+        const bottom = getBottomPosition(index);
+        return (React.createElement("div", { key: item.id, ref: (element) => {
+                if (!element)
+                    return;
+                _notificationItems.current[index] = element;
+            }, className: "ar-notification-item", style: items.length > 5
+                ? {
+                    backgroundColor: `rgba(var(--white-rgb), ${index === items.length - 1 ? 1 : 0.1})`,
+                    backdropFilter: "blur(10px)",
+                    bottom: (index === 0 ? 30 : 10) * (index + 1),
+                }
+                : { bottom } },
+            React.createElement("div", { className: "icon" },
+                React.createElement("span", { className: String(item.status) }),
+                React.createElement("span", { className: String(item.status) }),
+                React.createElement("span", { className: String(item.status) }),
+                React.createElement("span", { className: String(item.status) }),
+                React.createElement("span", { className: String(item.status) })),
+            React.createElement("div", { className: "content" },
+                React.createElement("span", { className: "title" }, item.title),
+                React.createElement("span", { className: "message" }, item.message)),
+            React.createElement("div", { className: "close", onClick: () => {
+                    if (item.timeoutId)
+                        clearTimeout(item.timeoutId);
+                    setItems((prev) => prev.filter((_item) => _item.id !== item.id));
+                } })));
+    });
+};
+export default Notification;

package/dist/components/feedback/popover/IProps.d.ts

@@ -0,0 +1,16 @@
+import { IChildrenProps } from "../../../libs/infrastructure/types/IGlobalProps";
+interface IProps extends IChildrenProps {
+    title?: string;
+    message?: string;
+    content?: React.JSX.Element;
+    onConfirm?: (confirm: boolean) => void;
+    windowBlur?: boolean;
+    fullWidth?: boolean;
+    config?: {
+        buttons: {
+            okay: string;
+            cancel?: string;
+        };
+    };
+}
+export default IProps;

package/dist/components/feedback/popover/IProps.js

@@ -0,0 +1 @@
+export {};

package/dist/components/feedback/popover/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "../../../assets/css/components/feedback/popover/styles.css";
+import IProps from "./IProps";
+declare const Popover: React.FC<IProps>;
+export default Popover;

package/dist/components/feedback/popover/index.js

@@ -0,0 +1,91 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import "../../../assets/css/components/feedback/popover/styles.css";
+import Button from "../../form/button";
+import Typography from "../../data-display/typography";
+import ReactDOM from "react-dom";
+const { Title } = Typography;
+const Popover = ({ children, title, message, content, onConfirm, windowBlur, fullWidth, config }) => {
+    // refs
+    const _arPopoverWrapper = useRef(null);
+    const _arPopover = useRef(null);
+    const _arPopoverElement = useRef(null);
+    const _arPopoverClassName = ["ar-popover-wrapper"];
+    if (fullWidth)
+        _arPopoverClassName.push("full-width");
+    // states
+    const [open, setOpen] = useState(false);
+    const [mounted, setMounted] = useState(false);
+    // methods
+    const handleClickOutSide = (event) => {
+        const target = event.target;
+        const isArSelectOptions = document.getElementsByClassName("ar-select-options").length === 0;
+        const isArCalendar = document.getElementsByClassName("ar-date-calendar").length === 0;
+        if (_arPopover.current && !_arPopover.current.contains(target) && isArCalendar && isArSelectOptions)
+            setOpen(false);
+    };
+    const handleKeys = (event) => {
+        const key = event.key;
+        const isArSelectOptions = document.getElementsByClassName("ar-select-options").length === 0;
+        const isArCalendar = document.getElementsByClassName("ar-date-calendar").length === 0;
+        if (key === "Escape" && isArCalendar && isArSelectOptions)
+            setOpen(false);
+    };
+    const handlePosition = () => {
+        if (_arPopoverWrapper.current && _arPopover.current && _arPopoverElement.current) {
+            const popoverRect = _arPopover.current.getBoundingClientRect();
+            const elementRect = _arPopoverElement.current.getBoundingClientRect();
+            if (elementRect) {
+                const screenCenterX = window.innerWidth / 2;
+                const screenCenterY = window.innerHeight / 2;
+                const sx = window.scrollX || document.documentElement.scrollLeft;
+                const sy = window.scrollY || document.documentElement.scrollTop;
+                _arPopover.current.style.visibility = "visible";
+                _arPopover.current.style.opacity = "1";
+                _arPopover.current.style.top = `${(elementRect.top > screenCenterY
+                    ? elementRect.top - popoverRect.height + elementRect.height
+                    : elementRect.top) + sy}px`;
+                _arPopover.current.style.left = `${(elementRect.left > screenCenterX
+                    ? elementRect.right - (elementRect.width + 7.5) - popoverRect.width
+                    : elementRect.left + elementRect.width + 7.5) + sx}px`;
+            }
+        }
+    };
+    // useEffects
+    useEffect(() => {
+        if (open) {
+            setTimeout(() => handlePosition(), 0);
+            !windowBlur && window.addEventListener("blur", () => setOpen(false));
+            document.addEventListener("click", handleClickOutSide);
+            document.addEventListener("keydown", handleKeys);
+        }
+        return () => {
+            !windowBlur && window.removeEventListener("blur", () => setOpen(false));
+            document.removeEventListener("click", handleClickOutSide);
+            document.removeEventListener("keydown", handleKeys);
+        };
+    }, [open]);
+    useEffect(() => {
+        setMounted(true);
+        return () => setMounted(false);
+    }, []);
+    return (React.createElement("div", { ref: _arPopoverWrapper, className: _arPopoverClassName.map((c) => c).join(" "), role: "dialog" },
+        open &&
+            mounted &&
+            ReactDOM.createPortal(React.createElement("div", { ref: _arPopover, className: "ar-popover" },
+                title && (React.createElement("div", { className: "title" },
+                    React.createElement(Title, { Level: "h4" }, title))),
+                message && React.createElement("p", { className: "message" }, message),
+                content && React.createElement("div", { className: "content" }, content),
+                onConfirm && (React.createElement("div", { className: "footer" },
+                    React.createElement(Button, { color: "green", size: "small", onClick: () => {
+                            onConfirm(true);
+                            setOpen(false);
+                        } }, config?.buttons.okay ?? "Evet"),
+                    React.createElement(Button, { size: "small", onClick: () => {
+                            onConfirm(false);
+                            setOpen(false);
+                        } }, config?.buttons.cancel ?? "Hayır")))), document.body),
+        React.createElement("div", { ref: _arPopoverElement, onClick: () => setOpen((prev) => !prev) }, children)));
+};
+export default Popover;

package/dist/components/feedback/popup-confirm/IProps.d.ts

@@ -0,0 +1,10 @@
+import { PopupButtonConfig, Status } from "../../../libs/core/application/contexts/Notification";
+interface IProps {
+    title: string;
+    message?: string;
+    status: (Status | "save" | "delete") | number;
+    isOpen: boolean;
+    buttons?: PopupButtonConfig | null;
+    onConfirm?: ((confirm: boolean) => void) | null;
+}
+export default IProps;

package/dist/components/feedback/popup-confirm/IProps.js

@@ -0,0 +1 @@
+export {};

package/dist/components/feedback/popup-confirm/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import IProps from "./IProps";
+import "../../../assets/css/components/feedback/popup-confirm/styles.css";
+declare const PopupConfirm: ({ title, message, status, isOpen, buttons, onConfirm }: IProps) => false | React.ReactPortal;
+export default PopupConfirm;

package/dist/components/feedback/popup-confirm/index.js

@@ -0,0 +1,98 @@
+"use client";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import "../../../assets/css/components/feedback/popup-confirm/styles.css";
+import Button from "../../form/button";
+import ReactDOM from "react-dom";
+import { NotificationContext } from "../../../libs/core/application/contexts/Notification";
+import { ARIcon } from "../../icons";
+import Row from "../../data-display/grid-system/row/Row";
+import Column from "../../data-display/grid-system/column/Column";
+const PopupConfirm = ({ title, message, status, isOpen, buttons, onConfirm }) => {
+    // contexts
+    const { setIsPopupOpen } = useContext(NotificationContext);
+    // refs
+    const _arNotificationPopupWrapper = useRef(null);
+    const _arNotificationPopup = useRef(null);
+    // states
+    const _notificaitonPopupWrapperClassName = ["ar-notification-popup-wrapper"];
+    const [className, setClassName] = useState(["ar-notification-popup", ""]);
+    // methods
+    const buttonColor = () => {
+        switch (status) {
+            case "success":
+            case "save":
+                return "green";
+            case "warning":
+                return "orange";
+            case "information":
+                return "cyan";
+            case "error":
+            case "delete":
+                return "red";
+            default:
+                return "light";
+        }
+    };
+    const buttonIcons = () => {
+        switch (status) {
+            case "success":
+                return React.createElement(ARIcon, { icon: "CheckAll", fill: "var(--success)", size: 24 });
+            case "save":
+                return React.createElement(ARIcon, { icon: "Floppy-Fill", fill: "var(--success)", size: 24 });
+            case "warning":
+                return React.createElement(ARIcon, { icon: "ExclamationDiamond-Fill", fill: "var(--warning)", size: 24 });
+            case "information":
+                return React.createElement(ARIcon, { icon: "Information-Circle-Fill", fill: "var(--information)", size: 24 });
+            case "error":
+                return React.createElement(ARIcon, { icon: "XCircle-Fill", fill: "var(--danger)", size: 24 });
+            case "delete":
+                return React.createElement(ARIcon, { icon: "Trash-Fill", fill: "var(--danger)", size: 24 });
+            default:
+                return "light";
+        }
+    };
+    // useEffects
+    useEffect(() => {
+        setClassName((prev) => {
+            const updated = [...prev.slice(0, -1), isOpen ? "open" : ""];
+            return updated;
+        });
+        if (isOpen)
+            document.body.style.overflow = "hidden";
+        return () => {
+            document.body.style.removeProperty("overflow");
+        };
+    }, [isOpen]);
+    return (isOpen &&
+        ReactDOM.createPortal(React.createElement("div", { ref: _arNotificationPopupWrapper, className: _notificaitonPopupWrapperClassName.map((c) => c).join(" ") },
+            React.createElement("div", { className: "ar-notification-popup-bg", onMouseDown: (event) => {
+                    event.stopPropagation();
+                    const target = event.target;
+                    if (_arNotificationPopup.current && !_arNotificationPopup.current.contains(target)) {
+                        setClassName((prev) => {
+                            const updated = [...prev.slice(0, -1), isOpen ? "open" : ""];
+                            return updated;
+                        });
+                    }
+                } }),
+            React.createElement("div", { ref: _arNotificationPopup, className: className.map((c) => c).join(" ") },
+                React.createElement("div", { className: `icon ${status}` }, buttonIcons()),
+                React.createElement("div", { className: "content" },
+                    React.createElement("span", { className: `title ${status}` }, title),
+                    React.createElement("span", { className: "message" }, message)),
+                React.createElement("div", { className: "footer" },
+                    React.createElement(Row, null,
+                        React.createElement(Column, { size: buttons?.cancel ? 6 : 12 },
+                            React.createElement(Button, { color: buttonColor(), onClick: (event) => {
+                                    buttons?.okay?.onClick?.(event);
+                                    onConfirm?.(true);
+                                    setIsPopupOpen?.((prev) => !prev);
+                                }, fullWidth: true }, buttons?.okay?.children ?? "Tamam")),
+                        buttons?.cancel && (React.createElement(Column, { size: 6 },
+                            React.createElement(Button, { variant: "outlined", color: buttons.cancel.color ?? "gray", onClick: (event) => {
+                                    buttons?.cancel?.onClick?.(event);
+                                    onConfirm?.(false);
+                                    setIsPopupOpen?.((prev) => !prev);
+                                }, fullWidth: true }, buttons.cancel.children ?? "Vazgeç"))))))), document.body));
+};
+export default PopupConfirm;

package/dist/components/feedback/progress/IProps.d.ts

@@ -0,0 +1,6 @@
+interface IProps {
+    value: number;
+    reverse?: boolean;
+    isVisibleValue?: boolean;
+}
+export default IProps;

package/dist/components/feedback/progress/IProps.js

@@ -0,0 +1 @@
+export {};

package/dist/components/feedback/progress/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import IProps from "./IProps";
+import "../../../assets/css/components/feedback/progress/progress.css";
+declare const Progress: React.FC<IProps>;
+export default Progress;

package/dist/components/feedback/progress/index.js

@@ -0,0 +1,26 @@
+import React from "react";
+import Utils from "../../../libs/infrastructure/shared/Utils";
+import "../../../assets/css/components/feedback/progress/progress.css";
+const Progress = ({ value, reverse, isVisibleValue = false }) => {
+    // variables
+    let _status = undefined;
+    const _arProgressClassName = [];
+    if (value >= 0 && value <= 25)
+        _status = !reverse ? "danger" : "success";
+    else if (value >= 26 && value <= 50)
+        _status = !reverse ? "warning" : "primary";
+    else if (value >= 51 && value <= 75)
+        _status = !reverse ? "primary" : "warning";
+    else if (value >= 76 && value <= 100)
+        _status = !reverse ? "success" : "danger";
+    _arProgressClassName.push(...Utils.GetClassName("filled", _status, undefined, { radius: "pill" }, undefined, undefined, undefined));
+    return (React.createElement("div", { className: "ar-progress" },
+        React.createElement("div", { className: `ar-progress-bar ${_arProgressClassName.map((c) => c).join(" ")}` }),
+        React.createElement("div", { className: `ar-progress-value ${_arProgressClassName.map((c) => c).join(" ")}`, style: {
+                width: `${value}%`,
+                transition: "width 250ms ease-in-out",
+            } }, !isVisibleValue && React.createElement("span", null,
+            "%",
+            value))));
+};
+export default Progress;

package/dist/components/feedback/tooltip/IProps.d.ts

@@ -0,0 +1,6 @@
+import { IChildrenProps } from "../../../libs/infrastructure/types/IGlobalProps";
+interface IProps extends IChildrenProps {
+    text: string | string[];
+    direction?: "top" | "right" | "left" | "bottom";
+}
+export default IProps;

package/dist/components/feedback/tooltip/IProps.js

@@ -0,0 +1 @@
+export {};

package/dist/components/feedback/tooltip/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import IProps from "./IProps";
+import "../../../assets/css/components/feedback/tooltip/styles.css";
+declare const Tooltip: React.FC<IProps>;
+export default Tooltip;

package/dist/components/feedback/tooltip/index.js

@@ -0,0 +1,129 @@
+"use client";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom";
+import "../../../assets/css/components/feedback/tooltip/styles.css";
+const Tooltip = ({ children, text, direction = "top" }) => {
+    // refs
+    const _arTooltip = useRef(null);
+    const _children = useRef(null);
+    // states
+    const [mouseEnter, setMouseEnter] = useState(false);
+    const [_direction, setDirection] = useState(direction);
+    // 💡 Donma ve sonsuz döngüyü engellemek için dışarıdan seçilen ana yönü bir ref'te saklıyoruz
+    const currentInitialDirection = useRef(direction);
+    useEffect(() => {
+        currentInitialDirection.current = direction;
+        setDirection(direction); // Storybook panelinden elle yön değiştiğinde senkronize et
+    }, [direction]);
+    // methods
+    const handlePosition = useCallback(() => {
+        const child = _children.current;
+        const tooltip = _arTooltip.current;
+        if (!child || !tooltip)
+            return;
+        const margin = 17.5;
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        const childRect = child.getBoundingClientRect();
+        const tooltipRect = tooltip.getBoundingClientRect();
+        const spaceTop = childRect.top;
+        const spaceBottom = windowHeight - childRect.bottom;
+        const spaceLeft = childRect.left;
+        const spaceRight = windowWidth - childRect.right;
+        // 💡 Hesaplamaya state'ten değil, doğrudan orijinal seçilen yönden başlıyoruz
+        let finalDirection = currentInitialDirection.current;
+        // Sıkışma durumlarına göre yönü dinamik değiştir
+        if (finalDirection === "top" && spaceTop < tooltipRect.height + margin) {
+            finalDirection = "bottom";
+        }
+        else if (finalDirection === "bottom" && spaceBottom < tooltipRect.height + margin) {
+            finalDirection = "top";
+        }
+        else if (finalDirection === "left" && spaceLeft < tooltipRect.width + margin) {
+            finalDirection = "right";
+        }
+        else if (finalDirection === "right" && spaceRight < tooltipRect.width + margin) {
+            finalDirection = "left";
+        }
+        // Eğer hala hiçbir yere sığmıyorsa en geniş boşluğu bul
+        const maxSpace = Math.max(spaceTop, spaceBottom, spaceLeft, spaceRight);
+        if ((finalDirection === "top" && spaceTop < tooltipRect.height + margin) ||
+            (finalDirection === "bottom" && spaceBottom < tooltipRect.height + margin) ||
+            (finalDirection === "left" && spaceLeft < tooltipRect.width + margin) ||
+            (finalDirection === "right" && spaceRight < tooltipRect.width + margin)) {
+            if (maxSpace === spaceTop)
+                finalDirection = "top";
+            else if (maxSpace === spaceBottom)
+                finalDirection = "bottom";
+            else if (maxSpace === spaceLeft)
+                finalDirection = "left";
+            else if (maxSpace === spaceRight)
+                finalDirection = "right";
+        }
+        let top = 0;
+        let left = 0;
+        switch (finalDirection) {
+            case "top":
+                top = childRect.top - tooltipRect.height - margin;
+                left = childRect.left + childRect.width / 2 - tooltipRect.width / 2;
+                break;
+            case "right":
+                top = childRect.top + childRect.height / 2 - tooltipRect.height / 2;
+                left = childRect.right + margin;
+                break;
+            case "bottom":
+                top = childRect.bottom + margin;
+                left = childRect.left + childRect.width / 2 - tooltipRect.width / 2;
+                break;
+            case "left":
+                top = childRect.top + childRect.height / 2 - tooltipRect.height / 2;
+                left = childRect.left - tooltipRect.width - margin;
+                break;
+        }
+        // Ekran taşma koruması
+        if (left < 10)
+            left = 10;
+        if (left + tooltipRect.width > windowWidth - 10) {
+            left = windowWidth - tooltipRect.width - 10;
+        }
+        tooltip.style.top = `${top}px`;
+        tooltip.style.left = `${left}px`;
+        // 💡 KRİTİK DEĞİŞİKLİK: Sadece yön gerçekten değiştiyse state güncellenir.
+        // Bu kontrol MutationObserver'ın yarattığı kısır döngüyü anında kırar.
+        setDirection((prev) => {
+            if (prev !== finalDirection)
+                return finalDirection;
+            return prev;
+        });
+    }, []); // Bağımlılık dizisini boş bırakarak fonksiyonun kimliğini sabitliyoruz
+    // useEffects
+    useEffect(() => {
+        window.addEventListener("resize", handlePosition);
+        window.addEventListener("scroll", handlePosition, { passive: true });
+        const observer = new MutationObserver(() => {
+            handlePosition();
+        });
+        observer.observe(document.body, {
+            attributes: true,
+            childList: true,
+            subtree: true,
+        });
+        return () => {
+            window.removeEventListener("resize", handlePosition);
+            window.removeEventListener("scroll", handlePosition);
+            observer.disconnect();
+        };
+    }, [handlePosition]);
+    useEffect(() => {
+        if (mouseEnter)
+            setTimeout(() => handlePosition(), 0);
+    }, [mouseEnter, handlePosition]);
+    return (React.createElement("div", { className: "ar-tooltip-wrapper" },
+        React.createElement("div", { ref: _children, onMouseEnter: () => setMouseEnter(true), onMouseLeave: () => setMouseEnter(false) }, children),
+        mouseEnter &&
+            ReactDOM.createPortal(React.createElement("div", { ref: _arTooltip, className: `ar-tooltip ${_direction}` }, Array.isArray(text) ? (text.map((t, index) => (React.createElement("span", { key: index, className: "text" },
+                React.createElement("span", { className: "bullet" }, "\u2022"),
+                React.createElement("span", null, t))))) : (React.createElement("span", { className: "text" }, text))), document.body)));
+};
+Tooltip.displayName = "Tooltip";
+export default Tooltip;

package/dist/components/form/button/IProps.d.ts

@@ -0,0 +1,10 @@
+import { IBorderProps, IChildrenProps, IColorProps, IIconProps, ISizeProps, IUpperCaseProps, IVariantProps } from "../../../libs/infrastructure/types/IGlobalProps";
+interface IProps extends IChildrenProps, IVariantProps, IColorProps, IBorderProps, IIconProps, ISizeProps, IUpperCaseProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color"> {
+    shape?: "circle" | "square";
+    position?: {
+        type: "fixed" | "absolute";
+        inset: ("top" | "right" | "bottom" | "left")[];
+    };
+    fullWidth?: boolean;
+}
+export default IProps;

package/dist/components/form/button/IProps.js

@@ -0,0 +1 @@
+export {};

package/dist/components/form/button/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "../../../assets/css/components/form/button/styles.css";
+import IProps from "./IProps";
+declare const Button: React.FC<IProps>;
+export default Button;

package/dist/components/form/button/index.js

@@ -0,0 +1,41 @@
+"use client";
+import React, { useRef } from "react";
+import "../../../assets/css/components/form/button/styles.css";
+import Utils from "../../../libs/infrastructure/shared/Utils";
+const Button = ({ children, variant = "filled", shape, color = "light", border = { radius: "sm" }, size = "normal", position, fullWidth, icon, upperCase, ...attributes }) => {
+    // refs
+    const _button = useRef(null);
+    const _arButtonClassName = ["ar-button"];
+    _arButtonClassName.push(...Utils.GetClassName(variant, undefined, color, border, size, icon, attributes.className));
+    if (!children)
+        _arButtonClassName.push("no-content");
+    if (fullWidth)
+        _arButtonClassName.push("full-width");
+    if (shape)
+        _arButtonClassName.push(`ar-button-shape ${shape}`);
+    if (position) {
+        _arButtonClassName.push(position.type);
+        _arButtonClassName.push(position.inset.map((_inset) => _inset).join(" "));
+    }
+    return (React.createElement("button", { ref: _button, ...attributes, type: attributes.type ?? "button", className: _arButtonClassName.map((c) => c).join(" "), onClick: (event) => {
+            // Disabled gelmesi durumunda işlem yapmasına izin verme...
+            if (attributes.disabled)
+                return;
+            (() => {
+                const _current = _button.current;
+                const addClass = "active";
+                if (_current && !_current.classList.contains(addClass)) {
+                    // Sınıf ekleniyor...
+                    _current.classList.add(addClass);
+                    // Sınıf 500 milisaniye sonra kaldırlacak.
+                    setTimeout(() => _current.classList.remove(addClass), 750);
+                }
+            })();
+            (() => attributes.onClick && attributes.onClick(event))();
+        } },
+        React.createElement("span", { className: "text" },
+            icon?.element,
+            React.createElement("span", null, !shape ? (typeof children === "string" && upperCase ? children.toLocaleUpperCase() : children) : ""))));
+};
+Button.displayName = "Button";
+export default Button;

package/dist/components/form/button-action/IProps.d.ts

@@ -0,0 +1,8 @@
+import { IColorProps, IIconProps } from "../../../libs/infrastructure/types/IGlobalProps";
+interface IProps {
+    buttons: ({
+        text: string;
+        onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    } & IColorProps & IIconProps)[];
+}
+export default IProps;

package/dist/components/form/button-action/IProps.js

@@ -0,0 +1 @@
+export {};

package/dist/components/form/button-action/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "../../../assets/css/components/form/button-action/styles.css";
+import IProps from "./IProps";
+declare const ButtonAction: React.FC<IProps>;
+export default ButtonAction;