ar-design 0.2.74 → 0.2.76

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

@@ -1,6 +1,6 @@
 .ar-card {
   background-color: var(--white);
-  border: solid 1px var(--gray-200);
+  border: solid 1px var(--light);
   border-radius: var(--border-radius-lg);
   overflow: hidden;
 }
@@ -9,10 +9,12 @@
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  background-color: var(--gray-100);
+  /* background-color: var(--gray-100); */
   padding: 0 1rem;
   height: 3rem;
-  border-bottom: solid 1px var(--gray-200);
+  border-bottom: solid 1px var(--light);
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
 }
 .ar-card > .title > .ar-typography-title {
   margin-bottom: 0 !important;

package/dist/assets/css/components/data-display/table/filter-popup.css

@@ -7,5 +7,5 @@
   border-radius: var(--border-radius-sm);
   box-shadow: 0px 10px 15px -5px rgba(var(--black-rgb), 0.1);
   transition: top 350ms, left 1s cubic-bezier(0.68, -0.6, 0.32, 1.6);
-  z-index: 5;
+  z-index: 1052;
 }

package/dist/assets/css/components/feedback/drawer/content.css

@@ -0,0 +1,5 @@
+.ar-drawer-wrapper > .ar-drawer > .content {
+  padding: 2rem;
+  overflow-x: hidden;
+  overflow-y: auto;
+}

package/dist/assets/css/components/feedback/drawer/header.css

@@ -0,0 +1,56 @@
+.ar-drawer-wrapper > .ar-drawer > .header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  height: 3.5rem;
+  padding: 0 2rem;
+  border-bottom: solid 1px var(--gray-200);
+}
+.ar-drawer-wrapper > .ar-drawer > .header > .ar-typography-title {
+  width: calc(100% - 2.75rem);
+  text-wrap: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.ar-drawer-wrapper > .ar-drawer > .header > .close {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--white);
+  min-width: 2rem;
+  min-height: 2rem;
+  border: solid 1px var(--gray-300);
+  border-radius: var(--border-radius-sm);
+  cursor: pointer;
+  user-select: none;
+  transition: background 250ms, border 250ms ease-in-out;
+}
+.ar-drawer-wrapper > .ar-drawer > .header > .close::before,
+.ar-drawer-wrapper > .ar-drawer > .header > .close::after {
+  position: absolute;
+  content: "";
+  width: 2px;
+  height: 15px;
+  background-color: var(--gray-300);
+  transform-origin: center;
+  transform: rotate(-45deg);
+  transition: transform 250ms ease-in-out;
+}
+.ar-drawer-wrapper > .ar-drawer > .header > .close::after {
+  transform: rotate(45deg);
+}
+.ar-drawer-wrapper > .ar-drawer > .header > .close:hover {
+  background-color: rgba(var(--danger-rgb), 0.1);
+  border: solid 1px var(--danger);
+  color: rgba(var(--danger-rgb), 0.75);
+}
+.ar-drawer-wrapper > .ar-drawer > .header > .close:hover::before,
+.ar-drawer-wrapper > .ar-drawer > .header > .close:hover::after {
+  background-color: var(--danger);
+  transform: rotate(45deg);
+}
+.ar-drawer-wrapper > .ar-drawer > .header > .close:hover::after {
+  transform: rotate(-45deg);
+}

package/dist/assets/css/components/feedback/drawer/styles.css

@@ -0,0 +1,85 @@
+.ar-drawer-wrapper {
+  position: fixed;
+  inset: 0;
+  z-index: 1050;
+}
+.ar-drawer-wrapper > .ar-drawer-bg {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(var(--black-rgb), 0.5);
+}
+
+/* #region Open or Close */
+.ar-drawer-wrapper.opened {
+  visibility: visible;
+  opacity: 1;
+  z-index: 100;
+}
+.ar-drawer-wrapper.closed {
+  visibility: hidden;
+  opacity: 0;
+  z-index: 99;
+}
+/* #endregion */
+/* Open or Close */
+
+.ar-drawer-wrapper > .ar-drawer {
+  position: absolute;
+  right: -75%;
+  background-color: var(--white);
+  width: 75%;
+  height: 100%;
+  border-top-left-radius: var(--border-radius-sm);
+  border-bottom-left-radius: var(--border-radius-sm);
+}
+.ar-drawer-wrapper.opened > .ar-drawer {
+  animation: open 1s ease 0s 1 normal forwards;
+}
+
+.ar-drawer-wrapper > .ar-drawer > .tabs {
+  position: absolute;
+  right: 100%;
+  top: 100px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.5rem;
+  user-select: none;
+}
+.ar-drawer-wrapper > .ar-drawer > .tabs > .item {
+  position: relative;
+  background-color: var(--gray-300);
+  width: fit-content;
+  padding: 0.5rem 1rem;
+  border-top-left-radius: var(--border-radius-sm);
+  border-bottom-left-radius: var(--border-radius-sm);
+  cursor: pointer;
+}
+.ar-drawer-wrapper > .ar-drawer > .tabs > .item.selection {
+  background-color: var(--white);
+  border-right: solid 2.5px var(--primary);
+}
+.ar-drawer-wrapper > .ar-drawer > .tabs > .item.selection::before {
+  position: absolute;
+  top: 50%;
+  left: 100%;
+  transform: translateY(-50%);
+  content: "";
+  border: solid 10px transparent;
+  border-left-color: var(--primary);
+}
+.ar-drawer-wrapper > .ar-drawer > .tabs > .item > span {
+  text-wrap: nowrap;
+}
+
+@keyframes open {
+  0% {
+    right: -75%;
+  }
+  100% {
+    right: 0px;
+  }
+}
+
+@import url("./header.css");
+@import url("./content.css");

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

@@ -0,0 +1,24 @@
+.ar-button-action {
+  position: relative;
+}
+
+.ar-action-buttons {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--white);
+  padding: 0.25rem;
+  border: solid 1px var(--gray-200);
+  border-radius: var(--border-radius-sm);
+  box-shadow: 0 0 15px -2.5px rgba(var(--black-rgb), 0.1);
+  z-index: 1051;
+  transition: visibility 250ms, opacity 250ms;
+}
+.ar-action-buttons::after {
+  position: absolute;
+  top: 0.5rem;
+  left: 100%;
+  content: "";
+  border: solid 10px transparent;
+  border-left-color: var(--gray-200);
+}

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

@@ -6,7 +6,7 @@ const Pie = ({ title, data, size }) => {
     // const _randomIndex = useRef<number[]>([]);
     // state
     const [conic, setConic] = useState([]);
-    // variable/s
+    // variables
     const conicColors = [
         ["#fff35e", "#000"], // Sarı
         ["#ffc752", "#000"], // Açık Sarı

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

@@ -1,5 +1,5 @@
-import { IChildren } from "../../../libs/types/IGlobalProps";
-interface IProps extends IChildren {
+import { IChildren, IStatus } from "../../../libs/types/IGlobalProps";
+interface IProps extends IChildren, IStatus {
     /**
      * Kart başlığı.
      *

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

@@ -1,10 +1,14 @@
 import React from "react";
 import Typography from "../typography";
 import "../../../assets/css/components/data-display/card/styles.css";
+import Utils from "../../../libs/infrastructure/shared/Utils";
 const { Title } = Typography;
-const Card = ({ children, title = "", actions }) => {
+const Card = ({ children, title = "", actions, status }) => {
+    // variables
+    const _titleClassName = ["title"];
+    _titleClassName.push(...Utils.GetClassName(undefined, status, undefined, undefined, undefined, undefined));
     return (React.createElement("div", { className: "ar-card" },
-        title && (React.createElement("div", { className: "title" },
+        title && (React.createElement("div", { className: _titleClassName.map((c) => c).join(" ") },
             React.createElement(Title, { Level: "h4" }, title),
             React.createElement("div", null, actions))),
         React.createElement("div", { className: "content" }, children)));

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

@@ -0,0 +1,14 @@
+import { TabProps } from "../../../libs/types";
+import { IChildren } from "../../../libs/types/IGlobalProps";
+interface IProps extends IChildren {
+    title?: string;
+    tabs: TabProps[];
+    activeTab?: number;
+    open: {
+        get: boolean;
+        set: React.Dispatch<React.SetStateAction<boolean>>;
+    };
+    onChange?: (currentTab: number) => void;
+    onClose?: (closeTab: number) => void;
+}
+export default IProps;

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

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

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

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

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

@@ -0,0 +1,68 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import Typography from "../../data-display/typography";
+import ReactDOM from "react-dom";
+import "../../../assets/css/components/feedback/drawer/styles.css";
+const { Title } = Typography;
+const Drawer = ({ title, tabs = [], activeTab, open, onChange }) => {
+    // refs
+    const _arDrawer = useRef(null);
+    const _drawerWrapperClassName = ["ar-drawer-wrapper"];
+    const _drawerClassName = ["ar-drawer"];
+    if (Object.keys(open).length > 0 && open.get)
+        _drawerWrapperClassName.push("opened");
+    else
+        _drawerWrapperClassName.push("closed");
+    // states
+    const [currentTab, setCurrentTab] = useState(0);
+    // useEffects
+    // methods
+    const handleKeys = (event) => {
+        const key = event.key;
+        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;
+        if (key === "Escape" && isArCalendar && isArSelectOptions && isArPopover) {
+            event.stopPropagation();
+            open.set(false);
+        }
+    };
+    // useEffects
+    useEffect(() => {
+        if (open.get) {
+            document.body.style.overflow = "hidden";
+            document.addEventListener("keydown", handleKeys);
+        }
+        return () => {
+            document.body.style.removeProperty("overflow");
+            document.removeEventListener("keydown", handleKeys);
+        };
+    }, [open.get]);
+    useEffect(() => setCurrentTab(activeTab ?? 0), [activeTab]);
+    return ReactDOM.createPortal(React.createElement("div", { className: _drawerWrapperClassName.map((c) => c).join(" ") },
+        React.createElement("div", { className: "ar-drawer-bg", onMouseDown: (event) => {
+                event.stopPropagation();
+                const target = event.target;
+                if (_arDrawer.current && !_arDrawer.current.contains(target))
+                    open.set(false);
+            } }),
+        React.createElement("div", { ref: _arDrawer, 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: () => open.set((prev) => !prev) }))),
+            React.createElement("div", { className: "tabs" }, tabs.length > 0 &&
+                tabs.map((tab, index) => {
+                    let className = ["item"];
+                    if (currentTab === index)
+                        className.push("selection");
+                    return (React.createElement("div", { key: tab.title ?? index, className: className.map((c) => c).join(" "), onClick: () => {
+                            setCurrentTab(index);
+                            onChange && onChange(index);
+                            const key = `${window.location.pathname}::${name}`;
+                            sessionStorage.setItem(key, String(index));
+                        } },
+                        React.createElement("span", null, tab.title)));
+                })),
+            React.createElement("div", { className: "content" }, tabs.map((tab, index) => currentTab === index && tab.content)))), document.body);
+};
+export default Drawer;

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

@@ -2,7 +2,7 @@ import React from "react";
 import Utils from "../../../libs/infrastructure/shared/Utils";
 import "../../../assets/css/components/feedback/progress/progress.css";
 const Progress = ({ value, reverse, isVisibleValue = false }) => {
-    // variable/s
+    // variables
     let _status = undefined;
     const _arProgressClassName = [];
     if (value >= 0 && value <= 25)

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

@@ -1,5 +1,5 @@
 import React from "react";
-import "../../../assets/css/components/form/button-action/button-action.css";
+import "../../../assets/css/components/form/button-action/styles.css";
 import IProps from "./IProps";
 declare const ButtonAction: React.FC<IProps>;
 export default ButtonAction;

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

@@ -1,19 +1,19 @@
 "use client";
 import React, { useEffect, useRef, useState } from "react";
-import "../../../assets/css/components/form/button-action/button-action.css";
+import "../../../assets/css/components/form/button-action/styles.css";
 import Button from "../button";
+import ReactDOM from "react-dom";
 const ButtonAction = ({ buttons }) => {
     // refs
-    const _arButtonAction = useRef(null);
+    const _wrapper = useRef(null);
+    const _button = useRef(null);
     const _list = useRef(null);
     // states
     const [open, setOpen] = useState(false);
-    const [coordinateX, setCoordinatX] = useState(0);
-    const [coordinateY, setCoordinatY] = useState(0);
     // methods
     const handleClickOutSide = (event) => {
         const target = event.target;
-        if (_arButtonAction.current && !_arButtonAction.current.contains(target))
+        if (_wrapper.current && !_wrapper.current.contains(target))
             setOpen(false);
     };
     const handleKeys = (event) => {
@@ -21,31 +21,48 @@ const ButtonAction = ({ buttons }) => {
         if (key === "Escape")
             setOpen(false);
     };
+    const handlePosition = () => {
+        if (_wrapper.current && _button.current && _list.current) {
+            const elementRect = _button.current.getBoundingClientRect();
+            const popoverRect = _list.current.getBoundingClientRect();
+            if (elementRect) {
+                const screenCenterX = window.innerWidth / 2;
+                const screenCenterY = window.innerHeight / 2;
+                const sx = window.scrollX || document.documentElement.scrollLeft;
+                const sy = window.scrollY || document.documentElement.scrollTop;
+                _list.current.style.visibility = "visible";
+                _list.current.style.opacity = "1";
+                _list.current.style.top = `${(elementRect.top > screenCenterY
+                    ? elementRect.top - popoverRect.height + elementRect.height
+                    : elementRect.top) + sy}px`;
+                _list.current.style.left = `${(elementRect.left > screenCenterX
+                    ? elementRect.right - (elementRect.width + 7.5) - popoverRect.width
+                    : elementRect.left + elementRect.width + 7.5) + sx}px`;
+            }
+        }
+    };
     const handleResizeEvent = () => setOpen(false);
     // useEffects
     useEffect(() => {
         if (open) {
+            setTimeout(() => handlePosition(), 0);
+            window.addEventListener("blur", () => setOpen(false));
+            window.addEventListener("resize", handleResizeEvent);
             document.addEventListener("click", handleClickOutSide);
             document.addEventListener("keydown", handleKeys);
-            window.addEventListener("resize", handleResizeEvent);
         }
         return () => {
+            window.removeEventListener("blur", () => setOpen(false));
+            window.removeEventListener("resize", handleResizeEvent);
             document.removeEventListener("click", handleClickOutSide);
             document.removeEventListener("keydown", handleKeys);
-            window.removeEventListener("resize", handleResizeEvent);
         };
     }, [open]);
-    return (React.createElement("div", { ref: _arButtonAction, className: "ar-button-action" },
-        React.createElement(Button, { variant: "borderless", status: "information", border: { radius: "none" }, icon: { element: React.createElement("span", { className: "dotted" }) }, onClick: () => {
-                if (!_arButtonAction.current || !_list.current)
-                    return;
-                const wrapper = _arButtonAction.current.getBoundingClientRect();
-                const confirm = _list.current.getBoundingClientRect();
-                setCoordinatX(wrapper.left - confirm.width - 60);
-                setCoordinatY(wrapper.top);
-                setOpen((prev) => !prev);
-            } }),
-        React.createElement("span", { ref: _list, className: `list ${open ? "opened" : "closed"}`, style: { top: coordinateY, left: coordinateX } }, buttons.map((button) => (React.createElement(Button, { variant: "borderless", status: "dark", onClick: button.onClick }, button.text))))));
+    return (React.createElement("div", { ref: _wrapper, className: "ar-button-action" },
+        React.createElement("span", { ref: _button },
+            React.createElement(Button, { variant: "borderless", status: "information", border: { radius: "none" }, icon: { element: React.createElement("span", { className: "dotted" }) }, onClick: () => setOpen((prev) => !prev) })),
+        open &&
+            ReactDOM.createPortal(React.createElement("span", { ref: _list, className: "ar-action-buttons" }, buttons.map((button) => (React.createElement(Button, { variant: "borderless", status: "dark", onClick: button.onClick }, button.text)))), document.body)));
 };
 ButtonAction.displayName = "ButtonAction";
 export default ButtonAction;

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

@@ -6,7 +6,7 @@ import Utils from "../../../libs/infrastructure/shared/Utils";
 const Input = forwardRef(({ variant = "outlined", status = "light", size = "normal", icon, border = { radius: "sm" }, button, addon, upperCase, validation, ...attributes }, ref) => {
     // states
     const [value, setValue] = useState("");
-    // variable/s
+    // variables
     const _wrapperClassName = ["ar-input-wrapper"];
     const _addonBeforeClassName = ["addon-before"];
     const _addonAfterClassName = ["addon-after"];

package/dist/index.d.ts

@@ -21,6 +21,7 @@ import Table from "./components/data-display/table";
 import Tabs from "./components/data-display/tabs";
 import Typography from "./components/data-display/typography";
 import Alert from "./components/feedback/alert";
+import Drawer from "./components/feedback/drawer";
 import Modal from "./components/feedback/modal";
 import Popover from "./components/feedback/popover";
 import Progress from "./components/feedback/progress";
@@ -30,4 +31,4 @@ import Menu from "./components/navigation/menu";
 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, InputTag, Radio, Select, Switch, TextEditor, Upload, Card, Chip, Divider, DnD, Paper, SyntaxHighlighter, Table, Tabs, Typography, Alert, Modal, Popover, Progress, Tooltip, Breadcrumb, Menu, Steps, Grid, Layout, };
+export { Button, ButtonAction, ButtonGroup, Checkbox, DatePicker, Input, InputTag, Radio, Select, Switch, TextEditor, Upload, Card, Chip, Divider, DnD, Paper, SyntaxHighlighter, Table, Tabs, Typography, Alert, Drawer, Modal, Popover, Progress, Tooltip, Breadcrumb, Menu, Steps, Grid, Layout, };

package/dist/index.js

@@ -24,6 +24,7 @@ import Tabs from "./components/data-display/tabs";
 import Typography from "./components/data-display/typography";
 // Feedback
 import Alert from "./components/feedback/alert";
+import Drawer from "./components/feedback/drawer";
 import Modal from "./components/feedback/modal";
 import Popover from "./components/feedback/popover";
 import Progress from "./components/feedback/progress";
@@ -41,7 +42,7 @@ Button, ButtonAction, ButtonGroup, Checkbox, DatePicker, Input, InputTag, Radio,
 // Data Display
 Card, Chip, Divider, DnD, Paper, SyntaxHighlighter, Table, Tabs, Typography, 
 // Feedback
-Alert, Modal, Popover, Progress, Tooltip, 
+Alert, Drawer, Modal, Popover, Progress, Tooltip, 
 // Navigation
 Breadcrumb, Menu, Steps, 
 // Layout

package/package.json

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

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

@@ -1,39 +0,0 @@
-.ar-button-action {
-  position: relative;
-}
-.ar-button-action > .list {
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  background-color: rgba(var(--white-rgb), 0.75);
-  backdrop-filter: blur(10px);
-  border: solid 1px var(--gray-200);
-  border-radius: var(--border-radius-sm);
-  box-shadow: 0 0 15px -2.5px rgba(var(--black-rgb), 0.1);
-}
-.ar-button-action > .list::after {
-  position: absolute;
-  top: 0.5rem;
-  left: 100%;
-  content: "";
-  border: solid 10px transparent;
-  border-left-color: var(--gray-200);
-}
-
-/* #region Open or Close */
-.ar-button-action > .list:is(.opened) {
-  visibility: visible;
-  opacity: 1;
-  transform: scale(1);
-  transition: visibility 250ms, opacity 250ms, transform 250ms ease-in-out;
-  z-index: 100;
-}
-.ar-button-action > .list:is(.closed) {
-  visibility: hidden;
-  opacity: 0;
-  transform: scale(0.8);
-  transition: visibility 250ms, opacity 250ms, transform 250ms ease-in-out;
-  z-index: 99;
-}
-/* #endregion */
-/* Open or Close */