ar-design 0.3.33 → 0.3.34

package/dist/assets/css/components/data-display/kanban-board/styles.css

@@ -3,7 +3,7 @@
   flex-direction: column;
   max-width: 100%;
   min-width: 100%;
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--border-radius-sm);
   overflow-x: hidden;
 
   > .columns {
@@ -23,13 +23,14 @@
       min-width: 350px;
       border-radius: var(--border-radius-sm);
       user-select: none;
+      overflow: hidden;
 
       > .title {
         display: flex;
         flex-direction: row;
         align-items: center;
         padding: 0.5rem 1rem;
-        color: var(--gray-500);
+        color: var(--gray-700);
 
         > h4 {
           font-size: 0.7rem;

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

@@ -47,3 +47,4 @@
 }
 
 @import url("./animations.css");
+@import url("./statuses.css");

package/dist/assets/css/components/feedback/progress/statuses.css

@@ -0,0 +1,188 @@
+/* #region PRIMARY */
+.ar-progress {
+  > .ar-progress-bar {
+    &.filled {
+      &.primary {
+        background-color: var(--blue-500);
+      }
+    }
+  }
+
+  > .ar-progress-value {
+    &.filled {
+      &.primary {
+        background-color: var(--blue-400);
+      }
+    }
+  }
+}
+/* #endregion */
+/* PRIMARY */
+
+/* #region PRIMARY-LIGHT */
+.ar-progress {
+  > .ar-progress-bar {
+    &.filled {
+      &.primary-light {
+        background-color: var(--blue-500);
+      }
+    }
+  }
+
+  > .ar-progress-value {
+    &.filled {
+      &.primary-light {
+        background-color: var(--blue-400);
+      }
+    }
+  }
+}
+/* #endregion */
+/* PRIMARY-LIGHT */
+
+/* #region SECONDARY */
+.ar-progress {
+  > .ar-progress-bar {
+    &.filled {
+      &.secondary {
+        background-color: var(--blue-500);
+      }
+    }
+  }
+
+  > .ar-progress-value {
+    &.filled {
+      &.secondary {
+        background-color: var(--blue-400);
+      }
+    }
+  }
+}
+/* #endregion */
+/* SECONDARY */
+
+/* #region SUCCESS */
+.ar-progress {
+  > .ar-progress-bar {
+    &.filled {
+      &.success {
+        background-color: var(--green-500);
+      }
+    }
+  }
+
+  > .ar-progress-value {
+    &.filled {
+      &.success {
+        background-color: var(--green-400);
+      }
+    }
+  }
+}
+/* #endregion */
+/* SUCCESS */
+
+/* #region WARNING */
+.ar-progress {
+  > .ar-progress-bar {
+    &.filled {
+      &.warning {
+        background-color: var(--orange-500);
+      }
+    }
+  }
+
+  > .ar-progress-value {
+    &.filled {
+      &.warning {
+        background-color: var(--orange-400);
+      }
+    }
+  }
+}
+/* #endregion */
+/* WARNING */
+
+/* #region DANGER */
+.ar-progress {
+  > .ar-progress-bar {
+    &.filled {
+      &.danger {
+        background-color: var(--red-500);
+      }
+    }
+  }
+
+  > .ar-progress-value {
+    &.filled {
+      &.danger {
+        background-color: var(--red-400);
+      }
+    }
+  }
+}
+/* #endregion */
+/* DANGER */
+
+/* #region INFORMATION */
+.ar-progress {
+  > .ar-progress-bar {
+    &.filled {
+      &.information {
+        background-color: var(--red-500);
+      }
+    }
+  }
+
+  > .ar-progress-value {
+    &.filled {
+      &.information {
+        background-color: var(--red-400);
+      }
+    }
+  }
+}
+/* #endregion */
+/* INFORMATION */
+
+/* #region DARK */
+.ar-progress {
+  > .ar-progress-bar {
+    &.filled {
+      &.dark {
+        background-color: var(--red-500);
+      }
+    }
+  }
+
+  > .ar-progress-value {
+    &.filled {
+      &.dark {
+        background-color: var(--red-400);
+      }
+    }
+  }
+}
+/* #endregion */
+/* DARK */
+
+/* #region LIGHT */
+.ar-progress {
+  > .ar-progress-bar {
+    &.filled {
+      &.light {
+        background-color: var(--red-500);
+      }
+    }
+  }
+
+  > .ar-progress-value {
+    &.filled {
+      &.light {
+        background-color: var(--red-400);
+      }
+    }
+  }
+}
+/* #endregion */
+/* LIGHT */

package/dist/assets/css/components/form/button-action/styles.css

@@ -14,11 +14,11 @@
   z-index: 1051;
   transition: visibility 250ms, opacity 250ms;
 }
-.ar-action-buttons::after {
+/* .ar-action-buttons::after {
   position: absolute;
   top: 0.5rem;
   left: 100%;
   content: "";
   border: solid 10px transparent;
   border-left-color: var(--gray-200);
-}
+} */

package/dist/assets/css/components/form/button-group/{button-group.css → styles.css}

@@ -6,6 +6,8 @@
 }
 .ar-button-group > .ar-button,
 .ar-button-group > .ar-button:is(.ar-button-shape) {
+  border: solid 1px transparent;
+  border-right-color: rgba(var(--black-rgb), 0.1);
   border-radius: 0;
 }
 .ar-button-group > .ar-button:first-child,
@@ -15,9 +17,10 @@
 }
 .ar-button-group > .ar-button:last-child,
 .ar-button-group .ar-button:is(.ar-button-shape):last-child {
+  border: none;
   border-top-right-radius: var(--border-radius-sm);
   border-bottom-right-radius: var(--border-radius-sm);
 }
 
-@import url("./variant/filled/core.css");
-@import url("./variant/outlined/core.css");
+/* @import url("./variant/filled/core.css");
+@import url("./variant/outlined/core.css"); */

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

@@ -24,6 +24,8 @@
 /* Height */
 
 /* #region Color Palette */
+@import url("./color-palette.css");
+
 :root {
   --white: #fff;
   --white-rgb: 255, 255, 255;
@@ -50,8 +52,6 @@
   --dark-rgb: 52, 58, 64;
 }
 /* #endregion */
-
-@import url("./color-palette.css");
 /* Color Palette */
 
 /* #region Fonts */

package/dist/components/data-display/kanban-board/index.js

@@ -41,13 +41,27 @@ const KanbanBoard = function ({ trackBy, columns, onChange }) {
         event.dataTransfer.clearData("fromColumn");
         _hoverItemIndex.current = null;
     };
+    const darkenColor = (hex, percent) => {
+        let num = parseInt(hex.slice(1), 16), amt = Math.round(2.55 * percent), R = (num >> 16) - amt, G = ((num >> 8) & 0x00ff) - amt, B = (num & 0x0000ff) - amt;
+        return ("#" +
+            (0x1000000 +
+                (R < 255 ? (R < 0 ? 0 : R) : 255) * 0x10000 +
+                (G < 255 ? (G < 0 ? 0 : G) : 255) * 0x100 +
+                (B < 255 ? (B < 0 ? 0 : B) : 255))
+                .toString(16)
+                .slice(1));
+    };
     // useEffects
     useEffect(() => setData(columns), [columns]);
     return (React.createElement("div", { className: "ar-kanban-board" },
         React.createElement("div", { className: "columns" }, data.map((board, index) => (React.createElement("div", { key: index, className: "column", onDragOver: (event) => event.preventDefault(), onDrop: handleDrop(board.key) },
-            React.createElement("div", { className: "title" },
+            React.createElement("div", { className: "title", style: {
+                    backgroundColor: board.titleColor ?? "transparent",
+                    borderBottom: `solid 1px ${darkenColor(board.titleColor ?? "", 10)}`,
+                    color: darkenColor(board.titleColor ?? "", 60),
+                } },
                 React.createElement("h4", null, board.title.toLocaleUpperCase("tr")),
-                board.items.length > 0 && React.createElement("span", null, board.items.length)),
+                React.createElement("span", null, board.items.length > 0 ? board.items.length : "")),
             React.createElement("div", { className: "items" },
                 React.createElement(DnD, { key: board.key, data: board.items, renderItem: (item, index) => {
                         return (React.createElement("div", { key: index, className: "item", onDragOver: (event) => {

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

@@ -5,32 +5,7 @@ interface IProps extends IChildren, IVariant<{
 }>, IStatus<{
     component: "alert";
 }>, IBorder {
-    /**
-     * Uyarı mesajı içeriğidir.
-     *
-     * `string` veya özel `message` tipi olabilir.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Alert message="İşlem başarıyla tamamlandı." />
-     * ```
-     */
     message?: message;
-    /**
-     * Mesaj içindeki vurgulanacak kelime veya ifadeleri belirtir.
-     *
-     * Bu kelimeler mesaj içinde bold veya farklı stillerle öne çıkarılabilir.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Alert
-     *   message="Kritik hata oluştu: sunucuya ulaşılamıyor."
-     *   emphasize={["...", "..."]}
-     * />
-     * ```
-     */
     emphasize?: string[];
 }
 export default IProps;

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

@@ -21,9 +21,7 @@ const Alert = ({ children, message, variant = "filled", status = "primary", bord
                 const originalTag = currentMessage.substring(startIndex, endIndex);
                 const lastValue = currentMessage.substring(endIndex);
                 currentMessage = `${firstValue} <span class="ar-alert-tag">${originalTag}</span> ${lastValue}`;
-                // Update the lowerCaseMessage to reflect the change
                 _lowerCaseMessage = currentMessage.toLocaleLowerCase();
-                // Find the next occurrence of the tag
                 startIndex = _lowerCaseMessage.indexOf(_lowerCaseEmphasize, startIndex + `<span class="ar-alert-tag">${originalTag}</span>`.length);
             }
             return currentMessage;

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

@@ -1,46 +1,12 @@
 import { IChildren, ISize } from "../../../libs/types/IGlobalProps";
 import IPopoverProps from "../../feedback/popover/IProps";
 interface IProps extends IChildren, ISize, React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Modal'ın açık olup olmadığını kontrol eden ve değiştiren değerler.
-     *
-     * - `get`: Modal açık mı?
-     * - `set`: Aç/kapa işlemini yapan fonksiyon.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * const [isOpen, setIsOpen] = useState(false);
-     *
-     * <Modal open={{ get: isOpen, set: setIsOpen }} />
-     * ```
-     */
     open: {
         get: boolean;
         set: React.Dispatch<React.SetStateAction<boolean>>;
     };
     closePopover?: IPopoverProps;
-    /**
-     * Modal başlığı.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Modal title="Bilgilendirme" />
-     * ```
-     */
     title?: string;
-    /**
-     * Modal alt içerik alanı (footer).
-     *
-     * Genellikle buton veya açıklamalar içerir.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Modal footer={<button onClick={onClose}>Kapat</button>} />
-     * ```
-     */
     footer?: React.ReactNode;
     disableCloseOnBackdrop?: boolean;
     disableCloseOnEsc?: boolean;

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

@@ -1,70 +1,9 @@
 import { Direction, Status } from "../../../libs/core/application/contexts/Notification";
 interface IProps {
-    /**
-     * Bildirim başlığı.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Notification title="Başarılı" />
-     * ```
-     */
     title: string;
-    /**
-     * Bildirimin içeriğinde gösterilecek opsiyonel mesaj.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Notification message="İşlem başarıyla tamamlandı." />
-     * ```
-     */
     message?: string;
-    /**
-     * Bildirimin durumu.
-     *
-     * `Status` tipinde olmalıdır.
-     *
-     * Kabul edilen değerler:
-     * - `success`: Başarılı durum bildirimi.
-     * - `warning`: Uyarı durumu bildirimi.
-     * - `information`: Bilgilendirme durumu.
-     * - `error`: Hata durumu bildirimi.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Notification status="success" />
-     * ```
-     */
     status: Status | number;
-    /**
-     * Bildirimin ekranda hangi köşede görüneceği.
-     *
-     * `Direction` tipinden olmalıdır.
-     *
-     * Geçerli değerler:
-     * - `top-left`: Sol üst köşe
-     * - `top-right`: Sağ üst köşe
-     * - `bottom-left`: Sol alt köşe
-     * - `bottom-right`: Sağ alt köşe
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Notification direction="top-right" />
-     * ```
-     */
     direction: Direction;
-    /**
-     * Bildirimin tetiklenip tetiklenmediğini belirten boolean değer.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Notification trigger={true} />
-     * ```
-     */
     trigger: boolean;
 }
 export default IProps;

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

@@ -1,79 +1,11 @@
 import { IChildren } from "../../../libs/types/IGlobalProps";
 interface IProps extends IChildren {
-    /**
-     * Popover başlığı.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Popover title="Onay Gerekiyor" />
-     * ```
-     */
     title?: string;
-    /**
-     * Popover içinde gösterilecek mesaj metni.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Popover message="İşlemi onaylıyor musunuz?" />
-     * ```
-     */
     message?: string;
-    /**
-     * Popover içeriği olarak gösterilecek özel React JSX elementi.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Popover content={<CustomContent />} />
-     * ```
-     */
     content?: React.JSX.Element;
-    /**
-     * Onay veya iptal durumunda tetiklenen geri çağırma fonksiyonu.
-     *
-     * @param confirm - Kullanıcı onay verdiyse true, iptal ettiyse false.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Popover onConfirm={(confirm) => console.log(confirm)} />
-     * ```
-     */
     onConfirm?: (confirm: boolean) => void;
-    /**
-     * Popover açıkken sayfa dışında bir yere tıklandığında açık kalsın mı?
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Popover windowBlur={true} />
-     * ```
-     */
     windowBlur?: boolean;
-    /**
-     * Popover genişliği tam genişlikte mi olacak?
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Popover fullWidth={true} />
-     * ```
-     */
     fullWidth?: boolean;
-    /**
-     * Buton yapılandırmaları.
-     *
-     * - `okButton`: Onay butonunda gösterilecek metin.
-     * - `cancelButton`: (Opsiyonel) İptal butonunda gösterilecek metin.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Popover config={{ buttons: { okButton: "...", cancelButton: "..." } }} />
-     * ```
-     */
     config?: {
         buttons: {
             okay: string;

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

@@ -1,36 +1,6 @@
 interface IProps {
-    /**
-     * İlerleme çubuğunun mevcut değeri.
-     * Genellikle 0 ile 100 arasında bir sayı olmalıdır.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Progress value={75} />
-     * ```
-     */
     value: number;
-    /**
-     * İlerleme çubuğunun ters yönde dolmasını sağlar.
-     * Varsayılan olarak false'tur.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Progress value={50} reverse={true} />
-     * ```
-     */
     reverse?: boolean;
-    /**
-     * İlerleme değerinin görünür olup olmadığını belirler.
-     * Varsayılan olarak true olabilir.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Progress value={30} isVisibleValue={false} />
-     * ```
-     */
     isVisibleValue?: boolean;
 }
 export default IProps;

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

@@ -18,6 +18,7 @@ const Progress = ({ value, reverse, isVisibleValue = false }) => {
         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: {
                 width: `${value}%`,
+                transition: "width 250ms ease-in-out",
             } }, !isVisibleValue && React.createElement("span", null,
             "%",
             value))));

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

@@ -1,31 +1,6 @@
 import { IChildren } from "../../../libs/types/IGlobalProps";
 interface IProps extends IChildren {
-    /**
-     * Gösterilecek metin veya metinler.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Tooltip text="..."><Component>...</Component></Tooltip>
-     * <Tooltip text={["...", "..."]}><Component>...</Component></Tooltip>
-     * ```
-     */
     text: string | string[];
-    /**
-     * Tooltip'in hangi yönde görüneceği.
-     *
-     * Geçerli değerler:
-     * - `top`: Üstte
-     * - `right`: Sağda
-     * - `left`: Solda
-     * - `bottom`: Altta
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Tooltip text="Bilgi" direction="right"><Component>...</Component></Tooltip>
-     * ```
-     */
     direction?: "top" | "right" | "left" | "bottom";
 }
 export default IProps;

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

@@ -1,57 +1,10 @@
-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".
-     *
-     * - `"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>
-     * ```
-     */
+import { IBorder, IChildren, IColors, IIcon, ISize, IUpperCase, IVariant } from "../../../libs/types/IGlobalProps";
+interface IProps extends IChildren, IVariant, IColors, IBorder, IIcon, ISize, IUpperCase, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color"> {
     shape?: "circle" | "square";
-    /**
-     * Bileşenin konumlandırmasını belirlemek için kullanılır.
-     *
-     * - `type`: CSS `position` özelliği.
-     *   - `fixed`: Sayfa boyunca sabit konum.
-     *   - `absolute`: Üst öğeye göre konumlandırma.
-     * - `inset`: Bileşenin konumlanacağı kenar(lar).
-     *   - Örn: `["top", "left"]` => üstten ve soldan hizalanır.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Component
-     *   position={{
-     *     type: "absolute",
-     *     inset: ["top", "left"]
-     *   }}
-     * />
-     * ```
-     */
     position?: {
         type: "fixed" | "absolute";
         inset: ("top" | "right" | "bottom" | "left")[];
     };
-    /**
-     * Bileşenin yatayda tam genişlikte olup olmayacağını belirtir.
-     *
-     * - `true`: Bileşen bulunduğu kapsayıcının tüm genişliğini kaplar.
-     * - `false` veya belirtilmemişse: İçeriğe göre genişlik alır.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Component fullWidth />
-     * ```
-     */
     fullWidth?: boolean;
 }
 export default IProps;

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

@@ -1,10 +1,8 @@
-import { Color } from "../../../libs/types";
-import { IIcon } from "../../../libs/types/IGlobalProps";
+import { IColors, IIcon } from "../../../libs/types/IGlobalProps";
 interface IProps {
     buttons: ({
         text: string;
         onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-        color?: Color;
-    } & IIcon)[];
+    } & IColors & IIcon)[];
 }
 export default IProps;

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

@@ -62,7 +62,7 @@ const ButtonAction = ({ buttons }) => {
         React.createElement("span", { ref: _button },
             React.createElement(Button, { variant: "borderless", color: "light", 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, { style: { display: "flex", justifyContent: "flex-start" }, variant: "borderless", color: button.color ?? "blue", size: "small", icon: button.icon, onClick: button.onClick }, button.text)))), document.body)));
+            ReactDOM.createPortal(React.createElement("span", { ref: _list, className: "ar-action-buttons" }, buttons.map((button, index) => (React.createElement(Button, { key: index, style: { display: "flex", justifyContent: "flex-start" }, variant: "borderless", color: button.color ?? "blue", size: "small", icon: button.icon, onClick: button.onClick }, button.text)))), document.body)));
 };
 ButtonAction.displayName = "ButtonAction";
 export default ButtonAction;

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

@@ -1,5 +1,5 @@
 import React, { ReactElement } from "react";
-import "../../../assets/css/components/form/button-group/button-group.css";
+import "../../../assets/css/components/form/button-group/styles.css";
 import Button from "../button";
 declare const ButtonGroup: React.FC<{
     children: ReactElement<typeof Button> | ReactElement<typeof Button>[];

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

@@ -1,6 +1,7 @@
 "use client";
 import React, { useEffect, useState } from "react";
-import "../../../assets/css/components/form/button-group/button-group.css";
+import "../../../assets/css/components/form/button-group/styles.css";
+import Button from "../button";
 import Alert from "../../feedback/alert";
 const ButtonGroup = ({ children }) => {
     // states
@@ -8,11 +9,11 @@ const ButtonGroup = ({ children }) => {
     useEffect(() => {
         try {
             // Çocuk elemanların sadece `Button` bileşenleri olduğundan emin olun
-            // React.Children.forEach(children, (child) => {
-            //   if (!React.isValidElement(child) || child.type !== Button) {
-            //     throw new Error("ButtonGroup can only have Button elements as children.");
-            //   }
-            // });
+            React.Children.forEach(children, (child) => {
+                if (!React.isValidElement(child) || child.type !== Button) {
+                    throw new Error("ButtonGroup can only have Button elements as children.");
+                }
+            });
             // Hata yoksa, error'u temizle
             setError(null);
         }
@@ -24,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, { status: "danger", message: error }) : 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

@@ -1,16 +1,5 @@
-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.
-     *
-     * Genellikle input, buton gibi öğelerin ne amaçla kullanıldığını belirtmek için görüntülenir.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Checkbox label="Kullanıcı Adı" />
-     * ```
-     */
+import { IBorder, IColors, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
+interface IProps extends IVariant, IColors, IBorder, IUpperCase, IValidation, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "type" | "size" | "color"> {
     label?: string;
 }
 export default IProps;

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

@@ -2,11 +2,11 @@
 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", color = "blue", border = { radius: "sm" }, upperCase, ...attributes }, ref) => {
+const Checkbox = forwardRef(({ label, color = "blue", border = { radius: "sm" }, upperCase, ...attributes }, ref) => {
     // refs
     const _checkbox = useRef(null);
     const _checkboxClassName = ["ar-checkbox"];
-    _checkboxClassName.push(...Utils.GetClassName("filled", undefined, attributes.checked ? color : "light", border, size, undefined, attributes.className));
+    _checkboxClassName.push(...Utils.GetClassName("filled", undefined, attributes.checked ? color : "light", border, undefined, 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

@@ -1,41 +1,7 @@
 import { IBorder, IColors, ISize, IStatus, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
 type Props = {
-    /**
-     * Bileşenin başlığı veya etiket metnidir.
-     *
-     * Genellikle input, buton gibi öğelerin ne amaçla kullanıldığını belirtmek için görüntülenir.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <DatePicker label="Başlangıç Saati" />
-     * ```
-     */
     label?: string;
-    /**
-     * Bileşenin yanında bir saat (clock/time picker) bileşeni olup olmadığını belirtir.
-     *
-     * - `true`: Saat bileşeninide ekleyerek davranır.
-     * - `false` veya belirtilmemişse: Standart davranış sergiler.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <DatePicker isClock />
-     * ```
-     */
     isClock?: boolean;
-    /**
-     * Bileşenin değerinde bir değişiklik olduğunda tetiklenen olaydır.
-     *
-     * - `value`: Güncel değeri temsil eder. Genellikle string türündedir (örneğin tarih veya tarih, saat).
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <DatePicker onChange={(value) => console.log(value)} />
-     * ```
-     */
     onChange: (value: string) => void;
 } & IVariant & IColors & IStatus & IBorder & ISize & IValidation & Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "onChange" | "size" | "color">;
 export default Props;

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

@@ -2,36 +2,7 @@ import IButtonProps from "../button/IProps";
 import { Variants } from "../../../libs/types";
 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.
-     *
-     * `IButtonProps` tipi ile tanımlanır ve butonun davranışlarını, metnini, tıklama olaylarını vs. içerir.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Input
-     *   button={{
-     *     text: "Gönder",
-     *     onClick: () => console.log("Tıklandı"),
-     *   }}
-     * />
-     * ```
-     */
-    button?: IButtonProps;
-    /**
-     * Bileşenin başına (`before`) veya sonuna (`after`) yardımcı içerikler (ek öğeler) eklemek için kullanılır.
-     *
-     * - `variant`: Stil türünü belirtir ("filled" | "outlined" | "dashed" | "borderless").
-     * - `before`: Bileşenin soluna içerik ekler (örneğin ₺, %, vb.).
-     * - `after`: Bileşenin sağına içerik ekler.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Input addon={{ variant: "outlined", before: "₺", after: "KDV" }} />
-     * ```
-     */
+    button?: Omit<IButtonProps, "size" | "shape" | "position" | "fullWidth">;
     addon?: {
         variant?: Variants;
         before?: string | number;

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

@@ -8,9 +8,9 @@ const Input = forwardRef(({ variant = "outlined", color = "light", size = "norma
     const [value, setValue] = useState("");
     // variables
     const _wrapperClassName = ["ar-input-wrapper"];
+    const _inputClassName = [];
     const _addonBeforeClassName = ["addon-before"];
     const _addonAfterClassName = ["addon-after"];
-    const _inputClassName = [];
     _inputClassName.push(...Utils.GetClassName(variant, undefined, !Utils.IsNullOrEmpty(validation?.text) ? "red" : color, border, size, icon, attributes.className));
     // addon className
     if (addon) {
@@ -67,14 +67,14 @@ const Input = forwardRef(({ variant = "outlined", color = "light", size = "norma
                             const { value } = event.target;
                             const currentValue = upperCase ? convertToUpperCase(value) : value;
                             // Yeni değeri oluşturun ve onChange fonksiyonunu çağırın
-                            const newValue = `${addon?.before ?? ""}${currentValue}${addon?.after ?? ""}`;
+                            // const newValue = `${addon?.before ?? ""}${currentValue}${addon?.after ?? ""}`;
                             attributes.onChange({
                                 ...event,
                                 target: {
                                     ...event.target,
                                     id: event.target.id,
                                     name: event.target.name,
-                                    value: newValue,
+                                    value: currentValue,
                                     type: event.target.type,
                                     dataset: event.target.dataset,
                                 },

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

@@ -59,11 +59,12 @@ export type TabProps = {
     };
 };
 export type KanbanBoardColumnType<T, TColumnProperties> = {
-    title: string;
     key: string;
-    columnProperties: TColumnProperties;
+    title: string;
+    titleColor?: string;
     items: T[];
     renderItem: (item: T, index: number) => React.JSX.Element;
+    columnProperties: TColumnProperties;
 };
 export type ValidationShape = {
     type: "required" | "minimum" | "maximum" | "email";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.3.33",
+  "version": "0.3.34",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/dist/assets/css/components/form/button-group/variant/filled/core.css

@@ -1,3 +0,0 @@
-.ar-button-group > .ar-button:is(.filled):not(:last-child) {
-  border-right: solid 1px rgba(var(--black-rgb), 0.1) !important;
-}

package/dist/assets/css/components/form/button-group/variant/outlined/core.css

@@ -1,3 +0,0 @@
-.ar-button-group > .ar-button:is(.outlined):not(:first-child) {
-  border-left: transparent !important;
-}