ar-design 0.1.93 → 0.1.95

package/dist/assets/css/components/feedback/popover/styles.css

@@ -4,6 +4,8 @@
 }
 
 .ar-popover {
+  visibility: hidden;
+  opacity: 0;
   position: absolute;
   display: flex;
   flex-direction: column;
@@ -14,6 +16,7 @@
   border-radius: var(--border-radius-sm);
   box-shadow: 0 0 15px -2.5px rgba(var(--black-rgb), 0.1);
   z-index: 1051;
+  transition: visibility 250ms, opacity 250ms;
 }
 
 .ar-popover > .content {

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

@@ -1,9 +1,13 @@
 .ar-date-calendar {
+  visibility: hidden;
+  opacity: 0;
   position: absolute;
+  top: 0;
+  left: 0;
   background-color: var(--white);
   width: 20rem;
   border: solid 1px var(--gray-200);
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--border-radius-sm);
   box-shadow: 0 0 10px -5px rgba(var(--black-rgb), 0.25);
   z-index: 1051;
   transition: visibility 250ms, opacity 250ms ease-in-out;

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

@@ -25,80 +25,62 @@
   height: var(--input-height);
 }
 .ar-date-calendar > .header > .select-field > .selects > div > span {
-  color: var(--black);
+  -webkit-text-stroke: 1px var(--black);
   user-select: none;
 }
 
 /* #region Prev and Next Buttons */
-.ar-date-calendar > .header > .select-field > .prev,
-.ar-date-calendar > .header > .select-field > .next {
-  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;
+  display: inline-block;
   width: 1rem;
   height: 1rem;
+  border: solid 2px transparent;
+  transform: rotate(45deg);
+  user-select: none;
   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::before,
+.ar-date-calendar > .header > .select-field > .next > span::before {
+  border: solid 2px transparent;
 }
-.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 > .prev > span:first-child {
+  position: relative;
+  border-left-color: var(--primary);
+  border-bottom-color: var(--primary);
 }
-.ar-date-calendar > .header > .select-field > .next > span:last-child::before,
-.ar-date-calendar > .header > .select-field > .next > span:last-child::after {
+.ar-date-calendar > .header > .select-field > .prev > 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);
+  border-left-color: rgba(var(--primary-rgb), 0.25);
+  border-bottom-color: rgba(var(--primary-rgb), 0.25);
 }
-.ar-date-calendar > .header > .select-field > .prev > span:first-child::after {
-  left: 0.35rem;
-  opacity: 0.25;
+.ar-date-calendar > .header > .select-field > .prev > span:last-child {
+  border-left-color: var(--gray-500);
+  border-bottom-color: var(--gray-500);
+  margin-left: 0.3rem;
 }
-.ar-date-calendar > .header > .select-field > .next > span:last-child::after {
-  left: 0.35rem;
-  opacity: 0.25;
+
+.ar-date-calendar > .header > .select-field > .next > span:first-child {
+  border-top-color: var(--gray-500);
+  border-right-color: var(--gray-500);
+  margin-right: 0.3rem;
 }
-.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:last-child {
+  position: relative;
+  border-top-color: var(--primary);
+  border-right-color: var(--primary);
 }
-.ar-date-calendar > .header > .select-field > .next > span:first-child::before {
+.ar-date-calendar > .header > .select-field > .next > 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(135deg);
+  border-top-color: rgba(var(--primary-rgb), 0.25);
+  border-right-color: rgba(var(--primary-rgb), 0.25);
 }
 /* #endregion Prev and Next Buttons */
 /* Prev and Next Buttons */

package/dist/assets/css/components/form/date-picker/clock/clock.css

@@ -1,29 +1,14 @@
 .ar-date-calendar > .clock {
   position: absolute;
   top: -1px;
+  right: -8rem;
   display: flex;
   flex-direction: column;
-  background-color: rgba(var(--white-rgb), 0.25);
-  backdrop-filter: blur(10px);
+  background-color: var(--white);
   width: 7.5rem;
-  height: 100.5%;
   border: solid 1px var(--gray-200);
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--border-radius-sm);
   box-shadow: 0 0 10px -5px rgba(var(--black-rgb), 0.25);
   z-index: 1051;
   user-select: none;
 }
-.ar-date-calendar > .clock.active {
-  visibility: visible;
-  opacity: 1;
-  right: -8rem;
-  transform: scale(1);
-  transition: visibility 250ms, opacity 250ms, right 250ms, transform 150ms 300ms ease-in-out;
-}
-.ar-date-calendar > .clock.passive {
-  visibility: hidden;
-  opacity: 0;
-  right: -5rem;
-  transform: scale(0.8);
-  transition: visibility 250ms 200ms, opacity 250ms 200ms, right 250ms 200ms, transform 150ms ease-in-out;
-}

package/dist/assets/css/components/form/date-picker/clock/content.css

@@ -1,11 +1,10 @@
 .ar-date-calendar > .clock > .content {
   display: flex;
   justify-content: space-between;
-  height: calc(100% - 5.5rem);
+  overflow: hidden;
 }
 .ar-date-calendar > .clock > .content > ul {
   width: 50%;
-  padding-bottom: calc(var(--input-height) * 6.5);
   overflow-y: auto;
   scrollbar-width: none;
 }
@@ -19,7 +18,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: var(--input-height);
+  min-height: 2rem;
   cursor: pointer;
 }
 .ar-date-calendar > .clock > .content > ul > li > span {

package/dist/assets/css/components/form/date-picker/clock/footer.css

@@ -2,6 +2,5 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: var(--header-height);
   border-top: solid 1px var(--gray-200);
 }

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

@@ -1,6 +1,8 @@
 .ar-date-calendar > .clock > .header {
-  height: var(--header-height);
+  display: flex;
+  justify-content: center;
+  align-items: center;
   border-bottom: solid 1px var(--gray-200);
   text-align: center;
-  line-height: var(--header-height);
+  -webkit-text-stroke: 1px var(--black);
 }

package/dist/assets/css/components/form/select/options.css

@@ -1,6 +1,10 @@
 .ar-select-options {
+  visibility: hidden;
+  opacity: 0;
   position: absolute;
+  top: 0;
   background-color: var(--white);
+  border: solid 1px var(--gray-200);
   border-radius: var(--border-radius-sm);
   box-shadow: 0 0 15px -2.5px rgba(var(--black-rgb), 0.1);
   overflow: hidden;

package/dist/components/{layout → data-display}/grid-system/index.d.ts

@@ -1,4 +1,4 @@
-import "../../../assets/css/components/layout/grid-system/grid-system.css";
+import "../../../assets/css/components/data-display/grid-system/styles.css";
 declare const Grid: {
     Box: import("react").FC<{
         children: import("react").ReactNode;

package/dist/components/{layout → data-display}/grid-system/index.js

@@ -1,7 +1,7 @@
 import Box from "./box/Box";
 import Row from "./row/Row";
 import Column from "./column/Column";
-import "../../../assets/css/components/layout/grid-system/grid-system.css";
+import "../../../assets/css/components/data-display/grid-system/styles.css";
 // @@Export
 const Grid = {
     Box,

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

@@ -237,7 +237,6 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
         }
         setSelectAll(allChecked);
     }, [currentPage]);
-    console.log(searchedText);
     return (React.createElement("div", { ref: _tableWrapper, className: _tableClassName.map((c) => c).join(" ") },
         (title || description || actions || React.Children.count(children) > 0) && (React.createElement("div", { className: "header" },
             React.createElement("div", { className: "title" },
@@ -274,7 +273,7 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
                             if (c.config?.alignContent) {
                                 _className.push(`align-content-${c.config.alignContent}`);
                             }
-                            return (React.createElement("th", { key: `column-${cIndex}`, ...(_className.length > 0 && {
+                            return (React.createElement("th", { key: `column-${cIndex}-${Math.random()}`, ...(_className.length > 0 && {
                                     className: `${_className.map((c) => c).join(" ")}`,
                                 }), ...(c.config?.width && {
                                     style: { minWidth: c.config.width },
@@ -305,10 +304,10 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
                                                 // .filter((x) =>
                                                 //   x.text.toLocaleLowerCase().includes(searchedFilters?.toLocaleLowerCase() ?? "")
                                                 // )
-                                                .map((filter, index) => {
+                                                .map((filter, fIndex) => {
                                                 const name = typeof c.key !== "object" ? String(c.key) : String(c.key.field);
-                                                return (React.createElement("li", { key: index },
-                                                    React.createElement(Checkbox, { ref: (element) => (_filterCheckboxItems.current[index] = element), label: filter.text, name: name, status: "success", value: filter.text, checked: config.isServerSide
+                                                return (React.createElement("li", { key: `filters-${fIndex}-${Math.random()}` },
+                                                    React.createElement(Checkbox, { ref: (element) => (_filterCheckboxItems.current[fIndex] = element), label: filter.text, name: name, status: "success", value: filter.text, checked: config.isServerSide
                                                             ? _searchedParams?.[name]?.includes(filter.text)
                                                             : searchedText?.[name]?.includes(filter.text), onChange: handleChecboxFilter })));
                                             }))) },
@@ -324,7 +323,7 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
                                             } })),
                                         React.createElement(Button, { variant: "borderless", icon: { element: React.createElement(ARIcon, { icon: "Filter", stroke: "var(--primary)", size: 16 }) } }))))));
                         })))),
-                React.createElement("tbody", null, getData().length > 0 ? (getData().map((item, index) => (React.createElement("tr", { key: `row-${index}` },
+                React.createElement("tbody", null, getData().length > 0 ? (getData().map((item, index) => (React.createElement("tr", { key: `row-${index}-${Math.random()}` },
                     selections && (React.createElement("td", { key: `selection-${index}`, className: "sticky-left", "data-sticky-position": "left" },
                         React.createElement(Checkbox, { ref: (element) => (_checkboxItems.current[index] = element), status: "primary", checked: selectionItems.some((selectionItem) => JSON.stringify(selectionItem) === JSON.stringify(item)), onChange: (event) => {
                                 if (event.target.checked)

package/dist/components/data-display/typography/paragraph/Paragraph.js

@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-const Paragraph = ({ children, color, align = "left", size, upperCase = false, }) => {
+const Paragraph = ({ children, color, align = "left", size, upperCase = false }) => {
     let _className = ["ar-typography-paragraph"];
     if (align)
         _className.push(align);

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

@@ -15,8 +15,13 @@ const Modal = ({ children, open, title, size = "normal", footer }) => {
     // methods
     const handleKeys = (event) => {
         const key = event.key;
-        if (key === "Escape")
+        const isArSelectOptions = document.getElementsByClassName("ar-select-options").length === 0;
+        const isArCalendar = document.getElementsByClassName("ar-date-calendar").length === 0;
+        const isArPopover = document.getElementsByClassName("ar-popover").length === 0;
+        if (key === "Escape" && isArCalendar && isArSelectOptions && isArPopover) {
+            event.stopPropagation();
             open.set(false);
+        }
     };
     const handlePosition = () => {
         if (_arModal.current) {

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

@@ -31,6 +31,8 @@ const Popover = ({ children, title, message, content, onConfirm, windowBlur, con
                 const screenCenter = 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 > screenCenter
                     ? elementRect.top - popoverRect.height + elementRect.height
                     : elementRect.top) + sy}px`;

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

@@ -4,7 +4,7 @@ class DATE {
         const [sd, st] = value.split("T");
         const [y, m, d] = sd.split("-").map(Number);
         // Zaman Bilgileri
-        const [c, _] = isCloack ? st.split(".") : "00:00";
+        const [c, _] = isCloack && st ? st.split(".") : "00:00";
         const [hh, mm] = isCloack ? c.split(":").map(Number) : [0, 0];
         return {
             year: y,

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

@@ -24,6 +24,11 @@ const months = [
 const DatePicker = ({ onChange, isClock, validation, ...attributes }) => {
     // refs
     const _arCalendar = useRef(null);
+    const _arClock = 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.
@@ -54,13 +59,17 @@ const DatePicker = ({ onChange, isClock, validation, ...attributes }) => {
     // 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")
+        if (key === "Escape") {
+            event.stopPropagation();
             closeCalendar();
+        }
     };
     const handlePosition = () => {
         if (_arCalendar.current && _beginDate.current) {
@@ -71,12 +80,38 @@ const DatePicker = ({ onChange, isClock, validation, ...attributes }) => {
                 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.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}px`;
             }
         }
     };
-    // Şimdi Butonu
+    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, !isClock ? 0 : _hours.current, !isClock ? 0 : _minutes.current, 0));
+        onChange(inputDate.toISOString());
+        isShutdownOn && setCalendarIsOpen(false);
+    };
     const setNowButton = () => {
         const now = new Date();
         // Stateler güncelleniyor...
@@ -96,19 +131,8 @@ const DatePicker = ({ onChange, isClock, validation, ...attributes }) => {
         const inputDate = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate(), !isClock ? 0 : now.getHours(), !isClock ? 0 : now.getMinutes(), 0));
         onChange(inputDate.toISOString());
     };
-    // Tamam Butonu
     const okayButton = () => {
-        return (React.createElement(Button, { variant: "borderless", status: "success", onClick: () => {
-                // 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, !isClock ? 0 : _hours.current, !isClock ? 0 : _minutes.current, 0));
-                onChange(inputDate.toISOString());
-                setCalendarIsOpen(false);
-            } }, "Tamam"));
+        return (React.createElement(Button, { variant: "borderless", status: "success", onClick: () => handleOk() }, "Tamam"));
     };
     const closeCalendar = () => {
         const { year, month, day, hours, minutes } = DATE.Parse(String(attributes.value), isClock);
@@ -122,7 +146,10 @@ const DatePicker = ({ onChange, isClock, validation, ...attributes }) => {
     // useEffects
     useEffect(() => {
         if (calendarIsOpen) {
-            setTimeout(() => handlePosition(), 0);
+            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);
@@ -144,6 +171,7 @@ const DatePicker = ({ onChange, isClock, validation, ...attributes }) => {
                         _day.current = i;
                         setSelectedDay(i);
                         setDateChanged(!dateChanged);
+                        handleOk(false);
                     } },
                     React.createElement("span", null, i)));
             }
@@ -151,12 +179,12 @@ const DatePicker = ({ onChange, isClock, validation, ...attributes }) => {
                 days.push(React.createElement("span", { key: `next-${i}`, className: "empty-day" }));
             }
             setCalendarDays(days);
-            window.addEventListener("blur", () => closeCalendar());
+            // window.addEventListener("blur", () => closeCalendar());
             document.addEventListener("click", handleClickOutSide);
             document.addEventListener("keydown", handleKeys);
         }
         return () => {
-            window.removeEventListener("blur", () => closeCalendar());
+            // window.removeEventListener("blur", () => closeCalendar());
             document.removeEventListener("click", handleClickOutSide);
             document.removeEventListener("keydown", handleKeys);
         };
@@ -174,6 +202,7 @@ const DatePicker = ({ onChange, isClock, validation, ...attributes }) => {
                         _minutes.current = i;
                         setSelectedMinutes(i);
                     }
+                    handleOk(false);
                 } },
                 React.createElement("span", null,
                     React.createElement("span", null, i.toString().padStart(2, "0"))))));
@@ -184,6 +213,8 @@ const DatePicker = ({ onChange, isClock, validation, ...attributes }) => {
         generateList(60, _minutes.current, setMinutes);
         if (!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];
@@ -213,16 +244,23 @@ const DatePicker = ({ onChange, isClock, validation, ...attributes }) => {
             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", null,
             validation ? "* " : "",
             attributes.placeholder)),
-        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) => {
+        React.createElement(Input, { ref: _beginDate, value: DATE.ParseValue(String(attributes.value), isClock), type: 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);
@@ -235,8 +273,13 @@ const DatePicker = ({ onChange, isClock, validation, ...attributes }) => {
                         _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();
@@ -244,7 +287,7 @@ const DatePicker = ({ onChange, isClock, validation, ...attributes }) => {
             }, autoComplete: "off", validation: validation }),
         calendarIsOpen &&
             ReactDOM.createPortal(React.createElement("div", { ref: _arCalendar, className: "ar-date-calendar" },
-                React.createElement("div", { className: "header" },
+                React.createElement("div", { ref: _calendarHeader, className: "header" },
                     React.createElement("div", { className: "select-field" },
                         React.createElement("div", { className: "prev" },
                             React.createElement("span", { onClick: () => {
@@ -286,19 +329,19 @@ const DatePicker = ({ onChange, isClock, validation, ...attributes }) => {
                 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."))),
-                React.createElement("div", { className: "footer" },
+                React.createElement("div", { ref: _calendarFooter, className: "footer" },
                     React.createElement("div", null,
                         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" },
+                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)),
-                    isClock && React.createElement("div", { className: "footer" }, okayButton()))), document.body)));
+                    React.createElement("div", { ref: _clockFooter, className: "footer" }, okayButton())))), document.body)));
 };
 DatePicker.displayName = "DatePicker";
 export default DatePicker;

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

@@ -74,6 +74,8 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
                 const screenCenter = window.innerHeight / 2;
                 const sx = window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft;
                 const sy = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
+                _options.current.style.visibility = "visible";
+                _options.current.style.opacity = "1";
                 _options.current.style.top = `${(InpuRect.top > screenCenter
                     ? InpuRect.top - optionRect.height - (multiple ? 20 : 0)
                     : InpuRect.top + InpuRect.height) + sy}px`;

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

@@ -14,7 +14,6 @@ const Switch = ({ label, status = "primary", border = { radius: "pill" }, ...att
             React.createElement("input", { type: "checkbox", ...attributes, checked: checked, size: 0, onChange: (event) => {
                     event.stopPropagation();
                     (() => {
-                        console.log(event.target.checked);
                         setChecked(event.target.checked);
                     })();
                     (() => attributes.onChange && attributes.onChange(event))();

package/dist/components/icons/Compiler.js

@@ -19,12 +19,22 @@ class Icon {
                         return (React.createElement(React.Fragment, null,
                             React.createElement("line", { fill: this._fill, stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", x1: "12", x2: "12", y1: "19", y2: "5" }),
                             React.createElement("line", { fill: this._fill, stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", x1: "5", x2: "19", y1: "12", y2: "12" })));
+                    case "ArrowLeft":
+                        return (React.createElement("path", { d: "M15 19.92L8.48 13.4c-.77-.77-.77-2.03 0-2.8L15 4.08", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }));
+                    case "ArrowRight":
+                        return (React.createElement("path", { d: "M8.91 19.92l6.52-6.52c.77-.77.77-2.03 0-2.8L8.91 4.08", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }));
                     case "CloseSquare":
                         return (React.createElement("path", { d: "m9.17 14.83 5.66-5.66M14.83 14.83 9.17 9.17M9 22h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9v6c0 5 2 7 7 7Z", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }));
+                    case "CloseCircle":
+                        return (React.createElement("path", { d: "M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10ZM9.17 14.83l5.66-5.66M14.83 14.83 9.17 9.17", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }));
                     case "Import":
                         return (React.createElement(React.Fragment, null,
                             React.createElement("path", { d: "M3 15C3 17.8284 3 19.2426 3.87868 20.1213C4.75736 21 6.17157 21 9 21H15C17.8284 21 19.2426 21 20.1213 20.1213C21 19.2426 21 17.8284 21 15", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
                             React.createElement("path", { d: "M12 3V16M12 16L16 11.625M12 16L8 11.625", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
+                    case "Document":
+                        return (React.createElement(React.Fragment, null,
+                            React.createElement("path", { d: "M22 10v5c0 5-2 7-7 7H9c-5 0-7-2-7-7V9c0-5 2-7 7-7h5", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+                            React.createElement("path", { d: "M22 10h-4c-3 0-4-1-4-4V2l8 8Z", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
                     case "Bold":
                         return (React.createElement(React.Fragment, null,
                             React.createElement("path", { d: "M6 4h8a4 4 0 0 1 0 8H6z", stroke: this._stroke, strokeWidth: Number(this._strokeWidth) + 1.5, strokeLinecap: "round", strokeLinejoin: "round" }),
@@ -77,6 +87,10 @@ class Icon {
                     case "Filter":
                         return (React.createElement(React.Fragment, null,
                             React.createElement("path", { d: "M5.4 2.1h13.2c1.1 0 2 .9 2 2v2.2c0 .8-.5 1.8-1 2.3l-4.3 3.8c-.6.5-1 1.5-1 2.3V19c0 .6-.4 1.4-.9 1.7l-1.4.9c-1.3.8-3.1-.1-3.1-1.7v-5.3c0-.7-.4-1.6-.8-2.1l-3.8-4c-.5-.5-.9-1.4-.9-2V4.2c0-1.2.9-2.1 2-2.1ZM10.93 2.1 6 10", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" })));
+                    case "TickCircle":
+                        return (React.createElement(React.Fragment, null,
+                            React.createElement("path", { d: "M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10Z", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+                            React.createElement("path", { d: "m7.75 12 2.83 2.83 5.67-5.66", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
                     default:
                         return null;
                 }

package/dist/index.d.ts

@@ -28,6 +28,6 @@ import Tooltip from "./components/feedback/tooltip";
 import Breadcrumb from "./components/navigation/breadcrumb";
 import Menu from "./components/navigation/menu";
 import Steps from "./components/navigation/steps";
-import Grid from "./components/layout/grid-system";
+import Grid from "./components/data-display/grid-system";
 import Layout from "./components/layout";
 export { Button, ButtonAction, ButtonGroup, Checkbox, DatePicker, Input, InputTag, Radio, Select, Switch, TextEditor, Upload, Card, Chip, Divider, DnD, Paper, SyntaxHighlighter, Table, Tabs, Typography, Alert, Modal, Popover, Progress, Tooltip, Breadcrumb, Menu, Steps, Grid, Layout, };

package/dist/index.js

@@ -33,7 +33,7 @@ import Breadcrumb from "./components/navigation/breadcrumb";
 import Menu from "./components/navigation/menu";
 import Steps from "./components/navigation/steps";
 // Layout
-import Grid from "./components/layout/grid-system";
+import Grid from "./components/data-display/grid-system";
 import Layout from "./components/layout";
 export { 
 // Form Elements

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

@@ -35,7 +35,7 @@ class Api {
     async PostWithFormData(values) {
         const response = await this.CustomFetch(`${this._url}${values.input}`, {
             method: "POST",
-            headers: { ...values.headers },
+            headers: { ...this.HeaderProperties(), ...values.headers },
             body: values.data,
             ...values.init,
         });

package/dist/libs/types/index.d.ts

@@ -66,7 +66,7 @@ export type Errors<TData> = Partial<{
 }>;
 export type AllowedTypes = "image/jpeg" | "image/png" | "image/gif" | "image/webp" | "image/svg+xml" | "image/bmp" | "image/tiff" | "application/pdf" | "application/msword" | "application/vnd.openxmlformats-officedocument.wordprocessingml.document" | "application/vnd.ms-excel" | "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" | "application/vnd.openxmlformats-officedocument.presentationml.presentation" | "application/zip" | "application/x-rar-compressed" | "application/x-7z-compressed" | "application/gzip" | "application/json" | "application/xml" | "text/plain" | "text/csv" | "text/html" | "video/mp4" | "video/quicktime" | "video/x-msvideo" | "video/x-matroska" | "video/webm" | "video/x-flv" | "audio/mpeg" | "audio/wav" | "audio/ogg" | "audio/aac" | "audio/flac" | "application/octet-stream";
 export type IconVariants = "linear" | "bulk";
-export type Icons = "Add" | "CloseSquare" | "Drive" | "Folder" | "Trash" | "Upload" | "Image" | "Import" | "Bold" | "Italic" | "Underline" | "Strikethrough" | "BulletList" | "NumberList" | "TextAlingLeft" | "TextAlingCenter" | "TextAlingRight" | "Filter";
+export type Icons = "Add" | "ArrowLeft" | "ArrowRight" | "CloseCircle" | "CloseSquare" | "Drive" | "Document" | "Folder" | "Trash" | "Upload" | "Image" | "Import" | "Bold" | "Italic" | "Underline" | "Strikethrough" | "BulletList" | "NumberList" | "TextAlingLeft" | "TextAlingCenter" | "TextAlingRight" | "Filter" | "TickCircle" | "File";
 export type PieChartDataType = {
     value: number;
     text: string;

package/package.json

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