ar-design 0.2.75 → 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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.2.75",
+  "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 */