@harjs/react-ui 1.1.5 → 1.1.7

package/dist/components/charts/gantt/index.js

@@ -1,12 +1,12 @@
 "use client";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import "../../../assets/css/components/charts/gantt/styles.css";
 import Pagination from "../../navigation/pagination";
 import { useTranslation } from "@harjs/translation";
 import TableTR from "../../../libs/core/application/locales/table/tr";
 import TableEN from "../../../libs/core/application/locales/table/en";
 const colors = ["#A881FA", "#75CFA4", "#EE6D63", "#FAD87A"];
-const Gantt = ({ title, description, data, pagination, config = { isSearchable: false } }) => {
+const Gantt = ({ title, description, data, pagination, config = { isSearchable: false }, }) => {
     // refs
     const _svg = useRef(null);
     const _mapIsMoveField = useRef(null);
@@ -38,7 +38,7 @@ const Gantt = ({ title, description, data, pagination, config = { isSearchable:
     const STROKE_WIDTH = 0.5;
     const ROW_HEIGHT = 45;
     const LABEL_WIDTH = useMemo(() => {
-        const longestName = getData.reduce((maxTask, currentTask) => (currentTask.name.length > maxTask.name.length ? currentTask : maxTask), // Corrected logic
+        const longestName = getData.reduce((maxTask, currentTask) => currentTask.name.length > maxTask.name.length ? currentTask : maxTask, // Corrected logic
         {
             name: "",
         }).name;
@@ -155,9 +155,13 @@ const Gantt = ({ title, description, data, pagination, config = { isSearchable:
                         const availableWidth = (_svg.current?.clientWidth ?? 0) - LABEL_WIDTH;
                         // 2. Şu anki kaydırma oranını bul. (0 ile 1 arasında bir değer)
                         // Eğer içerik ekrana sığıyorsa oran 0'dır.
-                        const currentScrollRatio = currentTotalWidth > availableWidth ? scrollX / (currentTotalWidth - availableWidth) : 0;
+                        const currentScrollRatio = currentTotalWidth > availableWidth
+                            ? scrollX / (currentTotalWidth - availableWidth)
+                            : 0;
                         // 3. Yeni zoom değerini hesapla.
-                        const nextZoom = event.deltaY < 0 ? Math.min(zoom + 0.5, 5) : Math.max(zoom - 0.5, 1);
+                        const nextZoom = event.deltaY < 0
+                            ? Math.min(zoom + 0.5, 5)
+                            : Math.max(zoom - 0.5, 1);
                         // Eğer zoom değişmeyecekse (sınırlara takıldıysa) işlem yapma.
                         if (nextZoom === zoom)
                             return;
@@ -171,7 +175,10 @@ const Gantt = ({ title, description, data, pagination, config = { isSearchable:
                         setZoom(nextZoom);
                         setScrollX(nextScrollX);
                         _scrollX.current = nextScrollX;
-                    }, style: { cursor: isDragging ? "grabbing" : "grab", userSelect: "none" } },
+                    }, style: {
+                        cursor: isDragging ? "grabbing" : "grab",
+                        userSelect: "none",
+                    } },
                     React.createElement("g", { id: "month-and-days" },
                         TIMELINE.days.map((day, index) => {
                             const xPos = (index + 1) * DAY_WIDTH;
@@ -187,7 +194,8 @@ const Gantt = ({ title, description, data, pagination, config = { isSearchable:
                                 PREVMATCHMONT = 0;
                                 PREVMATCHDAY = 0;
                             }
-                            const dayDiff = currentDayNum - (currentMonthNum !== PREVMATCHMONT ? 0 : PREVMATCHDAY);
+                            const dayDiff = currentDayNum -
+                                (currentMonthNum !== PREVMATCHMONT ? 0 : PREVMATCHDAY);
                             // Bir sonraki turda kullanabilmek için hafızayı güncelliyoruz.
                             PREVMATCHMONT = currentMonthNum;
                             PREVMATCHDAY = currentDayNum;
@@ -211,7 +219,8 @@ const Gantt = ({ title, description, data, pagination, config = { isSearchable:
                         const taskStart = new Date(task.start);
                         const taskEnd = new Date(task.end);
                         // 1. Proje başlangıcından bu görevin başlangıcına kadar geçen toplam milisaniye
-                        const diffMsFromStart = taskStart.getTime() - Number(TIMELINE.timelineStart?.getTime());
+                        const diffMsFromStart = taskStart.getTime() -
+                            Number(TIMELINE.timelineStart?.getTime());
                         // Milisaniyeyi DOĞRU şekilde saate çeviriyoruz (Sabit: 1000 * 60 * 60)
                         const hoursFromStart = diffMsFromStart / (1000 * 60 * 60);
                         // X Konumu: Geçen toplam saati, dinamik saat başına düşen pikselle çarpıyoruz
@@ -229,7 +238,7 @@ const Gantt = ({ title, description, data, pagination, config = { isSearchable:
                     })),
                     React.createElement("rect", { ref: _mapIsMoveField, x: 0, y: -ROW_HEIGHT, width: TIMELINE.days.length * DAY_WIDTH, height: SVG_HEIGHT, fill: "transparent", pointerEvents: "all" })),
                 React.createElement("g", { className: "left-axis" },
-                    React.createElement("rect", { x: 0, y: -ROW_HEIGHT * 2 + 0.5, width: LABEL_WIDTH, height: SVG_HEIGHT, fill: "var(--white)" }),
+                    React.createElement("rect", { x: 0, y: -ROW_HEIGHT * 2 + 0.5, width: LABEL_WIDTH, height: SVG_HEIGHT, fill: "var(--white-100)" }),
                     React.createElement("line", { x1: LABEL_WIDTH, y1: -ROW_HEIGHT * 2, x2: LABEL_WIDTH, y2: SVG_HEIGHT, opacity: 0.25, stroke: "var(--black)", strokeWidth: 1 }),
                     React.createElement("g", { className: "label-list" }, getData.map((item, index) => {
                         const y = index * ROW_HEIGHT;
@@ -249,8 +258,8 @@ const Gantt = ({ title, description, data, pagination, config = { isSearchable:
                     " -",
                     " ",
                     Math.min(currentPage * selectedPerPage, pagination?.totalRecords || data.length),
-                    " of",
                     " ",
+                    "of ",
                     pagination?.totalRecords || data.length))) : (t("Table.Pagination.Information.Text", (currentPage - 1) * selectedPerPage + 1, Math.min(currentPage * selectedPerPage, pagination?.totalRecords || data.length), pagination?.totalRecords || data.length))),
             pagination && (React.createElement(Pagination, { totalRecords: config.isServerSide ? pagination.totalRecords : (data.length ?? 0), currentPage: currentPage, perPage: selectedPerPage, onChange: (currentPage, perPage) => {
                     setCurrentPage(currentPage);

package/dist/components/data-display/calendar/Header.js

@@ -15,9 +15,9 @@ const Header = ({ states, config }) => {
     };
     return (React.createElement("div", { className: "header" },
         React.createElement(Box, null,
-            React.createElement(Button, { variant: "outlined", color: "green", border: { radius: "xxl" }, onClick: () => changeWeek("today") }, "Bug\u00FCn"),
-            React.createElement(Button, { variant: "borderless", color: "light", border: { radius: "pill" }, icon: { element: React.createElement(ARIcon, { icon: "ArrowLeft", stroke: "currentColor" }) }, onClick: () => changeWeek("prev") }),
-            React.createElement(Button, { variant: "borderless", color: "light", border: { radius: "pill" }, icon: { element: React.createElement(ARIcon, { icon: "ArrowRight", stroke: "currentColor" }) }, onClick: () => changeWeek("next") }),
+            React.createElement(Button, { variant: "outlined", color: "green", border: { radius: "16" }, onClick: () => changeWeek("today") }, "Bug\u00FCn"),
+            React.createElement(Button, { variant: "borderless", color: "gray", border: { radius: "full" }, shape: "square", icon: { element: React.createElement(ARIcon, { icon: "ArrowLeft", stroke: "currentColor" }) }, onClick: () => changeWeek("prev") }),
+            React.createElement(Button, { variant: "borderless", color: "gray", border: { radius: "full" }, shape: "square", icon: { element: React.createElement(ARIcon, { icon: "ArrowRight", stroke: "currentColor" }) }, onClick: () => changeWeek("next") }),
             React.createElement("span", { className: "week-time" },
                 states.currentDate.get.toLocaleString(config?.locale ?? "tr-TR", { month: "long" }),
                 " ",

package/dist/components/data-display/calendar/views/Week.js

@@ -65,7 +65,7 @@ const Week = function ({ trackedBy, data, renderItem, states, config }) {
                                 left: `calc(${(100 / 7) * dayIndex}% + ${(layout.column * (100 / 7)) / layout.totalColumns}%)`,
                                 width: `${100 / 7 / layout.totalColumns}%`,
                                 border: `1px solid ${eventColor.border}`,
-                                borderRadius: "var(--border-radius-sm)",
+                                borderRadius: "var(--radius-4)",
                                 zIndex: 10,
                             } }, layout.height > 20 && renderItem(event, originalIndex)));
                     });

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

@@ -1,10 +1,12 @@
-import { IChildrenProps, IStatusProps, IVariantProps } from "../../../libs/infrastructure/types/IGlobalProps";
+import { CardColors } from "../../../libs/infrastructure/types";
+import { IBorderProps, IChildrenProps, IStatusProps, IVariantProps } from "../../../libs/infrastructure/types/IGlobalProps";
 interface IProps extends IChildrenProps, IVariantProps<{
     component: "card";
 }>, IStatusProps<{
     component: "card";
-}> {
+}>, IBorderProps {
     title?: string;
+    color?: CardColors;
     actions?: React.JSX.Element;
 }
 export default IProps;

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

@@ -1,10 +1,12 @@
 import React from "react";
 import "../../../assets/css/components/data-display/card/styles.css";
 import Utils from "../../../libs/infrastructure/shared/Utils";
-const Card = ({ children, title, actions, variant = "filled", status }) => {
+const Card = ({ children, title, actions, variant = "outlined", color = "gray-500", status, border = { radius: "6" }, }) => {
     // variables
-    const _className = ["ar-card"];
-    _className.push(...Utils.GetClassName(variant, status, undefined, undefined, undefined, undefined, undefined));
+    const _className = ["har-card"];
+    _className.push(...Utils.GetClassName(variant, status, undefined, border, undefined, undefined, undefined));
+    if (color)
+        _className.push(color);
     return (React.createElement("div", { className: _className.map((c) => c).join(" ") },
         title && (React.createElement("div", { className: "title" },
             React.createElement("h4", null, title),

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

@@ -2,7 +2,7 @@
 import React from "react";
 import "../../../assets/css/components/data-display/chip/chip.css";
 import Utils from "../../../libs/infrastructure/shared/Utils";
-const Chip = ({ variant = "outlined", color = "light", customColor, border = { radius: "sm" }, text, icon, }) => {
+const Chip = ({ variant = "outlined", color = "gray", customColor, border = { radius: "4" }, text, icon, }) => {
     let _chipClassName = ["ar-chip"];
     _chipClassName.push(...Utils.GetClassName(variant, undefined, color, border, undefined, undefined, undefined));
     return (React.createElement("div", { className: _chipClassName.map((c) => c).join(" "), ...(customColor && {

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

@@ -287,12 +287,12 @@ const Diagram = ({ nodes, edges }) => {
         React.createElement("div", { className: "zoom-buttons", onMouseDown: (event) => event.stopPropagation() },
             React.createElement(Box, null,
                 React.createElement(Tooltip, { text: "Zoom Out" },
-                    React.createElement(Button, { variant: "borderless", color: "light", icon: { element: React.createElement(ARIcon, { icon: "Dash", fill: "currentColor" }) }, onClick: () => handleZoom("decrement") })),
+                    React.createElement(Button, { variant: "borderless", color: "gray", shape: "square", icon: { element: React.createElement(ARIcon, { icon: "Dash", fill: "currentColor" }) }, onClick: () => handleZoom("decrement") })),
                 React.createElement("div", { className: "zoom-percent" },
                     Math.round(scale * 100),
                     "%"),
                 React.createElement(Tooltip, { text: "Zoom In" },
-                    React.createElement(Button, { variant: "borderless", color: "light", icon: { element: React.createElement(ARIcon, { icon: "Add", fill: "currentColor" }) }, onClick: () => handleZoom("increment") })))),
+                    React.createElement(Button, { variant: "borderless", color: "gray", shape: "square", icon: { element: React.createElement(ARIcon, { icon: "Add", fill: "currentColor" }) }, onClick: () => handleZoom("increment") })))),
         React.createElement("div", { style: { zIndex: 555 } }, JSON.stringify(drawingEdge))));
 };
 export default Diagram;

package/dist/components/data-display/grid-system/flex/Flex.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import IProps from "./IProps";
+declare const Flex: React.FC<IProps>;
+export default Flex;

package/dist/components/data-display/grid-system/flex/Flex.js

@@ -0,0 +1,48 @@
+"use client";
+import React, { useLayoutEffect, useState } from "react";
+import Utils from "../../../../libs/infrastructure/shared/Utils";
+const Flex = ({ children, flexDirection = "row", flexWrap = "nowrap", justifyContent = "flex-start", alignItems = "stretch", alignContent, flex, flexGrow = 0, flexShrink = 1, flexBasis, gap, rowGap, columnGap, }) => {
+    // states
+    const [classNames, setClassNames] = useState(["flex"]);
+    // useEffects
+    useLayoutEffect(() => {
+        if (flexDirection)
+            setClassNames((prev) => [...prev, `flex-direction-${flexDirection}`]);
+        if (flexWrap)
+            setClassNames((prev) => [...prev, `flex-wrap-${flexWrap}`]);
+        if (justifyContent)
+            setClassNames((prev) => [...prev, `justify-content-${justifyContent}`]);
+        if (alignItems)
+            setClassNames((prev) => [...prev, `align-items-${alignItems}`]);
+        if (alignContent)
+            setClassNames((prev) => [...prev, `align-content-${alignContent}`]);
+        // Runtime
+        const className = `css-${Utils.RandomCharacterGenerator(15)}`;
+        const style = document.createElement("style");
+        let css = `.${className} {`;
+        if (flex)
+            css += `flex: ${flex};`;
+        if (flexGrow !== undefined)
+            css += `flex-grow: ${flexGrow};`;
+        if (flexShrink !== undefined)
+            css += `flex-shrink: ${flexShrink};`;
+        if (flexBasis)
+            css += `flex-basis: ${flexBasis};`;
+        if (gap)
+            css += `gap: ${gap};`;
+        if (rowGap)
+            css += `row-gap: ${rowGap};`;
+        if (columnGap)
+            css += `column-gap: ${columnGap};`;
+        css += "}";
+        style.textContent = css;
+        setClassNames((prev) => [...prev, className]);
+        document.head.appendChild(style);
+        return () => {
+            setClassNames([]);
+            document.head.removeChild(style);
+        };
+    }, []);
+    return React.createElement("div", { className: classNames.map((c) => c).join(" ") }, children);
+};
+export default Flex;

package/dist/components/data-display/grid-system/flex/IProps.d.ts

@@ -0,0 +1,18 @@
+import { Property } from "csstype";
+import { IChildrenProps } from "../../../../libs/infrastructure/types/IGlobalProps";
+interface IProps extends IChildrenProps {
+    flexDirection?: Property.FlexDirection;
+    flexWrap?: Property.FlexWrap;
+    justifyContent?: Property.JustifyContent;
+    alignItems?: Property.AlignItems;
+    alignContent?: Property.AlignContent;
+    alignSelf?: Property.AlignSelf;
+    flex?: Property.Flex;
+    flexGrow?: Property.FlexGrow;
+    flexShrink?: Property.FlexShrink;
+    flexBasis?: Property.FlexBasis;
+    gap?: Property.Gap;
+    rowGap?: Property.RowGap;
+    columnGap?: Property.ColumnGap;
+}
+export default IProps;

package/dist/components/data-display/grid-system/index.d.ts

@@ -6,5 +6,6 @@ declare const Grid: {
     }>;
     Row: import("react").FC<import("./row/IProps").default>;
     Column: import("react").FC<import("./column/IProps").default>;
+    Flex: import("react").FC<import("./flex/IProps").default>;
 };
 export default Grid;

package/dist/components/data-display/grid-system/index.js

@@ -2,10 +2,12 @@ import Box from "./box/Box";
 import Row from "./row/Row";
 import Column from "./column/Column";
 import "../../../assets/css/components/data-display/grid-system/styles.css";
+import Flex from "./flex/Flex";
 // @@Export
 const Grid = {
     Box,
     Row,
     Column,
+    Flex,
 };
 export default Grid;

package/dist/components/data-display/kanban-board/filter/DateFilters.js

@@ -49,7 +49,7 @@ function DateFilters({ states, methods, config }) {
                                 }, placeholder: "To" }))),
                     React.createElement(Divider, { config: { margin: "0.5rem 0" } }),
                     React.createElement(Box, { direction: "flex-end" },
-                        React.createElement(Button, { color: "red", size: "small", onClick: () => {
+                        React.createElement(Button, { color: "red", size: "sm", onClick: () => {
                                 states.dateFilters.set((prev) => ({
                                     ...prev,
                                     [name]: { from: null, to: null },

package/dist/components/data-display/kanban-board/filter/SelectFilters.js

@@ -36,7 +36,7 @@ function SelectFilters({ states, methods, config }) {
                         } })))),
                 React.createElement(Divider, { config: { margin: "0.5rem 0" } }),
                 React.createElement(Box, { direction: "flex-end" },
-                    React.createElement(Button, { color: "red", size: "small", onClick: () => {
+                    React.createElement(Button, { color: "red", size: "sm", onClick: () => {
                             states.selectedFilters.set((prev) => {
                                 const next = { ...prev };
                                 delete next[name];

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

@@ -10,7 +10,7 @@ const MemoizedTHeadCell = function ({ refs, states, methods, columns, config, })
         const _direction = states.sort.get.find((s) => s.key === columnKeyString)?.direction;
         let _className = [];
         if (c.config?.sticky)
-            _className.push(`sticky-${c.config.sticky}`);
+            _className.push(`sticky sticky-${c.config.sticky}`);
         if (!c.config?.width)
             _className.push("min-w");
         if (c.config?.alignContent) {

package/dist/components/data-display/table/body/Editable.js

@@ -34,7 +34,7 @@ const Editable = function ({ c, item, trackByValue, onEditable, config }) {
                     handleChange(c.editable?.(item)?.type === "number" ? Number(event.target.value) : event.target.value);
                 }, validation: { text: _vText }, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
         case "boolean":
-            return (React.createElement(Checkbox, { variant: "borderless", color: "blue", checked: Boolean(_value), onChange: (event) => {
+            return (React.createElement(Checkbox, { variant: "outlined", color: "blue", checked: Boolean(_value), onChange: (event) => {
                     const checked = event.target.checked;
                     setValue(checked);
                     onEditable({
@@ -43,9 +43,9 @@ const Editable = function ({ c, item, trackByValue, onEditable, config }) {
                     }, trackByValue, ExtractKey(c.key));
                 }, validation: { text: _vText }, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
         case "decimal":
-            return (React.createElement(Input.Decimal, { variant: "borderless", name: c.key, value: String(_value ?? ""), onChange: (event) => handleChange(event.target.value), validation: { text: _vText }, locale: config.locale, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
+            return (React.createElement(Input.Decimal, { variant: "borderless", name: c.key, value: String(_value ?? ""), onChange: (event) => handleChange(Number(event.target.value)), validation: { text: _vText }, locale: config.locale, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
         case "input-formatted-decimal":
-            return (React.createElement(Input.FormattedDecimal, { variant: "borderless", name: c.key, value: String(_value ?? ""), onChange: (event) => handleChange(event.target.value), validation: { text: _vText }, locale: config.locale, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
+            return (React.createElement(Input.FormattedDecimal, { variant: "borderless", name: c.key, value: String(_value ?? ""), onChange: (event) => handleChange(Number(event.target.value)), validation: { text: _vText }, locale: config.locale, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
         case "date-picker":
             return (React.createElement(DatePicker, { variant: "borderless", value: String(_value ?? ""), onChange: (value) => handleChange(value), validation: { text: _vText }, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
         case "single-select":

package/dist/components/data-display/table/body/TBody.js

@@ -68,7 +68,7 @@ function TBody({ data, columns, refs, methods, states, config }) {
         if (column.config?.alignContent)
             _className.push(`align-content-${column.config.alignContent}`);
         if (column.config?.sticky)
-            _className.push(`sticky-${column.config.sticky}`);
+            _className.push(`sticky sticky-${column.config.sticky}`);
         if (column.config?.textWrap)
             _className.push(`text-${column.config.textWrap}`);
         const firstCleanDataColumn = columns.find((col) => col.config?.sticky === undefined || col.config?.sticky !== "left");

package/dist/components/data-display/table/header/ActionButtons.js

@@ -6,6 +6,14 @@ import Upload from "../../../form/upload";
 import Tooltip from "../../../feedback/tooltip";
 import Button from "../../../form/button";
 import { ARIcon } from "../../../icons";
+const icons = {
+    import: (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "var(--purple-500)", viewBox: "0 0 256 256" },
+        React.createElement("path", { d: "M222,144v64a6,6,0,0,1-6,6H40a6,6,0,0,1-6-6V144a6,6,0,0,1,12,0v58H210V144a6,6,0,0,1,12,0Zm-98.24,4.24a6,6,0,0,0,8.48,0l40-40a6,6,0,0,0-8.48-8.48L134,129.51V32a6,6,0,0,0-12,0v97.51L92.24,99.76a6,6,0,0,0-8.48,8.48Z" }))),
+    export: (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "var(--blue-500)", viewBox: "0 0 256 256" },
+        React.createElement("path", { d: "M214,112v96a14,14,0,0,1-14,14H56a14,14,0,0,1-14-14V112A14,14,0,0,1,56,98H80a6,6,0,0,1,0,12H56a2,2,0,0,0-2,2v96a2,2,0,0,0,2,2H200a2,2,0,0,0,2-2V112a2,2,0,0,0-2-2H176a6,6,0,0,1,0-12h24A14,14,0,0,1,214,112ZM92.24,68.24,122,38.49V136a6,6,0,0,0,12,0V38.49l29.76,29.75a6,6,0,1,0,8.48-8.48l-40-40a6,6,0,0,0-8.48,0l-40,40a6,6,0,1,0,8.48,8.48Z" }))),
+    create: (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "var(--green-700)", viewBox: "0 0 256 256" },
+        React.createElement("path", { d: "M222,128a6,6,0,0,1-6,6H134v82a6,6,0,0,1-12,0V134H40a6,6,0,0,1,0-12h82V40a6,6,0,0,1,12,0v82h82A6,6,0,0,1,222,128Z" }))),
+};
 const { Row, Column } = Grid;
 const ActionButtons = ({ states, actions }) => {
     // states
@@ -23,7 +31,7 @@ const ActionButtons = ({ states, actions }) => {
                                 setFormData(formData);
                                 setFiles(files);
                                 setBase64(base64);
-                            }, size: "small", fullWidth: true }))),
+                            }, size: "sm", fullWidth: true }))),
                 actions.import.suffixItem), onConfirm: (confirm) => {
                 if (!confirm) {
                     setFiles([]);
@@ -33,7 +41,7 @@ const ActionButtons = ({ states, actions }) => {
                     actions.import.onClick(formData, files, base64);
             }, config: { buttons: { okay: "Yükle", cancel: "İptal" } }, windowBlur: true },
             React.createElement(Tooltip, { text: actions.import.tooltip },
-                React.createElement(Button, { variant: "outlined", color: "purple", icon: { element: React.createElement(ARIcon, { icon: "Upload", fill: "currentcolor" }) } })))),
+                React.createElement(Button, { variant: "outlined", color: "purple", shape: "square", size: "sm", icon: { element: icons.import } })))),
         actions.export && (React.createElement(Popover, { title: actions.export.title ?? "Dışarı Aktar", message: actions.export.message ??
                 "Seçtiğiniz verileri bilgisayarınıza indirebilirsiniz. Bu işlem, sistemimizdeki verileri dosya olarak dışa aktarır ve verileri harici olarak kullanmanıza olanak tanır.", content: actions.export.content, onConfirm: (confirm) => {
                 if (!confirm) {
@@ -44,9 +52,9 @@ const ActionButtons = ({ states, actions }) => {
                     actions.export.onClick();
             }, config: { buttons: { okay: "Dışarı Aktar", cancel: "İptal" } }, windowBlur: true },
             React.createElement(Tooltip, { text: actions.export.tooltip },
-                React.createElement(Button, { variant: "outlined", color: "blue", icon: { element: React.createElement(ARIcon, { icon: "Download", fill: "currentcolor" }) } })))),
+                React.createElement(Button, { variant: "outlined", color: "blue", shape: "square", size: "sm", icon: { element: icons.export } })))),
         actions.create && (React.createElement(Tooltip, { text: actions.create.tooltip },
-            React.createElement(Button, { variant: "outlined", color: "green", icon: { element: React.createElement(ARIcon, { icon: "Add", size: 24 }) }, onClick: (event) => {
+            React.createElement(Button, { variant: "outlined", color: "green", shape: "square", icon: { element: icons.create }, size: "sm", onClick: (event) => {
                     if (!actions.create)
                         return;
                     actions.create.onClick(event);
@@ -60,6 +68,6 @@ const ActionButtons = ({ states, actions }) => {
                     actions.delete.onClick();
             } },
             React.createElement(Tooltip, { text: actions.delete.tooltip },
-                React.createElement(Button, { variant: "outlined", color: "red", icon: { element: React.createElement(ARIcon, { icon: "Trash-Fill", fill: "currentcolor" }) } }))))));
+                React.createElement(Button, { variant: "outlined", color: "red", shape: "square", size: "sm", icon: { element: React.createElement(ARIcon, { icon: "Trash-Fill", fill: "currentcolor" }) } }))))));
 };
 export default memo(ActionButtons);

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

@@ -551,7 +551,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                                 propertiesButtonCoordinate: { set: setPropertiesButtonCoordinate },
                             }, methods: { handleScroll }, columns: columns, config: config })),
                     config?.isSearchable && (React.createElement("tr", { key: "isSearchable" },
-                        selections && React.createElement("th", { className: "selection-col sticky-left", "data-sticky-position": "left" }),
+                        selections && React.createElement("th", { className: "selection-col sticky sticky-left", "data-sticky-position": "left" }),
                         data.some((item) => _subrowSelector in item) && _subrowButton && (React.createElement("th", { className: "subrow-col sticky sticky-left", "data-sticky-position": "left" })),
                         columns.map((c, cIndex) => {
                             let _className = [];
@@ -563,14 +563,16 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                                 ? ""
                                 : _searchedParams?.[key]?.value;
                             if (c.config?.sticky)
-                                _className.push(`sticky-${c.config.sticky}`);
+                                _className.push(`sticky sticky-${c.config.sticky}`);
                             if (c.config?.alignContent)
                                 _className.push(`align-content-${c.config.alignContent}`);
                             return (React.createElement("th", { key: `column-search-${cIndex}`, ...(_className.length > 0 && { className: `${_className.join(" ")}` }), ...(c.config?.sticky && { "data-sticky-position": c.config.sticky }) }, c.key && (React.createElement("div", { className: "filter-field" }, c.filterDataType === "date" ? (React.createElement(DatePicker, { value: (config.isServerSide ? ssrValue : csrValue) ?? "", name: key, onClick: () => handleScroll(), onChange: (value) => handleSearch(key, value, c.filterDataType), style: { height: "2rem" }, config: { isClock: true, isFooterButton: true, locale: config.locale }, disabled: !c.key || !!c.filters })) : (React.createElement(React.Fragment, null,
                                 React.createElement(Input, { ref: (element) => {
                                         if (element)
                                             _searchTextInputs.current[cIndex] = element;
-                                    }, variant: c.key && !c.filters ? "outlined" : "filled", style: { height: "2rem" }, value: (config.isServerSide ? ssrValue : csrValue) ?? "", name: key, onClick: () => handleScroll(), onInput: (event) => handleSearch(event.currentTarget.name, event.currentTarget.value), disabled: !c.key || !!c.filters }),
+                                    }, 
+                                    // variant={c.key && !c.filters ? "outlined" : "filled"}
+                                    style: { height: "2rem" }, value: (config.isServerSide ? ssrValue : csrValue) ?? "", name: key, onClick: () => handleScroll(), onInput: (event) => handleSearch(event.currentTarget.name, event.currentTarget.value), disabled: !c.key || !!c.filters }),
                                 React.createElement("span", { ref: (element) => {
                                         if (element)
                                             _filterButton.current[cIndex] = element;

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

@@ -1,7 +1,7 @@
-import { ParagraphColors, Status } from "../../../../libs/infrastructure/types";
+import { ParagraphColors } from "../../../../libs/infrastructure/types";
 import { IChildrenProps, ISizeProps, IUpperCaseProps } from "../../../../libs/infrastructure/types/IGlobalProps";
 interface IProps extends IChildrenProps, ISizeProps, IUpperCaseProps {
-    color?: ParagraphColors | Status;
+    color?: ParagraphColors;
     align?: "left" | "center" | "right";
 }
 export default IProps;

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

@@ -1,7 +1,7 @@
 "use client";
 import React from "react";
-const Paragraph = ({ children, color, align = "left", size, upperCase = false }) => {
-    let _className = ["ar-typography-paragraph"];
+const Paragraph = ({ children, color, align = "left", size = "md", upperCase = false }) => {
+    let _className = ["har-typography-paragraph"];
     if (align)
         _className.push(align);
     if (color)

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

@@ -2,7 +2,7 @@
 import React from "react";
 import "../../../assets/css/components/feedback/alert/styles.css";
 import Utils from "../../../libs/infrastructure/shared/Utils";
-const Alert = ({ children, message, variant = "filled", status = "primary", border = { radius: "sm" }, emphasize, }) => {
+const Alert = ({ children, message, variant = "filled", status = "primary", border = { radius: "4" }, emphasize, }) => {
     const _className = ["ar-alert"];
     _className.push(...Utils.GetClassName(variant, status, undefined, border, undefined, undefined, undefined));
     // methods

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

@@ -1,6 +1,6 @@
 import { TabProps, ValidationProps } from "../../../libs/infrastructure/types";
-import { IChildrenProps } from "../../../libs/infrastructure/types/IGlobalProps";
-interface IProps<T extends object> extends IChildrenProps {
+import { IChildrenProps, ISizeProps } from "../../../libs/infrastructure/types/IGlobalProps";
+interface IProps<T extends object> extends IChildrenProps, ISizeProps {
     title?: string;
     tabs: TabProps[];
     activeTab?: number;
@@ -14,5 +14,8 @@ interface IProps<T extends object> extends IChildrenProps {
     };
     onChange?: (currentTab: number) => void;
     onClose?: (closeTab: number) => void;
+    config?: {
+        freeContent?: boolean;
+    };
 }
 export default IProps;

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

@@ -1,5 +1,5 @@
 import React from "react";
 import IProps from "./IProps";
 import "../../../assets/css/components/feedback/drawer/styles.css";
-declare const Drawer: <T extends object>({ title, tabs, activeTab, open, validation, onChange }: IProps<T>) => React.JSX.Element;
+declare const Drawer: <T extends object>({ title, tabs, activeTab, open, size, onChange, validation, config, }: IProps<T>) => React.JSX.Element;
 export default Drawer;

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

@@ -4,11 +4,11 @@ import Typography from "../../data-display/typography";
 import "../../../assets/css/components/feedback/drawer/styles.css";
 import { useValidation } from "../../../libs/core/application/hooks";
 const { Title } = Typography;
-const Drawer = function ({ title, tabs = [], activeTab, open, validation, onChange }) {
+const Drawer = function ({ title, tabs = [], activeTab, open, size = "xxl", onChange, validation, config, }) {
     // refs
-    const _arDrawer = useRef(null);
-    const _drawerWrapperClassName = ["ar-drawer-wrapper"];
-    const _drawerClassName = ["ar-drawer"];
+    const _drawer = useRef(null);
+    const _drawerWrapperClassName = ["har-drawer-wrapper"];
+    const _drawerClassName = ["har-drawer", size];
     if (Object.keys(open).length > 0 && open.get)
         _drawerWrapperClassName.push("opened");
     else
@@ -38,10 +38,10 @@ const Drawer = function ({ title, tabs = [], activeTab, open, validation, onChan
         document.body.style.overflow = "hidden";
         const handleKeys = (event) => {
             const key = event.key;
-            const isArModal = document.getElementsByClassName("ar-modal-wrapper opened").length === 0;
-            const isArSelectOptions = document.getElementsByClassName("ar-select-options").length === 0;
-            const isArCalendar = document.getElementsByClassName("ar-date-calendar").length === 0;
-            const isArPopover = document.getElementsByClassName("ar-popover").length === 0;
+            const isArModal = document.getElementsByClassName("har-modal-wrapper opened").length === 0;
+            const isArSelectOptions = document.getElementsByClassName("har-select-options").length === 0;
+            const isArCalendar = document.getElementsByClassName("har-date-calendar").length === 0;
+            const isArPopover = document.getElementsByClassName("har-popover").length === 0;
             if (key === "Escape" && isArModal && isArCalendar && isArSelectOptions && isArPopover) {
                 event.stopPropagation();
                 handleValidationControlForClose();
@@ -55,13 +55,13 @@ const Drawer = function ({ title, tabs = [], activeTab, open, validation, onChan
     }, [open, handleValidationControlForClose]);
     useEffect(() => setCurrentTab(activeTab ?? 0), [activeTab]);
     return (React.createElement("div", { className: _drawerWrapperClassName.map((c) => c).join(" ") },
-        React.createElement("div", { className: "ar-drawer-bg", onClick: (event) => {
+        React.createElement("div", { className: "har-drawer-bg", onClick: (event) => {
                 event.stopPropagation();
                 const target = event.target;
-                if (_arDrawer.current && !_arDrawer.current.contains(target))
+                if (_drawer.current && !_drawer.current.contains(target))
                     handleValidationControlForClose();
             } }),
-        React.createElement("div", { ref: _arDrawer, className: _drawerClassName.map((c) => c).join(" "), role: "dialog" },
+        React.createElement("div", { ref: _drawer, className: _drawerClassName.map((c) => c).join(" "), role: "dialog" },
             title && (React.createElement("div", { className: "header" },
                 React.createElement(Title, { Level: "h3" }, title),
                 React.createElement("div", { className: "close", onClick: () => handleValidationControlForClose() }))),
@@ -78,7 +78,10 @@ const Drawer = function ({ title, tabs = [], activeTab, open, validation, onChan
                         } },
                         React.createElement("span", null, tab.title)));
                 })),
-            Object.keys(open).length > 0 && open.get && (React.createElement("div", { className: "content" }, tabs.map((tab, index) => {
+            Object.keys(open).length > 0 && open.get && (React.createElement("div", { className: "content", style: {
+                    height: title ? "calc(100% - 3.5rem)" : "100%",
+                    padding: !config?.freeContent ? "var(--space-20)" : "0",
+                } }, tabs.map((tab, index) => {
                 return (React.createElement("div", { key: index }, React.Children.map(tab.content, (child) => {
                     if (React.isValidElement(child) && index === currentTab) {
                         return validation