ar-design 0.4.13 → 0.4.14

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

@@ -0,0 +1,42 @@
+.ar-table-properties-popup {
+  position: absolute;
+  background-color: var(--white);
+  width: 225px;
+  padding: 0.5rem 0;
+  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: 1052;
+
+  > ul {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+
+    > li {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      width: 100%;
+      padding: 0.5rem;
+      cursor: pointer;
+      transition: background 250ms ease-in-out;
+      user-select: none;
+
+      &:hover {
+        background-color: var(--gray-100);
+      }
+
+      > span {
+        position: relative;
+
+        &:first-child {
+          top: 2.5px;
+        }
+      }
+    }
+  }
+}

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

@@ -1,5 +1,6 @@
 @import url("./scroll.css");
 @import url("./filter-popup.css");
+@import url("./properties-popup.css");
 
 .ar-table {
   display: flex;
@@ -147,6 +148,25 @@
               text-align: right;
             }
 
+            > div {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              gap: 1rem;
+              width: 100%;
+
+              > span {
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+
+                > span {
+                  position: relative;
+                  top: 2.5px;
+                }
+              }
+            }
+
             > .table-cell {
               padding: 0 1rem;
             }

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

@@ -1,6 +1,10 @@
-import React, { MutableRefObject, ReactNode } from "react";
+import React, { Dispatch, MutableRefObject, ReactNode, SetStateAction } from "react";
 interface IProps {
     children: ReactNode;
+    open: {
+        get: boolean;
+        set: Dispatch<SetStateAction<boolean>>;
+    };
     tableContent: MutableRefObject<HTMLDivElement | null>;
     coordinate: {
         x: number;
@@ -8,5 +12,5 @@ interface IProps {
     };
     buttons: MutableRefObject<(HTMLSpanElement | null)[]>;
 }
-declare const FilterPopup: ({ children, tableContent, coordinate, buttons }: IProps) => false | React.ReactPortal;
+declare const FilterPopup: ({ children, open, tableContent, coordinate, buttons }: IProps) => false | React.ReactPortal;
 export default FilterPopup;

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

@@ -1,26 +1,24 @@
 "use client";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef } from "react";
 import ReactDOM from "react-dom";
-const FilterPopup = ({ children, tableContent, coordinate, buttons }) => {
+const FilterPopup = ({ children, open, tableContent, coordinate, buttons }) => {
     // refs
     const _arTableFilterPopup = useRef(null);
-    // states
-    const [open, setOpen] = useState(false);
     // methods
     const handleClickOutSide = (event) => {
         const target = event.target;
         const clickedInsidePopup = _arTableFilterPopup.current && _arTableFilterPopup.current.contains(target);
         const isOneOfButtons = buttons.current.some((button) => button === target || button?.contains(target));
         if (!clickedInsidePopup && !isOneOfButtons)
-            setOpen(false);
+            handleClose();
     };
     const handleKeys = (event) => {
         const key = event.key;
         if (key === "Escape")
-            setOpen(false);
+            open.set(false);
     };
-    const handleOpen = () => setOpen(true);
-    const handleClose = () => setOpen(false);
+    const handleOpen = () => open.set(true);
+    const handleClose = () => open.set(false);
     // useEffects
     useEffect(() => {
         buttons.current.map((button) => {
@@ -54,7 +52,7 @@ const FilterPopup = ({ children, tableContent, coordinate, buttons }) => {
             }
         };
     }, []);
-    return (open &&
+    return (open.get &&
         ReactDOM.createPortal(React.createElement("div", { ref: _arTableFilterPopup, className: "ar-table-filter-popup", style: { top: coordinate.y, left: coordinate.x } }, children), document.body));
 };
 export default FilterPopup;

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

@@ -0,0 +1,2 @@
+declare function ExtractKey<T>(key: unknown): keyof T | null;
+export { ExtractKey };

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

@@ -0,0 +1,10 @@
+function ExtractKey(key) {
+    if (!key)
+        return null;
+    if (typeof key !== "object")
+        return key;
+    if ("field" in key)
+        return key.field;
+    return null;
+}
+export { ExtractKey };

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

@@ -7,6 +7,10 @@ export type FilterValue = {
     value: string | number | boolean;
     operator: FilterOperator;
 };
+export type Sort<T> = {
+    key: keyof T;
+    direction: "asc" | "desc" | null;
+};
 export type SearchedParam = {
     [key: string]: FilterValue | FilterValue[];
 };
@@ -73,6 +77,7 @@ interface IProps<T> extends IChildren {
     rowBackgroundColor?: (item: T) => string;
     selections?: (selectionItems: T[]) => void;
     previousSelections?: T[];
+    sortedParams?: (params: Sort<T>[], query: string) => void;
     searchedParams?: (params: SearchedParam | null, query: string, operator: FilterOperator) => void;
     onEditable?: (item: T, trackByValue: string) => void;
     onDnD?: (item: T[]) => void;

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

@@ -0,0 +1,23 @@
+import React, { Dispatch, MutableRefObject, SetStateAction } from "react";
+import { TableColumnType } from "../../../libs/types";
+import { Sort } from "./IProps";
+interface IProps<T> {
+    open: {
+        get: boolean;
+        set: Dispatch<SetStateAction<boolean>>;
+    };
+    sort: {
+        get: Sort<T>[];
+        set: Dispatch<SetStateAction<Sort<T>[]>>;
+        currentColumn: TableColumnType<T> | null;
+    };
+    tableContent: MutableRefObject<HTMLDivElement | null>;
+    coordinate: {
+        x: number;
+        y: number;
+    };
+    buttons: MutableRefObject<(HTMLSpanElement | null)[]>;
+}
+declare function PropertiesPopup<T extends object>({ open, sort, tableContent, coordinate, buttons }: IProps<T>): false | React.ReactPortal;
+declare const _default: typeof PropertiesPopup;
+export default _default;

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

@@ -0,0 +1,91 @@
+"use client";
+import React, { memo, useEffect, useMemo, useRef } from "react";
+import ReactDOM from "react-dom";
+import { ARIcon } from "../../icons";
+import { ExtractKey } from "./Helpers";
+function PropertiesPopup({ open, sort, tableContent, coordinate, buttons }) {
+    // refs
+    const _arTablePropertiesPopup = useRef(null);
+    // methods
+    // const handleClickOutSide = useCallback(() => {
+    //   (event: MouseEvent) => {
+    //     const target = event.target as HTMLElement;
+    //     const clickedInsidePopup = _arTablePropertiesPopup.current && _arTablePropertiesPopup.current.contains(target);
+    //     const isOneOfButtons = buttons.current.some((button) => button === target || button?.contains(target));
+    //     if (!clickedInsidePopup && !isOneOfButtons) handleClose();
+    //   };
+    // }, []);
+    const handleSort = useMemo(() => {
+        return (columnKey, direction) => {
+            if (!columnKey)
+                return;
+            sort.set((prev) => {
+                const index = prev.findIndex((s) => s.key === columnKey);
+                if (index !== -1)
+                    return [{ key: columnKey, direction }];
+                return [{ key: columnKey, direction }];
+            });
+        };
+    }, []);
+    const handleKeys = (event) => {
+        const key = event.key;
+        if (key === "Escape")
+            open.set(false);
+    };
+    const handleOpen = () => open.set(true);
+    const handleClose = () => open.set(false);
+    // useEffects
+    useEffect(() => {
+        buttons.current.map((button) => {
+            if (button)
+                button.addEventListener("click", handleOpen);
+        });
+        return () => {
+            buttons.current.map((button) => {
+                if (button)
+                    button.removeEventListener("click", handleOpen);
+            });
+        };
+    }, [buttons]);
+    useEffect(() => {
+        const firstFilterButton = buttons.current[0];
+        if (firstFilterButton) {
+            const rect = firstFilterButton.getBoundingClientRect();
+            coordinate.x = rect.left;
+            coordinate.y = rect.top + rect.height;
+        }
+        if (tableContent.current) {
+            tableContent.current.addEventListener("scroll", handleClose);
+        }
+        // document.addEventListener("click", handleClickOutSide);
+        document.addEventListener("keydown", handleKeys);
+        return () => {
+            // document.removeEventListener("click", handleClickOutSide);
+            document.removeEventListener("keydown", handleKeys);
+            if (tableContent.current) {
+                tableContent.current.removeEventListener("scroll", handleClose);
+            }
+        };
+    }, []);
+    const currentKey = ExtractKey(sort.currentColumn?.key);
+    const currentSort = sort.get?.find((s) => s.key === currentKey);
+    return (open.get &&
+        ReactDOM.createPortal(React.createElement("div", { ref: _arTablePropertiesPopup, className: "ar-table-properties-popup", style: { top: coordinate.y, left: coordinate.x } },
+            React.createElement("ul", null,
+                currentSort && (!currentSort.direction || currentSort.direction === "desc") && (React.createElement("li", { onClick: () => handleSort(currentKey, "asc") },
+                    React.createElement("span", null,
+                        React.createElement(ARIcon, { icon: "ArrowUp" })),
+                    React.createElement("span", null, "Sort Ascending"))),
+                currentSort && (!currentSort.direction || currentSort.direction === "asc") && (React.createElement("li", { onClick: () => handleSort(currentKey, "desc") },
+                    React.createElement("span", null,
+                        React.createElement(ARIcon, { icon: "ArrowDown" })),
+                    React.createElement("span", null, "Sort Descending"))),
+                currentSort && currentSort.direction && (React.createElement("li", { onClick: () => {
+                        sort.set((prev) => prev.filter((s) => s.key !== currentKey));
+                        open.set(false);
+                    } },
+                    React.createElement("span", null,
+                        React.createElement(ARIcon, { icon: "ChevronExpand" })),
+                    React.createElement("span", null, "Clear Sort"))))), document.body));
+}
+export default memo(PropertiesPopup);

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

@@ -1,7 +1,22 @@
-import React from "react";
+import React, { Dispatch, SetStateAction } from "react";
 import { TableColumnType } from "../../../libs/types";
-declare const MemoizedTHeadCell: <T>({ columns }: {
+import { Sort } from "./IProps";
+declare const MemoizedTHeadCell: <T>({ open, sort, columns, propertiesButton, setSortCurrentColumn, setPropertiesButtonCoordinate, }: {
+    open: {
+        get: boolean;
+        set: Dispatch<SetStateAction<boolean>>;
+    };
+    sort: {
+        get: Sort<T>[];
+        set: Dispatch<SetStateAction<Sort<T>[]>>;
+    };
     columns: TableColumnType<T>[];
+    propertiesButton: React.MutableRefObject<(HTMLSpanElement | null)[]>;
+    setSortCurrentColumn: React.Dispatch<React.SetStateAction<TableColumnType<T> | null>>;
+    setPropertiesButtonCoordinate: React.Dispatch<React.SetStateAction<{
+        x: number;
+        y: number;
+    }>>;
 }) => React.JSX.Element;
 declare const THeadCell: typeof MemoizedTHeadCell;
 export default THeadCell;

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

@@ -1,6 +1,10 @@
-import React from "react";
-const MemoizedTHeadCell = function ({ columns }) {
+import React, { memo } from "react";
+import Button from "../../form/button";
+import { ARIcon } from "../../icons";
+import { ExtractKey } from "./Helpers";
+const MemoizedTHeadCell = function ({ open, sort, columns, propertiesButton, setSortCurrentColumn, setPropertiesButtonCoordinate, }) {
     return (React.createElement(React.Fragment, null, columns.map((c, cIndex) => {
+        const _direction = sort.get.find((s) => s.key === c.key)?.direction;
         let _className = [];
         if (c.config?.sticky)
             _className.push(`sticky-${c.config.sticky}`);
@@ -19,9 +23,37 @@ const MemoizedTHeadCell = function ({ columns }) {
                     { style: {} }), ...(c.config?.sticky && {
                 "data-sticky-position": c.config.sticky,
             }) },
-            React.createElement("span", { style: { fontWeight: 500 } }, c.title)));
+            React.createElement("div", null,
+                React.createElement("span", { style: { fontWeight: 500 } },
+                    React.createElement("span", null,
+                        _direction === "asc" && React.createElement(ARIcon, { icon: "ArrowUp" }),
+                        _direction === "desc" && React.createElement(ARIcon, { icon: "ArrowDown" })),
+                    c.title),
+                React.createElement("span", { ref: (element) => (propertiesButton.current[cIndex] = element), className: "properties-field", onClick: (event) => {
+                        event.stopPropagation();
+                        const rect = event.currentTarget.getBoundingClientRect();
+                        const screenCenterX = window.innerWidth / 2;
+                        const coordinateX = rect.x > screenCenterX ? rect.x + rect.width - 225 : rect.x;
+                        const coordinateY = rect.y + rect.height;
+                        setSortCurrentColumn(c);
+                        setPropertiesButtonCoordinate({
+                            x: coordinateX,
+                            y: coordinateY,
+                        });
+                        sort.set((prev) => {
+                            const key = ExtractKey(c.key);
+                            const index = prev.findIndex((s) => s.key === key);
+                            if (index === -1)
+                                return [...prev, { key, direction: null }];
+                            return prev;
+                        });
+                        open.set(true);
+                    } },
+                    React.createElement(Button, { variant: "borderless", icon: {
+                            element: React.createElement(ARIcon, { size: 16, icon: "ThreeDotsVertical", fill: "var(--dark)", strokeWidth: 0 }),
+                        } })))));
     })));
 };
 // React.memo kullanımı sırasında generic tipi koruyoruz.
-const THeadCell = React.memo(MemoizedTHeadCell);
+const THeadCell = memo(MemoizedTHeadCell);
 export default THeadCell;

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

@@ -18,6 +18,8 @@ import Tooltip from "../../feedback/tooltip";
 import Editable from "./Editable";
 import { flushSync } from "react-dom";
 import { createRoot } from "react-dom/client";
+import PropertiesPopup from "./PropertiesPopup";
+import { ExtractKey } from "./Helpers";
 const filterOption = [
     { value: FilterOperator.Contains, text: "İçerir" },
     { value: FilterOperator.DoesNotContains, text: "İçermez" },
@@ -29,7 +31,7 @@ const filterOption = [
     { value: FilterOperator.NotBlank, text: "Boş değil" },
 ];
 const { Row, Column } = Grid;
-const Table = forwardRef(({ children, trackBy, title, description, data, columns, actions, rowBackgroundColor, selections, previousSelections, searchedParams, onEditable, onDnD, pagination, config = { isSearchable: false }, }, ref) => {
+const Table = forwardRef(({ children, trackBy, title, description, data, columns, actions, rowBackgroundColor, selections, previousSelections, sortedParams, searchedParams, onEditable, onDnD, pagination, config = { isSearchable: false }, }, ref) => {
     // refs
     const _innerRef = useRef(null);
     const _tableWrapper = useRef(null);
@@ -42,6 +44,8 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
     // refs -> Search
     const _searchTextInputs = useRef([]);
     const _searchTimeOut = useRef(null);
+    // refs -> Properties
+    const _propertiesButton = useRef([]);
     // refs -> Filter
     const _filterButton = useRef([]);
     // refs -> Selection
@@ -65,12 +69,22 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
     const [searchedText, setSearchedText] = useState(null);
     const [_searchedParams, setSearchedParams] = useState(null);
     const [checkboxSelectedParams, setCheckboxSelectedParams] = useState(null);
+    // states -> Sort
+    const [sortConfig, setSortConfig] = useState([]);
+    const [sortCurrentColumn, setSortCurrentColumn] = useState(null);
+    // states -> Properties
+    const [openProperties, setOpenProperties] = useState(false);
+    const [propertiesButtonCoordinate, setPropertiesButtonCoordinate] = useState({
+        x: 0,
+        y: 0,
+    });
     // states -> Filter
     const [filterButtonCoordinate, setFilterButtonCoordinate] = useState({ x: 0, y: 0 });
     const [filterPopupContent, setFilterPopupContent] = useState(null);
     const [filterPopupOption, setFilterPopupOption] = useState(null);
     const [filterPopupOptionSearchText, setFilterPopupOptionSearchText] = useState(null);
     // states -> Filter Fields Backup
+    const [openFilter, setOpenFilter] = useState(false);
     const [filterCurrentColumn, setFilterCurrentColumn] = useState(null);
     const [filterCurrentDataType, setFilterCurrentDataType] = useState(null);
     const [filterCurrentIndex, setFilterCurrentIndex] = useState(null);
@@ -211,7 +225,9 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
         });
     }, []);
     const handleFilterPopupContent = (c, dataType, index) => {
-        const key = typeof c.key !== "object" ? String(c.key) : String(c.key.field);
+        const key = ExtractKey(c.key);
+        if (!key)
+            return;
         const value = Array.isArray(searchedText?.[key])
             ? "" // veya ihtiyacına göre birleştirme yap: searchedText[key].map(v => v.value).join(", ").
             : searchedText?.[key]?.value;
@@ -357,13 +373,27 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
         else {
             setTotalRecords(data.length);
         }
+        // Sorting...
+        if (sortConfig.length > 0) {
+            _data.sort((a, b) => {
+                for (const config of sortConfig) {
+                    const aValue = a[config.key];
+                    const bValue = b[config.key];
+                    if (aValue < bValue)
+                        return config.direction === "asc" ? -1 : 1;
+                    if (aValue > bValue)
+                        return config.direction === "asc" ? 1 : -1;
+                }
+                return 0;
+            });
+        }
         if (pagination && !config.isServerSide) {
             const indexOfLastRow = currentPage * selectedPerPage;
             const indexOfFirstRow = indexOfLastRow - selectedPerPage;
             _data = _data.slice(indexOfFirstRow, indexOfLastRow);
         }
         return _data;
-    }, [data, searchedText, currentPage, selectedPerPage]);
+    }, [data, searchedText, currentPage, selectedPerPage, sortConfig]);
     const renderRow = (item, index, deph) => {
         const isHasSubitems = _subrowSelector in item;
         let _rowColor = {};
@@ -485,6 +515,17 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
             _selectionItems.current = validSelections;
         }
     }, [previousSelections, data, trackBy]);
+    useEffect(() => {
+        if (config?.isServerSide && sortedParams) {
+            const sortRecord = {};
+            sortConfig?.forEach((s) => {
+                if (s.direction)
+                    sortRecord[String(s.key)] = s.direction;
+            });
+            const query = new URLSearchParams(sortRecord);
+            sortedParams(sortConfig ?? [], query.toString());
+        }
+    }, [sortConfig]);
     useEffect(() => {
         if (config?.isServerSide && searchedParams) {
             const searchRecord = {};
@@ -727,7 +768,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                                         });
                                     }
                                 } }))),
-                        React.createElement(THeadCell, { columns: columns })),
+                        React.createElement(THeadCell, { open: { get: openProperties, set: setOpenProperties }, sort: { get: sortConfig, set: setSortConfig }, columns: columns, propertiesButton: _propertiesButton, setSortCurrentColumn: setSortCurrentColumn, setPropertiesButtonCoordinate: setPropertiesButtonCoordinate })),
                     config?.isSearchable && (React.createElement("tr", { key: "isSearchable" },
                         selections && (React.createElement("th", { key: `column-selections`, className: "selection-col sticky-left", "data-sticky-position": "left" })),
                         columns.map((c, cIndex) => {
@@ -770,6 +811,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                                         setFilterCurrentColumn(c);
                                         setFilterCurrentDataType(dataType);
                                         setFilterCurrentIndex(cIndex);
+                                        setOpenFilter(true);
                                         handleFilterPopupContent(c, dataType, cIndex);
                                     } },
                                     React.createElement(Button, { variant: "borderless", icon: {
@@ -777,7 +819,8 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                                         } }))))));
                         })))),
                 React.createElement("tbody", { ref: _tBody }, renderTBody))),
-        React.createElement(FilterPopup, { tableContent: _tableContent, coordinate: filterButtonCoordinate, buttons: _filterButton }, filterPopupContent),
+        React.createElement(FilterPopup, { open: { get: openFilter, set: setOpenFilter }, tableContent: _tableContent, coordinate: filterButtonCoordinate, buttons: _filterButton }, filterPopupContent),
+        React.createElement(PropertiesPopup, { open: { get: openProperties, set: setOpenProperties }, sort: { get: sortConfig, set: setSortConfig, currentColumn: sortCurrentColumn }, tableContent: _tableContent, coordinate: propertiesButtonCoordinate, buttons: _propertiesButton }),
         pagination && (React.createElement("div", { className: "footer" },
             React.createElement("span", null, isMobile ? (React.createElement(React.Fragment, null,
                 React.createElement("strong", null,

package/dist/components/icons/Compiler.js

@@ -10,10 +10,16 @@ class Icon {
         switch (icon) {
             case "Add":
                 return (React.createElement("path", { d: "M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4" }));
+            case "ArrowDown":
+                return (React.createElement("path", { fillRule: "evenodd", d: "M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1" }));
+            case "ArrowDownUp":
+                return (React.createElement("path", { fillRule: "evenodd", d: "M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5m-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5" }));
             case "ArrowLeft":
                 return (React.createElement("path", { fillRule: "evenodd", d: "M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }));
             case "ArrowRight":
                 return (React.createElement("path", { fillRule: "evenodd", d: "M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }));
+            case "ArrowUp":
+                return (React.createElement("path", { fillRule: "evenodd", d: "M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5" }));
             case "Bold":
                 return (React.createElement("path", { d: "M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z" }));
             case "BulletList":
@@ -31,6 +37,8 @@ class Icon {
                 return (React.createElement("path", { d: "M4.146 3.646a.5.5 0 0 0 0 .708L7.793 8l-3.647 3.646a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708 0M11.5 1a.5.5 0 0 1 .5.5v13a.5.5 0 0 1-1 0v-13a.5.5 0 0 1 .5-.5", fillRule: "evenodd", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }));
             case "ChevronDown":
                 return (React.createElement("path", { fillRule: "evenodd", d: "M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708" }));
+            case "ChevronExpand":
+                return (React.createElement("path", { fillRule: "evenodd", d: "M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708m0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708" }));
             case "ChevronUp":
                 return (React.createElement("path", { fillRule: "evenodd", d: "M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z" }));
             case "CloseCircle":
@@ -120,6 +128,8 @@ class Icon {
                 return (React.createElement("path", { fillRule: "evenodd", d: "M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5m0-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5" }));
             case "TextAlingRight":
                 return (React.createElement("path", { fillRule: "evenodd", d: "M6 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5m4-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5" }));
+            case "ThreeDotsVertical":
+                return (React.createElement("path", { d: "M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0" }));
             case "TickCircle":
                 return (React.createElement(React.Fragment, null,
                     React.createElement("path", { d: "M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10Z", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),

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

@@ -85,7 +85,7 @@ export type Errors<TData> = Partial<{
 }>;
 export type MimeTypes = "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 FileCategory = "image" | "document" | "spreadsheet" | "presentation" | "archive" | "text" | "video" | "audio" | "json" | "xml" | "binary" | "other";
-export type Icons = "Add" | "ArrowLeft" | "ArrowRight" | "Bold" | "BulletList" | "CameraReels" | "CheckAll" | "ChevronBarLeft" | "ChevronBarRight" | "ChevronDown" | "ChevronUp" | "CloseCircle" | "CloseSquare" | "CloudUpload-Fill" | "Dash" | "Document" | "Download" | "ExclamationCircle" | "ExclamationDiamond-Fill" | "Eye-Fill" | "File" | "FileEarmark-Fill" | "FileTypeCsv" | "FileTypeDoc" | "FileTypeDocx" | "FileTypeHtml" | "FileTypeJson" | "FileTypePdf" | "FileTypePptx" | "FileTypeTxt" | "FileTypeXls" | "FileTypeXlsx" | "FileTypeXml" | "FileTypeZip" | "Filter" | "Floppy-Fill" | "Folder" | "Front" | "GripVertical" | "Import" | "Inbox-Fill" | "Information-Circle-Fill" | "Italic" | "NumberList" | "Strikethrough" | "TextAlingCenter" | "TextAlingLeft" | "TextAlingRight" | "TickCircle" | "Trash-Fill" | "Underline" | "Upload" | "Warning" | "XCircle-Fill";
+export type Icons = "Add" | "ArrowDown" | "ArrowDownUp" | "ArrowLeft" | "ArrowRight" | "ArrowUp" | "Bold" | "BulletList" | "CameraReels" | "CheckAll" | "ChevronBarLeft" | "ChevronBarRight" | "ChevronDown" | "ChevronExpand" | "ChevronUp" | "CloseCircle" | "CloseSquare" | "CloudUpload-Fill" | "Dash" | "Document" | "Download" | "ExclamationCircle" | "ExclamationDiamond-Fill" | "Eye-Fill" | "File" | "FileEarmark-Fill" | "FileTypeCsv" | "FileTypeDoc" | "FileTypeDocx" | "FileTypeHtml" | "FileTypeJson" | "FileTypePdf" | "FileTypePptx" | "FileTypeTxt" | "FileTypeXls" | "FileTypeXlsx" | "FileTypeXml" | "FileTypeZip" | "Filter" | "Floppy-Fill" | "Folder" | "Front" | "GripVertical" | "Import" | "Inbox-Fill" | "Information-Circle-Fill" | "Italic" | "NumberList" | "Strikethrough" | "TextAlingCenter" | "TextAlingLeft" | "TextAlingRight" | "ThreeDotsVertical" | "TickCircle" | "Trash-Fill" | "Underline" | "Upload" | "Warning" | "XCircle-Fill";
 export type PieChartDataType = {
     value: number;
     text: string;

package/package.json

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