ar-design 0.0.3 → 0.0.5

package/dist/components/button/index.js

@@ -6,7 +6,7 @@ const Button = ({ children, variant = "filled", shape, color = "primary", border
     const _button = useRef(null);
     // methods
     const handleClassName = () => {
-        let className = `ar-button-core ${variant} ${color} ${width}`;
+        let className = `ar-button ${variant} ${color} ${width}`;
         if (shape)
             className += ` ar-button-shape ${shape}`;
         if (border) {

package/dist/components/divider/index.js

@@ -1,4 +1,4 @@
 import React from "react";
 import "../../libs/styles/divider/divider.css";
-const Divider = () => React.createElement("hr", { className: "ar-divider-core" });
+const Divider = () => React.createElement("hr", { className: "ar-divider" });
 export default Divider;

package/dist/components/menu/Types.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-export type MenuItemType = "group" | "divider" | "none";
+export type MenuItemVariant = "vertical" | "horizontal";
+export type MenuItemType = "group" | "divider";
 export interface MenuProps {
     render?: string | React.JSX.Element;
     type?: MenuItemType;
@@ -7,5 +8,6 @@ export interface MenuProps {
     submenu?: MenuProps[];
 }
 export type Props = {
-    data: MenuProps[];
+    menu: MenuProps[];
+    variant?: MenuItemVariant;
 } & React.HTMLAttributes<HTMLElement>;

package/dist/components/menu/index.js

@@ -2,9 +2,9 @@
 import React, { useRef } from "react";
 import "../../libs/styles/menu/menu.css";
 import Divider from "../divider";
-const handleOnClick = (event, item) => {
+const handleOnClick = (event, item, variant) => {
     event.stopPropagation();
-    if (item.type === "group")
+    if (variant === "vertical" && item.type === "group")
         return;
     const _current = event.target;
     const ulElement = _current.nextElementSibling;
@@ -21,38 +21,47 @@ const handleOnClick = (event, item) => {
  * @param type - "group" | "divider" | "none" türlerinden birisi gönderilmelidir.
  * @returns Menü yapısını temsil eden iç içe geçmiş liste
  */
-const SubMenu = ({ items, type }) => {
+const SubMenu = ({ items, variant, type }) => {
     if (!items)
         return null;
     // refs
-    let _className_ul = useRef("ar-menu-core-list-item-groups").current;
-    let _className_li = useRef("ar-menu-core-list-item-group-item").current;
-    let _className_groupTitle = useRef("ar-menu-core-list-item-group-item-title").current;
-    console.log(type, items);
-    if (type === "group")
+    let _className_ul = useRef("ar-menu-list-item-groups").current;
+    let _className_li = useRef("ar-menu-list-item-group-item").current;
+    let _className_groupTitle = useRef("ar-menu-list-item-group-item-title").current;
+    if (variant === "vertical" && type === "group")
         _className_ul += " opened";
     return (React.createElement("ul", { className: _className_ul }, items.map((item, index) => {
+        if (variant === "vertical" && item.type === "group")
+            _className_groupTitle += " group";
         if (item.submenu && item.submenu.length > 0) {
-            if (item.type !== "group")
+            if (variant === "horizontal" || item.type !== "group")
                 _className_groupTitle += " ar-angle-down";
         }
-        return (React.createElement("li", { key: index, className: _className_li, onClick: (event) => handleOnClick(event, item) },
+        return (React.createElement("li", { key: index, className: _className_li, onClick: (event) => handleOnClick(event, item, variant) },
             React.createElement("div", { className: _className_groupTitle }, item.render),
-            React.createElement(SubMenu, { items: item.submenu, type: item.type })));
+            React.createElement(SubMenu, { items: item.submenu, variant: variant, type: item.type })));
     })));
 };
-const Menu = ({ data, ...attributes }) => {
-    // refs
-    let _className_groupTitle = useRef("ar-menu-core-list-item-group-item-title").current;
-    return (React.createElement("nav", { className: "ar-menu-core", ...attributes },
-        React.createElement("ul", { className: "ar-menu-core-list" }, data.map((menuItem, index) => {
-            if (menuItem.submenu && menuItem.submenu.length > 0) {
-                if (menuItem.type !== "group")
+const Menu = ({ menu, variant = "vertical", ...attributes }) => {
+    const handleClassName = () => {
+        let className = "ar-menu-list";
+        if (variant)
+            className += ` ${variant}`;
+        return className;
+    };
+    return (React.createElement("nav", { className: "ar-menu", ...attributes },
+        React.createElement("ul", { className: handleClassName() }, menu.map((item, index) => {
+            // refs
+            let _className_groupTitle = useRef("ar-menu-list-item-group-item-title").current;
+            if (variant === "vertical" && item.type === "group")
+                _className_groupTitle += " group";
+            if (item.submenu && item.submenu.length > 0) {
+                if (variant === "horizontal" || item.type !== "group")
                     _className_groupTitle += " ar-angle-down";
             }
-            return (React.createElement("li", { key: index, className: "ar-menu-core-list-item", onClick: (event) => handleOnClick(event, menuItem) },
-                menuItem.type === "divider" ? React.createElement(Divider, null) : React.createElement("div", { className: _className_groupTitle }, menuItem.render),
-                React.createElement(SubMenu, { items: menuItem.submenu, type: menuItem.type })));
+            return (React.createElement("li", { key: index, className: "ar-menu-list-item", onClick: (event) => handleOnClick(event, item, variant) },
+                item.type === "divider" ? React.createElement(Divider, null) : React.createElement("div", { className: _className_groupTitle }, item.render),
+                React.createElement(SubMenu, { items: item.submenu, variant: variant, type: item.type })));
         }))));
 };
 export default Menu;

package/dist/libs/styles/button/core/border.css

@@ -1,18 +1,18 @@
-.ar-button-core.border-radius-sm {
+.ar-button.border-radius-sm {
   border-radius: var(--border-radius-sm);
 }
-.ar-button-core.border-radius-lg {
+.ar-button.border-radius-lg {
   border-radius: var(--border-radius-lg);
 }
-.ar-button-core.border-radius-xl {
+.ar-button.border-radius-xl {
   border-radius: var(--border-radius-xl);
 }
-.ar-button-core.border-radius-xxl {
+.ar-button.border-radius-xxl {
   border-radius: var(--border-radius-xxl);
 }
-.ar-button-core.border-radius-pill {
+.ar-button.border-radius-pill {
   border-radius: var(--border-radius-pill);
 }
-.ar-button-core.border-radius-none {
+.ar-button.border-radius-none {
   border-radius: 0;
 }

package/dist/libs/styles/button/core/core.css

@@ -1,4 +1,4 @@
-.ar-button-core {
+.ar-button {
   position: relative;
   padding: 0.5rem 1rem;
   border: none;
@@ -7,10 +7,10 @@
   transition: background-color 150ms, border 150ms, color 150ms ease-in-out;
   overflow: hidden;
 }
-.ar-button-core.disabled {
+.ar-button.disabled {
   cursor: no-drop;
 }
 
-.ar-button-core.max-width {
+.ar-button.max-width {
   width: 100%;
 }

package/dist/libs/styles/button/core/icon.css

@@ -1,4 +1,4 @@
-.ar-button-core.icon {
+.ar-button.icon {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -7,15 +7,15 @@
   align-items: flex-start;
   gap: 0 0.5rem;
 }
-.ar-button-core.icon-row {
+.ar-button.icon-row {
   flex-direction: row;
 }
-.ar-button-core.icon-row-end {
+.ar-button.icon-row-end {
   flex-direction: row-reverse;
 }
-.ar-button-core.icon-column {
+.ar-button.icon-column {
   flex-direction: column;
 }
-.ar-button-core.icon-column-end {
+.ar-button.icon-column-end {
   flex-direction: column-reverse;
 }

package/dist/libs/styles/button/core/shape.css

@@ -1,4 +1,4 @@
-.ar-button-core.ar-button-shape {
+.ar-button.ar-button-shape {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -12,8 +12,8 @@
   min-height: 2rem;
   padding: 0 !important;
 }
-.ar-button-core.ar-button-shape.circle {
+.ar-button.ar-button-shape.circle {
   border-radius: var(--border-radius-pill);
 }
-.ar-button-core.ar-button-shape.square {
+.ar-button.ar-button-shape.square {
 }

package/dist/libs/styles/button/variant/filled/core.css

@@ -1,84 +1,84 @@
 @import url("./animation.css");
 
-.ar-button-core.filled {
+.ar-button.filled {
   border-color: transparent;
   color: var(--white);
 }
 
-.ar-button-core.filled.disabled {
+.ar-button.filled.disabled {
   background-color: var(--gray-100);
   color: var(--gray-500);
   border: solid 1px var(--gray-500);
 }
-.ar-button-core.filled:not(.disabled):active::before {
+.ar-button.filled:not(.disabled):active::before {
   position: absolute;
   inset: 0;
   content: "";
   background-color: rgba(var(--black-rgb), 0.25);
 }
 
-.ar-button-core.filled:not(.disabled).primary {
+.ar-button.filled:not(.disabled).primary {
   background-color: var(--primary);
 }
-.ar-button-core.filled:not(.disabled).primary.active {
+.ar-button.filled:not(.disabled).primary.active {
   /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
   animation: filled-primary-active-animation ease-in-out 750ms 0s 1 normal both;
 }
 
-.ar-button-core.filled:not(.disabled).secondary {
+.ar-button.filled:not(.disabled).secondary {
   background-color: var(--secondary);
 }
-.ar-button-core.filled:not(.disabled).secondary.active {
+.ar-button.filled:not(.disabled).secondary.active {
   /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
   animation: filled-secondary-active-animation ease-in-out 750ms 0s 1 normal both;
 }
 
-.ar-button-core.filled:not(.disabled).success {
+.ar-button.filled:not(.disabled).success {
   background-color: var(--success);
 }
-.ar-button-core.filled:not(.disabled).success.active {
+.ar-button.filled:not(.disabled).success.active {
   /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
   animation: filled-success-active-animation ease-in-out 750ms 0s 1 normal both;
 }
 
-.ar-button-core.filled:not(.disabled).warning {
+.ar-button.filled:not(.disabled).warning {
   background-color: var(--warning);
   color: var(--warning-font-color);
 }
-.ar-button-core.filled:not(.disabled).warning.active {
+.ar-button.filled:not(.disabled).warning.active {
   /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
   animation: filled-warning-active-animation ease-in-out 750ms 0s 1 normal both;
 }
 
-.ar-button-core.filled:not(.disabled).danger {
+.ar-button.filled:not(.disabled).danger {
   background-color: var(--danger);
 }
-.ar-button-core.filled:not(.disabled).danger.active {
+.ar-button.filled:not(.disabled).danger.active {
   /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
   animation: filled-danger-active-animation ease-in-out 750ms 0s 1 normal both;
 }
 
-.ar-button-core.filled:not(.disabled).information {
+.ar-button.filled:not(.disabled).information {
   background-color: var(--information);
 }
-.ar-button-core.filled:not(.disabled).information.active {
+.ar-button.filled:not(.disabled).information.active {
   /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
   animation: filled-information-active-animation ease-in-out 750ms 0s 1 normal both;
 }
 
-.ar-button-core.filled:not(.disabled).light {
+.ar-button.filled:not(.disabled).light {
   background-color: var(--light);
   color: var(--gray-800);
 }
-.ar-button-core.filled:not(.disabled).light.active {
+.ar-button.filled:not(.disabled).light.active {
   /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
   animation: filled-light-active-animation ease-in-out 750ms 0s 1 normal both;
 }
 
-.ar-button-core.filled:not(.disabled).dark {
+.ar-button.filled:not(.disabled).dark {
   background-color: var(--dark);
 }
-.ar-button-core.filled:not(.disabled).dark.active {
+.ar-button.filled:not(.disabled).dark.active {
   /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
   animation: filled-dark-active-animation ease-in-out 750ms 0s 1 normal both;
 }

package/dist/libs/styles/button/variant/outlined/border.css

@@ -1,64 +1,64 @@
-.ar-button-core.outlined.border-style-solid {
+.ar-button.outlined.border-style-solid {
   border-style: solid;
 }
-.ar-button-core.outlined.border-style-dashed {
+.ar-button.outlined.border-style-dashed {
   border-style: dashed;
 }
-.ar-button-core.outlined.border-style-none {
+.ar-button.outlined.border-style-none {
   border-style: none;
 }
 
-.ar-button-core.outlined.border-style-none:not(.disabled)::before {
+.ar-button.outlined.border-style-none:not(.disabled)::before {
   position: absolute;
   inset: 0;
   content: "";
 }
 
-.ar-button-core.outlined.primary.border-style-none:not(.disabled):hover::before {
+.ar-button.outlined.primary.border-style-none:not(.disabled):hover::before {
   background-color: rgba(var(--primary-rgb), 0.1);
 }
-.ar-button-core.outlined.primary.border-style-none:not(.disabled):active::before {
+.ar-button.outlined.primary.border-style-none:not(.disabled):active::before {
   background-color: rgba(var(--primary-rgb), 0.2);
 }
 
-.ar-button-core.outlined.secondary.border-style-none:not(.disabled):hover::before {
+.ar-button.outlined.secondary.border-style-none:not(.disabled):hover::before {
   background-color: rgba(var(--secondary-rgb), 0.1);
 }
-.ar-button-core.outlined.secondary.border-style-none:not(.disabled):active::before {
+.ar-button.outlined.secondary.border-style-none:not(.disabled):active::before {
   background-color: rgba(var(--secondary-rgb), 0.2);
 }
 
-.ar-button-core.outlined.success.border-style-none:not(.disabled):hover::before {
+.ar-button.outlined.success.border-style-none:not(.disabled):hover::before {
   background-color: rgba(var(--success-rgb), 0.1);
 }
-.ar-button-core.outlined.success.border-style-none:not(.disabled):active::before {
+.ar-button.outlined.success.border-style-none:not(.disabled):active::before {
   background-color: rgba(var(--success-rgb), 0.2);
 }
 
-.ar-button-core.outlined.warning.border-style-none:not(.disabled):hover::before {
+.ar-button.outlined.warning.border-style-none:not(.disabled):hover::before {
   background-color: rgba(var(--warning-rgb), 0.1);
 }
-.ar-button-core.outlined.warning.border-style-none:not(.disabled):active::before {
+.ar-button.outlined.warning.border-style-none:not(.disabled):active::before {
   background-color: rgba(var(--warning-rgb), 0.2);
 }
 
-.ar-button-core.outlined.danger.border-style-none:not(.disabled):hover::before {
+.ar-button.outlined.danger.border-style-none:not(.disabled):hover::before {
   background-color: rgba(var(--danger-rgb), 0.1);
 }
-.ar-button-core.outlined.danger.border-style-none:not(.disabled):active::before {
+.ar-button.outlined.danger.border-style-none:not(.disabled):active::before {
   background-color: rgba(var(--danger-rgb), 0.2);
 }
 
-.ar-button-core.outlined.information.border-style-none:not(.disabled):hover::before {
+.ar-button.outlined.information.border-style-none:not(.disabled):hover::before {
   background-color: rgba(var(--information-rgb), 0.1);
 }
-.ar-button-core.outlined.information.border-style-none:not(.disabled):active::before {
+.ar-button.outlined.information.border-style-none:not(.disabled):active::before {
   background-color: rgba(var(--information-rgb), 0.2);
 }
 
-.ar-button-core.outlined.dark.border-style-none:not(.disabled):hover::before {
+.ar-button.outlined.dark.border-style-none:not(.disabled):hover::before {
   background-color: rgba(var(--dark-rgb), 0.1);
 }
-.ar-button-core.outlined.dark.border-style-none:not(.disabled):active::before {
+.ar-button.outlined.dark.border-style-none:not(.disabled):active::before {
   background-color: rgba(var(--dark-rgb), 0.2);
 }

package/dist/libs/styles/button/variant/outlined/core.css

@@ -1,85 +1,85 @@
 @import url("./animation.css");
 @import url("./border.css");
 
-.ar-button-core.outlined {
+.ar-button.outlined {
   background-color: transparent;
   border-width: 1px;
   border-color: transparent;
 }
 
-.ar-button-core.outlined.disabled {
+.ar-button.outlined.disabled {
   border-color: var(--gray-500);
   color: var(--gray-500);
 }
 
-.ar-button-core.outlined:not(.disabled).primary {
+.ar-button.outlined:not(.disabled).primary {
   border-color: var(--primary);
   color: var(--primary);
 }
-.ar-button-core.outlined:not(.disabled).primary.active {
+.ar-button.outlined:not(.disabled).primary.active {
   /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
   animation: outlined-primary-active-animation ease-in-out 750ms 0s 1 normal both;
 }
 
-.ar-button-core.outlined:not(.disabled).secondary {
+.ar-button.outlined:not(.disabled).secondary {
   border-color: var(--secondary);
   color: var(--secondary);
 }
-.ar-button-core.outlined:not(.disabled).secondary.active {
+.ar-button.outlined:not(.disabled).secondary.active {
   /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
   animation: outlined-secondary-active-animation ease-in-out 750ms 0s 1 normal both;
 }
 
-.ar-button-core.outlined:not(.disabled).success {
+.ar-button.outlined:not(.disabled).success {
   border-color: var(--success);
   color: var(--success);
 }
-.ar-button-core.outlined:not(.disabled).success.active {
+.ar-button.outlined:not(.disabled).success.active {
   /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
   animation: outlined-success-active-animation ease-in-out 750ms 0s 1 normal both;
 }
 
-.ar-button-core.outlined:not(.disabled).warning {
+.ar-button.outlined:not(.disabled).warning {
   border-color: var(--warning);
   color: var(--warning);
 }
-.ar-button-core.outlined:not(.disabled).warning.active {
+.ar-button.outlined:not(.disabled).warning.active {
   /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
   animation: outlined-warning-active-animation ease-in-out 750ms 0s 1 normal both;
 }
 
-.ar-button-core.outlined:not(.disabled).danger {
+.ar-button.outlined:not(.disabled).danger {
   border-color: var(--danger);
   color: var(--danger);
 }
-.ar-button-core.outlined:not(.disabled).danger.active {
+.ar-button.outlined:not(.disabled).danger.active {
   /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
   animation: outlined-danger-active-animation ease-in-out 750ms 0s 1 normal both;
 }
 
-.ar-button-core.outlined:not(.disabled).information {
+.ar-button.outlined:not(.disabled).information {
   border-color: var(--information);
   color: var(--information);
 }
-.ar-button-core.outlined:not(.disabled).information.active {
+.ar-button.outlined:not(.disabled).information.active {
   /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
   animation: outlined-information-active-animation ease-in-out 750ms 0s 1 normal both;
 }
 
-.ar-button-core.outlined:not(.disabled).light {
+.ar-button.outlined:not(.disabled).light {
   border-color: var(--light);
   color: var(--gray-500);
 }
-.ar-button-core.outlined:not(.disabled).light.active {
+.ar-button.outlined:not(.disabled).light.active {
   /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
   animation: outlined-light-active-animation ease-in-out 750ms 0s 1 normal both;
 }
 
-.ar-button-core.outlined:not(.disabled).dark {
+.ar-button.outlined:not(.disabled).dark {
   border-color: var(--dark);
   color: var(--dark);
 }
-.ar-button-core.outlined:not(.disabled).dark.active {
+.ar-button.outlined:not(.disabled).dark.active {
   /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
   animation: outlined-dark-active-animation ease-in-out 750ms 0s 1 normal both;
 }

package/dist/libs/styles/divider/core/core.css

@@ -1,4 +1,4 @@
-.ar-divider-core {
+.ar-divider {
   border: none;
   border-bottom: solid 1px var(--gray-200);
 }

package/dist/libs/styles/menu/core/core.css

@@ -1,37 +1,48 @@
 @import url("./open-or-close.css");
 
-.ar-menu-core {
+.ar-menu {
   background-color: var(--white);
 }
-.ar-menu-core ul {
+.ar-menu ul {
   margin: 0;
   padding: 0;
   list-style: none;
 }
-.ar-menu-core ul li {
-  padding: 0.75rem;
-}
-.ar-menu-core ul li:last-child {
+.ar-menu ul li:last-child {
   padding-bottom: 0;
 }
-.ar-menu-core ul li ul {
+.ar-menu ul li ul {
   margin-left: 0.25rem;
   padding-left: 0.25rem;
 }
 
-.ar-menu-core > .ar-menu-core-list {
+.ar-menu > .ar-menu-list {
   display: flex;
-  flex-direction: column;
-}
-.ar-menu-core > .ar-menu-core-list > .ar-menu-core-list-item {
-}
-.ar-menu-core > .ar-menu-core-list > .ar-menu-core-list-item > .ar-menu-core-list-item-group-item-title {
 }
-.ar-menu-core > .ar-menu-core-list > .ar-menu-core-list-item > .ar-menu-core-list-item-groups {
+.ar-menu .ar-menu-list-item-group-item-title {
+  display: flex;
+  align-items: center;
+  height: 2.5rem;
+  border-radius: var(--border-radius-lg);
+  padding-left: 1rem;
+  user-select: none;
 }
-.ar-menu-core
-  > .ar-menu-core-list
-  > .ar-menu-core-list-item
-  > .ar-menu-core-list-item-groups
-  > .ar-menu-core-list-item-group-item {
+.ar-menu .ar-menu-list-item-group-item-title:not(.group) > * {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+.ar-menu .ar-menu-list-item-group-item-title:not(.group):hover {
+  background-color: var(--gray-100);
+}
+.ar-menu .ar-menu-list-item-group-item-title.selection-item {
+  background-color: red;
+}
+.ar-menu .ar-menu-list-item-group-item-title.group {
+  margin-left: 1rem;
+  padding-left: 0;
+  border-radius: 0;
+  border-bottom: solid 1px var(--gray-100);
+  color: var(--gray-500);
 }

package/dist/libs/styles/menu/core/open-or-close.css

@@ -1,32 +1,36 @@
-.ar-menu-core ul li ul {
+.ar-menu ul li ul {
   opacity: 0;
   max-height: 0;
   overflow: hidden;
-  transition: max-height 150ms ease-in-out, opacity 150ms ease-in-out;
+  transition: max-height 250ms ease-in-out, opacity 250ms cubic-bezier(1, 0, 0, 1);
 }
-.ar-menu-core .ar-menu-core-list-item-groups.opened {
+.ar-menu .ar-menu-list-item-groups.opened {
   opacity: 1;
   max-height: 100rem;
 }
-.ar-menu-core .ar-menu-core-list-item-group-item-title {
+.ar-menu .ar-menu-list-item-group-item-title {
   display: flex;
   align-items: center;
 }
-.ar-menu-core .ar-menu-core-list-item-group-item-title:is(.ar-angle-down, .ar-angle-up)::after {
+.ar-menu .ar-menu-list-item-group-item-title:is(.ar-angle-down, .ar-angle-up) {
+  cursor: pointer;
+}
+.ar-menu .ar-menu-list-item-group-item-title:is(.ar-angle-down, .ar-angle-up)::after {
   display: inline-block;
   position: relative;
-  top: -1.5px;
+  top: 0.5px;
   content: "";
-  width: 0.25rem;
-  height: 0.25rem;
+  width: 0.5rem;
+  height: 0.5rem;
   margin-left: 0.5rem;
   border: solid 2px transparent;
-  border-right-color: red;
-  border-bottom-color: red;
+  border-right-color: var(--red);
+  border-bottom-color: var(--red);
   transform-origin: center;
   transform: rotate(45deg);
-  transition: transform 250ms ease-in-out;
+  transition: top 250ms, transform 250ms ease-in-out;
 }
-.ar-menu-core .ar-menu-core-list-item-group-item-title.ar-angle-up::after {
+.ar-menu .ar-menu-list-item-group-item-title.ar-angle-up::after {
+  top: -1px;
   transform: rotate(585deg);
 }

package/dist/libs/styles/menu/menu.css

@@ -1 +1,2 @@
 @import url("./core/core.css");
+@import url("./variant/vertical.css");

package/dist/libs/styles/menu/variant/horizontal.css

@@ -0,0 +1,3 @@
+.ar-menu-list.horizontal {
+  flex-direction: row;
+}

package/dist/libs/styles/menu/variant/vertical.css

@@ -0,0 +1,3 @@
+.ar-menu-list.vertical {
+  flex-direction: column;
+}

package/package.json

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