ar-design 0.0.4 → 0.0.5

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 (16) 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 +11 -11
  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 +17 -15
  13. package/dist/libs/styles/menu/core/open-or-close.css +6 -6
  14. package/dist/libs/styles/menu/variant/horizontal.css +3 -0
  15. package/dist/libs/styles/menu/variant/vertical.css +1 -1
  16. 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
@@ -25,15 +25,15 @@ const SubMenu = ({ items, variant, type }) => {
25
25
  if (!items)
26
26
  return null;
27
27
  // 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;
28
+ let _className_ul = useRef("ar-menu-list-item-groups").current;
29
+ let _className_li = useRef("ar-menu-list-item-group-item").current;
30
+ let _className_groupTitle = useRef("ar-menu-list-item-group-item-title").current;
31
31
  if (variant === "vertical" && type === "group")
32
32
  _className_ul += " opened";
33
33
  return (React.createElement("ul", { className: _className_ul }, items.map((item, index) => {
34
+ if (variant === "vertical" && item.type === "group")
35
+ _className_groupTitle += " group";
34
36
  if (item.submenu && item.submenu.length > 0) {
35
- if (variant === "vertical" && item.type === "group")
36
- _className_groupTitle += " group";
37
37
  if (variant === "horizontal" || item.type !== "group")
38
38
  _className_groupTitle += " ar-angle-down";
39
39
  }
@@ -44,22 +44,22 @@ const SubMenu = ({ items, variant, type }) => {
44
44
  };
45
45
  const Menu = ({ menu, variant = "vertical", ...attributes }) => {
46
46
  const handleClassName = () => {
47
- let className = "ar-menu-core-list";
47
+ let className = "ar-menu-list";
48
48
  if (variant)
49
49
  className += ` ${variant}`;
50
50
  return className;
51
51
  };
52
- return (React.createElement("nav", { className: "ar-menu-core", ...attributes },
52
+ return (React.createElement("nav", { className: "ar-menu", ...attributes },
53
53
  React.createElement("ul", { className: handleClassName() }, menu.map((item, index) => {
54
54
  // refs
55
- let _className_groupTitle = useRef("ar-menu-core-list-item-group-item-title").current;
55
+ let _className_groupTitle = useRef("ar-menu-list-item-group-item-title").current;
56
+ if (variant === "vertical" && item.type === "group")
57
+ _className_groupTitle += " group";
56
58
  if (item.submenu && item.submenu.length > 0) {
57
- if (variant === "vertical" && item.type === "group")
58
- _className_groupTitle += " group";
59
59
  if (variant === "horizontal" || item.type !== "group")
60
60
  _className_groupTitle += " ar-angle-down";
61
61
  }
62
- return (React.createElement("li", { key: index, className: "ar-menu-core-list-item", onClick: (event) => handleOnClick(event, item, variant) },
62
+ return (React.createElement("li", { key: index, className: "ar-menu-list-item", onClick: (event) => handleOnClick(event, item, variant) },
63
63
  item.type === "divider" ? React.createElement(Divider, null) : React.createElement("div", { className: _className_groupTitle }, item.render),
64
64
  React.createElement(SubMenu, { items: item.submenu, variant: variant, type: item.type })));
65
65
  }))));
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,48 @@
1
1
  @import url("./open-or-close.css");
2
2
 
3
- .ar-menu-core {
3
+ .ar-menu {
4
4
  background-color: var(--white);
5
5
  }
6
- .ar-menu-core ul {
6
+ .ar-menu ul {
7
7
  margin: 0;
8
8
  padding: 0;
9
9
  list-style: none;
10
10
  }
11
- .ar-menu-core ul li {
12
- }
13
- .ar-menu-core ul li:last-child {
11
+ .ar-menu ul li:last-child {
14
12
  padding-bottom: 0;
15
13
  }
16
- .ar-menu-core ul li ul {
14
+ .ar-menu ul li ul {
17
15
  margin-left: 0.25rem;
18
16
  padding-left: 0.25rem;
19
17
  }
20
18
 
21
- .ar-menu-core > .ar-menu-core-list {
19
+ .ar-menu > .ar-menu-list {
22
20
  display: flex;
23
21
  }
24
-
25
- .ar-menu-core .ar-menu-core-list-item-group-item-title {
22
+ .ar-menu .ar-menu-list-item-group-item-title {
26
23
  display: flex;
27
24
  align-items: center;
28
25
  height: 2.5rem;
29
26
  border-radius: var(--border-radius-lg);
30
- padding-left: 0.75rem;
27
+ padding-left: 1rem;
28
+ user-select: none;
31
29
  }
32
- .ar-menu-core .ar-menu-core-list-item-group-item-title:not(.group) > * {
30
+ .ar-menu .ar-menu-list-item-group-item-title:not(.group) > * {
33
31
  display: flex;
34
32
  align-items: center;
35
33
  width: 100%;
36
34
  height: 100%;
37
35
  }
38
- .ar-menu-core .ar-menu-core-list-item-group-item-title:not(.group):hover {
36
+ .ar-menu .ar-menu-list-item-group-item-title:not(.group):hover {
39
37
  background-color: var(--gray-100);
40
38
  }
41
- .ar-menu-core .ar-menu-core-list-item-group-item-title.selection-item {
39
+ .ar-menu .ar-menu-list-item-group-item-title.selection-item {
42
40
  background-color: red;
43
41
  }
44
- .ar-menu-core .ar-menu-core-list-item-group-item-title.group {
45
- color: var(--gray-400);
42
+ .ar-menu .ar-menu-list-item-group-item-title.group {
43
+ margin-left: 1rem;
44
+ padding-left: 0;
45
+ border-radius: 0;
46
+ border-bottom: solid 1px var(--gray-100);
47
+ color: var(--gray-500);
46
48
  }
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/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.5",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",