ar-design 0.0.4 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/components/button/index.js +1 -1
  2. package/dist/components/divider/index.js +1 -1
  3. package/dist/components/menu/index.js +48 -19
  4. package/dist/libs/styles/button/core/border.css +6 -6
  5. package/dist/libs/styles/button/core/core.css +3 -3
  6. package/dist/libs/styles/button/core/icon.css +5 -5
  7. package/dist/libs/styles/button/core/shape.css +3 -3
  8. package/dist/libs/styles/button/variant/filled/core.css +19 -19
  9. package/dist/libs/styles/button/variant/outlined/border.css +18 -18
  10. package/dist/libs/styles/button/variant/outlined/core.css +18 -18
  11. package/dist/libs/styles/divider/core/core.css +1 -1
  12. package/dist/libs/styles/menu/core/core.css +20 -17
  13. package/dist/libs/styles/menu/core/open-or-close.css +6 -6
  14. package/dist/libs/styles/menu/core/selected.css +13 -0
  15. package/dist/libs/styles/menu/variant/horizontal.css +3 -0
  16. package/dist/libs/styles/menu/variant/vertical.css +1 -1
  17. package/package.json +1 -1
package/dist/components/button/index.js CHANGED
@@ -6,7 +6,7 @@ const Button = ({ children, variant = "filled", shape, color = "primary", border
6
6
  const _button = useRef(null);
7
7
  // methods
8
8
  const handleClassName = () => {
9
- let className = `ar-button-core ${variant} ${color} ${width}`;
9
+ let className = `ar-button ${variant} ${color} ${width}`;
10
10
  if (shape)
11
11
  className += ` ar-button-shape ${shape}`;
12
12
  if (border) {
package/dist/components/divider/index.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import "../../libs/styles/divider/divider.css";
3
- const Divider = () => React.createElement("hr", { className: "ar-divider-core" });
3
+ const Divider = () => React.createElement("hr", { className: "ar-divider" });
4
4
  export default Divider;
package/dist/components/menu/index.js CHANGED
@@ -1,8 +1,8 @@
1
1
  "use client";
2
- import React, { useRef } from "react";
2
+ import React, { useRef, useState } from "react";
3
3
  import "../../libs/styles/menu/menu.css";
4
4
  import Divider from "../divider";
5
- const handleOnClick = (event, item, variant) => {
5
+ const handleOnClick = (event, item, variant, setSelectedItem, setSelectedMenu) => {
6
6
  event.stopPropagation();
7
7
  if (variant === "vertical" && item.type === "group")
8
8
  return;
@@ -14,54 +14,83 @@ const handleOnClick = (event, item, variant) => {
14
14
  }
15
15
  if (ulElement)
16
16
  ulElement.classList.toggle("opened");
17
+ // Birden fazla menü açılmışsa...
18
+ console.log(setSelectedMenu);
19
+ if (setSelectedMenu)
20
+ setSelectedMenu((prevSelectedMenu) => [...prevSelectedMenu, item]);
21
+ else {
22
+ if (setSelectedItem)
23
+ setSelectedItem(item);
24
+ }
17
25
  };
18
26
  /**
19
27
  * Alt menüleri sürekli olarak eklemek için özyinelemeli fonksiyon.
20
- * @param item - Menü öğelerinin dizisi
21
- * @param type - "group" | "divider" | "none" türlerinden birisi gönderilmelidir.
28
+ * @param items - Menü öğelerinin dizisi
29
+ * @param variant - Menü varyantı, "vertical" veya "horizontal"
30
+ * @param type - "group" | "divider" türlerinden birisi olmalıdır.
22
31
  * @returns Menü yapısını temsil eden iç içe geçmiş liste
23
32
  */
24
- const SubMenu = ({ items, variant, type }) => {
33
+ const SubMenu = ({ items, variant, type, setSelectedMenu, selectedMenu, setSelectedItem, selectedItem }) => {
25
34
  if (!items)
26
35
  return null;
27
36
  // refs
28
- let _className_ul = useRef("ar-menu-core-list-item-groups").current;
29
- let _className_li = useRef("ar-menu-core-list-item-group-item").current;
30
- let _className_groupTitle = useRef("ar-menu-core-list-item-group-item-title").current;
37
+ let _className_ul = useRef("ar-menu-list-item-groups").current;
31
38
  if (variant === "vertical" && type === "group")
32
39
  _className_ul += " opened";
33
40
  return (React.createElement("ul", { className: _className_ul }, items.map((item, index) => {
41
+ // refs
42
+ let _className_li = useRef("ar-menu-list-item-group-item").current;
43
+ let _className_groupTitle = useRef("ar-menu-list-item-group-item-title").current;
44
+ if (variant === "vertical" && item.type === "group")
45
+ _className_groupTitle += " group";
34
46
  if (item.submenu && item.submenu.length > 0) {
35
- if (variant === "vertical" && item.type === "group")
36
- _className_groupTitle += " group";
37
47
  if (variant === "horizontal" || item.type !== "group")
38
48
  _className_groupTitle += " ar-angle-down";
49
+ // Eğer seçili olan menüyse "selected" sınıfını ekler.
50
+ if (selectedMenu.length > 0 && selectedMenu.includes(item) && item.type !== "group")
51
+ _className_li += " selected";
39
52
  }
40
- return (React.createElement("li", { key: index, className: _className_li, onClick: (event) => handleOnClick(event, item, variant) },
53
+ // Eğer seçili olan menüyse "selected" sınıfını ekler.
54
+ if (selectedItem === item)
55
+ _className_groupTitle += " selected";
56
+ return (React.createElement("li", { key: index, className: _className_li, onClick: (event) => {
57
+ if (item.submenu && item.submenu.length > 0)
58
+ handleOnClick(event, item, variant, null, setSelectedMenu);
59
+ else
60
+ handleOnClick(event, item, variant, setSelectedItem, null);
61
+ } },
41
62
  React.createElement("div", { className: _className_groupTitle }, item.render),
42
- React.createElement(SubMenu, { items: item.submenu, variant: variant, type: item.type })));
63
+ item.submenu && (React.createElement(SubMenu, { items: item.submenu, variant: variant, type: item.type, setSelectedMenu: setSelectedMenu, selectedMenu: selectedMenu, setSelectedItem: setSelectedItem, selectedItem: selectedItem }))));
43
64
  })));
44
65
  };
45
66
  const Menu = ({ menu, variant = "vertical", ...attributes }) => {
67
+ // refs
68
+ let _className_li = useRef("ar-menu-list-item").current;
69
+ // states
70
+ const [selectedMenu, setSelectedMenu] = useState([]);
71
+ const [selectedItem, setSelectedItem] = useState(null);
46
72
  const handleClassName = () => {
47
- let className = "ar-menu-core-list";
73
+ let className = "ar-menu-list";
48
74
  if (variant)
49
75
  className += ` ${variant}`;
50
76
  return className;
51
77
  };
52
- return (React.createElement("nav", { className: "ar-menu-core", ...attributes },
78
+ return (React.createElement("nav", { className: "ar-menu", ...attributes },
53
79
  React.createElement("ul", { className: handleClassName() }, menu.map((item, index) => {
54
80
  // refs
55
- let _className_groupTitle = useRef("ar-menu-core-list-item-group-item-title").current;
81
+ let _className_groupTitle = useRef("ar-menu-list-item-group-item-title").current;
82
+ if (variant === "vertical" && item.type === "group")
83
+ _className_groupTitle += " group";
56
84
  if (item.submenu && item.submenu.length > 0) {
57
- if (variant === "vertical" && item.type === "group")
58
- _className_groupTitle += " group";
59
85
  if (variant === "horizontal" || item.type !== "group")
60
86
  _className_groupTitle += " ar-angle-down";
61
87
  }
62
- return (React.createElement("li", { key: index, className: "ar-menu-core-list-item", onClick: (event) => handleOnClick(event, item, variant) },
88
+ // Eğer seçili olan menüyse "selected" sınıfını ekler.
89
+ if (selectedMenu.length > 0 && selectedMenu.includes(item) && item.type !== "group")
90
+ _className_li += " selected";
91
+ return (React.createElement("li", { key: index, className: _className_li, onClick: (event) => handleOnClick(event, item, variant, null, setSelectedMenu) },
63
92
  item.type === "divider" ? React.createElement(Divider, null) : React.createElement("div", { className: _className_groupTitle }, item.render),
64
- React.createElement(SubMenu, { items: item.submenu, variant: variant, type: item.type })));
93
+ item.submenu && (React.createElement(SubMenu, { items: item.submenu, variant: variant, type: item.type, setSelectedMenu: setSelectedMenu, selectedMenu: selectedMenu, setSelectedItem: setSelectedItem, selectedItem: selectedItem }))));
65
94
  }))));
66
95
  };
67
96
  export default Menu;
package/dist/libs/styles/button/core/border.css CHANGED
@@ -1,18 +1,18 @@
1
- .ar-button-core.border-radius-sm {
1
+ .ar-button.border-radius-sm {
2
2
  border-radius: var(--border-radius-sm);
3
3
  }
4
- .ar-button-core.border-radius-lg {
4
+ .ar-button.border-radius-lg {
5
5
  border-radius: var(--border-radius-lg);
6
6
  }
7
- .ar-button-core.border-radius-xl {
7
+ .ar-button.border-radius-xl {
8
8
  border-radius: var(--border-radius-xl);
9
9
  }
10
- .ar-button-core.border-radius-xxl {
10
+ .ar-button.border-radius-xxl {
11
11
  border-radius: var(--border-radius-xxl);
12
12
  }
13
- .ar-button-core.border-radius-pill {
13
+ .ar-button.border-radius-pill {
14
14
  border-radius: var(--border-radius-pill);
15
15
  }
16
- .ar-button-core.border-radius-none {
16
+ .ar-button.border-radius-none {
17
17
  border-radius: 0;
18
18
  }
package/dist/libs/styles/button/core/core.css CHANGED
@@ -1,4 +1,4 @@
1
- .ar-button-core {
1
+ .ar-button {
2
2
  position: relative;
3
3
  padding: 0.5rem 1rem;
4
4
  border: none;
@@ -7,10 +7,10 @@
7
7
  transition: background-color 150ms, border 150ms, color 150ms ease-in-out;
8
8
  overflow: hidden;
9
9
  }
10
- .ar-button-core.disabled {
10
+ .ar-button.disabled {
11
11
  cursor: no-drop;
12
12
  }
13
13
 
14
- .ar-button-core.max-width {
14
+ .ar-button.max-width {
15
15
  width: 100%;
16
16
  }
package/dist/libs/styles/button/core/icon.css CHANGED
@@ -1,4 +1,4 @@
1
- .ar-button-core.icon {
1
+ .ar-button.icon {
2
2
  display: -webkit-box;
3
3
  display: -ms-flexbox;
4
4
  display: flex;
@@ -7,15 +7,15 @@
7
7
  align-items: flex-start;
8
8
  gap: 0 0.5rem;
9
9
  }
10
- .ar-button-core.icon-row {
10
+ .ar-button.icon-row {
11
11
  flex-direction: row;
12
12
  }
13
- .ar-button-core.icon-row-end {
13
+ .ar-button.icon-row-end {
14
14
  flex-direction: row-reverse;
15
15
  }
16
- .ar-button-core.icon-column {
16
+ .ar-button.icon-column {
17
17
  flex-direction: column;
18
18
  }
19
- .ar-button-core.icon-column-end {
19
+ .ar-button.icon-column-end {
20
20
  flex-direction: column-reverse;
21
21
  }
package/dist/libs/styles/button/core/shape.css CHANGED
@@ -1,4 +1,4 @@
1
- .ar-button-core.ar-button-shape {
1
+ .ar-button.ar-button-shape {
2
2
  display: -webkit-box;
3
3
  display: -ms-flexbox;
4
4
  display: flex;
@@ -12,8 +12,8 @@
12
12
  min-height: 2rem;
13
13
  padding: 0 !important;
14
14
  }
15
- .ar-button-core.ar-button-shape.circle {
15
+ .ar-button.ar-button-shape.circle {
16
16
  border-radius: var(--border-radius-pill);
17
17
  }
18
- .ar-button-core.ar-button-shape.square {
18
+ .ar-button.ar-button-shape.square {
19
19
  }
package/dist/libs/styles/button/variant/filled/core.css CHANGED
@@ -1,84 +1,84 @@
1
1
  @import url("./animation.css");
2
2
 
3
- .ar-button-core.filled {
3
+ .ar-button.filled {
4
4
  border-color: transparent;
5
5
  color: var(--white);
6
6
  }
7
7
 
8
- .ar-button-core.filled.disabled {
8
+ .ar-button.filled.disabled {
9
9
  background-color: var(--gray-100);
10
10
  color: var(--gray-500);
11
11
  border: solid 1px var(--gray-500);
12
12
  }
13
- .ar-button-core.filled:not(.disabled):active::before {
13
+ .ar-button.filled:not(.disabled):active::before {
14
14
  position: absolute;
15
15
  inset: 0;
16
16
  content: "";
17
17
  background-color: rgba(var(--black-rgb), 0.25);
18
18
  }
19
19
 
20
- .ar-button-core.filled:not(.disabled).primary {
20
+ .ar-button.filled:not(.disabled).primary {
21
21
  background-color: var(--primary);
22
22
  }
23
- .ar-button-core.filled:not(.disabled).primary.active {
23
+ .ar-button.filled:not(.disabled).primary.active {
24
24
  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
25
25
  animation: filled-primary-active-animation ease-in-out 750ms 0s 1 normal both;
26
26
  }
27
27
 
28
- .ar-button-core.filled:not(.disabled).secondary {
28
+ .ar-button.filled:not(.disabled).secondary {
29
29
  background-color: var(--secondary);
30
30
  }
31
- .ar-button-core.filled:not(.disabled).secondary.active {
31
+ .ar-button.filled:not(.disabled).secondary.active {
32
32
  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
33
33
  animation: filled-secondary-active-animation ease-in-out 750ms 0s 1 normal both;
34
34
  }
35
35
 
36
- .ar-button-core.filled:not(.disabled).success {
36
+ .ar-button.filled:not(.disabled).success {
37
37
  background-color: var(--success);
38
38
  }
39
- .ar-button-core.filled:not(.disabled).success.active {
39
+ .ar-button.filled:not(.disabled).success.active {
40
40
  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
41
41
  animation: filled-success-active-animation ease-in-out 750ms 0s 1 normal both;
42
42
  }
43
43
 
44
- .ar-button-core.filled:not(.disabled).warning {
44
+ .ar-button.filled:not(.disabled).warning {
45
45
  background-color: var(--warning);
46
46
  color: var(--warning-font-color);
47
47
  }
48
- .ar-button-core.filled:not(.disabled).warning.active {
48
+ .ar-button.filled:not(.disabled).warning.active {
49
49
  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
50
50
  animation: filled-warning-active-animation ease-in-out 750ms 0s 1 normal both;
51
51
  }
52
52
 
53
- .ar-button-core.filled:not(.disabled).danger {
53
+ .ar-button.filled:not(.disabled).danger {
54
54
  background-color: var(--danger);
55
55
  }
56
- .ar-button-core.filled:not(.disabled).danger.active {
56
+ .ar-button.filled:not(.disabled).danger.active {
57
57
  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
58
58
  animation: filled-danger-active-animation ease-in-out 750ms 0s 1 normal both;
59
59
  }
60
60
 
61
- .ar-button-core.filled:not(.disabled).information {
61
+ .ar-button.filled:not(.disabled).information {
62
62
  background-color: var(--information);
63
63
  }
64
- .ar-button-core.filled:not(.disabled).information.active {
64
+ .ar-button.filled:not(.disabled).information.active {
65
65
  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
66
66
  animation: filled-information-active-animation ease-in-out 750ms 0s 1 normal both;
67
67
  }
68
68
 
69
- .ar-button-core.filled:not(.disabled).light {
69
+ .ar-button.filled:not(.disabled).light {
70
70
  background-color: var(--light);
71
71
  color: var(--gray-800);
72
72
  }
73
- .ar-button-core.filled:not(.disabled).light.active {
73
+ .ar-button.filled:not(.disabled).light.active {
74
74
  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
75
75
  animation: filled-light-active-animation ease-in-out 750ms 0s 1 normal both;
76
76
  }
77
77
 
78
- .ar-button-core.filled:not(.disabled).dark {
78
+ .ar-button.filled:not(.disabled).dark {
79
79
  background-color: var(--dark);
80
80
  }
81
- .ar-button-core.filled:not(.disabled).dark.active {
81
+ .ar-button.filled:not(.disabled).dark.active {
82
82
  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
83
83
  animation: filled-dark-active-animation ease-in-out 750ms 0s 1 normal both;
84
84
  }
package/dist/libs/styles/button/variant/outlined/border.css CHANGED
@@ -1,64 +1,64 @@
1
- .ar-button-core.outlined.border-style-solid {
1
+ .ar-button.outlined.border-style-solid {
2
2
  border-style: solid;
3
3
  }
4
- .ar-button-core.outlined.border-style-dashed {
4
+ .ar-button.outlined.border-style-dashed {
5
5
  border-style: dashed;
6
6
  }
7
- .ar-button-core.outlined.border-style-none {
7
+ .ar-button.outlined.border-style-none {
8
8
  border-style: none;
9
9
  }
10
10
 
11
- .ar-button-core.outlined.border-style-none:not(.disabled)::before {
11
+ .ar-button.outlined.border-style-none:not(.disabled)::before {
12
12
  position: absolute;
13
13
  inset: 0;
14
14
  content: "";
15
15
  }
16
16
 
17
- .ar-button-core.outlined.primary.border-style-none:not(.disabled):hover::before {
17
+ .ar-button.outlined.primary.border-style-none:not(.disabled):hover::before {
18
18
  background-color: rgba(var(--primary-rgb), 0.1);
19
19
  }
20
- .ar-button-core.outlined.primary.border-style-none:not(.disabled):active::before {
20
+ .ar-button.outlined.primary.border-style-none:not(.disabled):active::before {
21
21
  background-color: rgba(var(--primary-rgb), 0.2);
22
22
  }
23
23
 
24
- .ar-button-core.outlined.secondary.border-style-none:not(.disabled):hover::before {
24
+ .ar-button.outlined.secondary.border-style-none:not(.disabled):hover::before {
25
25
  background-color: rgba(var(--secondary-rgb), 0.1);
26
26
  }
27
- .ar-button-core.outlined.secondary.border-style-none:not(.disabled):active::before {
27
+ .ar-button.outlined.secondary.border-style-none:not(.disabled):active::before {
28
28
  background-color: rgba(var(--secondary-rgb), 0.2);
29
29
  }
30
30
 
31
- .ar-button-core.outlined.success.border-style-none:not(.disabled):hover::before {
31
+ .ar-button.outlined.success.border-style-none:not(.disabled):hover::before {
32
32
  background-color: rgba(var(--success-rgb), 0.1);
33
33
  }
34
- .ar-button-core.outlined.success.border-style-none:not(.disabled):active::before {
34
+ .ar-button.outlined.success.border-style-none:not(.disabled):active::before {
35
35
  background-color: rgba(var(--success-rgb), 0.2);
36
36
  }
37
37
 
38
- .ar-button-core.outlined.warning.border-style-none:not(.disabled):hover::before {
38
+ .ar-button.outlined.warning.border-style-none:not(.disabled):hover::before {
39
39
  background-color: rgba(var(--warning-rgb), 0.1);
40
40
  }
41
- .ar-button-core.outlined.warning.border-style-none:not(.disabled):active::before {
41
+ .ar-button.outlined.warning.border-style-none:not(.disabled):active::before {
42
42
  background-color: rgba(var(--warning-rgb), 0.2);
43
43
  }
44
44
 
45
- .ar-button-core.outlined.danger.border-style-none:not(.disabled):hover::before {
45
+ .ar-button.outlined.danger.border-style-none:not(.disabled):hover::before {
46
46
  background-color: rgba(var(--danger-rgb), 0.1);
47
47
  }
48
- .ar-button-core.outlined.danger.border-style-none:not(.disabled):active::before {
48
+ .ar-button.outlined.danger.border-style-none:not(.disabled):active::before {
49
49
  background-color: rgba(var(--danger-rgb), 0.2);
50
50
  }
51
51
 
52
- .ar-button-core.outlined.information.border-style-none:not(.disabled):hover::before {
52
+ .ar-button.outlined.information.border-style-none:not(.disabled):hover::before {
53
53
  background-color: rgba(var(--information-rgb), 0.1);
54
54
  }
55
- .ar-button-core.outlined.information.border-style-none:not(.disabled):active::before {
55
+ .ar-button.outlined.information.border-style-none:not(.disabled):active::before {
56
56
  background-color: rgba(var(--information-rgb), 0.2);
57
57
  }
58
58
 
59
- .ar-button-core.outlined.dark.border-style-none:not(.disabled):hover::before {
59
+ .ar-button.outlined.dark.border-style-none:not(.disabled):hover::before {
60
60
  background-color: rgba(var(--dark-rgb), 0.1);
61
61
  }
62
- .ar-button-core.outlined.dark.border-style-none:not(.disabled):active::before {
62
+ .ar-button.outlined.dark.border-style-none:not(.disabled):active::before {
63
63
  background-color: rgba(var(--dark-rgb), 0.2);
64
64
  }
package/dist/libs/styles/button/variant/outlined/core.css CHANGED
@@ -1,85 +1,85 @@
1
1
  @import url("./animation.css");
2
2
  @import url("./border.css");
3
3
 
4
- .ar-button-core.outlined {
4
+ .ar-button.outlined {
5
5
  background-color: transparent;
6
6
  border-width: 1px;
7
7
  border-color: transparent;
8
8
  }
9
9
 
10
- .ar-button-core.outlined.disabled {
10
+ .ar-button.outlined.disabled {
11
11
  border-color: var(--gray-500);
12
12
  color: var(--gray-500);
13
13
  }
14
14
 
15
- .ar-button-core.outlined:not(.disabled).primary {
15
+ .ar-button.outlined:not(.disabled).primary {
16
16
  border-color: var(--primary);
17
17
  color: var(--primary);
18
18
  }
19
- .ar-button-core.outlined:not(.disabled).primary.active {
19
+ .ar-button.outlined:not(.disabled).primary.active {
20
20
  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
21
21
  animation: outlined-primary-active-animation ease-in-out 750ms 0s 1 normal both;
22
22
  }
23
23
 
24
- .ar-button-core.outlined:not(.disabled).secondary {
24
+ .ar-button.outlined:not(.disabled).secondary {
25
25
  border-color: var(--secondary);
26
26
  color: var(--secondary);
27
27
  }
28
- .ar-button-core.outlined:not(.disabled).secondary.active {
28
+ .ar-button.outlined:not(.disabled).secondary.active {
29
29
  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
30
30
  animation: outlined-secondary-active-animation ease-in-out 750ms 0s 1 normal both;
31
31
  }
32
32
 
33
- .ar-button-core.outlined:not(.disabled).success {
33
+ .ar-button.outlined:not(.disabled).success {
34
34
  border-color: var(--success);
35
35
  color: var(--success);
36
36
  }
37
- .ar-button-core.outlined:not(.disabled).success.active {
37
+ .ar-button.outlined:not(.disabled).success.active {
38
38
  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
39
39
  animation: outlined-success-active-animation ease-in-out 750ms 0s 1 normal both;
40
40
  }
41
41
 
42
- .ar-button-core.outlined:not(.disabled).warning {
42
+ .ar-button.outlined:not(.disabled).warning {
43
43
  border-color: var(--warning);
44
44
  color: var(--warning);
45
45
  }
46
- .ar-button-core.outlined:not(.disabled).warning.active {
46
+ .ar-button.outlined:not(.disabled).warning.active {
47
47
  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
48
48
  animation: outlined-warning-active-animation ease-in-out 750ms 0s 1 normal both;
49
49
  }
50
50
 
51
- .ar-button-core.outlined:not(.disabled).danger {
51
+ .ar-button.outlined:not(.disabled).danger {
52
52
  border-color: var(--danger);
53
53
  color: var(--danger);
54
54
  }
55
- .ar-button-core.outlined:not(.disabled).danger.active {
55
+ .ar-button.outlined:not(.disabled).danger.active {
56
56
  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
57
57
  animation: outlined-danger-active-animation ease-in-out 750ms 0s 1 normal both;
58
58
  }
59
59
 
60
- .ar-button-core.outlined:not(.disabled).information {
60
+ .ar-button.outlined:not(.disabled).information {
61
61
  border-color: var(--information);
62
62
  color: var(--information);
63
63
  }
64
- .ar-button-core.outlined:not(.disabled).information.active {
64
+ .ar-button.outlined:not(.disabled).information.active {
65
65
  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
66
66
  animation: outlined-information-active-animation ease-in-out 750ms 0s 1 normal both;
67
67
  }
68
68
 
69
- .ar-button-core.outlined:not(.disabled).light {
69
+ .ar-button.outlined:not(.disabled).light {
70
70
  border-color: var(--light);
71
71
  color: var(--gray-500);
72
72
  }
73
- .ar-button-core.outlined:not(.disabled).light.active {
73
+ .ar-button.outlined:not(.disabled).light.active {
74
74
  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
75
75
  animation: outlined-light-active-animation ease-in-out 750ms 0s 1 normal both;
76
76
  }
77
77
 
78
- .ar-button-core.outlined:not(.disabled).dark {
78
+ .ar-button.outlined:not(.disabled).dark {
79
79
  border-color: var(--dark);
80
80
  color: var(--dark);
81
81
  }
82
- .ar-button-core.outlined:not(.disabled).dark.active {
82
+ .ar-button.outlined:not(.disabled).dark.active {
83
83
  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
84
84
  animation: outlined-dark-active-animation ease-in-out 750ms 0s 1 normal both;
85
85
  }
package/dist/libs/styles/divider/core/core.css CHANGED
@@ -1,4 +1,4 @@
1
- .ar-divider-core {
1
+ .ar-divider {
2
2
  border: none;
3
3
  border-bottom: solid 1px var(--gray-200);
4
4
  }
package/dist/libs/styles/menu/core/core.css CHANGED
@@ -1,46 +1,49 @@
1
+ @import url("./selected.css");
1
2
  @import url("./open-or-close.css");
2
3
 
3
- .ar-menu-core {
4
+ .ar-menu {
4
5
  background-color: var(--white);
5
6
  }
6
- .ar-menu-core ul {
7
+ .ar-menu ul {
7
8
  margin: 0;
8
9
  padding: 0;
9
10
  list-style: none;
10
11
  }
11
- .ar-menu-core ul li {
12
- }
13
- .ar-menu-core ul li:last-child {
12
+ .ar-menu ul li:last-child {
14
13
  padding-bottom: 0;
15
14
  }
16
- .ar-menu-core ul li ul {
17
- margin-left: 0.25rem;
18
- padding-left: 0.25rem;
15
+ .ar-menu ul li ul {
16
+ margin-left: 0.5rem;
17
+ padding-left: 0.5rem;
19
18
  }
20
19
 
21
- .ar-menu-core > .ar-menu-core-list {
20
+ .ar-menu > .ar-menu-list {
22
21
  display: flex;
23
22
  }
24
-
25
- .ar-menu-core .ar-menu-core-list-item-group-item-title {
23
+ .ar-menu .ar-menu-list-item-group-item-title {
26
24
  display: flex;
27
25
  align-items: center;
28
26
  height: 2.5rem;
29
27
  border-radius: var(--border-radius-lg);
30
- padding-left: 0.75rem;
28
+ padding-left: 1rem;
29
+ user-select: none;
31
30
  }
32
- .ar-menu-core .ar-menu-core-list-item-group-item-title:not(.group) > * {
31
+ .ar-menu .ar-menu-list-item-group-item-title:not(.group) > * {
33
32
  display: flex;
34
33
  align-items: center;
35
34
  width: 100%;
36
35
  height: 100%;
37
36
  }
38
- .ar-menu-core .ar-menu-core-list-item-group-item-title:not(.group):hover {
37
+ .ar-menu .ar-menu-list-item-group-item-title:not(.group):hover {
39
38
  background-color: var(--gray-100);
40
39
  }
41
- .ar-menu-core .ar-menu-core-list-item-group-item-title.selection-item {
40
+ .ar-menu .ar-menu-list-item-group-item-title.selection-item {
42
41
  background-color: red;
43
42
  }
44
- .ar-menu-core .ar-menu-core-list-item-group-item-title.group {
45
- color: var(--gray-400);
43
+ .ar-menu .ar-menu-list-item-group-item-title.group {
44
+ margin-left: 1rem;
45
+ padding-left: 0;
46
+ border-radius: 0;
47
+ border-bottom: solid 1px var(--gray-100);
48
+ color: var(--gray-500);
46
49
  }
package/dist/libs/styles/menu/core/open-or-close.css CHANGED
@@ -1,21 +1,21 @@
1
- .ar-menu-core ul li ul {
1
+ .ar-menu ul li ul {
2
2
  opacity: 0;
3
3
  max-height: 0;
4
4
  overflow: hidden;
5
5
  transition: max-height 250ms ease-in-out, opacity 250ms cubic-bezier(1, 0, 0, 1);
6
6
  }
7
- .ar-menu-core .ar-menu-core-list-item-groups.opened {
7
+ .ar-menu .ar-menu-list-item-groups.opened {
8
8
  opacity: 1;
9
9
  max-height: 100rem;
10
10
  }
11
- .ar-menu-core .ar-menu-core-list-item-group-item-title {
11
+ .ar-menu .ar-menu-list-item-group-item-title {
12
12
  display: flex;
13
13
  align-items: center;
14
14
  }
15
- .ar-menu-core .ar-menu-core-list-item-group-item-title:is(.ar-angle-down, .ar-angle-up) {
15
+ .ar-menu .ar-menu-list-item-group-item-title:is(.ar-angle-down, .ar-angle-up) {
16
16
  cursor: pointer;
17
17
  }
18
- .ar-menu-core .ar-menu-core-list-item-group-item-title:is(.ar-angle-down, .ar-angle-up)::after {
18
+ .ar-menu .ar-menu-list-item-group-item-title:is(.ar-angle-down, .ar-angle-up)::after {
19
19
  display: inline-block;
20
20
  position: relative;
21
21
  top: 0.5px;
@@ -30,7 +30,7 @@
30
30
  transform: rotate(45deg);
31
31
  transition: top 250ms, transform 250ms ease-in-out;
32
32
  }
33
- .ar-menu-core .ar-menu-core-list-item-group-item-title.ar-angle-up::after {
33
+ .ar-menu .ar-menu-list-item-group-item-title.ar-angle-up::after {
34
34
  top: -1px;
35
35
  transform: rotate(585deg);
36
36
  }
package/dist/libs/styles/menu/core/selected.css ADDED
@@ -0,0 +1,13 @@
1
+ .ar-menu .ar-menu-list-item.selected {
2
+ background-color: rgba(var(--black-rgb), 0.03) !important;
3
+ }
4
+ /* SubMenu */
5
+ .ar-menu .ar-menu-list-item-group-item.selected {
6
+ background-color: rgba(var(--black-rgb), 0.03) !important;
7
+ /* margin-top: 1rem; */
8
+ border-radius: var(--border-radius-lg);
9
+ }
10
+ .ar-menu .ar-menu-list-item-group-item-title.selected {
11
+ background-color: rgba(var(--red-rgb), 0.1) !important;
12
+ color: var(--red);
13
+ }
package/dist/libs/styles/menu/variant/horizontal.css ADDED
@@ -0,0 +1,3 @@
1
+ .ar-menu-list.horizontal {
2
+ flex-direction: row;
3
+ }
package/dist/libs/styles/menu/variant/vertical.css CHANGED
@@ -1,3 +1,3 @@
1
- .ar-menu-core-list.vertical {
1
+ .ar-menu-list.vertical {
2
2
  flex-direction: column;
3
3
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ar-design",
3
- "version": "0.0.4",
3
+ "version": "0.0.6",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",