ar-design 0.2.80 → 0.2.82

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

@@ -220,7 +220,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                             ?.map((filter, fIndex) => {
                             const name = typeof c.key !== "object" ? String(c.key) : String(c.key.field);
                             return (React.createElement("div", null,
-                                React.createElement(Checkbox, { ref: (element) => (_filterCheckboxItems.current[fIndex] = element), label: filter.text, name: name, status: "primary", value: filter.value, checked: Array.isArray(checkboxSelectedParams?.[name]) &&
+                                React.createElement(Checkbox, { ref: (element) => (_filterCheckboxItems.current[fIndex] = element), label: filter.text, name: name, color: "blue", value: filter.value, checked: Array.isArray(checkboxSelectedParams?.[name]) &&
                                         checkboxSelectedParams?.[name]?.some((f) => String(f.value) === String(filter.value)), onChange: async (event) => await handleCheckboxChange(event) })));
                         }))));
                 default:
@@ -347,7 +347,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
         return (React.createElement(Fragment, { key: `row-${index}` },
             React.createElement("tr", { key: `row-${index}` },
                 selections && (React.createElement("td", { 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) => {
+                    React.createElement(Checkbox, { ref: (element) => (_checkboxItems.current[index] = element), color: "blue", checked: selectionItems.some((selectionItem) => JSON.stringify(selectionItem) === JSON.stringify(item)), onChange: (event) => {
                             if (event.target.checked)
                                 setSelectionItems((prev) => [...prev, item]);
                             else
@@ -510,15 +510,15 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                         if (actions.import && actions.import.onClick)
                             actions.import.onClick(formData, files);
                     }, config: { buttons: { okay: "Yükle", cancel: "İptal" } }, windowBlur: true },
-                    React.createElement(Button, { variant: "outlined", status: "success", icon: { element: React.createElement(ARIcon, { icon: "Import", size: 16 }) }, tooltip: { text: actions.import.tooltip, direction: "top" } }))),
-                actions.create && (React.createElement(Button, { variant: "outlined", status: "dark", icon: { element: React.createElement(ARIcon, { icon: "Add", size: 16 }) }, tooltip: { text: actions.create.tooltip, direction: "top" }, onClick: actions.create.onClick }))))))),
+                    React.createElement(Button, { variant: "outlined", color: "green", icon: { element: React.createElement(ARIcon, { icon: "Import", size: 16 }) }, tooltip: { text: actions.import.tooltip, direction: "top" } }))),
+                actions.create && (React.createElement(Button, { variant: "outlined", icon: { element: React.createElement(ARIcon, { icon: "Add", size: 16 }) }, tooltip: { text: actions.create.tooltip, direction: "top" }, onClick: actions.create.onClick }))))))),
         React.createElement("div", { ref: _tableContent, className: "content", onScroll: handleScroll },
             React.createElement("table", { ref: ref },
                 React.createElement("thead", null,
                     React.createElement("tr", { key: "selection" },
                         data.some((item) => _subrowSelector in item) && _subrowButton && (React.createElement("td", { style: { width: 0, minWidth: 0 } })),
                         selections && (React.createElement("th", { className: "selection-col sticky-left", "data-sticky-position": "left" },
-                            React.createElement(Checkbox, { variant: "filled", status: "primary", checked: selectAll, onChange: (event) => {
+                            React.createElement(Checkbox, { variant: "filled", color: "blue", checked: selectAll, onChange: (event) => {
                                     if (_checkboxItems.current.length > 0) {
                                         setSelectAll(event.target.checked);
                                         _checkboxItems.current.forEach((item) => {
@@ -551,7 +551,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                                 }), ...(c.config?.sticky && {
                                     "data-sticky-position": c.config.sticky,
                                 }) }, c.key && (React.createElement("div", { className: "filter-field" },
-                                React.createElement(Input, { ref: (element) => (_searchTextInputs.current[cIndex] = element), variant: c.key && !c.filters ? "outlined" : "filled", status: "light", style: { height: "2rem" }, value: (config.isServerSide ? ssrValue : csrValue) ?? "", name: key, onInput: handleSearch, disabled: !c.key || !!c.filters }),
+                                React.createElement(Input, { ref: (element) => (_searchTextInputs.current[cIndex] = element), variant: c.key && !c.filters ? "outlined" : "filled", style: { height: "2rem" }, value: (config.isServerSide ? ssrValue : csrValue) ?? "", name: key, onInput: handleSearch, disabled: !c.key || !!c.filters }),
                                 React.createElement("span", { ref: (element) => (_filterButton.current[cIndex] = element), onClick: (event) => {
                                         event.stopPropagation();
                                         // Temizlik...
@@ -574,7 +574,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                                         setFilterCurrentIndex(cIndex);
                                         handleFilterPopupContent(c, dataType, cIndex);
                                     } },
-                                    React.createElement(Button, { variant: "borderless", status: "dark", icon: {
+                                    React.createElement(Button, { variant: "borderless", icon: {
                                             element: (React.createElement(ARIcon, { viewBox: "0 0 16 16", size: 24, icon: "Filter", fill: "var(--dark)", strokeWidth: 0 })),
                                         } }))))));
                         })))),

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

@@ -68,11 +68,11 @@ const Popover = ({ children, title, message, content, onConfirm, windowBlur, ful
                 message && React.createElement("p", { className: "message" }, message),
                 content && React.createElement("div", { className: "content" }, content),
                 onConfirm && (React.createElement("div", { className: "footer" },
-                    React.createElement(Button, { status: "success", size: "small", onClick: () => {
+                    React.createElement(Button, { color: "green", size: "small", onClick: () => {
                             onConfirm(true);
                             setOpen(false);
                         } }, config?.buttons.okay ?? "Evet"),
-                    React.createElement(Button, { status: "light", size: "small", onClick: () => {
+                    React.createElement(Button, { size: "small", onClick: () => {
                             onConfirm(false);
                             setOpen(false);
                         } }, config?.buttons.cancel ?? "Hayır")))), document.body),

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

@@ -15,16 +15,16 @@ const Popup = ({ title, message, status, isOpen, buttons }) => {
     const _notificaitonPopupWrapperClassName = ["ar-notification-popup-wrapper"];
     const [className, setClassName] = useState(["ar-notification-popup", ""]);
     // methods
-    const buttonStatus = () => {
+    const buttonColor = () => {
         switch (status) {
             case "success":
-                return "success";
+                return "green";
             case "warning":
-                return "warning";
+                return "orange";
             case "information":
-                return "information";
+                return "teal";
             case "error":
-                return "danger";
+                return "red";
             default:
                 return "light";
         }
@@ -74,7 +74,7 @@ const Popup = ({ title, message, status, isOpen, buttons }) => {
                         title,
                         "!"),
                     React.createElement("span", { className: "message" }, message)),
-                React.createElement(Button, { variant: "filled", status: buttonStatus(), onClick: () => {
+                React.createElement(Button, { variant: "filled", color: buttonColor(), onClick: () => {
                         (() => buttons?.okay?.onClick && buttons.okay?.onClick())();
                         (() => {
                             setIsPopupOpen && setIsPopupOpen((prev) => !prev);

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

@@ -13,7 +13,7 @@ const Progress = ({ value, reverse, isVisibleValue = false }) => {
         _status = !reverse ? "primary" : "warning";
     else if (value >= 76 && value <= 100)
         _status = !reverse ? "success" : "danger";
-    _arProgressClassName.push(...Utils.GetClassName("filled", _status, { radius: "pill" }, undefined, undefined, undefined));
+    _arProgressClassName.push(...Utils.GetClassName("filled", _status, undefined, { radius: "pill" }, undefined, undefined, undefined));
     return (React.createElement("div", { className: "ar-progress" },
         React.createElement("div", { className: `ar-progress-bar ${_arProgressClassName.map((c) => c).join(" ")}` }),
         React.createElement("div", { className: `ar-progress-value ${_arProgressClassName.map((c) => c).join(" ")}`, style: {

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

@@ -1,5 +1,5 @@
-import { IBorder, IIcon, ISize, IStatus, IUpperCase, IVariant } from "../../../libs/types/IGlobalProps";
-interface IProps extends IVariant, IStatus, IBorder, IIcon, ISize, IUpperCase, React.ButtonHTMLAttributes<HTMLButtonElement> {
+import { IBorder, IColors, IIcon, ISize, IUpperCase, IVariant } from "../../../libs/types/IGlobalProps";
+interface IProps extends IVariant, IColors, IBorder, IIcon, ISize, IUpperCase, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color"> {
     /**
      * 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

@@ -3,11 +3,11 @@ import React, { useRef } from "react";
 import "../../../assets/css/components/form/button/styles.css";
 import Utils from "../../../libs/infrastructure/shared/Utils";
 import Tooltip from "../../feedback/tooltip";
-const Button = ({ children, variant = "filled", shape, status = "primary", border, size = "normal", tooltip, position, fullWidth, icon, upperCase, ...attributes }) => {
+const Button = ({ children, variant = "filled", shape, color = "light", border = { radius: "sm" }, size = "normal", tooltip, position, fullWidth, icon, upperCase, ...attributes }) => {
     // refs
     const _button = useRef(null);
     const _arButtonClassName = ["ar-button"];
-    _arButtonClassName.push(...Utils.GetClassName(variant, status, border, size, icon, attributes.className));
+    _arButtonClassName.push(...Utils.GetClassName(variant, undefined, color, border, size, icon, attributes.className));
     if (!children)
         _arButtonClassName.push("no-content");
     if (fullWidth)

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

@@ -60,9 +60,9 @@ const ButtonAction = ({ buttons }) => {
     }, [open]);
     return (React.createElement("div", { ref: _wrapper, className: "ar-button-action" },
         React.createElement("span", { ref: _button },
-            React.createElement(Button, { variant: "borderless", status: "information", border: { radius: "none" }, icon: { element: React.createElement("span", { className: "dotted" }) }, onClick: () => setOpen((prev) => !prev) })),
+            React.createElement(Button, { variant: "borderless", color: "teal", border: { radius: "none" }, icon: { element: React.createElement("span", { className: "dotted" }) }, onClick: () => setOpen((prev) => !prev) })),
         open &&
-            ReactDOM.createPortal(React.createElement("span", { ref: _list, className: "ar-action-buttons" }, buttons.map((button) => (React.createElement(Button, { variant: "borderless", status: "dark", onClick: button.onClick }, button.text)))), document.body)));
+            ReactDOM.createPortal(React.createElement("span", { ref: _list, className: "ar-action-buttons" }, buttons.map((button) => (React.createElement(Button, { variant: "borderless", onClick: button.onClick }, button.text)))), document.body)));
 };
 ButtonAction.displayName = "ButtonAction";
 export default ButtonAction;

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

@@ -1,5 +1,5 @@
-import { IBorder, ISize, IStatus, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
-interface IProps extends IVariant, IStatus, IBorder, ISize, IUpperCase, IValidation, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "type" | "size"> {
+import { IBorder, IColors, ISize, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
+interface IProps extends IVariant, IColors, IBorder, ISize, IUpperCase, IValidation, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "type" | "size" | "color"> {
     /**
      * Bileşenin başlığı veya etiket metnidir.
      *

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

@@ -2,12 +2,12 @@
 import Utils from "../../../libs/infrastructure/shared/Utils";
 import React, { forwardRef, useRef } from "react";
 import "../../../assets/css/components/form/checkbox/checkbox.css";
-const Checkbox = forwardRef(({ label, size = "normal", status, border = { radius: "sm" }, upperCase, ...attributes }, ref) => {
+const Checkbox = forwardRef(({ label, size = "normal", color, border = { radius: "sm" }, upperCase, ...attributes }, ref) => {
     // refs
     const _checkbox = useRef(null);
     const _checkboxClassName = ["ar-checkbox"];
     const isChecked = attributes.checked ?? false;
-    _checkboxClassName.push(...Utils.GetClassName("filled", isChecked ? status : "light", border, size, undefined, attributes.className));
+    _checkboxClassName.push(...Utils.GetClassName("filled", undefined, isChecked ? color : "light", border, size, undefined, attributes.className));
     return (React.createElement("div", { className: "ar-checkbox-wrapper" },
         React.createElement("label", null,
             React.createElement("input", { ref: ref, type: "checkbox", ...attributes, size: 0, onChange: (event) => {

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

@@ -37,5 +37,5 @@ type Props = {
      * ```
      */
     onChange: (value: string) => void;
-} & IVariant & IStatus & IBorder & ISize & IValidation & Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "onChange" | "size">;
+} & IVariant & IStatus & IBorder & ISize & IValidation & Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "onChange" | "size" | "color">;
 export default Props;

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

@@ -132,7 +132,7 @@ const DatePicker = ({ onChange, isClock, validation, ...attributes }) => {
         onChange(inputDate.toISOString());
     };
     const okayButton = () => {
-        return (React.createElement(Button, { variant: "borderless", status: "success", onClick: () => handleOk() }, "Tamam"));
+        return (React.createElement(Button, { variant: "borderless", color: "green", onClick: () => handleOk() }, "Tamam"));
     };
     const closeCalendar = () => {
         const { year, month, day, hours, minutes } = DATE.Parse(String(attributes.value), isClock);
@@ -249,7 +249,7 @@ const DatePicker = ({ onChange, isClock, validation, ...attributes }) => {
         attributes.placeholder && attributes.placeholder.length > 0 && (React.createElement("label", null,
             validation ? "* " : "",
             attributes.placeholder)),
-        React.createElement(Input, { ref: _beginDate, ...attributes, value: DATE.ParseValue(String(attributes.value), isClock), type: isClock ? "datetime-local" : "date", onKeyDown: (event) => {
+        React.createElement(Input, { ref: _beginDate, value: DATE.ParseValue(String(attributes.value), isClock), type: isClock ? "datetime-local" : "date", ...attributes, onKeyDown: (event) => {
                 if (event.code === "Space")
                     event.preventDefault();
                 else if (event.code === "Enter")

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

@@ -1,7 +1,7 @@
 import IButtonProps from "../button/IProps";
 import { Variants } from "../../../libs/types";
-import { IBorder, IIcon, ISize, IStatus, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
-interface IProps extends IVariant, IStatus, IBorder, IIcon, ISize, IUpperCase, IValidation, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size"> {
+import { IBorder, IColors, IIcon, ISize, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
+interface IProps extends IVariant, IColors, IBorder, IIcon, ISize, IUpperCase, IValidation, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size" | "color"> {
     /**
      * Bileşene entegre bir buton özelliği eklemek için kullanılır.
      *

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

@@ -3,7 +3,7 @@ import React, { forwardRef, useEffect, useState } from "react";
 import "../../../assets/css/components/form/input/input.css";
 import Button from "../button";
 import Utils from "../../../libs/infrastructure/shared/Utils";
-const Input = forwardRef(({ variant = "outlined", status = "light", size = "normal", icon, border = { radius: "sm" }, button, addon, upperCase, validation, ...attributes }, ref) => {
+const Input = forwardRef(({ variant = "outlined", color = "light", size = "normal", icon, border = { radius: "sm" }, button, addon, upperCase, validation, ...attributes }, ref) => {
     // states
     const [value, setValue] = useState("");
     // variables
@@ -11,7 +11,7 @@ const Input = forwardRef(({ variant = "outlined", status = "light", size = "norm
     const _addonBeforeClassName = ["addon-before"];
     const _addonAfterClassName = ["addon-after"];
     const _inputClassName = [];
-    _inputClassName.push(...Utils.GetClassName(variant, !Utils.IsNullOrEmpty(validation?.text) ? "danger" : status, border, size, icon, attributes.className));
+    _inputClassName.push(...Utils.GetClassName(variant, undefined, !Utils.IsNullOrEmpty(validation?.text) ? "red" : color, border, size, icon, attributes.className));
     // addon className
     if (addon) {
         _wrapperClassName.push("addon");
@@ -83,7 +83,7 @@ const Input = forwardRef(({ variant = "outlined", status = "light", size = "norm
                 } }),
             validation?.text && React.createElement("span", { className: "validation" }, validation.text)),
         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 }))));
+        button && React.createElement(Button, { ...button, border: { radius: border.radius }, disabled: attributes.disabled })));
 });
 Input.displayName = "Input";
 export default Input;

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

@@ -1,4 +1,4 @@
 import { IBorder, IIcon, ISize, IStatus, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
-interface IProps extends IVariant, IStatus, IBorder, IIcon, ISize, IUpperCase, IValidation, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size"> {
+interface IProps extends IVariant, IStatus, IBorder, IIcon, ISize, IUpperCase, IValidation, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size" | "color"> {
 }
 export default IProps;

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

@@ -1,6 +1,6 @@
-import { IBorder, IIcon, ISize, IStatus, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
+import { IBorder, IColors, IIcon, ISize, IStatus, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
 import { Status } from "../../../libs/types";
-interface IProps extends IVariant, IStatus, IBorder, IIcon, ISize, IUpperCase, IValidation, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size"> {
+interface IProps extends IVariant, IStatus, IColors, IBorder, IIcon, ISize, IUpperCase, IValidation, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size" | "color"> {
     /**
      * Bileşenin başlığı veya etiket metnidir.
      *

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

@@ -2,12 +2,12 @@
 import React, { forwardRef, useRef } from "react";
 import "../../../assets/css/components/form/radio/radio.css";
 import Utils from "../../../libs/infrastructure/shared/Utils";
-const Radio = forwardRef(({ label, size = "normal", status, border = { radius: "sm" }, trace, upperCase, ...attributes }, ref) => {
+const Radio = forwardRef(({ label, size = "normal", status, color, border = { radius: "sm" }, trace, upperCase, ...attributes }, ref) => {
     // refs
     const _checkbox = useRef(null);
     const _checkboxClassName = ["ar-radio"];
     const _traceClassName = ["trace", "filled"];
-    _checkboxClassName.push(...Utils.GetClassName("filled", status, border, size, undefined, attributes.className));
+    _checkboxClassName.push(...Utils.GetClassName("filled", status, color, border, size, undefined, attributes.className));
     if (trace && Object.keys(trace).length > 0)
         _traceClassName.push(trace.color);
     return (React.createElement("div", { className: "ar-radio-wrapper" },

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

@@ -1,5 +1,5 @@
-import { Variants, Option, Status } from "../../../libs/types";
-import { IBorder, IDisabled, IIcon, ISize, IStatus, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
+import { Variants, Option, Status, Color } from "../../../libs/types";
+import { IBorder, IDisabled, IIcon, ISize, IColors, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
 export interface IMultiple {
     /**
      * Bileşenin durum (status) ayarlarını belirtir.
@@ -24,10 +24,10 @@ export interface IMultiple {
      * ```
      */
     status?: {
-        color?: Status;
+        color?: Color;
         selected?: {
             variant?: Variants;
-            color?: Status;
+            color?: Color;
         };
     };
     /**
@@ -138,4 +138,4 @@ export type Props = {
      * ```
      */
     placeholder?: string;
-} & (IMultiple | ISingle) & IVariant & IStatus & IBorder & IIcon & ISize & IUpperCase & IValidation & IDisabled;
+} & (IMultiple | ISingle) & IVariant & IColors & IBorder & IIcon & ISize & IUpperCase & IValidation & IDisabled;

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

@@ -6,7 +6,7 @@ import Chip from "../../data-display/chip";
 import Checkbox from "../checkbox";
 import Utils from "../../../libs/infrastructure/shared/Utils";
 import ReactDOM from "react-dom";
-const Select = ({ variant = "outlined", status, border = { radius: "sm" }, options, value, onChange, onSearch, onClick, onCreate, multiple, placeholder, validation, upperCase, disabled, }) => {
+const Select = ({ variant = "outlined", status, color, border = { radius: "sm" }, options, value, onChange, onSearch, onClick, onCreate, multiple, placeholder, validation, upperCase, disabled, }) => {
     const _selectionClassName = ["selections"];
     // refs
     const _arSelect = useRef(null);
@@ -25,7 +25,7 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
     const [searchText, setSearchText] = useState("");
     const [singleInputText, setSingleInputText] = useState("");
     const [navigationIndex, setNavigationIndex] = useState(0);
-    _selectionClassName.push(...Utils.GetClassName(variant, validation?.text ? "danger" : "light", border, undefined, undefined, undefined));
+    _selectionClassName.push(...Utils.GetClassName(variant, undefined, validation?.text ? "red" : "light", border, undefined, undefined, undefined));
     // methods
     const handleClickOutSide = (event) => {
         const target = event.target;
@@ -259,9 +259,11 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
                         setOptionsOpen((prev) => !prev);
                     })();
                 } },
-                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" },
+                React.createElement("div", { className: "items" }, value.length > 0 ? (value.map((_value, index) => (React.createElement(Chip, { key: index, variant: status?.selected?.variant || "filled", color: 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: () => {
+                    placeholder))))) : (React.createElement(Input, { ref: _singleInput, variant: variant, color: !Utils.IsNullOrEmpty(validation?.text) ? "red" : color, 
+                // status={!Utils.IsNullOrEmpty(validation?.text) ? "danger" : status}
+                border: { radius: border.radius }, value: singleInputText, onClick: () => {
                     onClick && onClick();
                     (() => {
                         setOptionsOpen((prev) => !prev);
@@ -290,7 +292,7 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
         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.target.value), onClick: (event) => event.stopPropagation() }))),
+                    React.createElement(Input, { ref: _searchField, variant: "outlined", placeholder: "Search...", value: searchText, onChange: (event) => setSearchText(event.target.value), onClick: (event) => event.stopPropagation() }))),
                 filteredOptions.length > 0 ? (React.createElement("ul", null,
                     onCreate && !isSearchTextEqual && searchText.length > 0 && React.createElement("li", null, createField()),
                     filteredOptions.map((option, index) => {
@@ -299,7 +301,7 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
                                 event.stopPropagation();
                                 handleItemSelected(option);
                             } },
-                            multiple && React.createElement(Checkbox, { checked: isItem, status: isItem ? "primary" : "light", disabled: true }),
+                            multiple && React.createElement(Checkbox, { checked: isItem, color: isItem ? "blue" : "light", disabled: true }),
                             React.createElement("span", null, option.text)));
                     }))) : !onCreate ? (React.createElement("div", { className: "no-options-field" },
                     React.createElement("span", { className: "text" }, "Herhangi bir kay\u0131t bulunumad\u0131."))) : (createField())), document.body)));

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

@@ -1,5 +1,5 @@
-import { IBorder, IDisabled, IIcon, ISize, IStatus, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
-interface IProps extends IVariant, IStatus, IBorder, IIcon, ISize, IUpperCase, IValidation, IDisabled, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size"> {
+import { IBorder, IColors, IDisabled, IIcon, ISize, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
+interface IProps extends IVariant, IColors, IBorder, IIcon, ISize, IUpperCase, IValidation, IDisabled, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size" | "color"> {
     /**
      * Bileşenin başlığı veya etiket metnidir.
      *

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

@@ -2,7 +2,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import "../../../assets/css/components/form/switch/styles.css";
 import Utils from "../../../libs/infrastructure/shared/Utils";
-const Switch = ({ label, status = "primary", border = { radius: "pill" }, ...attributes }) => {
+const Switch = ({ label, color, border = { radius: "pill" }, ...attributes }) => {
     // refs
     let _switch = useRef(null);
     const _inputClassName = [];
@@ -10,7 +10,7 @@ const Switch = ({ label, status = "primary", border = { radius: "pill" }, ...att
     // states
     const [checked, setChecked] = useState(attributes.checked ?? false);
     _inputClassName.push(attributes.checked ? "checked" : "unchecked");
-    _switchClassName.push(...Utils.GetClassName("filled", attributes.checked ? status : "light", border, undefined, undefined, attributes.className));
+    _switchClassName.push(...Utils.GetClassName(undefined, undefined, attributes.checked ? color : "light", border, undefined, undefined, attributes.className));
     // useEffects
     useEffect(() => {
         setChecked(attributes.checked ?? false);

package/dist/components/form/text-editor/IProps.d.ts

@@ -1,5 +1,5 @@
-import { IValidation } from "../../../libs/types/IGlobalProps";
-export interface IProps<T> extends IValidation {
+import { IColors, IValidation } from "../../../libs/types/IGlobalProps";
+export interface IProps<T> extends IValidation, IColors {
     /**
      * Bileşenin isim (name) değeridir.
      *

package/dist/components/form/text-editor/index.d.ts

@@ -1,5 +1,5 @@
 import "../../../assets/css/components/form/text-editor/styles.css";
 import IProps from "./IProps";
 import React from "react";
-declare const TextEditor: <T extends object>({ name, value, onChange, dynamicList, height, validation, }: IProps<T>) => React.JSX.Element;
+declare const TextEditor: <T extends object>({ color, name, value, onChange, dynamicList, height, validation, }: IProps<T>) => React.JSX.Element;
 export default TextEditor;

package/dist/components/form/text-editor/index.js

@@ -5,7 +5,7 @@ import Button from "../button";
 import React, { useEffect, useRef, useState } from "react";
 import Utils from "../../../libs/infrastructure/shared/Utils";
 import ReactDOM from "react-dom";
-const TextEditor = ({ name, value, onChange, dynamicList, 
+const TextEditor = ({ color = "light", name, value, onChange, dynamicList, 
 // placeholder,
 height, 
 // multilang,
@@ -38,7 +38,7 @@ validation, }) => {
         { command: "justifyRight", icon: "TextAlingRight", tooltip: "Align Right" },
     ];
     const _iframeClassName = [];
-    _iframeClassName.push(...Utils.GetClassName("outlined", !Utils.IsNullOrEmpty(validation?.text) ? "danger" : "light", { radius: "sm" }, undefined, undefined, undefined));
+    _iframeClassName.push(...Utils.GetClassName("outlined", undefined, !Utils.IsNullOrEmpty(validation?.text) ? "red" : color, { radius: "sm" }, undefined, undefined, undefined));
     // methods
     const execCommand = (command) => {
         if (!_arIframe.current)
@@ -212,7 +212,7 @@ validation, }) => {
     }, []);
     return (React.createElement("div", { ref: _container, className: "ar-text-editor" },
         React.createElement("iframe", { ref: _arIframe, name: name, className: _iframeClassName.map((c) => c).join(" "), height: height }),
-        React.createElement("div", { className: "toolbar" }, toolbarButtons.map(({ command, icon, tooltip }) => (React.createElement(Button, { key: command, type: "button", variant: "borderless", status: "secondary", border: { radius: "none" }, icon: { element: React.createElement(ARIcon, { icon: icon, size: 18, fill: "transparent" }) }, tooltip: {
+        React.createElement("div", { className: "toolbar" }, toolbarButtons.map(({ command, icon, tooltip }) => (React.createElement(Button, { key: command, type: "button", variant: "borderless", color: "teal", border: { radius: "none" }, icon: { element: React.createElement(ARIcon, { icon: icon, size: 18, fill: "transparent" }) }, tooltip: {
                 text: tooltip,
             }, onClick: () => execCommand(command) })))),
         React.createElement("div", { className: "resize", onMouseDown: handleMouseDown }),

package/dist/components/form/upload/PreviewSelectedFile.js

@@ -15,12 +15,22 @@ const PreviewSelectedFile = ({ selectedFile, handleFileToBase64, handleFileRemov
     return (selectedFile && (React.createElement("div", { className: "preview" },
         React.createElement("div", { className: "buttons" },
             React.createElement("div", null,
-                React.createElement(Button, { variant: "borderless", icon: { element: React.createElement(ARIcon, { variant: "fill", icon: "Eye", fill: "currentColor" }) }, onClick: (event) => {
+                React.createElement(Button, { variant: "borderless", type: "button", icon: { element: React.createElement(ARIcon, { icon: "Download", fill: "currentColor" }) }, onClick: (event) => {
+                        event.stopPropagation();
+                        const url = window.URL.createObjectURL(selectedFile);
+                        const a = document.createElement("a");
+                        a.href = url;
+                        a.download = selectedFile.name;
+                        a.click();
+                        // Belleği temizle
+                        window.URL.revokeObjectURL(url);
+                    } }),
+                React.createElement(Button, { variant: "borderless", type: "button", icon: { element: React.createElement(ARIcon, { variant: "fill", icon: "Eye", fill: "currentColor" }) }, onClick: (event) => {
                         event.stopPropagation();
                         const newTab = window.open();
                         newTab?.document.write(`<img src="${selectedFileBase64}" title="${selectedFile.name}" alt="${selectedFile.name}" />`);
                     } }),
-                React.createElement(Button, { variant: "borderless", status: "danger", icon: { element: React.createElement(ARIcon, { variant: "fill", icon: "Trash", fill: "currentColor" }) }, onClick: (event) => {
+                React.createElement(Button, { variant: "borderless", color: "red", type: "button", icon: { element: React.createElement(ARIcon, { variant: "fill", icon: "Trash", fill: "currentColor" }) }, onClick: (event) => {
                         event.stopPropagation();
                         handleFileRemove(selectedFile);
                     } }))),

package/dist/components/form/upload/PreviewSelectedFiles.js

@@ -1,6 +1,7 @@
 import React, { memo, useEffect, useState } from "react";
 import Button from "../button";
 import { ARIcon } from "../../icons";
+import Utils from "../../../libs/infrastructure/shared/Utils";
 const PreviewSelectedFiles = ({ selectedFiles, validationErrors, handleFileToBase64, handleFileRemove }) => {
     // states
     const [items, setItems] = useState([]);
@@ -10,9 +11,10 @@ const PreviewSelectedFiles = ({ selectedFiles, validationErrors, handleFileToBas
     useEffect(() => {
         (async () => {
             const items = await Promise.all(selectedFiles.map(async (selectedFile) => {
+                const fileInformation = Utils.GetFileTypeInformation(selectedFile.type);
                 const _selectedFileBase64 = await handleFileToBase64(selectedFile);
                 const message = validationErrors.find((validationError) => validationError.fileName === selectedFile.name)?.message;
-                return (React.createElement("div", { className: "item", onClick: (event) => event.stopPropagation(), onMouseOver: async (event) => {
+                return (React.createElement("div", { className: "item", style: { backgroundColor: fileInformation.color }, onClick: (event) => event.stopPropagation(), onMouseOver: async (event) => {
                         event.stopPropagation();
                         setSelectedFileBase64(await handleFileToBase64(selectedFile));
                         setSelectedFile(selectedFile);
@@ -22,16 +24,26 @@ const PreviewSelectedFiles = ({ selectedFiles, validationErrors, handleFileToBas
                         React.createElement("span", null, message))),
                     React.createElement("div", { className: "buttons" },
                         React.createElement("div", null,
-                            React.createElement(Button, { variant: "borderless", icon: { element: React.createElement(ARIcon, { variant: "fill", icon: "Eye", fill: "currentColor" }) }, onClick: (event) => {
+                            React.createElement(Button, { variant: "borderless", type: "button", icon: { element: React.createElement(ARIcon, { icon: "Download", fill: "currentColor" }) }, onClick: (event) => {
+                                    event.stopPropagation();
+                                    const url = window.URL.createObjectURL(selectedFile);
+                                    const a = document.createElement("a");
+                                    a.href = url;
+                                    a.download = selectedFile.name;
+                                    a.click();
+                                    // Belleği temizle
+                                    window.URL.revokeObjectURL(url);
+                                } }),
+                            selectedFile.type.includes("image") && (React.createElement(Button, { variant: "borderless", type: "button", icon: { element: React.createElement(ARIcon, { variant: "fill", icon: "Eye", fill: "currentColor" }) }, onClick: (event) => {
                                     event.stopPropagation();
                                     const newTab = window.open();
                                     newTab?.document.write(`<img src="${_selectedFileBase64}" title="${selectedFile.name}" alt="${selectedFile.name}" />`);
-                                } }),
-                            React.createElement(Button, { variant: "borderless", status: "danger", icon: { element: React.createElement(ARIcon, { variant: "fill", icon: "Trash", fill: "currentColor" }) }, onClick: (event) => {
+                                } })),
+                            React.createElement(Button, { variant: "borderless", color: "red", type: "button", icon: { element: React.createElement(ARIcon, { variant: "fill", icon: "Trash", fill: "currentColor" }) }, onClick: (event) => {
                                     event.stopPropagation();
                                     handleFileRemove(selectedFile);
                                 } }))),
-                    React.createElement("img", { src: _selectedFileBase64 })));
+                    selectedFile.type.includes("image") ? (React.createElement("img", { src: _selectedFileBase64 })) : (React.createElement(ARIcon, { icon: fileInformation.icon ?? "Document", fill: "var(--white)", size: 32 }))));
             }));
             setItems(items);
             setSelectedFileBase64(await handleFileToBase64(selectedFiles[0]));
@@ -40,14 +52,14 @@ const PreviewSelectedFiles = ({ selectedFiles, validationErrors, handleFileToBas
     }, [selectedFiles, validationErrors]);
     return (selectedFiles.length > 0 && (React.createElement(React.Fragment, null,
         React.createElement("div", { className: "preview" },
-            React.createElement("img", { src: selectedFileBase64, className: "selected-image" }),
+            selectedFile?.type.includes("image") ? (React.createElement("img", { src: selectedFileBase64, className: "selected-image" })) : ("Önizleme Yok."),
             selectedFile && (React.createElement("div", { className: "informations" },
                 React.createElement("span", { className: "file-name" }, selectedFile.name),
                 React.createElement("div", null,
                     React.createElement("span", { className: "file-size" },
                         (selectedFile.size / 1024).toFixed(3),
                         React.createElement("span", { className: "size-type" }, "KB")),
-                    React.createElement("span", { className: "file-type" }, selectedFile.type.split("/")[1].toLocaleUpperCase()))))),
+                    React.createElement("span", { className: "file-type" }, Utils.GetFileTypeInformation(selectedFile.type).readableType))))),
         React.createElement("div", { className: "items" }, items))));
 };
 export default memo(PreviewSelectedFiles);

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

@@ -1,4 +1,4 @@
-import { AllowedTypes } from "../../../libs/types";
+import { MimeTypes } from "../../../libs/types";
 import { IDisabled, IValidation } from "../../../libs/types/IGlobalProps";
 interface IMultiple {
     /**
@@ -97,8 +97,7 @@ type Props = {
      * <Upload allowedTypes={["image/png", "application/pdf"]} />
      * ```
      */
-    allowedTypes?: AllowedTypes[];
-    uploadType?: "image" | "application-file";
+    allowedTypes?: MimeTypes[];
     /**
      * Kabul edilen maksimum dosya boyutu (byte cinsinden).
      *

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

@@ -3,7 +3,7 @@ import "../../../assets/css/components/form/upload/styles.css";
 import { ARIcon } from "../../icons";
 import PreviewSelectedFile from "./PreviewSelectedFile";
 import PreviewSelectedFiles from "./PreviewSelectedFiles";
-const Upload = ({ text, file, onChange, allowedTypes, uploadType = "application-file", maxSize, multiple, }) => {
+const Upload = ({ text, file, onChange, allowedTypes, maxSize, multiple }) => {
     // refs
     const _firstLoad = useRef(false);
     const _input = useRef(null);
@@ -186,8 +186,7 @@ const Upload = ({ text, file, onChange, allowedTypes, uploadType = "application-
                     if (_input.current)
                         _input.current.click();
                 } },
-                uploadType === "image" &&
-                    (multiple ? (React.createElement(PreviewSelectedFiles, { selectedFiles: selectedFiles, validationErrors: validationErrors, handleFileToBase64: handleFileToBase64, handleFileRemove: handleFileRemove })) : (React.createElement(PreviewSelectedFile, { selectedFile: selectedFile, handleFileToBase64: handleFileToBase64, handleFileRemove: handleFileRemove }))),
+                multiple ? (React.createElement(PreviewSelectedFiles, { selectedFiles: selectedFiles, validationErrors: validationErrors, handleFileToBase64: handleFileToBase64, handleFileRemove: handleFileRemove })) : (React.createElement(PreviewSelectedFile, { selectedFile: selectedFile, handleFileToBase64: handleFileToBase64, handleFileRemove: handleFileRemove })),
                 !selectedFile && selectedFiles.length === 0 && (React.createElement(React.Fragment, null,
                     React.createElement("div", { className: "upload" },
                         React.createElement(ARIcon, { variant: "fill", icon: "CloudUpload", size: 32 }),