ar-design 0.1.15 → 0.1.17

package/dist/assets/css/components/data-display/syntax-highlighter/syntax-highlighter.css

@@ -1,17 +1,15 @@
 .ar-syntax {
   display: flex;
   flex-direction: column;
-  background-color: var(--gray-200);
-  /* border: solid 1px var(--gray-200); */
   border-radius: var(--border-radius-lg);
 }
 
 .ar-syntax > .preview {
   position: relative;
   gap: 1rem;
-  /* background-color: var(--white); */
+  border: solid 1px var(--gray-200);
+  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
   padding: 1rem;
-  border-radius: var(--border-radius-lg);
 }
 .ar-syntax > .preview.left {
   justify-content: left;
@@ -36,10 +34,10 @@
 .ar-syntax > .pre {
   background-color: var(--gray-900);
   margin: 0;
-  padding: 1rem;
+
   border-top: solid 2.5px var(--custom-tag-color);
   border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
-  overflow-x: auto;
+  overflow: hidden;
 }
 .ar-syntax > .pre.hidden {
   display: none;
@@ -51,8 +49,10 @@
   display: flex;
   flex-direction: column;
   gap: 0.5rem 0;
+  padding: 1rem;
   font-family: var(--jetBrainsMonoRegular) !important;
   font-size: 0.9rem;
+  overflow-x: auto;
 }
 
 @import url("./core/jsx.template.css");

package/dist/assets/css/components/feedback/alert/alert.css

@@ -59,4 +59,3 @@
 
 /* Core Css */
 @import url("./core/color.css");
-@import url("./core/border.css");

package/dist/assets/css/components/feedback/alert/core/color.css

@@ -1,28 +1,32 @@
 .ar-alert.primary {
   background-color: rgba(var(--primary-rgb), 0.1);
+  border-color: rgba(var(--primary-rgb), 0.5);
 }
 .ar-alert.secondary {
   background-color: rgba(var(--secondary-rgb), 0.1);
+  border-color: rgba(var(--secondary-rgb), 0.5);
 }
 .ar-alert.success {
   background-color: rgba(var(--success-rgb), 0.1);
+  border-color: rgba(var(--success-rgb), 0.5);
 }
 .ar-alert.warning {
   background-color: rgba(var(--warning-rgb), 0.1);
+  border-color: rgba(var(--warning-rgb), 0.5);
 }
 .ar-alert.danger {
   background-color: rgba(var(--danger-rgb), 0.1);
+  border-color: rgba(var(--danger-rgb), 0.5);
 }
 .ar-alert.information {
   background-color: rgba(var(--information-rgb), 0.1);
+  border-color: rgba(var(--information-rgb), 0.5);
 }
 .ar-alert.light {
   background-color: rgba(var(--light-rgb), 0.1);
+  border-color: rgba(var(--light-rgb), 0.5);
 }
 .ar-alert.dark {
   background-color: rgba(var(--dark-rgb), 0.1);
-}
-.ar-alert.transparent {
-  background-color: transparent;
-  padding: 0 !important;
+  border-color: rgba(var(--dark-rgb), 0.5);
 }

package/dist/assets/css/components/form/button-group/button-group.css

@@ -1,11 +1,14 @@
-.ar-button-group > .ar-button {
+.ar-button-group > .ar-button,
+.ar-button-group > .ar-button:is(.ar-button-shape) {
   border-radius: 0;
 }
-.ar-button-group > .ar-button:first-child {
+.ar-button-group > .ar-button:first-child,
+.ar-button-group > .ar-button:is(.ar-button-shape):first-child {
   border-top-left-radius: var(--border-radius-sm);
   border-bottom-left-radius: var(--border-radius-sm);
 }
-.ar-button-group > .ar-button:last-child {
+.ar-button-group > .ar-button:last-child,
+.ar-button-group > .ar-button:is(.ar-button-shape):last-child {
   border-top-right-radius: var(--border-radius-sm);
   border-bottom-right-radius: var(--border-radius-sm);
 }

package/dist/assets/css/components/form/input/input.css

@@ -14,7 +14,6 @@
   width: 100%;
   height: var(--input-height);
   padding: 0 0.5rem;
-  border: solid 1px transparent;
   font-family: var(--system);
   font-size: 1rem;
   outline: none;

package/dist/assets/css/components/layout/layout.css

@@ -11,7 +11,7 @@
 }
 .ar-layout > main > aside.ar-aside {
   position: sticky;
-  top: 3.75rem;
+  top: 5.75rem;
   height: 100%;
   margin: 2rem 0;
 }

package/dist/assets/css/core/ar-core.css

@@ -14,7 +14,7 @@
 
 /* #region Height */
 :root {
-  --input-height: 2.5rem;
+  --input-height: 2rem;
 }
 /* #endregion */
 /* Height */

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

@@ -0,0 +1,5 @@
+import { IGlobalProps } from "../../../libs/types/IGlobalProps";
+interface IProps extends IGlobalProps {
+    title?: string;
+}
+export default IProps;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Props } from "./Types";
 import "../../../assets/css/components/data-display/card/card.css";
-declare const Card: React.FC<Props>;
+import IProps from "./IProps";
+declare const Card: React.FC<IProps>;
 export default Card;

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

@@ -2,10 +2,10 @@ import React from "react";
 import Typography from "../typography";
 import "../../../assets/css/components/data-display/card/card.css";
 const { Title } = Typography;
-const Card = ({ children, title }) => {
+const Card = ({ children, title = "" }) => {
     return (React.createElement("div", { className: "ar-card" },
         React.createElement("div", { className: "title" },
-            React.createElement(Title, { Level: "h4" }, title || "")),
+            React.createElement(Title, { Level: "h4" }, title)),
         React.createElement("div", { className: "content" }, children)));
 };
 export default Card;

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

@@ -0,0 +1,5 @@
+import { IGlobalProps } from "../../../libs/types/IGlobalProps";
+interface IProps extends IGlobalProps {
+    text: string;
+}
+export default IProps;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Props } from "./Types";
 import "../../../assets/css/components/data-display/chip/chip.css";
-declare const Chip: React.FC<Props>;
+import IProps from "./IProps";
+declare const Chip: React.FC<IProps>;
 export default Chip;

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

@@ -1,16 +1,16 @@
 "use client";
 import React, { useRef } from "react";
 import "../../../assets/css/components/data-display/chip/chip.css";
-const Chip = ({ variant = "outlined", color = "primary", border, text }) => {
+const Chip = ({ variant = "outlined", status = "primary", border = { radius: "sm" }, text, }) => {
     let _className = useRef("ar-chip").current;
     // input className
     if (variant)
         _className += ` ${variant}`;
-    if (color)
-        _className += ` ${color}`;
+    if (status)
+        _className += ` ${status}`;
     // border
-    _className += ` border-style-${border?.style || "solid"}`;
-    _className += ` border-radius-${border?.radius || "sm"}`;
+    _className += ` border-style-solid`;
+    _className += ` border-radius-${border.radius}`;
     return React.createElement("span", { className: _className }, text);
 };
 export default Chip;

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

@@ -1,6 +1,6 @@
 import "../../../assets/css/components/data-display/typography/typography.css";
 declare const Typography: {
-    Title: import("react").FC<import("./title/Types").Props>;
-    Paragraph: import("react").FC<import("./paragraph/Types").Props>;
+    Title: import("react").FC<import("./title/IProps").default>;
+    Paragraph: import("react").FC<import("./paragraph/IProps").default>;
 };
 export default Typography;

package/dist/components/data-display/typography/paragraph/IProps.d.ts

@@ -0,0 +1,7 @@
+import { ParagraphColors, Status } from "../../../../libs/types";
+import { IGlobalProps } from "../../../../libs/types/IGlobalProps";
+interface IProps extends Omit<IGlobalProps, "status"> {
+    color?: ParagraphColors | Status;
+    align?: "left" | "center" | "right";
+}
+export default IProps;

package/dist/components/data-display/typography/paragraph/Paragraph.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { Props } from "./Types";
-declare const Paragraph: React.FC<Props>;
+import IProps from "./IProps";
+declare const Paragraph: React.FC<IProps>;
 export default Paragraph;

package/dist/components/data-display/typography/paragraph/Paragraph.js

@@ -9,7 +9,7 @@ const Paragraph = ({ children, color, align = "left", size, upperCase = false, }
         _className += ` ${color}`;
     if (size)
         _className += ` ${size}`;
-    return React.createElement("p", { className: _className }, upperCase ? children.toLocaleUpperCase() : children);
+    return (React.createElement("p", { className: _className }, typeof children === "string" && upperCase ? children.toLocaleUpperCase() : children));
 };
 Paragraph.displayName = "Paragraph";
 export default Paragraph;

package/dist/components/data-display/typography/title/{Types.d.ts → IProps.d.ts}

@@ -1,7 +1,7 @@
-export type Props = {
-    children: string;
+import { IGlobalProps } from "../../../../libs/types/IGlobalProps";
+interface IProps extends Omit<IGlobalProps, "size"> {
     Level: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
     align?: "left" | "center" | "right";
     size?: "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large" | "xx-large" | "xxx-large" | "smaller" | "larger";
-    upperCase?: boolean;
-};
+}
+export default IProps;

package/dist/components/data-display/typography/title/Title.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { Props } from "./Types";
-declare const Title: React.FC<Props>;
+import IProps from "./IProps";
+declare const Title: React.FC<IProps>;
 export default Title;

package/dist/components/data-display/typography/title/Title.js

@@ -7,7 +7,7 @@ const Title = ({ children, Level, align = "left", size, upperCase = false }) =>
         _className += ` ${align}`;
     if (size)
         _className += ` ${size}`;
-    return (React.createElement(Level, { className: _className }, upperCase ? children.toLocaleUpperCase() : children));
+    return (React.createElement(Level, { className: _className }, typeof children === "string" && upperCase ? children.toLocaleUpperCase() : children));
 };
 Title.displayName = "Title";
 export default Title;

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

@@ -0,0 +1,7 @@
+import { IGlobalProps } from "../../../libs/types/IGlobalProps";
+type message = string | message[];
+interface IProps extends Omit<IGlobalProps, "variant" | "icon"> {
+    message?: message;
+    emphasize?: string[];
+}
+export default IProps;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Props } from "./Types";
 import "../../../assets/css/components/feedback/alert/alert.css";
-declare const Alert: React.FC<Props>;
+import IProps from "./IProps";
+declare const Alert: React.FC<IProps>;
 export default Alert;

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

@@ -1,17 +1,15 @@
 "use client";
-import React, { useRef } from "react";
+import React from "react";
 import "../../../assets/css/components/feedback/alert/alert.css";
-const Alert = ({ message, type, border = true, emphasize }) => {
+const Alert = ({ children, message, status = "primary", border = { radius: "sm" }, emphasize, }) => {
     // refs
-    let _className = useRef("ar-alert").current;
-    // methods
-    const className = () => {
-        if (type)
-            _className += ` ${type}`;
-        if (border)
-            _className += ` ${type}-border`;
-        return _className;
-    };
+    let _className = "ar-alert";
+    // status
+    if (status)
+        _className += ` ${status}`;
+    // border
+    _className += ` border-style-solid`;
+    _className += ` border-radius-${border.radius}`;
     const formattedTags = (message) => {
         // TODO: Şuan için sadece transparent olan alert tiplerinde çalışmakta.
         // TODO: Bu konu hakkında düşünüp karar verilecek.
@@ -55,6 +53,6 @@ const Alert = ({ message, type, border = true, emphasize }) => {
      * @returns
      */
     const cleanMessage = (message) => message.replace(/<\/?[^>]+>/g, "");
-    return (React.createElement("div", { className: className() }, Array.isArray(message) ? (createList(message)) : (React.createElement("p", { dangerouslySetInnerHTML: { __html: formattedTags(cleanMessage(message)) ?? "" } }))));
+    return (React.createElement("div", { className: _className }, message ? (Array.isArray(message) ? (createList(message)) : (React.createElement("p", { dangerouslySetInnerHTML: { __html: formattedTags(cleanMessage(message)) ?? "" } }))) : (children)));
 };
 export default Alert;

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

@@ -0,0 +1,24 @@
+import { IGlobalProps } from "../../../libs/types/IGlobalProps";
+interface IProps extends Omit<IGlobalProps, "children">, 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".
+     *
+     * - `"circle"`: Daire şeklinde stilize edilmiş bir varyant.
+     * - `"square"`: Kare şeklinde stilize edilmiş bir varyant.
+     *
+     * Bu seçenekler, bileşenin şekilsel görünümünü değiştirir.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Button shape="circle">Hello, World!</Button>
+     * ```
+     */
+    shape?: "circle" | "square";
+    position?: {
+        type: "fixed" | "absolute";
+        inset: ("top" | "right" | "bottom" | "left")[];
+    };
+}
+export default IProps;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Props } from "./Types";
 import "../../../assets/css/components/form/button/button.css";
-declare const Button: React.FC<Props>;
+import IProps from "./IProps";
+declare const Button: React.FC<IProps>;
 export default Button;

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

@@ -1,10 +1,10 @@
 "use client";
 import React, { useRef } from "react";
 import "../../../assets/css/components/form/button/button.css";
-const Button = ({ children, variant = "filled", shape, color = "primary", border, size = "normal", position, icon, upperCase, ...attributes }) => {
+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} ${color}`;
+    let _buttonClassName = `ar-button ${variant} ${status}`;
     let _spanClassName = `text`;
     // button className
     if (shape)

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

@@ -25,7 +25,7 @@ const ButtonGroup = ({ children }) => {
             }
         }
     }, [children]); // children değişirse kontrolü tekrar yap
-    return (React.createElement("div", { className: "ar-button-group" }, error ? React.createElement(Alert, { type: "danger", message: error, border: false }) : children));
+    return (React.createElement("div", { className: "ar-button-group" }, error ? React.createElement(Alert, { status: "danger", message: error }) : children));
 };
 ButtonGroup.displayName = "ButtonGroup";
 export default ButtonGroup;

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { IGlobalProps } from "../../../libs/types/IGlobalProps";
+interface IProps extends Omit<IGlobalProps, "children">, 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 { Props } from "./Types";
+import IProps from "./IProps";
 import "../../../assets/css/components/form/checkbox/checkbox.css";
-declare const Checkbox: React.FC<Props>;
+declare const Checkbox: React.FC<IProps>;
 export default Checkbox;

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

@@ -1,7 +1,7 @@
 "use client";
 import React, { useRef } from "react";
 import "../../../assets/css/components/form/checkbox/checkbox.css";
-const Checkbox = ({ label, variant = "outlined", status = "primary", border, ...attributes }) => {
+const Checkbox = ({ label, variant = "outlined", status = "primary", border = { radius: "sm" }, ...attributes }) => {
     // refs
     let _checkbox = useRef(null);
     let _wrapperClassName = "ar-checkbox-wrapper";
@@ -13,10 +13,10 @@ const Checkbox = ({ label, variant = "outlined", status = "primary", border, ...
     _checkboxClassName += ` light`;
     // border
     _checkboxClassName += ` border-style-solid`;
-    _checkboxClassName += ` border-radius-${border?.radius || "sm"}`;
+    _checkboxClassName += ` border-radius-${border.radius}`;
     return (React.createElement("div", { className: _wrapperClassName },
         React.createElement("label", null,
-            React.createElement("input", { type: attributes.type || "checkbox", ...attributes, onChange: (event) => {
+            React.createElement("input", { type: attributes.type || "checkbox", ...attributes, size: 0, onChange: (event) => {
                     (() => {
                         const _current = _checkbox.current;
                         if (!_current)

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

@@ -0,0 +1,13 @@
+import React from "react";
+import IButtonProps from "../button/IProps";
+import { Variants } from "../../../libs/types";
+import { IGlobalProps } from "../../../libs/types/IGlobalProps";
+interface IProps extends Omit<IGlobalProps, "children">, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size"> {
+    button?: IButtonProps;
+    addon?: {
+        variant?: Variants;
+        before?: string | number;
+        after?: string | number;
+    };
+}
+export default IProps;

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

@@ -1,20 +1,5 @@
 import React from "react";
 import "../../../assets/css/components/form/input/input.css";
-declare const Input: React.ForwardRefExoticComponent<{
-    variant?: import("../../../libs/types").Variants;
-    status?: import("../../../libs/types").Colors;
-    icon?: {
-        element: React.JSX.Element;
-        position?: "start" | "end";
-    };
-    border?: {
-        radius: import("../../../libs/types").BorderRadiuses;
-    };
-    button?: import("../button/Types").Props;
-    addon?: {
-        variant?: import("../../../libs/types").Variants;
-        before?: string | number;
-        after?: string | number;
-    };
-} & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
+import IProps from "./IProps";
+declare const Input: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLInputElement>>;
 export default Input;

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

@@ -1,14 +1,14 @@
 "use client";
-import React, { forwardRef, useRef } from "react";
+import React, { forwardRef } from "react";
 import "../../../assets/css/components/form/input/input.css";
 import Button from "../button";
-const Input = forwardRef(({ variant = "outlined", status = "light", icon, border, button, addon, ...attributes }, ref) => {
-    // refs
-    let _wrapperClassName = useRef("ar-input-wrapper").current;
-    let _addonBeforeClassName = useRef("addon-before").current;
-    let _addonAfterClassName = useRef("addon-after").current;
-    let _inputWrapperClassName = useRef("ar-input").current;
-    let _inputClassName = useRef("").current;
+const Input = forwardRef(({ variant = "outlined", status = "light", icon, border = { radius: "sm" }, button, addon, ...attributes }, ref) => {
+    // variables
+    let _wrapperClassName = "ar-input-wrapper";
+    let _addonBeforeClassName = "addon-before";
+    let _addonAfterClassName = "addon-after";
+    let _inputWrapperClassName = "ar-input";
+    let _inputClassName = "";
     // input wrapper className
     if (icon && icon.element) {
         _inputWrapperClassName += ` icon`;
@@ -20,7 +20,7 @@ const Input = forwardRef(({ variant = "outlined", status = "light", icon, border
     if (status)
         _inputClassName += ` ${status}`;
     // border radius
-    _inputClassName += ` border-radius-${border?.radius || "sm"}`;
+    _inputClassName += ` border-radius-${border.radius}`;
     // addon className
     if (addon) {
         _wrapperClassName += ` addon`;
@@ -40,7 +40,7 @@ const Input = forwardRef(({ variant = "outlined", status = "light", icon, border
         addon?.before && React.createElement("span", { className: _addonBeforeClassName }, addon?.before),
         React.createElement("div", { className: _inputWrapperClassName },
             icon?.element && React.createElement("span", { className: "icon-element" }, icon.element),
-            React.createElement("input", { ref: ref, ...attributes, className: _inputClassName, onChange: (event) => {
+            React.createElement("input", { ref: ref, ...attributes, size: 20, className: _inputClassName, onChange: (event) => {
                     // Disabled gelmesi durumunda işlem yapmasına izin verme...
                     if (attributes.disabled)
                         return;
@@ -58,7 +58,7 @@ const Input = forwardRef(({ variant = "outlined", status = "light", icon, border
                     })();
                 } })),
         addon?.after && React.createElement("span", { className: _addonAfterClassName }, addon?.after),
-        button && (React.createElement(Button, { ...button, color: status, border: { radius: border?.radius || "sm" }, disabled: attributes.disabled }))));
+        button && (React.createElement(Button, { ...button, status: status, border: { radius: border.radius }, disabled: attributes.disabled }))));
 });
 Input.displayName = "Input";
 export default Input;

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

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

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

@@ -1,4 +1,4 @@
 import React from "react";
-import { Props } from "./Types";
-declare const Radio: React.FC<Props>;
+import IProps from "./IProps";
+declare const Radio: React.FC<IProps>;
 export default Radio;

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

@@ -0,0 +1,25 @@
+import { Status, Variants, Option } from "../../../libs/types";
+import { IGlobalProps } from "../../../libs/types/IGlobalProps";
+interface IMultiple {
+    status?: {
+        color?: Status;
+        selected?: {
+            variant?: Variants;
+            color?: Status;
+        };
+    };
+    defaultValueIndex?: number[];
+    onChange: (option: Option[]) => void;
+    multiple: true;
+}
+interface ISingle {
+    status?: Status;
+    defaultValueIndex?: number;
+    onChange: (option: Option | undefined) => void;
+    multiple?: false;
+}
+export type Props = {
+    options: Option[];
+    placeholder?: string;
+} & (IMultiple | ISingle) & Omit<IGlobalProps, "children">;
+export {};

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Props } from "./Types";
+import { Props } from "./Props";
 import "../../../assets/css/components/form/select/select.css";
 declare const Select: React.FC<Props>;
 export default Select;

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

@@ -5,7 +5,7 @@ import "../../../assets/css/components/form/select/select.css";
 import Chip from "../../data-display/chip";
 import Checkbox from "../checkbox";
 import Paragraph from "../../data-display/typography/paragraph/Paragraph";
-const Select = ({ variant = "outlined", status, border, options, onChange, multiple, defaultValueIndex, placeholder, disabled = false, }) => {
+const Select = ({ variant = "outlined", status, border, options, onChange, multiple, defaultValueIndex, ...attributes }) => {
     // refs
     let _selectionClassName = useRef("selections").current;
     const _arSelect = useRef(null);
@@ -129,7 +129,7 @@ const Select = ({ variant = "outlined", status, border, options, onChange, multi
             if (!multiple) {
                 if (_singleInput.current) {
                     _singleInput.current.value = "";
-                    _singleInput.current.placeholder = selection?.text || placeholder || "";
+                    _singleInput.current.placeholder = selection?.text || attributes.placeholder || "";
                 }
                 optionItems[_selectedItemIndex.current].scrollIntoView({
                     behavior: "smooth",
@@ -160,7 +160,7 @@ const Select = ({ variant = "outlined", status, border, options, onChange, multi
             else {
                 if (_singleInput.current) {
                     _singleInput.current.value = selection?.text || "";
-                    _singleInput.current.placeholder = placeholder || "";
+                    _singleInput.current.placeholder = attributes.placeholder || "";
                 }
             }
             setOptionsClassName((prev) => [...prev, direction, "closed"]);
@@ -209,15 +209,15 @@ const Select = ({ variant = "outlined", status, border, options, onChange, multi
     return (React.createElement("div", { ref: _arSelect, className: "ar-select-wrapper" },
         React.createElement("div", { ref: _multipleInput, className: "ar-select" },
             multiple ? (React.createElement("div", { className: _selectionClassName, onClick: () => setOptionsOpen((x) => !x) },
-                React.createElement("div", { className: "items" }, selections.length > 0 ? (selections.map((selection, index) => (React.createElement(Chip, { key: index, variant: status?.selected?.variant || "filled", color: status?.selected?.color || status?.color, text: selection.text })))) : (React.createElement("span", { className: `placeholder ${status?.color || "light"}` }, placeholder))))) : (
+                React.createElement("div", { className: "items" }, selections.length > 0 ? (selections.map((selection, index) => (React.createElement(Chip, { key: index, variant: status?.selected?.variant || "filled", status: status?.selected?.color || status?.color, text: selection.text })))) : (React.createElement("span", { className: `placeholder ${status?.color || "light"}` }, attributes.placeholder))))) : (
             // Single
             React.createElement(Input, { ref: _singleInput, variant: variant, status: status || "light", onClick: () => setOptionsOpen((x) => !x), onChange: () => !optionsOpen && setOptionsOpen(true), onKeyUp: (event) => {
                     if (event.key === "Enter")
                         return;
                     // Arama yapmak için kullanılan state bu kısımda dolduruluyor.
                     setSearchText(event.currentTarget.value);
-                }, placeholder: placeholder, disabled: disabled })),
-            !disabled &&
+                }, placeholder: attributes.placeholder, disabled: attributes.disabled })),
+            !attributes.disabled &&
                 (Object.keys(selection || {}).length > 0 || (multiple && selections.length > 0)) && (React.createElement("span", { className: "button-clear", onClick: () => {
                     // Multiple
                     if (multiple) {

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

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

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Props } from "./Types";
 import "../../../assets/css/components/form/switch/switch.css";
-declare const Switch: React.FC<Props>;
+import IProps from "./IProps";
+declare const Switch: React.FC<IProps>;
 export default Switch;