@harjs/react-ui 1.0.0

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

@@ -0,0 +1,68 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import "../../../assets/css/components/form/button-action/styles.css";
+import Button from "../button";
+import ReactDOM from "react-dom";
+const ButtonAction = ({ buttons }) => {
+    // refs
+    const _wrapper = useRef(null);
+    const _button = useRef(null);
+    const _list = useRef(null);
+    // states
+    const [open, setOpen] = useState(false);
+    // methods
+    const handleClickOutSide = (event) => {
+        const target = event.target;
+        if (_wrapper.current && !_wrapper.current.contains(target))
+            setOpen(false);
+    };
+    const handleKeys = (event) => {
+        const key = event.key;
+        if (key === "Escape")
+            setOpen(false);
+    };
+    const handlePosition = () => {
+        if (_wrapper.current && _button.current && _list.current) {
+            const elementRect = _button.current.getBoundingClientRect();
+            const popoverRect = _list.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;
+                _list.current.style.visibility = "visible";
+                _list.current.style.opacity = "1";
+                _list.current.style.top = `${(elementRect.top > screenCenterY
+                    ? elementRect.top - popoverRect.height + elementRect.height
+                    : elementRect.top) + sy}px`;
+                _list.current.style.left = `${(elementRect.left > screenCenterX
+                    ? elementRect.right - (elementRect.width + 7.5) - popoverRect.width
+                    : elementRect.left + elementRect.width + 7.5) + sx}px`;
+            }
+        }
+    };
+    const handleResizeEvent = () => setOpen(false);
+    // useEffects
+    useEffect(() => {
+        if (!open)
+            return;
+        setTimeout(() => handlePosition(), 0);
+        window.addEventListener("blur", () => setOpen(false));
+        window.addEventListener("resize", handleResizeEvent);
+        document.addEventListener("click", handleClickOutSide);
+        document.addEventListener("keydown", handleKeys);
+        return () => {
+            window.removeEventListener("blur", () => setOpen(false));
+            window.removeEventListener("resize", handleResizeEvent);
+            document.removeEventListener("click", handleClickOutSide);
+            document.removeEventListener("keydown", handleKeys);
+        };
+    }, [open]);
+    return (React.createElement("div", { ref: _wrapper, className: "ar-button-action" },
+        React.createElement("span", { ref: _button },
+            React.createElement(Button, { variant: "borderless", color: "light", icon: { element: React.createElement("span", { className: "dotted" }) }, onClick: () => setOpen((prev) => !prev) })),
+        open &&
+            ReactDOM.createPortal(React.createElement("span", { ref: _list, className: "ar-action-buttons" }, buttons.map((button, index) => (React.createElement(Button, { key: index, style: { display: "flex", justifyContent: "flex-start" }, variant: "borderless", color: button.color ?? "blue", size: "small", icon: button.icon, onClick: button.onClick }, button.text)))), document.body)));
+};
+ButtonAction.displayName = "ButtonAction";
+export default ButtonAction;

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

@@ -0,0 +1,7 @@
+import React, { ReactElement } from "react";
+import "../../../assets/css/components/form/button-group/styles.css";
+import Button from "../button";
+declare const ButtonGroup: React.FC<{
+    children: ReactElement<typeof Button> | ReactElement<typeof Button>[];
+}>;
+export default ButtonGroup;

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

@@ -0,0 +1,31 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import "../../../assets/css/components/form/button-group/styles.css";
+import Button from "../button";
+import Alert from "../../feedback/alert";
+const ButtonGroup = ({ children }) => {
+    // states
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        try {
+            // Çocuk elemanların sadece `Button` bileşenleri olduğundan emin olun
+            React.Children.forEach(children, (child) => {
+                if (!React.isValidElement(child) || child.type !== Button) {
+                    throw new Error("ButtonGroup can only have Button elements as children.");
+                }
+            });
+            // Hata yoksa, error'u temizle
+            setError(null);
+        }
+        catch (err) {
+            if (err instanceof Error) {
+                // Hata varsa error state'e yaz
+                setError(err.message);
+                console.error(err.message);
+            }
+        }
+    }, [children]); // children değişirse kontrolü tekrar yap
+    return React.createElement("div", { className: "ar-button-group" }, error ? React.createElement(Alert, { status: "danger", message: error }) : children);
+};
+ButtonGroup.displayName = "ButtonGroup";
+export default ButtonGroup;

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

@@ -0,0 +1,5 @@
+import { IBorderProps, IColorProps, IUpperCaseProps, IValidationProps, IVariantProps } from "../../../libs/infrastructure/types/IGlobalProps";
+interface IProps extends IVariantProps, IColorProps, IBorderProps, IUpperCaseProps, IValidationProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "type" | "size" | "color"> {
+    label?: string;
+}
+export default IProps;

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

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

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

@@ -0,0 +1,5 @@
+import React from "react";
+import IProps from "./IProps";
+import "../../../assets/css/components/form/checkbox/checkbox.css";
+declare const Checkbox: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLInputElement>>;
+export default Checkbox;

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

@@ -0,0 +1,24 @@
+"use client";
+import Utils from "../../../libs/infrastructure/shared/Utils";
+import React, { forwardRef, useRef } from "react";
+import "../../../assets/css/components/form/checkbox/checkbox.css";
+const Checkbox = forwardRef(({ label, color = "blue", border = { radius: "sm" }, upperCase, ...attributes }, ref) => {
+    // refs
+    const _checkbox = useRef(null);
+    const _checkboxClassName = ["ar-checkbox"];
+    _checkboxClassName.push(...Utils.GetClassName("filled", undefined, attributes.checked ? color : "light", border, undefined, undefined, attributes.className));
+    return (React.createElement("div", { className: "ar-checkbox-wrapper" },
+        React.createElement("label", null,
+            React.createElement("input", { ref: ref, type: "checkbox", ...attributes, size: 0, onChange: (event) => {
+                    // (() => {
+                    //   const _current = _checkbox.current;
+                    //   if (!_current) return;
+                    // })();
+                    (() => attributes.onChange && attributes.onChange(event))();
+                } }),
+            React.createElement("span", null,
+                React.createElement("span", { ref: _checkbox, className: _checkboxClassName.map((c) => c).join(" ") }),
+                label && React.createElement("span", { className: "label" }, upperCase ? label.toUpperCase() : label)))));
+});
+Checkbox.displayName = "Checkbox";
+export default Checkbox;

package/dist/components/form/date-picker/DATE.d.ts

@@ -0,0 +1,12 @@
+declare class DATE {
+    Parse: (value: string, isCloack?: boolean) => {
+        year: number;
+        month: number;
+        day: number;
+        hours: number;
+        minutes: number;
+    };
+    ParseValue: (value: string, isCloack?: boolean) => string;
+}
+declare const _default: DATE;
+export default _default;

package/dist/components/form/date-picker/DATE.js

@@ -0,0 +1,27 @@
+class DATE {
+    Parse = (value, isCloack = false) => {
+        // Seçilmiş Tarih ve Zaman
+        const [sd, st] = value.split("T");
+        const [y, m, d] = sd.split("-").map(Number);
+        // Zaman Bilgileri
+        const [c, _] = isCloack && st ? st.split(".") : "00:00";
+        const [hh, mm] = isCloack ? c.split(":").map(Number) : [0, 0];
+        return {
+            year: y,
+            month: m,
+            day: d,
+            hours: hh,
+            minutes: mm,
+        };
+    };
+    ParseValue = (value, isCloack = false) => {
+        const [date, time] = value.split("T");
+        const [hour, minute] = isCloack && time ? time.split(":") : ["hh", "mm"];
+        if (!isCloack)
+            return date || "";
+        if (!date)
+            return "";
+        return `${date}T${hour}:${minute}`;
+    };
+}
+export default new DATE();

package/dist/components/form/date-picker/Props.d.ts

@@ -0,0 +1,10 @@
+import { IBorderProps, IColorProps, IStatusProps, IValidationProps, IVariantProps } from "../../../libs/infrastructure/types/IGlobalProps";
+type Props = {
+    onChange: (value: string) => void;
+    config?: {
+        locale?: Intl.LocalesArgument;
+        isClock?: boolean;
+        isFooterButton?: boolean;
+    };
+} & IVariantProps & IColorProps & IStatusProps & IBorderProps & IValidationProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "onChange" | "color">;
+export default Props;

package/dist/components/form/date-picker/Props.js

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

package/dist/components/form/date-picker/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "../../../assets/css/components/form/date-picker/date-picker.css";
+import Props from "./Props";
+declare const DatePicker: React.FC<Props>;
+export default DatePicker;

package/dist/components/form/date-picker/index.js

@@ -0,0 +1,365 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import "../../../assets/css/components/form/date-picker/date-picker.css";
+import Input from "../input";
+import Button from "../button";
+import Alert from "../../feedback/alert";
+import ReactDOM from "react-dom";
+import DATE from "./DATE";
+const weekdays = ["Pzt", "Sal", "Çar", "Per", "Cum", "Cmt", "Paz"];
+const months = [
+    { value: 0, text: "Ocak" },
+    { value: 1, text: "Şubat" },
+    { value: 2, text: "Mart" },
+    { value: 3, text: "Nisan" },
+    { value: 4, text: "Mayıs" },
+    { value: 5, text: "Haziran" },
+    { value: 6, text: "Temmuz" },
+    { value: 7, text: "Ağustos" },
+    { value: 8, text: "Eylül" },
+    { value: 9, text: "Ekim" },
+    { value: 10, text: "Kasım" },
+    { value: 11, text: "Aralık" },
+];
+const DatePicker = ({ variant, color, onChange, config, validation, ...attributes }) => {
+    // refs
+    const _arCalendar = useRef(null);
+    const _arClock = useRef(null);
+    const _placeholder = useRef(null);
+    const _calendarHeader = useRef(null);
+    const _calendarFooter = useRef(null);
+    const _clockHeader = useRef(null);
+    const _clockFooter = useRef(null);
+    const _currentDate = useRef(new Date()).current;
+    const _beginDate = useRef(null);
+    // refs -> Geçerli Tarih ve Saat Bilgileri.
+    const _year = useRef(_currentDate.getFullYear());
+    const _month = useRef(_currentDate.getMonth());
+    const _day = useRef(_currentDate.getDate());
+    const _hours = useRef(_currentDate.getHours());
+    const _minutes = useRef(_currentDate.getMinutes());
+    // refs -> List Elements
+    const _hoursListElement = useRef(null);
+    const _hoursLiElements = useRef([]);
+    const _minutesListElement = useRef(null);
+    const _minutesLiElements = useRef([]);
+    // states
+    const [calendarIsOpen, setCalendarIsOpen] = useState(false);
+    const [calendarDays, setCalendarDays] = useState([]);
+    const [years, setYears] = useState([]);
+    const [hours, setHours] = useState();
+    const [minutes, setMinutes] = useState();
+    const [dateChanged, setDateChanged] = useState(false);
+    const [timeChanged, setTimeChanged] = useState(false);
+    // states => Seçilmiş Tarihler
+    const [selectedYear, setSelectedYear] = useState(_currentDate.getFullYear());
+    const [selectedMonth, setSelectedMonth] = useState(_currentDate.getMonth());
+    const [selectedDay, setSelectedDay] = useState(_currentDate.getDate());
+    const [selectedHours, setSelectedHours] = useState(_currentDate.getHours());
+    const [selectedMinutes, setSelectedMinutes] = useState(_currentDate.getMinutes());
+    // methods
+    const handleClickOutSide = (event) => {
+        const target = event.target;
+        if (target === _beginDate.current)
+            return;
+        if (_arCalendar.current && !_arCalendar.current.contains(target))
+            closeCalendar();
+    };
+    const handleKeys = (event) => {
+        const key = event.key;
+        if (key === "Escape") {
+            event.stopPropagation();
+            closeCalendar();
+        }
+    };
+    const handlePosition = () => {
+        if (_arCalendar.current && _beginDate.current) {
+            const arCalendarRect = _arCalendar.current.getBoundingClientRect();
+            const InpuRect = _beginDate.current?.getBoundingClientRect();
+            if (InpuRect) {
+                const screenCenterX = window.innerWidth / 2;
+                const screenCenterY = window.innerHeight / 2;
+                const sx = window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft;
+                const sy = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
+                const _isClock = InpuRect.left > screenCenterX ? -Math.abs(config?.isClock ? 7.5 * 16.75 : 0) : 0;
+                _arCalendar.current.style.visibility = "visible";
+                _arCalendar.current.style.opacity = "1";
+                _arCalendar.current.style.top = `${(InpuRect.top > screenCenterY ? InpuRect.top - arCalendarRect.height : InpuRect.top + InpuRect.height) + sy}px`;
+                _arCalendar.current.style.left = `${(InpuRect.left > screenCenterX ? InpuRect.right - arCalendarRect.width : InpuRect.left) + sx + _isClock}px`;
+            }
+        }
+    };
+    const handleHeight = () => {
+        if (_arCalendar.current && _arClock.current) {
+            const calendar = _arCalendar.current?.getBoundingClientRect()?.height;
+            _arClock.current.style.maxHeight = `${calendar}px`;
+        }
+        if (_calendarHeader.current && _clockHeader.current) {
+            const calendarHeaderH = _calendarHeader.current?.getBoundingClientRect()?.height;
+            _clockHeader.current.style.minHeight = `${calendarHeaderH}px`;
+        }
+        if (_calendarFooter && _clockFooter.current) {
+            const calendarFooterH = _calendarFooter.current?.getBoundingClientRect()?.height;
+            _clockFooter.current.style.minHeight = `${calendarFooterH}px`;
+        }
+    };
+    const handleOk = (isShutdownOn = true) => {
+        // Stateler güncelleniyor...
+        setSelectedYear(_year.current);
+        setSelectedMonth(_month.current);
+        setSelectedDay(_day.current);
+        setSelectedHours(_hours.current);
+        setSelectedMinutes(_minutes.current);
+        const inputDate = new Date(Date.UTC(_year.current, _month.current, _day.current, !config?.isClock ? 0 : _hours.current, !config?.isClock ? 0 : _minutes.current, 0));
+        onChange(inputDate.toISOString());
+        isShutdownOn && setCalendarIsOpen(false);
+    };
+    const setNowButton = () => {
+        const now = new Date();
+        // Stateler güncelleniyor...
+        setSelectedYear(now.getFullYear());
+        setSelectedMonth(now.getMonth());
+        setSelectedDay(now.getDate());
+        setSelectedHours(now.getHours());
+        setSelectedMinutes(now.getMinutes());
+        _year.current = now.getFullYear();
+        _month.current = now.getMonth();
+        _day.current = now.getDate();
+        _hours.current = now.getHours();
+        _minutes.current = now.getMinutes();
+        // Takvim kapatılıyor...
+        setCalendarIsOpen(false);
+        // Değer gönderiliyor...
+        const inputDate = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate(), !config?.isClock ? 0 : now.getHours(), !config?.isClock ? 0 : now.getMinutes(), 0));
+        onChange(inputDate.toISOString());
+    };
+    const okayButton = () => {
+        return (React.createElement(Button, { variant: "borderless", color: "green", onClick: () => handleOk() }, "Tamam"));
+    };
+    const closeCalendar = () => {
+        const { year, month, day, hours, minutes } = DATE.Parse(String(attributes.value), config?.isClock);
+        _year.current = attributes.value ? year : selectedYear;
+        _month.current = attributes.value ? month - 1 : selectedMonth;
+        _day.current = attributes.value ? day : selectedDay;
+        _hours.current = attributes.value ? hours : selectedHours;
+        _minutes.current = attributes.value ? minutes : selectedMinutes;
+        setCalendarIsOpen(false);
+    };
+    // useEffects
+    useEffect(() => {
+        if (calendarIsOpen) {
+            setTimeout(() => {
+                handleHeight();
+                handlePosition();
+            }, 0);
+            const days = [];
+            const firstDayOfMonth = new Date(_year.current, _month.current, 1);
+            const lastDayOfMonth = new Date(_year.current, _month.current + 1, 0);
+            const startingDay = firstDayOfMonth.getDay() === 0 ? 7 : firstDayOfMonth.getDay();
+            const endingDay = lastDayOfMonth.getDay() === 0 ? 7 : lastDayOfMonth.getDay();
+            for (let i = 1; i < startingDay; i++) {
+                days.push(React.createElement("span", { key: `prev-${i}`, className: "empty-day" }));
+            }
+            for (let i = firstDayOfMonth.getDate(); i <= lastDayOfMonth.getDate(); i++) {
+                const isSelected = !isNaN(firstDayOfMonth.getTime())
+                    ? firstDayOfMonth.getFullYear() === _year.current &&
+                        firstDayOfMonth.getMonth() === _month.current &&
+                        i === _day.current
+                    : _currentDate.getFullYear() === _year.current &&
+                        _currentDate.getMonth() === _month.current &&
+                        i === _day.current;
+                days.push(React.createElement("span", { key: `current-${i}`, className: isSelected ? "selection-day" : "", onClick: (event) => {
+                        event.preventDefault();
+                        _day.current = i;
+                        setSelectedDay(i);
+                        setDateChanged(!dateChanged);
+                        handleOk(false);
+                    } },
+                    React.createElement("span", null, i)));
+            }
+            for (let i = endingDay; i < 7; i++) {
+                days.push(React.createElement("span", { key: `next-${i}`, className: "empty-day" }));
+            }
+            setCalendarDays(days);
+            // window.addEventListener("blur", () => closeCalendar());
+            document.addEventListener("click", handleClickOutSide);
+            document.addEventListener("keydown", handleKeys);
+        }
+        return () => {
+            // window.removeEventListener("blur", () => closeCalendar());
+            document.removeEventListener("click", handleClickOutSide);
+            document.removeEventListener("keydown", handleKeys);
+        };
+    }, [dateChanged, calendarIsOpen]);
+    useEffect(() => {
+        const generateList = (count, current, setFunc) => {
+            const items = Array.from({ length: count }, (_, i) => (React.createElement("li", { ref: (element) => {
+                    if (!element)
+                        return;
+                    count === 24 ? (_hoursLiElements.current[i] = element) : (_minutesLiElements.current[i] = element);
+                }, key: i, ...(current === i ? { className: "selection-time" } : {}), onClick: () => {
+                    if (count === 24) {
+                        setTimeChanged((prev) => !prev);
+                        _hours.current = i;
+                        setSelectedHours(i);
+                    }
+                    else {
+                        setTimeChanged((prev) => !prev);
+                        _minutes.current = i;
+                        setSelectedMinutes(i);
+                    }
+                    handleOk(false);
+                } },
+                React.createElement("span", null,
+                    React.createElement("span", null, i.toString().padStart(2, "0"))))));
+            setFunc(items);
+        };
+        // Listeler oluşturuyor...
+        generateList(24, _hours.current, setHours);
+        generateList(60, _minutes.current, setMinutes);
+        if (!config?.isClock)
+            return;
+        if (calendarIsOpen)
+            handleHeight();
+        // Seçim sonrasında en yukarı getirme işlemi için aşağıda yer alan kodlar yazılmıştır
+        const hourLiElement = _hoursLiElements.current[_hours.current];
+        const minuteLiElement = _minutesLiElements.current[_minutes.current];
+        if (hourLiElement) {
+            _hoursListElement.current?.scrollTo({
+                top: hourLiElement.offsetTop - _hoursListElement.current.offsetTop - 8,
+                behavior: "smooth",
+            });
+        }
+        if (minuteLiElement) {
+            _minutesListElement.current?.scrollTo({
+                top: minuteLiElement.offsetTop - _minutesListElement.current.offsetTop - 8,
+                behavior: "smooth",
+            });
+        }
+    }, [timeChanged, calendarIsOpen, config?.isClock]);
+    useEffect(() => {
+        if (isNaN(_year.current))
+            return;
+        const years = [];
+        // Son 20 yıl
+        for (let i = _year.current - 20; i <= _year.current; i++) {
+            years.push({ value: i, text: `${i}` });
+        }
+        // Önümüzdeki 20 yıl
+        for (let i = _year.current + 1; i <= _year.current + 20; i++) {
+            years.push({ value: i, text: `${i}` });
+        }
+        setYears(years);
+    }, [selectedYear]);
+    return (React.createElement("div", { className: "ar-date-picker" },
+        attributes.placeholder && attributes.placeholder.length > 0 && (React.createElement("label", { ref: _placeholder },
+            validation ? "* " : "",
+            attributes.placeholder)),
+        React.createElement("div", { className: "wrapper", style: {
+                clipPath: `polygon(
+                            -15px 0,
+                            10px -5px,
+                            10px 5px,
+                            calc(${_placeholder.current?.getBoundingClientRect().width}px + 7px) 5px,
+                            calc(${_placeholder.current?.getBoundingClientRect().width}px + 7px) -5px,
+                            100% -70px,
+                            calc(100% + 5px) calc(100% + 5px),
+                            -5px calc(100% + 5px)
+                          )`,
+            } },
+            React.createElement(Input, { ref: _beginDate, variant: variant, color: color, ...attributes, value: DATE.ParseValue(String(attributes.value), config?.isClock), type: config?.isClock ? "datetime-local" : "date", onKeyDown: (event) => {
+                    if (event.code === "Space")
+                        event.preventDefault();
+                    else if (event.code === "Enter")
+                        handleOk();
+                }, onChange: (event) => {
+                    // Disabled gelmesi durumunda işlem yapmasına izin verme...
+                    if (attributes.disabled)
+                        return;
+                    (() => {
+                        if (!calendarIsOpen)
+                            setCalendarIsOpen(true);
+                        const value = event.target.value;
+                        const [date, time] = value.split("T");
+                        const [year, month, day] = date.split("-").map(Number);
+                        const hours = time ? time.split(".")[0].split(":").map(Number)[0] : 0;
+                        const minutes = time ? time.split(".")[0].split(":").map(Number)[1] : 0;
+                        _year.current = year;
+                        _month.current = month - 1;
+                        _day.current = day;
+                        if (hours || minutes) {
+                            _hours.current = hours;
+                            _minutes.current = minutes;
+                        }
+                        // Yıl ve Ay'ı anlık yeniler.
+                        setSelectedYear(_year.current);
+                        setSelectedMonth(_month.current);
+                        // Takvimi anlık yeniler.
+                        setDateChanged((prev) => !prev);
+                        setTimeChanged((prev) => !prev);
+                        onChange(value);
+                    })();
+                }, onClick: (event) => {
+                    event.preventDefault();
+                    setCalendarIsOpen(true);
+                }, autoComplete: "off", validation: validation })),
+        calendarIsOpen &&
+            ReactDOM.createPortal(React.createElement("div", { ref: _arCalendar, className: "ar-date-calendar" },
+                React.createElement("div", { ref: _calendarHeader, className: "header" },
+                    React.createElement("div", { className: "select-field" },
+                        React.createElement("div", { className: "prev" },
+                            React.createElement("span", { onClick: () => {
+                                    _year.current -= 1;
+                                    setSelectedYear(_year.current);
+                                    setDateChanged((prev) => !prev);
+                                } }),
+                            React.createElement("span", { onClick: () => {
+                                    if (_month.current <= 0) {
+                                        _year.current -= 1;
+                                        _month.current = 12;
+                                    }
+                                    _month.current -= 1;
+                                    setSelectedYear(_year.current);
+                                    setSelectedMonth(_month.current);
+                                    setDateChanged((prev) => !prev);
+                                } })),
+                        React.createElement("div", { className: "selects" },
+                            React.createElement("div", null,
+                                React.createElement("span", null, months.find((month) => month.value === selectedMonth)?.text)),
+                            React.createElement("div", null,
+                                React.createElement("span", null, years.find((year) => year.value === selectedYear)?.text))),
+                        React.createElement("div", { className: "next" },
+                            React.createElement("span", { onClick: () => {
+                                    if (_month.current >= 11) {
+                                        _year.current += 1;
+                                        _month.current = -1;
+                                    }
+                                    _month.current += 1;
+                                    setSelectedYear(_year.current);
+                                    setSelectedMonth(_month.current);
+                                    setDateChanged((prev) => !prev);
+                                } }),
+                            React.createElement("span", { onClick: () => {
+                                    _year.current += 1;
+                                    setSelectedYear(_year.current);
+                                    setDateChanged((prev) => !prev);
+                                } })))),
+                React.createElement("div", { className: "content" }, !isNaN(_month.current) && !isNaN(_year.current) ? (React.createElement("div", { className: "calendar" },
+                    React.createElement("div", { className: "weekdays" }, weekdays.map((weekday, index) => (React.createElement("span", { key: index }, weekday)))),
+                    React.createElement("div", { className: "days" }, calendarDays))) : (React.createElement(Alert, { status: "warning" }, "Ay veya y\u0131l se\u00E7imi yapman\u0131z gerekmektedir."))),
+                config?.isFooterButton && (React.createElement("div", { ref: _calendarFooter, className: "footer" },
+                    React.createElement("div", null,
+                        React.createElement(Button, { variant: "borderless", onClick: () => setNowButton() }, "\u015Eimdi")),
+                    React.createElement("div", null, !config?.isClock && okayButton()))),
+                config?.isClock && (React.createElement("div", { ref: _arClock, className: "clock" },
+                    React.createElement("div", { ref: _clockHeader, className: "header" },
+                        _hours.current.toString().padStart(2, "0"),
+                        " : ",
+                        _minutes.current.toString().padStart(2, "0")),
+                    React.createElement("div", { className: "content" },
+                        React.createElement("ul", { ref: _hoursListElement }, hours),
+                        React.createElement("ul", { ref: _minutesListElement }, minutes)),
+                    React.createElement("div", { ref: _clockFooter, className: "footer" }, okayButton())))), document.body)));
+};
+DatePicker.displayName = "DatePicker";
+export default DatePicker;

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

@@ -0,0 +1,12 @@
+import IButtonProps from "../button/IProps";
+import { Variants } from "../../../libs/infrastructure/types";
+import { IBorderProps, IColorProps, IIconProps, IUpperCaseProps, IValidationProps, IVariantProps } from "../../../libs/infrastructure/types/IGlobalProps";
+interface IProps extends IVariantProps, IColorProps, IBorderProps, IIconProps, IUpperCaseProps, IValidationProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "color"> {
+    button?: Omit<IButtonProps, "size" | "shape" | "position" | "fullWidth">;
+    addon?: {
+        variant?: Variants;
+        before?: string | number;
+        after?: string | number;
+    };
+}
+export default IProps;

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

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

package/dist/components/form/input/decimal/Decimal.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import IProps from "./IProps";
+declare const Decimal: React.FC<IProps>;
+export default Decimal;

package/dist/components/form/input/decimal/Decimal.js

@@ -0,0 +1,54 @@
+"use client";
+import React, { useRef, useState, useEffect, useMemo } from "react";
+import Input from "..";
+const Decimal = ({ variant, color, name, value, onChange, placeholder, validation, disabled, locale = "tr-TR", }) => {
+    const _input = useRef(null);
+    const [_value, setValue] = useState("");
+    // methods
+    const decimalSeparator = useMemo(() => {
+        const parts = new Intl.NumberFormat(locale).formatToParts(1.1);
+        return parts.find((p) => p.type === "decimal")?.value ?? ".";
+    }, [locale]);
+    const handleChange = (event) => {
+        let inputValue = event.target.value;
+        // Locale’a göre izin verilen karakterler. (rakam, decimal, -)
+        const regex = new RegExp(`[^0-9\\${decimalSeparator}-]`, "g");
+        inputValue = inputValue.replace(regex, "");
+        // Sadece başta negatif işarete izin ver.
+        if (inputValue.includes("-")) {
+            inputValue = (inputValue.startsWith("-") ? "-" : "") + inputValue.replace(/-/g, "");
+        }
+        // Tek decimal separator’a izin ver.
+        const parts = inputValue.split(decimalSeparator);
+        if (parts.length > 2) {
+            inputValue = parts[0] + decimalSeparator + parts.slice(1).join("");
+        }
+        setValue(inputValue);
+        // Parent’a normalize edilmiş "." decimal gönder.
+        const normalized = inputValue.replace(decimalSeparator, ".");
+        onChange?.({
+            ...event,
+            target: {
+                ...event.target,
+                name,
+                value: normalized,
+            },
+        });
+    };
+    // useEffects
+    useEffect(() => {
+        if (value === undefined || value === null || value === "") {
+            setValue("");
+            return;
+        }
+        const stringValue = String(value);
+        const localized = stringValue.replace(".", decimalSeparator);
+        setValue(localized);
+    }, [value, decimalSeparator]);
+    return (React.createElement(Input, { ref: _input, name: name, variant: variant, color: color, type: "text", inputMode: "decimal", value: _value, onChange: (e) => {
+            if (disabled)
+                return;
+            handleChange(e);
+        }, placeholder: placeholder, validation: validation, disabled: disabled }));
+};
+export default Decimal;