ar-design 0.1.21 → 0.1.23

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

@@ -2,45 +2,29 @@
 import React, { forwardRef } from "react";
 import "../../../assets/css/components/form/input/input.css";
 import Button from "../button";
-const Input = forwardRef(({ variant = "outlined", status = "light", icon, border = { radius: "sm" }, button, addon, ...attributes }, ref) => {
+import Utils from "../../../libs/infrastructure/shared/Utils";
+const Input = forwardRef(({ variant = "outlined", status = "light", size = "normal", icon, border = { radius: "sm" }, button, addon, ...attributes }, ref) => {
     // variables
-    let _wrapperClassName = "ar-input-wrapper";
-    let _addonBeforeClassName = "addon-before";
-    let _addonAfterClassName = "addon-after";
-    let _inputWrapperClassName = "ar-input";
-    let _inputClassName = "";
-    // input wrapper className
-    if (icon && icon.element) {
-        _inputWrapperClassName += ` icon`;
-        _inputWrapperClassName += ` icon-${icon.position ?? "start"}`;
-    }
-    // input className
-    if (variant)
-        _inputClassName += `${variant}`;
-    if (status)
-        _inputClassName += ` ${status}`;
-    // border radius
-    _inputClassName += ` border-radius-${border.radius}`;
+    const _wrapperClassName = ["ar-input-wrapper"];
+    const _addonBeforeClassName = ["addon-before"];
+    const _addonAfterClassName = ["addon-after"];
+    const _inputClassName = [];
+    _inputClassName.push(...Utils.GetClassName(variant, status, border, size, icon, attributes.className));
     // addon className
     if (addon) {
-        _wrapperClassName += ` addon`;
-        // variant
-        _addonBeforeClassName += ` ${addon?.variant || "filled"}`;
-        _addonAfterClassName += ` ${addon?.variant || "filled"}`;
-        // status
-        _addonBeforeClassName += ` ${status}`;
-        _addonAfterClassName += ` ${status}`;
-        // border radius
-        _addonBeforeClassName += ` border-radius-${border?.radius || "sm"}`;
-        _addonAfterClassName += ` border-radius-${border?.radius || "sm"}`;
+        _wrapperClassName.push("addon");
+        _addonBeforeClassName.push(`${addon.variant || "filled"}`);
+        _addonBeforeClassName.push(`${status}`);
+        _addonAfterClassName.push(`${addon.variant || "filled"}`);
+        _addonAfterClassName.push(`${status}`);
+        _addonBeforeClassName.push(`border-radius-${border.radius}`);
+        _addonAfterClassName.push(`border-radius-${border.radius}`);
     }
-    if (attributes.className)
-        _inputClassName += ` ${attributes.className}`;
-    return (React.createElement("div", { className: _wrapperClassName },
-        addon?.before && React.createElement("span", { className: _addonBeforeClassName }, addon?.before),
-        React.createElement("div", { className: _inputWrapperClassName },
+    return (React.createElement("div", { className: _wrapperClassName.map((c) => c).join(" ") },
+        addon?.before && (React.createElement("span", { className: _addonBeforeClassName.map((c) => c).join(" ") }, addon?.before)),
+        React.createElement("div", { className: "ar-input" },
             icon?.element && React.createElement("span", { className: "icon-element" }, icon.element),
-            React.createElement("input", { ref: ref, ...attributes, size: 20, className: _inputClassName, onChange: (event) => {
+            React.createElement("input", { ref: ref, ...attributes, size: 20, className: _inputClassName.map((c) => c).join(" "), onChange: (event) => {
                     // Disabled gelmesi durumunda işlem yapmasına izin verme...
                     if (attributes.disabled)
                         return;
@@ -57,7 +41,7 @@ const Input = forwardRef(({ variant = "outlined", status = "light", icon, border
                         }
                     })();
                 } })),
-        addon?.after && React.createElement("span", { className: _addonAfterClassName }, addon?.after),
+        addon?.after && (React.createElement("span", { className: _addonAfterClassName.map((c) => c).join(" ") }, addon?.after)),
         button && (React.createElement(Button, { ...button, status: status, border: { radius: border.radius }, disabled: attributes.disabled }))));
 });
 Input.displayName = "Input";

package/dist/components/form/select/Props.d.ts

@@ -1,4 +1,4 @@
-import { Status, Variants, Option } from "../../../libs/types";
+import { Variants, Option, Status } from "../../../libs/types";
 import { IGlobalProps } from "../../../libs/types/IGlobalProps";
 interface IMultiple {
     status?: {

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

@@ -5,9 +5,9 @@ import "../../../assets/css/components/form/select/select.css";
 import Chip from "../../data-display/chip";
 import Checkbox from "../checkbox";
 import Paragraph from "../../data-display/typography/paragraph/Paragraph";
-const Select = ({ variant = "outlined", status, border, options, onChange, multiple, defaultValueIndex, ...attributes }) => {
+const Select = ({ variant = "outlined", status, border = { radius: "sm" }, options, onChange, multiple, defaultValueIndex, ...attributes }) => {
     // refs
-    let _selectionClassName = useRef("selections").current;
+    let _selectionClassName = "selections";
     const _arSelect = useRef(null);
     const _singleInput = useRef(null);
     const _multipleInput = useRef(null);
@@ -19,18 +19,18 @@ const Select = ({ variant = "outlined", status, border, options, onChange, multi
     let _selectedItemIndex = useRef(0);
     // states
     const [optionsOpen, setOptionsOpen] = useState(false);
+    let [optionsClassName, setOptionsClassName] = useState(["options", "closed"]);
     const [filteredOptions, setFilteredOptions] = useState([]);
     const [searchText, setSearchText] = useState("");
     const [selection, setSelection] = useState(undefined);
     const [selections, setSelections] = useState([]);
     const [navigationIndex, setNavigationIndex] = useState(0);
-    let [optionsClassName, setOptionsClassName] = useState(["options", "closed"]);
     // selection className
     if (variant)
         _selectionClassName += ` ${variant}`;
     _selectionClassName += multiple ? ` ${status?.color || "light"}` : status || "light";
     // border
-    _selectionClassName += ` border-radius-${border?.radius || "sm"}`;
+    _selectionClassName += ` border-radius-${border.radius}`;
     _selectionClassName += ` border-style-solid}`;
     // methods
     const handleClickOutSide = (event) => {
@@ -39,6 +39,40 @@ const Select = ({ variant = "outlined", status, border, options, onChange, multi
             setOptionsOpen(false);
         }
     };
+    const handleKeys = (event) => {
+        const key = event.key;
+        const optionItems = _optionItems.current.filter((optionItem) => optionItem !== null);
+        if (key === "ArrowUp" || key === "ArrowLeft") {
+            setNavigationIndex((prev) => {
+                let result = 0;
+                if (prev > 0)
+                    result = prev - 1;
+                if (prev === 0)
+                    result = optionItems.length - 1;
+                _navigationIndex.current = result;
+                return result;
+            });
+        }
+        else if (key === "ArrowDown" || key === "ArrowRight") {
+            setNavigationIndex((prev) => {
+                let result = 0;
+                if (prev === optionItems.length - 1)
+                    result = 0;
+                if (prev < optionItems.length - 1)
+                    result = prev + 1;
+                _navigationIndex.current = result;
+                return result;
+            });
+        }
+        else if (key === "Enter") {
+            if (_navigationIndex.current === -1)
+                return;
+            optionItems[_navigationIndex.current]?.click();
+        }
+        else if (key === "Escape") {
+            setOptionsOpen(false);
+        }
+    };
     const handleItemSelected = (option, index) => {
         // Multiple
         if (multiple) {
@@ -77,41 +111,8 @@ const Select = ({ variant = "outlined", status, border, options, onChange, multi
             _optionItems.current[index]?.classList.add("selectedItem");
         }
     };
-    const handleKeys = (event) => {
-        const key = event.key;
-        const optionItems = _optionItems.current.filter((optionItem) => optionItem !== null);
-        if (key === "ArrowUp" || key === "ArrowLeft") {
-            setNavigationIndex((prev) => {
-                let result = 0;
-                if (prev > 0)
-                    result = prev - 1;
-                if (prev === 0)
-                    result = optionItems.length - 1;
-                _navigationIndex.current = result;
-                return result;
-            });
-        }
-        else if (key === "ArrowDown" || key === "ArrowRight") {
-            setNavigationIndex((prev) => {
-                let result = 0;
-                if (prev === optionItems.length - 1)
-                    result = 0;
-                if (prev < optionItems.length - 1)
-                    result = prev + 1;
-                _navigationIndex.current = result;
-                return result;
-            });
-        }
-        else if (key === "Enter") {
-            if (_navigationIndex.current === -1)
-                return;
-            optionItems[_navigationIndex.current]?.click();
-        }
-        else if (key === "Escape") {
-            setOptionsOpen(false);
-        }
-    };
     // effects
+    useEffect(() => setFilteredOptions(options), [options]);
     useEffect(() => {
         const optionItems = _optionItems.current.filter((optionItem) => optionItem !== null);
         const screenCenter = window.innerHeight / 2 + 100;
@@ -131,7 +132,7 @@ const Select = ({ variant = "outlined", status, border, options, onChange, multi
                     _singleInput.current.value = "";
                     _singleInput.current.placeholder = selection?.text || attributes.placeholder || "";
                 }
-                optionItems[_selectedItemIndex.current].scrollIntoView({
+                optionItems[_selectedItemIndex.current]?.scrollIntoView({
                     behavior: "smooth",
                     block: "start",
                 });
@@ -168,7 +169,7 @@ const Select = ({ variant = "outlined", status, border, options, onChange, multi
     }, [optionsOpen]);
     useEffect(() => {
         // Arama kriterlerine uygun olan değerleri bir state e gönderiyoruz.
-        setFilteredOptions(options.filter((option) => {
+        setFilteredOptions(options?.filter((option) => {
             if (!optionsOpen)
                 return option;
             return option.text.toLowerCase().includes(searchText.toLowerCase());
@@ -211,7 +212,7 @@ const Select = ({ variant = "outlined", status, border, options, onChange, multi
             multiple ? (React.createElement("div", { className: _selectionClassName, onClick: () => setOptionsOpen((x) => !x) },
                 React.createElement("div", { className: "items" }, selections.length > 0 ? (selections.map((selection, index) => (React.createElement(Chip, { key: index, variant: status?.selected?.variant || "filled", status: status?.selected?.color || status?.color, text: selection.text })))) : (React.createElement("span", { className: `placeholder ${status?.color || "light"}` }, attributes.placeholder))))) : (
             // Single
-            React.createElement(Input, { ref: _singleInput, variant: variant, status: status || "light", onClick: () => setOptionsOpen((x) => !x), onChange: () => !optionsOpen && setOptionsOpen(true), onKeyUp: (event) => {
+            React.createElement(Input, { ref: _singleInput, variant: variant, status: status || "light", border: { radius: border.radius }, onClick: () => setOptionsOpen((prev) => !prev), onChange: () => !optionsOpen && setOptionsOpen(true), onKeyUp: (event) => {
                     if (event.key === "Enter")
                         return;
                     // Arama yapmak için kullanılan state bu kısımda dolduruluyor.
@@ -235,14 +236,17 @@ const Select = ({ variant = "outlined", status, border, options, onChange, multi
                         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.
                         setSearchText(event.currentTarget.value);
                     } }))),
-            filteredOptions.length > 0 ? (React.createElement("ul", null, filteredOptions.map((option, index) => {
+            filteredOptions?.length > 0 ? (React.createElement("ul", null, filteredOptions?.map((option, index) => {
                 const isItem = selections.some((selection) => selection.value === option.value);
                 return (React.createElement("li", { ref: (element) => (_optionItems.current[index] = element), key: index, onClick: () => handleItemSelected(option, index) },
                     multiple && (React.createElement(Checkbox, { checked: isItem, status: isItem ? status?.selected?.color || status?.color : "light", disabled: true })),

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

@@ -1,6 +1,7 @@
+"use client";
 import React, { useRef } from "react";
 import "../../../assets/css/components/form/switch/switch.css";
-const Switch = ({ label, status = "primary", border, ...attributes }) => {
+const Switch = ({ label, status = "primary", border = { radius: "pill" }, ...attributes }) => {
     // refs
     let _switch = useRef(null);
     // variables
@@ -11,8 +12,8 @@ const Switch = ({ label, status = "primary", border, ...attributes }) => {
     _switchClassName += ` light`;
     // border
     _switchClassName += ` border-style-solid`;
-    _switchClassName += ` border-radius-${border?.radius || "pill"}`;
-    _handleClassName += ` border-radius-${border?.radius || "pill"}`;
+    _switchClassName += ` border-radius-${border.radius}`;
+    _handleClassName += ` border-radius-${border.radius}`;
     return (React.createElement("div", { className: _wrapperClassName },
         React.createElement("label", null,
             React.createElement("input", { type: attributes.type || "checkbox", ...attributes, size: 0, onChange: (event) => {

package/dist/components/layout/Header.js

@@ -5,7 +5,7 @@ const Header = ({ logo, menu }) => {
     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, { menu: menu, variant: "horizontal" }))));
+            menu && menu.length > 0 && React.createElement(Menu, { data: menu, variant: "horizontal" }))));
 };
 Header.displayName = "Layout.Header";
 export default Header;

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

@@ -3,8 +3,8 @@ 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[];
+    logo?: string | React.JSX.Element;
+    menu?: MenuProps[];
 }
 interface IMainProps extends Omit<IGlobalProps, "variant" | "status" | "icon" | "border" | "size" | "upperCase"> {
 }

package/dist/components/layout/LSider.js

@@ -3,8 +3,8 @@ import React from "react";
 import { useLayout } from "../../libs/core/application/hooks";
 const LSider = () => {
     // hooks
-    const { options } = useLayout();
-    const sider = options?.sider?.left;
+    const { config: options } = useLayout();
+    const sider = options.layout.sider.left;
     if (!sider?.active)
         return null;
     return React.createElement("aside", { className: "ar-aside left" }, sider.element);

package/dist/components/layout/RSider.js

@@ -3,9 +3,9 @@ import React from "react";
 import { useLayout } from "../../libs/core/application/hooks";
 const RSider = () => {
     // hooks
-    const { options } = useLayout();
-    const sider = options?.sider?.right;
-    if (!sider?.active)
+    const { config: options } = useLayout();
+    const sider = options.layout.sider.right;
+    if (!sider.active)
         return null;
     return React.createElement("aside", { className: "ar-aside right" }, sider.element);
 };

package/dist/components/layout/index.js

@@ -1,20 +1,17 @@
-"use client";
 import React from "react";
 import Footer from "./Footer";
 import "../../assets/css/components/layout/layout.css";
 import Header from "./Header";
 import Section from "./Section";
-import { LayoutProvider } from "../../libs/core/application/contexts/Layout";
 import Main from "./Main";
 import LSider from "./LSider";
 import RSider from "./RSider";
 const Layout = ({ children }) => {
-    return (React.createElement(LayoutProvider, null,
-        React.createElement("div", { className: "ar-layout" }, React.Children.map(children, (child) => {
-            if (!React.isValidElement(child))
-                return;
-            return child;
-        }))));
+    return (React.createElement("div", { className: "ar-layout" }, React.Children.map(children, (child) => {
+        if (!React.isValidElement(child))
+            return;
+        return child;
+    })));
 };
 Layout.Header = Header;
 Layout.Main = Main;

package/dist/components/navigation/menu/Types.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { MenuItemVariants, MenuProps } from "../../../libs/types";
 export type Props = {
-    menu: MenuProps[];
+    data: MenuProps[];
     variant?: MenuItemVariants;
 } & React.HTMLAttributes<HTMLElement>;

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

@@ -46,12 +46,12 @@ const SubMenu = ({ items, variant, type, setSelectedMenu, selectedMenu, setSelec
             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")
+            if (selectedMenu.length > 0 && selectedMenu.includes(item) && item.type !== "group") {
                 _className_li += " selected";
+            }
         }
         // Eğer seçili olan menüyse "selected" sınıfını ekler.
-        if (selectedItem === item)
-            _className_groupTitle += " selected";
+        // 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);
@@ -62,7 +62,7 @@ const SubMenu = ({ items, variant, type, setSelectedMenu, selectedMenu, setSelec
             item.submenu && (React.createElement(SubMenu, { items: item.submenu, variant: variant, type: item.type, setSelectedMenu: setSelectedMenu, selectedMenu: selectedMenu, setSelectedItem: setSelectedItem, selectedItem: selectedItem }))));
     })));
 };
-const Menu = ({ menu, variant = "vertical", ...attributes }) => {
+const Menu = ({ data, variant = "vertical", ...attributes }) => {
     // refs
     let _className_li = useRef("ar-menu-list-item").current;
     // states
@@ -75,7 +75,7 @@ const Menu = ({ menu, variant = "vertical", ...attributes }) => {
         return className;
     };
     return (React.createElement("nav", { className: "ar-menu", ...attributes },
-        React.createElement("ul", { className: handleClassName() }, menu.map((item, index) => {
+        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")
@@ -85,11 +85,13 @@ const Menu = ({ menu, variant = "vertical", ...attributes }) => {
                     _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";
+            // 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)),
                 item.submenu && (React.createElement(SubMenu, { items: item.submenu, variant: variant, type: item.type, setSelectedMenu: setSelectedMenu, selectedMenu: selectedMenu, setSelectedItem: setSelectedItem, selectedItem: selectedItem }))));

package/dist/components/navigation/pagination/IProps.d.ts

@@ -0,0 +1,7 @@
+interface IProps {
+    defaultCurrent?: number;
+    perPage?: number;
+    total: number;
+    onChange: (page: number, perPage: number) => void;
+}
+export default IProps;

package/dist/components/navigation/pagination/IProps.js

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

package/dist/components/navigation/pagination/index.d.ts

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

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

@@ -0,0 +1,77 @@
+"use client";
+import React, { useContext, useEffect, useState } from "react";
+import "../../../assets/css/components/navigation/pagination/pagination.css";
+import { ConfigContext } from "../../../libs/core/application/contexts/Config";
+const Pagination = ({ defaultCurrent = 1, perPage, total, onChange }) => {
+    // context
+    const { config } = useContext(ConfigContext);
+    // states
+    const [pages, setPages] = useState([]);
+    const [currentPage, setCurrentPage] = useState(defaultCurrent);
+    // useEffect
+    useEffect(() => {
+        if (total === 0)
+            return;
+        const totalPages = Math.ceil(total / (perPage || config.perPage));
+        const liItems = [];
+        // Başlangıç ve bitiş aralığını hesapla.
+        const startPage = Math.max(1, currentPage - 1);
+        const endPage = Math.min(totalPages, currentPage + 1);
+        // İlk sayfa ve ... eklemek.
+        if (startPage > 1) {
+            liItems.push(React.createElement("li", { key: 1, onClick: () => setCurrentPage(1) }, "1"));
+            if (startPage > 2) {
+                liItems.push(React.createElement("li", { key: "start-ellipsis", className: "start-ellipsis" }, "..."));
+            }
+        }
+        // Sayfa aralığını eklemek.
+        for (let i = startPage; i <= endPage; i++) {
+            liItems.push(React.createElement("li", { key: i, className: i === currentPage ? "selection-page" : "", onClick: () => setCurrentPage(i) }, i));
+        }
+        // Son sayfa ve ... eklemek.
+        if (endPage < totalPages) {
+            if (endPage < totalPages - 1) {
+                liItems.push(React.createElement("li", { key: "end-ellipsis", className: "end-ellipsis" }, "..."));
+            }
+            liItems.push(React.createElement("li", { key: totalPages, onClick: () => setCurrentPage(totalPages) }, totalPages));
+        }
+        setPages(liItems);
+        onChange(currentPage, perPage || config.perPage);
+    }, [total, currentPage]);
+    return (React.createElement("div", { className: "ar-pagination" },
+        React.createElement("ul", null,
+            React.createElement("li", { className: currentPage === 1 ? "passive" : "", onClick: () => {
+                    if (currentPage === 1)
+                        return;
+                    setCurrentPage(1);
+                } },
+                React.createElement("span", null, "«")),
+            React.createElement("li", { className: currentPage === 1 ? "passive" : "", onClick: () => {
+                    if (currentPage === 1)
+                        return;
+                    setCurrentPage((prev) => {
+                        if (prev === 1)
+                            return prev;
+                        return (prev -= 1);
+                    });
+                } },
+                React.createElement("span", null, "‹")),
+            pages,
+            React.createElement("li", { className: Math.ceil(total / (perPage || config.perPage)) === currentPage ? "passive" : "", onClick: () => {
+                    if (Math.ceil(total / (perPage || config.perPage)) === currentPage)
+                        return;
+                    setCurrentPage((prev) => {
+                        if (prev === Math.ceil(total / (perPage || config.perPage)))
+                            return prev;
+                        return (prev += 1);
+                    });
+                } },
+                React.createElement("span", null, "›")),
+            React.createElement("li", { className: Math.ceil(total / (perPage || config.perPage)) === currentPage ? "passive" : "", onClick: () => {
+                    if (Math.ceil(total / (perPage || config.perPage)) === currentPage)
+                        return;
+                    setCurrentPage(Math.ceil(total / (perPage || config.perPage)));
+                } },
+                React.createElement("span", null, "»")))));
+};
+export default Pagination;

package/dist/index.d.ts

@@ -2,17 +2,21 @@ import "./assets/css/core/ar-core.css";
 import Button from "./components/form/button";
 import ButtonGroup from "./components/form/button-group";
 import Input from "./components/form/input";
+import DatePicker from "./components/form/date-picker";
 import Select from "./components/form/select";
 import Checkbox from "./components/form/checkbox";
 import Switch from "./components/form/switch";
 import Radio from "./components/form/radio";
 import Card from "./components/data-display/card";
 import Chip from "./components/data-display/chip";
-import Typography from "./components/data-display/typography";
 import Divider from "./components/data-display/divider";
+import Paper from "./components/data-display/paper";
 import SyntaxHighlighter from "./components/data-display/syntax-highlighter";
+import Table from "./components/data-display/table";
+import Typography from "./components/data-display/typography";
 import Alert from "./components/feedback/alert";
-import Menu from "./components/navigation/menu";
+import Modal from "./components/feedback/modal";
+import MenuType from "./components/navigation/menu";
 import Grid from "./components/layout/grid-system";
 import Layout from "./components/layout";
-export { Button, ButtonGroup, Input, Select, Switch, Checkbox, Radio, Card, Chip, Typography, Divider, Alert, Menu, Grid, Layout, SyntaxHighlighter, };
+export { Button, ButtonGroup, Input, DatePicker, Select, Switch, Checkbox, Radio, Card, Chip, Divider, Paper, SyntaxHighlighter, Table, Typography, Alert, Modal, MenuType as Menu, Grid, Layout, };

package/dist/index.js

@@ -3,6 +3,7 @@ import "./assets/css/core/ar-core.css";
 import Button from "./components/form/button";
 import ButtonGroup from "./components/form/button-group";
 import Input from "./components/form/input";
+import DatePicker from "./components/form/date-picker";
 import Select from "./components/form/select";
 import Checkbox from "./components/form/checkbox";
 import Switch from "./components/form/switch";
@@ -10,27 +11,27 @@ import Radio from "./components/form/radio";
 // Data Display
 import Card from "./components/data-display/card";
 import Chip from "./components/data-display/chip";
-import Typography from "./components/data-display/typography";
 import Divider from "./components/data-display/divider";
+import Paper from "./components/data-display/paper";
 import SyntaxHighlighter from "./components/data-display/syntax-highlighter";
+import Table from "./components/data-display/table";
+import Typography from "./components/data-display/typography";
 // Feedback
 import Alert from "./components/feedback/alert";
+import Modal from "./components/feedback/modal";
 // Navigation
-import Menu from "./components/navigation/menu";
+import MenuType from "./components/navigation/menu";
 // Layout
 import Grid from "./components/layout/grid-system";
 import Layout from "./components/layout";
-// Others
 export { 
 // Form Elements
-Button, ButtonGroup, Input, Select, Switch, Checkbox, Radio, 
+Button, ButtonGroup, Input, DatePicker, Select, Switch, Checkbox, Radio, 
 // Data Display
-Card, Chip, Typography, Divider, 
+Card, Chip, Divider, Paper, SyntaxHighlighter, Table, Typography, 
 // Feedback
-Alert, 
+Alert, Modal, 
 // Navigation
-Menu, 
+MenuType as Menu, 
 // Layout
-Grid, Layout, 
-// Others
-SyntaxHighlighter, };
+Grid, Layout, };

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

@@ -0,0 +1,26 @@
+import React from "react";
+type ConfigOptions = {
+    layout: {
+        sider: {
+            left: {
+                element: React.ReactNode | null;
+                active: boolean;
+            };
+            right: {
+                element: React.ReactNode | null;
+                active: boolean;
+            };
+        };
+    };
+    perPage: number;
+};
+type ConfigContextProps = {
+    config: ConfigOptions;
+    setConfig: React.Dispatch<React.SetStateAction<ConfigOptions>>;
+};
+type ConfigProviderProps = {
+    children: React.ReactNode;
+};
+export declare const ConfigContext: React.Context<ConfigContextProps>;
+declare const ConfigProvider: ({ children }: ConfigProviderProps) => React.JSX.Element;
+export { ConfigProvider };

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

@@ -0,0 +1,20 @@
+"use client";
+import React, { createContext, useState } from "react";
+const defaultOptions = {
+    layout: {
+        sider: {
+            left: { element: null, active: true },
+            right: { element: null, active: true },
+        },
+    },
+    perPage: 5,
+};
+export const ConfigContext = createContext({
+    config: defaultOptions,
+    setConfig: () => { },
+});
+const ConfigProvider = ({ children }) => {
+    const [config, setConfig] = useState(defaultOptions);
+    return React.createElement(ConfigContext.Provider, { value: { config, setConfig } }, children);
+};
+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 };