ar-design 0.2.83 → 0.2.85

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 (21) hide show
  1. package/dist/assets/css/components/feedback/tooltip/styles.css +9 -12
  2. package/dist/assets/css/components/form/checkbox/checkbox.css +18 -0
  3. package/dist/assets/css/components/form/checkbox/core/border.css +198 -121
  4. package/dist/assets/css/components/form/radio/core/border.css +252 -0
  5. package/dist/assets/css/components/form/radio/radio.css +2 -2
  6. package/dist/assets/css/components/form/switch/styles.css +46 -32
  7. package/dist/assets/css/core/variants/filled.css +1 -1
  8. package/dist/assets/css/core/variants/outlined.css +11 -0
  9. package/dist/assets/css/core/variants/surface.css +11 -11
  10. package/dist/components/data-display/table/index.js +2 -2
  11. package/dist/components/feedback/popup/index.js +3 -3
  12. package/dist/components/feedback/tooltip/index.js +17 -20
  13. package/dist/components/form/checkbox/index.js +4 -4
  14. package/dist/components/form/radio/IProps.d.ts +2 -2
  15. package/dist/components/form/radio/index.js +2 -2
  16. package/dist/components/form/text-editor/index.js +1 -1
  17. package/dist/components/icons/Compiler.d.ts +1 -5
  18. package/dist/components/icons/Compiler.js +70 -108
  19. package/dist/components/icons/index.js +1 -1
  20. package/dist/libs/types/index.d.ts +1 -1
  21. package/package.json +1 -1
package/dist/assets/css/components/feedback/tooltip/styles.css CHANGED
@@ -2,13 +2,12 @@
2
2
  width: max-content;
3
3
  }
4
4
  .ar-tooltip {
5
- position: absolute;
5
+ position: fixed;
6
6
  display: flex;
7
7
  flex-direction: column;
8
8
  gap: 0.25rem;
9
- background-color: var(--white);
9
+ background-color: var(--black);
10
10
  padding: 0.25rem 0.5rem;
11
- border: solid 1px var(--gray-300);
12
11
  border-radius: var(--border-radius-sm);
13
12
  z-index: 1052;
14
13
  }
@@ -21,42 +20,40 @@
21
20
  display: flex;
22
21
  flex-direction: row;
23
22
  gap: 0.5rem;
24
- color: var(--gray-700);
25
- font-size: 0.85rem;
23
+ color: var(--white);
24
+ font-size: 0.75rem;
26
25
  text-wrap: nowrap;
27
- /* -webkit-text-stroke: 0.75px var(--gray-700); */
28
26
  }
29
27
  .ar-tooltip > .text > .bullet {
30
28
  color: var(--gray-400);
31
- /* -webkit-text-stroke: 0px; */
32
29
  }
33
30
 
34
31
  .ar-tooltip::before {
35
32
  position: absolute;
36
33
  content: "";
37
- border: solid 7.5px transparent;
34
+ border: solid 5px transparent;
38
35
  }
39
36
  .ar-tooltip.top::before {
40
37
  top: 100%;
41
38
  left: 50%;
42
39
  transform: translateX(-50%);
43
- border-top-color: var(--gray-300);
40
+ border-top-color: var(--black);
44
41
  }
45
42
  .ar-tooltip.right::before {
46
43
  top: 50%;
47
44
  transform: translateY(-50%);
48
45
  right: 100%;
49
- border-right-color: var(--gray-300);
46
+ border-right-color: var(--black);
50
47
  }
51
48
  .ar-tooltip.bottom::before {
52
49
  left: 50%;
53
50
  transform: translateX(-50%);
54
51
  bottom: 100%;
55
- border-bottom-color: var(--gray-300);
52
+ border-bottom-color: var(--black);
56
53
  }
57
54
  .ar-tooltip.left::before {
58
55
  top: 50%;
59
56
  transform: translateY(-50%);
60
57
  left: 100%;
61
- border-left-color: var(--gray-300);
58
+ border-left-color: var(--black);
62
59
  }
package/dist/assets/css/components/form/checkbox/checkbox.css CHANGED
@@ -18,6 +18,9 @@
18
18
  min-width: 1rem;
19
19
  min-height: 1rem;
20
20
  }
21
+ .ar-checkbox-wrapper > label > :is(input[type="checkbox"]):checked + span > .ar-checkbox {
22
+ z-index: 2;
23
+ }
21
24
  .ar-checkbox-wrapper > label > :is(input[type="checkbox"]):checked + span > .ar-checkbox::before {
22
25
  position: absolute;
23
26
  top: 50%;
@@ -28,6 +31,21 @@
28
31
  width: 0.25rem;
29
32
  height: 0.5rem;
30
33
  border: solid 1px transparent;
34
+ border-right-color: var(--white);
35
+ border-bottom-color: var(--white);
36
+ }
37
+
38
+ .ar-checkbox-wrapper > label > span > .trace {
39
+ position: absolute;
40
+ top: 50%;
41
+ left: 50%;
42
+ transform: translate(-50%, -50%);
43
+ display: inline-block;
44
+ content: "";
45
+ width: 1rem;
46
+ height: 1rem;
47
+ border-radius: var(--border-radius-pill);
48
+ z-index: 1;
31
49
  }
32
50
 
33
51
  @import url("./core/border.css");
package/dist/assets/css/components/form/checkbox/core/border.css CHANGED
@@ -1,175 +1,252 @@
1
1
  /* #region Border Color -> BLUE */
2
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.blue::before {
3
- border-right-color: var(--white);
4
- border-bottom-color: var(--white);
5
- }
6
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.blue::before {
7
- border-right-color: var(--blue);
8
- border-bottom-color: var(--blue);
9
- }
10
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.blue::before {
11
- border-right-color: var(--blue);
12
- border-bottom-color: var(--blue);
2
+ .ar-checkbox-wrapper {
3
+ > label {
4
+ > input[type="checkbox"] {
5
+ &:checked {
6
+ + span {
7
+ > .ar-checkbox.filled.blue::before {
8
+ border-right-color: var(--white);
9
+ border-bottom-color: var(--white);
10
+ }
11
+
12
+ > .ar-checkbox.filled.blue {
13
+ background-color: var(--blue-500);
14
+ box-shadow: 0 0 0 3.5px var(--blue-100);
15
+ }
16
+ }
17
+ }
18
+ }
19
+ }
13
20
  }
14
21
  /* #endregion */
15
22
  /* Border Color -> BLUE */
16
23
 
17
24
  /* #region Border Color -> PURPLE */
18
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.purple::before {
19
- border-right-color: var(--white);
20
- border-bottom-color: var(--white);
21
- }
22
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.purple::before {
23
- border-right-color: var(--purple);
24
- border-bottom-color: var(--purple);
25
- }
26
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.purple::before {
27
- border-right-color: var(--purple);
28
- border-bottom-color: var(--purple);
25
+ .ar-checkbox-wrapper {
26
+ > label {
27
+ > input[type="checkbox"] {
28
+ &:checked {
29
+ + span {
30
+ > .ar-checkbox.filled.purple::before {
31
+ border-right-color: var(--white);
32
+ border-bottom-color: var(--white);
33
+ }
34
+
35
+ > .ar-checkbox.filled.purple {
36
+ background-color: var(--purple-500);
37
+ box-shadow: 0 0 0 3.5px var(--purple-100);
38
+ }
39
+ }
40
+ }
41
+ }
42
+ }
29
43
  }
30
44
  /* #endregion */
31
45
  /* Border Color -> PURPLE */
32
46
 
33
47
  /* #region Border Color -> PINK */
34
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.pink::before {
35
- border-right-color: var(--white);
36
- border-bottom-color: var(--white);
37
- }
38
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.pink::before {
39
- border-right-color: var(--pink);
40
- border-bottom-color: var(--pink);
41
- }
42
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.pink::before {
43
- border-right-color: var(--pink);
44
- border-bottom-color: var(--pink);
48
+ .ar-checkbox-wrapper {
49
+ > label {
50
+ > input[type="checkbox"] {
51
+ &:checked {
52
+ + span {
53
+ > .ar-checkbox.filled.pink::before {
54
+ border-right-color: var(--white);
55
+ border-bottom-color: var(--white);
56
+ }
57
+
58
+ > .ar-checkbox.filled.pink {
59
+ background-color: var(--pink-500);
60
+ box-shadow: 0 0 0 3.5px var(--pink-100);
61
+ }
62
+ }
63
+ }
64
+ }
65
+ }
45
66
  }
46
67
  /* #endregion */
47
68
  /* Border Color -> PINK */
48
69
 
49
70
  /* #region Border Color -> RED */
50
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.red::before {
51
- border-right-color: var(--white);
52
- border-bottom-color: var(--white);
53
- }
54
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.red::before {
55
- border-right-color: var(--red);
56
- border-bottom-color: var(--red);
57
- }
58
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.red::before {
59
- border-right-color: var(--red);
60
- border-bottom-color: var(--red);
71
+ .ar-checkbox-wrapper {
72
+ > label {
73
+ > input[type="checkbox"] {
74
+ &:checked {
75
+ + span {
76
+ > .ar-checkbox.filled.red::before {
77
+ border-right-color: var(--white);
78
+ border-bottom-color: var(--white);
79
+ }
80
+
81
+ > .ar-checkbox.filled.red {
82
+ background-color: var(--red-500);
83
+ box-shadow: 0 0 0 3.5px var(--red-100);
84
+ }
85
+ }
86
+ }
87
+ }
88
+ }
61
89
  }
62
90
  /* #endregion */
63
91
  /* Border Color -> RED */
64
92
 
65
93
  /* #region Border Color -> ORANGE */
66
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.orange::before {
67
- border-right-color: var(--white);
68
- border-bottom-color: var(--white);
69
- }
70
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.orange::before {
71
- border-right-color: var(--orange);
72
- border-bottom-color: var(--orange);
73
- }
74
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.orange::before {
75
- border-right-color: var(--orange);
76
- border-bottom-color: var(--orange);
94
+ .ar-checkbox-wrapper {
95
+ > label {
96
+ > input[type="checkbox"] {
97
+ &:checked {
98
+ + span {
99
+ > .ar-checkbox.filled.orange::before {
100
+ border-right-color: var(--white);
101
+ border-bottom-color: var(--white);
102
+ }
103
+
104
+ > .ar-checkbox.filled.orange {
105
+ background-color: var(--orange-500);
106
+ box-shadow: 0 0 0 3.5px var(--orange-100);
107
+ }
108
+ }
109
+ }
110
+ }
111
+ }
77
112
  }
78
113
  /* #endregion */
79
114
  /* Border Color -> ORANGE */
80
115
 
81
116
  /* #region Border Color -> YELLOW */
82
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.yellow::before {
83
- border-right-color: var(--white);
84
- border-bottom-color: var(--white);
85
- }
86
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.yellow::before {
87
- border-right-color: var(--yellow);
88
- border-bottom-color: var(--yellow);
89
- }
90
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.yellow::before {
91
- border-right-color: var(--yellow);
92
- border-bottom-color: var(--yellow);
117
+ .ar-checkbox-wrapper {
118
+ > label {
119
+ > input[type="checkbox"] {
120
+ &:checked {
121
+ + span {
122
+ > .ar-checkbox.filled.yellow::before {
123
+ border-right-color: var(--white);
124
+ border-bottom-color: var(--white);
125
+ }
126
+
127
+ > .ar-checkbox.filled.yellow {
128
+ background-color: var(--yellow-500);
129
+ box-shadow: 0 0 0 3.5px var(--yellow-100);
130
+ }
131
+ }
132
+ }
133
+ }
134
+ }
93
135
  }
94
136
  /* #endregion */
95
137
  /* Border Color -> YELLOW */
96
138
 
97
139
  /* #region Border Color -> GREEN */
98
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.green::before {
99
- border-right-color: var(--white);
100
- border-bottom-color: var(--white);
101
- }
102
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.green::before {
103
- border-right-color: var(--green);
104
- border-bottom-color: var(--green);
105
- }
106
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.green::before {
107
- border-right-color: var(--green);
108
- border-bottom-color: var(--green);
140
+ .ar-checkbox-wrapper {
141
+ > label {
142
+ > input[type="checkbox"] {
143
+ &:checked {
144
+ + span {
145
+ > .ar-checkbox.filled.green::before {
146
+ border-right-color: var(--white);
147
+ border-bottom-color: var(--white);
148
+ }
149
+
150
+ > .ar-checkbox.filled.green {
151
+ background-color: var(--green-500);
152
+ box-shadow: 0 0 0 3.5px var(--green-100);
153
+ }
154
+ }
155
+ }
156
+ }
157
+ }
109
158
  }
110
159
  /* #endregion */
111
160
  /* Border Color -> GREEN */
112
161
 
113
162
  /* #region Border Color -> TEAL */
114
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.teal::before {
115
- border-right-color: var(--white);
116
- border-bottom-color: var(--white);
117
- }
118
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.teal::before {
119
- border-right-color: var(--teal);
120
- border-bottom-color: var(--teal);
121
- }
122
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.teal::before {
123
- border-right-color: var(--teal);
124
- border-bottom-color: var(--teal);
163
+ .ar-checkbox-wrapper {
164
+ > label {
165
+ > input[type="checkbox"] {
166
+ &:checked {
167
+ + span {
168
+ > .ar-checkbox.filled.teal::before {
169
+ border-right-color: var(--white);
170
+ border-bottom-color: var(--white);
171
+ }
172
+
173
+ > .ar-checkbox.filled.teal {
174
+ background-color: var(--teal-500);
175
+ box-shadow: 0 0 0 3.5px var(--teal-100);
176
+ }
177
+ }
178
+ }
179
+ }
180
+ }
125
181
  }
126
182
  /* #endregion */
127
183
  /* Border Color -> TEAL */
128
184
 
129
185
  /* #region Border Color -> CYAN */
130
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.cyan::before {
131
- border-right-color: var(--white);
132
- border-bottom-color: var(--white);
133
- }
134
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.cyan::before {
135
- border-right-color: var(--cyan);
136
- border-bottom-color: var(--cyan);
137
- }
138
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.cyan::before {
139
- border-right-color: var(--cyan);
140
- border-bottom-color: var(--cyan);
186
+ .ar-checkbox-wrapper {
187
+ > label {
188
+ > input[type="checkbox"] {
189
+ &:checked {
190
+ + span {
191
+ > .ar-checkbox.filled.cyan::before {
192
+ border-right-color: var(--white);
193
+ border-bottom-color: var(--white);
194
+ }
195
+
196
+ > .ar-checkbox.filled.cyan {
197
+ background-color: var(--cyan-500);
198
+ box-shadow: 0 0 0 3.5px var(--cyan-100);
199
+ }
200
+ }
201
+ }
202
+ }
203
+ }
141
204
  }
142
205
  /* #endregion */
143
206
  /* Border Color -> CYAN */
144
207
 
145
208
  /* #region Border Color -> GRAY */
146
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.gray::before {
147
- border-right-color: var(--white);
148
- border-bottom-color: var(--white);
149
- }
150
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.gray::before {
151
- border-right-color: var(--gray);
152
- border-bottom-color: var(--gray);
153
- }
154
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.gray::before {
155
- border-right-color: var(--gray);
156
- border-bottom-color: var(--gray);
209
+ .ar-checkbox-wrapper {
210
+ > label {
211
+ > input[type="checkbox"] {
212
+ &:checked {
213
+ + span {
214
+ > .ar-checkbox.filled.gray::before {
215
+ border-right-color: var(--white);
216
+ border-bottom-color: var(--white);
217
+ }
218
+
219
+ > .ar-checkbox.filled.gray {
220
+ background-color: var(--gray-500);
221
+ box-shadow: 0 0 0 3.5px var(--gray-100);
222
+ }
223
+ }
224
+ }
225
+ }
226
+ }
157
227
  }
158
228
  /* #endregion */
159
229
  /* Border Color -> GRAY */
160
230
 
161
231
  /* #region Border Color -> LIGHT */
162
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.light::before {
163
- border-right-color: var(--dark);
164
- border-bottom-color: var(--dark);
165
- }
166
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.light::before {
167
- border-right-color: var(--light);
168
- border-bottom-color: var(--light);
169
- }
170
- .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.light::before {
171
- border-right-color: var(--light);
172
- border-bottom-color: var(--light);
232
+ .ar-checkbox-wrapper {
233
+ > label {
234
+ > input[type="checkbox"] {
235
+ &:checked {
236
+ + span {
237
+ > .ar-checkbox.filled.light::before {
238
+ border-right-color: var(--white);
239
+ border-bottom-color: var(--white);
240
+ }
241
+
242
+ > .ar-checkbox.filled.light {
243
+ background-color: var(--light-500);
244
+ box-shadow: 0 0 0 3.5px var(--light-100);
245
+ }
246
+ }
247
+ }
248
+ }
249
+ }
173
250
  }
174
251
  /* #endregion */
175
252
  /* Border Color -> LIGHT */