@edu-tosel/design 1.0.49 → 1.0.51

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.
package/globals.css CHANGED
@@ -1,226 +1,226 @@
1
- @tailwind base;
2
- @tailwind components;
3
- @tailwind utilities;
4
-
5
- @font-face {
6
- font-family: "Pretendard-Medium";
7
- src: url("./asset/fonts/Pretendard-Medium.otf") format("opentype");
8
- }
9
-
10
- @font-face {
11
- font-family: "Pretendard-Bold";
12
- src: url("./asset/fonts/Pretendard-Bold.otf") format("opentype");
13
- }
14
-
15
- @font-face {
16
- font-family: "Pretendard-Light";
17
- src: url("./asset/fonts/Pretendard-Light.otf") format("opentype");
18
- }
19
-
20
- @font-face {
21
- font-family: "Kostar";
22
- src: url("./asset/fonts/Kostar.ttf") format("truetype");
23
- }
24
-
25
- @font-face {
26
- font-family: "NicoMoji";
27
- src: url("./asset/fonts/NicoMoji.ttf") format("truetype");
28
- }
29
-
30
- @font-face {
31
- font-family: "Megrim";
32
- src: url("./asset/fonts/Megrim.ttf") format("truetype");
33
- }
34
-
35
- @font-face {
36
- font-family: "Times-Newer-Roman-Bold";
37
- src: url("./asset/fonts/TimesNewerRoman-Bold.otf") format("opentype");
38
- }
39
-
40
- @font-face {
41
- font-family: "Times-Newer-Roman-BoldItalic";
42
- src: url("./asset/fonts/TimesNewerRoman-BoldItalic.otf") format("opentype");
43
- }
44
-
45
- input[type="date"]::-webkit-inner-spin-button,
46
- input[type="date"]::-webkit-calendar-picker-indicator {
47
- display: none;
48
- -webkit-appearance: none;
49
- }
50
-
51
- ::-webkit-scrollbar {
52
- width: 3px;
53
- padding-right: 10px;
54
- }
55
-
56
- ::-webkit-scrollbar-track {
57
- background-color: transparent;
58
- }
59
- ::-webkit-scrollbar-thumb {
60
- background-color: #808080;
61
- opacity: 0.5;
62
- border-radius: 10px;
63
- }
64
-
65
- .box-shadow {
66
- box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
67
- }
68
-
69
- .box-shadow-sm {
70
- box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
71
- }
72
-
73
- .border-gradient-green-to-red {
74
- }
75
-
76
- .x-shape {
77
- position: relative;
78
- width: 0.83625rem;
79
- height: 0.83625rem;
80
- }
81
-
82
- .x-shape::before,
83
- .x-shape::after {
84
- content: "";
85
- position: absolute;
86
- top: 50%;
87
- left: 50%;
88
- width: 2.5px;
89
- border-radius: 2px;
90
- height: 100%;
91
- background-color: white;
92
- transform-origin: center;
93
- }
94
-
95
- .x-shape::before {
96
- transform: translate(-50%, -50%) rotate(45deg);
97
- }
98
-
99
- .x-shape::after {
100
- transform: translate(-50%, -50%) rotate(-45deg);
101
- }
102
-
103
- .border-inner {
104
- box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
105
- 0 2px 4px -1px rgba(0, 0, 0, 0.06);
106
- }
107
- .box-shadow-focus:focus {
108
- box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
109
- 0 2px 4px -1px rgba(0, 0, 0, 0.06);
110
- }
111
- .box-shadow-focus-red:focus {
112
- box-shadow: 0px 0px 10px 0px #ff8383;
113
- }
114
- .box-green {
115
- background: rgba(16, 86, 82, 0.1);
116
- color: #105652;
117
- }
118
- .box-green-focus:focus {
119
- background: white;
120
- color: black;
121
- box-shadow: 0px 0px 10px 0px rgba(16, 86, 82, 0.38);
122
- }
123
- /* box-shadow: 0px 0px 10px 0px rgba(16, 86, 82, 0.38); */
124
- .box-inner-shadow:hover {
125
- box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
126
- 0 2px 4px -1px rgba(0, 0, 0, 0.06);
127
- }
128
- /* Date Picker Css */
129
- .react-datepicker__day--selected {
130
- background-color: #105652 !important;
131
- }
132
- .react-datepicker__header {
133
- background: white !important;
134
- border: none !important;
135
- }
136
- .react-datepicker {
137
- box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15) !important;
138
- border-radius: 0.375rem !important;
139
- border: none !important;
140
- }
141
- .react-datepicker__day--keyboard-selected {
142
- background-color: white !important;
143
- color: black !important;
144
- }
145
- .react-datepicker__day--outside-month {
146
- color: rgb(161 161 170) !important;
147
- }
148
- .react-datepicker__month-container {
149
- padding-top: 1rem;
150
- padding-left: 1rem;
151
- padding-right: 1rem;
152
- padding-bottom: 0.5rem;
153
- }
154
- .react-datepicker-popper {
155
- transform: translate(0px 295px) !important;
156
- }
157
- .react-datepicker__input-container {
158
- text-align: center !important;
159
- border-radius: 0.375rem !important;
160
- transition: all 0.3s;
161
- }
162
- .react-datepicker__input-container > input {
163
- cursor: pointer !important;
164
- }
165
- .react-datepicker__input-container:hover {
166
- box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15) !important;
167
- }
168
- .react-datepicker__navigation {
169
- top: 18px !important;
170
- }
171
- .react-datepicker__navigation--next {
172
- right: 20px !important;
173
- }
174
- .react-datepicker__navigation--previous {
175
- left: 182px !important;
176
- }
177
- .react-datepicker__current-month {
178
- text-align: left !important;
179
- margin-left: 16px !important;
180
- }
181
- .react-datepicker__triangle {
182
- display: none !important;
183
- }
184
- .react-datepicker__children-container {
185
- width: 16rem !important;
186
- }
187
- /* toggle button */
188
- .toggle[type="checkbox"]::before {
189
- content: "";
190
- position: absolute;
191
- left: 1px;
192
- top: 1px;
193
- width: 1.1rem;
194
- height: 1.1rem;
195
- border-radius: 50%;
196
- transform: scale(0.9);
197
- background-color: white;
198
- transition: left 100ms linear;
199
- }
200
- .toggle[type="checkbox"]:checked::before {
201
- background-color: white;
202
- left: 1.32rem;
203
- }
204
- .toggle[type="checkbox"]:checked {
205
- background-color: #105652;
206
- }
207
- .toggle[type="checkbox"]:disabled {
208
- opacity: 0.3;
209
- cursor: not-allowed;
210
- }
211
- .toggle[type="checkbox"]:disabled + span {
212
- opacity: 0.3;
213
- cursor: not-allowed;
214
- }
215
-
216
- /* checkbox */
217
- .check-box[type="checkbox"]:checked {
218
- border-color: transparent;
219
- background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
220
- background-size: 150%;
221
- background-position: 50%;
222
- background-repeat: no-repeat;
223
- }
224
- .check-box[type="checkbox"]:disabled {
225
- background-color: #7f7f7f;
226
- }
1
+ @tailwind base;
2
+ @tailwind components;
3
+ @tailwind utilities;
4
+
5
+ @font-face {
6
+ font-family: "Pretendard-Medium";
7
+ src: url("./asset/fonts/Pretendard-Medium.otf") format("opentype");
8
+ }
9
+
10
+ @font-face {
11
+ font-family: "Pretendard-Bold";
12
+ src: url("./asset/fonts/Pretendard-Bold.otf") format("opentype");
13
+ }
14
+
15
+ @font-face {
16
+ font-family: "Pretendard-Light";
17
+ src: url("./asset/fonts/Pretendard-Light.otf") format("opentype");
18
+ }
19
+
20
+ @font-face {
21
+ font-family: "Kostar";
22
+ src: url("./asset/fonts/Kostar.ttf") format("truetype");
23
+ }
24
+
25
+ @font-face {
26
+ font-family: "NicoMoji";
27
+ src: url("./asset/fonts/NicoMoji.ttf") format("truetype");
28
+ }
29
+
30
+ @font-face {
31
+ font-family: "Megrim";
32
+ src: url("./asset/fonts/Megrim.ttf") format("truetype");
33
+ }
34
+
35
+ @font-face {
36
+ font-family: "Times-Newer-Roman-Bold";
37
+ src: url("./asset/fonts/TimesNewerRoman-Bold.otf") format("opentype");
38
+ }
39
+
40
+ @font-face {
41
+ font-family: "Times-Newer-Roman-BoldItalic";
42
+ src: url("./asset/fonts/TimesNewerRoman-BoldItalic.otf") format("opentype");
43
+ }
44
+
45
+ input[type="date"]::-webkit-inner-spin-button,
46
+ input[type="date"]::-webkit-calendar-picker-indicator {
47
+ display: none;
48
+ -webkit-appearance: none;
49
+ }
50
+
51
+ ::-webkit-scrollbar {
52
+ width: 3px;
53
+ padding-right: 10px;
54
+ }
55
+
56
+ ::-webkit-scrollbar-track {
57
+ background-color: transparent;
58
+ }
59
+ ::-webkit-scrollbar-thumb {
60
+ background-color: #808080;
61
+ opacity: 0.5;
62
+ border-radius: 10px;
63
+ }
64
+
65
+ .box-shadow {
66
+ box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
67
+ }
68
+
69
+ .box-shadow-sm {
70
+ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
71
+ }
72
+
73
+ .border-gradient-green-to-red {
74
+ }
75
+
76
+ .x-shape {
77
+ position: relative;
78
+ width: 0.83625rem;
79
+ height: 0.83625rem;
80
+ }
81
+
82
+ .x-shape::before,
83
+ .x-shape::after {
84
+ content: "";
85
+ position: absolute;
86
+ top: 50%;
87
+ left: 50%;
88
+ width: 2.5px;
89
+ border-radius: 2px;
90
+ height: 100%;
91
+ background-color: white;
92
+ transform-origin: center;
93
+ }
94
+
95
+ .x-shape::before {
96
+ transform: translate(-50%, -50%) rotate(45deg);
97
+ }
98
+
99
+ .x-shape::after {
100
+ transform: translate(-50%, -50%) rotate(-45deg);
101
+ }
102
+
103
+ .border-inner {
104
+ box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
105
+ 0 2px 4px -1px rgba(0, 0, 0, 0.06);
106
+ }
107
+ .box-shadow-focus:focus {
108
+ box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
109
+ 0 2px 4px -1px rgba(0, 0, 0, 0.06);
110
+ }
111
+ .box-shadow-focus-red:focus {
112
+ box-shadow: 0px 0px 10px 0px #ff8383;
113
+ }
114
+ .box-green {
115
+ background: rgba(16, 86, 82, 0.1);
116
+ color: #105652;
117
+ }
118
+ .box-green-focus:focus {
119
+ background: white;
120
+ color: black;
121
+ box-shadow: 0px 0px 10px 0px rgba(16, 86, 82, 0.38);
122
+ }
123
+ /* box-shadow: 0px 0px 10px 0px rgba(16, 86, 82, 0.38); */
124
+ .box-inner-shadow:hover {
125
+ box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
126
+ 0 2px 4px -1px rgba(0, 0, 0, 0.06);
127
+ }
128
+ /* Date Picker Css */
129
+ .react-datepicker__day--selected {
130
+ background-color: #105652 !important;
131
+ }
132
+ .react-datepicker__header {
133
+ background: white !important;
134
+ border: none !important;
135
+ }
136
+ .react-datepicker {
137
+ box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15) !important;
138
+ border-radius: 0.375rem !important;
139
+ border: none !important;
140
+ }
141
+ .react-datepicker__day--keyboard-selected {
142
+ background-color: white !important;
143
+ color: black !important;
144
+ }
145
+ .react-datepicker__day--outside-month {
146
+ color: rgb(161 161 170) !important;
147
+ }
148
+ .react-datepicker__month-container {
149
+ padding-top: 1rem;
150
+ padding-left: 1rem;
151
+ padding-right: 1rem;
152
+ padding-bottom: 0.5rem;
153
+ }
154
+ .react-datepicker-popper {
155
+ transform: translate(0px 295px) !important;
156
+ }
157
+ .react-datepicker__input-container {
158
+ text-align: center !important;
159
+ border-radius: 0.375rem !important;
160
+ transition: all 0.3s;
161
+ }
162
+ .react-datepicker__input-container > input {
163
+ cursor: pointer !important;
164
+ }
165
+ .react-datepicker__input-container:hover {
166
+ box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15) !important;
167
+ }
168
+ .react-datepicker__navigation {
169
+ top: 18px !important;
170
+ }
171
+ .react-datepicker__navigation--next {
172
+ right: 20px !important;
173
+ }
174
+ .react-datepicker__navigation--previous {
175
+ left: 182px !important;
176
+ }
177
+ .react-datepicker__current-month {
178
+ text-align: left !important;
179
+ margin-left: 16px !important;
180
+ }
181
+ .react-datepicker__triangle {
182
+ display: none !important;
183
+ }
184
+ .react-datepicker__children-container {
185
+ width: 16rem !important;
186
+ }
187
+ /* toggle button */
188
+ .toggle[type="checkbox"]::before {
189
+ content: "";
190
+ position: absolute;
191
+ left: 1px;
192
+ top: 1px;
193
+ width: 1.1rem;
194
+ height: 1.1rem;
195
+ border-radius: 50%;
196
+ transform: scale(0.9);
197
+ background-color: white;
198
+ transition: left 100ms linear;
199
+ }
200
+ .toggle[type="checkbox"]:checked::before {
201
+ background-color: white;
202
+ left: 1.32rem;
203
+ }
204
+ .toggle[type="checkbox"]:checked {
205
+ background-color: #105652;
206
+ }
207
+ .toggle[type="checkbox"]:disabled {
208
+ opacity: 0.3;
209
+ cursor: not-allowed;
210
+ }
211
+ .toggle[type="checkbox"]:disabled + span {
212
+ opacity: 0.3;
213
+ cursor: not-allowed;
214
+ }
215
+
216
+ /* checkbox */
217
+ .check-box[type="checkbox"]:checked {
218
+ border-color: transparent;
219
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
220
+ background-size: 150%;
221
+ background-position: 50%;
222
+ background-repeat: no-repeat;
223
+ }
224
+ .check-box[type="checkbox"]:disabled {
225
+ background-color: #7f7f7f;
226
+ }
@@ -36,7 +36,7 @@ export type Size = "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "f
36
36
  * @property {"sub"} sub - Sub size
37
37
  * @property {"full"} full - Full size
38
38
  */
39
- export type OnClick<T = unknown> = (prop?: T) => unknown | ((prop?: T) => Promise<unknown>);
39
+ export type OnClick<Request = unknown, Response = unknown> = (prop?: Request) => Response | ((prop?: Request) => Promise<Response>);
40
40
  export interface Button extends HTMLLabelElement {
41
41
  }
42
42
  export type FileRead = string | ArrayBuffer | null;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@edu-tosel/design",
3
- "version": "1.0.49",
3
+ "version": "1.0.51",
4
4
  "description": "UI components for International TOSEL Committee",
5
5
  "keywords": [
6
6
  "jsx",