ar-design 0.2.87 → 0.2.89

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

@@ -23,12 +23,12 @@
   flex-direction: column;
   row-gap: 0.5rem;
 }
-.ar-table > .header > .title > h3 {
+.ar-table > .header > .title > h4 {
   color: var(--gray-700);
-  /* -webkit-text-stroke: 0.25px var(--gray-700); */
 }
 .ar-table > .header > .title > h5 {
-  color: var(--gray-600);
+  color: var(--gray-400);
+  font-weight: normal !important;
 }
 .ar-table > .header > .actions {
   display: flex;

package/dist/assets/css/components/data-display/tabs/tabs.css

@@ -15,7 +15,7 @@
   gap: 1rem;
   height: 100%;
   padding: 0 0.75rem;
-  font-weight: 900;
+  color: var(--gray-700);
   cursor: pointer;
 }
 .ar-tabs > .tabs > .item > .close-button {

package/dist/assets/css/components/form/input/core/addon.css

@@ -4,7 +4,7 @@
   padding: 0 0.75rem;
   color: var(--gray-600);
   font-size: 0.9rem;
-  font-weight: 600;
+  font-weight: 400;
   line-height: var(--input-height);
   user-select: none;
   cursor: no-drop;

package/dist/assets/css/components/form/input/input.css

@@ -42,7 +42,7 @@
 .ar-input-wrapper > .ar-input > .validation {
   color: var(--danger);
   font-size: 0.8rem;
-  font-weight: 600;
+  font-weight: 400;
 }
 
 /* Core Css */

package/dist/assets/css/components/form/select/styles.css

@@ -105,7 +105,7 @@
 .ar-select-wrapper > .ar-select > .validation {
   color: var(--danger);
   font-size: 0.8rem;
-  font-weight: 600;
+  font-weight: 400;
 }
 
 @import url("./options.css");

package/dist/assets/css/components/form/text-editor/styles.css

@@ -47,7 +47,7 @@
 .ar-text-editor > .validation {
   color: var(--danger);
   font-size: 0.8rem;
-  font-weight: 600;
+  font-weight: 400;
 }
 
 .ar-text-editor--block-item {

package/dist/assets/css/components/navigation/pagination/pagination.css

@@ -1,5 +1,3 @@
-.ar-pagination {
-}
 .ar-pagination > ul {
   display: flex;
   flex-direction: row;
@@ -17,7 +15,7 @@
   box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.1);
   transform: scale(1);
   color: var(--gray-700);
-  font-weight: 600;
+  font-weight: 400;
   cursor: pointer;
   user-select: none;
 }
@@ -45,10 +43,7 @@
 .ar-pagination > ul > li:is(:nth-last-child(2)) {
   margin-left: 1rem;
 }
-.ar-pagination
-  > ul
-  > li:is(:nth-child(1), :nth-child(2), :nth-last-child(1), :nth-last-child(2))
-  > span {
+.ar-pagination > ul > li:is(:nth-child(1), :nth-child(2), :nth-last-child(1), :nth-last-child(2)) > span {
   position: relative;
   top: -2px;
   font-size: 1.5rem;

package/dist/assets/css/core/variants/outlined.css

@@ -396,8 +396,8 @@ iframe.outlined:not(.disabled),
 
     &:focus,
     &.focused {
-      border-color: var(--light-300);
-      box-shadow: 0 0 0 3.5px var(--light-100);
+      border-color: var(--gray-400);
+      box-shadow: 0 0 0 3.5px var(--gray-100);
     }
   }
 }

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

@@ -493,7 +493,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
     return (React.createElement("div", { ref: _tableWrapper, className: _tableClassName.map((c) => c).join(" ") },
         (title || description || actions || React.Children.count(children) > 0) && (React.createElement("div", { className: "header" },
             React.createElement("div", { className: "title" },
-                React.createElement("h3", null, title),
+                React.createElement("h4", null, title),
                 description && React.createElement("h5", null, description)),
             React.createElement("div", { className: "actions" }, actions && (React.createElement(React.Fragment, null,
                 actions.import && (React.createElement(Popover, { title: "\u0130\u00E7eri Aktar", message: "Se\u00E7ti\u011Finiz dosyalar\u0131 uygulamaya y\u00FCkleyebilirsiniz. Bu i\u015Flem, dosyalardaki verileri sistemimize aktar\u0131r ve verilerle i\u015Flem yapman\u0131za olanak tan\u0131r.", content: React.createElement(React.Fragment, null,

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

@@ -8,56 +8,51 @@ const Tooltip = ({ children, text, direction = "top" }) => {
     const _children = useRef(null);
     // states
     const [mouseEnter, setMouseEnter] = useState(false);
+    const [_direction, setDirection] = useState(direction);
     // methods
     const handlePosition = useCallback(() => {
-        if (_children.current && _arTooltip.current) {
-            const childRect = _children.current.getBoundingClientRect();
-            const tooltipRect = _arTooltip.current.getBoundingClientRect();
-            if (childRect) {
-                const sx = window.scrollX || document.documentElement.scrollLeft;
-                const sy = window.scrollY || document.documentElement.scrollTop;
-                // Tooltip konumunu ayarlama için ortak bir fonksiyon.
-                const setTooltipPosition = (top, left) => {
-                    if (!_arTooltip.current)
-                        return;
-                    _arTooltip.current.style.top = `${top + sy}px`;
-                    _arTooltip.current.style.left = `${left + sx}px`;
-                };
-                const margin = 17.5;
-                let top = 0;
-                let left = 0;
-                switch (direction) {
-                    case "top":
-                        {
-                            top = childRect.top - tooltipRect.height - margin;
-                            left = childRect.left + childRect.width / 2 - tooltipRect.width / 2;
-                            setTooltipPosition(top, left);
-                        }
-                        break;
-                    case "right":
-                        {
-                            top = childRect.top + childRect.height / 2 - tooltipRect.height / 2;
-                            left = childRect.right + margin;
-                            setTooltipPosition(top, left);
-                        }
-                        break;
-                    case "bottom":
-                        {
-                            top = childRect.bottom + margin;
-                            left = childRect.left + childRect.width / 2 - tooltipRect.width / 2;
-                            setTooltipPosition(top, left);
-                        }
-                        break;
-                    case "left":
-                        {
-                            top = childRect.top + childRect.height / 2 - tooltipRect.height / 2;
-                            left = childRect.left - tooltipRect.width - margin;
-                            setTooltipPosition(top, left);
-                        }
-                        break;
-                }
+        const child = _children.current;
+        const tooltip = _arTooltip.current;
+        if (!child || !tooltip)
+            return;
+        const margin = 17.5;
+        const windowWidth = window.innerWidth;
+        const screenCenterX = windowWidth / 2;
+        const childRect = child.getBoundingClientRect();
+        const tooltipRect = tooltip.getBoundingClientRect();
+        const isOnRight = childRect.left > screenCenterX;
+        const coordinate = isOnRight ? childRect.right + tooltipRect.width / 2 : childRect.left + tooltipRect.width;
+        if (direction === "top" || direction === "bottom") {
+            if (isOnRight && coordinate > windowWidth) {
+                direction = "left";
             }
+            else if (!isOnRight && coordinate < windowWidth) {
+                direction = "right";
+            }
+        }
+        let top = 0;
+        let left = 0;
+        switch (direction) {
+            case "top":
+                top = childRect.top - tooltipRect.height - margin;
+                left = childRect.left + childRect.width / 2 - tooltipRect.width / 2;
+                break;
+            case "right":
+                top = childRect.top + childRect.height / 2 - tooltipRect.height / 2;
+                left = childRect.right + margin;
+                break;
+            case "bottom":
+                top = childRect.bottom + margin;
+                left = childRect.left + childRect.width / 2 - tooltipRect.width / 2;
+                break;
+            case "left":
+                top = childRect.top + childRect.height / 2 - tooltipRect.height / 2;
+                left = childRect.left - tooltipRect.width - margin;
+                break;
         }
+        tooltip.style.top = `${top}px`;
+        tooltip.style.left = `${left}px`;
+        setDirection(direction);
     }, []);
     //useEffects
     useEffect(() => {
@@ -67,7 +62,7 @@ const Tooltip = ({ children, text, direction = "top" }) => {
     return (React.createElement("div", { className: "ar-tooltip-wrapper" },
         React.createElement("div", { ref: _children, onMouseEnter: () => setMouseEnter(true), onMouseLeave: () => setMouseEnter(false) }, children),
         mouseEnter &&
-            ReactDOM.createPortal(React.createElement("div", { ref: _arTooltip, className: `ar-tooltip ${direction}` }, Array.isArray(text) ? (text.map((t) => (React.createElement("span", { className: "text" },
+            ReactDOM.createPortal(React.createElement("div", { ref: _arTooltip, className: `ar-tooltip ${_direction}` }, Array.isArray(text) ? (text.map((t) => (React.createElement("span", { className: "text" },
                 React.createElement("span", { className: "bullet" }, "\u2022"),
                 React.createElement("span", null, t))))) : (React.createElement("span", { className: "text" }, text))), document.body)));
 };

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

@@ -1,7 +1,9 @@
+import { Color } from "../../../libs/types";
 interface IProps {
     buttons: {
         text: string;
         onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+        color?: Color;
     }[];
 }
 export default IProps;

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

@@ -60,9 +60,9 @@ const ButtonAction = ({ buttons }) => {
     }, [open]);
     return (React.createElement("div", { ref: _wrapper, className: "ar-button-action" },
         React.createElement("span", { ref: _button },
-            React.createElement(Button, { variant: "borderless", color: "teal", border: { radius: "none" }, icon: { element: React.createElement("span", { className: "dotted" }) }, onClick: () => setOpen((prev) => !prev) })),
+            React.createElement(Button, { variant: "surface", color: "gray", 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", onClick: button.onClick }, button.text)))), document.body)));
+            ReactDOM.createPortal(React.createElement("span", { ref: _list, className: "ar-action-buttons" }, buttons.map((button) => (React.createElement(Button, { variant: "borderless", color: button.color ?? "blue", onClick: button.onClick }, button.text)))), document.body)));
 };
 ButtonAction.displayName = "ButtonAction";
 export default ButtonAction;

package/dist/components/form/date-picker/index.js

@@ -249,7 +249,7 @@ const DatePicker = ({ onChange, isClock, validation, ...attributes }) => {
         attributes.placeholder && attributes.placeholder.length > 0 && (React.createElement("label", null,
             validation ? "* " : "",
             attributes.placeholder)),
-        React.createElement(Input, { ref: _beginDate, value: DATE.ParseValue(String(attributes.value), isClock), type: isClock ? "datetime-local" : "date", ...attributes, onKeyDown: (event) => {
+        React.createElement(Input, { ref: _beginDate, ...attributes, value: DATE.ParseValue(String(attributes.value), isClock), type: isClock ? "datetime-local" : "date", onKeyDown: (event) => {
                 if (event.code === "Space")
                     event.preventDefault();
                 else if (event.code === "Enter")

package/package.json

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