@yr3/ui 1.0.16 → 1.0.18

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 (11) hide show
  1. package/dist/components/Date/month.css +117 -0
  2. package/dist/components/Date/month.css.map +1 -0
  3. package/dist/components/Group/group.css +22 -8
  4. package/dist/components/Group/group.css.map +1 -1
  5. package/dist/index.cjs +536 -319
  6. package/dist/index.d.cts +100 -49
  7. package/dist/index.d.ts +100 -49
  8. package/dist/index.js +531 -319
  9. package/dist/styles/index.css +138 -8
  10. package/dist/styles/index.css.map +1 -1
  11. package/package.json +1 -1
package/dist/components/Date/month.css ADDED
@@ -0,0 +1,117 @@
1
+ .yr3MonthSelector {
2
+ display: flex;
3
+ flex-direction: row;
4
+ align-items: center;
5
+ justify-content: space-between;
6
+ position: relative;
7
+ box-sizing: content-box;
8
+ }
9
+ .yr3MonthSelector.yr3MonthSelector--wrapper {
10
+ position: relative;
11
+ display: flex;
12
+ flex-direction: row;
13
+ align-items: center;
14
+ justify-content: space-between;
15
+ }
16
+ .yr3MonthSelector--icon {
17
+ position: absolute;
18
+ right: 6;
19
+ z-index: 3;
20
+ cursor: pointer;
21
+ }
22
+
23
+ .yr3MonthSelector--component {
24
+ position: absolute;
25
+ top: calc(100% + 4px);
26
+ left: 0;
27
+ right: 0;
28
+ background: var(--color-surface);
29
+ border: 1px solid var(--color-primary);
30
+ border-radius: 4px;
31
+ z-index: 10;
32
+ overflow-x: hidden;
33
+ overflow-y: auto;
34
+ padding: 8px;
35
+ }
36
+
37
+ .yr3MonthSelector--year-options {
38
+ padding: 4px 4px;
39
+ display: flex;
40
+ flex-direction: row;
41
+ align-items: center;
42
+ justify-content: space-around;
43
+ border-radius: 4px;
44
+ cursor: pointer;
45
+ }
46
+
47
+ .yr3MonthSelector--months {
48
+ display: flex;
49
+ flex-wrap: wrap;
50
+ justify-content: space-around;
51
+ gap: 4px;
52
+ padding: 8px;
53
+ margin-top: 8px;
54
+ }
55
+ .yr3MonthSelector--months .yr3MonthSelector--month {
56
+ padding: 8px 8px;
57
+ flex-basis: 20px;
58
+ outline: none;
59
+ border: none;
60
+ cursor: pointer;
61
+ }
62
+ .yr3MonthSelector--months .yr3MonthSelector--month-disabled {
63
+ cursor: not-allowed;
64
+ opacity: 0.5;
65
+ }
66
+
67
+ .yr3MonthSelector--year-button-back--disabled {
68
+ cursor: not-allowed;
69
+ opacity: 0.5;
70
+ }
71
+
72
+ .yr3MonthSelector--year-button-next--disabled {
73
+ cursor: not-allowed;
74
+ opacity: 0.5;
75
+ }
76
+
77
+ .yr3MonthSelector--icon-color-primary {
78
+ color: var(--color-primary);
79
+ }
80
+
81
+ .yr3MonthSelector--icon-color-secondary {
82
+ color: var(--color-secondary);
83
+ }
84
+
85
+ .yr3MonthSelector--icon-color-success {
86
+ color: var(--color-success);
87
+ }
88
+
89
+ .yr3MonthSelector--icon-color-error {
90
+ color: var(--color-error);
91
+ }
92
+
93
+ .yr3MonthSelector--icon-color-warning {
94
+ color: var(--color-warning);
95
+ }
96
+
97
+ .yr3MonthSelector--icon-color-info {
98
+ color: var(--color-info);
99
+ }
100
+
101
+ .yr3MonthSelector--icon-color-disabled {
102
+ color: var(--color-disabled);
103
+ }
104
+
105
+ .yr3MonthSelector--icon-color-background {
106
+ color: var(--color-surface);
107
+ }
108
+
109
+ .yr3MonthSelector--icon-color-text {
110
+ color: var(--color-text);
111
+ }
112
+
113
+ .yr3MonthSelector--icon-color-common {
114
+ color: var(--color-white);
115
+ }
116
+
117
+ /*# sourceMappingURL=month.css.map */
package/dist/components/Date/month.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/components/Date/month.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;;AAIN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;;AAMR;EACI;EACA;;;AAKJ;EACI;EACA;;;AAKR;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI","file":"month.css"}
package/dist/components/Group/group.css CHANGED
@@ -18,14 +18,13 @@
18
18
  /* ===== VARIANTS ===== */
19
19
  .yr3Group--filled {
20
20
  border: 1px solid;
21
- border-color: var(--group-border-color, var(--color-primary));
22
- background: var(--bg-group, var(--color-primary));
23
- --group-bg-item: var(--color-surface, #fff);
21
+ border-color: var(--group-border-color);
22
+ background: var(--bg-group);
24
23
  transition: all 0.2s;
25
24
  }
26
25
  .yr3Group--filled .yr3Group--item--active {
27
26
  background: var(--color-surface);
28
- color: var(--group-color-text);
27
+ color: var(--group-active-color);
29
28
  border-radius: var(--group-border-radius, 0px);
30
29
  }
31
30
  .yr3Group--filled .yr3Group--item--exclude {
@@ -57,31 +56,38 @@
57
56
  }
58
57
  .yr3Group--text .yr3Group--item {
59
58
  background: transparent;
60
- color: var(--color-disabled);
59
+ color: var(--group-color-text);
61
60
  }
62
61
  .yr3Group--text .yr3Group--item--active {
63
62
  background: transparent;
64
- color: var(--group-active, var(--color-primary));
63
+ color: var(--group-active-color, var(--color-primary));
64
+ }
65
+ .yr3Group--text .yr3Group--item--exclude {
66
+ background: transparent;
67
+ color: var(--group-color-text);
65
68
  }
66
69
 
67
70
  /* ===== COLORS ===== */
68
71
  .yr3Group--color-primary {
69
72
  --group-active: var(--color-primary);
73
+ --group-active-color: var(--color-primary);
70
74
  --bg-group: var(--color-primary);
71
75
  --group-border-color: var(--color-primary);
72
- --group-color-text: var(--color-primary);
76
+ --group-color-text: var(--color-surface);
73
77
  }
74
78
 
75
79
  .yr3Group--color-secondary {
76
80
  --group-active: var(--color-secondary);
77
81
  --bg-group: var(--color-secondary);
78
82
  --group-border-color: var(--color-secondary);
83
+ --group-active-color: var(--color-secondary);
79
84
  --group-color-text: var(--color-secondary);
80
85
  }
81
86
 
82
87
  .yr3Group--color-success {
83
88
  --group-active: var(--color-success);
84
89
  --bg-group: var(--color-success);
90
+ --group-active-color: var(--color-success);
85
91
  --group-border-color: var(--color-success);
86
92
  --group-color-text: var(--color-success);
87
93
  }
@@ -89,6 +95,7 @@
89
95
  .yr3Group--color-error {
90
96
  --group-active: var(--color-error);
91
97
  --bg-group: var(--color-error);
98
+ --group-active-color: var(--color-error);
92
99
  --group-border-color: var(--color-error);
93
100
  --group-color-text: var(--color-error);
94
101
  }
@@ -98,6 +105,7 @@
98
105
  --bg-group: var(--color-warning);
99
106
  --group-border-color: var(--color-warning);
100
107
  --group-color-text: var(--color-warning);
108
+ --group-active-color: var(--color-warning);
101
109
  }
102
110
 
103
111
  .yr3Group--color-info {
@@ -105,6 +113,7 @@
105
113
  --bg-group: var(--color-info);
106
114
  --group-border-color: var(--color-info);
107
115
  --group-color-text: var(--color-info);
116
+ --group-active-color: var(--color-info);
108
117
  }
109
118
 
110
119
  .yr3Group--color-disabled {
@@ -112,6 +121,7 @@
112
121
  --bg-group: var(--color-disabled);
113
122
  --group-border-color: var(--color-disabled);
114
123
  --group-color-text: var(--color-disabled);
124
+ --group-active-color: var(--color-disabled);
115
125
  }
116
126
 
117
127
  .yr3Group--color-background {
@@ -119,6 +129,7 @@
119
129
  --bg-group: var(--color-surface);
120
130
  --group-border-color: var(--color-surface);
121
131
  --group-color-text: var(--color-text-primary);
132
+ --group-active-color: var(--color-background);
122
133
  }
123
134
 
124
135
  .yr3Group--color-text {
@@ -126,6 +137,7 @@
126
137
  --bg-group: var(--color-text);
127
138
  --group-border-color: var(--color-text);
128
139
  --group-color-text: var(--color-text);
140
+ --group-active-color: var(--color-text);
129
141
  }
130
142
 
131
143
  .yr3Group--color-common {
@@ -133,14 +145,16 @@
133
145
  --bg-group: var(--color-text);
134
146
  --group-border-color: var(--color-text);
135
147
  --group-color-text: var(--color-text);
148
+ --group-active-color: var(--color-white);
136
149
  }
137
150
 
138
151
  .yr3Group--type-rounded {
152
+ border-radius: 40px;
139
153
  --group-border-radius: 40px;
140
154
  }
141
155
 
142
156
  .yr3Group--type-square {
143
- --group-border-radius: 0;
157
+ border-radius: 0;
144
158
  }
145
159
 
146
160
  /*# sourceMappingURL=group.css.map */
package/dist/components/Group/group.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/components/Group/group.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEE;EACE;EACA;EACA;;AAEF;EACE;EACA;;;AAKN;EACE;EACA;EACA;;AACA;EACE;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;;;AAKN;EACE;;AACA;EACE;EACA;;AACA;EACE;EACA;;;AAON;AAEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAKF;EACE;;;AAEF;EACE","file":"group.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/components/Group/group.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;;AAEE;EACE;EACA;EACA;;AAEF;EACE;EACA;;;AAKN;EACE;EACA;EACA;;AACA;EACE;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;;;AAKN;EACE;;AACA;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;;;AAON;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAKF;EACE;EACA;;;AAEF;EACE","file":"group.css"}