ar-design 0.1.92 → 0.1.94

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

@@ -1,9 +1,11 @@
 .ar-date-calendar {
   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,7 +25,7 @@
   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;
 }
 
@@ -34,71 +34,5 @@
 .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;
-  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/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,8 @@
 .ar-select-options {
   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/data-display/table/index.js

@@ -172,7 +172,6 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
         // Eğer değer bir sayı veya string ise, aranan metinle eşleşip eşleşmediğini kontrol ediyoruz.
         return Object.entries(searchedText).every(([key, value]) => {
             const _itemValue = item[key];
-            debugger;
             if (typeof _itemValue === "number" || typeof _itemValue === "string") {
                 if (Array.isArray(value)) {
                     if (value.length === 0)
@@ -238,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" },
@@ -275,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 },
@@ -286,6 +284,8 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
                     config?.isSearchable && (React.createElement("tr", { key: "isSearchable" },
                         selections && (React.createElement("th", { key: `column-selections`, className: "selection-col sticky-left", "data-sticky-position": "left" })),
                         columns.map((c, cIndex) => {
+                            if (!c.key)
+                                return React.createElement("th", null);
                             let _className = [];
                             if (c.config?.sticky)
                                 _className.push(`sticky-${c.config.sticky}`);
@@ -304,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 })));
                                             }))) },
@@ -323,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/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

@@ -6,6 +6,7 @@ import Button from "../button";
 import Alert from "../../feedback/alert";
 import ReactDOM from "react-dom";
 import DATE from "./DATE";
+import { ARIcon } from "../../icons";
 const weekdays = ["Pzt", "Sal", "Çar", "Per", "Cum", "Cmt", "Paz"];
 const months = [
     { value: 0, text: "Ocak" },
@@ -24,6 +25,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 +60,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) {
@@ -76,7 +86,31 @@ const DatePicker = ({ onChange, isClock, validation, ...attributes }) => {
             }
         }
     };
-    // Ş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 +130,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 +145,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 +170,7 @@ const DatePicker = ({ onChange, isClock, validation, ...attributes }) => {
                         _day.current = i;
                         setSelectedDay(i);
                         setDateChanged(!dateChanged);
+                        handleOk(false);
                     } },
                     React.createElement("span", null, i)));
             }
@@ -151,12 +178,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 +201,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 +212,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];
@@ -218,11 +248,18 @@ const DatePicker = ({ onChange, isClock, validation, ...attributes }) => {
         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 +272,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,14 +286,15 @@ 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: () => {
                                     _year.current -= 1;
                                     setSelectedYear(_year.current);
                                     setDateChanged((prev) => !prev);
-                                } }),
+                                } },
+                                React.createElement(ARIcon, { stroke: "var(--primary)", icon: "ArrowLeft", size: 24 })),
                             React.createElement("span", { onClick: () => {
                                     if (_month.current <= 0) {
                                         _year.current -= 1;
@@ -261,7 +304,8 @@ const DatePicker = ({ onChange, isClock, validation, ...attributes }) => {
                                     setSelectedYear(_year.current);
                                     setSelectedMonth(_month.current);
                                     setDateChanged((prev) => !prev);
-                                } })),
+                                } },
+                                React.createElement(ARIcon, { icon: "ArrowLeft", size: 24 }))),
                         React.createElement("div", { className: "selects" },
                             React.createElement("div", null,
                                 React.createElement("span", null, months.find((month) => month.value === selectedMonth)?.text)),
@@ -277,28 +321,30 @@ const DatePicker = ({ onChange, isClock, validation, ...attributes }) => {
                                     setSelectedYear(_year.current);
                                     setSelectedMonth(_month.current);
                                     setDateChanged((prev) => !prev);
-                                } }),
+                                } },
+                                React.createElement(ARIcon, { icon: "ArrowRight", size: 24 })),
                             React.createElement("span", { onClick: () => {
                                     _year.current += 1;
                                     setSelectedYear(_year.current);
                                     setDateChanged((prev) => !prev);
-                                } })))),
+                                } },
+                                React.createElement(ARIcon, { stroke: "var(--primary)", icon: "ArrowRight", size: 24 }))))),
                 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/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/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.92",
+  "version": "0.1.94",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",