sakana-element 2.1.3 → 2.1.4

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 (51) hide show
  1. package/README.md +81 -80
  2. package/dist/es/{Alert-A4stKumX.js → Alert-C76ZWSVk.js} +5 -5
  3. package/dist/es/Button-fW_ZOLmT.js +24 -0
  4. package/dist/es/Card-BCBnlVi_.js +12 -0
  5. package/dist/es/{Dropdown-CA-nv-2j.js → Dropdown-49nf6F8P.js} +10 -10
  6. package/dist/es/{Form-VB1SL_iW.js → Form-CGiTDSGI.js} +1 -1
  7. package/dist/es/Input-DBPpvf0Y.js +42 -0
  8. package/dist/es/{Loading-4MsOvzx9.js → Loading-DlygqGOv.js} +3 -3
  9. package/dist/es/{Message-CxT9rRUp.js → Message-ganFfLeU.js} +11 -11
  10. package/dist/es/{Notification-D6em5HmO.js → Notification-D4RYHV9o.js} +3 -3
  11. package/dist/es/{Popconfirm-D0ABSr-F.js → Popconfirm-Cop44KwQ.js} +2 -2
  12. package/dist/es/Select-TIoGsqKv.js +133 -0
  13. package/dist/es/Switch-CHjcLtHs.js +34 -0
  14. package/dist/es/{Tooltip-KpwbZdMX.js → Tooltip-HWx_i2FA.js} +8 -8
  15. package/dist/es/{hooks-DNMt3QPi.js → hooks-CYdEHUVd.js} +6 -5
  16. package/dist/es/index.js +53 -51
  17. package/dist/index.css +1 -1
  18. package/dist/theme/Alert.css +51 -51
  19. package/dist/theme/Button.css +365 -105
  20. package/dist/theme/Card.css +112 -0
  21. package/dist/theme/Collapse.css +2 -2
  22. package/dist/theme/Dropdown.css +4 -4
  23. package/dist/theme/Input.css +213 -4
  24. package/dist/theme/Select.css +182 -38
  25. package/dist/theme/Switch.css +56 -0
  26. package/dist/theme/Tooltip.css +10 -10
  27. package/dist/theme/fonts/zpix.woff2 +0 -0
  28. package/dist/theme/index.css +21 -3
  29. package/dist/types/components/Button/types.d.ts +3 -0
  30. package/dist/types/components/Card/index.d.ts +26 -0
  31. package/dist/types/components/Card/types.d.ts +6 -0
  32. package/dist/types/components/Input/constants.d.ts +3 -0
  33. package/dist/types/components/Input/types.d.ts +2 -0
  34. package/dist/types/components/Select/constants.d.ts +3 -0
  35. package/dist/types/components/Select/index.d.ts +7 -5
  36. package/dist/types/components/Select/types.d.ts +4 -1
  37. package/dist/types/components/Select/useKeyMap.d.ts +1 -1
  38. package/dist/types/components/Switch/types.d.ts +6 -0
  39. package/dist/types/components/Tooltip/useEventsToTriggerNode.d.ts +4 -0
  40. package/dist/types/components/index.d.ts +1 -0
  41. package/dist/types/hooks/useSystemTheme.d.ts +1 -1
  42. package/dist/umd/index.css +1 -1
  43. package/dist/umd/index.css.gz +0 -0
  44. package/dist/umd/index.umd.cjs +3 -3
  45. package/dist/umd/index.umd.cjs.gz +0 -0
  46. package/package.json +1 -1
  47. package/dist/es/Button-CFGE4_Ng.js +0 -22
  48. package/dist/es/Input-C-bIqqo_.js +0 -38
  49. package/dist/es/Select-BKYDP224.js +0 -126
  50. package/dist/es/Switch-C1IdbnUa.js +0 -22
  51. package/dist/types/components/Tooltip/useEventsToTiggerNode.d.ts +0 -4
package/dist/theme/Alert.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /* Alert Variables */
2
- .px-alert[data-v-d61a85f3] {
2
+ .px-alert[data-v-772da9f8] {
3
3
  --px-alert-padding: 12px 16px;
4
4
  --px-alert-bg-color: var(--px-fill-color-blank);
5
5
  --px-alert-border-color: var(--px-border-color-dark);
@@ -15,7 +15,7 @@
15
15
  --px-alert-shadow-color: var(--px-shadow-color);
16
16
  }
17
17
  /* Base Alert Styles - Pixel Game Notification */
18
- .px-alert[data-v-d61a85f3] {
18
+ .px-alert[data-v-772da9f8] {
19
19
  padding: var(--px-alert-padding);
20
20
  margin: 0;
21
21
  box-sizing: border-box;
@@ -38,7 +38,7 @@
38
38
  transition: none;
39
39
  }
40
40
  /* Border layer — filled with border color, clipped to pixel shape */
41
- .px-alert[data-v-d61a85f3]::before {
41
+ .px-alert[data-v-772da9f8]::before {
42
42
  content: '';
43
43
  position: absolute;
44
44
  inset: 0;
@@ -52,7 +52,7 @@
52
52
  z-index: -1;
53
53
  }
54
54
  /* Fill layer — inset by border width, filled with bg color */
55
- .px-alert[data-v-d61a85f3]::after {
55
+ .px-alert[data-v-772da9f8]::after {
56
56
  content: '';
57
57
  position: absolute;
58
58
  inset: 2px;
@@ -66,44 +66,44 @@
66
66
  z-index: -1;
67
67
  }
68
68
  /* Icon styling */
69
- .px-alert .px-alert__icon[data-v-d61a85f3] {
69
+ .px-alert .px-alert__icon[data-v-772da9f8] {
70
70
  color: var(--px-alert-text-color);
71
71
  font-size: var(--px-alert-icon-size);
72
72
  width: var(--px-alert-icon-size);
73
73
  margin-right: var(--px-alert-icon-margin);
74
74
  flex-shrink: 0;
75
75
  }
76
- .px-alert .px-alert__icon.big-icon[data-v-d61a85f3] {
76
+ .px-alert .px-alert__icon.big-icon[data-v-772da9f8] {
77
77
  font-size: var(--px-alert-big-icon-size);
78
78
  width: var(--px-alert-big-icon-size);
79
79
  margin-right: var(--px-alert-big-icon-margin);
80
80
  }
81
81
  /* Content area */
82
- .px-alert .px-alert__content[data-v-d61a85f3] {
82
+ .px-alert .px-alert__content[data-v-772da9f8] {
83
83
  color: var(--px-alert-text-color);
84
84
  display: flex;
85
85
  flex-direction: column;
86
86
  justify-content: center;
87
87
  flex: 1;
88
88
  }
89
- .px-alert .px-alert__content .px-alert__title[data-v-d61a85f3] {
89
+ .px-alert .px-alert__content .px-alert__title[data-v-772da9f8] {
90
90
  font-size: var(--px-alert-title-font-size);
91
91
  line-height: 1.5;
92
92
  font-weight: 400;
93
93
  }
94
- .px-alert .px-alert__content .px-alert__title.with-desc[data-v-d61a85f3] {
94
+ .px-alert .px-alert__content .px-alert__title.with-desc[data-v-772da9f8] {
95
95
  font-size: var(--px-alert-title-font-size-with-desc);
96
96
  font-weight: 500;
97
97
  margin-bottom: 4px;
98
98
  }
99
- .px-alert .px-alert__content .px-alert__description[data-v-d61a85f3] {
99
+ .px-alert .px-alert__content .px-alert__description[data-v-772da9f8] {
100
100
  font-size: var(--px-alert-desc-font-size);
101
101
  margin: 0;
102
102
  line-height: 1.4;
103
103
  opacity: 0.9;
104
104
  }
105
105
  /* Close button - pixel style */
106
- .px-alert .px-alert__content .px-alert__close[data-v-d61a85f3] {
106
+ .px-alert .px-alert__content .px-alert__close[data-v-772da9f8] {
107
107
  font-size: var(--px-font-size-large);
108
108
  opacity: 1;
109
109
  position: absolute;
@@ -113,182 +113,182 @@
113
113
  padding: 2px;
114
114
  transition: none;
115
115
  }
116
- .px-alert .px-alert__content .px-alert__close[data-v-d61a85f3]:hover {
116
+ .px-alert .px-alert__content .px-alert__close[data-v-772da9f8]:hover {
117
117
  transform: translate(-1px, -1px);
118
118
  }
119
- .px-alert .px-alert__content .px-alert__close[data-v-d61a85f3]:active {
119
+ .px-alert .px-alert__content .px-alert__close[data-v-772da9f8]:active {
120
120
  transform: translate(1px, 1px);
121
121
  }
122
- .px-alert .px-alert__content .px-alert__close[data-v-d61a85f3] .px-icon {
122
+ .px-alert .px-alert__content .px-alert__close[data-v-772da9f8] .px-icon {
123
123
  vertical-align: top;
124
124
  }
125
125
  /* Light theme close button */
126
- .px-alert .px-alert__content.px-alert__light .px-alert__close[data-v-d61a85f3] {
126
+ .px-alert .px-alert__content.px-alert__light .px-alert__close[data-v-772da9f8] {
127
127
  color: var(--px-text-color-secondary);
128
128
  }
129
- .px-alert .px-alert__content.px-alert__light .px-alert__close[data-v-d61a85f3]:hover {
129
+ .px-alert .px-alert__content.px-alert__light .px-alert__close[data-v-772da9f8]:hover {
130
130
  color: var(--px-text-color-primary);
131
131
  }
132
132
  /* Dark theme close button */
133
- .px-alert .px-alert__content.px-alert__dark .px-alert__close[data-v-d61a85f3] {
133
+ .px-alert .px-alert__content.px-alert__dark .px-alert__close[data-v-772da9f8] {
134
134
  color: rgba(255, 255, 255, 0.7);
135
135
  }
136
- .px-alert .px-alert__content.px-alert__dark .px-alert__close[data-v-d61a85f3]:hover {
136
+ .px-alert .px-alert__content.px-alert__dark .px-alert__close[data-v-772da9f8]:hover {
137
137
  color: var(--px-color-white);
138
138
  }
139
139
  /* Center text alignment */
140
- .px-alert.text-center[data-v-d61a85f3] {
140
+ .px-alert.text-center[data-v-772da9f8] {
141
141
  justify-content: center;
142
142
  }
143
- .px-alert.text-center span[data-v-d61a85f3],
144
- .px-alert.text-center p[data-v-d61a85f3] {
143
+ .px-alert.text-center span[data-v-772da9f8],
144
+ .px-alert.text-center p[data-v-772da9f8] {
145
145
  text-align: center;
146
146
  }
147
147
  /* Outline variant - solid border, transparent bg, no pixel shadow */
148
- .px-alert.is-outline[data-v-d61a85f3] {
148
+ .px-alert.is-outline[data-v-772da9f8] {
149
149
  border: 2px solid var(--px-alert-border-color);
150
150
  filter: none;
151
151
  }
152
- .px-alert.is-outline[data-v-d61a85f3]::before {
152
+ .px-alert.is-outline[data-v-772da9f8]::before {
153
153
  display: none;
154
154
  }
155
- .px-alert.is-outline[data-v-d61a85f3]::after {
155
+ .px-alert.is-outline[data-v-772da9f8]::after {
156
156
  clip-path: none;
157
157
  inset: 0;
158
158
  background: var(--px-alert-bg-color);
159
159
  }
160
160
  /* Dash variant - dashed border, light bg, no pixel shadow */
161
- .px-alert.is-dash[data-v-d61a85f3] {
161
+ .px-alert.is-dash[data-v-772da9f8] {
162
162
  border: 2px dashed var(--px-alert-border-color);
163
163
  filter: none;
164
164
  }
165
- .px-alert.is-dash[data-v-d61a85f3]::before {
165
+ .px-alert.is-dash[data-v-772da9f8]::before {
166
166
  display: none;
167
167
  }
168
- .px-alert.is-dash[data-v-d61a85f3]::after {
168
+ .px-alert.is-dash[data-v-772da9f8]::after {
169
169
  clip-path: none;
170
170
  inset: 0;
171
171
  background: var(--px-alert-bg-color);
172
172
  }
173
173
  /* Animation - instant for pixel feel */
174
- .px-alert-fade-enter-from[data-v-d61a85f3],
175
- .px-alert-fade-leave-to[data-v-d61a85f3] {
174
+ .px-alert-fade-enter-from[data-v-772da9f8],
175
+ .px-alert-fade-leave-to[data-v-772da9f8] {
176
176
  opacity: 0;
177
177
  transform: translateY(-8px);
178
178
  }
179
- .px-alert-fade-enter-active[data-v-d61a85f3],
180
- .px-alert-fade-leave-active[data-v-d61a85f3] {
179
+ .px-alert-fade-enter-active[data-v-772da9f8],
180
+ .px-alert-fade-leave-active[data-v-772da9f8] {
181
181
  transition: opacity 0.15s, transform 0.15s;
182
182
  }
183
183
  /* Type variants - Light theme */
184
- .px-alert__success.px-alert__light[data-v-d61a85f3] {
184
+ .px-alert__success.px-alert__light[data-v-772da9f8] {
185
185
  --px-alert-text-color: var(--px-color-success-dark);
186
186
  --px-alert-bg-color: var(--px-color-success-light-9);
187
187
  --px-alert-border-color: var(--px-color-success);
188
188
  --px-alert-shadow-color: var(--px-color-success-dark);
189
189
  }
190
- .px-alert__success.px-alert__dark[data-v-d61a85f3] {
190
+ .px-alert__success.px-alert__dark[data-v-772da9f8] {
191
191
  --px-alert-text-color: var(--px-color-white);
192
192
  --px-alert-bg-color: var(--px-color-success);
193
193
  --px-alert-border-color: var(--px-color-success-dark);
194
194
  --px-alert-shadow-color: var(--px-color-success-dark);
195
195
  }
196
196
  /* Pixel highlight effect for dark theme */
197
- .px-alert__success.px-alert__dark[data-v-d61a85f3]::after {
197
+ .px-alert__success.px-alert__dark[data-v-772da9f8]::after {
198
198
  box-shadow: inset 2px 2px 0 0 rgba(255, 255, 255, 0.15);
199
199
  }
200
200
  /* Outline variant for type */
201
- .px-alert__success.is-outline[data-v-d61a85f3] {
201
+ .px-alert__success.is-outline[data-v-772da9f8] {
202
202
  --px-alert-text-color: var(--px-color-success);
203
203
  --px-alert-bg-color: transparent;
204
204
  --px-alert-border-color: var(--px-color-success);
205
205
  }
206
206
  /* Dash variant for type */
207
- .px-alert__success.is-dash[data-v-d61a85f3] {
207
+ .px-alert__success.is-dash[data-v-772da9f8] {
208
208
  --px-alert-text-color: var(--px-color-success);
209
209
  --px-alert-bg-color: var(--px-color-success-light-9);
210
210
  --px-alert-border-color: var(--px-color-success);
211
211
  }
212
- .px-alert__warning.px-alert__light[data-v-d61a85f3] {
212
+ .px-alert__warning.px-alert__light[data-v-772da9f8] {
213
213
  --px-alert-text-color: var(--px-color-warning-dark);
214
214
  --px-alert-bg-color: var(--px-color-warning-light-9);
215
215
  --px-alert-border-color: var(--px-color-warning);
216
216
  --px-alert-shadow-color: var(--px-color-warning-dark);
217
217
  }
218
- .px-alert__warning.px-alert__dark[data-v-d61a85f3] {
218
+ .px-alert__warning.px-alert__dark[data-v-772da9f8] {
219
219
  --px-alert-text-color: var(--px-color-white);
220
220
  --px-alert-bg-color: var(--px-color-warning);
221
221
  --px-alert-border-color: var(--px-color-warning-dark);
222
222
  --px-alert-shadow-color: var(--px-color-warning-dark);
223
223
  }
224
224
  /* Pixel highlight effect for dark theme */
225
- .px-alert__warning.px-alert__dark[data-v-d61a85f3]::after {
225
+ .px-alert__warning.px-alert__dark[data-v-772da9f8]::after {
226
226
  box-shadow: inset 2px 2px 0 0 rgba(255, 255, 255, 0.15);
227
227
  }
228
228
  /* Outline variant for type */
229
- .px-alert__warning.is-outline[data-v-d61a85f3] {
229
+ .px-alert__warning.is-outline[data-v-772da9f8] {
230
230
  --px-alert-text-color: var(--px-color-warning);
231
231
  --px-alert-bg-color: transparent;
232
232
  --px-alert-border-color: var(--px-color-warning);
233
233
  }
234
234
  /* Dash variant for type */
235
- .px-alert__warning.is-dash[data-v-d61a85f3] {
235
+ .px-alert__warning.is-dash[data-v-772da9f8] {
236
236
  --px-alert-text-color: var(--px-color-warning);
237
237
  --px-alert-bg-color: var(--px-color-warning-light-9);
238
238
  --px-alert-border-color: var(--px-color-warning);
239
239
  }
240
- .px-alert__info.px-alert__light[data-v-d61a85f3] {
240
+ .px-alert__info.px-alert__light[data-v-772da9f8] {
241
241
  --px-alert-text-color: var(--px-color-info-dark);
242
242
  --px-alert-bg-color: var(--px-color-info-light-9);
243
243
  --px-alert-border-color: var(--px-color-info);
244
244
  --px-alert-shadow-color: var(--px-color-info-dark);
245
245
  }
246
- .px-alert__info.px-alert__dark[data-v-d61a85f3] {
246
+ .px-alert__info.px-alert__dark[data-v-772da9f8] {
247
247
  --px-alert-text-color: var(--px-color-white);
248
248
  --px-alert-bg-color: var(--px-color-info);
249
249
  --px-alert-border-color: var(--px-color-info-dark);
250
250
  --px-alert-shadow-color: var(--px-color-info-dark);
251
251
  }
252
252
  /* Pixel highlight effect for dark theme */
253
- .px-alert__info.px-alert__dark[data-v-d61a85f3]::after {
253
+ .px-alert__info.px-alert__dark[data-v-772da9f8]::after {
254
254
  box-shadow: inset 2px 2px 0 0 rgba(255, 255, 255, 0.15);
255
255
  }
256
256
  /* Outline variant for type */
257
- .px-alert__info.is-outline[data-v-d61a85f3] {
257
+ .px-alert__info.is-outline[data-v-772da9f8] {
258
258
  --px-alert-text-color: var(--px-color-info);
259
259
  --px-alert-bg-color: transparent;
260
260
  --px-alert-border-color: var(--px-color-info);
261
261
  }
262
262
  /* Dash variant for type */
263
- .px-alert__info.is-dash[data-v-d61a85f3] {
263
+ .px-alert__info.is-dash[data-v-772da9f8] {
264
264
  --px-alert-text-color: var(--px-color-info);
265
265
  --px-alert-bg-color: var(--px-color-info-light-9);
266
266
  --px-alert-border-color: var(--px-color-info);
267
267
  }
268
- .px-alert__danger.px-alert__light[data-v-d61a85f3] {
268
+ .px-alert__danger.px-alert__light[data-v-772da9f8] {
269
269
  --px-alert-text-color: var(--px-color-danger-dark);
270
270
  --px-alert-bg-color: var(--px-color-danger-light-9);
271
271
  --px-alert-border-color: var(--px-color-danger);
272
272
  --px-alert-shadow-color: var(--px-color-danger-dark);
273
273
  }
274
- .px-alert__danger.px-alert__dark[data-v-d61a85f3] {
274
+ .px-alert__danger.px-alert__dark[data-v-772da9f8] {
275
275
  --px-alert-text-color: var(--px-color-white);
276
276
  --px-alert-bg-color: var(--px-color-danger);
277
277
  --px-alert-border-color: var(--px-color-danger-dark);
278
278
  --px-alert-shadow-color: var(--px-color-danger-dark);
279
279
  }
280
280
  /* Pixel highlight effect for dark theme */
281
- .px-alert__danger.px-alert__dark[data-v-d61a85f3]::after {
281
+ .px-alert__danger.px-alert__dark[data-v-772da9f8]::after {
282
282
  box-shadow: inset 2px 2px 0 0 rgba(255, 255, 255, 0.15);
283
283
  }
284
284
  /* Outline variant for type */
285
- .px-alert__danger.is-outline[data-v-d61a85f3] {
285
+ .px-alert__danger.is-outline[data-v-772da9f8] {
286
286
  --px-alert-text-color: var(--px-color-danger);
287
287
  --px-alert-bg-color: transparent;
288
288
  --px-alert-border-color: var(--px-color-danger);
289
289
  }
290
290
  /* Dash variant for type */
291
- .px-alert__danger.is-dash[data-v-d61a85f3] {
291
+ .px-alert__danger.is-dash[data-v-772da9f8] {
292
292
  --px-alert-text-color: var(--px-color-danger);
293
293
  --px-alert-bg-color: var(--px-color-danger-light-9);
294
294
  --px-alert-border-color: var(--px-color-danger);