ar-design 0.1.21 → 0.1.22

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

@@ -0,0 +1,328 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import "../../../assets/css/components/form/date-picker/date-picker.css";
+import Input from "../input";
+import Select from "../select";
+import Button from "../button";
+import Alert from "../../feedback/alert";
+const weekdays = ["Pzt", "Sal", "Çar", "Per", "Cum", "Cmt", "Paz"];
+const months = [
+    { value: 0, text: "Ocak" },
+    { value: 1, text: "Şubat" },
+    { value: 2, text: "Mart" },
+    { value: 3, text: "Nisan" },
+    { value: 4, text: "Mayıs" },
+    { value: 5, text: "Haziran" },
+    { value: 6, text: "Temmuz" },
+    { value: 7, text: "Ağustos" },
+    { value: 8, text: "Eylül" },
+    { value: 9, text: "Ekim" },
+    { value: 10, text: "Kasım" },
+    { value: 11, text: "Aralık" },
+];
+const DatePicker = ({ onChange, ...attributes }) => {
+    // refs
+    const _arCalendar = useRef(null);
+    const _currentDate = useRef(new Date()).current;
+    const _beginDate = useRef(null);
+    const _clockOpen = useRef(false);
+    // refs
+    const _year = useRef(_currentDate.getFullYear());
+    const _month = useRef(_currentDate.getMonth());
+    const _day = useRef(_currentDate.getDate());
+    const _hours = useRef(_currentDate.getHours());
+    const _minutes = useRef(_currentDate.getMinutes());
+    // refs -> List Elements
+    const _hoursListElement = useRef(null);
+    const _hoursLiElements = useRef([]);
+    const _minutesListElement = useRef(null);
+    const _minutesLiElements = useRef([]);
+    // states
+    const [calendarOpen, setCalendarOpen] = useState(false);
+    const [clockOpen, setClockOpen] = useState(false);
+    const [calendar, setCalendar] = useState([]);
+    const [years, setYears] = useState([]);
+    const [hours, setHours] = useState();
+    const [minutes, setMinutes] = useState();
+    const [dateTrigger, setDateTrigger] = useState(false);
+    const [timeTrigger, setTimeTrigger] = useState(false);
+    let [calendarClassName, setCalendarClassName] = useState([
+        "calendar-wrapper",
+        "closed",
+    ]);
+    // states => Selected Date
+    const [currentYear, setCurrentYear] = useState(_currentDate.getFullYear());
+    const [currentMonth, setCurrentMonth] = useState(_currentDate.getMonth());
+    const [currentDay, setCurrentDay] = useState(_currentDate.getDate());
+    const [currentHours, setCurrentHours] = useState(_currentDate.getHours());
+    const [currentMinutes, setCurrentMinutes] = useState(_currentDate.getMinutes());
+    // methods
+    const handleClickOutSide = (event) => {
+        const target = event.target;
+        if (_arCalendar.current && !_arCalendar.current.contains(target))
+            cancelProgress();
+    };
+    const handleKeys = (event) => {
+        const key = event.key;
+        if (key === "Escape")
+            cancelProgress();
+    };
+    const setNow = () => {
+        const now = new Date();
+        // Stateler güncelleniyor...
+        setCurrentYear(now.getFullYear());
+        setCurrentMonth(now.getMonth());
+        setCurrentDay(now.getDate());
+        setCurrentHours(now.getHours());
+        setCurrentMinutes(now.getMinutes());
+        _year.current = now.getFullYear();
+        _month.current = now.getMonth();
+        _day.current = now.getDate();
+        _hours.current = now.getHours();
+        _minutes.current = now.getMinutes();
+        // Input güncelleniyor...
+        updateDateInput(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(), now.getMinutes());
+        // Takvim kapatılıyor...
+        setCalendarOpen(false);
+        // Değer gönderiliyor...
+        const inputDate = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate(), !clockOpen ? 0 : now.getHours(), !clockOpen ? 0 : now.getMinutes(), 0));
+        onChange(inputDate.toISOString());
+    };
+    const updateDateInput = (year = _year.current, month = _month.current, day = _day.current, hours = _hours.current, minutes = _minutes.current) => {
+        if (_beginDate.current) {
+            const inputDate = new Date(Date.UTC(year, month, day, hours, minutes, 0));
+            if (isNaN(inputDate.getTime()))
+                return;
+            const [date, time] = inputDate.toISOString().split("T");
+            const [clock, ms] = time.split(".");
+            _beginDate.current.value = !_clockOpen.current ? date : `${date}T${clock}`;
+        }
+    };
+    const okayButton = () => {
+        return (React.createElement(Button, { variant: "borderless", status: "success", onClick: () => {
+                // Input güncelleniyor...
+                updateDateInput(_year.current, _month.current, _day.current, _hours.current, _minutes.current);
+                // Stateler güncelleniyor...
+                setCurrentYear(_year.current);
+                setCurrentMonth(_month.current);
+                setCurrentDay(_day.current);
+                setCurrentHours(_hours.current);
+                setCurrentMinutes(_minutes.current);
+                const inputDate = new Date(Date.UTC(_year.current, _month.current, _day.current, !clockOpen ? 0 : _hours.current, !clockOpen ? 0 : _minutes.current, 0));
+                onChange(inputDate.toISOString());
+                setCalendarOpen(false);
+            } }, "Tamam"));
+    };
+    const cancelProgress = () => {
+        updateDateInput(currentYear, currentMonth, currentDay, currentHours, currentMinutes);
+        _year.current = currentYear;
+        _month.current = currentMonth;
+        _day.current = currentDay;
+        _hours.current = currentHours;
+        _minutes.current = currentMinutes;
+        setCalendarOpen(false);
+    };
+    // useEffects
+    useEffect(() => {
+        if (isNaN(_year.current))
+            return;
+        const years = [];
+        // Son 20 yıl
+        for (let i = _year.current - 20; i <= _year.current; i++) {
+            years.push({ value: i, text: `${i}` });
+        }
+        // Önümüzdeki 20 yıl
+        for (let i = _year.current + 1; i <= _year.current + 20; i++) {
+            years.push({ value: i, text: `${i}` });
+        }
+        setYears(years);
+    }, []);
+    useEffect(() => {
+        // Sıfırlama işlemi...
+        setCalendarClassName(["calendar-wrapper"]);
+        const screenCenter = window.innerHeight / 2 + 100;
+        const rect = _beginDate.current?.getBoundingClientRect();
+        const direction = rect && rect.top > screenCenter ? "bottom" : "top";
+        if (calendarOpen) {
+            setCalendarClassName((prev) => [...prev, direction, "opened"]);
+            const calendar = [];
+            const beginDateValue = _beginDate.current?.value || "";
+            const date = {
+                input: {
+                    begin: new Date(beginDateValue),
+                },
+                current: {
+                    firstDay: new Date(_year.current, _month.current, 1), // Geçerli ayın ilk günü
+                    lastDay: new Date(_year.current, _month.current + 1, 0), // Geçerli ayın son günü
+                },
+            };
+            const startingDay = date.current.firstDay.getDay() === 0 ? 7 : date.current.firstDay.getDay();
+            const endDay = date.current.lastDay.getDay() === 0 ? 7 : date.current.lastDay.getDay();
+            for (let i = 1; i < startingDay; i++) {
+                calendar.push(React.createElement("span", { key: `prev-${i}`, className: "empty-day" }));
+            }
+            for (let i = date.current.firstDay.getDate(); i <= date.current.lastDay.getDate(); i++) {
+                const isSelected = !isNaN(date.input.begin.getTime())
+                    ? date.input.begin.getFullYear() == _year.current &&
+                        date.input.begin.getMonth() == _month.current &&
+                        i == _day.current
+                    : _currentDate.getFullYear() == _year.current &&
+                        _currentDate.getMonth() == _month.current &&
+                        i == _day.current;
+                calendar.push(React.createElement("span", { key: `current-${i}`, ...(isSelected ? { className: "selection-day" } : {}), onClick: () => {
+                        _day.current = i;
+                        updateDateInput(_year.current, _month.current, _day.current);
+                        setDateTrigger((prev) => !prev);
+                    } },
+                    React.createElement("span", null, i)));
+            }
+            for (let i = endDay; i < 7; i++) {
+                calendar.push(React.createElement("span", { key: `next-${i}`, className: "empty-day" }));
+            }
+            // Takvim nesneleri ekleniyor.
+            setCalendar(calendar);
+            // Takvim paneli için olay dinleyileri ekleniyor.
+            document.addEventListener("click", handleClickOutSide);
+            document.addEventListener("keydown", handleKeys);
+            // Dinleyicileri kaldır ve zamanlayıcıyı temizle.
+            return () => {
+                document.removeEventListener("click", handleClickOutSide);
+                document.removeEventListener("keydown", handleKeys);
+            };
+        }
+        else {
+            setCalendarClassName((prev) => [...prev, direction, "closed"]);
+        }
+    }, [dateTrigger, calendarOpen]);
+    useEffect(() => {
+        const generateList = (count, current, setFunc) => {
+            const items = Array.from({ length: count }, (_, i) => (React.createElement("li", { ref: (element) => count === 24
+                    ? (_hoursLiElements.current[i] = element)
+                    : (_minutesLiElements.current[i] = element), key: i, ...(current === i ? { className: "selection-time" } : {}), onClick: () => {
+                    if (count === 24) {
+                        setTimeTrigger((prev) => !prev);
+                        _hours.current = i;
+                    }
+                    else {
+                        setTimeTrigger((prev) => !prev);
+                        _minutes.current = i;
+                    }
+                } },
+                React.createElement("span", null,
+                    React.createElement("span", null, i.toString().padStart(2, "0"))))));
+            setFunc(items);
+        };
+        // Listeler oluşturuyor...
+        generateList(24, _hours.current, setHours);
+        generateList(60, _minutes.current, setMinutes);
+        // Input güncelleniyor...
+        updateDateInput(_year.current, _month.current, _day.current, _hours.current, _minutes.current);
+        if (!clockOpen)
+            return;
+        // Seçim sonrasında en yukarı getirme işlemi için aşağıda yer alan kodlar yazılmıştır
+        const hourLiElement = _hoursLiElements.current[_hours.current];
+        const minuteLiElement = _minutesLiElements.current[_minutes.current];
+        if (hourLiElement) {
+            _hoursListElement.current?.scrollTo({
+                top: hourLiElement.offsetTop - _hoursListElement.current.offsetTop - 8,
+                behavior: "smooth",
+            });
+        }
+        if (minuteLiElement) {
+            _minutesListElement.current?.scrollTo({
+                top: minuteLiElement.offsetTop - _minutesListElement.current.offsetTop - 8,
+                behavior: "smooth",
+            });
+        }
+    }, [timeTrigger, calendarOpen, clockOpen]);
+    return (React.createElement("div", { className: "ar-date-picker" },
+        React.createElement(Input, { ref: _beginDate, type: clockOpen ? "datetime-local" : "date", onKeyDown: (event) => event.code == "Space" && event.preventDefault(), onChange: (event) => {
+                // Disabled gelmesi durumunda işlem yapmasına izin verme...
+                if (attributes.disabled)
+                    return;
+                (() => {
+                    const value = event.target.value;
+                    const [date, time] = value.split("T");
+                    const [year, month, day] = date.split("-").map(Number);
+                    const hours = time ? time.split(".")[0].split(":").map(Number)[0] : 0;
+                    const minutes = time ? time.split(".")[0].split(":").map(Number)[1] : 0;
+                    _year.current = year;
+                    _month.current = month - 1;
+                    _day.current = day;
+                    if (hours || minutes) {
+                        _hours.current = hours;
+                        _minutes.current = minutes;
+                    }
+                    setDateTrigger((prev) => !prev);
+                    setTimeTrigger((prev) => !prev);
+                })();
+            }, onClick: (event) => {
+                event.preventDefault();
+                setCalendarOpen(true);
+            }, autoComplete: "off" }),
+        React.createElement("div", { ref: _arCalendar, className: calendarClassName.map((className) => className).join(" ") },
+            React.createElement("div", { className: "header" },
+                React.createElement("div", { className: "select-field" },
+                    React.createElement("div", { className: "prev" },
+                        React.createElement("span", { onClick: () => {
+                                _year.current -= 1;
+                                setDateTrigger((prev) => !prev);
+                            } }, "«"),
+                        React.createElement("span", { onClick: () => {
+                                if (_month.current <= 0) {
+                                    _year.current -= 1;
+                                    _month.current = 12;
+                                }
+                                _month.current -= 1;
+                                updateDateInput(_year.current, _month.current, _day.current);
+                                setDateTrigger((prev) => !prev);
+                            } }, "‹")),
+                    React.createElement("div", { className: "selects" },
+                        React.createElement(Select, { defaultValueIndex: months.findIndex((month) => month.value == _month.current), variant: "borderless", options: months, onChange: (option) => {
+                                _month.current = option?.value;
+                                updateDateInput(_year.current, _month.current, _day.current);
+                                setDateTrigger((prev) => !prev);
+                            }, placeholder: "Ay" }),
+                        React.createElement(Select, { variant: "borderless", defaultValueIndex: years.findIndex((year) => year.value == _year.current), options: years, onChange: (option) => {
+                                _year.current = option?.value;
+                                updateDateInput(_year.current, _month.current, _day.current);
+                                setDateTrigger((prev) => !prev);
+                            }, placeholder: "Y\u0131l" })),
+                    React.createElement("div", { className: "next" },
+                        React.createElement("span", { onClick: () => {
+                                if (_month.current >= 11) {
+                                    _year.current += 1;
+                                    _month.current = -1;
+                                }
+                                _month.current += 1;
+                                updateDateInput(_year.current, _month.current, _day.current);
+                                setDateTrigger((prev) => !prev);
+                            } }, "›"),
+                        React.createElement("span", { onClick: () => {
+                                _year.current += 1;
+                                updateDateInput(_year.current, _month.current, _day.current);
+                                setDateTrigger((prev) => !prev);
+                            } }, "»")))),
+            React.createElement("div", { className: "content" }, !isNaN(_month.current) && !isNaN(_year.current) ? (React.createElement("div", { className: "calendar" },
+                React.createElement("div", { className: "weekdays" }, weekdays.map((weekday, index) => (React.createElement("span", { key: index }, weekday)))),
+                React.createElement("div", { className: "days" }, calendar))) : (React.createElement(Alert, { status: "warning" }, "Ay veya y\u0131l se\u00E7imi yapman\u0131z gerekmektedir."))),
+            React.createElement("div", { className: "footer" },
+                React.createElement("div", null,
+                    React.createElement(Button, { variant: "borderless", onClick: () => setNow() }, "\u015Eimdi"),
+                    React.createElement(Button, { variant: "borderless", status: !clockOpen ? "primary" : "danger", onClick: () => {
+                            _clockOpen.current = !_clockOpen.current;
+                            setClockOpen((prev) => !prev);
+                        } }, "Saat")),
+                React.createElement("div", null, !clockOpen && okayButton())),
+            React.createElement("div", { className: `clock ${clockOpen ? "active" : "passive"}` },
+                React.createElement("div", { className: "header" },
+                    _hours.current.toString().padStart(2, "0"),
+                    " : ",
+                    _minutes.current.toString().padStart(2, "0")),
+                React.createElement("div", { className: "content" },
+                    React.createElement("ul", { ref: _hoursListElement }, hours),
+                    React.createElement("ul", { ref: _minutesListElement }, minutes)),
+                clockOpen && React.createElement("div", { className: "footer" }, okayButton())))));
+};
+DatePicker.displayName = "DatePicker";
+export default DatePicker;

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

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

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.
@@ -242,7 +243,7 @@ const Select = ({ variant = "outlined", status, border, options, onChange, multi
                         // 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" }))));
+            React.createElement(Menu, { data: menu, variant: "horizontal" }))));
 };
 Header.displayName = "Layout.Header";
 export default Header;

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;