ar-design 0.1.59 → 0.1.60

package/dist/assets/css/components/feedback/loading/loading.css

@@ -0,0 +1,54 @@
+.ar-loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  inset: 0;
+  background-color: rgba(var(--black-rgb), 0.5);
+  animation: background 250ms linear 0s 1 normal both;
+  z-index: 1051;
+}
+.ar-loading::before {
+  content: "";
+  width: 1rem;
+  height: 1rem;
+  border-radius: var(--border-radius-pill);
+  transform: rotate(-135deg);
+  animation: spin 1s linear 0s infinite normal both;
+}
+
+@keyframes background {
+  0% {
+    opacity: 0;
+    visibility: hidden;
+  }
+  100% {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+@keyframes spin {
+  0% {
+    background-color: var(--white);
+  }
+  20% {
+    box-shadow: -1.25rem -1.25rem 0 0 rgba(var(--warning-rgb), 0.75), 1.25rem -1.25rem 0 0 rgba(var(--white-rgb), 0.75),
+      -1.25rem 1.25rem 0 0 rgba(var(--white-rgb), 0.75), 1.25rem 1.25rem 0 0 rgba(var(--white-rgb), 0.75);
+  }
+  40% {
+    box-shadow: -1.25rem 1.25rem 0 0 rgba(var(--warning-rgb), 0.75), 1.25rem -1.25rem 0 0 rgba(var(--white-rgb), 0.75),
+      -1.25rem 1.25rem 0 0 rgba(var(--warning-rgb), 0.75), 1.25rem 1.25rem 0 0 rgba(var(--white-rgb), 0.75);
+  }
+  60% {
+    box-shadow: -1.25rem 1.25rem 0 0 rgba(var(--warning-rgb), 0.75), 1.25rem -1.25rem 0 0 rgba(var(--white-rgb), 0.75),
+      1.25rem 1.25rem 0 0 rgba(var(--warning-rgb), 0.75), 1.25rem 1.25rem 0 0 rgba(var(--warning-rgb), 0.75);
+  }
+  80% {
+    box-shadow: -1.25rem 1.25rem 0 0 rgba(var(--warning-rgb), 0.75), 1.25rem -1.25rem 0 0 rgba(var(--warning-rgb), 0.75),
+      1.25rem 1.25rem 0 0 rgba(var(--warning-rgb), 0.75), 1.25rem -1.25rem 0 0 rgba(var(--warning-rgb), 0.75);
+  }
+  100% {
+    background-color: var(--warning);
+  }
+}

package/dist/assets/css/components/feedback/progress/animations.css

@@ -0,0 +1,10 @@
+@keyframes progress {
+  0% {
+    background-color: rgba(var(--white-rgb), 0.75);
+    width: 0%;
+  }
+  100% {
+    background-color: transparent;
+    width: 100%;
+  }
+}

package/dist/assets/css/components/feedback/progress/progress.css

@@ -0,0 +1,49 @@
+.ar-progress {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 0.75rem;
+}
+.ar-progress > .ar-progress-bar {
+  position: absolute;
+  inset: 0;
+  opacity: 0.1;
+}
+.ar-progress > .ar-progress-value {
+  position: absolute;
+  inset: 0;
+}
+.ar-progress > .ar-progress-value::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--border-radius-pill);
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: progress cubic-bezier(0.23, 1, 0.32, 1) 2.5s 0s infinite normal both;
+}
+.ar-progress > .ar-progress-value > span {
+  position: absolute;
+  top: -20px;
+  right: 0;
+  background-color: var(--black);
+  width: auto;
+  height: 1rem;
+  padding: 0 0.25rem;
+  border-radius: var(--border-radius-pill);
+  color: var(--white);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  -webkit-text-stroke: 0.75px var(--white);
+  z-index: 1;
+}
+.ar-progress > .ar-progress-value > span::before {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: solid 2.5px transparent;
+  border-top-color: var(--black);
+}
+
+@import url("./animations.css");

package/dist/assets/css/components/form/date-picker/calendar/header.css

@@ -2,32 +2,103 @@
   display: flex;
   align-items: center;
   min-height: 3.75rem;
+  padding: 0 1rem;
   border-bottom: solid 1px var(--gray-200);
 }
 .ar-date-calendar > .header > .select-field {
+  position: relative;
   display: flex;
   flex-direction: row;
-  justify-content: stretch;
+  justify-content: space-between;
+  align-items: center;
   gap: 0 0.75rem;
+  width: 100%;
   padding: 0 0.5rem;
 }
+
 .ar-date-calendar > .header > .select-field > .selects {
   display: flex;
   flex-direction: row;
   justify-content: stretch;
+  align-items: center;
+  gap: 0 1rem;
   height: var(--input-height);
 }
+.ar-date-calendar > .header > .select-field > .selects > div > span {
+  color: var(--black);
+  user-select: none;
+}
 
 /* #region Prev and Next Buttons */
 .ar-date-calendar > .header > .select-field > .prev,
 .ar-date-calendar > .header > .select-field > .next {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0 0.5rem;
-  color: var(--gray-600);
-  cursor: pointer;
   user-select: none;
 }
+.ar-date-calendar > .header > .select-field > .prev > span,
+.ar-date-calendar > .header > .select-field > .next > span {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 0;
+  width: 1rem;
+  height: 1rem;
+  cursor: pointer;
+}
+.ar-date-calendar > .header > .select-field > .next > span {
+  left: auto;
+  right: 0;
+}
+.ar-date-calendar > .header > .select-field > .prev > span:last-child {
+  left: 1.5rem;
+}
+.ar-date-calendar > .header > .select-field > .next > span:first-child {
+  right: 1.5rem;
+}
+.ar-date-calendar > .header > .select-field > .prev > span:first-child::before,
+.ar-date-calendar > .header > .select-field > .prev > span:first-child::after {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  border-top: solid 2px var(--gray-600);
+  border-left: solid 2px var(--gray-600);
+  transform: rotate(-45deg);
+}
+.ar-date-calendar > .header > .select-field > .next > span:last-child::before,
+.ar-date-calendar > .header > .select-field > .next > span:last-child::after {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  border-top: solid 2px var(--gray-600);
+  border-left: solid 2px var(--gray-600);
+  transform: rotate(135deg);
+}
+.ar-date-calendar > .header > .select-field > .prev > span:first-child::after {
+  left: 0.35rem;
+  opacity: 0.25;
+}
+.ar-date-calendar > .header > .select-field > .next > span:last-child::after {
+  left: 0.35rem;
+  opacity: 0.25;
+}
+.ar-date-calendar > .header > .select-field > .prev > span:last-child::before {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  border-top: solid 2px var(--gray-600);
+  border-left: solid 2px var(--gray-600);
+  transform: rotate(-45deg);
+}
+.ar-date-calendar > .header > .select-field > .next > span:first-child::before {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  border-top: solid 2px var(--gray-600);
+  border-left: solid 2px var(--gray-600);
+  transform: rotate(135deg);
+}
 /* #endregion Prev and Next Buttons */
 /* Prev and Next Buttons */

package/dist/components/data-display/dnd/index.js

@@ -71,7 +71,7 @@ const DnD = function ({ data, renderItem, onChange }) {
         });
         _arDnD.current.ondragover = (event) => event.preventDefault();
     }, [data]);
-    return (React.createElement("div", { ref: _arDnD, className: "ar-dnd" }, data.map((item, index) => (React.createElement("div", { draggable: true },
+    return (React.createElement("div", { ref: _arDnD, className: "ar-dnd" }, data.map((item, index) => (React.createElement("div", { key: index, draggable: true },
         React.createElement("div", { className: "move" },
             React.createElement("span", null),
             React.createElement("span", null),

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

@@ -47,11 +47,6 @@ const Confirm = ({ children, title, message, content, onConfirm }) => {
             document.addEventListener("click", handleClickOutSide);
             document.addEventListener("keydown", handleKeys);
         }
-        else {
-            window.removeEventListener("blur", () => setOpen(false));
-            document.removeEventListener("click", handleClickOutSide);
-            document.removeEventListener("keydown", handleKeys);
-        }
         return () => {
             window.removeEventListener("blur", () => setOpen(false));
             document.removeEventListener("click", handleClickOutSide);

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

@@ -0,0 +1,4 @@
+import React from "react";
+import "../../../assets/css/components/feedback/loading/loading.css";
+declare const Loading: () => React.JSX.Element;
+export default Loading;

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

@@ -0,0 +1,7 @@
+"use client";
+import React from "react";
+import "../../../assets/css/components/feedback/loading/loading.css";
+const Loading = () => {
+    return React.createElement("div", { className: "ar-loading" });
+};
+export default Loading;

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

@@ -29,11 +29,6 @@ const Modal = ({ children, open, title, size = "normal", footer }) => {
             // document.addEventListener("click", handleClickOutSide);
             document.addEventListener("keydown", handleKeys);
         }
-        else {
-            document.body.style.removeProperty("overflow");
-            // document.removeEventListener("click", handleClickOutSide);
-            document.removeEventListener("keydown", handleKeys);
-        }
         return () => {
             document.body.style.removeProperty("overflow");
             // document.removeEventListener("click", handleClickOutSide);

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

@@ -0,0 +1,5 @@
+interface IProps {
+    value: number;
+    reverse?: 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 }) => {
+    // variable/s
+    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, { 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}%`,
+            } },
+            React.createElement("span", null,
+                "%",
+                value))));
+};
+export default Progress;

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

@@ -29,14 +29,7 @@ const ButtonAction = ({ buttons }) => {
             document.addEventListener("keydown", handleKeys);
             window.addEventListener("resize", handleResizeEvent);
         }
-        else {
-            // Dinleyicileri kaldır.
-            document.removeEventListener("click", handleClickOutSide);
-            document.removeEventListener("keydown", handleKeys);
-            window.removeEventListener("resize", handleResizeEvent);
-        }
         return () => {
-            // Dinleyicileri kaldır.
             document.removeEventListener("click", handleClickOutSide);
             document.removeEventListener("keydown", handleKeys);
             window.removeEventListener("resize", handleResizeEvent);

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,23 @@
+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.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 [clock, _] = isCloack && time ? time.split(".") : "00:00";
+        return !isCloack ? date : `${date}T${clock}`;
+    };
+}
+export default new DATE();

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

@@ -2,10 +2,10 @@
 import React, { useEffect, useRef, useState } from "react";
 import "../../../assets/css/components/form/date-picker/date-picker.css";
 import Input from "../input";
-import Select from "../select";
 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" },
@@ -26,8 +26,7 @@ const DatePicker = ({ onChange, isClock, ...attributes }) => {
     const _arCalendar = useRef(null);
     const _currentDate = useRef(new Date()).current;
     const _beginDate = useRef(null);
-    const _clockOpen = useRef(false);
-    // refs
+    // refs -> Geçerli Tarih ve Saat Bilgileri.
     const _year = useRef(_currentDate.getFullYear());
     const _month = useRef(_currentDate.getMonth());
     const _day = useRef(_currentDate.getDate());
@@ -39,205 +38,141 @@ const DatePicker = ({ onChange, isClock, ...attributes }) => {
     const _minutesListElement = useRef(null);
     const _minutesLiElements = useRef([]);
     // states
-    const [calendarOpen, setCalendarOpen] = useState(false);
-    const [calendar, setCalendar] = useState([]);
+    const [calendarIsOpen, setCalendarIsOpen] = useState(false);
+    const [calendarDays, setCalendarDays] = useState([]);
     const [years, setYears] = useState([]);
     const [hours, setHours] = useState();
     const [minutes, setMinutes] = useState();
-    const [dateTrigger, setDateTrigger] = useState(false);
-    const [timeTrigger, setTimeTrigger] = useState(false);
-    // states => Selected Date
-    const [currentYear, setCurrentYear] = useState(_currentDate.getFullYear());
-    const [currentMonth, setCurrentMonth] = useState(_currentDate.getMonth());
-    const [currentDay, setCurrentDay] = useState(_currentDate.getDate());
-    const [currentHours, setCurrentHours] = useState(_currentDate.getHours());
-    const [currentMinutes, setCurrentMinutes] = useState(_currentDate.getMinutes());
+    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 (_arCalendar.current && !_arCalendar.current.contains(target))
-            cancelProgress();
+            closeCalendar();
     };
     const handleKeys = (event) => {
         const key = event.key;
         if (key === "Escape")
-            cancelProgress();
+            closeCalendar();
     };
     const handlePosition = () => {
         if (_arCalendar.current && _beginDate.current) {
             const arCalendarRect = _arCalendar.current.getBoundingClientRect();
             const InpuRect = _beginDate.current?.getBoundingClientRect();
             if (InpuRect) {
-                const screenCenter = window.innerHeight / 2;
+                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;
-                _arCalendar.current.style.top = `${(InpuRect.top > screenCenter ? InpuRect.top - arCalendarRect.height : InpuRect.top + InpuRect.height) + sy}px`;
-                _arCalendar.current.style.left = `${InpuRect.left + sx}px`;
+                _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}px`;
             }
         }
     };
-    const handleParse = (data) => {
-        const [date, time] = data.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;
-        return {
-            date: date,
-            time: time,
-            year: year,
-            month: month,
-            day: day,
-            hours: hours,
-            minutes: minutes,
-        };
-    };
-    const setNow = () => {
+    // Şimdi Butonu
+    const setNowButton = () => {
         const now = new Date();
         // Stateler güncelleniyor...
-        setCurrentYear(now.getFullYear());
-        setCurrentMonth(now.getMonth());
-        setCurrentDay(now.getDate());
-        setCurrentHours(now.getHours());
-        setCurrentMinutes(now.getMinutes());
+        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();
-        // Input güncelleniyor...
-        updateDateInput(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(), now.getMinutes());
         // Takvim kapatılıyor...
-        setCalendarOpen(false);
+        setCalendarIsOpen(false);
         // Değer gönderiliyor...
         const inputDate = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate(), !isClock ? 0 : now.getHours(), !isClock ? 0 : now.getMinutes(), 0));
         onChange(inputDate.toISOString());
     };
-    const updateDateInput = (year = _year.current, month = _month.current, day = _day.current, hours = _hours.current, minutes = _minutes.current) => {
-        if (_beginDate.current) {
-            const inputDate = new Date(Date.UTC(year, month, day, hours, minutes, 0));
-            if (isNaN(inputDate.getTime()))
-                return;
-            const [date, time] = inputDate.toISOString().split("T");
-            const [clock, _] = time.split(".");
-            _beginDate.current.value = !_clockOpen.current ? date : `${date}T${clock}`;
-        }
-    };
+    // Tamam Butonu
     const okayButton = () => {
         return (React.createElement(Button, { variant: "borderless", status: "success", onClick: () => {
-                // Input güncelleniyor...
-                updateDateInput(_year.current, _month.current, _day.current, _hours.current, _minutes.current);
                 // Stateler güncelleniyor...
-                setCurrentYear(_year.current);
-                setCurrentMonth(_month.current);
-                setCurrentDay(_day.current);
-                setCurrentHours(_hours.current);
-                setCurrentMinutes(_minutes.current);
+                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, !isClock ? 0 : _hours.current, !isClock ? 0 : _minutes.current, 0));
                 onChange(inputDate.toISOString());
-                setCalendarOpen(false);
+                setCalendarIsOpen(false);
             } }, "Tamam"));
     };
-    const cancelProgress = () => {
-        const dateParse = handleParse(String(attributes.value));
-        _year.current = attributes.value ? dateParse.year : currentYear;
-        _month.current = attributes.value ? dateParse.month - 1 : currentMonth;
-        _day.current = attributes.value ? dateParse.day : currentDay;
-        _hours.current = attributes.value ? dateParse.hours : currentHours;
-        _minutes.current = attributes.value ? dateParse.minutes : currentMinutes;
-        setCalendarOpen(false);
+    const closeCalendar = () => {
+        const { year, month, day, hours, minutes } = DATE.Parse(String(attributes.value), 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 (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);
-    }, []);
-    useEffect(() => {
-        if (attributes.value && _beginDate.current) {
-            const dateParse = handleParse(String(attributes.value));
-            _year.current = dateParse.year;
-            _month.current = dateParse.month - 1;
-            _day.current = dateParse.day;
-            if (hours || minutes) {
-                _hours.current = dateParse.hours;
-                _minutes.current = dateParse.minutes;
-            }
-            updateDateInput(dateParse.year, dateParse.month - 1, dateParse.day, dateParse.hours, dateParse.minutes);
-        }
-    }, [attributes.value]);
-    useEffect(() => {
-        if (calendarOpen) {
-            const calendar = [];
-            const beginDateValue = _beginDate.current?.value || "";
-            const date = {
-                input: {
-                    begin: new Date(beginDateValue),
-                },
-                current: {
-                    firstDay: new Date(_year.current, _month.current, 1), // Geçerli ayın ilk günü
-                    lastDay: new Date(_year.current, _month.current + 1, 0), // Geçerli ayın son günü
-                },
-            };
-            const startingDay = date.current.firstDay.getDay() === 0 ? 7 : date.current.firstDay.getDay();
-            const endDay = date.current.lastDay.getDay() === 0 ? 7 : date.current.lastDay.getDay();
+        if (calendarIsOpen) {
+            handlePosition();
+            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++) {
-                calendar.push(React.createElement("span", { key: `prev-${i}`, className: "empty-day" }));
+                days.push(React.createElement("span", { key: `prev-${i}`, className: "empty-day" }));
             }
-            for (let i = date.current.firstDay.getDate(); i <= date.current.lastDay.getDate(); i++) {
-                const isSelected = !isNaN(date.input.begin.getTime())
-                    ? date.input.begin.getFullYear() == _year.current &&
-                        date.input.begin.getMonth() == _month.current &&
-                        i == _day.current
-                    : _currentDate.getFullYear() == _year.current &&
-                        _currentDate.getMonth() == _month.current &&
-                        i == _day.current;
-                calendar.push(React.createElement("span", { key: `current-${i}`, ...(isSelected ? { className: "selection-day" } : {}), onClick: () => {
+            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;
-                        setDateTrigger((prev) => !prev);
+                        setSelectedDay(i);
+                        setDateChanged(!dateChanged);
                     } },
                     React.createElement("span", null, i)));
             }
-            for (let i = endDay; i < 7; i++) {
-                calendar.push(React.createElement("span", { key: `next-${i}`, className: "empty-day" }));
+            for (let i = endingDay; i < 7; i++) {
+                days.push(React.createElement("span", { key: `next-${i}`, className: "empty-day" }));
             }
-            // Takvim nesneleri ekleniyor.
-            setCalendar(calendar);
-            // Konumu Ayarlanıyor.
-            setTimeout(handlePosition, 0);
-            window.addEventListener("blur", () => setCalendarOpen(false));
+            setCalendarDays(days);
+            window.addEventListener("blur", () => closeCalendar());
             document.addEventListener("click", handleClickOutSide);
             document.addEventListener("keydown", handleKeys);
         }
-        else {
-            window.removeEventListener("blur", () => setCalendarOpen(false));
-            document.removeEventListener("click", handleClickOutSide);
-            document.removeEventListener("keydown", handleKeys);
-        }
         return () => {
-            window.removeEventListener("blur", () => setCalendarOpen(false));
+            window.removeEventListener("blur", () => closeCalendar());
             document.removeEventListener("click", handleClickOutSide);
             document.removeEventListener("keydown", handleKeys);
         };
-    }, [dateTrigger, calendarOpen]);
+    }, [dateChanged, calendarIsOpen]);
     useEffect(() => {
         const generateList = (count, current, setFunc) => {
             const items = Array.from({ length: count }, (_, i) => (React.createElement("li", { ref: (element) => count === 24 ? (_hoursLiElements.current[i] = element) : (_minutesLiElements.current[i] = element), key: i, ...(current === i ? { className: "selection-time" } : {}), onClick: () => {
                     if (count === 24) {
-                        setTimeTrigger((prev) => !prev);
+                        setTimeChanged((prev) => !prev);
                         _hours.current = i;
+                        setSelectedHours(i);
                     }
                     else {
-                        setTimeTrigger((prev) => !prev);
+                        setTimeChanged((prev) => !prev);
                         _minutes.current = i;
+                        setSelectedMinutes(i);
                     }
                 } },
                 React.createElement("span", null,
@@ -264,10 +199,24 @@ const DatePicker = ({ onChange, isClock, ...attributes }) => {
                 behavior: "smooth",
             });
         }
-    }, [timeTrigger, calendarOpen, isClock]);
+    }, [timeChanged, calendarIsOpen, 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);
+    }, []);
     return (React.createElement("div", { className: "ar-date-picker" },
         attributes.placeholder && attributes.placeholder.length > 0 && React.createElement("label", null, attributes.placeholder),
-        React.createElement(Input, { ref: _beginDate, type: isClock ? "datetime-local" : "date", onKeyDown: (event) => event.code == "Space" && event.preventDefault(), onChange: (event) => {
+        React.createElement(Input, { ref: _beginDate, value: DATE.ParseValue(String(attributes.value), isClock), type: isClock ? "datetime-local" : "date", onKeyDown: (event) => event.code == "Space" && event.preventDefault(), onChange: (event) => {
                 // Disabled gelmesi durumunda işlem yapmasına izin verme...
                 if (attributes.disabled)
                     return;
@@ -284,42 +233,38 @@ const DatePicker = ({ onChange, isClock, ...attributes }) => {
                         _hours.current = hours;
                         _minutes.current = minutes;
                     }
-                    setDateTrigger((prev) => !prev);
-                    setTimeTrigger((prev) => !prev);
+                    setDateChanged((prev) => !prev);
+                    setTimeChanged((prev) => !prev);
                 })();
             }, onClick: (event) => {
                 event.preventDefault();
-                setCalendarOpen((prev) => !prev);
+                setCalendarIsOpen(true);
             }, autoComplete: "off" }),
-        calendarOpen &&
+        calendarIsOpen &&
             ReactDOM.createPortal(React.createElement("div", { ref: _arCalendar, className: "ar-date-calendar" },
                 React.createElement("div", { className: "header" },
                     React.createElement("div", { className: "select-field" },
                         React.createElement("div", { className: "prev" },
                             React.createElement("span", { onClick: () => {
                                     _year.current -= 1;
-                                    setDateTrigger((prev) => !prev);
-                                } }, "«"),
+                                    setSelectedYear(_year.current);
+                                    setDateChanged((prev) => !prev);
+                                } }),
                             React.createElement("span", { onClick: () => {
                                     if (_month.current <= 0) {
                                         _year.current -= 1;
                                         _month.current = 12;
                                     }
                                     _month.current -= 1;
-                                    updateDateInput(_year.current, _month.current, _day.current);
-                                    setDateTrigger((prev) => !prev);
-                                } }, "‹")),
+                                    setSelectedYear(_year.current);
+                                    setSelectedMonth(_month.current);
+                                    setDateChanged((prev) => !prev);
+                                } })),
                         React.createElement("div", { className: "selects" },
-                            React.createElement(Select, { variant: "borderless", value: months.find((month) => month.value === _month.current), options: months, onChange: (option) => {
-                                    _month.current = option?.value;
-                                    updateDateInput(_year.current, _month.current, _day.current);
-                                    setDateTrigger((prev) => !prev);
-                                }, placeholder: "Ay" }),
-                            React.createElement(Select, { variant: "borderless", value: years.find((years) => years.value === _year.current), options: years, onChange: (option) => {
-                                    _year.current = option?.value;
-                                    updateDateInput(_year.current, _month.current, _day.current);
-                                    setDateTrigger((prev) => !prev);
-                                }, placeholder: "Y\u0131l" })),
+                            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) {
@@ -327,20 +272,21 @@ const DatePicker = ({ onChange, isClock, ...attributes }) => {
                                         _month.current = -1;
                                     }
                                     _month.current += 1;
-                                    updateDateInput(_year.current, _month.current, _day.current);
-                                    setDateTrigger((prev) => !prev);
-                                } }, "›"),
+                                    setSelectedYear(_year.current);
+                                    setSelectedMonth(_month.current);
+                                    setDateChanged((prev) => !prev);
+                                } }),
                             React.createElement("span", { onClick: () => {
                                     _year.current += 1;
-                                    updateDateInput(_year.current, _month.current, _day.current);
-                                    setDateTrigger((prev) => !prev);
-                                } }, "»")))),
+                                    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" }, calendar))) : (React.createElement(Alert, { status: "warning" }, "Ay veya y\u0131l se\u00E7imi yapman\u0131z gerekmektedir."))),
+                    React.createElement("div", { className: "days" }, calendarDays))) : (React.createElement(Alert, { status: "warning" }, "Ay veya y\u0131l se\u00E7imi yapman\u0131z gerekmektedir."))),
                 React.createElement("div", { className: "footer" },
                     React.createElement("div", null,
-                        React.createElement(Button, { variant: "borderless", onClick: () => setNow() }, "\u015Eimdi")),
+                        React.createElement(Button, { variant: "borderless", onClick: () => setNowButton() }, "\u015Eimdi")),
                     React.createElement("div", null, !isClock && okayButton())),
                 React.createElement("div", { className: `clock ${isClock ? "active" : "passive"}` },
                     React.createElement("div", { className: "header" },

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

@@ -5,8 +5,8 @@ import Button from "../button";
 import Utils from "../../../libs/infrastructure/shared/Utils";
 const Input = forwardRef(({ variant = "outlined", status = "light", size = "normal", icon, border = { radius: "sm" }, button, addon, validation, ...attributes }, ref) => {
     // states
-    const [value, setValue] = useState(undefined);
-    // variables
+    const [value, setValue] = useState("");
+    // variable/s
     const _wrapperClassName = ["ar-input-wrapper"];
     const _addonBeforeClassName = ["addon-before"];
     const _addonAfterClassName = ["addon-after"];
@@ -23,13 +23,16 @@ const Input = forwardRef(({ variant = "outlined", status = "light", size = "norm
         _addonAfterClassName.push(`border-radius-${border.radius}`);
     }
     // useEffects
-    useEffect(() => setValue(attributes.value), [attributes.value]);
+    useEffect(() => {
+        if (attributes.value !== undefined)
+            setValue(value);
+    }, [attributes.value]);
     return (React.createElement("div", { className: _wrapperClassName.map((c) => c).join(" ") },
         addon?.before && React.createElement("span", { className: _addonBeforeClassName.map((c) => c).join(" ") }, addon?.before),
         React.createElement("div", { className: "ar-input" },
             icon?.element && React.createElement("span", { className: "icon-element" }, icon.element),
             attributes.placeholder && React.createElement("label", { className: value ? "visible" : "hidden" }, attributes.placeholder),
-            React.createElement("input", { ref: ref, ...attributes, size: 20, className: _inputClassName.map((c) => c).join(" "), onChange: (event) => {
+            React.createElement("input", { ref: ref, ...attributes, value: attributes.value !== undefined ? attributes.value : value, size: 20, className: _inputClassName.map((c) => c).join(" "), onChange: (event) => {
                     // Disabled gelmesi durumunda işlem yapmasına izin verme...
                     if (attributes.disabled)
                         return;

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

@@ -28,9 +28,8 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
     // methods
     const handleClickOutSide = (event) => {
         const target = event.target;
-        if (_arSelect.current && !_arSelect.current.contains(target)) {
+        if (_arSelect.current && !_arSelect.current.contains(target))
             setOptionsOpen(false);
-        }
     };
     const handleKeys = (event) => {
         const key = event.key;
@@ -62,10 +61,8 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
                 return;
             optionItems[_navigationIndex.current]?.click();
         }
-        else if (key === "Escape") {
+        else if (key === "Escape")
             setOptionsOpen(false);
-            setSingleInputText("");
-        }
     };
     const handlePosition = () => {
         if (_options.current) {
@@ -99,12 +96,12 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
     const handleCleanSelection = () => {
         if (multiple) {
             if (_searchField.current)
-                _searchField.current.value = "";
+                setSearchText("");
             onChange([]);
         }
         else {
             if (_singleInput.current) {
-                _singleInput.current.value = "";
+                setSingleInputText("");
                 _singleInput.current.placeholder = placeholder ?? "";
             }
             onChange(undefined);
@@ -112,19 +109,10 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
     };
     // useEffects
     useEffect(() => {
-        if (multiple) {
+        if (multiple)
             setSearchText("");
-            if (_searchField.current)
-                _searchField.current.value = "";
-        }
-        else {
-            if (!_singleInput.current)
-                return;
-            if (value)
-                _singleInput.current.value = value.text;
-            else
-                _singleInput.current.value = "";
-        }
+        else
+            setSingleInputText(value?.text ?? "");
     }, [value]);
     useEffect(() => setFilteredOptions(options), [options]);
     useEffect(() => {
@@ -141,7 +129,7 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
                 //   });
                 // }
                 if (_singleInput.current) {
-                    _singleInput.current.value = "";
+                    setSingleInputText("");
                     _singleInput.current.placeholder = value?.text || placeholder || "";
                 }
             }
@@ -156,11 +144,6 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
             document.addEventListener("keydown", handleKeys);
         }
         else {
-            // Dinleyicileri kaldır ve zamanlayıcıyı temizle.
-            clearTimeout(_otoFocus);
-            window.removeEventListener("blur", () => setOptionsOpen(false));
-            document.removeEventListener("click", handleClickOutSide);
-            document.removeEventListener("keydown", handleKeys);
             // Options paneli kapanma süresi 250ms.
             // 300ms sonra temizlenmesinin sebebi kapanırken birder veriler gerliyor ve panel yüksekliği artıyor.
             setTimeout(() => setSearchText(""), 300);
@@ -170,7 +153,7 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
             }
             else {
                 if (_singleInput.current) {
-                    _singleInput.current.value = value?.text ?? "";
+                    setSingleInputText(value?.text ?? "");
                     _singleInput.current.placeholder = placeholder ?? "";
                 }
             }
@@ -216,10 +199,7 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
     return (React.createElement("div", { ref: _arSelect, className: "ar-select-wrapper" },
         React.createElement("div", { ref: _multipleInput, className: "ar-select" },
             multiple ? (React.createElement("div", { className: _selectionClassName.map((c) => c).join(" "), onClick: () => setOptionsOpen((x) => !x) },
-                React.createElement("div", { className: "items" }, value.length > 0 ? (value.map((_value, index) => (React.createElement(Chip, { key: index, variant: status?.selected?.variant || "filled", status: status?.selected?.color || status?.color, text: _value.text })))) : (React.createElement("span", { className: "placeholder" }, placeholder))))) : (React.createElement(Input, { ref: _singleInput, variant: variant, status: !Utils.IsNullOrEmpty(validation?.text) ? "danger" : status, border: { radius: border.radius }, value: value?.text, onClick: () => {
-                    setOptionsOpen((prev) => !prev);
-                    setSingleInputText("");
-                }, onChange: (event) => {
+                React.createElement("div", { className: "items" }, value.length > 0 ? (value.map((_value, index) => (React.createElement(Chip, { key: index, variant: status?.selected?.variant || "filled", status: status?.selected?.color || status?.color, text: _value.text })))) : (React.createElement("span", { className: "placeholder" }, placeholder))))) : (React.createElement(Input, { ref: _singleInput, variant: variant, status: !Utils.IsNullOrEmpty(validation?.text) ? "danger" : status, border: { radius: border.radius }, value: singleInputText, onClick: () => setOptionsOpen((prev) => !prev), onChange: (event) => {
                     !optionsOpen && setOptionsOpen(true);
                     setSingleInputText(event.target.value);
                 }, onKeyUp: (event) => {
@@ -241,7 +221,7 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
         optionsOpen &&
             ReactDOM.createPortal(React.createElement("div", { ref: _options, className: "ar-select-options" },
                 multiple && (React.createElement("div", { className: "search-field" },
-                    React.createElement(Input, { ref: _searchField, variant: "outlined", status: "light", placeholder: "Search...", onKeyUp: (event) => setSearchText(event.currentTarget.value) }))),
+                    React.createElement(Input, { ref: _searchField, variant: "outlined", status: "light", placeholder: "Search...", value: searchText, onChange: (event) => setSearchText(event.currentTarget.value) }))),
                 filteredOptions.length > 0 ? (React.createElement("ul", null, filteredOptions.map((option, index) => {
                     const isItem = multiple && value.some((_value) => _value.value === option.value);
                     return (React.createElement("li", { key: index, ref: (element) => (_optionItems.current[index] = element), className: option === value ? "selectedItem" : "", onClick: () => handleItemSelected(option) },

package/dist/index.d.ts

@@ -20,8 +20,9 @@ import Typography from "./components/data-display/typography";
 import Alert from "./components/feedback/alert";
 import Confirm from "./components/feedback/confirm";
 import Modal from "./components/feedback/modal";
+import Progress from "./components/feedback/progress";
 import Menu from "./components/navigation/menu";
 import Steps from "./components/navigation/steps";
 import Grid from "./components/layout/grid-system";
 import Layout from "./components/layout";
-export { Button, ButtonAction, ButtonGroup, Input, DatePicker, Select, Switch, Checkbox, Radio, Card, Chip, Divider, DnD, Paper, SyntaxHighlighter, Table, Tabs, Typography, Alert, Confirm, Modal, Menu, Steps, Grid, Layout, };
+export { Button, ButtonAction, ButtonGroup, Input, DatePicker, Select, Switch, Checkbox, Radio, Card, Chip, Divider, DnD, Paper, SyntaxHighlighter, Table, Tabs, Typography, Alert, Confirm, Modal, Progress, Menu, Steps, Grid, Layout, };

package/dist/index.js

@@ -23,6 +23,7 @@ import Typography from "./components/data-display/typography";
 import Alert from "./components/feedback/alert";
 import Confirm from "./components/feedback/confirm";
 import Modal from "./components/feedback/modal";
+import Progress from "./components/feedback/progress";
 // Navigation
 import Menu from "./components/navigation/menu";
 import Steps from "./components/navigation/steps";
@@ -35,7 +36,7 @@ Button, ButtonAction, ButtonGroup, Input, DatePicker, Select, Switch, Checkbox,
 // Data Display
 Card, Chip, Divider, DnD, Paper, SyntaxHighlighter, Table, Tabs, Typography, 
 // Feedback
-Alert, Confirm, Modal, 
+Alert, Confirm, Modal, Progress, 
 // Navigation
 Menu, Steps, 
 // Layout

package/dist/libs/core/application/contexts/Loading.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+type LoadingContextProps = {
+    isLoading: boolean;
+    setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
+};
+type LoadingProviderProps = {
+    children: React.ReactNode;
+};
+declare const LoadingContext: React.Context<LoadingContextProps>;
+declare const LoadingProvider: ({ children }: LoadingProviderProps) => React.JSX.Element;
+export { LoadingContext, LoadingProvider };

package/dist/libs/core/application/contexts/Loading.js

@@ -0,0 +1,13 @@
+"use client";
+import React, { createContext, useState } from "react";
+import ReactDOM from "react-dom";
+import Loading from "../../../../components/feedback/loading";
+const LoadingContext = createContext({ isLoading: false, setIsLoading: () => { } });
+const LoadingProvider = ({ children }) => {
+    // states
+    const [isLoading, setIsLoading] = useState(false);
+    return (React.createElement(LoadingContext.Provider, { value: { isLoading, setIsLoading } },
+        children,
+        isLoading && ReactDOM.createPortal(React.createElement(Loading, null), document.body)));
+};
+export { LoadingContext, LoadingProvider };

package/dist/libs/core/application/contexts/index.d.ts

@@ -1,4 +1,5 @@
 import { ConfigProvider } from "./Config";
 import { NotificationProvider } from "./Notification";
 import { LanguageProvider } from "./Language";
-export { ConfigProvider, LanguageProvider, NotificationProvider };
+import { LoadingProvider } from "./Loading";
+export { ConfigProvider, LanguageProvider, NotificationProvider, LoadingProvider };

package/dist/libs/core/application/contexts/index.js

@@ -1,4 +1,5 @@
 import { ConfigProvider } from "./Config";
 import { NotificationProvider } from "./Notification";
 import { LanguageProvider } from "./Language";
-export { ConfigProvider, LanguageProvider, NotificationProvider };
+import { LoadingProvider } from "./Loading";
+export { ConfigProvider, LanguageProvider, NotificationProvider, LoadingProvider };

package/dist/libs/core/application/hooks/index.d.ts

@@ -32,7 +32,7 @@ export declare const useLayout: () => {
         perPage: number;
     }>>;
 };
-export declare const useLanguage: () => string;
+export declare const useLanguage: () => string | undefined;
 export declare const useNotification: () => {
     notification: ({ title, message, status }: {
         title: string;
@@ -51,3 +51,7 @@ export declare const useTranslation: <TBaseLocale>(currentLanguage: string | und
     t: (key: keyof TBaseLocale, ...args: any[]) => string;
     currentLanguage: string | undefined;
 };
+export declare const useLoading: () => {
+    isLoading: boolean;
+    setIsLoading: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};

package/dist/libs/core/application/hooks/index.js

@@ -3,6 +3,7 @@ import { ConfigContext } from "../contexts/Config";
 import { NotificationContext } from "../contexts/Notification";
 import Utils from "../../../infrastructure/shared/Utils";
 import { LanguageContext } from "../contexts/Language";
+import { LoadingContext } from "../contexts/Loading";
 export const useLayout = () => {
     const context = useContext(ConfigContext);
     if (!context) {
@@ -12,9 +13,9 @@ export const useLayout = () => {
 };
 export const useLanguage = () => {
     const context = useContext(LanguageContext);
-    if (!context) {
-        throw new Error("useLayout must be used within a LayoutProvider");
-    }
+    // if (!context) {
+    //   throw new Error("useLayout must be used within a LayoutProvider");
+    // }
     return context;
 };
 export const useNotification = () => {
@@ -99,3 +100,10 @@ export const useTranslation = function (currentLanguage, translations) {
     };
     return { t, currentLanguage };
 };
+export const useLoading = () => {
+    const context = useContext(LoadingContext);
+    // if (!context) {
+    //   throw new Error("useLayout must be used within a LayoutProvider");
+    // }
+    return context;
+};

package/dist/libs/core/service/Api.js

@@ -63,7 +63,7 @@ class Api {
                         console.error("400");
                         break;
                     case 401:
-                        // console.error("401");
+                        console.error("401");
                         break;
                     case 404:
                         console.error("404");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.1.59",
+  "version": "0.1.60",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",