ar-design 0.1.21 → 0.1.22

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

@@ -8,7 +8,7 @@
 }
 input.outlined:not(.disabled).primary:focus{
   border-color: var(--primary);
-  box-shadow: 0 0 0 2.5px rgba(var(--primary-rgb), 0.1);
+  box-shadow: 0 0 0 3.5px rgba(var(--primary-rgb), 0.25);
 }
 input[type="checkbox"]:checked + span > .ar-checkbox.outlined:not(.disabled).primary{
   box-shadow: 0 0 0 2.5px rgba(var(--primary-rgb), 0.1);
@@ -30,7 +30,7 @@ input[type="checkbox"]:checked + span > .ar-checkbox.outlined:not(.disabled).pri
 }
 input.outlined:not(.disabled).secondary:focus{
   border-color: var(--secondary);
-  box-shadow: 0 0 0 2.5px rgba(var(--secondary-rgb), 0.1);
+  box-shadow: 0 0 0 3.5px rgba(var(--secondary-rgb), 0.25);
 }
 input[type="checkbox"]:checked + span > .ar-checkbox.outlined:not(.disabled).secondary{
   box-shadow: 0 0 0 2.5px rgba(var(--secondary-rgb), 0.1);
@@ -52,7 +52,7 @@ input[type="checkbox"]:checked + span > .ar-checkbox.outlined:not(.disabled).sec
 }
 input.outlined:not(.disabled).success:focus{
   border-color: var(--success);
-  box-shadow: 0 0 0 2.5px rgba(var(--success-rgb), 0.1);
+  box-shadow: 0 0 0 3.5px rgba(var(--success-rgb), 0.25);
 }
 input[type="checkbox"]:checked + span > .ar-checkbox.outlined:not(.disabled).success{
   box-shadow: 0 0 0 2.5px rgba(var(--success-rgb), 0.1);
@@ -74,7 +74,7 @@ input[type="checkbox"]:checked + span > .ar-checkbox.outlined:not(.disabled).suc
 }
 input.outlined:not(.disabled).warning:focus{
   border-color: var(--warning);
-  box-shadow: 0 0 0 2.5px rgba(var(--warning-rgb), 0.1);
+  box-shadow: 0 0 0 3.5px rgba(var(--warning-rgb), 0.25);
 }
 input[type="checkbox"]:checked + span > .ar-checkbox.outlined:not(.disabled).warning{
   box-shadow: 0 0 0 2.5px rgba(var(--warning-rgb), 0.1);
@@ -96,7 +96,7 @@ input[type="checkbox"]:checked + span > .ar-checkbox.outlined:not(.disabled).war
 }
 input.outlined:not(.disabled).danger:focus{
   border-color: var(--danger);
-  box-shadow: 0 0 0 2.5px rgba(var(--danger-rgb), 0.1);
+  box-shadow: 0 0 0 3.5px rgba(var(--danger-rgb), 0.25);
 }
 input[type="checkbox"]:checked + span > .ar-checkbox.outlined:not(.disabled).danger{
   box-shadow: 0 0 0 2.5px rgba(var(--danger-rgb), 0.1);
@@ -118,7 +118,7 @@ input[type="checkbox"]:checked + span > .ar-checkbox.outlined:not(.disabled).dan
 }
 input.outlined:not(.disabled).information:focus{
   border-color: var(--information);
-  box-shadow: 0 0 0 2.5px rgba(var(--information-rgb), 0.1);
+  box-shadow: 0 0 0 3.5px rgba(var(--information-rgb), 0.25);
 }
 input[type="checkbox"]:checked + span > .ar-checkbox.outlined:not(.disabled).information{
   box-shadow: 0 0 0 2.5px rgba(var(--information-rgb), 0.1);
@@ -140,7 +140,7 @@ input[type="checkbox"]:checked + span > .ar-checkbox.outlined:not(.disabled).inf
 }
 input.outlined:not(.disabled).dark:focus{
   border-color: var(--dark);
-  box-shadow: 0 0 0 2.5px rgba(var(--dark-rgb), 0.1);
+  box-shadow: 0 0 0 3.5px rgba(var(--dark-rgb), 0.25);
 }
 input[type="checkbox"]:checked + span > .ar-checkbox.outlined:not(.disabled).dark{
   box-shadow: 0 0 0 2.5px rgba(var(--dark-rgb), 0.1);
@@ -161,8 +161,8 @@ input[type="checkbox"]:checked + span > .ar-checkbox.outlined:not(.disabled).dar
   border-color: rgba(var(--light-rgb), 0.5);
 }
 input.outlined:not(.disabled).light:focus{
-  border-color: var(--light);
-  box-shadow: 0 0 0 2.5px rgba(var(--light-rgb), 0.1);
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3.5px rgba(var(--primary-rgb), 0.25);
 }
 input[type="checkbox"]:checked + span > .ar-checkbox.outlined:not(.disabled).light{
   box-shadow: 0 0 0 2.5px rgba(var(--light-rgb), 0.1);
@@ -172,5 +172,4 @@ input[type="checkbox"]:checked + span > .ar-checkbox.outlined:not(.disabled).lig
   animation: clicked-light ease-in-out 750ms 0s 1 normal both;
 }
 /* #endregion */
-/* LIGHT */
-
+/* LIGHT */

package/dist/components/data-display/paper/index.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import "../../../assets/css/components/data-display/paper/paper.css";
+declare const Paper: React.FC<{
+    children: React.ReactNode;
+    title?: string;
+    action?: React.ReactNode;
+}>;
+export default Paper;

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

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

package/dist/components/data-display/table/Actions.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import IProps from "../../form/button/IProps";
+declare const Actions: React.FC<{
+    children: React.ReactElement<{
+        children: React.ReactElement<IProps> | React.ReactElement<IProps>[];
+    }>;
+}>;
+export default Actions;

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

@@ -0,0 +1,2 @@
+const Actions = ({ children }) => children;
+export default Actions;

package/dist/components/data-display/table/IProps.d.ts

@@ -0,0 +1,14 @@
+import { TableColumnType } from "../../../libs/types";
+import { IChildren } from "../../../libs/types/IGlobalProps";
+interface IProps<T> extends IChildren {
+    data: T[];
+    columns: TableColumnType<T>[];
+    selections?: (selectionItems: T[]) => void;
+    config?: {
+        perPage?: number;
+        scroll?: {
+            maxHeight: number;
+        };
+    };
+}
+export default IProps;

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

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

package/dist/components/data-display/table/index.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import IProps from "./IProps";
+import "../../../assets/css/components/data-display/table/table.css";
+declare const Table: {
+    <T extends object>({ children, data, columns, selections, config, }: IProps<T>): React.JSX.Element;
+    Action: React.FC<{
+        children: React.ReactElement<{
+            children: React.ReactElement<import("../../form/button/IProps").default> | React.ReactElement<import("../../form/button/IProps").default>[];
+        }>;
+    }>;
+};
+export default Table;

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

@@ -0,0 +1,194 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import "../../../assets/css/components/data-display/table/table.css";
+import Checkbox from "../../form/checkbox";
+import Actions from "./Actions";
+import Input from "../../form/input";
+import Pagination from "../../navigation/pagination";
+const Table = function ({ children, data, columns, selections, config, }) {
+    // refs
+    let _dataLength = useRef(0);
+    const _tableWrapper = useRef(null);
+    const _tableContent = useRef(null);
+    const _table = useRef(null);
+    const _checkboxItems = useRef([]);
+    // className
+    const _tableClassName = ["ar-table", "scroll"];
+    // states
+    const [selectAll, setSelectAll] = useState(false);
+    const [selectionItems, setSelectionItems] = useState([]);
+    const [searchedText, setSearchedText] = useState("");
+    const [currentPage, setCurrentPage] = useState(0);
+    const [perPage, setPerPage] = useState(0);
+    if (config && Object.keys(config.scroll || {}).length > 0) {
+        if (_tableContent.current && config.scroll) {
+            if (config.scroll.maxHeight) {
+                _tableContent.current.style.maxHeight = `${config?.scroll?.maxHeight}rem`;
+            }
+        }
+    }
+    // methods
+    const handleOnScroll = () => {
+        if (!_table.current || !_tableWrapper.current)
+            return;
+        const wrapperRect = _tableWrapper.current.getBoundingClientRect();
+        const updateStickyPositions = (elements) => {
+            elements.forEach((element) => {
+                const leftChildren = Array.from(element.childNodes)
+                    .filter((node) => node.nodeType === Node.ELEMENT_NODE)
+                    .filter((child) => child.dataset.stickyPosition === "left");
+                const rightChildren = Array.from(element.childNodes)
+                    .filter((node) => node.nodeType === Node.ELEMENT_NODE)
+                    .filter((child) => child.dataset.stickyPosition === "right")
+                    .reverse();
+                // Calculate positions and minimize `getBoundingClientRect` calls
+                const leftRects = leftChildren.map((child) => child.getBoundingClientRect());
+                const rightRects = rightChildren.map((child) => child.getBoundingClientRect());
+                const leftPrevious = leftRects.map((rect) => Math.abs(rect.right - wrapperRect.left));
+                const rightPrevious = rightRects.map((rect) => Math.abs(rect.left - wrapperRect.right));
+                // #region Left
+                leftChildren.forEach((child, index) => {
+                    const prevLeft = index > 0 ? leftPrevious[index - 1] : 0;
+                    if (index > 0) {
+                        const childLeft = leftRects[index].left - wrapperRect.left;
+                        if (Math.floor(childLeft) === Math.floor(prevLeft)) {
+                            if (!child.classList.contains("active-sticky"))
+                                child.classList.add("active-sticky");
+                        }
+                        else
+                            child.classList.remove("active-sticky");
+                        child.style.left = `${prevLeft}px`;
+                    }
+                    else
+                        child.classList.add("sticky");
+                    if (child.nodeName === "TD")
+                        child.style.zIndex = `${leftChildren.length - index}`;
+                });
+                // #endregion
+                // #region Right
+                rightChildren.forEach((child, index) => {
+                    const prevRight = index > 0 ? rightPrevious[index - 1] : 0;
+                    if (index > 0) {
+                        const childRight = Math.abs(rightRects[index].right - wrapperRect.right);
+                        if (Math.floor(childRight) === Math.floor(prevRight)) {
+                            if (!child.classList.contains("active-sticky"))
+                                child.classList.add("active-sticky");
+                        }
+                        else
+                            child.classList.remove("active-sticky");
+                        child.style.right = `${prevRight}px`;
+                    }
+                    else
+                        child.classList.add("sticky");
+                });
+                // #endregion
+            });
+        };
+        const theadElements = _table.current.querySelectorAll("thead > tr");
+        const tbodyElements = _table.current.querySelectorAll("tbody > tr");
+        requestAnimationFrame(() => {
+            updateStickyPositions(theadElements);
+            updateStickyPositions(tbodyElements);
+        });
+    };
+    const getData = useCallback(() => {
+        let _data = [...data];
+        _dataLength.current = data.length;
+        const indexOfLastRow = currentPage * perPage;
+        const indexOfFirstRow = indexOfLastRow - perPage;
+        _data = data.slice(indexOfFirstRow, indexOfLastRow);
+        return searchedText
+            ? _data.filter((item) => {
+                // `some` kullanarak herhangi bir girişin arama koşulunu karşılayıp karşılamadığını kontrol ediyoruz.
+                return Object.entries(item).some(([_key, _value]) => {
+                    if (typeof _value === "number" || typeof _value === "string") {
+                        // Değeri string'e dönüştürüp, aranan metni içerip içermediğini kontrol ediyoruz (büyük-küçük harf duyarsız).
+                        return _value.toString().toLowerCase().includes(searchedText.toLowerCase());
+                    }
+                    // Eğer değer bir nesne ise (bu mantığı ihtiyaçlarınıza göre özelleştirebilirsiniz).
+                    if (typeof _value === "object" && _value !== null) {
+                        // Örnek: Eğer nesne ise, bu alanı atla veya farklı şekilde ele al.
+                        return false;
+                    }
+                    // Diğer türlerdeki (boolean, undefined vs.) değerleri atla.
+                    return false;
+                });
+            })
+            : _data;
+    }, [data, searchedText, currentPage]);
+    // useEffects
+    useEffect(() => {
+        if (!selections || selectionItems.length === 0)
+            return;
+        selections(selectionItems);
+    }, [selectionItems]);
+    useEffect(() => {
+        const allChecked = _checkboxItems.current.every((item) => item?.checked === true);
+        setSelectAll(allChecked);
+    }, [currentPage]);
+    return (React.createElement("div", { ref: _tableWrapper, className: _tableClassName.map((c) => c).join(" ") },
+        React.createElement("div", { className: "header" },
+            React.createElement("div", null,
+                React.createElement(Input, { placeholder: "Ara", onChange: (event) => setSearchedText(event.target.value.toLowerCase()) })),
+            React.createElement("div", null, React.Children.map(children, (child) => child))),
+        React.createElement("div", { ref: _tableContent, className: "content", onScroll: handleOnScroll },
+            React.createElement("table", { ref: _table },
+                React.createElement("thead", null,
+                    React.createElement("tr", { key: "selection" },
+                        selections && (React.createElement("th", { className: "selection-col sticky-left", "data-sticky-position": "left" },
+                            React.createElement(Checkbox, { variant: "filled", status: "primary", checked: selectAll, onChange: (event) => {
+                                    if (_checkboxItems.current.length > 0) {
+                                        setSelectAll(event.target.checked);
+                                        _checkboxItems.current.forEach((item) => {
+                                            if (item) {
+                                                if (item.checked !== event.target.checked)
+                                                    item.click();
+                                            }
+                                        });
+                                    }
+                                } }))),
+                        columns.map((c, cIndex) => {
+                            let _className = [];
+                            if (c.config?.sticky)
+                                _className.push(`sticky-${c.config.sticky}`);
+                            if (c.config?.alignContent) {
+                                _className.push(`align-content-${c.config.alignContent}`);
+                            }
+                            return (React.createElement("th", { key: `column-${cIndex}`, ...(_className.length > 0 && {
+                                    className: `${_className.map((c) => c).join(" ")}`,
+                                }), ...(c.config?.sticky && {
+                                    "data-sticky-position": c.config.sticky,
+                                }) }, c.title));
+                        }))),
+                React.createElement("tbody", null, getData().length > 0 ? (getData().map((item, index) => (React.createElement("tr", { key: `row-${index}` },
+                    selections && (React.createElement("td", { key: `selection-${index}`, className: "sticky-left", "data-sticky-position": "left" },
+                        React.createElement(Checkbox, { ref: (element) => (_checkboxItems.current[index] = element), status: "primary", checked: selectionItems.some((selectionItem) => JSON.stringify(selectionItem) === JSON.stringify(item)), onChange: (event) => {
+                                if (event.target.checked)
+                                    setSelectionItems((prev) => [...prev, item]);
+                                else
+                                    setSelectionItems((prev) => prev.filter((_item) => _item !== item));
+                            } }))),
+                    columns.map((c, cIndex) => {
+                        let _className = [];
+                        const render = c.render ? c.render(item) : item[c.key];
+                        // const isTypeOfNumber = typeof render === "number" ? "type-of-number" : "";
+                        if (c.config?.sticky)
+                            _className.push(`sticky-${c.config.sticky}`);
+                        // if (isTypeOfNumber) _className.push(isTypeOfNumber);
+                        if (c.config?.alignContent) {
+                            _className.push(`align-content-${c.config.alignContent}`);
+                        }
+                        return (React.createElement("td", { key: `cell-${index}-${cIndex}`, ...(_className.length > 0 && {
+                                className: `${_className.map((c) => c).join(" ")}`,
+                            }), ...(c.config?.sticky && {
+                                "data-sticky-position": c.config.sticky,
+                            }) }, React.isValidElement(render) ? render : String(render)));
+                    }))))) : (React.createElement("tr", null,
+                    React.createElement("td", { colSpan: columns.length + 1 }, "Herhangi bir kay\u0131t bulunamad\u0131!")))))),
+        data.length > perPage && (React.createElement("div", { className: "footer" },
+            React.createElement(Pagination, { total: _dataLength.current, perPage: config?.perPage, onChange: (page, perPage) => {
+                    setCurrentPage(page);
+                    setPerPage(perPage);
+                } })))));
+};
+Table.Action = Actions;
+export default Table;

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { IChildren, ISizes } from "../../../libs/types/IGlobalProps";
+interface IProps extends IChildren, ISizes {
+    /**
+     *
+     */
+    open: {
+        set: React.Dispatch<React.SetStateAction<boolean>>;
+        get: boolean;
+    };
+    /**
+     * ...
+     */
+    title: string;
+    /**
+     * ...
+     */
+    footer?: React.ReactNode;
+}
+export default IProps;

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

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

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

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

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

@@ -0,0 +1,45 @@
+import React, { useEffect, useRef } from "react";
+import "../../../assets/css/components/feedback/modal/modal.css";
+import Typography from "../../data-display/typography";
+const { Title } = Typography;
+const Modal = ({ children, open, title, size = "normal", footer }) => {
+    // refs
+    const _arModal = useRef(null);
+    const _modalWrapperClassName = ["ar-modal-wrapper"];
+    const _modalClassName = ["ar-modal", size];
+    if (Object.keys(open).length > 0 && open.get)
+        _modalWrapperClassName.push("opened");
+    else
+        _modalWrapperClassName.push("closed");
+    // methods
+    const handleClickOutSide = (event) => {
+        const target = event.target;
+        if (_arModal.current && !_arModal.current.contains(target))
+            open.set(false);
+    };
+    const handleKeys = (event) => {
+        const key = event.key;
+        if (key === "Escape")
+            open.set(false);
+    };
+    // useEffects
+    useEffect(() => {
+        if (open.get) {
+            document.addEventListener("click", handleClickOutSide);
+            document.addEventListener("keydown", handleKeys);
+            // Dinleyicileri kaldır.
+            return () => {
+                document.removeEventListener("click", handleClickOutSide);
+                document.removeEventListener("keydown", handleKeys);
+            };
+        }
+    }, [open.get]);
+    return (React.createElement("div", { className: _modalWrapperClassName.map((c) => c).join(" ") },
+        React.createElement("div", { ref: _arModal, className: _modalClassName.map((c) => c).join(" "), role: "dialog" },
+            React.createElement("div", { className: "header" },
+                React.createElement(Title, { Level: "h3" }, title),
+                React.createElement("div", { className: "close", onClick: () => open.set((prev) => !prev) })),
+            React.createElement("div", { className: "content" }, children),
+            footer && React.createElement("div", { className: "footer" }, footer))));
+};
+export default Modal;

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

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

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

@@ -1,35 +1,21 @@
 "use client";
 import React, { useRef } from "react";
 import "../../../assets/css/components/form/button/button.css";
+import Utils from "../../../libs/infrastructure/shared/Utils";
 const Button = ({ children, variant = "filled", shape, status = "primary", border, size = "normal", position, icon, upperCase, ...attributes }) => {
     // refs
     const _button = useRef(null);
-    let _buttonClassName = `ar-button ${variant} ${status}`;
-    let _spanClassName = `text`;
-    // button className
+    const _buttonClassName = ["ar-button"];
+    _buttonClassName.push(...Utils.GetClassName(variant, status, border, size, icon, attributes.className));
+    if (!children)
+        _buttonClassName.push("no-content");
     if (shape)
-        _buttonClassName += ` ar-button-shape ${shape} border-radius-sm`;
-    if (!shape)
-        _buttonClassName += ` border-radius-${border?.radius || "sm"}`;
-    if (size)
-        _buttonClassName += ` ${size}`;
+        _buttonClassName.push(`ar-button-shape ${shape}`);
     if (position) {
-        _buttonClassName += ` ${position.type}`;
-        _buttonClassName += ` ${position.inset.map((_inset) => _inset).join(" ")}`;
+        _buttonClassName.push(position.type);
+        _buttonClassName.push(position.inset.map((_inset) => _inset).join(" "));
     }
-    if (attributes.className)
-        _buttonClassName += ` ${attributes.className}`;
-    // span className
-    if (icon) {
-        if (icon.element && !shape)
-            _spanClassName += ` icon`;
-        if (icon.direction)
-            _spanClassName += ` icon-${icon.direction}`;
-        if (icon.position) {
-            _spanClassName += ` icon-${icon.direction ?? "row"}-${icon.position}`;
-        }
-    }
-    return (React.createElement("button", { ref: _button, ...attributes, className: _buttonClassName, onClick: (event) => {
+    return (React.createElement("button", { ref: _button, ...attributes, className: _buttonClassName.map((c) => c).join(" "), onClick: (event) => {
             // Disabled gelmesi durumunda işlem yapmasına izin verme...
             if (attributes.disabled)
                 return;
@@ -45,13 +31,13 @@ const Button = ({ children, variant = "filled", shape, status = "primary", borde
             })();
             (() => attributes.onClick && attributes.onClick(event))();
         } },
-        React.createElement("span", { className: _spanClassName },
+        React.createElement("span", { className: "text" },
             icon?.element,
-            !shape
+            React.createElement("span", null, !shape
                 ? typeof children === "string" && upperCase
                     ? children.toLocaleUpperCase()
                     : children
-                : "")));
+                : ""))));
 };
 Button.displayName = "Button";
 export default Button;

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

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

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

@@ -1,5 +1,5 @@
 import React from "react";
 import IProps from "./IProps";
 import "../../../assets/css/components/form/checkbox/checkbox.css";
-declare const Checkbox: React.FC<IProps>;
+declare const Checkbox: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;

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

@@ -1,22 +1,15 @@
 "use client";
-import React, { useRef } from "react";
+import React, { forwardRef, useRef } from "react";
 import "../../../assets/css/components/form/checkbox/checkbox.css";
-const Checkbox = ({ label, variant = "outlined", status = "primary", border = { radius: "sm" }, ...attributes }) => {
+import Utils from "../../../libs/infrastructure/shared/Utils";
+const Checkbox = forwardRef(({ label, variant = "outlined", status = "light", size = "normal", border = { radius: "sm" }, upperCase, ...attributes }, ref) => {
     // refs
-    let _checkbox = useRef(null);
-    let _wrapperClassName = "ar-checkbox-wrapper";
-    let _checkboxClassName = "ar-checkbox";
-    // checkbox -> variant
-    if (variant)
-        _checkboxClassName += ` ${variant}`;
-    // status
-    _checkboxClassName += ` light`;
-    // border
-    _checkboxClassName += ` border-style-solid`;
-    _checkboxClassName += ` border-radius-${border.radius}`;
-    return (React.createElement("div", { className: _wrapperClassName },
+    const _checkbox = useRef(null);
+    const _checkboxClassName = ["ar-checkbox"];
+    _checkboxClassName.push(...Utils.GetClassName(variant, undefined, border, size, undefined, attributes.className));
+    return (React.createElement("div", { className: "ar-checkbox-wrapper" },
         React.createElement("label", null,
-            React.createElement("input", { type: attributes.type || "checkbox", ...attributes, size: 0, onChange: (event) => {
+            React.createElement("input", { ref: ref, type: attributes.type || "checkbox", ...attributes, size: 0, onChange: (event) => {
                     (() => {
                         const _current = _checkbox.current;
                         if (!_current)
@@ -28,8 +21,8 @@ const Checkbox = ({ label, variant = "outlined", status = "primary", border = {
                     (() => attributes.onChange && attributes.onChange(event))();
                 } }),
             React.createElement("span", null,
-                React.createElement("span", { ref: _checkbox, className: _checkboxClassName }),
-                label && React.createElement("span", { className: "label" }, label)))));
-};
+                React.createElement("span", { ref: _checkbox, className: _checkboxClassName.map((c) => c).join(" ") }),
+                label && React.createElement("span", { className: "label" }, upperCase ? label.toUpperCase() : label)))));
+});
 Checkbox.displayName = "Checkbox";
 export default Checkbox;

package/dist/components/form/date-picker/Props.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { IGlobalProps } from "../../../libs/types/IGlobalProps";
+type Props = {
+    label?: string;
+    onChange: (value: string) => void;
+} & Omit<IGlobalProps, "children" | "icon" | "upperCase" | "disabled"> & Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "onChange" | "size">;
+export default Props;

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

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

package/dist/components/form/date-picker/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "../../../assets/css/components/form/date-picker/date-picker.css";
+import Props from "./Props";
+declare const DatePicker: React.FC<Props>;
+export default DatePicker;