ar-design 0.4.25 → 0.4.27

package/dist/assets/css/components/data-display/calendar/styles.css

@@ -0,0 +1,15 @@
+@import url("./styles.week-view.css");
+
+.ar-calendar {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 0.75rem 0.75rem 0.75rem 2rem;
+
+  > .header {
+    .week-time {
+      color: var(--gray-700);
+      font-size: 1.5rem;
+    }
+  }
+}

package/dist/assets/css/components/data-display/calendar/styles.week-view.css

@@ -0,0 +1,124 @@
+.ar-calendar {
+  > .ar-calendar-week-view {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    background-color: var(--white);
+    padding: 0.75rem 0.75rem 0.75rem 2rem;
+    border-radius: var(--border-radius-sm);
+
+    > .head {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+
+      > .item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 1rem;
+        width: calc(100% / 7);
+        padding: 0.5rem 0;
+
+        > .day-name {
+          color: var(--gray-400);
+          font-size: 0.75rem;
+        }
+
+        > .date {
+          font-size: 1.5rem;
+        }
+      }
+    }
+
+    > .body {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+
+      > .clocks {
+        > div {
+          height: 60px;
+
+          > span {
+            color: var(--gray-700);
+            font-size: 0.75rem;
+          }
+        }
+      }
+
+      > .grid {
+        position: relative;
+        width: 100%;
+        border: solid 1px transparent;
+        border-top-color: var(--gray-200);
+
+        > .events-layer {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          z-index: 1;
+
+          > .event-box {
+            position: absolute;
+            background-color: rgba(var(--primary-rgb), 0.75);
+            width: calc(100% / 7);
+            padding: 0.5rem;
+            border-radius: var(--border-radius-sm);
+            color: var(--white);
+            font-size: 12px;
+          }
+        }
+
+        > .row {
+          position: relative;
+          margin: auto;
+
+          &:nth-child(2) {
+            > .cell {
+              &::before {
+                content: "";
+                position: absolute;
+                left: -1px;
+                background-color: var(--gray-200);
+                width: 1px;
+                height: 25px;
+                transform: translateY(-25px);
+              }
+            }
+          }
+
+          &:last-child {
+            > .cell {
+              border-bottom-color: transparent;
+            }
+          }
+
+          > .cell {
+            position: relative;
+            width: calc(100% / 7);
+            height: 60px;
+            padding: 0;
+            border: solid 1px transparent;
+            border-left-color: var(--gray-200);
+            border-bottom-color: var(--gray-200);
+
+            &:first-child {
+              &::after {
+                content: "";
+                position: absolute;
+                top: -2px;
+                left: 0;
+                background-color: var(--gray-200);
+                width: 15px;
+                height: 1px;
+                transform: translateX(-15px);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/components/data-display/calendar/Body.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { View } from "../../../libs/types";
+import { CalendarEvent } from "./IProps";
+interface IProps {
+    data: CalendarEvent[];
+    states: {
+        currentDate: {
+            get: Date;
+            set: React.Dispatch<React.SetStateAction<Date>>;
+        };
+        view: {
+            get: View;
+            set: React.Dispatch<React.SetStateAction<View>>;
+        };
+    };
+    config?: {
+        locale?: Intl.LocalesArgument;
+    };
+}
+declare const Body: ({ data, states, config }: IProps) => React.JSX.Element;
+export default Body;

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

@@ -0,0 +1,14 @@
+import React from "react";
+import Day from "./views/Day";
+import Week from "./views/Week";
+import Month from "./views/Month";
+const Body = ({ data, states, config }) => {
+    if (states.view.get === "Day")
+        return React.createElement(Day, null);
+    else if (states.view.get === "Week")
+        return React.createElement(Week, { data: data, states: { currentDate: states.currentDate }, config: config });
+    else if (states.view.get === "Month")
+        return React.createElement(Month, null);
+    return React.createElement(React.Fragment, null, "...");
+};
+export default Body;

package/dist/components/data-display/calendar/Header.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { View } from "../../../libs/types";
+interface IProps {
+    states: {
+        currentDate: {
+            get: Date;
+            set: React.Dispatch<React.SetStateAction<Date>>;
+        };
+        view: {
+            get: View;
+            set: React.Dispatch<React.SetStateAction<View>>;
+        };
+    };
+    config?: {
+        locale?: Intl.LocalesArgument;
+        weekStartsOn?: number;
+    };
+}
+declare const Header: ({ states, config }: IProps) => React.JSX.Element;
+export default Header;

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

@@ -0,0 +1,26 @@
+import React from "react";
+import Button from "../../form/button";
+import { ARIcon } from "../../icons";
+import Box from "../grid-system/box/Box";
+const Header = ({ states, config }) => {
+    // methods
+    const changeWeek = (direction) => {
+        states.currentDate.set((prev) => {
+            if (direction === "today")
+                return new Date();
+            const newDate = new Date(prev);
+            newDate.setDate(prev.getDate() + (direction === "next" ? 7 : -7));
+            return newDate;
+        });
+    };
+    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("span", { className: "week-time" },
+                states.currentDate.get.toLocaleString(config?.locale ?? "tr-TR", { month: "long" }),
+                " ",
+                states.currentDate.get.getFullYear()))));
+};
+export default Header;

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

@@ -0,0 +1,12 @@
+export type CalendarEvent = {
+    start: Date;
+    end: Date;
+};
+interface IProps {
+    data: CalendarEvent[];
+    config?: {
+        locale?: Intl.LocalesArgument;
+        weekStartsOn?: number;
+    };
+}
+export default IProps;

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

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

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

@@ -0,0 +1,5 @@
+import React from "react";
+import IProps from "./IProps";
+import "../../../assets/css/components/data-display/calendar/styles.css";
+declare const Calendar: React.FC<IProps>;
+export default Calendar;

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

@@ -0,0 +1,27 @@
+"use client";
+import React, { useState } from "react";
+import Body from "./Body";
+import Header from "./Header";
+import "../../../assets/css/components/data-display/calendar/styles.css";
+const Calendar = ({ data, config }) => {
+    // states
+    const [currentDate, setCurrentDate] = useState(new Date());
+    const [view, setView] = useState("Week");
+    return (React.createElement("div", { className: "ar-calendar" },
+        React.createElement(Header, { states: {
+                currentDate: { get: currentDate, set: setCurrentDate },
+                view: {
+                    get: view,
+                    set: setView,
+                },
+            }, config: config }),
+        React.createElement(Body, { data: data, states: {
+                currentDate: { get: currentDate, set: setCurrentDate },
+                view: {
+                    get: view,
+                    set: setView,
+                },
+            }, config: config })));
+};
+Calendar.displayName = "DatePicker";
+export default Calendar;

package/dist/components/data-display/calendar/views/Day.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const Day: () => React.JSX.Element;
+export default Day;

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

@@ -0,0 +1,5 @@
+import React from "react";
+const Day = () => {
+    return React.createElement(React.Fragment, null);
+};
+export default Day;

package/dist/components/data-display/calendar/views/Month.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const Month: () => React.JSX.Element;
+export default Month;

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

@@ -0,0 +1,5 @@
+import React from "react";
+const Month = () => {
+    return React.createElement(React.Fragment, null);
+};
+export default Month;

package/dist/components/data-display/calendar/views/Week.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { CalendarEvent } from "../IProps";
+interface IProps {
+    data: CalendarEvent[];
+    states: {
+        currentDate: {
+            get: Date;
+            set: React.Dispatch<React.SetStateAction<Date>>;
+        };
+    };
+    config?: {
+        locale?: Intl.LocalesArgument;
+        weekStartsOn?: number;
+    };
+}
+declare const Week: ({ data, states, config }: IProps) => React.JSX.Element;
+export default Week;

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

@@ -0,0 +1,99 @@
+import React, { useEffect, useMemo, useState } from "react";
+const Week = ({ data, states, config }) => {
+    const startHour = 0;
+    const endHour = 24;
+    const hours = endHour - startHour;
+    const cellHeight = 60;
+    // const slotDuration = 15;
+    // const slotHeight = cellHeight / (60 / slotDuration);
+    // states
+    const [events, setEvents] = useState([]);
+    // const [tempStart, setTempStart] = useState<{
+    //   date: Date;
+    //   minutes: number;
+    // } | null>(null);
+    // methods
+    // const handleClick = (weekDay: Date, hourIndex: number) => (event: React.MouseEvent<HTMLDivElement>) => {
+    //   const rect = event.currentTarget.getBoundingClientRect();
+    //   const y = event.clientY - rect.top;
+    //   const slotIndex = Math.floor(y / slotHeight);
+    //   const minutes = hourIndex * 60 + slotIndex * slotDuration;
+    //   if (!tempStart) {
+    //     setTempStart({ date: weekDay, minutes });
+    //     return;
+    //   }
+    //   const startMinutes = Math.min(tempStart.minutes, minutes);
+    //   const endMinutes = Math.max(tempStart.minutes, minutes) + slotDuration;
+    //   const startDate = new Date(weekDay);
+    //   startDate.setHours(Math.floor(startMinutes / 60), startMinutes % 60, 0, 0);
+    //   const endDate = new Date(weekDay);
+    //   endDate.setHours(Math.floor(endMinutes / 60), endMinutes % 60, 0, 0);
+    //   setEvents((prev) => [...prev, { start: startDate, end: endDate }]);
+    //   setTempStart(null);
+    // };
+    const weekDays = useMemo(() => getWeekDays(states.currentDate.get, config?.weekStartsOn ?? 1), [states.currentDate.get, config?.weekStartsOn]);
+    // useEffects
+    useEffect(() => {
+        setEvents(data);
+    }, [data]);
+    return (React.createElement("div", { className: "ar-calendar-week-view" },
+        React.createElement("div", { className: "head" }, weekDays.map((day) => (React.createElement("div", { key: day.toISOString(), className: "item" },
+            React.createElement("span", { className: "day-name" }, day
+                .toLocaleString(config?.locale ?? "tr", {
+                weekday: "short",
+            })
+                .toUpperCase()),
+            React.createElement("span", { className: "date" }, day.getDate()))))),
+        React.createElement("div", { className: "body" },
+            React.createElement("div", { className: "clocks" }, Array.from({ length: hours }, (_, index) => (React.createElement("div", { key: index },
+                React.createElement("span", null,
+                    String(startHour + index).padStart(2, "0"),
+                    ":00"))))),
+            React.createElement("div", { role: "grid", className: "grid" },
+                React.createElement("div", { className: "events-layer" }, events.map((event, index) => {
+                    const dayIndex = weekDays.findIndex((d) => d.toDateString() === event.start.toDateString());
+                    if (dayIndex === -1)
+                        return null;
+                    const startMinutes = event.start.getHours() * 60 + event.start.getMinutes();
+                    const durationMinutes = (event.end.getTime() - event.start.getTime()) / 60000;
+                    const top = (startMinutes / 60) * cellHeight;
+                    const height = (durationMinutes / 60) * cellHeight;
+                    return (React.createElement("div", { key: index, className: "event-box", style: {
+                            top,
+                            height,
+                            left: `${(100 / 7) * dayIndex}%`,
+                        } },
+                        event.start.toLocaleTimeString(config?.locale ?? "tr-TR", {
+                            hour: "2-digit",
+                            minute: "2-digit",
+                        }),
+                        " - ",
+                        event.end.toLocaleTimeString(config?.locale ?? "tr-TR", {
+                            hour: "2-digit",
+                            minute: "2-digit",
+                        })));
+                })),
+                Array.from({ length: hours }).map((_, rowIndex) => (React.createElement("div", { key: rowIndex, className: "row" }, weekDays.map((_, colIndex) => (
+                // <div key={colIndex} className="cell" onClick={handleClick(weekDay, rowIndex)} />
+                React.createElement("div", { key: colIndex, className: "cell" }))))))))));
+};
+const getWeekRange = (date, weekStartsOn = 1) => {
+    const current = new Date(date);
+    const currentDay = current.getDay();
+    const diff = (currentDay - weekStartsOn + 7) % 7;
+    const start = new Date(current);
+    start.setDate(current.getDate() - diff);
+    start.setHours(0, 0, 0, 0);
+    const end = new Date(start);
+    end.setDate(start.getDate() + 6);
+    return { start, end };
+};
+const getWeekDays = (date, weekStartsOn = 1) => {
+    const { start } = getWeekRange(date, weekStartsOn);
+    return Array.from({ length: 7 }, (_, i) => {
+        const d = new Date(start);
+        d.setDate(start.getDate() + i);
+        return d;
+    });
+};
+export default Week;

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

@@ -21,6 +21,7 @@ export type SearchedParam = {
     [key: string]: FilterValue | FilterValue[];
 };
 export type Config<T> = {
+    locale?: Intl.LocalesArgument;
     isServerSide?: boolean;
     isProperties?: boolean;
     isSearchable?: boolean;

package/dist/components/data-display/table/body/Editable.d.ts

@@ -1,11 +1,13 @@
 import React from "react";
 import { Errors, TableColumnType } from "../../../../libs/types";
+import { Config } from "../IProps";
 interface IProps<T> {
     c: TableColumnType<T>;
     item: T;
     trackByValue: string;
     onEditable: (item: T, trackByValue: string) => void;
     validation?: Errors<T>;
+    config: Config<T>;
 }
-declare const Editable: <T>({ c, item, trackByValue, onEditable, validation }: IProps<T>) => React.JSX.Element | null;
+declare const Editable: <T>({ c, item, trackByValue, onEditable, validation, config }: IProps<T>) => React.JSX.Element | null;
 export default Editable;

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

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 import Input from "../../../form/input";
 import DatePicker from "../../../form/date-picker";
 import Select from "../../../form/select";
-const Editable = function ({ c, item, trackByValue, onEditable, validation }) {
+const Editable = function ({ c, item, trackByValue, onEditable, validation, config }) {
     // variables
     const key = c.key;
     const itemValue = item[c.key];
@@ -29,13 +29,13 @@ const Editable = function ({ c, item, trackByValue, onEditable, validation }) {
                     const { value } = event.target;
                     setValue(value);
                     onEditable({ ...item, [key]: value }, trackByValue);
-                }, validation: { text: _vText } }));
+                }, validation: { text: _vText }, locale: config.locale }));
         case "input-formatted-decimal":
             return (React.createElement(Input.FormattedDecimal, { variant: "borderless", name: c.key, value: _value, onChange: (event) => {
                     const { value } = event.target;
                     setValue(value);
                     onEditable({ ...item, [key]: value }, trackByValue);
-                }, validation: { text: _vText } }));
+                }, validation: { text: _vText }, locale: config.locale }));
         case "date-picker":
             return (React.createElement(DatePicker, { variant: "borderless", value: _value, onChange: (value) => {
                     setValue(value);

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

@@ -4,6 +4,7 @@ import Checkbox from "../../../form/checkbox";
 import Editable from "./Editable";
 function TBody({ data, columns, refs, methods, states, config }) {
     // refs
+    const _hasMeasured = useRef(false);
     const _tBodyTR = useRef([]);
     // states
     const [triggerForRender, setTriggerForRender] = useState(false);
@@ -88,7 +89,7 @@ function TBody({ data, columns, refs, methods, states, config }) {
                             return (React.createElement("div", { key: `last-before-${i}`, style: { left: `${i + 0.65}rem` }, className: "last-before" }));
                         }),
                     React.createElement("div", { className: "before" }))),
-                React.isValidElement(render) ? (render) : column.editable && methods.onEditable ? (React.createElement(Editable, { c: column, item: item, trackByValue: methods.trackBy?.(item) ?? "", onEditable: methods.onEditable, validation: config.validation })) : (React.createElement("span", null, render)),
+                React.isValidElement(render) ? (render) : column.editable && methods.onEditable ? (React.createElement(Editable, { c: column, item: item, trackByValue: methods.trackBy?.(item) ?? "", onEditable: methods.onEditable, validation: config.validation, config: config })) : (React.createElement("span", null, render)),
                 config.isTreeView && cIndex === 0 && (React.createElement("div", { className: "after" },
                     React.createElement("div", { className: "circle" }))))));
     };
@@ -128,9 +129,14 @@ function TBody({ data, columns, refs, methods, states, config }) {
     };
     // useEffects
     useEffect(() => {
+        if (_hasMeasured.current)
+            return;
+        if (!data || data.length === 0)
+            return;
         const heights = _tBodyTR.current.map((el) => (el ? el.getBoundingClientRect().height : 0));
         setRowHeights(heights);
         setTriggerForRender((prev) => !prev);
+        _hasMeasured.current = true;
     }, [data]);
     useEffect(() => {
         if (Array.isArray(refs._checkboxItems.current) && refs._checkboxItems.current.length > 0) {

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

@@ -383,7 +383,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
             _data = _data.slice(indexOfFirstRow, indexOfLastRow);
         }
         return _data;
-    }, [data, searchedText, currentPage, selectedPerPage, sortConfig]);
+    }, [data, searchedText, currentPage, selectedPerPage, sortConfig, config.isServerSide]);
     // useEffects
     useEffect(() => {
         if (!previousSelections || previousSelections.length === 0) {

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

@@ -3,6 +3,7 @@ type Props = {
     label?: string;
     onChange: (value: string) => void;
     config?: {
+        locale?: Intl.LocalesArgument;
         isClock?: boolean;
         isFooterButton?: boolean;
     };

package/dist/components/form/input/decimal/Decimal.js

@@ -1,38 +1,50 @@
 "use client";
-import React, { useRef, useState, useEffect } from "react";
+import React, { useRef, useState, useEffect, useMemo } from "react";
 import Input from "..";
-const Decimal = ({ variant, color, name, value, onChange, placeholder, validation, disabled }) => {
-    // refs
+const Decimal = ({ variant, color, name, value, onChange, placeholder, validation, disabled, locale = "tr-TR", }) => {
     const _input = useRef(null);
-    // states
     const [_value, setValue] = useState("");
     // methods
+    const decimalSeparator = useMemo(() => {
+        const parts = new Intl.NumberFormat(locale).formatToParts(1.1);
+        return parts.find((p) => p.type === "decimal")?.value ?? ".";
+    }, [locale]);
     const handleChange = (event) => {
         let inputValue = event.target.value;
-        inputValue = inputValue.replace(/[^0-9.]/g, "");
-        const parts = inputValue.split(".");
+        // Locale’a göre izin verilen karakterler. (rakam, decimal, -)
+        const regex = new RegExp(`[^0-9\\${decimalSeparator}-]`, "g");
+        inputValue = inputValue.replace(regex, "");
+        // Sadece başta negatif işarete izin ver.
+        if (inputValue.includes("-")) {
+            inputValue = (inputValue.startsWith("-") ? "-" : "") + inputValue.replace(/-/g, "");
+        }
+        // Tek decimal separator’a izin ver.
+        const parts = inputValue.split(decimalSeparator);
         if (parts.length > 2) {
-            inputValue = parts[0] + "." + parts.slice(1).join("");
+            inputValue = parts[0] + decimalSeparator + parts.slice(1).join("");
         }
         setValue(inputValue);
+        // Parent’a normalize edilmiş "." decimal gönder.
+        const normalized = inputValue.replace(decimalSeparator, ".");
         onChange?.({
             ...event,
             target: {
                 ...event.target,
                 name,
-                value: inputValue,
+                value: normalized,
             },
         });
     };
     // useEffects
     useEffect(() => {
-        if (value === undefined || value === null) {
+        if (value === undefined || value === null || value === "") {
             setValue("");
+            return;
         }
-        else {
-            setValue(String(value));
-        }
-    }, [value]);
+        const stringValue = String(value);
+        const localized = stringValue.replace(".", decimalSeparator);
+        setValue(localized);
+    }, [value, decimalSeparator]);
     return (React.createElement(Input, { ref: _input, name: name, variant: variant, color: color, type: "text", inputMode: "decimal", value: _value, onChange: (e) => {
             if (disabled)
                 return;

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

@@ -3,5 +3,6 @@ interface IProps extends IVariant, IColors, IBorder, IUpperCase, IValidation, IP
     name: string;
     value: string | number | readonly string[] | undefined;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    locale?: Intl.LocalesArgument;
 }
 export default IProps;

package/dist/components/form/input/formatted-decimal/FormattedDecimal.js

@@ -3,12 +3,16 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import Input from "..";
 import { NUMBER } from "../../../../libs/infrastructure/shared";
 const FormattedDecimal = ({ variant, color, name, value, onChange, locale = "tr-TR", digits, placeholder, validation, disabled, }) => {
-    // refs
-    // const _firstLoad = useRef<boolean>(false);
     const _input = useRef(null);
-    // states
     const [_value, setValue] = useState("");
     // methods
+    const getSeparators = (locale) => {
+        const parts = new Intl.NumberFormat(locale).formatToParts(1000.1);
+        const group = parts.find((p) => p.type === "group")?.value ?? ",";
+        const decimal = parts.find((p) => p.type === "decimal")?.value ?? ".";
+        return { group, decimal };
+    };
+    const getFormatter = useMemo(() => NUMBER.Decimal(locale, digits), [locale, digits]);
     const handleClick = () => {
         const input = _input.current;
         if (!input)
@@ -33,48 +37,34 @@ const FormattedDecimal = ({ variant, color, name, value, onChange, locale = "tr-
     };
     const handleChange = (event) => {
         let { value } = event.target;
-        // Temizle.
-        const cleanedValue = (value = value.replace(/[^0-9,]/g, ""));
-        // Numara olarak çevir.
-        const normalized = parseCurrencySmart(value);
-        // const isDecimals = cleanedValue.includes(",");
-        const parsedDecimal = parseFloat(normalized);
-        const newValue = isNaN(parsedDecimal) ? 0 : parsedDecimal;
-        // Formatla ve Kullanıcı , (virgül) girdiyse kuruş göster.
-        let formatted = newValue === 0 && cleanedValue === "" ? "" : getFormatter.format(newValue);
+        const { group, decimal } = getSeparators(locale);
+        // Locale’a göre izin verilen karakterleri temizle.
+        const regex = new RegExp(`[^0-9\\${group}\\${decimal}]`, "g");
+        value = value.replace(regex, "");
+        // Normalize et (decimal her zaman "." olacak şekilde)
+        let normalized = value.replace(new RegExp(`\\${group}`, "g"), "").replace(decimal, ".");
+        const parsed = parseFloat(normalized);
+        const numericValue = isNaN(parsed) ? 0 : parsed;
+        const formatted = value === "" ? "" : getFormatter.format(numericValue);
         setValue(formatted);
-        onChange?.({ ...event, target: { ...event.target, name: name, value: normalized } });
-    };
-    const getFormatter = useMemo(() => NUMBER.Decimal(locale, digits), [digits]);
-    const parseCurrencySmart = (input) => {
-        if (input.includes(",") && input.includes(".")) {
-            // Nokta binlik, virgül ondalık (tr-TR, de-DE gibi)
-            return input.replace(/\./g, "").replace(",", ".");
-        }
-        else if (input.includes(",") && !input.includes(".")) {
-            // Virgül ondalık, binlik yok (fr-FR gibi)
-            return input.replace(",", ".");
-        }
-        else if (input.includes(".") && !input.includes(",")) {
-            // Nokta ondalık, binlik yok veya US format
-            return input.replace(/,/g, "");
-        }
-        else {
-            // Hiçbiri yok, zaten sayı
-            return input;
-        }
+        onChange?.({
+            ...event,
+            target: {
+                ...event.target,
+                name,
+                value: normalized,
+            },
+        });
     };
     // useEffects
     useEffect(() => {
-        // if (!_firstLoad.current && value !== undefined && value !== "") {
-        //   // const isDecimals = String(value).includes(".");
-        //   setValue(getFormatter.format(Number(value)));
-        //   _firstLoad.current = true;
-        // }
+        if (value === undefined || value === null || value === "") {
+            setValue("");
+            return;
+        }
         setValue(getFormatter.format(Number(value)));
-    }, [value]);
-    return (React.createElement(Input, { ref: _input, name: name, variant: variant, color: color, value: _value ?? "", type: "text", inputMode: "decimal", onChange: (event) => {
-            // Disabled gelmesi durumunda işlem yapmasına izin verme...
+    }, [value, getFormatter]);
+    return (React.createElement(Input, { ref: _input, name: name, variant: variant, color: color, value: _value, type: "text", inputMode: "decimal", onChange: (event) => {
             if (disabled)
                 return;
             handleChange(event);

package/dist/index.d.ts

@@ -10,6 +10,7 @@ import Select from "./components/form/select";
 import Switch from "./components/form/switch";
 import TextEditor from "./components/form/text-editor";
 import Upload from "./components/form/upload";
+import Calendar from "./components/data-display/calendar";
 import Card from "./components/data-display/card";
 import Chip from "./components/data-display/chip";
 import Diagram from "./components/data-display/diagram/index";
@@ -33,4 +34,4 @@ import Pagination from "./components/navigation/pagination";
 import Steps from "./components/navigation/steps";
 import Grid from "./components/data-display/grid-system";
 import Layout from "./components/layout";
-export { Button, ButtonAction, ButtonGroup, Checkbox, DatePicker, Input, Radio, Select, Switch, TextEditor, Upload, Card, Chip, Diagram, Divider, DnD, KanbanBoard, Paper, SyntaxHighlighter, Table, Tabs, Typography, Alert, Drawer, Modal, Popover, Progress, Tooltip, Breadcrumb, Menu, Pagination, Steps, Grid, Layout, };
+export { Button, ButtonAction, ButtonGroup, Checkbox, DatePicker, Input, Radio, Select, Switch, TextEditor, Upload, Calendar, Card, Chip, Diagram, Divider, DnD, KanbanBoard, Paper, SyntaxHighlighter, Table, Tabs, Typography, Alert, Drawer, Modal, Popover, Progress, Tooltip, Breadcrumb, Menu, Pagination, Steps, Grid, Layout, };

package/dist/index.js

@@ -12,6 +12,7 @@ import Switch from "./components/form/switch";
 import TextEditor from "./components/form/text-editor";
 import Upload from "./components/form/upload";
 // Data Display
+import Calendar from "./components/data-display/calendar";
 import Card from "./components/data-display/card";
 import Chip from "./components/data-display/chip";
 import Diagram from "./components/data-display/diagram/index";
@@ -42,7 +43,7 @@ export {
 // Form Elements
 Button, ButtonAction, ButtonGroup, Checkbox, DatePicker, Input, Radio, Select, Switch, TextEditor, Upload, 
 // Data Display
-Card, Chip, Diagram, Divider, DnD, KanbanBoard, Paper, SyntaxHighlighter, Table, Tabs, Typography, 
+Calendar, Card, Chip, Diagram, Divider, DnD, KanbanBoard, Paper, SyntaxHighlighter, Table, Tabs, Typography, 
 // Feedback
 Alert, Drawer, Modal, Popover, Progress, Tooltip, 
 // Navigation

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

@@ -111,4 +111,5 @@ export type EdgeData = {
         port: Port;
     };
 };
+export type View = "Day" | "Week" | "Month" | "Year";
 export {};

package/package.json

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