ar-design 0.1.66 → 0.1.68

package/dist/assets/css/components/form/select/options.css

@@ -1,8 +1,9 @@
 .ar-select-options {
   position: absolute;
   background-color: var(--white);
-  border: solid 1px var(--gray-200);
-  border-radius: var(--border-radius-lg);
+  /* border: solid 1px var(--gray-200); */
+  border-radius: var(--border-radius-sm);
+  box-shadow: 0 0 15px -2.5px rgba(var(--black-rgb), 0.1);
   overflow: hidden;
   z-index: 101;
   transition: visibility 250ms, opacity 250ms, transform 250ms ease-in-out;
@@ -14,6 +15,45 @@
   box-shadow: 0 -5px 15px -2.5px rgba(var(--black-rgb), 0.1);
 }
 
+.ar-select-options > .no-options-field {
+  padding: 0.5rem 1rem;
+}
+.ar-select-options > .no-options-field > .text {
+  color: var(--gray-500);
+}
+.ar-select-options > .no-options-field > .add-item {
+  display: flex;
+  align-items: center;
+  position: relative;
+  background-color: rgba(var(--primary-rgb), 0.05);
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--border-radius-sm);
+  border-left: solid 2px var(--primary);
+  color: var(--primary);
+  cursor: pointer;
+}
+.ar-select-options > .no-options-field > .add-item::before {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 0;
+  content: "";
+  border: solid 5px transparent;
+  border-left-color: var(--primary);
+}
+.ar-select-options > .no-options-field > .add-item > .plus {
+  display: inline-block;
+  position: relative;
+  background-color: var(--primary);
+  min-width: 1rem;
+  height: 1rem;
+  margin-right: 0.25rem;
+  border-radius: var(--border-radius-pill);
+  color: var(--white);
+  text-align: center;
+  line-height: 1rem;
+}
+
 .ar-select-options > .search-field {
   padding: 0.5rem;
   border-bottom: solid 1px var(--gray-200);

package/dist/assets/css/components/navigation/steps/{steps.css → styles.css}

@@ -18,10 +18,11 @@
   display: inline-flex;
   justify-content: center;
   align-items: center;
+  cursor: pointer;
 }
-.ar-steps > .steps > .item:not(:last-child) > .item-icon:has(.pending)::after,
-.ar-steps > .steps > .item:not(:last-child) > .item-icon:has(.in-progress)::after,
-.ar-steps > .steps > .item > .item-icon:has(.completed)::after {
+.ar-steps > .steps > .item:not(:last-child) > .item-icon.pending::after,
+.ar-steps > .steps > .item:not(:last-child) > .item-icon.in-progress::after,
+.ar-steps > .steps > .item > .item-icon.completed::after {
   position: absolute;
   left: calc(50% + 1.25rem);
   transform: translateX(-50%);
@@ -30,15 +31,15 @@
   height: 4px;
   border-radius: var(--border-radius-pill);
 }
-.ar-steps > .steps > .item:not(:last-child) > .item-icon:has(.pending)::after {
+.ar-steps > .steps > .item:not(:last-child) > .item-icon.pending::after {
   background-color: var(--gray-300);
 }
-.ar-steps > .steps > .item:not(:last-child) > .item-icon:has(.in-progress)::after {
+.ar-steps > .steps > .item:not(:last-child) > .item-icon.in-progress::after {
   background: var(--gray-300);
   background: linear-gradient(90deg, var(--primary) 50%, var(--gray-300) 50%);
   background-color: var(--primary);
 }
-.ar-steps > .steps > .item > .item-icon:has(.completed)::after {
+.ar-steps > .steps > .item > .item-icon.completed::after {
   background-color: var(--success);
 }
 
@@ -118,6 +119,7 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 0.5rem 0;
+  cursor: pointer;
 }
 .ar-steps > .steps > .item > .item-informations > .step {
   color: var(--gray-500);

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

@@ -1,7 +1,7 @@
 "use client";
 import React from "react";
 import "../../../assets/css/components/feedback/alert/alert.css";
-const Alert = ({ children, message, status = "primary", border = { radius: "sm" }, emphasize, }) => {
+const Alert = ({ children, message, status = "primary", border = { radius: "sm" }, emphasize }) => {
     // refs
     let _className = "ar-alert";
     // status
@@ -17,8 +17,6 @@ const Alert = ({ children, message, status = "primary", border = { radius: "sm"
             return message;
         let _lowerCaseMessage = message.toLowerCase();
         return emphasize.reduce((currentMessage, emphasize) => {
-            // TODO: ...
-            // if (['""', " "].includes(emphasize)) return currentMessage;
             let _lowerCaseEmphasize = emphasize.toLowerCase();
             let startIndex = _lowerCaseMessage.indexOf(_lowerCaseEmphasize);
             while (startIndex !== -1) {

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

@@ -25,14 +25,16 @@ const Input = forwardRef(({ variant = "outlined", status = "light", size = "norm
     // useEffects
     useEffect(() => {
         if (attributes.value !== undefined)
-            setValue(value);
+            setValue(attributes.value);
     }, [attributes.value]);
     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),
-            attributes.placeholder && React.createElement("label", { className: value ? "visible" : "hidden" }, attributes.placeholder),
-            React.createElement("input", { ref: ref, ...attributes, value: attributes.value !== undefined ? attributes.value : value, size: 20, className: _inputClassName.map((c) => c).join(" "), onChange: (event) => {
+            attributes.placeholder && (React.createElement("label", { className: value ? "visible" : "hidden" },
+                validation && "* ",
+                attributes.placeholder)),
+            React.createElement("input", { ref: ref, ...attributes, placeholder: `${validation ? "* " : ""}${attributes.placeholder}`, value: attributes.value !== undefined ? attributes.value : value, size: 20, className: _inputClassName.map((c) => c).join(" "), onChange: (event) => {
                     // Disabled gelmesi durumunda işlem yapmasına izin verme...
                     if (attributes.disabled)
                         return;

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

@@ -22,6 +22,7 @@ export type Props = {
     options: Option[];
     onCreate?: (option: Option) => void;
     placeholder?: string;
+    upperCase?: boolean;
     disabled?: boolean;
 } & (IMultiple | ISingle) & Omit<IGlobalProps, "status"> & IValidation;
 export {};

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

@@ -4,10 +4,9 @@ import Input from "../input";
 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";
 import Utils from "../../../libs/infrastructure/shared/Utils";
 import ReactDOM from "react-dom";
-const Select = ({ variant = "outlined", status, border = { radius: "sm" }, options, value, onChange, onCreate, multiple, placeholder, validation, disabled, }) => {
+const Select = ({ variant = "outlined", status, border = { radius: "sm" }, options, value, onChange, onCreate, multiple, placeholder, validation, upperCase, disabled, }) => {
     const _selectionClassName = ["selections"];
     // refs
     const _arSelect = useRef(null);
@@ -102,10 +101,28 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
         else {
             if (_singleInput.current) {
                 setSingleInputText("");
-                _singleInput.current.placeholder = placeholder ?? "";
+                _singleInput.current.placeholder = `${validation ? "* " : ""}${placeholder ?? ""}`;
             }
             onChange(undefined);
         }
+        setOptionsOpen(false);
+    };
+    // Özel büyük harfe dönüştürme işlevi.
+    const convertToUpperCase = (str) => {
+        return str
+            .replace(/ş/g, "S")
+            .replace(/Ş/g, "S")
+            .replace(/ı/g, "I")
+            .replace(/I/g, "I")
+            .replace(/ç/g, "C")
+            .replace(/Ç/g, "C")
+            .replace(/ğ/g, "G")
+            .replace(/Ğ/g, "G")
+            .replace(/ö/g, "O")
+            .replace(/Ö/g, "O")
+            .replace(/ü/g, "U")
+            .replace(/Ü/g, "U")
+            .replace(/[a-z]/g, (match) => match.toUpperCase());
     };
     // useEffects
     useEffect(() => {
@@ -130,7 +147,7 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
                 // }
                 if (_singleInput.current) {
                     setSingleInputText("");
-                    _singleInput.current.placeholder = value?.text || placeholder || "";
+                    _singleInput.current.placeholder = value?.text || `${validation ? "* " : ""}${placeholder ?? ""}` || "";
                 }
             }
             // Options açıldıktan 100ms sonra arama kutusuna otomatik olarak focus oluyor.
@@ -154,7 +171,7 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
             else {
                 if (_singleInput.current) {
                     setSingleInputText(value?.text ?? "");
-                    _singleInput.current.placeholder = placeholder ?? "";
+                    _singleInput.current.placeholder = `${validation ? "* " : ""}${placeholder ?? ""}`;
                 }
             }
         }
@@ -199,14 +216,18 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
     return (React.createElement("div", { ref: _arSelect, className: "ar-select-wrapper" },
         React.createElement("div", { ref: _multipleInput, className: "ar-select" },
             multiple ? (React.createElement("div", { className: _selectionClassName.map((c) => c).join(" "), onClick: () => setOptionsOpen((x) => !x) },
-                React.createElement("div", { className: "items" }, value.length > 0 ? (value.map((_value, index) => (React.createElement(Chip, { key: index, variant: status?.selected?.variant || "filled", status: status?.selected?.color || status?.color, text: _value.text })))) : (React.createElement("span", { className: "placeholder" }, placeholder))))) : (React.createElement(Input, { ref: _singleInput, variant: variant, status: !Utils.IsNullOrEmpty(validation?.text) ? "danger" : status, border: { radius: border.radius }, value: singleInputText, onClick: () => setOptionsOpen((prev) => !prev), onChange: (event) => {
+                React.createElement("div", { className: "items" }, value.length > 0 ? (value.map((_value, index) => (React.createElement(Chip, { key: index, variant: status?.selected?.variant || "filled", status: status?.selected?.color || status?.color, text: _value.text })))) : (React.createElement("span", { className: "placeholder" },
+                    validation ? "* " : "",
+                    placeholder))))) : (React.createElement(Input, { ref: _singleInput, variant: variant, status: !Utils.IsNullOrEmpty(validation?.text) ? "danger" : status, border: { radius: border.radius }, value: singleInputText, onClick: () => setOptionsOpen((prev) => !prev), onChange: (event) => {
                     !optionsOpen && setOptionsOpen(true);
+                    if (upperCase)
+                        event.target.value = convertToUpperCase(event.target.value);
                     setSingleInputText(event.target.value);
                 }, onKeyUp: (event) => {
                     if (event.key === "Enter")
                         return;
                     setSearchText(event.currentTarget.value);
-                }, placeholder: placeholder, disabled: disabled })),
+                }, placeholder: placeholder, validation: validation, disabled: disabled })),
             React.createElement("span", { className: `button-clear ${!disabled && (multiple ? value.length > 0 : value) ? "opened" : "closed"}`, onClick: (event) => {
                     if (disabled)
                         return;
@@ -217,22 +238,26 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
                     event.stopPropagation();
                     setOptionsOpen((x) => !x);
                 } }),
-            validation?.text && React.createElement("span", { className: "validation" }, validation.text)),
+            multiple && validation && React.createElement("span", { className: "validation" }, validation.text)),
         optionsOpen &&
             ReactDOM.createPortal(React.createElement("div", { ref: _options, className: "ar-select-options" },
                 multiple && (React.createElement("div", { className: "search-field" },
-                    React.createElement(Input, { ref: _searchField, variant: "outlined", status: "light", placeholder: "Search...", value: searchText, onChange: (event) => setSearchText(event.currentTarget.value) }))),
+                    React.createElement(Input, { ref: _searchField, variant: "outlined", status: "light", placeholder: "Search...", value: searchText, onChange: (event) => setSearchText(event.currentTarget.value), onClick: (event) => event.stopPropagation() }))),
                 filteredOptions.length > 0 ? (React.createElement("ul", null, filteredOptions.map((option, index) => {
                     const isItem = multiple && value.some((_value) => _value.value === option.value);
-                    return (React.createElement("li", { key: index, ref: (element) => (_optionItems.current[index] = element), className: option === value ? "selectedItem" : "", onClick: () => handleItemSelected(option) },
+                    return (React.createElement("li", { key: index, ref: (element) => (_optionItems.current[index] = element), className: option === value ? "selectedItem" : "", onClick: (event) => {
+                            event.stopPropagation();
+                            handleItemSelected(option);
+                        } },
                         multiple && React.createElement(Checkbox, { checked: isItem, status: isItem ? "primary" : "light", disabled: true }),
                         React.createElement("span", null, option.text)));
-                }))) : !onCreate ? (React.createElement(Paragraph, { color: "gray-500", align: "center" }, "Herhangi bir kay\u0131t bulunumad\u0131!")) : (React.createElement("span", { style: { padding: "1rem", cursor: "pointer" }, onClick: () => {
+                }))) : !onCreate ? (React.createElement("div", { className: "no-options-field" },
+                    React.createElement("span", { className: "text" }, "Herhangi bir kay\u0131t bulunumad\u0131."))) : (React.createElement("div", { className: "no-options-field", onClick: () => {
                         onCreate({ value: "", text: singleInputText });
                         setOptionsOpen(false);
-                    } }, options.length === 0 && singleInputText.length === 0
-                    ? "Herhangi bir kayıt bulunumadı!"
-                    : `${singleInputText} Ekle`))), document.body)));
+                    } }, options.length === 0 && singleInputText.length === 0 ? (React.createElement("span", { className: "text" }, "Herhangi bir kay\u0131t bulunumad\u0131.")) : (React.createElement("span", { className: "add-item" },
+                    React.createElement("span", { className: "plus" }, "+"),
+                    singleInputText))))), document.body)));
 };
 Select.displayName = "Select";
 export default Select;

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

@@ -0,0 +1,5 @@
+import { MenuProps } from "../../../libs/types";
+interface IProps {
+    menus: MenuProps[];
+}
+export default IProps;

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

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

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

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

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

@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from "react";
+import "../../../assets/css/components/navigation/breadcrumb/styles.css";
+const Breadcrumb = ({ menus }) => {
+    // useState
+    const [pathname, setPathname] = useState("");
+    // const [breadcrumb, setBreadcrumb] = useState<any[]>([]);
+    const handleBreadcrumb = (pathname) => {
+        if (pathname === undefined)
+            pathname = window.location.pathname;
+        // let _menus: any, _parents: any;
+        if (pathname) {
+            // console.log(menus.filter(x=>x.));
+            // Recursive
+            // handleBreadcrumb(_menus);
+        }
+        else {
+            // Recursive
+            // handleBreadcrumb(_parents.parentId);
+        }
+    };
+    // useEffects
+    useEffect(() => {
+        if (menus.length === 0)
+            return;
+        handleBreadcrumb(undefined);
+        setPathname(window.location.pathname);
+    }, [menus, pathname]);
+    return (React.createElement("nav", { className: "ar-breadcrumb" }));
+};
+Breadcrumb.displayName = "Breadcrumb";
+export default Breadcrumb;

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

@@ -1,9 +1,9 @@
-import { StepProps } from "../../../libs/types";
+import { StepProps, ValidationProperties } from "../../../libs/types";
 import { IChildren } from "../../../libs/types/IGlobalProps";
 /**
  * Stepper component props
  */
-interface IProps extends IChildren {
+interface IProps<TData extends object> extends IChildren {
     /**
      * Step'leri temsil eden dizisi.
      * Her bir `Step` için gerekli özellikler `StepProps` tipinde olmalıdır.
@@ -14,5 +14,12 @@ interface IProps extends IChildren {
      * @param currentStep - Kullanıcının geçerli olduğu adım numarası.
      */
     onChange: (currentStep: number) => void;
+    /**
+     * ...
+     */
+    validation?: {
+        data: TData;
+        rules: ValidationProperties<TData>[];
+    };
 }
 export default IProps;

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

@@ -1,5 +1,5 @@
 import React from "react";
 import IProps from "./IProps";
-import "../../../assets/css/components/navigation/steps/steps.css";
-declare const Steps: React.FC<IProps>;
+import "../../../assets/css/components/navigation/steps/styles.css";
+declare const Steps: <T extends object>({ children, steps, onChange, validation }: IProps<T>) => React.JSX.Element;
 export default Steps;

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

@@ -1,22 +1,29 @@
 "use client";
 import React, { useEffect, useState } from "react";
-import "../../../assets/css/components/navigation/steps/steps.css";
+import "../../../assets/css/components/navigation/steps/styles.css";
 import Typography from "../../data-display/typography";
 import Button from "../../form/button";
+import { useValidation } from "../../../libs/core/application/hooks";
 const { Title } = Typography;
-const Steps = ({ children, steps = [], onChange }) => {
+const Steps = function ({ children, steps = [], onChange, validation }) {
     // states
     const [currentStep, setCurrentStep] = useState(0);
+    let _errors;
+    let _onSubmit;
+    let _setSubmit;
+    if (validation) {
+        const { errors, onSubmit, setSubmit } = useValidation(validation.data, validation.rules, currentStep + 1);
+        _errors = errors;
+        _onSubmit = onSubmit;
+        _setSubmit = setSubmit;
+    }
     // methods
-    const changeItemIcon = (currentStep, index) => {
+    const getStepIconStatus = (currentStep, index) => {
         if (currentStep < index)
             return "pending";
-        else if (currentStep === index)
+        if (currentStep === index)
             return "in-progress";
-        else if (currentStep > index)
-            return "completed";
-        else
-            return "";
+        return "completed";
     };
     // useEffects
     useEffect(() => onChange(0), []);
@@ -24,13 +31,24 @@ const Steps = ({ children, steps = [], onChange }) => {
         React.createElement("div", { className: "steps" }, steps.length > 0 &&
             steps.map((step, index) => {
                 let itemIcon = ["item-icon"];
-                itemIcon.push(changeItemIcon(currentStep, index));
+                itemIcon.push(getStepIconStatus(currentStep, index));
                 return (React.createElement("div", { key: step.title || index, className: "item", onClick: () => {
-                        setCurrentStep(index);
-                        onChange(index);
+                        if (validation) {
+                            _onSubmit((result) => {
+                                if (!result)
+                                    return;
+                                setCurrentStep(index);
+                                onChange(index);
+                                _setSubmit(false);
+                            });
+                        }
+                        else {
+                            setCurrentStep(index);
+                            onChange(index);
+                        }
                     } },
                     React.createElement("div", { className: itemIcon.map((c) => c).join(" ") },
-                        React.createElement("span", { className: changeItemIcon(currentStep, index) })),
+                        React.createElement("span", { className: getStepIconStatus(currentStep, index) })),
                     React.createElement("div", { className: "item-informations" },
                         React.createElement("span", { className: "step" },
                             "STEP ",
@@ -38,7 +56,18 @@ const Steps = ({ children, steps = [], onChange }) => {
                         React.createElement(Title, { Level: "h3" }, step.title))));
             })),
         React.createElement("div", { className: "content" },
-            steps.map((step, index) => currentStep === index && step.content),
+            steps.map((step, stepIndex) => {
+                return (React.createElement("div", { key: stepIndex }, React.Children.map(step.content, (child) => {
+                    if (React.isValidElement(child) && stepIndex === currentStep) {
+                        return validation
+                            ? React.cloneElement(child, {
+                                errors: _errors,
+                            })
+                            : child;
+                    }
+                    return null;
+                })));
+            }),
             React.createElement("div", { className: "buttons" },
                 currentStep > 0 && (React.createElement(Button, { status: "light", onClick: () => {
                         setCurrentStep((prev) => prev - 1);
@@ -46,8 +75,19 @@ const Steps = ({ children, steps = [], onChange }) => {
                     } }, "Geri")),
                 children && children,
                 currentStep < steps.length - 1 && (React.createElement(Button, { onClick: () => {
-                        setCurrentStep((prev) => prev + 1);
-                        onChange(currentStep + 1);
+                        if (validation) {
+                            _onSubmit((result) => {
+                                if (!result)
+                                    return;
+                                setCurrentStep((prev) => prev + 1);
+                                onChange(currentStep + 1);
+                                _setSubmit(false);
+                            });
+                        }
+                        else {
+                            setCurrentStep((prev) => prev + 1);
+                            onChange(currentStep + 1);
+                        }
                     } }, "\u0130leri"))))));
 };
 export default Steps;

package/dist/index.d.ts

@@ -22,8 +22,9 @@ import Alert from "./components/feedback/alert";
 import Confirm from "./components/feedback/confirm";
 import Modal from "./components/feedback/modal";
 import Progress from "./components/feedback/progress";
+import Breadcrumb from "./components/navigation/breadcrumb";
 import Menu from "./components/navigation/menu";
 import Steps from "./components/navigation/steps";
 import Grid from "./components/layout/grid-system";
 import Layout from "./components/layout";
-export { Button, ButtonAction, ButtonGroup, Input, DatePicker, Select, Switch, Upload, Checkbox, Radio, Card, Chip, Divider, DnD, Paper, SyntaxHighlighter, Table, Tabs, Typography, Alert, Confirm, Modal, Progress, Menu, Steps, Grid, Layout, };
+export { Button, ButtonAction, ButtonGroup, Input, DatePicker, Select, Switch, Upload, Checkbox, Radio, Card, Chip, Divider, DnD, Paper, SyntaxHighlighter, Table, Tabs, Typography, Alert, Confirm, Modal, Progress, Breadcrumb, Menu, Steps, Grid, Layout, };

package/dist/index.js

@@ -26,6 +26,7 @@ import Confirm from "./components/feedback/confirm";
 import Modal from "./components/feedback/modal";
 import Progress from "./components/feedback/progress";
 // Navigation
+import Breadcrumb from "./components/navigation/breadcrumb";
 import Menu from "./components/navigation/menu";
 import Steps from "./components/navigation/steps";
 // Layout
@@ -39,6 +40,6 @@ Card, Chip, Divider, DnD, Paper, SyntaxHighlighter, Table, Tabs, Typography,
 // Feedback
 Alert, Confirm, Modal, Progress, 
 // Navigation
-Menu, Steps, 
+Breadcrumb, Menu, Steps, 
 // Layout
 Grid, Layout, };

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

@@ -40,7 +40,7 @@ export declare const useNotification: () => {
         status: Status;
     }) => void;
 };
-export declare const useValidation: <TData extends object>(data: TData, params: ValidationProperties<TData>[]) => {
+export declare const useValidation: <TData extends object>(data: TData, params: ValidationProperties<TData>[], step?: number) => {
     onSubmit: (callback: (result: boolean) => void) => void;
     setSubmit: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     errors: Partial<{ [key in keyof TData]: string; }>;

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

@@ -30,7 +30,7 @@ export const useNotification = () => {
     };
     return { notification };
 };
-export const useValidation = function (data, params) {
+export const useValidation = function (data, params, step) {
     // refs
     const _errors = useRef({});
     // states
@@ -43,55 +43,116 @@ export const useValidation = function (data, params) {
             let result = true;
             if (!data || Object.keys(data).length === 0 || params.length === 0)
                 result = false;
-            if (Object.keys(_errors.current).length > 0)
-                result = false;
+            if (step) {
+                const filteredErrors = Object.fromEntries(Object.entries(_errors.current)
+                    .filter(([key]) => key.startsWith(`${step}_`))
+                    .map(([key, value]) => [key.replace(/^\d+_/, ""), String(value)]));
+                if (Object.keys(filteredErrors).length > 0)
+                    result = false;
+            }
+            else {
+                if (Object.keys(_errors.current).length > 0)
+                    result = false;
+            }
             callback(result);
         }, 0);
     };
-    const setError = (key, message) => {
-        setErrors((prev) => ({ ...prev, [key]: message }));
-        _errors.current = { ..._errors.current, [key]: message };
+    const setError = (key, message, step) => {
+        const _key = step ? `${step}_${key}` : key;
+        setErrors((prev) => ({ ...prev, [_key]: message }));
+        _errors.current = { ..._errors.current, [_key]: message };
     };
-    // useEffects
-    useEffect(() => {
-        if (!submit)
+    const handleParams = (param) => {
+        const value = data[param.key];
+        if (param.subkey) {
+            const subvalue = data[param.key];
+            if (param.subkey.includes(".")) {
+                let _data = subvalue;
+                const levels = param.subkey.split(".");
+                // "levels.length - 1" çünkü son seviyeye kadar gidip, son seviyedeki değeri alacağız.
+                for (let i = 0; i < levels.length; i++) {
+                    const key = levels[i];
+                    // Eğer `_data` undefined ya da null ise işlem bitirilsin.
+                    if (_data === undefined || _data === null)
+                        break;
+                    // `key`'i _data üzerinde kullanarak yeni değeri atıyoruz.
+                    _data = _data[key];
+                }
+                // Burada _data son seviyeye ulaşacaktır.
+                paramsShape(param, _data);
+            }
             return;
-        setErrors({});
-        _errors.current = {};
-        params.forEach((param) => {
-            const value = data[param.key];
-            param.shape?.forEach((s) => {
-                if (param.where) {
-                    if (s.type === "required" && param.where(data)) {
-                        Utils.IsNullOrEmpty(value) ? setError(param.key, s.message) : null;
-                    }
+        }
+        paramsShape(param, value);
+    };
+    const paramsShape = (param, value) => {
+        param.shape?.forEach((s) => {
+            if (param.where) {
+                if (s.type === "required" && param.where(data)) {
+                    Utils.IsNullOrEmpty(value) ? setError(param.key, s.message, param.step) : null;
                 }
-                else {
+            }
+            else {
+                // Subkeys Validations
+                if (param.subkey) {
+                    const levels = param.subkey.split(".");
+                    const key = levels[levels.length - 1];
                     if (s.type === "required") {
-                        Utils.IsNullOrEmpty(value) ? setError(param.key, s.message) : null;
+                        Utils.IsNullOrEmpty(value) ? setError(key, s.message, param.step) : null;
                     }
                     if (s.type === "minimum") {
                         value && value.length < s.value
-                            ? setError(param.key, Utils.StringFormat(s.message, s.value))
+                            ? setError(key, Utils.StringFormat(s.message, s.value), param.step)
                             : null;
                     }
                     if (s.type === "maximum") {
                         value && value.length > s.value
-                            ? setError(param.key, Utils.StringFormat(s.message, s.value))
+                            ? setError(key, Utils.StringFormat(s.message, s.value), param.step)
                             : null;
                     }
                     if (s.type === "email") {
                         const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value);
-                        !regex && Utils.IsNullOrEmpty(value) ? setError(param.key, s.message) : null;
+                        !regex && Utils.IsNullOrEmpty(value) ? setError(key, s.message, param.step) : null;
                     }
+                    return;
+                }
+                // Keys Validations
+                if (s.type === "required") {
+                    Utils.IsNullOrEmpty(value) ? setError(param.key, s.message, param.step) : null;
                 }
-            });
+                if (s.type === "minimum") {
+                    value && value.length < s.value
+                        ? setError(param.key, Utils.StringFormat(s.message, s.value), param.step)
+                        : null;
+                }
+                if (s.type === "maximum") {
+                    value && value.length > s.value
+                        ? setError(param.key, Utils.StringFormat(s.message, s.value), param.step)
+                        : null;
+                }
+                if (s.type === "email") {
+                    const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value);
+                    !regex && Utils.IsNullOrEmpty(value) ? setError(param.key, s.message, param.step) : null;
+                }
+            }
         });
+    };
+    // useEffects
+    useEffect(() => {
+        setErrors({});
+        _errors.current = {};
+        if (!submit)
+            return;
+        params.forEach((param) => handleParams(param));
     }, [submit, data]);
     return {
         onSubmit,
         setSubmit,
-        errors,
+        errors: step
+            ? Object.fromEntries(Object.entries(errors)
+                .filter(([key]) => key.startsWith(`${step}_`))
+                .map(([key, value]) => [key.replace(/^\d+_/, ""), String(value)]))
+            : errors,
     };
 };
 export const useTranslation = function (currentLanguage, translations) {

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

@@ -68,11 +68,10 @@ class Api {
         };
     };
     Cookies = (name) => {
-        // Eğer window mevcutsa
         if (typeof window === "undefined")
             return undefined;
-        const cookieObject = [];
         const cookies = document.cookie.split("; ");
+        const cookieObject = [];
         cookies.forEach((cookie) => {
             const [key, value] = cookie.split("=");
             cookieObject.push({ key: key, value: value });

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

@@ -47,6 +47,8 @@ export type TabProps = {
 };
 export type ValidationProperties<T> = {
     key: keyof T;
+    subkey?: string;
+    step?: number;
     shape?: {
         type: "required" | "minimum" | "maximum" | "email";
         value?: string | number;
@@ -54,6 +56,9 @@ export type ValidationProperties<T> = {
     }[];
     where?: (param: T) => boolean;
 };
+export type Errors<TData> = Partial<{
+    [key in keyof TData]: string;
+}>;
 export type PieChartDataType = {
     value: number;
     text: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.1.66",
+  "version": "0.1.68",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -42,7 +42,7 @@
   ],
   "author": "Kaan ÇETİN",
   "license": "MIT",
-  "description": "AR Design...",
+  "description": "AR Design is a (react || nextjs) library.",
   "peerDependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1"