ar-design 0.1.56 → 0.1.58

package/dist/assets/css/components/charts/pie/pie.css

@@ -0,0 +1,84 @@
+.ar-pie-chart-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem 0;
+}
+.ar-pie-chart-wrapper > div {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0 2rem;
+}
+
+.ar-pie-chart-wrapper > .title {
+  width: 100%;
+  color: var(--gray-700);
+  font-size: 1.2rem;
+  font-weight: bold;
+  text-align: left;
+}
+
+.ar-pie-chart-wrapper > div > .ar-pie-chart {
+  position: relative;
+  width: 200px;
+  height: 200px;
+  border-radius: var(--border-radius-pill);
+  user-select: none;
+}
+.ar-pie-chart-wrapper > div > .ar-pie-chart > article {
+  position: absolute;
+  inset: 0.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--white);
+  border-radius: var(--border-radius-pill);
+  box-shadow: inset 0 0 0 5px rgba(var(--black-rgb), 0.1);
+  color: var(--gray-700);
+}
+
+.ar-pie-chart-wrapper > div > .information-field {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  flex: 1;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 0.5rem 0;
+  width: 100%;
+}
+.ar-pie-chart-wrapper > div > .information-field > article {
+  display: flex;
+  flex-direction: row;
+  flex: 2;
+  align-items: center;
+  gap: 0 0.5rem;
+}
+.ar-pie-chart-wrapper > div > .information-field > article > span:first-child {
+  position: relative;
+  min-width: 1.75rem;
+  min-height: 1rem;
+  padding-left: 0.85rem;
+  border-radius: var(--border-radius-sm);
+  color: var(--white);
+  font-size: 0.75rem;
+  font-weight: bold;
+  line-height: 1rem;
+  overflow: hidden;
+}
+.ar-pie-chart-wrapper > div > .information-field > article > span:first-child::before {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  content: "%";
+  background-color: rgba(var(--black-rgb), 0.2);
+  width: 0.75rem;
+  font-size: 0.65rem;
+  text-align: center;
+}
+.ar-pie-chart-wrapper > div > .information-field > article > span:last-child {
+  font-size: 0.75rem;
+}

package/dist/assets/css/components/data-display/chip/chip.css

@@ -1,6 +1,14 @@
 .ar-chip {
-  padding: 0.25rem 0.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0 0.5rem;
+  height: 1.75rem;
+  padding: 0 0.5rem;
   font-size: 0.75rem;
   font-weight: 600;
   white-space: nowrap;
+  user-select: none;
+  -webkit-text-stroke: 0.5px var(--white);
+  letter-spacing: 1px;
 }

package/dist/assets/css/components/data-display/paper/paper.css

@@ -1,4 +1,5 @@
 .ar-paper {
+  position: relative;
   background-color: var(--white);
   padding: 2rem;
   border-radius: var(--border-radius-lg);

package/dist/assets/css/components/data-display/table/table.css

@@ -97,6 +97,7 @@
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
+  align-items: center;
 }
 
 @import url("./scroll.css");

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

@@ -6,7 +6,6 @@
   position: fixed;
   inset: 0;
   background-color: rgba(var(--black-rgb), 0.5);
-  backdrop-filter: blur(10px);
 }
 
 /* #region Open or Close */
@@ -17,19 +16,19 @@
   z-index: 100;
 }
 .ar-modal-wrapper:is(.opened) > .ar-modal {
-  top: 4.5rem;
+  top: 1.75rem;
   transition: top 250ms ease-in-out;
 }
 
 .ar-modal-wrapper:is(.closed) {
   visibility: hidden;
   opacity: 0;
-  transition: visibility 250ms 300ms, opacity 250ms 300ms ease-in-out;
+  transition: visibility 250ms, opacity 250ms ease-in-out;
   z-index: 99;
 }
 .ar-modal-wrapper:is(.closed) > .ar-modal {
   top: -100%;
-  transition: top 250ms 300ms ease-in-out;
+  transition: top 250ms ease-in-out;
 }
 /* #endregion */
 /* Open or Close */

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

@@ -1,148 +1,135 @@
-.notification {
+.ar-notification-item {
+  opacity: 1;
   position: fixed;
-  display: flex;
-  flex-direction: column-reverse;
-  gap: 1.25rem 0;
-  user-select: none;
-  z-index: 1051;
-}
-
-.notification.top-left {
-  top: 1rem;
-  left: 1rem;
-}
-.notification.top-right {
-  top: 1rem;
-  right: 1rem;
-}
-.notification.bottom-left {
-  bottom: 1rem;
-  left: 1rem;
-}
-.notification.bottom-right {
-  bottom: 1rem;
-  right: 1rem;
-}
-
-.notification > .item {
+  left: 2rem;
   display: flex;
   flex-direction: row;
   gap: 0 0.5rem;
-  width: 100%;
-  height: 5rem;
+  background-color: var(--white);
+  width: 350px;
+  height: 7.5rem;
   border-radius: var(--border-radius-xl);
+  box-shadow: 0 5px 15px -5px rgba(var(--black-rgb), 0.25);
+  transition: all 250ms ease-in-out;
   overflow: hidden;
   /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
-  animation: openSnackbar ease-in-out 500ms 0s 1 normal both;
-}
-
-.notification > .item.success {
-  background-color: var(--success);
-}
-.notification > .item.warning {
-  background-color: var(--warning);
+  animation: openedSnackbar ease-in-out 500ms 0s 1 normal both;
+  z-index: 1051;
 }
-.notification > .item.information {
-  background-color: var(--info);
+.ar-notification-item.previous {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: previousSnackbar ease-in-out 500ms 0s 1 normal both;
 }
-.notification > .item.error {
-  background-color: var(--danger);
+.ar-notification-item.closed {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: closedSnackbar ease-in-out 500ms 0s 1 normal both;
 }
 
-.notification > .item > .icon {
+.ar-notification-item > .icon {
   position: relative;
   min-width: 3rem;
   border-top-left-radius: var(--border-radius-xl);
   border-bottom-left-radius: var(--border-radius-xl);
   overflow: hidden;
 }
-.notification > .item > .icon > span {
+.ar-notification-item > .icon > span {
   position: absolute;
   border-radius: var(--border-radius-pill);
 }
-/* .notification > .item > .icon > span:nth-child(1) {
+.ar-notification-item > .icon > span:nth-child(1) {
   top: 0.5rem;
   left: 0.5rem;
   width: 0.25rem;
   height: 0.25rem;
 }
-.notification > .item > .icon > span:nth-child(2) {
+.ar-notification-item > .icon > span:nth-child(2) {
   top: 1.5rem;
   left: 0.5rem;
   width: 0.5rem;
   height: 0.5rem;
 }
-.notification > .item > .icon > span:nth-child(3) {
+.ar-notification-item > .icon > span:nth-child(3) {
   top: 2rem;
   left: 1.75rem;
   width: 1rem;
   height: 1rem;
 }
-.notification > .item > .icon > span:nth-child(4) {
+.ar-notification-item > .icon > span:nth-child(4) {
   bottom: -1.5rem;
   left: -0.5rem;
   width: 3rem;
   height: 3rem;
 }
-.notification > .item > .icon > span:nth-child(5) {
+.ar-notification-item > .icon > span:nth-child(5) {
   bottom: 1.15rem;
   left: 1rem;
   width: 0.55rem;
   height: 0.55rem;
-} */
-.notification > .item > .icon > span.success {
+}
+.ar-notification-item > .icon > span.success {
   background-color: var(--success);
 }
-.notification > .item > .icon > span.warning {
+.ar-notification-item > .icon > span.warning {
   background-color: var(--warning);
 }
-.notification > .item > .icon > span.information {
+.ar-notification-item > .icon > span.information {
   background-color: var(--info);
 }
-.notification > .item > .icon > span.error {
+.ar-notification-item > .icon > span.error {
   background-color: var(--danger);
 }
 
-.notification > .item > .content {
+.ar-notification-item > .content {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: 0.25rem 0;
+  gap: 0.75rem 0;
   width: 100%;
   padding: 0 1rem;
-  color: var(--white);
+  color: var(--gray-700);
 }
-.notification > .item > .content > .title {
-  font-size: 1.3rem;
+.ar-notification-item > .content > .title {
+  font-size: 1.2rem;
 }
-.notification > .item > .content > .message {
+.ar-notification-item > .content > .message {
+  color: var(--gray-600);
 }
 
-.notification > .item > .close {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.ar-notification-item > .close {
   min-width: 2.5rem;
-  background-color: rgba(var(--black-rgb), 0.1);
-  color: rgba(var(--white-rgb), 0.75);
+}
+.ar-notification-item > .close::before,
+.ar-notification-item > .close::after {
+  position: absolute;
+  top: 0.75rem;
+  right: 1.25rem;
+  content: "";
+  width: 2px;
+  height: 15px;
+  background-color: var(--gray-500);
+  transform-origin: center;
+  transform: rotate(45deg);
+}
+.ar-notification-item > .close::after {
+  transform: rotate(-45deg);
 }
 
 @media only screen and (max-width: 480px) {
-  .notification.top-left {
+  .ar-notification.top-left {
     inset: 1rem 1rem auto 1rem;
   }
-  .notification.top-right {
+  .ar-notification.top-right {
     inset: 1rem 1rem auto 1rem;
   }
-  .notification.bottom-left {
+  .ar-notification.bottom-left {
     inset: auto 1rem 1rem 1rem;
   }
-  .notification.bottom-right {
+  .ar-notification.bottom-right {
     inset: auto 1rem 1rem 1rem;
   }
 }
 
-@keyframes openSnackbar {
+@keyframes openedSnackbar {
   0% {
     transform: translateX(-500px);
   }
@@ -151,7 +138,16 @@
   }
 }
 
-@keyframes removeSnackbar {
+@keyframes previousSnackbar {
+  0% {
+    transform: translateX(0) translateY(0);
+  }
+  100% {
+    transform: translateX(0) translateY(120px);
+  }
+}
+
+@keyframes closedSnackbar {
   0% {
     transform: translateX(0);
   }

package/dist/components/charts/index.d.ts

@@ -0,0 +1,2 @@
+import Pie from "./pie";
+export { Pie };

package/dist/components/charts/index.js

@@ -0,0 +1,2 @@
+import Pie from "./pie";
+export { Pie };

package/dist/components/charts/pie/IProps.d.ts

@@ -0,0 +1,7 @@
+import { PieChartDataType } from "../../../libs/types";
+interface IProps {
+    title: string;
+    data: PieChartDataType[];
+    size?: number;
+}
+export default IProps;

package/dist/components/charts/pie/IProps.js

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

package/dist/components/charts/pie/index.d.ts

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

package/dist/components/charts/pie/index.js

@@ -0,0 +1,55 @@
+import React, { useEffect, useRef, useState } from "react";
+import "../../../assets/css/components/charts/pie/pie.css";
+const Pie = ({ title, data, size }) => {
+    // refs
+    const _arPieChart = useRef(null);
+    // const _randomIndex = useRef<number[]>([]);
+    // state
+    const [conic, setConic] = useState([]);
+    // variable/s
+    const conicColors = [
+        ["#fff35e", "#000"], // Sarı
+        ["#ffc752", "#000"], // Açık Sarı
+        ["#ff9151", "#fff"], // Turuncu
+        ["#ee544e", "#fff"], // Kırmızı
+        ["#e52b66", "#fff"], // Pembemsi Kırmızı
+        ["#3c1d43", "#fff"], // Koyu Mor
+        ["#582d62", "#fff"], // Mor
+        ["#0470a7", "#fff"], // Açık Mavi
+        ["#068aa8", "#fff"], // Mavi-Turkuaz
+        ["#72a9bb", "#fff"], // Açık Mavi-Gri
+    ];
+    useEffect(() => {
+        if (!_arPieChart.current || data.length === 0)
+            return;
+        const conicGradients = [];
+        let total = data.reduce((sum, value) => sum + value.value, 0);
+        let normalizedData = data.map((value) => (value.value / total) * 100);
+        let start = 0;
+        // Gelen data uzunluğunda rastgele bir sayı dizisi oluşturuyor.
+        // do {
+        //   const r = Math.floor(Math.random() * conicColors.length);
+        //   if (!_randomIndex.current.includes(r)) _randomIndex.current.push(r);
+        // } while (_randomIndex.current.length < data.length);
+        normalizedData.forEach((percent, index) => {
+            let end = start + percent;
+            if (index === 0)
+                conicGradients.push(`#fff ${start + 0.5}% ${start}%`);
+            conicGradients.push(`${conicColors[index][0]} ${start}% ${end}%`);
+            conicGradients.push(`#fff ${end}% ${end + 0.5}%`);
+            start = end;
+        });
+        setConic(conicGradients);
+    }, [data]);
+    return (React.createElement("div", { className: "ar-pie-chart-wrapper" },
+        React.createElement("div", { className: "title" },
+            React.createElement("span", null, title)),
+        React.createElement("div", null,
+            React.createElement("div", { ref: _arPieChart, className: "ar-pie-chart", style: { background: `conic-gradient(${conic.join(", ")})`, width: size, height: size } },
+                React.createElement("article", null)),
+            React.createElement("div", { className: "information-field" }, data.map((item, index) => (React.createElement("article", { key: index },
+                React.createElement("span", { style: { backgroundColor: conicColors[index][0] } },
+                    React.createElement("span", { style: { color: conicColors[index][1] } }, item.value)),
+                React.createElement("span", null, item.text))))))));
+};
+export default Pie;

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

@@ -2,9 +2,11 @@
 import React from "react";
 import "../../../assets/css/components/data-display/chip/chip.css";
 import Utils from "../../../libs/infrastructure/shared/Utils";
-const Chip = ({ variant = "outlined", status = "primary", border = { radius: "sm" }, text, }) => {
+const Chip = ({ variant = "outlined", status = "primary", border = { radius: "sm" }, text, icon, }) => {
     let _chipClassName = ["ar-chip"];
     _chipClassName.push(...Utils.GetClassName(variant, status, border, undefined, undefined, undefined));
-    return React.createElement("span", { className: _chipClassName.map((c) => c).join(" ") }, text);
+    return (React.createElement("div", { className: _chipClassName.map((c) => c).join(" ") },
+        icon?.element && React.createElement("span", null, icon?.element),
+        React.createElement("span", null, text)));
 };
 export default Chip;

package/dist/components/data-display/typography/paragraph/IProps.d.ts

@@ -1,6 +1,6 @@
 import { ParagraphColors, Status } from "../../../../libs/types";
-import { IChildren, IGlobalProps } from "../../../../libs/types/IGlobalProps";
-interface IProps extends Omit<IGlobalProps, "status">, IChildren {
+import { IChildren, IGlobalProps, ISizes } from "../../../../libs/types/IGlobalProps";
+interface IProps extends Omit<IGlobalProps, "status">, IChildren, ISizes {
     color?: ParagraphColors | Status;
     align?: "left" | "center" | "right";
 }

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

@@ -40,12 +40,12 @@ const Confirm = ({ children, title, message, content, onConfirm }) => {
             document.addEventListener("click", handleClickOutSide);
             document.addEventListener("keydown", handleKeys);
             document.addEventListener("scroll", handleScroll);
+        }
+        else {
             // Dinleyicileri kaldır.
-            return () => {
-                document.removeEventListener("click", handleClickOutSide);
-                document.removeEventListener("keydown", handleKeys);
-                document.removeEventListener("scroll", handleScroll);
-            };
+            document.removeEventListener("click", handleClickOutSide);
+            document.removeEventListener("keydown", handleKeys);
+            document.removeEventListener("scroll", handleScroll);
         }
     }, [open]);
     return (React.createElement("div", { ref: _arConfirmWrapper, className: "ar-confirm-wrapper", role: "dialog" },

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

@@ -25,13 +25,14 @@ const Modal = ({ children, open, title, size = "normal", footer }) => {
     // useEffects
     useEffect(() => {
         if (open.get) {
+            document.body.style.overflow = "hidden";
             // document.addEventListener("click", handleClickOutSide);
             document.addEventListener("keydown", handleKeys);
-            // Dinleyicileri kaldır.
-            return () => {
-                // document.removeEventListener("click", handleClickOutSide);
-                document.removeEventListener("keydown", handleKeys);
-            };
+        }
+        else {
+            document.body.style.removeProperty("overflow");
+            // document.removeEventListener("click", handleClickOutSide);
+            document.removeEventListener("keydown", handleKeys);
         }
     }, [open.get]);
     return (React.createElement("div", { className: _modalWrapperClassName.map((c) => c).join(" ") },

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

@@ -1,5 +1,5 @@
 import React from "react";
 import IProps from "./IProps";
 import "../../../assets/css/components/feedback/notification/notification.css";
-declare const Notification: ({ title, message, status, direction, trigger }: IProps) => React.JSX.Element;
+declare const Notification: ({ title, message, status, direction, trigger }: IProps) => React.JSX.Element[];
 export default Notification;

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

@@ -3,38 +3,83 @@ import { useEffect, useRef, useState } from "react";
 import React from "react";
 import "../../../assets/css/components/feedback/notification/notification.css";
 const Notification = ({ title, message, status, direction = "bottom-left", trigger }) => {
-    // useRefs
     const _firstLoad = useRef(false);
-    const _index = useRef(0);
+    const _notificationItems = useRef([]);
     const _interval = useRef();
-    // useStates
+    // const _automaticRemoveInterval = useRef<NodeJS.Timeout>();
+    // const _closedInterval = useRef<NodeJS.Timeout>();
+    const _i = useRef(0);
     const [items, setItems] = useState([]);
-    // useEffects
     useEffect(() => {
         if (!_firstLoad.current) {
             _firstLoad.current = true;
             return;
         }
-        _index.current += 1;
-        const createItem = (React.createElement("div", { className: `item ${status}` },
-            React.createElement("div", { className: "content" },
-                React.createElement("span", { className: `title ${status}` }, title),
-                React.createElement("span", { className: "message" }, message)),
-            React.createElement("div", { className: "close", "data-index": _index.current, onClick: (event) => {
-                    const target = event.currentTarget;
-                    setItems((item) => item.filter((x) => x.index !== Number(target.dataset.index)));
-                } }, "x")));
-        setItems((items) => [...items, { index: _index.current, element: createItem }]);
+        setItems((prevItems) => [...prevItems, { id: _i.current++, title, message, status, direction }]);
     }, [trigger]);
     useEffect(() => {
         if (items.length === 0)
             return;
-        // Ekleme işlemi bittikten bir süre sonra tekrar kaldırma işlemi yapılmaktadır.
+        // const firstNotification = _notificationItems.current[0];
+        // _automaticRemoveInterval.current = setTimeout(() => {
+        //   if (firstNotification) firstNotification.classList.add("closed");
+        //   _interval.current = setTimeout(() => {
+        //     setItems((prevItems) => prevItems.slice(1));
+        //     if (firstNotification) firstNotification.classList.remove("closed");
+        //     clearTimeout(_interval.current);
+        //   }, 500);
+        //   clearTimeout(_automaticRemoveInterval.current);
+        // }, 3000);
         _interval.current = setTimeout(() => {
-            setItems((items) => items.slice(0, -1));
+            setItems((prevItems) => prevItems.slice(1));
+            // if (firstNotification) firstNotification.classList.remove("closed");
             clearTimeout(_interval.current);
         }, 3000);
+        return () => {
+            // clearTimeout(_automaticRemoveInterval.current);
+            clearTimeout(_interval.current);
+        };
     }, [items]);
-    return (React.createElement("div", { className: `notification ${direction}` }, items.map((item, index) => (React.createElement(React.Fragment, { key: index }, item.element)))));
+    const getBottomPosition = (index) => {
+        let bottom = 30; // Başlangıçta 30px'lik bir boşluk ekliyoruz.
+        // Önceki öğenin yüksekliğini dikkate alarak bottom hesaplanıyor.
+        if (_notificationItems.current[index - 1]) {
+            bottom = _notificationItems.current.slice(0, index).reduce((acc, el) => {
+                const rect = el.getBoundingClientRect();
+                return acc + rect.height + 20; // +20 değeri ara boşluğu artıyor.
+            }, 30); // 30px'lik boşluğu başlangıçta ekliyoruz.
+        }
+        return bottom;
+    };
+    return items.map((item, index) => {
+        const bottom = getBottomPosition(index);
+        return (React.createElement("div", { key: index, ref: (element) => (_notificationItems.current[index] = element), className: "ar-notification-item", style: items.length > 5
+                ? {
+                    backgroundColor: `rgba(var(--white-rgb), ${index === items.length - 1 ? 1 : 0.1})`,
+                    backdropFilter: "blur(10px)",
+                    bottom: (index === 0 ? 30 : 10) * (index + 1),
+                }
+                : { bottom } },
+            React.createElement("div", { className: "icon" },
+                React.createElement("span", { className: item.status }),
+                React.createElement("span", { className: item.status }),
+                React.createElement("span", { className: item.status }),
+                React.createElement("span", { className: item.status }),
+                React.createElement("span", { className: item.status })),
+            React.createElement("div", { className: "content" },
+                React.createElement("span", { className: "title" }, item.title),
+                React.createElement("span", { className: "message" }, item.message)),
+            React.createElement("div", { className: "close", onClick: () => {
+                    // clearTimeout(_automaticRemoveInterval.current);
+                    clearTimeout(_interval.current);
+                    setItems((prev) => prev.filter((_item) => _item.id !== item.id));
+                    // if (_notificationItems.current[index]) _notificationItems.current[index]!.classList.add("closed");
+                    // _closedInterval.current = setTimeout(() => {
+                    //   setItems((prev) => prev.filter((_item) => _item.id !== item.id));
+                    //   if (_notificationItems.current[index]) _notificationItems.current[index]!.classList.remove("closed");
+                    //   clearTimeout(_closedInterval.current);
+                    // }, 500);
+                } })));
+    });
 };
 export default Notification;

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

@@ -1,5 +1,5 @@
-import { IGlobalProps } from "../../../libs/types/IGlobalProps";
-interface IProps extends Omit<IGlobalProps, "children" | "disabled">, React.ButtonHTMLAttributes<HTMLButtonElement> {
+import { IGlobalProps, ISizes } from "../../../libs/types/IGlobalProps";
+interface IProps extends Omit<IGlobalProps, "children" | "disabled">, ISizes, React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Bileşenin şekil varyantını belirtir ve genellikle sadece ikon için kullanılmalıdır.
      * İki seçenekten biri olabilir: "circle" veya "square".

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

@@ -27,14 +27,13 @@ const ButtonAction = ({ buttons }) => {
         if (open) {
             document.addEventListener("click", handleClickOutSide);
             document.addEventListener("keydown", handleKeys);
-            // Sayfa boyutu değiştirilmesi söz konusu olursa eğer bu kısım çalışacaktır.
             window.addEventListener("resize", handleResizeEvent);
+        }
+        else {
             // Dinleyicileri kaldır.
-            return () => {
-                document.removeEventListener("click", handleClickOutSide);
-                document.removeEventListener("keydown", handleKeys);
-                window.removeEventListener("resize", handleResizeEvent);
-            };
+            document.removeEventListener("click", handleClickOutSide);
+            document.removeEventListener("keydown", handleKeys);
+            window.removeEventListener("resize", handleResizeEvent);
         }
     }, [open]);
     return (React.createElement("div", { ref: _arButtonAction, className: "ar-button-action" },

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { IGlobalProps } from "../../../libs/types/IGlobalProps";
-interface IProps extends Omit<IGlobalProps, "children" | "icon" | "disabled">, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "type" | "size"> {
+import { IGlobalProps, ISizes } from "../../../libs/types/IGlobalProps";
+interface IProps extends Omit<IGlobalProps, "children" | "icon" | "disabled">, ISizes, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "type" | "size"> {
     label?: string;
 }
 export default IProps;

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

@@ -114,7 +114,7 @@ const DatePicker = ({ onChange, isClock, ...attributes }) => {
             if (isNaN(inputDate.getTime()))
                 return;
             const [date, time] = inputDate.toISOString().split("T");
-            const [clock, ms] = time.split(".");
+            const [clock, _] = time.split(".");
             _beginDate.current.value = !_clockOpen.current ? date : `${date}T${clock}`;
         }
     };
@@ -216,14 +216,12 @@ const DatePicker = ({ onChange, isClock, ...attributes }) => {
             document.addEventListener("click", handleClickOutSide);
             document.addEventListener("keydown", handleKeys);
             document.addEventListener("scroll", handleScroll);
-            // Dinleyicileri kaldır ve zamanlayıcıyı temizle.
-            return () => {
-                document.removeEventListener("click", handleClickOutSide);
-                document.removeEventListener("keydown", handleKeys);
-                document.removeEventListener("scroll", handleScroll);
-            };
         }
         else {
+            // Dinleyicileri kaldır ve zamanlayıcıyı temizle.
+            document.removeEventListener("click", handleClickOutSide);
+            document.removeEventListener("keydown", handleKeys);
+            document.removeEventListener("scroll", handleScroll);
             setCalendarClassName((prev) => [...prev, "closed"]);
         }
     }, [dateTrigger, calendarOpen]);

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

@@ -1,8 +1,8 @@
 import React from "react";
 import IButtonProps from "../button/IProps";
 import { Variants } from "../../../libs/types";
-import { IGlobalProps, IValidation } from "../../../libs/types/IGlobalProps";
-interface IProps extends Omit<IGlobalProps, "children" | "disabled">, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size">, IValidation {
+import { IGlobalProps, ISizes, IValidation } from "../../../libs/types/IGlobalProps";
+interface IProps extends Omit<IGlobalProps, "children" | "disabled">, ISizes, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size">, IValidation {
     button?: IButtonProps;
     addon?: {
         variant?: Variants;

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { IGlobalProps } from "../../../libs/types/IGlobalProps";
-interface IProps extends Omit<IGlobalProps, "children">, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size"> {
+import { IGlobalProps, ISizes } from "../../../libs/types/IGlobalProps";
+interface IProps extends Omit<IGlobalProps, "children">, ISizes, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size"> {
     label?: string;
 }
 export default IProps;

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

@@ -1,13 +1,11 @@
 "use client";
-import React, { forwardRef, useRef, useState } from "react";
+import React, { forwardRef, useRef } from "react";
 import "../../../assets/css/components/form/radio/radio.css";
 import Utils from "../../../libs/infrastructure/shared/Utils";
 const Radio = forwardRef(({ label, size = "normal", status, border = { radius: "sm" }, upperCase, ...attributes }, ref) => {
     // refs
     const _checkbox = useRef(null);
     const _checkboxClassName = ["ar-radio"];
-    // states
-    const [checked, setChecked] = useState(false);
     _checkboxClassName.push(...Utils.GetClassName("filled", undefined, border, size, undefined, attributes.className));
     return (React.createElement("div", { className: "ar-radio-wrapper" },
         React.createElement("label", null,
@@ -16,11 +14,6 @@ const Radio = forwardRef(({ label, size = "normal", status, border = { radius: "
                         const _current = _checkbox.current;
                         if (!_current)
                             return;
-                        // 'checked' durumunun false olup olmadığını kontrol et
-                        if (event.target.checked === false) {
-                            console.log("Radio button is unchecked");
-                        }
-                        setChecked(event.target.checked);
                     })();
                     (() => attributes.onChange && attributes.onChange(event))();
                 } }),

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

@@ -153,15 +153,13 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
             document.addEventListener("click", handleClickOutSide);
             document.addEventListener("keydown", handleKeys);
             document.addEventListener("scroll", handleScroll);
-            // Dinleyicileri kaldır ve zamanlayıcıyı temizle.
-            return () => {
-                clearTimeout(_otoFocus);
-                document.removeEventListener("click", handleClickOutSide);
-                document.removeEventListener("keydown", handleKeys);
-                document.removeEventListener("scroll", handleScroll);
-            };
         }
         else {
+            // Dinleyicileri kaldır ve zamanlayıcıyı temizle.
+            clearTimeout(_otoFocus);
+            document.removeEventListener("click", handleClickOutSide);
+            document.removeEventListener("keydown", handleKeys);
+            document.removeEventListener("scroll", handleScroll);
             // Options paneli kapanma süresi 250ms.
             // 300ms sonra temizlenmesinin sebebi kapanırken birder veriler gerliyor ve panel yüksekliği artıyor.
             setTimeout(() => {

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

@@ -75,7 +75,6 @@ export interface IGlobalProps {
      * ```
      */
     border?: Border;
-    size?: Sizes;
     /**
      * Bileşendeki metni büyük harflere dönüştürüp dönüştürmeyeceğini belirtir.
      * Boolean (true/false) değeri alır.

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

@@ -52,3 +52,7 @@ export type ValidationProperties<T> = {
     }[];
     where?: (param: T) => boolean;
 };
+export type PieChartDataType = {
+    value: number;
+    text: string;
+};

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "ar-design",
-  "version": "0.1.56",
+  "version": "0.1.58",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": "./dist/index.js",
+    "./@charts": "./dist/components/charts/index.js",
     "./@service": "./dist/libs/core/service/index.js",
     "./@config": "./dist/libs/core/application/contexts/index.js",
     "./@hooks": "./dist/libs/core/application/hooks/index.js",