ar-design 0.1.80 → 0.1.81

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

@@ -69,6 +69,9 @@
   border-top-color: var(--gray-200);
   border-bottom-color: var(--gray-200);
 }
+.ar-table:not(:has(> .header)) > .content > table > thead {
+  border-top-color: transparent;
+}
 .ar-table > .content > table > thead > tr:first-child {
   border-bottom: solid 1px var(--gray-200);
 }

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

@@ -0,0 +1,59 @@
+.ar-tooltip {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  background-color: var(--white);
+  padding: 0.25rem 0.5rem;
+  border: solid 1px var(--gray-300);
+  border-radius: var(--border-radius-sm);
+  z-index: 1052;
+}
+.ar-tooltip > span {
+  display: flex;
+  flex-direction: row;
+  gap: 0.25rem;
+}
+.ar-tooltip > .text {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  color: var(--gray-700);
+  font-size: 0.85rem;
+  text-wrap: nowrap;
+  -webkit-text-stroke: 0.75px var(--gray-700);
+}
+.ar-tooltip > .text > .bullet {
+  color: var(--gray-400);
+  -webkit-text-stroke: 0px;
+}
+
+.ar-tooltip::before {
+  position: absolute;
+  content: "";
+  border: solid 7.5px transparent;
+}
+.ar-tooltip.top::before {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-top-color: var(--gray-300);
+}
+.ar-tooltip.right::before {
+  top: 50%;
+  transform: translateY(-50%);
+  right: 100%;
+  border-right-color: var(--gray-300);
+}
+.ar-tooltip.bottom::before {
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 100%;
+  border-bottom-color: var(--gray-300);
+}
+.ar-tooltip.left::before {
+  top: 50%;
+  transform: translateY(-50%);
+  left: 100%;
+  border-left-color: var(--gray-300);
+}

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

@@ -27,4 +27,3 @@
 @import url("./core/icon.css");
 @import url("./core/position.css");
 @import url("./core/size.css");
-@import url("./core/tooltip.css");

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

@@ -27,30 +27,36 @@
   list-style-type: none;
 }
 .ar-upload-button > .ar-upload-files > ul > li {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 0.5rem;
+  position: relative;
   border-bottom: solid 1px var(--gray-200);
 }
+.ar-upload-button > .ar-upload-files > ul > li:hover > .errors {
+  display: flex;
+}
 .ar-upload-button > .ar-upload-files > ul > li.error {
   border-left: solid 2px var(--danger);
 }
-.ar-upload-button > .ar-upload-files > ul > li > .list-content {
+.ar-upload-button > .ar-upload-files > ul > li .content {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
+  width: 100%;
+  height: 2rem;
+  padding: 0 0.5rem;
 }
-.ar-upload-button > .ar-upload-files > ul > li > .list-content > span:first-child {
+.ar-upload-button > .ar-upload-files > ul > li .content > span:first-child {
   width: 90%;
   font-size: 0.75rem;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
 }
-.ar-upload-button > .ar-upload-files > ul > li > .list-content > span:last-child {
+.ar-upload-button > .ar-upload-files > ul > li .content > span:first-child.error {
+  color: var(--danger);
+  -webkit-text-stroke: 0.5px var(--danger);
+}
+.ar-upload-button > .ar-upload-files > ul > li .content > span:last-child {
   background-color: rgba(var(--danger-rgb), 0.1);
   width: 1rem;
   height: 1rem;
@@ -63,19 +69,4 @@
   cursor: pointer;
 }
 
-.ar-upload-button > .ar-upload-files > ul > li > .errors {
-  display: flex;
-  flex-direction: column;
-  list-style: circle;
-}
-.ar-upload-button > .ar-upload-files > ul > li > .errors > .bullet {
-  color: var(--danger);
-}
-.ar-upload-button > .ar-upload-files > ul > li > .errors > span {
-  display: flex;
-  gap: 0.25rem;
-  font-size: 0.75rem;
-  color: var(--danger);
-}
-
 @import url("./animations.css");

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

@@ -6,7 +6,7 @@ import Actions from "./Actions";
 import Pagination from "../../navigation/pagination";
 import Button from "../../form/button";
 import { ARIcon } from "../../icons";
-const Table = function ({ children, title, description, data, columns, actions, selections, searchedParams, pagination, config = { isSearchable: true }, }) {
+const Table = function ({ children, title, description, data, columns, actions, selections, searchedParams, pagination, config = { isSearchable: false }, }) {
     // refs
     let _dataLength = useRef(0);
     const _tableWrapper = useRef(null);
@@ -157,7 +157,7 @@ const Table = function ({ children, title, description, data, columns, actions,
         setSelectAll(allChecked);
     }, [currentPage]);
     return (React.createElement("div", { ref: _tableWrapper, className: _tableClassName.map((c) => c).join(" ") },
-        React.createElement("div", { className: "header" },
+        (title || description || actions) && (React.createElement("div", { className: "header" },
             React.createElement("div", { className: "title" },
                 React.createElement("h3", null, title),
                 React.createElement("h5", null, description)),
@@ -165,7 +165,7 @@ const Table = function ({ children, title, description, data, columns, actions,
                 React.Children.count(children) > 0 && React.createElement("div", null, React.Children.map(children, (child) => child)),
                 actions && (React.createElement(React.Fragment, null,
                     actions.create && (React.createElement(Button, { variant: "outlined", status: "dark", icon: { element: React.createElement(ARIcon, { icon: "Add", size: 16 }) }, tooltip: { text: actions.create.tooltip, direction: "top" }, onClick: actions.create.onClick })),
-                    actions.import && (React.createElement(Button, { variant: "outlined", status: "dark", icon: { element: React.createElement(ARIcon, { icon: "Import", size: 16 }) }, tooltip: { text: actions.import.tooltip, direction: "top" }, onClick: actions.import.onClick })))))),
+                    actions.import && (React.createElement(Button, { variant: "outlined", status: "dark", icon: { element: React.createElement(ARIcon, { icon: "Import", size: 16 }) }, tooltip: { text: actions.import.tooltip, direction: "top" }, onClick: actions.import.onClick }))))))),
         React.createElement("div", { ref: _tableContent, className: "content", onScroll: handleOnScroll },
             React.createElement("table", { ref: _table },
                 React.createElement("thead", null,
@@ -284,19 +284,20 @@ const Table = function ({ children, title, description, data, columns, actions,
                             }) }, React.isValidElement(render) ? render : String(render)));
                     }))))) : (React.createElement("tr", null,
                     React.createElement("td", { colSpan: columns.length + 1 }, "Herhangi bir kay\u0131t bulunamad\u0131!")))))),
-        React.createElement("div", { className: "footer" },
-            React.createElement("span", null,
-                React.createElement("strong", null,
-                    "Showing ",
-                    getData().length),
-                " ",
+        pagination && pagination.totalRecords > pagination.perPage && (React.createElement("div", { className: "footer" },
+            React.createElement(React.Fragment, null,
                 React.createElement("span", null,
-                    "of ",
-                    pagination?.perPage ?? getData().length,
-                    " agreement")),
-            pagination && pagination.totalRecords > pagination.perPage && (React.createElement(Pagination, { totalRecords: pagination.totalRecords, perPage: pagination.perPage, onChange: (currentPage) => {
-                    !config.isServerSide ? setCurrentPage(currentPage) : pagination.onChange(currentPage);
-                } })))));
+                    React.createElement("strong", null,
+                        "Showing ",
+                        getData().length),
+                    " ",
+                    React.createElement("span", null,
+                        "of ",
+                        pagination?.perPage ?? getData().length,
+                        " agreement")),
+                React.createElement(Pagination, { totalRecords: pagination.totalRecords, perPage: pagination.perPage, onChange: (currentPage) => {
+                        !config.isServerSide ? setCurrentPage(currentPage) : pagination.onChange(currentPage);
+                    } }))))));
 };
 Table.Action = Actions;
 export default Table;

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

@@ -0,0 +1,6 @@
+import { IChildren } from "../../../libs/types/IGlobalProps";
+interface IProps extends IChildren {
+    text: string | string[];
+    direction?: "top" | "right" | "left" | "bottom";
+}
+export default IProps;

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

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

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

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

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

@@ -0,0 +1,78 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom";
+import "../../../assets/css/components/feedback/tooltip/styles.css";
+const Tooltip = ({ children, text, direction = "top" }) => {
+    // refs
+    const _arTooltip = useRef(null);
+    const _children = useRef(null);
+    // states
+    const [mouseEnter, setMouseEnter] = useState(false);
+    // methods
+    const handlePosition = () => {
+        if (_children.current && _arTooltip.current) {
+            const buttonR = _children.current.getBoundingClientRect();
+            const tooltipR = _arTooltip.current.getBoundingClientRect();
+            if (buttonR) {
+                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 positonT = buttonR.top;
+                const positonL = buttonR.left + (sx == 0 ? 5.5 : 0);
+                const centerBX = buttonR.width / 2;
+                const centerBY = buttonR.height / 2;
+                const centerV = positonL - tooltipR.width + tooltipR.width / 2 + centerBX;
+                const margin = 17.5;
+                switch (direction) {
+                    case "top":
+                        {
+                            const top = positonT - tooltipR.height - margin;
+                            const left = centerV;
+                            setTooltipPosition(top, left);
+                        }
+                        break;
+                    case "right":
+                        {
+                            const top = positonT + centerBY - tooltipR.height / 2;
+                            const left = positonL + buttonR.width + margin;
+                            setTooltipPosition(top, left);
+                        }
+                        break;
+                    case "bottom":
+                        {
+                            const top = positonT + buttonR.height + margin;
+                            const left = centerV;
+                            setTooltipPosition(top, left);
+                        }
+                        break;
+                    case "left":
+                        {
+                            const top = positonT + centerBY - tooltipR.height / 2;
+                            const left = positonL - tooltipR.width - margin;
+                            setTooltipPosition(top, left);
+                        }
+                        break;
+                }
+            }
+        }
+    };
+    //useEffects
+    useEffect(() => {
+        if (mouseEnter)
+            setTimeout(() => handlePosition(), 0);
+    }, [mouseEnter]);
+    return (React.createElement("div", { ref: _arTooltip, 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" },
+                React.createElement("span", { className: "bullet" }, "\u2022"),
+                React.createElement("span", null, t))))) : (React.createElement("span", { className: "text" }, text))), document.body)));
+};
+Tooltip.displayName = "Tooltip";
+export default Tooltip;

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

@@ -18,7 +18,7 @@ interface IProps extends Omit<IGlobalProps, "children" | "disabled">, ISizes, Re
     shape?: "circle" | "square";
     tooltip?: {
         text: string;
-        direction: "top" | "right" | "left" | "bottom";
+        direction?: "top" | "right" | "left" | "bottom";
     };
     position?: {
         type: "fixed" | "absolute";

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

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

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

@@ -1,12 +1,11 @@
 "use client";
-import React, { useEffect, useRef, useState } from "react";
-import "../../../assets/css/components/form/button/button.css";
+import React, { useRef } from "react";
+import "../../../assets/css/components/form/button/styles.css";
 import Utils from "../../../libs/infrastructure/shared/Utils";
-import ReactDOM from "react-dom";
+import Tooltip from "../../feedback/tooltip";
 const Button = ({ children, variant = "filled", shape, status = "primary", border, size = "normal", tooltip, position, icon, upperCase, ...attributes }) => {
     // refs
     const _button = useRef(null);
-    const _arButtonTooltip = useRef(null);
     const _buttonClassName = ["ar-button"];
     _buttonClassName.push(...Utils.GetClassName(variant, status, border, size, icon, attributes.className));
     if (!children)
@@ -17,108 +16,26 @@ const Button = ({ children, variant = "filled", shape, status = "primary", borde
         _buttonClassName.push(position.type);
         _buttonClassName.push(position.inset.map((_inset) => _inset).join(" "));
     }
-    // states
-    const [mouseEnter, setMouseEnter] = useState(false);
-    // methods
-    const handlePosition = () => {
-        if (_button.current && _arButtonTooltip.current) {
-            const buttonR = _button.current.getBoundingClientRect();
-            const tooltipR = _arButtonTooltip.current.getBoundingClientRect();
-            if (buttonR) {
-                const sx = window.scrollX || document.documentElement.scrollLeft;
-                const sy = window.scrollY || document.documentElement.scrollTop;
-                if (tooltip) {
-                    // Tooltip konumunu ayarlama için ortak bir fonksiyon.
-                    const setTooltipPosition = (top, left) => {
-                        if (!_arButtonTooltip.current)
-                            return;
-                        _arButtonTooltip.current.style.top = `${top + sy}px`;
-                        _arButtonTooltip.current.style.left = `${left + sx}px`;
-                    };
-                    const positonT = buttonR.top;
-                    const positonL = buttonR.left + (sx == 0 ? 5.5 : 0);
-                    const centerBX = buttonR.width / 2;
-                    const centerBY = buttonR.height / 2;
-                    const centerV = positonL - tooltipR.width + tooltipR.width / 2 + centerBX;
-                    const margin = 17.5;
-                    switch (tooltip.direction) {
-                        case "top":
-                            {
-                                const top = positonT - tooltipR.height - margin;
-                                const left = centerV;
-                                setTooltipPosition(top, left);
-                            }
-                            break;
-                        case "right":
-                            {
-                                const top = positonT + centerBY - tooltipR.height / 2;
-                                const left = positonL + buttonR.width + margin;
-                                setTooltipPosition(top, left);
-                            }
-                            break;
-                        case "bottom":
-                            {
-                                const top = positonT + buttonR.height + margin;
-                                const left = centerV;
-                                setTooltipPosition(top, left);
-                            }
-                            break;
-                        case "left":
-                            {
-                                const top = positonT + centerBY - tooltipR.height / 2;
-                                const left = positonL - tooltipR.width - margin;
-                                setTooltipPosition(top, left);
-                            }
-                            break;
-                    }
+    const buttonElement = (React.createElement("button", { ref: _button, ...attributes, className: _buttonClassName.map((c) => c).join(" "), onClick: (event) => {
+            // Disabled gelmesi durumunda işlem yapmasına izin verme...
+            if (attributes.disabled)
+                return;
+            (() => {
+                const _current = _button.current;
+                const addClass = "active";
+                if (_current && !_current.classList.contains(addClass)) {
+                    // Sınıf ekleniyor...
+                    _current.classList.add(addClass);
+                    // Sınıf 500 milisaniye sonra kaldırlacak.
+                    setTimeout(() => _current.classList.remove(addClass), 750);
                 }
-            }
-        }
-    };
-    useEffect(() => {
-        if (mouseEnter)
-            setTimeout(() => handlePosition(), 0);
-    }, [mouseEnter]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("button", { ref: _button, ...attributes, onMouseEnter: (event) => {
-                // Disabled gelmesi durumunda işlem yapmasına izin verme...
-                if (attributes.disabled)
-                    return;
-                (() => {
-                    setMouseEnter(true);
-                })();
-                (() => attributes.onMouseEnter && attributes.onMouseEnter(event))();
-            }, onMouseLeave: (event) => {
-                // Disabled gelmesi durumunda işlem yapmasına izin verme...
-                if (attributes.disabled)
-                    return;
-                (() => {
-                    setMouseEnter(false);
-                })();
-                (() => attributes.onMouseLeave && attributes.onMouseLeave(event))();
-            }, className: _buttonClassName.map((c) => c).join(" "), onClick: (event) => {
-                // Disabled gelmesi durumunda işlem yapmasına izin verme...
-                if (attributes.disabled)
-                    return;
-                (() => {
-                    const _current = _button.current;
-                    const addClass = "active";
-                    if (_current && !_current.classList.contains(addClass)) {
-                        // Sınıf ekleniyor...
-                        _current.classList.add(addClass);
-                        // Sınıf 500 milisaniye sonra kaldırlacak.
-                        setTimeout(() => _current.classList.remove(addClass), 750);
-                    }
-                })();
-                (() => attributes.onClick && attributes.onClick(event))();
-            } },
-            React.createElement("span", { className: "text" },
-                icon?.element,
-                React.createElement("span", null, !shape ? (typeof children === "string" && upperCase ? children.toLocaleUpperCase() : children) : ""))),
-        tooltip &&
-            mouseEnter &&
-            ReactDOM.createPortal(React.createElement("div", { ref: _arButtonTooltip, className: `ar-button-tooltip ${tooltip.direction}` },
-                React.createElement("span", null, tooltip.text)), document.body)));
+            })();
+            (() => attributes.onClick && attributes.onClick(event))();
+        } },
+        React.createElement("span", { className: "text" },
+            icon?.element,
+            React.createElement("span", null, !shape ? (typeof children === "string" && upperCase ? children.toLocaleUpperCase() : children) : ""))));
+    return !tooltip ? (buttonElement) : (React.createElement(Tooltip, { text: tooltip.text, direction: tooltip.direction }, buttonElement));
 };
 Button.displayName = "Button";
 export default Button;

package/dist/components/form/upload/Props.d.ts

@@ -1,7 +1,8 @@
+import { AllowedTypes } from "../../../libs/types";
 import { IValidation } from "../../../libs/types/IGlobalProps";
 interface IMultiple {
     file: File[];
-    onChange: (formData: FormData, files: File[]) => void;
+    onChange: (formData: FormData, files: File[], isInvalidFileExist: boolean) => void;
     multiple: true;
 }
 interface ISingle {
@@ -11,6 +12,8 @@ interface ISingle {
 }
 type Props = {
     text: string;
+    allowedTypes?: AllowedTypes[];
+    maxSize?: number;
     disabled?: boolean;
 } & (IMultiple | ISingle) & IValidation;
 export default Props;

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

@@ -2,7 +2,8 @@ import React, { useEffect, useRef, useState } from "react";
 import "../../../assets/css/components/form/upload/styles.css";
 import { ARIcon } from "../../icons";
 import Button from "../button";
-const Upload = ({ text, file, onChange, multiple }) => {
+import Tooltip from "../../feedback/tooltip";
+const Upload = ({ text, file, onChange, allowedTypes, maxSize, multiple }) => {
     // refs
     const _firstLoad = useRef(false);
     const _input = useRef(null);
@@ -41,15 +42,18 @@ const Upload = ({ text, file, onChange, multiple }) => {
     };
     const handleValidationFile = (file) => {
         const newErrors = [];
-        const allowedTypes = ["image/jpeg", "image/png"];
-        const maxSize = 5 * 1024 * 1024; // 5MB
-        if (!allowedTypes.includes(file.type)) {
-            newErrors.push({ [file.name]: "Geçersiz dosya türü." });
-            _validationErrors.current.push(file.name);
+        if (allowedTypes) {
+            if (!allowedTypes.includes(file.type)) {
+                newErrors.push({ [file.name]: "Geçersiz dosya türü." });
+                _validationErrors.current.push(file.name);
+            }
         }
-        if (file.size > maxSize) {
-            newErrors.push({ [file.name]: "Dosya boyutu çok büyük." });
-            _validationErrors.current.push(file.name);
+        if (maxSize) {
+            const _maxSize = maxSize * 1024 * 1024; // 5MB
+            if (file.size > _maxSize) {
+                newErrors.push({ [file.name]: "Dosya boyutu çok büyük." });
+                _validationErrors.current.push(file.name);
+            }
         }
         setValidationErrors((prev) => [...prev, ...newErrors]);
     };
@@ -70,7 +74,7 @@ const Upload = ({ text, file, onChange, multiple }) => {
                 // Geçerli olan dosyalar alındı...
                 const validFiles = [...selectedFiles.filter((x) => !inValidFiles.includes(x.name))];
                 validFiles.forEach((f) => fileFormData.append("file", f));
-                onChange(fileFormData, validFiles);
+                onChange(fileFormData, validFiles, _validationErrors.current.length === 0);
             }
             else {
                 if (selectedFile) {
@@ -105,16 +109,13 @@ const Upload = ({ text, file, onChange, multiple }) => {
                         .map((error) => error[selectedFile.name]);
                     if (errorMessages.length > 0)
                         _className.push("error");
-                    return (React.createElement("li", { key: index, className: _className.map((c) => c).join(" ") },
-                        React.createElement("div", { className: "list-content" },
-                            React.createElement("span", null, selectedFile.name),
-                            React.createElement("span", { onClick: (event) => {
-                                    event.stopPropagation();
-                                    handleFileRemove(selectedFile);
-                                } }, "x")),
-                        errorMessages.length > 0 && (React.createElement("div", { className: "errors" }, errorMessages.map((message, i) => (React.createElement("span", { key: i },
-                            React.createElement("span", { className: "bullet" }, "\u2022"),
-                            React.createElement("span", null, message))))))));
+                    const content = (React.createElement("div", { className: "content" },
+                        React.createElement("span", { className: _className.map((c) => c).join(" ") }, selectedFile.name),
+                        React.createElement("span", { onClick: (event) => {
+                                event.stopPropagation();
+                                handleFileRemove(selectedFile);
+                            } }, "x")));
+                    return (React.createElement("li", { key: index, className: _className.map((c) => c).join(" ") }, errorMessages.length === 0 ? (content) : (React.createElement(Tooltip, { text: errorMessages.map((message) => message ?? "") }, content))));
                 }))))));
 };
 export default Upload;

package/dist/index.d.ts

@@ -23,9 +23,10 @@ import Alert from "./components/feedback/alert";
 import Modal from "./components/feedback/modal";
 import Popover from "./components/feedback/popover";
 import Progress from "./components/feedback/progress";
+import Tooltip from "./components/feedback/tooltip";
 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, Modal, Popover, 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, Tooltip, Breadcrumb, Menu, Steps, Grid, Layout, };

package/dist/index.js

@@ -26,6 +26,7 @@ import Alert from "./components/feedback/alert";
 import Modal from "./components/feedback/modal";
 import Popover from "./components/feedback/popover";
 import Progress from "./components/feedback/progress";
+import Tooltip from "./components/feedback/tooltip";
 // Navigation
 import Breadcrumb from "./components/navigation/breadcrumb";
 import Menu from "./components/navigation/menu";
@@ -39,7 +40,7 @@ Button, ButtonAction, ButtonGroup, Input, InputTag, DatePicker, Select, Switch,
 // Data Display
 Card, Chip, Divider, DnD, Paper, SyntaxHighlighter, Table, Tabs, Typography, 
 // Feedback
-Alert, Modal, Popover, Progress, 
+Alert, Modal, Popover, Progress, Tooltip, 
 // Navigation
 Breadcrumb, Menu, Steps, 
 // Layout

package/dist/libs/types/index.d.ts

@@ -60,6 +60,7 @@ export type ValidationProperties<T> = {
 export type Errors<TData> = Partial<{
     [key in keyof TData]: string;
 }>;
+export type AllowedTypes = "image/jpeg" | "image/png" | "image/gif" | "image/webp" | "image/svg+xml" | "image/bmp" | "image/tiff" | "application/pdf" | "application/msword" | "application/vnd.openxmlformats-officedocument.wordprocessingml.document" | "application/vnd.ms-excel" | "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" | "application/vnd.openxmlformats-officedocument.presentationml.presentation" | "application/zip" | "application/x-rar-compressed" | "application/x-7z-compressed" | "application/gzip" | "application/json" | "application/xml" | "text/plain" | "text/csv" | "text/html" | "video/mp4" | "video/quicktime" | "video/x-msvideo" | "video/x-matroska" | "video/webm" | "video/x-flv" | "audio/mpeg" | "audio/wav" | "audio/ogg" | "audio/aac" | "audio/flac" | "application/octet-stream";
 export type PieChartDataType = {
     value: number;
     text: string;

package/package.json

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

package/dist/assets/css/components/form/button/core/tooltip.css

@@ -1,40 +0,0 @@
-.ar-button-tooltip {
-  position: absolute;
-  background-color: var(--black);
-  padding: 0.25rem 0.5rem;
-  border-radius: var(--border-radius-sm);
-  z-index: 15;
-}
-.ar-button-tooltip::before {
-  position: absolute;
-  content: "";
-  border: solid 7.5px transparent;
-}
-.ar-button-tooltip.top::before {
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  border-top-color: var(--black);
-}
-.ar-button-tooltip.right::before {
-  top: 50%;
-  transform: translateY(-50%);
-  right: 100%;
-  border-right-color: var(--black);
-}
-.ar-button-tooltip.bottom::before {
-  left: 50%;
-  transform: translateX(-50%);
-  bottom: 100%;
-  border-bottom-color: var(--black);
-}
-.ar-button-tooltip.left::before {
-  top: 50%;
-  transform: translateY(-50%);
-  left: 100%;
-  border-left-color: var(--black);
-}
-.ar-button-tooltip > span {
-  color: var(--white);
-  text-wrap: nowrap;
-}