@harjs/react-ui 1.0.0

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

@@ -0,0 +1,173 @@
+import React, { useEffect, useMemo, useState } from "react";
+import ReactDOM from "react-dom";
+const Week = function ({ trackedBy, data, renderItem, states, config }) {
+    // states
+    const [mouseCoordinate, setMouseCoordinate] = useState({
+        x: 0,
+        y: 0,
+        isRightHalf: false,
+        isBottomHalf: false,
+    });
+    const [activeTooltip, setActiveTooltip] = useState(null);
+    // variables
+    const startHour = 0;
+    const endHour = 24;
+    const hours = endHour - startHour;
+    // const cellHeight = 60;
+    // methods
+    const weekDays = useMemo(() => getWeekDays(states.currentDate.get, config?.weekStartsOn ?? 1), [states.currentDate.get, config?.weekStartsOn]);
+    // useEffects
+    useEffect(() => {
+        const handleMouseMove = (event) => {
+            setMouseCoordinate({
+                x: event.clientX,
+                y: event.clientY,
+                isRightHalf: event.clientX > window.innerWidth / 2,
+                isBottomHalf: event.clientY > window.innerHeight / 2,
+            });
+        };
+        window.addEventListener("mousemove", handleMouseMove);
+        return () => {
+            window.removeEventListener("mousemove", handleMouseMove);
+        };
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        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" }, Array.from({ length: hours }).map((_, rowIndex) => (React.createElement("div", { key: rowIndex, className: "row" }, weekDays.map((_, colIndex) => (React.createElement("div", { key: colIndex, className: "cell" }))))))),
+                React.createElement("div", { className: "events-layer" }, weekDays.map((day, dayIndex) => {
+                    const dayStart = new Date(day).setHours(0, 0, 0, 0);
+                    const dayEnd = new Date(day).setHours(23, 59, 59, 999);
+                    // 1. Bu güne ait etkinlikleri filtrele ve sırala.
+                    const dayEvents = data
+                        .filter((event) => {
+                        return event.start.getTime() <= dayEnd && event.end.getTime() >= dayStart;
+                    })
+                        .sort((a, b) => a.start.getTime() - b.start.getTime());
+                    // 2. Çakışmaları hesapla (Görsel yerleşim için kritik adım).
+                    const positionedEvents = computeEventLayout(dayEvents, dayStart, dayEnd);
+                    return positionedEvents.map(({ event, layout, originalIndex }) => {
+                        const uniqueValue = event[trackedBy];
+                        const eventColor = getColor(uniqueValue);
+                        return (React.createElement("div", { key: `${originalIndex}-${dayIndex}`, onMouseEnter: () => setActiveTooltip({ content: renderItem(event, originalIndex), id: originalIndex }), onMouseLeave: () => setActiveTooltip(null), className: "event-box", style: {
+                                backgroundColor: eventColor.bg,
+                                position: "absolute",
+                                top: `${layout.top}px`,
+                                height: `${layout.height}px`,
+                                // Dinamik genişlik ve sol mesafe hesaplama.
+                                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)",
+                                zIndex: 10,
+                            } }, layout.height > 20 && renderItem(event, originalIndex)));
+                    });
+                })))),
+        activeTooltip &&
+            ReactDOM.createPortal(React.createElement("div", { className: "ar-calendar-tooltip", style: {
+                    top: mouseCoordinate.y,
+                    left: mouseCoordinate.x,
+                    transform: `translate(${mouseCoordinate.isRightHalf ? "-110%" : "10%"}, ${mouseCoordinate.isBottomHalf ? "-110%" : "10%"})`,
+                } }, activeTooltip.content), document.body)));
+};
+/**
+ * Etkinliklerin çakışma durumuna göre konumlarını hesaplayan yardımcı fonksiyon
+ */
+function computeEventLayout(events, dayStart, dayEnd) {
+    const cellHeight = 60;
+    const results = [];
+    // Gruplandırma (Aynı anda çakışan etkinlik kümeleri)
+    let clusters = [];
+    let lastEventEnd = 0;
+    events.forEach((event, idx) => {
+        const start = Math.max(event.start.getTime(), dayStart);
+        const end = Math.min(event.end.getTime(), dayEnd);
+        if (start >= lastEventEnd) {
+            clusters.push([]); // Yeni bir küme başlat
+        }
+        const lastCluster = clusters[clusters.length - 1];
+        lastCluster.push({ event, idx, start, end });
+        lastEventEnd = Math.max(lastEventEnd, end);
+    });
+    // Her küme içindeki kolonları hesapla
+    clusters.forEach((cluster) => {
+        const columns = [];
+        cluster.forEach((item) => {
+            let placed = false;
+            for (let i = 0; i < columns.length; i++) {
+                // Eğer bu kolondaki son etkinlikle çakışmıyorsa buraya koy
+                const lastInColumn = columns[i][columns[i].length - 1];
+                if (item.start >= lastInColumn.end) {
+                    columns[i].push(item);
+                    placed = true;
+                    break;
+                }
+            }
+            if (!placed) {
+                columns.push([item]); // Yeni kolon aç
+            }
+        });
+        // Sonuçları formatla
+        cluster.forEach((item) => {
+            const colIndex = columns.findIndex((col) => col.includes(item));
+            const startMinutes = new Date(item.start).getHours() * 60 + new Date(item.start).getMinutes();
+            const duration = (item.end - item.start) / 60000;
+            results.push({
+                event: item.event,
+                originalIndex: item.idx,
+                layout: {
+                    top: (startMinutes / 60) * cellHeight,
+                    height: (duration / 60) * cellHeight,
+                    column: colIndex,
+                    totalColumns: columns.length,
+                },
+            });
+        });
+    });
+    return results;
+}
+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;
+    });
+};
+const getColor = (id) => {
+    const colors = [
+        { bg: "#3174ad", border: "#2a6293" }, // Mavi
+        { bg: "#4caf50", border: "#388e3c" }, // Yeşil
+        { bg: "#ff9800", border: "#f57c00" }, // Turuncu
+        { bg: "#9c27b0", border: "#7b1fa2" }, // Mor
+        { bg: "#e91e63", border: "#c2185b" }, // Pembe
+        { bg: "#00bcd4", border: "#0097a7" }, // Turkuaz
+    ];
+    // Eğer id string ise karakter kodlarının toplamını alarak tutarlı bir index üretiriz
+    let hash = 0;
+    const identifier = String(id);
+    for (let i = 0; i < identifier.length; i++) {
+        hash = identifier.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    const index = Math.abs(hash);
+    return colors[index % colors.length];
+};
+export default Week;

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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+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 }) => {
+    // variables
+    const _className = ["ar-card"];
+    _className.push(...Utils.GetClassName(variant, status, undefined, undefined, undefined, undefined, undefined));
+    return (React.createElement("div", { className: _className.map((c) => c).join(" ") },
+        title && (React.createElement("div", { className: "title" },
+            React.createElement("h4", null, title),
+            React.createElement("div", null, actions))),
+        React.createElement("div", { className: "content" }, children)));
+};
+export default Card;

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

@@ -0,0 +1,6 @@
+import { IBorderProps, IColorProps, IIconProps, IVariantProps } from "../../../libs/infrastructure/types/IGlobalProps";
+interface IProps extends IVariantProps, IColorProps, IBorderProps, IIconProps {
+    text: string;
+    customColor?: string;
+}
+export default IProps;

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

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

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

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

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

@@ -0,0 +1,17 @@
+"use client";
+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, }) => {
+    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 && {
+            style: {
+                backgroundColor: customColor,
+                color: "var(--black)",
+            },
+        }) },
+        icon?.element && React.createElement("span", null, icon?.element),
+        React.createElement("span", null, text)));
+};
+export default Chip;

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

@@ -0,0 +1,6 @@
+import { EdgeData, NodeData } from "../../../libs/infrastructure/types";
+interface IProps {
+    nodes: NodeData[];
+    edges: EdgeData[];
+}
+export default IProps;

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

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

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

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

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

@@ -0,0 +1,298 @@
+"use client";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import "../../../assets/css/components/data-display/diagram/styles.css";
+import Grid from "../grid-system";
+import Button from "../../form/button";
+import Tooltip from "../../feedback/tooltip";
+import { ARIcon } from "../../icons";
+const { Box } = Grid;
+const Diagram = ({ nodes, edges }) => {
+    // refs
+    const _arDiagram = useRef(null);
+    const _content = useRef(null);
+    const _arNodes = useRef({});
+    const _path = useRef(null);
+    // refs -> Start Position
+    const _dragStartMousePosition = useRef({ x: 0, y: 0 });
+    const _dragStartNodePosition = useRef({ x: 0, y: 0 });
+    // refs -> Zoom
+    const _zoomIntensity = 0.1;
+    const _maxScale = 4;
+    const _minScale = 0.1;
+    // states
+    const [_nodes, setNodes] = useState(nodes);
+    const [_edges, setEdges] = useState(edges);
+    const [trigger, setTrigger] = useState(false);
+    // states -> Pan
+    const [pan, setPan] = useState({ x: 0, y: 0 });
+    const [panning, setPanning] = useState(false);
+    const [startPan, setStartPan] = useState({ x: 0, y: 0 });
+    // states -> Zoom
+    const [scale, setScale] = useState(1);
+    // states -> Drag
+    const [draggedNode, setDraggedNode] = useState(null);
+    // states -> Drawing
+    const [drawingEdge, setDrawingEdge] = useState(null);
+    const [mousePos, setMousePos] = useState(null);
+    // methods
+    const getPortCenter = (id, port) => {
+        const node = _arNodes.current[`${id}_${port}`];
+        const diagram = _arDiagram.current;
+        if (!node || !diagram)
+            return null;
+        const diagramRect = diagram.getBoundingClientRect();
+        const nodeRect = node.getBoundingClientRect();
+        return {
+            x: (nodeRect.left - diagramRect.left + nodeRect.width / 2 - pan.x) / scale,
+            y: (nodeRect.top - diagramRect.top + nodeRect.height / 2 - pan.y) / scale,
+        };
+    };
+    const getClosestPort = (position, threshold = 20) => {
+        for (const key in _arNodes.current) {
+            const el = _arNodes.current[key];
+            if (!el)
+                continue;
+            const [idStr, port] = key.split("_");
+            const id = parseInt(idStr, 10);
+            const rect = el.getBoundingClientRect();
+            const diagramRect = _arDiagram.current.getBoundingClientRect();
+            const portCenter = {
+                x: (rect.left - diagramRect.left + rect.width / 2 - pan.x) / scale,
+                y: (rect.top - diagramRect.top + rect.height / 2 - pan.y) / scale,
+            };
+            const distance = Math.hypot(position.x - portCenter.x, position.y - portCenter.y);
+            if (distance <= threshold)
+                return { id, port: port };
+        }
+        return null;
+    };
+    const renderEdges = useMemo(() => {
+        return _edges.map((edge, index) => {
+            const from = getPortCenter(edge.from.id, edge.from.port);
+            const to = getPortCenter(edge.to.id, edge.to.port);
+            if (!from || !to)
+                return null;
+            const dx = to.x - from.x;
+            const dy = to.y - from.y;
+            const distance = Math.hypot(dx, dy);
+            const offset = Math.min(40, distance * 0.25); // maksimum sapma sınırı
+            // S biçimli kontrol noktaları
+            const controlPoint1 = {
+                x: from.x,
+                y: from.y + (dy < 0 ? -offset : offset),
+            };
+            const controlPoint2 = {
+                x: to.x,
+                y: to.y + (dy < 0 ? offset : -offset),
+            };
+            const pathData = `M${from.x} ${from.y} C${controlPoint1.x} ${controlPoint1.y}, ${controlPoint2.x} ${controlPoint2.y}, ${to.x} ${to.y}`;
+            return (React.createElement("svg", { key: index, className: "edge" },
+                React.createElement("path", { ref: _path, d: pathData, fill: "none", stroke: "var(--purple-500)", strokeWidth: 2, strokeDasharray: 10, strokeDashoffset: 10, strokeLinecap: "round" },
+                    React.createElement("animate", { attributeName: "stroke-dashoffset", values: `${20 / scale};0`, dur: "1s", repeatCount: "indefinite" }))));
+        });
+    }, [_nodes, _edges, trigger]);
+    const onPanStart = (e) => {
+        // Node sürükleniyorsa pan başlatma.
+        if (draggedNode)
+            return;
+        setPanning(true);
+        setStartPan({ x: e.clientX - pan.x, y: e.clientY - pan.y });
+    };
+    const onPanMove = (e) => {
+        if (panning) {
+            setPan({ x: e.clientX - startPan.x, y: e.clientY - startPan.y });
+        }
+    };
+    const onPanEnd = () => setPanning(false);
+    // methods -> Zoom
+    const handleWheel = (event) => {
+        const direction = event.deltaY > 0 ? -1 : 1;
+        let newScale = scale + direction * _zoomIntensity;
+        newScale = Math.max(_minScale, Math.min(_maxScale, newScale));
+        // Mouse'un container içindeki konumunu al.
+        const rect = _content.current.getBoundingClientRect();
+        const mouseX = event.clientX - rect.left;
+        const mouseY = event.clientY - rect.top;
+        // İçerik düzleminde mouse'un bulunduğu noktayı bul.
+        const zoomPointX = (mouseX - pan.x) / scale;
+        const zoomPointY = (mouseY - pan.y) / scale;
+        // Yeni pan değerini hesapla ki zoomPoint sabit kalsın.
+        const newPanX = mouseX - zoomPointX * newScale;
+        const newPanY = mouseY - zoomPointY * newScale;
+        setScale(newScale);
+        setPan({ x: newPanX, y: newPanY });
+    };
+    const handleZoom = (process) => {
+        let newScale = 0;
+        if (process === "increment")
+            newScale = Math.max(_minScale, Math.min(_maxScale, scale + _zoomIntensity));
+        if (process === "decrement")
+            newScale = Math.max(_minScale, Math.min(_maxScale, scale - _zoomIntensity));
+        if (_content.current && _content.current) {
+            const containerRect = _content.current.getBoundingClientRect();
+            // Ortadaki noktayı bul (container açısından)
+            const centerX = containerRect.width / 2;
+            const centerY = containerRect.height / 2;
+            // İçerik düzleminde bu noktaya karşılık gelen nokta
+            const zoomPointX = (centerX - pan.x) / scale;
+            const zoomPointY = (centerY - pan.y) / scale;
+            // Yeni pan hesapla ki center aynı yerde kalsın
+            const newPanX = centerX - zoomPointX * newScale;
+            const newPanY = centerY - zoomPointY * newScale;
+            setPan({ x: newPanX, y: newPanY });
+            setScale(newScale);
+        }
+    };
+    // methods -> Node
+    const onNodeMouseDown = (event, id, node) => {
+        event.stopPropagation();
+        setDraggedNode(id);
+        _dragStartMousePosition.current = { x: event.clientX, y: event.clientY };
+        _dragStartNodePosition.current = { x: node.x, y: node.y };
+    };
+    const onMouseMove = (event) => {
+        if (drawingEdge) {
+            const rect = _arDiagram.current.getBoundingClientRect();
+            const x = (event.clientX - rect.left - pan.x) / scale;
+            const y = (event.clientY - rect.top - pan.y) / scale;
+            setMousePos({ x, y });
+        }
+        if (draggedNode) {
+            const deltaX = (event.clientX - _dragStartMousePosition.current.x) / scale;
+            const deltaY = (event.clientY - _dragStartMousePosition.current.y) / scale;
+            const newX = _dragStartNodePosition.current.x + deltaX;
+            const newY = _dragStartNodePosition.current.y + deltaY;
+            setNodes((prev) => prev.map((node) => (node.id === draggedNode ? { ...node, position: { x: newX, y: newY } } : node)));
+        }
+    };
+    const onMouseUp = () => {
+        if (drawingEdge && mousePos) {
+            const closest = getClosestPort(mousePos);
+            if (closest) {
+                // Yakın port varsa, oraya bağla
+                const newEdge = {
+                    id: crypto.randomUUID(), // _edges[_edges.length - 1]?.id + 1 || 1,
+                    from: { id: drawingEdge.id, port: drawingEdge.port },
+                    to: { id: closest.id, port: closest.port },
+                };
+                // Aynı edge daha önce eklenmiş mi kontrol et
+                const isDuplicate = _edges.some((edge) => {
+                    const samePair = (edge.from.id === newEdge.from.id && edge.to.id === newEdge.to.id) ||
+                        (edge.from.id === newEdge.to.id && edge.to.id === newEdge.from.id);
+                    return samePair;
+                });
+                if (!isDuplicate)
+                    setEdges((prev) => [...prev, newEdge]);
+            }
+            else {
+                // Yakın port yoksa yeni node oluştur
+                const newNodeId = crypto.randomUUID(); // _nodes[_nodes.length - 1]?.id + 1 || 1;
+                const newNode = {
+                    id: newNodeId,
+                    position: mousePos,
+                    data: React.createElement(React.Fragment, null),
+                };
+                const newPort = mousePos.y < drawingEdge.start.y ? "bottom" : "top";
+                const newEdge = {
+                    id: crypto.randomUUID(), // _edges[_edges.length - 1]?.id + 1 || 1,
+                    from: { id: drawingEdge.id, port: drawingEdge.port },
+                    to: { id: newNodeId, port: newPort },
+                };
+                setNodes((prev) => [...prev, newNode]);
+                setEdges((prev) => [...prev, newEdge]);
+            }
+            setDrawingEdge(null);
+            setMousePos(null);
+        }
+        setDraggedNode(null);
+        setTrigger((prev) => !prev);
+    };
+    // useEffects
+    useEffect(() => {
+        setEdges([...edges]);
+    }, []);
+    return (React.createElement("div", { ref: _arDiagram, className: "ar-diagram", onMouseDown: onPanStart, onMouseMove: (event) => {
+            onPanMove(event);
+            onMouseMove(event);
+        }, onMouseUp: () => {
+            onMouseUp();
+            onPanEnd();
+        } },
+        React.createElement("div", { ref: _content, className: "content", style: { backgroundPosition: `${pan.x}px ${pan.y}px` }, onWheel: handleWheel },
+            React.createElement("div", { className: "nodes-wrapper", style: {
+                    transform: `translate(${pan.x}px, ${pan.y}px) scale(${scale})`,
+                } },
+                React.createElement("div", { className: "edges" },
+                    renderEdges,
+                    drawingEdge && mousePos && (React.createElement("svg", { className: "edge-temp" },
+                        React.createElement("path", { ref: _path, d: `M${drawingEdge.start.x} ${drawingEdge.start.y} L${mousePos.x} ${mousePos.y}`, fill: "none", stroke: "var(--purple-500)", strokeWidth: 2, strokeDasharray: 10, strokeDashoffset: 10, strokeLinecap: "round" })))),
+                React.createElement("div", { className: "nodes" }, _nodes.map((node, index) => (React.createElement("div", { key: index, className: "node", style: {
+                        left: node.position.x,
+                        top: node.position.y,
+                    }, onMouseDown: (event) => onNodeMouseDown(event, node.id, node.position) },
+                    React.createElement("span", { ref: (el) => {
+                            if (!el)
+                                return;
+                            _arNodes.current[`${node.id}_top`] = el;
+                        }, className: "port top", onMouseDown: (event) => {
+                            event.stopPropagation();
+                            const port = "top";
+                            const from = getPortCenter(node.id, port);
+                            if (from) {
+                                setDrawingEdge({
+                                    id: node.id,
+                                    port,
+                                    start: from,
+                                });
+                            }
+                        } }),
+                    React.createElement("span", { ref: (el) => {
+                            if (!el)
+                                return;
+                            _arNodes.current[`${node.id}_left`] = el;
+                        }, className: "port left", onMouseDown: (event) => {
+                            event.stopPropagation();
+                            const from = getPortCenter(node.id, "left");
+                            if (from) {
+                                setDrawingEdge({ id: node.id, port: "left", start: from });
+                            }
+                        } }),
+                    React.createElement("span", null, node.data),
+                    React.createElement("span", { ref: (el) => {
+                            if (!el)
+                                return;
+                            _arNodes.current[`${node.id}_right`] = el;
+                        }, className: "port right", onMouseDown: (event) => {
+                            event.stopPropagation();
+                            const from = getPortCenter(node.id, "right");
+                            if (from) {
+                                setDrawingEdge({ id: node.id, port: "right", start: from });
+                            }
+                        } }),
+                    React.createElement("span", { ref: (el) => {
+                            if (!el)
+                                return;
+                            _arNodes.current[`${node.id}_bottom`] = el;
+                        }, className: "port bottom", onMouseDown: (event) => {
+                            event.stopPropagation();
+                            const from = getPortCenter(node.id, "bottom");
+                            if (from) {
+                                setDrawingEdge({
+                                    id: node.id,
+                                    port: "bottom",
+                                    start: from,
+                                });
+                            }
+                        } }))))))),
+        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("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("div", { style: { zIndex: 555 } }, JSON.stringify(drawingEdge))));
+};
+export default Diagram;

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

@@ -0,0 +1,6 @@
+interface IProps {
+    config?: {
+        margin: string | number;
+    };
+}
+export default IProps;

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

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

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

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

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

@@ -0,0 +1,5 @@
+import React from "react";
+import "../../../assets/css/components/data-display/divider/divider.css";
+const Divider = ({ config }) => React.createElement("hr", { className: "ar-divider", style: { margin: config?.margin } });
+Divider.displayName = "Divider";
+export default Divider;

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

@@ -0,0 +1,12 @@
+import React from "react";
+interface IProps<T> {
+    data: T[];
+    renderItem: (item: T, index: number) => React.JSX.Element;
+    columnKey?: string;
+    onChange?: (data: T[]) => void;
+    confing?: {
+        isMoveIcon?: boolean;
+        isInTable?: boolean;
+    };
+}
+export default IProps;

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

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

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

@@ -0,0 +1,5 @@
+import React from "react";
+import IProps from "./IProps";
+import "../../../assets/css/components/data-display/dnd/styles.css";
+declare const DnD: <T>({ data, renderItem, columnKey, onChange, confing }: IProps<T>) => React.JSX.Element;
+export default DnD;