@harjs/react-ui 1.0.0

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

@@ -0,0 +1,308 @@
+"use client";
+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 "../../../libs/core/application/hooks";
+const colors = ["#A881FA", "#75CFA4", "#EE6D63", "#FAD87A"];
+const Gantt = ({ title, description, data, pagination, config = { isSearchable: false } }) => {
+    // refs
+    const _svg = useRef(null);
+    const _mapIsMoveField = useRef(null);
+    const _scrollX = useRef(0);
+    const _isPressedCtrl = useRef(false);
+    // states
+    const [startX, setStartX] = useState(0);
+    const [scrollX, setScrollX] = useState(0);
+    const [isDragging, setIsDragging] = useState(false);
+    const [zoom, setZoom] = useState(1); // 1 = %100, 1.5 = %150 zoom
+    // states -> Pagination
+    const [currentPage, setCurrentPage] = useState(1);
+    const [selectedPerPage, setSelectedPerPage] = useState(pagination?.perPage ?? 10);
+    // states -> Mobil
+    const [isMobile, setIsMobile] = useState(false);
+    // variables
+    const getData = useMemo(() => {
+        let _data = [...data];
+        if (pagination && !config.isServerSide) {
+            const indexOfLastRow = currentPage * selectedPerPage;
+            const indexOfFirstRow = indexOfLastRow - selectedPerPage;
+            _data = _data.slice(indexOfFirstRow, indexOfLastRow);
+        }
+        return _data;
+    }, [data, currentPage, selectedPerPage, config.isServerSide]);
+    const DAY_WIDTH = 60 * zoom;
+    const TIMELINE = useMemo(() => generateGanttTimeline(data), [data]);
+    const HEADER_HEIGHT = 75;
+    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
+        {
+            name: "",
+        }).name;
+        const estimatedWidth = longestName.length * 7 + 25;
+        return Math.min(Math.max(estimatedWidth, 120), 250);
+    }, [getData]);
+    const SVG_WIDTH = "100%";
+    const SVG_HEIGHT = HEADER_HEIGHT + getData.length * ROW_HEIGHT + ROW_HEIGHT * 2;
+    let PREVMATCHMONT = 0;
+    let PREVMATCHDAY = 0;
+    // hooks
+    const { t } = useTranslation(String(config.locale ?? "tr"));
+    // methods
+    const handleResize = useCallback(() => {
+        return (_) => {
+            setIsMobile(window.innerWidth <= 768);
+        };
+    }, []);
+    const handleMouseDown = useCallback((e) => {
+        if (e.button !== 0)
+            return;
+        setIsDragging(true);
+        setStartX(e.clientX + _scrollX.current);
+    }, []);
+    const handleKeyboardDown = useCallback((event) => {
+        if (["Control", "Meta"].includes(event.key)) {
+            event.preventDefault();
+            _isPressedCtrl.current = true;
+        }
+    }, []);
+    const handleKeyboardUp = useCallback((event) => {
+        if (["Control", "Meta"].includes(event.key)) {
+            event.preventDefault();
+            _isPressedCtrl.current = false;
+        }
+    }, []);
+    const handleMouseMove = useCallback((e) => {
+        if (!isDragging)
+            return;
+        let newScrollX = startX - e.clientX;
+        if (newScrollX < 0)
+            newScrollX = 0;
+        // Ekrana sığan alanı çıkarırken doğru clientWidth kontrolü
+        const availableWidth = (_svg.current?.clientWidth ?? 0) - LABEL_WIDTH;
+        const maxScrollWidth = TIMELINE.days.length * DAY_WIDTH - availableWidth;
+        if (newScrollX > maxScrollWidth)
+            newScrollX = maxScrollWidth;
+        // Eğer içerik zaten ekrana sığıyorsa scrollX 0 olmalı
+        if (maxScrollWidth <= 0)
+            newScrollX = 0;
+        setScrollX(newScrollX);
+        _scrollX.current = newScrollX;
+    }, [startX, isDragging, TIMELINE.days.length, DAY_WIDTH, LABEL_WIDTH]);
+    const handleMouseUpOrLeave = useCallback(() => {
+        const svgRect = _svg.current?.getBoundingClientRect();
+        const mapIsMoveFieldRect = _mapIsMoveField.current?.getBoundingClientRect();
+        if (svgRect && mapIsMoveFieldRect) {
+            const svgElement = _svg.current;
+            if (!svgElement)
+                return;
+            const chartContentWidth = TIMELINE.days.length * DAY_WIDTH;
+            const viewportWidth = svgElement.clientWidth;
+            const availableChartWidth = viewportWidth - LABEL_WIDTH;
+            if (chartContentWidth > availableChartWidth) {
+                const maxScrollX = chartContentWidth - availableChartWidth;
+                if (scrollX > maxScrollX) {
+                    setScrollX(maxScrollX);
+                    _scrollX.current = maxScrollX;
+                }
+            }
+            else {
+                setScrollX(0);
+            }
+        }
+        setIsDragging(false);
+    }, [TIMELINE.days.length, LABEL_WIDTH]);
+    // useEffects
+    useEffect(() => {
+        setIsMobile(window.innerWidth <= 768);
+        window.addEventListener("resize", handleResize);
+        // Keyboard Events
+        window.addEventListener("keydown", handleKeyboardDown);
+        window.addEventListener("keyup", handleKeyboardUp);
+        return () => {
+            window.removeEventListener("resize", handleResize);
+            // Keyboard Events
+            window.removeEventListener("keydown", handleKeyboardDown);
+            window.removeEventListener("keyup", handleKeyboardUp);
+        };
+    }, [handleResize]);
+    return (React.createElement("div", { className: "ar-gantt-chart" },
+        React.createElement("svg", { ref: _svg, xmlns: "http://www.w3.org/2000/svg", 
+            // viewBox={`0 0 ${SVG_WIDTH} ${SVG_HEIGHT}`}
+            width: SVG_WIDTH, height: SVG_HEIGHT, className: "ar-gantt-chart-svg" },
+            React.createElement("defs", null,
+                React.createElement("pattern", { id: "weekend-stripes", width: "8", height: "8", patternUnits: "userSpaceOnUse" },
+                    React.createElement("rect", { width: "8", height: "8", fill: "rgba(0, 0, 0, 0.03)" }),
+                    React.createElement("line", { x1: "0", y1: "8", x2: "8", y2: "0", opacity: 0.25, stroke: "var(--red-500)", strokeWidth: 0.5 }))),
+            React.createElement("g", { className: "header", width: "100%" },
+                React.createElement("rect", { x: 0, y: 0, width: "100%", height: HEADER_HEIGHT }),
+                React.createElement("g", { transform: `translate(25, ${HEADER_HEIGHT / 2})`, className: "title-group" },
+                    React.createElement("text", { className: "title" }, title),
+                    React.createElement("text", { y: 20, className: "title-description" }, description)),
+                React.createElement("line", { x1: "0", y1: HEADER_HEIGHT, x2: "100%", y2: HEADER_HEIGHT, opacity: 0.25, stroke: "var(--black)", strokeWidth: 1 })),
+            React.createElement("g", { className: "body", transform: `translate(0, ${HEADER_HEIGHT + ROW_HEIGHT * 2})` },
+                React.createElement("g", { className: `${isDragging ? "dragging" : "no-dragging"} time-and-bars`, transform: `translate(${LABEL_WIDTH - scrollX}, 0)`, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUpOrLeave, onMouseLeave: handleMouseUpOrLeave, onWheel: (event) => {
+                        if (!_isPressedCtrl.current)
+                            return;
+                        // 1. Mevcut toplam genişliği hesapla. (eski zoom ile)
+                        const currentTotalWidth = TIMELINE.days.length * DAY_WIDTH;
+                        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;
+                        // 3. Yeni zoom değerini hesapla.
+                        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;
+                        // 4. Yeni zoom'a göre yeni DAY_WIDTH ve yeni toplam genişliği hesapla.
+                        const nextDayWidth = 60 * nextZoom;
+                        const nextTotalWidth = TIMELINE.days.length * nextDayWidth;
+                        // 5. Yeni maksimum kaydırma genişliğini bul ve eski orana göre scrollX'i güncelle.
+                        const nextMaxScrollWidth = nextTotalWidth - availableWidth;
+                        const nextScrollX = Math.max(0, nextMaxScrollWidth * currentScrollRatio);
+                        // State'leri güncelle.
+                        setZoom(nextZoom);
+                        setScrollX(nextScrollX);
+                        _scrollX.current = nextScrollX;
+                    }, 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;
+                            const nextDay = new Date(day.date);
+                            nextDay.setDate(nextDay.getDate() + 1);
+                            const isLastDayOfMonth = day.date.getMonth() !== nextDay.getMonth();
+                            const isSunday = day.date.getDay() === 0;
+                            if (!isSunday && !isLastDayOfMonth)
+                                return null;
+                            const currentMonthNum = day.date.getMonth();
+                            const currentDayNum = day.date.getDate();
+                            if (index === 0) {
+                                PREVMATCHMONT = 0;
+                                PREVMATCHDAY = 0;
+                            }
+                            const dayDiff = currentDayNum - (currentMonthNum !== PREVMATCHMONT ? 0 : PREVMATCHDAY);
+                            // Bir sonraki turda kullanabilmek için hafızayı güncelliyoruz.
+                            PREVMATCHMONT = currentMonthNum;
+                            PREVMATCHDAY = currentDayNum;
+                            return (React.createElement("g", { key: index },
+                                React.createElement("line", { x1: xPos, y1: -ROW_HEIGHT * 2, x2: xPos, y2: 0, opacity: 0.15, stroke: "var(--black)", strokeWidth: STROKE_WIDTH }),
+                                React.createElement("text", { x: xPos - (dayDiff * DAY_WIDTH) / 2, y: -ROW_HEIGHT * 2 + ROW_HEIGHT / 2, fill: "var(--black)", fontSize: "12", textAnchor: "middle", dominantBaseline: "central" }, day.date.toLocaleDateString("tr-TR", { month: "long" }))));
+                        }),
+                        TIMELINE.days.map((day, index) => {
+                            const xPos = (index + 1) * DAY_WIDTH; // 01:00 -> 60px, 02:00 -> 120px...
+                            return (React.createElement("g", { key: index },
+                                React.createElement("text", { x: (index + 1) * DAY_WIDTH - 30, y: -ROW_HEIGHT + ROW_HEIGHT / 2, fill: day.isWeekend ? "var(--red-500)" : "var(--black)", fontSize: "12", textAnchor: "middle", dominantBaseline: "central" },
+                                    String(day.number).padStart(2, "0"),
+                                    " ",
+                                    day.name),
+                                day.isWeekend && (React.createElement("rect", { x: xPos - DAY_WIDTH, y: 0, width: DAY_WIDTH, height: SVG_HEIGHT, fill: "url(#weekend-stripes)" })),
+                                React.createElement("line", { x1: xPos, y1: 0, x2: xPos, y2: SVG_HEIGHT, opacity: 0.25, stroke: "var(--black)", strokeWidth: STROKE_WIDTH, strokeDasharray: "5,5" })));
+                        }),
+                        React.createElement("line", { x1: 0, y1: -ROW_HEIGHT, x2: TIMELINE.days.length * DAY_WIDTH, y2: -ROW_HEIGHT, opacity: 0.15, stroke: "var(--black)", strokeWidth: STROKE_WIDTH }),
+                        React.createElement("line", { x1: 0, y1: 0, x2: TIMELINE.days.length * DAY_WIDTH, y2: 0, opacity: 0.15, stroke: "var(--black)", strokeWidth: STROKE_WIDTH })),
+                    React.createElement("g", { transform: `translate(0, 0)` }, getData.map((task, index) => {
+                        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());
+                        // 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
+                        const x = hoursFromStart * (DAY_WIDTH / 24);
+                        // 2. Görevin toplam süresini DOĞRU şekilde saat cinsinden buluyoruz
+                        const durationHours = (taskEnd.getTime() - taskStart.getTime()) / (1000 * 60 * 60);
+                        // Genişlik (Width): Süreyi dinamik saat başına düşen pikselle çarpıyoruz
+                        const width = durationHours * (DAY_WIDTH / 24);
+                        // 3. Dikey Konumlandırma
+                        const height = ROW_HEIGHT / 1.5;
+                        const y = index * ROW_HEIGHT + height / 4;
+                        return (React.createElement("g", { key: task.id },
+                            React.createElement("rect", { x: x, y: y, width: width, height: height, fill: colors[index % colors.length], rx: 3 }),
+                            width > 60 && (React.createElement("text", { x: x + width / 2, y: y + height / 2 + 4, fontSize: 12, fontWeight: "600", fill: "var(--black)", textAnchor: "middle" }, task.name))));
+                    })),
+                    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("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;
+                        const textContent = item.name;
+                        const maxTextWidth = LABEL_WIDTH - 20;
+                        return (React.createElement("g", { key: item.id, className: "label-row" },
+                            React.createElement("text", { x: "10", y: y + ROW_HEIGHT / 2, className: "label-text" }, textContent.length * 7 > maxTextWidth
+                                ? `${textContent.substring(0, Math.floor(maxTextWidth / 7) - 3)}...`
+                                : textContent),
+                            React.createElement("line", { x1: 0, y1: y + ROW_HEIGHT, x2: LABEL_WIDTH, y2: y + ROW_HEIGHT, opacity: 0.15, stroke: "var(--black)", strokeWidth: "0.5" }),
+                            React.createElement("line", { x1: LABEL_WIDTH, y1: y + ROW_HEIGHT, x2: LABEL_WIDTH + TIMELINE.days.length * DAY_WIDTH, y2: y + ROW_HEIGHT, opacity: 0.25, stroke: "var(--black)", strokeWidth: STROKE_WIDTH, strokeDasharray: "5,5" })));
+                    }))))),
+        React.createElement("div", { className: "footer" },
+            React.createElement("span", null, isMobile ? (React.createElement(React.Fragment, null,
+                React.createElement("strong", null,
+                    (currentPage - 1) * selectedPerPage + 1,
+                    " -",
+                    " ",
+                    Math.min(currentPage * selectedPerPage, pagination?.totalRecords || data.length),
+                    " 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);
+                    setSelectedPerPage(perPage);
+                    pagination.onChange?.(currentPage, perPage);
+                } })))));
+};
+const generateGanttTimeline = (data) => {
+    if (!data || data.length === 0) {
+        return { minDate: null, maxDate: null, months: [], days: [] };
+    }
+    // 1. En erken başlangıç ve en geç bitiş tarihlerini buluyoruz.
+    let minDate = new Date(data[0].start);
+    let maxDate = new Date(data[0].end);
+    data.forEach((task) => {
+        const start = new Date(task.start);
+        const end = new Date(task.end);
+        if (start < minDate)
+            minDate = start;
+        if (end > maxDate)
+            maxDate = end;
+    });
+    // Şemanın düzgün görünmesi için başlangıcı o ayın 1'ine,
+    // bitişi ise o ayın son gününe yuvarlamak yerleşim açısından daha iyi sonuç verir.
+    const startTimeline = new Date(minDate.getFullYear(), minDate.getMonth(), 1);
+    const endTimeline = new Date(maxDate.getFullYear(), maxDate.getMonth() + 1, 0); // Ayın son günü
+    const months = [];
+    const days = [];
+    // 2. Günleri ve Ayları döngüyle oluşturuyoruz.
+    const current = new Date(startTimeline);
+    while (current <= endTimeline) {
+        // Gün listesini doldur.
+        const dayOfWeek = current.getDay();
+        days.push({
+            date: new Date(current),
+            number: current.getDate(),
+            name: current.toLocaleDateString("tr-TR", { weekday: "short" }), // Pzt, Sal...
+            isWeekend: dayOfWeek === 0 || dayOfWeek === 6, // Hafta sonu kontrolü (Gantt'ta boyamak için).
+        });
+        // Ay listesini doldur. (Eğer listede bu ay henüz yoksa ekle)
+        const year = current.getFullYear();
+        const number = current.getMonth();
+        const name = current.toLocaleDateString("tr-TR", { month: "long" }); // Ocak, Şubat...
+        const monthExists = months.some((m) => m.year === year && m.number === number);
+        if (!monthExists) {
+            // O ayın toplam gün sayısını bulalım.
+            const totalDays = new Date(year, number + 1, 0).getDate();
+            months.push({ year, number, name, totalDays });
+        }
+        // Bir sonraki güne geç.
+        current.setDate(current.getDate() + 1);
+    }
+    return {
+        timelineStart: startTimeline,
+        timelineEnd: endTimeline,
+        months, // Üst zaman bandı için (Örn: Ocak, Şubat)
+        days, // Alt zaman bandı için (Örn: 1, 2, 3... veya haftalık kırılım için)
+    };
+};
+export default Gantt;

package/dist/components/charts/index.d.ts

@@ -0,0 +1,2 @@
+import Pie from "./pie";
+export { Pie };

package/dist/components/charts/index.js

@@ -0,0 +1,2 @@
+import Pie from "./pie";
+export { Pie };

package/dist/components/charts/pie/IProps.d.ts

@@ -0,0 +1,7 @@
+import { PieChartDataType } from "../../../libs/infrastructure/types";
+interface IProps {
+    title: string;
+    data: PieChartDataType[];
+    size?: number;
+}
+export default IProps;

package/dist/components/charts/pie/IProps.js

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

package/dist/components/charts/pie/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import IProps from "./IProps";
+import "../../../assets/css/components/charts/pie/pie.css";
+declare const Pie: React.FC<IProps>;
+export default Pie;

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

@@ -0,0 +1,56 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import "../../../assets/css/components/charts/pie/pie.css";
+const Pie = ({ title, data, size }) => {
+    // refs
+    const _arPieChart = useRef(null);
+    // const _randomIndex = useRef<number[]>([]);
+    // state
+    const [conic, setConic] = useState([]);
+    // variables
+    const conicColors = [
+        ["#fff35e", "#000"], // Sarı
+        ["#ffc752", "#000"], // Açık Sarı
+        ["#ff9151", "#fff"], // Turuncu
+        ["#ee544e", "#fff"], // Kırmızı
+        ["#e52b66", "#fff"], // Pembemsi Kırmızı
+        ["#3c1d43", "#fff"], // Koyu Mor
+        ["#582d62", "#fff"], // Mor
+        ["#0470a7", "#fff"], // Açık Mavi
+        ["#068aa8", "#fff"], // Mavi-Turkuaz
+        ["#72a9bb", "#fff"], // Açık Mavi-Gri
+    ];
+    useEffect(() => {
+        if (!_arPieChart.current || data.length === 0)
+            return;
+        const conicGradients = [];
+        let total = data.reduce((sum, value) => sum + value.value, 0);
+        let normalizedData = data.map((value) => (value.value / total) * 100);
+        let start = 0;
+        // Gelen data uzunluğunda rastgele bir sayı dizisi oluşturuyor.
+        // do {
+        //   const r = Math.floor(Math.random() * conicColors.length);
+        //   if (!_randomIndex.current.includes(r)) _randomIndex.current.push(r);
+        // } while (_randomIndex.current.length < data.length);
+        normalizedData.forEach((percent, index) => {
+            let end = start + percent;
+            if (index === 0)
+                conicGradients.push(`#fff ${start + 0.5}% ${start}%`);
+            conicGradients.push(`${conicColors[index][0]} ${start}% ${end}%`);
+            conicGradients.push(`#fff ${end}% ${end + 0.5}%`);
+            start = end;
+        });
+        setConic(conicGradients);
+    }, [data]);
+    return (React.createElement("div", { className: "ar-pie-chart-wrapper" },
+        React.createElement("div", { className: "title" },
+            React.createElement("span", null, title)),
+        React.createElement("div", null,
+            React.createElement("div", { ref: _arPieChart, className: "ar-pie-chart", style: { background: `conic-gradient(${conic.join(", ")})`, width: size, height: size } },
+                React.createElement("article", null)),
+            React.createElement("div", { className: "information-field" }, data.map((item, index) => (React.createElement("article", { key: index },
+                React.createElement("span", { style: { backgroundColor: conicColors[index][0] } },
+                    React.createElement("span", { style: { color: conicColors[index][1] } }, item.value)),
+                React.createElement("span", null, item.text))))))));
+};
+export default Pie;

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

@@ -0,0 +1,23 @@
+import React from "react";
+import { CalendarEvent } from "./IProps";
+import { View } from "../../../libs/infrastructure/types";
+interface IProps<T> {
+    trackedBy: keyof (T & CalendarEvent);
+    data: (T & CalendarEvent)[];
+    renderItem: (item: T, index: number) => React.JSX.Element;
+    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: <T>({ trackedBy, data, renderItem, states, config }: IProps<T>) => 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 = function ({ trackedBy, data, renderItem, states, config }) {
+    if (states.view.get === "Day")
+        return React.createElement(Day, null);
+    else if (states.view.get === "Week")
+        return (React.createElement(Week, { trackedBy: trackedBy, data: data, renderItem: renderItem, 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/infrastructure/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,14 @@
+export type CalendarEvent = {
+    start: Date;
+    end: Date;
+};
+interface IProps<T> {
+    trackedBy: keyof (T & CalendarEvent);
+    data: (T & CalendarEvent)[];
+    renderItem: (item: T, index: number) => React.JSX.Element;
+    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,8 @@
+import React from "react";
+import IProps from "./IProps";
+import "../../../assets/css/components/data-display/calendar/styles.css";
+declare const Calendar: {
+    <T>({ trackedBy, data, renderItem, config }: IProps<T>): React.JSX.Element;
+    displayName: string;
+};
+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 = function ({ trackedBy, data, renderItem, 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, { trackedBy: trackedBy, data: data, renderItem: renderItem, 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,19 @@
+import React from "react";
+import { CalendarEvent } from "../IProps";
+interface IProps<T> {
+    trackedBy: keyof (T & CalendarEvent);
+    data: (T & CalendarEvent)[];
+    renderItem: (item: T, index: number) => React.JSX.Element;
+    states: {
+        currentDate: {
+            get: Date;
+            set: React.Dispatch<React.SetStateAction<Date>>;
+        };
+    };
+    config?: {
+        locale?: Intl.LocalesArgument;
+        weekStartsOn?: number;
+    };
+}
+declare const Week: <T>({ trackedBy, data, renderItem, states, config }: IProps<T>) => React.JSX.Element;
+export default Week;