ar-design 0.1.22 → 0.1.24

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

@@ -1,5 +1,6 @@
 .ar-chip {
   padding: 0.25rem 0.5rem;
   font-size: 0.75rem;
+  font-weight: 600;
   white-space: nowrap;
 }

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

@@ -36,7 +36,7 @@
 
 .ar-table > .content > table > thead > tr > th {
   background-color: var(--gray-100);
-  padding: 0 0.5rem;
+  padding: 1rem 0.5rem;
   color: var(--gray-700);
   box-shadow: 0 2px 0 0 var(--gray-200);
   text-align: left;
@@ -63,7 +63,7 @@
   box-shadow: 0 0 2px 2px var(--gray-200);
 }
 .ar-table > .content > table > tbody > tr {
-  border-bottom: solid 1px var(--gray-200);
+  border-bottom: solid 2px var(--gray-100);
 }
 .ar-table > .content > table > tbody > tr > td {
   background-color: var(--white);

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

@@ -0,0 +1,162 @@
+.notification {
+  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 {
+  display: flex;
+  flex-direction: row;
+  gap: 0 0.5rem;
+  width: 100%;
+  height: 5rem;
+  border-radius: var(--border-radius-xl);
+  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);
+}
+.notification > .item.information {
+  background-color: var(--info);
+}
+.notification > .item.error {
+  background-color: var(--danger);
+}
+
+.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 {
+  position: absolute;
+  border-radius: var(--border-radius-pill);
+}
+/* .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) {
+  top: 1.5rem;
+  left: 0.5rem;
+  width: 0.5rem;
+  height: 0.5rem;
+}
+.notification > .item > .icon > span:nth-child(3) {
+  top: 2rem;
+  left: 1.75rem;
+  width: 1rem;
+  height: 1rem;
+}
+.notification > .item > .icon > span:nth-child(4) {
+  bottom: -1.5rem;
+  left: -0.5rem;
+  width: 3rem;
+  height: 3rem;
+}
+.notification > .item > .icon > span:nth-child(5) {
+  bottom: 1.15rem;
+  left: 1rem;
+  width: 0.55rem;
+  height: 0.55rem;
+} */
+.notification > .item > .icon > span.success {
+  background-color: var(--success);
+}
+.notification > .item > .icon > span.warning {
+  background-color: var(--warning);
+}
+.notification > .item > .icon > span.information {
+  background-color: var(--info);
+}
+.notification > .item > .icon > span.error {
+  background-color: var(--danger);
+}
+
+.notification > .item > .content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.25rem 0;
+  width: 100%;
+  padding: 0 1rem;
+  color: var(--white);
+}
+.notification > .item > .content > .title {
+  font-size: 1.25rem;
+}
+.notification > .item > .content > .message {
+  font-size: 0.8rem;
+}
+
+.notification > .item > .close {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 2.5rem;
+  background-color: rgba(var(--black-rgb), 0.1);
+  color: rgba(var(--white-rgb), 0.75);
+}
+
+@media only screen and (max-width: 480px) {
+  .notification.top-left {
+    inset: 1rem 1rem auto 1rem;
+  }
+  .notification.top-right {
+    inset: 1rem 1rem auto 1rem;
+  }
+  .notification.bottom-left {
+    inset: auto 1rem 1rem 1rem;
+  }
+  .notification.bottom-right {
+    inset: auto 1rem 1rem 1rem;
+  }
+}
+
+@keyframes openSnackbar {
+  0% {
+    transform: translateX(-500px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes removeSnackbar {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-500px);
+  }
+}

package/dist/assets/css/components/layout/header.css

@@ -3,7 +3,7 @@
   top: 0;
   background-color: rgba(var(--white-rgb), 0.5);
   backdrop-filter: blur(5px);
-  height: 3.75rem;
+  height: 5rem;
   border-bottom: solid 1px var(--gray-200);
   box-shadow: 0 10px 10px -15px rgba(var(--black-rgb), 0.25);
   z-index: 10;
@@ -17,3 +17,8 @@
   height: 100%;
   margin: 0 auto;
 }
+.ar-layout > header > .ar-header-with-wrap > .logo-wrapper {
+  display: flex;
+  flex-direction: row;
+  gap: 0 1rem;
+}

package/dist/assets/css/components/layout/layout.css

@@ -5,25 +5,25 @@
 .ar-layout > main {
   display: flex;
   flex-direction: row;
-  gap: 0 2.5%;
   width: 1280px;
-  margin: 0 auto;
+  margin: 2.5rem auto 0 auto;
 }
 .ar-layout > main > aside.ar-aside {
   position: sticky;
-  top: 5.75rem;
+  top: 5rem;
   height: 100%;
-  margin: 2rem 0;
 }
 .ar-layout > main > aside.ar-aside.left {
   min-width: 20%;
+  min-height: calc(100vh - 7.5rem);
+  border-right: solid 1px var(--gray-200);
 }
 .ar-layout > main > aside.ar-aside.right {
   min-width: 20%;
 }
 .ar-layout > main > section {
   height: fit-content;
-  margin: 2rem 0;
+  padding: 0 2rem;
   border-radius: var(--border-radius-lg);
 }
 .ar-layout > main:not(:has(> .ar-aside)) > section {

package/dist/assets/css/components/navigation/menu/core/open-or-close.css

@@ -1,4 +1,16 @@
 .ar-menu ul li ul {
+  opacity: 0;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 250ms, opacity 250ms ease-in-out;
+}
+
+.ar-menu ul li ul.opened {
+  opacity: 1;
+  max-height: 100rem;
+}
+
+/* .ar-menu ul li ul {
   opacity: 0;
   max-height: 0;
   overflow: hidden;
@@ -38,4 +50,4 @@
 .ar-menu .ar-menu-list-item-group-item-title.ar-angle-up::after {
   top: -1px;
   transform: rotate(585deg);
-}
+} */

package/dist/assets/css/components/navigation/menu/menu.css

@@ -7,53 +7,21 @@
   padding: 0;
   list-style: none;
 }
-.ar-menu ul li:last-child {
-  padding-bottom: 0;
-}
-.ar-menu ul li ul {
-  margin-left: 0.5rem;
-  padding-left: 0.5rem;
-}
-.ar-menu > .ar-menu-list {
-  display: flex;
-}
-.ar-menu .ar-menu-list-item-group-item-title {
-  display: flex;
-  align-items: center;
-  height: 2.5rem;
-  user-select: none;
-}
-.ar-menu .ar-menu-list-item-group-item-title a {
-  color: var(--black);
+.ar-menu ul li a {
+  color: inherit;
   text-decoration: none;
+  letter-spacing: 1px;
 }
-.ar-menu .ar-menu-list-item-group-item-title:not(.group) > * {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  padding: 0 1rem;
-}
-.ar-menu .ar-menu-list-item-group-item-title:not(.group):hover {
-  background-color: var(--gray-200);
-  border-radius: var(--border-radius-lg);
-}
-.ar-menu .ar-menu-list-item-group-item-title.selection-item {
-  background-color: red;
+.ar-menu ul li ul {
+  margin-left: 1rem;
 }
-.ar-menu .ar-menu-list-item-group-item-title.group {
-  display: flex;
-  /* margin-left: 1rem; */
-  padding-left: 0;
-  border-radius: 0;
-  border-bottom: solid 1px var(--gray-100);
-  color: var(--gray-500);
-  font-size: 0.85rem;
+.ar-menu ul li.selected {
+  color: var(--primary);
 }
 
 /* Core Css */
-@import url("./core/selected.css");
+/* @import url("./core/selected.css"); */
 @import url("./core/open-or-close.css");
 
 /* Variant Css */
-@import url("./variant/vertical.css");
+/* @import url("./variant/vertical.css"); */

package/dist/assets/css/core/variants/filled/filled.css

@@ -1,7 +1,7 @@
 /* #region PRIMARY */
 .filled:not(.disabled).primary {
   background-color: var(--primary);
-  color: var(--primary)
+  color: var(--white)
 }
 input.filled:not(.disabled).primary:hover {
   background-color: var(--primary-active);
@@ -30,7 +30,7 @@ button.filled:not(.disabled).primary:focus {
 /* #region SECONDARY */
 .filled:not(.disabled).secondary {
   background-color: var(--secondary);
-  color: var(--secondary)
+  color: var(--white)
 }
 input.filled:not(.disabled).secondary:hover {
   background-color: var(--secondary-active);
@@ -59,7 +59,7 @@ button.filled:not(.disabled).secondary:focus {
 /* #region SUCCESS */
 .filled:not(.disabled).success {
   background-color: var(--success);
-  color: var(--success)
+  color: var(--white)
 }
 input.filled:not(.disabled).success:hover {
   background-color: var(--success-active);
@@ -88,7 +88,7 @@ button.filled:not(.disabled).success:focus {
 /* #region WARNING */
 .filled:not(.disabled).warning {
   background-color: var(--warning);
-  color: var(--warning)
+  color: var(--dark)
 }
 input.filled:not(.disabled).warning:hover {
   background-color: var(--warning-active);
@@ -117,7 +117,7 @@ button.filled:not(.disabled).warning:focus {
 /* #region DANGER */
 .filled:not(.disabled).danger {
   background-color: var(--danger);
-  color: var(--danger)
+  color: var(--white)
 }
 input.filled:not(.disabled).danger:hover {
   background-color: var(--danger-active);
@@ -146,7 +146,7 @@ button.filled:not(.disabled).danger:focus {
 /* #region INFORMATION */
 .filled:not(.disabled).information {
   background-color: var(--information);
-  color: var(--information)
+  color: var(--white)
 }
 input.filled:not(.disabled).information:hover {
   background-color: var(--information-active);
@@ -175,7 +175,7 @@ button.filled:not(.disabled).information:focus {
 /* #region DARK */
 .filled:not(.disabled).dark {
   background-color: var(--dark);
-  color: var(--dark)
+  color: var(--white)
 }
 input.filled:not(.disabled).dark:hover {
   background-color: var(--dark-active);
@@ -204,7 +204,7 @@ button.filled:not(.disabled).dark:focus {
 /* #region LIGHT */
 .filled:not(.disabled).light {
   background-color: var(--light);
-  color: var(--light)
+  color: var(--dark)
 }
 input.filled:not(.disabled).light:hover {
   background-color: var(--light-active);

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

@@ -1,16 +1,10 @@
 "use client";
-import React, { useRef } from "react";
+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, }) => {
-    let _className = useRef("ar-chip").current;
-    // input className
-    if (variant)
-        _className += ` ${variant}`;
-    if (status)
-        _className += ` ${status}`;
-    // border
-    _className += ` border-style-solid`;
-    _className += ` border-radius-${border.radius}`;
-    return React.createElement("span", { className: _className }, text);
+    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);
 };
 export default Chip;

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

@@ -4,9 +4,9 @@ import "../../../assets/css/components/data-display/paper/paper.css";
 const { Title } = Typography;
 const Paper = ({ children, title, action, }) => {
     return (React.createElement("div", { className: "ar-paper" },
-        React.createElement("div", { className: "header" },
+        (title || action) && (React.createElement("div", { className: "header" },
             title && (React.createElement(Title, { Level: "h3", upperCase: true }, title)),
-            action && React.createElement("div", { className: "actions-field" }, action)),
+            action && React.createElement("div", { className: "actions-field" }, action))),
         React.createElement("div", { className: "content" }, children)));
 };
 export default Paper;

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

@@ -1,3 +1,4 @@
+"use client";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import "../../../assets/css/components/data-display/table/table.css";
 import Checkbox from "../../form/checkbox";
@@ -90,6 +91,21 @@ const Table = function ({ children, data, columns, selections, config, }) {
             updateStickyPositions(tbodyElements);
         });
     };
+    // Derinlemesine arama yapmak için özyinelemeli bir fonksiyon tanımlayalım.
+    const deepSearch = (value, searchedTexts) => {
+        if (value === null || value === undefined)
+            return false;
+        // Eğer değer bir sayı veya string ise, aranan metinle eşleşip eşleşmediğini kontrol ediyoruz.
+        if (typeof value === "number" || typeof value === "string") {
+            return searchedTexts.some((_searchedText) => value.toString().toLowerCase().includes(_searchedText));
+        }
+        // Eğer değer bir nesne veya dizi ise, içindeki her bir değeri yine deepSearch fonksiyonuyla kontrol ediyoruz.
+        if (typeof value === "object") {
+            return Object.values(value).some((innerValue) => deepSearch(innerValue, searchedTexts));
+        }
+        // Diğer türlerdeki değerleri atla.
+        return false;
+    };
     const getData = useCallback(() => {
         let _data = [...data];
         _dataLength.current = data.length;
@@ -99,19 +115,7 @@ const Table = function ({ children, data, columns, selections, config, }) {
         return searchedText
             ? _data.filter((item) => {
                 // `some` kullanarak herhangi bir girişin arama koşulunu karşılayıp karşılamadığını kontrol ediyoruz.
-                return Object.entries(item).some(([_key, _value]) => {
-                    if (typeof _value === "number" || typeof _value === "string") {
-                        // Değeri string'e dönüştürüp, aranan metni içerip içermediğini kontrol ediyoruz (büyük-küçük harf duyarsız).
-                        return _value.toString().toLowerCase().includes(searchedText.toLowerCase());
-                    }
-                    // Eğer değer bir nesne ise (bu mantığı ihtiyaçlarınıza göre özelleştirebilirsiniz).
-                    if (typeof _value === "object" && _value !== null) {
-                        // Örnek: Eğer nesne ise, bu alanı atla veya farklı şekilde ele al.
-                        return false;
-                    }
-                    // Diğer türlerdeki (boolean, undefined vs.) değerleri atla.
-                    return false;
-                });
+                return Object.entries(item).some(([_key, _value]) => deepSearch(_value, searchedText.split(",").map((text) => text.trim().toLowerCase())));
             })
             : _data;
     }, [data, searchedText, currentPage]);
@@ -122,7 +126,10 @@ const Table = function ({ children, data, columns, selections, config, }) {
         selections(selectionItems);
     }, [selectionItems]);
     useEffect(() => {
-        const allChecked = _checkboxItems.current.every((item) => item?.checked === true);
+        let allChecked = false;
+        if (_checkboxItems.current.length > 0) {
+            allChecked = _checkboxItems.current.every((item) => item?.checked === true);
+        }
         setSelectAll(allChecked);
     }, [currentPage]);
     return (React.createElement("div", { ref: _tableWrapper, className: _tableClassName.map((c) => c).join(" ") },
@@ -169,11 +176,28 @@ const Table = function ({ children, data, columns, selections, config, }) {
                             } }))),
                     columns.map((c, cIndex) => {
                         let _className = [];
-                        const render = c.render ? c.render(item) : item[c.key];
+                        let render; // TODO: Generic yapmak için çalışma yap. (Daha Sonra)
+                        // `c.key` bir string ise
+                        if (typeof c.key !== "object") {
+                            render = c.render ? c.render(item) : item[c.key];
+                        }
+                        // `c.key` bir nesne ise ve `nestedKey` mevcutsa
+                        else if (typeof c.key === "object") {
+                            const _item = item[c.key.field];
+                            if (_item && typeof _item === "object") {
+                                render = c.render
+                                    ? c.render(item)
+                                    : _item[c.key.nestedKey];
+                            }
+                        }
+                        // Diğer durumlarda `null` döndür
+                        else {
+                            render = null;
+                        }
                         // const isTypeOfNumber = typeof render === "number" ? "type-of-number" : "";
+                        // if (isTypeOfNumber) _className.push(isTypeOfNumber);
                         if (c.config?.sticky)
                             _className.push(`sticky-${c.config.sticky}`);
-                        // if (isTypeOfNumber) _className.push(isTypeOfNumber);
                         if (c.config?.alignContent) {
                             _className.push(`align-content-${c.config.alignContent}`);
                         }

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

@@ -1,3 +1,4 @@
+"use client";
 import React, { useEffect, useRef } from "react";
 import "../../../assets/css/components/feedback/modal/modal.css";
 import Typography from "../../data-display/typography";

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

@@ -0,0 +1,9 @@
+import { Direction } from "../../../libs/core/application/contexts/Notification";
+interface IProps {
+    title: string;
+    message?: string;
+    status: string;
+    direction: Direction;
+    trigger: boolean;
+}
+export default IProps;

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

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

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

@@ -0,0 +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;
+export default Notification;

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

@@ -0,0 +1,40 @@
+"use client";
+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 _interval = useRef();
+    // useStates
+    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 }]);
+    }, [trigger]);
+    useEffect(() => {
+        if (items.length === 0)
+            return;
+        // Ekleme işlemi bittikten bir süre sonra tekrar kaldırma işlemi yapılmaktadır.
+        _interval.current = setTimeout(() => {
+            setItems((items) => items.slice(0, -1));
+            clearTimeout(_interval.current);
+        }, 2500);
+    }, [items]);
+    return (React.createElement("div", { className: `notification ${direction}` }, items.map((item, index) => (React.createElement(React.Fragment, { key: index }, item.element)))));
+};
+export default Notification;

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

@@ -1,7 +1,6 @@
 "use client";
 import React, { useEffect, useState } from "react";
 import "../../../assets/css/components/form/button-group/button-group.css";
-import Button from "../button";
 import Alert from "../../feedback/alert";
 const ButtonGroup = ({ children }) => {
     // states
@@ -9,11 +8,11 @@ const ButtonGroup = ({ children }) => {
     useEffect(() => {
         try {
             // Çocuk elemanların sadece `Button` bileşenleri olduğundan emin olun
-            React.Children.forEach(children, (child) => {
-                if (!React.isValidElement(child) || child.type !== Button) {
-                    throw new Error("ButtonGroup can only have Button elements as children.");
-                }
-            });
+            // React.Children.forEach(children, (child) => {
+            //   if (!React.isValidElement(child) || child.type !== Button) {
+            //     throw new Error("ButtonGroup can only have Button elements as children.");
+            //   }
+            // });
             // Hata yoksa, error'u temizle
             setError(null);
         }

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

@@ -236,8 +236,11 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
                         onChange(undefined);
                     }
                 } })),
-            React.createElement("span", { className: `angel-down ${optionsOpen ? "opened" : "closed"}`, onClick: () => setOptionsOpen((x) => !x) })),
-        React.createElement("div", { ref: _options, className: optionsClassName.map((className) => className).join(" ") },
+            React.createElement("span", { className: `angel-down ${optionsOpen ? "opened" : "closed"}`, onClick: (event) => {
+                    event.stopPropagation();
+                    setOptionsOpen((x) => !x);
+                } })),
+        React.createElement("div", { ref: _options, className: optionsClassName.map((c) => c).join(" ") },
             multiple && (React.createElement("div", { className: "search-field" },
                 React.createElement(Input, { ref: _searchField, variant: "outlined", status: "light", placeholder: "Search...", onKeyUp: (event) => {
                         // Arama yapmak için kullanılan state bu kısımda dolduruluyor.

package/dist/components/layout/Header.js

@@ -1,11 +1,12 @@
 "use client";
 import React from "react";
-import Menu from "../navigation/menu";
-const Header = ({ logo, menu }) => {
+const Header = ({ logoWrapper, actions }) => {
     return (React.createElement("header", null,
         React.createElement("div", { className: "ar-header-with-wrap" },
-            typeof logo === "string" ? React.createElement("h1", null, logo) : logo,
-            React.createElement(Menu, { data: menu, variant: "horizontal" }))));
+            React.createElement("div", { className: "logo-wrapper" },
+                logoWrapper?.image && logoWrapper.image,
+                logoWrapper?.text && React.createElement("h1", null, logoWrapper.text)),
+            actions && actions)));
 };
 Header.displayName = "Layout.Header";
 export default Header;

package/dist/components/layout/IProps.d.ts

@@ -1,10 +1,13 @@
-import { MenuProps } from "../../libs/types";
+import React from "react";
 import { IGlobalProps } from "../../libs/types/IGlobalProps";
 interface ILayoutProps extends Omit<IGlobalProps, "variant" | "status" | "icon" | "border" | "size" | "upperCase"> {
 }
 interface IHeaderProps {
-    logo: string | React.JSX.Element;
-    menu: MenuProps[];
+    logoWrapper?: {
+        image?: React.ReactElement<SVGElement | HTMLImageElement>;
+        text?: string | React.JSX.Element;
+    };
+    actions?: React.ReactNode[];
 }
 interface IMainProps extends Omit<IGlobalProps, "variant" | "status" | "icon" | "border" | "size" | "upperCase"> {
 }

package/dist/components/navigation/menu/index.js

@@ -1,25 +1,17 @@
 "use client";
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import "../../../assets/css/components/navigation/menu/menu.css";
 import Divider from "../../data-display/divider";
-const handleOnClick = (event, item, variant, setSelectedItem, setSelectedMenu) => {
+const handleOnClick = (event) => {
     event.stopPropagation();
-    if (variant === "vertical" && item.type === "group")
-        return;
-    const _current = event.target;
-    const ulElement = _current.nextElementSibling;
-    if (_current && item.submenu && item.submenu.length > 0) {
-        _current.classList.toggle("ar-angle-down");
-        _current.classList.toggle("ar-angle-up");
-    }
-    if (ulElement)
-        ulElement.classList.toggle("opened");
-    // Birden fazla menü açılmışsa...
-    if (setSelectedMenu)
-        setSelectedMenu((prevSelectedMenu) => [...prevSelectedMenu, item]);
+    const target = event.currentTarget;
+    const ul = Array.from(target.childNodes).filter((child) => child instanceof HTMLUListElement);
+    if (ul.length > 0)
+        ul[0].classList.toggle("opened");
     else {
-        if (setSelectedItem)
-            setSelectedItem(item);
+        const selectedItems = document.querySelectorAll(".selected");
+        selectedItems.forEach((item) => item.classList.remove("selected"));
+        target.classList.add("selected");
     }
 };
 /**
@@ -32,68 +24,33 @@ const handleOnClick = (event, item, variant, setSelectedItem, setSelectedMenu) =
 const SubMenu = ({ items, variant, type, setSelectedMenu, selectedMenu, setSelectedItem, selectedItem }) => {
     if (!items)
         return null;
-    // refs
-    let _className_ul = useRef("ar-menu-list-item-groups").current;
+    let className = ["list"];
     if (variant === "vertical" && type === "group")
-        _className_ul += " opened";
-    return (React.createElement("ul", { className: _className_ul }, items.map((item, index) => {
-        // refs
-        let _className_li = useRef("ar-menu-list-item-group-item").current;
-        let _className_groupTitle = useRef("ar-menu-list-item-group-item-title").current;
-        if (variant === "vertical" && item.type === "group")
-            _className_groupTitle += " group";
+        className.push("opened");
+    return (React.createElement("ul", { className: className.map((c) => c).join(" ") }, items.map((item, index) => {
+        let className_li = ["item"];
         if (item.submenu && item.submenu.length > 0) {
             if (variant === "horizontal" || item.type !== "group")
-                _className_groupTitle += " ar-angle-down";
-            // Eğer seçili olan menüyse "selected" sınıfını ekler.
-            if (selectedMenu.length > 0 && selectedMenu.includes(item) && item.type !== "group") {
-                _className_li += " selected";
-            }
+                if (selectedMenu.length > 0 && selectedMenu.includes(item) && item.type !== "group") {
+                    // Eğer seçili olan menüyse "selected" sınıfını ekler.
+                    className_li.push("selected");
+                }
         }
-        // Eğer seçili olan menüyse "selected" sınıfını ekler.
-        // if (selectedItem === item) _className_groupTitle += " selected";
-        return (React.createElement("li", { key: index, className: _className_li, onClick: (event) => {
-                if (item.submenu && item.submenu.length > 0)
-                    handleOnClick(event, item, variant, null, setSelectedMenu);
-                else
-                    handleOnClick(event, item, variant, setSelectedItem, null);
-            } },
-            React.createElement("div", { className: _className_groupTitle }, item.render),
+        return (React.createElement("li", { key: index, className: className_li.map((c) => c).join(" "), onClick: handleOnClick },
+            item.render,
             item.submenu && (React.createElement(SubMenu, { items: item.submenu, variant: variant, type: item.type, setSelectedMenu: setSelectedMenu, selectedMenu: selectedMenu, setSelectedItem: setSelectedItem, selectedItem: selectedItem }))));
     })));
 };
 const Menu = ({ data, variant = "vertical", ...attributes }) => {
     // refs
-    let _className_li = useRef("ar-menu-list-item").current;
+    let _className_li = ["item"];
     // states
     const [selectedMenu, setSelectedMenu] = useState([]);
     const [selectedItem, setSelectedItem] = useState(null);
-    const handleClassName = () => {
-        let className = "ar-menu-list";
-        if (variant)
-            className += ` ${variant}`;
-        return className;
-    };
     return (React.createElement("nav", { className: "ar-menu", ...attributes },
-        React.createElement("ul", { className: handleClassName() }, data.map((item, index) => {
-            // refs
-            let _className_groupTitle = useRef("ar-menu-list-item-group-item-title").current;
-            if (variant === "vertical" && item.type === "group")
-                _className_groupTitle += " group";
-            if (item.submenu && item.submenu.length > 0) {
-                if (variant === "horizontal" || item.type !== "group")
-                    _className_groupTitle += " ar-angle-down";
-            }
-            // Eğer seçili olan menüyse "selected" sınıfını ekler.
-            // if (
-            //   selectedMenu.length > 0 &&
-            //   selectedMenu.includes(item) &&
-            //   item.type !== "group" &&
-            //   variant !== "horizontal"
-            // )
-            //   _className_li += " selected";
-            return (React.createElement("li", { key: index, className: _className_li, onClick: (event) => handleOnClick(event, item, variant, null, setSelectedMenu) },
-                item.type === "divider" ? (React.createElement(Divider, null)) : (React.createElement("div", { className: _className_groupTitle }, item.render)),
+        React.createElement("ul", { className: "list" }, data.map((item, index) => {
+            return (React.createElement("li", { key: index, className: _className_li.map((c) => c).join(" "), onClick: handleOnClick },
+                item.type === "divider" ? React.createElement(Divider, null) : item.render,
                 item.submenu && (React.createElement(SubMenu, { items: item.submenu, variant: variant, type: item.type, setSelectedMenu: setSelectedMenu, selectedMenu: selectedMenu, setSelectedItem: setSelectedItem, selectedItem: selectedItem }))));
         }))));
 };

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

@@ -23,4 +23,4 @@ type ConfigProviderProps = {
 };
 export declare const ConfigContext: React.Context<ConfigContextProps>;
 declare const ConfigProvider: ({ children }: ConfigProviderProps) => React.JSX.Element;
-export default ConfigProvider;
+export { ConfigProvider };

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

@@ -17,4 +17,4 @@ const ConfigProvider = ({ children }) => {
     const [config, setConfig] = useState(defaultOptions);
     return React.createElement(ConfigContext.Provider, { value: { config, setConfig } }, children);
 };
-export default ConfigProvider;
+export { ConfigProvider };

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

@@ -0,0 +1,16 @@
+import React, { ReactNode } from "react";
+export type Status = "success" | "warning" | "information" | "error";
+export type Direction = "top-left" | "top-right" | "bottom-left" | "bottom-right";
+type Props = {
+    children: ReactNode;
+    direction: Direction;
+};
+type NotificationContextProps = {
+    setTitle: React.Dispatch<React.SetStateAction<string>>;
+    setMessage: React.Dispatch<React.SetStateAction<string>>;
+    setStatus: React.Dispatch<React.SetStateAction<Status>>;
+    setTrigger: React.Dispatch<React.SetStateAction<boolean>>;
+};
+declare const NotificationContext: React.Context<Partial<NotificationContextProps>>;
+declare const NotificationProvider: ({ children, direction }: Props) => React.JSX.Element;
+export { NotificationContext, NotificationProvider };

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

@@ -0,0 +1,19 @@
+"use client";
+import React, { createContext, useState } from "react";
+import Notification from "../../../../components/feedback/notification";
+const NotificationContext = createContext({});
+const NotificationProvider = ({ children, direction }) => {
+    const [title, setTitle] = useState("Example");
+    const [message, setMessage] = useState("Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.");
+    const [status, setStatus] = useState("success");
+    const [trigger, setTrigger] = useState(false);
+    return (React.createElement(NotificationContext.Provider, { value: {
+            setTitle,
+            setMessage,
+            setStatus,
+            setTrigger,
+        } },
+        children,
+        React.createElement(Notification, { title: title, message: message, status: status, direction: direction, trigger: trigger })));
+};
+export { NotificationContext, NotificationProvider };

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

@@ -0,0 +1,3 @@
+import { ConfigProvider } from "./Config";
+import { NotificationProvider } from "./Notification";
+export { ConfigProvider, NotificationProvider };

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

@@ -0,0 +1,3 @@
+import { ConfigProvider } from "./Config";
+import { NotificationProvider } from "./Notification";
+export { ConfigProvider, NotificationProvider };

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

@@ -1,3 +1,4 @@
+import { Status } from "../contexts/Notification";
 export declare const useLayout: () => {
     config: {
         layout: {
@@ -30,3 +31,10 @@ export declare const useLayout: () => {
         perPage: number;
     }>>;
 };
+export declare const useNotification: () => {
+    notification: ({ title, message, status, }: {
+        title: string;
+        message?: string;
+        status: Status;
+    }) => void;
+};

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

@@ -1,5 +1,6 @@
 import { useContext } from "react";
 import { ConfigContext } from "../contexts/Config";
+import { NotificationContext } from "../contexts/Notification";
 export const useLayout = () => {
     const context = useContext(ConfigContext);
     if (!context) {
@@ -7,3 +8,15 @@ export const useLayout = () => {
     }
     return context;
 };
+export const useNotification = () => {
+    // contexts
+    const { setTitle, setMessage, setStatus, setTrigger } = useContext(NotificationContext);
+    // methods
+    const notification = ({ title, message, status, }) => {
+        setTitle && setTitle(title);
+        setMessage && setMessage(message ?? "");
+        setStatus && setStatus(status);
+        setTrigger && setTrigger((trigger) => !trigger);
+    };
+    return { notification };
+};

package/dist/libs/core/service/Api.d.ts

@@ -5,24 +5,24 @@ declare class Api {
         host?: string;
         core?: string;
     });
-    Get<T>(values: {
+    Get(values: {
         input?: RequestInfo | undefined;
         headers?: HeadersInit;
-    }): Promise<T>;
-    Post<T>(values: {
+    }): Promise<Response>;
+    Post(values: {
         input?: RequestInfo;
         data: any;
         headers?: HeadersInit;
-    }): Promise<T>;
-    Put<T>(values: {
+    }): Promise<Response>;
+    Put(values: {
         input?: RequestInfo;
         data?: any;
         headers?: HeadersInit;
-    }): Promise<T>;
-    Delete<T>(values: {
+    }): Promise<Response>;
+    Delete(values: {
         input?: RequestInfo;
         headers?: HeadersInit;
-    }): Promise<T>;
+    }): Promise<Response>;
     /**
      * Burada bir fetch işlemi gerçekleştirilmekte fakat farklı olarak burayı `interceptor` olarak kullanmaktayız.
      * @param input

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

@@ -6,25 +6,25 @@ class Api {
         this._core = values.core || "";
     }
     async Get(values) {
-        const request = await this.CustomFetch(`${this._host}/${this._core ? this._core + "/" : ""}${values.input}`, {
+        const response = await this.CustomFetch(`${this._host}/${this._core ? this._core + "/" : ""}${values.input}`, {
             headers: {
                 ...this.HeaderProperties,
                 ...values.headers,
             },
             method: "GET",
         });
-        return await request.json();
+        return response;
     }
     async Post(values) {
-        const request = await this.CustomFetch(`${this._host}/${this._core ? this._core + "/" : ""}${values.input}`, {
+        const response = await this.CustomFetch(`${this._host}/${this._core ? this._core + "/" : ""}${values.input}`, {
             headers: { ...this.HeaderProperties, ...values.headers },
             method: "POST",
             body: JSON.stringify(values.data),
         });
-        return await request.json();
+        return response;
     }
     async Put(values) {
-        const request = await this.CustomFetch(`${this._host}/${this._core ? this._core + "/" : ""}${values.input}`, {
+        const response = await this.CustomFetch(`${this._host}/${this._core ? this._core + "/" : ""}${values.input}`, {
             headers: {
                 ...this.HeaderProperties,
                 ...values.headers,
@@ -32,17 +32,17 @@ class Api {
             method: "PUT",
             body: JSON.stringify(values.data),
         });
-        return await request.json();
+        return response;
     }
     async Delete(values) {
-        const request = await this.CustomFetch(`${this._host}/${this._core ? this._core + "/" : ""}${values.input}`, {
+        const response = await this.CustomFetch(`${this._host}/${this._core ? this._core + "/" : ""}${values.input}`, {
             headers: {
                 ...this.HeaderProperties,
                 ...values.headers,
             },
             method: "DELETE",
         });
-        return await request.json();
+        return response;
     }
     /**
      * Burada bir fetch işlemi gerçekleştirilmekte fakat farklı olarak burayı `interceptor` olarak kullanmaktayız.

package/dist/libs/core/service/index.d.ts

@@ -1,3 +1,8 @@
+type Result = {
+    __ok__: boolean;
+    __statusCode__: number;
+    __statusText__: string;
+};
 declare class Service {
     private _api;
     private _endPoint;
@@ -6,23 +11,23 @@ declare class Service {
         core?: string;
         endPoint: string;
     });
-    Get<T>(values?: {
+    Get<TResponse>(values?: {
         input?: string;
         headers?: HeadersInit | undefined;
-    }): Promise<T>;
-    Post<T, TData>(values?: {
+    }): Promise<TResponse & Result>;
+    Post<TResponse, TData>(values?: {
         input?: RequestInfo;
         data: TData;
         headers?: HeadersInit;
-    }): Promise<T>;
-    Put<T, TData>(values?: {
+    }): Promise<TResponse & Result>;
+    Put<TResponse, TData>(values?: {
         input?: RequestInfo;
         data?: TData;
         headers?: HeadersInit;
-    }): Promise<T>;
-    Delete<T>(values?: {
+    }): Promise<TResponse & Result>;
+    Delete<TResponse>(values?: {
         input?: RequestInfo;
         headers?: HeadersInit;
-    }): Promise<T>;
+    }): Promise<TResponse & Result>;
 }
 export default Service;

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

@@ -7,42 +7,90 @@ class Service {
         this._endPoint = values.endPoint;
     }
     async Get(values) {
-        let endPoint = `${this._endPoint}`;
-        if (values?.input)
-            endPoint += `/${values.input}`;
-        return await this._api.Get({
-            input: endPoint,
-            headers: values?.headers,
-        });
+        try {
+            let endPoint = `${this._endPoint}`;
+            if (values?.input)
+                endPoint += `/${values.input}`;
+            const response = await this._api.Get({
+                input: endPoint,
+                headers: values?.headers,
+            });
+            const text = (await response.text()).trim();
+            return {
+                ...(text.length > 0 ? await response.json() : {}),
+                __ok__: response.ok,
+                __statusCode__: response.status,
+                __statusText__: response.statusText,
+            };
+        }
+        catch (error) {
+            throw new Error(error instanceof Error ? error.message : "Beklenmeyen bir hata oluştu.");
+        }
     }
     async Post(values) {
-        let endPoint = `${this._endPoint}`;
-        if (values?.input)
-            endPoint += `/${values.input}`;
-        return await this._api.Post({
-            input: endPoint,
-            data: values?.data,
-            headers: values?.headers,
-        });
+        try {
+            let endPoint = `${this._endPoint}`;
+            if (values?.input)
+                endPoint += `/${values.input}`;
+            const response = await this._api.Post({
+                input: endPoint,
+                data: values?.data,
+                headers: values?.headers,
+            });
+            const text = (await response.text()).trim();
+            return {
+                ...(text.length > 0 ? await response.json() : {}),
+                __ok__: response.ok,
+                __statusCode__: response.status,
+                __statusText__: response.statusText,
+            };
+        }
+        catch (error) {
+            throw new Error(error instanceof Error ? error.message : "Beklenmeyen bir hata oluştu.");
+        }
     }
     async Put(values) {
-        let endPoint = `${this._endPoint}`;
-        if (values?.input)
-            endPoint += `/${values.input}`;
-        return await this._api.Put({
-            input: endPoint,
-            data: values?.data,
-            headers: values?.headers,
-        });
+        try {
+            let endPoint = `${this._endPoint}`;
+            if (values?.input)
+                endPoint += `/${values.input}`;
+            const response = await this._api.Put({
+                input: endPoint,
+                data: values?.data,
+                headers: values?.headers,
+            });
+            const text = (await response.text()).trim();
+            return {
+                ...(text.length > 0 ? await response.json() : {}),
+                __ok__: response.ok,
+                __statusCode__: response.status,
+                __statusText__: response.statusText,
+            };
+        }
+        catch (error) {
+            throw new Error(error instanceof Error ? error.message : "Beklenmeyen bir hata oluştu.");
+        }
     }
     async Delete(values) {
-        let endPoint = `${this._endPoint}`;
-        if (values?.input)
-            endPoint += `/${values.input}`;
-        return await this._api.Delete({
-            input: endPoint,
-            headers: values?.headers,
-        });
+        try {
+            let endPoint = `${this._endPoint}`;
+            if (values?.input)
+                endPoint += `/${values.input}`;
+            const response = await this._api.Delete({
+                input: endPoint,
+                headers: values?.headers,
+            });
+            const text = (await response.text()).trim();
+            return {
+                ...(text.length > 0 ? await response.json() : {}),
+                __ok__: response.ok,
+                __statusCode__: response.status,
+                __statusText__: response.statusText,
+            };
+        }
+        catch (error) {
+            throw new Error(error instanceof Error ? error.message : "Beklenmeyen bir hata oluştu.");
+        }
     }
 }
 export default Service;

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

@@ -25,10 +25,13 @@ export type MenuItemVariants = "vertical" | "horizontal";
 export type MenuItemType = "group" | "divider";
 export type TableColumnType<T> = {
     title: string;
-    key?: keyof T;
+    key?: keyof T | {
+        field: keyof T;
+        nestedKey: string;
+    };
     render?: (item: T) => React.ReactNode;
     config?: {
-        alignContent: "left" | "center" | "right";
+        alignContent?: "left" | "center" | "right";
         sticky?: "left" | "right";
     };
 };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "ar-design",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": "./dist/index.js",
     "./@service": "./dist/libs/core/service/index.js",
-    "./@config": "./dist/libs/core/application/contexts/Config.js",
+    "./@config": "./dist/libs/core/application/contexts/index.js",
     "./@hooks": "./dist/libs/core/application/hooks/index.js",
     "./@types": "./dist/libs/types/index.js",
     "./@styles": "./dist/assets/css/core/ar-core.css"