ar-design 0.1.71 → 0.1.73

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

@@ -1,6 +1,6 @@
 .ar-modal-wrapper > .ar-modal > .content {
-  max-height: calc(100vh - (3.5rem + 7.5rem + 7.5rem));
+  max-height: calc(100vh - 180px - 3.5rem - 4rem - 2rem);
   padding: 2rem;
-  /* overflow-x: hidden;
-  overflow-y: auto; */
+  overflow-x: hidden;
+  overflow-y: auto;
 }

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

@@ -4,7 +4,7 @@
   justify-content: space-between;
   align-items: center;
   height: 3.5rem;
-  padding: 1rem 2rem;
+  padding: 0 2rem;
   border-bottom: solid 1px var(--gray-200);
 }
 .ar-modal-wrapper > .ar-modal > .header > .ar-typography-title {

package/dist/assets/css/components/feedback/modal/modal.css

@@ -9,33 +9,23 @@
 }
 
 /* #region Open or Close */
-.ar-modal-wrapper:is(.opened) {
+.ar-modal-wrapper.opened {
   visibility: visible;
   opacity: 1;
   transition: visibility 250ms, opacity 250ms ease-in-out;
   z-index: 100;
 }
-.ar-modal-wrapper:is(.opened) > .ar-modal {
-  top: 1.75rem;
-  transition: top 250ms ease-in-out;
-}
-
-.ar-modal-wrapper:is(.closed) {
+.ar-modal-wrapper.closed {
   visibility: hidden;
   opacity: 0;
   transition: visibility 250ms, opacity 250ms ease-in-out;
   z-index: 99;
 }
-.ar-modal-wrapper:is(.closed) > .ar-modal {
-  top: -100%;
-  transition: top 250ms ease-in-out;
-}
 /* #endregion */
 /* Open or Close */
 
 .ar-modal-wrapper > .ar-modal {
-  position: relative;
-  margin: 0 auto;
+  position: absolute;
   background-color: var(--white);
   border-radius: var(--border-radius-sm);
 }

package/dist/assets/css/components/feedback/{confirm/confirm.css → popover/styles.css}

@@ -1,8 +1,8 @@
-.ar-confirm-wrapper {
+.ar-popover-wrapper {
   position: relative;
 }
 
-.ar-confirm {
+.ar-popover {
   position: absolute;
   display: flex;
   flex-direction: column;
@@ -15,18 +15,18 @@
   z-index: 1051;
 }
 
-.ar-confirm > .content {
+.ar-popover > .content {
   max-height: 200px;
   overflow-y: auto;
   overflow-x: hidden;
 }
 
-.ar-confirm > .message {
+.ar-popover > .message {
   font-size: 0.85rem;
   text-wrap: wrap;
 }
 
-.ar-confirm > .footer {
+.ar-popover > .footer {
   display: flex;
   flex-direction: row;
   justify-content: flex-end;

package/dist/assets/css/components/form/switch/{switch.css → styles.css}

@@ -7,11 +7,11 @@
 }
 .ar-switch-wrapper > label {
   display: flex;
-  flex-direction: row-reverse;
-  justify-content: space-between;
+  flex-direction: row;
+  /* justify-content: space-between; */
   align-items: center;
   gap: 0 0.5rem;
-  width: 100%;
+  /* width: 100%; */
   user-select: none;
 }
 .ar-switch-wrapper > label > :is(input[type="checkbox"]) {
@@ -36,7 +36,7 @@
   background-color: var(--white);
   width: 0.75rem;
   height: 0.75rem;
-  transition: left 150ms, width 150ms 350ms, height 150ms 350ms, box-shadow 150ms 500ms ease-in-out;
+  transition: left 150ms, width 150ms 150ms, height 150ms 150ms, box-shadow 150ms 150ms ease-in-out;
 }
 .ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch > .handle {
   left: calc(2.25rem - 0.9rem);

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

@@ -1,6 +1,6 @@
 import React from "react";
 import IProps from "./IProps";
-import "../../../assets/css/components/data-display/table/table.css";
+import "../../../assets/css/components/data-display/table/styles.css";
 declare const Table: {
     <T extends object>({ children, data, columns, selections, pagination, config }: IProps<T>): React.JSX.Element;
     Action: React.FC<{

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

@@ -1,6 +1,6 @@
 "use client";
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import "../../../assets/css/components/data-display/table/table.css";
+import "../../../assets/css/components/data-display/table/styles.css";
 import Checkbox from "../../form/checkbox";
 import Actions from "./Actions";
 import Input from "../../form/input";

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

@@ -11,7 +11,7 @@ interface IProps extends IChildren, ISizes {
     /**
      * ...
      */
-    title: string;
+    title?: string;
     /**
      * ...
      */

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

@@ -13,26 +13,47 @@ const Modal = ({ children, open, title, size = "normal", footer }) => {
     else
         _modalWrapperClassName.push("closed");
     // methods
-    // const handleClickOutSide = (event: MouseEvent) => {
-    //   const target = event.target as HTMLElement;
-    //   if (_arModal.current && !_arModal.current.contains(target)) open.set(false);
-    // };
     const handleKeys = (event) => {
         const key = event.key;
         if (key === "Escape")
             open.set(false);
     };
+    const handlePosition = () => {
+        if (_arModal.current) {
+            const arModal = _arModal.current;
+            const content = arModal.querySelector("div.content");
+            const rect = arModal.getBoundingClientRect();
+            const screenCenterX = window.innerWidth / 2;
+            const screenCenterY = window.innerHeight / 2;
+            const sx = window.scrollX || document.documentElement.scrollLeft;
+            const sy = window.scrollY || document.documentElement.scrollTop;
+            if (window.innerHeight > 1024) {
+                arModal.style.top = "100px";
+                content.removeAttribute("style");
+            }
+            else if (window.innerHeight > 575 && window.innerHeight < 1024) {
+                arModal.style.top = `${screenCenterY - rect.height / 2 + sy}px`;
+                content.removeAttribute("style");
+            }
+            else if (window.innerHeight < 575) {
+                arModal.style.top = "15px";
+                content.style.maxHeight = `calc(100vh - ${footer ? "2.5px" : "-30.5px"} - 3.5rem - 4rem - ${footer ? "2rem" : "0rem"})`;
+            }
+            arModal.style.left = `${screenCenterX - rect.width / 2 + sx}px`;
+        }
+    };
     // useEffects
     useEffect(() => {
+        handlePosition();
         if (open.get) {
             document.body.style.overflow = "hidden";
-            // document.addEventListener("click", handleClickOutSide);
             document.addEventListener("keydown", handleKeys);
+            window.addEventListener("resize", handlePosition);
         }
         return () => {
             document.body.style.removeProperty("overflow");
-            // document.removeEventListener("click", handleClickOutSide);
             document.removeEventListener("keydown", handleKeys);
+            window.removeEventListener("resize", handlePosition);
         };
     }, [open.get]);
     return (React.createElement("div", { className: _modalWrapperClassName.map((c) => c).join(" ") },
@@ -43,9 +64,9 @@ const Modal = ({ children, open, title, size = "normal", footer }) => {
                     open.set(false);
             } }),
         React.createElement("div", { ref: _arModal, className: _modalClassName.map((c) => c).join(" "), role: "dialog" },
-            React.createElement("div", { className: "header" },
+            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: "close", onClick: () => open.set((prev) => !prev) }))),
             React.createElement("div", { className: "content" }, children),
             footer && React.createElement("div", { className: "footer" }, footer))));
 };

package/dist/components/feedback/{confirm → popover}/IProps.d.ts

@@ -4,5 +4,6 @@ interface IProps extends IChildren {
     message?: string;
     content?: React.JSX.Element;
     onConfirm?: (confirm: boolean) => void;
+    windowBlur?: boolean;
 }
 export default IProps;

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

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

package/dist/components/feedback/{confirm → popover}/index.js

@@ -1,21 +1,21 @@
 "use client";
 import React, { useEffect, useRef, useState } from "react";
-import "../../../assets/css/components/feedback/confirm/confirm.css";
+import "../../../assets/css/components/feedback/popover/styles.css";
 import Button from "../../form/button";
 import Typography from "../../data-display/typography";
 import ReactDOM from "react-dom";
 const { Title } = Typography;
-const Confirm = ({ children, title, message, content, onConfirm }) => {
+const Popover = ({ children, title, message, content, onConfirm, windowBlur }) => {
     // refs
-    const _arConfirmWrapper = useRef(null);
-    const _arConfirm = useRef(null);
-    const _arConfirmElement = useRef(null);
+    const _arPopoverWrapper = useRef(null);
+    const _arPopover = useRef(null);
+    const _arPopoverElement = useRef(null);
     // states
     const [open, setOpen] = useState(false);
     // methods
     const handleClickOutSide = (event) => {
         const target = event.target;
-        if (_arConfirm.current && !_arConfirm.current.contains(target))
+        if (_arPopover.current && !_arPopover.current.contains(target))
             setOpen(false);
     };
     const handleKeys = (event) => {
@@ -24,17 +24,17 @@ const Confirm = ({ children, title, message, content, onConfirm }) => {
             setOpen(false);
     };
     const handlePosition = () => {
-        if (_arConfirmWrapper.current && _arConfirm.current && _arConfirmElement.current) {
-            const confirmRect = _arConfirm.current.getBoundingClientRect();
-            const elementRect = _arConfirmElement.current.getBoundingClientRect();
+        if (_arPopoverWrapper.current && _arPopover.current && _arPopoverElement.current) {
+            const popoverRect = _arPopover.current.getBoundingClientRect();
+            const elementRect = _arPopoverElement.current.getBoundingClientRect();
             if (elementRect) {
                 const screenCenter = window.innerHeight / 2;
                 const sx = window.scrollX || document.documentElement.scrollLeft;
                 const sy = window.scrollY || document.documentElement.scrollTop;
-                _arConfirm.current.style.top = `${(elementRect.top > screenCenter
-                    ? elementRect.top - confirmRect.height + elementRect.height
+                _arPopover.current.style.top = `${(elementRect.top > screenCenter
+                    ? elementRect.top - popoverRect.height + elementRect.height
                     : elementRect.top) + sy}px`;
-                _arConfirm.current.style.left = `${elementRect.left - confirmRect.width + sx - 10}px`;
+                _arPopover.current.style.left = `${elementRect.left - popoverRect.width + sx - 10}px`;
             }
         }
     };
@@ -42,19 +42,19 @@ const Confirm = ({ children, title, message, content, onConfirm }) => {
     useEffect(() => {
         if (open) {
             setTimeout(() => handlePosition(), 0);
-            window.addEventListener("blur", () => setOpen(false));
+            windowBlur && window.addEventListener("blur", () => setOpen(false));
             document.addEventListener("click", handleClickOutSide);
             document.addEventListener("keydown", handleKeys);
         }
         return () => {
-            window.removeEventListener("blur", () => setOpen(false));
+            windowBlur && window.removeEventListener("blur", () => setOpen(false));
             document.removeEventListener("click", handleClickOutSide);
             document.removeEventListener("keydown", handleKeys);
         };
     }, [open]);
-    return (React.createElement("div", { ref: _arConfirmWrapper, className: "ar-confirm-wrapper", role: "dialog" },
+    return (React.createElement("div", { ref: _arPopoverWrapper, className: "ar-popover-wrapper", role: "dialog" },
         open &&
-            ReactDOM.createPortal(React.createElement("div", { ref: _arConfirm, className: "ar-confirm" },
+            ReactDOM.createPortal(React.createElement("div", { ref: _arPopover, className: "ar-popover" },
                 title && React.createElement(Title, { Level: "h4" }, title),
                 message && React.createElement("p", { className: "message" }, message),
                 content && React.createElement("div", { className: "content" }, content),
@@ -67,6 +67,6 @@ const Confirm = ({ children, title, message, content, onConfirm }) => {
                             onConfirm(false);
                             setOpen(false);
                         } }, "Hay\u0131r")))), document.body),
-        React.createElement("div", { ref: _arConfirmElement, onClick: () => setOpen((prev) => !prev) }, children)));
+        React.createElement("div", { ref: _arPopoverElement, onClick: () => setOpen((prev) => !prev) }, children)));
 };
-export default Confirm;
+export default Popover;

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

@@ -9,5 +9,6 @@ interface IProps extends Omit<IGlobalProps, "children" | "disabled">, ISizes, Om
         before?: string | number;
         after?: string | number;
     };
+    upperCase?: boolean;
 }
 export default IProps;

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

@@ -3,7 +3,7 @@ import React, { forwardRef, useEffect, useState } from "react";
 import "../../../assets/css/components/form/input/input.css";
 import Button from "../button";
 import Utils from "../../../libs/infrastructure/shared/Utils";
-const Input = forwardRef(({ variant = "outlined", status = "light", size = "normal", icon, border = { radius: "sm" }, button, addon, validation, ...attributes }, ref) => {
+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
@@ -22,6 +22,24 @@ const Input = forwardRef(({ variant = "outlined", status = "light", size = "norm
         _addonBeforeClassName.push(`border-radius-${border.radius}`);
         _addonAfterClassName.push(`border-radius-${border.radius}`);
     }
+    // methods
+    // Özel büyük harfe dönüştürme işlevi.
+    const convertToUpperCase = (str) => {
+        return str
+            .replace(/ş/g, "S")
+            .replace(/Ş/g, "S")
+            .replace(/ı/g, "I")
+            .replace(/I/g, "I")
+            .replace(/ç/g, "C")
+            .replace(/Ç/g, "C")
+            .replace(/ğ/g, "G")
+            .replace(/Ğ/g, "G")
+            .replace(/ö/g, "O")
+            .replace(/Ö/g, "O")
+            .replace(/ü/g, "U")
+            .replace(/Ü/g, "U")
+            .replace(/[a-z]/g, (match) => match.toUpperCase());
+    };
     // useEffects
     useEffect(() => {
         if (attributes.value !== undefined)
@@ -39,13 +57,15 @@ const Input = forwardRef(({ variant = "outlined", status = "light", size = "norm
                     if (attributes.disabled)
                         return;
                     (() => {
+                        if (upperCase)
+                            event.target.value = convertToUpperCase(event.target.value);
                         setValue(event.target.value);
                     })();
                     (() => {
                         if (attributes.onChange) {
                             // Mevcut değeri alın
                             const _target = event.target;
-                            const currentValue = _target.value;
+                            const currentValue = upperCase ? convertToUpperCase(_target.value) : _target.value;
                             // Yeni değeri oluşturun ve onChange fonksiyonunu çağırın
                             const newValue = `${addon?.before ?? ""}${currentValue}${addon?.after ?? ""}`;
                             attributes.onChange({

package/dist/components/form/switch/index.d.ts

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

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

@@ -1,6 +1,6 @@
 "use client";
 import React, { useRef } from "react";
-import "../../../assets/css/components/form/switch/switch.css";
+import "../../../assets/css/components/form/switch/styles.css";
 const Switch = ({ label, status = "primary", border = { radius: "pill" }, ...attributes }) => {
     // refs
     let _switch = useRef(null);
@@ -17,6 +17,7 @@ const Switch = ({ label, status = "primary", border = { radius: "pill" }, ...att
     return (React.createElement("div", { className: _wrapperClassName },
         React.createElement("label", null,
             React.createElement("input", { type: attributes.type || "checkbox", ...attributes, size: 0, onChange: (event) => {
+                    event.stopPropagation();
                     (() => {
                         const _current = _switch.current;
                         if (!_current)

package/dist/index.d.ts

@@ -20,12 +20,12 @@ 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 Confirm from "./components/feedback/confirm";
 import Modal from "./components/feedback/modal";
+import Popover from "./components/feedback/popover";
 import Progress from "./components/feedback/progress";
 import Breadcrumb from "./components/navigation/breadcrumb";
 import Menu from "./components/navigation/menu";
 import Steps from "./components/navigation/steps";
 import Grid from "./components/layout/grid-system";
 import Layout from "./components/layout";
-export { Button, ButtonAction, ButtonGroup, Input, InputTag, DatePicker, Select, Switch, Upload, Checkbox, Radio, Card, Chip, Divider, DnD, Paper, SyntaxHighlighter, Table, Tabs, Typography, Alert, Confirm, Modal, Progress, Breadcrumb, Menu, Steps, Grid, Layout, };
+export { Button, ButtonAction, ButtonGroup, Input, InputTag, DatePicker, Select, Switch, Upload, Checkbox, Radio, Card, Chip, Divider, DnD, Paper, SyntaxHighlighter, Table, Tabs, Typography, Alert, Modal, Popover, Progress, Breadcrumb, Menu, Steps, Grid, Layout, };

package/dist/index.js

@@ -23,8 +23,8 @@ import Tabs from "./components/data-display/tabs";
 import Typography from "./components/data-display/typography";
 // Feedback
 import Alert from "./components/feedback/alert";
-import Confirm from "./components/feedback/confirm";
 import Modal from "./components/feedback/modal";
+import Popover from "./components/feedback/popover";
 import Progress from "./components/feedback/progress";
 // Navigation
 import Breadcrumb from "./components/navigation/breadcrumb";
@@ -39,7 +39,7 @@ Button, ButtonAction, ButtonGroup, Input, InputTag, DatePicker, Select, Switch,
 // Data Display
 Card, Chip, Divider, DnD, Paper, SyntaxHighlighter, Table, Tabs, Typography, 
 // Feedback
-Alert, Confirm, Modal, Progress, 
+Alert, Modal, Popover, Progress, 
 // Navigation
 Breadcrumb, Menu, Steps, 
 // Layout

package/package.json

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

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

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